runDialog: subclass from modalDialog

Now that we have a modalDialog base class in gnome-shell,
it makes sense to use it for the run dialog.

Note, the run dialog doesn't currently have buttons, so
it isn't exercising all the API of the base class.

https://bugzilla.gnome.org/show_bug.cgi?id=637187

data/theme/gnome-shell.css

@@ -1153,10 +1153,12 @@ StTooltip StLabel {
 }
 
 .run-dialog {
-    padding: 8px;
+    border-radius: 16px;
-    border: 1px solid rgba(128,128,128,0.40);
+
-    border-radius: 4px;
+    padding-right: 21px;
-    background: rgba(0,0,0,0.8);
+    padding-left: 21px;
+    padding-bottom: 15px;
+    padding-top: 15px;
 }
 
 .lightbox {

js/ui/runDialog.js

@@ -11,8 +11,8 @@ const Signals = imports.signals;
 const Gettext = imports.gettext.domain('gnome-shell');
 const _ = Gettext.gettext;
 
-const Lightbox = imports.ui.lightbox;
 const Main = imports.ui.main;
+const ModalDialog = imports.ui.modalDialog;
 const Tweener = imports.ui.tweener;
 const Util = imports.misc.util;
 
@@ -21,8 +21,6 @@ const MAX_FILE_DELETED_BEFORE_INVALID = 10;
 const HISTORY_KEY = 'command-history';
 const HISTORY_LIMIT = 512;
 
-const DIALOG_FADE_TIME = 0.1;
-
 function CommandCompleter() {
     this._init();
 }
@@ -176,8 +174,9 @@ function RunDialog() {
 }
 
 RunDialog.prototype = {
+__proto__: ModalDialog.ModalDialog.prototype,
     _init : function() {
-        this._isOpen = false;
+        ModalDialog.ModalDialog.prototype._init.call(this, { styleClass: 'run-dialog' });
 
         global.settings.connect('changed::development-tools', Lang.bind(this, function () {
             this._enableInternalCommands = global.settings.get_boolean('development-tools');
@@ -216,38 +215,24 @@ RunDialog.prototype = {
                                    })
                                  };
 
-        // All actors are inside _group. We create it initially
-        // hidden then show it in show()
-        this._group = new Clutter.Group({ visible: false,
-                                          x: 0, y: 0 });
-        Main.uiGroup.add_actor(this._group);
-
-        this._lightbox = new Lightbox.Lightbox(this._group,
-                                               { inhibitEvents: true });
-
-        this._box = new St.Bin({ x_align: St.Align.MIDDLE,
-                                 y_align: St.Align.MIDDLE });
-
-        this._group.add_actor(this._box);
-        this._lightbox.highlight(this._box);
-
-        let dialogBox = new St.BoxLayout({ style_class: 'run-dialog', vertical: true });
-
-        this._box.set_child(dialogBox);
 
         let label = new St.Label({ style_class: 'run-dialog-label',
                                    text: _("Please enter a command:") });
 
-        dialogBox.add(label, { expand: true, y_fill: false });
+        this.contentLayout.add(label, { y_align: St.Align.START });
 
         let entry = new St.Entry({ style_class: 'run-dialog-entry' });
 
         this._entryText = entry.clutter_text;
-        dialogBox.add(entry, { expand: true });
+        this.contentLayout.add(entry, { y_align: St.Align.START });
+        this.connect('opened',
+                     Lang.bind(this, function() {
+                         this._entryText.grab_key_focus();
+                     }));
 
         this._errorBox = new St.BoxLayout();
 
-        dialogBox.add(this._errorBox, { expand: true });
+        this.contentLayout.add(this._errorBox, { expand: true });
 
         let errorIcon = new St.Button({ style_class: 'run-dialog-error-icon' });
 
@@ -281,10 +266,10 @@ RunDialog.prototype = {
                 else
                     this._run(o.get_text(), false);
                 if (!this._commandError)
-                    this.close();
+                    this.close(global.get_current_time());
             }
             if (symbol == Clutter.Escape) {
-                this.close();
+                this.close(global.get_current_time());
                 return true;
             }
             if (symbol == Clutter.slash) {
@@ -399,53 +384,14 @@ RunDialog.prototype = {
             this._entryText.set_text('');
     },
 
-    open : function() {
+    open: function() {
-        if (this._isOpen) // Already shown
-            return;
-
-        if (!Main.pushModal(this._group))
-            return;
-
-        // Position the dialog on the current monitor
-        let monitor = global.get_focus_monitor();
-
         this._historyIndex = this._history.length;
-
+        this._errorBox.hide();
-        this._box.set_position(monitor.x, monitor.y);
+        this._entryText.set_text('');
-        this._box.set_size(monitor.width, monitor.height);
-
-        this._isOpen = true;
-        this._lightbox.show();
-        this._group.opacity = 0;
-        this._group.show();
-        Tweener.addTween(this._group,
-                         { opacity: 255,
-                           time: DIALOG_FADE_TIME,
-                           transition: 'easeOutQuad'
-                         });
-
-        global.stage.set_key_focus(this._entryText);
-    },
-
-    close : function() {
-        if (!this._isOpen)
-            return;
-
-        this._isOpen = false;
         this._commandError = false;
 
-        Main.popModal(this._group);
+        ModalDialog.ModalDialog.prototype.open.call(this);
+    },
 
-        Tweener.addTween(this._group,
-                         { opacity: 0,
-                           time: DIALOG_FADE_TIME,
-                           transition: 'easeOutQuad',
-                           onComplete: Lang.bind(this, function() {
-                               this._errorBox.hide();
-                               this._group.hide();
-                               this._entryText.set_text('');
-                           })
-                         });
-    }
 };
 Signals.addSignalMethods(RunDialog.prototype);