Sidebery 插件在 Firefox 133 版本中的动态标签页隐藏方案优化

问题背景

Sidebery 是一款广受欢迎的 Firefox 浏览器侧边栏标签页管理扩展。许多用户习惯通过 userChrome.css 自定义样式来实现动态隐藏原生标签页的效果，当 Sidebery 侧边栏展开时自动隐藏 Firefox 的原生标签页栏，从而获得更简洁的界面和更大的可视区域。

然而，随着 Firefox 133 版本的发布，原有的 CSS 选择器 #titlebar 被移除，导致之前 wiki 文档中推荐的动态隐藏方案失效。这一问题影响了众多使用 Sidebery 插件的用户体验。

技术分析

在 Firefox 133 版本中，浏览器界面结构发生了变化，主要影响点包括：

1. #titlebar 选择器被移除，这是之前方案依赖的关键选择器
2. 新的界面结构采用了 .toolbar-items 和 #TabsToolbar 作为替代
3. 动画过渡效果需要重新适配新的 DOM 结构

解决方案

经过社区成员的探索和测试，目前有以下几种有效的解决方案：

方案一：基于 .toolbar-items 的解决方案

#main-window .toolbar-items {
    overflow: hidden;
    transition: height 0.3s 0.3s !important;
}

/* 默认状态 */
#main-window .toolbar-items {
    height: 3em !important;
}

#main-window[uidensity="touch"] .toolbar-items {
    height: 3.35em !important;
}

#main-window[uidensity="compact"] .toolbar-items {
    height: 2.7em !important;
}

/* 隐藏状态 */
#main-window[titlepreface*="[Sidebery]"] .toolbar-items {
    height: 0 !important;
}

#main-window[titlepreface*="[Sidebery]"] #tabbrowser-tabs {
    z-index: 0 !important;
}

方案二：基于 #TabsToolbar 的简化方案

#main-window[titlepreface*="​"] #TabsToolbar {
    visibility: collapse;
}

方案三：带动画效果的完整解决方案

/* 过渡动画 */
#main-window #TabsToolbar {
    overflow: hidden;
    max-height: 3em;
    transition: max-height 0.3s ease-in-out !important;
}

#main-window #TabsToolbar .toolbar-items {
    overflow: hidden;
    max-height: 40px;
    transition: max-height 0.3s ease-in-out !important;
}

/* 隐藏状态 */
#main-window[titlepreface*="​"] #TabsToolbar {
    max-height: 0;
    visibility: hidden;
    transition: max-height 0.3s ease-in-out, visibility 0s 0.3s !important;
}

#main-window[titlepreface*="​"] #TabsToolbar .toolbar-items {
    max-height: 0;
}

#main-window[titlepreface*="​"] #tabbrowser-tabs {
    z-index: 0 !important;
}

使用说明

1. 首先需要在 Sidebery 设置中将 "preface value" 设置为 [Sidebery] 或零宽度空格字符
2. 将上述任一方案代码添加到 userChrome.css 文件中
3. 确保 Firefox 已启用 userChrome.css 支持
4. 不同方案可根据个人喜好选择，带动画的方案视觉效果更平滑

注意事项

1. 不同操作系统可能需要微调高度值以获得最佳效果
2. 如果使用自定义主题，可能需要调整具体数值
3. Mac 用户可能会在顶部保留窗口控制按钮区域
4. 对于完全隐藏标签栏的需求，可考虑其他专门的 CSS 方案

技术原理

这些解决方案的核心原理是利用 CSS 的：

1. 高度过渡动画实现平滑显示/隐藏效果
2. 选择器匹配 Sidebery 激活状态（通过 titlepreface 属性）
3. 层级控制确保界面元素正确叠放
4. 响应式设计适应不同界面密度设置

通过这种方式，用户可以获得更加专业和个性化的浏览体验，同时保持 Firefox 界面的整洁和高效。