hi, I have the next code to set a smooth transition from the bottom up, of ‘tools and extensions’, when I set 0px to ‘gap’ rule, the CPU reach 100% and the PC just die until I remove the code, I think it is caused for the transform rule, I changed the rule: transform: translateY(10px) !important; to a negative value and that solve the issue, but the transition is different, and I want to keep it.

The code is just this:

/* Hide tools except for the last one 'configuration' */

.actions-list[orientation="vertical"]:not(:hover) moz-button[type="icon ghost"]:not(:last-child),
.actions-list[orientation="horizontal"]:not(:hover) moz-button[type="icon ghost"]:not(:first-child) {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    visibility: collapse !important;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease, transform 0.4s ease;
}

/* Show all tools when 'hover' */

.actions-list[orientation="vertical"]:is(:hover) moz-button[type="icon ghost"]:not(:last-child),
.actions-list[orientation="horizontal"]:is(:hover) moz-button[type="icon ghost"]:not(:first-child) {
    opacity: 1 !important;
    transform: translateY(0px) !important;
    visibility: visible !important;
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease, transform 0.4s ease;
}

.tools-and-extensions[orientation="horizontal"] {
    gap: 0px !important;       
}
  • MrOtherGuyM
    1·
    2 months ago

    You do mean the buttons are that is at the bottom of the sidebar when vertical tabs are enabled, right?

    Your code doesn’t cause any cpu issue on my system, but I would bet that if it does, it’s because your code makes the buttons appear and reappear causing Firefox to constantly compute new layout and update the elements accordingly.

    Tough to say without being able to reproduce the problem, but some possible things that might help would be to use visibility: hidden instead of collapse.

    • GodieOP
      1·
      2 months ago

      I forgot to mention that I’m testing the code in Developer-edition new changes arrived there. I will check if other of my code, with the code posted here, makes the issue happens.

      • MrOtherGuyM
        1·
        2 months ago

        FYI, I just tested this in Firefox Nightly and I don’t see any abnormal cpu use with that either.

        I’ll take that back. It didn’t happen at first but after a short while it totally trashed my cpu and made that Firefox window mostly unusable. I tried to profile it to see what’s eating the cpu but couldn’t really find the culprit - what I did see though, is that the “overflow” button in the sidebar was flickering like crazy - this suggests that Firefox is constantly computing new the layout for the sidebar.

        • GodieOP
          1·
          2 months ago

          hi, I notice the issue happens when the #sidebar-main is ‘expanded’, when collapsed the problem doesn’t appear, I removed the code gap: 0px !important; and that solve the issue, but that space between the buttons makes me nervous jeje I tried delete too that ‘overflow’ button to remove the ‘flickering’ but the problem persist.

    • GodieOP
      1·
      2 months ago

      I’m personally adding that code for a smooth transition, so I don’t want to remove it.