Multi-account containers new tab context selection menu display issue about firefox-ui-fix

[black7375]

I'll release 1.0 when the three high-priority issues are resolved.

• #19
• #26
• #29

[SimYunSup]

There is no bugs when I tested in same environment(Windows/System Default).
@paszklar Can you add video that bug starts?

bug_replay1.mp4

[SimYunSup]

@black7375 I think this repository have to versioning for user like this issue.

[guyman70718]

@guyman70718 Failed to reproduce bug. Any information that can help you solve it?

Well both machines are running Windows 10 x64 with Firefox 89.0 stable branch. Both machines are using the photon-style branch of Lepton. On the machine where I get the weird collapsed context menu, I can still right click the menu and have it work but if I hold down it is collapsed. Any other info you think could help? I can provide a video if you'd like...

Edit: just tested dragging tabs around, and the machine where container tabs works fine the tabs dont sink into the URL bar like the other computer. Both are using compact style.

[guyman70718]

Please delete this code and try

I could not find the code you mentioned but I saw that you recently updated the photon style css again, so I updated to the latest version and the issue is now fixed, along with dragging tabs. Thanks for all the work you are putting into this theme, I much prefer it to proton

[black7375]

There may be a problem with forcing the size to be specified.

[paszklar]

I just downloaded the latest version and whatever the problem was, it is gone now.

[paszklar]

Here's the video

2021-06-02.11-54-57.mp4

and the userChrome.css I was using that causes the issue, not sure which commit that was:

  /** Darkmode - Color lighter ************************************************/
  :root[style*="--lwt-accent-color:rgb(12, 12, 13); --lwt-text-color:rgba(249, 249, 250);"] {
    --toolbar-bgcolor: rgba(43, 42, 51, 5) !important; /* Original: rgba(43, 42, 51, 1) */
  }

  /** Root - Reduce Padding ***************************************************/
  :root {
    /* Tab Bar */
    --proton-tab-block-margin: 0px !important; /* Original: 4px */
    --tab-border-radius:       0px !important; /* Original: 4px */
    --inline-tab-padding:      6px !important; /* Original: 8px */

    /* Panel */
    --arrowpanel-menuicon-padding: 8px;
    --arrowpanel-menuitem-margin: 0 var(--arrowpanel-menuicon-padding) !important; /* Original: 0 8px */
    --arrowpanel-menuitem-padding: 5px !important; /* Original: 8px */
    --arrowpanel-padding:        0.8em !important; /* Original: 16px or .cui-widget-panel, .cui-widget-panel::part(arrowcontent) => 4px 0 */
  }

  :root[uidensity=compact] {
    /* Tool Bar */
    --toolbarbutton-outer-padding: 2px !important; /* Original: 3px, General is 2px */

    /* Panel */
    --arrowpanel-menuitem-padding: 3px  !important; /* Original: 8px */
  }

  :root[uidensity=touch] {
    /* Tab Bar - Like Original */
    --proton-tab-block-margin: 4px !important; /* Original: 4px */
    --inline-tab-padding:      8px !important; /* Original: 8px */

    /* Panel - Like Original */
    --arrowpanel-menuitem-padding: 8px  !important; /* Original: 8px */
  }

  /** Tab Bar - Reduce Width, Show more tabs **********************************/
  .titlebar-spacer[type="pre-tabs"] {
    width: 30px !important; /* Original: 40px */
  }
  .titlebar-spacer[type="post-tabs"] {
    width: 25px !important; /* Original: 40px */
  }

  :root {
    --newtab-button-minus-width-padding: 2px;
    --newtab-button-width-padding: calc(var(--toolbarbutton-inner-padding) - var(--newtab-button-minus-width-padding));
  }
  #new-tab-button     > .toolbarbutton-icon,
  #alltabs-button     > .toolbarbutton-badge-stack {
    /* Original: calc(2 * var(--toolbarbutton-inner-padding) + 16px) */
    width: calc(2 * var(--newtab-button-width-padding) + 16px) !important;

    /* Original: --toolbarbutton-inner-padding */
    padding-left:  var(--newtab-button-width-padding) !important;
    padding-right: var(--newtab-button-width-padding) !important;
  }

  :root[uidensity=compact] #tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
    margin-inline-start: 0 !important;
  }

  :root:not([uidensity=touch]) #tabbrowser-arrowscrollbox {
    --scrollbtn-inner-padding: 1px;
    --scrollbtn-outer-padding: 3px;
  }
  #scrollbutton-up {
    padding-left:  var(--scrollbtn-inner-padding, 4px) !important; /* Original: 4px */
    padding-right: var(--scrollbtn-outer-padding, 4px) !important;
  }
  #scrollbutton-down {
    padding-left:  var(--scrollbtn-outer-padding, 4px) !important; /* Original: 4px */
    padding-right: var(--scrollbtn-inner-padding, 4px) !important;
  }

  :root:not([uidensity=touch]) #new-tab-button, #alltabs-button {
    --toolbarbutton-outer-padding: 1px; /* Original: 2px*/
  }

  /* Tab - Max Size */
  .tabbrowser-tab[fadein]:not([pinned]):not([style*="max-width"]) {
    max-width: 225px !important;
  }

  /* neighbouring tabs should "pinch" together */
  .tabbrowser-tab {
    padding-inline: 1px !important;
  }

  .tabbrowser-tab:not([last-visible-tab]) {
    margin-inline-end: -.5px !important;
  }

  /** Tab Bar - Reduce Height, Show more contents *****************************/
  :root:not([uidensity=touch]) #TabsToolbar {
    --toolbarbutton-inner-padding: 9px; /* Original: calc((var(--tab-min-height) - 16px) / 2) = 10px */
  }

  /* Toolbar Height */
  #TabsToolbar * {
    max-height: 34px !important;
  }
  :root[uidensity=compact] #TabsToolbar * {
    max-height: 30px !important;
  }
  :root[uidensity=touch] #TabsToolbar * {
    max-height: 42px !important;
  }

  /* Top Margin */
  .tab-background, .tab-content {
    margin-top: 0 !important;
  }

  /* New Tab Icon - Size Fix */
  :root:not([uidensity=rootuidensitytouch]) #tabs-newtab-button > .toolbarbutton-icon  {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Scroll Button - Size Fix */
  #tabbrowser-arrowscrollbox {
    --scrollbtn-vertical-padding: 3px;
  }
  #scrollbutton-up,
  #scrollbutton-down {
    /* Original: var(--toolbarbutton-inner-padding) calc(var(--toolbarbutton-inner-padding) - 6px) = 9px */
    /* https://github.com/mozilla/gecko-dev/blob/71b1259afd1cdaf41871ae675c2dadb967ea5b34/browser/themes/shared/toolbarbuttons.inc.css#L142 */
    padding-top:    var(--scrollbtn-vertical-padding) !important;
    padding-bottom: var(--scrollbtn-vertical-padding) !important;
  }

  :root[tabsintitlebar]:not([uidensity=compact]) #toolbar-menubar[autohide="true"] {
    height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size) - 2px); /* Compact: 28px, Normal: 33px, Touch: 38px */
  }

  /* Pinned Tab - Titlechanged Indicator position fix */
  :root:not([uidensity=touch]) .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
  :root:not([uidensity=touch]) .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
    /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
    background-position-y: bottom calc(4.5px + var(--tabs-navbar-shadow-size)) !important;
  }
  :root[uidensity=compact] .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
  :root[uidensity=compact] .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
    /* Original: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); */
    background-position-y: bottom calc(.5px + var(--tabs-navbar-shadow-size)) !important;
  }

  /** Tab Bar - Connect to window *********************************************/
  .tab-background {
    border-radius: var(--tab-border-radius) var(--tab-border-radius) 0px 0px !important;
    margin-bottom: 0px !important;
  }

  .tab-content {
    margin-top: var(--proton-tab-block-margin);
  }

  .tab-stack {
    margin-top:    0px !important;
    margin-bottom: 0px !important;
  }

  /** Selected Tab - Color like toolbar ***************************************/
  #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected="true"]:-moz-lwtheme, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected="true"]:-moz-lwtheme {
    /* Original: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none)
 */
    background-image: linear-gradient(var(--toolbar-bgcolor, transparent), var(--toolbar-bgcolor, transparent)), linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), var(--lwt-header-image, none) !important;
  }


  /* Multi Selected Color */
  .tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst.proton:not([bursting]) {
    background: color-mix(in srgb, currentColor 65%, transparent);
    opacity: .3;
  }
  #TabsToolbar[brighttext] .tab-background[multiselected="true"]:not([selected="true"]) > .tab-loading-burst.proton:not([bursting]) {
    opacity: .15;
  }

  /** Selected Tab - Color like toolbar ***************************************/
  .tab-context-line {
    display: -moz-inline-box !important;
    height: 2px !important;
    border-radius: var(--tab-border-radius, 4px) var(--tab-border-radius, 4px) 0 0 !important;
  }

  .tabbrowser-tab:is([selected], [multiselected]) .tab-context-line {
    background-color: rgb(10, 132, 255) !important; /* Photon like color
                                                     Default: var(--tab-line-color, rgb(10, 132, 255))
                                                     Automatic: color-mix(in srgb, var(--button-primary-bgcolor) 80%, transparent) */
  }

  .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
    background-color: rgba(0,0,0,.2) !important;
    opacity: 1 !important;
    transform: none !important;
  }
  #TabsToolbar[brighttext] .tabbrowser-tab:hover:not([selected="true"], [multiselected]) > .tab-stack > .tab-background > .tab-context-line {
    background-color: rgba(255,255,255,.2) !important;
  }

  .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
    opacity: 0 !important;
    transform: scaleX(0) !important;
  }
  .tabbrowser-tab:not([selected="true"], [multiselected]) .tab-context-line {
    transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function) !important; /* --animation-easing-function: cubic-bezier(.07, .95, 0, 1); */
  }

  /* Container Tab */
  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-background > .tab-context-line {
    margin: unset !important;
  }

  /** Selected Tab - Box Shadow ***********************************************/
  #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[visuallyselected="true"] > .tab-stack > .tab-background:-moz-lwtheme {
    /* Origina: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9))
       Bright: 0 0 1px var(--tab-line-color, rgba(128,128,142,0.9)), 0 0 4px rgba(128,128,142,0.5) */
    box-shadow: 0 0 1px var(--toolbar-color) !important;
  }
  #TabsToolbar[brighttext] #tabbrowser-tabs:not([noshadowfortests]) .tabbrowser-tab[multiselected]:not([visuallyselected]) > .tab-stack > .tab-background:-moz-lwtheme {
    box-shadow: 0 0 1px color-mix(in srgb, var(--toolbar-color) 80%, transparent)  !important;
  }

  /* Pinned Tab - tabbrowser-arrowscrollbox overflowing */
  #tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
    z-index: 0 !important;
  }

  /** Selected Tab - Bottom Rounded Corner ************************************/
  #tabbrowser-tabs {
    --tab-corner-rounding: 5px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
    --tab-corner-padding:  1px;
  }

  :root[lwtheme="true"] tab[visuallyselected] > stack::before,
  :root[lwtheme="true"] tab[visuallyselected] > stack::after {
    /* Box */
    content: "" !important;
    display: block !important;
    position: absolute !important;
    z-index: 1 !important;

    /* Shape */
    width:  var(--tab-corner-rounding) !important;
    height: 100% !important;

    /* Color */
    fill:   var(--toolbar-bgcolor) !important;
    stroke: var(--tabs-border-color, transparent) !important;
    -moz-context-properties: fill, stroke !important;

    background-image: url(./icons/tab-bottom-corner.svg);
    background-size:   var(--tab-corner-rounding);
    background-repeat: no-repeat;
    background-position-y: bottom;
  }

  :root[lwtheme="true"] tab[visuallyselected] > stack::before {
    left: calc(var(--tab-corner-padding) - var(--tab-corner-rounding)) !important;
  }
  :root[lwtheme="true"] tab[visuallyselected] > stack::after {
    left:  auto;
    right: calc(var(--tab-corner-padding) - var(--tab-corner-rounding));
    transform: scaleX(-1) !important;
  }

  /** Unselected Tab - Divide line ********************************************/
  .tabbrowser-tab::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before {
    content: "";
    display: block;
  }
  .tabbrowser-tab::after, .tabbrowser-tab::before {
    border-left: 1px solid var(--lwt-background-tab-separator-color, currentColor) !important;
    margin-block: 5px 4px !important;
    opacity: 0.3 !important;
  }
  .tabbrowser-tab::before {
    margin-inline-start: -1px !important;
  }

  :root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide="true"] + #TabsToolbar .tabbrowser-tab::after, .tabbrowser-tab:hover::after, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforehovered]::after, .tabbrowser-tab[multiselected]::after, #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[before-multiselected]::after {
    margin-top: var(--tabs-top-border-width) !important;
    margin-bottom: 0 !important;
  }

  /* Selected - Hide */
  #tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[beforeselected-visible]::after, #tabbrowser-tabs[movingtab] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[visuallyselected]::before, .tabbrowser-tab[visuallyselected]::after {
    border-color: var(--tabs-border-color) !important;
    margin-top: 0 !important;
    margin-bottom: var(--tabs-navbar-shadow-size) !important;
    opacity: 1 !imporant;
  }

  /** Clipped tabs - Letters cleary *******************************************/
  #tabbrowser-tabs[closebuttons=activetab] .tab-content:not([pinned]) {
    padding-inline-start: 8px !important;
  }

  #tabbrowser-tabs[closebuttons=activetab] .tabbrowser-tab:not([visuallyselected]) .tab-close-button {
    visibility: collapse !important;
  }

  #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="ltr"]:not([pinned]),
  #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(ltr):not([pinned]) {
    mask-image: linear-gradient(to right, black 70%, transparent) !important;
  }

  #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow][labeldirection="rtl"]:not([pinned]),
  #tabbrowser-tabs[closebuttons=activetab] .tab-label-container[textoverflow]:not([labeldirection]):-moz-locale-dir(rtl):not([pinned]) {
    mask-image: linear-gradient(to left, black 70%, transparent) !important;
  }

  /** Sound Tab - Hide Label **************************************************/
  .tab-secondary-label:is([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]){
    display: none !important;
  }

  /** Sound Tab - Show with Favicons ******************************************/
  /* Makes the favicons always visible (also on hover) */
  .tab-icon-image:not([pinned]){
    opacity: 1 !important
  }

  /* Makes the speaker icon to always appear if the tab is playing (not only on hover) */
  .tab-icon-overlay:not([crashed]),
  .tab-icon-overlay[pinned][crashed][selected] {
    /* Position */
    top: -3.5px !important;
    inset-inline-end: -9px !important;
    z-index: 1 !important;

    /* Shape */
    padding: 1.5px !important;
    border-radius: 10px !important;
    width:  17px !important;
    height: 17px !important;
  }
  .tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
    /* Color */
    color:  currentColor !important;
    stroke: transparent !important;
    background: transparent !important;
    fill-opacity: 0.8 !important;
    opacity: 1 !important;
  }
  .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
    margin-inline-end: 9.5px !important;
  }

  /* None exist favicon */
  .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing],[crashed]) {
    top: 0 !important;
    inset-inline-end: 0 !important;
    margin-inline-end: 5.5px !important;
    padding: 2px 0 !important;
  }

  /* Busy - Show */
  .tab-throbber[busy], .tab-icon-pending[busy] {
    opacity: 1 !important;
  }

  /* Busy - Overlay Position */
  .tabbrowser-tab:not([pinned])[busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {
    transform: translateX(-.5px) translateY(-2.5px);
  }
  .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing],[crashed])[busy] {
    top: -3.5px !important;
    inset-inline-end: -9px !important;
    margin-inline-end: 9.5px !important;
    padding: 1.5px !important;
  }

  /* Hover */
  .tab-icon-overlay:not([crashed])[soundplaying]:hover,
  .tab-icon-overlay:not([crashed])[muted]:hover,
  .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
    color:  var(--toolbar-bgcolor, white) !important;
    stroke: var(--lwt-tab-text, var(--toolbar-color)) !important;
    background-color: var(--lwt-tab-text, var(--toolbar-color)) !important;
    fill-opacity: 0.95 !important;
  }

  #TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[soundplaying]:hover,
  #TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[muted]:hover,
  #TabsToolbar[brighttext] .tab-icon-overlay:not([crashed])[activemedia-blocked]:hover {
    color: var(--toolbar-bgcolor, black) !important;
  }

  .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing],[crashed]):hover {
    padding: 0 !important;
  }

  /** PictureInPicture Tab - Show PIP Icon ************************************/
  .tab-icon-sound[pictureinpicture]:not([pinned]) {
    /* Shape */
    display: -moz-inline-box !important;
    width:  14px;
    height: 14px;
    -moz-box-ordinal-group: 2 !important;

    /* Color */
    fill: currentColor;
    opacity: 0.8;
    -moz-context-properties: fill;

    /* Icon */
    list-style-image: url(chrome://global/skin/media/picture-in-picture-open.svg);
  }
  .tab-icon-sound[pictureinpicture]:not([pinned])[selected] {
    opacity: 0.95;
  }

  /* Close Button's position */
  .tabbrowser-tab[pictureinpicture]:not([pinned]) .tab-close-button {
    margin-left: 7px !important;
    -moz-box-ordinal-group: 2 !important;
  }
  .tabbrowser-tab[pictureinpicture]:not([pinned]):hover .tab-close-button {
    margin-left: 0px !important;
  }

  /** Pinned Tab - Replace Favicon to Close Button at Selected ****************/
  .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-close-button {
    display: -moz-box !important;
    -moz-box-ordinal-group: 0 !important;
    transform: translateX(-1px);

    /* Looks like hover */
    width: 24px !important;
    height: 24px !important;
    padding: 7px !important;
  }
  .tabbrowser-tab[pinned][visuallyselected] .tab-icon-image {
    display: none !important;
  }

  /* Left Padding - Assume the icon size is 17px */
  .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-content {
    padding-inline: 7.5px !important; /* Original: 10px */
  }

  /* Right Padding - Assume the icon size is 17px */
  .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-stack {
    width: 8.5px !important;
  }
  .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-content {
    padding-inline-end: 0px !important;
  }

  .tabbrowser-tab[pinned][visuallyselected][busy] .tab-content {
    padding-inline-end: 9.5px !important;
  }
  .tabbrowser-tab[pinned][busy] .tab-content {
    padding-inline: 10.5px !important;
  }

  /* Sound Tab - Don't move overlay */
  .tabbrowser-tab[pinned][busy] .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked]) {
    transform: translateX(.5px) translateY(-2px) !important;
  }

  .tabbrowser-tab[pinned][visuallyselected]:not([busy]) .tab-icon-overlay {
    transform: translateX(-9px) translateY(-2px) !important;
    left: 0 !important;
  }

  /** Container Tab - Color line at icon's bottom *****************************/
  .tab-icon-image {
    box-sizing: content-box;
    padding: 3px 0;

    border-bottom: 2px solid var(--identity-icon-color);
  }

  /* None exist favicon & Pinned to select */
  .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):not([soundplaying], [muted], [activemedia-blocked]) .tab-content::before,
  .tabbrowser-tab[pinned][visuallyselected]:not([busy]):not(:hover) .tab-content::before {
    /* Box Model */
    content: '';
    display: block;
    position: absolute !important;
    transition: 0.2s !important;
    transform: translateY(10px) !important;

    /* Shape */
    border-bottom: 2px solid var(--identity-icon-color);
    width: 16px;
  }
  .tabbrowser-tab:not([image]):not([pinned], [sharing], [crashed]):not([soundplaying], [muted], [activemedia-blocked]) .tab-content::before {
    transform: translateY(10px) !important; /* None exist favicon */
  }
  .tabbrowser-tab[pinned][visuallyselected]:not([busy]):not(:hover) .tab-content::before {
    transform: translateX(2.5px) translateY(10px) !important; /* Pinned to select */
  }

  /* None exist favicon - With Sound */
  .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]) {
    box-sizing: content-box;
    padding: 3px 0;

    border-radius: 0 !important;
    border-bottom: 2px solid var(--identity-icon-color);
  }
  .tabbrowser-tab:not([image]) .tab-icon-overlay:not([pinned], [sharing], [crashed]):is([soundplaying], [muted], [activemedia-blocked]):hover {
    padding: 0;

    border-radius: 10px !important;
    border-bottom: none;
  }

  /* Pinned Tab - Titlechanged Indicator override */
  .tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]) .tab-icon-image,
  .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) .tab-icon-image {
    border-bottom: 2px solid transparent !important;
  }

  .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]),
  .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
    /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
    --dotted-identity-image: radial-gradient(circle, var(--identity-icon-color), var(--identity-icon-color) 2px, transparent 2px);
    background-image: var(--dotted-identity-image), var(--dotted-identity-image), var(--dotted-identity-image) !important;
    background-position-x: 32%, 50%, 70% !important;
  }
  :root[uidensity=compact] .tabbrowser-tab:is([image], [pinned])[usercontextid] > .tab-stack > .tab-content[attention]:not([selected="true"]),
  :root[uidensity=compact] .tabbrowser-tab[usercontextid] > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
    /* Original: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); */
    var(--dotted-identity-image) !important;
    background-position-x: 30%, 50%, 70% !important;
  }

  /* Pinned Tab - Titlechanged & soundplaying */
  .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
  .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
    background-position-x: calc(32% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
  }
  :root[uidensity=compact] .tabbrowser-tab:is([image], [pinned])[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
  :root[uidensity=compact] .tabbrowser-tab[usercontextid]:is([soundplaying], [muted], [activemedia-blocked]) > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
    var(--dotted-identity-image) !important;
    background-position-x: calc(30% - 1px), calc(50% - 1px), calc(70% - 1px) !important;
  }

  /** Crashed Tab - Don't show Favicons ***************************************/
  .tab-icon-image[crashed] {
    display: none !important;
  }

  /** URL Bar - Reduce Padding ************************************************/
  :root:not([uidensity=touch]) #urlbar-container, #search-container {
    padding-block: 2px; /* Original: 4px */
    margin-inline: 5px; /* Original: 5px */
  }

  /* spread menu */
  :root[uidensity=compact] .urlbarView-row:not([type=tip], [type=dynamic]) {
    padding-block: 1px; /* [Compact, General]: 2px, Touch: 11px */
  }
  :root[uidensity=compact] #urlbar .search-one-offs:not([hidden]) {
    padding-block: 2px; /* [Compact, General]: 4px, Touch 11px */
  }

  /** BookMark Bar - Reduce Height ********************************************/
  :root[uidensity=compact] #PersonalToolbar toolbarbutton {
      margin-top: 0px; /* Original: 2px */
  }

  /** Menu - Reduce Padding ***************************************************/
  :root:not([uidensity=touch]) menupopup > menuitem, menupopup > menu {
    padding-block: 0.35em !important; /* Original: 0.5em */
  }
  :root:not([uidensity=touch]) .menu-text, .menu-iconic-text {
    padding-inline-end: 0 !important; /* Original: 2px */
  }
  :root:not([uidensity=touch]) .menupopup-arrowscrollbox {
    padding-block: 1px !important;    /* Original: 4px*/
  }
  :root:not([uidensity=touch]) #context-navigation:not([hidden]) {
    padding: 0 0 1px !important;      /* Original: 0 0 4px*/
  }
  :root:not([uidensity=touch]) .menu-right {
    margin-right: 6px !important;     /* Original: 12px */
  }

  :root[uidensity=compact] menupopup > menuitem, menupopup > menu {
    padding-block: 0.25em !important; /* Original: 0.5em */
  }

  /** Panel - Icons ***********************************************************/
  /* Padding */
  :root {
    --arrowpanel-menublank-padding: calc(var(--arrowpanel-menuicon-padding) * 2 + 8px) !important;
    --arrowpanel-menuimageblank-padding: calc(var(--arrowpanel-menuitem-padding) - 2px) !important;

    /* Blank Menu Left Padding */
    --arrowpanel-menuimageblank-padding-horizontal: calc(var(--arrowpanel-menublank-padding) - 3px) !important;
    --arrowpanel-menuitemblank-padding: calc(var(--arrowpanel-menuitem-padding) + 1px) !important;
  }

  .subviewbutton > .toolbarbutton-text {
    padding-inline-start: var(--arrowpanel-menuicon-padding) !important;
  }
  #panelMenu_bookmarksMenu .subviewbutton[disabled=true] .toolbarbutton-text,
  #appMenu_historyMenu     .subviewbutton[disabled=true] .toolbarbutton-text {
    padding-inline-start: var(--arrowpanel-menublank-padding) !important;
  }
  #appMenu-proton-update-banner .toolbarbutton-text {
    margin-inline-start: 0 !important;
  }

  #appMenu-multiView .subviewbutton::before,
  #appMenu-proton-update-banner::before {
    display: -moz-inline-box;
    margin-inline-end: var(--arrowpanel-menuicon-padding);
    width:  16px !important;
    height: 16px !important;
  }
  #appMenu-proton-update-banner {
    margin-bottom: 2px !important;
  }
  #appMenu-proton-update-banner::before {
    margin-inline-start: var(--arrowpanel-menuitem-padding) !important;
  }
  #appMenu-fxa-status2,
  #appMenu-zoom-controls2 {
    align-items: center;
    padding-top:    var(--arrowpanel-menuimageblank-padding) !important;
    padding-bottom: var(--arrowpanel-menuimageblank-padding) !important;
  }
  #appMenu-zoom-controls2::before {
    margin-inline-end: 0 !important;
  }

  /* Icons Color */
  #appMenu-multiView .subviewbutton::before,
  #appMenu-proton-update-banner::before,
  .subviewbutton > image {
    fill: currentColor !important;
    fill-opacity: var(--toolbarbutton-icon-fill-opacity) !important;
    -moz-context-properties: fill !important;
  }

  /* Panel - Main */
  #appMenu-proton-update-banner::before {
    content: url(chrome://browser/skin/whatsnew.svg);
  }
  #appMenu-fxa-status2::before { /* Don't exist img tag */
    content: url(chrome://browser/skin/fxa/avatar-empty.svg);
  }
  #appMenu-fxa-status2[fxastatus=signedin]::before { /* Don't exist img tag */
    display: none;
  }
  #appMenu-fxa-status2[fxastatus=signedin] #appMenu-fxa-label2::before {
    /* url("https://profile.accounts.firefox.com/v1/avatar/a") */
    content: '';
    border-radius: 50% !important;
    background-size: 16px !important;
    background-image: var(--avatar-image-url) !important;
  }

  #appMenu-new-tab-button2,           /* Seperate */
  #appMenu-passwords-button,          /* Seperate */
  #appMenu-extensions-themes-button,
  #appMenu-save-file-button2,         /* Seperate */
  #appMenu-find-button2,
  #appMenu-more-button2,              /* Seperate */
  #appMenu-help-button2,
  #appMenu-quit-button2               /* Seperate */ {
    padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
    padding-top: var(--arrowpanel-menuitemblank-padding) !important;
    padding-bottom: var(--arrowpanel-menuitemblank-padding) !important;
  }
  #appMenu-zoom-controls2 {
    padding-inline-start: var(--arrowpanel-menuimageblank-padding-horizontal) !important;
  }

  #appMenu-new-window-button2 {
    list-style-image: url(chrome://browser/skin/window.svg);
  }
  #appMenu-new-private-window-button2 {
    list-style-image: url(chrome://browser/skin/privateBrowsing.svg);
  }

  #appMenu-bookmarks-button{
    list-style-image: url(chrome://browser/skin/bookmark.svg);
  }
  #appMenu-history-button {
    list-style-image: url(chrome://browser/skin/history.svg);
  }
  #appMenu-downloads-button {
    list-style-image: url(chrome://browser/skin/downloads/downloads.svg);
  }

  #appMenu-print-button2 {
    list-style-image: url(chrome://global/skin/icons/print.svg);
  }

  #appMenu-settings-button {
    list-style-image: url(chrome://global/skin/icons/settings.svg);
  }

  /* Panel - Account */
  #PanelUI-fxa-menu-connect-device-button  .toolbarbutton-icon,
  #PanelUI-fxa-menu-account-signout-button .toolbarbutton-icon {
    width:  16px !important;
    height: 16px !important;
  }

  /* Default */
  #fxa-menu-avatar {
    display: -moz-inline-box !important;
    margin-inline-end: var(--arrowpanel-menuitem-padding);
  }

  .syncNowBtn {
    visibility: visible !important;
    -moz-box-ordinal-group: 1 !important;
    margin-inline-end: var(--arrowpanel-menuicon-padding);
  }
  #PanelUI-fxa-menu-setup-sync-button {
    list-style-image: url(chrome://browser/skin/sync.svg);
  }

  #PanelUI-fxa-menu-connect-device-button {
    list-style-image: url(chrome://browser/skin/fxa/add-device.svg);
  }
  #PanelUI-fxa-menu-sendtab-button {
    list-style-image: url(chrome://browser/skin/send-to-device.svg);
  }
  #PanelUI-fxa-menu-sync-prefs-button,
  #PanelUI-remotetabs-view-managedevices {
    list-style-image: url(chrome://global/skin/icons/settings.svg);
  }
  #PanelUI-fxa-menu-account-signout-button {
    list-style-image: url(chrome://browser/skin/sign-out.svg);
  }

  .PanelUI-remotetabs-notabsforclient-label {
    margin-inline-start: calc(var(--arrowpanel-menuicon-padding) + var(--arrowpanel-menuitem-padding)) !important;
    padding-inline-start: var(--arrowpanel-menublank-padding) !important;
  }

  /* Change Separator */
  #PanelUI-fxa-menu::before{
    content: "";
    display: -moz-box;
    border-bottom: 1px solid var(--panel-separator-color);
    margin: var(--panel-separator-margin);
    padding: 0;
  }
  #PanelUI-fxa-menu > :first-child{
    -moz-box-ordinal-group: 0;
  }
  #PanelUI-sign-out-separator {
    display: none;
  }
  .pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target[clientType=""] {
    list-style-image: url(chrome://browser/skin/send-to-device.svg);
  }
  .pageAction-sendToDevice-device.subviewbutton.sync-menuitem.sendtab-target:not([clientType]) {
    list-style-image: url(chrome://global/skin/icons/settings.svg);
  }

  /* Panel - Bookmark */
  #panelMenuBookmarkThisPage {
    list-style-image: url(chrome://browser/skin/bookmark-hollow.svg);
  }
  panelMenuBookmarkThisPage[starred] {
    list-style-image: url(chrome://browser/skin/bookmark.svg);
  }

  #panelMenu_searchBookmarks {
    list-style-image: url(chrome://global/skin/icons/search-glass.svg);
  }
  #panelMenu_viewBookmarksToolbar {
    list-style-image: url(chrome://browser/skin/bookmarks-toolbar.svg);
  }

  #panelMenu_showAllBookmarks {
    list-style-image: url(chrome://browser/skin/bookmark-star-on-tray.svg);
  }

  /* Panel - History */
  #appMenuRecentlyClosedTabs {
    list-style-image: url(chrome://browser/skin/tab.svg);
  }
  #appMenuRecentlyClosedWindows {
    list-style-image: url(chrome://browser/skin/window.svg);
  }
  #appMenuRestoreSession {
    list-style-image: url(chrome://browser/skin/restore-session.svg);
  }
  #appMenuClearRecentHistory {
    list-style-image: url(chrome://browser/skin/forget.svg);
  }

  #PanelUI-historyMore {
    list-style-image: url(chrome://browser/skin/history.svg);
  }

  #appMenu-library-recentlyClosedTabs {
    list-style-image: url(./icons/movetowindow-16.svg);
  }
  #appMenu-library-recentlyClosedWindows {
    list-style-image: url(chrome://browser/skin/restore-session.svg);
  }

  /* Panel - More tools */
  #appmenu-moreTools-button {
    list-style-image: url(chrome://browser/skin/customize.svg);
  }

  #appmenu-developer-tools-view  .subviewbutton:nth-child(1) {  /* Web Developer Tools */
    list-style-image: url(chrome://browser/skin/developer.svg);
  }
  #appmenu-developer-tools-view  .subviewbutton:nth-child(2) {  /* Task Manager */
    list-style-image: url(./icons/performance.svg);
  }
  #appmenu-developer-tools-view  .subviewbutton:nth-child(3) {  /* Remote Debugging - Edge bug.svg */
    list-style-image: url(./icons/bug.svg);
  }
  #appmenu-developer-tools-view  .subviewbutton:nth-child(4) {  /* Browser Toolbox - Edge webdeveloper.svg */
    list-style-image: url(./icons/webdeveloper.svg);
  }
  #appmenu-developer-tools-view  .subviewbutton:nth-child(5) {  /* Browser Content Toolbaox -  */
    list-style-image: url(./icons/command-frames.svg);
  }
  #appmenu-developer-tools-view  .subviewbutton:nth-child(6) {  /* Browser Console */
    list-style-image: url(chrome://devtools/skin/images/command-console.svg);
  }
  #appmenu-developer-tools-view  .subviewbutton:nth-child(7) {  /* Responsive Design Mode */
    list-style-image: url(./icons/command-responsivemode.svg);
  }
  #appmenu-developer-tools-view  .subviewbutton:nth-child(8) {  /* Eyedropper */
    list-style-image: url(chrome://devtools/skin/images/command-eyedropper.svg);
  }
  #appmenu-developer-tools-view  .subviewbutton:nth-child(9) {  /* Page Source - Edge file-search.svg */
    list-style-image: url(./icons/search-file.svg);
  }
  #appmenu-developer-tools-view  .subviewbutton:nth-child(10) { /* Extensions for Devel */
    list-style-image: url(chrome://devtools/skin/images/debugging-addons.svg);
  }
  #appmenu-developer-tools-view .subviewbutton:last-child {
    margin-bottom: 6px !important;
  }

  /* Panel - Help */
  #appMenu_menu_openHelp {
    list-style-image: url(chrome://global/skin/icons/help.svg);
  }
  #appMenu_feedbackPage {
    list-style-image: url(./icons/send.svg);
  }
  #appMenu_helpSafeMode {
    list-style-image: url(chrome://devtools/skin/images/debugging-workers.svg);
  }
  #appMenu_troubleShooting {
    list-style-image: url(chrome://global/skin/icons/more.svg);
  }
  #appMenu_help_reportSiteIssue {
    list-style-image: url(chrome://global/skin/icons/lightbulb.svg);
  }
  #appMenu_menu_HelpPopup_reportPhishingtoolmenu {
    list-style-image: url(chrome://global/skin/icons/warning.svg);
  }
  #appMenu_aboutName{
    list-style-image: url(chrome://global/skin/icons/info.svg);
  }

  /* Panel - Library */
  #appMenu-library-bookmarks-button {
    list-style-image: url(chrome://browser/skin/bookmark.svg);
  }
  #appMenu-library-history-button {
    list-style-image: url(chrome://browser/skin/history.svg);
  }
  #appMenu-library-downloads-button{
    list-style-image: url(chrome://browser/skin/downloads/downloads.svg);
  }

  /* Toolbar - Overflow Menu */
  #overflowMenu-customize-button {
    list-style-image: url(chrome://browser/skin/customize.svg);
  }

  /* All Tab Menu */
  #allTabsMenu-undoCloseTab {
    list-style-image: url(chrome://global/skin/icons/undo.svg);
  }
  #allTabsMenu-searchTabs {
    list-style-image: url(chrome://global/skin/icons/search-glass.svg);
  }
  #allTabsMenu-containerTabsButton {
    list-style-image: url(./icons/container-openin-16.svg);
  }

  #allTabsMenu-hiddenTabsButton {
    list-style-image: url(./icons/password-hide.svg);
  }

  #allTabsMenu-containerTabsView .subviewbutton:last-child {
    list-style-image: url(chrome://global/skin/icons/settings.svg);
  }
}

[guyman70718]

I just downloaded the latest version and whatever the problem was, it is gone now.

I can confirm that I just updated and the issue is now gone for me too.

edit: tested on another computer, update doesn't fix issue.

[black7375]

@guyman70718 Failed to reproduce bug. Any information that can help you solve it?

[black7375]

@guyman70718
The part where bugs are predicted to occur.

Firefox-UI-Fix/userChrome.css

Lines 538 to 558 in 1a345f5

	/** Menu - Reduce Padding ***************************************************/
	:root:not([uidensity=touch]) menupopup > menuitem, menupopup > menu {
	padding-block: 0.35em !important; /* Original: 0.5em */
	}
	:root:not([uidensity=touch]) .menu-text, .menu-iconic-text {
	padding-inline-end: 0 !important; /* Original: 2px */
	}
	:root:not([uidensity=touch]) .menupopup-arrowscrollbox {
	padding-block: 1px !important; /* Original: 4px*/
	}
	:root:not([uidensity=touch]) #context-navigation:not([hidden]) {
	padding: 0 0 1px !important; /* Original: 0 0 4px*/
	}
	:root:not([uidensity=touch]) .menu-right {
	margin-right: 6px !important; /* Original: 12px */
	}
	:root[uidensity=compact] menupopup > menuitem, menupopup > menu {
	padding-block: 0.25em !important; /* Original: 0.5em */
	}

Please delete this code and try

[black7375]

Ok, first things first, close issue.
There were a lot of fixes today and may have been resolved.
Please let me know if there is a problem again later.

Thanks for testing 👍