Merge m-c to inbound.

browser/devtools/framework/ToolDefinitions.jsm

@@ -66,7 +66,7 @@ let webConsoleDefinition = {
   accesskey: l10n("webConsoleCmd.accesskey", webConsoleStrings),
   modifiers: Services.appinfo.OS == "Darwin" ? "accel,alt" : "accel,shift",
   ordinal: 0,
-  icon: "chrome://browser/skin/devtools/webconsole-tool-icon.png",
+  icon: "chrome://browser/skin/devtools/tool-webconsole.png",
   url: "chrome://browser/content/devtools/webconsole.xul",
   label: l10n("ToolboxWebconsole.label", webConsoleStrings),
   tooltip: l10n("ToolboxWebconsole.tooltip", webConsoleStrings),
@@ -87,7 +87,7 @@ let debuggerDefinition = {
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
   ordinal: 1,
   killswitch: "devtools.debugger.enabled",
-  icon: "chrome://browser/skin/devtools/tools-icons-small.png",
+  icon: "chrome://browser/skin/devtools/tool-debugger.png",
   url: "chrome://browser/content/debugger.xul",
   label: l10n("ToolboxDebugger.label", debuggerStrings),
   tooltip: l10n("ToolboxDebugger.tooltip", debuggerStrings),
@@ -108,7 +108,7 @@ let inspectorDefinition = {
   key: l10n("inspector.commandkey", inspectorStrings),
   ordinal: 2,
   modifiers: osString == "Darwin" ? "accel,alt" : "accel,shift",
-  icon: "chrome://browser/skin/devtools/tools-icons-small.png",
+  icon: "chrome://browser/skin/devtools/tool-inspector.png",
   url: "chrome://browser/content/devtools/inspector/inspector.xul",
   label: l10n("inspector.label", inspectorStrings),
   tooltip: l10n("inspector.tooltip", inspectorStrings),
@@ -130,6 +130,7 @@ let styleEditorDefinition = {
   accesskey: l10n("open.accesskey", styleEditorStrings),
   modifiers: "shift",
   label: l10n("ToolboxStyleEditor.label", styleEditorStrings),
+  icon: "chrome://browser/skin/devtools/tool-styleeditor.png",
   url: "chrome://browser/content/styleeditor.xul",
   tooltip: l10n("ToolboxStyleEditor.tooltip", styleEditorStrings),
 
@@ -146,7 +147,6 @@ let styleEditorDefinition = {
 let profilerDefinition = {
   id: "jsprofiler",
   killswitch: "devtools.profiler.enabled",
-  icon: "chrome://browser/skin/devtools/tools-icons-small.png",
   url: "chrome://browser/content/profiler.xul",
   label: l10n("profiler.label", profilerStrings),
   tooltip: l10n("profiler.tooltip", profilerStrings),

browser/devtools/framework/Toolbox.jsm

@@ -362,6 +362,9 @@ Toolbox.prototype = {
     radio.id = "toolbox-tab-" + id;
     radio.setAttribute("toolid", id);
     radio.setAttribute("tooltiptext", toolDefinition.tooltip);
+    if (toolDefinition.icon) {
+      radio.setAttribute("src", toolDefinition.icon);
+    }
 
     let ordinal = (typeof toolDefinition.ordinal == "number") ?
                   toolDefinition.ordinal : MAX_ORDINAL;

browser/devtools/framework/connect/connect.css

@@ -78,12 +78,12 @@ body.connecting > #connecting {
   vertical-align: top;
 }
 
-#actors {
+.actors {
   padding-left: 0;
   font-size: 0.9rem;
 }
 
-#actors > a {
+.actors > a {
   display: block;
   margin: 5px;
   padding: 5px;

browser/devtools/framework/connect/connect.js

@@ -71,7 +71,7 @@ function onConnectionReady(aType, aTraits) {
     document.body.classList.remove("connecting");
     document.body.classList.add("actors-mode");
 
-    let parent = document.getElementById("actors");
+    let parent = document.getElementById("tabActors");
 
     // Add Global Process debugging...
     let globals = JSON.parse(JSON.stringify(aResponse));
@@ -85,6 +85,8 @@ function onConnectionReady(aType, aTraits) {
       buildLink(aResponse.tabs[i], parent, i == aResponse.selected);
     }
 
+    let gParent = document.getElementById("globalActors");
+
     // Build the Remote Process button
     if (Object.keys(globals).length > 1) {
       let a = document.createElement("a");
@@ -92,10 +94,10 @@ function onConnectionReady(aType, aTraits) {
         openToolbox(globals, true);
 
       }
-      a.title = a.textContent = window.l10n.GetStringFromName("remoteProcess");
+      a.title = a.textContent = window.l10n.GetStringFromName("mainProcess");
       a.className = "remote-process";
       a.href = "#";
-      parent.appendChild(a);
+      gParent.appendChild(a);
     }
     // Move the selected tab on top
     let selectedLink = parent.querySelector("a.selected");
@@ -164,4 +166,5 @@ function handleConnectionTimeout() {
 function openToolbox(form, chrome=false) {
   let target = TargetFactory.forRemote(form, gClient, chrome);
   gDevTools.showToolbox(target, "webconsole", Toolbox.HostType.WINDOW);
+  window.close();
 }

browser/devtools/framework/connect/connect.xhtml

@@ -37,8 +37,10 @@
       <p class="error-message error-unexpected">&errorUnexpected;</p>
     </section>
     <section id="actors-list">
-      <p>&availability;</p>
+      <p>&availableTabs;</p>
-      <ul id="actors"></ul>
+      <ul class="actors" id="tabActors"></ul>
+      <p>&availableProcesses;</p>
+      <ul class="actors" id="globalActors"></ul>
     </section>
     <section id="connecting">
       <p><img src="chrome://browser/skin/tabbrowser/loading.png"></img> &connecting;</p>

browser/devtools/framework/toolbox.css

@@ -8,3 +8,8 @@
   display: none;
 }
 
+#toolbox-controls > toolbarbutton > .toolbarbutton-text,
+#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text,
+.command-button > .toolbarbutton-text {
+  display: none;
+}

browser/devtools/framework/toolbox.xul

@@ -7,7 +7,6 @@
  %toolboxDTD;
 ]>
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
-<?xml-stylesheet href="chrome://browser/content/devtools/shared/common.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/content/devtools/framework/toolbox.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/devtools/toolbox.css" type="text/css"?>
@@ -20,7 +19,6 @@
 #ifdef XP_MACOSX
       <hbox id="toolbox-controls">
         <toolbarbutton id="toolbox-close"
-                       class="devtools-closebutton"
                        tooltiptext="&toolboxCloseButton.tooltip;"/>
         <hbox id="toolbox-dock-buttons"/>
       </hbox>
@@ -29,10 +27,10 @@
       </radiogroup>
       <hbox id="toolbox-buttons" flex="1" pack="end"/>
 #ifndef XP_MACOSX
+      <vbox id="toolbox-controls-separator"/>
       <hbox id="toolbox-controls">
         <hbox id="toolbox-dock-buttons"/>
         <toolbarbutton id="toolbox-close"
-                       class="devtools-closebutton"
                        tooltiptext="&toolboxCloseButton.tooltip;"/>
       </hbox>
 #endif

browser/devtools/inspector/InspectorPanel.jsm

@@ -201,13 +201,21 @@ InspectorPanel.prototype = {
     this._destroyMarkup();
     this.isDirty = false;
     let self = this;
-    newWindow.addEventListener("DOMContentLoaded", function onDOMReady() {
+
-      newWindow.removeEventListener("DOMContentLoaded", onDOMReady, true);;
+    function onDOMReady() {
+      newWindow.removeEventListener("DOMContentLoaded", onDOMReady, true);
+
       if (!self.selection.node) {
         self.selection.setNode(newWindow.document.documentElement);
       }
       self._initMarkup();
-    }, true);
+    }
+
+    if (newWindow.document.readyState == "loading") {
+      newWindow.addEventListener("DOMContentLoaded", onDOMReady, true);
+    } else {
+      onDOMReady();
+    }
   },
 
   /**

browser/devtools/responsivedesign/CmdResize.jsm

@@ -31,7 +31,7 @@ gcli.addCommand({
 gcli.addCommand({
   name: 'resize toggle',
   buttonId: "command-button-responsive",
-  buttonClass: "command-button devtools-toolbarbutton",
+  buttonClass: "command-button",
   tooltipText: gcli.lookup("resizeModeToggleTooltip"),
   description: gcli.lookup('resizeModeToggleDesc'),
   manual: gcli.lookup('resizeModeManual'),

browser/devtools/scratchpad/CmdScratchpad.jsm

@@ -12,7 +12,7 @@ Components.utils.import("resource:///modules/devtools/gcli.jsm");
 gcli.addCommand({
   name: "scratchpad",
   buttonId: "command-button-scratchpad",
-  buttonClass: "command-button devtools-toolbarbutton",
+  buttonClass: "command-button",
   tooltipText: gcli.lookup("scratchpadOpenTooltip"),
   hidden: true,
   exec: function(args, context) {

browser/devtools/styleinspector/CssHtmlTree.jsm

@@ -1204,13 +1204,13 @@ SelectorView.prototype = {
     let result = this.selectorInfo.selector.text;
     if (this.selectorInfo.elementStyle) {
       let source = this.selectorInfo.sourceElement;
-      let IUI = this.tree.styleInspector.IUI;
+      let inspector = this.tree.styleInspector.inspector;
-      if (IUI && IUI.selection == source) {
+
+      if (inspector.selection.node == source) {
         result = "this";
       } else {
         result = CssLogic.getShortName(source);
       }
-
       result += ".style";
     }
 

browser/devtools/tilt/CmdTilt.jsm

@@ -43,7 +43,7 @@ gcli.addCommand({
 gcli.addCommand({
   name: "tilt toggle",
   buttonId: "command-button-tilt",
-  buttonClass: "command-button  devtools-toolbarbutton",
+  buttonClass: "command-button",
   tooltipText: gcli.lookup("tiltToggleTooltip"),
   hidden: true,
   exec: function(args, context) {

browser/locales/en-US/chrome/browser/devtools/connection-screen.dtd

@@ -13,10 +13,10 @@
 <!ENTITY port       "Port:">
 <!ENTITY connect    "Connect">
 <!ENTITY connecting "Connecting…">
-<!ENTITY availability "Available remote objects:">
+<!ENTITY availableTabs "Available remote tabs:">
-<!ENTITY remoteProcess "remote process">
+<!ENTITY availableProcesses "Available remote processes:">
 <!ENTITY connectionError "Error:">
 <!ENTITY errorTimeout "Error: connection timeout.">
 <!ENTITY errorRefused "Error: connection refused.">
 <!ENTITY errorUnexpected "Unexpected error.">
-<!ENTITY help "Firefox Developer Tools can debug remote devices (Firefox for Android and Firefox OS for example). Make sure that you have turned on the 'Debugger Server' option on the remote device. See <a target='_' href='https://developer.mozilla.org/en-US/docs/Tools/Debugger#Remote_Debugging'>documentation</a>.">
+<!ENTITY help "Firefox Developer Tools can debug remote devices (Firefox for Android and Firefox OS, for example). Make sure that you have turned on the 'Remote debugging' option in the remote device. See the <a target='_' href='https://developer.mozilla.org/docs/Tools/Debugger#Remote_Debugging'>documentation</a> for more.">

browser/locales/en-US/chrome/browser/devtools/connection-screen.properties

@@ -6,4 +6,4 @@
 # The Remote Connection window can reached from the "connect…" menuitem
 # in the Web Developer menu.
 
-remoteProcess=Remote Process
+mainProcess=Main Process

browser/locales/jar.mn

@@ -39,6 +39,7 @@
     locale/browser/devtools/layoutview.dtd            (%chrome/browser/devtools/layoutview.dtd)
     locale/browser/devtools/responsiveUI.properties   (%chrome/browser/devtools/responsiveUI.properties)
     locale/browser/devtools/toolbox.dtd            (%chrome/browser/devtools/toolbox.dtd)
+    locale/browser/devtools/toolbox.properties     (%chrome/browser/devtools/toolbox.properties)
     locale/browser/devtools/inspector.dtd          (%chrome/browser/devtools/inspector.dtd)
     locale/browser/devtools/connection-screen.dtd  (%chrome/browser/devtools/connection-screen.dtd)
     locale/browser/devtools/connection-screen.properties (%chrome/browser/devtools/connection-screen.properties)

browser/themes/gnomestripe/devtools/toolbox.css

@@ -2,8 +2,16 @@
  * 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/. */
 
-#toolbox-tabs {
+#toolbox-controls {
-  margin: 0;
+  margin: 0 4px;
+}
+
+#toolbox-controls > toolbarbutton,
+#toolbox-dock-buttons > toolbarbutton {
+  -moz-appearance: none;
+  margin: 0 4px;
+  min-width: 16px;
+  width: 16px;
 }
 
 #toolbox-dock-bottom {
@@ -15,7 +23,52 @@
 }
 
 #toolbox-dock-window {
-  list-style-image: url("chrome://browser/skin/devtools/dock-window.png");
+  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 {
+  opacity: 0.6;
+}
+
+#toolbox-dock-window:hover,
+#toolbox-dock-bottom:hover,
+#toolbox-dock-side:hover,
+#toolbox-close:hover {
+  opacity: 1;
+}
+
+#toolbox-controls-separator {
+  width: 3px;
+  background-image: linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)),
+                    linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)),
+                    linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0));
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  background-position: 0, 1px, 2px;
+  -moz-margin-start: 8px;
+}
+
+/* Command buttons */
+
+.command-button {
+  -moz-appearance: none;
+  padding: 0 8px;
+  margin: 0;
+  width: 16px;
+}
+
+.command-button:hover {
+  background-color: hsla(206,37%,4%,.2);
+}
+.command-button:hover:active {
+  background-color: hsla(206,37%,4%,.4);
 }
 
 #command-button-responsive {
@@ -66,29 +119,91 @@
 
 .devtools-tabbar {
   -moz-appearance: none;
-  background-image: linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
+  background-image: url(background-noise-toolbar.png),
-  color: hsl(210,30%,85%);
+                    linear-gradient(#303840, #2d3640);
-  padding: 4px 3px 3px;
+  border-top: 1px solid #060a0d;
-  box-shadow: 0 -3px 0 0 rgb(20,20,20) inset, 0 -4px 0 0 rgba(0,0,0,0.8) inset;
+  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset,
+              0 -1px 0 hsla(206,37%,4%,.1) inset;
+  min-height: 32px;
+  padding: 0;
+}
+
+#toolbox-tabs {
+  margin: 0;
 }
 
 .devtools-tab {
   -moz-appearance: none;
-  min-width: 78px;
+  min-width: 88px;
-  min-height: 22px;
+  min-height: 32px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  color: #b6babf;
-  border-radius: 3px 3px 0 0;
+  margin: 0;
-  color: inherit;
+  padding: 0;
-  border-style: solid;
+  background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-  border-color: transparent;
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1));
-  border-width: 1px 1px 0;
+  background-size: 1px 100%;
-  margin: 0 5px;
+  background-repeat: no-repeat;
-  padding: 0 10px 1px;
+  background-position: left, right;
+  border-right: 1px solid hsla(206,37%,4%,.45);
+}
+
+.devtools-tab > .radio-label-center-box > .radio-label-box {
+  -moz-appearance: none;
+  border: none;
+  padding: 0 16px;
+}
+
+.devtools-tab > .radio-label-center-box >.radio-label-box > .radio-icon {
+  -moz-margin-end: 6px;
+  opacity: 0.6;
+}
+
+.devtools-tab:hover > .radio-label-center-box > .radio-label-box >
+.radio-icon {
+  opacity: 0.8;
+}
+
+.devtools-tab:active > .radio-label-center-box > .radio-label-box > .radio-icon,
+.devtools-tab[selected=true] > .radio-label-center-box > .radio-label-box >
+.radio-icon {
+  opacity: 1;
+}
+
+.devtools-tab:hover {
+  background-image: 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(206,37%,4%,.1), hsla(206,37%,4%,.2));
+  background size: 1px 100%,
+                   1px 100%,
+                   100%;
+  background-repeat: no-repeat,
+                     no-repeat,
+                     repeat-x;
+  background-position: left, right;
+  color: #ced3d9;
+}
+.devtools-tab:hover:active {
+  background-color: hsla(206,37%,4%,.2);
+  color: #f5f7fa;
 }
 
 .devtools-tab[selected=true] {
-  border-color: hsla(210,8%,5%,.6);
+  color: #f5f7fa;
-  background-color: rgb(20,20,20);
+  background-image: radial-gradient(ellipse farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)),
-  text-shadow: none;
+                    radial-gradient(ellipse farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)),
-  color: white;
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)),
+                    linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3));
+  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;
+  box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
 }

browser/themes/gnomestripe/jar.mn

@@ -172,10 +172,15 @@ browser.jar:
   skin/classic/browser/devtools/tools-icons-small.png     (devtools/tools-icons-small.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/dock-window.png           (devtools/dock-window.png)
   skin/classic/browser/devtools/floating-scrollbars.css   (devtools/floating-scrollbars.css)
   skin/classic/browser/devtools/inspector.css             (devtools/inspector.css)
   skin/classic/browser/devtools/toolbox.css               (devtools/toolbox.css)
+  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-inspector.png        (devtools/tool-inspector.png)
+  skin/classic/browser/devtools/tool-styleeditor.png      (devtools/tool-styleeditor.png)
+  skin/classic/browser/devtools/close.png                 (devtools/close.png)
+  skin/classic/browser/devtools/undock.png                (devtools/undock.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-16-throbber.png
   skin/classic/browser/sync-16.png

browser/themes/pinstripe/devtools/toolbox.css

@@ -2,8 +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/. */
 
-#toolbox-tabs {
+#toolbox-controls {
-  margin: 0;
+  margin: 0 4px;
+}
+
+#toolbox-controls > toolbarbutton,
+#toolbox-dock-buttons > toolbarbutton {
+  margin: 0 4px;
+  min-width: 16px;
+  width: 16px;
 }
 
 #toolbox-dock-bottom {
@@ -15,7 +22,40 @@
 }
 
 #toolbox-dock-window {
-  list-style-image: url("chrome://browser/skin/devtools/dock-window.png");
+  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 {
+  opacity: 0.6;
+}
+
+#toolbox-dock-window:hover,
+#toolbox-dock-bottom:hover,
+#toolbox-dock-side:hover,
+#toolbox-close:hover {
+  opacity: 1;
+}
+
+/* Command buttons */
+
+.command-button {
+  padding: 0 8px;
+  margin: 0;
+  width: 16px;
+}
+
+.command-button:hover {
+  background-color: hsla(206,37%,4%,.2);
+}
+.command-button:hover:active {
+  background-color: hsla(206,37%,4%,.4);
 }
 
 #command-button-responsive {
@@ -66,29 +106,88 @@
 
 .devtools-tabbar {
   -moz-appearance: none;
-  background-image: url(background-noise-toolbar.png), linear-gradient(to bottom, hsl(210,11%,36%), hsl(210,11%,18%));
+  background-image: url(background-noise-toolbar.png),
-  color: hsl(210,30%,85%);
+                    linear-gradient(#303840, #2d3640);
-  padding: 4px 3px 3px;
+  border-top: 1px solid #060a0d;
-  box-shadow: 0 -3px 0 0 rgb(20,20,20) inset, 0 -4px 0 0 rgba(0,0,0,0.8) inset;
+  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset,
+              0 -1px 0 hsla(206,37%,4%,.1) inset;
+  min-height: 32px;
+  padding: 0;
+}
+
+#toolbox-tabs {
+  margin: 0;
+  border-left: 1px solid hsla(206,37%,4%,.45);
 }
 
 .devtools-tab {
   -moz-appearance: none;
-  min-width: 78px;
+  min-width: 88px;
-  min-height: 22px;
+  min-height: 32px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  color: #b6babf;
-  border-radius: @toolbarbuttonCornerRadius@ @toolbarbuttonCornerRadius@ 0 0;
+  margin: 0;
-  color: inherit;
+  padding: 0;
-  border-style: solid;
+  background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-  border-color: transparent;
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1));
-  border-width: 1px 1px 0;
+  background-size: 1px 100%;
-  margin: 0 5px;
+  background-repeat: no-repeat;
-  padding: 0 10px 1px;
+  background-position: left, right;
+  border-right: 1px solid hsla(206,37%,4%,.45);
+}
+
+.devtools-tab > .radio-label-box {
+  padding: 0 16px;
+}
+
+.devtools-tab > .radio-label-box > .radio-icon {
+  -moz-margin-end: 6px;
+  opacity: 0.6;
+}
+
+.devtools-tab:hover > .radio-label-box > .radio-icon {
+  opacity: 0.8;
+}
+
+.devtools-tab:active > .radio-label-box > .radio-icon,
+.devtools-tab[selected=true] > .radio-label-box > .radio-icon {
+  opacity: 1;
+}
+
+.devtools-tab:hover {
+  background-image: 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(206,37%,4%,.1), hsla(206,37%,4%,.2));
+  background size: 1px 100%,
+                   1px 100%,
+                   100%;
+  background-repeat: no-repeat,
+                     no-repeat,
+                     repeat-x;
+  background-position: left, right;
+  color: #ced3d9;
+}
+.devtools-tab:hover:active {
+  background-color: hsla(206,37%,4%,.2);
+  color: #f5f7fa;
 }
 
 .devtools-tab[selected=true] {
-  border-color: hsla(210,8%,5%,.6);
+  color: #f5f7fa;
-  background-color: rgb(20,20,20);
+  background-image: radial-gradient(ellipse farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)),
-  text-shadow: none;
+                    radial-gradient(ellipse farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)),
-  color: white;
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)),
+                    linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3));
+  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;
+  box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
 }

browser/themes/pinstripe/jar.mn

@@ -243,10 +243,15 @@ browser.jar:
   skin/classic/browser/devtools/tools-icons-small.png       (devtools/tools-icons-small.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/dock-window.png             (devtools/dock-window.png)
   skin/classic/browser/devtools/floating-scrollbars.css     (devtools/floating-scrollbars.css)
 * skin/classic/browser/devtools/inspector.css               (devtools/inspector.css)
   skin/classic/browser/devtools/toolbox.css                 (devtools/toolbox.css)
+  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-inspector.png          (devtools/tool-inspector.png)
+  skin/classic/browser/devtools/tool-styleeditor.png        (devtools/tool-styleeditor.png)
+  skin/classic/browser/devtools/close.png                   (devtools/close.png)
+  skin/classic/browser/devtools/undock.png                  (devtools/undock.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-throbber.png
   skin/classic/browser/sync-16.png

browser/themes/winstripe/devtools/toolbox.css

@@ -2,8 +2,17 @@
  * 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/. */
 
-#toolbox-tabs {
+#toolbox-controls {
-  margin: 0;
+  margin: 0 4px;
+}
+
+#toolbox-controls > toolbarbutton,
+#toolbox-dock-buttons > toolbarbutton {
+  -moz-appearance: none;
+  border: none;
+  margin: 0 4px;
+  min-width: 16px;
+  width: 16px;
 }
 
 #toolbox-dock-bottom {
@@ -15,7 +24,54 @@
 }
 
 #toolbox-dock-window {
-  list-style-image: url("chrome://browser/skin/devtools/dock-window.png");
+  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 {
+  opacity: 0.6;
+}
+
+#toolbox-dock-window:hover,
+#toolbox-dock-bottom:hover,
+#toolbox-dock-side:hover,
+#toolbox-close:hover {
+  opacity: 1;
+}
+
+#toolbox-controls-separator {
+  width: 3px;
+  background-image: linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0)),
+                    linear-gradient(hsla(206,37%,4%,0), hsla(206,37%,4%,.6), hsla(206,37%,4%,0)),
+                    linear-gradient(hsla(204,45%,98%,0), hsla(204,45%,98%,.1), hsla(204,45%,98%,0));
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  background-position: 0, 1px, 2px;
+  -moz-margin-start: 8px;
+}
+
+
+/* Command buttons */
+
+.command-button {
+  -moz-appearance: none;
+  border: none;
+  margin: 0;
+  padding: 0 8px;
+  width: 16px;
+}
+
+.command-button:hover {
+  background-color: hsla(206,37%,4%,.2);
+}
+.command-button:hover:active {
+  background-color: hsla(206,37%,4%,.4);
 }
 
 #command-button-responsive {
@@ -66,33 +122,89 @@
 
 .devtools-tabbar {
   -moz-appearance: none;
-  background-image: linear-gradient(to bottom, hsl(209,18%,34%), hsl(210,24%,16%));
+  background-image: url(background-noise-toolbar.png),
-  color: hsl(210,30%,85%);
+                    linear-gradient(#303840, #2d3640);
-  padding: 4px 3px 3px;
+  border: none;
-  box-shadow: 0 -3px 0 0 rgb(20,20,20) inset, 0 -4px 0 0 rgba(0,0,0,0.8) inset;
+  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset,
+              0 -1px 0 hsla(206,37%,4%,.1) inset;
+  min-height: 32px;
+  padding: 0;
+}
+
+#toolbox-tabs {
+  margin: 0;
 }
 
 .devtools-tab {
   -moz-appearance: none;
-  min-width: 78px;
+  min-width: 88px;
-  min-height: 22px;
+  min-height: 32px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  color: #b6babf;
-  border-radius: 3px 3px 0 0;
+  margin: 0;
-  color: inherit;
+  padding: 0;
-  border-style: solid;
+  background-image: linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
-  border-color: transparent;
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1));
-  border-width: 1px 1px 0;
+  background-size: 1px 100%;
-  margin: 0 5px;
+  background-repeat: no-repeat;
-  padding: 0 10px 1px;
+  background-position: left, right;
-}
+  border-top: 1px solid #060a0d;
-
+  border-right: 1px solid hsla(206,37%,4%,.45);
-.devtools-tab[selected=true] {
-  border-color: hsla(210,8%,5%,.6);
-  background-color: rgb(20,20,20);
-  text-shadow: none;
-  color: white;
 }
 
 .devtools-tab > .radio-label-box {
-  -moz-margin-start: 0px
+  border: none;
+  padding: 0 16px;
+}
+
+.devtools-tab > .radio-label-box > .radio-icon {
+  -moz-margin-end: 6px;
+  opacity: 0.6;
+}
+
+.devtools-tab:hover > .radio-label-box > .radio-icon {
+  opacity: 0.8;
+}
+
+.devtools-tab:active > .radio-label-box > .radio-icon,
+.devtools-tab[selected=true] > .radio-label-box > .radio-icon {
+  opacity: 1;
+}
+
+.devtools-tab:hover {
+  background-image: 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(206,37%,4%,.1), hsla(206,37%,4%,.2));
+  background size: 1px 100%,
+                   1px 100%,
+                   100%;
+  background-repeat: no-repeat,
+                     no-repeat,
+                     repeat-x;
+  background-position: left, right;
+  color: #ced3d9;
+}
+.devtools-tab:hover:active {
+  background-color: hsla(206,37%,4%,.2);
+  color: #f5f7fa;
+}
+
+.devtools-tab[selected=true] {
+  color: #f5f7fa;
+  background-image: radial-gradient(ellipse farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)),
+                    radial-gradient(ellipse farthest-side at center top, hsla(200,100%,70%,.4), hsla(200,100%,70%,0)),
+                    linear-gradient(hsla(204,45%,98%,.05), hsla(204,45%,98%,.1)),
+                    linear-gradient(hsla(204,45%,98%,.02), hsla(204,45%,98%,.04)),
+                    linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.3));
+  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;
+  box-shadow: 1px -1px 0 hsla(206,37%,4%,.2) inset;
 }

browser/themes/winstripe/jar.mn

@@ -198,10 +198,15 @@ browser.jar:
         skin/classic/browser/devtools/tools-icons-small.png         (devtools/tools-icons-small.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/dock-window.png               (devtools/dock-window.png)
         skin/classic/browser/devtools/floating-scrollbars.css       (devtools/floating-scrollbars.css)
         skin/classic/browser/devtools/inspector.css                 (devtools/inspector.css)
         skin/classic/browser/devtools/toolbox.css                   (devtools/toolbox.css)
+        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-inspector.png            (devtools/tool-inspector.png)
+        skin/classic/browser/devtools/tool-styleeditor.png          (devtools/tool-styleeditor.png)
+        skin/classic/browser/devtools/close.png                     (devtools/close.png)
+        skin/classic/browser/devtools/undock.png                    (devtools/undock.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-throbber.png
         skin/classic/browser/sync-16.png
@@ -411,10 +416,15 @@ browser.jar:
         skin/classic/aero/browser/devtools/tools-icons-small.png     (devtools/tools-icons-small.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/dock-window.png           (devtools/dock-window.png)
         skin/classic/aero/browser/devtools/floating-scrollbars.css   (devtools/floating-scrollbars.css)
         skin/classic/aero/browser/devtools/inspector.css             (devtools/inspector.css)
         skin/classic/aero/browser/devtools/toolbox.css               (devtools/toolbox.css)
+        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-inspector.png        (devtools/tool-inspector.png)
+        skin/classic/aero/browser/devtools/tool-styleeditor.png      (devtools/tool-styleeditor.png)
+        skin/classic/aero/browser/devtools/close.png                 (devtools/close.png)
+        skin/classic/aero/browser/devtools/undock.png                (devtools/undock.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/sync-throbber.png
         skin/classic/aero/browser/sync-16.png

build/valgrind/cross-architecture.sup

@@ -277,3 +277,11 @@
    fun:_ZN2js6ctypes10StructTypeL6CreateEP9JSContextjPN2JS5ValueE
    ...
 }
+{
+   Bug 824323
+   Memcheck:Leak
+   fun:malloc
+   ...
+   fun:_ZN7mozilla3dom7workers13WorkerPrivate9DoRunLoopEP9JSContext
+   ...
+}

content/base/src/nsFrameLoader.cpp

@@ -642,14 +642,16 @@ SetTreeOwnerAndChromeEventHandlerOnDocshellTree(nsIDocShellTreeItem* aItem,
   NS_PRECONDITION(aItem, "Must have item");
 
   aItem->SetTreeOwner(aOwner);
-  nsCOMPtr<nsIDocShell> shell(do_QueryInterface(aItem));
-  shell->SetChromeEventHandler(aHandler);
 
   int32_t childCount = 0;
   aItem->GetChildCount(&childCount);
   for (int32_t i = 0; i < childCount; ++i) {
     nsCOMPtr<nsIDocShellTreeItem> item;
     aItem->GetChildAt(i, getter_AddRefs(item));
+    if (aHandler) {
+      nsCOMPtr<nsIDocShell> shell(do_QueryInterface(item));
+      shell->SetChromeEventHandler(aHandler);
+    }
     SetTreeOwnerAndChromeEventHandlerOnDocshellTree(item, aOwner, aHandler);
   }
 }
@@ -1056,7 +1058,8 @@ nsFrameLoader::SwapWithOtherLoader(nsFrameLoader* aOther,
   }
 
   // Also make sure that the two docshells are the same type. Otherwise
-  // swapping is certainly not safe.
+  // swapping is certainly not safe. If this needs to be changed then
+  // the code below needs to be audited as it assumes identical types.
   int32_t ourType = nsIDocShellTreeItem::typeChrome;
   int32_t otherType = nsIDocShellTreeItem::typeChrome;
   ourTreeItem->GetItemType(&ourType);
@@ -1205,11 +1208,15 @@ nsFrameLoader::SwapWithOtherLoader(nsFrameLoader* aOther,
   ourParentItem->AddChild(otherTreeItem);
   otherParentItem->AddChild(ourTreeItem);
 
+  // Restore the correct chrome event handlers.
+  ourDocshell->SetChromeEventHandler(otherChromeEventHandler);
+  otherDocshell->SetChromeEventHandler(ourChromeEventHandler);
   // Restore the correct treeowners
+  // (and also chrome event handlers for content frames only).
   SetTreeOwnerAndChromeEventHandlerOnDocshellTree(ourTreeItem, otherOwner,
-                                                  otherChromeEventHandler);
+    ourType == nsIDocShellTreeItem::typeContent ? otherChromeEventHandler : nullptr);
   SetTreeOwnerAndChromeEventHandlerOnDocshellTree(otherTreeItem, ourOwner,
-                                                  ourChromeEventHandler);
+    ourType == nsIDocShellTreeItem::typeContent ? ourChromeEventHandler : nullptr);
 
   // Switch the owner content before we start calling AddTreeItemToTreeOwner.
   // Note that we rely on this to deal with setting mObservingOwnerContent to

content/base/test/chrome/Makefile.in

@@ -50,6 +50,9 @@ MOCHITEST_CHROME_FILES = \
     test_bug800386.xul \
     test_csp_bug773891.html \
     test_domparsing.xul \
+    test_bug814638.xul \
+    host_bug814638.xul \
+    frame_bug814638.xul \
     $(NULL)
 
 include $(topsrcdir)/config/rules.mk

content/base/test/chrome/frame_bug814638.xul

@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/css" href="chrome://global/skin"?>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=814638
+-->
+<window title="Mozilla Bug 814638"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+
+  <keyset>
+    <key key="T" modifiers="control" oncommand="receivedKeyEvent()"/>
+  </keyset>
+
+  <iframe flex="1" src="about:"/>
+
+</window>

content/base/test/chrome/host_bug814638.xul

@@ -0,0 +1,9 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/css" href="chrome://global/skin"?>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=814638
+-->
+<window title="Mozilla Bug 814638"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <iframe flex="1" src="frame_bug814638.xul"/>
+</window>

content/base/test/chrome/test_bug814638.xul

@@ -0,0 +1,64 @@
+<?xml version="1.0"?>
+<?xml-stylesheet type="text/css" href="chrome://global/skin"?>
+<?xml-stylesheet type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"?>
+<!--
+https://bugzilla.mozilla.org/show_bug.cgi?id=814638
+-->
+<window title="Mozilla Bug 814638"
+        xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
+  <script type="application/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
+
+  <!-- test results are displayed in the html:body -->
+  <body xmlns="http://www.w3.org/1999/xhtml">
+  <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=814638"
+     target="_blank" id="link">Mozilla Bug 814638</a>
+  </body>
+
+  <!-- test code goes here -->
+  <script type="application/javascript">
+  <![CDATA[
+  /** Test for Bug 814638 **/
+
+  SimpleTest.waitForExplicitFinish();
+
+  function startTest() {
+    let hostURL = "chrome://mochitests/content/chrome/content/base/test/chrome/host_bug814638.xul";
+    let host1 = window.open(hostURL, "_blank", "chrome");
+    let host2 = window.open(hostURL, "_blank", "chrome");
+
+    let isHost1Loaded = isHost2Loaded = false
+    host1.onload = function() {
+      isHost1Loaded = true;
+      if (isHost2Loaded) swapFrames();
+    }
+    host2.onload = function() {
+      isHost2Loaded = true;
+      if (isHost1Loaded) swapFrames();
+    }
+
+    function swapFrames() {
+      let iframe1 = host1.document.querySelector("iframe");
+      let iframe2 = host2.document.querySelector("iframe");
+      iframe2.QueryInterface(Components.interfaces.nsIFrameLoaderOwner);
+      iframe2.swapFrameLoaders(iframe1);
+      setTimeout(function() {
+        iframe2.contentWindow.receivedKeyEvent = receivedKeyEvent;
+        let innerIframe2 = iframe2.contentDocument.querySelector("iframe");
+        let e = innerIframe2.contentDocument.createEvent("KeyboardEvent");
+        e.initKeyEvent("keypress", true, true, null, true, false, false, false, 0, "t".charCodeAt(0));
+        innerIframe2.contentDocument.documentElement.dispatchEvent(e);
+        host1.close();
+        host2.close();
+      }, 0);
+    }
+  }
+
+  function receivedKeyEvent() {
+    ok(true, "Received key event");
+    SimpleTest.finish();
+  }
+
+  addLoadEvent(startTest);
+  ]]>
+  </script>
+</window>

widget/xpwidgets/GfxDriverInfo.h

@@ -149,8 +149,8 @@ inline bool SplitDriverVersion(const char *aSource, char *aAStr, char *aBStr, ch
   // sscanf doesn't do what we want here to we parse this manually.
   int len = strlen(aSource);
   char *dest[4] = { aAStr, aBStr, aCStr, aDStr };
-  int destIdx = 0;
+  unsigned destIdx = 0;
-  int destPos = 0;
+  unsigned destPos = 0;
 
   for (int i = 0; i < len; i++) {
     if (destIdx > ArrayLength(dest)) {