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;
}
.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 */

.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