让 FireFox 标签栏看起来更像 Chrome/Edge

Firefox 的 Proton UI 看起来不太习惯。未选中的标签页都没有分隔符，不好区分，各种 padding 也很占空间。
之前试过 Firefox-UI-Fix ，但是感觉改动太多了。后来用了 userchrome.org 上更轻便的方法，
https://www.userchrome.org/firefox-89-styling-proton-ui.html#tabstyler
选择“Show inactive tab boundaries: Using a vertical tab"
但是这么显示出来的分隔竖线占了整个标签栏，研究了一下，发现是这一段用 border 来画的线。

/* Inactive tabs: Separator line style */
.tabbrowser-tab:not([selected=true]):not([multiselected=true]):not([beforeselected-visible="true"]) .tab-background {
    border-right: 1px solid var(--lwt-background-tab-separator-color, rgba(0, 0, 0, .20)) !important;
}

知道是怎么实现的，就好更改了。border 的长度无法改变，换成 pseudo element 来实现，

/* Inactive tabs: Separator line style */
.tabbrowser-tab:not([selected="true"]):not([multiselected="true"]):not([beforeselected-visible="true"])
  .tab-background::after {
  content: "";
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  right: 0;
  bottom: 5px;
  height: 55%;
  width: 1px;
}
/* Adjust tab corner shape, optionally remove space below tabs */
/* 调整 margin-block(top)为 5px 让标签页的顶端下移 */
.tab-background {
  border-radius: var(--user-tab-rounding) var(--user-tab-rounding) 0px 0px !important; /* Connected */
  margin-block: 5px 0 !important; /* Connected */
}

暗黑模式同理，实现效果 (不知道大家有没有什么其他的方法来画这个分隔符)：

几个好用的的 userChrome 效果，

/* 隐藏最右侧的“list all”按钮 */
#tabbrowser-tabs ~ #alltabs-button {
  display: none !important;
}
/* 页内搜索栏移到最上 */
.browserContainer > findbar {
  -moz-box-ordinal-group: 0;
}
/* 在 about:config 中更改 browser.tabs.tabMinWidth 参数
   最小值为 50 ， 可以显示更多标签页 */

挺喜欢 Edge 上 Collection 这个功能，在本地管理各种收藏非常方便，没什么特别好的替代。
Firefox 也没有原生的 tab group ，只能用类似 Simple Tab Groups 的插件，于是现在 Edge 和 Firefox 同时在用。

brucmao

2022-03-30 08:39:43 +08:00

![upgit_20220330_1648600547.png]( https://cdn.jsdelivr.net/gh/brucmao/upgit@master/2022/03/upgit_20220330_1648600547.png)

可以修改标签颜色
```
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

.tab-line {
visibility: hidden !important;
}

.tab-background[selected="true"] {
background-image: none !important;
}

.tab-background:not([selected="true"]) {
background-color: #52525e !important;
background-image: none !important;
}

.tabbrowser-tab:not([selected]) .tab-label {
color: white !important;
font-weight: normal !important;
}

.tabbrowser-tab[selected] .tab-label {
font-weight: bold !important;
}

#TabsToolbar,
#navigator-toolbox {
background: -moz-accent-color !important;
color: white;
}
#TabsToolbar:-moz-window-inactive,
#navigator-toolbox:-moz-window-inactive {
background: unset !important;
color: unset;
}
```