2018年9月18日 星期二

gtk3 軟體的外觀設定: 請給我明顯的 「目前分頁」 頁籤!

有一個小問題一直困擾著我。 這幾年我用的 OS 是 lubuntu, 所以自從 roxterm 作者不再更新之後, 預設的 lxterminal 就一直是我的日常終端機。 但不論是 lxterminal 或是新發現的 sakura 終端機, 它們的每個分頁上方的頁籤都長得一模一樣, 全都是灰色。 今天終於成功修改設定檔, 讓 「目前分頁」 (active tab) 變得比較醒目 -- 雖然還是沒有很懂 gtk 的運作。 可以直接略過中間的研究過程, 直接跳到 最終真正的解答.。

首先下 ldd /usr/bin/sakura | grep -i gtk (或 lxterminal 也一樣) 會發現 sakura 跟 lxterminal 連結的函式庫都是 gtk3, 所以要朝這個方向搜尋外觀的設定 -- gtk3 的設定方式跟 gtk2 很不一樣。

爬了好多問答文, 照做都失敗。 後來發現 lxappearance 指令叫出的設定對話框有一個 「圖形元件」 分頁可以選 theme (佈景主題)。 若選擇 「Clearlooks」 主題, 「目前分頁」 的頁籤上方 (或下方) 會多出一條藍線, 不是很明顯, 但已經比其他所有主題的 「淺灰 vs 淺淺灰」 好很多了。 果然是一個讓人 「看得很清楚」 的好佈景主題!

gnome look 網站還可以下載更多佈景主題。 點左側的 gtk3 themes (還是 gtk2 themes 才對? 下文(也不)詳) 再點上方的 Top、 找到一個看來不錯的主題, 點進去之後, 再點主圖下方文字描述上方的 「Files」。 有一些檔案是 .xz 格式, 必須先這樣解壓縮: unxz Arrongin-Buttons-Left.tar.xz 再這樣拆開: tar xf Arrongin-Buttons-Left.tar 。 拆解開來的目錄, 把它搬到 ~/.themes/ 底下或 /usr/share/themes/ 底下。 下次再進入 lxappearance 時, 就多了一個主題可選。 如果找到哪一個主題對 「目前分頁」 的呈現比較明顯, 請留言分享一下吧!

下載檔案 gnome look 網站

可是... debian 版的 lxappearance 對 gtk3 的支援並不完整。 事實上如果你的 theme 裡面只有 gtk-3.0 而沒有 gtk-2.0 的子目錄, lxappearance 根本會直接忽略它。 這篇 解說如何手動改設定檔; 不過我照著修改 ~/.config/gtk-3.0/settings.ini 裡面的 gtk-theme-name, 並沒有效果。 用 ps fx 可以看出: 主宰 lubuntu 桌面的, 是 openbox 跟 lxpanel ; 但是 openbox 並沒有用到 gtk2 或 gtk3, 而 lxpanel 則只用到 gtk2。 所以「目前分頁」 的頁籤裡, 那條細細的藍線, 其實是 lxpanel 透過 gtk2 版的 Clearlooks 設定畫出來的嗎? 剛剛在 gnome look 網站, 應該先點左側的 gtk2 themes 才對嗎? 再來, lxappearance 是 LXDE 的附屬程式, 就算它能幫我解決問題, 也有點侷限; 更何況現在我已經一頭霧水 !@#$

從頭再來一次, 試著直接以 css 的方式修改 active tab 的設定。 爬過那麼多文之後, 終於用正確的關鍵詞 「find gtk css selector」 搜尋到 The GTK+ Inspector, 大推! 以這個指令叫出 (25 列、 72 行、 三個分頁的) sakura 視窗及 GTK+ Inspector 除錯視窗: GTK_DEBUG=interactive sakura -r 25 -c 72 --colorset 1 -n 3

gtk inspector: 選取物件 gtk inspector: 查看 css nodes

先點 GTK+ Inspector 除錯視窗左上角的選擇器, 滑鼠的形狀會改變。 再去點選有興趣的畫面元件, 例如目前分頁的頁籤。 最後回到 Inspector, 改以 「CSS nodes」 的方式檢視所選取的畫面元件。 可以看到我們選的元件是 window 裡面的 notebook 裡面的三個 tab 當中最後一個 tab 裡面的一個 box。 gtk 的 notebook 就是專門用來打包多個分頁的元件。 到這裡, 對於撰寫正確的 css 沒有直接的幫助; 但是有助於理解以下的問答。

最終真正的解答

搜尋 「gtk3 active tab」 發現很多人跟我有相同的問題, 原來並不是我的視力特別差嘛 :-) 這個問答 追蹤到 bug 的源頭, 並且提供了很多連結。 不過幫助最大的是 這個問答。 最後我在 ~/.config/gtk-3.0/gtk.css 裡面加上這段:

notebook tab:checked {
    background-color: #e0e080;
}

我還是搞不清楚到底該如何限定這個 css 設定只適於 sakura 視窗。 不過沒關係, 這個通用的寫法正好影響了所有的 gtk3 應用程式, 讓之後新開的所有 sakura 視窗或 lxterminal 視窗, 甚至是 geany 編輯器視窗, 它們的 「目前分頁」 頁籤都變成明顯的黃色, 我終於又知道自己切換到哪個分頁去了! [2019/2/8 補充: 但仍舊必須選 Clearlooks 主題才有效; 若採用預設的佈景主題, 加這個 gtk.css 照樣沒有效果。]

是說如果改個頁籤顏色都這麼麻煩、 文件這麼難找、 新舊版本不一致, 那麼 gtk3 到底要怎麼推廣啊? 難怪 roxterm 開發者向 gtk3 棄械投降... 在函式庫的層次, 要維持向下相容又要有前瞻性, 還要撰寫符合程式碼的文件, 真的很不容易。 不要說是參與開發, 光是幫 gtk3 撰寫好的文件, 都將會很令人尊敬啊!

sakura 視窗的 「目前分頁」 頁籤終於變成明顯的黃色了!

2 則留言:

  1. 最近我試了i3wm,把使用多年的xfce4換掉,頁籤顏色可以自行更動,不用受限於gtk,炫麗的桌面對我而言沒有什麼幫助,您也不妨試試,學習曲線約一個小時可略為上手

    回覆刪除
  2. 可參考桌面: https://github.com/bluebat/thiny-session
    下拉式終端機模擬器使用 guake;浮動式視窗則推薦 lilyterm

    回覆刪除

因為垃圾留言太多,現在改為審核後才發佈,請耐心等候一兩天。