windowManager: Use easing for window animations

Setting up implicit animations is more verbose than using tweener, in
particular when setting up callbacks to run on update or completion.
In order to make its use more convenient, monkey-patch ClutterActor
with an ease() method that works similarly to Tweener.addTween().

https://gitlab.gnome.org/GNOME/gnome-shell/merge_requests/22

js/gdm/loginDialog.js

@@ -652,7 +652,7 @@ var LoginDialog = GObject.registerClass({
                      bannerAllocation.x2 = Math.floor(centerX - centerGap / 2);
                      bannerAllocation.x1 = Math.floor(bannerAllocation.x2 - wideBannerWidth);
 
-                     // figure out how tall it would like to be and try to accomodate
+                     // figure out how tall it would like to be and try to accommodate
                      // but don't let it get too close to the logo
                      let [wideMinHeight, wideBannerHeight] = this._bannerView.get_preferred_height(wideBannerWidth);
 

js/misc/systemActions.js

@@ -88,42 +88,42 @@ const SystemActions = GObject.registerClass({
                             name: C_("search-result", "Power Off"),
                             iconName: 'system-shutdown-symbolic',
                             // Translators: A list of keywords that match the power-off action, separated by semicolons
-                            keywords: _("power off;shutdown;reboot;restart").split(';'),
+                            keywords: _("power off;shutdown;reboot;restart").split(/[; ]/),
                             available: false });
         this._actions.set(LOCK_SCREEN_ACTION_ID,
                           { // Translators: The name of the lock screen action in search
                             name: C_("search-result", "Lock Screen"),
                             iconName: 'system-lock-screen-symbolic',
                             // Translators: A list of keywords that match the lock screen action, separated by semicolons
-                            keywords: _("lock screen").split(';'),
+                            keywords: _("lock screen").split(/[; ]/),
                             available: false });
         this._actions.set(LOGOUT_ACTION_ID,
                           { // Translators: The name of the logout action in search
                             name: C_("search-result", "Log Out"),
                             iconName: 'application-exit-symbolic',
                             // Translators: A list of keywords that match the logout action, separated by semicolons
-                            keywords: _("logout;sign off").split(';'),
+                            keywords: _("logout;log out;sign off").split(/[; ]/),
                             available: false });
         this._actions.set(SUSPEND_ACTION_ID,
                           { // Translators: The name of the suspend action in search
                             name: C_("search-result", "Suspend"),
                             iconName: 'media-playback-pause-symbolic',
                             // Translators: A list of keywords that match the suspend action, separated by semicolons
-                            keywords: _("suspend;sleep").split(';'),
+                            keywords: _("suspend;sleep").split(/[; ]/),
                             available: false });
         this._actions.set(SWITCH_USER_ACTION_ID,
                           { // Translators: The name of the switch user action in search
                             name: C_("search-result", "Switch User"),
                             iconName: 'system-switch-user-symbolic',
                             // Translators: A list of keywords that match the switch user action, separated by semicolons
-                            keywords: _("switch user").split(';'),
+                            keywords: _("switch user").split(/[; ]/),
                             available: false });
         this._actions.set(LOCK_ORIENTATION_ACTION_ID,
                           { // Translators: The name of the lock orientation action in search
                             name: C_("search-result", "Lock Orientation"),
                             iconName: '',
                             // Translators: A list of keywords that match the lock orientation action, separated by semicolons
-                            keywords: _("lock orientation;screen;rotation").split(';'),
+                            keywords: _("lock orientation;screen;rotation").split(/[; ]/),
                             available: false });
 
         this._loginScreenSettings = new Gio.Settings({ schema_id: LOGIN_SCREEN_SCHEMA });
@@ -262,7 +262,7 @@ const SystemActions = GObject.registerClass({
         let results = [];
 
         for (let [key, {available, keywords}] of this._actions)
-            if (available && terms.every(t => keywords.some(k => (k.indexOf(t) >= 0))))
+            if (available && terms.every(t => keywords.some(k => k.startsWith(t))))
                 results.push(key);
 
         return results;

js/ui/altTab.js

@@ -474,12 +474,10 @@ var CyclerList = GObject.registerClass({
     }
 });
 
-var CyclerPopup = GObject.registerClass(
+var CyclerPopup = GObject.registerClass({
-class CyclerPopup extends SwitcherPopup.SwitcherPopup {
+    GTypeFlags: GObject.TypeFlags.ABSTRACT
+}, class CyclerPopup extends SwitcherPopup.SwitcherPopup {
     _init() {
-        if (this.constructor.name === CyclerPopup.prototype.constructor.name)
-            throw new TypeError(`Cannot instantiate abstract class ${this.constructor.name}`);
-
         super._init();
 
         this._items = this._getWindows();

js/ui/appDisplay.js

@@ -414,7 +414,7 @@ var AllView = class AllView extends BaseAppView {
         this._refilterApps();
     }
 
-    // Overriden from BaseAppView
+    // Overridden from BaseAppView
     animate(animationDirection, onComplete) {
         this._scrollView.reactive = false;
         let completionFunc = () => {
@@ -1017,7 +1017,7 @@ var FolderView = class FolderView extends BaseAppView {
         Util.ensureActorVisibleInScrollView(this.actor, actor);
     }
 
-    // Overriden from BaseAppView
+    // Overridden from BaseAppView
     animate(animationDirection) {
         this._grid.animatePulse(animationDirection);
     }
@@ -1081,7 +1081,7 @@ var FolderView = class FolderView extends BaseAppView {
 
         let contentBox = this.actor.get_theme_node().get_content_box(pageBox);
         // We only can show icons inside the collection view boxPointer
-        // so we have to substract the required padding etc of the boxpointer
+        // so we have to subtract the required padding etc of the boxpointer
         return [(contentBox.x2 - contentBox.x1) - 2 * this._offsetForEachSide, (contentBox.y2 - contentBox.y1) - 2 * this._offsetForEachSide];
     }
 

js/ui/components/keyring.js

@@ -23,20 +23,8 @@ var KeyringDialog = class extends ModalDialog.ModalDialog {
         this._content = new Dialog.MessageDialogContent({ icon });
         this.contentLayout.add(this._content);
 
-        // FIXME: Why does this break now?
-        /*
         this.prompt.bind_property('message', this._content, 'title', GObject.BindingFlags.SYNC_CREATE);
         this.prompt.bind_property('description', this._content, 'body', GObject.BindingFlags.SYNC_CREATE);
-        */
-        this.prompt.connect('notify::message', () => {
-            this._content.title = this.prompt.message;
-        });
-        this._content.title = this.prompt.message;
-
-        this.prompt.connect('notify::description', () => {
-            this._content.body = this.prompt.description;
-        });
-        this._content.body = this.prompt.description;
 
         this._workSpinner = null;
         this._controlTable = null;

js/ui/components/telepathyClient.js

@@ -401,7 +401,7 @@ var ChatSource = class extends MessageTray.Source {
         if (this._client.is_handling_channel(this._channel)) {
             // We are handling the channel, try to pass it to Empathy or Polari
             // (depending on the channel type)
-            // We don't check if either app is availble - mission control will
+            // We don't check if either app is available - mission control will
             // fallback to something else if activation fails
 
             let target;

js/ui/dash.js

@@ -899,7 +899,7 @@ var Dash = class Dash {
                 favPos++;
         }
 
-        // No drag placeholder means we don't wan't to favorite the app
+        // No drag placeholder means we don't want to favorite the app
         // and we are dragging it to its original position
         if (!this._dragPlaceholder)
             return true;

js/ui/environment.js

@@ -57,6 +57,60 @@ function _patchLayoutClass(layoutClass, styleProps) {
     };
 }
 
+function _adjustEasingTime(msecs) {
+    if (!St.Settings.get().enable_animations)
+        return 1;
+    return St.get_slow_down_factor() * msecs;
+}
+
+function _easeActor(actor, props, easingParams) {
+    let { duration, delay, mode,
+          onStopped, onUpdate, onComplete } = easingParams;
+
+    let animatedProps = Object.keys(props).map(p => p.replace('_', '-', 'g'));
+
+    actor.save_easing_state();
+
+    if (duration)
+        actor.set_easing_duration(duration);
+
+    if (delay)
+        actor.set_easing_delay(delay);
+
+    if (mode)
+        actor.set_easing_mode(mode);
+
+    actor.set(props);
+
+    if (onUpdate || onComplete || onStopped) {
+        let transition = actor.get_transition(animatedProps[0]);
+
+        if (transition) {
+            let updateId = 0;
+            if (onUpdate)
+                updateId = transition.connect('new-frame', onUpdate);
+
+            let id = transition.connect('stopped', isFinished => {
+                if (updateId != 0)
+                    transition.disconnect(updateId);
+                transition.disconnect(id);
+
+                if (onComplete)
+                    onComplete();
+                if (onStopped)
+                    onStopped(isFinished);
+            });
+        } else {
+            if (onComplete)
+                onComplete();
+            if (onStopped)
+                onStopped(true);
+        }
+    }
+
+    actor.restore_easing_state();
+}
+
 function _loggingFunc() {
     let fields = {'MESSAGE': [].join.call(arguments, ', ')};
     let domain = "GNOME Shell";
@@ -93,6 +147,19 @@ function init() {
                                             column_spacing: 'spacing-columns' });
     _patchLayoutClass(Clutter.BoxLayout, { spacing: 'spacing' });
 
+    let origSetEasingDuration = Clutter.Actor.prototype.set_easing_duration;
+    Clutter.Actor.prototype.set_easing_duration = function(msecs) {
+        origSetEasingDuration.call(this, _adjustEasingTime(msecs));
+    };
+    let origSetEasingDelay = Clutter.Actor.prototype.set_easing_delay;
+    Clutter.Actor.prototype.set_easing_delay = function(msecs) {
+        origSetEasingDelay.call(this, _adjustEasingTime(msecs));
+    };
+
+    Clutter.Actor.prototype.ease = function(props, easingParams) {
+        _easeActor(this, props, easingParams);
+    };
+
     Clutter.Actor.prototype.toString = function() {
         return St.describe_actor(this);
     };

js/ui/iconGrid.js

@@ -840,7 +840,7 @@ var PaginatedIconGrid = GObject.registerClass({
         }
     }
 
-    // Overriden from IconGrid
+    // Overridden from IconGrid
     _getChildrenToAnimate() {
         let children = this._getVisibleChildren();
         let firstIndex = this._childrenPerPage * this.currentPage;

js/ui/magnifier.js

@@ -1272,7 +1272,7 @@ var ZoomRegion = class ZoomRegion {
 
     /**
      * getContrast:
-     * Retreive the contrast of the magnified view.
+     * Retrieve the contrast of the magnified view.
      * @return  Object containing the contrast for the red, green,
      *          and blue channels.
      */

js/ui/main.js

@@ -636,7 +636,7 @@ function _queueBeforeRedraw(workId) {
  * initialization as well, under the assumption that new actors
  * will need it.
  *
- * Returns: A string work identifer
+ * Returns: A string work identifier
  */
 function initializeDeferredWork(actor, callback, props) {
     // Turn into a string so we can use as an object property

js/ui/modalDialog.js

@@ -224,10 +224,10 @@ var ModalDialog = class {
     // can be dismissed by a close call.
     //
     // The main point of this method is to give some indication to the user
-    // that the dialog reponse has been acknowledged but will take a few
+    // that the dialog response has been acknowledged but will take a few
     // moments before being processed.
     // e.g., if a user clicked "Log Out" then the dialog should go away
-    // imediately, but the lightbox should remain until the logout is
+    // immediately, but the lightbox should remain until the logout is
     // complete.
     _fadeOutDialog(timestamp) {
         if (this.state == State.CLOSED || this.state == State.CLOSING)

js/ui/panel.js

@@ -122,7 +122,7 @@ class AppMenu extends PopupMenu.PopupMenu {
 
     _updateDetailsVisibility() {
         let sw = this._appSystem.lookup_app('org.gnome.Software.desktop');
-        this._detailsItem.actor.visible = (sw != null);
+        this._detailsItem.visible = (sw != null);
     }
 
     isEmpty() {
@@ -160,7 +160,7 @@ class AppMenu extends PopupMenu.PopupMenu {
             });
         });
 
-        this._newWindowItem.actor.visible =
+        this._newWindowItem.visible =
             app && app.can_open_new_window() && !actions.includes('new-window');
     }
 

js/ui/popupMenu.js

@@ -51,49 +51,64 @@ function arrowIcon(side) {
     return arrow;
 }
 
-var PopupBaseMenuItem = class {
+var PopupBaseMenuItem = GObject.registerClass({
-    constructor(params) {
+    Properties: {
+        'active': GObject.ParamSpec.boolean('active', 'active', 'active',
+                                            GObject.ParamFlags.READWRITE,
+                                            GObject.TYPE_BOOLEAN,
+                                            false),
+        'sensitive': GObject.ParamSpec.boolean('sensitive', 'sensitive', 'sensitive',
+                                               GObject.ParamFlags.READWRITE,
+                                               GObject.TYPE_BOOLEAN,
+                                               true),
+    },
+    Signals: {
+        'activate': { param_types: [Clutter.Event.$gtype] },
+    }
+}, class PopupBaseMenuItem extends St.BoxLayout {
+    _init(params) {
         params = Params.parse (params, { reactive: true,
                                          activate: true,
                                          hover: true,
                                          style_class: null,
                                          can_focus: true
                                        });
-
+        super._init({ style_class: 'popup-menu-item',
-        this.actor = new St.BoxLayout({ style_class: 'popup-menu-item',
+                      reactive: params.reactive,
-                                        reactive: params.reactive,
+                      track_hover: params.reactive,
-                                        track_hover: params.reactive,
+                      can_focus: params.can_focus,
-                                        can_focus: params.can_focus,
+                      accessible_role: Atk.Role.MENU_ITEM });
-                                        accessible_role: Atk.Role.MENU_ITEM });
+        this._delegate = this;
-        this.actor._delegate = this;
 
         this._ornament = Ornament.NONE;
         this._ornamentLabel = new St.Label({ style_class: 'popup-menu-ornament' });
-        this.actor.add(this._ornamentLabel);
+        this.add(this._ornamentLabel);
 
         this._parent = null;
-        this.active = false;
+        this._active = false;
         this._activatable = params.reactive && params.activate;
         this._sensitive = true;
 
         if (!this._activatable)
-            this.actor.add_style_class_name('popup-inactive-menu-item');
+            this.add_style_class_name('popup-inactive-menu-item');
 
         if (params.style_class)
-            this.actor.add_style_class_name(params.style_class);
+            this.add_style_class_name(params.style_class);
 
         if (this._activatable) {
-            this.actor.connect('button-press-event', this._onButtonPressEvent.bind(this));
+            this.connect('button-press-event', this._onButtonPressEvent.bind(this));
-            this.actor.connect('button-release-event', this._onButtonReleaseEvent.bind(this));
+            this.connect('button-release-event', this._onButtonReleaseEvent.bind(this));
-            this.actor.connect('touch-event', this._onTouchEvent.bind(this));
+            this.connect('touch-event', this._onTouchEvent.bind(this));
-            this.actor.connect('key-press-event', this._onKeyPressEvent.bind(this));
+            this.connect('key-press-event', this._onKeyPressEvent.bind(this));
         }
         if (params.reactive && params.hover)
-            this.actor.connect('notify::hover', this._onHoverChanged.bind(this));
+            this.bind_property('hover', this, 'active', GObject.BindingFlags.SYNC_CREATE);
+    }
 
-        this.actor.connect('key-focus-in', this._onKeyFocusIn.bind(this));
+    get actor() {
-        this.actor.connect('key-focus-out', this._onKeyFocusOut.bind(this));
+        /* This is kept for compatibility with current implementation, and we
-        this.actor.connect('destroy', this._onDestroy.bind(this));
+           don't want to warn here yet since PopupMenu depends on this */
+        return this;
     }
 
     _getTopMenu() {
@@ -109,24 +124,24 @@ var PopupBaseMenuItem = class {
 
     _onButtonPressEvent(actor, event) {
         // This is the CSS active state
-        this.actor.add_style_pseudo_class ('active');
+        this.add_style_pseudo_class('active');
         return Clutter.EVENT_PROPAGATE;
     }
 
     _onButtonReleaseEvent(actor, event) {
-        this.actor.remove_style_pseudo_class ('active');
+        this.remove_style_pseudo_class('active');
         this.activate(event);
         return Clutter.EVENT_STOP;
     }
 
     _onTouchEvent(actor, event) {
         if (event.type() == Clutter.EventType.TOUCH_END) {
-            this.actor.remove_style_pseudo_class ('active');
+            this.remove_style_pseudo_class('active');
             this.activate(event);
             return Clutter.EVENT_STOP;
         } else if (event.type() == Clutter.EventType.TOUCH_BEGIN) {
             // This is the CSS active state
-            this.actor.add_style_pseudo_class ('active');
+            this.add_style_pseudo_class('active');
         }
         return Clutter.EVENT_PROPAGATE;
     }
@@ -151,54 +166,56 @@ var PopupBaseMenuItem = class {
         return Clutter.EVENT_PROPAGATE;
     }
 
-    _onKeyFocusIn(actor) {
+    vfunc_key_focus_in() {
-        this.setActive(true);
+        super.vfunc_key_focus_in();
+        this.active = true;
     }
 
-    _onKeyFocusOut(actor) {
+    vfunc_key_focus_out() {
-        this.setActive(false);
+        super.vfunc_key_focus_out();
-    }
+        this.active = false;
-
-    _onHoverChanged(actor) {
-        this.setActive(actor.hover);
     }
 
     activate(event) {
         this.emit('activate', event);
     }
 
-    setActive(active) {
+    get active() {
+        return this._active;
+    }
+
+    set active(active) {
         let activeChanged = active != this.active;
         if (activeChanged) {
-            this.active = active;
+            this._active = active;
             if (active) {
-                this.actor.add_style_class_name('selected');
+                this.add_style_class_name('selected');
-                if (this.actor.can_focus)
+                if (this.can_focus)
-                    this.actor.grab_key_focus();
+                    this.grab_key_focus();
             } else {
-                this.actor.remove_style_class_name('selected');
+                this.remove_style_class_name('selected');
                 // Remove the CSS active state if the user press the button and
                 // while holding moves to another menu item, so we don't paint all items.
                 // The correct behaviour would be to set the new item with the CSS
                 // active state as well, but button-press-event is not trigered,
                 // so we should track it in our own, which would involve some work
                 // in the container
-                this.actor.remove_style_pseudo_class ('active');
+                this.remove_style_pseudo_class('active');
             }
-            this.emit('active-changed', active);
+            this.notify('active');
         }
     }
 
     syncSensitive() {
-        let sensitive = this.getSensitive();
+        let sensitive = this.sensitive;
-        this.actor.reactive = sensitive;
+        this.reactive = sensitive;
-        this.actor.can_focus = sensitive;
+        this.can_focus = sensitive;
-        this.emit('sensitive-changed');
+        this.notify('sensitive');
         return sensitive;
     }
 
     getSensitive() {
-        let parentSensitive = this._parent ? this._parent.getSensitive() : true;
+        let parentSensitive = this._parent ? this._parent.sensitive : true;
         return this._activatable && this._sensitive && parentSensitive;
     }
 
@@ -210,12 +227,12 @@ var PopupBaseMenuItem = class {
         this.syncSensitive();
     }
 
-    destroy() {
+    get sensitive() {
-        this.actor.destroy();
+        return this.getSensitive();
     }
 
-    _onDestroy() {
+    set sensitive(sensitive) {
-        this.emit('destroy');
+        this.setSensitive(sensitive);
     }
 
     setOrnament(ornament) {
@@ -226,36 +243,38 @@ var PopupBaseMenuItem = class {
 
         if (ornament == Ornament.DOT) {
             this._ornamentLabel.text = '\u2022';
-            this.actor.add_accessible_state(Atk.StateType.CHECKED);
+            this.add_accessible_state(Atk.StateType.CHECKED);
         } else if (ornament == Ornament.CHECK) {
             this._ornamentLabel.text = '\u2713';
-            this.actor.add_accessible_state(Atk.StateType.CHECKED);
+            this.add_accessible_state(Atk.StateType.CHECKED);
         } else if (ornament == Ornament.NONE) {
             this._ornamentLabel.text = '';
-            this.actor.remove_accessible_state(Atk.StateType.CHECKED);
+            this.remove_accessible_state(Atk.StateType.CHECKED);
         }
     }
-};
+});
-Signals.addSignalMethods(PopupBaseMenuItem.prototype);
 
-var PopupMenuItem = class extends PopupBaseMenuItem {
+var PopupMenuItem = GObject.registerClass(
-    constructor(text, params) {
+class PopupMenuItem extends PopupBaseMenuItem {
-        super(params);
+    _init(text, params) {
+        super._init(params);
 
         this.label = new St.Label({ text: text });
-        this.actor.add_child(this.label);
+        this.add_child(this.label);
-        this.actor.label_actor = this.label
+        this.label_actor = this.label
     }
-};
+});
 
-var PopupSeparatorMenuItem = class extends PopupBaseMenuItem {
+
-    constructor(text) {
+var PopupSeparatorMenuItem = GObject.registerClass(
-        super({ reactive: false,
+class PopupSeparatorMenuItem extends PopupBaseMenuItem {
-                can_focus: false});
+    _init(text) {
+        super._init({ reactive: false,
+                      can_focus: false });
 
         this.label = new St.Label({ text: text || '' });
-        this.actor.add(this.label);
+        this.add(this.label);
-        this.actor.label_actor = this.label;
+        this.label_actor = this.label;
 
         this.label.connect('notify::text',
                            this._syncVisibility.bind(this));
@@ -264,75 +283,78 @@ var PopupSeparatorMenuItem = class extends PopupBaseMenuItem {
         this._separator = new St.Widget({ style_class: 'popup-separator-menu-item',
                                           y_expand: true,
                                           y_align: Clutter.ActorAlign.CENTER });
-        this.actor.add(this._separator, { expand: true });
+        this.add(this._separator, { expand: true });
     }
 
     _syncVisibility() {
         this.label.visible = this.label.text != '';
     }
-};
+});
 
-var Switch = class {
+var Switch = GObject.registerClass(
-    constructor(state) {
+class Switch extends St.Bin {
-        this.actor = new St.Bin({ style_class: 'toggle-switch',
+    _init(state) {
-                                  accessible_role: Atk.Role.CHECK_BOX,
+        super._init({ style_class: 'toggle-switch',
-                                  can_focus: true });
+                      accessible_role: Atk.Role.CHECK_BOX,
+                      can_focus: true });
         this.setToggleState(state);
     }
 
     setToggleState(state) {
         if (state)
-            this.actor.add_style_pseudo_class('checked');
+            this.add_style_pseudo_class('checked');
         else
-            this.actor.remove_style_pseudo_class('checked');
+            this.remove_style_pseudo_class('checked');
         this.state = state;
     }
 
     toggle() {
         this.setToggleState(!this.state);
     }
-};
+});
 
-var PopupSwitchMenuItem = class extends PopupBaseMenuItem {
+var PopupSwitchMenuItem = GObject.registerClass({
-    constructor(text, active, params) {
+    Signals: { 'toggled': { param_types: [GObject.TYPE_BOOLEAN] }, },
-        super(params);
+},
+class PopupSwitchMenuItem extends PopupBaseMenuItem {
+    _init(text, active, params) {
+        super._init(params);
 
         this.label = new St.Label({ text: text });
         this._switch = new Switch(active);
 
-        this.actor.accessible_role = Atk.Role.CHECK_MENU_ITEM;
+        this.accessible_role = Atk.Role.CHECK_MENU_ITEM;
         this.checkAccessibleState();
-        this.actor.label_actor = this.label;
+        this.label_actor = this.label;
 
-        this.actor.add_child(this.label);
+        this.add_child(this.label);
 
         this._statusBin = new St.Bin({ x_align: St.Align.END });
-        this.actor.add(this._statusBin, { expand: true, x_align: St.Align.END });
+        this.add(this._statusBin, { expand: true, x_align: St.Align.END });
 
         this._statusLabel = new St.Label({ text: '',
                                            style_class: 'popup-status-menu-item'
                                          });
-        this._statusBin.child = this._switch.actor;
+        this._statusBin.child = this._switch;
     }
 
     setStatus(text) {
         if (text != null) {
             this._statusLabel.text = text;
             this._statusBin.child = this._statusLabel;
-            this.actor.reactive = false;
+            this.reactive = false;
-            this.actor.accessible_role = Atk.Role.MENU_ITEM;
+            this.accessible_role = Atk.Role.MENU_ITEM;
         } else {
-            this._statusBin.child = this._switch.actor;
+            this._statusBin.child = this._switch;
-            this.actor.reactive = true;
+            this.reactive = true;
-            this.actor.accessible_role = Atk.Role.CHECK_MENU_ITEM;
+            this.accessible_role = Atk.Role.CHECK_MENU_ITEM;
         }
         this.checkAccessibleState();
     }
 
     activate(event) {
-        if (this._switch.actor.mapped) {
+        if (this._switch.mapped)
             this.toggle();
-        }
 
         // we allow pressing space to toggle the switch
         // without closing the menu
@@ -359,29 +381,30 @@ var PopupSwitchMenuItem = class extends PopupBaseMenuItem {
     }
 
     checkAccessibleState() {
-        switch (this.actor.accessible_role) {
+        switch (this.accessible_role) {
         case Atk.Role.CHECK_MENU_ITEM:
             if (this._switch.state)
-                this.actor.add_accessible_state (Atk.StateType.CHECKED);
+                this.add_accessible_state(Atk.StateType.CHECKED);
             else
-                this.actor.remove_accessible_state (Atk.StateType.CHECKED);
+                this.remove_accessible_state(Atk.StateType.CHECKED);
             break;
         default:
-            this.actor.remove_accessible_state (Atk.StateType.CHECKED);
+            this.remove_accessible_state(Atk.StateType.CHECKED);
         }
     }
-};
+});
 
-var PopupImageMenuItem = class extends PopupBaseMenuItem {
+var PopupImageMenuItem = GObject.registerClass(
-    constructor(text, icon, params) {
+class PopupImageMenuItem extends PopupBaseMenuItem {
-        super(params);
+    _init(text, icon, params) {
+        super._init(params);
 
         this._icon = new St.Icon({ style_class: 'popup-menu-icon',
                                    x_align: Clutter.ActorAlign.END });
-        this.actor.add_child(this._icon);
+        this.add_child(this._icon);
         this.label = new St.Label({ text: text });
-        this.actor.add_child(this.label);
+        this.add_child(this.label);
-        this.actor.label_actor = this.label;
+        this.label_actor = this.label;
 
         this.setIcon(icon);
     }
@@ -393,7 +416,7 @@ var PopupImageMenuItem = class extends PopupBaseMenuItem {
         else
             this._icon.icon_name = icon;
     }
-};
+});
 
 var PopupMenuBase = class {
     constructor(sourceActor, styleClass) {
@@ -437,13 +460,21 @@ var PopupMenuBase = class {
     }
 
     getSensitive() {
-        let parentSensitive = this._parent ? this._parent.getSensitive() : true;
+        let parentSensitive = this._parent ? this._parent.sensitive : true;
         return this._sensitive && parentSensitive;
     }
 
     setSensitive(sensitive) {
         this._sensitive = sensitive;
-        this.emit('sensitive-changed');
+        this.emit('notify::sensitive');
+    }
+
+    get sensitive() {
+        return this.getSensitive();
+    }
+
+    set sensitive(sensitive) {
+        this.setSensitive(sensitive);
     }
 
     _sessionUpdated() {
@@ -479,7 +510,7 @@ var PopupMenuBase = class {
             app.activate();
         });
 
-        menuItem.actor.visible = Main.sessionMode.allowSettings;
+        menuItem.visible = Main.sessionMode.allowSettings;
         this._settingsActions[desktopFile] = menuItem;
 
         return menuItem;
@@ -488,7 +519,7 @@ var PopupMenuBase = class {
     _setSettingsVisibility(visible) {
         for (let id in this._settingsActions) {
             let item = this._settingsActions[id];
-            item.actor.visible = visible;
+            item.visible = visible;
         }
     }
 
@@ -511,16 +542,17 @@ var PopupMenuBase = class {
 
     _subMenuActiveChanged(submenu, submenuItem) {
         if (this._activeMenuItem && this._activeMenuItem != submenuItem)
-            this._activeMenuItem.setActive(false);
+            this._activeMenuItem.active = false;
         this._activeMenuItem = submenuItem;
         this.emit('active-changed', submenuItem);
     }
 
     _connectItemSignals(menuItem) {
-        menuItem._activeChangeId = menuItem.connect('active-changed', (menuItem, active) => {
+        menuItem._activeChangeId = menuItem.connect('notify::active', (menuItem) => {
+            let active = menuItem.active;
             if (active && this._activeMenuItem != menuItem) {
                 if (this._activeMenuItem)
-                    this._activeMenuItem.setActive(false);
+                    this._activeMenuItem.active = false;
                 this._activeMenuItem = menuItem;
                 this.emit('active-changed', menuItem);
             } else if (!active && this._activeMenuItem == menuItem) {
@@ -528,8 +560,8 @@ var PopupMenuBase = class {
                 this.emit('active-changed', null);
             }
         });
-        menuItem._sensitiveChangeId = menuItem.connect('sensitive-changed', () => {
+        menuItem._sensitiveChangeId = menuItem.connect('notify::sensitive', () => {
-            let sensitive = menuItem.getSensitive();
+            let sensitive = menuItem.sensitive;
             if (!sensitive && this._activeMenuItem == menuItem) {
                 if (!this.actor.navigate_focus(menuItem.actor,
                                                St.DirectionType.TAB_FORWARD,
@@ -545,7 +577,7 @@ var PopupMenuBase = class {
             this.itemActivated(BoxPointer.PopupAnimation.FULL);
         });
 
-        menuItem._parentSensitiveChangeId = this.connect('sensitive-changed', () => {
+        menuItem._parentSensitiveChangeId = this.connect('notify::sensitive', () => {
             menuItem.syncSensitive();
         });
 
@@ -597,7 +629,7 @@ var PopupMenuBase = class {
             return;
         }
 
-        menuItem.actor.show();
+        menuItem.show();
     }
 
     moveMenuItem(menuItem, position) {
@@ -644,8 +676,8 @@ var PopupMenuBase = class {
             let parentClosingId = this.connect('menu-closed', () => {
                 menuItem.emit('menu-closed');
             });
-            let subMenuSensitiveChangedId = this.connect('sensitive-changed', () => {
+            let subMenuSensitiveChangedId = this.connect('notify::sensitive', () => {
-                menuItem.emit('sensitive-changed');
+                menuItem.emit('notify::sensitive');
             });
 
             menuItem.connect('destroy', () => {
@@ -851,7 +883,7 @@ var PopupMenu = class extends PopupMenuBase {
 
     close(animate) {
         if (this._activeMenuItem)
-            this._activeMenuItem.setActive(false);
+            this._activeMenuItem.active = false;
 
         if (this._boxPointer.visible) {
             this._boxPointer.close(animate, () => {
@@ -884,6 +916,10 @@ var PopupDummyMenu = class {
         return true;
     }
 
+    get sensitive() {
+        return this.getSensitive();
+    }
+
     open() { this.emit('open-state-changed', true); }
     close() { this.emit('open-state-changed', false); }
     toggle() {}
@@ -923,7 +959,11 @@ var PopupSubMenu = class extends PopupMenuBase {
     }
 
     getSensitive() {
-        return this._sensitive && this.sourceActor._delegate.getSensitive();
+        return this._sensitive && this.sourceActor.sensitive;
+    }
+
+    get sensitive() {
+        return this.getSensitive();
     }
 
     open(animate) {
@@ -990,7 +1030,7 @@ var PopupSubMenu = class extends PopupMenuBase {
         this.emit('open-state-changed', false);
 
         if (this._activeMenuItem)
-            this._activeMenuItem.setActive(false);
+            this._activeMenuItem.active = false;
 
         if (animate && this._needsScrollbar())
             animate = false;
@@ -1022,7 +1062,7 @@ var PopupSubMenu = class extends PopupMenuBase {
 
         if (this.isOpen && event.get_key_symbol() == Clutter.KEY_Left) {
             this.close(BoxPointer.PopupAnimation.FULL);
-            this.sourceActor._delegate.setActive(true);
+            this.sourceActor._delegate.active = true;
             return Clutter.EVENT_STOP;
         }
 
@@ -1053,25 +1093,26 @@ var PopupMenuSection = class extends PopupMenuBase {
     close() { this.emit('open-state-changed', false); }
 };
 
-var PopupSubMenuMenuItem = class extends PopupBaseMenuItem {
+var PopupSubMenuMenuItem = GObject.registerClass(
-    constructor(text, wantIcon) {
+class PopupSubMenuMenuItem extends PopupBaseMenuItem {
-        super();
+    _init(text, wantIcon) {
+        super._init();
 
-        this.actor.add_style_class_name('popup-submenu-menu-item');
+        this.add_style_class_name('popup-submenu-menu-item');
 
         if (wantIcon) {
             this.icon = new St.Icon({ style_class: 'popup-menu-icon' });
-            this.actor.add_child(this.icon);
+            this.add_child(this.icon);
         }
 
         this.label = new St.Label({ text: text,
                                     y_expand: true,
                                     y_align: Clutter.ActorAlign.CENTER });
-        this.actor.add_child(this.label);
+        this.add_child(this.label);
-        this.actor.label_actor = this.label;
+        this.label_actor = this.label;
 
         let expander = new St.Bin({ style_class: 'popup-menu-item-expander' });
-        this.actor.add(expander, { expand: true });
+        this.add(expander, { expand: true });
 
         this._triangle = arrowIcon(St.Side.RIGHT);
         this._triangle.pivot_point = new Clutter.Point({ x: 0.5, y: 0.6 });
@@ -1080,11 +1121,12 @@ var PopupSubMenuMenuItem = class extends PopupBaseMenuItem {
                                             y_align: Clutter.ActorAlign.CENTER });
         this._triangleBin.add_child(this._triangle);
 
-        this.actor.add_child(this._triangleBin);
+        this.add_child(this._triangleBin);
-        this.actor.add_accessible_state (Atk.StateType.EXPANDABLE);
+        this.add_accessible_state(Atk.StateType.EXPANDABLE);
 
-        this.menu = new PopupSubMenu(this.actor, this._triangle);
+        this.menu = new PopupSubMenu(this, this._triangle);
         this.menu.connect('open-state-changed', this._subMenuOpenStateChanged.bind(this));
+        this.connect('destroy', () => { this.menu.destroy(); });
     }
 
     _setParent(parent) {
@@ -1101,24 +1143,18 @@ var PopupSubMenuMenuItem = class extends PopupBaseMenuItem {
 
     _subMenuOpenStateChanged(menu, open) {
         if (open) {
-            this.actor.add_style_pseudo_class('open');
+            this.add_style_pseudo_class('open');
             this._getTopMenu()._setOpenedSubMenu(this.menu);
-            this.actor.add_accessible_state (Atk.StateType.EXPANDED);
+            this.add_accessible_state(Atk.StateType.EXPANDED);
-            this.actor.add_style_pseudo_class('checked');
+            this.add_style_pseudo_class('checked');
         } else {
-            this.actor.remove_style_pseudo_class('open');
+            this.remove_style_pseudo_class('open');
             this._getTopMenu()._setOpenedSubMenu(null);
-            this.actor.remove_accessible_state (Atk.StateType.EXPANDED);
+            this.remove_accessible_state (Atk.StateType.EXPANDED);
-            this.actor.remove_style_pseudo_class('checked');
+            this.remove_style_pseudo_class('checked');
         }
     }
 
-    destroy() {
-        this.menu.destroy();
-
-        super.destroy();
-    }
-
     setSubmenuShown(open) {
         if (open)
             this.menu.open(BoxPointer.PopupAnimation.FULL);
@@ -1156,7 +1192,7 @@ var PopupSubMenuMenuItem = class extends PopupBaseMenuItem {
     _onButtonReleaseEvent(actor) {
         // Since we override the parent, we need to manage what the parent does
         // with the active style class
-        this.actor.remove_style_pseudo_class ('active');
+        this.remove_style_pseudo_class('active');
         this._setOpenState(!this._getOpenState());
         return Clutter.EVENT_PROPAGATE;
     }
@@ -1165,12 +1201,12 @@ var PopupSubMenuMenuItem = class extends PopupBaseMenuItem {
         if (event.type() == Clutter.EventType.TOUCH_END) {
             // Since we override the parent, we need to manage what the parent does
             // with the active style class
-            this.actor.remove_style_pseudo_class ('active');
+            this.remove_style_pseudo_class('active');
             this._setOpenState(!this._getOpenState());
         }
         return Clutter.EVENT_PROPAGATE;
     }
-};
+});
 
 /* Basic implementation of a menu manager.
  * Call addMenu to add menus

js/ui/status/bluetooth.js

@@ -118,9 +118,9 @@ var Indicator = class extends PanelMenu.SystemIndicator {
         // Remember if there were setup devices and show the menu
         // if we've seen setup devices and we're not hard blocked
         if (nDevices > 0)
-            this._item.actor.visible = !this._proxy.BluetoothHardwareAirplaneMode;
+            this._item.visible = !this._proxy.BluetoothHardwareAirplaneMode;
         else
-            this._item.actor.visible = this._proxy.BluetoothHasAirplaneMode && !this._proxy.BluetoothAirplaneMode;
+            this._item.visible = this._proxy.BluetoothHasAirplaneMode && !this._proxy.BluetoothAirplaneMode;
 
         if (nConnectedDevices > 0)
             /* Translators: this is the number of connected bluetooth devices */

js/ui/status/brightness.js

@@ -37,12 +37,12 @@ var Indicator = class extends PanelMenu.SystemIndicator {
 
         let icon = new St.Icon({ icon_name: 'display-brightness-symbolic',
                                  style_class: 'popup-menu-icon' });
-        this._item.actor.add(icon);
+        this._item.add(icon);
-        this._item.actor.add(this._slider.actor, { expand: true });
+        this._item.add(this._slider.actor, { expand: true });
-        this._item.actor.connect('button-press-event', (actor, event) => {
+        this._item.connect('button-press-event', (actor, event) => {
             return this._slider.startDragging(event);
         });
-        this._item.actor.connect('key-press-event', (actor, event) => {
+        this._item.connect('key-press-event', (actor, event) => {
             return this._slider.onKeyPressEvent(actor, event);
         });
 
@@ -55,7 +55,7 @@ var Indicator = class extends PanelMenu.SystemIndicator {
 
     _sync() {
         let visible = this._proxy.Brightness >= 0;
-        this._item.actor.visible = visible;
+        this._item.visible = visible;
         if (visible)
             this._slider.setValue(this._proxy.Brightness / 100.0);
     }

js/ui/status/keyboard.js

@@ -15,17 +15,18 @@ const Util = imports.misc.util;
 const INPUT_SOURCE_TYPE_XKB = 'xkb';
 const INPUT_SOURCE_TYPE_IBUS = 'ibus';
 
-var LayoutMenuItem = class extends PopupMenu.PopupBaseMenuItem {
+var LayoutMenuItem = GObject.registerClass(
-    constructor(displayName, shortName) {
+class LayoutMenuItem extends PopupMenu.PopupBaseMenuItem {
-        super();
+    _init(displayName, shortName) {
+        super._init();
 
         this.label = new St.Label({ text: displayName });
         this.indicator = new St.Label({ text: shortName });
-        this.actor.add(this.label, { expand: true });
+        this.add(this.label, { expand: true });
-        this.actor.add(this.indicator);
+        this.add(this.indicator);
-        this.actor.label_actor = this.label;
+        this.label_actor = this.label;
     }
-};
+});
 
 var InputSource = class {
     constructor(type, id, displayName, shortName, index) {
@@ -857,7 +858,7 @@ class InputSourceIndicator extends PanelMenu.Button {
         // but at least for now it is used as "allow popping up windows
         // from shell menus"; we can always add a separate sessionMode
         // option if need arises.
-        this._showLayoutItem.actor.visible = Main.sessionMode.allowSettings;
+        this._showLayoutItem.visible = Main.sessionMode.allowSettings;
     }
 
     _sourcesChanged() {

js/ui/status/location.js

@@ -101,12 +101,12 @@ var Indicator = class extends PanelMenu.SystemIndicator {
     _syncIndicator() {
         if (this._managerProxy == null) {
             this._indicator.visible = false;
-            this._item.actor.visible = false;
+            this._item.visible = false;
             return;
         }
 
         this._indicator.visible = this._managerProxy.InUse;
-        this._item.actor.visible = this._indicator.visible;
+        this._item.visible = this._indicator.visible;
         this._updateMenuLabels();
     }
 

js/ui/status/network.js

@@ -235,14 +235,14 @@ var NMConnectionSection = class NMConnectionSection {
         if (!this._connectionValid(connection))
             return;
 
-        // This function is called everytime connection is added or updated
+        // This function is called every time the connection is added or updated.
         // In the usual case, we already added this connection and UUID
         // didn't change. So we need to check if we already have an item,
         // and update it for properties in the connection that changed
         // (the only one we care about is the name)
         // But it's also possible we didn't know about this connection
         // (eg, during coldplug, or because it was updated and suddenly
-        // it's valid for this device), in which case we add a new item
+        // it's valid for this device), in which case we add a new item.
 
         let item = this._connectionItems.get(connection.get_uuid());
         if (item)
@@ -389,8 +389,8 @@ var NMConnectionDevice = class NMConnectionDevice extends NMConnectionSection {
 
     _sync() {
         let nItems = this._connectionItems.size;
-        this._autoConnectItem.actor.visible = (nItems == 0);
+        this._autoConnectItem.visible = (nItems == 0);
-        this._deactivateItem.actor.visible = this._device.state > NM.DeviceState.DISCONNECTED;
+        this._deactivateItem.visible = this._device.state > NM.DeviceState.DISCONNECTED;
 
         if (this._activeConnection == null) {
             let activeConnection = this._device.active_connection;
@@ -477,7 +477,7 @@ var NMDeviceWired = class extends NMConnectionDevice {
     }
 
     _sync() {
-        this.item.actor.visible = this._hasCarrier();
+        this.item.visible = this._hasCarrier();
         super._sync();
     }
 
@@ -1076,7 +1076,7 @@ var NMWirelessDialog = class extends ModalDialog.ModalDialog {
 
             let newPos = Util.insertSorted(this._networks, network, this._networkSortFunction);
             this._createNetworkItem(network);
-            this._itemBox.insert_child_at_index(network.item.actor, newPos);
+            this._itemBox.insert_child_at_index(network.item, newPos);
         }
 
         this._syncView();
@@ -1094,7 +1094,7 @@ var NMWirelessDialog = class extends ModalDialog.ModalDialog {
         network.accessPoints.splice(res.ap, 1);
 
         if (network.accessPoints.length == 0) {
-            network.item.actor.destroy();
+            network.item.destroy();
             this._networks.splice(res.network, 1);
         } else {
             network.item.updateBestAP(network.accessPoints[0]);
@@ -1110,7 +1110,7 @@ var NMWirelessDialog = class extends ModalDialog.ModalDialog {
 
         this._itemBox.remove_all_children();
         this._networks.forEach(network => {
-            this._itemBox.add_child(network.item.actor);
+            this._itemBox.add_child(network.item);
         });
 
         adjustment.value = scrollValue;
@@ -1118,25 +1118,25 @@ var NMWirelessDialog = class extends ModalDialog.ModalDialog {
 
     _selectNetwork(network) {
         if (this._selectedNetwork)
-            this._selectedNetwork.item.actor.remove_style_pseudo_class('selected');
+            this._selectedNetwork.item.remove_style_pseudo_class('selected');
 
         this._selectedNetwork = network;
         this._updateSensitivity();
 
         if (this._selectedNetwork)
-            this._selectedNetwork.item.actor.add_style_pseudo_class('selected');
+            this._selectedNetwork.item.add_style_pseudo_class('selected');
     }
 
     _createNetworkItem(network) {
         network.item = new NMWirelessDialogItem(network);
         network.item.setActive(network == this._selectedNetwork);
         network.item.connect('selected', () => {
-            Util.ensureActorVisibleInScrollView(this._scrollView, network.item.actor);
+            Util.ensureActorVisibleInScrollView(this._scrollView, network.item);
             this._selectNetwork(network);
         });
-        network.item.actor.connect('destroy', () => {
+        network.item.connect('destroy', () => {
             let keyFocus = global.stage.key_focus;
-            if (keyFocus && keyFocus.contains(network.item.actor))
+            if (keyFocus && keyFocus.contains(network.item))
                 this._itemBox.grab_key_focus();
         });
     }
@@ -1262,7 +1262,7 @@ var NMDeviceWireless = class {
 
     _sync() {
         this._toggleItem.label.text = this._client.wireless_enabled ? _("Turn Off") : _("Turn On");
-        this._toggleItem.actor.visible = this._client.wireless_hardware_enabled;
+        this._toggleItem.visible = this._client.wireless_hardware_enabled;
 
         this.item.icon.icon_name = this._getMenuIcon();
         this.item.label.text = this._getStatus();
@@ -1452,7 +1452,7 @@ var NMVpnSection = class extends NMConnectionSection {
 
     _sync() {
         let nItems = this._connectionItems.size;
-        this.item.actor.visible = (nItems > 0);
+        this.item.visible = (nItems > 0);
 
         super._sync();
     }
@@ -1535,7 +1535,7 @@ var DeviceCategory = class extends PopupMenu.PopupMenuSection {
 
         this._summaryItem.menu.addSettingsAction(_('Network Settings'),
                                                  'gnome-network-panel.desktop');
-        this._summaryItem.actor.hide();
+        this._summaryItem.hide();
 
     }
 
@@ -1544,7 +1544,7 @@ var DeviceCategory = class extends PopupMenu.PopupMenuSection {
             (prev, child) => prev + (child.visible ? 1 : 0), 0);
         this._summaryItem.label.text = this._getSummaryLabel(nDevices);
         let shouldSummarize = nDevices > MAX_DEVICE_ITEMS;
-        this._summaryItem.actor.visible = shouldSummarize;
+        this._summaryItem.visible = shouldSummarize;
         this.section.actor.visible = !shouldSummarize;
     }
 

js/ui/status/nightLight.js

@@ -61,6 +61,6 @@ var Indicator = class extends PanelMenu.SystemIndicator {
                                          : _("Night Light On");
         this._disableItem.label.text = disabled ? _("Resume")
                                                 : _("Disable Until Tomorrow");
-        this._item.actor.visible = this._indicator.visible = visible;
+        this._item.visible = this._indicator.visible = visible;
     }
 };

js/ui/status/power.js

@@ -96,11 +96,11 @@ var Indicator = class extends PanelMenu.SystemIndicator {
         // Do we have batteries or a UPS?
         let visible = this._proxy.IsPresent;
         if (visible) {
-            this._item.actor.show();
+            this._item.show();
             this._percentageLabel.visible = this._desktopSettings.get_boolean(SHOW_BATTERY_PERCENTAGE);
         } else {
             // If there's no battery, then we use the power icon.
-            this._item.actor.hide();
+            this._item.hide();
             this._indicator.icon_name = 'system-shutdown-symbolic';
             this._percentageLabel.hide();
             return;

js/ui/status/remoteAccess.js

@@ -53,10 +53,10 @@ var RemoteAccessApplet = class extends PanelMenu.SystemIndicator {
     _sync() {
         if (this._handles.size == 0) {
             this._indicator.visible = false;
-            this._item.actor.visible = false;
+            this._item.visible = false;
         } else {
             this._indicator.visible = true;
-            this._item.actor.visible = true;
+            this._item.visible = true;
         }
     }
 

js/ui/status/rfkill.js

@@ -97,7 +97,7 @@ var Indicator = class extends PanelMenu.SystemIndicator {
         let showAirplaneMode = this._manager.shouldShowAirplaneMode;
 
         this._indicator.visible = (airplaneMode && showAirplaneMode);
-        this._item.actor.visible = (airplaneMode && showAirplaneMode);
+        this._item.visible = (airplaneMode && showAirplaneMode);
         this._offItem.setSensitive(!hwAirplaneMode);
 
         if (hwAirplaneMode)

js/ui/status/system.js

@@ -116,10 +116,10 @@ var Indicator = class extends PanelMenu.SystemIndicator {
 
         this._createSubMenu();
 
-        this._loginScreenItem.actor.connect('notify::visible',
+        this._loginScreenItem.connect('notify::visible',
-                                            () => { this._updateMultiUser(); });
+                                      () => { this._updateMultiUser(); });
-        this._logoutItem.actor.connect('notify::visible',
+        this._logoutItem.connect('notify::visible',
-                                       () => { this._updateMultiUser(); });
+                                 () => { this._updateMultiUser(); });
         // Whether shutdown is available or not depends on both lockdown
         // settings (disable-log-out) and Polkit policy - the latter doesn't
         // notify, so we update the menu item each time the menu opens or
@@ -142,7 +142,7 @@ var Indicator = class extends PanelMenu.SystemIndicator {
                        this._lockScreenAction.visible ||
                        this._altSwitcher.actor.visible);
 
-        this._actionsItem.actor.visible = visible;
+        this.buttonGroup.visible = visible;
     }
 
     _sessionUpdated() {
@@ -150,10 +150,10 @@ var Indicator = class extends PanelMenu.SystemIndicator {
     }
 
     _updateMultiUser() {
-        let hasSwitchUser = this._loginScreenItem.actor.visible;
+        let hasSwitchUser = this._loginScreenItem.visible;
-        let hasLogout = this._logoutItem.actor.visible;
+        let hasLogout = this._logoutItem.visible;
 
-        this._switchUserSubMenu.actor.visible = hasSwitchUser || hasLogout;
+        this._switchUserSubMenu.visible = hasSwitchUser || hasLogout;
     }
 
     _updateSwitchUserSubMenu() {
@@ -208,7 +208,7 @@ var Indicator = class extends PanelMenu.SystemIndicator {
         this._switchUserSubMenu.menu.addMenuItem(item);
         this._loginScreenItem = item;
         this._systemActions.bind_property('can-switch-user',
-                                          this._loginScreenItem.actor,
+                                          this._loginScreenItem,
                                           'visible',
                                           bindFlags);
 
@@ -220,7 +220,7 @@ var Indicator = class extends PanelMenu.SystemIndicator {
         this._switchUserSubMenu.menu.addMenuItem(item);
         this._logoutItem = item;
         this._systemActions.bind_property('can-logout',
-                                          this._logoutItem.actor,
+                                          this._logoutItem,
                                           'visible',
                                           bindFlags);
 
@@ -236,7 +236,7 @@ var Indicator = class extends PanelMenu.SystemIndicator {
 
         item = new PopupMenu.PopupBaseMenuItem({ reactive: false,
                                                  can_focus: false });
-        this.buttonGroup = item.actor;
+        this.buttonGroup = item;
 
         let app = this._settingsApp = Shell.AppSystem.get_default().lookup_app(
             'gnome-control-center.desktop'
@@ -251,14 +251,14 @@ var Indicator = class extends PanelMenu.SystemIndicator {
             log('Missing required core component Settings, expect trouble…');
             this._settingsAction = new St.Widget();
         }
-        item.actor.add(this._settingsAction, { expand: true, x_fill: false });
+        item.add(this._settingsAction, { expand: true, x_fill: false });
 
         this._orientationLockAction = this._createActionButton('', _("Orientation Lock"));
         this._orientationLockAction.connect('clicked', () => {
             this.menu.itemActivated(BoxPointer.PopupAnimation.NONE),
             this._systemActions.activateLockOrientation();
         });
-        item.actor.add(this._orientationLockAction, { expand: true, x_fill: false });
+        item.add(this._orientationLockAction, { expand: true, x_fill: false });
         this._systemActions.bind_property('can-lock-orientation',
                                           this._orientationLockAction,
                                           'visible',
@@ -273,7 +273,7 @@ var Indicator = class extends PanelMenu.SystemIndicator {
             this.menu.itemActivated(BoxPointer.PopupAnimation.NONE);
             this._systemActions.activateLockScreen();
         });
-        item.actor.add(this._lockScreenAction, { expand: true, x_fill: false });
+        item.add(this._lockScreenAction, { expand: true, x_fill: false });
         this._systemActions.bind_property('can-lock-screen',
                                           this._lockScreenAction,
                                           'visible',
@@ -300,9 +300,8 @@ var Indicator = class extends PanelMenu.SystemIndicator {
                                           bindFlags);
 
         this._altSwitcher = new AltSwitcher(this._powerOffAction, this._suspendAction);
-        item.actor.add(this._altSwitcher.actor, { expand: true, x_fill: false });
+        item.add(this._altSwitcher.actor, { expand: true, x_fill: false });
 
-        this._actionsItem = item;
         this.menu.addMenuItem(item);
 
 

js/ui/status/volume.js

@@ -41,12 +41,12 @@ var StreamSlider = class {
         this._slider.connect('drag-end', this._notifyVolumeChange.bind(this));
 
         this._icon = new St.Icon({ style_class: 'popup-menu-icon' });
-        this.item.actor.add(this._icon);
+        this.item.add(this._icon);
-        this.item.actor.add(this._slider.actor, { expand: true });
+        this.item.add(this._slider.actor, { expand: true });
-        this.item.actor.connect('button-press-event', (actor, event) => {
+        this.item.connect('button-press-event', (actor, event) => {
             return this._slider.startDragging(event);
         });
-        this.item.actor.connect('key-press-event', (actor, event) => {
+        this.item.connect('key-press-event', (actor, event) => {
             return this._slider.onKeyPressEvent(actor, event);
         });
 
@@ -93,7 +93,7 @@ var StreamSlider = class {
 
     _updateVisibility() {
         let visible = this._shouldBeVisible();
-        this.item.actor.visible = visible;
+        this.item.visible = visible;
     }
 
     scroll(event) {

js/ui/switcherPopup.js

@@ -30,12 +30,10 @@ function primaryModifier(mask) {
     return primary;
 }
 
-var SwitcherPopup = GObject.registerClass(
+var SwitcherPopup = GObject.registerClass({
-class SwitcherPopup extends St.Widget {
+    GTypeFlags: GObject.TypeFlags.ABSTRACT
+}, class SwitcherPopup extends St.Widget {
     _init(items) {
-        if (this.constructor.name === SwitcherPopup.prototype.constructor.name)
-            throw new TypeError(`Cannot instantiate abstract class ${this.constructor.name}`);
-
         super._init({ style_class: 'switcher-popup',
                       reactive: true,
                       visible: false });

js/ui/tweener.js

@@ -152,7 +152,7 @@ function registerSpecialPropertySplitter(name, splitFunction, parameters) {
 // Tweener to a Clutter.TimeLine. Now, Clutter.Timeline itself isn't a
 // whole lot more sophisticated than a simple timeout at a fixed frame
 // rate, but at least it knows how to drop frames. (See
-// HippoAnimationManager for a more sophisticated view of continous
+// HippoAnimationManager for a more sophisticated view of continuous
 // time updates; even better is to pay attention to the vertical
 // vblank and sync to that when possible.)
 //

js/ui/windowManager.js

@@ -11,7 +11,6 @@ const WorkspaceSwitcherPopup = imports.ui.workspaceSwitcherPopup;
 const InhibitShortcutsDialog = imports.ui.inhibitShortcutsDialog;
 const Main = imports.ui.main;
 const ModalDialog = imports.ui.modalDialog;
-const Tweener = imports.ui.tweener;
 const WindowMenu = imports.ui.windowMenu;
 const PadOsd = imports.ui.padOsd;
 const EdgeDragAction = imports.ui.edgeDragAction;
@@ -21,15 +20,15 @@ const SwitchMonitor = imports.ui.switchMonitor;
 const { loadInterfaceXML } = imports.misc.fileUtils;
 
 var SHELL_KEYBINDINGS_SCHEMA = 'org.gnome.shell.keybindings';
-var MINIMIZE_WINDOW_ANIMATION_TIME = 0.2;
+var MINIMIZE_WINDOW_ANIMATION_TIME = 200; // ms
-var SHOW_WINDOW_ANIMATION_TIME = 0.15;
+var SHOW_WINDOW_ANIMATION_TIME = 150; // ms
-var DIALOG_SHOW_WINDOW_ANIMATION_TIME = 0.1;
+var DIALOG_SHOW_WINDOW_ANIMATION_TIME = 100; // ms
-var DESTROY_WINDOW_ANIMATION_TIME = 0.15;
+var DESTROY_WINDOW_ANIMATION_TIME = 150; // ms
-var DIALOG_DESTROY_WINDOW_ANIMATION_TIME = 0.1;
+var DIALOG_DESTROY_WINDOW_ANIMATION_TIME = 100; // ms
-var WINDOW_ANIMATION_TIME = 0.25;
+var WINDOW_ANIMATION_TIME = 250; // ms
 var DIM_BRIGHTNESS = -0.3;
-var DIM_TIME = 0.500;
+var DIM_TIME = 500; // ms
-var UNDIM_TIME = 0.250;
+var UNDIM_TIME = 250; // ms
 var MOTION_THRESHOLD = 100;
 
 var ONE_SECOND = 1000; // in ms
@@ -59,7 +58,7 @@ var DisplayChangeDialog = class extends ModalDialog.ModalDialog {
                                { x_fill: true,
                                  y_fill: true });
 
-        /* Translators: this and the following message should be limited in lenght,
+        /* Translators: this and the following message should be limited in length,
            to avoid ellipsizing the labels.
         */
         this._cancelButton = this.addButton({ label: _("Revert Settings"),
@@ -115,16 +114,39 @@ var DisplayChangeDialog = class extends ModalDialog.ModalDialog {
 
 var WindowDimmer = class {
     constructor(actor) {
-        this._brightnessEffect = new Clutter.BrightnessContrastEffect();
+        this._brightnessEffect = new Clutter.BrightnessContrastEffect({
+            name: 'dim',
+            enabled: false
+        });
         actor.add_effect(this._brightnessEffect);
         this.actor = actor;
         this._enabled = true;
-        this._dimFactor = 0.0;
+        this._dimmed = false;
-        this._syncEnabled();
     }
 
     _syncEnabled() {
-        this._brightnessEffect.enabled = (this._enabled && this._dimFactor > 0);
+        this._brightnessEffect.enabled =
+            (this._enabled && (this._dimmed || this._transition != null));
+    }
+
+    get _transition() {
+        return this.actor.get_transition('dim');
+    }
+
+    _ensureTransition() {
+        if (this._transition)
+            return;
+
+        let params = {
+            propertyName: '@effects.dim.brightness',
+            progressMode: Clutter.AnimationMode.LINEAR,
+            duration: (this._dimmed ? DIM_TIME : UNDIM_TIME),
+            removeOnComplete: true
+        };
+        this.actor.add_transition('dim',
+            new Clutter.PropertyTransition(params));
+
+        this._transition.connect('completed', this._syncEnabled.bind(this));
     }
 
     setEnabled(enabled) {
@@ -132,14 +154,20 @@ var WindowDimmer = class {
         this._syncEnabled();
     }
 
-    set dimFactor(factor) {
+    setDimmed(dimmed, animate) {
-        this._dimFactor = factor;
+        this._dimmed = dimmed;
-        this._brightnessEffect.set_brightness(factor * DIM_BRIGHTNESS);
-        this._syncEnabled();
-    }
 
-    get dimFactor() {
+        let val = 127 * (1 + dimmed * DIM_BRIGHTNESS);
-        return this._dimFactor;
+        let color = Clutter.Color.new(val, val, val, 255);
+
+        if (animate) {
+            this._ensureTransition();
+            this._transition.set_to(color);
+        } else {
+            this._effect.brightness = color;
+        }
+
+        this._syncEnabled();
     }
 };
 
@@ -412,15 +440,16 @@ var TilePreview = class {
 
         this._showing = true;
         this.actor.show();
-        Tweener.addTween(this.actor,
+        this.actor.ease({
-                         { x: tileRect.x,
+            x: tileRect.x,
-                           y: tileRect.y,
+            y: tileRect.y,
-                           width: tileRect.width,
+            width: tileRect.width,
-                           height: tileRect.height,
+            height: tileRect.height,
-                           opacity: 255,
+            opacity: 255
-                           time: WINDOW_ANIMATION_TIME,
+        }, {
-                           transition: 'easeOutQuad'
+            duration: WINDOW_ANIMATION_TIME,
-                         });
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD
+        });
     }
 
     hide() {
@@ -428,12 +457,13 @@ var TilePreview = class {
             return;
 
         this._showing = false;
-        Tweener.addTween(this.actor,
+        this.actor.ease({
-                         { opacity: 0,
+            opacity: 0
-                           time: WINDOW_ANIMATION_TIME,
+        }, {
-                           transition: 'easeOutQuad',
+            duration: WINDOW_ANIMATION_TIME,
-                           onComplete: this._reset.bind(this)
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-                         });
+            onComplete: () => this._reset()
+        });
     }
 
     _reset() {
@@ -1135,15 +1165,16 @@ var WindowManager = class {
             return;
         let switchData = this._switchData;
         this._switchData = null;
-        Tweener.addTween(switchData.container,
+        switchData.container.ease({
-                         { x: 0,
+            x: 0,
-                           y: 0,
+            y: 0
-                           time: WINDOW_ANIMATION_TIME,
+        }, {
-                           transition: 'easeOutQuad',
+            time: WINDOW_ANIMATION_TIME,
-                           onComplete: this._finishWorkspaceSwitch,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-                           onCompleteScope: this,
+            onComplete: () => {
-                           onCompleteParams: [switchData],
+                this._finishWorkspaceSwitch(switchData);
-                         });
+            }
+        });
     }
 
     _actionSwitchWorkspace(action, direction) {
@@ -1313,17 +1344,18 @@ var WindowManager = class {
         this._minimizing.push(actor);
 
         if (actor.meta_window.is_monitor_sized()) {
-            Tweener.addTween(actor,
+            actor.ease({
-                         { opacity: 0,
+                opacity: 0
-                           time: MINIMIZE_WINDOW_ANIMATION_TIME,
+            }, {
-                           transition: 'easeOutQuad',
+                duration: MINIMIZE_WINDOW_ANIMATION_TIME,
-                           onComplete: this._minimizeWindowDone,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-                           onCompleteScope: this,
+                onStopped: isFinished => {
-                           onCompleteParams: [shellwm, actor],
+                    if (isFinished)
-                           onOverwrite: this._minimizeWindowOverwritten,
+                        this._minimizeWindowDone(shellwm, actor);
-                           onOverwriteScope: this,
+                    else
-                           onOverwriteParams: [shellwm, actor]
+                        this._minimizeWindowOverwritten(shellwm, actor);
-                         });
+                },
+            });
         } else {
             let xDest, yDest, xScale, yScale;
             let [success, geom] = actor.meta_window.get_icon_geometry();
@@ -1346,26 +1378,27 @@ var WindowManager = class {
                 yScale = 0;
             }
 
-            Tweener.addTween(actor,
+            actor.ease({
-                             { scale_x: xScale,
+                scale_x: xScale,
-                               scale_y: yScale,
+                scale_y: yScale,
-                               x: xDest,
+                x: xDest,
-                               y: yDest,
+                y: yDest
-                               time: MINIMIZE_WINDOW_ANIMATION_TIME,
+            }, {
-                               transition: 'easeInExpo',
+                duration: MINIMIZE_WINDOW_ANIMATION_TIME,
-                               onComplete: this._minimizeWindowDone,
+                mode: Clutter.AnimationMode.EASE_IN_EXPO,
-                               onCompleteScope: this,
+                onStopped: isFinished => {
-                               onCompleteParams: [shellwm, actor],
+                    if (isFinished)
-                               onOverwrite: this._minimizeWindowOverwritten,
+                        this._minimizeWindowDone(shellwm, actor);
-                               onOverwriteScope: this,
+                    else
-                               onOverwriteParams: [shellwm, actor]
+                        this._minimizeWindowOverwritten(shellwm, actor);
-                             });
+                }
+            });
         }
     }
 
     _minimizeWindowDone(shellwm, actor) {
         if (this._removeEffect(this._minimizing, actor)) {
-            Tweener.removeTweens(actor);
+            actor.remove_all_transitions();
             actor.set_scale(1.0, 1.0);
             actor.set_opacity(255);
             actor.set_pivot_point(0, 0);
@@ -1394,17 +1427,18 @@ var WindowManager = class {
         if (actor.meta_window.is_monitor_sized()) {
             actor.opacity = 0;
             actor.set_scale(1.0, 1.0);
-            Tweener.addTween(actor,
+            actor.ease({
-                         { opacity: 255,
+                opacity: 255
-                           time: MINIMIZE_WINDOW_ANIMATION_TIME,
+            }, {
-                           transition: 'easeOutQuad',
+                duration: MINIMIZE_WINDOW_ANIMATION_TIME,
-                           onComplete: this._unminimizeWindowDone,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-                           onCompleteScope: this,
+                onStopped: isFinished => {
-                           onCompleteParams: [shellwm, actor],
+                    if (isFinished)
-                           onOverwrite: this._unminimizeWindowOverwritten,
+                        this._unminimizeWindowDone(shellwm, actor);
-                           onOverwriteScope: this,
+                    else
-                           onOverwriteParams: [shellwm, actor]
+                        this._unminimizeWindowOverwritten(shellwm, actor);
-                         });
+                }
+            });
         } else {
             let [success, geom] = actor.meta_window.get_icon_geometry();
             if (success) {
@@ -1428,26 +1462,27 @@ var WindowManager = class {
             let [xDest, yDest] = [rect.x, rect.y];
 
             actor.show();
-            Tweener.addTween(actor,
+            actor.ease({
-                             { scale_x: 1.0,
+                scale_x: 1,
-                               scale_y: 1.0,
+                scale_y: 1,
-                               x: xDest,
+                x: xDest,
-                               y: yDest,
+                y: yDest
-                               time: MINIMIZE_WINDOW_ANIMATION_TIME,
+            }, {
-                               transition: 'easeInExpo',
+                duration: MINIMIZE_WINDOW_ANIMATION_TIME,
-                               onComplete: this._unminimizeWindowDone,
+                mode: Clutter.AnimationMode.EASE_IN_EXPO,
-                               onCompleteScope: this,
+                onStopped: isFinished => {
-                               onCompleteParams: [shellwm, actor],
+                    if (isFinished)
-                               onOverwrite: this._unminimizeWindowOverwritten,
+                        this._unminimizeWindowDone(shellwm, actor);
-                               onOverwriteScope: this,
+                    else
-                               onOverwriteParams: [shellwm, actor]
+                        this._unminimizeWindowOverwritten(shellwm, actor);
-                             });
+                }
+            });
         }
     }
 
     _unminimizeWindowDone(shellwm, actor) {
         if (this._removeEffect(this._unminimizing, actor)) {
-            Tweener.removeTweens(actor);
+            actor.remove_all_transitions();
             actor.set_scale(1.0, 1.0);
             actor.set_opacity(255);
             actor.set_pivot_point(0, 0);
@@ -1513,15 +1548,16 @@ var WindowManager = class {
         this._resizing.push(actor);
 
         // Now scale and fade out the clone
-        Tweener.addTween(actorClone,
+        actorClone.ease({
-                         { x: targetRect.x,
+            x: targetRect.x,
-                           y: targetRect.y,
+            y: targetRect.y,
-                           scale_x: scaleX,
+            scale_x: scaleX,
-                           scale_y: scaleY,
+            scale_y: scaleY,
-                           opacity: 0,
+            opacity: 0
-                           time: WINDOW_ANIMATION_TIME,
+        }, {
-                           transition: 'easeOutQuad'
+            duration: WINDOW_ANIMATION_TIME,
-                         });
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD
+        });
 
         actor.translation_x = -targetRect.x + sourceRect.x;
         actor.translation_y = -targetRect.y + sourceRect.y;
@@ -1531,20 +1567,21 @@ var WindowManager = class {
         actor.scale_y = 1 / scaleY;
 
         // Scale it to its actual new size
-        Tweener.addTween(actor,
+        actor.ease({
-                         { scale_x: 1.0,
+            scale_x: 1,
-                           scale_y: 1.0,
+            scale_y: 1,
-                           translation_x: 0,
+            translation_x: 0,
-                           translation_y: 0,
+            translation_y: 0
-                           time: WINDOW_ANIMATION_TIME,
+        }, {
-                           transition: 'easeOutQuad',
+            duration: WINDOW_ANIMATION_TIME,
-                           onComplete: this._sizeChangeWindowDone,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-                           onCompleteScope: this,
+            onStopped: isFinished => {
-                           onCompleteParams: [shellwm, actor],
+                if (isFinished)
-                           onOverwrite: this._sizeChangeWindowOverwritten,
+                    this._sizeChangeWindowDone(shellwm, actor);
-                           onOverwriteScope: this,
+                else
-                           onOverwriteParams: [shellwm, actor]
+                    this._sizeChangeWindowOverwritten(shellwm, actor);
-                         });
+            }
+        });
 
         // Now unfreeze actor updates, to get it to the new size.
         // It's important that we don't wait until the animation is completed to
@@ -1564,7 +1601,7 @@ var WindowManager = class {
 
     _sizeChangeWindowDone(shellwm, actor) {
         if (this._removeEffect(this._resizing, actor)) {
-            Tweener.removeTweens(actor);
+            actor.remove_all_transitions();
             actor.scale_x = 1.0;
             actor.scale_y = 1.0;
             actor.translation_x = 0;
@@ -1614,14 +1651,7 @@ var WindowManager = class {
         let dimmer = getWindowDimmer(actor);
         if (!dimmer)
             return;
-        if (this._shouldAnimate())
+        dimmer.setDimmed(true, this._shouldAnimate());
-            Tweener.addTween(dimmer,
-                             { dimFactor: 1.0,
-                               time: DIM_TIME,
-                               transition: 'linear'
-                             });
-        else
-            dimmer.dimFactor = 1.0;
     }
 
     _undimWindow(window) {
@@ -1631,13 +1661,7 @@ var WindowManager = class {
         let dimmer = getWindowDimmer(actor);
         if (!dimmer)
             return;
-        if (this._shouldAnimate())
+        dimmer.setDimmed(false, this._shouldAnimate());
-            Tweener.addTween(dimmer,
-                             { dimFactor: 0.0,
-                               time: UNDIM_TIME,
-                               transition: 'linear' });
-        else
-            dimmer.dimFactor = 0.0;
     }
 
     _mapWindow(shellwm, actor) {
@@ -1682,19 +1706,20 @@ var WindowManager = class {
             actor.show();
             this._mapping.push(actor);
 
-            Tweener.addTween(actor,
+            actor.ease({
-                             { opacity: 255,
+                opacity: 255,
-                               scale_x: 1,
+                scale_x: 1,
-                               scale_y: 1,
+                scale_y: 1
-                               time: SHOW_WINDOW_ANIMATION_TIME,
+            }, {
-                               transition: 'easeOutExpo',
+                duration: SHOW_WINDOW_ANIMATION_TIME,
-                               onComplete: this._mapWindowDone,
+                mode: Clutter.AnimationMode.EASE_OUT_EXPO,
-                               onCompleteScope: this,
+                onStopped: isFinished => {
-                               onCompleteParams: [shellwm, actor],
+                    if (isFinished)
-                               onOverwrite: this._mapWindowOverwrite,
+                        this._mapWindowDone(shellwm, actor);
-                               onOverwriteScope: this,
+                    else
-                               onOverwriteParams: [shellwm, actor]
+                        this._mapWindowOverwrite(shellwm, actor);
-                             });
+                }
+            });
             break;
         case Meta.WindowType.MODAL_DIALOG:
         case Meta.WindowType.DIALOG:
@@ -1704,19 +1729,20 @@ var WindowManager = class {
             actor.show();
             this._mapping.push(actor);
 
-            Tweener.addTween(actor,
+            actor.ease({
-                             { opacity: 255,
+                opacity: 255,
-                               scale_x: 1,
+                scale_x: 1,
-                               scale_y: 1,
+                scale_y: 1
-                               time: DIALOG_SHOW_WINDOW_ANIMATION_TIME,
+            }, {
-                               transition: 'easeOutQuad',
+                duration: DIALOG_SHOW_WINDOW_ANIMATION_TIME,
-                               onComplete: this._mapWindowDone,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-                               onCompleteScope: this,
+                onStopped: isFinished => {
-                               onCompleteParams: [shellwm, actor],
+                    if (isFinished)
-                               onOverwrite: this._mapWindowOverwrite,
+                        this._mapWindowDone(shellwm, actor);
-                               onOverwriteScope: this,
+                    else
-                               onOverwriteParams: [shellwm, actor]
+                        this._mapWindowOverwrite(shellwm, actor);
-                             });
+                }
+            });
             break;
         default:
             shellwm.completed_map(actor);
@@ -1726,7 +1752,7 @@ var WindowManager = class {
 
     _mapWindowDone(shellwm, actor) {
         if (this._removeEffect(this._mapping, actor)) {
-            Tweener.removeTweens(actor);
+            actor.remove_all_transitions();
             actor.opacity = 255;
             actor.set_pivot_point(0, 0);
             actor.scale_y = 1;
@@ -1770,19 +1796,17 @@ var WindowManager = class {
             actor.set_pivot_point(0.5, 0.5);
             this._destroying.push(actor);
 
-            Tweener.addTween(actor,
+            actor.ease({
-                             { opacity: 0,
+                opacity: 0,
-                               scale_x: 0.8,
+                scale_x: 0.8,
-                               scale_y: 0.8,
+                scale_y: 0.8
-                               time: DESTROY_WINDOW_ANIMATION_TIME,
+            }, {
-                               transition: 'easeOutQuad',
+                duration: DESTROY_WINDOW_ANIMATION_TIME,
-                               onComplete: this._destroyWindowDone,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-                               onCompleteScope: this,
+                onStopped: () => {
-                               onCompleteParams: [shellwm, actor],
+                    this._destroyWindowDone(shellwm, actor);
-                               onOverwrite: this._destroyWindowDone,
+                }
-                               onOverwriteScope: this,
+            });
-                               onOverwriteParams: [shellwm, actor]
-                             });
             break;
         case Meta.WindowType.MODAL_DIALOG:
         case Meta.WindowType.DIALOG:
@@ -1792,22 +1816,20 @@ var WindowManager = class {
             if (window.is_attached_dialog()) {
                 let parent = window.get_transient_for();
                 actor._parentDestroyId = parent.connect('unmanaged', () => {
-                    Tweener.removeTweens(actor);
+                    actor.remove_all_transitions();
                     this._destroyWindowDone(shellwm, actor);
                 });
             }
 
-            Tweener.addTween(actor,
+            actor.ease({
-                             { scale_y: 0,
+                scale_y: 0
-                               time: DIALOG_DESTROY_WINDOW_ANIMATION_TIME,
+            }, {
-                               transition: 'easeOutQuad',
+                duration: DIALOG_DESTROY_WINDOW_ANIMATION_TIME,
-                               onComplete: this._destroyWindowDone,
+                mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-                               onCompleteScope: this,
+                onStopped: () => {
-                               onCompleteParams: [shellwm, actor],
+                    this._destroyWindowDone(shellwm, actor);
-                               onOverwrite: this._destroyWindowDone,
+                }
-                               onOverwriteScope: this,
+            });
-                               onOverwriteParams: [shellwm, actor]
-                             });
             break;
         default:
             shellwm.completed_destroy(actor);
@@ -2045,15 +2067,16 @@ var WindowManager = class {
         xDest = -xDest;
         yDest = -yDest;
 
-        Tweener.addTween(this._switchData.container,
+        this._switchData.container.ease({
-                         { x: xDest,
+            x: xDest,
-                           y: yDest,
+            y: yDest
-                           time: WINDOW_ANIMATION_TIME,
+        }, {
-                           transition: 'easeOutQuad',
+            time: WINDOW_ANIMATION_TIME,
-                           onComplete: this._switchWorkspaceDone,
+            mode: Clutter.AnimationMode.EASE_OUT_QUAD,
-                           onCompleteScope: this,
+            onComplete: () => {
-                           onCompleteParams: [shellwm]
+                this._switchWorkspaceDone(shellwm);
-                         });
+            }
+        });
     }
 
     _switchWorkspaceDone(shellwm) {

js/ui/workspace.js

@@ -813,7 +813,7 @@ var LayoutStrategy = class {
     }
 
     // Computes and returns an individual scaling factor for @window,
-    // to be applied in addition to the overal layout scale.
+    // to be applied in addition to the overall layout scale.
     _computeWindowScale(window) {
         // Since we align windows next to each other, the height of the
         // thumbnails is much more important to preserve than the width of
@@ -1266,7 +1266,7 @@ var Workspace = class {
         }
 
         // We will reposition windows anyway when enter again overview or when ending the windows
-        // animations whith fade animation.
+        // animations with fade animation.
         // In this way we avoid unwanted animations of windows repositioning while
         // animating overview.
         if (this.leavingOverview || this._animatingWindowsFade)
@@ -1886,10 +1886,10 @@ var Workspace = class {
             // Win win -- better scale and better space
             return true;
         } else if (newLayout.scale > oldLayout.scale && newLayout.space <= oldLayout.space) {
-            // Keep new layout only if scale gain outweights aspect space loss
+            // Keep new layout only if scale gain outweighs aspect space loss
             return scalePower > spacePower;
         } else if (newLayout.scale <= oldLayout.scale && newLayout.space > oldLayout.space) {
-            // Keep new layout only if aspect space gain outweights scale loss
+            // Keep new layout only if aspect space gain outweighs scale loss
             return spacePower > scalePower;
         } else {
             // Lose -- worse scale and space

js/ui/workspacesView.js

@@ -84,7 +84,7 @@ var WorkspacesView = class extends WorkspacesViewBase {
         this._animating = false; // tweening
         this._scrolling = false; // swipe-scrolling
         this._gestureActive = false; // touch(pad) gestures
-        this._animatingScroll = false; // programatically updating the adjustment
+        this._animatingScroll = false; // programmatically updating the adjustment
 
         let activeWorkspaceIndex = workspaceManager.get_active_workspace_index();
         this.scrollAdjustment = new St.Adjustment({ value: activeWorkspaceIndex,

src/shell-keyring-prompt.c

@@ -117,7 +117,7 @@ remove_mnemonics (const GValue *value)
   label = g_value_get_string (value);
   g_return_val_if_fail (label != NULL, NULL);
 
-  /* Stripped label will have the original label lenght at most */
+  /* Stripped label will have the original label length at most */
   stripped_label = temp = g_new (gchar, strlen(label) + 1);
   g_assert (stripped_label != NULL);