filip,

Have you tried the "Pin to Overflow Menu" option? That will hide the icons behind the overflow arrow. You would need to unpin them later if you wanted them always visible.

To try this, right click and "Pin to Overflow Menu" each icon you wish to hide.

Hi @firefox.dh

I appreciate the answer.

I cannot but respond with quoting my original question.

"Pinning to overflow menu is not a solution. It takes many clicks and a long time."

---

Joking aside, the quest is to find a fast and easy way to do this often. One click, ideally.

Can you hide those icons in Full Screen Mode ? I'm not sure how this works on Mac ?

I normally do not take a screenshot that includes the user interface, but use the choice to select what to include and I assume that you can do this on Mac as well.

I have a clean profile for demos and screenshots. That's most useful if you don't need all your accumulated "stuff" like bookmarks, layout modifications, or extensions. If you want to give it a try:

Add Alternate Profile

Inside Firefox, type or paste about:profiles in the address bar and press Enter/Return to load it.

Take a quick glance at the page and make a mental note of which Profile has this notation: This is the profile in use and it cannot be deleted. That is your current default profile.

Click the "Create a New Profile" button, then click Next. Assign a name like Demo, ignore the option to relocate the profile folder, and click the Finish button.

Firefox will switch your default profile to the new one, so click the Set as Default Profile button for your regular one to avoid an unwanted surprise at your next startup.

Scroll down to Demo and click its Launch profile in new browser button.

Firefox should open a new window that looks like a brand new, uncustomized installation. (Your existing Firefox window(s) should not be affected.) Please ignore any tabs enticing you to connect to a Sync account or to activate extensions found on your system to avoid cross-over with your main profile.

You might want to change the theme so that you can easily spot which is your Demo profile when switching windows. More info on themes: Use themes to change the look of Firefox.

Then use as needed...

When you are done with the recording, you can close the extra window without affecting your regular Firefox profile. Demo will remain available on the about:profiles page.

Fullscreen is a good idea, but in my case it does not work as I am trying to record the browser itself... and I'm recording a screencast, not taking screenshots.

jscher2000, cold idea about the separate profile! I like it, creative thinking.

It's quite confusing to be running two firefoxes though and the switching is not very seamless; if I'm switching to a completely new setup each time and re-opening my tabs, I might just as well switch a browser I feel. I did try the separate profile, and it's nice to know about this feature.

I guess there is no simple solution; other than switching a browser. Maybe this could become an addon one day.

Thank you for suggestions!

I personally use code in the Browser Console (not the Web Console) to hide the toolbar area if necessary. The code works as a toggle and you can possibly recall the code via the multi-line editor. Note that you need to enable the command line.

• "3-bar" menu button or Tools -> Web Developer
• https://developer.mozilla.org/en-US/docs/Tools/Browser_Console

(function(){ /*toggle navigator-toolbox*/
var doc = Services.wm.getMostRecentWindow("navigator:browser").window.document;
var nt = doc.getElementById("navigator-toolbox");
var isCollapsed = nt.getAttribute("collapsed") == "true";
if (isCollapsed){nt.removeAttribute("collapsed");}
else {nt.setAttribute("collapsed", "true");}
})()

@cor-el that's pretty epic. I love the browser console code toggle. This seems very powerful.

Do you have an idea of how to target just the extensions area? I don't see how to figure this out; I don't have the browser development experience and Inspect Elements does not work on browser itself.

If I collapse everything like in your script, then I don't see any advantage over a fullscreen mode.

Individual extension buttons have an additional value class in their class attribute, "webextension-browser-action". However, I don't know whether a Browser Console script can find and hide them individually.

You could set up a style rule that will hide the buttons based on another factor. For example, I don't usually display the Options button on my toolbar (it's one of the many available buttons in the Customize panel). I created a custom style rule that hides all the extension buttons to the right of the Options button so I can trigger that if I move the Options button onto the bar. The following screenshot shows the bar with different rules with and without the Options button (the Browser Toolbox window is in front of the main window):

I'll describe how to set that up in the next reply. If you want to use a different button as your trigger, we can look up its ID.

Firefox can be set to look for an optional user style sheet at startup. It is rather particular about the location and naming, so take your time in setting this up to minimize re-do's. I suggest 10 quiet minutes to work through it.

(For anyone who already has a userChrome.css file set up, you just need to add the rule under (A) to your file.)

(A) Select and copy the following style rule code

/* Hide extension buttons to the right of the Options button */
#preferences-button ~ .webextension-browser-action {
  display: none !important;
}
 

(B) Generate and download a userChrome.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then click "Generate CSS File" and save the userChrome.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userChrome.css file. (See second attached screenshot)

Minimize that file browser window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Mac and Windows in case the text is not clear.

(D) Move the userChrome.css file you downloaded in Step B into the chrome folder you created in Step C

(E) Set Firefox to look for userChrome.css at startup -- see step #6 in the above article.

The next time you exit Firefox and start it up again, it should discover that file and apply the rule.

Success?

Once you start tweaking the interface this way, you'll probably find more and more things you want to do. I suggest bookmarking the pages where you get the code for future reference because changes to Firefox may break them and it's easier to request an update if you can find the source.

@filip

I cannot but respond with quoting my original question. "Pinning to overflow menu is not a solution. It takes many clicks and a long time."

yeah - boobed that

Not sure if you derived something from the responses, but I combined the feedback from @cor-el and @jscher2000 into an option that may work.

The following code places an "X" button before the extension icons. You can dbl-click it to toggle visibility of any extension icons that follow.

I spent a few min trying to get a pretty icon in there, but repeating the same code as other icons doesn't work. Something fancy is happening during rendering. I also didn't intend for this to be a dbl-click, but something on the toolbar captures the first click.

 (function(){ /*toggle toolbar extension buttons*/
 var doc = Services.wm.getMostRecentWindow("navigator:browser").window.document;
 var nt = doc.getElementById("navigator-toolbox");
 var exts = nt.querySelectorAll('.chromeclass-toolbar-additional[class*=webextension]');
 if (exts.length) {
   var newEl = document.createElement("toolbarbutton");
   newEl.class = 'toolbarbutton-1 chromeclass-toolbar-additional webextension-toggle-button';
   newEl.style.display = 'inline-block';
   newEl.style.lineHeight = '40px';
   newEl.style.padding = '0 10px';
   newEl.style.cursor = 'pointer';
   newEl.innerHTML = 'X';
   var toggleEl = exts[0].parentNode.insertBefore(newEl, exts[0]);
   toggleEl.onclick = function(ev){
     ev.preventDefault();
     nt.querySelectorAll('.chromeclass-toolbar-additional[class*=webextension]').forEach(function(el){el.style.display=(el.style.display=='none'?'block':'none');});
     return false;
   }
 }
 })()

To implement this you need to set "devtools.chrome.enabled" to "true" on your "about:config" page. Then press "Shift+Ctrl+J" to open your Browser Console, paste and run the code [ENTER].

You should be able to add this into your userChrome.js file as @jscher2000 was explaining for the styles. I didn't get that far.

You mentioned browser experience - if you want to get the navbar HTML to review you can use this to dump it to console

 (function(){ /*toggle toolbar extension buttons*/
 var doc = Services.wm.getMostRecentWindow("navigator:browser").window.document;
 var nt = doc.getElementById("navigator-toolbox");
 console.log(nt.innerHTML);
 })()

You should be able to add this into your userChrome.js file as @jscher2000 was explaining for the styles. I didn't get that far.

Injecting scripts is a little more complex and risky than just applying styles, so I don't usually recommend it myself.

• My old article: https://www.userchrome.org/what-is-userchrome-js.html
• Find help on this subreddit: https://www.reddit.com/r/FirefoxCSS/

I tweaked the code a bit to make it look better for me and corrected the className attribute. This code works like a toggle.

(function(){ /*toggle toolbar extension buttons*/
var doc = Services.wm.getMostRecentWindow("navigator:browser").window.document;
var nt = doc.getElementById("navigator-toolbox");
var exts = nt.querySelectorAll('.chromeclass-toolbar-additional[class*=webextension]');
var oldX = nt.querySelector('#webextension-toggle-button');
if (oldX) {oldX.parentNode.removeChild(oldX); return}
if (exts.length) {
 var newEl = document.createElement("toolbarbutton");
 newEl.className = 'toolbarbutton-1 chromeclass-toolbar-additional';
 newEl.id = 'webextension-toggle-button';
 newEl.style.display = 'inline-block';
 newEl.style.cursor = 'pointer';
 newEl.style.margin = '4px 4px';
 newEl.style.height = '15px';
 newEl.style.background = '#ddd';
 newEl.innerHTML = 'X';
 var toggleEl = exts[0].parentNode.insertBefore(newEl, exts[0]);
 toggleEl.onclick = function(ev){
  ev.preventDefault();
  nt.querySelectorAll('.chromeclass-toolbar-additional[class*=webextension]').forEach(function(el){el.style.display=(el.style.display=='none'?'block':'none');});
  return false;
 }
}
})()