Multi-account container long click menu doesn't work (but right click menu works)

[adnan360]

Describe the bug
When Lepton is installed and Firefox multi-account container addon is installed, I can't open a specific container tab by long clicking the New tab button. It doesn't do anything when I select a menu item. But surprisingly if I right click the new tab button and select anything, it seems to work.

Steps to reproduce:

• Install multi-account containers addon
• Install Lepton on profile directory (user.js + chrome dir) and clear startup cache as instructed
• After browser restarted, long (left) click until the containers menu appears, then click a container (e.g. Work)

Current behavior

Menu disappears, doesn't open a new tab or manage containers as if I didn't click anything

Expected behavior

Open the selected container tab or manage containers settings when clicked on a menu item

Screenshots
N/A

Environment (please complete the following information):

• Distribution
  • Original Lepton
  • Lepton's photon style
• Firefox Version: 89.0.2
• OS:
  • Linux
  • Windows
  • Mac
  • Others: FreeBSD
• Theme:
  • Light
  • Dark
  • Alpenglow(System: Light)
  • Alpenglow(System: Dark)
  • System Default
    • GTK Theme Name(Only Linux User): Adwaita

Additional context
I tested in Librewolf Appimage on Linux, but Firefox on FreeBSD. I've tried from latest release (2.1.0) and latest master (a631555). Both gave same results. Without Lepton installed left click menu works fine.

[black7375]

I checked that it closes when I lose focus, don't click ..etc
That's interesting how this can happen with CSS alone.

---

Investigation result

What causes symptoms to occur:

Firefox-UI-Fix/userChrome.css

Line 423 in a631555

#tabs-newtab-button:not(:hover)::before {

Eventually, we must add elements after the last tab, as follows:

  #tabbrowser-arrowscrollbox:not([overflowing]) .tabbrowser-tab:not([visuallyselected], [multiselected], :hover)[last-visible-tab] .tab-background::after {
    /* Box Model */
    content:  "";
    display: block;
    position: absolute;

    /* Position */
    top:       50%;
    transform: translateX(-2.5px) translateY(calc(-50% + 1px));

    /* Bar shape */
    width:     1px;
    height:   20px;
    overflow: hidden;

    /* Bar Color */
    opacity: var(--tab-separator-opacity);
    transition: opacity .2s var(--ease-basic);
    background-color: color-mix(in srgb, currentColor 20%, transparent); /*  Replace var(--toolbarseparator-color) - Hard coded for compatibility */
  }

  .tabbrowser-tab[last-visible-tab] .tab-background::after {
    right: 0;
    transform: translateX(2px) translateY(calc(-50% + 1px)) !important;
  }

However, it is very tricky to find a way to disable it only when an interaction occurs on an element right after.

[black7375]

Are you try with this patch?

---

Advice of qaz69wsx
https://www.reddit.com/r/FirefoxCSS/comments/oelg2r/interesting_css_bug/

[black7375]

It is currently determined to have been fixed and will be closed.

[adnan360]

Yeah. Solved, thanks.