婉麗河畔旁

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 是兩個區塊的高度結合（不然會往下推或有縫隙）。

C、給 Firefox 89+ 新 proton 界面的方法
2021.06.11更新！

這是 MrOtherGuy 寫給 Firefox 89+ 新 Proton UI 自動隱藏導覽列和書籤列的方法，能妥善結合佈景主題，也沒有懸停界面一下子就收起的缺陷，都改用這個吧！另外作者本身的 github 還有一大包調效界面的程式碼，有需要都可以去參考看看～

/* Dummy variable to support both versions 89-90 */
:root{ --tab-block-margin: var(--proton-tab-block-margin) }

#navigator-toolbox{
  --uc-bm-height: 22px; /* Might need to adjust if the toolbar has other buttons */
  --uc-bm-padding: 2px; /* Vertical padding to be applied to bookmarks */
  --uc-navbar-height: -50px; /* navbar is main toolbar. Use negative value */
  --uc-autohide-toolbar-delay: 600ms; /* The toolbar is hidden after 0.6s */
}

:root[uidensity="compact"] #navigator-toolbox{ --uc-bm-padding: 1px; --uc-navbar-height: -32px }
:root[uidensity="touch"] #navigator-toolbox{ --uc-bm-padding: 6px }

@media (-moz-proton){
  #navigator-toolbox{
     --uc-bm-height: 26px; /* Might need to adjust if the toolbar has other buttons */
  }
  :root[uidensity="compact"] #navigator-toolbox{
    --uc-navbar-height: -34px;
    --uc-bm-height: 23px;
  }
}

:root[sessionrestored] #nav-bar,
:root[sessionrestored] #PersonalToolbar{
  background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)), var(--lwt-additional-images,var(--toolbar-bgimage))  !important;
  background-position: top,var(--lwt-background-alignment);
  background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px));
  background-repeat: repeat,var(--lwt-background-tiling);
  transform: rotateX(90deg);
  transform-origin: top;
  transition: transform 135ms linear var(--uc-autohide-toolbar-delay) !important;
  z-index: 2;
}

:root[sessionrestored] #PersonalToolbar{
  z-index: 1;
  background-position-y: calc(0px - var(--tab-min-height) - 2*var(--tab-block-margin,0px) + var( --uc-navbar-height));
}

:root[lwtheme-image] #nav-bar,
:root[lwtheme-image] #PersonalToolbar{
  background-image: linear-gradient(var(--toolbar-bgcolor),var(--toolbar-bgcolor)),var(--lwt-header-image), var(--lwt-additional-images,var(--toolbar-bgimage)) !important;
}

#nav-bar[customizing],#PersonalToolbar[customizing]{ transform: none !important }

#navigator-toolbox > #PersonalToolbar{
  transform-origin: 0px var(--uc-navbar-height);
  position: relative;
}

:root[sessionrestored]:not([customizing]) #navigator-toolbox{ margin-bottom:  calc(2px - var(--uc-bm-height) - 2 * var(--uc-bm-padding) + var(--uc-navbar-height)); }

#PlacesToolbarItems > .bookmark-item,
#OtherBookmarks,
#PersonalToolbar > #import-button{
  padding-block: var(--uc-bm-padding) !important;
}

/* Make sure the bookmarks toolbar is never collapsed even if it is disabled */
#PersonalToolbar[collapsed="true"]{
  min-height: initial !important;
  max-height: initial !important;
  visibility: hidden !important
}

/* The invisible toolbox will overlap sidebar so we'll work around that here */
#navigator-toolbox{ pointer-events: none; border-bottom: none !important; }
#PersonalToolbar{ border-bottom: 1px solid var(--chrome-content-separator-color) }
#navigator-toolbox > *{ pointer-events: auto }

#sidebar-box{ position: relative }

/* Selected tab needs higher z-index now to "hide" the broder below it */
.tabbrowser-tab[selected]{ z-index: 3 !important; }

/* SELECT TOOLBAR BEHAVIOR */
/* Comment out or delete one of these to disable that behavior */

/* Show when urlbar is focused */
#nav-bar:focus-within + #PersonalToolbar,
#navigator-toolbox > #nav-bar:focus-within{
  transition-delay: 100ms !important;
  transform: rotateX(0);
}

/* Show when cursor is over the toolbar area */
#navigator-toolbox:hover > .browser-toolbar{
  transition-delay: 100ms !important;
  transform: rotateX(0);
}

 

結語

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

 

Tags:

You may also like...

Top