婉麗河畔旁

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

by · Published

火狐 autohide 的文章之前在「Firefox Quantum（57）下透過 userChrome.css 自動顯示、隱藏瀏覽工具列和書籤工具列」已經寫過，只是在 Firefox 72 之後原先的方法已經失效，加上那篇經過多次刪改亂到不行，所以乾脆再開新的一篇。知道具體怎麼做的，直接拉到文末複製程式碼貼上即可。

一、自動顯示、隱藏效果圖：

與之前方法相較起來，沒有辦法繼承 Firefox 的佈景主題，透明度和深黑紫顏色是我自己訂的，各位可以依需求調整。

3422A autohide 瀏覽列書籤列 demo

二、前製作業

A、修改偏好設定

1、在網址欄貼上 about:config 進入進階偏好設定頁面，並且點「接受風險並繼續」。

3422A about config進階偏好設定

2、在搜尋偏好設定欄貼上 toolkit.legacyUserProfileCustomizations.stylesheets ，並對著 false 連點兩下變成 true。
3、重新啟動火狐。

2020.04.07 更新！

如果在 Firefox 75 之後，會因為重新設計的網址列（urlbar）在使用時自動放大，而導致網址列向上扭曲如下圖：
Firefox 75 新設計會造成網址列顯示出錯

暫時解決辦法有兩種：

1、是通用解，可以用在任何樣式上。重複上面步驟進入 about:config，在搜尋偏好設定欄貼上 browser.urlbar.update1，並將 true 連點兩下改成 false。然後重新啟動火狐即可。不過這個參數在最新的，火狐每夜版（nightly）上被改掉了，到時候可能要再找新的方法。

2、不用修改 browser.urlbar.update1，採用我原來的樣式，加上一段新的調整，附在程式碼那邊供參考。

B、userCrome.css 檔案

1、在網址欄貼上 about:support，按 enter 後進入「疑難排解資訊」頁面。
2、在設定檔目錄那邊按開啟資料夾。

3422C userchrome 設定

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 的界面，所以在支援佈景主題和功能上，先把功能調整出來，這算是一個折衷的辦法，遠不如之前的版本漂亮。歡迎有解決方法的在留言裡提出。還有，不知道什麼時候又會失效就是了～

 

Tags:

You may also like...

Top