C:\Users\NisimHurst\Utilities\Autohotkey\UserScripts\firefox\chrome\userChrome.css

README.md

Customizing Firefox with userChrome.css

I guess you can fake an SSB in firefox by some hacking. I don't know how much work you want to put into this but here a sketch of an idea.

• Create a new Profile in firefox: open about:profiles click in create new profile and give it the name of the SSB application you want to create.

• Open firefox in the new profile by running the command firefox --no-remote -P "ProfileName"

• Check if you are in the correct profile by opening about:support, in the information table look for Profile Directory. The path must end in "ProfileName". Click in Open Directory.

• Let's hide your GUI: create a new folder in your Profile Directory named chrome, inside the folder create a new file named userChrome.css.

• Paste the following inside the file:

TabsToolbar {
  visibility: collapse;
}

:root:not(\[customizing\]) #navigator-toolbox:not(:hover):not(:focus-within) {
  max-height: 1px;
  min-height: calc(0px);
  overflow: hidden;
}

#navigator-toolbox::after {
  display: none !important;
}

#main-window\[sizemode="maximized"\] #content-deck {
  padding-top: 8px;
}

• Back to firefox, make sure you are in the correct profile, go to about:config and set toolkit.legacyUserProfileCustomizations.stylesheets to true

• Finally create a shortcut that runs the command firefox --name=AppName --no-remote -P "ProfileName" http://appurl.com

• Add the shortcut to the menu. In linux probably means writing a .desktop file in ~/.local/share/applications

---

Firefox allows extensive user interface customization through CSS by utilizing a special file within the user's profile directory. This file is called userChrome.css.

Steps to enable and use userChrome.css:

• Enable userChrome customization:

  • Open Firefox and type about:config in the address bar.
  • Accept the warning about editing advanced settings.
  • Search for toolkit.legacy.userChrome.css.enabled.
  • Toggle its value from false to true.

• Locate your Firefox profile folder:

  • Type about:profiles in the address bar.
  • Find the profile currently in use (usually named default-release or similar).
  • Click the "Open Folder" button next to "Root Directory" or "Profile Folder" (depending on your OS). This will open the profile directory in your file explorer.

• Create the chrome folder and userChrome.css file:

  • Inside the opened profile folder, create a new folder named chrome (all lowercase).
  • Inside the chrome folder, create a new plain text file named userChrome.css (case-sensitive). Ensure it is saved as a plain text file without any rich text formatting or hidden extensions like .txt.

• Add CSS rules:

  • Open userChrome.css in a plain text editor.
  • Add your desired CSS rules to customize the Firefox user interface (e.g., change tab appearance, hide elements, adjust spacing).
  • Save the userChrome.css file.

• Restart Firefox:

  • Close and restart Firefox for the CSS changes to take effect.

Note: The userChrome.css file only affects the Firefox browser interface itself, not the content of websites. For website-specific CSS customizations, userContent.css can be used in a similar manner within the chrome folder.

userChrome.css

TabsToolbar {
  visibility: collapse;
}

:root:not([customizing]) #navigator-toolbox:not(:hover):not(:focus-within) {
  max-height: 1px;
  min-height: calc(0px);
  overflow: hidden;
}

#navigator-toolbox::after {
  display: none !important;
}

#main-window[sizemode="maximized"] #content-deck {
  padding-top: 8px;
}