Firefox 89 换了新的 Proton UI，总体设计上讲是好看的，也更符合现代浏览器的审美，但是默认隐藏了 compact 界面风格，加上过大的纵向 padding 对现代的带鱼屏显示器极为不友好，需要做一些调整。
要改这玩意，我们需要修改 Firefox 的 userChrome.css，并且打开被隐藏的 compact 模式。
Compact Toolbar Density
about:config -> browser.compactmode.show -> true
userChrome.css
首先，创建 userChrome.css: about:support -> Profile Folder -> Open Folder 打开当前的 profile 文件夹，在下面创建一个 “chrome” 文件夹，再放入一个空白的 userChrome.css 文件。
之后调整 toolkit.legacyUserProfileCustomizations.stylesheets 为 true，让 Firefox 在启动时加载 userChrome.css
界面调整
我主要在 Compact 下做了如下界面风格调整：
- Tab 使用 6px 圆角
- 将 Tab 和下方页面连在一起，而非默认的浮动风格
- 增加 Tab 之间的纵向分隔符
- 降低菜单项之间的 padding 到 4px
- 书签栏在 Compact 下使用和 Normal 相同的 2px 纵向 padding
/*** Tighten up drop-down/context/popup menu spacing ***/
menupopup > menuitem, menupopup > menu {
padding-block: 4px !important;
}
:root {
--arrowpanel-menuitem-padding: 4px 8px !important;
}
/*** Proton Tabs Tweaks ***/
/* Adjust tab corner shape, optionally remove space below tabs */
#tabbrowser-tabs {
--user-tab-rounding: 6px;
}
@media (-moz-proton) {
.tab-background {
border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important;
margin-block: 1px 0 !important;
}
}
/* Inactive tabs: Separator line style */
@media (-moz-proton) {
.tab-background:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) {
border-right: 1px solid rgba(0, 0, 0, .20) !important;
}
/* For dark backgrounds */
[brighttext="true"] .tab-background:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) {
border-right: 1px solid var(--lwt-selected-tab-background-color, rgba(255, 255, 255, .20)) !important;
}
.tab-background:not([selected=true]):not([multiselected=true]) {
border-radius: 0 !important;
}
/* Remove padding between tabs */
.tabbrowser-tab {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
/* Tweak Options as of 5/30/2021; Generated Sat Jun 05 2021 16:07:09 GMT-0400 (Eastern Daylight Time) */
/* Use Normal top and bottom padding for Compact */
#PlacesToolbarItems .bookmark-item {
padding-top: 2px !important;
padding-bottom: 2px !important;
}
Reference
https://www.userchrome.org/firefox-89-styling-proton-ui.html
https://www.userchrome.org/how-create-userchrome-css.html
https://support.mozilla.org/en-US/questions/1243994#answer-1182082
https://support.mozilla.org/en-US/questions/1186601
