[gnome-shell] Port Lightbox to CSS and use it in runDialog

[Maxim Ermilov <mermilov src gnome org>]

commit 72cb4bf346035fb65054278677abab47523cbe34
Author: Maxim Ermilov <zaspire rambler ru>
Date:   Fri Feb 26 23:13:11 2010 +0300

    Port Lightbox to CSS and use it in runDialog
    
    Make Lightbox stylable and add a common style. Use it in runDialog.
    https://bugzilla.gnome.org/show_bug.cgi?id=604978

 data/theme/gnome-shell.css |    8 ++++----
 js/ui/lightbox.js          |   16 +++++-----------
 js/ui/runDialog.js         |   10 ++++++----
 3 files changed, 15 insertions(+), 19 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 31c75ff..e038640 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -773,13 +773,13 @@ StTooltip {
     color: white;
 }
 
-.run-dialog-box {
-    background: rgba(0,0,0,0.3);
-}
-
 .run-dialog {
     padding: 8px;
     border: 1px solid rgba(128,128,128,0.40);
     border-radius: 4px;
     background: rgba(0,0,0,0.8);
 }
+
+.lightbox {
+    background-color: rgba(0, 0, 0, 0.27);
+}
diff --git a/js/ui/lightbox.js b/js/ui/lightbox.js
index 9434c79..e2c1a98 100644
--- a/js/ui/lightbox.js
+++ b/js/ui/lightbox.js
@@ -2,12 +2,7 @@
 
 const Clutter = imports.gi.Clutter;
 const Lang = imports.lang;
-
-const Main = imports.ui.main;
-const Tweener = imports.ui.tweener;
-
-const SHADE_COLOR = new Clutter.Color();
-SHADE_COLOR.from_pixel(0x00000044);
+const St = imports.gi.St;
 
 /**
  * Lightbox:
@@ -38,11 +33,10 @@ Lightbox.prototype = {
     _init : function(container, inhibitEvents, width, height) {
         this._container = container;
         this._children = container.get_children();
-        this.actor = new Clutter.Rectangle({ color: SHADE_COLOR,
-                                             x: 0,
-                                             y: 0,
-                                             border_width: 0,
-                                             reactive: inhibitEvents });
+        this.actor = new St.Bin({ x: 0,
+                                  y: 0,
+                                  style_class: 'lightbox',
+                                  reactive: inhibitEvents });
 
         container.add_actor(this.actor);
         this.actor.raise_top();
diff --git a/js/ui/runDialog.js b/js/ui/runDialog.js
index e33a509..160542b 100644
--- a/js/ui/runDialog.js
+++ b/js/ui/runDialog.js
@@ -13,6 +13,7 @@ const St = imports.gi.St;
 const Gettext = imports.gettext.domain('gnome-shell');
 const _ = Gettext.gettext;
 
+const Lightbox = imports.ui.lightbox;
 const Main = imports.ui.main;
 
 const MAX_FILE_DELETED_BEFORE_INVALID = 10;
@@ -203,12 +204,13 @@ RunDialog.prototype = {
                                           x: 0, y: 0 });
         global.stage.add_actor(this._group);
 
-        this._box = new St.Bin({ style_class: 'run-dialog-box',
-                                 x_align: St.Align.MIDDLE,
-                                 y_align: St.Align.MIDDLE,
-                                 reactive: true });
+        let lightbox = new Lightbox.Lightbox(this._group, true);
+
+        this._box = new St.Bin({ x_align: St.Align.MIDDLE,
+                                 y_align: St.Align.MIDDLE });
 
         this._group.add_actor(this._box);
+        lightbox.highlight(this._box);
 
         let dialogBox = new St.BoxLayout({ style_class: 'run-dialog', vertical: true });