Merge m-c to m-i

2024-09-13 09:24:08 -07:00 · 2013-06-23 15:17:04 -07:00 · 2013-06-23 15:17:04 -07:00 · ec7bded05c
commit ec7bded05c
parent f35b19292f 7f542efd72
96 changed files with 1580 additions and 1411 deletions
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@ -1130,6 +1130,7 @@ pref("devtools.webconsole.filter.csserror", true);
 pref("devtools.webconsole.filter.cssparser", true);
 pref("devtools.webconsole.filter.exception", true);
 pref("devtools.webconsole.filter.jswarn", true);
+pref("devtools.webconsole.filter.jslog", true);
 pref("devtools.webconsole.filter.error", true);
 pref("devtools.webconsole.filter.warn", true);
 pref("devtools.webconsole.filter.info", true);
@ -1137,6 +1138,21 @@ pref("devtools.webconsole.filter.log", true);
 pref("devtools.webconsole.filter.secerror", true);
 pref("devtools.webconsole.filter.secwarn", true);

+// Remember the Browser Console filters
+pref("devtools.browserconsole.filter.network", true);
+pref("devtools.browserconsole.filter.networkinfo", true);
+pref("devtools.browserconsole.filter.csserror", true);
+pref("devtools.browserconsole.filter.cssparser", true);
+pref("devtools.browserconsole.filter.exception", true);
+pref("devtools.browserconsole.filter.jswarn", true);
+pref("devtools.browserconsole.filter.jslog", true);
+pref("devtools.browserconsole.filter.error", true);
+pref("devtools.browserconsole.filter.warn", true);
+pref("devtools.browserconsole.filter.info", true);
+pref("devtools.browserconsole.filter.log", true);
+pref("devtools.browserconsole.filter.secerror", true);
+pref("devtools.browserconsole.filter.secwarn", true);
+
 // Text size in the Web Console. Use 0 for the system default size.
 pref("devtools.webconsole.fontSize", 0);

--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@ -598,8 +598,7 @@ html|*#gcli-output-frame,
 }

 .gclitoolbar-input-node,
-.gclitoolbar-complete-node,
-.gclitoolbar-prompt {
+.gclitoolbar-complete-node {
  direction: ltr;
 }

--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@ -1125,11 +1125,8 @@
                         tooltiptext="&devToolbarCloseButton.tooltiptext;"/>
 #endif
          <stack class="gclitoolbar-stack-node" flex="1">
-            <hbox class="gclitoolbar-prompt">
-              <label class="gclitoolbar-prompt-label">&#187;</label>
-            </hbox>
-            <hbox class="gclitoolbar-complete-node"/>
            <textbox class="gclitoolbar-input-node" rows="1"/>
+            <hbox class="gclitoolbar-complete-node"/>
          </stack>
          <toolbarbutton id="developer-toolbar-toolbox-button"
                         class="developer-toolbar-button"
--- a/browser/devtools/debugger/DebuggerPanel.jsm
+++ b/browser/devtools/debugger/DebuggerPanel.jsm
@ -24,6 +24,9 @@ this.DebuggerPanel = function DebuggerPanel(iframeWindow, toolbox) {
  this._controller._target = this.target;
  this._bkp = this._controller.Breakpoints;

+  this.highlightWhenPaused = this.highlightWhenPaused.bind(this);
+  this.unhighlightWhenResumed = this.unhighlightWhenResumed.bind(this);
+
  EventEmitter.decorate(this);
 }

@ -48,6 +51,8 @@ DebuggerPanel.prototype = {
      .then(() => this._controller.startupDebugger())
      .then(() => this._controller.connect())
      .then(() => {
+        this.target.on("thread-paused", this.highlightWhenPaused);
+        this.target.on("thread-resumed", this.unhighlightWhenResumed);
        this.isReady = true;
        this.emit("ready");
        return this;
@ -62,6 +67,8 @@ DebuggerPanel.prototype = {
  get target() this._toolbox.target,

  destroy: function() {
+    this.target.off("thread-paused", this.highlightWhenPaused);
+    this.target.off("thread-resumed", this.unhighlightWhenResumed);
    this.emit("destroyed");
    return Promise.resolve(null);
  },
@ -82,5 +89,13 @@ DebuggerPanel.prototype = {

  getAllBreakpoints: function() {
    return this._bkp.store;
+  },
+
+  highlightWhenPaused: function() {
+    this._toolbox.highlightTool("jsdebugger");
+  },
+
+  unhighlightWhenResumed: function() {
+    this._toolbox.unhighlightTool("jsdebugger");
  }
 };
--- a/browser/devtools/debugger/debugger-panes.js
+++ b/browser/devtools/debugger/debugger-panes.js
@ -1393,7 +1393,7 @@ WatchExpressionsView.prototype = Heritage.extend(WidgetMethods, {
    inputNode.addEventListener("blur", this._onBlur, false);
    inputNode.addEventListener("keypress", this._onKeyPress, false);

-    aElementNode.className = "dbg-expression title";
+    aElementNode.className = "dbg-expression";
    aElementNode.appendChild(arrowNode);
    aElementNode.appendChild(inputNode);
    aElementNode.appendChild(closeNode);
--- a/browser/devtools/debugger/test/Makefile.in
+++ b/browser/devtools/debugger/test/Makefile.in
@ -94,6 +94,7 @@ MOCHITEST_BROWSER_TESTS = \
 	browser_dbg_bug731394_editor-contextmenu.js \
 	browser_dbg_bug737803_editor_actual_location.js \
 	browser_dbg_bug786070_hide_nonenums.js \
+	browser_dbg_bug868163_highight_on_pause.js \
 	browser_dbg_displayName.js \
 	browser_dbg_pause-exceptions.js \
 	browser_dbg_multiple-windows.js \
--- a/browser/devtools/debugger/test/browser_dbg_bug868163_highight_on_pause.js
+++ b/browser/devtools/debugger/test/browser_dbg_bug868163_highight_on_pause.js
@ -0,0 +1,78 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+// Tests that debugger's tab is highlighted when it is paused and not the
+// currently selected tool.
+
+var gTab = null;
+var gDebugger = null;
+var gToolbox = null;
+var gToolboxTab = null;
+
+function test() {
+  debug_tab_pane(STACK_URL, function(aTab, aDebuggee, aPane) {
+    gTab = aTab;
+    gDebugger = aPane.panelWin;
+    gToolbox = aPane._toolbox;
+    gToolboxTab = gToolbox.doc.getElementById("toolbox-tab-jsdebugger");
+    testPause();
+  });
+}
+
+function testPause() {
+  is(gDebugger.DebuggerController.activeThread.paused, false,
+    "Should be running after debug_tab_pane.");
+
+  gDebugger.DebuggerController.activeThread.addOneTimeListener("paused", function() {
+    Services.tm.currentThread.dispatch({ run: function() {
+
+      gToolbox.selectTool("webconsole").then(() => {
+        ok(gToolboxTab.classList.contains("highlighted"),
+           "The highlighted class is present");
+        ok(!gToolboxTab.hasAttribute("selected") ||
+           gToolboxTab.getAttribute("selected") != "true",
+           "The tab is not selected");
+      }).then(() => gToolbox.selectTool("jsdebugger")).then(() => {
+        ok(gToolboxTab.classList.contains("highlighted"),
+           "The highlighted class is present");
+        ok(gToolboxTab.hasAttribute("selected") &&
+           gToolboxTab.getAttribute("selected") == "true",
+           "and the tab is selected, so the orange glow will not be present.");
+      }).then(testResume);
+    }}, 0);
+  });
+
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    gDebugger.document.getElementById("resume"),
+    gDebugger);
+}
+
+function testResume() {
+  gDebugger.DebuggerController.activeThread.addOneTimeListener("resumed", function() {
+    Services.tm.currentThread.dispatch({ run: function() {
+
+      gToolbox.selectTool("webconsole").then(() => {
+        ok(!gToolboxTab.classList.contains("highlighted"),
+           "The highlighted class is not present now after the resume");
+        ok(!gToolboxTab.hasAttribute("selected") ||
+           gToolboxTab.getAttribute("selected") != "true",
+           "The tab is not selected");
+      }).then(closeDebuggerAndFinish);
+    }}, 0);
+  });
+
+  EventUtils.sendMouseEvent({ type: "mousedown" },
+    gDebugger.document.getElementById("resume"),
+    gDebugger);
+}
+
+registerCleanupFunction(function() {
+  removeTab(gTab);
+  gTab = null;
+  gDebugger = null;
+  gToolbox = null;
+  gToolboxTab = null;
+});
--- a/browser/devtools/framework/sidebar.js
+++ b/browser/devtools/framework/sidebar.js
@ -4,6 +4,10 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

+const {Cu} = require("chrome");
+
+Cu.import("resource://gre/modules/Services.jsm");
+
 var Promise = require("sdk/core/promise");
 var EventEmitter = require("devtools/shared/event-emitter");
 var Telemetry = require("devtools/shared/telemetry");
@ -18,17 +22,24 @@ const XULNS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
 *  <tabbox> node;
 * @param {ToolPanel} panel
 *  Related ToolPanel instance;
+ * @param {String} uid
+ *  Unique ID
 * @param {Boolean} showTabstripe
 *  Show the tabs.
 */
-function ToolSidebar(tabbox, panel, showTabstripe=true)
+function ToolSidebar(tabbox, panel, uid, showTabstripe=true)
 {
  EventEmitter.decorate(this);

  this._tabbox = tabbox;
+  this._uid = uid;
  this._panelDoc = this._tabbox.ownerDocument;
  this._toolPanel = panel;

+  try {
+    this._width = Services.prefs.getIntPref("devtools.toolsidebar-width." + this._uid);
+  } catch(e) {}
+
  this._telemetry = new Telemetry();

  this._tabbox.tabpanels.addEventListener("select", this, true);
@ -165,6 +176,9 @@ ToolSidebar.prototype = {
   * Show the sidebar.
   */
  show: function ToolSidebar_show() {
+    if (this._width) {
+      this._tabbox.width = this._width;
+    }
    this._tabbox.removeAttribute("hidden");
  },

@ -172,6 +186,7 @@ ToolSidebar.prototype = {
   * Show the sidebar.
   */
  hide: function ToolSidebar_hide() {
+    Services.prefs.setIntPref("devtools.toolsidebar-width." + this._uid, this._tabbox.width);
    this._tabbox.setAttribute("hidden", "true");
  },

@ -196,6 +211,8 @@ ToolSidebar.prototype = {
    }
    this._destroyed = true;

+    Services.prefs.setIntPref("devtools.toolsidebar-width." + this._uid, this._tabbox.width);
+
    this._tabbox.tabpanels.removeEventListener("select", this, true);

    while (this._tabbox.tabpanels.hasChildNodes()) {
--- a/browser/devtools/framework/test/Makefile.in
+++ b/browser/devtools/framework/test/Makefile.in
@ -27,6 +27,7 @@ MOCHITEST_BROWSER_FILES = \
 		browser_toolbox_options_disablejs.js \
 		browser_toolbox_options_disablejs.html \
 		browser_toolbox_options_disablejs_iframe.html \
+		browser_toolbox_highlight.js \
 		$(NULL)

 include $(topsrcdir)/config/rules.mk
--- a/browser/devtools/framework/test/browser_toolbox_highlight.js
+++ b/browser/devtools/framework/test/browser_toolbox_highlight.js
@ -0,0 +1,84 @@
+/* Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let Toolbox = devtools.Toolbox;
+let temp = {};
+Cu.import("resource://gre/modules/Services.jsm", temp);
+let Services = temp.Services;
+temp = null;
+let toolbox = null;
+
+function test() {
+  waitForExplicitFinish();
+
+  const URL = "data:text/plain;charset=UTF-8,Nothing to see here, move along";
+
+  const TOOL_ID_1 = "jsdebugger";
+  const TOOL_ID_2 = "webconsole";
+
+  addTab(URL, () => {
+    let target = TargetFactory.forTab(gBrowser.selectedTab);
+    gDevTools.showToolbox(target, TOOL_ID_1, Toolbox.HostType.BOTTOM)
+             .then(aToolbox => {
+                toolbox = aToolbox;
+                // select tool 2
+                toolbox.selectTool(TOOL_ID_2)
+                       // and highlight the first one
+                       .then(highlightTab.bind(null, TOOL_ID_1))
+                       // to see if it has the proper class.
+                       .then(checkHighlighted.bind(null, TOOL_ID_1))
+                       // Now switch back to first tool
+                       .then(() => toolbox.selectTool(TOOL_ID_1))
+                       // to check again. But there is no easy way to test if
+                       // it is showing orange or not.
+                       .then(checkNoHighlightWhenSelected.bind(null, TOOL_ID_1))
+                       // Switch to tool 2 again
+                       .then(() => toolbox.selectTool(TOOL_ID_2))
+                       // and check again.
+                       .then(checkHighlighted.bind(null, TOOL_ID_1))
+                       // Now unhighlight the tool
+                       .then(unhighlightTab.bind(null, TOOL_ID_1))
+                       // to see the classes gone.
+                       .then(checkNoHighlight.bind(null, TOOL_ID_1))
+                       // Now close the toolbox and exit.
+                       .then(() => executeSoon(() => {
+                          toolbox.destroy()
+                                 .then(() => {
+                                   toolbox = null;
+                                   gBrowser.removeCurrentTab();
+                                   finish();
+                                 });
+                        }));
+              });
+  });
+}
+
+function highlightTab(toolId) {
+  info("Highlighting tool " + toolId + "'s tab.");
+  toolbox.highlightTool(toolId);
+}
+
+function unhighlightTab(toolId) {
+  info("Unhighlighting tool " + toolId + "'s tab.");
+  toolbox.unhighlightTool(toolId);
+}
+
+function checkHighlighted(toolId) {
+  let tab = toolbox.doc.getElementById("toolbox-tab-" + toolId);
+  ok(tab.classList.contains("highlighted"), "The highlighted class is present");
+  ok(!tab.hasAttribute("selected") || tab.getAttribute("selected") != "true",
+     "The tab is not selected");
+}
+
+function checkNoHighlightWhenSelected(toolId) {
+  let tab = toolbox.doc.getElementById("toolbox-tab-" + toolId);
+  ok(tab.classList.contains("highlighted"), "The highlighted class is present");
+  ok(tab.hasAttribute("selected") && tab.getAttribute("selected") == "true",
+     "and the tab is selected, so the orange glow will not be present.");
+}
+
+function checkNoHighlight(toolId) {
+  let tab = toolbox.doc.getElementById("toolbox-tab-" + toolId);
+  ok(!tab.classList.contains("highlighted"),
+     "The highlighted class is not present");
+}
--- a/browser/devtools/framework/test/browser_toolbox_sidebar.js
+++ b/browser/devtools/framework/test/browser_toolbox_sidebar.js
@ -52,7 +52,7 @@ function test() {
      ok(true, "Tool open");

      let tabbox = panel.panelDoc.getElementById("sidebar");
-      panel.sidebar = new ToolSidebar(tabbox, panel, true);
+      panel.sidebar = new ToolSidebar(tabbox, panel, "testbug865688", true);

      panel.sidebar.on("new-tab-registered", function(event, id) {
        registeredTabs[id] = true;
@ -119,13 +119,25 @@ function test() {
        panel.sidebar.hide();
        is(panel.sidebar._tabbox.getAttribute("hidden"), "true", "Sidebar hidden");
        is(panel.sidebar.getWindowForTab("tab1").location.href, tab1URL, "Window is accessible");
-        finishUp(panel);
+        testWidth(panel);
      });
    });

    panel.sidebar.select("tab2");
  }

+  function testWidth(panel) {
+    let tabbox = panel.panelDoc.getElementById("sidebar");
+    tabbox.width = 420;
+    panel.sidebar.destroy().then(function() {
+      tabbox.width = 0;
+      panel.sidebar = new ToolSidebar(tabbox, panel, "testbug865688", true);
+      panel.sidebar.show();
+      is(panel.panelDoc.getElementById("sidebar").width, 420, "Width restored")
+      finishUp(panel);
+    });
+  }
+
  function finishUp(panel) {
    panel.sidebar.destroy();
    gDevTools.unregisterTool(toolDefinition.id);
--- a/browser/devtools/framework/test/browser_toolbox_tool_ready.js
+++ b/browser/devtools/framework/test/browser_toolbox_tool_ready.js
@ -3,7 +3,7 @@

 function test() {
  addTab().then(function(data) {
-    let toolIds = [ "jsdebugger", "styleeditor", "webconsole", "inspector" ];
+    let toolIds = gDevTools.getToolDefinitionArray().map((def) => def.id);

    let open = function(index) {
      let toolId = toolIds[index];
@ -13,6 +13,9 @@ function test() {
        ok(toolbox, "toolbox exists for " + toolId);
        is(toolbox.currentToolId, toolId, "currentToolId should be " + toolId);

+        let panel = toolbox.getCurrentPanel();
+        ok(panel.isReady, toolId + " panel should be ready");
+
        let nextIndex = index + 1;
        if (nextIndex >= toolIds.length) {
          toolbox.destroy();
--- a/browser/devtools/framework/toolbox-options.js
+++ b/browser/devtools/framework/toolbox-options.js
@ -4,16 +4,33 @@

 "use strict";

-const {Cu} = require("chrome");
+const {Cu, Cc, Ci} = require("chrome");

 let Promise = require("sdk/core/promise");
 let EventEmitter = require("devtools/shared/event-emitter");

+Cu.import('resource://gre/modules/XPCOMUtils.jsm');
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource:///modules/devtools/gDevTools.jsm");

 exports.OptionsPanel = OptionsPanel;

+XPCOMUtils.defineLazyGetter(this, "l10n", function() {
+  let bundle = Services.strings.createBundle("chrome://browser/locale/devtools/toolbox.properties");
+  let l10n = function(aName, ...aArgs) {
+    try {
+      if (aArgs.length == 0) {
+        return bundle.GetStringFromName(aName);
+      } else {
+        return bundle.formatStringFromName(aName, aArgs, aArgs.length);
+      }
+    } catch (ex) {
+      Services.console.logStringMessage("Error reading '" + aName + "'");
+    }
+  };
+  return l10n;
+});
+
 /**
 * Represents the Options Panel in the Toolbox.
 */
@ -21,31 +38,43 @@ function OptionsPanel(iframeWindow, toolbox) {
  this.panelDoc = iframeWindow.document;
  this.panelWin = iframeWindow;
  this.toolbox = toolbox;
+  this.isReady = false;
+
+  // Make restart method available from xul
+  this.panelWin.restart = this.restart;

  EventEmitter.decorate(this);
 };

 OptionsPanel.prototype = {

-  open: function OP_open() {
+  get target() {
+    return this.toolbox.target;
+  },
+
+  open: function() {
    let deferred = Promise.defer();

    this.setupToolsList();
    this.populatePreferences();
+    this.prepareRestartPreferences();

    this._disableJSClicked = this._disableJSClicked.bind(this);

    let disableJSNode = this.panelDoc.getElementById("devtools-disable-javascript");
    disableJSNode.addEventListener("click", this._disableJSClicked, false);

+    this.isReady = true;
    this.emit("ready");
    deferred.resolve(this);
    return deferred.promise;
  },

-  setupToolsList: function OP_setupToolsList() {
+  setupToolsList: function() {
    let defaultToolsBox = this.panelDoc.getElementById("default-tools-box");
    let additionalToolsBox = this.panelDoc.getElementById("additional-tools-box");
+    let toolsNotSupportedLabel = this.panelDoc.getElementById("tools-not-supported-label");
+    let atleastOneToolNotSupported = false;

    defaultToolsBox.textContent = "";
    additionalToolsBox.textContent = "";
@ -71,31 +100,36 @@ OptionsPanel.prototype = {
      }
    };

+    let createToolCheckbox = tool => {
+      let checkbox = this.panelDoc.createElement("checkbox");
+      checkbox.setAttribute("id", tool.id);
+      checkbox.setAttribute("tooltiptext", tool.tooltip || "");
+      if (tool.isTargetSupported(this.target)) {
+        checkbox.setAttribute("label", tool.label);
+      }
+      else {
+        atleastOneToolNotSupported = true;
+        checkbox.setAttribute("label",
+                              l10n("options.toolNotSupportedMarker", tool.label));
+      }
+      checkbox.setAttribute("checked", pref(tool.visibilityswitch));
+      checkbox.addEventListener("command", onCheckboxClick.bind(checkbox, tool.id));
+      return checkbox;
+    };
+
    // Populating the default tools lists
    for (let tool of gDevTools.getDefaultTools()) {
      if (tool.id == "options") {
        continue;
      }
-      let checkbox = this.panelDoc.createElement("checkbox");
-      checkbox.setAttribute("id", tool.id);
-      checkbox.setAttribute("label", tool.label);
-      checkbox.setAttribute("tooltiptext", tool.tooltip || "");
-      checkbox.setAttribute("checked", pref(tool.visibilityswitch));
-      checkbox.addEventListener("command", onCheckboxClick.bind(checkbox, tool.id));
-      defaultToolsBox.appendChild(checkbox);
+      defaultToolsBox.appendChild(createToolCheckbox(tool));
    }

    // Populating the additional tools list that came from add-ons.
    let atleastOneAddon = false;
    for (let tool of gDevTools.getAdditionalTools()) {
      atleastOneAddon = true;
-      let checkbox = this.panelDoc.createElement("checkbox");
-      checkbox.setAttribute("id", tool.id);
-      checkbox.setAttribute("label", tool.label);
-      checkbox.setAttribute("tooltiptext", tool.tooltip || "");
-      checkbox.setAttribute("checked", pref(tool.visibilityswitch));
-      checkbox.addEventListener("command", onCheckboxClick.bind(checkbox, tool.id));
-      additionalToolsBox.appendChild(checkbox);
+      additionalToolsBox.appendChild(createToolCheckbox(tool));
    }

    if (!atleastOneAddon) {
@ -103,10 +137,14 @@ OptionsPanel.prototype = {
      additionalToolsBox.previousSibling.style.display = "none";
    }

+    if (!atleastOneToolNotSupported) {
+      toolsNotSupportedLabel.style.display = "none";
+    }
+
    this.panelWin.focus();
  },

-  populatePreferences: function OP_populatePreferences() {
+  populatePreferences: function() {
    let prefCheckboxes = this.panelDoc.querySelectorAll("checkbox[data-pref]");
    for (let checkbox of prefCheckboxes) {
      checkbox.checked = Services.prefs.getBoolPref(checkbox.getAttribute("data-pref"));
@ -142,6 +180,38 @@ OptionsPanel.prototype = {
    }
  },

+  /**
+   * Hides any label in a box with class "hidden-labels-box" at page load. The
+   * labels are shown again when the user click on the checkbox in the box.
+   */
+  prepareRestartPreferences: function() {
+    let labels = this.panelDoc.querySelectorAll(".hidden-labels-box > label");
+    for (let label of labels) {
+      label.style.display = "none";
+    }
+    let checkboxes = this.panelDoc.querySelectorAll(".hidden-labels-box > checkbox");
+    for (let checkbox of checkboxes) {
+      checkbox.addEventListener("command", function(target) {
+        target.nextSibling.style.display = "";
+        target.nextSibling.nextSibling.style.display = "";
+      }.bind(null, checkbox));
+    }
+  },
+
+  restart: function() {
+    let canceled = Cc["@mozilla.org/supports-PRBool;1"]
+                     .createInstance(Ci.nsISupportsPRBool);
+    Services.obs.notifyObservers(canceled, "quit-application-requested", "restart");
+    if (canceled.data) {
+      return;
+    }
+
+    // restart
+    Cc['@mozilla.org/toolkit/app-startup;1']
+      .getService(Ci.nsIAppStartup)
+      .quit(Ci.nsIAppStartup.eAttemptQuit | Ci.nsIAppStartup.eRestart);
+  },
+
  /**
   * Disables JavaScript for the currently loaded tab. We force a page refresh
   * here because setting docShell.allowJavascript to true fails to block JS
--- a/browser/devtools/framework/toolbox-options.xul
+++ b/browser/devtools/framework/toolbox-options.xul
@ -18,6 +18,9 @@
        <vbox id="default-tools-box" class="options-groupbox" tabindex="0"/>
        <label value="&options.selectAdditionalTools.label;"/>
        <vbox id="additional-tools-box" class="options-groupbox"/>
+        <label id="tools-not-supported-label"
+               class="options-citation-label"
+               value="&options.toolNotSupported.label;"/>
      </vbox>
      <vbox class="options-vertical-pane" flex="1">
        <label value="&options.selectDevToolsTheme.label;"/>
@ -36,17 +39,33 @@
        </vbox>
        <label value="&options.context.advancedSettings;"/>
        <vbox id="context-options" class="options-groupbox">
-          <checkbox label="&options.enableChrome.label2;"
-                    tooltiptext="&options.enableChrome.tooltip;"
-                    data-pref="devtools.chrome.enabled"/>
-          <checkbox label="&options.enableRemote.label2;"
-                    tooltiptext="&options.enableRemote.tooltip;"
-                    data-pref="devtools.debugger.remote-enabled"/>
-          <checkbox id="devtools-disable-javascript"
-                    label="&options.disableJavaScript.label;"
-                    tooltiptext="&options.disableJavaScript.tooltip;"/>
-          <label value="&options.context.requiresRestart;"/>
-          <label value="&options.context.triggersPageRefresh;"/>
+          <hbox>
+            <checkbox id="devtools-disable-javascript"
+                      label="&options.disableJavaScript.label2;"
+                      tooltiptext="&options.disableJavaScript.tooltip;"/>
+            <label class="options-citation-label"
+                   value="(&options.context.triggersPageRefresh2;)"/>
+          </hbox>
+          <hbox class="hidden-labels-box">
+            <checkbox label="&options.enableChrome.label3;"
+                      tooltiptext="&options.enableChrome.tooltip;"
+                      data-pref="devtools.chrome.enabled"/>
+            <label class="options-citation-label"
+                   value="&options.context.requiresRestart2;"/>
+            <label class="text-link"
+                   onclick="restart()"
+                   value="&options.restartButton.label;"/>
+          </hbox>
+          <hbox class="hidden-labels-box">
+            <checkbox label="&options.enableRemote.label3;"
+                      tooltiptext="&options.enableRemote.tooltip;"
+                      data-pref="devtools.debugger.remote-enabled"/>
+            <label class="options-citation-label"
+                   value="&options.context.requiresRestart2;"/>
+            <label class="text-link"
+                   onclick="restart()"
+                   value="&options.restartButton.label;"/>
+          </hbox>
        </vbox>
      </vbox>
    </hbox>
--- a/browser/devtools/framework/toolbox.js
+++ b/browser/devtools/framework/toolbox.js
@ -371,7 +371,15 @@ Toolbox.prototype = {

    if (toolDefinition.icon) {
      let image = this.doc.createElement("image");
-      image.setAttribute("src", toolDefinition.icon);
+      image.className = "default-icon";
+      image.setAttribute("src",
+                         toolDefinition.icon || toolDefinition.highlightedicon);
+      radio.appendChild(image);
+      // Adding the highlighted icon image
+      image = this.doc.createElement("image");
+      image.className = "highlighted-icon";
+      image.setAttribute("src",
+                         toolDefinition.highlightedicon || toolDefinition.icon);
      radio.appendChild(image);
    }

@ -410,7 +418,7 @@ Toolbox.prototype = {
  },

  /**
-   * Load a tool with a given id.
+   * Ensure the tool with the given id is loaded.
   *
   * @param {string} id
   *        The id of the tool to load.
@ -420,11 +428,22 @@ Toolbox.prototype = {
    let iframe = this.doc.getElementById("toolbox-panel-iframe-" + id);

    if (iframe) {
-      this.once(id + "-ready", () => { deferred.resolve() });
+      let panel = this._toolPanels.get(id);
+      if (panel) {
+        deferred.resolve(panel);
+      } else {
+        this.once(id + "-ready", (panel) => {
+          deferred.resolve(panel);
+        });
+      }
      return deferred.promise;
    }

    let definition = gDevTools.getToolDefinitionMap().get(id);
+    if (!definition) {
+      deferred.reject(new Error("no such tool id "+id));
+      return deferred.promise;
+    }
    iframe = this.doc.createElement("iframe");
    iframe.className = "toolbox-panel-iframe";
    iframe.id = "toolbox-panel-iframe-" + id;
@ -459,8 +478,6 @@ Toolbox.prototype = {
   *        The id of the tool to switch to
   */
  selectTool: function TBOX_selectTool(id) {
-    let deferred = Promise.defer();
-
    let selected = this.doc.querySelector(".devtools-tab[selected]");
    if (selected) {
      selected.removeAttribute("selected");
@ -508,41 +525,37 @@ Toolbox.prototype = {
    deck.selectedIndex = index;

    this._currentToolId = id;
-
-    let resolveSelected = panel => {
-      this.emit("select", id);
-      this.emit(id + "-selected", panel);
-      deferred.resolve(panel);
-    };
-
-    let iframe = this.doc.getElementById("toolbox-panel-iframe-" + id);
-    if (!iframe) {
-      this.loadTool(id).then((panel) => {
-        this.emit("select", id);
-        this.emit(id + "-selected", panel);
-        deferred.resolve(panel);
-      });
-    } else {
-      let panel = this._toolPanels.get(id);
-      // only emit 'select' event if the iframe has been loaded
-      if (panel && (!panel.contentDocument ||
-                    panel.contentDocument.readyState == "complete")) {
-        resolveSelected(panel);
-      }
-      else if (panel) {
-        let boundLoad = function() {
-          panel.removeEventListener("DOMContentLoaded", boundLoad, true);
-          resolveSelected(panel);
-        };
-        panel.addEventListener("DOMContentLoaded", boundLoad, true);
-      }
-    }
-
    if (id != "options") {
      Services.prefs.setCharPref(this._prefs.LAST_TOOL, id);
    }

-    return deferred.promise;
+    return this.loadTool(id).then((panel) => {
+      this.emit("select", id);
+      this.emit(id + "-selected", panel);
+      return panel;
+    });
+  },
+
+  /**
+   * Highlights the tool's tab if it is not the currently selected tool.
+   *
+   * @param {string} id
+   *        The id of the tool to highlight
+   */
+  highlightTool: function TBOX_highlightTool(id) {
+    let tab = this.doc.getElementById("toolbox-tab-" + id);
+    tab && tab.classList.add("highlighted");
+  },
+
+  /**
+   * De-highlights the tool's tab.
+   *
+   * @param {string} id
+   *        The id of the tool to unhighlight
+   */
+  unhighlightTool: function TBOX_unhighlightTool(id) {
+    let tab = this.doc.getElementById("toolbox-tab-" + id);
+    tab && tab.classList.remove("highlighted");
  },

  /**
--- a/browser/devtools/framework/toolbox.xul
+++ b/browser/devtools/framework/toolbox.xul
@ -30,6 +30,7 @@
 #ifdef XP_MACOSX
      <hbox id="toolbox-controls">
        <toolbarbutton id="toolbox-close"
+                       class="devtools-closebutton"
                       tooltiptext="&toolboxCloseButton.tooltip;"/>
        <hbox id="toolbox-dock-buttons"/>
      </hbox>
@ -42,6 +43,7 @@
      <hbox id="toolbox-controls">
        <hbox id="toolbox-dock-buttons"/>
        <toolbarbutton id="toolbox-close"
+                       class="devtools-closebutton"
                       tooltiptext="&toolboxCloseButton.tooltip;"/>
      </hbox>
 #endif
--- a/browser/devtools/inspector/inspector-panel.js
+++ b/browser/devtools/inspector/inspector-panel.js
@ -221,7 +221,7 @@ InspectorPanel.prototype = {
   */
  setupSidebar: function InspectorPanel_setupSidebar() {
    let tabbox = this.panelDoc.querySelector("#inspector-sidebar");
-    this.sidebar = new ToolSidebar(tabbox, this);
+    this.sidebar = new ToolSidebar(tabbox, this, "inspector");

    let defaultTab = Services.prefs.getCharPref("devtools.inspector.activeSidebar");

--- a/browser/devtools/jar.mn
+++ b/browser/devtools/jar.mn
@ -13,7 +13,7 @@ browser.jar:
    content/browser/devtools/netmonitor-view.js                        (netmonitor/netmonitor-view.js)
    content/browser/devtools/NetworkPanel.xhtml                        (webconsole/NetworkPanel.xhtml)
    content/browser/devtools/webconsole.js                             (webconsole/webconsole.js)
-    content/browser/devtools/webconsole.xul                            (webconsole/webconsole.xul)
+*   content/browser/devtools/webconsole.xul                            (webconsole/webconsole.xul)
 *   content/browser/devtools/scratchpad.xul                            (scratchpad/scratchpad.xul)
    content/browser/devtools/scratchpad.js                             (scratchpad/scratchpad.js)
    content/browser/devtools/splitview.css                             (shared/splitview.css)
--- a/browser/devtools/main.js
+++ b/browser/devtools/main.js
@ -113,6 +113,7 @@ Tools.jsdebugger = {
  ordinal: 3,
  visibilityswitch: "devtools.debugger.enabled",
  icon: "chrome://browser/skin/devtools/tool-debugger.png",
+  highlightedicon: "chrome://browser/skin/devtools/tool-debugger-paused.png",
  url: "chrome://browser/content/devtools/debugger.xul",
  label: l10n("ToolboxDebugger.label", debuggerStrings),
  tooltip: l10n("ToolboxDebugger.tooltip", debuggerStrings),
--- a/browser/devtools/scratchpad/scratchpad.js
+++ b/browser/devtools/scratchpad/scratchpad.js
@ -1485,7 +1485,7 @@ function ScratchpadSidebar(aScratchpad)
 {
  let ToolSidebar = devtools.require("devtools/framework/sidebar").ToolSidebar;
  let tabbox = document.querySelector("#scratchpad-sidebar");
-  this._sidebar = new ToolSidebar(tabbox, this);
+  this._sidebar = new ToolSidebar(tabbox, this, "scratchpad");
  this._scratchpad = aScratchpad;
 }

--- a/browser/devtools/shared/splitview.css
+++ b/browser/devtools/shared/splitview.css
@ -84,7 +84,7 @@ ol.splitview-nav > li.splitview-filtered {

 /* portrait mode */
@media (max-width: 550px) {
-  #splitview-details-toolbar {
+  .splitview-landscape-splitter {
    display: none;
  }

--- a/browser/devtools/shared/widgets/VariablesView.jsm
+++ b/browser/devtools/shared/widgets/VariablesView.jsm
@ -2373,6 +2373,7 @@ Variable.prototype = Heritage.extend(Scope.prototype, {
      if (!this._isUndefined || !(ownerView.getter && ownerView.setter)) {
        let deleteNode = this._deleteNode = this.document.createElement("toolbarbutton");
        deleteNode.className = "plain variables-view-delete";
+        deleteNode.setAttribute("ordinal", 2);
        deleteNode.addEventListener("click", this._onDelete.bind(this), false);
        this._title.appendChild(deleteNode);
      }
--- a/browser/devtools/styleeditor/styleeditor.xul
+++ b/browser/devtools/styleeditor/styleeditor.xul
@ -59,7 +59,7 @@
        </xul:toolbar>
      </xul:box>
      <xul:box id="splitview-resizer-target" class="splitview-nav-container"
-              persist="width height">
+              persist="height">
        <ol class="splitview-nav" tabindex="0"></ol>
        <div class="splitview-nav placeholder empty">
          <p><strong>&noStyleSheet.label;</strong></p>
@ -70,6 +70,7 @@
        </div>
      </xul:box> <!-- .splitview-nav-container -->
    </xul:box>   <!-- .splitview-controller -->
+    <xul:splitter class="devtools-side-splitter splitview-landscape-splitter"/>
    <xul:box class="splitview-side-details"/>

    <div id="splitview-templates" hidden="true">
@ -95,11 +96,6 @@
        <xul:resizer class="splitview-portrait-resizer"
                    dir="bottom"
                    element="splitview-resizer-target"/>
-        <xul:toolbar id="splitview-details-toolbar" class="devtools-toolbar">
-          <xul:resizer class="splitview-landscape-resizer"
-                      dir="bottomend"
-                      element="splitview-resizer-target"/>
-        </xul:toolbar>
        <xul:box class="stylesheet-editor-input textbox"
                data-placeholder="&editorTextbox.placeholder;"/>
      </xul:box>
--- a/browser/devtools/webconsole/HUDService.jsm
+++ b/browser/devtools/webconsole/HUDService.jsm
@ -43,6 +43,9 @@ let l10n = new WebConsoleUtils.l10n(STRINGS_URI);

 const BROWSER_CONSOLE_WINDOW_FEATURES = "chrome,titlebar,toolbar,centerscreen,resizable,dialog=no";

+// The preference prefix for all of the Browser Console filters.
+const BROWSER_CONSOLE_FILTER_PREFS_PREFIX = "devtools.browserconsole.filter.";
+
 this.EXPORTED_SYMBOLS = ["HUDService"];

 ///////////////////////////////////////////////////////////////////////////
@ -205,6 +208,8 @@ function WebConsole(aTarget, aIframeWindow, aChromeWindow)
  if (element.getAttribute("windowtype") != "navigator:browser") {
    this.browserWindow = HUDService.currentContext();
  }
+
+  this.ui = new this.iframeWindow.WebConsoleFrame(this);
 }

 WebConsole.prototype = {
@ -213,6 +218,7 @@ WebConsole.prototype = {
  browserWindow: null,
  hudId: null,
  target: null,
+  ui: null,
  _browserConsole: false,
  _destroyer: null,

@ -252,7 +258,6 @@ WebConsole.prototype = {
   */
  init: function WC_init()
  {
-    this.ui = new this.iframeWindow.WebConsoleFrame(this);
    return this.ui.init().then(() => this);
  },

@ -545,6 +550,8 @@ BrowserConsole.prototype = Heritage.extend(WebConsole.prototype,
      return this._bc_init;
    }

+    this.ui._filterPrefsPrefix = BROWSER_CONSOLE_FILTER_PREFS_PREFIX;
+
    let window = this.iframeWindow;

    // Make sure that the closing of the Browser Console window destroys this
--- a/browser/devtools/webconsole/test/Makefile.in
+++ b/browser/devtools/webconsole/test/Makefile.in
@ -137,6 +137,9 @@ MOCHITEST_BROWSER_FILES = \
 	browser_console_addonsdk_loader_exception.js \
 	browser_console_error_source_click.js \
 	browser_console_clear_on_reload.js \
+	browser_console_keyboard_accessibility.js \
+	browser_console_filters.js \
+	browser_console_dead_objects.js \
 	head.js \
 	$(NULL)

--- a/browser/devtools/webconsole/test/browser_console_dead_objects.js
+++ b/browser/devtools/webconsole/test/browser_console_dead_objects.js
@ -0,0 +1,79 @@
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+// Check that Dead Objects do not break the Web/Browser Consoles. See bug 883649.
+
+const TEST_URI = "data:text/html;charset=utf8,<p>dead objects!";
+
+function test()
+{
+  let hud = null;
+
+  addTab(TEST_URI);
+  browser.addEventListener("load", function onLoad() {
+    browser.removeEventListener("load", onLoad, true);
+    info("open the browser console");
+    HUDConsoleUI.toggleBrowserConsole().then(onBrowserConsoleOpen);
+  }, true);
+
+  function onBrowserConsoleOpen(aHud)
+  {
+    hud = aHud;
+    ok(hud, "browser console opened");
+
+    hud.jsterm.clearOutput();
+    hud.jsterm.execute("foobarzTezt = content.document", onAddVariable);
+  }
+
+  function onAddVariable()
+  {
+    gBrowser.removeCurrentTab();
+
+    hud.jsterm.execute("foobarzTezt", onReadVariable);
+  }
+
+  function onReadVariable()
+  {
+    isnot(hud.outputNode.textContent.indexOf("[object DeadObject]"), -1,
+          "dead object found");
+
+    hud.jsterm.setInputValue("foobarzTezt");
+
+    for (let c of ".hello") {
+      EventUtils.synthesizeKey(c, {}, hud.iframeWindow);
+    }
+
+    hud.jsterm.execute(null, onReadProperty);
+  }
+
+  function onReadProperty()
+  {
+    isnot(hud.outputNode.textContent.indexOf("can't access dead object"), -1,
+          "'cannot access dead object' message found");
+
+    // Click the second execute output.
+    let clickable = hud.outputNode.querySelectorAll(".webconsole-msg-output")[1]
+                    .querySelector(".hud-clickable");
+    ok(clickable, "clickable object found");
+    isnot(clickable.textContent.indexOf("[object DeadObject]"), -1,
+          "message text check");
+
+    hud.jsterm.once("variablesview-fetched", onFetched);
+    EventUtils.synthesizeMouse(clickable, 2, 2, {}, hud.iframeWindow);
+  }
+
+  function onFetched()
+  {
+    hud.jsterm.execute("delete window.foobarzTezt; 2013-26", onCalcResult);
+  }
+
+  function onCalcResult()
+  {
+    isnot(hud.outputNode.textContent.indexOf("1987"), -1, "result message found");
+
+    // executeSoon() is needed to get out of the execute() event loop.
+    executeSoon(finishTest);
+  }
+}
--- a/browser/devtools/webconsole/test/browser_console_filters.js
+++ b/browser/devtools/webconsole/test/browser_console_filters.js
@ -0,0 +1,71 @@
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+// Check that the Browser Console does not use the same filter prefs as the Web
+// Console. See bug 878186.
+
+const TEST_URI = "data:text/html;charset=utf8,<p>browser console filters";
+const WEB_CONSOLE_PREFIX = "devtools.webconsole.filter.";
+const BROWSER_CONSOLE_PREFIX = "devtools.browserconsole.filter.";
+
+function test()
+{
+  addTab(TEST_URI);
+  browser.addEventListener("load", function onLoad() {
+    browser.removeEventListener("load", onLoad, true);
+    info("open the web console");
+    openConsole(null, consoleOpened);
+  }, true);
+}
+
+function consoleOpened(hud)
+{
+  ok(hud, "web console opened");
+
+  is(Services.prefs.getBoolPref(BROWSER_CONSOLE_PREFIX + "exception"), true,
+     "'exception' filter is enabled (browser console)");
+  is(Services.prefs.getBoolPref(WEB_CONSOLE_PREFIX + "exception"), true,
+     "'exception' filter is enabled (web console)");
+
+  info("toggle 'exception' filter");
+  hud.setFilterState("exception", false);
+
+  is(Services.prefs.getBoolPref(BROWSER_CONSOLE_PREFIX + "exception"), true,
+     "'exception' filter is enabled (browser console)");
+  is(Services.prefs.getBoolPref(WEB_CONSOLE_PREFIX + "exception"), false,
+     "'exception' filter is disabled (web console)");
+
+  hud.setFilterState("exception", true);
+
+  executeSoon(() => closeConsole(null, onWebConsoleClose));
+}
+
+function onWebConsoleClose()
+{
+  info("web console closed");
+  HUDConsoleUI.toggleBrowserConsole().then(onBrowserConsoleOpen);
+}
+
+function onBrowserConsoleOpen(hud)
+{
+  ok(hud, "browser console opened");
+
+  is(Services.prefs.getBoolPref(BROWSER_CONSOLE_PREFIX + "exception"), true,
+     "'exception' filter is enabled (browser console)");
+  is(Services.prefs.getBoolPref(WEB_CONSOLE_PREFIX + "exception"), true,
+     "'exception' filter is enabled (web console)");
+
+  info("toggle 'exception' filter");
+  hud.setFilterState("exception", false);
+
+  is(Services.prefs.getBoolPref(BROWSER_CONSOLE_PREFIX + "exception"), false,
+     "'exception' filter is disabled (browser console)");
+  is(Services.prefs.getBoolPref(WEB_CONSOLE_PREFIX + "exception"), true,
+     "'exception' filter is enabled (web console)");
+
+  hud.setFilterState("exception", true);
+
+  executeSoon(finishTest);
+}
--- a/browser/devtools/webconsole/test/browser_console_keyboard_accessibility.js
+++ b/browser/devtools/webconsole/test/browser_console_keyboard_accessibility.js
@ -0,0 +1,69 @@
+/*
+ * Any copyright is dedicated to the Public Domain.
+ * http://creativecommons.org/publicdomain/zero/1.0/
+ */
+
+// Check that basic keyboard shortcuts work in the web console.
+
+function test()
+{
+  const TEST_URI = "http://example.com/browser/browser/devtools/webconsole/test/test-console.html";
+  let hud = null;
+
+  addTab(TEST_URI);
+
+  browser.addEventListener("load", function onLoad() {
+    browser.removeEventListener("load", onLoad, true);
+    openConsole(null, consoleOpened);
+  }, true);
+
+  function consoleOpened(aHud)
+  {
+    hud = aHud;
+    ok(hud, "Web Console opened");
+
+    content.console.log("foobarz1");
+    waitForMessages({
+      webconsole: hud,
+      messages: [{
+        text: "foobarz1",
+        category: CATEGORY_WEBDEV,
+        severity: SEVERITY_LOG,
+      }],
+    }).then(onConsoleMessage);
+  }
+
+  function onConsoleMessage()
+  {
+    hud.jsterm.once("messages-cleared", onClear);
+    info("try ctrl-k to clear output");
+    EventUtils.synthesizeKey("K", { accelKey: true });
+  }
+
+  function onClear()
+  {
+    is(hud.outputNode.textContent.indexOf("foobarz1"), -1, "output cleared");
+    is(hud.jsterm.inputNode.getAttribute("focused"), "true",
+       "jsterm input is focused");
+
+    info("try ctrl-f to focus filter");
+    EventUtils.synthesizeKey("F", { accelKey: true });
+    ok(!hud.jsterm.inputNode.getAttribute("focused"),
+       "jsterm input is not focused");
+    is(hud.ui.filterBox.getAttribute("focused"), "true",
+       "filter input is focused");
+
+    if (Services.appinfo.OS == "Darwin") {
+      EventUtils.synthesizeKey("t", { ctrlKey: true });
+    }
+    else {
+      EventUtils.synthesizeKey("N", { altKey: true });
+    }
+
+    let net = hud.ui.document.querySelector("toolbarbutton[category=net]");
+    is(hud.ui.document.activeElement, net,
+       "accesskey for Network category focuses the Net button");
+
+    finishTest();
+  }
+}
--- a/browser/devtools/webconsole/test/browser_console_nsiconsolemessage.js
+++ b/browser/devtools/webconsole/test/browser_console_nsiconsolemessage.js
@ -75,5 +75,21 @@ function onBrowserConsoleOpen(hud)
        category: CATEGORY_JS,
      },
    ],
-  }).then(finishTest);
+  }).then(testFiltering);
+
+  function testFiltering(results)
+  {
+    let msg = [...results[2].matched][0];
+    ok(msg, "message element for do-not-show-me (nsIConsoleMessage)");
+    isnot(msg.textContent.indexOf("do-not-show"), -1, "element content is correct");
+    ok(!msg.classList.contains("hud-filtered-by-type"), "element is not filtered");
+
+    hud.setFilterState("jslog", false);
+
+    ok(msg.classList.contains("hud-filtered-by-type"), "element is filtered");
+
+    hud.setFilterState("jslog", true);
+
+    finishTest();
+  }
 }
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_585991_autocomplete_keys.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_585991_autocomplete_keys.js
@ -4,7 +4,7 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

 const TEST_URI = "data:text/html;charset=utf-8,<p>bug 585991 - autocomplete popup keyboard usage test";
-let HUD;
+let HUD, popup, jsterm, inputNode, completeNode;

 function test() {
  addTab(TEST_URI);
@ -16,6 +16,7 @@ function test() {

 function consoleOpened(aHud) {
  HUD = aHud;
+  info("web console opened");

  content.wrappedJSObject.foobarBug585991 = {
    "item0": "value0",
@ -24,9 +25,10 @@ function consoleOpened(aHud) {
    "item3": "value3",
  };

-  let jsterm = HUD.jsterm;
-  let popup = jsterm.autocompletePopup;
-  let completeNode = jsterm.completeNode;
+  jsterm = HUD.jsterm;
+  popup = jsterm.autocompletePopup;
+  completeNode = jsterm.completeNode;
+  inputNode = jsterm.inputNode;

  ok(!popup.isOpen, "popup is not open");

@ -90,23 +92,20 @@ function consoleOpened(aHud) {
    is(completeNode.value, prefix + "watch",
        "completeNode.value holds watch");

-    popup._panel.addEventListener("popuphidden", autocompletePopupHidden, false);
-
+    info("press Tab and wait for popup to hide");
+    popup._panel.addEventListener("popuphidden", popupHideAfterTab, false);
    EventUtils.synthesizeKey("VK_TAB", {});
  }, false);

+  info("wait for completion: window.foobarBug585991.");
  jsterm.setInputValue("window.foobarBug585991");
  EventUtils.synthesizeKey(".", {});
 }

-function autocompletePopupHidden()
+function popupHideAfterTab()
 {
-  let jsterm = HUD.jsterm;
-  let popup = jsterm.autocompletePopup;
-  let completeNode = jsterm.completeNode;
-  let inputNode = jsterm.inputNode;
-
-  popup._panel.removeEventListener("popuphidden", autocompletePopupHidden, false);
+  // At this point the completion suggestion should be accepted.
+  popup._panel.removeEventListener("popuphidden", popupHideAfterTab, false);

  ok(!popup.isOpen, "popup is not open");

@ -146,11 +145,13 @@ function autocompletePopupHidden()
      executeSoon(testReturnKey);
    }, false);

+    info("press Escape to close the popup");
    executeSoon(function() {
      EventUtils.synthesizeKey("VK_ESCAPE", {});
    });
  }, false);

+  info("wait for completion: window.foobarBug585991.");
  executeSoon(function() {
    jsterm.setInputValue("window.foobarBug585991");
    EventUtils.synthesizeKey(".", {});
@ -159,11 +160,6 @@ function autocompletePopupHidden()

 function testReturnKey()
 {
-  let jsterm = HUD.jsterm;
-  let popup = jsterm.autocompletePopup;
-  let completeNode = jsterm.completeNode;
-  let inputNode = jsterm.inputNode;
-
  popup._panel.addEventListener("popupshown", function onShown() {
    popup._panel.removeEventListener("popupshown", onShown, false);

@ -187,28 +183,28 @@ function testReturnKey()
    is(popup.selectedIndex, 1, "index 1 is selected");
    is(popup.selectedItem.label, "valueOf", "valueOf is selected");
    is(completeNode.value, prefix + "valueOf",
-        "completeNode.value holds valueOf");
+       "completeNode.value holds valueOf");

    popup._panel.addEventListener("popuphidden", function onHidden() {
      popup._panel.removeEventListener("popuphidden", onHidden, false);

      ok(!popup.isOpen, "popup is not open after VK_RETURN");

-      // modified by bug 873250
-      is(inputNode.value, "", "no completion after VK_RETURN");
-      isnot(jsterm.lastInputValue, "window.foobarBug585991.valueOf",
-        "lastInputValue is not window.foobarBug585991.valueOf");
-      EventUtils.synthesizeKey("VK_UP", {});
-      is(inputNode.value, jsterm.lastInputValue, "previous entry was lastInputNode")
+      is(inputNode.value, "window.foobarBug585991.valueOf",
+         "completion was successful after VK_RETURN");

      ok(!completeNode.value, "completeNode is empty");

      dontShowArrayNumbers();
    }, false);

-    EventUtils.synthesizeKey("VK_RETURN", {});
+    info("press Return to accept suggestion. wait for popup to hide");
+
+    executeSoon(() => EventUtils.synthesizeKey("VK_RETURN", {}));
  }, false);

+  info("wait for completion suggestions: window.foobarBug585991.");
+
  executeSoon(function() {
    jsterm.setInputValue("window.foobarBug58599");
    EventUtils.synthesizeKey("1", {});
@ -218,6 +214,7 @@ function testReturnKey()

 function dontShowArrayNumbers()
 {
+  info("dontShowArrayNumbers");
  content.wrappedJSObject.foobarBug585991 = ["Sherlock Holmes"];

  let jsterm = HUD.jsterm;
@ -231,14 +228,56 @@ function dontShowArrayNumbers()
    ok(!sameItems.some(function(prop, index) { prop === "0"; }),
       "Completing on an array doesn't show numbers.");

-    popup._panel.addEventListener("popuphidden", consoleOpened, false);
+    popup._panel.addEventListener("popuphidden", testReturnWithNoSelection, false);

-    EventUtils.synthesizeKey("VK_TAB", {});
-
-    executeSoon(finishTest);
+    info("wait for popup to hide");
+    executeSoon(() => EventUtils.synthesizeKey("VK_ESCAPE", {}));
  }, false);

-  jsterm.setInputValue("window.foobarBug585991");
-  EventUtils.synthesizeKey(".", {});
+  info("wait for popup to show");
+  executeSoon(() => {
+    jsterm.setInputValue("window.foobarBug585991");
+    EventUtils.synthesizeKey(".", {});
+  });
 }

+function testReturnWithNoSelection()
+{
+  popup._panel.removeEventListener("popuphidden", testReturnWithNoSelection, false);
+
+  info("test pressing return with open popup, but no selection, see bug 873250");
+  content.wrappedJSObject.testBug873250a = "hello world";
+  content.wrappedJSObject.testBug873250b = "hello world 2";
+
+  popup._panel.addEventListener("popupshown", function onShown() {
+    popup._panel.removeEventListener("popupshown", onShown);
+
+    ok(popup.isOpen, "popup is open");
+    is(popup.itemCount, 2, "popup.itemCount is correct");
+    isnot(popup.selectedIndex, -1, "popup.selectedIndex is correct");
+
+    info("press Return and wait for popup to hide");
+    popup._panel.addEventListener("popuphidden", popupHideAfterReturnWithNoSelection);
+    executeSoon(() => EventUtils.synthesizeKey("VK_RETURN", {}));
+  });
+
+  executeSoon(() => {
+    info("wait for popup to show");
+    jsterm.setInputValue("window.testBu");
+    EventUtils.synthesizeKey("g", {});
+  });
+}
+
+function popupHideAfterReturnWithNoSelection()
+{
+  popup._panel.removeEventListener("popuphidden", popupHideAfterReturnWithNoSelection);
+
+  ok(!popup.isOpen, "popup is not open after VK_RETURN");
+
+  is(inputNode.value, "", "inputNode is empty after VK_RETURN");
+  is(completeNode.value, "", "completeNode is empty");
+  is(jsterm.history[jsterm.history.length-1], "window.testBug",
+     "jsterm history is correct");
+
+  executeSoon(finishTest);
+}
--- a/browser/devtools/webconsole/test/browser_webconsole_bug_622303_persistent_filters.js
+++ b/browser/devtools/webconsole/test/browser_webconsole_bug_622303_persistent_filters.js
@ -12,7 +12,8 @@ let prefs = {
  ],
  "js": [
    "exception",
-    "jswarn"
+    "jswarn",
+    "jslog",
  ],
  "logging": [
     "error",
--- a/browser/devtools/webconsole/webconsole.js
+++ b/browser/devtools/webconsole/webconsole.js
@ -121,7 +121,7 @@ const MESSAGE_PREFERENCE_KEYS = [
 //  Error         Warning   Info    Log
  [ "network",    null,         null,   "networkinfo", ],  // Network
  [ "csserror",   "cssparser",  null,   null,          ],  // CSS
-  [ "exception",  "jswarn",     null,   null,          ],  // JS
+  [ "exception",  "jswarn",     null,   "jslog",       ],  // JS
  [ "error",      "warn",       "info", "log",         ],  // Web Developer
  [ null,         null,         null,   null,          ],  // Input
  [ null,         null,         null,   null,          ],  // Output
@ -203,6 +203,7 @@ function WebConsoleFrame(aWebConsoleOwner)
  this._outputQueue = [];
  this._pruneCategoriesQueue = {};
  this._networkRequests = {};
+  this.filterPrefs = {};

  this._toggleFilter = this._toggleFilter.bind(this);
  this._flushMessageQueue = this._flushMessageQueue.bind(this);
@ -309,6 +310,13 @@ WebConsoleFrame.prototype = {
   */
  filterPrefs: null,

+  /**
+   * Prefix used for filter preferences.
+   * @private
+   * @type string
+   */
+  _filterPrefsPrefix: FILTER_PREFS_PREFIX,
+
  /**
   * The nesting depth of the currently active console group.
   */
@ -519,47 +527,31 @@ WebConsoleFrame.prototype = {
   */
  _initDefaultFilterPrefs: function WCF__initDefaultFilterPrefs()
  {
-    this.filterPrefs = {
-      network: Services.prefs.getBoolPref(FILTER_PREFS_PREFIX + "network"),
-      networkinfo: Services.prefs.getBoolPref(FILTER_PREFS_PREFIX + "networkinfo"),
-      csserror: Services.prefs.getBoolPref(FILTER_PREFS_PREFIX + "csserror"),
-      cssparser: Services.prefs.getBoolPref(FILTER_PREFS_PREFIX + "cssparser"),
-      exception: Services.prefs.getBoolPref(FILTER_PREFS_PREFIX + "exception"),
-      jswarn: Services.prefs.getBoolPref(FILTER_PREFS_PREFIX + "jswarn"),
-      error: Services.prefs.getBoolPref(FILTER_PREFS_PREFIX + "error"),
-      info: Services.prefs.getBoolPref(FILTER_PREFS_PREFIX + "info"),
-      warn: Services.prefs.getBoolPref(FILTER_PREFS_PREFIX + "warn"),
-      log: Services.prefs.getBoolPref(FILTER_PREFS_PREFIX + "log"),
-      secerror: Services.prefs.getBoolPref(FILTER_PREFS_PREFIX + "secerror"),
-      secwarn: Services.prefs.getBoolPref(FILTER_PREFS_PREFIX + "secwarn"),
-    };
+    let prefs = ["network", "networkinfo", "csserror", "cssparser", "exception",
+                 "jswarn", "jslog", "error", "info", "warn", "log", "secerror",
+                 "secwarn"];
+    for (let pref of prefs) {
+      this.filterPrefs[pref] = Services.prefs
+                               .getBoolPref(this._filterPrefsPrefix + pref);
+    }
  },

  /**
-   * Sets the click events for all binary toggle filter buttons.
+   * Sets the events for the filter input field.
   * @private
   */
  _setFilterTextBoxEvents: function WCF__setFilterTextBoxEvents()
  {
-    let timer = null;
+    let timer = Cc["@mozilla.org/timer;1"].createInstance(Ci.nsITimer);
    let timerEvent = this.adjustVisibilityOnSearchStringChange.bind(this);

    let onChange = function _onChange() {
-      let timer;
-
      // To improve responsiveness, we let the user finish typing before we
      // perform the search.
-      if (timer == null) {
-        let timerClass = Cc["@mozilla.org/timer;1"];
-        timer = timerClass.createInstance(Ci.nsITimer);
-      }
-      else {
-        timer.cancel();
-      }
-
+      timer.cancel();
      timer.initWithCallback(timerEvent, SEARCH_DELAY,
                             Ci.nsITimer.TYPE_ONE_SHOT);
-    }.bind(this);
+    };

    this.filterBox.addEventListener("command", onChange, false);
    this.filterBox.addEventListener("input", onChange, false);
@ -596,6 +588,14 @@ WebConsoleFrame.prototype = {

      aButton.setAttribute("checked", someChecked);
    }, this);
+
+    if (!this.owner._browserConsole) {
+      // The Browser Console displays nsIConsoleMessages which are messages that
+      // end up in the JS category, but they are not errors or warnings, they
+      // are just log messages. The Web Console does not show such messages.
+      let jslog = this.document.querySelector("menuitem[prefKey=jslog]");
+      jslog.hidden = true;
+    }
  },

  /**
@ -741,7 +741,7 @@ WebConsoleFrame.prototype = {
  {
    this.filterPrefs[aToggleType] = aState;
    this.adjustVisibilityForMessageType(aToggleType, aState);
-    Services.prefs.setBoolPref(FILTER_PREFS_PREFIX + aToggleType, aState);
+    Services.prefs.setBoolPref(this._filterPrefsPrefix + aToggleType, aState);
  },

  /**
@ -2854,13 +2854,21 @@ JSTerm.prototype = {
  lastInputValue: "",

  /**
-   * Indicate input node changed since last focus.
+   * Tells if the input node changed since the last focus.
   *
   * @private
   * @type boolean
   */
  _inputChanged: false,

+  /**
+   * Tells if the autocomplete popup was navigated since the last open.
+   *
+   * @private
+   * @type boolean
+   */
+  _autocompletePopupNavigated: false,
+
  /**
   * History of code that was executed.
   * @type array
@ -3060,8 +3068,6 @@ JSTerm.prototype = {
    // attempt to execute the content of the inputNode
    aExecuteString = aExecuteString || this.inputNode.value;
    if (!aExecuteString) {
-      this.writeOutput(l10n.getStr("executeEmptyInput"), CATEGORY_OUTPUT,
-                       SEVERITY_LOG);
      return;
    }

@ -3238,7 +3244,7 @@ JSTerm.prototype = {
  {
    let tabbox = this.hud.document.querySelector("#webconsole-sidebar");
    let ToolSidebar = devtools.require("devtools/framework/sidebar").ToolSidebar;
-    this.sidebar = new ToolSidebar(tabbox, this);
+    this.sidebar = new ToolSidebar(tabbox, this, "webconsole");
    this.sidebar.show();
  },

@ -3598,6 +3604,8 @@ JSTerm.prototype = {
  /**
   * Clear the Web Console output.
   *
+   * This method emits the "messages-cleared" notification.
+   *
   * @param boolean aClearStorage
   *        True if you want to clear the console messages storage associated to
   *        this Web Console.
@ -3620,10 +3628,14 @@ JSTerm.prototype = {
    if (aClearStorage) {
      this.webConsoleClient.clearMessagesCache();
    }
+
+    this.emit("messages-cleared");
  },

  /**
   * Remove all of the private messages from the Web Console output.
+   *
+   * This method emits the "private-messages-cleared" notification.
   */
  clearPrivateMessages: function JST_clearPrivateMessages()
  {
@ -3694,16 +3706,20 @@ JSTerm.prototype = {
   */
  _keyPress: function JST__keyPress(aEvent)
  {
+    let inputNode = this.inputNode;
+    let inputUpdated = false;
+
    if (aEvent.ctrlKey) {
-      let inputNode = this.inputNode;
-      let closePopup = false;
      switch (aEvent.charCode) {
        case 97:
          // control-a
+          this.clearCompletion();
+
          if (Services.appinfo.OS == "WINNT") {
-            closePopup = true;
+            // Allow Select All on Windows.
            break;
          }
+
          let lineBeginPos = 0;
          if (this.hasMultilineInput()) {
            // find index of closest newline <= to cursor
@ -3717,8 +3733,8 @@ JSTerm.prototype = {
          }
          inputNode.setSelectionRange(lineBeginPos, lineBeginPos);
          aEvent.preventDefault();
-          closePopup = true;
          break;
+
        case 101:
          // control-e
          if (Services.appinfo.OS == "WINNT") {
@ -3737,7 +3753,9 @@ JSTerm.prototype = {
          }
          inputNode.setSelectionRange(lineEndPos, lineEndPos);
          aEvent.preventDefault();
+          this.clearCompletion();
          break;
+
        case 110:
          // Control-N differs from down arrow: it ignores autocomplete state.
          // Note that we preserve the default 'down' navigation within
@ -3746,9 +3764,14 @@ JSTerm.prototype = {
              this.canCaretGoNext() &&
              this.historyPeruse(HISTORY_FORWARD)) {
            aEvent.preventDefault();
+            // Ctrl-N is also used to focus the Network category button on MacOSX.
+            // The preventDefault() call doesn't prevent the focus from moving
+            // away from the input.
+            inputNode.focus();
          }
-          closePopup = true;
+          this.clearCompletion();
          break;
+
        case 112:
          // Control-P differs from up arrow: it ignores autocomplete state.
          // Note that we preserve the default 'up' navigation within
@ -3757,17 +3780,16 @@ JSTerm.prototype = {
              this.canCaretGoPrevious() &&
              this.historyPeruse(HISTORY_BACK)) {
            aEvent.preventDefault();
+            // Ctrl-P may also be used to focus some category button on MacOSX.
+            // The preventDefault() call doesn't prevent the focus from moving
+            // away from the input.
+            inputNode.focus();
          }
-          closePopup = true;
+          this.clearCompletion();
          break;
        default:
          break;
      }
-      if (closePopup) {
-        if (this.autocompletePopup.isOpen) {
-          this.clearCompletion();
-        }
-      }
      return;
    }
    else if (aEvent.shiftKey &&
@ -3777,9 +3799,7 @@ JSTerm.prototype = {
      return;
    }

-    let inputUpdated = false;
-
-    switch(aEvent.keyCode) {
+    switch (aEvent.keyCode) {
      case Ci.nsIDOMKeyEvent.DOM_VK_ESCAPE:
        if (this.autocompletePopup.isOpen) {
          this.clearCompletion();
@ -3787,18 +3807,29 @@ JSTerm.prototype = {
        }
        else if (this.sidebar) {
          this._sidebarDestroy();
+          aEvent.preventDefault();
        }
        break;

-      // Bug 873250 - always enter, ignore autocomplete
      case Ci.nsIDOMKeyEvent.DOM_VK_RETURN:
-        this.execute();
+        if (this._autocompletePopupNavigated &&
+            this.autocompletePopup.isOpen &&
+            this.autocompletePopup.selectedIndex > -1) {
+          this.acceptProposedCompletion();
+        }
+        else {
+          this.execute();
+          this._inputChanged = false;
+        }
        aEvent.preventDefault();
        break;

      case Ci.nsIDOMKeyEvent.DOM_VK_UP:
        if (this.autocompletePopup.isOpen) {
          inputUpdated = this.complete(this.COMPLETE_BACKWARD);
+          if (inputUpdated) {
+            this._autocompletePopupNavigated = true;
+          }
        }
        else if (this.canCaretGoPrevious()) {
          inputUpdated = this.historyPeruse(HISTORY_BACK);
@ -3811,6 +3842,9 @@ JSTerm.prototype = {
      case Ci.nsIDOMKeyEvent.DOM_VK_DOWN:
        if (this.autocompletePopup.isOpen) {
          inputUpdated = this.complete(this.COMPLETE_FORWARD);
+          if (inputUpdated) {
+            this._autocompletePopupNavigated = true;
+          }
        }
        else if (this.canCaretGoNext()) {
          inputUpdated = this.historyPeruse(HISTORY_FORWARD);
@ -3820,6 +3854,33 @@ JSTerm.prototype = {
        }
        break;

+      case Ci.nsIDOMKeyEvent.DOM_VK_HOME:
+      case Ci.nsIDOMKeyEvent.DOM_VK_END:
+      case Ci.nsIDOMKeyEvent.DOM_VK_LEFT:
+        if (this.autocompletePopup.isOpen || this.lastCompletion.value) {
+          this.clearCompletion();
+        }
+        break;
+
+      case Ci.nsIDOMKeyEvent.DOM_VK_RIGHT: {
+        let cursorAtTheEnd = this.inputNode.selectionStart ==
+                             this.inputNode.selectionEnd &&
+                             this.inputNode.selectionStart ==
+                             this.inputNode.value.length;
+        let haveSuggestion = this.autocompletePopup.isOpen ||
+                             this.lastCompletion.value;
+        let useCompletion = cursorAtTheEnd || this._autocompletePopupNavigated;
+        if (haveSuggestion && useCompletion &&
+            this.complete(this.COMPLETE_HINT_ONLY) &&
+            this.lastCompletion.value &&
+            this.acceptProposedCompletion()) {
+          aEvent.preventDefault();
+        }
+        if (this.autocompletePopup.isOpen) {
+          this.clearCompletion();
+        }
+        break;
+      }
      case Ci.nsIDOMKeyEvent.DOM_VK_TAB:
        // Generate a completion and accept the first proposed value.
        if (this.complete(this.COMPLETE_HINT_ONLY) &&
@ -4096,9 +4157,11 @@ JSTerm.prototype = {

    if (items.length > 1 && !popup.isOpen) {
      popup.openPopup(inputNode);
+      this._autocompletePopupNavigated = false;
    }
    else if (items.length < 2 && popup.isOpen) {
      popup.hidePopup();
+      this._autocompletePopupNavigated = false;
    }

    if (items.length == 1) {
@ -4144,6 +4207,7 @@ JSTerm.prototype = {
    this.updateCompleteNode("");
    if (this.autocompletePopup.isOpen) {
      this.autocompletePopup.hidePopup();
+      this._autocompletePopupNavigated = false;
    }
  },

@ -4411,10 +4475,12 @@ CommandController.prototype = {
        let selectedItem = this.owner.outputNode.selectedItem;
        return selectedItem && "url" in selectedItem;
      }
+      case "consoleCmd_clearOutput":
      case "cmd_fontSizeEnlarge":
      case "cmd_fontSizeReduce":
      case "cmd_fontSizeReset":
      case "cmd_selectAll":
+      case "cmd_find":
        return true;
      case "cmd_close":
        return this.owner.owner._browserConsole;
@ -4434,6 +4500,12 @@ CommandController.prototype = {
      case "consoleCmd_copyURL":
        this.copyURL();
        break;
+      case "consoleCmd_clearOutput":
+        this.owner.jsterm.clearOutput(true);
+        break;
+      case "cmd_find":
+        this.owner.filterBox.focus();
+        break;
      case "cmd_selectAll":
        this.selectAll();
        break;
--- a/browser/devtools/webconsole/webconsole.xul
+++ b/browser/devtools/webconsole/webconsole.xul
@ -34,6 +34,9 @@
             oncommand="goDoCommand('consoleCmd_openURL');"/>
    <command id="consoleCmd_copyURL"
             oncommand="goDoCommand('consoleCmd_copyURL');"/>
+    <command id="consoleCmd_clearOutput"
+             oncommand="goDoCommand('consoleCmd_clearOutput');"/>
+    <command id="cmd_find" oncommand="goDoCommand('cmd_find');"/>
    <command id="cmd_fullZoomEnlarge" oncommand="goDoCommand('cmd_fontSizeEnlarge');"/>
    <command id="cmd_fullZoomReduce" oncommand="goDoCommand('cmd_fontSizeReduce');"/>
    <command id="cmd_fullZoomReset" oncommand="goDoCommand('cmd_fontSizeReset');"/>
@ -47,6 +50,8 @@
    <key key="&fullZoomEnlargeCmd.commandkey3;" command="cmd_fullZoomEnlarge" modifiers="accel"/>
    <key id="key_fullZoomReset" key="&fullZoomResetCmd.commandkey;" command="cmd_fullZoomReset" modifiers="accel"/>
    <key key="&fullZoomResetCmd.commandkey2;" command="cmd_fullZoomReset" modifiers="accel"/>
+    <key key="&findCmd.key;" command="cmd_find" modifiers="accel"/>
+    <key key="&clearOutputCmd.key;" command="consoleCmd_clearOutput" modifiers="accel"/>
    <key key="&closeCmd.key;" command="cmd_close" modifiers="accel"/>
  </keyset>
  <keyset id="editMenuKeys"/>
@ -72,7 +77,13 @@
      <toolbar class="hud-console-filter-toolbar devtools-toolbar" mode="full">
        <toolbarbutton label="&btnPageNet.label;" type="menu-button"
                       category="net" class="devtools-toolbarbutton webconsole-filter-button"
-                       tooltiptext="&btnPageNet.tooltip;">
+                       tooltiptext="&btnPageNet.tooltip;"
+#ifdef XP_MACOSX
+                       accesskey="&btnPageNet.accesskeyMacOSX;"
+#else
+                       accesskey="&btnPageNet.accesskey;"
+#endif
+                       tabindex="3">
          <menupopup>
            <menuitem label="&btnConsoleErrors;" type="checkbox" autocheck="false"
                      prefKey="network"/>
@ -85,7 +96,9 @@
        </toolbarbutton>
        <toolbarbutton label="&btnPageCSS.label;" type="menu-button"
                       category="css" class="devtools-toolbarbutton webconsole-filter-button"
-                       tooltiptext="&btnPageCSS.tooltip;">
+                       tooltiptext="&btnPageCSS.tooltip;"
+                       accesskey="&btnPageCSS.accesskey;"
+                       tabindex="4">
          <menupopup>
            <menuitem label="&btnConsoleErrors;" type="checkbox" autocheck="false"
                      prefKey="csserror"/>
@ -95,17 +108,23 @@
        </toolbarbutton>
        <toolbarbutton label="&btnPageJS.label;" type="menu-button"
                       category="js" class="devtools-toolbarbutton webconsole-filter-button"
-                       tooltiptext="&btnPageJS.tooltip;">
+                       tooltiptext="&btnPageJS.tooltip;"
+                       accesskey="&btnPageJS.accesskey;"
+                       tabindex="5">
          <menupopup>
            <menuitem label="&btnConsoleErrors;" type="checkbox"
                      autocheck="false" prefKey="exception"/>
            <menuitem label="&btnConsoleWarnings;" type="checkbox"
                      autocheck="false" prefKey="jswarn"/>
+            <menuitem label="&btnConsoleLog;" type="checkbox"
+                      autocheck="false" prefKey="jslog"/>
          </menupopup>
        </toolbarbutton>
        <toolbarbutton label="&btnPageSecurity.label;" type="menu-button"
                       category="security" class="devtools-toolbarbutton webconsole-filter-button"
-                       tooltiptext="&btnPageSecurity.tooltip;">
+                       tooltiptext="&btnPageSecurity.tooltip;"
+                       accesskey="&btnPageSecurity.accesskey;"
+                       tabindex="6">
          <menupopup>
            <menuitem label="&btnConsoleErrors;" type="checkbox"
                      autocheck="false" prefKey="secerror"/>
@ -115,7 +134,9 @@
        </toolbarbutton>
        <toolbarbutton label="&btnPageLogging.label;" type="menu-button"
                       category="logging" class="devtools-toolbarbutton webconsole-filter-button"
-                       tooltiptext="&btnPageLogging.tooltip;">
+                       tooltiptext="&btnPageLogging.tooltip;"
+                       accesskey="&btnPageLogging.accesskey;"
+                       tabindex="7">
          <menupopup>
            <menuitem label="&btnConsoleErrors;" type="checkbox"
                      autocheck="false" prefKey="error"/>
@ -129,23 +150,25 @@
        </toolbarbutton>

        <toolbarbutton class="webconsole-clear-console-button devtools-toolbarbutton"
-                       label="&btnClear.label;" tooltiptext="&btnClear.tooltip;"/>
+                       label="&btnClear.label;" tooltiptext="&btnClear.tooltip;"
+                       accesskey="&btnClear.accesskey;"
+                       tabindex="8"/>

        <spacer flex="1"/>

        <textbox class="compact hud-filter-box devtools-searchinput" type="search"
-                 placeholder="&filterOutput.placeholder;"/>
+                 placeholder="&filterOutput.placeholder;" tabindex="2"/>
      </toolbar>

      <richlistbox class="hud-output-node" orient="vertical" flex="1"
                   seltype="multiple" context="output-contextmenu"
-                   style="direction:ltr;"/>
+                   style="direction:ltr;" tabindex="1"/>

      <hbox class="jsterm-input-container" style="direction:ltr">
        <stack class="jsterm-stack-node" flex="1">
          <textbox class="jsterm-complete-node" multiline="true" rows="1"
                   tabindex="-1"/>
-          <textbox class="jsterm-input-node" multiline="true" rows="1"/>
+          <textbox class="jsterm-input-node" multiline="true" rows="1" tabindex="0"/>
        </stack>
      </hbox>
    </vbox>
--- a/browser/locales/en-US/chrome/browser/devtools/toolbox.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/toolbox.dtd
@ -14,45 +14,54 @@
  -  the heading of the advanced settings group in the options panel. -->
 <!ENTITY options.context.advancedSettings "Advanced settings">

-<!-- LOCALIZATION NOTE (options.context.requiresRestart): This is the requires
-  -  restart label at the bottom of the advanced settings group in the options
-  -  panel. -->
-<!ENTITY options.context.requiresRestart  "* Requires browser restart">
+<!-- LOCALIZATION NOTE (options.context.requiresRestart2): This is the requires
+  -  restart label at right of settings that require a browser restart to be
+  -  effective. -->
+<!ENTITY options.context.requiresRestart2  "Requires browser restart">

-<!-- LOCALIZATION NOTE (options.context.triggersPageRefresh): This is the
-  -  triggers page refresh label at the bottom of the advanced settings group in
-  -  the options panel. -->
-<!ENTITY options.context.triggersPageRefresh  "&#8224; Triggers page refresh">
+<!-- LOCALIZATION NOTE (options.restartButton.label): This is the label for the
+  -  restart button next to options.context.requiresRestart2 label. -->
+<!ENTITY options.restartButton.label  "Restart now">

-<!-- LOCALIZATION NOTE (options.enableChrome.label): This is the label for the
+<!-- LOCALIZATION NOTE (options.context.triggersPageRefresh2): This is the
+  -  triggers page refresh label next to the settings in the advanced settings
+  -  group in the options panel which trigger page reload. -->
+<!ENTITY options.context.triggersPageRefresh2  "Current session only, reloads the page">
+
+<!-- LOCALIZATION NOTE (options.enableChrome.label3): This is the label for the
  -  checkbox that toggles chrome debugging, i.e. devtools.chrome.enabled
  -  boolean preference in about:config, in the options panel. -->
-<!ENTITY options.enableChrome.label2    "Enable chrome debugging *">
-<!ENTITY options.enableChrome.tooltip  "Turning this option on will allow you to use various developer tools in browser context">
+<!ENTITY options.enableChrome.label3    "Enable chrome debugging">
+<!ENTITY options.enableChrome.tooltip   "Turning this option on will allow you to use various developer tools in browser context">

-<!-- LOCALIZATION NOTE (options.enableRemote.label): This is the label for the
+<!-- LOCALIZATION NOTE (options.enableRemote.label3): This is the label for the
  -  checkbox that toggles remote debugging, i.e. devtools.debugger.remote-enabled
  -  boolean preference in about:config, in the options panel. -->
-<!ENTITY options.enableRemote.label2    "Enable remote debugging *">
-<!ENTITY options.enableRemote.tooltip  "Turning this option on will allow the developer tools to debug remote Firefox instance like Firefox OS">
+<!ENTITY options.enableRemote.label3    "Enable remote debugging">
+<!ENTITY options.enableRemote.tooltip   "Turning this option on will allow the developer tools to debug remote Firefox instance like Firefox OS">

-<!-- LOCALIZATION NOTE (options.disableJavaScript.label,
+<!-- LOCALIZATION NOTE (options.disableJavaScript.label2,
  -  options.disableJavaScript.tooltip): This is the options panel label and
-  - tooltip for the checkbox that toggles JavaScript on or off. -->
-<!ENTITY options.disableJavaScript.label    "Disable JavaScript for the current tab (temporary) &#8224;">
-<!ENTITY options.disableJavaScript.tooltip  "Turning this option on will disable JavaScript for the current tab. If the tab or the toolbox is closed then this setting will be forgotten.">
+  -  tooltip for the checkbox that toggles JavaScript on or off. -->
+<!ENTITY options.disableJavaScript.label2    "Disable JavaScript">
+<!ENTITY options.disableJavaScript.tooltip   "Turning this option on will disable JavaScript for the current tab. If the tab or the toolbox is closed then this setting will be forgotten.">

 <!-- LOCALIZATION NOTE (options.selectDefaultTools.label): This is the label for
  -  the heading of group of checkboxes corresponding to the default developer
  -  tools. -->
 <!ENTITY options.selectDefaultTools.label     "Default Firefox Developer Tools">

-<!-- LOCALIZATION NOTE (options.selectDefaultTools.label): This is the label for
+<!-- LOCALIZATION NOTE (options.selectAdditionalTools.label): This is the label for
  -  the heading of group of checkboxes corresponding to the developer tools
  -  added by add-ons. This heading is hidden when there is no developer tool
  -  installed by add-ons. -->
 <!ENTITY options.selectAdditionalTools.label  "Developer Tools installed by add-ons">

+<!-- LOCALIZATION NOTE (options.toolNotSupported.label): This is the label for
+  -  the explanation of the * marker on a tool which is currently not supported
+  -  for the target of the toolbox. -->
+<!ENTITY options.toolNotSupported.label  "* Not supported for current toolbox target">
+
 <!-- LOCALIZATION NOTE (options.selectDevToolsTheme.label): This is the label for
  -  the heading of the radiobox corresponding to the theme of the developer
  -  tools. -->
--- a/browser/locales/en-US/chrome/browser/devtools/toolbox.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/toolbox.properties
@ -38,3 +38,9 @@ toolbox.defaultTitle=Developer Tools
 # LOCALIZATION NOTE (optionsButton.tooltip): This is used as the tooltip
 # for the optiosn panel tab.
 optionsButton.tooltip=Toolbox Options
+
+# LOCALIZATION NOTE (options.toolNotSupported): This is the template
+# used to add a * marker to the label for the Options Panel tool checkbox for the
+# tool which is not supported for the current toolbox target.
+# The name of the tool: %1$S.
+options.toolNotSupportedMarker=%1$S *
--- a/browser/locales/en-US/chrome/browser/devtools/webConsole.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/webConsole.dtd
@ -45,12 +45,22 @@
  -  filters. -->
 <!ENTITY btnPageNet.label   "Net">
 <!ENTITY btnPageNet.tooltip "Log network access">
+<!ENTITY btnPageNet.accesskey "N">
+<!-- LOCALIZATION NOTE (btnPageNet.accesskeyMacOSX): This string is used as
+  -  access key for the menu button that allows users to toggle the network
+  -  logging output. On MacOSX accesskeys are available with Ctrl-*. Please make
+  -  sure you do not use the following letters: A, E, N and P. These are used
+  -  for editing commands in text inputs. -->
+<!ENTITY btnPageNet.accesskeyMacOSX "t">
 <!ENTITY btnPageCSS.label   "CSS">
 <!ENTITY btnPageCSS.tooltip "Log CSS parsing errors">
+<!ENTITY btnPageCSS.accesskey "C">
 <!ENTITY btnPageJS.label    "JS">
 <!ENTITY btnPageJS.tooltip  "Log JavaScript exceptions">
+<!ENTITY btnPageJS.accesskey  "J">
 <!ENTITY btnPageSecurity.label "Security">
 <!ENTITY btnPageSecurity.tooltip "Log security errors and warnings">
+<!ENTITY btnPageSecurity.accesskey "S">

 <!-- LOCALIZATION NOTE (btnPageLogging): This is used as the text of the
  -  the toolbar. It shows or hides messages that the web developer inserted on
@ -58,6 +68,7 @@
  -  console.error(). -->
 <!ENTITY btnPageLogging.label   "Logging">
 <!ENTITY btnPageLogging.tooltip "Log messages sent to the window.console object">
+<!ENTITY btnPageLogging.accesskey "L">
 <!ENTITY btnConsoleErrors       "Errors">
 <!ENTITY btnConsoleInfo         "Info">
 <!ENTITY btnConsoleWarnings     "Warnings">
@ -66,6 +77,7 @@
 <!ENTITY filterOutput.placeholder "Filter output">
 <!ENTITY btnClear.label        "Clear">
 <!ENTITY btnClear.tooltip      "Clear the Web Console output">
+<!ENTITY btnClear.accesskey    "r">

 <!ENTITY fullZoomEnlargeCmd.commandkey  "+">
 <!ENTITY fullZoomEnlargeCmd.commandkey2 "="> <!-- + is above this key on many keyboards -->
@ -80,4 +92,6 @@
 <!ENTITY copyURLCmd.label     "Copy Link Location">
 <!ENTITY copyURLCmd.accesskey "a">

-<!ENTITY closeCmd.key  "W">
+<!ENTITY closeCmd.key         "W">
+<!ENTITY findCmd.key          "F">
+<!ENTITY clearOutputCmd.key   "K">
--- a/browser/locales/en-US/chrome/browser/devtools/webconsole.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/webconsole.properties
@ -160,10 +160,6 @@ longStringEllipsis=[…]
 # tries to expand a long string.
 longStringTooLong=The string you are trying to view is too long to be displayed by the Web Console.

-# LOCALIZATION NOTE (executeEmptyInput): the string displayed when the user
-# tries to execute code, but the input is empty.
-executeEmptyInput=No value to execute.
-
 # LOCALIZATION NOTE (NetworkPanel.fetchRemainingResponseContentLink): the
 # string  displayed in the network panel when the response body is only
 # partially available. Parameters: %S is the amount of bytes that need to be
--- a/browser/themes/linux/browser.css
+++ b/browser/themes/linux/browser.css
@ -2070,12 +2070,6 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
  font-size: 120%;
 }

-/* Developer toolbar */
-
-#developer-toolbar {
-  border-top: 1px solid hsla(210, 8%, 5%, .65);
-}
-
 %include ../shared/devtools/responsivedesign.inc.css
 %include ../shared/devtools/highlighter.inc.css
 %include ../shared/devtools/commandline.inc.css
@ -2084,81 +2078,10 @@ toolbar[mode="text"] toolbarbutton.chevron > .toolbarbutton-icon {
  padding: 0;
 }

-.gclitoolbar-input-node {
-  border-color: hsl(210,11%,10%);
-  box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset,
-              0 0 0 1px hsla(210,16%,76%,.1) inset,
-              0 1px 0 hsla(210,16%,76%,.15);
-}
-
 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
  color: hsl(210,11%,16%);
 }

-.gclitoolbar-prompt {
-  background-color: hsl(210,11%,16%);
-}
-
-/* Web Console */
-
-.web-console-frame {
-  border-bottom: 1px solid #aaa;
-}
-
-.web-console-frame[animated] {
-  transition: height 100ms;
-}
-
-/* Developer Toolbar */
-
-#developer-toolbar-toolbox-button {
-  min-width: 18px;
-}
-
-#developer-toolbar-toolbox-button > .toolbarbutton-text {
-  display: none;
-}
-
-#developer-toolbar-toolbox-button > .toolbarbutton-icon {
-  -moz-margin-end: 0;
-}
-
-.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[open=true],
-.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:hover,
-.developer-toolbar-button[checked=true],
-.developer-toolbar-button[open=true] {
-  color: hsl(208,100%,60%) !important;
-  text-shadow: 0 0 6px hsl(208,100%,60%);
-}
-
-.developer-toolbar-button[checked=true] {
-  background: rgba(0,0,0,.4);
-}
-
-#developer-toolbar-toolbox-button {
-  -moz-image-region: rect(64px, 22px, 80px, 0);
-}
-
 /* Error counter */

 #developer-toolbar-toolbox-button[error-count]:before {
--- a/browser/themes/linux/devtools/commandline-icon.png
+++ b/browser/themes/linux/devtools/commandline-icon.png
--- a/browser/themes/linux/devtools/commandline.css
+++ b/browser/themes/linux/devtools/commandline.css
@ -10,9 +10,9 @@

 #gcli-output-root,
 #gcli-tooltip-root {
-  border: 1px solid hsl(210,11%,10%);
+  border: 1px solid hsl(206,37%,4%);
  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
-  background-image: linear-gradient(hsla(209,11%,18%,0.9), hsl(210,11%,16%));
+  background-image: linear-gradient(hsla(209,18%,18%,0.9), hsl(209,23%,18%));
  border-radius: 3px;
 }

@ -32,9 +32,9 @@
  margin-left: 8px;
  width: 20px;
  height: 10px;
-  border-left: 1px solid hsl(210,11%,10%);
-  border-right: 1px solid hsl(210,11%,10%);
-  background-color: hsl(210,11%,16%);
+  border-left: 1px solid hsl(206,37%,4%);
+  border-right: 1px solid hsl(206,37%,4%);
+  background-color: hsl(209,23%,18%);
 }

 .gcli-tt-description,
@ -83,8 +83,8 @@
  font-weight: normal;
  font-size: 90%;
  border-radius: 3px;
-  background-color: hsl(210,11%,16%);
-  border: 1px solid hsl(210,11%,10%);
+  background-color: hsl(209,23%,18%);
+  border: 1px solid hsl(206,37%,4%);
 }

 .gcli-out-shortcut:before,
--- a/browser/themes/linux/devtools/common.css
+++ b/browser/themes/linux/devtools/common.css
@ -46,7 +46,7 @@

 .devtools-menulist:-moz-focusring,
 .devtools-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline: 1px dotted hsla(210,30%,85%,0.7);
  outline-offset: -4px;
 }

@ -184,9 +184,13 @@
 /* Close button */

 .devtools-closebutton {
-  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
-  margin-top: 0;
-  margin-bottom: 0;
+  list-style-image: url("chrome://browser/skin/devtools/close.png");
+  -moz-appearance: none;
+  border: none;
+  margin: 0 4px;
+  min-width: 16px;
+  width: 16px;
+  opacity: 0.6;
 }

 .devtools-closebutton > .toolbarbutton-icon {
@ -195,6 +199,18 @@
  margin: -4px;
 }

+.devtools-closebutton > .toolbarbutton-text {
+  display: none;
+}
+
+.devtools-closebutton:hover {
+  opacity: 0.8;
+}
+
+.devtools-closebutton:hover:active {
+  opacity: 1;
+}
+
 /* Splitters */

 .devtools-horizontal-splitter {
--- a/browser/themes/linux/devtools/computedview.css
+++ b/browser/themes/linux/devtools/computedview.css
@ -82,12 +82,6 @@ body {
 }

 /* From skin */
-.helplink {
-  /* FIXME: remove this image 
-  background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
-  */
-}
-
 .expander {
  visibility: hidden;
  margin-left: -12px!important;
--- a/browser/themes/linux/devtools/debugger.css
+++ b/browser/themes/linux/devtools/debugger.css
@ -83,13 +83,12 @@

 .dbg-expression {
  height: 20px;
-  -moz-padding-start: 8px;
 }

 .dbg-expression-arrow {
-  width: 10px;
+  width: 16px;
  height: auto;
-  background: url("chrome://browser/skin/devtools/commandline.png") 0px 4px no-repeat;
+  background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
 }

 .dbg-expression-input {
--- a/browser/themes/linux/devtools/goto-mdn.png
+++ b/browser/themes/linux/devtools/goto-mdn.png
--- a/browser/themes/linux/devtools/splitview.css
+++ b/browser/themes/linux/devtools/splitview.css
@ -95,22 +95,8 @@

 /* Resizers */

-.splitview-landscape-resizer {
-  -moz-appearance: none;
-  width: 7px;
-  background-image: linear-gradient(to right, black 1px, rgba(255,255,255,0.2) 1px);
-  background-size: 2px 10px;
-  background-clip: padding-box;
-  background-repeat: repeat-x;
-  border-width: 1px;
-  border-style: solid;
-  border-color: rgba(255, 255, 255, 0.05);
-  margin: 5px 0;
-  transform: translateX(-7px);
-}
-
-.splitview-landscape-resizer:-moz-locale-dir(rtl) {
-  transform: translateX(7px);
+.splitview-landscape-splitter {
+  -moz-border-start-color: transparent;
 }

 .splitview-portrait-resizer {
--- a/browser/themes/linux/devtools/toggle-tools.png
+++ b/browser/themes/linux/devtools/toggle-tools.png
--- a/browser/themes/linux/devtools/tool-debugger-paused.png
+++ b/browser/themes/linux/devtools/tool-debugger-paused.png
--- a/browser/themes/linux/devtools/toolbox.css
+++ b/browser/themes/linux/devtools/toolbox.css
@ -26,21 +26,15 @@
  list-style-image: url("chrome://browser/skin/devtools/undock.png");
 }

-#toolbox-close {
-  list-style-image: url("chrome://browser/skin/devtools/close.png");
-}
-
 #toolbox-dock-window,
 #toolbox-dock-bottom,
-#toolbox-dock-side,
-#toolbox-close {
+#toolbox-dock-side {
  opacity: 0.6;
 }

 #toolbox-dock-window:hover,
 #toolbox-dock-bottom:hover,
-#toolbox-dock-side:hover,
-#toolbox-close:hover {
+#toolbox-dock-side:hover {
  opacity: 1;
 }

@ -228,6 +222,32 @@
  box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
 }

+.devtools-tab:not([selected=true]).highlighted {
+  color: #f5f7fa;
+  background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%),
+                    radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)),
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2));
+  background-size: 100% 1px,
+                   100% 5px,
+                   1px 100%,
+                   1px 100%,
+                   100%;
+  background-repeat: no-repeat,
+                     no-repeat,
+                     no-repeat,
+                     no-repeat,
+                     repeat-x;
+  background-position: top right, top left, left, right;
+}
+
+.devtools-tab:not(.highlighted) > .highlighted-icon,
+.devtools-tab[selected=true] > .highlighted-icon,
+.devtools-tab:not([selected=true]).highlighted > .default-icon {
+  visibility: collapse;
+}
+
 #options-panel {
  background-image: url("chrome://browser/skin/newtab/noise.png");
 }
@ -252,3 +272,16 @@
 .options-groupbox > * {
  padding: 2px;
 }
+
+.options-citation-label {
+  font-size: 1rem !important;
+  /* !important is required otherwise font-size will still be 1.4rem */
+  font-style: italic;
+  padding: 4px 0 0; /* To align it with the checkbox */
+  color: #444;
+}
+
+.options-citation-label + label {
+  padding: 3px 0 0 !important; /* To align it with the checkbox */
+  font-style: italic;
+}
--- a/browser/themes/linux/devtools/tools-icons-small.png
+++ b/browser/themes/linux/devtools/tools-icons-small.png
--- a/browser/themes/linux/devtools/vview-delete.png
+++ b/browser/themes/linux/devtools/vview-delete.png
--- a/browser/themes/linux/devtools/vview-edit.png
+++ b/browser/themes/linux/devtools/vview-edit.png
--- a/browser/themes/linux/devtools/webconsole.css
+++ b/browser/themes/linux/devtools/webconsole.css
@ -2,267 +2,22 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-/* General output styles */
-
-.webconsole-timestamp {
-  color: GrayText;
-  margin-top: 0;
-  margin-bottom: 0;
-  font-family: "DejaVu Sans Mono", monospace;
-}
-
-.hud-msg-node {
-  list-style-image: url(chrome://browser/skin/devtools/webconsole.png);
-  -moz-image-region: rect(0, 1px, 0, 0);
-}
-
-.webconsole-msg-icon {
-  margin: 3px 4px;
-  width: 8px;
-  height: 8px;
-}
-
-.hud-clickable {
-  cursor: pointer;
-  text-decoration: underline;
-}
+%include ../../shared/devtools/webconsole.inc.css

+.webconsole-timestamp,
 .webconsole-msg-body {
-  margin-top: 0;
-  margin-bottom: 3px;
-  -moz-margin-start: 3px;
-  -moz-margin-end: 6px;
-  white-space: pre-wrap;
  font-family: "DejaVu Sans Mono", monospace;
 }

-.webconsole-msg-body-piece {
-  margin: 0;
-}
-
-.webconsole-msg-url {
-  margin: 0 6px;
-}
-
-/* Repeated messages */
-.webconsole-msg-repeat {
-  margin: 2px 0;
-  padding-left: 4px;
-  padding-right: 4px;
-  color: white;
-  background-color: red;
-  border-radius: 40px;
-  font: message-box;
-  font-size: 0.9em;
-  font-weight: 600;
-}
-
-/* TODO move this and other functional rules to content - bug 635359 */
-.webconsole-msg-repeat[value="1"] {
-  display: none;
-}
-
-.webconsole-location {
-  margin-top: 0;
-  margin-bottom: 0;
-  -moz-margin-start: 0;
-  -moz-margin-end: 6px;
-  width: 10em;
-  text-align: end;
-}
-
-.webconsole-mixed-content {
-  color: #FF0000;
-}
-
-.webconsole-mixed-content-link {
-  color: #0000EE;
-  margin: 0;
-}
-
-.hud-msg-node[selected="true"] > .webconsole-timestamp,
-.hud-msg-node[selected="true"] > .webconsole-location {
-  color: inherit;
-}
-
 .jsterm-input-node,
 .jsterm-complete-node {
  font: 0.9em "DejaVu Sans Mono", monospace;
 }

 .hud-output-node {
-  -moz-appearance: none;
-  border-bottom: 1px solid ThreeDShadow;
-  margin: 0;
  font-size: 0.9em;
 }

-.hud-filtered-by-type,
-.hud-filtered-by-string {
-  display: none;
-}
-
-.hidden-message {
-  display: block;
-  visibility: hidden;
-  height: 0;
-  overflow: hidden;
-}
-
-/* WebConsole colored drops */
-
-.webconsole-filter-button[checked] {
-  color: white !important;
-}
-
-.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
-  content: "";
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  border-radius: 50%;
-  margin-left: 5px;
-  border-width: 1px;
-  border-style: solid;
-}
-
-/* Network styles */
-.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#444444, #000000);
-  border-color: #777;
-}
-
-.webconsole-msg-network > .webconsole-msg-icon-container {
-  -moz-border-start: solid #000 6px;
-}
-
-.webconsole-msg-network.webconsole-msg-error {
-  -moz-image-region: rect(0, 16px, 8px, 8px);
-}
-
-/* CSS styles */
-.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#2DC3F3, #00B6F0);
-  border-color: #1BA2CC;
-}
-
-.webconsole-msg-cssparser > .webconsole-msg-icon-container {
-  -moz-border-start: solid #00b6f0 6px;
-}
-
-.webconsole-msg-cssparser.webconsole-msg-error {
-  -moz-image-region: rect(8px, 16px, 16px, 8px);
-}
-
-.webconsole-msg-cssparser.webconsole-msg-warn {
-  -moz-image-region: rect(8px, 24px, 16px, 16px);
-}
-
-/* JS styles */
-.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#FCB142, #FB9500);
-  border-color: #E98A00;
-}
-
-.webconsole-msg-exception > .webconsole-msg-icon-container {
-  -moz-border-start: solid #fb9500 6px;
-}
-
-.webconsole-msg-exception.webconsole-msg-error {
-  -moz-image-region: rect(16px, 16px, 24px, 8px);
-}
-
-.webconsole-msg-exception.webconsole-msg-warn {
-  -moz-image-region: rect(16px, 24px, 24px, 16px);
-}
-
-/* Web Developer styles */
-.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#B9B9B9, #AAAAAA);
-  border-color: #929292;
-}
-
-.webconsole-msg-console > .webconsole-msg-icon-container {
-  -moz-border-start: solid #cbcbcb 6px;
-}
-
-.webconsole-msg-console.webconsole-msg-error,
-.webconsole-msg-output.webconsole-msg-error {
-  -moz-image-region: rect(24px, 16px, 32px, 8px);
-}
-
-.webconsole-msg-console.webconsole-msg-warn {
-  -moz-image-region: rect(24px, 24px, 32px, 16px);
-}
-
-.webconsole-msg-console.webconsole-msg-info {
-  -moz-image-region: rect(24px, 32px, 32px, 24px);
-}
-
-/* Input and output styles */
-.webconsole-msg-input > .webconsole-msg-icon-container,
-.webconsole-msg-output > .webconsole-msg-icon-container {
-  border-left: solid #808080 6px;
-}
-
-.webconsole-msg-input {
-  -moz-image-region: rect(24px, 40px, 32px, 32px);
-}
-
-.webconsole-msg-output {
-  -moz-image-region: rect(24px, 48px, 32px, 40px);
-}
-
-/* JSTerm Styles */
-.jsterm-input-node,
-.jsterm-complete-node {
-  border: none;
-  padding: 0 0 0 16px;
-  -moz-appearance: none;
-}
-
 .jsterm-input-node {
  width: 98%;
-  background: url("chrome://browser/skin/devtools/commandline.png") 4px 3px no-repeat;
-}
-
-:-moz-any(.jsterm-input-node,
-          .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
-  overflow-x: hidden;
-}
-
-.jsterm-complete-node > .textbox-input-box > .textbox-textarea {
-  color: GrayText;
-}
-
-.webconsole-msg-inspector iframe {
-  height: 7em;
-  margin-bottom: 15px;
-  -moz-margin-end: 15px;
-  border-radius: 4px;
-  box-shadow: 0 0 12px #dfdfdf;
-}
-
-#webconsole-sidebar > tabs {
-  height: 0;
-  border: none;
-}
-
-/* Security styles */
-
-.webconsole-msg-security > .webconsole-msg-icon-container {
-  -moz-border-start: solid red 6px;
-}
-
-.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#FF3030, #FF7D7D);
-  border-color: #D12C2C;
-}
-
-.webconsole-msg-security.webconsole-msg-error {
-  -moz-image-region: rect(32px, 16px, 40px, 8px);
-}
-
-.webconsole-msg-security.webconsole-msg-warn {
-  -moz-image-region: rect(32px, 24px, 40px, 16px);
 }
--- a/browser/themes/linux/devtools/widgets.css
+++ b/browser/themes/linux/devtools/widgets.css
@ -571,18 +571,20 @@
 /* Variables and properties editing */

 .variables-view-delete {
-  list-style-image: url("moz-icon://stock/gtk-close?size=menu");
-  opacity: 0;
+  list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
+  -moz-image-region: rect(0,16px,16px,0);
 }

 .variables-view-delete:hover {
-  opacity: 1;
+  -moz-image-region: rect(0,32px,16px,16px);
 }

-*:hover > .title > .variables-view-delete:not(:hover),
-*:focus > .title > .variables-view-delete:not(:hover) {
-  opacity: 0.5;
-  transition: opacity 0.2s ease-in-out;
+.variables-view-delete:active {
+  -moz-image-region: rect(0,48px,16px,32px);
+}
+
+*:not(:hover) .variables-view-delete {
+  display: none;
 }

 .variables-view-delete > .toolbarbutton-text {
@ -590,7 +592,7 @@
 }

 .variables-view-edit {
-  background: url("chrome://browser/skin/tabview/edit-light.png") center no-repeat;
+  background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
  width: 20px;
  height: 16px;
  cursor: pointer;
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@ -124,15 +124,14 @@ browser.jar:
  skin/classic/browser/devtools/dark-theme.css        (devtools/dark-theme.css)
  skin/classic/browser/devtools/light-theme.css       (devtools/light-theme.css)
  skin/classic/browser/devtools/widgets.css           (devtools/widgets.css)
-  skin/classic/browser/devtools/commandline.png       (devtools/commandline.png)
+  skin/classic/browser/devtools/commandline-icon.png  (devtools/commandline-icon.png)
  skin/classic/browser/devtools/command-paintflashing.png  (devtools/command-paintflashing.png)
  skin/classic/browser/devtools/command-responsivemode.png (devtools/command-responsivemode.png)
  skin/classic/browser/devtools/command-scratchpad.png (devtools/command-scratchpad.png)
  skin/classic/browser/devtools/command-tilt.png      (devtools/command-tilt.png)
  skin/classic/browser/devtools/alerticon-warning.png (devtools/alerticon-warning.png)
-  skin/classic/browser/devtools/goto-mdn.png          (devtools/goto-mdn.png)
  skin/classic/browser/devtools/ruleview.css          (devtools/ruleview.css)
-  skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
+* skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
  skin/classic/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
  skin/classic/browser/devtools/webconsole.png                  (devtools/webconsole.png)
  skin/classic/browser/devtools/checkbox-dark.png     (devtools/checkbox-dark.png)
@ -195,7 +194,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)
+  skin/classic/browser/devtools/toggle-tools.png          (devtools/toggle-tools.png)
  skin/classic/browser/devtools/dock-bottom.png           (devtools/dock-bottom.png)
  skin/classic/browser/devtools/dock-side.png             (devtools/dock-side.png)
  skin/classic/browser/devtools/floating-scrollbars.css   (devtools/floating-scrollbars.css)
@ -205,11 +204,14 @@ browser.jar:
  skin/classic/browser/devtools/tool-options.png          (devtools/tool-options.png)
  skin/classic/browser/devtools/tool-webconsole.png       (devtools/tool-webconsole.png)
  skin/classic/browser/devtools/tool-debugger.png         (devtools/tool-debugger.png)
+  skin/classic/browser/devtools/tool-debugger-paused.png  (devtools/tool-debugger-paused.png)
  skin/classic/browser/devtools/tool-inspector.png        (devtools/tool-inspector.png)
  skin/classic/browser/devtools/tool-styleeditor.png      (devtools/tool-styleeditor.png)
  skin/classic/browser/devtools/tool-profiler.png         (devtools/tool-profiler.png)
  skin/classic/browser/devtools/tool-network.png          (devtools/tool-network.png)
  skin/classic/browser/devtools/close.png                 (devtools/close.png)
+  skin/classic/browser/devtools/vview-delete.png          (devtools/vview-delete.png)
+  skin/classic/browser/devtools/vview-edit.png            (devtools/vview-edit.png)
  skin/classic/browser/devtools/undock.png                (devtools/undock.png)
  skin/classic/browser/devtools/font-inspector.css        (devtools/font-inspector.css)
  skin/classic/browser/devtools/computedview.css          (devtools/computedview.css)
--- a/browser/themes/osx/browser.css
+++ b/browser/themes/osx/browser.css
@ -3572,98 +3572,19 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
  font-size: 120%;
 }

-/* Developer toolbar */
-
-#developer-toolbar {
-  border-top: 1px solid hsla(210, 8%, 5%, .65);
-  padding-top: 4px;
-  padding-bottom: 4px;
-}
-
-#developer-toolbar:-moz-locale-dir(ltr) {
-  padding-left: 2px;
-  padding-right: 16px; /* use -moz-padding-end when/if bug 631729 gets fixed */
-}
-
-#developer-toolbar:-moz-locale-dir(rtl) {
-  padding-left: 4px;
-  padding-right: 18px; /* use -moz-padding-end when/if bug 631729 gets fixed */
-}
-
 %include ../shared/devtools/responsivedesign.inc.css
 %include ../shared/devtools/highlighter.inc.css
 %include ../shared/devtools/commandline.inc.css

-.gclitoolbar-input-node,
-.gclitoolbar-complete-node,
-.gclitoolbar-prompt {
-  border-radius: @toolbarbuttonCornerRadius@;
-}
-
-.gclitoolbar-input-node {
-  border-color: hsl(210,11%,10%);
-  box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset,
-              0 0 0 1px hsla(210,16%,76%,.1) inset,
-              0 1px 0 hsla(210,16%,76%,.15);
-}
-
 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
  color: hsl(210,11%,16%);
 }

-.gclitoolbar-prompt {
-  background-color: hsl(210,11%,16%);
-}
-
-/* Web Console */
-
-.web-console-frame {
-  border-bottom: 1px solid #aaa;
-}
-
-.web-console-frame[animated] {
-  transition: height 100ms;
-}
-
 /* Developer Toolbar */

-#developer-toolbar-toolbox-button {
-  min-width: 18px;
-}
-
-#developer-toolbar-toolbox-button > .toolbarbutton-text {
-  display: none;
-}
-
-.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[open=true],
-.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-toolbox-button {
-  -moz-image-region: rect(64px, 16px, 80px, 0);
+#developer-toolbar-closebutton {
+  margin-left: 8px;
+  margin-right: 8px;
 }

 /* Error counter */
--- a/browser/themes/osx/devtools/commandline-icon.png
+++ b/browser/themes/osx/devtools/commandline-icon.png
--- a/browser/themes/osx/devtools/commandline.css
+++ b/browser/themes/osx/devtools/commandline.css
@ -10,10 +10,10 @@

 #gcli-output-root,
 #gcli-tooltip-root {
-  border: 1px solid hsl(210,11%,10%);
+  border: 1px solid hsl(206,37%,4%);
  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
  background-image: url(background-noise-toolbar.png),
-                    linear-gradient(hsla(209,18%,18%,0.9), hsl(210,11%,16%));
+                    linear-gradient(hsla(209,18%,18%,0.9), hsl(209,23%,18%));
  border-radius: 3px;
 }

@ -33,9 +33,9 @@
  margin-left: 8px;
  width: 20px;
  height: 10px;
-  border-left: 1px solid hsl(210,11%,10%);
-  border-right: 1px solid hsl(210,11%,10%);
-  background-color: hsl(210,11%,16%);
+  border-left: 1px solid hsl(206,37%,4%);
+  border-right: 1px solid hsl(206,37%,4%);
+  background-color: hsl(209,23%,18%);
  background-image: url(background-noise-toolbar.png);
 }

@ -85,8 +85,8 @@
  font-weight: normal;
  font-size: 90%;
  border-radius: 3px;
-  background-color: hsl(210,11%,16%);
-  border: 1px solid hsl(210,11%,10%);
+  background-color: hsl(209,23%,18%);
+  border: 1px solid hsl(206,37%,4%);
 }

 .gcli-out-shortcut:before,
--- a/browser/themes/osx/devtools/common.css
+++ b/browser/themes/osx/devtools/common.css
@ -50,7 +50,7 @@

 .devtools-menulist:-moz-focusring,
 .devtools-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline: 1px dotted hsla(210,30%,85%,0.7);
  outline-offset: -4px;
 }

@ -188,11 +188,13 @@
 /* Close button */

 .devtools-closebutton {
-  list-style-image: url("chrome://browser/skin/devtools/toolbarbutton-close.png");
-  -moz-image-region: rect(0, 16px, 16px, 0);
+  list-style-image: url("chrome://browser/skin/devtools/close.png");
+  -moz-appearance: none;
+  border: none;
+  margin: 0 4px;
  min-width: 16px;
  width: 16px;
-  margin: 0 4px;
+  opacity: 0.6;
 }

 .devtools-closebutton > .toolbarbutton-text {
@ -200,11 +202,11 @@
 }

 .devtools-closebutton:hover {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
+  opacity: 0.8;
 }

 .devtools-closebutton:active {
-  -moz-image-region: rect(0, 48px, 16px, 32px);
+  opacity: 1;
 }

 /* Splitters */
--- a/browser/themes/osx/devtools/computedview.css
+++ b/browser/themes/osx/devtools/computedview.css
@ -100,12 +100,6 @@ body {
 }

 /* From skin */
-.helplink {
-  /* FIXME: remove this image 
-  background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
-  */
-}
-
 .expander {
  visibility: hidden;
  margin-left: -12px!important;
--- a/browser/themes/osx/devtools/debugger.css
+++ b/browser/themes/osx/devtools/debugger.css
@ -85,13 +85,12 @@

 .dbg-expression {
  height: 20px;
-  -moz-padding-start: 8px;
 }

 .dbg-expression-arrow {
-  width: 10px;
+  width: 16px;
  height: auto;
-  background: url("chrome://browser/skin/devtools/commandline.png") 0px 4px no-repeat;
+  background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
 }

 .dbg-expression-input {
--- a/browser/themes/osx/devtools/goto-mdn.png
+++ b/browser/themes/osx/devtools/goto-mdn.png
--- a/browser/themes/osx/devtools/splitview.css
+++ b/browser/themes/osx/devtools/splitview.css
@ -95,22 +95,8 @@

 /* Resizers */

-.splitview-landscape-resizer {
-  -moz-appearance: none;
-  width: 7px;
-  background-image: linear-gradient(to right, black 1px, rgba(255,255,255,0.2) 1px);
-  background-size: 2px 10px;
-  background-clip: padding-box;
-  background-repeat: repeat-x;
-  border-width: 1px;
-  border-style: solid;
-  border-color: rgba(255, 255, 255, 0.05);
-  margin: 5px 0;
-  transform: translateX(-7px);
-}
-
-.splitview-landscape-resizer:-moz-locale-dir(rtl) {
-  transform: translateX(7px);
+.splitview-landscape-splitter {
+  -moz-border-start-color: transparent;
 }

 .splitview-portrait-resizer {
--- a/browser/themes/osx/devtools/toggle-tools.png
+++ b/browser/themes/osx/devtools/toggle-tools.png
--- a/browser/themes/osx/devtools/tool-debugger-paused.png
+++ b/browser/themes/osx/devtools/tool-debugger-paused.png
--- a/browser/themes/osx/devtools/toolbarbutton-close.png
+++ b/browser/themes/osx/devtools/toolbarbutton-close.png
--- a/browser/themes/osx/devtools/toolbox.css
+++ b/browser/themes/osx/devtools/toolbox.css
@ -25,21 +25,15 @@
  list-style-image: url("chrome://browser/skin/devtools/undock.png");
 }

-#toolbox-close {
-  list-style-image: url("chrome://browser/skin/devtools/close.png");
-}
-
 #toolbox-dock-window,
 #toolbox-dock-bottom,
-#toolbox-dock-side,
-#toolbox-close {
+#toolbox-dock-side {
  opacity: 0.6;
 }

 #toolbox-dock-window:hover,
 #toolbox-dock-bottom:hover,
-#toolbox-dock-side:hover,
-#toolbox-close:hover {
+#toolbox-dock-side:hover {
  opacity: 1;
 }

@ -214,6 +208,32 @@
  box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
 }

+.devtools-tab:not([selected=true]).highlighted {
+  color: #f5f7fa;
+  background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%),
+                    radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)),
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2));
+  background-size: 100% 1px,
+                   100% 5px,
+                   1px 100%,
+                   1px 100%,
+                   100%;
+  background-repeat: no-repeat,
+                     no-repeat,
+                     no-repeat,
+                     no-repeat,
+                     repeat-x;
+  background-position: top right, top left, left, right;
+}
+
+.devtools-tab:not(.highlighted) > .highlighted-icon,
+.devtools-tab[selected=true] > .highlighted-icon,
+.devtools-tab:not([selected=true]).highlighted > .default-icon {
+  visibility: collapse;
+}
+
 #options-panel {
  background-image: url("chrome://browser/skin/newtab/noise.png");
 }
@ -238,3 +258,16 @@
 .options-groupbox > * {
  padding: 2px;
 }
+
+.options-citation-label {
+  font-size: 1rem !important;
+  /* !important is required otherwise font-size will still be 1.4rem */
+  font-style: italic;
+  padding: 4px 0 0; /* To align it with the checkbox */
+  color: #444;
+}
+
+.options-citation-label + label {
+  padding: 3px 0 0 !important; /* To align it with the checkbox */
+  font-style: italic;
+}
--- a/browser/themes/osx/devtools/tools-icons-small.png
+++ b/browser/themes/osx/devtools/tools-icons-small.png
--- a/browser/themes/osx/devtools/vview-delete.png
+++ b/browser/themes/osx/devtools/vview-delete.png
--- a/browser/themes/osx/devtools/vview-edit.png
+++ b/browser/themes/osx/devtools/vview-edit.png
--- a/browser/themes/osx/devtools/webconsole.css
+++ b/browser/themes/osx/devtools/webconsole.css
@ -3,270 +3,16 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

 %include ../shared.inc
+%include ../../shared/devtools/webconsole.inc.css

 /* General output styles */

-.webconsole-timestamp {
-  color: GrayText;
-  margin-top: 0;
-  margin-bottom: 0;
-  font-family: Menlo, Monaco, monospace;
-}
-
-.hud-msg-node {
-  list-style-image: url(chrome://browser/skin/devtools/webconsole.png);
-  -moz-image-region: rect(0, 1px, 0, 0);
-}
-
-.webconsole-msg-icon {
-  margin: 3px 4px;
-  width: 8px;
-  height: 8px;
-}
-
-.hud-clickable {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
+.webconsole-timestamp,
 .webconsole-msg-body {
-  margin-top: 0;
-  margin-bottom: 3px;
-  -moz-margin-start: 3px;
-  -moz-margin-end: 6px;
-  white-space: pre-wrap;
  font-family: Menlo, Monaco, monospace;
 }

-.webconsole-msg-body-piece {
-  margin: 0;
-}
-
-.webconsole-msg-url {
-  margin: 0 6px;
-}
-
-/* Repeated messages */
-.webconsole-msg-repeat {
-  margin: 2px 0;
-  padding-left: 4px;
-  padding-right: 4px;
-  color: white;
-  background-color: red;
-  border-radius: 40px;
-  font: message-box;
-  font-size: 0.9em;
-  font-weight: 600;
-}
-
-/* TODO move this and other functional rules to content - bug 635359 */
-.webconsole-msg-repeat[value="1"] {
-  display: none;
-}
-
-.webconsole-location {
-  margin-top: 0;
-  margin-bottom: 0;
-  -moz-margin-start: 0;
-  -moz-margin-end: 6px;
-  width: 10em;
-  text-align: end;
-}
-
-.hud-msg-node[selected="true"] > .webconsole-timestamp,
-.hud-msg-node[selected="true"] > .webconsole-location {
-  color: inherit;
-}
-
 .jsterm-input-node,
 .jsterm-complete-node {
  font: 1em Menlo, Monaco, monospace;
 }
-
-.hud-output-node {
-  -moz-appearance: none;
-  border-bottom: 1px solid ThreeDShadow;
-  margin: 0;
-}
-
-.hud-filtered-by-type,
-.hud-filtered-by-string {
-  display: none;
-}
-
-.hidden-message {
-  display: block;
-  visibility: hidden;
-  height: 0;
-  overflow: hidden;
-}
-
-/* WebConsole colored drops */
-
-.webconsole-filter-button[checked] {
-  color: white !important;
-}
-
-.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
-  content: "";
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  border-radius: 50%;
-  margin-left: 5px;
-  border-width: 1px;
-  border-style: solid;
-}
-
-/* Network styles */
-.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#444444, #000000);
-  border-color: #777;
-}
-
-.webconsole-msg-network > .webconsole-msg-icon-container {
-  -moz-border-start: solid #000 6px;
-}
-
-.webconsole-msg-network.webconsole-msg-error {
-  -moz-image-region: rect(0, 16px, 8px, 8px);
-}
-
-/* CSS styles */
-.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#2DC3F3, #00B6F0);
-  border-color: #1BA2CC;
-}
-
-.webconsole-msg-cssparser > .webconsole-msg-icon-container {
-  -moz-border-start: solid #00b6f0 6px;
-}
-
-.webconsole-msg-cssparser.webconsole-msg-error {
-  -moz-image-region: rect(8px, 16px, 16px, 8px);
-}
-
-.webconsole-msg-cssparser.webconsole-msg-warn {
-  -moz-image-region: rect(8px, 24px, 16px, 16px);
-}
-
-/* JS styles */
-.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#FCB142, #FB9500);
-  border-color: #E98A00;
-}
-
-.webconsole-msg-exception > .webconsole-msg-icon-container {
-  -moz-border-start: solid #fb9500 6px;
-}
-
-.webconsole-msg-exception.webconsole-msg-error {
-  -moz-image-region: rect(16px, 16px, 24px, 8px);
-}
-
-.webconsole-msg-exception.webconsole-msg-warn {
-  -moz-image-region: rect(16px, 24px, 24px, 16px);
-}
-
-/* Web Developer styles */
-.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#B9B9B9, #AAAAAA);
-  border-color: #929292;
-}
-
-.webconsole-msg-console > .webconsole-msg-icon-container {
-  -moz-border-start: solid #cbcbcb 6px;
-}
-
-.webconsole-msg-console.webconsole-msg-error,
-.webconsole-msg-output.webconsole-msg-error {
-  -moz-image-region: rect(24px, 16px, 32px, 8px);
-}
-
-.webconsole-msg-console.webconsole-msg-warn {
-  -moz-image-region: rect(24px, 24px, 32px, 16px);
-}
-
-.webconsole-msg-console.webconsole-msg-info {
-  -moz-image-region: rect(24px, 32px, 32px, 24px);
-}
-
-.webconsole-mixed-content {
-  color: #FF0000;
-}
-
-.webconsole-mixed-content-link {
-  color: #0000EE;
-  margin: 0;
-}
-
-/* Input and output styles */
-.webconsole-msg-input > .webconsole-msg-icon-container,
-.webconsole-msg-output > .webconsole-msg-icon-container {
-  border-left: solid #808080 6px;
-}
-
-.webconsole-msg-input {
-  -moz-image-region: rect(24px, 40px, 32px, 32px);
-}
-
-.webconsole-msg-output {
-  -moz-image-region: rect(24px, 48px, 32px, 40px);
-}
-
-/* JSTerm Styles */
-.jsterm-input-container {
-  background: white;
-}
-
-.jsterm-input-node,
-.jsterm-complete-node {
-  border: none;
-  padding: 0 0 0 16px;
-  -moz-appearance: none;
-}
-
-.jsterm-input-node {
-  background: url("chrome://browser/skin/devtools/commandline.png") 4px 2px no-repeat;
-}
-
-:-moz-any(.jsterm-input-node,
-          .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
-  overflow-x: hidden;
-}
-
-.jsterm-complete-node > .textbox-input-box > .textbox-textarea {
-  color: GrayText;
-}
-
-.webconsole-msg-inspector iframe {
-  height: 7em;
-  margin-bottom: 15px;
-  -moz-margin-end: 15px;
-  border-radius: 4px;
-  box-shadow: 0 0 12px #dfdfdf;
-}
-
-#webconsole-sidebar > tabs {
-  height: 0;
-  border: none;
-}
-
-/* Security styles */
-
-.webconsole-msg-security > .webconsole-msg-icon-container {
-  -moz-border-start: solid red 6px;
-}
-
-.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#FF3030, #FF7D7D);
-  border-color: #D12C2C;
-}
-
-.webconsole-msg-security.webconsole-msg-error {
-  -moz-image-region: rect(32px, 16px, 40px, 8px);
-}
-
-.webconsole-msg-security.webconsole-msg-warn {
-  -moz-image-region: rect(32px, 24px, 40px, 16px);
-}
--- a/browser/themes/osx/devtools/widgets.css
+++ b/browser/themes/osx/devtools/widgets.css
@ -571,19 +571,20 @@
 /* Variables and properties editing */

 .variables-view-delete {
-  list-style-image: url("chrome://browser/skin/devtools/toolbarbutton-close.png");
-  -moz-image-region: rect(0,32px,16px,16px);
-  opacity: 0;
+  list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
+  -moz-image-region: rect(0,16px,16px,0);
 }

 .variables-view-delete:hover {
-  opacity: 1;
+  -moz-image-region: rect(0,32px,16px,16px);
 }

-*:hover > .title > .variables-view-delete:not(:hover),
-*:focus > .title > .variables-view-delete:not(:hover) {
-  opacity: 0.5;
-  transition: opacity 0.2s ease-in-out;
+.variables-view-delete:active {
+  -moz-image-region: rect(0,48px,16px,32px);
+}
+
+*:not(:hover) .variables-view-delete {
+  display: none;
 }

 .variables-view-delete > .toolbarbutton-text {
@ -591,7 +592,7 @@
 }

 .variables-view-edit {
-  background: url("chrome://browser/skin/tabview/edit-light.png") center no-repeat;
+  background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
  width: 20px;
  height: 16px;
  cursor: pointer;
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@ -212,13 +212,12 @@ browser.jar:
  skin/classic/browser/devtools/dark-theme.css              (devtools/dark-theme.css)
  skin/classic/browser/devtools/light-theme.css             (devtools/light-theme.css)
  skin/classic/browser/devtools/widgets.css                 (devtools/widgets.css)
-  skin/classic/browser/devtools/commandline.png             (devtools/commandline.png)
+  skin/classic/browser/devtools/commandline-icon.png        (devtools/commandline-icon.png)
  skin/classic/browser/devtools/command-paintflashing.png   (devtools/command-paintflashing.png)
  skin/classic/browser/devtools/command-responsivemode.png  (devtools/command-responsivemode.png)
  skin/classic/browser/devtools/command-scratchpad.png      (devtools/command-scratchpad.png)
  skin/classic/browser/devtools/command-tilt.png            (devtools/command-tilt.png)
  skin/classic/browser/devtools/alerticon-warning.png       (devtools/alerticon-warning.png)
-  skin/classic/browser/devtools/goto-mdn.png                (devtools/goto-mdn.png)
  skin/classic/browser/devtools/ruleview.css                (devtools/ruleview.css)
  skin/classic/browser/devtools/commandline.css             (devtools/commandline.css)
  skin/classic/browser/devtools/checkbox-dark.png           (devtools/checkbox-dark.png)
@ -229,7 +228,6 @@ browser.jar:
  skin/classic/browser/devtools/orion-task.png              (devtools/orion-task.png)
  skin/classic/browser/devtools/orion-breakpoint.png        (devtools/orion-breakpoint.png)
  skin/classic/browser/devtools/orion-debug-location.png    (devtools/orion-debug-location.png)
-  skin/classic/browser/devtools/toolbarbutton-close.png     (devtools/toolbarbutton-close.png)
 * skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
  skin/classic/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
  skin/classic/browser/devtools/webconsole.png                  (devtools/webconsole.png)
@ -284,7 +282,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)
+  skin/classic/browser/devtools/toggle-tools.png            (devtools/toggle-tools.png)
  skin/classic/browser/devtools/dock-bottom.png             (devtools/dock-bottom.png)
  skin/classic/browser/devtools/dock-side.png               (devtools/dock-side.png)
 * skin/classic/browser/devtools/inspector.css               (devtools/inspector.css)
@ -292,11 +290,14 @@ browser.jar:
  skin/classic/browser/devtools/tool-options.png            (devtools/tool-options.png)
  skin/classic/browser/devtools/tool-webconsole.png         (devtools/tool-webconsole.png)
  skin/classic/browser/devtools/tool-debugger.png           (devtools/tool-debugger.png)
+  skin/classic/browser/devtools/tool-debugger-paused.png    (devtools/tool-debugger-paused.png)
  skin/classic/browser/devtools/tool-inspector.png          (devtools/tool-inspector.png)
  skin/classic/browser/devtools/tool-styleeditor.png        (devtools/tool-styleeditor.png)
  skin/classic/browser/devtools/tool-profiler.png           (devtools/tool-profiler.png)
  skin/classic/browser/devtools/tool-network.png            (devtools/tool-network.png)
  skin/classic/browser/devtools/close.png                   (devtools/close.png)
+  skin/classic/browser/devtools/vview-delete.png            (devtools/vview-delete.png)
+  skin/classic/browser/devtools/vview-edit.png              (devtools/vview-edit.png)
  skin/classic/browser/devtools/undock.png                  (devtools/undock.png)
  skin/classic/browser/devtools/font-inspector.css          (devtools/font-inspector.css)
  skin/classic/browser/devtools/computedview.css            (devtools/computedview.css)
--- a/browser/themes/shared/devtools/commandline.inc.css
+++ b/browser/themes/shared/devtools/commandline.inc.css
@ -4,6 +4,48 @@
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif

+/* Developer toolbar */
+
+#developer-toolbar {
+  padding: 0;
+  min-height: 32px;
+  background-image: url(devtools/background-noise-toolbar.png), linear-gradient(#303840, #2d3640);
+  border-top: 1px solid #060a0d;
+  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset, 0 -1px 0 hsla(206,37%,4%,.1) inset;
+}
+
+.developer-toolbar-button {
+  -moz-appearance: none;
+  border: none;
+  background: transparent;
+  margin: 0;
+  padding: 0 10px;
+  width: 32px;
+}
+
+.developer-toolbar-button > image {
+  margin: auto 10px;
+}
+
+#developer-toolbar-toolbox-button {
+  list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+#developer-toolbar-toolbox-button:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+#developer-toolbar-toolbox-button:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
+#developer-toolbar-toolbox-button[checked=true] {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+
+/* GCLI */
+
 html|*#gcli-tooltip-frame,
 html|*#gcli-output-frame {
  padding: 0;
@ -16,32 +58,39 @@ html|*#gcli-output-frame {
  border-width: 0;
  background-color: transparent;
  -moz-appearance: none;
-  margin-bottom: -2px;
 }

 .gclitoolbar-input-node,
-.gclitoolbar-complete-node,
-.gclitoolbar-prompt {
+.gclitoolbar-complete-node {
  margin: 0;
-  -moz-margin-end: 5px;
  -moz-box-align: center;
  padding-top: 0;
  padding-bottom: 0;
-  padding-right: 4px;
-  border: 1px solid transparent;
-  border-radius: 3px;
+  padding-right: 8px;
  text-shadow: none;
+  box-shadow: none;
+  border-width: 0;
+  background-color: transparent;
 }

 .gclitoolbar-input-node {
-  padding-left: 20px;
-  background-color: transparent;
  -moz-appearance: none;
-  border-color: hsl(210,24%,10%);
  color: hsl(210,30%,85%);
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05),
-              0 0 0 1px hsla(210,40%,83%,.1);
+  padding-left: 20px;
+  background-color: #242b33;
+  background-repeat: no-repeat;
+  background-position: 4px center;
+  box-shadow: 0 1px 1px hsla(206,37%,4%,.2) inset,
+              1px 0 0 hsla(206,37%,4%,.2) inset,
+              -1px 0 0 hsla(206,37%,4%,.2) inset;
+  line-height: 32px;
+  outline-style: none;
+  background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);
+}
+
+.gclitoolbar-input-node[focused="true"] {
+  background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
+  background-color: #232e38;
 }

 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
@ -54,18 +103,10 @@ html|*#gcli-output-frame {
  padding-left: 21px;
  background-color: transparent;
  color: transparent;
+  z-index: 100;
+  pointer-events: none;
 }

-.gclitoolbar-prompt {
-  padding-left: 4px;
-  padding-bottom: 2px;
-  font-size: 150%;
-  font-weight: bold;
-  color: hsl(210,30%,85%);
-  background-color: hsl(210,24%,16%);
-}
-
-.gclitoolbar-prompt-label,
 .gcli-in-incomplete,
 .gcli-in-error,
 .gcli-in-ontab,
--- a/browser/themes/shared/devtools/webconsole.inc.css
+++ b/browser/themes/shared/devtools/webconsole.inc.css
@ -0,0 +1,273 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* General output styles */
+
+.webconsole-timestamp {
+  color: GrayText;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-family: monospace;
+}
+
+.hud-msg-node {
+  list-style-image: url(chrome://browser/skin/devtools/webconsole.png);
+  -moz-image-region: rect(0, 1px, 0, 0);
+}
+
+.webconsole-msg-icon {
+  margin: 3px 4px;
+  width: 8px;
+  height: 8px;
+}
+
+.hud-clickable {
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+.webconsole-msg-body {
+  margin-top: 0;
+  margin-bottom: 3px;
+  -moz-margin-start: 3px;
+  -moz-margin-end: 6px;
+  white-space: pre-wrap;
+  font-family: monospace;
+}
+
+.webconsole-msg-body-piece {
+  margin: 0;
+}
+
+.webconsole-msg-url {
+  margin: 0 6px;
+}
+
+/* Repeated messages */
+.webconsole-msg-repeat {
+  margin: 2px 0;
+  padding-left: 4px;
+  padding-right: 4px;
+  color: white;
+  background-color: red;
+  border-radius: 40px;
+  font: message-box;
+  font-size: 0.9em;
+  font-weight: 600;
+}
+
+.webconsole-msg-repeat[value="1"] {
+  display: none;
+}
+
+.webconsole-location {
+  margin-top: 0;
+  margin-bottom: 0;
+  -moz-margin-start: 0;
+  -moz-margin-end: 6px;
+  width: 10em;
+  text-align: end;
+}
+
+.webconsole-mixed-content {
+  color: #FF0000;
+}
+
+.webconsole-mixed-content-link {
+  color: #0000EE;
+  margin: 0;
+}
+
+.hud-msg-node[selected="true"] > .webconsole-timestamp,
+.hud-msg-node[selected="true"] > .webconsole-location {
+  color: inherit;
+}
+
+.jsterm-input-container {
+  background: white;
+}
+
+.jsterm-input-node,
+.jsterm-complete-node {
+  font-family: monospace;
+}
+
+.hud-output-node {
+  -moz-appearance: none;
+  border-bottom: 1px solid ThreeDShadow;
+  margin: 0;
+}
+
+.hud-filtered-by-type,
+.hud-filtered-by-string {
+  display: none;
+}
+
+.hidden-message {
+  display: block;
+  visibility: hidden;
+  height: 0;
+  overflow: hidden;
+}
+
+/* WebConsole colored drops */
+
+.webconsole-filter-button {
+  -moz-user-focus: normal;
+}
+
+.webconsole-filter-button[checked] {
+  color: white !important;
+}
+
+.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
+  content: "";
+  display: inline-block;
+  height: 8px;
+  width: 8px;
+  border-radius: 50%;
+  margin-left: 5px;
+  border-width: 1px;
+  border-style: solid;
+}
+
+/* Network styles */
+.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#444444, #000000);
+  border-color: #777;
+}
+
+.webconsole-msg-network > .webconsole-msg-icon-container {
+  -moz-border-start: solid #000 6px;
+}
+
+.webconsole-msg-network.webconsole-msg-error {
+  -moz-image-region: rect(0, 16px, 8px, 8px);
+}
+
+/* CSS styles */
+.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#2DC3F3, #00B6F0);
+  border-color: #1BA2CC;
+}
+
+.webconsole-msg-cssparser > .webconsole-msg-icon-container {
+  -moz-border-start: solid #00b6f0 6px;
+}
+
+.webconsole-msg-cssparser.webconsole-msg-error {
+  -moz-image-region: rect(8px, 16px, 16px, 8px);
+}
+
+.webconsole-msg-cssparser.webconsole-msg-warn {
+  -moz-image-region: rect(8px, 24px, 16px, 16px);
+}
+
+/* JS styles */
+.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#FCB142, #FB9500);
+  border-color: #E98A00;
+}
+
+.webconsole-msg-exception > .webconsole-msg-icon-container {
+  -moz-border-start: solid #fb9500 6px;
+}
+
+.webconsole-msg-exception.webconsole-msg-error {
+  -moz-image-region: rect(16px, 16px, 24px, 8px);
+}
+
+.webconsole-msg-exception.webconsole-msg-warn {
+  -moz-image-region: rect(16px, 24px, 24px, 16px);
+}
+
+/* Web Developer styles */
+.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#B9B9B9, #AAAAAA);
+  border-color: #929292;
+}
+
+.webconsole-msg-console > .webconsole-msg-icon-container {
+  -moz-border-start: solid #cbcbcb 6px;
+}
+
+.webconsole-msg-console.webconsole-msg-error,
+.webconsole-msg-output.webconsole-msg-error {
+  -moz-image-region: rect(24px, 16px, 32px, 8px);
+}
+
+.webconsole-msg-console.webconsole-msg-warn {
+  -moz-image-region: rect(24px, 24px, 32px, 16px);
+}
+
+.webconsole-msg-console.webconsole-msg-info {
+  -moz-image-region: rect(24px, 32px, 32px, 24px);
+}
+
+/* Input and output styles */
+.webconsole-msg-input > .webconsole-msg-icon-container,
+.webconsole-msg-output > .webconsole-msg-icon-container {
+  border-left: solid #808080 6px;
+}
+
+.webconsole-msg-input {
+  -moz-image-region: rect(24px, 40px, 32px, 32px);
+}
+
+.webconsole-msg-output {
+  -moz-image-region: rect(24px, 48px, 32px, 40px);
+}
+
+/* JSTerm Styles */
+.jsterm-input-node,
+.jsterm-complete-node {
+  border: none;
+  padding: 0 0 0 16px;
+  -moz-appearance: none;
+}
+
+.jsterm-input-node {
+  background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16) no-repeat;
+}
+
+:-moz-any(.jsterm-input-node,
+          .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
+  overflow-x: hidden;
+}
+
+.jsterm-complete-node > .textbox-input-box > .textbox-textarea {
+  color: GrayText;
+}
+
+.webconsole-msg-inspector iframe {
+  height: 7em;
+  margin-bottom: 15px;
+  -moz-margin-end: 15px;
+  border-radius: 4px;
+  box-shadow: 0 0 12px #dfdfdf;
+}
+
+#webconsole-sidebar > tabs {
+  height: 0;
+  border: none;
+}
+
+/* Security styles */
+
+.webconsole-msg-security > .webconsole-msg-icon-container {
+  -moz-border-start: solid red 6px;
+}
+
+.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
+  background-image: linear-gradient(#FF3030, #FF7D7D);
+  border-color: #D12C2C;
+}
+
+.webconsole-msg-security.webconsole-msg-error {
+  -moz-image-region: rect(32px, 16px, 40px, 8px);
+}
+
+.webconsole-msg-security.webconsole-msg-warn {
+  -moz-image-region: rect(32px, 24px, 40px, 16px);
+}
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@ -2801,82 +2801,10 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
  font-size: 120%;
 }

-/* Developer toolbar */
-
-#developer-toolbar {
-  border-top: 1px solid hsla(211,68%,6%,.65) !important;
-}
-
 %include ../shared/devtools/responsivedesign.inc.css
 %include ../shared/devtools/highlighter.inc.css
 %include ../shared/devtools/commandline.inc.css

-.gclitoolbar-input-node {
-  border-color: hsl(210,24%,10%);
-  box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05),
-              0 0 0 1px hsla(210,40%,83%,.1);
-}
-
-/* Web Console */
-
-.web-console-frame {
-  border-bottom: 1px solid #aaa;
-}
-
-.web-console-frame[animated] {
-  transition: height 100ms;
-}
-
-/* Developer Toolbar */
-
-#developer-toolbar-toolbox-button {
-  min-width: 18px;
-}
-
-#developer-toolbar-toolbox-button > .toolbarbutton-text {
-  display: none;
-}
-
-#developer-toolbar-toolbox-button > .toolbarbutton-icon {
-  -moz-margin-end: 0;
-}
-
-.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[open=true],
-.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:hover,
-.developer-toolbar-button[checked=true],
-.developer-toolbar-button[open=true] {
-  color: hsl(208,100%,60%) !important;
-  text-shadow: 0 0 6px hsl(208,100%,60%);
-}
-
-.developer-toolbar-button[checked=true] {
-  background: rgba(0,0,0,.4);
-}
-
-#developer-toolbar-toolbox-button {
-  -moz-image-region: rect(64px, 16px, 80px, 0);
-}
-
 /* Error counter */

 #developer-toolbar-toolbox-button[error-count]:before {
--- a/browser/themes/windows/devtools/commandline-icon.png
+++ b/browser/themes/windows/devtools/commandline-icon.png
--- a/browser/themes/windows/devtools/commandline.css
+++ b/browser/themes/windows/devtools/commandline.css
@ -10,9 +10,9 @@

 #gcli-output-root,
 #gcli-tooltip-root {
-  border: 1px solid hsl(210,24%,10%);
+  border: 1px solid hsl(206,37%,4%);
  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
-  background-image: linear-gradient(hsla(209,18%,18%,0.9), hsl(210,24%,16%));
+  background-image: linear-gradient(hsla(209,18%,18%,0.9), hsl(209,23%,18%));
  border-radius: 3px;
 }

@ -32,9 +32,9 @@
  margin-left: 8px;
  width: 20px;
  height: 10px;
-  border-left: 1px solid hsl(210,24%,10%);
-  border-right: 1px solid hsl(210,24%,10%);
-  background-color: hsl(210,24%,16%);
+  border-left: 1px solid hsl(206,37%,4%);
+  border-right: 1px solid hsl(206,37%,4%);
+  background-color: hsl(209,23%,18%);
 }

 .gcli-tt-description,
@ -83,8 +83,8 @@
  font-weight: normal;
  font-size: 90%;
  border-radius: 3px;
-  background-color: hsl(210,24%,16%);
-  border: 1px solid hsl(210,24%,10%);
+  background-color: hsl(209,23%,18%);
+  border: 1px solid hsl(206,37%,4%);
 }

 .gcli-out-shortcut:before,
--- a/browser/themes/windows/devtools/common.css
+++ b/browser/themes/windows/devtools/common.css
@ -46,7 +46,7 @@

 .devtools-menulist:-moz-focusring,
 .devtools-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.4);
+  outline: 1px dotted hsla(210,30%,85%,0.7);
  outline-offset: -4px;
 }

@ -195,12 +195,13 @@
 /* Close button */

 .devtools-closebutton {
-  list-style-image: url("chrome://browser/skin/devtools/toolbarbutton-close.png");
-  -moz-image-region: rect(0, 16px, 16px, 0);
+  list-style-image: url("chrome://browser/skin/devtools/close.png");
+  -moz-appearance: none;
+  border: none;
+  margin: 0 4px;
  min-width: 16px;
  width: 16px;
-  -moz-appearance: none;
-  border-style: none;
+  opacity: 0.6;
 }

 .devtools-closebutton > .toolbarbutton-text {
@ -208,11 +209,11 @@
 }

 .devtools-closebutton:hover {
-  -moz-image-region: rect(0, 32px, 16px, 16px);
+  opacity: 0.8;
 }

 .devtools-closebutton:hover:active {
-  -moz-image-region: rect(0, 48px, 16px, 32px);
+  opacity: 1;
 }

 /* Splitters */
--- a/browser/themes/windows/devtools/computedview.css
+++ b/browser/themes/windows/devtools/computedview.css
@ -100,12 +100,6 @@ body {
 }

 /* From skin */
-.helplink {
-  /* FIXME: remove this image 
-  background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
-  */
-}
-
 .expander {
  visibility: hidden;
  margin-left: -12px!important;
--- a/browser/themes/windows/devtools/debugger.css
+++ b/browser/themes/windows/devtools/debugger.css
@ -83,13 +83,12 @@

 .dbg-expression {
  height: 20px;
-  -moz-padding-start: 8px;
 }

 .dbg-expression-arrow {
-  width: 10px;
+  width: 16px;
  height: auto;
-  background: url("chrome://browser/skin/devtools/commandline.png") 0px 4px no-repeat;
+  background: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
 }

 .dbg-expression-input {
--- a/browser/themes/windows/devtools/goto-mdn.png
+++ b/browser/themes/windows/devtools/goto-mdn.png
--- a/browser/themes/windows/devtools/splitview.css
+++ b/browser/themes/windows/devtools/splitview.css
@ -96,22 +96,8 @@

 /* Resizers */

-.splitview-landscape-resizer {
-  -moz-appearance: none;
-  width: 7px;
-  background-image: linear-gradient(to right, black 1px, rgba(255,255,255,0.2) 1px);
-  background-size: 2px 10px;
-  background-clip: padding-box;
-  background-repeat: repeat-x;
-  border-width: 1px;
-  border-style: solid;
-  border-color: rgba(255, 255, 255, 0.05);
-  margin: 5px 0;
-  transform: translateX(-7px);
-}
-
-.splitview-landscape-resizer:-moz-locale-dir(rtl) {
-  transform: translateX(7px);
+.splitview-landscape-splitter {
+  -moz-border-start-color: transparent;
 }

 .splitview-portrait-resizer {
--- a/browser/themes/windows/devtools/toggle-tools.png
+++ b/browser/themes/windows/devtools/toggle-tools.png
--- a/browser/themes/windows/devtools/tool-debugger-paused.png
+++ b/browser/themes/windows/devtools/tool-debugger-paused.png
--- a/browser/themes/windows/devtools/toolbarbutton-close.png
+++ b/browser/themes/windows/devtools/toolbarbutton-close.png
--- a/browser/themes/windows/devtools/toolbox.css
+++ b/browser/themes/windows/devtools/toolbox.css
@ -27,21 +27,15 @@
  list-style-image: url("chrome://browser/skin/devtools/undock.png");
 }

-#toolbox-close {
-  list-style-image: url("chrome://browser/skin/devtools/close.png");
-}
-
 #toolbox-dock-window,
 #toolbox-dock-bottom,
-#toolbox-dock-side,
-#toolbox-close {
+#toolbox-dock-side {
  opacity: 0.6;
 }

 #toolbox-dock-window:hover,
 #toolbox-dock-bottom:hover,
-#toolbox-dock-side:hover,
-#toolbox-close:hover {
+#toolbox-dock-side:hover {
  opacity: 1;
 }

@ -223,6 +217,32 @@
  box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
 }

+.devtools-tab:not([selected=true]).highlighted {
+  color: #f5f7fa;
+  background-image: radial-gradient(farthest-corner at center top, #c0ff40, hsla(80,100%,63%,.5) 70%, hsla(80,100%,63%,.3) 97%),
+                    radial-gradient(farthest-side at center top, hsla(80,100%,35%,.5), hsla(80,100%,35%,0)),
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(99,100%,14%,.2), hsla(99,100%,14%,.2));
+  background-size: 100% 1px,
+                   100% 5px,
+                   1px 100%,
+                   1px 100%,
+                   100%;
+  background-repeat: no-repeat,
+                     no-repeat,
+                     no-repeat,
+                     no-repeat,
+                     repeat-x;
+  background-position: top right, top left, left, right;
+}
+
+.devtools-tab:not(.highlighted) > .highlighted-icon,
+.devtools-tab[selected=true] > .highlighted-icon,
+.devtools-tab:not([selected=true]).highlighted > .default-icon {
+  visibility: collapse;
+}
+
 #options-panel {
  background-image: url("chrome://browser/skin/newtab/noise.png");
 }
@ -247,3 +267,16 @@
 .options-groupbox > * {
  padding: 2px;
 }
+
+.options-citation-label {
+  font-size: 1rem !important;
+  /* !important is required otherwise font-size will still be 1.4rem */
+  font-style: italic;
+  padding: 4px 0 0; /* To align it with the checkbox */
+  color: #444;
+}
+
+.options-citation-label + label {
+  padding: 3px 0 0 !important; /* To align it with the checkbox */
+  font-style: italic;
+}
--- a/browser/themes/windows/devtools/tools-icons-small.png
+++ b/browser/themes/windows/devtools/tools-icons-small.png
--- a/browser/themes/windows/devtools/vview-delete.png
+++ b/browser/themes/windows/devtools/vview-delete.png
--- a/browser/themes/windows/devtools/vview-edit.png
+++ b/browser/themes/windows/devtools/vview-edit.png
--- a/browser/themes/windows/devtools/webconsole.css
+++ b/browser/themes/windows/devtools/webconsole.css
@ -2,239 +2,15 @@
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

-/* General output styles */
-
-.webconsole-timestamp {
-  color: GrayText;
-  margin-top: 0;
-  margin-bottom: 0;
-  font-family: Consolas, Lucida Console, monospace;
-}
-
-.hud-msg-node {
-  list-style-image: url(chrome://browser/skin/devtools/webconsole.png);
-  -moz-image-region: rect(0, 1px, 0, 0);
-}
-
-.webconsole-msg-icon {
-  margin: 3px 4px;
-  width: 8px;
-  height: 8px;
-}
-
-.hud-clickable {
-  cursor: pointer;
-  text-decoration: underline;
-}
-
-.webconsole-msg-body {
-  margin-top: 0;
-  margin-bottom: 3px;
-  -moz-margin-start: 3px;
-  -moz-margin-end: 6px;
-  white-space: pre-wrap;
-  font-family: Consolas, Lucida Console, monospace;
-}
-
-.webconsole-msg-body-piece {
-  margin: 0;
-}
-
-.webconsole-msg-url {
-  margin: 0 6px;
-}
-
-/* Repeated messages */
-.webconsole-msg-repeat {
-  margin: 2px 0;
-  padding-left: 4px;
-  padding-right: 4px;
-  color: white;
-  background-color: red;
-  border-radius: 40px;
-  font: message-box;
-  font-size: 0.9em;
-  font-weight: 600;
-}
-
-/* TODO move this and other functional rules to content - bug 635359 */
-.webconsole-msg-repeat[value="1"] {
-  display: none;
-}
-
-.webconsole-location {
-  margin-top: 0;
-  margin-bottom: 0;
-  -moz-margin-start: 0;
-  -moz-margin-end: 6px;
-  width: 10em;
-  text-align: end;
-}
-
-.hud-msg-node[selected="true"] > .webconsole-timestamp,
-.hud-msg-node[selected="true"] > .webconsole-location {
-  color: inherit;
-}
+%include ../../shared/devtools/webconsole.inc.css

+.webconsole-timestamp,
+.webconsole-msg-body,
 .jsterm-input-node,
 .jsterm-complete-node {
  font-family: Consolas, Lucida Console, monospace;
 }

-.hud-output-node {
-  -moz-appearance: none;
-  border-bottom: 1px solid ThreeDShadow;
-  margin: 0;
-}
-
-.hud-filtered-by-type,
-.hud-filtered-by-string {
-  display: none;
-}
-
-.hidden-message {
-  display: block;
-  visibility: hidden;
-  height: 0;
-  overflow: hidden;
-}
-
-/* WebConsole colored drops */
-
-.webconsole-filter-button[checked] {
-  color: white !important;
-}
-
-.webconsole-filter-button > .toolbarbutton-menubutton-button:before {
-  content: "";
-  display: inline-block;
-  height: 8px;
-  width: 8px;
-  border-radius: 50%;
-  margin-left: 5px;
-  border-width: 1px;
-  border-style: solid;
-}
-
-/* Network styles */
-.webconsole-filter-button[category="net"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#444444, #000000);
-  border-color: #777;
-}
-
-.webconsole-msg-network > .webconsole-msg-icon-container {
-  -moz-border-start: solid #000 6px;
-}
-
-.webconsole-msg-network.webconsole-msg-error {
-  -moz-image-region: rect(0, 16px, 8px, 8px);
-}
-
-/* CSS styles */
-.webconsole-filter-button[category="css"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#2DC3F3, #00B6F0);
-  border-color: #1BA2CC;
-}
-
-.webconsole-msg-cssparser > .webconsole-msg-icon-container {
-  -moz-border-start: solid #00b6f0 6px;
-}
-
-.webconsole-msg-cssparser.webconsole-msg-error {
-  -moz-image-region: rect(8px, 16px, 16px, 8px);
-}
-
-.webconsole-msg-cssparser.webconsole-msg-warn {
-  -moz-image-region: rect(8px, 24px, 16px, 16px);
-}
-
-/* JS styles */
-.webconsole-filter-button[category="js"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#FCB142, #FB9500);
-  border-color: #E98A00;
-}
-
-.webconsole-msg-exception > .webconsole-msg-icon-container {
-  -moz-border-start: solid #fb9500 6px;
-}
-
-.webconsole-msg-exception.webconsole-msg-error {
-  -moz-image-region: rect(16px, 16px, 24px, 8px);
-}
-
-.webconsole-msg-exception.webconsole-msg-warn {
-  -moz-image-region: rect(16px, 24px, 24px, 16px);
-}
-
-/* Web Developer styles */
-.webconsole-filter-button[category="logging"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#B9B9B9, #AAAAAA);
-  border-color: #929292;
-}
-
-.webconsole-msg-console > .webconsole-msg-icon-container {
-  -moz-border-start: solid #cbcbcb 6px;
-}
-
-.webconsole-msg-console.webconsole-msg-error,
-.webconsole-msg-output.webconsole-msg-error {
-  -moz-image-region: rect(24px, 16px, 32px, 8px);
-}
-
-.webconsole-msg-console.webconsole-msg-warn {
-  -moz-image-region: rect(24px, 24px, 32px, 16px);
-}
-
-.webconsole-msg-console.webconsole-msg-info {
-  -moz-image-region: rect(24px, 32px, 32px, 24px);
-}
-
-.webconsole-mixed-content {
-  color: #FF0000;
-}
-
-.webconsole-mixed-content-link {
-  color: #0000EE;
-  margin: 0;
-}
-
-/* Input and output styles */
-.webconsole-msg-input > .webconsole-msg-icon-container,
-.webconsole-msg-output > .webconsole-msg-icon-container {
-  border-left: solid #808080 6px;
-}
-
-.webconsole-msg-input {
-  -moz-image-region: rect(24px, 40px, 32px, 32px);
-}
-
-.webconsole-msg-output {
-  -moz-image-region: rect(24px, 48px, 32px, 40px);
-}
-
-/* JSTerm Styles */
-.jsterm-input-node,
-.jsterm-complete-node {
-  border: none;
-  padding: 0 0 0 16px;
-  -moz-appearance: none;
-}
-
-.jsterm-input-node {
-  background: url("chrome://browser/skin/devtools/commandline.png") 4px 3px no-repeat;
-}
-
-:-moz-any(.jsterm-input-node,
-          .jsterm-complete-node) > .textbox-input-box > .textbox-textarea {
-  overflow-x: hidden;
-}
-
-.jsterm-complete-node > .textbox-input-box > .textbox-textarea {
-  color: GrayText;
-}
-
-/* Filter */
-
 /*
 * This hardcoded width likely due to a toolkit Windows specific bug.
 * See http://hg.mozilla.org/mozilla-central/annotate/f38d6df93cad/toolkit/themes/winstripe/global/textbox-aero.css#l7
@ -243,35 +19,3 @@
 .hud-filter-box {
  width: 200px;
 }
-
-.webconsole-msg-inspector iframe {
-  height: 7em;
-  margin-bottom: 15px;
-  -moz-margin-end: 15px;
-  border-radius: 4px;
-  box-shadow: 0 0 12px #dfdfdf;
-}
-
-#webconsole-sidebar > tabs {
-  height: 0;
-  border: none;
-}
-
-/* Security styles */
-
-.webconsole-msg-security > .webconsole-msg-icon-container {
-  -moz-border-start: solid red 6px;
-}
-
-.webconsole-filter-button[category="security"] > .toolbarbutton-menubutton-button:before {
-  background-image: linear-gradient(#FF3030, #FF7D7D);
-  border-color: #D12C2C;
-}
-
-.webconsole-msg-security.webconsole-msg-error {
-  -moz-image-region: rect(32px, 16px, 40px, 8px);
-}
-
-.webconsole-msg-security.webconsole-msg-warn {
-  -moz-image-region: rect(32px, 24px, 40px, 16px);
-}
--- a/browser/themes/windows/devtools/widgets.css
+++ b/browser/themes/windows/devtools/widgets.css
@ -574,19 +574,20 @@
 /* Variables and properties editing */

 .variables-view-delete {
-  list-style-image: url("chrome://browser/skin/devtools/toolbarbutton-close.png");
-  -moz-image-region: rect(0,32px,16px,16px);
-  opacity: 0;
+  list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
+  -moz-image-region: rect(0,16px,16px,0);
 }

 .variables-view-delete:hover {
-  opacity: 1;
+  -moz-image-region: rect(0,32px,16px,16px);
 }

-*:hover > .title > .variables-view-delete:not(:hover),
-*:focus > .title > .variables-view-delete:not(:hover) {
-  opacity: 0.5;
-  transition: opacity 0.2s ease-in-out;
+.variables-view-delete:active {
+  -moz-image-region: rect(0,48px,16px,32px);
+}
+
+*:not(:hover) .variables-view-delete {
+  display: none;
 }

 .variables-view-delete > .toolbarbutton-text {
@ -594,7 +595,7 @@
 }

 .variables-view-edit {
-  background: url("chrome://browser/skin/tabview/edit-light.png") center no-repeat;
+  background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
  width: 20px;
  height: 16px;
  cursor: pointer;
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@ -150,9 +150,8 @@ browser.jar:
        skin/classic/browser/devtools/dark-theme.css                (devtools/dark-theme.css)
        skin/classic/browser/devtools/light-theme.css               (devtools/light-theme.css)
        skin/classic/browser/devtools/widgets.css                   (devtools/widgets.css)
-        skin/classic/browser/devtools/commandline.png               (devtools/commandline.png)
+        skin/classic/browser/devtools/commandline-icon.png          (devtools/commandline-icon.png)
        skin/classic/browser/devtools/alerticon-warning.png         (devtools/alerticon-warning.png)
-        skin/classic/browser/devtools/goto-mdn.png                  (devtools/goto-mdn.png)
        skin/classic/browser/devtools/ruleview.css                  (devtools/ruleview.css)
        skin/classic/browser/devtools/commandline.css               (devtools/commandline.css)
        skin/classic/browser/devtools/command-paintflashing.png     (devtools/command-paintflashing.png)
@ -167,8 +166,7 @@ browser.jar:
        skin/classic/browser/devtools/orion-task.png                (devtools/orion-task.png)
        skin/classic/browser/devtools/orion-breakpoint.png          (devtools/orion-breakpoint.png)
        skin/classic/browser/devtools/orion-debug-location.png      (devtools/orion-debug-location.png)
-        skin/classic/browser/devtools/toolbarbutton-close.png       (devtools/toolbarbutton-close.png)
-        skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
+*       skin/classic/browser/devtools/webconsole.css                  (devtools/webconsole.css)
        skin/classic/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
        skin/classic/browser/devtools/webconsole.png                  (devtools/webconsole.png)
        skin/classic/browser/devtools/breadcrumbs-scrollbutton.png                 (devtools/breadcrumbs-scrollbutton.png)
@ -222,7 +220,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)
+        skin/classic/browser/devtools/toggle-tools.png              (devtools/toggle-tools.png)
        skin/classic/browser/devtools/dock-bottom.png               (devtools/dock-bottom.png)
        skin/classic/browser/devtools/dock-side.png                 (devtools/dock-side.png)
        skin/classic/browser/devtools/floating-scrollbars.css       (devtools/floating-scrollbars.css)
@ -232,11 +230,14 @@ browser.jar:
        skin/classic/browser/devtools/tool-options.png              (devtools/tool-options.png)
        skin/classic/browser/devtools/tool-webconsole.png           (devtools/tool-webconsole.png)
        skin/classic/browser/devtools/tool-debugger.png             (devtools/tool-debugger.png)
+        skin/classic/browser/devtools/tool-debugger-paused.png      (devtools/tool-debugger-paused.png)
        skin/classic/browser/devtools/tool-inspector.png            (devtools/tool-inspector.png)
        skin/classic/browser/devtools/tool-styleeditor.png          (devtools/tool-styleeditor.png)
        skin/classic/browser/devtools/tool-profiler.png             (devtools/tool-profiler.png)
        skin/classic/browser/devtools/tool-network.png              (devtools/tool-network.png)
        skin/classic/browser/devtools/close.png                     (devtools/close.png)
+        skin/classic/browser/devtools/vview-delete.png              (devtools/vview-delete.png)
+        skin/classic/browser/devtools/vview-edit.png                (devtools/vview-edit.png)
        skin/classic/browser/devtools/undock.png                    (devtools/undock.png)
        skin/classic/browser/devtools/font-inspector.css            (devtools/font-inspector.css)
        skin/classic/browser/devtools/computedview.css              (devtools/computedview.css)
@ -402,7 +403,7 @@ browser.jar:
        skin/classic/aero/browser/devtools/dark-theme.css            (devtools/dark-theme.css)
        skin/classic/aero/browser/devtools/light-theme.css           (devtools/light-theme.css)
        skin/classic/aero/browser/devtools/widgets.css               (devtools/widgets.css)
-        skin/classic/aero/browser/devtools/commandline.png           (devtools/commandline.png)
+        skin/classic/aero/browser/devtools/commandline-icon.png      (devtools/commandline-icon.png)
        skin/classic/aero/browser/devtools/command-paintflashing.png  (devtools/command-paintflashing.png)
        skin/classic/aero/browser/devtools/command-responsivemode.png (devtools/command-responsivemode.png)
        skin/classic/aero/browser/devtools/command-scratchpad.png    (devtools/command-scratchpad.png)
@ -410,7 +411,6 @@ browser.jar:
        skin/classic/aero/browser/devtools/checkbox-dark.png         (devtools/checkbox-dark.png)
        skin/classic/aero/browser/devtools/checkbox-light.png        (devtools/checkbox-light.png)
        skin/classic/aero/browser/devtools/alerticon-warning.png     (devtools/alerticon-warning.png)
-        skin/classic/aero/browser/devtools/goto-mdn.png              (devtools/goto-mdn.png)
        skin/classic/aero/browser/devtools/ruleview.css              (devtools/ruleview.css)
        skin/classic/aero/browser/devtools/commandline.css           (devtools/commandline.css)
        skin/classic/aero/browser/devtools/markup-view.css           (devtools/markup-view.css)
@ -419,8 +419,7 @@ browser.jar:
        skin/classic/aero/browser/devtools/orion-task.png            (devtools/orion-task.png)
        skin/classic/aero/browser/devtools/orion-breakpoint.png      (devtools/orion-breakpoint.png)
        skin/classic/aero/browser/devtools/orion-debug-location.png  (devtools/orion-debug-location.png)
-        skin/classic/aero/browser/devtools/toolbarbutton-close.png   (devtools/toolbarbutton-close.png)
-        skin/classic/aero/browser/devtools/webconsole.css                  (devtools/webconsole.css)
+*       skin/classic/aero/browser/devtools/webconsole.css                  (devtools/webconsole.css)
        skin/classic/aero/browser/devtools/webconsole_networkpanel.css     (devtools/webconsole_networkpanel.css)
        skin/classic/aero/browser/devtools/webconsole.png                  (devtools/webconsole.png)
        skin/classic/aero/browser/devtools/breadcrumbs-scrollbutton.png                 (devtools/breadcrumbs-scrollbutton.png)
@ -474,7 +473,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)
+        skin/classic/aero/browser/devtools/toggle-tools.png          (devtools/toggle-tools.png)
        skin/classic/aero/browser/devtools/dock-bottom.png           (devtools/dock-bottom.png)
        skin/classic/aero/browser/devtools/dock-side.png             (devtools/dock-side.png)
        skin/classic/aero/browser/devtools/floating-scrollbars.css   (devtools/floating-scrollbars.css)
@ -484,11 +483,14 @@ browser.jar:
        skin/classic/aero/browser/devtools/tool-options.png          (devtools/tool-options.png)
        skin/classic/aero/browser/devtools/tool-webconsole.png       (devtools/tool-webconsole.png)
        skin/classic/aero/browser/devtools/tool-debugger.png         (devtools/tool-debugger.png)
+        skin/classic/aero/browser/devtools/tool-debugger-paused.png  (devtools/tool-debugger-paused.png)
        skin/classic/aero/browser/devtools/tool-inspector.png        (devtools/tool-inspector.png)
        skin/classic/aero/browser/devtools/tool-styleeditor.png      (devtools/tool-styleeditor.png)
        skin/classic/aero/browser/devtools/tool-profiler.png         (devtools/tool-profiler.png)
        skin/classic/aero/browser/devtools/tool-network.png          (devtools/tool-network.png)
        skin/classic/aero/browser/devtools/close.png                 (devtools/close.png)
+        skin/classic/aero/browser/devtools/vview-delete.png          (devtools/vview-delete.png)
+        skin/classic/aero/browser/devtools/vview-edit.png            (devtools/vview-edit.png)
        skin/classic/aero/browser/devtools/undock.png                (devtools/undock.png)
        skin/classic/aero/browser/devtools/font-inspector.css        (devtools/font-inspector.css)
        skin/classic/aero/browser/devtools/computedview.css          (devtools/computedview.css)
--- a/toolkit/devtools/server/actors/script.js
+++ b/toolkit/devtools/server/actors/script.js
@ -1616,7 +1616,18 @@ ObjectActor.prototype = {
   */
  onPrototypeAndProperties: function OA_onPrototypeAndProperties(aRequest) {
    let ownProperties = Object.create(null);
-    for (let name of this.obj.getOwnPropertyNames()) {
+    let names;
+    try {
+      names = this.obj.getOwnPropertyNames();
+    } catch (ex) {
+      // The above can throw if this.obj points to a dead object.
+      // TODO: we should use Cu.isDeadWrapper() - see bug 885800.
+      return { from: this.actorID,
+               prototype: this.threadActor.createValueGrip(null),
+               ownProperties: ownProperties,
+               safeGetterValues: Object.create(null) };
+    }
+    for (let name of names) {
      ownProperties[name] = this._propertyDescriptor(name);
    }
    return { from: this.actorID,
--- a/toolkit/devtools/sourcemap/SourceMap.jsm
+++ b/toolkit/devtools/sourcemap/SourceMap.jsm
@ -315,9 +315,9 @@ define('source-map/source-map-consumer', ['require', 'exports', 'module' ,  'sou
    };

  /**
-   * Returns the original source content. The only argument is
-   * the url of the original source file. Returns null if no
-   * original source content is availible.
+   * Returns the original source content. The only argument is the url of the
+   * original source file. Returns null if no original source content is
+   * availible.
   */
  SourceMapConsumer.prototype.sourceContentFor =
    function SourceMapConsumer_sourceContentFor(aSource) {
@ -335,10 +335,21 @@ define('source-map/source-map-consumer', ['require', 'exports', 'module' ,  'sou

      var url;
      if (this.sourceRoot
-          && (url = util.urlParse(this.sourceRoot))
-          && (!url.path || url.path == "/")
-          && this._sources.has("/" + aSource)) {
-        return this.sourcesContent[this._sources.indexOf("/" + aSource)];
+          && (url = util.urlParse(this.sourceRoot))) {
+        // XXX: file:// URIs and absolute paths lead to unexpected behavior for
+        // many users. We can help them out when they expect file:// URIs to
+        // behave like it would if they were running a local HTTP server. See
+        // https://bugzilla.mozilla.org/show_bug.cgi?id=885597.
+        var fileUriAbsPath = aSource.replace(/^file:\/\//, "");
+        if (url.scheme == "file"
+            && this._sources.has(fileUriAbsPath)) {
+          return this.sourcesContent[this._sources.indexOf(fileUriAbsPath)]
+        }
+
+        if ((!url.path || url.path == "/")
+            && this._sources.has("/" + aSource)) {
+          return this.sourcesContent[this._sources.indexOf("/" + aSource)];
+        }
      }

      throw new Error('"' + aSource + '" is not in the SourceMap.');
@ -1193,7 +1204,7 @@ define('source-map/source-map-generator', ['require', 'exports', 'module' ,  'so
      var result = '';
      var mapping;

-      // The mappings must be guarenteed to be in sorted order before we start
+      // The mappings must be guaranteed to be in sorted order before we start
      // serializing them or else the generated line numbers (which are defined
      // via the ';' separators) will be all messed up. Note: it might be more
      // performant to maintain the sorting as we insert them, rather than as we
--- a/toolkit/devtools/sourcemap/tests/unit/test_source_map_consumer.js
+++ b/toolkit/devtools/sourcemap/tests/unit/test_source_map_consumer.js
@ -308,6 +308,21 @@ define("test/source-map/test-source-map-consumer", ["require", "exports", "modul
    assert.equal(map.sourceContentFor("/a"), "foo");
  };

+  exports['test bug 885597'] = function (assert, util) {
+    var map = new SourceMapConsumer({
+      "version": 3,
+      "file": "foo.js",
+      "sourceRoot": "file:///Users/AlGore/Invented/The/Internet/",
+      "sources": ["/a"],
+      "names": [],
+      "mappings": "AACA",
+      "sourcesContent": ["foo"]
+    });
+
+    var s = map.sources[0];
+    assert.equal(map.sourceContentFor(s), "foo");
+  };
+
 });
 function run_test() {
  runSourceMapTests('test/source-map/test-source-map-consumer', do_throw);
--- a/toolkit/devtools/webconsole/WebConsoleUtils.jsm
+++ b/toolkit/devtools/webconsole/WebConsoleUtils.jsm
@ -795,8 +795,15 @@ function JSPropertyProvider(aScope, aInputValue)
      return null;
    }

-    // Skip Iterators and Generators.
-    if (WCU.isIteratorOrGenerator(obj)) {
+    try {
+      // Skip Iterators and Generators.
+      if (WCU.isIteratorOrGenerator(obj)) {
+        return null;
+      }
+    }
+    catch (ex) {
+      // The above can throw if |obj| is a dead object.
+      // TODO: we should use Cu.isDeadWrapper() - see bug 885800.
      return null;
    }
  }