6.0 KiB
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