[gnome-shell/nbtk-introduction] Port LookingGlass console to NBTK



commit 661100abe8304947f915df33f816f88dc9b584bf
Author: Owen W. Taylor <otaylor fishsoup net>
Date:   Thu Sep 10 01:38:13 2009 -0400

    Port LookingGlass console to NBTK
    
    * Style aspects like colors and fonts are moved into gnome-shell.css.
    * Scrolling is adding using NbtkScrollView.
    
    Based on a patch from Colin Walters
    https://bugzilla.gnome.org/show_bug.cgi?id=591245

 data/theme/gnome-shell.css |   36 +++++++++
 js/ui/lookingGlass.js      |  173 +++++++++++++++++---------------------------
 2 files changed, 104 insertions(+), 105 deletions(-)
---
diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index c053256..635a22e 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -60,3 +60,39 @@ NbtkScrollBar NbtkButton#vhandle:hover
 {
   border-image: url("scroll-vhandle.png") 5;
 }
+
+/* LookingGlass */
+
+#LookingGlassDialog
+{
+  background-color: rgba(0,0,0,0.85);
+  spacing: 4px;
+  padding: 4px;
+  border: 1px solid rgba(0,0,172,0.85);
+  border-radius: 4px;
+  font-family: Monospace;
+
+  color: #88ff66;
+}
+
+#LookingGlassDialog > #Toolbar
+{
+  border: 1px solid grey;
+  border-radius: 4px;
+}
+
+#LookingGlassDialog NbtkLabel
+{
+  color: #88ff66;
+}
+
+#LookingGlassDialog NbtkEntry
+{
+  color: #88ff66;
+}
+
+#LookingGlassDialog NbtkBoxLayout#EvalBox
+{
+  padding: 4px;
+  spacing: 4px;
+}
diff --git a/js/ui/lookingGlass.js b/js/ui/lookingGlass.js
index 8641782..487faaf 100644
--- a/js/ui/lookingGlass.js
+++ b/js/ui/lookingGlass.js
@@ -4,6 +4,7 @@ const Big = imports.gi.Big;
 const Clutter = imports.gi.Clutter;
 const Gio = imports.gi.Gio;
 const Pango = imports.gi.Pango;
+const Nbtk = imports.gi.Nbtk;
 const Shell = imports.gi.Shell;
 const Signals = imports.signals;
 const Lang = imports.lang;
@@ -12,18 +13,7 @@ const Mainloop = imports.mainloop;
 const Tweener = imports.ui.tweener;
 const Main = imports.ui.main;
 
-const LG_BORDER_COLOR = new Clutter.Color();
-LG_BORDER_COLOR.from_pixel(0x0000aca0);
-const LG_BACKGROUND_COLOR = new Clutter.Color();
-LG_BACKGROUND_COLOR.from_pixel(0x000000d5);
-const GREY = new Clutter.Color();
-GREY.from_pixel(0xAFAFAFFF);
-const MATRIX_GREEN = new Clutter.Color();
-MATRIX_GREEN.from_pixel(0x88ff66ff);
-// FIXME pull from GConf
-const MATRIX_FONT = 'Monospace 10';
-
-                    /* Imports...feel free to add here as needed */
+/* Imports...feel free to add here as needed */
 var commandHeader = "const Clutter = imports.gi.Clutter; " +
                     "const GLib = imports.gi.GLib; " +
                     "const Gtk = imports.gi.Gtk; " +
@@ -47,7 +37,7 @@ function Notebook() {
 
 Notebook.prototype = {
     _init: function() {
-        this.actor = new Big.Box();
+        this.actor = new Nbtk.BoxLayout({ vertical: true });
 
         this.tabControls = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
                                          spacing: 4, padding: 2 });
@@ -58,21 +48,24 @@ Notebook.prototype = {
 
     appendPage: function(name, child) {
         let labelOuterBox = new Big.Box({ padding: 2 });
-        let labelBox = new Big.Box({ padding: 2, border_color: MATRIX_GREEN,
-                                     reactive: true });
+        let labelBox = new Nbtk.BoxLayout({ reactive: true });
         labelOuterBox.append(labelBox, Big.BoxPackFlags.NONE);
-        let label = new Clutter.Text({ color: MATRIX_GREEN,
-                                       font_name: MATRIX_FONT,
-                                       text: name });
+        let label = new Nbtk.Label({ text: name });
         labelBox.connect('button-press-event', Lang.bind(this, function () {
             this.selectChild(child);
             return true;
         }));
-        labelBox.append(label, Big.BoxPackFlags.EXPAND);
-        this._tabs.push([child, labelBox]);
-        child.hide();
-        this.actor.append(child, Big.BoxPackFlags.EXPAND);
+        labelBox.add(label, { expand: true });
         this.tabControls.append(labelOuterBox, Big.BoxPackFlags.NONE);
+
+        let scrollview = new Nbtk.ScrollView({ x_fill: true, y_fill: true });
+        scrollview.get_hscroll_bar().hide();
+        scrollview.add_actor(child);
+
+        this._tabs.push([child, labelBox, scrollview]);
+        scrollview.hide();
+        this.actor.add(scrollview, { expand: true });
+
         if (this._selectedIndex == -1)
             this.selectIndex(0);
     },
@@ -80,10 +73,10 @@ Notebook.prototype = {
     _unselect: function() {
         if (this._selectedIndex < 0)
             return;
-        let [child, labelBox] = this._tabs[this._selectedIndex];
+        let [child, labelBox, scrollview] = this._tabs[this._selectedIndex];
         labelBox.padding = 2;
         labelBox.border = 0;
-        child.hide();
+        scrollview.hide();
         this._selectedIndex = -1;
     },
 
@@ -95,10 +88,10 @@ Notebook.prototype = {
             this.emit('selection', null);
             return;
         }
-        let [child, labelBox] = this._tabs[index];
+        let [child, labelBox, scrollview] = this._tabs[index];
         labelBox.padding = 1;
         labelBox.border = 1;
-        child.show();
+        scrollview.show();
         this._selectedIndex = index;
         this.emit('selection', child);
     },
@@ -108,7 +101,7 @@ Notebook.prototype = {
             this.selectIndex(-1);
         else {
             for (let i = 0; i < this._tabs.length; i++) {
-                let [tabChild, labelBox] = this._tabs[i];
+                let [tabChild, labelBox, scrollview] = this._tabs[i];
                 if (tabChild == child) {
                     this.selectIndex(i);
                     return;
@@ -130,20 +123,19 @@ Result.prototype = {
 
         this.actor = new Big.Box();
 
-        let cmdTxt = new Clutter.Text({ color: MATRIX_GREEN,
-                                        font_name: MATRIX_FONT,
-                                        ellipsize: Pango.EllipsizeMode.END,
-                                        text: command });
+        let cmdTxt = new Nbtk.Label({ text: command });
+        cmdTxt.ellipsize = Pango.EllipsizeMode.END;
+
         this.actor.append(cmdTxt, Big.BoxPackFlags.NONE);
-        let resultTxt = new Clutter.Text({ color: MATRIX_GREEN,
-                                           font_name: MATRIX_FONT,
-                                           ellipsize: Pango.EllipsizeMode.END,
-                                           text: "r(" + index + ") = " + o });
+        let resultTxt = new Nbtk.Label({ text: "r(" + index + ") = " + o });
+        resultTxt.ellipsize = Pango.EllipsizeMode.END;
+
         this.actor.append(resultTxt, Big.BoxPackFlags.NONE);
-        let line = new Big.Box({ border_color: GREY,
-                                 border_bottom: 1,
-                                 height: 8 });
-        this.actor.append(line, Big.BoxPackFlags.NONE);
+        let line = new Clutter.Rectangle({ name: "Separator",
+                                           height: 1 });
+        let padBin = new Nbtk.Bin({ name: "Separator", x_fill: true, y_fill: true });
+        padBin.add_actor(line);
+        this.actor.append(padBin, Big.BoxPackFlags.NONE);
     }
 }
 
@@ -158,17 +150,14 @@ ActorHierarchy.prototype = {
 
         this._parentList = [];
 
-        this.actor = new Big.Box({ spacing: 4,
-                                   border: 1,
-                                   padding: 4,
-                                   border_color: GREY });
+        this.actor = new Nbtk.BoxLayout({ name: "ActorHierarchy", vertical: true });
     },
 
     setTarget: function(actor) {
         this._previousTarget = this._target;
         this.target = actor;
 
-        this.actor.remove_all();
+        this.actor.get_children().forEach(function (child) { child.destroy(); });
 
         if (!(actor instanceof Clutter.Actor))
             return;
@@ -181,11 +170,9 @@ ActorHierarchy.prototype = {
         while ((parent = parent.get_parent()) != null) {
             this._parentList.push(parent);
 
-            let link = new Clutter.Text({ color: MATRIX_GREEN,
-                                          font_name: MATRIX_FONT,
-                                          reactive: true,
-                                          text: "" + parent });
-            this.actor.append(link, Big.BoxPackFlags.IF_FITS);
+            let link = new Nbtk.Label({ reactive: true,
+                                        text: "" + parent });
+            this.actor.add_actor(link);
             let parentTarget = parent;
             link.connect('button-press-event', Lang.bind(this, function () {
                 this._selectByActor(parentTarget);
@@ -214,16 +201,13 @@ PropertyInspector.prototype = {
 
         this._parentList = [];
 
-        this.actor = new Big.Box({ spacing: 4,
-                                   border: 1,
-                                   padding: 4,
-                                   border_color: GREY });
+        this.actor = new Nbtk.BoxLayout({ name: "PropertyInspector", vertical: true });
     },
 
     setTarget: function(actor) {
         this.target = actor;
 
-        this.actor.remove_all();
+        this.actor.get_children().forEach(function (child) { child.destroy(); });
 
         for (let propName in actor) {
             let valueStr;
@@ -233,11 +217,9 @@ PropertyInspector.prototype = {
                 valueStr = '<error>';
             }
             let propText = propName + ": " + valueStr;
-            let propDisplay = new Clutter.Text({ color: MATRIX_GREEN,
-                                                 font_name: MATRIX_FONT,
-                                                 reactive: true,
-                                                 text: propText });
-            this.actor.append(propDisplay, Big.BoxPackFlags.IF_FITS);
+            let propDisplay = new Nbtk.Label({ reactive: true,
+                                               text: propText });
+            this.actor.add_actor(propDisplay);
         }
     }
 }
@@ -249,20 +231,16 @@ function Inspector() {
 Inspector.prototype = {
     _init: function() {
         let width = 150;
-        let eventHandler = new Big.Box({ background_color: LG_BACKGROUND_COLOR,
-                                         border: 1,
-                                         border_color: LG_BORDER_COLOR,
-                                         corner_radius: 4,
-                                         y: global.stage.height/2,
-                                         reactive: true
-                                      });
+        let eventHandler = new Nbtk.BoxLayout({ name: "LookingGlassDialog",
+                                                vertical: false,
+                                                y: Math.floor(global.stage.height/2),
+                                                reactive: true });
         eventHandler.connect('notify::allocation', Lang.bind(this, function () {
             eventHandler.x = Math.floor((global.stage.width)/2 - (eventHandler.width)/2);
         }));
         global.stage.add_actor(eventHandler);
-        let displayText = new Clutter.Text({ color: MATRIX_GREEN,
-                                             font_name: MATRIX_FONT, text: '' });
-        eventHandler.append(displayText, Big.BoxPackFlags.EXPAND);
+        let displayText = new Nbtk.Label();
+        eventHandler.add(displayText, { expand: true });
 
         let borderPaintTarget = null;
         let borderPaintId = null;
@@ -321,29 +299,19 @@ LookingGlass.prototype = {
         this._offset = 0;
         this._results = [];
 
-        // TODO replace with scrolling or something better
-        this._maxItems = 10;
-
-        this.actor = new Big.Box({ background_color: LG_BACKGROUND_COLOR,
-                                   border: 1,
-                                   border_color: LG_BORDER_COLOR,
-                                   corner_radius: 4,
-                                   padding_top: 8,
-                                   padding_left: 4,
-                                   padding_right: 4,
-                                   padding_bottom: 4,
-                                   spacing: 4,
-                                   visible: false
-                                });
+        // Sort of magic, but...eh.
+        this._maxItems = 150;
+
+        this.actor = new Nbtk.BoxLayout({ name: "LookingGlassDialog",
+                                          vertical: true,
+                                          visible: false });
         global.stage.add_actor(this.actor);
 
-        let toolbar = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL,
-                                    border: 1, border_color: GREY,
-                                    corner_radius: 4 });
-        this.actor.append(toolbar, Big.BoxPackFlags.NONE);
+        let toolbar = new Nbtk.BoxLayout({ name: "Toolbar" });
+        this.actor.add_actor(toolbar);
         let inspectIcon = Shell.TextureCache.get_default().load_gicon(new Gio.ThemedIcon({ name: 'gtk-color-picker' }),
                                                                       24);
-        toolbar.append(inspectIcon, Big.BoxPackFlags.NONE);
+        toolbar.add_actor(inspectIcon);
         inspectIcon.reactive = true;
         inspectIcon.connect('button-press-event', Lang.bind(this, function () {
             let inspector = new Inspector();
@@ -361,31 +329,26 @@ LookingGlass.prototype = {
         }));
 
         let notebook = new Notebook();
-        this.actor.append(notebook.actor, Big.BoxPackFlags.EXPAND);
-        toolbar.append(notebook.tabControls, Big.BoxPackFlags.END);
+        this.actor.add(notebook.actor, { expand: true });
+
+        let emptyBox = new Nbtk.Bin();
+        toolbar.add(emptyBox, { expand: true });
+        toolbar.add_actor(notebook.tabControls);
 
-        this._evalBox = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
-                                      spacing: 4 });
+        this._evalBox = new Nbtk.BoxLayout({ name: "EvalBox", vertical: true });
         notebook.appendPage('Evaluator', this._evalBox);
 
         this._resultsArea = new Big.Box({ orientation: Big.BoxOrientation.VERTICAL,
                                           spacing: 4 });
-        this._evalBox.append(this._resultsArea, Big.BoxPackFlags.EXPAND);
+        this._evalBox.add(this._resultsArea, { expand: true });
 
         let entryArea = new Big.Box({ orientation: Big.BoxOrientation.HORIZONTAL });
-        this._evalBox.append(entryArea, Big.BoxPackFlags.NONE);
+        this._evalBox.add_actor(entryArea);
 
-        let label = new Clutter.Text({ color: MATRIX_GREEN,
-                                       font_name: MATRIX_FONT,
-                                       text: 'js>>> ' });
+        let label = new Nbtk.Label({ text: 'js>>> ' });
         entryArea.append(label, Big.BoxPackFlags.NONE);
 
-        this._entry = new Clutter.Text({ color: MATRIX_GREEN,
-                                         font_name: MATRIX_FONT,
-                                         editable: true,
-                                         activatable: true,
-                                         singleLineMode: true,
-                                         text: ''});
+        this._entry = new Nbtk.Entry();
         /* unmapping the edit box will un-focus it, undo that */
         notebook.connect('selection', Lang.bind(this, function (nb, child) {
             if (child == this._evalBox)
@@ -403,7 +366,7 @@ LookingGlass.prototype = {
             notebook.selectIndex(0);
         }));
 
-        this._entry.connect('activate', Lang.bind(this, function (o, e) {
+        this._entry.clutter_text.connect('activate', Lang.bind(this, function (o, e) {
             let text = o.get_text();
             // Ensure we don't get newlines in the command; the history file is
             // newline-separated.
@@ -416,7 +379,7 @@ LookingGlass.prototype = {
             this._historyNavIndex = -1;
             return true;
         }));
-        this._entry.connect('key-press-event', Lang.bind(this, function(o, e) {
+        this._entry.clutter_text.connect('key-press-event', Lang.bind(this, function(o, e) {
             let symbol = e.get_key_symbol();
             if (symbol == Clutter.Escape) {
                 this.close();



[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]