MrOtherGuy / firefox-csshacks

Collection of userstyles affecting the browser
Mozilla Public License 2.0
3.2k stars 312 forks source link

Extended menu dropdowns do not work #47

Closed robinzoncruzo closed 4 years ago

robinzoncruzo commented 4 years ago
$ git branch -v
* master 2062bd2 apply window margin to body > box instead of :root
$ firefox --version
Mozilla Firefox 76.0
$ lsb_release -r
Release:        16.04

Situation: I have several addons like uBlock Origin, Tab Session Manager and internal buttons like tabs from other devices on Extended menu, which is placed on the right of address bar by default. So most of addons has menu, which dropdowns on icon click, but with multi-row_tabs_below_content.css these menus do not shows up, nothing happens.

Thanks in advance.

MrOtherGuy commented 4 years ago

Yes, they are broken. Unfortunately I don't know if that can be "fixed" with css. It has something to do with how Firefox creates those extension panel and the positioning of the main toolbar trips up the logic.

I could add a warning to the stylesheet about this but that's about it.

I think the best you can do is to put extension buttons that have a popup to overflow menu and use them via that.

robinzoncruzo commented 4 years ago

Thanks, your advice really helped.

Unfortunately, there came another issue with URL suggestions, when I put cursor on address line. Looks like from some version, the look of address line and suggestion has changed and now, with multi-row_tabs_below_content.css enabled, it's background is transparent and I can see nothing, obviously.

MrOtherGuy commented 4 years ago

I would suggest you try with only multi-row_tabs_below_content.css

The style itself shouldn't cause that sort of thing, so I think it would be some weird interaction with other styles, though I would still like to know what's the reason you see it.

robinzoncruzo commented 4 years ago

Well, my issue was solved. Looks like it wasn't related to mentioned css, but realted to multi-row_oneliner_combo_patch.css, which somehow was in userChrome.css. So my current config is

@import url(chrome/multi-row_tabs_below_content.css);
@import url(chrome/tab_close_button_always_on_hover.css);
@import url(chrome/tab_loading_progress_throbber.css);

And all buttons with dropdowns are in overflow menu. So I am satisfyed by this. Thanks a lot for fast feedback.

MrOtherGuy commented 4 years ago

So, about broken extension popups... The issue is caused by flex display model, which I think is weird all by itself. I sort of found a usable solution by using block display. This allows extension popus to show up normally, but it creates it's own problems for main menu- and nav-bar overflow buttons.

Main menu button can just use absolute positioning and that work well for it, but for some mysterious reason the nav-bar-overflow button does not behave like it should with absolute or fixed positioning. I have absolutely no idea what is going on with it.

So, currently the only way to make extension buttons work would require to completely hide the overflow-button so that it doesn't cause trouble. Thus there are two options - either A) extension popups don't work unless they are in overflow menu, or B) the overflow button is totally unavailable.

I've only added a big warning to multi-row_tabs_below_content.css for now, but in case you want to try the workaround you can add this after the style:

#nav-bar{ display: block; }

#PanelUI-button{
  display: block;
  position: absolute;
  right: 0px;
  top: 0px;
}
#nav-bar-overflow-button{ display: none !important; }