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

设备：i1 Display Studio

Correction file：Dell, DELL U2417H (i1 Pro 2) by son01490517

Target：sRGB, D65, 120cd/m²

显示器设置：亮度 43%，对比度 75%，R 94%，G 96%，B 97%

ICC：U2417H #1 2020-03-31 01-05 D6500 2.2 M-S XYZLUT+MTX

3dlut：U2417H #1 2020-03-31 01-05 D6500 2.2 M-S XYZLUT+MTX.Rec709.B0.0,2.4eGawt65

设备：i1 Display Studio

Correction file：LCD White LED IPS (Dell, DELL P2419H (i1 Pro 2) by son01490517)

Target：sRGB, D65, 120cd/m²

显示器设置：亮度 50%，对比度 75%，R 99%，G 96%，B 92%

ICC：P2419H #2 2020-03-30 23-32 D6500 2.2 M-S XYZLUT+MTX

3dlut：P2419H #2 2020-03-30 23-32 D6500 2.2 M-S XYZLUT+MTX.Rec709.B0.0,2.4eGawt65

另外一个版本：（非常神奇，这个设置下的 Gamut 比之前一个版本大）

显示器设置：亮度 50%，对比度 75%，R 96%，G 93%，B 84%

ICC：P2419H #2 2020-05-24 14-17 D6500 2.2 S XYZLUT+MTX

3dlut：P2419H #2 2020-05-24 14-17 D6500 2.2 S XYZLUT+MTX.Rec709.B0.0,2.4eGawt65