Bug 702621 - GCLI needs fixes for the minor issues created by bug 692742; r=dcamp,dao
authorJoe Walker <jwalker@mozilla.com>
Thu, 08 Dec 2011 12:36:36 +0000
changeset 82258 71054aef1a3a3bd2a01440a47a4571831c8caee9
parent 82257 cab4a629450e8bcca2780114cba326acac2ba421
child 82259 f1304b596193016b01374c4d5772281323ea82a0
push id21589
push usertim.taubert@gmx.de
push dateFri, 09 Dec 2011 04:57:11 +0000
treeherdermozilla-central@9e7239c0f557 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdcamp, dao
bugs702621, 692742
milestone11.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 702621 - GCLI needs fixes for the minor issues created by bug 692742; r=dcamp,dao
browser/devtools/webconsole/gcli.jsm
browser/themes/gnomestripe/devtools/gcli.css
browser/themes/pinstripe/devtools/gcli.css
browser/themes/winstripe/devtools/gcli.css
--- a/browser/devtools/webconsole/gcli.jsm
+++ b/browser/devtools/webconsole/gcli.jsm
@@ -1265,20 +1265,19 @@ dom.setInnerHtml = function(elem, html) 
     }
   }
   else {
     elem.innerHTML = html;
   }
 };
 
 /**
- * How to detect if we're in an XUL document (and therefore should create
- * elements in an XHTML namespace)
- * In a Mozilla XUL document, document.xmlVersion = null, however in Chrome
- * document.contentType = undefined.
+ * How to detect if we're in an XML document.
+ * In a Mozilla we check that document.xmlVersion = null, however in Chrome
+ * we use document.contentType = undefined.
  * @param doc The document element to work from (defaulted to the global
  * 'document' if missing
  */
 dom.isXmlDocument = function(doc) {
   doc = doc || document;
   // Best test for Firefox
   if (doc.contentType && doc.contentType != 'text/html') {
     return true;
@@ -5392,43 +5391,44 @@ Display.prototype.destroy = function() {
   delete this.gcliTerm;
   delete this.hintElement;
 };
 
 /**
  * Called on chrome window resize, or on divider slide
  */
 Display.prototype.resizer = function() {
+  // Bug 705109: There are several numbers hard-coded in this function.
+  // This is simpler than calculating them, but error-prone when the UI setup,
+  // the styling or display settings change.
+
   var parentRect = this.consoleWrap.getBoundingClientRect();
+  // Magic number: 64 is the size of the toolbar above the output area
   var parentHeight = parentRect.bottom - parentRect.top - 64;
 
+  // Magic number: 100 is the size at which we decide the hints are too small
+  // to be useful, so we hide them
   if (parentHeight < 100) {
     this.hintElement.classList.add('gcliterm-hint-nospace');
   }
   else {
     this.hintElement.classList.remove('gcliterm-hint-nospace');
 
     var isMenuVisible = this.menu.element.style.display !== 'none';
     if (isMenuVisible) {
       this.menu.setMaxHeight(parentHeight);
 
-      // Magic numbers. We have 2 options - lots of complex dom math to derive
-      // the height of a menu item (19 pixels) and the vertical padding
-      // (22 pixels), or we could just hard-code. The former is *slightly* more
-      // resilient to refactoring (but still breaks with dom structure changes),
-      // the latter is simpler, faster and easier.
+      // Magic numbers: 19 = height of a menu item, 22 = total vertical padding
+      // of container
       var idealMenuHeight = (19 * this.menu.items.length) + 22;
-
       if (idealMenuHeight > parentHeight) {
-        this.hintElement.style.overflowY = 'scroll';
-        this.hintElement.style.borderBottomColor = 'threedshadow';
+        this.hintElement.classList.add('gcliterm-hint-scroll');
       }
       else {
-        this.hintElement.style.overflowY = null;
-        this.hintElement.style.borderBottomColor = 'white';
+        this.hintElement.classList.remove('gcliterm-hint-scroll');
       }
     }
     else {
       this.argFetcher.setMaxHeight(parentHeight);
 
       this.hintElement.style.overflowY = null;
       this.hintElement.style.borderBottomColor = 'white';
     }
@@ -6521,17 +6521,17 @@ exports.getField = getField;
  */
 function StringField(type, options) {
   this.document = options.document;
   this.type = type;
   this.arg = new Argument();
 
   this.element = dom.createElement(this.document, 'input');
   this.element.type = 'text';
-  this.element.className = 'gcli-field';
+  this.element.classList.add('gcli-field');
 
   this.onInputChange = this.onInputChange.bind(this);
   this.element.addEventListener('keyup', this.onInputChange, false);
 
   this.fieldChanged = createEvent('StringField.fieldChanged');
 }
 
 StringField.prototype = Object.create(Field.prototype);
@@ -6681,17 +6681,17 @@ addField(BooleanField);
  * </ul>
  */
 function SelectionField(type, options) {
   this.document = options.document;
   this.type = type;
   this.items = [];
 
   this.element = dom.createElement(this.document, 'select');
-  this.element.className = 'gcli-field';
+  this.element.classList.add('gcli-field');
   this._addOption({
     name: l10n.lookupFormat('fieldSelectionSelect', [ options.name ])
   });
   var lookup = this.type.getLookup();
   lookup.forEach(this._addOption, this);
 
   this.onInputChange = this.onInputChange.bind(this);
   this.element.addEventListener('change', this.onInputChange, false);
@@ -6756,18 +6756,18 @@ function JavascriptField(type, options) 
   this.onInputChange = this.onInputChange.bind(this);
   this.arg = new Argument('', '{ ', ' }');
 
   this.element = dom.createElement(this.document, 'div');
 
   this.input = dom.createElement(this.document, 'input');
   this.input.type = 'text';
   this.input.addEventListener('keyup', this.onInputChange, false);
-  this.input.style.marginBottom = '0';
-  this.input.className = 'gcli-field';
+  this.input.classList.add('gcli-field');
+  this.input.classList.add('gcli-field-javascript');
   this.element.appendChild(this.input);
 
   this.menu = new Menu({ document: this.document, field: true });
   this.element.appendChild(this.menu.element);
 
   this.setConversion(this.type.parse(new Argument('')));
 
   this.fieldChanged = createEvent('JavascriptField.fieldChanged');
@@ -6949,28 +6949,28 @@ function ArrayField(type, options) {
   this.options = options;
   this.requ = options.requisition;
 
   this._onAdd = this._onAdd.bind(this);
   this.members = [];
 
   // <div class=gcliArrayParent save="${element}">
   this.element = dom.createElement(this.document, 'div');
-  this.element.className = 'gcliArrayParent';
+  this.element.classList.add('gcli-array-parent');
 
   // <button class=gcliArrayMbrAdd onclick="${_onAdd}" save="${addButton}">Add
   this.addButton = dom.createElement(this.document, 'button');
-  this.addButton.className = 'gcliArrayMbrAdd';
+  this.addButton.classList.add('gcli-array-member-add');
   this.addButton.addEventListener('click', this._onAdd, false);
   this.addButton.innerHTML = l10n.lookup('fieldArrayAdd');
   this.element.appendChild(this.addButton);
 
   // <div class=gcliArrayMbrs save="${mbrElement}">
   this.container = dom.createElement(this.document, 'div');
-  this.container.className = 'gcliArrayMbrs';
+  this.container.classList.add('gcli-array-members');
   this.element.appendChild(this.container);
 
   this.onInputChange = this.onInputChange.bind(this);
 
   this.fieldChanged = createEvent('ArrayField.fieldChanged');
 }
 
 ArrayField.prototype = Object.create(Field.prototype);
@@ -7003,17 +7003,17 @@ ArrayField.prototype.getConversion = fun
     arrayArg.addArgument(conversion.arg);
   }
   return new ArrayConversion(conversions, arrayArg);
 };
 
 ArrayField.prototype._onAdd = function(ev, subConversion) {
   // <div class=gcliArrayMbr save="${element}">
   var element = dom.createElement(this.document, 'div');
-  element.className = 'gcliArrayMbr';
+  element.classList.add('gcli-array-member');
   this.container.appendChild(element);
 
   // ${field.element}
   var field = getField(this.type.subtype, this.options);
   field.fieldChanged.add(function() {
     var conversion = this.getConversion();
     this.fieldChanged({ conversion: conversion });
     this.setMessage(conversion.message);
@@ -7021,17 +7021,17 @@ ArrayField.prototype._onAdd = function(e
 
   if (subConversion) {
     field.setConversion(subConversion);
   }
   element.appendChild(field.element);
 
   // <div class=gcliArrayMbrDel onclick="${_onDel}">
   var delButton = dom.createElement(this.document, 'button');
-  delButton.className = 'gcliArrayMbrDel';
+  delButton.classList.add('gcli-array-member-del');
   delButton.addEventListener('click', this._onDel, false);
   delButton.innerHTML = l10n.lookup('fieldArrayDel');
   element.appendChild(delButton);
 
   var member = {
     element: element,
     field: field,
     parent: this
--- a/browser/themes/gnomestripe/devtools/gcli.css
+++ b/browser/themes/gnomestripe/devtools/gcli.css
@@ -41,17 +41,16 @@
 
 .gcliterm-input-node,
 .gcliterm-complete-node {
   border: none;
   -moz-appearance: none;
   height: 100%;
   vertical-align: middle;
   background-color: transparent;
-  font: 12px Consolas, "Lucida Console", monospace;
 }
 
 .gcliterm-input-node {
   padding-top: 2px;
   padding-bottom: 0;
   -moz-padding-start: 16px;
   -moz-padding-end: 0;
 }
@@ -59,34 +58,16 @@
 .gcliterm-complete-node {
   color: #FFF;
   padding-top: 4px;
   padding-bottom: 2px;
   -moz-padding-start: 21px;
   -moz-padding-end: 4px;
 }
 
-.gcli-in-valid {
-  border-bottom: none;
-}
-
-.gcli-in-incomplete {
-  color: #DDD;
-  border-bottom: 1px dotted #999;
-}
-
-.gcli-in-error {
-  color: #DDD;
-  border-bottom: 1px dotted #F00;
-}
-
-.gcli-in-ontab {
-  color: #999;
-}
-
 .gcliterm-stack-node {
   background: url("chrome://global/skin/icons/commandline.png") 4px center no-repeat;
   width: 100%;
 }
 
 .gcliterm-argfetcher {
   display: -moz-box;
   -moz-box-flex: 1;
@@ -107,16 +88,22 @@
   padding: 10px 10px 0;
   border-top: 1px solid threedshadow;
   border-bottom: 1px solid threedshadow;
 }
 
 .gcliterm-menu {
   display: -moz-box;
   -moz-box-flex: 1;
+  border-bottom-color: white;
+}
+
+.gcliterm-hint-scroll {
+  overflow-y: scroll;
+  border-bottom-color: threedshadow;
 }
 
 .gcliterm-hint-nospace {
   display: none;
 }
 
 .gcliterm-msg-body {
   margin-top: 0;
@@ -168,16 +155,21 @@
  */
 .gcliterm-hint-parent:-moz-locale-dir(rtl),
 .hud-output-node:-moz-locale-dir(rtl) {
   direction: rtl;
 }
 
 /* From: $GCLI/mozilla/gcli/ui/gcliterm-gnomestripe.css */
 
+.gcliterm-input-node,
+.gcliterm-complete-node {
+  font: 12px "DejaVu Sans Mono", monospace;
+}
+
 .gcli-out-shortcut {
   font-family: "DejaVu Sans Mono", monospace;
 }
 
 /* From: $GCLI/lib/gcli/ui/arg_fetch.css */
 
 .gcli-argfetch {
   width: 100%;
@@ -202,32 +194,36 @@
 .gcli-af-paramname {
   text-align: right;
   font-size: 90%;
 }
 
 .gcli-af-required {
   font-size: 90%;
   color: #f66;
-  padding-left: 5px;
+  -moz-padding-start: 5px;
 }
 
 .gcli-af-error {
   font-size: 80%;
   color: #900;
 }
 
 .gcli-af-submit {
   text-align: right;
 }
 
 .gcli-field {
   width: 100%;
 }
 
+.gcli-field-javascript {
+  margin-bottom: 0;
+}
+
 /* From: $GCLI/lib/gcli/ui/menu.css */
 
 .gcli-menu {
   width: 100%;
   overflow: hidden;
 }
 
 .gcli-menu-field {
--- a/browser/themes/pinstripe/devtools/gcli.css
+++ b/browser/themes/pinstripe/devtools/gcli.css
@@ -41,17 +41,16 @@
 
 .gcliterm-input-node,
 .gcliterm-complete-node {
   border: none;
   -moz-appearance: none;
   height: 100%;
   vertical-align: middle;
   background-color: transparent;
-  font: 12px Consolas, "Lucida Console", monospace;
 }
 
 .gcliterm-input-node {
   padding-top: 2px;
   padding-bottom: 0;
   -moz-padding-start: 16px;
   -moz-padding-end: 0;
 }
@@ -59,34 +58,16 @@
 .gcliterm-complete-node {
   color: #FFF;
   padding-top: 4px;
   padding-bottom: 2px;
   -moz-padding-start: 21px;
   -moz-padding-end: 4px;
 }
 
-.gcli-in-valid {
-  border-bottom: none;
-}
-
-.gcli-in-incomplete {
-  color: #DDD;
-  border-bottom: 1px dotted #999;
-}
-
-.gcli-in-error {
-  color: #DDD;
-  border-bottom: 1px dotted #F00;
-}
-
-.gcli-in-ontab {
-  color: #999;
-}
-
 .gcliterm-stack-node {
   background: url("chrome://global/skin/icons/commandline.png") 4px center no-repeat;
   width: 100%;
 }
 
 .gcliterm-argfetcher {
   display: -moz-box;
   -moz-box-flex: 1;
@@ -107,16 +88,22 @@
   padding: 10px 10px 0;
   border-top: 1px solid threedshadow;
   border-bottom: 1px solid threedshadow;
 }
 
 .gcliterm-menu {
   display: -moz-box;
   -moz-box-flex: 1;
+  border-bottom-color: white;
+}
+
+.gcliterm-hint-scroll {
+  overflow-y: scroll;
+  border-bottom-color: threedshadow;
 }
 
 .gcliterm-hint-nospace {
   display: none;
 }
 
 .gcliterm-msg-body {
   margin-top: 0;
@@ -168,16 +155,21 @@
  */
 .gcliterm-hint-parent:-moz-locale-dir(rtl),
 .hud-output-node:-moz-locale-dir(rtl) {
   direction: rtl;
 }
 
 /* From: $GCLI/mozilla/gcli/ui/gcliterm-pinstripe.css */
 
+.gcliterm-input-node,
+.gcliterm-complete-node {
+  font: 11px Menlo, Monaco, monospace;
+}
+
 .gcliterm-complete-node {
   padding-top: 6px !important;
 }
 
 .gcli-out-shortcut {
   font-family: Menlo, Monaco, monospace;
 }
 
@@ -206,32 +198,36 @@
 .gcli-af-paramname {
   text-align: right;
   font-size: 90%;
 }
 
 .gcli-af-required {
   font-size: 90%;
   color: #f66;
-  padding-left: 5px;
+  -moz-padding-start: 5px;
 }
 
 .gcli-af-error {
   font-size: 80%;
   color: #900;
 }
 
 .gcli-af-submit {
   text-align: right;
 }
 
 .gcli-field {
   width: 100%;
 }
 
+.gcli-field-javascript {
+  margin-bottom: 0;
+}
+
 /* From: $GCLI/lib/gcli/ui/menu.css */
 
 .gcli-menu {
   width: 100%;
   overflow: hidden;
 }
 
 .gcli-menu-field {
--- a/browser/themes/winstripe/devtools/gcli.css
+++ b/browser/themes/winstripe/devtools/gcli.css
@@ -41,17 +41,16 @@
 
 .gcliterm-input-node,
 .gcliterm-complete-node {
   border: none;
   -moz-appearance: none;
   height: 100%;
   vertical-align: middle;
   background-color: transparent;
-  font: 12px Consolas, "Lucida Console", monospace;
 }
 
 .gcliterm-input-node {
   padding-top: 2px;
   padding-bottom: 0;
   -moz-padding-start: 16px;
   -moz-padding-end: 0;
 }
@@ -59,34 +58,16 @@
 .gcliterm-complete-node {
   color: #FFF;
   padding-top: 4px;
   padding-bottom: 2px;
   -moz-padding-start: 21px;
   -moz-padding-end: 4px;
 }
 
-.gcli-in-valid {
-  border-bottom: none;
-}
-
-.gcli-in-incomplete {
-  color: #DDD;
-  border-bottom: 1px dotted #999;
-}
-
-.gcli-in-error {
-  color: #DDD;
-  border-bottom: 1px dotted #F00;
-}
-
-.gcli-in-ontab {
-  color: #999;
-}
-
 .gcliterm-stack-node {
   background: url("chrome://global/skin/icons/commandline.png") 4px center no-repeat;
   width: 100%;
 }
 
 .gcliterm-argfetcher {
   display: -moz-box;
   -moz-box-flex: 1;
@@ -107,16 +88,22 @@
   padding: 10px 10px 0;
   border-top: 1px solid threedshadow;
   border-bottom: 1px solid threedshadow;
 }
 
 .gcliterm-menu {
   display: -moz-box;
   -moz-box-flex: 1;
+  border-bottom-color: white;
+}
+
+.gcliterm-hint-scroll {
+  overflow-y: scroll;
+  border-bottom-color: threedshadow;
 }
 
 .gcliterm-hint-nospace {
   display: none;
 }
 
 .gcliterm-msg-body {
   margin-top: 0;
@@ -168,16 +155,21 @@
  */
 .gcliterm-hint-parent:-moz-locale-dir(rtl),
 .hud-output-node:-moz-locale-dir(rtl) {
   direction: rtl;
 }
 
 /* From: $GCLI/mozilla/gcli/ui/gcliterm-winstripe.css */
 
+.gcliterm-input-node,
+.gcliterm-complete-node {
+  font: 12px Consolas, "Lucida Console", monospace;
+}
+
 .gcli-out-shortcut {
   font-family: Consolas, Inconsolata, "Courier New", monospace;
 }
 
 /* From: $GCLI/lib/gcli/ui/arg_fetch.css */
 
 .gcli-argfetch {
   width: 100%;
@@ -202,32 +194,36 @@
 .gcli-af-paramname {
   text-align: right;
   font-size: 90%;
 }
 
 .gcli-af-required {
   font-size: 90%;
   color: #f66;
-  padding-left: 5px;
+  -moz-padding-start: 5px;
 }
 
 .gcli-af-error {
   font-size: 80%;
   color: #900;
 }
 
 .gcli-af-submit {
   text-align: right;
 }
 
 .gcli-field {
   width: 100%;
 }
 
+.gcli-field-javascript {
+  margin-bottom: 0;
+}
+
 /* From: $GCLI/lib/gcli/ui/menu.css */
 
 .gcli-menu {
   width: 100%;
   overflow: hidden;
 }
 
 .gcli-menu-field {