Port Lightbox and Flashspot to GObject (#13586)

The port requires renaming the show/hide methods of the Lightbox object.
Update several other things while at it. Use connectObject, clean up some
clutter deprecations, and use better comparison operators.

Lightbox isn't really used in any spices, so this shouldn't have any real
effect on them.

Author: JosephMcc

js/ui/flashspot.js

@@ -1,14 +1,16 @@
 // -*- mode: js; js-indent-level: 4; indent-tabs-mode: nil -*-
 
 const Clutter = imports.gi.Clutter;
+const GObject = imports.gi.GObject;
 const Lightbox = imports.ui.lightbox;
 const Main = imports.ui.main;
 
 const FLASHSPOT_ANIMATION_TIME = 200; // seconds
 
-var Flashspot = class Flashspot extends Lightbox.Lightbox {
-    constructor(area) {
-        super(
+var Flashspot = GObject.registerClass(
+class Flashspot extends Lightbox.Lightbox {
+    _init(area) {
+        super._init(
             Main.uiGroup,
             {
                 inhibitEvents: true,
@@ -17,20 +19,20 @@ var Flashspot = class Flashspot extends Lightbox.Lightbox {
             }
         );
 
-        this.actor.style_class = 'flashspot';
-        this.actor.set_position(area.x, area.y);
+        this.style_class = 'flashspot';
+        this.set_position(area.x, area.y);
         if (area.time)
-            this.animation_time = area.time;
+            this.animationTime = area.time;
         else
-            this.animation_time = FLASHSPOT_ANIMATION_TIME;
+            this.animationTime = FLASHSPOT_ANIMATION_TIME;
    }
 
    fire() {
-        this.actor.show();
-        this.actor.opacity = 255;
-        this.actor.ease({
+        this.show();
+        this.opacity = 255;
+        this.ease({
             opacity: 0,
-            duration: this.animation_time,
+            duration: this.animationTime,
             animationRequired: true,
             mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             onComplete: () => this._onFireShowComplete()
@@ -40,5 +42,5 @@ var Flashspot = class Flashspot extends Lightbox.Lightbox {
    _onFireShowComplete () {
         this.destroy();
    }
-};
+});
 

js/ui/lightbox.js

@@ -110,116 +110,119 @@ var RadialShaderEffect = GObject.registerClass({
  * @container and will track any changes in its size. You can override
  * this by passing an explicit width and height in @params.
  */
-var Lightbox = class Lightbox {
-    constructor(container, params) {
-        params = Params.parse(params, { inhibitEvents: false,
-                                        width: null,
-                                        height: null,
-                                        fadeTime: null,
-                                        radialEffect: false,
-                                      });
+var Lightbox = GObject.registerClass(
+class Lightbox extends St.Bin {
+    _init(container, params) {
+        params = Params.parse(params, {
+            inhibitEvents: false,
+            width: null,
+            height: null,
+            fadeTime: null,
+            radialEffect: false,
+        });
+
+        super._init({
+            reactive: params.inhibitEvents,
+            width: params.width,
+            height: params.height,
+            visible: false,
+        });
 
         this._container = container;
         this._children = container.get_children();
         this._fadeTime = params.fadeTime;
         this._radialEffect = Clutter.feature_available(Clutter.FeatureFlags.SHADERS_GLSL) && params.radialEffect;
 
-        this.actor = new St.Bin({ reactive: params.inhibitEvents });
-
         if (this._radialEffect)
-            this.actor.add_effect(new RadialShaderEffect({ name: 'radial' }));
+            this.add_effect(new RadialShaderEffect({ name: 'radial' }));
         else
-            this.actor.set({ opacity: 0, style_class: 'lightbox', important: true });
+            this.set({ opacity: 0, style_class: 'lightbox', important: true });
 
-        container.add_actor(this.actor);
-        this.actor.raise_top();
-        this.actor.hide();
+        container.add_child(this);
+        container.set_child_above_sibling(this, null);
 
-        this.actor.connect('destroy', this._onDestroy.bind(this));
+        this.connect('destroy', this._onDestroy.bind(this));
 
-        if (params.width && params.height) {
-            this.actor.width = params.width;
-            this.actor.height = params.height;
-        } else {
-            this.actor.width = container.width;
-            this.actor.height = container.height;
-            let constraint = new Clutter.BindConstraint({ source: container,
-                                                          coordinate: Clutter.BindCoordinate.ALL });
-            this.actor.add_constraint(constraint);
+        if (!params.width || !params.height) {
+            this.add_constraint(new Clutter.BindConstraint({
+                source: container,
+                coordinate: Clutter.BindCoordinate.ALL
+            }));
         }
 
-        this._actorAddedSignalId = container.connect('actor-added', this._actorAdded.bind(this));
-        this._actorRemovedSignalId = container.connect('actor-removed', this._actorRemoved.bind(this));
+        container.connectObject(
+            'actor-added', this._actorAdded.bind(this),
+            'actor-removed', this._actorRemoved.bind(this), this);
 
         this._highlighted = null;
     }
 
     _actorAdded(container, newChild) {
-        let children = this._container.get_children();
-        let myIndex = children.indexOf(this.actor);
-        let newChildIndex = children.indexOf(newChild);
+        const children = this._container.get_children();
+        const myIndex = children.indexOf(this);
+        const newChildIndex = children.indexOf(newChild);
 
         if (newChildIndex > myIndex) {
             // The child was added above the shade (presumably it was
             // made the new top-most child). Move it below the shade,
             // and add it to this._children as the new topmost actor.
-            newChild.lower(this.actor);
+            this._container.set_child_above_sibling(this, newChild);
             this._children.push(newChild);
-        } else if (newChildIndex == 0) {
+        } else if (newChildIndex === 0) {
             // Bottom of stack
             this._children.unshift(newChild);
         } else {
             // Somewhere else; insert it into the correct spot
-            let prevChild = this._children.indexOf(children[newChildIndex - 1]);
-            if (prevChild != -1) // paranoia
+            const prevChild = this._children.indexOf(children[newChildIndex - 1]);
+            if (prevChild !== -1) // paranoia
                 this._children.splice(prevChild + 1, 0, newChild);
         }
     }
 
-    show() {
-        this.actor.remove_all_transitions();
+    lightOn() {
+        this.remove_all_transitions();
 
         if (this._radialEffect) {
-            this.actor.ease_property(
+            this.ease_property(
                 '@effects.radial.brightness', VIGNETTE_BRIGHTNESS, {
                     duration: this._fadeTime / 1000,
                     mode: Clutter.AnimationMode.EASE_OUT_QUAD
                 });
-            this.actor.ease_property(
+            this.ease_property(
                 '@effects.radial.sharpness', VIGNETTE_SHARPNESS, {
                     duration: this._fadeTime / 1000,
                     mode: Clutter.AnimationMode.EASE_OUT_QUAD
                 });
         } else {
-            this.actor.opacity = 0;
-            this.actor.ease({
+            this.opacity = 0;
+            this.ease({
                 opacity: 255,
                 duration: this._fadeTime / 1000,
                 mode: Clutter.AnimationMode.EASE_OUT_QUAD,
             });
         }
-        this.actor.show();
+        this.show();
     }
 
-    hide() {
-        this.actor.remove_all_transitions();
+    lightOff() {
+        this.remove_all_transitions();
 
-        let onComplete = () => this.actor.hide();
+        const onComplete = () => this.hide();
 
         if (this._radialEffect) {
-            this.actor.ease_property(
+            this.ease_property(
                 '@effects.radial.brightness', 1.0, {
                     duration: this._fadeTime / 1000,
                     mode: Clutter.AnimationMode.EASE_OUT_QUAD
                 });
-            this.actor.ease_property(
+            this.ease_property(
                 '@effects.radial.sharpness', 0.0, {
                     duration: this._fadeTime / 1000,
                     mode: Clutter.AnimationMode.EASE_OUT_QUAD,
                     onComplete
                 });
         } else {
-            this.actor.ease({
+            this.ease({
                 opacity: 0,
                 duration: this._fadeTime / 1000,
                 mode: Clutter.AnimationMode.EASE_OUT_QUAD,
@@ -229,11 +232,11 @@ var Lightbox = class Lightbox {
     }
 
     _actorRemoved(container, child) {
-        let index = this._children.indexOf(child);
-        if (index != -1) // paranoia
+        const index = this._children.indexOf(child);
+        if (index !== -1) // paranoia
             this._children.splice(index, 1);
 
-        if (child == this._highlighted)
+        if (child === this._highlighted)
             this._highlighted = null;
     }
 
@@ -246,7 +249,7 @@ var Lightbox = class Lightbox {
      * argument, all actors will be unhighlighted.
      */
     highlight(window) {
-        if (this._highlighted == window)
+        if (this._highlighted === window)
             return;
 
         // Walk this._children raising and lowering actors as needed.
@@ -255,38 +258,26 @@ var Lightbox = class Lightbox {
         // case we may need to indicate some *other* actor as the new
         // sibling of the to-be-lowered one.
 
-        let below = this.actor;
+        let below = this;
         for (let i = this._children.length - 1; i >= 0; i--) {
-            if (this._children[i] == window)
-                this._children[i].raise_top();
-            else if (this._children[i] == this._highlighted)
-                this._children[i].lower(below);
+            if (this._children[i] === window)
+                this._container.set_child_above_sibling(this._children[i], null);
+            else if (this._children[i] === this._highlighted)
+                this._container.set_child_below_sibling(this._children[i], below);
             else
                 below = this._children[i];
         }
 
         this._highlighted = window;
     }
 
-    /**
-     * destroy:
-     *
-     * Destroys the lightbox.
-     */
-    destroy() {
-        this.actor.destroy();
-    }
-
     /**
      * _onDestroy:
      *
      * This is called when the lightbox' actor is destroyed, either
      * by destroying its container or by explicitly calling this.destroy().
      */
     _onDestroy() {
-        this._container.disconnect(this._actorAddedSignalId);
-        this._container.disconnect(this._actorRemovedSignalId);
-
         this.highlight(null);
     }
-};
+});

js/ui/modalDialog.js

@@ -197,7 +197,7 @@ var ModalDialog = GObject.registerClass({
 
         this.dialogLayout.opacity = 255;
         if (this._lightbox)
-            this._lightbox.show();
+            this._lightbox.lightOn();
         this.opacity = 0;
         this.show();
         this.ease({