Browsers which allow the address bar to be placed above the tabs

Actually, you can use the Browser Toolbox, to live debug your CSS.

Firefox (also Thunderbird) DevTools:

In about:config preferences set up the following.
about:config preferences:

Code:

devtools.chrome.enabled                              true
devtools.debugger.remote-enabled                     true
devtools.inspector.showAllAnonymousContent           true

This one (obviously) to enable the use of your own userChrome/userContent.
toolkit.legacyUserProfileCustomizations.stylesheets  true


This one to accept remote debugging connection without any prompt.
devtools.debugger.prompt-connection                  FALSE

Then, you can start the "Browser Toolbox" through the menu.

For Firefox, use
main Menu: Tools > Browser Tools > Browser ToolBox
For Thunderbird, use
main Menu: Tools > Developer Tools > Developer Toolbox.

In the Browser Toolbox window which appears, select the "Style Editor" tool.
Find your own css files by using the filter box in the left panel.
Select it, and you can live edit your code in the right hand side edit panel.
If you want to save your edits, press the Save button, BUT make sure you have a backup of your own original css file, as it will be over-written without warning.

You can read more about it at and other tools:
Firefox DevTools User Docs — Firefox Source Docs documentation

das10 said:

Actually, you can use the Browser Toolbox, to live debug your CSS...

You posted your answer simultaneously with me deciding that it was a really daft question and editing it out of my post. Many thanks for that: I'll try it.

@das10, may I ask your advice once again? After having lived with the newly-designed layout for Firefox for a couple of weeks there's one final adjustment I'd like to make, but I can't work out how to do it myself.

I'd like to increase the padding at the bottom of the toolbar which holds the File, Edit, View... commands by a tiny amount (1px? 2px?) because at the moment, the text (especially with its underlined initial capitals) appears to be slightly too close to the bottom rather than being centred vertically:



Many thanks.

Try and add the following code to Aris's "my_userChrome.css" file. Hopefuly it doesn't affect any of the elements which are below the menubar.
my_userChrome.css (additional code)

Code:

/************************************************************************************/
/* 2px extra space below labels in menubar */ 

#toolbar-menubar menubar {
  padding-bottom:   2px  !important;      
}
/************************************************************************************/

IF when going to full screen mode (F11), you find that the menubar is blank regardless of the above code, you can also add the following to make the menubar visible in the full screen mode.

Code:

/* show menu bar in full screen mode otherwise it is blank band - this is Aris's code */
/* menubar visibility in fullscreen mode */
#main-window[sizemode="fullscreen"]:not([inDOMFullscreen="true"]) #toolbar-menubar {
  display:    flex    !important;
  visibility: visible !important;
}

das10 said:

Try and add the following code to Aris's "my_userChrome.css" file.

With a setting of 3px that gave exactly the look I wanted; thanks so much. Nothing else was affected and the menubar remained visible in full screen mode.

The reason my effort didn't work was that I was using the same basic code but with just #menubar rather than your #toolbar-menubar menubar. It would never have occurred to me to try that. It's interesting that the other toolbar labels are so inconsistent: #TabsToolbar, #nav-bar, #PersonalToolbar, and #urlbar.