Merge m-c to inbound.

CLOBBER

@@ -18,4 +18,4 @@
 # Modifying this file will now automatically clobber the buildbot machines \o/
 #
 
-Bug 915533 - Remove unused files under dom/bluetooth.
+Bug 585122 - New file added for xpcshell test not always being copied.

accessible/tests/mochitest/actions/test_media.html

@@ -65,7 +65,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=483573
       var audioElm = getAccessible("audio");
       var playBtn = audioElm.firstChild;
       var scrubber = playBtn.nextSibling.nextSibling.nextSibling;
-      var muteBtn = audioElm.lastChild;
+      var muteBtn = audioElm.lastChild.previousSibling;
 
       var actions = [
         {

accessible/tests/mochitest/tree/test_media.html

@@ -49,7 +49,11 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=483573
             role: ROLE_PUSHBUTTON,
             name: "Mute",
             children: []
-          }
+          },
+          { // slider of volume bar
+            role: ROLE_SLIDER,
+            children: []
+          },
         ]
       };
       testAccessibleTree("audio", accTree);

b2g/app/macbuild/Contents/Info.plist.in

@@ -28,5 +28,9 @@
 	<true/>
 	<key>CGDisableCoalescedUpdates</key>
 	<true/>
+	<key>NSHighResolutionCapable</key>
+	<true/>
+	<key>NSPrincipalClass</key>
+	<string>GeckoNSApplication</string>
 </dict>
 </plist>

b2g/chrome/content/shell.js

@@ -1346,7 +1346,7 @@ window.addEventListener('ContentStart', function update_onContentStart() {
         break;
       case 'content-shutdown':
         // iterate through all the existing active processes
-        Object.keys(gRecordingActiveProcesses[processId]).foreach(function(requestURL) {
+        Object.keys(gRecordingActiveProcesses[processId]).forEach(function(requestURL) {
           commandHandler(requestURL, { type: aData,
                                        isAudio: true,
                                        isVideo: true});

b2g/chrome/content/touchcontrols.css

@@ -54,7 +54,7 @@
  * is hidden by videocontrols.xml, and that alters the position of the
  * play button.  This workaround moves it back to center.
  */
-.controlBar.audio .playButton {
+.controlBar.audio-only .playButton {
   transform: translateX(28px);
 }
 

b2g/config/gaia.json

@@ -1,4 +1,4 @@
 {
-    "revision": "adb7896ababd1ccb828e11b05909c0e9ca22594e", 
+    "revision": "2f52419acd2edacec369138b143454dd8afccebd", 
     "repo_path": "/integration/gaia-central"
 }

browser/app/profile/firefox.js

@@ -1090,7 +1090,7 @@ pref("devtools.commands.dir", "");
 // Enable the app manager
 pref("devtools.appmanager.enabled", true);
 pref("devtools.appmanager.lastTab", "help");
-pref("devtools.appmanager.manifestEditor.enabled", false);
+pref("devtools.appmanager.manifestEditor.enabled", true);
 
 // Toolbox preferences
 pref("devtools.toolbox.footer.height", 250);

browser/base/content/browser.js

@@ -4194,8 +4194,8 @@ function onViewToolbarsPopupShowing(aEvent, aInsertPoint) {
     return;
   }
 
-  // The explicitOriginalTarget can be a nested child element of a toolbaritem.
-  let toolbarItem = aEvent.explicitOriginalTarget;
+  // triggerNode can be a nested child element of a toolbaritem.
+  let toolbarItem = popup.triggerNode;
 
   if (toolbarItem && toolbarItem.localName == "toolbarpaletteitem") {
     toolbarItem = toolbarItem.firstChild;

browser/components/customizableui/src/CustomizableWidgets.jsm

@@ -48,7 +48,7 @@ function setAttributes(aNode, aAttrs) {
 
 function updateCombinedWidgetStyle(aNode, aArea, aModifyAutoclose) {
   let inPanel = (aArea == CustomizableUI.AREA_PANEL);
-  let cls = inPanel ? "panel-combined-button" : null;
+  let cls = inPanel ? "panel-combined-button" : "toolbarbutton-1";
   let attrs = {class: cls};
   if (aModifyAutoclose) {
     attrs.noautoclose = inPanel ? true : null;
@@ -305,7 +305,7 @@ const CustomizableWidgets = [{
       const kPanelId = "PanelUI-popup";
       let inPanel = (this.currentArea == CustomizableUI.AREA_PANEL);
       let noautoclose = inPanel ? "true" : null;
-      let cls = inPanel ? "panel-combined-button" : null;
+      let cls = inPanel ? "panel-combined-button" : "toolbarbutton-1";
 
       if (!this.currentArea)
         cls = null;
@@ -449,7 +449,7 @@ const CustomizableWidgets = [{
     defaultArea: CustomizableUI.AREA_PANEL,
     onBuild: function(aDocument) {
       let inPanel = (this.currentArea == CustomizableUI.AREA_PANEL);
-      let cls = inPanel ? "panel-combined-button" : null;
+      let cls = inPanel ? "panel-combined-button" : "toolbarbutton-1";
 
       if (!this.currentArea)
         cls = null;
@@ -799,6 +799,8 @@ const CustomizableWidgets = [{
 if (isWin8OrHigher()) {
   CustomizableWidgets.push({
     id: "switch-to-metro-button",
+    label: "switch-to-metro-button2.label",
+    tooltiptext: "switch-to-metro-button2.tooltiptext",
     removable: true,
     defaultArea: CustomizableUI.AREA_PANEL,
     onCommand: function(aEvent) {

browser/devtools/debugger/moz.build

@@ -6,7 +6,7 @@
 JS_MODULES_PATH = 'modules/devtools/debugger'
 
 EXTRA_JS_MODULES += [
-    'debugger-panel.js'
+    'panel.js'
 ]
 
 BROWSER_CHROME_MANIFESTS += ['test/browser.ini']

browser/devtools/framework/options-panel.css

@@ -0,0 +1,59 @@
+/* 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/. */
+
+#options-panel-container {
+  overflow: auto;
+}
+
+#options-panel {
+  overflow-y: auto;
+  display: block;
+}
+
+.options-vertical-pane {
+  display: inline;
+  float: left;
+}
+
+.options-vertical-pane > label {
+  display: block;
+}
+
+.options-vertical-pane {
+  margin: 5px;
+  width: calc(50% - 30px);
+  min-width: 400px;
+  -moz-padding-start: 5px;
+}
+
+.options-vertical-pane > label {
+  padding: 2px 0;
+  font-size: 1.4rem;
+}
+
+.options-groupbox {
+  -moz-margin-start: 15px;
+  padding: 2px;
+}
+
+.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 */
+}
+
+.options-citation-label + label {
+  padding: 3px 0 0 !important; /* To align it with the checkbox */
+  font-style: italic;
+}
+
+.hidden-labels-box:not(.visible) > label,
+.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
+  display: none;
+}

browser/devtools/framework/toolbox-options.xul

@@ -7,8 +7,7 @@
  %toolboxDTD;
 ]>
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
-<?xml-stylesheet rel="stylesheet" href="chrome://browser/content/devtools/framework/toolbox.css" type="text/css"?>
-<?xml-stylesheet rel="stylesheet" href="chrome://browser/skin/devtools/toolbox.css" type="text/css"?>
+<?xml-stylesheet rel="stylesheet" href="chrome://browser/content/devtools/framework/options-panel.css" type="text/css"?>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 

browser/devtools/framework/toolbox.css

@@ -1,32 +0,0 @@
-/* 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/. */
-
-.devtools-tab {
-  -moz-binding: url("chrome://global/content/bindings/general.xml#control-item");
-  -moz-box-align: center;
-}
-
-#toolbox-controls > toolbarbutton > .toolbarbutton-text,
-#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text,
-.command-button > .toolbarbutton-text {
-  display: none;
-}
-
-#options-panel-container {
-  overflow: auto;
-}
-
-#options-panel {
-  overflow-y: auto;
-  display: block;
-}
-
-.options-vertical-pane {
-  display: inline;
-  float: left;
-}
-
-.options-vertical-pane > label {
-  display: block;
-}

browser/devtools/framework/toolbox.xul

@@ -7,9 +7,7 @@
  %toolboxDTD;
 ]>
 <?xml-stylesheet href="chrome://browser/skin/" 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"?>
 <?xul-overlay href="chrome://global/content/editMenuOverlay.xul"?>
 
 <window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

browser/devtools/jar.mn

@@ -75,7 +75,7 @@ browser.jar:
     content/browser/devtools/framework/toolbox-options.xul             (framework/toolbox-options.xul)
     content/browser/devtools/framework/toolbox-options.js              (framework/toolbox-options.js)
 *   content/browser/devtools/framework/toolbox.xul                     (framework/toolbox.xul)
-    content/browser/devtools/framework/toolbox.css                     (framework/toolbox.css)
+    content/browser/devtools/framework/options-panel.css               (framework/options-panel.css)
     content/browser/devtools/framework/toolbox-process-window.xul      (framework/toolbox-process-window.xul)
     content/browser/devtools/framework/toolbox-process-window.js       (framework/toolbox-process-window.js)
     content/browser/devtools/inspector/inspector.xul                   (inspector/inspector.xul)

browser/devtools/main.js

@@ -25,11 +25,11 @@ let events = require("sdk/system/events");
 loader.lazyGetter(this, "OptionsPanel", () => require("devtools/framework/toolbox-options").OptionsPanel);
 loader.lazyGetter(this, "InspectorPanel", () => require("devtools/inspector/inspector-panel").InspectorPanel);
 loader.lazyGetter(this, "WebConsolePanel", () => require("devtools/webconsole/panel").WebConsolePanel);
-loader.lazyGetter(this, "DebuggerPanel", () => require("devtools/debugger/debugger-panel").DebuggerPanel);
+loader.lazyGetter(this, "DebuggerPanel", () => require("devtools/debugger/panel").DebuggerPanel);
 loader.lazyImporter(this, "StyleEditorPanel", "resource:///modules/devtools/StyleEditorPanel.jsm");
 loader.lazyGetter(this, "ShaderEditorPanel", () => require("devtools/shadereditor/panel").ShaderEditorPanel);
 loader.lazyGetter(this, "ProfilerPanel", () => require("devtools/profiler/panel"));
-loader.lazyGetter(this, "NetMonitorPanel", () => require("devtools/netmonitor/netmonitor-panel").NetMonitorPanel);
+loader.lazyGetter(this, "NetMonitorPanel", () => require("devtools/netmonitor/panel").NetMonitorPanel);
 loader.lazyGetter(this, "ScratchpadPanel", () => require("devtools/scratchpad/scratchpad-panel").ScratchpadPanel);
 
 // Strings

browser/devtools/netmonitor/moz.build

@@ -8,5 +8,5 @@ TEST_DIRS += ['test']
 JS_MODULES_PATH = 'modules/devtools/netmonitor'
 
 EXTRA_JS_MODULES += [
-    'netmonitor-panel.js'
+    'panel.js'
 ]

browser/devtools/responsivedesign/responsivedesign.jsm

@@ -203,7 +203,7 @@ function ResponsiveUI(aWindow, aTab)
 
   // Touch events support
   this.touchEnableBefore = false;
-  this.touchEventHandler = new TouchEventHandler(this.browser.contentWindow);
+  this.touchEventHandler = new TouchEventHandler(this.browser);
 
   this.browser.addEventListener("load", this.bound_onPageLoad, true);
   this.browser.addEventListener("unload", this.bound_onPageUnload, true);
@@ -232,7 +232,7 @@ ResponsiveUI.prototype = {
    * Window onload / onunload
    */
    onPageLoad: function() {
-     this.touchEventHandler = new TouchEventHandler(this.browser.contentWindow);
+     this.touchEventHandler = new TouchEventHandler(this.browser);
      if (this.touchEnableBefore) {
        this.enableTouch();
      }

browser/devtools/shared/test/browser.ini

@@ -31,3 +31,4 @@ support-files =
 [browser_toolbar_tooltip.js]
 [browser_toolbar_webconsole_errors_count.js]
 [browser_spectrum.js]
+[browser_csstransformpreview.js]

browser/devtools/shared/test/browser_csstransformpreview.js

@@ -0,0 +1,139 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that the spectrum color picker works correctly
+
+const TEST_URI = "data:text/html;charset=utf-8,<div></div>";
+const {CSSTransformPreviewer} = devtools.require("devtools/shared/widgets/CSSTransformPreviewer");
+
+let doc, root;
+
+function test() {
+  waitForExplicitFinish();
+  addTab(TEST_URI, () => {
+    doc = content.document;
+    root = doc.querySelector("div");
+    startTests();
+  });
+}
+
+function endTests() {
+  doc = root = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function startTests() {
+  testCreateAndDestroyShouldAppendAndRemoveElements();
+}
+
+function testCreateAndDestroyShouldAppendAndRemoveElements() {
+  ok(root, "We have the root node to append the preview to");
+  is(root.childElementCount, 0, "Root node is empty");
+
+  let p = new CSSTransformPreviewer(root);
+  p.preview("matrix(1, -0.2, 0, 1, 0, 0)");
+  ok(root.childElementCount > 0, "Preview has appended elements");
+  ok(root.querySelector("canvas"), "Canvas preview element is here");
+
+  p.destroy();
+  is(root.childElementCount, 0, "Destroying preview removed all nodes");
+
+  testCanvasDimensionIsConstrainedByMaxDim();
+}
+
+function testCanvasDimensionIsConstrainedByMaxDim() {
+  let p = new CSSTransformPreviewer(root);
+  p.MAX_DIM = 500;
+  p.preview("scale(1)", "center", 1000, 1000);
+
+  let canvas = root.querySelector("canvas");
+  is(canvas.width, 500, "Canvas width is correct");
+  is(canvas.height, 500, "Canvas height is correct");
+
+  p.destroy();
+
+  testCallingPreviewSeveralTimesReusesTheSameCanvas();
+}
+
+function testCallingPreviewSeveralTimesReusesTheSameCanvas() {
+  let p = new CSSTransformPreviewer(root);
+
+  p.preview("scale(1)", "center", 1000, 1000);
+  let canvas = root.querySelector("canvas");
+
+  p.preview("rotate(90deg)");
+  let canvases = root.querySelectorAll("canvas");
+  is(canvases.length, 1, "Still one canvas element");
+  is(canvases[0], canvas, "Still the same canvas element");
+  p.destroy();
+
+  testCanvasDimensionAreCorrect();
+}
+
+function testCanvasDimensionAreCorrect() {
+  // Only test a few simple transformations
+  let p = new CSSTransformPreviewer(root);
+
+  // Make sure we have a square
+  let w = 200, h = w;
+  p.MAX_DIM = w;
+
+  // We can't test the content of the canvas here, just that, given a max width
+  // the aspect ratio of the canvas seems correct.
+
+  // Translate a square by its width, should be a rectangle
+  p.preview("translateX(200px)", "center", w, h);
+  let canvas = root.querySelector("canvas");
+  is(canvas.width, w, "width is correct");
+  is(canvas.height, h/2, "height is half of the width");
+
+  // Rotate on the top right corner, should be a rectangle
+  p.preview("rotate(-90deg)", "top right", w, h);
+  is(canvas.width, w, "width is correct");
+  is(canvas.height, h/2, "height is half of the width");
+
+  // Rotate on the bottom left corner, should be a rectangle
+  p.preview("rotate(90deg)", "top right", w, h);
+  is(canvas.width, w/2, "width is half of the height");
+  is(canvas.height, h, "height is correct");
+
+  // Scale from center, should still be a square
+  p.preview("scale(2)", "center", w, h);
+  is(canvas.width, w, "width is correct");
+  is(canvas.height, h, "height is correct");
+
+  // Skew from center, 45deg, should be a rectangle
+  p.preview("skew(45deg)", "center", w, h);
+  is(canvas.width, w, "width is correct");
+  is(canvas.height, h/2, "height is half of the height");
+
+  p.destroy();
+
+  testPreviewingInvalidTransformReturnsFalse();
+}
+
+function testPreviewingInvalidTransformReturnsFalse() {
+  let p = new CSSTransformPreviewer(root);
+  ok(!p.preview("veryWow(muchPx) suchTransform(soDeg)"), "Returned false for invalid transform");
+  ok(!p.preview("rotae(3deg)"), "Returned false for invalid transform");
+
+  // Verify the canvas is empty by checking the image data
+  let canvas = root.querySelector("canvas"), ctx = canvas.getContext("2d");
+  let data = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
+  for (let i = 0, n = data.length; i < n; i += 4) {
+    // Let's not log 250*250*4 asserts! Instead, just log when it fails
+    let red = data[i];
+    let green = data[i + 1];
+    let blue = data[i + 2];
+    let alpha = data[i + 3];
+    if (red !== 0 || green !== 0 || blue !== 0 || alpha !== 0) {
+      ok(false, "Image data is not empty after an invalid transformed was previewed");
+      break;
+    }
+  }
+
+  is(p.preview("translateX(30px)"), true, "Returned true for a valid transform");
+  endTests();
+}

browser/devtools/shared/widgets/CSSTransformPreviewer.js

@@ -0,0 +1,389 @@
+/* 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/. */
+
+"use strict";
+
+/**
+ * The CSSTransformPreview module displays, using a <canvas> a rectangle, with
+ * a given width and height and its transformed version, given a css transform
+ * property and origin. It also displays arrows from/to each corner.
+ *
+ * It is useful to visualize how a css transform affected an element. It can
+ * help debug tricky transformations. It is used today in a tooltip, and this
+ * tooltip is shown when hovering over a css transform declaration in the rule
+ * and computed view panels.
+ *
+ * TODO: For now, it multiplies matrices itself to calculate the coordinates of
+ * the transformed box, but that should be removed as soon as we can get access
+ * to getQuads().
+ */
+
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+
+/**
+ * The TransformPreview needs an element to output a canvas tag.
+ *
+ * Usage example:
+ *
+ * let t = new CSSTransformPreviewer(myRootElement);
+ * t.preview("rotate(45deg)", "top left", 200, 400);
+ * t.preview("skew(19deg)", "center", 100, 500);
+ * t.preview("matrix(1, -0.2, 0, 1, 0, 0)");
+ * t.destroy();
+ *
+ * @param {nsIDOMElement} parentEl
+ *        Where the canvas will go
+ */
+function CSSTransformPreviewer(parentEl) {
+  this.parentEl = parentEl;
+  this.doc = this.parentEl.ownerDocument;
+  this.canvas = null;
+  this.ctx = null;
+}
+
+module.exports.CSSTransformPreviewer = CSSTransformPreviewer;
+
+CSSTransformPreviewer.prototype = {
+  /**
+   * The preview look-and-feel can be changed using these properties
+   */
+  MAX_DIM: 250,
+  PAD: 5,
+  ORIGINAL_FILL: "#1F303F",
+  ORIGINAL_STROKE: "#B2D8FF",
+  TRANSFORMED_FILL: "rgba(200, 200, 200, .5)",
+  TRANSFORMED_STROKE: "#B2D8FF",
+  ARROW_STROKE: "#329AFF",
+  ORIGIN_STROKE: "#329AFF",
+  ARROW_TIP_HEIGHT: 10,
+  ARROW_TIP_WIDTH: 8,
+  CORNER_SIZE_RATIO: 6,
+
+  /**
+   * Destroy removes the canvas from the parentelement passed in the constructor
+   */
+  destroy: function() {
+    if (this.canvas) {
+      this.parentEl.removeChild(this.canvas);
+    }
+    if (this._hiddenDiv) {
+      this.parentEl.removeChild(this._hiddenDiv);
+    }
+    this.parentEl = this.canvas = this.ctx = this.doc = null;
+  },
+
+  _createMarkup: function() {
+    this.canvas = this.doc.createElementNS(HTML_NS, "canvas");
+
+    this.canvas.setAttribute("id", "canvas");
+    this.canvas.setAttribute("width", this.MAX_DIM);
+    this.canvas.setAttribute("height", this.MAX_DIM);
+    this.canvas.style.position = "relative";
+    this.parentEl.appendChild(this.canvas);
+
+    this.ctx = this.canvas.getContext("2d");
+  },
+
+  _getComputed: function(name, value, width, height) {
+    if (!this._hiddenDiv) {
+      // Create a hidden element to apply the style to
+      this._hiddenDiv = this.doc.createElementNS(HTML_NS, "div");
+      this._hiddenDiv.style.visibility = "hidden";
+      this._hiddenDiv.style.position = "absolute";
+      this.parentEl.appendChild(this._hiddenDiv);
+    }
+
+    // Camelcase the name
+    name = name.replace(/-([a-z]{1})/g, (m, letter) => letter.toUpperCase());
+
+    // Apply width and height to make sure computation is made correctly
+    this._hiddenDiv.style.width = width + "px";
+    this._hiddenDiv.style.height = height + "px";
+
+    // Show the hidden div, apply the style, read the computed style, hide the
+    // hidden div again
+    this._hiddenDiv.style.display = "block";
+    this._hiddenDiv.style[name] = value;
+    let computed = this.doc.defaultView.getComputedStyle(this._hiddenDiv);
+    let computedValue = computed[name];
+    this._hiddenDiv.style.display = "none";
+
+    return computedValue;
+  },
+
+  _getMatrixFromTransformString: function(transformStr) {
+    let matrix = transformStr.substring(0, transformStr.length - 1).
+      substring(transformStr.indexOf("(") + 1).split(",");
+
+    matrix.forEach(function(value, index) {
+      matrix[index] = parseFloat(value, 10);
+    });
+
+    let transformMatrix = null;
+
+    if (matrix.length === 6) {
+      // 2d transform
+      transformMatrix = [
+        [matrix[0], matrix[2], matrix[4], 0],
+        [matrix[1], matrix[3], matrix[5], 0],
+        [0,     0,     1,     0],
+        [0,     0,     0,     1]
+      ];
+    } else {
+      // 3d transform
+      transformMatrix = [
+        [matrix[0], matrix[4], matrix[8],  matrix[12]],
+        [matrix[1], matrix[5], matrix[9],  matrix[13]],
+        [matrix[2], matrix[6], matrix[10], matrix[14]],
+        [matrix[3], matrix[7], matrix[11], matrix[15]]
+      ];
+    }
+
+    return transformMatrix;
+  },
+
+  _getOriginFromOriginString: function(originStr) {
+    let offsets = originStr.split(" ");
+    offsets.forEach(function(item, index) {
+      offsets[index] = parseInt(item, 10);
+    });
+
+    return offsets;
+  },
+
+  _multiply: function(m1, m2) {
+    let m = [];
+    for (let m1Line = 0; m1Line < m1.length; m1Line++) {
+      m[m1Line] = 0;
+      for (let m2Col = 0; m2Col < m2.length; m2Col++) {
+        m[m1Line] += m1[m1Line][m2Col] * m2[m2Col];
+      }
+    }
+    return [m[0], m[1]];
+  },
+
+  _getTransformedPoint: function(matrix, point, origin) {
+    let pointMatrix = [point[0] - origin[0], point[1] - origin[1], 1, 1];
+    return this._multiply(matrix, pointMatrix);
+  },
+
+  _getTransformedPoints: function(matrix, rect, origin) {
+    return rect.map(point => {
+      let tPoint = this._getTransformedPoint(matrix, [point[0], point[1]], origin);
+      return [tPoint[0] + origin[0], tPoint[1] + origin[1]];
+    });
+  },
+
+  /**
+   * For canvas to avoid anti-aliasing
+   */
+  _round: x => Math.round(x) + .5,
+
+  _drawShape: function(points, fillStyle, strokeStyle) {
+    this.ctx.save();
+
+    this.ctx.lineWidth = 1;
+    this.ctx.strokeStyle = strokeStyle;
+    this.ctx.fillStyle = fillStyle;
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(this._round(points[0][0]), this._round(points[0][1]));
+    for (var i = 1; i < points.length; i++) {
+      this.ctx.lineTo(this._round(points[i][0]), this._round(points[i][1]));
+    }
+    this.ctx.lineTo(this._round(points[0][0]), this._round(points[0][1]));
+    this.ctx.fill();
+    this.ctx.stroke();
+
+    this.ctx.restore();
+  },
+
+  _drawArrow: function(x1, y1, x2, y2) {
+    // do not draw if the line is too small
+    if (Math.abs(x2-x1) < 20 && Math.abs(y2-y1) < 20) {
+      return;
+    }
+
+    this.ctx.save();
+
+    this.ctx.strokeStyle = this.ARROW_STROKE;
+    this.ctx.fillStyle = this.ARROW_STROKE;
+    this.ctx.lineWidth = 1;
+
+    this.ctx.beginPath();
+    this.ctx.moveTo(this._round(x1), this._round(y1));
+    this.ctx.lineTo(this._round(x2), this._round(y2));
+    this.ctx.stroke();
+
+    this.ctx.beginPath();
+    this.ctx.translate(x2, y2);
+    let radians = Math.atan((y1 - y2) / (x1 - x2));
+    radians += ((x1 >= x2) ? -90 : 90) * Math.PI / 180;
+    this.ctx.rotate(radians);
+    this.ctx.moveTo(0, 0);
+    this.ctx.lineTo(this.ARROW_TIP_WIDTH / 2, this.ARROW_TIP_HEIGHT);
+    this.ctx.lineTo(-this.ARROW_TIP_WIDTH / 2, this.ARROW_TIP_HEIGHT);
+    this.ctx.closePath();
+    this.ctx.fill();
+
+    this.ctx.restore();
+  },
+
+  _drawOrigin: function(x, y) {
+    this.ctx.save();
+
+    this.ctx.strokeStyle = this.ORIGIN_STROKE;
+    this.ctx.fillStyle = this.ORIGIN_STROKE;
+
+    this.ctx.beginPath();
+    this.ctx.arc(x, y, 4, 0, 2 * Math.PI, false);
+    this.ctx.stroke();
+    this.ctx.fill();
+
+    this.ctx.restore();
+  },
+
+  /**
+   * Computes the largest width and height of all the given shapes and changes
+   * all of the shapes' points (by reference) so they fit into the configured
+   * MAX_DIM - 2*PAD area.
+   * @return {Object} A {w, h} giving the size the canvas should be
+   */
+  _fitAllShapes: function(allShapes) {
+    let allXs = [], allYs = [];
+    for (let shape of allShapes) {
+      for (let point of shape) {
+        allXs.push(point[0]);
+        allYs.push(point[1]);
+      }
+    }
+    let minX = Math.min.apply(Math, allXs);
+    let maxX = Math.max.apply(Math, allXs);
+    let minY = Math.min.apply(Math, allYs);
+    let maxY = Math.max.apply(Math, allYs);
+
+    let spanX = maxX - minX;
+    let spanY = maxY - minY;
+    let isWide = spanX > spanY;
+
+    let cw = isWide ? this.MAX_DIM :
+      this.MAX_DIM * Math.min(spanX, spanY) / Math.max(spanX, spanY);
+    let ch = !isWide ? this.MAX_DIM :
+      this.MAX_DIM * Math.min(spanX, spanY) / Math.max(spanX, spanY);
+
+    let mapX = x => this.PAD + ((cw - 2 * this.PAD) / (maxX - minX)) * (x - minX);
+    let mapY = y => this.PAD + ((ch - 2 * this.PAD) / (maxY - minY)) * (y - minY);
+
+    for (let shape of allShapes) {
+      for (let point of shape) {
+        point[0] = mapX(point[0]);
+        point[1] = mapY(point[1]);
+      }
+    }
+
+    return {w: cw, h: ch};
+  },
+
+  _drawShapes: function(shape, corner, transformed, transformedCorner) {
+    this._drawOriginal(shape);
+    this._drawOriginalCorner(corner);
+    this._drawTransformed(transformed);
+    this._drawTransformedCorner(transformedCorner);
+  },
+
+  _drawOriginal: function(points) {
+    this._drawShape(points, this.ORIGINAL_FILL, this.ORIGINAL_STROKE);
+  },
+
+  _drawTransformed: function(points) {
+    this._drawShape(points, this.TRANSFORMED_FILL, this.TRANSFORMED_STROKE);
+  },
+
+  _drawOriginalCorner: function(points) {
+    this._drawShape(points, this.ORIGINAL_STROKE, this.ORIGINAL_STROKE);
+  },
+
+  _drawTransformedCorner: function(points) {
+    this._drawShape(points, this.TRANSFORMED_STROKE, this.TRANSFORMED_STROKE);
+  },
+
+  _drawArrows: function(shape, transformed) {
+    this._drawArrow(shape[0][0], shape[0][1], transformed[0][0], transformed[0][1]);
+    this._drawArrow(shape[1][0], shape[1][1], transformed[1][0], transformed[1][1]);
+    this._drawArrow(shape[2][0], shape[2][1], transformed[2][0], transformed[2][1]);
+    this._drawArrow(shape[3][0], shape[3][1], transformed[3][0], transformed[3][1]);
+  },
+
+  /**
+   * Draw a transform preview
+   *
+   * @param {String} transform
+   *        The css transform value as a string, as typed by the user, as long
+   *        as it can be computed by the browser
+   * @param {String} origin
+   *        Same as above for the transform-origin value. Defaults to "center"
+   * @param {Number} width
+   *        The width of the container. Defaults to 200
+   * @param {Number} height
+   *        The height of the container. Defaults to 200
+   * @return {Boolean} Whether or not the preview could be created. Will return
+   *         false for instance if the transform is invalid
+   */
+  preview: function(transform, origin="center", width=200, height=200) {
+    // Create/clear the canvas
+    if (!this.canvas) {
+      this._createMarkup();
+    }
+    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+    // Get computed versions of transform and origin
+    transform = this._getComputed("transform", transform, width, height);
+    if (transform && transform !== "none") {
+      origin = this._getComputed("transform-origin", origin, width, height);
+
+      // Get the matrix, origin and width height data for the previewed element
+      let originData = this._getOriginFromOriginString(origin);
+      let matrixData = this._getMatrixFromTransformString(transform);
+
+      // Compute the original box rect and transformed box rect
+      let shapePoints = [
+        [0, 0],
+        [width, 0],
+        [width, height],
+        [0, height]
+      ];
+      let transformedPoints = this._getTransformedPoints(matrixData, shapePoints, originData);
+
+      // Do the same for the corner triangle shape
+      let cornerSize = Math.min(shapePoints[2][1] - shapePoints[1][1],
+        shapePoints[1][0] - shapePoints[0][0]) / this.CORNER_SIZE_RATIO;
+      let cornerPoints = [
+        [shapePoints[1][0], shapePoints[1][1]],
+        [shapePoints[1][0], shapePoints[1][1] + cornerSize],
+        [shapePoints[1][0] - cornerSize, shapePoints[1][1]]
+      ];
+      let transformedCornerPoints = this._getTransformedPoints(matrixData, cornerPoints, originData);
+
+      // Resize points to fit everything in the canvas
+      let {w, h} = this._fitAllShapes([
+        shapePoints,
+        transformedPoints,
+        cornerPoints,
+        transformedCornerPoints,
+        [originData]
+      ]);
+
+      this.canvas.setAttribute("width", w);
+      this.canvas.setAttribute("height", h);
+
+      this._drawShapes(shapePoints, cornerPoints, transformedPoints, transformedCornerPoints)
+      this._drawArrows(shapePoints, transformedPoints);
+      this._drawOrigin(originData[0], originData[1]);
+
+      return true;
+    } else {
+      return false;
+    }
+  }
+};

browser/devtools/shared/widgets/Tooltip.js

@@ -12,6 +12,7 @@ const {Spectrum} = require("devtools/shared/widgets/Spectrum");
 const EventEmitter = require("devtools/shared/event-emitter");
 const {colorUtils} = require("devtools/css-color");
 const Heritage = require("sdk/core/heritage");
+const {CSSTransformPreviewer} = require("devtools/shared/widgets/CSSTransformPreviewer");
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
@@ -100,7 +101,6 @@ let PanelFactory = {
     panel.setAttribute("hidden", true);
     panel.setAttribute("ignorekeys", true);
 
-    // Prevent the click used to close the panel from being consumed
     panel.setAttribute("consumeoutsideclicks", options.get("consumeOutsideClick"));
     panel.setAttribute("noautofocus", options.get("noAutoFocus"));
     panel.setAttribute("type", "arrow");
@@ -229,6 +229,10 @@ Tooltip.prototype = {
     return this.panel.state !== "closed" && this.panel.state !== "hiding";
   },
 
+  setSize: function(width, height) {
+    this.panel.sizeTo(width, height);
+  },
+
   /**
    * Empty the tooltip's content
    */
@@ -304,7 +308,8 @@ Tooltip.prototype = {
    *        The container for all target nodes
    * @param {Function} targetNodeCb
    *        A function that accepts a node argument and returns true or false
-   *        to signify if the tooltip should be shown on that node or not.
+   *        (or a promise that resolves or rejects) to signify if the tooltip
+   *        should be shown on that node or not.
    *        Additionally, the function receives a second argument which is the
    *        tooltip instance itself, to be used to add/modify the content of the
    *        tooltip if needed. If omitted, the tooltip will be shown everytime.
@@ -312,7 +317,7 @@ Tooltip.prototype = {
    *        An optional delay that will be observed before showing the tooltip.
    *        Defaults to this.defaultShowDelay.
    */
-  startTogglingOnHover: function(baseNode, targetNodeCb, showDelay = this.defaultShowDelay) {
+  startTogglingOnHover: function(baseNode, targetNodeCb, showDelay=this.defaultShowDelay) {
     if (this._basedNode) {
       this.stopTogglingOnHover();
     }
@@ -357,7 +362,12 @@ Tooltip.prototype = {
   },
 
   _showOnHover: function(target) {
-    if (this._targetNodeCb(target, this)) {
+    let res = this._targetNodeCb(target, this);
+    if (res && res.then) {
+      res.then(() => {
+        this.show(target);
+      });
+    } else if (res) {
       this.show(target);
     }
   },
@@ -527,6 +537,8 @@ Tooltip.prototype = {
       let w = options.naturalWidth || imgObj.naturalWidth;
       let h = options.naturalHeight || imgObj.naturalHeight;
       label.textContent = w + " x " + h;
+
+      this.setSize(vbox.width, vbox.height);
     }
   },
 
@@ -583,6 +595,54 @@ Tooltip.prototype = {
     // Put the iframe in the tooltip
     this.content = iframe;
 
+    return def.promise;
+  },
+
+  /**
+   * Set the content of the tooltip to be the result of CSSTransformPreviewer.
+   * Meaning a canvas previewing a css transformation.
+   *
+   * @param {String} transform
+   *        The CSS transform value (e.g. "rotate(45deg) translateX(50px)")
+   * @param {PageStyleActor} pageStyle
+   *        An instance of the PageStyleActor that will be used to retrieve
+   *        computed styles
+   * @param {NodeActor} node
+   *        The NodeActor for the currently selected node
+   * @return A promise that resolves when the tooltip content is ready, or
+   *         rejects if no transform is provided or is invalid
+   */
+  setCssTransformContent: function(transform, pageStyle, node) {
+    let def = promise.defer();
+
+    if (transform) {
+      // Look into the computed styles to find the width and height and possibly
+      // the origin if it hadn't been provided
+      pageStyle.getComputed(node, {
+        filter: "user",
+        markMatched: false,
+        onlyMatched: false
+      }).then(styles => {
+        let origin = styles["transform-origin"].value;
+        let width = parseInt(styles["width"].value);
+        let height = parseInt(styles["height"].value);
+
+        let root = this.doc.createElementNS(XHTML_NS, "div");
+        let previewer = new CSSTransformPreviewer(root);
+        this.content = root;
+        if (!previewer.preview(transform, origin, width, height)) {
+          // If the preview didn't work, reject the promise
+          def.reject();
+        } else {
+          // Else, make sure the tooltip has the right size and resolve
+          this.setSize(previewer.canvas.width, previewer.canvas.height);
+          def.resolve();
+        }
+      });
+    } else {
+      def.reject();
+    }
+
     return def.promise;
   }
 };

browser/devtools/styleinspector/computed-view.js

@@ -505,21 +505,27 @@ CssHtmlTree.prototype = {
    */
   _buildTooltipContent: function(target)
   {
-    // If the hovered element is not a property view and is not a background
-    // image, then don't show a tooltip
-    let isPropertyValue = target.classList.contains("property-value");
-    if (!isPropertyValue) {
-      return false;
-    }
-    let propName = target.parentNode.querySelector(".property-name");
-    let isBackgroundImage = propName.textContent === "background-image";
-    if (!isBackgroundImage) {
-      return false;
+    // Test for image url
+    if (target.classList.contains("theme-link")) {
+      let propValue = target.parentNode;
+      let propName = propValue.parentNode.querySelector(".property-name");
+      if (propName.textContent === "background-image") {
+        this.tooltip.setCssBackgroundImageContent(propValue.textContent);
+        return true;
+      }
     }
 
-    // Fill some content
-    this.tooltip.setCssBackgroundImageContent(target.textContent);
-    return true;
+    // Test for css transform
+    if (target.classList.contains("property-value")) {
+      let def = promise.defer();
+      let propValue = target;
+      let propName = target.parentNode.querySelector(".property-name");
+      if (propName.textContent === "transform") {
+        this.tooltip.setCssTransformContent(propValue.textContent,
+          this.pageStyle, this.viewedElement).then(def.resolve);
+        return def.promise;
+      }
+    }
   },
 
   /**

browser/devtools/styleinspector/rule-view.js

@@ -1125,27 +1125,32 @@ CssRuleView.prototype = {
    * prepare some content for the tooltip
    */
   _buildTooltipContent: function(target) {
-    let isImageHref = target.classList.contains("theme-link") &&
-      target.parentNode.classList.contains("ruleview-propertyvalue");
+    let property = target.textProperty, def = promise.defer(), hasTooltip = false;
 
-    // If the inplace-editor is visible or if this is not a background image
-    // don't show the tooltip
-    if (!isImageHref) {
-      return false;
+    // Test for css transform
+    if (property && property.name === "transform") {
+      this.previewTooltip.setCssTransformContent(property.value, this.pageStyle,
+        this._viewedElement).then(def.resolve);
+      hasTooltip = true;
     }
 
-    // Retrieve the TextProperty for the hovered element
-    let property = target.parentNode.textProperty;
-    let href = property.rule.domRule.href;
+    // Test for image
+    let isImageHref = target.classList.contains("theme-link") &&
+      target.parentNode.classList.contains("ruleview-propertyvalue");
+    if (isImageHref) {
+      property = target.parentNode.textProperty;
+      this.previewTooltip.setCssBackgroundImageContent(property.value,
+        property.rule.domRule.href);
+      def.resolve();
+      hasTooltip = true;
+    }
 
-    // Fill some content
-    this.previewTooltip.setCssBackgroundImageContent(property.value, href);
+    if (hasTooltip) {
+      this.colorPicker.revert();
+      this.colorPicker.hide();
+    }
 
-    // Hide the color picker tooltip if shown and revert changes
-    this.colorPicker.revert();
-    this.colorPicker.hide();
-
-    return true;
+    return def.promise;
   },
 
   /**
@@ -1301,7 +1306,7 @@ CssRuleView.prototype = {
   /**
    * Update the highlighted element.
    *
-   * @param {nsIDOMElement} aElement
+   * @param {NodeActor} aElement
    *        The node whose style rules we'll inspect.
    */
   highlight: function CssRuleView_highlight(aElement)

browser/devtools/styleinspector/test/browser.ini

@@ -53,4 +53,6 @@ support-files = browser_ruleview_pseudoelement.html
 [browser_bug913014_matched_expand.js]
 [browser_bug765105_background_image_tooltip.js]
 [browser_bug889638_rule_view_color_picker.js]
+[browser_bug726427_csstransform_tooltip.js]
+
 [browser_bug940500_rule_view_pick_gradient_color.js]

browser/devtools/styleinspector/test/browser_bug726427_csstransform_tooltip.js

@@ -0,0 +1,224 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+ http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let contentDoc;
+let inspector;
+let ruleView;
+let computedView;
+
+const PAGE_CONTENT = [
+  '<style type="text/css">',
+  '  #testElement {',
+  '    width: 500px;',
+  '    height: 300px;',
+  '    background: red;',
+  '    transform: skew(16deg);',
+  '  }',
+  '  .test-element {',
+  '    transform-origin: top left;',
+  '    transform: rotate(45deg);',
+  '  }',
+  '  div {',
+  '    transform: scaleX(1.5);',
+  '    transform-origin: bottom right;',
+  '  }',
+  '  [attr] {',
+  '  }',
+  '</style>',
+  '<div id="testElement" class="test-element" attr="value">transformed element</div>'
+].join("\n");
+
+function test() {
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee, true);
+    contentDoc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,rule view css transform tooltip test";
+}
+
+function createDocument() {
+  contentDoc.body.innerHTML = PAGE_CONTENT;
+
+  openRuleView((aInspector, aRuleView) => {
+    inspector = aInspector;
+    ruleView = aRuleView;
+    startTests();
+  });
+}
+
+function startTests() {
+  inspector.selection.setNode(contentDoc.querySelector("#testElement"));
+  inspector.once("inspector-updated", testTransformTooltipOnIDSelector);
+}
+
+function endTests() {
+  contentDoc = inspector = ruleView = computedView = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function testTransformTooltipOnIDSelector() {
+  info("Testing that a transform tooltip appears on the #ID rule");
+
+  let panel = ruleView.previewTooltip.panel;
+  ok(panel, "The XUL panel exists for the rule-view preview tooltips");
+
+  let {valueSpan} = getRuleViewProperty("#testElement", "transform");
+  assertTooltipShownOn(ruleView.previewTooltip, valueSpan, () => {
+    // The transform preview is canvas, so there's not much we can test, so for
+    // now, let's just be happy with the fact that the tooltips is shown!
+    ok(true, "Tooltip shown on the transform property of the #ID rule");
+    ruleView.previewTooltip.hide();
+    executeSoon(testTransformTooltipOnClassSelector);
+  });
+}
+
+function testTransformTooltipOnClassSelector() {
+  info("Testing that a transform tooltip appears on the .class rule");
+
+  let {valueSpan} = getRuleViewProperty(".test-element", "transform");
+  assertTooltipShownOn(ruleView.previewTooltip, valueSpan, () => {
+    // The transform preview is canvas, so there's not much we can test, so for
+    // now, let's just be happy with the fact that the tooltips is shown!
+    ok(true, "Tooltip shown on the transform property of the .class rule");
+    ruleView.previewTooltip.hide();
+    executeSoon(testTransformTooltipOnTagSelector);
+  });
+}
+
+function testTransformTooltipOnTagSelector() {
+  info("Testing that a transform tooltip appears on the tag rule");
+
+  let {valueSpan} = getRuleViewProperty("div", "transform");
+  assertTooltipShownOn(ruleView.previewTooltip, valueSpan, () => {
+    // The transform preview is canvas, so there's not much we can test, so for
+    // now, let's just be happy with the fact that the tooltips is shown!
+    ok(true, "Tooltip shown on the transform property of the tag rule");
+    ruleView.previewTooltip.hide();
+    executeSoon(testTransformTooltipNotShownOnInvalidTransform);
+  });
+}
+
+function testTransformTooltipNotShownOnInvalidTransform() {
+  info("Testing that a transform tooltip does not appear for invalid values");
+
+  // This is the list of keys to type in the inplace-editor
+  let keyData = "transform".split("");
+  keyData.push("VK_TAB");
+  keyData = keyData.concat("muchTransform(suchAngle)".split(""));
+  keyData.push("VK_RETURN");
+
+  // Focus the inplace editor
+  let rule = getRule("[attr]");
+  let brace = rule.querySelector(".ruleview-ruleclose");
+  waitForEditorFocus(brace.parentNode, editor => {
+    // Enter an invalid value
+    typeKeySequence(keyData, () => {
+      let {valueSpan} = getRuleViewProperty("[attr]", "transform");
+      assertTooltipNotShownOn(ruleView.previewTooltip, valueSpan, () => {
+        executeSoon(testTransformTooltipOnComputedView);
+      });
+    });
+  });
+  brace.click();
+}
+
+function testTransformTooltipOnComputedView() {
+  info("Testing that a transform tooltip appears in the computed view too");
+
+  inspector.sidebar.select("computedview");
+  computedView = inspector.sidebar.getWindowForTab("computedview").computedview.view;
+  let doc = computedView.styleDocument;
+
+  let panel = computedView.tooltip.panel;
+  let {valueSpan} = getComputedViewProperty("transform");
+
+  assertTooltipShownOn(computedView.tooltip, valueSpan, () => {
+    // The transform preview is canvas, so there's not much we can test, so for
+    // now, let's just be happy with the fact that the tooltips is shown!
+    ok(true, "Tooltip shown on the computed transform property");
+    computedView.tooltip.hide();
+    executeSoon(endTests);
+  });
+}
+
+function assertTooltipShownOn(tooltip, element, cb) {
+  // If there is indeed a show-on-hover on element, the xul panel will be shown
+  tooltip.panel.addEventListener("popupshown", function shown() {
+    tooltip.panel.removeEventListener("popupshown", shown, true);
+    cb();
+  }, true);
+  tooltip._showOnHover(element);
+}
+
+function assertTooltipNotShownOn(tooltip, element, cb) {
+  // The only way to make sure the tooltip is not shown is try and show it, wait
+  // for a given amount of time, and then check if it's shown or not
+  tooltip._showOnHover(element);
+  setTimeout(() => {
+    ok(!tooltip.isShown(), "The tooltip did not appear on hover of the element");
+    cb();
+  }, tooltip.defaultShowDelay + 100);
+}
+
+function typeKeySequence(sequence, cb, index=0) {
+  if (index === sequence.length) {
+    return cb();
+  }
+
+  EventUtils.synthesizeKey(sequence[index], {}, ruleView.doc.defaultView);
+  executeSoon(() => {
+    typeKeySequence(sequence, cb, index + 1);
+  });
+}
+
+function getRule(selectorText) {
+  let rule;
+
+  [].forEach.call(ruleView.doc.querySelectorAll(".ruleview-rule"), aRule => {
+    let selector = aRule.querySelector(".ruleview-selector-matched");
+    if (selector && selector.textContent === selectorText) {
+      rule = aRule;
+    }
+  });
+
+  return rule;
+}
+
+function getRuleViewProperty(selectorText, propertyName) {
+  let prop;
+
+  let rule = getRule(selectorText);
+  if (rule) {
+    // Look for the propertyName in that rule element
+    [].forEach.call(rule.querySelectorAll(".ruleview-property"), property => {
+      let nameSpan = property.querySelector(".ruleview-propertyname");
+      let valueSpan = property.querySelector(".ruleview-propertyvalue");
+
+      if (nameSpan.textContent === propertyName) {
+        prop = {nameSpan: nameSpan, valueSpan: valueSpan};
+      }
+    });
+  }
+
+  return prop;
+}
+
+function getComputedViewProperty(name) {
+  let prop;
+  [].forEach.call(computedView.styleDocument.querySelectorAll(".property-view"), property => {
+    let nameSpan = property.querySelector(".property-name");
+    let valueSpan = property.querySelector(".property-value");
+
+    if (nameSpan.textContent === name) {
+      prop = {nameSpan: nameSpan, valueSpan: valueSpan};
+    }
+  });
+  return prop;
+}

browser/devtools/styleinspector/test/browser_bug765105_background_image_tooltip.js

@@ -142,8 +142,9 @@ function testComputedView() {
 
   let panel = computedView.tooltip.panel;
   let {valueSpan} = getComputedViewProperty("background-image");
+  let uriSpan = valueSpan.querySelector(".theme-link");
 
-  assertTooltipShownOn(computedView.tooltip, valueSpan, () => {
+  assertTooltipShownOn(computedView.tooltip, uriSpan, () => {
     let images = panel.getElementsByTagName("image");
     is(images.length, 1, "Tooltip contains an image");
     ok(images[0].src === "chrome://global/skin/icons/warning-64.png");

browser/locales/en-US/chrome/browser/customizableui/customizableWidgets.properties

@@ -31,9 +31,9 @@ add-ons-button.label = Add-ons
 # LOCALIZATION NOTE(add-ons-button.tooltiptext): %S is the keyboard shortcut
 add-ons-button.tooltiptext = Add-ons Manager (%S)
 
-switch-to-metro-button.label = Windows 8 Touch
-# LOCALIZATION NOTE(switch-to-metro-button.tooltiptext): %S is the brand short name
-switch-to-metro-button.tooltiptext = Relaunch in %S for Windows 8 Touch
+switch-to-metro-button2.label = Windows 8 Touch
+# LOCALIZATION NOTE(switch-to-metro-button2.tooltiptext): %S is the brand short name
+switch-to-metro-button2.tooltiptext = Relaunch in %S for Windows 8 Touch
 
 preferences-button.label = Preferences
 # LOCALIZATION NOTE (preferences-button.tooltiptext): Use the unicode ellipsis char,

browser/metro/base/content/browser-ui.js

@@ -208,10 +208,6 @@ var BrowserUI = {
       DebuggerServer.init();
       DebuggerServer.addBrowserActors();
       DebuggerServer.addActors('chrome://browser/content/dbg-metro-actors.js');
-
-      // Add these globally for chrome, until per-window chrome debugging is supported (bug 928018):
-      DebuggerServer.addGlobalActor(DebuggerServer.tabActorFactories.inspectorActor, "inspectorActor");
-      DebuggerServer.addGlobalActor(DebuggerServer.tabActorFactories.styleEditorActor, "styleEditorActor");
     }
     DebuggerServer.openListener(port);
   },

browser/metro/base/content/browser.xul

@@ -276,7 +276,7 @@ Desktop browser's sync prefs.
             </hbox>
 
             <hbox id="toolbar-context-autocomplete" pack="end">
-              <toolbarbutton id="close-button" class="appbar-secondary"
+              <toolbarbutton id="close-button" class="appbar-primary"
                              oncommand="Appbar.onAutocompleteCloseButton()"/>
             </hbox>
           </stack>
@@ -362,19 +362,22 @@ Desktop browser's sync prefs.
     <!-- Context button bar -->
     <appbar id="contextappbar">
       <toolbar id="contextualactions-tray" labelled="true" flex="1">
-        <toolbarbutton id="pin-selected-button" class="appbar-secondary"
+        <toolbarbutton id="pin-selected-button" class="appbar-primary"
                        label-uses-set-name="true" hidden="true" fade="true"
                        oncommand="Appbar.dispatchContextualAction('pin')"/>
-        <toolbarbutton id="unpin-selected-button" class="appbar-secondary"
+        <toolbarbutton id="unpin-selected-button" class="appbar-primary"
                        label-uses-set-name="true" hidden="true" fade="true"
                        oncommand="Appbar.dispatchContextualAction('unpin')"/>
-        <toolbarbutton id="delete-selected-button" class="appbar-secondary"
+        <toolbarbutton id="hide-selected-button" class="appbar-primary"
+                       label-uses-set-name="true" hidden="true" fade="true"
+                       oncommand="Appbar.dispatchContextualAction('unpin')"/>
+        <toolbarbutton id="delete-selected-button" class="appbar-primary"
                        hidden="true" fade="true"
                        oncommand="Appbar.dispatchContextualAction('delete')"/>
-        <toolbarbutton id="restore-selected-button" class="appbar-secondary"
+        <toolbarbutton id="restore-selected-button" class="appbar-primary"
                        hidden="true" fade="true"
                        oncommand="Appbar.dispatchContextualAction('restore')"/>
-        <toolbarbutton id="clear-selected-button" class="appbar-secondary"
+        <toolbarbutton id="clear-selected-button" class="appbar-primary"
                        hidden="true" fade="true"
                        oncommand="Appbar.dispatchContextualAction('clear')"/>
       </toolbar>

browser/metro/base/content/startui/BookmarksView.js

@@ -170,7 +170,7 @@ BookmarksView.prototype = Util.extend(Object.create(View.prototype), {
 
   _setContextActions: function bv__setContextActions(aItem) {
     let itemId = this._getBookmarkIdForItem(aItem);
-    aItem.setAttribute("data-contextactions", "delete," + (this._pinHelper.isPinned(itemId) ? "unpin" : "pin"));
+    aItem.setAttribute("data-contextactions", "delete," + (this._pinHelper.isPinned(itemId) ? "hide" : "pin"));
     if (aItem.refresh) aItem.refresh();
   },
 

browser/metro/base/content/startui/HistoryView.js

@@ -107,7 +107,7 @@ HistoryView.prototype = Util.extend(Object.create(View.prototype), {
 
   _setContextActions: function bv__setContextActions(aItem) {
     let uri = aItem.getAttribute("value");
-    aItem.setAttribute("data-contextactions", "delete," + (this._pinHelper.isPinned(uri) ? "unpin" : "pin"));
+    aItem.setAttribute("data-contextactions", "delete," + (this._pinHelper.isPinned(uri) ? "hide" : "pin"));
     if ("refresh" in aItem) aItem.refresh();
   },
 

browser/metro/base/tests/mochitest/browser_bookmarks.js

@@ -32,13 +32,13 @@ function tearDown() {
 }
 
 gTests.push({
-  desc: "Test bookmarks StartUI unpin",
+  desc: "Test bookmarks StartUI hide",
   setUp: setup,
   tearDown: tearDown,
-  run: function testBookmarksStartUnpin() {
-    let unpinButton = document.getElementById("unpin-selected-button");
+  run: function testBookmarksStartHide() {
+    let hideButton = document.getElementById("hide-selected-button");
 
-    // --------- unpin item 2
+    // --------- hide item 2
 
     let item = gStartView._getItemForBookmarkId(2);
 
@@ -46,19 +46,19 @@ gTests.push({
     sendContextMenuClickToElement(window, item, 10, 10);
     yield promise;
 
-    ok(!unpinButton.hidden, "Unpin button is visible.");
+    ok(!hideButton.hidden, "Hide button is visible.");
 
     let promise = waitForEvent(Elements.contextappbar, "transitionend", null, Elements.contextappbar);
-    unpinButton.click();
+    hideButton.click();
     yield promise;
 
     item = gStartView._getItemForBookmarkId(2);
 
     ok(!item, "Item not in grid");
-    ok(!gStartView._pinHelper.isPinned(2), "Item unpinned");
+    ok(!gStartView._pinHelper.isPinned(2), "Item hidden");
     ok(gStartView._set.itemCount === gStartView._limit, "Grid repopulated");
 
-    // --------- unpin multiple items
+    // --------- hide multiple items
 
     let item1 = gStartView._getItemForBookmarkId(0);
     let item2 = gStartView._getItemForBookmarkId(5);
@@ -70,10 +70,10 @@ gTests.push({
     sendContextMenuClickToElement(window, item3, 10, 10);
     yield promise;
 
-    ok(!unpinButton.hidden, "Unpin button is visible.");
+    ok(!hideButton.hidden, "Hide button is visible.");
 
     let promise = waitForEvent(Elements.contextappbar, "transitionend", null, Elements.contextappbar);
-    EventUtils.synthesizeMouse(unpinButton, 10, 10, {}, window);
+    EventUtils.synthesizeMouse(hideButton, 10, 10, {}, window);
     yield promise;
 
     item1 = gStartView._getItemForBookmarkId(0);
@@ -81,7 +81,7 @@ gTests.push({
     item3 = gStartView._getItemForBookmarkId(12);
 
     ok(!item1 && !item2 && !item3, "Items are not in grid");
-    ok(!gStartView._pinHelper.isPinned(0) && !gStartView._pinHelper.isPinned(5) && !gStartView._pinHelper.isPinned(12) , "Items unpinned");
+    ok(!gStartView._pinHelper.isPinned(0) && !gStartView._pinHelper.isPinned(5) && !gStartView._pinHelper.isPinned(12) , "Items hidden");
     ok(gStartView._set.itemCount === gStartView._limit - 1, "Grid repopulated");
   }
 });

browser/metro/base/tests/mochitest/browser_history.js

@@ -43,13 +43,13 @@ function uriFromIndex(aIndex) {
 }
 
 gTests.push({
-  desc: "Test history StartUI unpin",
+  desc: "Test history StartUI hide",
   setUp: setup,
   tearDown: tearDown,
-  run: function testHistoryStartUnpin() {
-    let unpinButton = document.getElementById("unpin-selected-button");
+  run: function testHistoryStartHide() {
+    let hideButton = document.getElementById("hide-selected-button");
 
-    // --------- unpin item 2
+    // --------- hide item 2
 
     let item = gStartView._set.getItemsByUrl(uriFromIndex(2))[0];
 
@@ -57,19 +57,19 @@ gTests.push({
     sendContextMenuClickToElement(window, item, 10, 10);
     yield promise;
 
-    ok(!unpinButton.hidden, "Unpin button is visible.");
+    ok(!hideButton.hidden, "Hide button is visible.");
 
     let promise = waitForEvent(Elements.contextappbar, "transitionend", null, Elements.contextappbar);
-    unpinButton.click();
+    hideButton.click();
     yield promise;
 
     item = gStartView._set.getItemsByUrl(uriFromIndex(2))[0];
 
     ok(!item, "Item not in grid");
-    ok(!gStartView._pinHelper.isPinned(uriFromIndex(2)), "Item unpinned");
+    ok(!gStartView._pinHelper.isPinned(uriFromIndex(2)), "Item hidden");
     is(gStartView._set.itemCount, gStartView._limit, "Grid repopulated");
 
-    // --------- unpin multiple items
+    // --------- hide multiple items
 
     let item1 = gStartView._set.getItemsByUrl(uriFromIndex(0))[0];
     let item2 = gStartView._set.getItemsByUrl(uriFromIndex(5))[0];
@@ -82,10 +82,10 @@ gTests.push({
     sendContextMenuClickToElement(window, item3, 10, 10);
     yield promise;
 
-    ok(!unpinButton.hidden, "Unpin button is visible.");
+    ok(!hideButton.hidden, "Hide button is visible.");
 
     let promise = waitForEvent(Elements.contextappbar, "transitionend", null, Elements.contextappbar);
-    EventUtils.synthesizeMouse(unpinButton, 10, 10, {}, window);
+    EventUtils.synthesizeMouse(hideButton, 10, 10, {}, window);
     yield promise;
 
     item1 = gStartView._set.getItemsByUrl(uriFromIndex(0))[0];
@@ -93,7 +93,7 @@ gTests.push({
     item3 = gStartView._set.getItemsByUrl(uriFromIndex(12))[0];
 
     ok(!item1 && !item2 && !item3, "Items are not in grid");
-    ok(!gStartView._pinHelper.isPinned(uriFromIndex(0)) && !gStartView._pinHelper.isPinned(uriFromIndex(5)) && !gStartView._pinHelper.isPinned(uriFromIndex(12)) , "Items unpinned");
+    ok(!gStartView._pinHelper.isPinned(uriFromIndex(0)) && !gStartView._pinHelper.isPinned(uriFromIndex(5)) && !gStartView._pinHelper.isPinned(uriFromIndex(12)) , "Items hidden");
     ok(gStartView._set.itemCount === gStartView._limit - 1, "Grid repopulated");
   }
 });

browser/metro/locales/en-US/chrome/browser.properties

@@ -22,8 +22,8 @@ contextAppbar2.pin.recentHistory=Pin to Recent History
 contextAppbar2.pin.downloads=Pin to Downloads
 
 contextAppbar2.unpin.topSites=Unpin from Top Sites
-contextAppbar2.unpin.bookmarks=Unpin from Bookmarks
-contextAppbar2.unpin.recentHistory=Unpin from Recent History
+contextAppbar2.hide.bookmarks=Hide Bookmark
+contextAppbar2.hide.recentHistory=Hide
 contextAppbar2.unpin.downloads=Unpin from Downloads
 
 # LOCALIZATION NOTE (contextAppbar2.delete): Deletes selected pages.

browser/metro/theme/browser.css

@@ -950,50 +950,79 @@ documenttab[selected] .documenttab-selection {
 }
 
 #pin-selected-button {
-  -moz-image-region: rect(0px, 240px, 40px, 200px) !important;
-}
-#pin-selected-button:hover {
-  -moz-image-region: rect(40px, 240px, 80px, 200px) !important;
-}
-#pin-selected-button:active {
-  -moz-image-region: rect(80px, 240px, 120px, 200px) !important;
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin.png);
 }
+
 #unpin-selected-button {
-  -moz-image-region: rect(0px, 280px, 40px, 240px) !important;
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin.png);
 }
-#unpin-selected-button:hover {
-  -moz-image-region: rect(40px, 280px, 80px, 240px) !important;
-}
-#unpin-selected-button:active {
-  -moz-image-region: rect(80px, 280px, 120px, 240px) !important;
+
+#hide-selected-button {
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide.png);
 }
+
 #delete-selected-button {
-  -moz-image-region: rect(0px, 480px, 40px, 440px) !important;
-}
-#delete-selected-button:hover {
-  -moz-image-region: rect(40px, 480px, 80px, 440px) !important;
-}
-#delete-selected-button:active {
-  -moz-image-region: rect(80px, 480px, 120px, 440px) !important;
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete.png);
 }
+
 #clear-selected-button {
-  -moz-image-region: rect(0px, 520px, 40px, 480px) !important;
-}
-#clear-selected-button:hover {
-  -moz-image-region: rect(40px, 520px, 80px, 480px) !important;
-}
-#clear-selected-button:active {
-  -moz-image-region: rect(80px, 520px, 120px, 480px) !important;
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear.png);
 }
 
 #restore-selected-button {
-  -moz-image-region: rect(0px, 560px, 40px, 520px) !important;
+  list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore.png);
 }
-#restore-selected-button:hover {
-  -moz-image-region: rect(40px, 560px, 80px, 520px) !important;
+
+@media (min-resolution: @min_res_140pc@) {
+  #pin-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.4x.png);
+  }
+
+  #unpin-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.4x.png);
+  }
+
+  #hide-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.4x.png);
+  }
+
+  #delete-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.4x.png);
+  }
+
+  #clear-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.4x.png);
+  }
+
+  #restore-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.4x.png);
+  }
 }
-#restore-selected-button:active {
-  -moz-image-region: rect(80px, 560px, 120px, 520px) !important;
+
+@media (min-resolution: @min_res_180pc@) {
+  #pin-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-pin@1.8x.png);
+  }
+
+  #unpin-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-unpin@1.8x.png);
+  }
+
+  #hide-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-hide@1.8x.png);
+  }
+
+  #delete-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-delete@1.8x.png);
+  }
+
+  #clear-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-clear@1.8x.png);
+  }
+
+  #restore-selected-button {
+    list-style-image: url(chrome://browser/skin/images/navbar-contextual-restore@1.8x.png);
+  }
 }
 
 /* Download notifications ======================================================= */

browser/metro/theme/jar.mn

@@ -27,6 +27,24 @@ chrome.jar:
   skin/images/navbar-back.png               (images/navbar-back.png)
   skin/images/navbar-back@1.4x.png          (images/navbar-back@1.4x.png)
   skin/images/navbar-back@1.8x.png          (images/navbar-back@1.8x.png)
+  skin/images/navbar-contextual-clear.png (images/navbar-contextual-clear.png)
+  skin/images/navbar-contextual-clear@1.4x.png (images/navbar-contextual-clear@1.4x.png)
+  skin/images/navbar-contextual-clear@1.8x.png (images/navbar-contextual-clear@1.8x.png)
+  skin/images/navbar-contextual-delete.png (images/navbar-contextual-delete.png)
+  skin/images/navbar-contextual-delete@1.4x.png (images/navbar-contextual-delete@1.4x.png)
+  skin/images/navbar-contextual-delete@1.8x.png (images/navbar-contextual-delete@1.8x.png)
+  skin/images/navbar-contextual-hide.png (images/navbar-contextual-hide.png)
+  skin/images/navbar-contextual-hide@1.4x.png (images/navbar-contextual-hide@1.4x.png)
+  skin/images/navbar-contextual-hide@1.8x.png (images/navbar-contextual-hide@1.8x.png)
+  skin/images/navbar-contextual-pin.png (images/navbar-contextual-pin.png)
+  skin/images/navbar-contextual-pin@1.4x.png (images/navbar-contextual-pin@1.4x.png)
+  skin/images/navbar-contextual-pin@1.8x.png (images/navbar-contextual-pin@1.8x.png)
+  skin/images/navbar-contextual-restore.png (images/navbar-contextual-restore.png)
+  skin/images/navbar-contextual-restore@1.4x.png (images/navbar-contextual-restore@1.4x.png)
+  skin/images/navbar-contextual-restore@1.8x.png (images/navbar-contextual-restore@1.8x.png)
+  skin/images/navbar-contextual-unpin.png (images/navbar-contextual-unpin.png)
+  skin/images/navbar-contextual-unpin@1.4x.png (images/navbar-contextual-unpin@1.4x.png)
+  skin/images/navbar-contextual-unpin@1.8x.png (images/navbar-contextual-unpin@1.8x.png)
   skin/images/navbar-download.png           (images/navbar-download.png)
   skin/images/navbar-download@1.4x.png      (images/navbar-download@1.4x.png)
   skin/images/navbar-download@1.8x.png      (images/navbar-download@1.8x.png)

browser/metro/theme/platform.css

@@ -636,6 +636,10 @@ tabmodalprompt:not([promptType="promptUserAndPass"]) .infoContainer {
 
 .meta {
   background-color: @panel_light_color@;
+  background-image: url("chrome://browser/skin/images/firefox-watermark.png");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-attachment: fixed;
 }
 
 /* needs to observe the viewstate */

browser/metro/theme/touchcontrols.css

@@ -54,7 +54,7 @@
  * is hidden by videocontrols.xml, and that alters the position of the
  * play button.  This workaround moves it back to center.
  */
-.controlBar.audio .playButton {
+.controlBar.audio-only .playButton {
   transform: translateX(28px);
 }
 

browser/themes/linux/browser.css

@@ -510,6 +510,11 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
   transition: @forwardTransitionLength@ ease-out;
 }
 
+#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+  transform: scaleX(-1);
+}
+
 /* tabview button */
 
 #tabview-button,

browser/themes/linux/devtools/debugger.css

@@ -389,14 +389,25 @@
 }
 
 #resume {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
+  list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
   -moz-image-region: rect(0px,16px,16px,0px);
+  transition: background 0.15s ease-in-out;
 }
 
 #resume[checked] {
+  background: none;
+  list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
+#resume ~ toolbarbutton {
+  transition: opacity 0.15s ease-in-out;
+}
+
+#resume:not([checked]) ~ toolbarbutton {
+  opacity: 0.5;
+}
+
 #step-over {
   list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
 }

browser/themes/linux/devtools/toolbox.css

@@ -1,288 +0,0 @@
-/* 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/. */
-
-#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 {
-  list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
-}
-
-#toolbox-dock-side {
-  list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
-}
-
-#toolbox-dock-window {
-  list-style-image: url("chrome://browser/skin/devtools/undock.png");
-}
-
-#toolbox-dock-window,
-#toolbox-dock-bottom,
-#toolbox-dock-side {
-  opacity: 0.6;
-}
-
-#toolbox-dock-window:hover,
-#toolbox-dock-bottom:hover,
-#toolbox-dock-side: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, .command-button[checked=true]:not(:hover) {
-  background-color: hsla(206,37%,4%,.4);
-}
-
-#command-button-paintflashing {
-  list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-paintflashing:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-#command-button-paintflashing:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-#command-button-paintflashing[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-responsive {
-  list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-responsive:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-#command-button-responsive:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-#command-button-responsive[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-tilt {
-  list-style-image: url("chrome://browser/skin/devtools/command-tilt.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-tilt:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-#command-button-tilt:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-
-#command-button-tilt[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-scratchpad {
-  list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-
-#command-button-scratchpad:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-#command-button-scratchpad:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-
-/* Tabs */
-
-.devtools-tabbar {
-  -moz-appearance: none;
-  background-image: url("background-noise-toolbar.png"),
-                    linear-gradient(#303840, #2d3640);
-  border-color: #060a0d;
-  border-style: solid;
-  border-width: 1px 0;
-  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: 32px;
-  min-height: 32px;
-  max-width: 127px;
-  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);
-  -moz-box-align: center;
-}
-
-.devtools-tab > image {
-  border: none;
-  -moz-margin-end: 0;
-  -moz-margin-start: 4px;
-  opacity: 0.6;
-  max-height: 16px;
-  width: 16px; /* Prevents collapse during theme switching */
-}
-
-#toolbox-tab-options > image {
-  margin: 0 8px;
-}
-
-.devtools-tab > label {
-  white-space: nowrap;
-}
-
-.devtools-tab:hover > image {
-  opacity: 0.8;
-}
-
-.devtools-tab:active > image,
-.devtools-tab[selected=true] > label {
-  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(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)),
-                    radial-gradient(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;
-}
-
-.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-vertical-pane {
-  margin: 5px;
-  width: calc(50% - 30px);
-  min-width: 400px;
-  -moz-padding-start: 5px;
-}
-
-.options-vertical-pane > label {
-  padding: 2px 0;
-  font-size: 1.4rem;
-}
-
-.options-groupbox {
-  -moz-margin-start: 15px;
-  padding: 2px;
-}
-
-.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 */
-}
-
-.options-citation-label + label {
-  padding: 3px 0 0 !important; /* To align it with the checkbox */
-  font-style: italic;
-}
-
-.hidden-labels-box:not(.visible) > label,
-.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
-  display: none;
-}

browser/themes/linux/jar.mn

@@ -146,9 +146,9 @@ browser.jar:
   skin/classic/browser/tabview/stack-expander.png     (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png            (tabview/tabview.png)
   skin/classic/browser/tabview/tabview.css            (tabview/tabview.css)
-* skin/classic/browser/devtools/common.css            (devtools/common.css)
-  skin/classic/browser/devtools/dark-theme.css        (../shared/devtools/dark-theme.css)
-  skin/classic/browser/devtools/light-theme.css       (../shared/devtools/light-theme.css)
+* skin/classic/browser/devtools/common.css            (../shared/devtools/common.css)
+* skin/classic/browser/devtools/dark-theme.css        (../shared/devtools/dark-theme.css)
+* skin/classic/browser/devtools/light-theme.css       (../shared/devtools/light-theme.css)
   skin/classic/browser/devtools/controls.png          (../shared/devtools/controls.png)
 * skin/classic/browser/devtools/widgets.css           (devtools/widgets.css)
   skin/classic/browser/devtools/commandline-icon.png  (devtools/commandline-icon.png)
@@ -229,7 +229,6 @@ browser.jar:
   skin/classic/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
   skin/classic/browser/devtools/inspector.css             (devtools/inspector.css)
   skin/classic/browser/devtools/profiler-stopwatch.png    (devtools/profiler-stopwatch.png)
-  skin/classic/browser/devtools/toolbox.css               (devtools/toolbox.css)
   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)

browser/themes/osx/browser.css

@@ -1432,8 +1432,8 @@ toolbar .toolbarbutton-1:not([type="menu-button"]),
   margin: 0;
 }
 
-#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
-  padding-top: 2px;
+#zoom-controls[cui-areatype="toolbar"]:not(.overflowedItem) > #zoom-reset-button > .toolbarbutton-text {
+  padding-top: 8px;
   margin: 2px;
 }
 

browser/themes/osx/devtools/common.css

@@ -1,354 +0,0 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/* 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/. */
-
-%include ../shared.inc
-
-/* Font for code */
-
-:root {
-  font: message-box;
-}
-
-.devtools-monospace {
-  font-family: Menlo, monospace;
-}
-
-/* Toolbar and Toolbar items */
-
-.devtools-toolbar {
-  -moz-appearance: none;
-  padding: 4px 3px;
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-}
-
-.devtools-menulist,
-.devtools-toolbarbutton {
-  -moz-appearance: none;
-  -moz-box-align: center;
-  min-width: 78px;
-  min-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border: 1px solid hsla(210,8%,5%,.45);
-  border-radius: @toolbarbuttonCornerRadius@;
-  background: linear-gradient(hsla(212,7%,57%,.35), hsla(212,7%,57%,.1)) padding-box;
-  box-shadow: 0 1px 0 hsla(210,16%,76%,.15) inset, 0 0 0 1px hsla(210,16%,76%,.15) inset, 0 1px 0 hsla(210,16%,76%,.15);
-  color: inherit;
-}
-
-.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
-  -moz-box-orient: horizontal;
-}
-
-.devtools-menulist {
-  margin: 0 2px;
-}
-
-.devtools-menulist:-moz-focusring,
-.devtools-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.7);
-  outline-offset: -4px;
-}
-
-.devtools-toolbarbutton > .toolbarbutton-text {
-  margin: 1px 6px;
-}
-
-.devtools-toolbarbutton:not([label]) {
-  min-width: 32px;
-}
-
-.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
-  display: none;
-}
-
-.devtools-toolbarbutton:not([checked=true]):hover:active {
-  border-color: hsla(210,8%,5%,.6);
-  background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
-  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-menulist[open=true],
-.devtools-toolbarbutton[open=true],
-.devtools-toolbarbutton[checked=true] {
-  border-color: hsla(210,8%,5%,.6);
-  background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
-  box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-toolbarbutton[checked=true] {
-  color: hsl(208,100%,60%) !important;
-}
-
-.devtools-toolbarbutton[checked=true]:hover:active {
-  background-color: hsla(210,8%,5%,.2);
-}
-
-.devtools-option-toolbarbutton {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/devtools/option-icon.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-  background: none;
-  border: none;
-}
-
-.devtools-option-toolbarbutton[open=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-.devtools-menulist > .menulist-label-box {
-  text-align: center;
-}
-
-.devtools-menulist > .menulist-dropmarker {
-  -moz-appearance: none;
-  background-color: transparent;
-  display: -moz-box;
-  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
-  border-width: 0;
-  min-width: 18px;
-}
-
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-  -moz-appearance: none;
-  border-width: 0;
-  -moz-border-end: 1px solid hsla(210,8%,5%,.45);
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
-  padding: 0 1px;
-}
-
-.devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-toolbarbutton[type=menu-button] {
-  padding: 0 1px;
-  -moz-box-align: stretch;
-}
-
-.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-  -moz-appearance: none !important;
-  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
-  border: 0;
-}
-
-/* Text input */
-
-.devtools-textinput,
-.devtools-searchinput {
-  -moz-appearance: none;
-  margin: 0 3px;
-  min-height: 22px;
-  background-color: transparent;
-  border: 1px solid hsla(210,8%,5%,.6);
-  border-radius: 20px;
-  background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
-  padding: 3px 8px;
-  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);
-  color: inherit;
-}
-
-.devtools-searchinput {
-  background-image: url(magnifying-glass.png), linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
-  background-repeat: no-repeat;
-  background-position: 4px center, top left, top left;
-  padding-top: 0;
-  padding-bottom: 0;
-  -moz-padding-start: 18px;
-  -moz-padding-end: 12px;
-  font-size: inherit;
-}
-
-.devtools-searchinput:-moz-locale-dir(rtl) {
-  background-position: calc(100% - 4px) center, top left, top left;
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
-  display: none;
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
-  opacity: 1.0;
-  color: hsl(208,10%,66%);
-}
-
-.devtools-no-search-result {
-  box-shadow: inset 0 0 0 1px hsla(0,68%,6%,.35);
-  border-color: hsl(10,70%,40%) hsl(10,75%,37%) hsl(10,80%,35%) !important;
-  background-image: url(magnifying-glass.png), linear-gradient(hsla(1,16%,76%,.45), hsla(1,16%,76%,.75));
-}
-
-/* Close button */
-
-.devtools-closebutton {
-  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-text {
-  display: none;
-}
-
-.devtools-closebutton:hover {
-  opacity: 0.8;
-}
-
-.devtools-closebutton:active {
-  opacity: 1;
-}
-
-/* Splitters */
-
-.devtools-horizontal-splitter {
-  -moz-appearance: none;
-  background-image: none;
-  border-top: 1px solid black;
-  border-bottom-width: 0;
-  min-height: 3px;
-  height: 3px;
-  margin-bottom: -3px;
-  position: relative;
-}
-
-.devtools-side-splitter {
-  -moz-appearance: none;
-  background-image: none;
-  border: 0;
-  -moz-border-start: 1px solid black;
-  min-width: 0;
-  width: 3px;
-  -moz-margin-end: -3px;
-  position: relative;
-  cursor: e-resize;
-}
-
-/* In-tools sidebar */
-
-.devtools-toolbox-side-iframe {
-  min-width: 465px;
-}
-
-.devtools-sidebar-tabs {
-  -moz-appearance: none;
-  margin: 0;
-}
-
-.devtools-sidebar-tabs > tabpanels {
-  padding: 0;
-}
-
-.devtools-sidebar-tabs > tabs {
-  -moz-appearance: none;
-  font: inherit;
-  position: static;
-  color: #b6babf;
-  margin-bottom: 0;
-  padding: 0;
-  background-color: #343c45;
-  border-width: 0 0 1px 0;
-  border-color: hsla(210,8%,5%,.6);
-  border-style: solid;
-  overflow: hidden;
-}
-
-.devtools-sidebar-tabs > tabs > .tabs-right,
-.devtools-sidebar-tabs > tabs > .tabs-left {
-  display: none;
-}
-
-.devtools-sidebar-tabs > tabs > tab {
-  -moz-appearance: none;
-  /* We want to match the height of a toolbar with a toolbarbutton
-   * First, we need to replicated the padding of toolbar (4px),
-   * then we need to take the border of the buttons into account (1px).
-   */
-  padding: 5px 3px !important;
-  -moz-padding-start: 6px;
-  padding: 0;
-  min-width: 78px;
-  /* toolbar's min-height is button min-height (25px) + padding (2 * 4px): 33px.
-   * -1px because the parent element (<tabs>) comes with a 1px bottom border.
-   */
-  min-height: 32px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  text-align: center;
-  color: inherit;
-  -moz-box-flex: 1;
-  border-width: 0;
-  position: static;
-  -moz-margin-start: -1px;
-}
-
-.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
-  position: static;
-}
-
-.devtools-sidebar-tabs > tabs > tab:first-of-type {
-  -moz-margin-start: -3px;
-}
-
-.devtools-sidebar-tabs > tabs > tab {
-  background-size: calc(100% - 2px) 100%, 1px 100%;
-  background-repeat: no-repeat;
-  background-position: 1px, 0;
-}
-
-.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
-  background-position: calc(100% - 1px), 100%;
-}
-
-.devtools-sidebar-tabs > tabs > tab:last-of-type {
-  -moz-border-end-width: 0;
-}
-
-%define smallSeparator linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%)
-%define solidSeparator linear-gradient(#2d5b7d, #2d5b7d)
-
-.devtools-sidebar-tabs > tabs > tab {
-  background-image: linear-gradient(transparent, transparent), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab:hover {
-  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab:hover:active {
-  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab {
-  background-image: linear-gradient(transparent, transparent), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover {
-  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active {
-  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] {
-  color: #f5f7fa;
-  background-image: linear-gradient(#1d4f73, #1d4f73), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true]:hover {
-  background-image: linear-gradient(#274f64, #274f64), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active {
-  background-image: linear-gradient(#1f3e4f, #1f3e4f), @solidSeparator@;
-}
-
-%include ../../shared/devtools/common.inc.css

browser/themes/osx/devtools/debugger.css

@@ -391,14 +391,25 @@
 }
 
 #resume {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
+  list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
   -moz-image-region: rect(0px,16px,16px,0px);
+  transition: background 0.15s ease-in-out;
 }
 
 #resume[checked] {
+  background: none;
+  list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
+#resume ~ toolbarbutton {
+  transition: opacity 0.15s ease-in-out;
+}
+
+#resume:not([checked]) ~ toolbarbutton {
+  opacity: 0.5;
+}
+
 #step-over {
   list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
 }

browser/themes/osx/devtools/toolbox.css

@@ -1,274 +0,0 @@
-/* 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/. */
-
-#toolbox-controls {
-  margin: 0 4px;
-}
-
-#toolbox-controls > toolbarbutton,
-#toolbox-dock-buttons > toolbarbutton {
-  margin: 0 4px;
-  min-width: 16px;
-  width: 16px;
-}
-
-#toolbox-dock-bottom {
-  list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
-}
-
-#toolbox-dock-side {
-  list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
-}
-
-#toolbox-dock-window {
-  list-style-image: url("chrome://browser/skin/devtools/undock.png");
-}
-
-#toolbox-dock-window,
-#toolbox-dock-bottom,
-#toolbox-dock-side {
-  opacity: 0.6;
-}
-
-#toolbox-dock-window:hover,
-#toolbox-dock-bottom:hover,
-#toolbox-dock-side:hover {
-  opacity: 1;
-}
-
-/* Command buttons */
-
-.command-button {
-  padding: 0 8px;
-  margin: 0;
-  border-width: 0;
-  width: 16px;
-}
-
-.command-button:hover {
-  background-color: hsla(206,37%,4%,.2);
-}
-.command-button:hover:active, .command-button[checked=true]:not(:hover) {
-  background-color: hsla(206,37%,4%,.4);
-}
-
-#command-button-paintflashing {
-  list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-paintflashing:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-#command-button-paintflashing:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-#command-button-paintflashing[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-responsive {
-  list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-responsive:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-#command-button-responsive:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-#command-button-responsive[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-tilt {
-  list-style-image: url("chrome://browser/skin/devtools/command-tilt.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-tilt:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-#command-button-tilt:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-
-#command-button-tilt[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-scratchpad {
-  list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-
-#command-button-scratchpad:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-#command-button-scratchpad:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-
-/* Tabs */
-
-.devtools-tabbar {
-  -moz-appearance: none;
-  background-image: url("background-noise-toolbar.png"),
-                    linear-gradient(#303840, #2d3640);
-  border-color: #060a0d;
-  border-style: solid;
-  border-width: 1px 0;
-  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: 32px;
-  min-height: 32px;
-  max-width: 110px;
-  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 > image {
-  -moz-margin-end: 0;
-  -moz-margin-start: 4px;
-  opacity: 0.6;
-  width: 16px; /* Prevents collapse during theme switching */
-}
-
-#toolbox-tab-options > image {
-  margin: 0 8px;
-}
-
-.devtools-tab > label {
-  white-space: nowrap;
-}
-
-.devtools-tab:hover > image {
-  opacity: 0.8;
-}
-
-.devtools-tab:active > image,
-.devtools-tab[selected=true] > image {
-  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(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)),
-                    radial-gradient(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;
-}
-
-.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-vertical-pane {
-  margin: 5px;
-  width: calc(50% - 30px);
-  min-width: 400px;
-  -moz-padding-start: 5px;
-}
-
-.options-vertical-pane > label {
-  padding: 2px 0;
-  font-size: 1.4rem;
-}
-
-.options-groupbox {
-  -moz-margin-start: 15px;
-  padding: 2px;
-}
-
-.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 */
-}
-
-.options-citation-label + label {
-  padding: 3px 0 0 !important; /* To align it with the checkbox */
-  font-style: italic;
-}
-
-.hidden-labels-box:not(.visible) > label,
-.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
-  display: none;
-}

browser/themes/osx/jar.mn

@@ -248,9 +248,9 @@ browser.jar:
   skin/classic/browser/tabview/stack-expander.png           (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png                  (tabview/tabview.png)
   skin/classic/browser/tabview/tabview.css                  (tabview/tabview.css)
-* skin/classic/browser/devtools/common.css                  (devtools/common.css)
-  skin/classic/browser/devtools/dark-theme.css              (../shared/devtools/dark-theme.css)
-  skin/classic/browser/devtools/light-theme.css             (../shared/devtools/light-theme.css)
+* skin/classic/browser/devtools/common.css                  (../shared/devtools/common.css)
+* skin/classic/browser/devtools/dark-theme.css              (../shared/devtools/dark-theme.css)
+* skin/classic/browser/devtools/light-theme.css             (../shared/devtools/light-theme.css)
   skin/classic/browser/devtools/controls.png                (../shared/devtools/controls.png)
 * skin/classic/browser/devtools/widgets.css                 (devtools/widgets.css)
   skin/classic/browser/devtools/commandline-icon.png        (devtools/commandline-icon.png)
@@ -331,7 +331,6 @@ browser.jar:
   skin/classic/browser/devtools/dock-side.png               (devtools/dock-side.png)
 * skin/classic/browser/devtools/inspector.css               (devtools/inspector.css)
   skin/classic/browser/devtools/profiler-stopwatch.png      (devtools/profiler-stopwatch.png)
-  skin/classic/browser/devtools/toolbox.css                 (devtools/toolbox.css)
   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)

browser/themes/shared/UITour.inc.css

@@ -7,9 +7,10 @@
 /* UI Tour */
 
 html|div#UITourHighlight {
-  border-radius: 20px;
-  border: 2px #5B9CD9 solid;
-  box-shadow: 0 0 2px #5B9CD9, inset 0 0 1px #5B9CD9;
+  background-image: radial-gradient(50% 100%, rgba(0,149,220,0.4) 50%, rgba(0,149,220,0.6) 100%);
+  border-radius: 40px;
+  border: 1px solid white;
+  box-shadow: 0 0 3px 0 rgba(0,0,0,0.5);
   min-height: 32px;
   min-width: 32px;
 }

browser/themes/shared/devtools/common.css

@@ -4,6 +4,50 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
 
+:root {
+  font: message-box;
+}
+
+.devtools-monospace {
+%ifdef XP_MACOSX
+  font-family: Menlo, monospace;
+%endif
+%ifdef XP_LINUX
+  font-family: monospace;
+  font-size: 80%;
+%endif
+%ifdef XP_WIN
+  font-family: Consolas, monospace;
+%endif
+}
+
+/* Splitters */
+.devtools-horizontal-splitter {
+  -moz-appearance: none;
+  border-top: 1px solid black;
+  border-bottom-width: 0;
+  min-height: 3px;
+  height: 3px;
+  margin-bottom: -3px;
+  position: relative;
+}
+
+.devtools-side-splitter {
+  -moz-appearance: none;
+  border: 0;
+  -moz-border-start: 1px solid black;
+  min-width: 0;
+  width: 3px;
+  background-color: transparent;
+  -moz-margin-end: -3px;
+  position: relative;
+  cursor: e-resize;
+}
+
+.devtools-toolbox-side-iframe {
+  min-width: 465px;
+}
+
 /* Autocomplete Popup */
 /* Dark and light theme */
 

browser/themes/shared/devtools/dark-theme.css

@@ -47,8 +47,7 @@
   background: #26394D;
 }
 
-.theme-bg-darker,
-.cm-s-mozilla .CodeMirror-gutters {
+.theme-bg-darker {
   background-color: rgba(0,0,0,0.5);
 }
 
@@ -220,6 +219,7 @@ div.CodeMirror span.eval-text {
 
 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
   border-right-color: #343c45;
+  background-color: #181d20;
 }
 
 .cm-s-markup-view pre {
@@ -279,3 +279,5 @@ div.CodeMirror span.eval-text {
 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
   border-bottom: 0;
 }
+
+%include toolbars.inc.css

browser/themes/shared/devtools/light-theme.css

@@ -47,8 +47,7 @@
   background-color: #CCC;
 }
 
-.theme-bg-darker,
-.cm-s-mozilla .CodeMirror-gutters {
+.theme-bg-darker {
   background: #EFEFEF;
 }
 
@@ -219,6 +218,7 @@ div.CodeMirror span.eval-text {
 
 .cm-s-mozilla .CodeMirror-gutters { /* vertical line next to line numbers */
   border-right-color: #a6a6a6;
+  background-color: #f7f7f7;
 }
 
 .cm-s-markup-view pre {
@@ -278,3 +278,5 @@ div.CodeMirror span.eval-text {
 .theme-tooltip-panel .devtools-tooltip-simple-text:last-child {
   border-bottom: 0;
 }
+
+%include toolbars.inc.css

browser/themes/shared/devtools/toolbars.inc.css

@@ -1,20 +1,11 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
+%if 0
 /* 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/. */
-
-/* Font for code */
-
-:root {
-  font: message-box;
-}
-
-.devtools-monospace {
-  font-family: monospace;
-  font-size: 80%;
-}
-
-/* Toolbar and Toolbar items */
+%endif
+%filter substitution
+%define smallSeparator linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%)
+%define solidSeparator linear-gradient(#2d5b7d, #2d5b7d)
 
 .devtools-toolbar {
   -moz-appearance: none;
@@ -71,7 +62,7 @@
 }
 
 .devtools-toolbarbutton[checked=true] {
-  color: hsl(208,100%,60%) !important;
+  color: hsl(208,100%,60%);
 }
 
 .devtools-toolbarbutton[checked=true]:hover {
@@ -139,7 +130,7 @@
   margin: 0 3px;
   min-height: 22px;
   border: 1px solid hsla(210,8%,5%,.6);
-  border-radius: 2px;
+  border-radius: 20px;
   background-color: transparent;
   background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
   padding: 3px;
@@ -209,36 +200,8 @@
   opacity: 1;
 }
 
-/* Splitters */
-
-.devtools-horizontal-splitter {
-  -moz-appearance: none;
-  border-top: 1px solid black;
-  border-bottom-width: 0;
-  min-height: 3px;
-  height: 3px;
-  margin-bottom: -3px;
-  position: relative;
-}
-
-.devtools-side-splitter {
-  -moz-appearance: none;
-  border: 0;
-  -moz-border-start: 1px solid black;
-  min-width: 0;
-  width: 3px;
-  background-color: transparent;
-  -moz-margin-end: -3px;
-  position: relative;
-  cursor: e-resize;
-}
-
 /* In-tools sidebar */
 
-.devtools-toolbox-side-iframe {
-  min-width: 465px;
-}
-
 .devtools-sidebar-tabs {
   -moz-appearance: none;
   margin: 0;
@@ -253,6 +216,7 @@
 .devtools-sidebar-tabs > tabs {
   -moz-appearance: none;
   position: static;
+  font: inherit;
   color: #b6babf;
   margin-bottom: 0;
   padding: 0;
@@ -287,8 +251,6 @@
   color: inherit;
   -moz-box-flex: 1;
   border-width: 0;
-  background: transparent;
-  border-radius: 0;
   position: static;
   -moz-margin-start: -1px;
 }
@@ -307,11 +269,8 @@
   background-position: calc(100% - 1px), 100%;
 }
 
-%filter substitution
-%define smallSeparator linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%)
-%define solidSeparator linear-gradient(#2d5b7d, #2d5b7d)
-
 .devtools-sidebar-tabs > tabs > tab {
+  background-color: transparent;
   background-image: linear-gradient(transparent, transparent), @smallSeparator@;
 }
 
@@ -348,4 +307,269 @@
   background-image: linear-gradient(#1f3e4f, #1f3e4f), @solidSeparator@;
 }
 
-%include ../../shared/devtools/common.inc.css
+/* Toolbox - moved from toolbox.css.
+ * Rules that apply to the global toolbox like command buttons,
+ * devtools tabs, docking buttons, etc. */
+
+#toolbox-controls {
+  margin: 0 4px;
+}
+
+#toolbox-controls > toolbarbutton,
+#toolbox-dock-buttons > toolbarbutton {
+  -moz-appearance: none;
+  margin: 0 4px;
+  min-width: 16px;
+  width: 16px;
+}
+
+#toolbox-controls > toolbarbutton > .toolbarbutton-text,
+#toolbox-dock-buttons > toolbarbutton > .toolbarbutton-text,
+.command-button > .toolbarbutton-text {
+  display: none;
+}
+
+#toolbox-dock-bottom {
+  list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
+}
+
+#toolbox-dock-side {
+  list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
+}
+
+#toolbox-dock-window {
+  list-style-image: url("chrome://browser/skin/devtools/undock.png");
+}
+
+#toolbox-dock-window,
+#toolbox-dock-bottom,
+#toolbox-dock-side {
+  opacity: 0.6;
+}
+
+#toolbox-dock-window:hover,
+#toolbox-dock-bottom:hover,
+#toolbox-dock-side: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, .command-button[checked=true]:not(:hover) {
+  background-color: hsla(206,37%,4%,.4);
+}
+
+#command-button-paintflashing {
+  list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+#command-button-paintflashing:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+#command-button-paintflashing:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+#command-button-paintflashing[checked=true] {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+
+#command-button-responsive {
+  list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+#command-button-responsive:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+#command-button-responsive:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+#command-button-responsive[checked=true] {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+
+#command-button-tilt {
+  list-style-image: url("chrome://browser/skin/devtools/command-tilt.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+#command-button-tilt:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+#command-button-tilt:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
+#command-button-tilt[checked=true] {
+  -moz-image-region: rect(0px, 64px, 16px, 48px);
+}
+
+#command-button-scratchpad {
+  list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
+  -moz-image-region: rect(0px, 16px, 16px, 0px);
+}
+
+#command-button-scratchpad:hover {
+  -moz-image-region: rect(0px, 32px, 16px, 16px);
+}
+
+#command-button-scratchpad:hover:active {
+  -moz-image-region: rect(0px, 48px, 16px, 32px);
+}
+
+/* Tabs */
+
+.devtools-tabbar {
+  -moz-appearance: none;
+  background-image: url("background-noise-toolbar.png"),
+                    linear-gradient(#303840, #2d3640);
+  border-color: #060a0d;
+  border-style: solid;
+  border-width: 1px 0;
+  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-binding: url("chrome://global/content/bindings/general.xml#control-item");
+  -moz-box-align: center;
+}
+
+.devtools-tab {
+  -moz-appearance: none;
+  min-width: 32px;
+  min-height: 32px;
+  max-width: 127px;
+  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);
+  -moz-box-align: center;
+}
+
+.devtools-tab > image {
+  border: none;
+  -moz-margin-end: 0;
+  -moz-margin-start: 4px;
+  opacity: 0.6;
+  max-height: 16px;
+  width: 16px; /* Prevents collapse during theme switching */
+}
+
+#toolbox-tab-options > image {
+  margin: 0 8px;
+}
+
+.devtools-tab > label {
+  white-space: nowrap;
+}
+
+.devtools-tab:hover > image {
+  opacity: 0.8;
+}
+
+.devtools-tab:active > image,
+.devtools-tab[selected=true] > label {
+  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(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)),
+                    radial-gradient(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;
+}
+
+.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;
+}
+
+.hidden-labels-box:not(.visible) > label,
+.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
+  display: none;
+}

browser/themes/shared/menupanel.inc.css

@@ -30,11 +30,6 @@ toolbarpaletteitem[place="palette"] > #downloads-button {
   -moz-image-region: rect(0px, 256px, 32px, 224px);
 }
 
-#switch-to-metro-button[cui-areatype="menu-panel"],
-toolbarpaletteitem[place="palette"] > #switch-to-metro-button {
-  -moz-image-region: rect(0px, 800px, 32px, 768px);
-}
-
 #add-ons-button[cui-areatype="menu-panel"],
 toolbarpaletteitem[place="palette"] > #add-ons-button {
   -moz-image-region: rect(0px, 288px, 32px, 256px);

browser/themes/shared/toolbarbuttons.inc.css

@@ -16,11 +16,6 @@
   -moz-image-region: rect(0, 72px, 18px, 54px);
 }
 
-#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
-#forward-button:-moz-locale-dir(rtl) {
-  transform: scaleX(-1);
-}
-
 #home-button[cui-areatype="toolbar"] {
   -moz-image-region: rect(0, 126px, 18px, 108px);
 }
@@ -49,10 +44,6 @@
   -moz-image-region: rect(0, 216px, 18px, 198px);
 }
 
-#switch-to-metro-button[cui-areatype="toolbar"] {
-  -moz-image-region: rect(0, 648px, 18px, 630px);
-}
-
 #open-file-button[cui-areatype="toolbar"] {
   -moz-image-region: rect(0, 234px, 18px, 216px);
 }

browser/themes/windows/browser.css

@@ -688,6 +688,11 @@ menuitem.bookmark-item {
   transition: none;
 }
 
+#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
+#forward-button:-moz-locale-dir(rtl) {
+  transform: scaleX(-1);
+}
+
 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
   list-style-image: url("chrome://browser/skin/menu-back.png") !important;
@@ -2220,6 +2225,19 @@ toolbarbutton.bookmark-item[dragover="true"][open="true"] {
   display: none;
 }
 
+#switch-to-metro-button[cui-areatype="toolbar"] {
+  list-style-image: url(chrome://browser/skin/Metro_Glyph.png);
+}
+
+#switch-to-metro-button[cui-areatype="toolbar"]:-moz-lwtheme-brighttext {
+  list-style-image: url(chrome://browser/skin/Metro_Glyph-inverted.png);
+}
+
+#switch-to-metro-button[cui-areatype="menu-panel"],
+toolbarpaletteitem[place="palette"] > #switch-to-metro-button {
+  list-style-image: url(chrome://browser/skin/Metro_Glyph-menuPanel.png);
+}
+
 .toolbarbutton-badge-container {
   margin: 0;
   padding: 0;

browser/themes/windows/devtools/common.css

@@ -1,364 +0,0 @@
-/* vim:set ts=2 sw=2 sts=2 et: */
-/* 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/. */
-
-/* Font for code */
-
-:root {
-  font: message-box;
-}
-
-.devtools-monospace {
-  font-family: Consolas, monospace;
-}
-
-/* Toolbar and Toolbar items */
-
-.devtools-toolbar {
-  -moz-appearance: none;
-  padding: 4px 3px;
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-}
-
-.devtools-menulist,
-.devtools-toolbarbutton {
-  -moz-appearance: none;
-  -moz-box-align: center;
-  min-width: 78px;
-  min-height: 22px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border: 1px solid hsla(211,68%,6%,.5);
-  border-radius: 3px;
-  background: linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)) padding-box;
-  box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
-  margin: 0;
-  -moz-margin-end: 3px;
-  color: inherit;
-}
-
-.devtools-toolbarbutton > .toolbarbutton-menubutton-button {
-  -moz-box-orient: horizontal;
-}
-
-.devtools-menulist:-moz-focusring,
-.devtools-toolbarbutton:-moz-focusring {
-  outline: 1px dotted hsla(210,30%,85%,0.7);
-  outline-offset: -4px;
-}
-
-.devtools-toolbarbutton > .toolbarbutton-icon {
-  margin: 0;
-}
-
-.devtools-toolbarbutton:not([label]) {
-  min-width: 32px;
-}
-
-.devtools-toolbarbutton:not([label]) > .toolbarbutton-text {
-  display: none;
-}
-
-.devtools-toolbarbutton:not([checked=true]):hover:active {
-  background-color: hsla(210,18%,9%,.1);
-  background-image: linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2));
-  box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
-}
-
-.devtools-menulist[open=true],
-.devtools-toolbarbutton[open=true],
-.devtools-toolbarbutton[checked=true] {
-  border-color: hsla(211,68%,6%,.6);
-  background: linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2));
-  box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
-}
-
-.devtools-toolbarbutton[checked=true] {
-  color: hsl(200,100%,60%) !important;
-}
-
-.devtools-toolbarbutton[checked=true]:hover:active {
-  background-color: hsla(211,68%,6%,.2);
-}
-
-.devtools-option-toolbarbutton {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/devtools/option-icon.png");
-  -moz-image-region: rect(0px 16px 16px 0px);
-  background: none;
-  border: none;
-}
-
-.devtools-option-toolbarbutton[open=true] {
-  -moz-image-region: rect(0px 32px 16px 16px);
-}
-
-.devtools-menulist > .menulist-label-box {
-  text-align: center;
-}
-
-.devtools-menulist > .menulist-dropmarker {
-  -moz-appearance: none;
-  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
-  border-width: 0;
-  background-color: transparent;
-}
-
-.devtools-menulist:focus:not([open="true"]):not(.menulist-compact) > .menulist-label-box {
-  color: hsl(210,30%,85%) !important;
-  background-color: transparent;
-}
-
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
-  -moz-appearance: none;
-  color: inherit;
-  border-width: 0;
-  -moz-border-end: 1px solid hsla(210,8%,5%,.45);
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);
-}
-
-.devtools-toolbarbutton[type=menu-button] {
-  padding: 0 1px;
-  -moz-box-align: stretch;
-}
-
-.devtools-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
-.devtools-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
-  -moz-appearance: none !important;
-  list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
-  -moz-box-align: center;
-}
-
-/* Text input */
-
-.devtools-textinput,
-.devtools-searchinput {
-  -moz-appearance: none;
-  margin: 0 3px;
-  min-height: 22px;
-  border: 1px solid hsla(211,68%,6%,.6);
-  box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05), 0 0 0 1px hsla(210,40%,83%,.1);
-  border-radius: 2px;
-  background-color: transparent;
-  background-image: linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
-  padding: 3px;
-  transition-property: background-color, border-color, box-shadow;
-  transition-duration: 150ms;
-  transition-timing-function: ease;
-  color: inherit;
-}
-
-.devtools-searchinput {
-  background-image: url(magnifying-glass.png), linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
-  background-repeat: no-repeat;
-  background-position: 4px center, top left, top left;
-  padding-top: 0;
-  padding-bottom: 0;
-  -moz-padding-start: 18px;
-  -moz-padding-end: 12px;
-  font-size: inherit;
-}
-
-.devtools-searchinput[focused] {
-  border-color: hsl(200,70%,40%) hsl(200,75%,37%) hsl(200,80%,35%);
-  background-origin: padding-box;
-  background-clip: padding-box;
-  box-shadow: inset 0 0 0 1px hsla(211,68%,6%,.1);
-}
-
-.devtools-searchinput:-moz-locale-dir(rtl) {
-  background-position: calc(100% - 4px) center, top left, top left;
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
-  display: none;
-}
-
-.devtools-searchinput > .textbox-input-box > .textbox-input::-moz-placeholder {
-  opacity: 1.0;
-  color: hsl(208,10%,66%);
-}
-
-.devtools-no-search-result {
-  box-shadow: inset 0 0 0 1px hsla(0,68%,6%,.35);
-  border-color: hsl(10,70%,40%) hsl(10,75%,37%) hsl(10,80%,35%) !important;
-  background-image: url(magnifying-glass.png), linear-gradient(hsla(1,16%,76%,.45), hsla(1,16%,76%,.75));
-}
-
-/* Close button */
-
-.devtools-closebutton {
-  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-text {
-  display: none;
-}
-
-.devtools-closebutton:hover {
-  opacity: 0.8;
-}
-
-.devtools-closebutton:hover:active {
-  opacity: 1;
-}
-
-/* Splitters */
-
-.devtools-horizontal-splitter {
-  -moz-appearance: none;
-  border-width: 1px 0 0 0;
-  -moz-border-top-colors: black;
-  background-color: transparent;
-  min-height: 3px;
-  height: 3px;
-  margin-bottom: -3px;
-  position: relative;
-}
-
-.devtools-side-splitter {
-  border: 0;
-  -moz-border-start: 1px solid #242b33;
-  min-width: 0;
-  width: 3px;
-  background-color: transparent;
-  -moz-margin-end: -3px;
-  position: relative;
-  cursor: e-resize;
-}
-
-/* In-tools sidebar */
-
-.devtools-toolbox-side-iframe {
-  min-width: 465px;
-}
-
-.devtools-sidebar-tabs {
-  -moz-appearance: none;
-  margin: 0;
-}
-
-.devtools-sidebar-tabs > tabpanels {
-  -moz-appearance: none;
-  padding: 0;
-  border: 0;
-}
-
-.devtools-sidebar-tabs > tabs {
-  -moz-appearance: none;
-  position: static;
-  color: #b6babf;
-  margin-bottom: 0;
-  padding: 0;
-  background-color: #343c45;
-  border-width: 0 0 1px 0;
-  border-color: hsla(210,8%,5%,.6);
-  border-style: solid;
-  overflow: hidden;
-}
-
-.devtools-sidebar-tabs > tabs > .tabs-right,
-.devtools-sidebar-tabs > tabs > .tabs-left {
-  display: none;
-}
-
-.devtools-sidebar-tabs > tabs > tab {
-  -moz-appearance: none;
-  /* We want to match the height of a toolbar with a toolbarbutton
-   * First, we need to replicated the padding of toolbar (4px),
-   * then we need to take the border of the buttons into account (1px).
-   */
-  padding: 5px 3px;
-  -moz-padding-start: 6px;
-  margin: 0;
-  min-width: 78px;
-  /* toolbar's min-height is button min-height (25px) + padding (2 * 4px): 33px.
-   * -1px because the parent element (<tabs>) comes with a 1px bottom border.
-   */
-  min-height: 32px;
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  text-align: center;
-  color: inherit;
-  -moz-box-flex: 1;
-  border-width: 0;
-  background: transparent;
-  border-radius: 0;
-  position: static;
-  -moz-margin-start: -1px;
-}
-
-.devtools-sidebar-tabs > tabs > tab:-moz-focusring {
-  position: static;
-}
-
-.devtools-sidebar-tabs > tabs > tab:last-of-type {
-  -moz-border-end-width: 0;
-}
-
-.devtools-sidebar-tabs > tabs > tab:first-of-type {
-  -moz-margin-start: -3px;
-}
-
-.devtools-sidebar-tabs > tabs > tab {
-  background-size: calc(100% - 2px) 100%, 1px 100%;
-  background-repeat: no-repeat;
-  background-position: 1px, 0;
-}
-
-.devtools-sidebar-tabs:-moz-locale-dir(rtl) > tabs > tab {
-  background-position: calc(100% - 1px), 100%;
-}
-
-%filter substitution
-%define smallSeparator linear-gradient(transparent 15%, #5a6169 15%, #5a6169 85%, transparent 85%)
-%define solidSeparator linear-gradient(#2d5b7d, #2d5b7d)
-
-.devtools-sidebar-tabs > tabs > tab {
-  background-image: linear-gradient(transparent, transparent), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab:hover {
-  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab:hover:active {
-  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @smallSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab {
-  background-image: linear-gradient(transparent, transparent), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover {
-  background-image: linear-gradient(hsla(206,37%,4%,.2), hsla(206,37%,4%,.2)), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] + tab:hover:active {
-  background-image: linear-gradient(hsla(206,37%,4%,.4), hsla(206,37%,4%,.4)), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true] {
-  color: #f5f7fa;
-  background-image: linear-gradient(#1d4f73, #1d4f73), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true]:hover {
-  background-image: linear-gradient(#274f64, #274f64), @solidSeparator@;
-}
-
-.devtools-sidebar-tabs > tabs > tab[selected=true]:hover:active {
-  background-image: linear-gradient(#1f3e4f, #1f3e4f), @solidSeparator@;
-}
-
-%include ../../shared/devtools/common.inc.css

browser/themes/windows/devtools/debugger.css

@@ -389,14 +389,25 @@
 }
 
 #resume {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
+  list-style-image: url("chrome://browser/skin/devtools/debugger-pause.png");
   -moz-image-region: rect(0px,16px,16px,0px);
+  transition: background 0.15s ease-in-out;
 }
 
 #resume[checked] {
+  background: none;
+  list-style-image: url("chrome://browser/skin/devtools/debugger-play.png");
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
+#resume ~ toolbarbutton {
+  transition: opacity 0.15s ease-in-out;
+}
+
+#resume:not([checked]) ~ toolbarbutton {
+  opacity: 0.5;
+}
+
 #step-over {
   list-style-image: url("chrome://browser/skin/devtools/debugger-step-over.png");
 }

browser/themes/windows/devtools/toolbox.css

@@ -1,283 +0,0 @@
-/* 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/. */
-
-#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 {
-  list-style-image: url("chrome://browser/skin/devtools/dock-bottom.png");
-}
-
-#toolbox-dock-side {
-  list-style-image: url("chrome://browser/skin/devtools/dock-side.png");
-}
-
-#toolbox-dock-window {
-  list-style-image: url("chrome://browser/skin/devtools/undock.png");
-}
-
-#toolbox-dock-window,
-#toolbox-dock-bottom,
-#toolbox-dock-side {
-  opacity: 0.6;
-}
-
-#toolbox-dock-window:hover,
-#toolbox-dock-bottom:hover,
-#toolbox-dock-side: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, .command-button[checked=true]:not(:hover) {
-  background-color: hsla(206,37%,4%,.4);
-}
-
-#command-button-paintflashing {
-  list-style-image: url("chrome://browser/skin/devtools/command-paintflashing.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-paintflashing:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-#command-button-paintflashing:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-#command-button-paintflashing[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-responsive {
-  list-style-image: url("chrome://browser/skin/devtools/command-responsivemode.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-responsive:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-#command-button-responsive:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-#command-button-responsive[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-tilt {
-  list-style-image: url("chrome://browser/skin/devtools/command-tilt.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-#command-button-tilt:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-#command-button-tilt:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-
-#command-button-tilt[checked=true] {
-  -moz-image-region: rect(0px, 64px, 16px, 48px);
-}
-
-#command-button-scratchpad {
-  list-style-image: url("chrome://browser/skin/devtools/command-scratchpad.png");
-  -moz-image-region: rect(0px, 16px, 16px, 0px);
-}
-
-#command-button-scratchpad:hover {
-  -moz-image-region: rect(0px, 32px, 16px, 16px);
-}
-
-#command-button-scratchpad:hover:active {
-  -moz-image-region: rect(0px, 48px, 16px, 32px);
-}
-
-/* Tabs */
-
-.devtools-tabbar {
-  -moz-appearance: none;
-  background-image: url("background-noise-toolbar.png"),
-                    linear-gradient(#303840, #2d3640);
-  border-bottom: 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: 32px;
-  min-height: 32px;
-  max-width: 110px;
-  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 > image {
-  -moz-margin-end: 0;
-  -moz-margin-start: 4px;
-  opacity: 0.6;
-  width: 16px; /* Prevents collapse during theme switching */
-}
-
-#toolbox-tab-options > image {
-  margin: 0 8px;
-}
-
-.devtools-tab:hover > image {
-  opacity: 0.8;
-}
-
-.devtools-tab:active > image,
-.devtools-tab[selected=true] > image {
-  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(farthest-corner at center top, #9fdfff, hsla(200,100%,70%,.3)),
-                    radial-gradient(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;
-}
-
-.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-vertical-pane {
-  margin: 5px;
-  width: calc(50% - 30px);
-  min-width: 400px;
-  -moz-padding-start: 5px;
-}
-
-.options-vertical-pane > label {
-  padding: 2px 0;
-  font-size: 1.4rem;
-}
-
-.options-groupbox {
-  -moz-margin-start: 15px;
-  padding: 2px;
-}
-
-.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 */
-}
-
-.options-citation-label + label {
-  padding: 3px 0 0 !important; /* To align it with the checkbox */
-  font-style: italic;
-}
-
-.hidden-labels-box:not(.visible) > label,
-.hidden-labels-box.visible ~ .hidden-labels-box > label:last-child {
-  display: none;
-}

browser/themes/windows/jar.mn

@@ -50,6 +50,9 @@ browser.jar:
         skin/classic/browser/menuPanel-exit.png
         skin/classic/browser/menuPanel-help.png
         skin/classic/browser/menuPanel-small.png
+        skin/classic/browser/Metro_Glyph.png                        (Metro_Glyph-aero.png)
+        skin/classic/browser/Metro_Glyph-inverted.png
+        skin/classic/browser/Metro_Glyph-menuPanel.png
         skin/classic/browser/mixed-content-blocked-16.png
         skin/classic/browser/mixed-content-blocked-64.png
         skin/classic/browser/monitor.png
@@ -170,9 +173,9 @@ browser.jar:
         skin/classic/browser/tabview/tabview.png                    (tabview/tabview.png)
         skin/classic/browser/tabview/tabview-inverted.png           (tabview/tabview-inverted.png)
         skin/classic/browser/tabview/tabview.css                    (tabview/tabview.css)
-*       skin/classic/browser/devtools/common.css                    (devtools/common.css)
-        skin/classic/browser/devtools/dark-theme.css                (../shared/devtools/dark-theme.css)
-        skin/classic/browser/devtools/light-theme.css               (../shared/devtools/light-theme.css)
+*       skin/classic/browser/devtools/common.css                    (../shared/devtools/common.css)
+*       skin/classic/browser/devtools/dark-theme.css                (../shared/devtools/dark-theme.css)
+*       skin/classic/browser/devtools/light-theme.css               (../shared/devtools/light-theme.css)
         skin/classic/browser/devtools/controls.png                  (../shared/devtools/controls.png)
 *       skin/classic/browser/devtools/widgets.css                   (devtools/widgets.css)
         skin/classic/browser/devtools/commandline-icon.png          (devtools/commandline-icon.png)
@@ -253,7 +256,6 @@ browser.jar:
         skin/classic/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
         skin/classic/browser/devtools/inspector.css                 (devtools/inspector.css)
         skin/classic/browser/devtools/profiler-stopwatch.png        (devtools/profiler-stopwatch.png)
-        skin/classic/browser/devtools/toolbox.css                   (devtools/toolbox.css)
         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)
@@ -354,6 +356,9 @@ browser.jar:
         skin/classic/aero/browser/menuPanel-exit.png
         skin/classic/aero/browser/menuPanel-help.png
         skin/classic/aero/browser/menuPanel-small.png                (menuPanel-small-aero.png)
+        skin/classic/aero/browser/Metro_Glyph.png                    (Metro_Glyph-aero.png)
+        skin/classic/aero/browser/Metro_Glyph-inverted.png
+        skin/classic/aero/browser/Metro_Glyph-menuPanel.png
         skin/classic/aero/browser/mixed-content-blocked-16.png
         skin/classic/aero/browser/mixed-content-blocked-64.png
         skin/classic/aero/browser/monitor.png
@@ -472,9 +477,9 @@ browser.jar:
         skin/classic/aero/browser/tabview/tabview.png                (tabview/tabview.png)
         skin/classic/aero/browser/tabview/tabview-inverted.png       (tabview/tabview-inverted.png)
         skin/classic/aero/browser/tabview/tabview.css                (tabview/tabview.css)
-*       skin/classic/aero/browser/devtools/common.css                (devtools/common.css)
-        skin/classic/aero/browser/devtools/dark-theme.css            (../shared/devtools/dark-theme.css)
-        skin/classic/aero/browser/devtools/light-theme.css           (../shared/devtools/light-theme.css)
+*       skin/classic/aero/browser/devtools/common.css                (../shared/devtools/common.css)
+*       skin/classic/aero/browser/devtools/dark-theme.css            (../shared/devtools/dark-theme.css)
+*       skin/classic/aero/browser/devtools/light-theme.css           (../shared/devtools/light-theme.css)
         skin/classic/aero/browser/devtools/controls.png              (../shared/devtools/controls.png)
 *       skin/classic/aero/browser/devtools/widgets.css               (devtools/widgets.css)
         skin/classic/aero/browser/devtools/commandline-icon.png      (devtools/commandline-icon.png)
@@ -555,7 +560,6 @@ browser.jar:
         skin/classic/aero/browser/devtools/floating-scrollbars-light.css (devtools/floating-scrollbars-light.css)
         skin/classic/aero/browser/devtools/inspector.css             (devtools/inspector.css)
         skin/classic/aero/browser/devtools/profiler-stopwatch.png    (devtools/profiler-stopwatch.png)
-        skin/classic/aero/browser/devtools/toolbox.css               (devtools/toolbox.css)
         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)

build/mobile/robocop/Makefile.in

@@ -31,7 +31,10 @@ _JAVA_HARNESS := \
   $(NULL)
 
 java-harness := $(addprefix $(srcdir)/,$(_JAVA_HARNESS))
-java-tests   := $(wildcard $(TESTPATH)/*.java)
+java-tests   := \
+  $(wildcard $(TESTPATH)/*.java) \
+  $(wildcard $(TESTPATH)/components/*.java) \
+  $(wildcard $(TESTPATH)/helpers/*.java)
 
 # pre-process TestConstants.java.in
 PP_TARGETS         += testconstants

content/base/src/nsDocument.cpp

@@ -8511,11 +8511,17 @@ FireOrClearDelayedEvents(nsTArray<nsCOMPtr<nsIDocument> >& aDocuments,
     return;
 
   for (uint32_t i = 0; i < aDocuments.Length(); ++i) {
+    // NB: Don't bother trying to fire delayed events on documents that were
+    // closed before this event ran.
     if (!aDocuments[i]->EventHandlingSuppressed()) {
       fm->FireDelayedEvents(aDocuments[i]);
       nsCOMPtr<nsIPresShell> shell = aDocuments[i]->GetShell();
       if (shell) {
-        shell->FireOrClearDelayedEvents(aFireEvents);
+        // Only fire events for active documents.
+        bool fire = aFireEvents &&
+                    aDocuments[i]->GetInnerWindow() &&
+                    aDocuments[i]->GetInnerWindow()->IsCurrentInnerWindow();
+        shell->FireOrClearDelayedEvents(fire);
       }
     }
   }

content/base/src/nsXMLHttpRequest.cpp

@@ -383,7 +383,7 @@ nsXMLHttpRequest::InitParameters(bool aAnon, bool aSystem)
 
   // Chrome is always allowed access, so do the permission check only
   // for non-chrome pages.
-  if (!IsSystemXHR()) {
+  if (!IsSystemXHR() && aSystem) {
     nsCOMPtr<nsIDocument> doc = window->GetExtantDoc();
     if (!doc) {
       return;

content/base/src/nsXMLHttpRequest.h

@@ -236,7 +236,7 @@ public:
 
   void SetParameters(bool aAnon, bool aSystem)
   {
-    mIsAnon = aAnon;
+    mIsAnon = aAnon || aSystem;
     mIsSystem = aSystem;
   }
 

content/base/test/file_restrictedEventSource.sjs

@@ -5,9 +5,7 @@ function handleRequest(request, response)
        request.getHeader("Authorization") == "Basic dXNlciAxOnBhc3N3b3JkIDE=") ||
       (request.queryString == "test=user1_evtsrc" &&
        request.hasHeader("Authorization") &&
-       request.getHeader("Authorization") == "Basic dXNlciAxOnBhc3N3b3JkIDE=" &&
-       request.hasHeader("Cookie") &&
-       request.getHeader("Cookie") == "test=5c")) {
+       request.getHeader("Authorization") == "Basic dXNlciAxOnBhc3N3b3JkIDE=")) {
     response.setStatusLine(null, 200, "OK");
     response.setHeader("Content-Type", "text/event-stream", false);
     response.setHeader("Access-Control-Allow-Origin", "http://mochi.test:8888", false);

content/base/test/mochitest.ini

@@ -521,6 +521,7 @@ support-files =
 [test_bug895974.html]
 [test_bug902847.html]
 [test_bug907892.html]
+[test_bug927196.html]
 [test_caretPositionFromPoint.html]
 [test_classList.html]
 [test_copypaste.html]

content/base/test/test_XHR_parameters.html

@@ -53,12 +53,11 @@ function runTests() {
     }
     ok(xhr instanceof XMLHttpRequest, "passed " + JSON.stringify(value));
 
-    // If the page doesnt have privileges to create a system or anon XHR,
-    // these flags will always be false no matter what is passed.
-    let expectedAnon = false;
+    // If the page doesnt have privileges to create a system XHR,
+    // this flag will always be false no matter what is passed.
+    let expectedAnon = Boolean(value && value.mozAnon);
     let expectedSystem = false;
     if (havePrivileges) {
-      expectedAnon = Boolean(value && value.mozAnon);
       expectedSystem = Boolean(value && value.mozSystem);
     }
     is(xhr.mozAnon, expectedAnon, "testing mozAnon");
@@ -84,13 +83,12 @@ function runTests() {
 
   // ...and once with privileges.
   havePrivileges = true;
-  SpecialPowers.addPermission("systemXHR", true, document);
+  SpecialPowers.pushPermissions([{'type': 'systemXHR', 'allow': true, 'context': document}], function() {
+    validParameters.forEach(testValidParameter);
+    invalidParameters.forEach(testInvalidParameter);
 
-  validParameters.forEach(testValidParameter);
-  invalidParameters.forEach(testInvalidParameter);
-  SpecialPowers.removePermission("systemXHR", document);
-
-  SimpleTest.finish();
+    SimpleTest.finish();
+  });
 }
 
 </script>

content/base/test/test_bug338583.html

@@ -464,8 +464,8 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=338583
 
   function doTest5_c(test_id)
   {
-    // credentials using the auth cache and cookies
-    var xhr = new XMLHttpRequest({mozAnon: false, mozSystem: true});
+    // credentials using the auth cache
+    var xhr = new XMLHttpRequest({mozAnon: true, mozSystem: true});
     xhr.withCredentials = true;
     // also, test mixed mode UI
     xhr.open("GET", "https://example.com/tests/content/base/test/file_restrictedEventSource.sjs?test=user1_xhr", true, "user 1", "password 1");
@@ -494,7 +494,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=338583
 
   function doTest5_d(test_id)
   {
-    var xhr = new XMLHttpRequest({mozAnon: false, mozSystem: true});
+    var xhr = new XMLHttpRequest({mozAnon: true, mozSystem: true});
     xhr.withCredentials = true;
     xhr.open("GET", "https://example.com/tests/content/base/test/file_restrictedEventSource.sjs?test=user2_xhr", true, "user 2", "password 2");
     xhr.send();
@@ -521,8 +521,8 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=338583
 
   function doTest5_e(test_id)
   {
-    // credentials using the auth cache and cookies
-    var xhr = new XMLHttpRequest({mozAnon: false, mozSystem: true});
+    // credentials using the auth cache
+    var xhr = new XMLHttpRequest({mozAnon: true, mozSystem: true});
     xhr.withCredentials = true;
     xhr.open("GET", "http://example.org/tests/content/base/test/file_restrictedEventSource.sjs?test=user1_xhr", true, "user 1", "password 1");
     xhr.send();
@@ -550,7 +550,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=338583
 
   function doTest5_f(test_id)
   {
-    var xhr = new XMLHttpRequest({mozAnon: false, mozSystem: true});
+    var xhr = new XMLHttpRequest({mozAnon: true, mozSystem: true});
     xhr.withCredentials = true;
     xhr.open("GET", "http://example.org/tests/content/base/test/file_restrictedEventSource.sjs?test=user2_xhr", true, "user 2", "password 2");
     xhr.send();

content/base/test/test_bug426308.html

@@ -22,7 +22,7 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=426308
 const SJS_URL = "http://example.org:80/tests/content/base/test/bug426308-redirect.sjs";
 
 function startTest() {
-  var req = new XMLHttpRequest({mozAnon: false, mozSystem: true});
+  var req = new XMLHttpRequest({mozAnon: true, mozSystem: true});
   req.open("GET", SJS_URL + "?" + window.location.href, false);
   req.send(null);