Firefox 72 下透過 userChrome.css 自動顯示、隱藏瀏覽工具列和書籤工具列

火狐 autohide 的文章之前在「Firefox Quantum(57)下透過 userChrome.css 自動顯示、隱藏瀏覽工具列和書籤工具列」已經寫過,只是在 Firefox 72 之後原先的方法已經失效,加上那篇經過多次刪改亂到不行,所以乾脆再開新的一篇。知道具體怎麼做的,直接拉到文末複製程式碼貼上即可。
一、自動顯示、隱藏效果圖:
與之前方法相較起來,沒有辦法繼承 Firefox 的佈景主題,透明度和深黑紫顏色是我自己訂的,各位可以依需求調整。
二、前製作業
A、修改偏好設定
1、在網址欄貼上 about:config 進入進階偏好設定頁面,並且點「接受風險並繼續」。
2、在搜尋偏好設定欄貼上 toolkit.legacyUserProfileCustomizations.stylesheets ,並對著 false 連點兩下變成 true。
3、重新啟動火狐。
2020.04.07 更新!
如果在 Firefox 75 之後,會因為重新設計的網址列(urlbar)在使用時自動放大,而導致網址列向上扭曲如下圖:
暫時解決辦法有兩種:
1、是通用解,可以用在任何樣式上。重複上面步驟進入 about:config,在搜尋偏好設定欄貼上 browser.urlbar.update1,並將 true 連點兩下改成 false。然後重新啟動火狐即可。不過這個參數在最新的,火狐每夜版(nightly)上被改掉了,到時候可能要再找新的方法。
2、不用修改 browser.urlbar.update1,採用我原來的樣式,加上一段新的調整,附在程式碼那邊供參考。
B、userCrome.css 檔案
1、在網址欄貼上 about:support,按 enter 後進入「疑難排解資訊」頁面。
2、在設定檔目錄那邊按開啟資料夾。
3、在該資料夾裡新增名為 chrome 的資料夾。
4、進入該資料夾,新增名為 userChrome.css 的檔案。(不知道怎麼用,可以先用記事本新增一個文字檔在改名 userChrome.css)
5.最後把程式碼貼到 userChrome.css 裡就行了。
三、程式碼的部份
A、主要程式碼
由於原先 AlexVallat 分享的 auto-hide.css 已經沒有在更新了,所以這邊改用比較簡單的方法,缺點前面提過就是無法繼承 Firefox 的佈景主題,如果知道更好的方法,或發現 bug 歡迎留言告訴我。
留言區 魏直人 版友分享的程式碼已經能夠支援佈景主題!!!建議直接使用他的方法~
2020.04.11更新!
補上 Fx 75 的網址列修正!
#nav-bar:not([customizing="true"]), #PersonalToolbar:not([customizing="true"]) { min-height: 0px !important; max-height: 0px !important; position: absolute !important; background-color:#0D050E !important; width:100vw; opacity:0; transition: opacity 0.15s ease-in !important; } #navigator-toolbox:hover :-moz-any(#nav-bar), #navigator-toolbox:focus-within :-moz-any(#nav-bar) { min-height: 38px !important; max-height: 38px !important; margin-bottom: -38px; opacity:0.9; z-index:2; } #navigator-toolbox:hover :-moz-any(#PersonalToolbar), #navigator-toolbox:focus-within :-moz-any(#PersonalToolbar){ min-height: 38px !important; max-height: 38px !important; margin-top: 38px !important; margin-bottom: -76px; opacity:0.8; z-index:1; } /*fx75 網址列修正 #urlbar{ margin-inline-start: 0px !important; width: 100% !important; left: 0 !important; top: 5px !important; } .urlbarView{ margin-inline: 0 !important; margin-top: 7px !important; width: auto !important; } .urlbarView-row{ padding: 0px 10px !important; } #urlbar-input-container{ padding: 0 !important; height: 100% !important; }
B、自行修改建議
1、想要換背景顏色,自第 6 行的 background-color 修改後面的色碼,色碼可以在這邊找你喜歡的。
2、透明度的調整在 17 和 27 行的 opacity。喜歡實心的就調成 1,更透明就調低數值。
3、如果瀏覽工具落或書籤工具列高度和螢幕解析度不合,可以調整 min-height 和 max-height。注意 16 行的 margin-botton 要符合高度,26 行的 margin-botton 是兩個區塊的高度結合(不然會往下推或有縫隙)。
結語
用習慣有 autohide 的界面,所以在支援佈景主題和功能上,先把功能調整出來,這算是一個折衷的辦法,遠不如之前的版本漂亮。歡迎有解決方法的在留言裡提出。還有,不知道什麼時候又會失效就是了~