I can't click on the add-on icon in the top left corner of the screen

[nihj2sofu]

When I put the add-on icon on the left side of the tab bar and maximize the window, clicking on the upper left corner of the display does not respond.

I used to put my most frequently clicked add-on icons (Simple Tab Groups add-on) here, but now Firefox is very hard to use.

This bug has been around since fall 2022.
Please fix it.

[jscher2000]

Normally, the Firefox View button is to the left of the tabs. You are placing a different button there instead of (or to the left of) the Firefox View button and the button doesn't respond to clicks in that position?

Hmm, that's working for me on Windows 10. Are you having this problem on Windows, Mac, or Linux?

Do you modify your toolbar layout with a userChrome.css file?

[nihj2sofu]

Thank you for your reply.

I am using Windows 10. I didn't change any special settings.

When the add-on icon(Stylus etc.) is placed on the left end of the same line as the tab bar as shown below,

 When I maximize the window, I can't press the icon even if I click the position 1px from the top and 1px from the left.

 

[jscher2000]

Okay, I see what you are saying now. Add-on buttons are bordered by an unclickable area that built-in toolbar buttons do not have. It seems to be because the add-on buttons are only 32 pixels tall, while built-in buttons are 40 pixels tall. (In Compact Density mode, it's 29 pixels vs. 37 pixels.) It's the same wherever you position these buttons, but I think it is only annoying if you are used to being able to hit the pixel in the upper left corner to activate the button.

I don't understand flex layout well enough to know why this happens, but it may date back to Firefox 109, which enabled the Unified Extensions Button experience.

I filed a bug report: https://bugzilla.mozilla.org/show_bug.cgi?id=1835594

userChrome.css Style Override

In case you are interested in a "self-help" workaround, using a "Community Supported" (i.e., not officially supported) method. You can modify the styling of add-on buttons to extend their clickable area upwards and to the left. I haven't tested this in detail, but it's what I've got so far. I'll link to other resources for more help:

/* Allow clicking add-on buttons from blank space above or below */
toolbarbutton.webextension-browser-action {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* When positioned at upper left of tab bar, allow clicking to the left */
[sizemode=maximized] #TabsToolbar-customization-target 
  toolbaritem:first-of-type[id*="browser-action"] {
    margin-left: 0 !important;
}
[sizemode=maximized] #TabsToolbar-customization-target 
  toolbaritem:first-of-type[id*="browser-action"] 
  toolbarbutton.webextension-browser-action {
    padding-left: 2px !important;
    margin-bottom: 0 !important;
}

Setting up your file the first time is a little bit of a project, and you may need customizations to smooth over rough edges. Here are some resources:

• My starter article: https://www.userchrome.org/how-create-userchrome-css.html
• The CSS wizards on r/FirefoxCSS: https://www.reddit.com/r/FirefoxCSS/

[nihj2sofu]

thank you very much!

Applying userChrome.css fixed it perfectly.

I would expect it to be officially fixed, but for now I'm very happy.