Load project icons using resources (#934)

Follow up to #887

The current solution using file search paths is not ideal.

It requires the following structure in session / demo dirs:
`icons/scalable/actions`
Exposing users to unnecessary jargon which can usually be ignored during
app development since the icon theme is not something we are interested
in.

With the file search paths it's possible to place `library-symbolic.svg`
in `icons` but it won't be considered symbolic no matter what and
therefor won't recolor.

Also by unloading icons, we can avoid conflicts between demos for the
internal previewer.

src/Previewer/External.js

@@ -1,7 +1,7 @@
 import Adw from "gi://Adw";
 import dbus_previewer from "./DBusPreviewer.js";
 
-export default function External({ output, builder, onWindowChange, session }) {
+export default function External({ output, builder, onWindowChange }) {
   const stack = builder.get_object("stack_preview");
   let dbus_proxy;
 
@@ -24,14 +24,6 @@ export default function External({ output, builder, onWindowChange, session }) {
     } catch (err) {
       console.error(err);
     }
-
-    try {
-      await dbus_proxy.AddIconSearchPathAsync(
-        session.file.get_child("icons").get_path(),
-      );
-    } catch (err) {
-      console.debug(err);
-    }
   }
 
   async function open() {

src/Previewer/Internal.js

@@ -3,16 +3,13 @@ import * as postcss from "../lib/postcss.js";
 import Graphene from "gi://Graphene";
 import GObject from "gi://GObject";
 import Adw from "gi://Adw";
-import Gdk from "gi://Gdk";
 
 import { once } from "../../troll/src/async.js";
 import { build } from "../../troll/src/builder.js";
 
 // eslint-disable-next-line no-restricted-globals
 const { addSignalMethods } = imports.signals;
 
-const icon_theme = Gtk.IconTheme.get_for_display(Gdk.Display.get_default());
-
 export default function Internal({
   onWindowChange,
   output,
@@ -58,12 +55,6 @@ export default function Internal({
     object_root?.close();
   }
 
-  async function start(_language) {
-    const search_paths = new Set(icon_theme.get_search_path());
-    search_paths.add(session.file.get_child("icons").get_path());
-    icon_theme.set_search_path([...search_paths]);
-  }
-
   function stop() {
     close();
     if (css_provider) {
@@ -75,10 +66,6 @@ export default function Internal({
     }
     object_root?.destroy();
     object_root = null;
-
-    const search_paths = new Set(icon_theme.get_search_path());
-    search_paths.delete(this.file.get_child("icons"));
-    icon_theme.set_search_path([...search_paths]);
   }
 
   function preview(object) {
@@ -241,7 +228,7 @@ export default function Internal({
   }
 
   return {
-    start,
+    async start(_language) {},
     open,
     close,
     stop,

src/Previewer/previewer.vala

@@ -6,6 +6,11 @@ namespace Workbench {
             this.notify["ColorScheme"].connect (() => {
                 this.style_manager.color_scheme = this.ColorScheme;
             });
+
+            var icon_theme = Gtk.IconTheme.get_for_display(Gdk.Display.get_default());
+            var search_paths = icon_theme.get_resource_path();
+            search_paths += "/re/sonny/Workbench/icons";
+            icon_theme.set_resource_path(search_paths);
         }
 
         private void ensure_window () {
@@ -136,6 +141,8 @@ namespace Workbench {
                 return;
             }
 
+            this.reload_icons (uri);
+
             void* function;
 
             this.module.symbol ("set_base_uri", out function);
@@ -163,6 +170,17 @@ namespace Workbench {
             main_function ();
         }
 
+        public async void reload_icons (string uri) {
+            if (this.resource_icons != null) {
+                this.resource_icons._unregister ();
+                this.resource_icons = null;
+            }
+            try {
+                this.resource_icons = Resource.load (File.new_for_uri(uri).get_child("icons.gresource").get_path());
+                this.resource_icons._register ();
+            } catch {}
+        }
+
         public void close_window () {
             if (this.window == null) {
                 return;
@@ -177,13 +195,6 @@ namespace Workbench {
             this.window_open (true);
         }
 
-        public async void add_icon_search_path (string path) {
-            var icon_theme = Gtk.IconTheme.get_for_display(Gdk.Display.get_default());
-            var search_paths = icon_theme.get_search_path();
-            search_paths += path;
-            icon_theme.set_search_path(search_paths);
-        }
-
         public void enable_inspector (bool enabled) {
             Gtk.Window.set_interactive_debugging (enabled);
         }
@@ -212,6 +223,7 @@ namespace Workbench {
         private Module module;
         private Gtk.Builder? builder = null;
         private Adw.StyleManager style_manager = Adw.StyleManager.get_default ();
+        private GLib.Resource? resource_icons = null;
     }
 
     void main (string[] args) {

src/Previewer/previewer.xml

@@ -36,8 +36,5 @@
       <arg type="i" name="end_char"/>
     </signal>
     <property type="i" name="ColorScheme" access="readwrite"/>
-    <method name="AddIconSearchPath">
-      <arg type="s" name="path" direction="in"/>
-    </method>
   </interface>
 </node>

src/langs/python/python-previewer.py

@@ -75,6 +75,7 @@ class Previewer:
     css: Gtk.CssProvider | None
     uri = str | None
     style_manager: Adw.StyleManager
+    resource_icons: GLib.Resource | None
 
     def __init__(self):
         self.style_manager = Adw.StyleManager.get_default()
@@ -83,6 +84,12 @@ def __init__(self):
         self.builder = None
         self.target = None
         self.uri = None
+        self.resource_icons = None
+
+        icon_theme = Gtk.IconTheme.get_for_display(Gdk.Display.get_default())
+        resource_paths = icon_theme.get_resource_path()
+        resource_paths.append("/re/sonny/Workbench/icons")
+        icon_theme.set_resource_path(resource_paths)
 
     @DBusTemplate.Method()
     def update_ui(self, content: str, target_id: str, original_id: str = ""):
@@ -150,6 +157,8 @@ def run(self, filename: str, uri: str):
         #  This will also allow us to destroy the interpreter and thus (hopefully) properly unload the module.
         self.uri = uri
 
+        self.reload_icons(uri)
+
         module_name = "__workbench__module__"
         if module_name in sys.modules:
             # this will NOT unload the previous module, unless it can be GC.
@@ -161,6 +170,19 @@ def run(self, filename: str, uri: str):
         module = importlib.util.module_from_spec(spec)
         spec.loader.exec_module(module)
 
+    def reload_icons(self, uri: str):
+        if self.resource_icons is not None:
+            self.resource_icons._unregister()
+            self.resource_icons = None
+
+        try:
+            self.resource_icons = Gio.Resource.load(
+                Gio.File.new_for_uri(uri).get_child("icons.gresource").get_path()
+            )
+            self.resource_icons._register()
+        except Exception:
+            pass
+
     @DBusTemplate.Method()
     def close_window(self):
         if self.window is not None:
@@ -172,13 +194,6 @@ def open_window(self, width: int, height: int):
         self.window.present()
         self.window_open(True)
 
-    @DBusTemplate.Method()
-    def add_icon_search_path(self, path: str):
-        icon_theme = Gtk.IconTheme.get_for_display(Gdk.Display.get_default())
-        search_paths = icon_theme.get_search_path()
-        search_paths.append(path)
-        icon_theme.set_search_path(search_paths)
-
     @DBusTemplate.Method()
     def screenshot(self, path: str) -> bool:
         paintable = Gtk.WidgetPaintable(widget=self.target)

src/langs/xml/ltx.js

@@ -1,4 +1,4 @@
-import { escapeXML, escapeXMLText, parse, Element } from "ltx";
+import { escapeXML, escapeXMLText, parse, Element, createElement } from "ltx";
 import SaxLtx from "ltx/src/parsers/ltx.js";
 
-export { escapeXML, escapeXMLText, SaxLtx, parse, Element };
+export { escapeXML, escapeXMLText, SaxLtx, parse, Element, createElement };

src/langs/xml/xml.js

@@ -5,6 +5,7 @@ import {
   SaxLtx,
   parse,
   Element,
+  createElement,
 } from "../../lib/ltx.js";
 
 // adapted from ltx.stringify to work without Element and ignore whitespace
@@ -85,4 +86,4 @@ function format(str, indent = 2) {
   return s;
 }
 
-export { parse, Element, format };
+export { parse, Element, format, createElement };

src/lib/README.md

@@ -5,5 +5,5 @@ npm / Node.js libraries "compiled" to run with GJS.
 To rebuild them run
 
 ```sh
-../node_modules/.bin/rollup -c rollup.config.js
+../../node_modules/.bin/rollup -c rollup.config.js
 ```

src/lib/ltx.js

@@ -1228,4 +1228,49 @@ function parse(data, options) {
   }
 }
 
-export { Element, SaxLtx, escapeXML, escapeXMLText, parse };
+function append(el, child) {
+  if (Array.isArray(child)) {
+    for (const c of child) append(el, c);
+    return;
+  }
+
+  if (child === "" || child == null || child === true || child === false) {
+    return;
+  }
+
+  el.cnode(child);
+}
+
+/**
+ * JSX compatible API, use this function as pragma
+ * https://facebook.github.io/jsx/
+ *
+ * @param  {string} name  name of the element
+ * @param  {object} attrs object of attribute key/value pairs
+ * @return {Element}      Element
+ */
+function createElement(name, attrs, ...children) {
+  if (typeof attrs === "object" && attrs !== null) {
+    // __self and __source are added by babel in development
+    // https://github.com/facebook/react/pull/4596
+    // https://babeljs.io/docs/en/babel-preset-react#development
+    // https://babeljs.io/docs/en/babel-plugin-transform-react-jsx-source
+    delete attrs.__source;
+    delete attrs.__self;
+
+    for (const [key, value] of Object.entries(attrs)) {
+      if (value == null) delete attrs[key];
+      else attrs[key] = value.toString(10);
+    }
+  }
+
+  const el = new Element(name, attrs);
+
+  for (const child of children) {
+    append(el, child);
+  }
+
+  return el;
+}
+
+export { Element, SaxLtx, createElement, escapeXML, escapeXMLText, parse };