Firefox Quantum（57）下透過 userChrome.css 自動顯示、隱藏瀏覽工具列和書籤工具列
儘管 Firefox 56 前天才發佈，但比起改名叫 Firefox Quantum 的 Firefox 57 最近釋出的穩定性以及碾壓性速度報告，這個修補性質版本顯得沒什麼吸引力，我也趁著熱潮試著摸了一下後者。
就像我們都知道的，Firefox Quantum 上修改界面的擴充套件（add-on）由於禁止使用傳統 api 的關係幾近全滅，幸好依然能夠像以前一樣透過撰寫 userChrome.css 的方式修改界面（UI）。這篇就記錄一下如何使用 userChrome.css，以及我所需要的自動顯示隱藏瀏覽工具列、書籤工具列的方法。
修改界面的前製作業
1、打開火狐個人設定檔（profiles)：
在 Firefox 的網址列輸入 about:profiles 進入設定檔頁面，選擇根目錄項目，點選後面的「開啟資料夾」，即可進入個人設定檔資料夾。
或者自行至下列位置打開：
|
1 |
C:\Users\使用者ID\AppData\Roaming\Mozilla\Firefox\Profiles\隨機亂數.default 資料夾 |
2、在 profiles 資料夾新建一個叫做「chrome」的空資料夾。
3、進入該 chrome 資料夾，用文字編輯器新增一個名為：userChrome.css 檔案。（筆記本即可，推薦用免費的 notepad++）
4、在 userChrome.css 加上指定修改界面的程式碼：
|
1 |
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */ |
如果有多個 profiles，則每個個人設定檔都要分別操作。
添加需要的界面 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。因此趁著機會找了相對應的方式來處理。
效果圖：
自動隱藏瀏覽工具列程式碼
自動顯示、隱藏瀏覽工具列的程式碼來自前文提到的 UserChrome-Tweaks 頁面，由 AlexVallat 分享的 auto-hide.css：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
:root[uidensity=compact] #navigator-toolbox { --nav-bar-height: 33px; --tab-min-height: 29px; } :root:not([uidensity]) #navigator-toolbox { --nav-bar-height: 39px; --tab-min-height: 33px; } :root[uidensity=touch] #navigator-toolbox { --nav-bar-height: 41px; --tab-min-height: 41px; } #navigator-toolbox { --tabbar-height: calc(var(--tab-min-height) + var(--space-above-tabbar)); --trigger-area-height: 5px; } :root[chromehidden~="toolbar"] #navigator-toolbox { --tabbar-height: 0.1px; } #toolbar-menubar { margin-top: 0px !important; /* This is usually 0, but under Win7 can be given an extra 1px when not maximized */ } /* Undo add of 4px extra margin on top of the tabs toolbar on Windows 7. */ /* Note: @media -moz-os-version does not work in userChrome.css (https://bugzilla.mozilla.org/show_bug.cgi?id=1418963) */ :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 { /* Otherwise spacers will not count as hover-able areas */ -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 一起隱藏，遮的更乾淨也比較不會誤觸。推薦使用方法二～
鑑於我沒學過 CSS，這都只是臨時拼湊出來暫時可以使用的方法，如果有更好的寫法也請分享給我。
2018/3/22 更新：AlexVallat 修改了他的方法，也加入了自動隱藏書籤列的功能，建議都改用他的！
方法一：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
#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; } |
方法二（12/1 更新）：
|
1 2 3 4 5 6 7 8 9 10 |
:root:not([customizing]) #PersonalToolbar { visibility: collapse; } :root:not([customizing]) :hover > #PersonalToolbar, :root:not([customizing]) #navigator-toolbox:focus-within #PersonalToolbar { visibility: unset; } |
方法三（2018/3/22更新）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* 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; } |
結語
整體而言這組「自動顯示、隱藏瀏覽工具列和書籤工具列功能」的效果比 Quicksaver 大神開發的「Beyond Australis」差上了一些，尤其精準度的不足，在點擊上還是有些不方便，不過已經能夠符合我日常閱讀、看影片使用。
在介紹如何使用 userChrome.css 之餘，依我自己的需求做為實際例子紀錄下來。然而 userChrome.css 能夠調整的項目非常廣泛，對界面調整有需要且正在使用 Firefox Quantum 的使用者不妨也試著用此方法調整瀏覽器，以更符合自己的習慣。
