complete-computing-environment/firefox_user_chrome.org

A Custom Firefox User Chrome

Firefox recently made a transition from a programming system called XUL, and reimplemented a load of functionality in the browser as HTML and CSS running in Gecko and a new WebRender CSS renderer. This lead to performance and security boosts, as well as a much cleaner codebase, but it meant that a lot of customisation functionality was missing and a lot of mucking-around in the guts of firefox that some extensions would do was no longer possible.

Me, though, I'm happy with the work that Mozilla has been doing to implement a more powerful set of WebExtensions APIs than the ones that Google's Chrome team first implemented and standardized. I think it's a damned shame that Gecko and WebRenderer aren't easily embedded like that same Google team built with the Chrome Embedded Framework. I think much more interesting development on user-agents would be possible if Chromium was not the only embeddable option.

At any rate, Firefox using the browser-technology for the window chrome means that I can style it with CSS and I'm not the only one doing this, thankfully. There is a repository on GitHub Timvde/UserChrome-Tweaks which contains a bunch of them, which I've imported and modified to taste.

First off, I want to hide the tab toolbar since I'm using the venerable Tree Style Tabs. If these ever stop working, TST now has a wiki page that someone else will hopefully keep up to date for me.

/* This Source Code Form is subject to the terms of the Mozilla Public
 ,* License, v. 2.0. If a copy of the MPL was not distributed with this
 ,* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
#TabsToolbar {
    visibility: collapse !important;
}

#nav-bar { /* Main Toolbar */
  -moz-box-ordinal-group: 1 !important;
}
#PersonalToolbar { /* Bookmarks Toolbar */
  -moz-box-ordinal-group: 2 !important;
}

Move the chrome elements to the bottom of the window. from userscript repo. This "works", but I have it disabled right now because when I open addon/extension menus it can crash Firefox sometimes because it'll try to draw the menus offscreen. I'm sure there's a way to make that work, but oh well.

:root:not([inFullscreen]){
  --uc-bottom-toolbar-height: calc(39px + var(--toolbarbutton-outer-padding) )
}

:root[uidensity="compact"]:not([inFullscreen]){
  --uc-bottom-toolbar-height: calc(29px + var(--toolbarbutton-outer-padding) )
}

#browser,
#customization-container{ margin-bottom: var(--uc-bottom-toolbar-height,0px) }

#nav-bar{
  position: fixed !important;
  bottom: 0px;
  display: flex;
  width: 100%;
  z-index: 1;
}

#PersonalToolbar{
  position: fixed !important;
  bottom: var(--uc-bottom-toolbar-height, 39px);
  display: flex;
  width: 100%;
  z-index: 2;
}

#nav-bar-customization-target{ flex-grow: 1; }

#urlbar[breakout][breakout-extend]{
  display: flex !important;
  flex-direction: column-reverse;
  bottom: -2px !important; /* Change to 3-5 px if using compact_urlbar_megabar.css depending on toolbar density */
  top: auto !important;
}

#urlbar[open] > .urlbarView{ margin-block: 0px calc(var(--urlbar-height) + 1px) !important; box-shadow: none !important; }

Hide the header for the sidebar, and color the splitter to be the dark background color rather than light.

/* #sidebar-header is hidden by default, change "none" to "inherit" to restore it. */
#sidebar-header {
    display: none !important;
}

/* #sidebar-splitter styles the divider between the sidebar and the rest of the browser. */
#sidebar-splitter {
    background-color: var(--url-and-searchbar-background-color, hsla(0,0%,10%,.8)) !important;
}

Make the default browser background dark instead of light. Why this isn't in the dark theme by default is beyond me.

.browserContainer {
  background-color: var(--url-and-searchbar-background-color, hsla(0,0%,100%,.8)) !important;
}

#sidebar {
  background-color: white !important;
}

.sidebar-placesTree {
  background-color: white !important;
}

/*
 ,* Description: Makes the activity stream page look decent with the dark theme.
 ,*
 ,* Screenshot: https://imgur.com/a/WcxGk
 ,*
 ,* Contributor(s): Andrei Cristian Petcu
 ,*/

@-moz-document url("about:home"), url("about:newtab") {
    .activity-stream {
        background-color: #474749 !important;
    }
}
@-moz-document url("about:blank") {
    ,*:empty:not([id]):not([style]) {
        background-color: #474749 !important;
    }
}

- name: find userChrome.css directory
  shell: ls -d ~/.mozilla/firefox/*default/
  args:
    executable: bash
  changed_when: False
  register: user_profile_path
  become: yes
  become_user: "{{local_account}}"
  tags:
  - firefox
  - firefox-cust

- name: chrome directory exists
  file:
    state: directory
    path: "{{user_profile_path['stdout_lines'][0]}}/chrome"
  become: yes
  become_user: "{{local_account}}"
  tags:
  - firefox
  - firefox-cust

- name: userChrome.css installed
  copy:
    src: userChrome.css
    dest: "{{user_profile_path['stdout_lines'][0]}}/chrome/userChrome.css"
  become: yes
  become_user: "{{local_account}}"
  tags:
  - firefox
  - firefox-cust

- name: userChrome.css installed
  copy:
    src: userContent.css
    dest: "{{user_profile_path['stdout_lines'][0]}}/chrome/userContent.css"
  become: yes
  become_user: "{{local_account}}"
  tags:
  - firefox
  - firefox-cust