Firefox CSS Hacks：优化多账户容器标签的悬停显示方案

在Firefox浏览器中，多账户容器(Multi-Account Containers)是一项非常实用的功能，它允许用户为不同的网站会话创建隔离的环境。然而，默认情况下容器标签会始终显示在地址栏中，特别是当容器名称较长时，会占用大量宝贵的地址栏空间。

问题分析

许多用户使用urlbar_info_icons_on_hover.css样式来隐藏地址栏中的非必要图标，只在悬停时显示。但当前实现中，容器标签不受此样式影响，仍然保持常显状态。这导致了两个主要问题：

1. 地址栏空间利用率降低，特别是在小屏幕设备上
2. 视觉干扰增加，影响用户对核心地址信息的注意力

技术解决方案

通过CSS样式修改，我们可以将容器标签也纳入悬停显示的逻辑中。实现这一效果主要依靠以下几个CSS选择器和属性：

#userContext-label {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}

#urlbar:hover #userContext-label {
  opacity: 1;
}

这段代码的工作原理是：

1. 默认将容器标签的透明度设置为0（完全透明）
2. 当鼠标悬停在地址栏上时，将透明度恢复为1（完全不透明）
3. 添加0.2秒的渐变效果使显示/隐藏更加平滑

实现优势

这种实现方式具有多个优点：

• 空间节省：释放了地址栏的固定空间，让更多内容可以显示
• 视觉简洁：减少了界面上的视觉元素，提升专注度
• 即时可用：需要时只需悬停即可查看容器信息
• 性能友好：仅使用CSS实现，无额外性能开销

兼容性考虑

该方案与现有的urlbar_info_icons_on_hover.css样式完美兼容，不会影响其他地址栏图标的悬停行为。同时，它保持了Firefox的原生功能完整性，只是改变了显示方式而非移除功能。

用户体验提升

对于经常使用多账户容器功能的用户，这一改进可以显著提升日常浏览体验：

1. 工作流更加专注，不会被常显的容器标签分散注意力
2. 在小屏幕设备上可以获得更多地址显示空间
3. 保持了功能的可发现性和可用性，需要时随时可查看

这种优化体现了"按需显示"的界面设计原则，在保持功能完整性的同时优化了视觉呈现效果。