Merge m-c to fx-team

2012-12-23 15:56:45 +02:00 · 2012-12-23 15:56:45 +02:00 · a80a513117
--- a/browser/devtools/framework/ToolDefinitions.jsm
+++ b/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),
--- a/browser/devtools/framework/Toolbox.jsm
+++ b/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;
--- a/browser/devtools/framework/connect/connect.css
+++ b/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;
--- a/browser/devtools/framework/connect/connect.js
+++ b/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();
 }
--- a/browser/devtools/framework/connect/connect.xhtml
+++ b/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>
-      <ul id="actors"></ul>
+      <p>&availableTabs;</p>
+      <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>
--- a/browser/devtools/framework/toolbox.css
+++ b/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;
+}
--- a/browser/devtools/framework/toolbox.xul
+++ b/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
--- a/browser/devtools/inspector/InspectorPanel.jsm
+++ b/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();
+    }
  },

  /**
--- a/browser/devtools/responsivedesign/CmdResize.jsm
+++ b/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'),
--- a/browser/devtools/scratchpad/CmdScratchpad.jsm
+++ b/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) {
--- a/browser/devtools/styleinspector/CssHtmlTree.jsm
+++ b/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;
-      if (IUI && IUI.selection == source) {
+      let inspector = this.tree.styleInspector.inspector;
+
+      if (inspector.selection.node == source) {
        result = "this";
      } else {
        result = CssLogic.getShortName(source);
      }
-
      result += ".style";
    }

--- a/browser/devtools/tilt/CmdTilt.jsm
+++ b/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) {
--- a/browser/locales/en-US/chrome/browser/devtools/connection-screen.dtd
+++ b/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 remoteProcess "remote process">
+<!ENTITY availableTabs "Available remote tabs:">
+<!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.">
--- a/browser/locales/en-US/chrome/browser/devtools/connection-screen.properties
+++ b/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
--- a/browser/locales/jar.mn
+++ b/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)
--- a/browser/themes/gnomestripe/devtools/background-noise-toolbar.png
+++ b/browser/themes/gnomestripe/devtools/background-noise-toolbar.png
--- a/browser/themes/gnomestripe/devtools/close.png
+++ b/browser/themes/gnomestripe/devtools/close.png
--- a/browser/themes/gnomestripe/devtools/dock-window.png
+++ b/browser/themes/gnomestripe/devtools/dock-window.png
--- a/browser/themes/gnomestripe/devtools/tool-debugger.png
+++ b/browser/themes/gnomestripe/devtools/tool-debugger.png
--- a/browser/themes/gnomestripe/devtools/tool-inspector.png
+++ b/browser/themes/gnomestripe/devtools/tool-inspector.png
--- a/browser/themes/gnomestripe/devtools/tool-styleeditor.png
+++ b/browser/themes/gnomestripe/devtools/tool-styleeditor.png
--- a/browser/themes/gnomestripe/devtools/tool-webconsole.png
+++ b/browser/themes/gnomestripe/devtools/tool-webconsole.png
--- a/browser/themes/gnomestripe/devtools/toolbox.css
+++ b/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 {
-  margin: 0;
+#toolbox-controls {
+  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%));
-  color: hsl(210,30%,85%);
-  padding: 4px 3px 3px;
-  box-shadow: 0 -3px 0 0 rgb(20,20,20) inset, 0 -4px 0 0 rgba(0,0,0,0.8) inset;
+  background-image: url(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;
+  min-height: 32px;
+  padding: 0;
+}
+
+#toolbox-tabs {
+  margin: 0;
 }

 .devtools-tab {
  -moz-appearance: none;
-  min-width: 78px;
-  min-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border-radius: 3px 3px 0 0;
-  color: inherit;
-  border-style: solid;
-  border-color: transparent;
-  border-width: 1px 1px 0;
-  margin: 0 5px;
-  padding: 0 10px 1px;
+  min-width: 88px;
+  min-height: 32px;
+  color: #b6babf;
+  margin: 0;
+  padding: 0;
+  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));
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  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);
-  background-color: rgb(20,20,20);
-  text-shadow: none;
-  color: white;
+  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;
 }
--- a/browser/themes/gnomestripe/devtools/undock.png
+++ b/browser/themes/gnomestripe/devtools/undock.png
--- a/browser/themes/gnomestripe/jar.mn
+++ b/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
--- a/browser/themes/pinstripe/devtools/background-noise-toolbar.png
+++ b/browser/themes/pinstripe/devtools/background-noise-toolbar.png
--- a/browser/themes/pinstripe/devtools/close.png
+++ b/browser/themes/pinstripe/devtools/close.png
--- a/browser/themes/pinstripe/devtools/dock-window.png
+++ b/browser/themes/pinstripe/devtools/dock-window.png
--- a/browser/themes/pinstripe/devtools/tool-debugger.png
+++ b/browser/themes/pinstripe/devtools/tool-debugger.png
--- a/browser/themes/pinstripe/devtools/tool-inspector.png
+++ b/browser/themes/pinstripe/devtools/tool-inspector.png
--- a/browser/themes/pinstripe/devtools/tool-styleeditor.png
+++ b/browser/themes/pinstripe/devtools/tool-styleeditor.png
--- a/browser/themes/pinstripe/devtools/tool-webconsole.png
+++ b/browser/themes/pinstripe/devtools/tool-webconsole.png
--- a/browser/themes/pinstripe/devtools/toolbox.css
+++ b/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 {
-  margin: 0;
+#toolbox-controls {
+  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%));
-  color: hsl(210,30%,85%);
-  padding: 4px 3px 3px;
-  box-shadow: 0 -3px 0 0 rgb(20,20,20) inset, 0 -4px 0 0 rgba(0,0,0,0.8) inset;
+  background-image: url(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;
+  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-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border-radius: @toolbarbuttonCornerRadius@ @toolbarbuttonCornerRadius@ 0 0;
-  color: inherit;
-  border-style: solid;
-  border-color: transparent;
-  border-width: 1px 1px 0;
-  margin: 0 5px;
-  padding: 0 10px 1px;
+  min-width: 88px;
+  min-height: 32px;
+  color: #b6babf;
+  margin: 0;
+  padding: 0;
+  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));
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  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);
-  background-color: rgb(20,20,20);
-  text-shadow: none;
-  color: white;
+  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;
 }
--- a/browser/themes/pinstripe/devtools/undock.png
+++ b/browser/themes/pinstripe/devtools/undock.png
--- a/browser/themes/pinstripe/jar.mn
+++ b/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
--- a/browser/themes/winstripe/devtools/background-noise-toolbar.png
+++ b/browser/themes/winstripe/devtools/background-noise-toolbar.png
--- a/browser/themes/winstripe/devtools/close.png
+++ b/browser/themes/winstripe/devtools/close.png
--- a/browser/themes/winstripe/devtools/dock-window.png
+++ b/browser/themes/winstripe/devtools/dock-window.png
--- a/browser/themes/winstripe/devtools/tool-debugger.png
+++ b/browser/themes/winstripe/devtools/tool-debugger.png
--- a/browser/themes/winstripe/devtools/tool-inspector.png
+++ b/browser/themes/winstripe/devtools/tool-inspector.png
--- a/browser/themes/winstripe/devtools/tool-styleeditor.png
+++ b/browser/themes/winstripe/devtools/tool-styleeditor.png
--- a/browser/themes/winstripe/devtools/tool-webconsole.png
+++ b/browser/themes/winstripe/devtools/tool-webconsole.png
--- a/browser/themes/winstripe/devtools/toolbox.css
+++ b/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 {
-  margin: 0;
+#toolbox-controls {
+  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%));
-  color: hsl(210,30%,85%);
-  padding: 4px 3px 3px;
-  box-shadow: 0 -3px 0 0 rgb(20,20,20) inset, 0 -4px 0 0 rgba(0,0,0,0.8) inset;
+  background-image: url(background-noise-toolbar.png),
+                    linear-gradient(#303840, #2d3640);
+  border: none;
+  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-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border-radius: 3px 3px 0 0;
-  color: inherit;
-  border-style: solid;
-  border-color: transparent;
-  border-width: 1px 1px 0;
-  margin: 0 5px;
-  padding: 0 10px 1px;
-}
-
-.devtools-tab[selected=true] {
-  border-color: hsla(210,8%,5%,.6);
-  background-color: rgb(20,20,20);
-  text-shadow: none;
-  color: white;
+  min-width: 88px;
+  min-height: 32px;
+  color: #b6babf;
+  margin: 0;
+  padding: 0;
+  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));
+  background-size: 1px 100%;
+  background-repeat: no-repeat;
+  background-position: left, right;
+  border-top: 1px solid #060a0d;
+  border-right: 1px solid hsla(206,37%,4%,.45);
 }

 .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;
 }
--- a/browser/themes/winstripe/devtools/undock.png
+++ b/browser/themes/winstripe/devtools/undock.png
--- a/browser/themes/winstripe/jar.mn
+++ b/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
--- a/content/base/src/nsFrameLoader.cpp
+++ b/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
--- a/content/base/test/chrome/Makefile.in
+++ b/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
--- a/content/base/test/chrome/frame_bug814638.xul
+++ b/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>
--- a/content/base/test/chrome/host_bug814638.xul
+++ b/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>
--- a/content/base/test/chrome/test_bug814638.xul
+++ b/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>