Use new PiP icons when available

Use the new "pip-in" and "pip-out" GNOME symbolic icons if user theme has them for enter/leave floating mode button. When icon is unavailable on the host, old icon will be used instead.

src/appBase.js

@@ -1,4 +1,4 @@
-const { Gio, GLib, GObject, Gtk } = imports.gi;
+const { Gio, GLib, GObject, Gdk, Gtk } = imports.gi;
 const Debug = imports.src.debug;
 const FileOps = imports.src.fileOps;
 const Misc = imports.src.misc;
@@ -144,15 +144,26 @@ class ClapperAppBase extends Gtk.Application
 
     _onIconThemeChanged(gtkSettings)
     {
-        const iconTheme = gtkSettings.gtk_icon_theme_name;
+        const iconThemeName = gtkSettings.gtk_icon_theme_name;
         const window = this.active_window;
         const hasAdwIcons = window.has_css_class('adwicons');
 
-        if(iconTheme === 'Adwaita' || iconTheme === 'Default') {
+        if(iconThemeName === 'Adwaita' || iconThemeName === 'Default') {
             if(!hasAdwIcons)
                 window.add_css_class('adwicons');
         }
         else if(hasAdwIcons)
             window.remove_css_class('adwicons');
+
+        const display = Gdk.Display.get_default();
+        if(!display) return;
+
+        const iconTheme = Gtk.IconTheme.get_for_display(display);
+        if(!iconTheme) return;
+
+        const { headerBar } = window.child.revealerTop;
+        if(!headerBar) return;
+
+        headerBar._onIconThemeChanged(iconTheme);
     }
 });

src/headerbar.js

@@ -9,17 +9,20 @@ class ClapperHeaderBar extends HeaderBarBase
         this.activate_action(`window.${action}`, null);
     }
 
-    _onFloatButtonClicked()
+    _onFloatButtonClicked(button)
     {
         const clapperWidget = this.root.child;
+        const { controlsRevealer } = clapperWidget;
 
-        clapperWidget.controlsRevealer.toggleReveal();
+        controlsRevealer.toggleReveal();
 
         /* Reset timer to not disappear during click */
         clapperWidget._setHideControlsTimeout();
+
+        this._updateFloatIcon(!controlsRevealer.reveal_child);
     }
 
-    _onFullscreenButtonClicked()
+    _onFullscreenButtonClicked(button)
     {
         this.root.fullscreen();
     }

src/headerbarBase.js

@@ -22,6 +22,7 @@ class ClapperHeaderBarBase extends Gtk.Box
 
         this.isMaximized = false;
         this.isMenuOnLeft = true;
+        this.hasPipIcons = false;
 
         const clapperPath = Misc.getClapperPath();
         const uiBuilder = Gtk.Builder.new_from_file(
@@ -213,17 +214,46 @@ class ClapperHeaderBarBase extends Gtk.Box
         return button;
     }
 
+    _updateFloatIcon(isFloating)
+    {
+        const floatButton = this.extraButtonsBox.get_first_child();
+        if(!floatButton) return;
+
+        const iconName = (!this.hasPipIcons)
+            ? 'go-bottom-symbolic'
+            : (isFloating)
+            ? 'pip-out-symbolic'
+            : 'pip-in-symbolic';
+
+        if(floatButton.icon_name !== iconName)
+            floatButton.icon_name = iconName;
+    }
+
     _onWindowButtonActivate(action)
     {
     }
 
-    _onFloatButtonClicked()
+    _onFloatButtonClicked(button)
     {
     }
 
-    _onFullscreenButtonClicked()
+    _onFullscreenButtonClicked(button)
     {
     }
+
+    _onIconThemeChanged(iconTheme)
+    {
+        /* Those icons are relatively new,
+         * so check if theme has them */
+        this.hasPipIcons = (
+            iconTheme.has_icon('pip-in-symbolic')
+            && iconTheme.has_icon('pip-out-symbolic')
+        );
+
+        const { controlsRevealer } = this.root.child;
+
+        this._updateFloatIcon(!controlsRevealer.reveal_child);
+    }
 });
 
 var HeaderBarPopover = GObject.registerClass(