Allow for padding leftbox, tray, and status icons

Makefile

@@ -2,7 +2,7 @@
 
 UUID = dash-to-panel@jderose9.github.com
 BASE_MODULES = extension.js stylesheet.css metadata.json COPYING README.md
-EXTRA_MODULES = convenience.js panel.js overview.js taskbar.js secondaryMenu.js windowPreview.js prefs.js Settings.ui
+EXTRA_MODULES = convenience.js panel.js panelStyle.js overview.js taskbar.js secondaryMenu.js windowPreview.js prefs.js Settings.ui
 #EXTRA_MEDIA = logo.svg
 TOLOCALIZE =  prefs.js
 MSGSRC = $(wildcard po/*.po)

README.md

@@ -28,5 +28,6 @@ version 2 or later. See the COPYING file for details.
 ## Credits
 Much of the code in this extension comes from [Dash-to-Dock](https://micheleg.github.io/dash-to-dock/index.html).
 This extension leverages the work for [ZorinOS Taskbar](https://github.com/ZorinOS/zorin-taskbar) used in [ZorinOS](https://zorinos.com/) to allow the dash from [Dash-to-Dock](https://micheleg.github.io/dash-to-dock/index.html) to be embedded in the Gnome main panel.
-Code to set anchor position taken from [Thoma5/gnome-shell-extension-bottompanel](https://github.com/Thoma5/gnome-shell-extension-bottompanel)
-Pattern for moving panel contents based on [Frippery Move Clock](http://frippery.org/extensions/) by R M Yorston
+Code to set anchor position taken from [Thoma5/gnome-shell-extension-bottompanel](https://github.com/Thoma5/gnome-shell-extension-bottompanel).
+Pattern for moving panel contents based on [Frippery Move Clock](http://frippery.org/extensions/) by R M Yorston.
+Code for recursing child actors and assigning inline styles is based on code from the extension [StatusAreaHorizontalSpacing](https://bitbucket.org/mathematicalcoffee/status-area-horizontal-spacing-gnome-shell-extension).

Settings.ui

@@ -1007,7 +1007,7 @@
                           <object class="GtkLabel" id="tray_size_label">
                             <property name="visible">True</property>
                             <property name="can_focus">False</property>
-                            <property name="label" translatable="yes">Tray Content Size
+                            <property name="label" translatable="yes">Tray Font Size
 (0 = theme default)</property>
                             <property name="xalign">0</property>
                           </object>
@@ -1038,7 +1038,7 @@
                           <object class="GtkLabel" id="leftbox_size_label">
                             <property name="visible">True</property>
                             <property name="can_focus">False</property>
-                            <property name="label" translatable="yes">Left Content Size
+                            <property name="label" translatable="yes">Left Font Size
 (0 = theme default)</property>
                             <property name="xalign">0</property>
                           </object>

panel.js

@@ -31,6 +31,7 @@ const Me = imports.misc.extensionUtils.getCurrentExtension();
 const Clutter = imports.gi.Clutter;
 const Convenience = Me.imports.convenience;
 const TaskBar = Me.imports.taskbar;
+const PanelStyle = Me.imports.panelStyle;
 const Lang = imports.lang;
 const Main = imports.ui.main;
 const St = imports.gi.St;
@@ -40,12 +41,13 @@ const taskbarPanel = new Lang.Class({
 
     _init: function(settings) {
         this._dtpSettings = settings;
+        this.panelStyle = new PanelStyle.taskbarPanelStyle(settings);
     },
 
     enable : function() {
         this.panel = Main.panel;
         this.container = this.panel._leftBox;
-        this.appMenu = this.panel.statusArea['appMenu'];
+        this.appMenu = this.panel.statusArea.appMenu;
         this.panelBox = Main.layoutManager.panelBox;
 
         this._panelConnectId = this.panel.actor.connect('allocate', Lang.bind(this, function(actor,box,flags){this._allocate(actor,box,flags);}));
@@ -122,9 +124,13 @@ const taskbarPanel = new Lang.Class({
         );
 
         this._bindSettingsChanges();
+
+        this.panelStyle.enable(this.panel);
     },
 
     disable: function () {
+        this.panelStyle.disable();
+
         this._signalsHandler.destroy();
         this.container.remove_child(this.taskbar.actor);
         this.container.add_child(this.appMenu.container);
@@ -263,9 +269,9 @@ const taskbarPanel = new Lang.Class({
     },
 
     _setActivitiesButtonVisible: function(isVisible) {
-        if(this.panel.statusArea['activities'])
-            isVisible ? this.panel.statusArea['activities'].actor.show() :
-                this.panel.statusArea['activities'].actor.hide();
+        if(this.panel.statusArea.activities)
+            isVisible ? this.panel.statusArea.activities.actor.show() :
+                this.panel.statusArea.activities.actor.hide();
     },
 
     _setTraySize: function(size) {
@@ -280,8 +286,8 @@ const taskbarPanel = new Lang.Class({
     _setClockLocation: function(loc) {
         let centerBox = this.panel._centerBox;
         let rightBox = this.panel._rightBox;
-        let dateMenu = this.panel.statusArea['dateMenu'];
-        let statusMenu = this.panel.statusArea['aggregateMenu'];
+        let dateMenu = this.panel.statusArea.dateMenu;
+        let statusMenu = this.panel.statusArea.aggregateMenu;
 
         if(loc == "NATURAL") {
             // only move the clock back if it's in the right box

panelStyle.js

@@ -0,0 +1,228 @@
+/*
+ * This file is part of the Dash-To-Panel extension for Gnome 3
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 2 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Credits:
+ * The code for recursing child actors and assigning inline styles
+ * is based on code from the StatusAreaHorizontalSpacing extension
+ * https://bitbucket.org/mathematicalcoffee/status-area-horizontal-spacing-gnome-shell-extension
+ * mathematical.coffee@gmail.com
+ */
+
+const Me = imports.misc.extensionUtils.getCurrentExtension();
+const ExtensionUtils = imports.misc.extensionUtils;
+const Lang = imports.lang;
+const Main = imports.ui.main;
+const Mainloop = imports.mainloop;
+const St = imports.gi.St;
+const Shell = imports.gi.Shell;
+
+const TaskBar = Me.imports.taskbar;
+
+const taskbarPanelStyle = new Lang.Class({
+    Name: 'TaskBar.PanelStyle',
+
+    _init: function(settings) {
+        this._dtpSettings = settings;
+    },
+
+    enable : function(panel) {
+        this.panel = panel;
+
+        this._applyStyles();
+
+        //this._bindSettingsChanges();
+    },
+
+    disable: function () {
+        this._removeStyles();
+    },
+
+    _bindSettingsChanges: function() {
+        /* whenever the settings get changed, re-layout everything. */
+        [
+            "leftbox-padding",
+            "tray-padding",
+            "status-icon-padding"
+        ].forEach(function(configName) {
+            settings.connect('changed::' + configName, Lang.bind(this, function () {
+                this._removeStyles();
+                this._applyStyles();
+            }));
+        });
+    },
+
+    _applyStyles: function() {
+        let trayPadding = -1; //this._dtpSettings.get_int('tray-padding');
+        let setTrayPadding = null;
+        if(trayPadding >= 0) {
+            let trayPaddingStyleLine = '-natural-hpadding: %dpx'.format(trayPadding);
+            if (trayPadding < 6) {
+                trayPaddingStyleLine += '; -minimum-hpadding: %dpx'.format(trayPadding);
+            }
+            let trayPaddingChildren = this.panel._rightBox.get_children()
+                .concat(this.panel._centerBox.get_children());
+            setTrayPadding = Lang.bind(this, function (actor) {
+                this._overrideStyle(actor, trayPaddingStyleLine, function (actor) {
+                    return (actor.has_style_class_name && actor.has_style_class_name('panel-button'));
+                }, 2);
+            });
+            for (let i = 0; i < trayPaddingChildren.length; ++i)
+                setTrayPadding(trayPaddingChildren[i]);
+        }
+
+        let leftboxPadding = -1; //this._dtpSettings.get_int('leftbox-padding');
+        let setLeftboxPadding = null;
+        if(leftboxPadding >= 0) {
+            let leftboxPaddingStyleLine = '-natural-hpadding: %dpx'.format(leftboxPadding);
+            let leftboxPaddingChildren = this.panel._leftBox.get_children()
+            setLeftboxPadding = Lang.bind(this, function (actor) {
+                this._overrideStyle(actor, leftboxPaddingStyleLine, function (actor) {
+                    return (actor.has_style_class_name && actor.has_style_class_name('panel-button'));
+                }, 2);
+            });
+            for (let i = 0; i < leftboxPaddingChildren.length; ++i)
+                setLeftboxPadding(leftboxPaddingChildren[i]);
+        }
+        
+        let statusIconPadding = -1; //this._dtpSettings.get_int('status-icon-padding');
+        let setStatusIconPadding = null;
+        if(statusIconPadding >= 0) {
+            let statusIconPaddingStyleLine = 'padding-left: %dpx; padding-right: %dpx'.format(statusIconPadding, statusIconPadding)
+            let statusIconPaddingChildren = this.panel.statusArea.aggregateMenu._indicators.get_children();
+            setStatusIconPadding = Lang.bind(this, function (actor) {
+                this._overrideStyle(actor, statusIconPaddingStyleLine, function (actor) {
+                        return (actor.has_style_class_name && actor.has_style_class_name('system-status-icon'));
+                    }, 2);
+            });
+            for (let i = 0; i < statusIconPaddingChildren.length; ++i)
+                setStatusIconPadding(statusIconPaddingChildren[i]);
+        }
+       
+        /* connect signal */
+        this._rightBoxActorAddedID = this.panel._rightBox.connect('actor-added',
+            Lang.bind(this, function (container, actor) {
+                if(setTrayPadding)
+                    setTrayPadding(actor);
+            })
+        );
+        this._centerBoxActorAddedID = this.panel._centerBox.connect('actor-added',
+            Lang.bind(this, function (container, actor) {
+                if(setTrayPadding)
+                    setTrayPadding(actor);
+            })
+        );
+        this._leftBoxActorAddedID = this.panel._leftBox.connect('actor-added',
+            Lang.bind(this, function (container, actor) {
+                if(setLeftboxPadding)
+                    setLeftboxPadding(actor);
+            })
+        );
+    },
+
+    _removeStyles: function() {
+        /* disconnect signal */
+        if (this._rightBoxActorAddedID) 
+            this.panel._rightBox.disconnect(this._rightBoxActorAddedID);
+        if (this._centerBoxActorAddedID) 
+            this.panel._centerBox.disconnect(this._centerBoxActorAddedID);
+        if (this._leftBoxActorAddedID) 
+            this.panel._leftBox.disconnect(this._leftBoxActorAddedID);
+
+        let children = this.panel._rightBox.get_children()
+            .concat(this.panel._centerBox.get_children());
+
+        if(children)
+            for (let i = 0; i < children.length; ++i)
+                this._restoreOriginalStyle(children[i], function (actor) {
+                    return (actor.has_style_class_name && actor.has_style_class_name('panel-button'));
+                }, 2);
+
+        children = this.panel.statusArea.aggregateMenu._indicators.get_children();
+
+        if(children)
+            for (let i = 0; i < children.length; ++i)
+                this._restoreOriginalStyle(children[i], function (actor) {
+                    return (actor.has_style_class_name && actor.has_style_class_name('system-status-icon'));
+                }, 2);
+    },
+
+    _overrideStyle: function(actor, styleLine, compareFn, maxSearchDepth, recurseCount) {
+        if(!recurseCount)
+            recurseCount = 1;
+
+        if(!compareFn(actor)) {
+            if(actor.get_children) {
+                let children = actor.get_children();
+                for(let idx in children)
+                    this._overrideStyle(children[idx], styleLine, compareFn, maxSearchDepth, recurseCount+1);
+            }
+            return;
+        }
+
+        if (actor._original_inline_style_ === undefined) {
+            actor._original_inline_style_ = actor.get_style();
+        }
+
+        actor.set_style(styleLine + '; ' + (actor._original_inline_style_ || ''));
+        actor._dtp_line_style = styleLine;
+ 
+        /* listen for the style being set externally so we can re-apply our style */
+        // TODO: somehow throttle the number of calls to this - add a timeout with
+        // a flag?
+        if (!actor._dtpPanelStyleSignalID) {
+            actor._dtpPanelStyleSignalID =
+                actor.connect('style-changed', Lang.bind(this, function () {
+                    let currStyle = actor.get_style();
+                    if (currStyle && !currStyle.match(actor._dtp_line_style)) {
+                        // re-save the style (if it has in fact changed)
+                        actor._original_inline_style_ = currStyle;
+                        // have to do this or else the overrideStyle call will trigger
+                        // another call of this, firing an endless series of these signals.
+                        // TODO: a ._style_pending which prevents it rather than disconnect/connect?
+                        actor.disconnect(actor._dtpPanelStyleSignalID);
+                        delete actor._dtpPanelStyleSignalID;
+                        this._overrideStyle(actor, styleLine, compareFn, maxSearchDepth);
+                    }
+                }));
+        }
+    },
+
+    // see the note in overrideStyle about us having to recurse down to the first
+    // child of `actor` in order to find the container with style class name
+    // 'panel-button' (applying our style to the parent container won't work).
+    _restoreOriginalStyle: function(actor, compareFn, maxSearchDepth, recurseCount) {
+         if(!compareFn(actor)) {
+            
+            let children = actor.get_children();
+
+            if(children)
+                for(let idx in children)
+                    this._restoreOriginalStyle(children[idx], compareFn, maxSearchDepth, recurseCount+1);
+            return;
+         }
+
+        if (actor._dtpPanelStyleSignalID) {
+            actor.disconnect(actor._dtpPanelStyleSignalID);
+            delete actor._dtpPanelStyleSignalID;
+        }
+        if (actor._original_inline_style_ !== undefined) {
+            actor.set_style(actor._original_inline_style_);
+            delete actor._original_inline_style_;
+            delete actor._dtp_line_style;
+        }
+    }
+    
+});

schemas/org.gnome.shell.extensions.dash-to-panel.gschema.xml

@@ -40,7 +40,7 @@
       <description>Running indicators are shown on the Bottom or Top of the screen.</description>
     </key>
     <key name="location-clock" enum="org.gnome.shell.extensions.dash-to-panel.statusAreaPosition">
-      <default>'STATUSRIGHT'</default>
+      <default>'STATUSLEFT'</default>
       <summary>Location of the clock</summary>
       <description>Set the location of the clock on the taskbar</description>
     </key>
@@ -99,18 +99,33 @@
     </key>
     <key type="i" name="tray-size">
       <default>0</default>
-      <summary>Tray content size</summary>
-      <description>Set the size of the tray items. (0 for default)</description>
+      <summary>Tray font size</summary>
+      <description>Set the size of the tray font. (0 for default)</description>
     </key>
     <key type="i" name="leftbox-size">
         <default>0</default>
-        <summary>Left content size</summary>
-        <description>Set the size of the leftBox items. (0 for default)</description>
+        <summary>Leftbox font size</summary>
+        <description>Set the size of the leftBox font. (0 for default)</description>
     </key>
     <key type="i" name="appicon-margin">
         <default>8</default>
         <summary>App icon margin</summary>
         <description>Set the margin for application icons in the embedded dash.</description>
     </key>
+      <key type="i" name="tray-padding">
+        <default>6</default>
+        <summary>Tray padding</summary>
+        <description>Set the size of the tray padding. (-1 for default)</description>
+    </key>
+    <key type="i" name="leftbox-padding">
+        <default>6</default>
+        <summary>Leftbox padding</summary>
+        <description>Set the size of the leftBox padding. (-1 for default)</description>
+    </key>
+    <key type="i" name="status-icon-padding">
+        <default>6</default>
+        <summary>Status icon padding</summary>
+        <description>Set the size of the aggregate (status) menu icon padding. (-1 for default)</description>
+    </key>
   </schema>
 </schemalist>