AppFolderPopup: fix the position of close buttons

We need to adjust the offset of close buttons, in case the box
pointer has the arrow at the top. To do so, extend close buttons
to hook into a boxpointer (since that's the common use for them)
and automatically adjust their position.

https://bugzilla.gnome.org/show_bug.cgi?id=707842

js/misc/util.js

@@ -2,6 +2,7 @@
 
 const Clutter = imports.gi.Clutter;
 const GLib = imports.gi.GLib;
+const Lang = imports.lang;
 const St = imports.gi.St;
 
 const Main = imports.ui.main;
@@ -189,28 +190,57 @@ function insertSorted(array, val, cmp) {
     return pos;
 }
 
-function makeCloseButton() {
+const CloseButton = new Lang.Class({
-    let closeButton = new St.Button({ style_class: 'notification-close'});
+    Name: 'CloseButton',
+    Extends: St.Button,
 
-    // This is a bit tricky. St.Bin has its own x-align/y-align properties
+    _init: function(boxpointer) {
-    // that compete with Clutter's properties. This should be fixed for
+        this.parent({ style_class: 'notification-close'});
-    // Clutter 2.0. Since St.Bin doesn't define its own setters, the
-    // setters are a workaround to get Clutter's version.
-    closeButton.set_x_align(Clutter.ActorAlign.END);
-    closeButton.set_y_align(Clutter.ActorAlign.START);
 
-    // XXX Clutter 2.0 workaround: ClutterBinLayout needs expand
+        // This is a bit tricky. St.Bin has its own x-align/y-align properties
-    // to respect the alignments.
+        // that compete with Clutter's properties. This should be fixed for
-    closeButton.set_x_expand(true);
+        // Clutter 2.0. Since St.Bin doesn't define its own setters, the
-    closeButton.set_y_expand(true);
+        // setters are a workaround to get Clutter's version.
+        this.set_x_align(Clutter.ActorAlign.END);
+        this.set_y_align(Clutter.ActorAlign.START);
 
-    closeButton.connect('style-changed', function() {
+        // XXX Clutter 2.0 workaround: ClutterBinLayout needs expand
-        let themeNode = closeButton.get_theme_node();
+        // to respect the alignments.
-        closeButton.translation_x = themeNode.get_length('-shell-close-overlap-x');
+        this.set_x_expand(true);
-        closeButton.translation_y = themeNode.get_length('-shell-close-overlap-y');
+        this.set_y_expand(true);
-    });
 
-    return closeButton;
+        this._boxPointer = boxpointer;
+        if (boxpointer)
+            this._boxPointer.connect('arrow-side-changed', Lang.bind(this, this._sync));
+    },
+
+    _computeBoxPointerOffset: function() {
+        if (!this._boxPointer || !this._boxPointer.actor.get_stage())
+            return 0;
+
+        let side = this._boxPointer.arrowSide;
+        if (side == St.Side.TOP)
+            return this._boxPointer.getArrowHeight();
+        else
+            return 0;
+    },
+
+    _sync: function() {
+        let themeNode = this.get_theme_node();
+
+        let offY = this._computeBoxPointerOffset();
+        this.translation_x = themeNode.get_length('-shell-close-overlap-x')
+        this.translation_y = themeNode.get_length('-shell-close-overlap-y') + offY;
+    },
+
+    vfunc_style_changed: function() {
+        this._sync();
+        this.parent();
+    },
+});
+
+function makeCloseButton(boxpointer) {
+    return new CloseButton(boxpointer);
 }
 
 function ensureActorVisibleInScrollView(scrollView, actor) {

js/ui/appDisplay.js

@@ -1157,7 +1157,7 @@ const AppFolderPopup = new Lang.Class({
         this.actor.add_actor(this._boxPointer.actor);
         this._boxPointer.bin.set_child(this._view.actor);
 
-        this.closeButton = Util.makeCloseButton();
+        this.closeButton = Util.makeCloseButton(this._boxPointer);
         this.closeButton.connect('clicked', Lang.bind(this, this.popdown));
         this.actor.add_actor(this.closeButton);
 

js/ui/boxpointer.js

@@ -3,8 +3,9 @@
 const Clutter = imports.gi.Clutter;
 const Lang = imports.lang;
 const Meta = imports.gi.Meta;
-const St = imports.gi.St;
 const Shell = imports.gi.Shell;
+const Signals = imports.signals;
+const St = imports.gi.St;
 
 const Main = imports.ui.main;
 const Tweener = imports.ui.tweener;
@@ -61,6 +62,10 @@ const BoxPointer = new Lang.Class({
         this._muteInput();
     },
 
+    get arrowSide() {
+        return this._arrowSide;
+    },
+
     _muteInput: function() {
         if (this._capturedEventId == 0)
             this._capturedEventId = this.actor.connect('captured-event',
@@ -612,6 +617,8 @@ const BoxPointer = new Lang.Class({
                 this._container.queue_relayout();
                 return false;
             }));
+
+            this.emit('arrow-side-changed');
         }
     },
 
@@ -644,6 +651,8 @@ const BoxPointer = new Lang.Class({
     updateArrowSide: function(side) {
         this._arrowSide = side;
         this._border.queue_repaint();
+
+        this.emit('arrow-side-changed');
     },
 
     getPadding: function(side) {
@@ -654,3 +663,4 @@ const BoxPointer = new Lang.Class({
         return this.actor.get_theme_node().get_length('-arrow-rise');
     }
 });
+Signals.addSignalMethods(BoxPointer.prototype);