Hi, we're using uBlock Origin for hiding things.

You can alternatively use rules in userContent.css to hide content on specific domains or pages or otherwise modify the appearance.

• https://developer.mozilla.org/en-US/docs/Web/CSS/@document

An example with code in the userContent.css file.

@-moz-document domain(support.mozilla.org){
 .questions-sidebar {display: none !important;} /* hide sidebar*/
}

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

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

• toolkit.legacyUserProfileCustomizations.stylesheets = true

See:

• https://www.userchrome.org/firefox-changes-userchrome-css.html

Another possibility is to use a JavaScript bookmarklet to toggle a specific element.

javascript:/*toggle style*/(function(){
var d=document,s=[{s:'.questions-sidebar',o:0}],aP=[{p:'display',t:'none',v:'block',i:1},{p:'visibility',t:'hidden',v:'visible',i:1}],pP,i,j,n,N,S;
for(j=0;S=s[j];j++){
pP=aP[S.o];n=d.querySelectorAll(S.s);for(i=0;N=n[i];i++){
N.style.setProperty(pP.p,((d.defaultView.getComputedStyle(N,'').getPropertyValue(pP.p))==pP.t)?pP.v:pP.t,pP.i?'important':'');
}}
})()

Guys, thank allot for your help

Cor-el Thank you so much with your two suggestions. I have been using pre configured CSS files to mostly controll Firefox/Thunderbird appearances, So its great to know that you can extend it to control web content as well. I definetly plan to learn more about it now.

Your first code example is excellent but I have a follow up question to your second one. I did a qucik rudimentary read up on bookmarklets, apparently they are Javascript code you add to a URL before hitting enter

Do bookmarklets require to reload the page in order to toggle the elements visibility?

Lastly, Can bookmarklets be excuted outside of a browser, say from a folder on File explorer just like you would execute a .url file? I have allot more controll over windows with scripting language such as Authotkey and some Python as well. So it would be really nice to know.

The bookmarklet I posted above works as a toggle as it checks the current display state (defaultView.getComputedStyle). You click it once to run the code to hide the element specified by the selector, in this case ".questions-sidebar". You click the bookmarklet another time to run the code once again and it will re-display this element. This only works if you run the bookmarklet on the page where you want to hide this specific content and this is similar to running JavaScript code in the Web Console. This code works in the Web Console, but it is more convenient to have such a bookmarklet available as a button on the Bookmarks Toolbar.

Using code in userContent.css is only convenient if you want to hide specific content permanently although in some case it is possible to unhide the content via a bookmarklet (only possible if the !important flag isn't used) or by using the Inspector to override rule(s) in userContent.css.

Cor-el I am intrested both in toggling and hidding permanently. Thanks allot for fleshing this out for me. Now I know which many routes are available to me as I learn more about CSS and JS.