Re: [-Fx-] FlexFox更新了1.0.0版 速度提升了100x
這篇說明如何修改FlexFox的各種參數，
不過更重要的是如何即時預覽對`userChrome.css`所做的修改，
這樣才能所見即所得，調整到自己想要的效果。
首先到`about:config`將下面三個選項設為true和false
"devtools.chrome.enabled", true
"devtools.debugger.remote-enabled", true
"devtools.debugger.prompt-connection", false
這三個選項的作用是開啟瀏覽器介面的工具箱，遠端除錯，和連線時是否提示。
如果經常使用瀏覽器工具箱，每次連線都要提示詢問很麻煩，
所以建議設為false。
開啟後按 Ctrl + Shift + Alt + I 打開瀏覽器工具箱，
按Ctrl + " + / - " 可以放大縮小文字。
選「樣式編輯器」，在「過濾樣式表」填入`uc`，打開`uc-variables.css`，
這裡面以"--uc"開頭的變數就是我們可以快速修改調整FlexFox顯示效果的地方。
裡面的變數大多有簡單的註解說明其作用，可以依照自己的喜好修改。
譬如說我們想要修改擴展面板每一列顯示的圖示大小和個數，
先按下工具箱右上角的三個點點點，將「不自動隱藏彈出型視窗」打勾，
然後按下瀏覽器的擴充套件（拼圖）按鈕，將擴展面板保持打開。
目前預設是20px每一列4個
https://i.imgur.com/RnBL3Tz.png
/* Icon size in the uni-extensions panel */
--uc-uei-icon-size: 20px;
/* Number of icons per row in the uni-extensions panel */
--uc-number-of-extensions-in-a-row: 4;
我想改成每列8個而且圖示更大一點
https://i.imgur.com/Q77DWcE.png
--uc-uei-icon-size: 32px;
--uc-number-of-extensions-in-a-row: 8;
一邊改數字的同時，瀏覽器的擴展面板就會跟著你改動的數字變化。
調整到你滿意的效果後，按下`uc-variables.css`旁的「儲存」就可以將結果保存。
/* ==== userContent ==== */
要修改`userContent.css`就比較麻煩，我們以`uc-pdf.js.css`為例，
隨便打開一個pdf，按下 Ctrl + Shift + I 打開網頁開發者工具，
選「樣式編輯器」，結果會發現在這裡完全找不到`uc-pdf.js.css`。
按下「檢測器」旁邊的箭頭，然後將滑鼠移到pdf上叫出工具列，
對著工具列按下左鍵，「檢測器」的HTML就會展開到`toolbar`的位置。
點選`toolbar`，然後在右側窗口的「過濾樣式」裡填入`uc`，
就會顯示`uc-pdf.js.css`的規則，按下規則旁`uc-pdf.js.css`的連結，
就會跳轉到「樣式編輯器」，
這時`uc-pdf.js.css`就神奇地出現在「樣式編輯器」裡面了。
我們在這裡對`uc-pdf.js.css`所做的修改也會即時更新在畫面上。
/* ==== Sidebery ==== */
最後是用`userContent.css`修改Sidebery，雖然Sidebery本身有內建樣式表編輯器，
在Sidebery內部就可以修改Sidebery的顯示效果，
但是如果想要用瀏覽器的參數控制Sidebery，還是必須使用`userContent.css`。
首先到`about:debugging#/runtime/this-firefox`找到Sidebery，
按下「檢測」，找到右邊三個點點點旁邊的分割框架的圖案，
然後選`/sidebar/sidebar.html`，
接著「樣式編輯器」裡面就會出現`uc-sidebery.css`，
以下就如法泡製。
-完-
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.228.163.81 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Browsers/M.1732532100.A.104.html
推
11/25 19:03,
2小時前
, 1F
11/25 19:03, 1F
這個其實是英文文件，我只是把它整理了一下轉過來:P
https://tinyurl.com/3b5cp7bk
※ 編輯: YuQilin (61.228.163.81 臺灣), 11/25/2024 20:08:54
討論串 (同標題文章)
完整討論串 (本文為第 2 之 2 篇)：
Browsers 近期熱門文章
PTT數位生活區 即時熱門文章
