婉麗河畔旁

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

by · Published

儘管 Firefox 56 前天才發佈，但比起改名叫 Firefox Quantum 的 Firefox 57 最近釋出的穩定性以及碾壓性速度報告，這個修補性質版本顯得沒什麼吸引力，我也趁著熱潮試著摸了一下後者。

就像我們都知道的，Firefox Quantum 上修改界面的擴充套件（add-on）由於禁止使用傳統 api 的關係幾近全滅，幸好依然能夠像以前一樣透過撰寫  userChrome.css 的方式修改界面（UI）。這篇就記錄一下如何使用 userChrome.css，以及我所需要的自動顯示隱藏瀏覽工具列、書籤工具列的方法。

一、修改界面的前製作業

1、打開火狐個人設定檔（profiles)：

在 Firefox 的網址列輸入 about:profiles 進入設定檔頁面，選擇根目錄項目，點選後面的「開啟資料夾」，即可進入個人設定檔資料夾。

userchrome.css autohide - 開啟 Firefox Profiles 的方法

或者自行至下列位置打開：

C:\Users\使用者ID\AppData\Roaming\Mozilla\Firefox\Profiles\隨機亂數.default 資料夾

2、在 profiles 資料夾新建一個叫做「chrome」的空資料夾。

3、進入該 chrome 資料夾，用文字編輯器新增一個名為：userChrome.css 檔案。（筆記本即可，推薦用免費的 notepad++）

4、在 userChrome.css 加上指定修改界面的程式碼：

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

如果有多個 profiles，則每個個人設定檔都要分別操作。

Firefox 69 之後版本

1、在網址列輸入 about:config 後，並點擊「我發誓我一定會小心」按鈕，進入偏好設定頁面。

2、在頁面置頂的搜尋框搜尋 toolkit.legacyUserProfileCustomizations.stylesheets

3、將值從 false，點兩下改成 true。並重新啟動瀏覽器。

二、添加需要的界面 code

完成好 userChrome.css 設定之後，接下來就可以針對自己想修改界面的部份把 CSS 程式碼放進去了。瀏覽器的 CSS 樣式表可以選擇：

  • 參考這篇的方法找出介面元素，自己寫。
  • 在 stylus 常用網站 userstyle.org 搜尋（Firefox 57 之後套件無法更動瀏覽器介面，不然以前用套件就好了。）
  • 優秀套件 Classic Theme Restore 的作者 Aris-t2 預計在之後針對發表的 CustomCSSforFx 專案裡的 css 樣式。
  • PTT 看到瀏覽器版版友 mayuyu 分享，由 Timvde 維護的 UserChrome-Tweaks  優秀頁面查詢需要的項目來使用。
為什麼要自動顯示、隱藏瀏覽工具列和書籤工具列

談回主題，需要有瀏覽器「滑鼠劃過自動顯示、隱藏瀏覽工具列和書籤工具列」功能的主因除了桌機外，常出差、簡報的我為了方便攜帶，使用的是 surface pro、xps 13 這兩台偏小的筆電，螢幕小可視面積相當有限，所以透過此功能增加瀏覽面積。

過去曾經推薦過的方式包括：「[Firefox] Prospector - LessChrome HD 套件：自動顯示、隱藏瀏覽工具列和書籤列」早已被官方刪除；「[Firefox] Beyond Australis - 自訂性更高的自動顯示、隱藏瀏覽工具列和書籤列套件」也在 Quicksaver 大神放棄更新所有火狐套件下，最多只能用到 Firefox 56。因此趁著機會找了相對應的方式來處理。

效果圖（以下是舊的圖，新的方法會讓導覽列和書籤列一起消失，理解一下就行，不做新圖了）：

userchrom.css autohide 效果圖

自動隱藏瀏覽工具列程式碼

自動顯示、隱藏瀏覽工具列的程式碼來自前文提到的 UserChrome-Tweaks 頁面，由 AlexVallat 分享的 auto-hide.css ：

2018/12/12 更新：Firefox 64 的 tab 高度有變，在網址列顯現的時候會出現縫隙，將第八行的 --tab-min-height: 33px;改成 37px 即可。

2019/08/11 更新：針對 Firefox 67 做調整，且因為螢幕的不同，除以下完整程式碼，請自行微調 19 行的 --trigger-area-height: 1px;

截至 2019/08/11 Fx 68.0.1 可使用自動隱藏瀏覽列程式碼如下：

:root[uidensity=compact] #navigator-toolbox {
  --nav-bar-height: 33px;
  --tab-min-height: 30px;
}

:root:not([uidensity]) #navigator-toolbox {
  --nav-bar-height: 41px;
  --tab-min-height: 35px;
}

:root[uidensity=touch] #navigator-toolbox {
  --nav-bar-height: 41px;
  --tab-min-height: 41px;
}

/*tab列下方有線，中間縫隙，改trigger-area- height*/
#navigator-toolbox {
  --tabbar-height: calc(var(--tab-min-height) + 7px);
  --trigger-area-height: 1px;
}

:root[chromehidden~="toolbar"] #navigator-toolbox {
  --tabbar-height: 0.1px;
}

/*這裡通常要放 0px，但在 Windows 7 環境下可以給 1px;*/
#toolbar-menubar {
  margin-top: 0px !important; 
}   :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar,
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar {
  padding-top: var(--space-above-tabbar) !important;
}

#nav-bar, #PersonalToolbar {

    -moz-window-dragging: default;
}

:root:not([customizing]) #nav-bar
{
  overflow-y: hidden;
  max-height:0;
  min-height:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  opacity: 0;
}

:root:not([customizing]) :hover > #nav-bar,
:root:not([customizing]) #nav-bar:focus-within {
  max-height: var(--nav-bar-height);
  opacity: 1;
  transition: opacity 0.15s ease-in, max-height 0.15s linear;
}

:root:not([customizing]) #navigator-toolbox {
  max-height: calc(var(--tabbar-height) + var(--trigger-area-height));
  min-height: var(--tabbar-height);
  margin-bottom: calc(-1 * var(--trigger-area-height));
}

:root:not([customizing]) #navigator-toolbox:hover,
:root:not([customizing]) #navigator-toolbox:focus-within {
  max-height: calc(var(--tabbar-height) + var(--nav-bar-height));
  margin-bottom: calc(0px - var(--nav-bar-height));
}
自動顯示隱藏書籤工具列程式碼

自動顯示隱藏書籤工具列的程式碼，分為兩種：方法一是我參考 stylish 上的程式碼臨時拼裝出來，用來和上面的「自動顯示隱藏瀏覽器工具列」程式碼併用。效果就和展示圖一樣，為了方便點擊書籤的關係，書籤工具列顯示後停留的時間會比瀏覽器工具列自動收起收起延遲一些，不喜歡可以自己縮短第一段裡 ease-out 的秒數；方法二是參考 chen 留言提出的 collapse 屬性，直接和導航 bar 一起隱藏，遮的更乾淨也比較不會誤觸。推薦使用方法二～

方法一：

#PersonalToolbar{
    
    opacity: 0 !important;
    visibility: hidden;
    transition: all 0.2s ease-out 1.5s !important;
    }
 
#navigator-toolbox:hover > #PersonalToolbar{
 
    opacity: 1 !important;
    visibility: visible !important;
    transition: all 0.2s ease 0s !important;
    }

方法二：

:root:not([customizing]) #PersonalToolbar {

    visibility: collapse;
    }

:root:not([customizing]) :hover > #PersonalToolbar,
:root:not([customizing]) #navigator-toolbox:focus-within #PersonalToolbar {

    visibility: unset;
    }

方法三（2018/3/22更新）：

/* If the bookmarks bar is turned on, auto-hide that too */
:root:not([customizing]) #PersonalToolbar {
  max-height: 0 !important;
  min-height: 0.1px !important;
  opacity: 0;
  transition: opacity 0.15s ease-in !important;
}

:root:not([customizing]) :hover > #PersonalToolbar,
:root:not([customizing]) #navigator-toolbox:focus-within #PersonalToolbar {
  max-height: 4em !important;
  opacity: 1;
}

鑑於我未曾系統學過 CSS，這都只是臨時拼湊出來暫時可以使用的方法，如果有更好的寫法也請分享給我。

2018/03/22 更新：AlexVallat 修改了他的方法，也加入了自動隱藏書籤列的功能，建議都改用他的！

2019/02/04 更新：由於 Firefox 65 會因為整合 Windows 渲染出問題，所以要稍微修正方法才不會在標籤列和書籤工具列中間出現問題，又因為原 github 頁面內整合奇怪的東西，所以這邊推薦的方式是採用上方 AlexVallat 的方法 + 方法 3 + lokmeinmatz 提出的修正來取得最佳使用效果。

修正方法是將 AlexVallat 方法第三段#navigator-toolbox 裡的：--tabbar-height: calc(var(--tab-min-height) + var(--space-above-tabbar)); 換成--tabbar-height: calc(var(--tab-min-height) + 7px);

2019/08/11 更新： Fx 67 後請使用最新的「自動隱藏瀏覽工具列程式碼」和「書籤列的方法三」。

結語

整體而言這組「自動顯示、隱藏瀏覽工具列和書籤工具列功能」的效果比 Quicksaver 大神開發的「Beyond Australis」差上了一些，尤其精準度的不足，在點擊上還是有些不方便，不過已經達到我增加可是面積的目的。

在介紹如何使用 userChrome.css 之餘，依我自己的需求做為實際例子紀錄下來。然而 userChrome.css 能夠調整的項目非常廣泛，對界面調整有需要且正在使用 Firefox Quantum 的使用者不妨也試著用此方法調整瀏覽器，以更符合自己的習慣。

 

Tags:

You may also like...

Top