[sushi/wip/cosimoc/no-clutter: 54/66] Rework how toolbars are created

[Cosimo Cecchi <cosimoc src gnome org>]

commit 7c84a6f404a1aa92b1ba49499de83992fa4b041a
Author: Cosimo Cecchi <cosimo endlessm com>
Date:   Thu Jun 6 17:57:26 2019 -0700

    Rework how toolbars are created
    
    Instead of forcing to create a GtkToolItem, just pack buttons in
    a box with the toolbar CSS name.
    This simplifies handling significantly for renderers.

 src/js/ui/mainWindow.js  | 21 +++++++++++++------
 src/js/ui/utils.js       |  5 ++---
 src/js/viewers/audio.js  | 38 ++++++++++++----------------------
 src/js/viewers/evince.js | 53 ++++++++++++++++--------------------------------
 src/js/viewers/html.js   |  9 ++++----
 src/js/viewers/image.js  |  2 +-
 src/js/viewers/text.js   |  2 +-
 7 files changed, 54 insertions(+), 76 deletions(-)
---
diff --git a/src/js/ui/mainWindow.js b/src/js/ui/mainWindow.js
index bbef5a3..445bac5 100644
--- a/src/js/ui/mainWindow.js
+++ b/src/js/ui/mainWindow.js
@@ -54,6 +54,18 @@ const Embed = new Lang.Class({
     }
 });
 
+var RendererToolbar = new Lang.Class({
+    Name: 'RendererToolbar',
+    Extends: Gtk.Box,
+    CssName: 'toolbar',
+
+    _init : function() {
+        this.parent({ halign: Gtk.Align.CENTER,
+                      hexpand: true });
+        this.get_style_context().add_class('osd');
+    }
+});
+
 var MainWindow = new Lang.Class({
     Name: 'MainWindow',
     Extends: Gtk.Window,
@@ -204,12 +216,6 @@ var MainWindow = new Lang.Class({
         }
 
         if (this._renderer.populateToolbar) {
-            let rendererToolbar = new Gtk.Toolbar({ icon_size: Gtk.IconSize.MENU,
-                                                    halign: Gtk.Align.CENTER,
-                                                    show_arrow: false,
-                                                    visible: true });
-            rendererToolbar.get_style_context().add_class('osd');
-
             this._toolbar = new Gtk.Revealer({ valign: Gtk.Align.END,
                                                hexpand: true,
                                                margin_bottom: Constants.TOOLBAR_SPACING,
@@ -218,9 +224,12 @@ var MainWindow = new Lang.Class({
                                                transition_duration: 250,
                                                transition_type: Gtk.RevealerTransitionType.CROSSFADE,
                                                visible: true });
+
+            let rendererToolbar = new RendererToolbar();
             this._toolbar.add(rendererToolbar);
 
             this._renderer.populateToolbar(rendererToolbar);
+            this._toolbar.show_all();
         }
 
         if (!this._toolbar)
diff --git a/src/js/ui/utils.js b/src/js/ui/utils.js
index 007142a..8d4277b 100644
--- a/src/js/ui/utils.js
+++ b/src/js/ui/utils.js
@@ -62,9 +62,8 @@ function getScaledSize(baseSize, allocSize, upscale) {
 }
 
 function createToolButton(iconName, callback) {
-    let button = new Gtk.ToolButton({ expand: false,
-                                      icon_name: iconName });
-    button.show();
+    let button = Gtk.Button.new_from_icon_name(iconName, Gtk.IconSize.MENU);
+    button.set_relief(Gtk.ReliefStyle.NONE);
     button.connect('clicked', callback);
 
     return button;
diff --git a/src/js/viewers/audio.js b/src/js/viewers/audio.js
index 9357921..5410985 100644
--- a/src/js/viewers/audio.js
+++ b/src/js/viewers/audio.js
@@ -36,6 +36,7 @@ const Lang = imports.lang;
 const Constants = imports.util.constants;
 const MimeHandler = imports.ui.mimeHandler;
 const TotemMimeTypes = imports.util.totemMimeTypes;
+const Utils = imports.ui.utils;
 
 function _formatTimeString(timeVal) {
     let hours = Math.floor(timeVal / 3600);
@@ -238,11 +239,11 @@ const AudioRenderer = new Lang.Class({
     _onPlayerStateChanged : function() {
         switch(this._player.state) {
         case Sushi.SoundPlayerState.PLAYING:
-            this._toolbarPlay.set_icon_name('media-playback-pause-symbolic');
+            this._toolbarPlay.image.set_from_icon_name('media-playback-pause-symbolic', Gtk.IconSize.MENU);
             break;
         default:
             let iconName = 'media-playback-start-symbolic';
-            this._toolbarPlay.set_icon_name(iconName);
+            this._toolbarPlay.image.set_from_icon_name(iconName, Gtk.IconSize.MENU);
         }
     },
 
@@ -255,22 +256,16 @@ const AudioRenderer = new Lang.Class({
     },
 
     populateToolbar : function (toolbar) {
-        this._toolbarPlay = new Gtk.ToolButton({ icon_name: 'media-playback-pause-symbolic' });
-        this._toolbarPlay.show();
-        toolbar.insert(this._toolbarPlay, 0);
+        this._toolbarPlay =
+            Utils.createToolButton('media-playback-pause-symbolic', Lang.bind(this, function () {
+                let playing = !this._player.playing;
+                this._player.playing = playing;
+            }));
+        toolbar.add(this._toolbarPlay);
 
         this._currentLabel = new Gtk.Label({ margin_start: 6,
                                              margin_end: 3 });
-        let item = new Gtk.ToolItem();
-        item.add(this._currentLabel);
-        item.show_all();
-        toolbar.insert(item, 1);
-
-        this._toolbarPlay.connect('clicked',
-                                  Lang.bind(this, function () {
-                                      let playing = !this._player.playing;
-                                      this._player.playing = playing;
-                                  }));
+        toolbar.add(this._currentLabel);
 
         this._progressBar =
             Gtk.Scale.new_with_range(Gtk.Orientation.HORIZONTAL,
@@ -282,18 +277,11 @@ const AudioRenderer = new Lang.Class({
                                       if(!this._isSettingValue)
                                           this._player.progress = this._progressBar.get_value() / 1000;
                                   }));
-
-        item = new Gtk.ToolItem();
-        item.set_expand(true);
-        item.add(this._progressBar);
-        item.show_all();
-        toolbar.insert(item, 2);
+        this._progressBar.set_size_request(200, -1);
+        toolbar.add(this._progressBar);
 
         this._durationLabel = new Gtk.Label({ margin_start: 3 });
-        item = new Gtk.ToolItem();
-        item.add(this._durationLabel);
-        item.show_all();
-        toolbar.insert(item, 3);
+        toolbar.add(this._durationLabel);
     },
 });
 
diff --git a/src/js/viewers/evince.js b/src/js/viewers/evince.js
index 1833034..8d1e281 100644
--- a/src/js/viewers/evince.js
+++ b/src/js/viewers/evince.js
@@ -90,46 +90,29 @@ const EvinceRenderer = new Lang.Class({
         return allocation;
     },
 
-    _createLabelItem : function() {
-        this._pageLabel = new Gtk.Label({ margin_start: 10,
-                                          margin_end: 10 });
-
-        let item = new Gtk.ToolItem();
-        item.set_expand(true);
-        item.add(this._pageLabel);
-        item.show_all();
-
-        return item;
-    },
-
     populateToolbar : function(toolbar) {
-        this._toolbarBack = new Gtk.ToolButton({ expand: false,
-                                                 icon_name: 'go-previous-symbolic',
-                                                 visible: true });
-        toolbar.insert(this._toolbarBack, -1);
-
-        this._toolbarBack.connect('clicked', Lang.bind(this, function () {
-            this._view.previous_page();
-        }));
-
-        let labelItem = this._createLabelItem();
-        toolbar.insert(labelItem, -1);
-
-        this._toolbarForward = new Gtk.ToolButton({ expand: false,
-                                                    icon_name: 'go-next-symbolic',
-                                                    visible: true });
-        toolbar.insert(this._toolbarForward, -1);
+        this._toolbarBack =
+            Utils.createToolButton('go-previous-symbolic', Lang.bind(this, function () {
+                this._view.previous_page();
+            }));
+        toolbar.add(this._toolbarBack);
+
+        this._pageLabel = new Gtk.Label({ hexpand: true,
+                                          margin_start: 10,
+                                          margin_end: 10 });
+        toolbar.add(this._pageLabel);
 
-        this._toolbarForward.connect('clicked', Lang.bind(this, function () {
-            this._view.next_page();
-        }));
+        this._toolbarForward =
+            Utils.createToolButton('go-next-symbolic', Lang.bind(this, function () {
+                this._view.next_page();
+            }));
+        toolbar.add(this._toolbarForward);
 
-        let separator = new Gtk.SeparatorToolItem();
-        separator.show();
-        toolbar.insert(separator, -1);
+        let separator = new Gtk.Separator({ orientation: Gtk.Orientation.VERTICAL });
+        toolbar.add(separator);
 
         let toolbarZoom = Utils.createFullScreenButton(this._mainWindow);
-        toolbar.insert(toolbarZoom, -1);
+        toolbar.add(toolbarZoom);
     },
 
     _onDestroy : function() {
diff --git a/src/js/viewers/html.js b/src/js/viewers/html.js
index b3a3ca4..aae7999 100644
--- a/src/js/viewers/html.js
+++ b/src/js/viewers/html.js
@@ -58,14 +58,13 @@ const HTMLRenderer = new Lang.Class({
 
     populateToolbar : function(toolbar) {
         let toolbarZoom = Utils.createFullScreenButton(this._mainWindow);
-        toolbar.insert(toolbarZoom, 0);
+        toolbar.add(toolbarZoom);
 
-        let separator = new Gtk.SeparatorToolItem();
-        separator.show();
-        toolbar.insert(separator, 1);
+        let separator = new Gtk.Separator({ orientation: Gtk.Orientation.VERTICAL });
+        toolbar.add(separator);
 
         let toolbarRun = Utils.createOpenButton(this._file, this._mainWindow);
-        toolbar.insert(toolbarRun, 2);
+        toolbar.add(toolbarRun);
     }
 });
 
diff --git a/src/js/viewers/image.js b/src/js/viewers/image.js
index 2fd18be..1baefdf 100644
--- a/src/js/viewers/image.js
+++ b/src/js/viewers/image.js
@@ -198,7 +198,7 @@ const ImageRenderer = new Lang.Class({
 
     populateToolbar : function(toolbar) {
         let toolbarZoom = Utils.createFullScreenButton(this._mainWindow);
-        toolbar.insert(toolbarZoom, 0);
+        toolbar.add(toolbarZoom);
     },
 
     _onDestroy : function () {
diff --git a/src/js/viewers/text.js b/src/js/viewers/text.js
index eaf035d..78106d3 100644
--- a/src/js/viewers/text.js
+++ b/src/js/viewers/text.js
@@ -98,7 +98,7 @@ const TextRenderer = new Lang.Class({
 
     populateToolbar : function(toolbar) {
         let toolbarRun = Utils.createOpenButton(this._file, this._mainWindow);
-        toolbar.insert(toolbarRun, 0);
+        toolbar.add(toolbarRun);
     }
 });