Skip to content

Instantly share code, notes, and snippets.

@lgmoneda
Last active June 26, 2019 23:12
Show Gist options
  • Save lgmoneda/5a4bb3d01b4455cec6f2255075b59b3b to your computer and use it in GitHub Desktop.
Save lgmoneda/5a4bb3d01b4455cec6f2255075b59b3b to your computer and use it in GitHub Desktop.
Minimalistic firefox: browse without address and bookmarks toolbar

One of the things I like the most about my Firefox config is this tricky to hide bars and maximize content. Putting together the sources 1 2 3:

  • Go to ~/.mozilla/firefox/<profile> on Linux, ~/Library/Application Support/Firefox/Profiles/<profile folder> or ~/Library/Mozilla/Firefox/Profiles/<profile folder> on OSX, %appdata%\Mozilla\Firefox\Profiles\<profile folder> on Windows
  • Create directory chrome if it doesn't exist
  • Create file userChrome.css inside if it doesn't exist.
  • Add this text to the file:
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

/* hide horizontal tabs at the top of the window */
#TabsToolbar > * {
  visibility: collapse;
}

/* hide navigation bar when it is not focused; use Ctrl+L to get focus */
#main-window:not([customizing]) #navigator-toolbox:not(:focus-within):not(:hover) {
	margin-top: -55px;			/**/
}
#navigator-toolbox {
  transition: 0.2s margin-top ease-out;
}

/* hide the "Tree Style Tab" header at the top of the sidebar (only Tree Style Tab sidebar) */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

#nav-bar ~ #PersonalToolbar:not([customizing]) {
  position: fixed !important;
  padding: 3px 2px 2px !important;
  height: auto !important;
  border-top: 0px solid transparent!important;
  border-right: 1px solid transparent !important;
  border-bottom: 1px solid rgba(0,0,0,0.3) !important;
  border-left: 1px solid transparent !important;
  box-shadow: 0 0px 2px rgba(0,0,0,0);
  width: 100%;
  transform: translateY(-100%);
  transition: transform 0.2s !important;
  opacity: 0;
}

#navigator-toolbox:hover >
#nav-bar ~ #PersonalToolbar:not([customizing]) {
  transform: translateY(0);
  opacity: 1;
}

#toolbar-menubar:not([inactive="true"]) ~
#nav-bar ~ #PersonalToolbar:not([customizing]) {
  transform: translateY(0);
  opacity: 1;
}

Since it's an overlap of different solutions there's probably a better way to write, so feel free to suggest and I can update it!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment