profiler1982/headerbar

Complete tutorial of Firefox GNOME integration

Headerbar for Firefox

Here is complete tutorial of Firefox GNOME integration

1. Install all software from this list(don't restart after installing each one):

• GNOME 3 theme for Firefox, or if you can't wait for 3.12-style tabs - use beta
• GNOME 3 Theme Tweak extension
• Hide Tab Bar With One Tab
• HTitle - for hiding titlebar
• GNotifier - for native notifications
• Stylish - for adjusting userstyles
• Simple bookmarks menu(optionally) - for hiding unnecessary items in the bookmarks menu

2. Restart your browser, go to about:addons, find GNOME Theme Tweak options and enable options you like, find HTitle options and select hide titlebar "Always" option


3. Go to "User Styles" section of about:addons, select "Write New Style" button, pick a name and paste userstyle below, then click "Save" button.

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

@-moz-document url("chrome://browser/content/browser.xul") {

    :-moz-any(
        #main-window[htitlemode="always"],
        #main-window:not([sizemode="normal"])[htitlemode="auto"],
        #main-window:not([sizemode="normal"])[htitlemode="legacy"]
    ) #toolbar-menubar:not(:-moz-lwtheme) {
        -moz-appearance: none;
    }

    #main-window:not([customize-entered]):not([sizemode="normal"]) #navigator-toolbox:not(:-moz-lwtheme),
    #main-window:not([customize-entered])[sizemode="normal"][htitlemode="always"] #navigator-toolbox:not(:-moz-lwtheme) {
        background-image: linear-gradient(to bottom, rgba(255,255,255,1), rgba(255,255,255,0) 37px);
    }

    #main-window:not([customize-entered]):not([sizemode="normal"]) #navigator-toolbox:not(:-moz-lwtheme) #nav-bar,
    #main-window:not([customize-entered])[sizemode="normal"][htitlemode="always"] #navigator-toolbox:not(:-moz-lwtheme) #nav-bar {
        padding: 3px 3px 6px 3px !important;
    }

    #main-window:not([customize-entered]):not([sizemode="normal"]) #navigator-toolbox:not(:-moz-lwtheme) #urlbar,
    #main-window:not([customize-entered])[sizemode="normal"][htitlemode="always"] #navigator-toolbox:not(:-moz-lwtheme) #urlbar {
        margin: 0 36px !important;
    }
}

4. Press "Download ZIP" on the right of this page, copy "Headerbar" and "Headerbar-new" theme folders from downloaded archive into ~/.local/share/themes/ - if this folder does not exist - create it

5. Switch window theme to "Headerbar"(GNOME 3.x-alike) or "Headerbar-new"(GNOME 3.1x-alike) using GNOME Tweak Tool