[分享] Firefox 隐藏整个顶部栏 全屏显示

[JCZ2MkKb5S8ZX9pq]

简介

• 我有个不用的副屏，平时用来刷刷 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

补丁

• overflow 还是要加，去掉之后触发区域还是完整高度，不是15px。
• 顺便又修了点别的，更新如下。

/*
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") {
    /*
    隐藏顶部栏
    第一行15px是顶部触发显示的高度。
    如果只需要隐藏地址栏，保留标签栏，用 #nav-bar，然后可能需要适度调节。
    */
    #navigator-toolbox {
        max-height: 15px !important;
        overflow: hidden !important;
        z-index: 1000 !important;
        background: black !important;
        opacity: 0 !important;
        margin-bottom: -15px !important;
        transition: all .2s !important;
    }

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

    /*
    窗口最大化时 #titlebar 会多出来一个 padding-top:8px，但没找到哪儿设的。
    会导致显示区上移8px，这里补回来。
    顶部hover时，显示区和顶部间还是有8px的margin，平时看不到就先不管了。
    */
    html[sizemode="maximized"] #browser{
        margin-top: 8px !important;
    }
}

[ciaoly]

道理我都懂，可为啥自定义 Firefox 的外观用的是 chrome.css 呢？这是 Firefox 和 chrome 有什么渊源还是咋地？
（刚查了查 chrome 单词的意思，就“镉”的意思哇，难道有表示“外观”的意思？

[Remember]

firefox 配置用 chrome 这个词的时候，chrome 还不知道在哪儿呢。

[JCZ2MkKb5S8ZX9pq]

或者最后补那 8px 的补丁这样打也可以

html[sizemode="maximized"] #navigator-toolbox{
margin-bottom: -7px !important;
}
html[sizemode="maximized"] #navigator-toolbox:hover{
margin-bottom: 0 !important;
}

[ltuxer]

终于找到想要的了，不然用插件 auto full screen 会看不到系统任务栏。

[ltuxer]

找到个更好的了 https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_toolbox.css ，这个内外屏切换不会出现 bug ，你这个只有一个屏时改下参数还是可以的，多屏就有点 bug 了，在外屏正常全屏，在内屏顶部会多出一部分