V8: Add functionality to modify IBus Background picture; Font set Bug Fix

During [fixing Unity8-Wood theme and add support for IBus Backgound](openSUSE/mentoring#158 (comment)), I found that if I add the following style for class `.candidate-popup-content`：

```css
  background: url("assets/bg.png");
  background-repeat:no-repeat;
  background-size:cover;
```

I can modify the background picture.

Further combining [ibus-font-setting](https://extensions.gnome.org/extension/1121/ibus-font-setting/) and [background-logo](https://pagure.io/background-logo-extension), referring to GNOME-Shell's source code, I found the [corresponding widget](https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/master/js/ui/ibusCandidatePopup.js#L154) for class `candidate-popup-content`, and modified the style to realize modifying IBus background picture without restarting GNOME-Shell.

Signed-off-by: Hollow Man <hollowman@hollowman.ml>

Author: HollowMan6

README.md

@@ -17,7 +17,7 @@
 
 (English version is down below)
 
-在GNOME Shell中更改IBus的候选框方向、主题、字体和输入法默认语言。
+在GNOME Shell中更改IBus的候选框方向、shell主题、背景图片、字体和输入法默认语言。
 
 ![demo](img/demo.png)
 
@@ -44,28 +44,44 @@ cd Customize-IBus && make install
 
 ### *提示：* 
 1. 推荐使用X11。如果你在Wayland中更改IBus主题，你的当前所有工作都将会丢失，因为Wayland下只支持通过重新登陆来重启GNOME-shell。
-2. 在Fedora和Ubuntu，GNOME-shell [3.38](../../tree/3.38)(v3，v5)，40.0(v4，v6)中通过了测试。
-3. 对于那些不使用GNOME而是使用如KDE等桌面环境的用户，更改IBus主题最简单的方法请参见[这里](https://github.com/qvshuo/Ibus-custom-theme),从而为IBus指定一个不同的GTK主题。
+2. 在Fedora和Ubuntu，GNOME-shell [3.38](../../tree/3.38)(v3，v5，v7)，40.0(v4，v6，v8)中通过了测试。
+3. 对于那些不使用GNOME而是使用如KDE等桌面环境的用户，更改IBus主题最简单的方法请参见[这里](https://github.com/qvshuo/Ibus-custom-theme)，从而为IBus指定一个不同的GTK主题。
+
+## 更改IBus背景图片的实现
+
+在[修复Unity8-Wood主题对IBus背景支持](https://github.com/openSUSE/mentoring/issues/158#issuecomment-813837436)时发现为`.candidate-popup-content`增加如下样式：
+
+```css
+  background: url("assets/bg.png");
+  background-repeat:no-repeat;
+  background-size:cover;
+```
+
+即可实现对背景的修改。
+
+进一步结合[ibus-font-setting](https://extensions.gnome.org/extension/1121/ibus-font-setting/)和[background-logo](https://pagure.io/background-logo-extension)，参考GNOME-Shell源代码中`candidate-popup-content`样式[对应组件](https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/master/js/ui/ibusCandidatePopup.js#L154)，并对其修改样式实现不重启GNOME-Shell进行IBus背景图片的修改。
 
 ## 备忘
 
 - [X] 从[ibus-tweaker](https://github.com/tuberry/ibus-tweaker)中导入，去除与IBus无关功能。
 - [X] 从用户主题中读取IBus相关样式
 - [X] 将相关功能合并在一起。
 - [X] V4: 从GTK3升级到GTK4来适配GNOME40。
+- [X] V8: 增加更改IBus背景图片功能。
 
 ## 致谢
 
 1. [ibus-font-setting](https://extensions.gnome.org/extension/1121/ibus-font-setting/)
 2. [ibus-tweaker](https://github.com/tuberry/ibus-tweaker)
 3. [user-theme](https://gitlab.gnome.org/GNOME/gnome-shell-extensions/-/tree/master/extensions/user-theme)
 4. [shell-restarter](https://github.com/koolskateguy89/gnome-shell-extension-shell-restarter)
+5. [background-logo](https://pagure.io/background-logo-extension)
 
 *该项目是谷歌编程之夏 (GSoC) 2021于[OpenSUSE](https://github.com/openSUSE/mentoring/issues/158)社区成果的一部分。*
 
 # Customize IBus
 
-Customize IBus in GNOME Shell for orientation, theme, font and input mode auto-switch.
+Customize IBus for orientation, shell theme, background picture, font and ascii mode auto-switch.
 
 ![demo](img/demo-en.png)
 
@@ -92,19 +108,35 @@ When user chooses a theme from the list, this extension will first read the them
 2. Tested on Fedora and Ubuntu, GNOME-shell [3.38](../../tree/3.38)(v3, v5), 40.0(v4, v6).
 3. For users who don't use GNOME but other desktop environments like KDE, the easiest way to change the IBus theme is to act as described in [here](https://github.com/qvshuo/Ibus-custom-theme) to use a different GTK theme for IBus.
 
+## Realization of Modifying IBus Background Picture
+
+During [fixing Unity8-Wood theme and add support for IBus Backgound](https://github.com/openSUSE/mentoring/issues/158#issuecomment-813837436), I found that if I add the following style for class `.candidate-popup-content`：
+
+```css
+  background: url("assets/bg.png");
+  background-repeat:no-repeat;
+  background-size:cover;
+```
+
+I can modify the background picture.
+
+Further combining [ibus-font-setting](https://extensions.gnome.org/extension/1121/ibus-font-setting/) and [background-logo](https://pagure.io/background-logo-extension), referring to GNOME-Shell's source code, I found the [corresponding widget](https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/master/js/ui/ibusCandidatePopup.js#L154) for class `candidate-popup-content`, and modified the style to realize modifying IBus background picture without restarting GNOME-Shell.
+
 ## To-do
 
 - [X] Import from [ibus-tweaker](https://github.com/tuberry/ibus-tweaker) and remove features unrelated to IBus.
 - [X] Read from user themes and apply only for ibus.
 - [X] Merge functions related together.
 - [X] V4: Update from GTK3 to GTK4 to adapt for GNOME40.
+- [X] V8: Add functionality to modify IBus Background picture.
 
 ## Acknowledgements
 
 1. [ibus-font-setting](https://extensions.gnome.org/extension/1121/ibus-font-setting/)
 2. [ibus-tweaker](https://github.com/tuberry/ibus-tweaker)
 3. [user-theme](https://gitlab.gnome.org/GNOME/gnome-shell-extensions/-/tree/master/extensions/user-theme)
 4. [shell-restarter](https://github.com/koolskateguy89/gnome-shell-extension-shell-restarter)
+5. [background-logo](https://pagure.io/background-logo-extension)
 
 *This project is part of the achievement of the Google Summer of Code 2021 at [OpenSUSE](https://github.com/openSUSE/mentoring/issues/158).*
 

customize-ibus@hollowman.ml/extension.js

@@ -192,6 +192,42 @@ const IBusFontSetting = GObject.registerClass(
   }
 );
 
+const IBusBGSetting = GObject.registerClass(
+  {
+    Properties: {
+      background: GObject.param_spec_string(
+        "bg",
+        "bg",
+        "background",
+        "",
+        GObject.ParamFlags.WRITABLE
+      ),
+    },
+  },
+  class IBusBGSetting extends GObject.Object {
+    _init() {
+      super._init();
+      gsettings.bind(Fields.CUSTOMBG, this, "bg", Gio.SettingsBindFlags.GET);
+    }
+
+    set bg(bg) {
+      global.log(_("loading background for IBus:") + bg);
+      let candidateBox = CandidatePopup.bin.get_children();
+      if (candidateBox)
+        candidateBox[0].set_style(
+          'background: url("%s"); background-repeat:no-repeat; background-size:cover;'.format(
+            bg
+          )
+        );
+    }
+
+    destroy() {
+      let candidateBox = CandidatePopup.bin.get_children();
+      if (candidateBox) candidateBox[0].set_style("");
+    }
+  }
+);
+
 const IBusOrientation = GObject.registerClass(
   {
     Properties: {
@@ -577,6 +613,13 @@ const Extensions = GObject.registerClass(
         false,
         GObject.ParamFlags.WRITABLE
       ),
+      bg: GObject.param_spec_boolean(
+        "bg",
+        "bg",
+        "bg",
+        false,
+        GObject.ParamFlags.WRITABLE
+      ),
       input: GObject.param_spec_boolean(
         "input",
         "input",
@@ -626,6 +669,7 @@ const Extensions = GObject.registerClass(
         "font",
         Gio.SettingsBindFlags.GET
       );
+      gsettings.bind(Fields.USECUSTOMBG, this, "bg", Gio.SettingsBindFlags.GET);
       gsettings.bind(
         Fields.ENABLEORIEN,
         this,
@@ -668,6 +712,17 @@ const Extensions = GObject.registerClass(
       }
     }
 
+    set bg(bg) {
+      if (bg) {
+        if (this._bg) return;
+        this._bg = new IBusBGSetting();
+      } else {
+        if (!this._bg) return;
+        this._bg.destroy();
+        delete this._bg;
+      }
+    }
+
     set orien(orien) {
       if (orien) {
         if (this._orien) return;
@@ -702,6 +757,7 @@ const Extensions = GObject.registerClass(
     }
 
     destroy() {
+      this.bg = false;
       this.font = false;
       this.input = false;
       this.orien = false;

customize-ibus@hollowman.ml/locale/customize-ibus.pot

@@ -6,9 +6,9 @@
 #, fuzzy
 msgid ""
 msgstr ""
-"Project-Id-Version: Customize Ibus 6\n"
+"Project-Id-Version: Customize Ibus 8\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2021-04-05 16:45+0800\n"
+"POT-Creation-Date: 2021-04-06 22:05+0800\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -17,58 +17,74 @@ msgstr ""
 "Content-Type: text/plain; charset=CHARSET\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: extension.js:288
+#: extension.js:214
+msgid "loading background for IBus:"
+msgstr ""
+
+#: extension.js:324
 msgid "loading user theme for IBus:"
 msgstr ""
 
-#: extension.js:374
+#: extension.js:410
 msgid "loading default theme for IBus"
 msgstr ""
 
-#: extension.js:423
+#: extension.js:459
 msgid "Restarting..."
 msgstr ""
 
-#: prefs.js:78
+#: prefs.js:80
 msgid "Custom IME theme"
 msgstr ""
 
-#: prefs.js:79
+#: prefs.js:81
 msgid "Use custom font"
 msgstr ""
 
-#: prefs.js:80
+#: prefs.js:82
+msgid "Use custom background"
+msgstr ""
+
+#: prefs.js:83
 msgid "Auto switch ASCII mode"
 msgstr ""
 
-#: prefs.js:81
+#: prefs.js:84
 msgid "Candidates orientation"
 msgstr ""
 
-#: prefs.js:84
+#: prefs.js:87
 msgid "Vertical"
 msgstr ""
 
-#: prefs.js:85
+#: prefs.js:88
 msgid "Horizontal"
 msgstr ""
 
-#: prefs.js:88
+#: prefs.js:91
 msgid "On"
 msgstr ""
 
-#: prefs.js:89
+#: prefs.js:92
 msgid "Off"
 msgstr ""
 
-#: prefs.js:90
+#: prefs.js:93
 msgid "Default"
 msgstr ""
 
-#: prefs.js:123
+#: prefs.js:101
+msgid "Select an Image"
+msgstr ""
+
+#: prefs.js:111
+msgid "(None)"
+msgstr ""
+
+#: prefs.js:155
 msgid "Customize IBus"
 msgstr ""
 
-#: prefs.js:359
+#: prefs.js:410
 msgid "Follow User Theme"
 msgstr ""

customize-ibus@hollowman.ml/locale/zh_CN/LC_MESSAGES/customize-ibus.po

@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: customize-ibus 1\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2021-04-05 16:45+0800\n"
+"POT-Creation-Date: 2021-04-06 22:02+0800\n"
 "PO-Revision-Date: 2021-03-27 16:22+0800\n"
 "Last-Translator: Hollow Man <hollowman@hollowman.ml>\n"
 "Language-Team: Chinese (simplified) <i18n-zh@googlegroups.com>\n"
@@ -17,58 +17,74 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: extension.js:288
+#: extension.js:214
+msgid "loading background for IBus:"
+msgstr "正在为IBus加载背景:"
+
+#: extension.js:324
 msgid "loading user theme for IBus:"
 msgstr "正在为IBus加载用户主题:"
 
-#: extension.js:374
+#: extension.js:410
 msgid "loading default theme for IBus"
 msgstr "正在为IBus加载当前系统主题"
 
-#: extension.js:423
+#: extension.js:459
 msgid "Restarting..."
 msgstr "正在重新启动⋯⋯"
 
-#: prefs.js:78
+#: prefs.js:80
 msgid "Custom IME theme"
 msgstr "自定义主题"
 
-#: prefs.js:79
+#: prefs.js:81
 msgid "Use custom font"
 msgstr "自定义字体"
 
-#: prefs.js:80
+#: prefs.js:82
+msgid "Use custom background"
+msgstr "自定义背景"
+
+#: prefs.js:83
 msgid "Auto switch ASCII mode"
 msgstr "默认中英文"
 
-#: prefs.js:81
+#: prefs.js:84
 msgid "Candidates orientation"
 msgstr "候选框方向"
 
-#: prefs.js:84
+#: prefs.js:87
 msgid "Vertical"
 msgstr "竖直"
 
-#: prefs.js:85
+#: prefs.js:88
 msgid "Horizontal"
 msgstr "水平"
 
-#: prefs.js:88
+#: prefs.js:91
 msgid "On"
 msgstr "英文"
 
-#: prefs.js:89
+#: prefs.js:92
 msgid "Off"
 msgstr "中文"
 
-#: prefs.js:90
+#: prefs.js:93
 msgid "Default"
 msgstr "默认"
 
-#: prefs.js:123
+#: prefs.js:101
+msgid "Select an Image"
+msgstr "选择一个图片"
+
+#: prefs.js:111
+msgid "(None)"
+msgstr "（无）"
+
+#: prefs.js:155
 msgid "Customize IBus"
 msgstr "自定义IBus"
 
-#: prefs.js:359
+#: prefs.js:410
 msgid "Follow User Theme"
 msgstr "跟随系统主题"

customize-ibus@hollowman.ml/metadata.json

@@ -1,5 +1,5 @@
 {
-  "description": "Customize IBus for orientation, theme, font and ascii mode auto-switch",
+  "description": "Customize IBus for orientation, shell theme, background picture, font and ascii mode auto-switch",
   "gettext-domain": "customize-ibus",
   "name": "Customize IBus",
   "settings-schema": "org.gnome.shell.extensions.customize-ibus",
@@ -8,5 +8,5 @@
   "original-authors": ["hollowman@hollowman.ml"],
   "uuid": "customize-ibus@hollowman.ml",
   "extension-id": "customize-ibus",
-  "version": 6
+  "version": 8
 }