[gnome-shell] slider: Cache slider width for dragging handlers

[Carlos Garnacho <carlosg src gnome org>]

commit 516d19eb39160670a97f3a7cacf1dcb78497541a
Author: Carlos Garnacho <carlosg gnome org>
Date:   Sat Jul 15 01:24:40 2017 +0200

    slider: Cache slider width for dragging handlers
    
    The actor allocation will be invalid on CLUTTER_TOUCH_BEGIN, because
    it comes together with a CLUTTER_ENTER event that will recalculate
    styles, and queue a relayout in result.
    
    The net result is that on CLUTTER_TOUCH_BEGIN, the relayout has been
    already queued, so the slider width comes up as 0, and the value ends
    up as 1. Later touch events already happen on a validated actor, so
    it is corrected. Still, not fun when modifying the volume slider on a
    touchscreen.

 js/ui/slider.js |    6 +++++-
 1 files changed, 5 insertions(+), 1 deletions(-)
---
diff --git a/js/ui/slider.js b/js/ui/slider.js
index 02dbfae..fbd28bd 100644
--- a/js/ui/slider.js
+++ b/js/ui/slider.js
@@ -17,6 +17,7 @@ const Slider = new Lang.Class({
             // Avoid spreading NaNs around
             throw TypeError('The slider value must be a number');
         this._value = Math.max(Math.min(value, 1), 0);
+        this._sliderWidth = 0;
 
         this.actor = new St.DrawingArea({ style_class: 'slider',
                                           can_focus: true,
@@ -27,6 +28,9 @@ const Slider = new Lang.Class({
         this.actor.connect('touch-event', Lang.bind(this, this._touchDragging));
         this.actor.connect('scroll-event', Lang.bind(this, this._onScrollEvent));
         this.actor.connect('key-press-event', Lang.bind(this, this.onKeyPressEvent));
+        this.actor.connect('allocation-changed', (actor, box) => {
+            this._sliderWidth = box.get_width();
+        });
 
         this._releaseId = this._motionId = 0;
         this._dragging = false;
@@ -242,7 +246,7 @@ const Slider = new Lang.Class({
         relX = absX - sliderX;
         relY = absY - sliderY;
 
-        let width = this.actor.width;
+        let width = this._sliderWidth;
         let handleRadius = this.actor.get_theme_node().get_length('-slider-handle-radius');
 
         let newvalue;