[sushi/wip/cosimoc/no-clutter: 2/36] Don't use clutter to position the toolbar

[Cosimo Cecchi <cosimoc src gnome org>]

commit 6e18039bf00281cdcc3df6cdc327cb902e844987
Author: Cosimo Cecchi <cosimoc gnome org>
Date:   Sun Jul 19 11:17:02 2015 -0700

    Don't use clutter to position the toolbar
    
    This is the first step towards removing the clutter dependency.

 src/js/ui/mainWindow.js  |   87 +++++++++++++++++-----------------------------
 src/js/viewers/audio.js  |    6 +---
 src/js/viewers/evince.js |    4 +--
 src/js/viewers/gst.js    |    9 ++---
 src/js/viewers/html.js   |    4 +--
 src/js/viewers/image.js  |    4 +--
 src/js/viewers/text.js   |    4 +--
 7 files changed, 40 insertions(+), 78 deletions(-)
---
diff --git a/src/js/ui/mainWindow.js b/src/js/ui/mainWindow.js
index f4a5108..b591279 100644
--- a/src/js/ui/mainWindow.js
+++ b/src/js/ui/mainWindow.js
@@ -55,9 +55,9 @@ const MainWindow = new Lang.Class({
         this._pendingRenderer = null;
         this._renderer = null;
         this._texture = null;
-        this._toolbarActor = null;
-        this._fullScreenId = 0;
+        this._toolbar = null;
         this._toolbarId = 0;
+        this._fullScreenId = 0;
         this._unFullScreenId = 0;
 
         this._mimeHandler = new MimeHandler.MimeHandler();
@@ -91,11 +91,14 @@ const MainWindow = new Lang.Class({
                                                            Gdk.WMFunction.RESIZE |
                                                            Gdk.WMFunction.CLOSE);
             }));
+
+        this._embed = new Gtk.Overlay();
+        this._gtkWindow.add(this._embed);
     },
 
     _createClutterEmbed : function() {
         this._clutterEmbed = new GtkClutter.Embed();
-        this._gtkWindow.add(this._clutterEmbed);
+        this._embed.add(this._clutterEmbed);
 
         this._clutterEmbed.set_receives_default(true);
         this._clutterEmbed.set_can_default(true);
@@ -180,14 +183,9 @@ const MainWindow = new Lang.Class({
         let stageWin = ClutterGdk.get_stage_window(this._stage);
         let win_coords = event.get_coords();
 
-        if ((event.get_source() == this._toolbarActor) ||
-            (event.get_source() == this._quitActor) ||
+        if ((event.get_source() == this._quitActor) ||
             (event.get_source() == this._texture &&
              !this._renderer.moveOnClick)) {
-
-            if (event.get_source() == this._toolbarActor)
-                this._resetToolbar();
-
             return false;
         }
 
@@ -203,7 +201,7 @@ const MainWindow = new Lang.Class({
     },
 
     _onMotionNotifyEvent : function() {
-        if (this._toolbarActor)
+        if (this._toolbar)
             this._resetToolbar();
 
         return false;
@@ -363,11 +361,7 @@ const MainWindow = new Lang.Class({
 
     _exitFullScreen : function() {
         this._isFullScreen = false;
-
-        if (this._toolbarActor) {
-            this._toolbarActor.set_opacity(0);
-            this._removeToolbarTimeout();
-        }
+        this._removeToolbarTimeout();
 
         /* wait for the next stage allocation to fade in the texture
          * and background again.
@@ -433,12 +427,7 @@ const MainWindow = new Lang.Class({
 
     _enterFullScreen : function() {
         this._isFullScreen = true;
-
-        if (this._toolbarActor) {
-            /* prepare the toolbar */
-            this._toolbarActor.set_opacity(0);
-            this._removeToolbarTimeout();
-        }
+        this._removeToolbarTimeout();
 
         /* wait for the next stage allocation to fade in the texture
          * and background again.
@@ -465,29 +454,31 @@ const MainWindow = new Lang.Class({
      ************************* toolbar helpers ********************************
      **************************************************************************/
     _createToolbar : function() {
-        if (this._toolbarActor) {
-            this._removeToolbarTimeout();
-            this._toolbarActor.destroy();
-            this._toolbarActor = null;
+        this._removeToolbarTimeout();
+
+        if (this._toolbar) {
+            this._toolbar.destroy();
+            this._toolbar = null;
         }
 
-        if (this._renderer.createToolbar)
-            this._toolbarActor = this._renderer.createToolbar();
+        if (this._renderer.createToolbar) {
+            let rendererToolbar = this._renderer.createToolbar();
+            this._toolbar = new Gtk.Revealer({ transition_duration: 250,
+                                               transition_type: Gtk.RevealerTransitionType.CROSSFADE,
+                                               visible: true });
+            this._toolbar.add(rendererToolbar);
+        }
 
-        if (!this._toolbarActor)
+        if (!this._toolbar)
             return;
 
-        Utils.alphaGtkWidget(this._toolbarActor.get_widget());
+        this._toolbar.margin_bottom = Constants.TOOLBAR_SPACING;
+        this._toolbar.margin_start = Constants.TOOLBAR_SPACING;
+        this._toolbar.margin_end = Constants.TOOLBAR_SPACING;
+        this._toolbar.halign = Gtk.Align.CENTER;
+        this._toolbar.valign = Gtk.Align.END;
 
-        this._toolbarActor.set_reactive(true);
-        this._toolbarActor.set_opacity(0);
-
-        this._toolbarActor.margin_bottom = Constants.TOOLBAR_SPACING;
-        this._toolbarActor.margin_start = Constants.TOOLBAR_SPACING;
-        this._toolbarActor.margin_end = Constants.TOOLBAR_SPACING;
-
-        this._mainLayout.add(this._toolbarActor,
-                             Clutter.BinAlignment.CENTER, Clutter.BinAlignment.END);
+        this._embed.add_overlay(this._toolbar);
     },
 
     _removeToolbarTimeout: function() {
@@ -498,18 +489,8 @@ const MainWindow = new Lang.Class({
     },
 
     _resetToolbar : function() {
-        if (this._toolbarId == 0) {
-            Tweener.removeTweens(this._toolbarActor);
-
-            this._toolbarActor.raise_top();
-            this._toolbarActor.set_opacity(0);
-
-            Tweener.addTween(this._toolbarActor,
-                             { opacity: 200,
-                               time: 0.1,
-                               transition: 'easeOutQuad'
-                             });
-        }
+        if (this._toolbarId == 0)
+            this._toolbar.reveal_child = true;
 
         this._removeToolbarTimeout();
         this._toolbarId = Mainloop.timeout_add(1500,
@@ -519,11 +500,7 @@ const MainWindow = new Lang.Class({
 
     _onToolbarTimeout : function() {
         this._toolbarId = 0;
-        Tweener.addTween(this._toolbarActor,
-                         { opacity: 0,
-                           time: 0.25,
-                           transition: 'easeOutQuad'
-                         });
+        this._toolbar.reveal_child = false;
         return false;
     },
 
diff --git a/src/js/viewers/audio.js b/src/js/viewers/audio.js
index 05daeba..b0c0e08 100644
--- a/src/js/viewers/audio.js
+++ b/src/js/viewers/audio.js
@@ -261,10 +261,6 @@ const AudioRenderer = new Lang.Class({
         this._mainToolbar.set_icon_size(Gtk.IconSize.MENU);
         this._mainToolbar.show();
 
-        this._toolbarActor = new GtkClutter.Actor({ contents: this._mainToolbar,
-                                                    opacity: 0,
-                                                    x_expand: true });
-
         this._toolbarPlay = new Gtk.ToolButton({ icon_name: 'media-playback-pause-symbolic' });
         this._toolbarPlay.show();
         this._mainToolbar.insert(this._toolbarPlay, 0);
@@ -305,7 +301,7 @@ const AudioRenderer = new Lang.Class({
         item.show_all();
         this._mainToolbar.insert(item, 3);
 
-        return this._toolbarActor;
+        return this._mainToolbar;
     },
 });
 
diff --git a/src/js/viewers/evince.js b/src/js/viewers/evince.js
index 0c01030..e0037ed 100644
--- a/src/js/viewers/evince.js
+++ b/src/js/viewers/evince.js
@@ -129,8 +129,6 @@ const EvinceRenderer = new Lang.Class({
         this._mainToolbar.set_show_arrow(false);
         this._mainToolbar.show();
 
-        this._toolbarActor = new GtkClutter.Actor({ contents: this._mainToolbar });
-
         this._toolbarBack = new Gtk.ToolButton({ expand: false,
                                                  icon_name: 'go-previous-symbolic' });
         this._toolbarBack.show();
@@ -163,7 +161,7 @@ const EvinceRenderer = new Lang.Class({
 
         this._updatePageLabel();
 
-        return this._toolbarActor;
+        return this._mainToolbar;
     },
 
     clear : function() {
diff --git a/src/js/viewers/gst.js b/src/js/viewers/gst.js
index 6a010f6..6e8545f 100644
--- a/src/js/viewers/gst.js
+++ b/src/js/viewers/gst.js
@@ -148,15 +148,12 @@ const GstRenderer = new Lang.Class({
     },
 
     createToolbar : function () {
-        this._mainToolbar = new Gtk.Toolbar({ icon_size: Gtk.IconSize.MENU });
+        this._mainToolbar = new Gtk.Toolbar({ icon_size: Gtk.IconSize.MENU,
+                                              hexpand: true });
         this._mainToolbar.get_style_context().add_class('osd');
         this._mainToolbar.set_show_arrow(false);
         this._mainToolbar.show();
 
-        this._toolbarActor = new GtkClutter.Actor({ contents: this._mainToolbar,
-                                                    opacity: 0,
-                                                    x_expand: true });
-
         this._toolbarPlay = new Gtk.ToolButton({ icon_name: 'media-playback-pause-symbolic' });
         this._toolbarPlay.show();
         this._mainToolbar.insert(this._toolbarPlay, 0);
@@ -201,7 +198,7 @@ const GstRenderer = new Lang.Class({
         this._toolbarZoom = Utils.createFullScreenButton(this._mainWindow);
         this._mainToolbar.insert(this._toolbarZoom, 4);
 
-        return this._toolbarActor;
+        return this._mainToolbar;
     },
 
     _onVideoSizeChange : function(player, width, height) {
diff --git a/src/js/viewers/html.js b/src/js/viewers/html.js
index 5135e2b..2f90092 100644
--- a/src/js/viewers/html.js
+++ b/src/js/viewers/html.js
@@ -75,8 +75,6 @@ const HTMLRenderer = new Lang.Class({
         this._mainToolbar.set_show_arrow(false);
         this._mainToolbar.show();
 
-        this._toolbarActor = new GtkClutter.Actor({ contents: this._mainToolbar });
-
         this._toolbarZoom = Utils.createFullScreenButton(this._mainWindow);
         this._mainToolbar.insert(this._toolbarZoom, 0);
 
@@ -87,7 +85,7 @@ const HTMLRenderer = new Lang.Class({
         this._toolbarRun = Utils.createOpenButton(this._file, this._mainWindow);
         this._mainToolbar.insert(this._toolbarRun, 2);
 
-        return this._toolbarActor;
+        return this._mainToolbar;
     }
 });
 
diff --git a/src/js/viewers/image.js b/src/js/viewers/image.js
index 383f0c2..5a30b75 100644
--- a/src/js/viewers/image.js
+++ b/src/js/viewers/image.js
@@ -103,12 +103,10 @@ const ImageRenderer = new Lang.Class({
         this._mainToolbar.set_show_arrow(false);
         this._mainToolbar.show();
 
-        this._toolbarActor = new GtkClutter.Actor({ contents: this._mainToolbar });
-
         this._toolbarZoom = Utils.createFullScreenButton(this._mainWindow);
         this._mainToolbar.insert(this._toolbarZoom, 0);
 
-        return this._toolbarActor;
+        return this._mainToolbar;
     },
 });
 
diff --git a/src/js/viewers/text.js b/src/js/viewers/text.js
index 2c9f57b..2c4b616 100644
--- a/src/js/viewers/text.js
+++ b/src/js/viewers/text.js
@@ -117,9 +117,7 @@ const TextRenderer = new Lang.Class({
 
         this._mainToolbar.show();
 
-        this._toolbarActor = new GtkClutter.Actor({ contents: this._mainToolbar });
-
-        return this._toolbarActor;
+        return this._mainToolbar;
     }
 });