作者YuQilin (神獸)
看板Browsers
標題Re: [-Fx-] FlexFox 的重大更新
時間Thu May 29 22:49:50 2025
從 v3.4.2 之後的更新
### 1. 支援 Firefox Color
可以很簡單的將 FlexFox 修改為自己喜歡的顏色。
安裝 Firefox Color 擴展，這是 Mozilla 官方推出的擴展
https://addons.mozilla.org/firefox/addon/firefox-color/
到 Firefox Color 網站
https://color.firefox.com/
先在 `Custom backgrounds` 這一頁，隨便選任何一張背景圖片，
純色也可以，之後就可以任意調整 Firefox 介面的顏色，所見即所得。
如果不挑選任何圖片，需在 `about:config`
啟用 `uc.flex.allow-addons-to-change-toolbar-color` 這個選項，
這樣在 Firefox Color 所做的修改才會生效。
下面是通過 Firefox Color，套用
Rosé Pine Moon
https://github.com/rose-pine/firefox
的主題後，FlexFox 的樣子
https://i.imgur.com/IXEuFnX.png
### 2. 修復 Sidebery 在 Firefox v140 無法展開的問題
: → YuQilin: v3.4.2至少可以用到Firefox v140沒有問題。
上次某人說 v3.4.2 最少可以用到 Firefox v140 都不會有問題，
結果很快就被打臉了XD
不知道是不是因為 v140 是下一個 ESR 版本的關係，
開發組好像打了雞血，做了非常多的更新。
v140 對於側邊欄結構的修改，
會讓很多自動展開側邊欄的樣式掛掉，
有使用側邊欄樣式的人要注意更新。
### 3. 一些 bug 修正，樣式微調。
其中最重要的是，當原生垂直分頁放在右側時，
滑鼠移到螢幕邊緣的展開會非常不順暢，而且滾動條也無法顯示。
因為平日沒有使用這樣的佈局，我一直沒有發現。
這個 bug 相當離譜，基本讓原生垂直分頁在右側時是不太可用的狀態。
### 4. 改良地址欄的顯示效果。
之前地址欄展開的樣子太難看，現在漂亮多了。
: 推 hohiyan: url讓它保持原來的樣子就好了，圓角化並不好看 XD 04/25 22:46
現在新增了一個選項：
`uc.flex.revert-to-original-flat-corner-style`
設為 true 之後會停用地址欄、搜尋框、尋找欄的大圓角設計，
改回 Firefox 預設的平角樣式
https://i.imgur.com/63uPGNT.png
另外，在 uc-variables.css 底下新增了這些變數：
```
--uc-urlbar-border-radius: 30px;
--uc-urlbar-popup-border-radius: 15px;
--uc-urlbar-icon-radius: 16px;
--uc-urlbar-icon-inner-radius: 6px;
--uc-searchbar-popup-border-radius: 12px;
--uc-findbar-border-radius: 8px;
```
複製到 chrome\components\uc-user-settings.css
修改這些變數就可以快速調整地址欄、搜尋框、尋找欄的圓角半徑設定。
### 5. 關於使用快速鍵和工具列按鈕切換佈局
上次更新有提到可以使用快速鍵和按鈕快速切換 4 種佈局，
這裡補充說明一下詳細的方法。
先安裝這個擴展
https://addons.mozilla.org/firefox/addon/userchrome-toggle-extended/
安裝好以後，按照下圖設定
https://i.imgur.com/LzWd4TB.png
基本上只需要打勾就好。
設定好以後一定要記得按左上角的 `Apply changes` 按鈕。
Ctrl+Shift+1 | Lock Sidebery | 鎖定垂直分頁保持展開狀態
Ctrl+Shift+2 | Hide Topbar | 完全隱藏上方的工具列，滑鼠移到邊緣顯示
Ctrl+Shift+3 | Hide Sidebery | 完全隱藏垂直分頁，滑鼠移到邊緣顯示
Ctrl+Shift+4 | Hide All | 隱藏所有UI，僅顯示網頁內容
可以更改預設快速鍵，點擊右上角齒輪，我自己修改為 Alt+1/2/3/4
https://i.imgur.com/enq4IpG.png
不習慣用鍵盤，可以設定為滑鼠手勢，也可以使用工具列的按鈕切換
https://i.imgur.com/I6TZH2y.png
--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 61.228.147.222 (臺灣)
※ 文章網址: https://webptt.com/m.aspx?n=bbs/Browsers/M.1748530194.A.12C.html
1F：推 rockmanx52: 也順便問一下書籤那個愛心能不能換回原本的星星跟改 05/30 02:02
2F：→ rockmanx52: 顏色？ 05/30 02:02
3F：推 hohiyan: bookmark icon 有選項可以改回原本的 05/30 04:28
4F：→ hohiyan: 感謝作者增加選擇 URL bar 形狀的選項 05/30 04:29
5F：推 MK47: 推 其實我喜歡urlbar圓的XD 05/30 10:01
書籤愛心可以用選項關閉
uc.flex.revert-to-original-bookmark-star-icon true
書籤星星的顏色可以用變數控制
--uc-bookmark-star-color: light-dark(#ea4c89, #9651ff);
也可以更換成自己喜歡的圖示，替換掉下面的檔案
../icons/bookmark/bookmark.svg
其他像Windows視窗控制按鈕、側邊欄按鈕的圖示也可以還原或更換
uc.flex.revert-to-original-window-controls true
uc.flex.revert-to-original-sidebar-icon true
下拉選單、右鍵選單的圖示也可以關閉
uc.flex.disable-menu-icons true
「尋找欄失去焦點時自動隱藏」這個功能也可以關閉
uc.flex.disable-findbar-autohide true
詳細的選項可以看這裡
https://is.gd/ddatT4
安裝時把user.js放到Profile設定檔資料夾下
重新啟動後就會自動匯入這些選項，不用手動輸入
(記得匯入後要把user.js刪除，之後所做的修改才能保存)
在 `about:config` 當中輸入 `uc.flex.`
就會列出所有FlexFox使用的選項 雙擊即可切換開關
當初想FlexFox這個名字就是希望它能夠很有彈性的意思，
所以常常寫好一個功能後，就是再寫個選項把這個功能關掉XD
結果用到最後，其實我自己只有使用自動隱藏這一個功能而已 :)
※ 編輯: YuQilin (114.37.95.97 臺灣), 05/30/2025 13:20:36
6F：→ YuQilin: 突然發現 現行版本的FlexFox 05/31 23:38
7F：→ YuQilin: 在原生垂直分頁的模式下 05/31 23:38
8F：→ YuQilin: 釘選分頁如果小於3個 05/31 23:38
9F：→ YuQilin: 釘選分頁的背景高亮會溢出 05/31 23:38
10F：→ YuQilin: 還有如果側邊欄的工具按鈕小於5個 05/31 23:38
11F：→ YuQilin: 側邊欄的設定按鈕會歪掉 05/31 23:38
12F：→ YuQilin: 而且展開方向會變成垂直 05/31 23:38
13F：→ YuQilin: 因為我的釘選分頁一直大於3個 05/31 23:38
14F：→ YuQilin: 工具按鈕一直大於5個 所以一直沒有發現 05/31 23:38
15F：→ YuQilin: 原來如果是這種使用情況 05/31 23:38
16F：→ YuQilin: FlexFox一直是這麼醜的嗎...... 05/31 23:38
更新 v3.5.1
1. 修復上述的錯誤，現在不論在何種狀態，垂直分頁始終保持一致的排版
- 不論釘選分頁、工具按鈕的個數
- 使用側邊欄按鈕切換側邊欄展開或收合狀態
- 啟用原生垂直分頁或Sidebery
- 放在左側或右側
- 使用快速鍵切換四種版面
2. 修復 v3.4.7 引起的退化
使用 Lock Sidebery 快速鍵或選項，
鎖定原生垂直分頁永遠展開時，懸停時會產生抖動。
且如果放在右側，會產生錯誤的位移。
3. 畫中畫(PiP)窗口的音量控制按鈕現在永遠可見
Firefox 預設的畫中畫窗口看不到音量控制按鈕，
必須調整窗口大小，放大後才能看見，使用上不太方便，
現在修改為永遠可見。
4. 新增選項 `uc.flex.move-pip-volume-to-top`
將上述的按鈕移動到畫中畫的頂部。
5. 新增選項 `uc.flex.dim-urlbar-popup-backdrop`
網址欄下拉彈出搜尋建議列表時，暗化瀏覽器的背景。
數值範圍 `0` - `2`，`0` 關閉，數值越大，背景越暗。
6. 新增選項 `uc.flex.enable-rounded-web-content`
為網頁內容區域的四邊添加邊距、圓角和陰影。
數值範圍 `0` - `2`，`0` 關閉，數值越大，邊距越寬。
另外可以使用變數
```
`--uc-web-content-margin-small`
`--uc-web-content-margin-large`
`--uc-web-content-radius-box`
```
控制自己喜歡的邊距和圓角半徑。
啟用後網頁內容看起來會像一張懸浮的卡片，
視覺風格類似 Zen 和 Edge 瀏覽器。
以下是 `uc.flex.enable-rounded-web-content` 為 `1` 的效果
https://i.imgur.com/EUB0yYA.jpeg
※ 編輯: YuQilin (114.37.95.97 臺灣), 06/02/2025 19:56:05
17F：推 dirtywestwes: 推 06/10 04:34
18F：推 twobrainhole: 推 06/23 12:30
19F：推 imusya: v140 開始是不是不能完全隱藏了，一定會留 icon 在左邊？ 07/01 13:36
20F：→ YuQilin: 可以完全隱藏呀 你確認一下是否為最新版本 07/02 00:00
22F：→ YuQilin: 新版可以在about:config頁面顯示版本號碼 07/02 00:28
23F：→ YuQilin: 要檢查使用中的版本號碼會比較方便 07/02 00:28
24F：→ YuQilin: 近日會更新v4版本 07/02 00:28
25F：→ YuQilin: 我重構了網頁容器圓角化的功能 07/02 00:28
26F：→ YuQilin: 改進了顯示效果 大幅簡化了樣式 07/02 00:28
27F：→ YuQilin: 但也增加了摺疊和展開的複雜度XD 07/02 00:28
28F：→ YuQilin: 然後v4會支援mica 07/02 00:28
29F：推 MK47: 好可怕 每幾個版本就要大幅改寫一次 火狐超搞的.....辛苦了 07/02 00:37
之前好像用了半年都沒事，我記得沒怎麼改，但是最近很離譜，
我已經數不清修復了多少個 Nightly 變更產生的問題 ><
主要 FlexFox 的彈性太大了， 為了盡可能相容所有模式，
所以處理起來會非常複雜，複雜到我自己都快看不懂的程度了XD
而且 v3 以來增加了很多新功能，新功能也會產生新 bug，
所以常常 v3 的 bug 剛修好，Nightly 更新的 bug 又來了 ><
不過一切都快結束了，等 v4 把 mica 的支援做完，
應該就不會再有新功能了...吧XD
其實新功能我都很少用，像是隱藏工具列的按鈕圖示，
雖然看起來很清爽，尤其有使用佈景主題的時候，
隱藏圖示可以無遮擋，完整的顯示主題的背景圖片，
但是隱藏圖示後，點擊之前無法預先看到按鈕的位置，
我覺得操作會卡卡的不太流暢。
而 v4 要支援的半透明雲母 mica 效果，我個人覺得不好看XD
※ 編輯: YuQilin (61.228.171.235 臺灣), 07/02/2025 18:48:18
30F：推 twobrainhole: 推，很好用 07/06 15:17
**【即將在 v4 推出的不相容更新】統一所有工具列的動畫轉場時間**
正在開發中的 FlexFox v4 版本，為了支援 Mica 效果，
將會進行一項不相容舊版的調整：
原本導覽列、書籤工具列、側邊欄等各個工具列，
都有各自獨立設定的顯示／隱藏動畫時間。
在 v4 中，這些動畫時間將會統一，
全部採用側邊欄展開與摺疊所使用的動畫時間，
並由現有選項 `uc.flex.sidebery-fast-hover-expand`
和 `uc.flex.sidebery-slow-hover-expand` 控制。
由於這項變更會影響熟悉舊版操作方式的使用者，
我目前的想法是：**不預設全域啟用**，
而是僅在使用者啟用 Mica 效果時，自動套用這個統一動畫設定。
此外，我也考慮新增一個選項，讓沒有使用 Mica 的使用者，
也可以自行選擇是否啟用統一的動畫轉場，讓整體過場時間更一致。
想請問大家的意見：
你們覺得應該預設啟用統一動畫時間（提供選項關閉），
還是預設維持分離動畫（提供選項開啟統一）會比較好？
※ 編輯: YuQilin (61.228.167.236 臺灣), 07/10/2025 07:51:45