CustomCSSforFx项目中全屏视频时窗口控制按钮显示问题的解决方案

问题现象分析

在使用CustomCSSforFx项目的tabs_below_main_content.css样式时，用户发现当观看全屏视频时，浏览器窗口右上角的"最小化"、"最大化"和"关闭"按钮仍然保持可见状态。这个问题在Firefox 134版本后开始出现，并持续存在于最新的4.7.0版本中。

技术背景

正常情况下，当Firefox进入全屏模式（特别是视频全屏模式）时，浏览器会隐藏所有窗口装饰元素，包括标题栏和控制按钮，以提供真正的全屏体验。然而，当启用了tabs_below_main_content.css样式后，这个预期行为被打破了。

问题根源

经过分析，这个问题源于tabs_below_main_content.css对浏览器界面结构的修改。该样式将标签页移动到内容区域下方，这需要重新组织窗口的布局结构。在这个过程中，窗口控制按钮的显示逻辑可能被意外保留，导致在全屏状态下仍然可见。

解决方案

要解决这个问题，我们需要添加特定的CSS规则来强制隐藏这些控制按钮。以下是推荐的解决方案：

#main-window[inDOMFullscreen] .titlebar-buttonbox-container {
  display: none !important;
  opacity: 0 !important;
}

这段CSS代码的工作原理是：

1. 针对主窗口在DOM全屏状态时（[inDOMFullscreen]属性）
2. 选择包含窗口控制按钮的容器（.titlebar-buttonbox-container）
3. 同时设置display为none和opacity为0，确保按钮完全不可见且不占用布局空间
4. 使用!important规则覆盖可能存在的其他样式

实施步骤

1. 打开Firefox配置文件目录中的chrome文件夹
2. 编辑或创建my_userChrome.css文件
3. 将上述CSS代码添加到文件中
4. 保存文件并重启Firefox

注意事项

• 如果问题仍然存在，请检查是否有其他自定义样式与这个解决方案冲突
• 建议定期更新CustomCSSforFx项目，以获取可能包含的官方修复
• 这个问题主要影响Windows平台用户，其他操作系统可能需要不同的解决方案

总结

通过添加特定的CSS覆盖规则，我们可以有效解决CustomCSSforFx项目中tabs_below_main_content.css导致的全屏视频时窗口控制按钮显示问题。这个解决方案简单有效，不会影响浏览器的其他功能或样式。