Firefox userChrome.css定制：基于#toolbar-menubar状态控制导航工具箱显示

需求说明 #

实现#navigator-toolbox的部分隐藏逻辑：

• 未悬停、未获得焦点，且菜单栏（#toolbar-menubar）处于隐藏状态（带inactive="true"属性）时，向上偏移部分隐藏
• 菜单栏激活（按Alt显示，无inactive="true"属性）、导航栏被悬停或获得焦点时，完全显示

解决方案（推荐，需Firefox支持:has选择器） #

在userChrome.css中替换为以下代码：

#TabsToolbar {
  visibility: collapse;
}

/* 仅满足所有条件时应用隐藏偏移 */
#navigator-toolbox:not(:hover):not(:focus-within):has(#toolbar-menubar[inactive="true"]) {
  margin-top: -36px;
}

代码逻辑

• #navigator-toolbox:not(:hover):not(:focus-within)：匹配未被悬停、未获得焦点的导航栏容器
• :has(#toolbar-menubar[inactive="true"])：筛选出子元素菜单栏处于隐藏状态的导航栏
• 只有同时满足上述条件，才会设置向上偏移，实现部分隐藏

注意：若Firefox未启用:has选择器，需打开about:config，将layout.css.has-selector.enabled设为true

兼容旧版Firefox的备用方案 #

如果你的Firefox版本不支持:has选择器，可使用以下代码：

#TabsToolbar {
  visibility: collapse;
}

/* 默认隐藏规则 */
#navigator-toolbox:not(:hover):not(:focus-within) {
  margin-top: -36px;
}

/* 菜单栏激活时，抵消父元素的偏移 */
#navigator-toolbox:not(:hover):not(:focus-within) #toolbar-menubar:not([inactive="true"]) {
  margin-top: 36px;
}

代码逻辑

• 保持原有的隐藏规则，当菜单栏激活（无inactive="true"属性）时，给菜单栏设置正向margin，抵消父元素的负margin，让导航栏回到正常显示状态

内容的提问来源于stack exchange，提问作者Austin