--- 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 {