From 4c4846e9bd258d3f2a86d8387c462bd31eed605c Mon Sep 17 00:00:00 2001
From: Daniel van Vugt <daniel.van.vugt@canonical.com>
Date: Thu, 23 Jan 2020 15:36:39 +0800
Subject: [PATCH] overviewControls: Use ClutterActor's translation-x

Instead of reimplementing `translation-x` as a relayout. It still looks
the same but no longer incurs relayouts during the animation which
reduces render time significantly.

Related to: https://gitlab.gnome.org/GNOME/gnome-shell/issues/1271

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/948
---
 js/ui/overviewControls.js | 28 +++++-----------------------
 1 file changed, 5 insertions(+), 23 deletions(-)

diff --git a/js/ui/overviewControls.js b/js/ui/overviewControls.js
index 2b5cf9db5..360143945 100644
--- a/js/ui/overviewControls.js
+++ b/js/ui/overviewControls.js
@@ -31,15 +31,10 @@ var SlideLayout = GObject.registerClass({
             'slide-x', 'slide-x', 'slide-x',
             GObject.ParamFlags.READWRITE,
             0, 1, 1),
-        'translation-x': GObject.ParamSpec.double(
-            'translation-x', 'translation-x', 'translation-x',
-            GObject.ParamFlags.READWRITE,
-            -Infinity, Infinity, 0),
     },
 }, class SlideLayout extends Clutter.FixedLayout {
     _init(params) {
         this._slideX = 1;
-        this._translationX = 0;
         this._direction = SlideDirection.LEFT;
 
         super._init(params);
@@ -72,7 +67,7 @@ var SlideLayout = GObject.registerClass({
             : availWidth - natWidth * this._slideX;
 
         let actorBox = new Clutter.ActorBox();
-        actorBox.x1 = box.x1 + alignX + this._translationX;
+        actorBox.x1 = box.x1 + alignX;
         actorBox.x2 = actorBox.x1 + (child.x_expand ? availWidth : natWidth);
         actorBox.y1 = box.y1;
         actorBox.y2 = actorBox.y1 + availHeight;
@@ -102,20 +97,6 @@ var SlideLayout = GObject.registerClass({
     get slideDirection() {
         return this._direction;
     }
-
-    // eslint-disable-next-line camelcase
-    set translation_x(value) {
-        if (this._translationX == value)
-            return;
-        this._translationX = value;
-        this.notify('translation-x');
-        this.layout_changed();
-    }
-
-    // eslint-disable-next-line camelcase
-    get translation_x() {
-        return this._translationX;
-    }
 });
 
 var SlidingControl = GObject.registerClass(
@@ -184,11 +165,12 @@ class SlidingControl extends St.Widget {
         else
             translationEnd = translation;
 
-        if (this.layout.translation_x == translationEnd)
+        if (this.translation_x === translationEnd)
             return;
 
-        this.layout.translation_x = translationStart;
-        this.ease_property('@layout.translation-x', translationEnd, {
+        this.translation_x = translationStart;
+        this.ease({
+            translation_x: translationEnd,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             duration: SIDE_CONTROLS_ANIMATION_TIME,
         });