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

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

 

You may also like...

Top