Merge mozilla-central into mozilla-inbound

browser/base/content/browser.css

@@ -568,6 +568,16 @@ html|*#gcli-output-frame,
   direction: ltr;
 }
 
+#developer-toolbar-webconsole[error-count] > .toolbarbutton-icon {
+  display: none;
+}
+
+#developer-toolbar-webconsole[error-count]:before {
+  content: attr(error-count);
+  display: -moz-box;
+  -moz-box-pack: center;
+}
+
 /* Responsive Mode */
 
 vbox[anonid=browserContainer][responsivemode] {

browser/base/content/browser.js

@@ -1400,7 +1400,7 @@ var gBrowserInit = {
 
       // Show the toolbar if it was previously visible
       if (gPrefService.getBoolPref("devtools.toolbar.visible")) {
-        DeveloperToolbar.show();
+        DeveloperToolbar.show(false);
       }
     }
 

browser/base/content/browser.xul

@@ -1037,21 +1037,21 @@
           </stack>
           <toolbarbutton id="developer-toolbar-webconsole"
                          label="&webConsoleButton.label;"
-                         class="devtools-toolbarbutton"
+                         class="developer-toolbar-button"
                          command="Tools:WebConsole"/>
           <toolbarbutton id="developer-toolbar-inspector"
                          label="&inspectorButton.label;"
-                         class="devtools-toolbarbutton"
+                         class="developer-toolbar-button"
                          hidden="true"
                          command="Tools:Inspect"/>
           <toolbarbutton id="developer-toolbar-styleeditor"
                          label="&styleeditor.label;"
-                         class="devtools-toolbarbutton"
+                         class="developer-toolbar-button"
                          hidden="true"
                          command="Tools:StyleEditor"/>
           <toolbarbutton id="developer-toolbar-debugger"
                          label="&debuggerMenu.label2;"
-                         class="devtools-toolbarbutton"
+                         class="developer-toolbar-button"
                          hidden="true"
                          command="Tools:Debugger"/>
 #ifndef XP_MACOSX

browser/devtools/commandline/test/head.js

@@ -46,270 +46,358 @@ registerCleanupFunction(function tearDown() {
  * - browser/devtools/commandline/test/head.js
  * - browser/devtools/shared/test/head.js
  */
-let DeveloperToolbarTest = {
-  /**
-   * Paranoid DeveloperToolbar.show();
-   */
-  show: function DTT_show(aCallback) {
-    if (DeveloperToolbar.visible) {
-      ok(false, "DeveloperToolbar.visible at start of openDeveloperToolbar");
-    }
-    else {
-      DeveloperToolbar.show(aCallback);
-    }
-  },
+let DeveloperToolbarTest = { };
 
-  /**
-   * Paranoid DeveloperToolbar.hide();
-   */
-  hide: function DTT_hide() {
-    if (!DeveloperToolbar.visible) {
-      ok(false, "!DeveloperToolbar.visible at start of closeDeveloperToolbar");
-    }
-    else {
-      DeveloperToolbar.display.inputter.setInput("");
-      DeveloperToolbar.hide();
-    }
-  },
+/**
+ * Paranoid DeveloperToolbar.show();
+ */
+DeveloperToolbarTest.show = function DTT_show(aCallback) {
+  if (DeveloperToolbar.visible) {
+    ok(false, "DeveloperToolbar.visible at start of openDeveloperToolbar");
+  }
+  else {
+    DeveloperToolbar.show(true, aCallback);
+  }
+};
 
-  /**
-   * Check that we can parse command input.
-   * Doesn't execute the command, just checks that we grok the input properly:
-   *
-   * DeveloperToolbarTest.checkInputStatus({
-   *   // Test inputs
-   *   typed: "ech",           // Required
-   *   cursor: 3,              // Optional cursor position
-   *
-   *   // Thing to check
-   *   status: "INCOMPLETE",   // One of "VALID", "ERROR", "INCOMPLETE"
-   *   emptyParameters: [ "<message>" ], // Still to type
-   *   directTabText: "o",     // Simple completion text
-   *   arrowTabText: "",       // When the completion is not an extension
-   *   markup: "VVVIIIEEE",    // What state should the error markup be in
-   * });
-   */
-  checkInputStatus: function DTT_checkInputStatus(tests) {
-    let display = DeveloperToolbar.display;
+/**
+ * Paranoid DeveloperToolbar.hide();
+ */
+DeveloperToolbarTest.hide = function DTT_hide() {
+  if (!DeveloperToolbar.visible) {
+    ok(false, "!DeveloperToolbar.visible at start of closeDeveloperToolbar");
+  }
+  else {
+    DeveloperToolbar.display.inputter.setInput("");
+    DeveloperToolbar.hide();
+  }
+};
 
-    if (tests.typed) {
-      display.inputter.setInput(tests.typed);
-    }
-    else {
-      ok(false, "Missing typed for " + JSON.stringify(tests));
-      return;
-    }
+/**
+ * check() is the new status. Similar API except that it doesn't attempt to
+ * alter the display/requisition at all, and it makes extra checks.
+ * Test inputs
+ *   typed: The text to type at the input
+ * Available checks:
+ *   input: The text displayed in the input field
+ *   cursor: The position of the start of the cursor
+ *   status: One of "VALID", "ERROR", "INCOMPLETE"
+ *   emptyParameters: Array of parameters still to type. e.g. [ "<message>" ]
+ *   directTabText: Simple completion text
+ *   arrowTabText: When the completion is not an extension (without arrow)
+ *   markup: What state should the error markup be in. e.g. "VVVIIIEEE"
+ *   args: Maps of checks to make against the arguments:
+ *     value: i.e. assignment.value (which ignores defaultValue)
+ *     type: Argument/BlankArgument/MergedArgument/etc i.e. what's assigned
+ *           Care should be taken with this since it's something of an
+ *           implementation detail
+ *     arg: The toString value of the argument
+ *     status: i.e. assignment.getStatus
+ *     message: i.e. assignment.getMessage
+ *     name: For commands - checks assignment.value.name
+ */
+DeveloperToolbarTest.checkInputStatus = function DTT_checkInputStatus(checks) {
+  if (!checks.emptyParameters) {
+    checks.emptyParameters = [];
+  }
+  if (!checks.directTabText) {
+    checks.directTabText = '';
+  }
+  if (!checks.arrowTabText) {
+    checks.arrowTabText = '';
+  }
 
-    if (tests.cursor) {
-      display.inputter.setCursor(tests.cursor)
-    }
+  var display = DeveloperToolbar.display;
 
-    if (tests.status) {
-      is(display.requisition.getStatus().toString(),
-              tests.status, "status for " + tests.typed);
-    }
+  if (checks.typed) {
+    display.inputter.setInput(checks.typed);
+  }
+  else {
+    ok(false, "Missing typed for " + JSON.stringify(checks));
+    return;
+  }
 
-    if (tests.emptyParameters == null) {
-      tests.emptyParameters = [];
-    }
+  if (checks.cursor) {
+    display.inputter.setCursor(checks.cursor)
+  }
 
-    let realParams = display.completer.emptyParameters;
-    is(realParams.length, tests.emptyParameters.length,
-            'emptyParameters.length for \'' + tests.typed + '\'');
+  var cursor = checks.cursor ? checks.cursor.start : checks.typed.length;
 
-    if (realParams.length === tests.emptyParameters.length) {
-      for (let i = 0; i < realParams.length; i++) {
-        is(realParams[i].replace(/\u00a0/g, ' '), tests.emptyParameters[i],
-                'emptyParameters[' + i + '] for \'' + tests.typed + '\'');
+  var requisition = display.requisition;
+  var completer = display.completer;
+  var actual = completer._getCompleterTemplateData();
+
+  /*
+  if (checks.input) {
+    is(display.inputter.element.value,
+            checks.input,
+            'input');
+  }
+
+  if (checks.cursor) {
+    is(display.inputter.element.selectionStart,
+            checks.cursor,
+            'cursor');
+  }
+  */
+
+  if (checks.status) {
+    is(requisition.getStatus().toString(),
+            checks.status,
+            'status');
+  }
+
+  if (checks.markup) {
+    var statusMarkup = requisition.getInputStatusMarkup(cursor);
+    var actualMarkup = statusMarkup.map(function(s) {
+      return Array(s.string.length + 1).join(s.status.toString()[0]);
+    }).join('');
+
+    is(checks.markup,
+            actualMarkup,
+            'markup');
+  }
+
+  if (checks.emptyParameters) {
+    var actualParams = actual.emptyParameters;
+    is(actualParams.length,
+            checks.emptyParameters.length,
+            'emptyParameters.length');
+
+    if (actualParams.length === checks.emptyParameters.length) {
+      for (var i = 0; i < actualParams.length; i++) {
+        is(actualParams[i].replace(/\u00a0/g, ' '),
+                checks.emptyParameters[i],
+                'emptyParameters[' + i + ']');
       }
     }
+  }
 
-    if (tests.directTabText) {
-      is(display.completer.directTabText, tests.directTabText,
-              'directTabText for \'' + tests.typed + '\'');
-    }
-    else {
-      is(display.completer.directTabText, '',
-              'directTabText for \'' + tests.typed + '\'');
-    }
+  if (checks.directTabText) {
+    is(actual.directTabText,
+            checks.directTabText,
+            'directTabText');
+  }
 
-    if (tests.arrowTabText) {
-      is(display.completer.arrowTabText, ' \u00a0\u21E5 ' + tests.arrowTabText,
-              'arrowTabText for \'' + tests.typed + '\'');
-    }
-    else {
-      is(display.completer.arrowTabText, '',
-              'arrowTabText for \'' + tests.typed + '\'');
-    }
+  if (checks.arrowTabText) {
+    is(actual.arrowTabText,
+            ' \u00a0\u21E5 ' + checks.arrowTabText,
+            'arrowTabText');
+  }
 
-    if (tests.markup) {
-      let cursor = tests.cursor ? tests.cursor.start : tests.typed.length;
-      let statusMarkup = display.requisition.getInputStatusMarkup(cursor);
-      let actualMarkup = statusMarkup.map(function(s) {
-        return Array(s.string.length + 1).join(s.status.toString()[0]);
-      }).join('');
-      is(tests.markup, actualMarkup, 'markup for ' + tests.typed);
-    }
-  },
+  if (checks.args) {
+    Object.keys(checks.args).forEach(function(paramName) {
+      var check = checks.args[paramName];
 
-  /**
-   * Execute a command:
-   *
-   * DeveloperToolbarTest.exec({
-   *   // Test inputs
-   *   typed: "echo hi",        // Optional, uses existing if undefined
-   *
-   *   // Thing to check
-   *   args: { message: "hi" }, // Check that the args were understood properly
-   *   outputMatch: /^hi$/,     // RegExp to test against textContent of output
-   *                            // (can also be array of RegExps)
-   *   blankOutput: true,       // Special checks when there is no output
-   * });
-   */
-  exec: function DTT_exec(tests) {
-    tests = tests || {};
-
-    if (tests.typed) {
-      DeveloperToolbar.display.inputter.setInput(tests.typed);
-    }
-
-    let typed = DeveloperToolbar.display.inputter.getInputState().typed;
-    let output = DeveloperToolbar.display.requisition.exec();
-
-    is(typed, output.typed, 'output.command for: ' + typed);
-
-    if (tests.completed !== false) {
-      ok(output.completed, 'output.completed false for: ' + typed);
-    }
-    else {
-      // It is actually an error if we say something is async and it turns
-      // out not to be? For now we're saying 'no'
-      // ok(!output.completed, 'output.completed true for: ' + typed);
-    }
-
-    if (tests.args != null) {
-      is(Object.keys(tests.args).length, Object.keys(output.args).length,
-         'arg count for ' + typed);
-
-      Object.keys(output.args).forEach(function(arg) {
-        let expectedArg = tests.args[arg];
-        let actualArg = output.args[arg];
-
-        if (typeof expectedArg === 'function') {
-          ok(expectedArg(actualArg), 'failed test func. ' + typed + '/' + arg);
-        }
-        else {
-          if (Array.isArray(expectedArg)) {
-            if (!Array.isArray(actualArg)) {
-              ok(false, 'actual is not an array. ' + typed + '/' + arg);
-              return;
-            }
-
-            is(expectedArg.length, actualArg.length,
-                    'array length: ' + typed + '/' + arg);
-            for (let i = 0; i < expectedArg.length; i++) {
-              is(expectedArg[i], actualArg[i],
-                      'member: "' + typed + '/' + arg + '/' + i);
-            }
-          }
-          else {
-            is(expectedArg, actualArg, 'typed: "' + typed + '" arg: ' + arg);
-          }
-        }
-      });
-    }
-
-    let displayed = DeveloperToolbar.outputPanel._div.textContent;
-
-    if (tests.outputMatch) {
-      function doTest(match, against) {
-        if (!match.test(against)) {
-          ok(false, "html output for " + typed + " against " + match.source +
-                  " (textContent sent to info)");
-          info("Actual textContent");
-          info(against);
-        }
-      }
-      if (Array.isArray(tests.outputMatch)) {
-        tests.outputMatch.forEach(function(match) {
-          doTest(match, displayed);
-        });
+      var assignment;
+      if (paramName === 'command') {
+        assignment = requisition.commandAssignment;
       }
       else {
-        doTest(tests.outputMatch, displayed);
-      }
-    }
-
-    if (tests.blankOutput != null) {
-      if (!/^$/.test(displayed)) {
-        ok(false, "html output for " + typed + " (textContent sent to info)");
-        info("Actual textContent");
-        info(displayed);
-      }
-    }
-  },
-
-  /**
-   * Quick wrapper around the things you need to do to run DeveloperToolbar
-   * command tests:
-   * - Set the pref 'devtools.toolbar.enabled' to true
-   * - Add a tab pointing at |uri|
-   * - Open the DeveloperToolbar
-   * - Register a cleanup function to undo the above
-   * - Run the tests
-   *
-   * @param uri The uri of a page to load. Can be 'about:blank' or 'data:...'
-   * @param testFunc A function containing the tests to run. This should
-   * arrange for 'finish()' to be called on completion.
-   */
-  test: function DTT_test(uri, testFunc) {
-    let menuItem = document.getElementById("menu_devToolbar");
-    let command = document.getElementById("Tools:DevToolbar");
-    let appMenuItem = document.getElementById("appmenu_devToolbar");
-
-    registerCleanupFunction(function() {
-      DeveloperToolbarTest.hide();
-
-      // a.k.a Services.prefs.clearUserPref("devtools.toolbar.enabled");
-      if (menuItem) {
-        menuItem.hidden = true;
-      }
-      if (command) {
-        command.setAttribute("disabled", "true");
-      }
-      if (appMenuItem) {
-        appMenuItem.hidden = true;
+        assignment = requisition.getAssignment(paramName);
       }
 
-      // leakHunt({ DeveloperToolbar: DeveloperToolbar });
+      if (assignment == null) {
+        ok(false, 'Unknown parameter: ' + paramName);
+        return;
+      }
+
+      if (check.value) {
+        is(assignment.value,
+                check.value,
+                'checkStatus value for ' + paramName);
+      }
+
+      if (check.name) {
+        is(assignment.value.name,
+                check.name,
+                'checkStatus name for ' + paramName);
+      }
+
+      if (check.type) {
+        is(assignment.arg.type,
+                check.type,
+                'checkStatus type for ' + paramName);
+      }
+
+      if (check.arg) {
+        is(assignment.arg.toString(),
+                check.arg,
+                'checkStatus arg for ' + paramName);
+      }
+
+      if (check.status) {
+        is(assignment.getStatus().toString(),
+                check.status,
+                'checkStatus status for ' + paramName);
+      }
+
+      if (check.message) {
+        is(assignment.getMessage(),
+                check.message,
+                'checkStatus message for ' + paramName);
+      }
     });
+  }
+};
 
-    // a.k.a: Services.prefs.setBoolPref("devtools.toolbar.enabled", true);
+/**
+ * Execute a command:
+ *
+ * DeveloperToolbarTest.exec({
+ *   // Test inputs
+ *   typed: "echo hi",        // Optional, uses existing if undefined
+ *
+ *   // Thing to check
+ *   args: { message: "hi" }, // Check that the args were understood properly
+ *   outputMatch: /^hi$/,     // RegExp to test against textContent of output
+ *                            // (can also be array of RegExps)
+ *   blankOutput: true,       // Special checks when there is no output
+ * });
+ */
+DeveloperToolbarTest.exec = function DTT_exec(tests) {
+  tests = tests || {};
+
+  if (tests.typed) {
+    DeveloperToolbar.display.inputter.setInput(tests.typed);
+  }
+
+  let typed = DeveloperToolbar.display.inputter.getInputState().typed;
+  let output = DeveloperToolbar.display.requisition.exec();
+
+  is(typed, output.typed, 'output.command for: ' + typed);
+
+  if (tests.completed !== false) {
+    ok(output.completed, 'output.completed false for: ' + typed);
+  }
+  else {
+    // It is actually an error if we say something is async and it turns
+    // out not to be? For now we're saying 'no'
+    // ok(!output.completed, 'output.completed true for: ' + typed);
+  }
+
+  if (tests.args != null) {
+    is(Object.keys(tests.args).length, Object.keys(output.args).length,
+       'arg count for ' + typed);
+
+    Object.keys(output.args).forEach(function(arg) {
+      let expectedArg = tests.args[arg];
+      let actualArg = output.args[arg];
+
+      if (typeof expectedArg === 'function') {
+        ok(expectedArg(actualArg), 'failed test func. ' + typed + '/' + arg);
+      }
+      else {
+        if (Array.isArray(expectedArg)) {
+          if (!Array.isArray(actualArg)) {
+            ok(false, 'actual is not an array. ' + typed + '/' + arg);
+            return;
+          }
+
+          is(expectedArg.length, actualArg.length,
+                  'array length: ' + typed + '/' + arg);
+          for (let i = 0; i < expectedArg.length; i++) {
+            is(expectedArg[i], actualArg[i],
+                    'member: "' + typed + '/' + arg + '/' + i);
+          }
+        }
+        else {
+          is(expectedArg, actualArg, 'typed: "' + typed + '" arg: ' + arg);
+        }
+      }
+    });
+  }
+
+  let displayed = DeveloperToolbar.outputPanel._div.textContent;
+
+  if (tests.outputMatch) {
+    function doTest(match, against) {
+      if (!match.test(against)) {
+        ok(false, "html output for " + typed + " against " + match.source +
+                " (textContent sent to info)");
+        info("Actual textContent");
+        info(against);
+      }
+    }
+    if (Array.isArray(tests.outputMatch)) {
+      tests.outputMatch.forEach(function(match) {
+        doTest(match, displayed);
+      });
+    }
+    else {
+      doTest(tests.outputMatch, displayed);
+    }
+  }
+
+  if (tests.blankOutput != null) {
+    if (!/^$/.test(displayed)) {
+      ok(false, "html output for " + typed + " (textContent sent to info)");
+      info("Actual textContent");
+      info(displayed);
+    }
+  }
+};
+
+/**
+ * Quick wrapper around the things you need to do to run DeveloperToolbar
+ * command tests:
+ * - Set the pref 'devtools.toolbar.enabled' to true
+ * - Add a tab pointing at |uri|
+ * - Open the DeveloperToolbar
+ * - Register a cleanup function to undo the above
+ * - Run the tests
+ *
+ * @param uri The uri of a page to load. Can be 'about:blank' or 'data:...'
+ * @param testFunc A function containing the tests to run. This should
+ * arrange for 'finish()' to be called on completion.
+ */
+DeveloperToolbarTest.test = function DTT_test(uri, testFunc) {
+  let menuItem = document.getElementById("menu_devToolbar");
+  let command = document.getElementById("Tools:DevToolbar");
+  let appMenuItem = document.getElementById("appmenu_devToolbar");
+
+  registerCleanupFunction(function() {
+    DeveloperToolbarTest.hide();
+
+    // a.k.a Services.prefs.clearUserPref("devtools.toolbar.enabled");
     if (menuItem) {
-      menuItem.hidden = false;
+      menuItem.hidden = true;
     }
     if (command) {
-      command.removeAttribute("disabled");
+      command.setAttribute("disabled", "true");
     }
     if (appMenuItem) {
-      appMenuItem.hidden = false;
+      appMenuItem.hidden = true;
     }
 
-    addTab(uri, function(browser, tab) {
-      DeveloperToolbarTest.show(function() {
+    // leakHunt({ DeveloperToolbar: DeveloperToolbar });
+  });
 
-        try {
-          testFunc(browser, tab);
-        }
-        catch (ex) {
-          ok(false, "" + ex);
-          console.error(ex);
-          finish();
-          throw ex;
-        }
-      });
+  // a.k.a: Services.prefs.setBoolPref("devtools.toolbar.enabled", true);
+  if (menuItem) {
+    menuItem.hidden = false;
+  }
+  if (command) {
+    command.removeAttribute("disabled");
+  }
+  if (appMenuItem) {
+    appMenuItem.hidden = false;
+  }
+
+  addTab(uri, function(browser, tab) {
+    DeveloperToolbarTest.show(function() {
+
+      try {
+        testFunc(browser, tab);
+      }
+      catch (ex) {
+        ok(false, "" + ex);
+        console.error(ex);
+        finish();
+        throw ex;
+      }
     });
-  },
+  });
 };
 
 

browser/devtools/debugger/debugger-view.js

@@ -552,8 +552,6 @@ StackFramesView.prototype = {
        resume.setAttribute("tooltiptext", L10N.getStr("pauseTooltip"));
        resume.removeAttribute("checked");
      }
-
-     DebuggerView.Scripts.clearSearch();
    },
 
   /**

browser/devtools/shared/DeveloperToolbar.jsm

@@ -43,7 +43,6 @@ function DeveloperToolbar(aChromeWindow, aToolbarElement)
   this._errorsCount = {};
   this._webConsoleButton = this._doc
                            .getElementById("developer-toolbar-webconsole");
-  this._webConsoleButtonLabel = this._webConsoleButton.label;
 
   try {
     GcliCommands.refreshAutoCommands(aChromeWindow);
@@ -107,7 +106,7 @@ DeveloperToolbar.prototype.toggle = function DT_toggle()
   if (this.visible) {
     this.hide();
   } else {
-    this.show();
+    this.show(true);
   }
 };
 
@@ -124,7 +123,7 @@ DeveloperToolbar.introShownThisSession = false;
  * @param aCallback show events can be asynchronous. If supplied aCallback will
  * be called when the DeveloperToolbar is visible
  */
-DeveloperToolbar.prototype.show = function DT_show(aCallback)
+DeveloperToolbar.prototype.show = function DT_show(aFocus, aCallback)
 {
   if (this._lastState != NOTIFICATIONS.HIDE) {
     return;
@@ -139,7 +138,7 @@ DeveloperToolbar.prototype.show = function DT_show(aCallback)
   let checkLoad = function() {
     if (this.tooltipPanel && this.tooltipPanel.loaded &&
         this.outputPanel && this.outputPanel.loaded) {
-      this._onload();
+      this._onload(aFocus);
     }
   }.bind(this);
 
@@ -152,7 +151,7 @@ DeveloperToolbar.prototype.show = function DT_show(aCallback)
  * Initializing GCLI can only be done when we've got content windows to write
  * to, so this needs to be done asynchronously.
  */
-DeveloperToolbar.prototype._onload = function DT_onload()
+DeveloperToolbar.prototype._onload = function DT_onload(aFocus)
 {
   this._doc.getElementById("Tools:DevToolbar").setAttribute("checked", "true");
 
@@ -194,7 +193,10 @@ DeveloperToolbar.prototype._onload = function DT_onload()
   this._initErrorsCount(this._chromeWindow.getBrowser().selectedTab);
 
   this._element.hidden = false;
-  this._input.focus();
+
+  if (aFocus) {
+    this._input.focus();
+  }
 
   this._notify(NOTIFICATIONS.SHOW);
   if (this._pendingShowCallback) {
@@ -499,11 +501,9 @@ function DT__updateErrorsCount(aChangedTabId)
   let errors = this._errorsCount[tabId];
 
   if (errors) {
-    this._webConsoleButton.label =
-      this._webConsoleButtonLabel + " (" + errors + ")";
-  }
-  else {
-    this._webConsoleButton.label = this._webConsoleButtonLabel;
+    this._webConsoleButton.setAttribute("error-count", errors);
+  } else {
+    this._webConsoleButton.removeAttribute("error-count");
   }
 };
 

browser/devtools/shared/test/browser_toolbar_webconsole_errors_count.js

@@ -29,8 +29,8 @@ function test() {
   addTab(TEST_URI, openToolbar);
 
   function getErrorsCount() {
-    let match = webconsole.label.match(/\((\d+)\)$/);
-    return match ? match[1] : 0;
+    let count = webconsole.getAttribute("error-count");
+    return count ? count : "0";
   }
 
   function onOpenToolbar() {

browser/devtools/shared/test/head.js

@@ -52,7 +52,7 @@ let DeveloperToolbarTest = {
       ok(false, "DeveloperToolbar.visible at start of openDeveloperToolbar");
     }
     else {
-      DeveloperToolbar.show(aCallback);
+      DeveloperToolbar.show(true, aCallback);
     }
   },
 

browser/locales/en-US/chrome/browser/devtools/gcli.properties

@@ -20,6 +20,15 @@ canonDescNone=(No description)
 # the '{' command.
 cliEvalJavascript=Enter JavaScript directly
 
+# LOCALIZATION NOTE (cliUnusedArg): When the command line has more arguments
+# than the current command can understand this is the error message shown to
+# the user.
+cliUnusedArg=Too many arguments
+
+# LOCALIZATION NOTE (cliOptions): The title of the dialog which displays the
+# options that are available to the current command.
+cliOptions=Available Options
+
 # LOCALIZATION NOTE (fieldSelectionSelect): When a command has a parameter
 # that has a number of pre-defined options the user interface presents these
 # in a drop-down menu, where the first 'option' is an indicator that a
@@ -38,6 +47,11 @@ fieldArrayAdd=Add
 # used to remove arguments.
 fieldArrayDel=Delete
 
+# LOCALIZATION NOTE (fieldMenuMore): When the menu has displayed all the
+# matches that it should (i.e. about 10 items) then we display this to alert
+# the user that more matches are available.
+fieldMenuMore=More matches, keep typing
+
 # LOCALIZATION NOTE (jstypeParseScope): The command line provides completion
 # for JavaScript commands, however there are times when the scope of what
 # we're completing against can't be used. This error message is displayed when

browser/themes/gnomestripe/browser.css

@@ -2406,7 +2406,7 @@ html|*#gcli-output-frame {
 .gclitoolbar-complete-node,
 .gclitoolbar-prompt {
   margin: 0;
-  -moz-margin-end: 3px;
+  -moz-margin-end: 5px;
   -moz-box-align: center;
   padding-top: 0;
   padding-bottom: 0;
@@ -2520,3 +2520,57 @@ stack[anonid=browserStack][responsivemode] {
   -moz-transform: translate(12px, 12px);
   background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
 }
+
+/* Developer Toolbar */
+
+.developer-toolbar-button {
+  -moz-appearance: none;
+  min-width: 78px;
+  min-height: 22px;
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  border-radius: 3px;
+  color: inherit;
+  border: 1px solid transparent;
+  margin: 0 5px;
+  padding: 0 10px;
+  list-style-image: url("chrome://browser/skin/devtools/tools-icons-small.png");
+}
+
+.developer-toolbar-button:active:hover,
+.developer-toolbar-button[checked=true] {
+  border-color: hsla(210,8%,5%,.6);
+  background: rgba(0,0,0,.6);
+  box-shadow: 0 1px 2px rgba(0,0,0,.5) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+.developer-toolbar-button[checked=true] {
+  color: hsl(208,100%,60%) !important;
+  background: rgba(0,0,0,.4);
+  text-shadow: 0 0 6px hsl(208,100%,60%);
+}
+
+#developer-toolbar-webconsole {
+  -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+#developer-toolbar-inspector {
+  -moz-image-region: rect(16px, 16px, 32px, 0);
+}
+
+#developer-toolbar-styleeditor {
+  -moz-image-region: rect(32px, 16px, 48px, 0);
+}
+
+#developer-toolbar-debugger {
+  -moz-image-region: rect(48px, 16px, 64px, 0);
+}
+
+/* Error counter */
+
+#developer-toolbar-webconsole[error-count]:before {
+  color: #FDF3DE;
+  min-width: 16px;
+  text-shadow: none;
+  background-image: -moz-linear-gradient(top, #B4211B, #8A1915);
+  border-radius: 1px;
+}

browser/themes/gnomestripe/devtools/gcli.css

@@ -123,3 +123,9 @@
 .gcli-menu-typed {
   color: hsl(25,78%,50%);
 }
+
+.gcli-menu-more {
+  font-size: 80%;
+  text-align: right;
+  -moz-padding-end: 8px;
+}

browser/themes/gnomestripe/jar.mn

@@ -159,6 +159,7 @@ browser.jar:
   skin/classic/browser/devtools/responsive-se-resizer.png (devtools/responsive-se-resizer.png)
   skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
   skin/classic/browser/devtools/responsive-background.png (devtools/responsive-background.png)
+  skin/classic/browser/devtools/tools-icons-small.png     (devtools/tools-icons-small.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-16-throbber.png
   skin/classic/browser/sync-16.png

browser/themes/pinstripe/browser.css

@@ -3147,7 +3147,7 @@ html|*#gcli-output-frame {
 .gclitoolbar-complete-node,
 .gclitoolbar-prompt {
   margin: 0;
-  -moz-margin-end: 3px;
+  -moz-margin-end: 5px;
   -moz-box-align: center;
   padding-top: 0;
   padding-bottom: 0;
@@ -3261,3 +3261,57 @@ stack[anonid=browserStack][responsivemode] {
   -moz-transform: translate(12px, 12px);
   background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
 }
+
+/* Developer Toolbar */
+
+.developer-toolbar-button {
+  -moz-appearance: none;
+  min-width: 78px;
+  min-height: 22px;
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  border-radius: @toolbarbuttonCornerRadius@;
+  color: inherit;
+  border: 1px solid transparent;
+  margin: 0 5px;
+  padding: 0 10px;
+  list-style-image: url("chrome://browser/skin/devtools/tools-icons-small.png");
+}
+
+.developer-toolbar-button:active:hover,
+.developer-toolbar-button[checked=true] {
+  border-color: hsla(210,8%,5%,.6);
+  background: rgba(0,0,0,.6);
+  box-shadow: 0 1px 2px rgba(0,0,0,.5) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+.developer-toolbar-button[checked=true] {
+  color: hsl(208,100%,60%) !important;
+  background: rgba(0,0,0,.4);
+  text-shadow: 0 0 6px hsl(208,100%,60%);
+}
+
+#developer-toolbar-webconsole {
+  -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+#developer-toolbar-inspector {
+  -moz-image-region: rect(16px, 16px, 32px, 0);
+}
+
+#developer-toolbar-styleeditor {
+  -moz-image-region: rect(32px, 16px, 48px, 0);
+}
+
+#developer-toolbar-debugger {
+  -moz-image-region: rect(48px, 16px, 64px, 0);
+}
+
+/* Error counter */
+
+#developer-toolbar-webconsole[error-count]:before {
+  color: #FDF3DE;
+  min-width: 16px;
+  text-shadow: none;
+  background-image: -moz-linear-gradient(top, #B4211B, #8A1915);
+  border-radius: 1px;
+}

browser/themes/pinstripe/devtools/gcli.css

@@ -125,3 +125,9 @@
 .gcli-menu-typed {
   color: hsl(25,78%,50%);
 }
+
+.gcli-menu-more {
+  font-size: 80%;
+  text-align: right;
+  -moz-padding-end: 8px;
+}

browser/themes/pinstripe/jar.mn

@@ -200,6 +200,7 @@ browser.jar:
   skin/classic/browser/devtools/responsive-se-resizer.png   (devtools/responsive-se-resizer.png)
   skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
   skin/classic/browser/devtools/responsive-background.png   (devtools/responsive-background.png)
+  skin/classic/browser/devtools/tools-icons-small.png       (devtools/tools-icons-small.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-throbber.png
   skin/classic/browser/sync-16.png

browser/themes/winstripe/browser.css

@@ -3081,7 +3081,7 @@ html|*#gcli-output-frame {
 .gclitoolbar-complete-node,
 .gclitoolbar-prompt {
   margin: 0;
-  -moz-margin-end: 3px;
+  -moz-margin-end: 5px;
   -moz-box-align: center;
   padding-top: 0;
   padding-bottom: 0;
@@ -3195,3 +3195,57 @@ stack[anonid=browserStack][responsivemode] {
   -moz-transform: translate(12px, 12px);
   background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
 }
+
+/* Developer Toolbar */
+
+.developer-toolbar-button {
+  -moz-appearance: none;
+  min-width: 78px;
+  min-height: 22px;
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  border-radius: 3px;
+  color: inherit;
+  border: 1px solid transparent;
+  margin: 0 5px;
+  padding: 0 10px;
+  list-style-image: url("chrome://browser/skin/devtools/tools-icons-small.png");
+}
+
+.developer-toolbar-button:active:hover,
+.developer-toolbar-button[checked=true] {
+  border-color: hsla(210,8%,5%,.6);
+  background: rgba(0,0,0,.6);
+  box-shadow: 0 1px 2px rgba(0,0,0,.5) inset, 0 1px 0 hsla(210,16%,76%,.1);
+}
+
+.developer-toolbar-button[checked=true] {
+  color: hsl(208,100%,60%) !important;
+  background: rgba(0,0,0,.4);
+  text-shadow: 0 0 6px hsl(208,100%,60%);
+}
+
+#developer-toolbar-webconsole {
+  -moz-image-region: rect(0, 16px, 16px, 0);
+}
+
+#developer-toolbar-inspector {
+  -moz-image-region: rect(16px, 16px, 32px, 0);
+}
+
+#developer-toolbar-styleeditor {
+  -moz-image-region: rect(32px, 16px, 48px, 0);
+}
+
+#developer-toolbar-debugger {
+  -moz-image-region: rect(48px, 16px, 64px, 0);
+}
+
+/* Error counter */
+
+#developer-toolbar-webconsole[error-count]:before {
+  color: #FDF3DE;
+  min-width: 16px;
+  text-shadow: none;
+  background-image: -moz-linear-gradient(top, #B4211B, #8A1915);
+  border-radius: 1px;
+}

browser/themes/winstripe/devtools/gcli.css

@@ -123,3 +123,9 @@
 .gcli-menu-typed {
   color: hsl(25,78%,50%);
 }
+
+.gcli-menu-more {
+  font-size: 80%;
+  text-align: right;
+  -moz-padding-end: 8px;
+}

browser/themes/winstripe/jar.mn

@@ -186,6 +186,7 @@ browser.jar:
         skin/classic/browser/devtools/responsive-se-resizer.png     (devtools/responsive-se-resizer.png)
         skin/classic/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
         skin/classic/browser/devtools/responsive-background.png     (devtools/responsive-background.png)
+        skin/classic/browser/devtools/tools-icons-small.png         (devtools/tools-icons-small.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-throbber.png
         skin/classic/browser/sync-16.png
@@ -383,6 +384,7 @@ browser.jar:
         skin/classic/aero/browser/devtools/responsive-se-resizer.png (devtools/responsive-se-resizer.png)
         skin/classic/aero/browser/devtools/responsive-vertical-resizer.png (devtools/responsive-vertical-resizer.png)
         skin/classic/aero/browser/devtools/responsive-background.png (devtools/responsive-background.png)
+        skin/classic/aero/browser/devtools/tools-icons-small.png     (devtools/tools-icons-small.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/sync-throbber.png
         skin/classic/aero/browser/sync-16.png