boxpointer: Use X/Y actor positioning instead of an anchor point

Currently all the widgets using BoxPointer and so popup actors are always drawn
at screen origin and then shifted at paint time in the proper position.

This doesn't work when using resource scale, since the widgets need to know
in which monitor they currently are in order to use properly scaled resources.

So, basically revert commit 22c22e0d7 and go back using the actual actor
coordinates for positioning and the actor translation for animating it, as the
relayouting issues of the past seem to be gone now.

https://gitlab.gnome.org/GNOME/gnome-shell/issues/1008
https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/435

js/ui/boxpointer.js

@@ -47,10 +47,6 @@ var BoxPointer = GObject.registerClass({
         this._border.connect('repaint', this._drawBorder.bind(this));
         this.add_actor(this._border);
         this.bin.raise(this._border);
-        this._xOffset = 0;
-        this._yOffset = 0;
-        this._xPosition = 0;
-        this._yPosition = 0;
         this._sourceAlignment = 0.5;
         this._capturedEventId = 0;
         this._muteInput();
@@ -118,23 +114,23 @@ var BoxPointer = GObject.registerClass({
         if (animate & PopupAnimation.SLIDE) {
             switch (this._arrowSide) {
                 case St.Side.TOP:
-                    this.yOffset = -rise;
+                    this.translation_y = -rise;
                     break;
                 case St.Side.BOTTOM:
-                    this.yOffset = rise;
+                    this.translation_y = rise;
                     break;
                 case St.Side.LEFT:
-                    this.xOffset = -rise;
+                    this.translation_x = -rise;
                     break;
                 case St.Side.RIGHT:
-                    this.xOffset = rise;
+                    this.translation_x = rise;
                     break;
             }
         }
 
         Tweener.addTween(this, { opacity: 255,
-                                 xOffset: 0,
+                                 translation_x: 0,
-                                 yOffset: 0,
+                                 translation_y: 0,
                                  transition: 'linear',
                                  onComplete: () => {
                                      this._unmuteInput();
@@ -148,8 +144,8 @@ var BoxPointer = GObject.registerClass({
         if (!this.visible)
             return;
 
-        let xOffset = 0;
+        let translationX = 0;
-        let yOffset = 0;
+        let translationY = 0;
         let themeNode = this.get_theme_node();
         let rise = themeNode.get_length('-arrow-rise');
         let fade = (animate & PopupAnimation.FADE);
@@ -158,16 +154,16 @@ var BoxPointer = GObject.registerClass({
         if (animate & PopupAnimation.SLIDE) {
             switch (this._arrowSide) {
                 case St.Side.TOP:
-                    yOffset = rise;
+                    translationY = rise;
                     break;
                 case St.Side.BOTTOM:
-                    yOffset = -rise;
+                    translationY = -rise;
                     break;
                 case St.Side.LEFT:
-                    xOffset = rise;
+                    translationX = rise;
                     break;
                 case St.Side.RIGHT:
-                    xOffset = -rise;
+                    translationX = -rise;
                     break;
             }
         }
@@ -176,15 +172,15 @@ var BoxPointer = GObject.registerClass({
 
         Tweener.removeTweens(this);
         Tweener.addTween(this, { opacity: fade ? 0 : 255,
-                                 xOffset: xOffset,
+                                 translation_x: translationX,
-                                 yOffset: yOffset,
+                                 translation_y: translationY,
                                  transition: 'linear',
                                  time: animationTime,
                                  onComplete: () => {
                                      this.hide();
                                      this.opacity = 0;
-                                     this.xOffset = 0;
+                                     this.translation_x = 0;
-                                     this.yOffset = 0;
+                                     this.translation_y = 0;
                                      if (onComplete)
                                          onComplete();
                                  }
@@ -584,9 +580,9 @@ var BoxPointer = GObject.registerClass({
             parent = parent.get_parent();
         }
 
-        this._xPosition = Math.floor(x);
+        // Actually set the position
-        this._yPosition = Math.floor(y);
+        this.x = Math.floor(x);
-        this._shiftActor();
+        this.y = Math.floor(y);
     }
 
     // @origin: Coordinate specifying middle of the arrow, along
@@ -609,17 +605,6 @@ var BoxPointer = GObject.registerClass({
         }
     }
 
-    _shiftActor() {
-        // Since the position of the BoxPointer depends on the allocated size
-        // of the BoxPointer and the position of the source actor, trying
-        // to position the BoxPointer via the x/y properties will result in
-        // allocation loops and warnings. Instead we do the positioning via
-        // the anchor point, which is independent of allocation, and leave
-        // x == y == 0.
-        this.set_anchor_point(-(this._xPosition + this._xOffset),
-                              -(this._yPosition + this._yOffset));
-    }
-
     _calculateArrowSide(arrowSide) {
         let sourceAllocation = Shell.util_get_transformed_allocation(this._sourceActor);
         let [minWidth, minHeight, boxWidth, boxHeight] = this.get_preferred_size();
@@ -666,24 +651,6 @@ var BoxPointer = GObject.registerClass({
         }
     }
 
-    set xOffset(offset) {
-        this._xOffset = offset;
-        this._shiftActor();
-    }
-
-    get xOffset() {
-        return this._xOffset;
-    }
-
-    set yOffset(offset) {
-        this._yOffset = offset;
-        this._shiftActor();
-    }
-
-    get yOffset() {
-        return this._yOffset;
-    }
-
     updateArrowSide(side) {
         this._arrowSide = side;
         this._border.queue_repaint();