Firefox 使用垂直标签

2023/07/26 更新 : 添加未读标签字体加粗 / 自动隐藏关闭按钮样式, 增加标签缩进

2023/07/20 更新 : 添加隐藏侧边栏标题样式

---------------------------------------------------------

当前 Firefox 版本: 87.0 64位

所需工具:

Tree Style Tab : 用来垂直显示标签页,也可以用其他附加组件
userChrome.css : 用来隐藏选项卡栏和侧边栏关闭按钮

特点:

相对 Edge 的垂直标签页, 这个扩展的标签页带有层级结构, 打开的链接会排到当前标签页的下级, 方便整理思路

效果:

步骤:

在附加组件搜索 "Tree Style Tab" 然后安装
安装完成后,在侧边栏选择 "树状标签页"
在地址栏输入 "about:config"
搜索选项 "toolkit.legacyUserProfileCustomizations.stylesheets",设置为 "true"
点击 "帮助" -> "排障信息" 或在地址栏输入 "about:support"
打开 "配置文件夹" 目录
新建一个文件夹 "chrome"
在 "chrome" 里新建一个文本文件 "userChrome.css"

在 "userChrome.css" 里填入

#TabsToolbar {
  visibility: collapse !important;
}

#sidebar-close {
  visibility: collapse;
}

#sidebar-header {
  display: none !important;
}

重启 Firefox 以应用新界面样式

自己在用的 Tree Style Tab 样式

/* Hide the "new tab" button at the bottom edge of the tab bar */
.newtab-button-box {
  display: none;
}
#tabbar {
  bottom: 0 !important; /* Eliminate dead space on bottom */
}

/* Show scrollbar in the tab bar rightside */
:root.left #tabbar {
  direction: ltr;
  overflow-x: hidden;
}

/* Only show tab close button on hover */
#tabbar tab-item tab-item-substance:not(:hover) tab-closebox {
  display: none;
}

/*Show title of unread tabs in bold*/
tab-item.unread .label-content {
  font-weight:bold;
}

/* show separator space between root level tabs */
tab-item[data-level="0"] { --tab-margin-left: 0px; }
tab-item[data-level="1"] { --tab-margin-left: 6px; }
tab-item[data-level="2"] { --tab-margin-left: 12px; }
tab-item[data-level="3"] { --tab-margin-left: 18px; }
tab-item[data-level="4"] { --tab-margin-left: 24px; }
tab-item[data-level="5"] { --tab-margin-left: 30px; }
tab-item[data-level="6"] { --tab-margin-left: 36px; }
tab-item[data-level="7"] { --tab-margin-left: 42px; }
tab-item[data-level="8"] { --tab-margin-left: 48px; }
tab-item[data-level="9"] { --tab-margin-left: 54px; }
tab-item[data-level="10"] { --tab-margin-left: 60px; }
tab-item[data-level="11"] { --tab-margin-left: 66px; }
tab-item[data-level="12"] { --tab-margin-left: 72px; }
tab-item[data-level="13"] { --tab-margin-left: 78px; }
tab-item[data-level="14"] { --tab-margin-left: 84px; }
tab-item[data-level="15"] { --tab-margin-left: 90px; }
tab-item[data-level="16"] { --tab-margin-left: 96px; }
tab-item[data-level="17"] { --tab-margin-left: 102px; }
tab-item[data-level="18"] { --tab-margin-left: 108px; }
tab-item[data-level="19"] { --tab-margin-left: 114px; }
tab-item[data-level="20"] { --tab-margin-left: 120px; }
tab-item[data-level="21"] { --tab-margin-left: 126px; }
tab-item[data-level="22"] { --tab-margin-left: 132px; }
tab-item[data-level="23"] { --tab-margin-left: 138px; }
tab-item[data-level="24"] { --tab-margin-left: 144px; }
tab-item[data-level="25"] { --tab-margin-left: 150px; }
tab-item[data-level="26"] { --tab-margin-left: 156px; }
tab-item[data-level="27"] { --tab-margin-left: 162px; }
tab-item[data-level="28"] { --tab-margin-left: 168px; }
tab-item[data-level="29"] { --tab-margin-left: 174px; }
tab-item[data-level="30"] { --tab-margin-left: 180px; }
tab-item[data-level="31"] { --tab-margin-left: 186px; }