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

    回覆刪除

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