Multi-account containers new tab context selection menu display issue #26

paszklar · 2021-06-02T05:32:57Z

Describe the bug
With Multi-Account Containers extension installed, the menu to select new tab context doesn't display correctly (height is to low) when opened by dragging the new tab button down with left mouse button.

Expected behavior
The menu should be displayed as in the in the original proton theme or like when right-clicking the new tab button.

Screenshots
Proton - Drag down:

Lepton - Drag down:

Lepton - Right-click:

Environment (please complete the following information):

Firefox Version: 89.0
OS:
- Linux
- Windows
- Mac
- Others:
Theme:
- Light
- Dark
- Alpenglow(System: Light)
- Alpenglow(System: Dark)
- System Default

black7375 · 2021-06-02T07:02:47Z

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

SimYunSup · 2021-06-02T07:27:18Z

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

bug_replay1.mp4

paszklar · 2021-06-02T09:40:45Z

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

paszklar · 2021-06-02T09:56:11Z

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);
  }
}

SimYunSup · 2021-06-02T11:01:07Z

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

guyman70718 · 2021-06-02T12:09:22Z

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 · 2021-06-02T12:22:27Z

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

black7375 · 2021-06-04T01:38:37Z

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

guyman70718 · 2021-06-04T01:44:30Z

@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.

black7375 · 2021-06-04T02:10:27Z

@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

guyman70718 · 2021-06-04T13:10:09Z

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 · 2021-06-04T13:27:23Z

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 👍

paszklar added the Issue::Bug Something isn't working label Jun 2, 2021

black7375 added Class::Size Consonant's size issues Component::Context-Menu Only for context menu Env::Windows Issues on Windows10, Windows11, unknown windows Distribution::Photon-Style Photon style distribution related Priority::High Solve and focus on it first labels Jun 2, 2021

black7375 mentioned this issue Jun 2, 2021

v1.0 Plan #31

Closed

black7375 closed this as completed Jun 4, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multi-account containers new tab context selection menu display issue #26

Multi-account containers new tab context selection menu display issue #26

paszklar commented Jun 2, 2021 •

edited

black7375 commented Jun 2, 2021

SimYunSup commented Jun 2, 2021 •

edited

paszklar commented Jun 2, 2021

paszklar commented Jun 2, 2021

SimYunSup commented Jun 2, 2021

guyman70718 commented Jun 2, 2021 •

edited

black7375 commented Jun 2, 2021

black7375 commented Jun 4, 2021

guyman70718 commented Jun 4, 2021 •

edited

black7375 commented Jun 4, 2021

guyman70718 commented Jun 4, 2021 •

edited

black7375 commented Jun 4, 2021

Multi-account containers new tab context selection menu display issue #26

Multi-account containers new tab context selection menu display issue #26

Comments

paszklar commented Jun 2, 2021 • edited

black7375 commented Jun 2, 2021

SimYunSup commented Jun 2, 2021 • edited

paszklar commented Jun 2, 2021

paszklar commented Jun 2, 2021

SimYunSup commented Jun 2, 2021

guyman70718 commented Jun 2, 2021 • edited

black7375 commented Jun 2, 2021

black7375 commented Jun 4, 2021

guyman70718 commented Jun 4, 2021 • edited

black7375 commented Jun 4, 2021

guyman70718 commented Jun 4, 2021 • edited

black7375 commented Jun 4, 2021

paszklar commented Jun 2, 2021 •

edited

SimYunSup commented Jun 2, 2021 •

edited

guyman70718 commented Jun 2, 2021 •

edited

guyman70718 commented Jun 4, 2021 •

edited

guyman70718 commented Jun 4, 2021 •

edited