Alter your firefox

alter-your-firefox.txt

| Alter your firefox
|
| Connor Osborn 
| 07/05/15

Firefox supports users customizing the gui beyond what you might imagine. With
a little snooping around, you can implement a pretty unique interface. For my
interests I wanted to clean up my tab bar (see gif below). Here are the steps to begin
customizing.

1) Navigate to firefox profile directory
  
On OSX:

    ~/Library/Application Support/Firefox/Profiles/********.default

Otherwise see the mdn docs:

    https://support.mozilla.org/en-US/kb/profiles-where-firefox-stores-user-data#w_how-do-i-find-my-profile

Inside your profile directory create the following path:
    
    chrome/userChrome.css


2) Inspect gui

In firefox, open the following url: 

    chrome://browser/content/browser.xul

Open up the developer tools inspector to inspect what styles are applied to what
elements. (See my userChrome.css below).

**Note:** you must include the following line at the top:

    @namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul)


3) Change/restart

In order to override a styling you must append the style with '!important;'
like so:

    .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { 
        display:none !important;
    }

Unfortunately every change requires a browser restart :C. 


4) Tips/tricks

It can be helpful to see the original css, which can be done by navigating to
Style Editor and selecting save to download the source. I suggest
downloading the long 'browser.css'.

You cannot create tabs in the browser.xul through the gui, but you can right-click copy inside
the inspector and paste after the previous tab.

tab-bar-with-vimperator.gif

userChrome.css

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* Remove many buttons */
#new-tab-button, 
#alltabs-button, 
.tab-close-button, 
.tabs-newtab-button {
    display:none !important;
}

/* Remove elements with background images */
.tab-background-middle[visuallyselected="true"]  {
    display:none !important;
}

/* Partially responsible for gap at the end of tabbar */
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
  -moz-padding-end: 0px !important;
  -moz-padding-start: 0px !important;
}

/* Force 0 margins, responsible for gap at the end of toolbar */
.tab-background[visuallyselected="true"] {
    margin:0px !important;
}

/* Remove wings of firefox tab */
.tab-background-start, .tab-background-end {
    display:none !important;
}

/* Lighter hue for hovered tab than selected */
.tab-background:not([visuallyselected="true"]):hover {
    background: rgba(120, 112, 195, 0.05) !important;
    margin:0px !important;
}

/* Add vertical tap-separator img after every tab but the last */
.tabbrowser-tab:not([last-visible-tab])::after {
    -moz-margin-start: -1.5px !important;
    -moz-margin-end: -1.5px !important;
    background-image: url(chrome://browser/skin/tabbrowser/tab-separator.png) !important;
    background-position: left bottom var(--tab-toolbar-navbar-overlap) !important;
    background-repeat: no-repeat !important;
    background-size: 3px 100% !important;
    content: "" !important;
    display: -moz-box !important;
    width: 3px !important;
}

/* Explicitly remove styling of tab-separator on last */
.tabbrowser-tab[last-visible-tab]::after  {
    background: none !important;
}

/* Remove l/r scroll buttons */
.scrollbutton-down, .scrollbutton-up {
    display:none !important;
}