Hack to fix Firefox 90.0's new invisible menu (Shallow Thoughts)

Hack to fix Firefox 90.0's new invisible menu

Yesterday I started up my browser and discovered that I had no menu.

I understand that Mozilla wants us not to use the menu ... because why would anyone want to use any of Firefox's zillions of useful features that aren't available through the hamburger menu? ... but they've always made it possible to show a menubar if you really want one. Right-click in the area where the tabs are, and there's an option for Menu Bar that you can turn on.

And that option was still there, and the space above the tabs where it should show up was still taking up space ... there just weren't any menu buttons to click on.

Except they were. I tried clicking near the left edge and a familiar File menu popped up. Aha! The menubar is still there; it's just invisible. (In the screenshot above, if you look hard you can actually see the menu items, barely; in the theme I was actually using, which got uninstalled while I flailed around trying to fix the problem, they were much less visible.)

I tried changing to different themes and narrowed down the problem. In light themes it shows up just fine; in dark themes, with the text of menu buttons in black, it's invisible.

Turns out you can fix this in ~/.mozilla/firefox/profilename/chrome/userChrome.css, by adding:

#main-menubar > menu {
  color: white !important;
}

So, easy enough to fix if you happen to know that the selector is main-menubar > menu. (I wish there was something like the DOM Inspector for Firefox UI to let users find out things like this. I only found it through a lot of googling.)

Update, a day later: It turns out there is a DOM inspector that can inspect the browser UI. First, bring up the normal inspector window, with Ctrl-Shift-i, or right-click on any content element and choose Inspect, or bring up any of the windows under Tools->Browser tools. In the three-dots menu in the upper right, there's a Settings option.

In Settings, turn on Enable browser chrome and add-on debugging toolboxes and Enable remote debugging. You can dismiss this window now.

Back in the browser window, now Ctrl-Shift-Alt-i should bring up a prompt asking whether it's okay to allow remote debugging. Accept it, and you'll get a Developer Tools window that operates on the chrome of the browser window. You can use the "Pick an element from the page" picker in the upper left corner of the Developer Tools window to pick specific elements in the browser UI.

Thanks to Mikael Magnusson for this great tip!

I filed a bug, but I'm not holding my breath. Meanwhile, I hope this helps someone else get their menubar back.

Firefox Color

While poking around with different themes, I discovered Firefox Color, which lets you choose your own theme colors. It isn't smart enough to let you pick a UI element and style it, unfortunately, but it is a nice, easy way to pick colors without having to click through a hundred different themes looking for one that allows decent color contrast for all your tabs. And you can even export the result as a theme so you can share it or use it on other systems. Worth knowing about!