简介

• 我有个不用的副屏，平时用来刷刷 instagram 或者 behance 之类的，配合自己些的自动滚屏脚本和 css，实现一个全屏的自动刷图。
• 但因为偶尔也会在这个屏上放点别的窗口，所以全屏有时候切换不方便，就希望 firefox 能自动隐藏顶部，以提供更大的展示空间。
• 现在实现的效果就是窗口顶部 15px，鼠标悬停可以恢复整个顶部工具栏的显示，移出后则自动隐藏，整个窗口都是浏览器的内容区，接近一个无边窗口。
• 压缩到 15px 高度是为了不影响原本网页上的一些顶部按钮和输入等。

方法

• Step 1:

  • 地址栏输入 about:config
  • toolkit.legacyUserProfileCustomizations.stylesheets > true

• Step 2:

  • 地址栏输入 about:support > Click on "Profile Folder" -> "Open Folder"
  • 在这个打开的目录下建文件夹 "chrome", 然后把下面代码存为 "userChrome.css" 放在 "chrome" 内.

/*
Firefox Hide Header / Navigator / Top / Tabs / Address / Toolbox

Step 1:
about:config > toolkit.legacyUserProfileCustomizations.stylesheets > true

Step 2:
about:support > Click on "Profile Folder" -> "Open Folder"
Create folder "chrome" here, and put this file in (as "userChrome.css").

More:
Tutorial: How to create and live-debug userChrome.css : FirefoxCSS
https://www.reddit.com/r/FirefoxCSS/comments/73dvty/tutorial_how_to_create_and_livedebug_userchromecss/
*/
@-moz-document url("chrome://browser/content/browser.xul"),
url("chrome://browser/content/browser.xhtml") {
    /*
    隐藏顶部栏
    第一行 10px 是顶部触发显示的高度。
    下面的 99px 是顶部栏的预估高度。受各种自定义设置的影响，请自行调整。
    如果只需要隐藏地址栏，保留标签栏，用 #nav-bar，然后可能需要适度调节。
    */
    #navigator-toolbox {
        max-height: 15px !important;
        z-index: 1000 !important;
        background: black !important;
        opacity: 0 !important;
        margin-bottom: -99px;
        transition: all .2s !important;
    }

    #navigator-toolbox:hover {
        max-height: none !important;
        opacity: 1 !important;
    }
}

• 一开始有参考 t/669207
• 自动滚屏的油猴脚本放 greasyfork 了，不想关联不同平台的账号，看缘分吧。
• 额外的参考 如何使用 userChrome.css 自定义 Firefox 的用户界面 | 阳光盒子
• 有兴趣深入研究的，这里有比较完整的调试方法。Tutorial: How to create and live-debug userChrome.css : FirefoxCSS