Bug 943883 - DevTools themes - theme sidemenuwidget, r=bgrins, australis
authorVictor Porof <vporof@mozilla.com>
Tue, 07 Jan 2014 11:58:07 +0200
changeset 162555 ad0783cbd9e5e598816a2f610751c8d92bdc28de
parent 162554 77d90521f46fde26582a7bc42fba18ba7349b14e
child 162556 05d481f3c49cd19bf61944c22510eccdf8edeb03
push idunknown
push userunknown
push dateunknown
reviewersbgrins, australis
bugs943883
milestone29.0a1
Bug 943883 - DevTools themes - theme sidemenuwidget, r=bgrins, australis
browser/devtools/debugger/debugger-panes.js
browser/devtools/debugger/debugger-toolbar.js
browser/devtools/debugger/debugger-view.js
browser/devtools/debugger/debugger.xul
browser/devtools/netmonitor/netmonitor-view.js
browser/devtools/netmonitor/netmonitor.css
browser/devtools/profiler/profiler.xul
browser/devtools/shadereditor/shadereditor.js
browser/devtools/shared/widgets/SideMenuWidget.jsm
browser/devtools/shared/widgets/SimpleListWidget.jsm
browser/themes/linux/devtools/debugger.css
browser/themes/linux/devtools/itemArrow-ltr.png
browser/themes/linux/devtools/itemArrow-rtl.png
browser/themes/linux/devtools/netmonitor.css
browser/themes/linux/devtools/shadereditor.css
browser/themes/linux/devtools/widgets.css
browser/themes/linux/jar.mn
browser/themes/osx/devtools/debugger.css
browser/themes/osx/devtools/itemArrow-ltr.png
browser/themes/osx/devtools/itemArrow-rtl.png
browser/themes/osx/devtools/netmonitor.css
browser/themes/osx/devtools/widgets.css
browser/themes/osx/jar.mn
browser/themes/shared/devtools/debugger.inc.css
browser/themes/shared/devtools/images/itemArrow-dark-ltr.png
browser/themes/shared/devtools/images/itemArrow-dark-rtl.png
browser/themes/shared/devtools/images/itemArrow-ltr.png
browser/themes/shared/devtools/images/itemArrow-rtl.png
browser/themes/shared/devtools/netmonitor.inc.css
browser/themes/shared/devtools/profiler.inc.css
browser/themes/shared/devtools/shadereditor.inc.css
browser/themes/shared/devtools/toolbars.inc.css
browser/themes/shared/devtools/widgets.inc.css
browser/themes/windows/devtools/debugger.css
browser/themes/windows/devtools/itemArrow-ltr.png
browser/themes/windows/devtools/itemArrow-rtl.png
browser/themes/windows/devtools/netmonitor.css
browser/themes/windows/devtools/widgets.css
browser/themes/windows/jar.mn
--- a/browser/devtools/debugger/debugger-panes.js
+++ b/browser/devtools/debugger/debugger-panes.js
@@ -125,16 +125,17 @@ SourcesView.prototype = Heritage.extend(
    *        - staged: true to stage the item to be appended later
    */
   addSource: function(aSource, aOptions = {}) {
     let url = aSource.url;
     let label = SourceUtils.getSourceLabel(url.split(" -> ").pop());
     let group = SourceUtils.getSourceGroup(url.split(" -> ").pop());
 
     let contents = document.createElement("label");
+    contents.className = "plain dbg-source-item";
     contents.setAttribute("value", label);
     contents.setAttribute("crop", "start");
     contents.setAttribute("flex", "1");
 
     // Append a source item to this container.
     this.push([contents, url], {
       staged: aOptions.staged, /* stage the item to be appended later? */
       attachment: {
@@ -2256,17 +2257,16 @@ function EventListenersView() {
 EventListenersView.prototype = Heritage.extend(WidgetMethods, {
   /**
    * Initialization function, called when the debugger is started.
    */
   initialize: function() {
     dumpn("Initializing the EventListenersView");
 
     this.widget = new SideMenuWidget(document.getElementById("event-listeners"), {
-      theme: "light",
       showItemCheckboxes: true,
       showGroupCheckboxes: true
     });
 
     this.emptyText = L10N.getStr("noEventListenersText");
     this._eventCheckboxTooltip = L10N.getStr("eventCheckboxTooltip");
     this._onSelectorString = " " + L10N.getStr("eventOnSelector") + " ";
     this._inSourceString = " " + L10N.getStr("eventInSource") + " ";
@@ -3060,17 +3060,17 @@ LineResults.prototype = {
     this._target = aElementNode;
 
     let lineNumberNode = document.createElement("label");
     lineNumberNode.className = "plain dbg-results-line-number";
     lineNumberNode.classList.add("devtools-monospace");
     lineNumberNode.setAttribute("value", this.line + 1);
 
     let lineContentsNode = document.createElement("hbox");
-    lineContentsNode.className = "light list-widget-item dbg-results-line-contents";
+    lineContentsNode.className = "dbg-results-line-contents";
     lineContentsNode.classList.add("devtools-monospace");
     lineContentsNode.setAttribute("flex", "1");
 
     let lineString = "";
     let lineLength = 0;
     let firstMatch = null;
 
     for (let lineChunk of this._store) {
--- a/browser/devtools/debugger/debugger-toolbar.js
+++ b/browser/devtools/debugger/debugger-toolbar.js
@@ -564,19 +564,17 @@ function StackFramesClassicListView() {
 
 StackFramesClassicListView.prototype = Heritage.extend(WidgetMethods, {
   /**
    * Initialization function, called when the debugger is started.
    */
   initialize: function() {
     dumpn("Initializing the StackFramesClassicListView");
 
-    this.widget = new SideMenuWidget(document.getElementById("callstack-list"), {
-      theme: "light"
-    });
+    this.widget = new SideMenuWidget(document.getElementById("callstack-list"));
     this.widget.addEventListener("select", this._onSelect, false);
 
     this.emptyText = L10N.getStr("noStackFramesText");
     this.autoFocusOnFirstItem = false;
     this.autoFocusOnSelection = false;
 
     // This view's contents are also mirrored in a different container.
     this._mirror = DebuggerView.StackFrames;
--- a/browser/devtools/debugger/debugger-view.js
+++ b/browser/devtools/debugger/debugger-view.js
@@ -677,17 +677,17 @@ ResultsPanelContainer.prototype = Herita
   set anchor(aNode) {
     this._anchor = aNode;
 
     // If the anchor node is not null, create a panel to attach to the anchor
     // when showing the popup.
     if (aNode) {
       if (!this._panel) {
         this._panel = document.createElement("panel");
-        this._panel.className = "results-panel";
+        this._panel.id = "results-panel";
         this._panel.setAttribute("level", "top");
         this._panel.setAttribute("noautofocus", "true");
         this._panel.setAttribute("consumeoutsideclicks", "false");
         document.documentElement.appendChild(this._panel);
       }
       if (!this.widget) {
         this.widget = new SimpleListWidget(this._panel);
         this.autoFocusOnFirstItem = false;
--- a/browser/devtools/debugger/debugger.xul
+++ b/browser/devtools/debugger/debugger.xul
@@ -295,17 +295,20 @@
          modifiers="accel shift"
          command="addWatchExpressionCommand"/>
     <key id="removeAllWatchExpressionsKey"
          key="&debuggerUI.removeAllWatch.key;"
          modifiers="accel alt"
          command="removeAllWatchExpressionsCommand"/>
   </keyset>
 
-  <vbox id="body" layout="horizontal" flex="1" class="theme-body">
+  <vbox id="body"
+        class="theme-body"
+        layout="horizontal"
+        flex="1">
     <toolbar id="debugger-toolbar"
              class="devtools-toolbar">
       <hbox id="debugger-controls">
         <toolbarbutton id="resume"
                        class="devtools-toolbarbutton"
                        tabindex="0"/>
         <toolbarbutton id="step-over"
                        class="devtools-toolbarbutton"
@@ -391,49 +394,53 @@
                        flex="1"
                        type="search"/>
             </toolbar>
           </tabpanel>
         </tabpanels>
       </tabbox>
       <splitter id="sources-and-editor-splitter"
                 class="devtools-side-splitter"/>
-      <deck id="editor-deck" flex="4">
+      <deck id="editor-deck" flex="1">
         <vbox id="editor"/>
-        <vbox id="black-boxed-message" align="center" pack="center">
-          <label id="black-boxed-message-label">
+        <vbox id="black-boxed-message"
+              align="center"
+              pack="center">
+          <description id="black-boxed-message-label">
             &debuggerUI.blackBoxMessage.label;
-          </label>
+          </description>
           <button id="black-boxed-message-button"
                   class="devtools-toolbarbutton"
                   label="&debuggerUI.blackBoxMessage.unBlackBoxButton;"
                   image="chrome://browser/skin/devtools/debugger-blackboxMessageEye.png"
                   command="unBlackBoxCommand"/>
         </vbox>
-        <vbox id="source-progress-container" align="center" pack="center">
+        <vbox id="source-progress-container"
+              align="center"
+              pack="center">
           <progressmeter id="source-progress"
                          mode="undetermined"/>
         </vbox>
       </deck>
       <splitter id="editor-and-instruments-splitter"
                 class="devtools-side-splitter"/>
       <tabbox id="instruments-pane"
               class="devtools-sidebar-tabs"
               hidden="true">
         <tabs>
           <tab id="variables-tab" label="&debuggerUI.tabs.variables;"/>
           <tab id="events-tab" label="&debuggerUI.tabs.events;"/>
         </tabs>
         <tabpanels flex="1">
-          <tabpanel id="variables-tabpanel" class="theme-body">
+          <tabpanel id="variables-tabpanel">
             <vbox id="expressions"/>
             <splitter class="devtools-horizontal-splitter"/>
             <vbox id="variables" flex="1"/>
           </tabpanel>
-          <tabpanel id="events-tabpanel" class="theme-body">
+          <tabpanel id="events-tabpanel">
             <vbox id="event-listeners" flex="1"/>
           </tabpanel>
         </tabpanels>
       </tabbox>
       <splitter id="vertical-layout-splitter"
                 class="devtools-horizontal-splitter"/>
       <hbox id="vertical-layout-panes-container">
         <splitter id="sources-and-instruments-splitter"
--- a/browser/devtools/netmonitor/netmonitor-view.js
+++ b/browser/devtools/netmonitor/netmonitor-view.js
@@ -255,17 +255,17 @@ function RequestsMenuView() {
 
 RequestsMenuView.prototype = Heritage.extend(WidgetMethods, {
   /**
    * Initialization function, called when the network monitor is started.
    */
   initialize: function() {
     dumpn("Initializing the RequestsMenuView");
 
-    this.widget = new SideMenuWidget($("#requests-menu-contents"), false);
+    this.widget = new SideMenuWidget($("#requests-menu-contents"));
     this._splitter = $('#splitter');
     this._summary = $("#request-menu-network-summary");
 
     this.allowFocusOnRightClick = true;
     this.widget.maintainSelectionVisible = false;
     this.widget.autoscrollWithAppendedItems = true;
 
     this.widget.addEventListener("select", this._onSelect, false);
--- a/browser/devtools/netmonitor/netmonitor.css
+++ b/browser/devtools/netmonitor/netmonitor.css
@@ -3,16 +3,17 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #toolbar-labels {
   overflow: hidden;
 }
 
 #details-pane-toggle[disabled] {
+  /* Don't use display: none; to avoid collapsing #requests-menu-toolbar */
   visibility: hidden;
 }
 
 #response-content-image-box {
   overflow: auto;
 }
 
 #custom-pane {
--- a/browser/devtools/profiler/profiler.xul
+++ b/browser/devtools/profiler/profiler.xul
@@ -37,21 +37,16 @@
       </toolbar>
 
       <vbox id="profiles-list" flex="1">
       </vbox>
     </vbox>
 
     <splitter class="devtools-side-splitter"/>
 
-    <vbox flex="1">
-      <toolbar class="devtools-toolbar">
-      </toolbar>
-
-      <vbox flex="1" id="profiler-report">
-        <!-- Example:
-        <iframe id="profiler-cleo-1"
-          src="devtools/cleopatra.html" flex="1"></iframe>
-        -->
-      </vbox>
+    <vbox flex="1" id="profiler-report">
+      <!-- Example:
+      <iframe id="profiler-cleo-1"
+        src="devtools/cleopatra.html" flex="1"></iframe>
+      -->
     </vbox>
   </box>
 </window>
--- a/browser/devtools/shadereditor/shadereditor.js
+++ b/browser/devtools/shadereditor/shadereditor.js
@@ -217,16 +217,17 @@ let ShadersListView = Heritage.extend(Wi
     }
 
     // Currently, there's no good way of differentiating between programs
     // in a way that helps humans. It will be a good idea to implement a
     // standard of allowing debuggees to add some identifiable metadata to their
     // program sources or instances.
     let label = L10N.getFormatStr("shadersList.programLabel", this.itemCount);
     let contents = document.createElement("label");
+    contents.className = "plain program-item";
     contents.setAttribute("value", label);
     contents.setAttribute("crop", "start");
     contents.setAttribute("flex", "1");
 
     // Append a program item to this container.
     this.push([contents], {
       index: -1, /* specifies on which position should the item be appended */
       attachment: {
--- a/browser/devtools/shared/widgets/SideMenuWidget.jsm
+++ b/browser/devtools/shared/widgets/SideMenuWidget.jsm
@@ -17,38 +17,35 @@ this.EXPORTED_SYMBOLS = ["SideMenuWidget
  * A simple side menu, with the ability of grouping menu items.
  *
  * Note: this widget should be used in tandem with the WidgetMethods in
  * ViewHelpers.jsm.
  *
  * @param nsIDOMNode aNode
  *        The element associated with the widget.
  * @param Object aOptions
- *        - theme: "light" or "dark", defaults to dark if falsy.
  *        - showArrows: specifies if items should display horizontal arrows.
  *        - showItemCheckboxes: specifies if items should display checkboxes.
  *        - showGroupCheckboxes: specifies if groups should display checkboxes.
  */
 this.SideMenuWidget = function SideMenuWidget(aNode, aOptions={}) {
   this.document = aNode.ownerDocument;
   this.window = this.document.defaultView;
   this._parent = aNode;
 
-  let { theme, showArrows, showItemCheckboxes, showGroupCheckboxes } = aOptions;
-  this._theme = theme || "dark";
+  let { showArrows, showItemCheckboxes, showGroupCheckboxes } = aOptions;
   this._showArrows = showArrows || false;
   this._showItemCheckboxes = showItemCheckboxes || false;
   this._showGroupCheckboxes = showGroupCheckboxes || false;
 
   // Create an internal scrollbox container.
   this._list = this.document.createElement("scrollbox");
-  this._list.className = "side-menu-widget-container";
+  this._list.className = "side-menu-widget-container theme-body";
   this._list.setAttribute("flex", "1");
   this._list.setAttribute("orient", "vertical");
-  this._list.setAttribute("theme", this._theme);
   this._list.setAttribute("with-arrows", this._showArrows);
   this._list.setAttribute("with-item-checkboxes", this._showItemCheckboxes);
   this._list.setAttribute("with-group-checkboxes", this._showGroupCheckboxes);
   this._list.setAttribute("tabindex", "0");
   this._list.addEventListener("keypress", e => this.emit("keyPress", e), false);
   this._list.addEventListener("mousedown", e => this.emit("mousePress", e), false);
   this._parent.appendChild(this._list);
 
@@ -136,23 +133,17 @@ SideMenuWidget.prototype = {
 
   /**
    * Removes the specified child node from this container.
    *
    * @param nsIDOMNode aChild
    *        The element associated with the displayed item.
    */
   removeChild: function(aChild) {
-    if (aChild.classList.contains("side-menu-widget-item-contents") &&
-       !aChild.classList.contains("side-menu-widget-item")) {
-      // Remove the item itself, not the contents.
-      aChild.parentNode.remove();
-    } else {
-      aChild.remove();
-    }
+    this._getNodeForContents(aChild).remove();
 
     this._orderedMenuElementsArray.splice(
       this._orderedMenuElementsArray.indexOf(aChild), 1);
 
     this._itemsByElement.delete(aChild);
 
     if (this._selectedItem == aChild) {
       this._selectedItem = null;
@@ -193,22 +184,20 @@ SideMenuWidget.prototype = {
   set selectedItem(aChild) {
     let menuArray = this._orderedMenuElementsArray;
 
     if (!aChild) {
       this._selectedItem = null;
     }
     for (let node of menuArray) {
       if (node == aChild) {
-        node.classList.add("selected");
-        node.parentNode.classList.add("selected");
+        this._getNodeForContents(node).classList.add("selected");
         this._selectedItem = node;
       } else {
-        node.classList.remove("selected");
-        node.parentNode.classList.remove("selected");
+        this._getNodeForContents(node).classList.remove("selected");
       }
     }
   },
 
   /**
    * Ensures the specified element is visible.
    *
    * @param nsIDOMNode aElement
@@ -311,17 +300,16 @@ SideMenuWidget.prototype = {
    */
   _showEmptyText: function() {
     if (this._emptyTextNode || !this._emptyTextValue) {
       return;
     }
     let label = this.document.createElement("label");
     label.className = "plain side-menu-widget-empty-text";
     label.setAttribute("value", this._emptyTextValue);
-    label.setAttribute("theme", this._theme);
 
     this._parent.insertBefore(label, this._list);
     this._emptyTextNode = label;
   },
 
   /**
    * Removes the label representing a notice in this container.
    */
@@ -345,17 +333,16 @@ SideMenuWidget.prototype = {
    */
   _getMenuGroupForName: function(aName) {
     let cachedGroup = this._groupsByName.get(aName);
     if (cachedGroup) {
       return cachedGroup;
     }
 
     let group = new SideMenuGroup(this, aName, {
-      theme: this._theme,
       showCheckbox: this._showGroupCheckboxes
     });
 
     this._groupsByName.set(aName, group);
     group.insertSelfAt(this.sortedGroups ? group.findExpectedIndexForSelf() : -1);
 
     return group;
   },
@@ -368,25 +355,42 @@ SideMenuWidget.prototype = {
    *        The group to contain the menu item.
    * @param nsIDOMNode aContents
    *        The node displayed in the container.
    * @param object aAttachment [optional]
    *        Some attached primitive/object.
    */
   _getMenuItemForGroup: function(aGroup, aContents, aAttachment) {
     return new SideMenuItem(aGroup, aContents, aAttachment, {
-      theme: this._theme,
       showArrow: this._showArrows,
       showCheckbox: this._showItemCheckboxes
     });
   },
 
+  /**
+   * Returns the .side-menu-widget-item node corresponding to a SideMenuItem.
+   * To optimize the markup, some redundant elemenst are skipped when creating
+   * these child items, in which case we need to be careful on which nodes
+   * .selected class names are added, or which nodes are removed.
+   *
+   * @param nsIDOMNode aChild
+   *        An element which is the target node of a SideMenuItem.
+   * @return nsIDOMNode
+   *         The wrapper node if there is one, or the same child otherwise.
+   */
+  _getNodeForContents: function(aChild) {
+    if (aChild.hasAttribute("merged-item-contents")) {
+      return aChild;
+    } else {
+      return aChild.parentNode;
+    }
+  },
+
   window: null,
   document: null,
-  _theme: "",
   _showArrows: false,
   _showItemCheckboxes: false,
   _showGroupCheckboxes: false,
   _parent: null,
   _list: null,
   _selectedItem: null,
   _groupsByName: null,
   _orderedGroupElementsArray: null,
@@ -401,17 +405,16 @@ SideMenuWidget.prototype = {
  * Represents a group which should contain SideMenuItems.
  *
  * @param SideMenuWidget aWidget
  *        The widget to contain this menu item.
  * @param string aName
  *        The string displayed in the container.
  * @param object aOptions [optional]
  *        An object containing the following properties:
- *          - theme: the theme colors, either "dark" or "light".
  *          - showCheckbox: specifies if a checkbox should be displayed.
  */
 function SideMenuGroup(aWidget, aName, aOptions={}) {
   this.document = aWidget.document;
   this.window = aWidget.window;
   this.ownerView = aWidget;
   this.identifier = aName;
 
@@ -422,17 +425,16 @@ function SideMenuGroup(aWidget, aName, a
     target.setAttribute("name", aName);
     target.setAttribute("tooltiptext", aName);
 
     let list = this._list = this.document.createElement("vbox");
     list.className = "side-menu-widget-group-list";
 
     let title = this._title = this.document.createElement("hbox");
     title.className = "side-menu-widget-group-title";
-    title.setAttribute("theme", aOptions.theme);
 
     let name = this._name = this.document.createElement("label");
     name.className = "plain name";
     name.setAttribute("value", aName);
     name.setAttribute("crop", "end");
     name.setAttribute("flex", "1");
 
     // Show a checkbox before the content.
@@ -444,17 +446,17 @@ function SideMenuGroup(aWidget, aName, a
     title.appendChild(name);
     target.appendChild(title);
     target.appendChild(list);
   }
   // Skip a few redundant nodes when no title is shown.
   else {
     let target = this._target = this._list = this.document.createElement("vbox");
     target.className = "side-menu-widget-group side-menu-widget-group-list";
-    target.setAttribute("theme", aOptions.theme);
+    target.setAttribute("merged-group-contents", "");
   }
 }
 
 SideMenuGroup.prototype = {
   get _orderedGroupElementsArray() this.ownerView._orderedGroupElementsArray,
   get _orderedMenuElementsArray() this.ownerView._orderedMenuElementsArray,
   get _itemsByElement() { return this.ownerView._itemsByElement; },
 
@@ -514,29 +516,27 @@ SideMenuGroup.prototype = {
  * @param SideMenuGroup aGroup
  *        The group to contain this menu item.
  * @param nsIDOMNode aContents
  *        The node displayed in the container.
  * @param object aAttachment [optional]
  *        The attachment object.
  * @param object aOptions [optional]
  *        An object containing the following properties:
- *          - theme: the theme colors, either "dark" or "light".
  *          - showArrow: specifies if a horizontal arrow should be displayed.
  *          - showCheckbox: specifies if a checkbox should be displayed.
  */
 function SideMenuItem(aGroup, aContents, aAttachment={}, aOptions={}) {
   this.document = aGroup.document;
   this.window = aGroup.window;
   this.ownerView = aGroup;
 
   if (aOptions.showArrow || aOptions.showCheckbox) {
     let container = this._container = this.document.createElement("hbox");
     container.className = "side-menu-widget-item";
-    container.setAttribute("theme", aOptions.theme);
 
     let target = this._target = this.document.createElement("vbox");
     target.className = "side-menu-widget-item-contents";
 
     // Show a checkbox before the content.
     if (aOptions.showCheckbox) {
       let checkbox = this._checkbox = makeCheckbox(container, aAttachment);
       checkbox.className = "side-menu-widget-item-checkbox";
@@ -550,17 +550,17 @@ function SideMenuItem(aGroup, aContents,
       arrow.className = "side-menu-widget-item-arrow";
       container.appendChild(arrow);
     }
   }
   // Skip a few redundant nodes when no horizontal arrow or checkbox is shown.
   else {
     let target = this._target = this._container = this.document.createElement("hbox");
     target.className = "side-menu-widget-item side-menu-widget-item-contents";
-    target.setAttribute("theme", aOptions.theme);
+    target.setAttribute("merged-item-contents", "");
   }
 
   this._target.setAttribute("flex", "1");
   this.contents = aContents;
 }
 
 SideMenuItem.prototype = {
   get _orderedGroupElementsArray() this.ownerView._orderedGroupElementsArray,
--- a/browser/devtools/shared/widgets/SimpleListWidget.jsm
+++ b/browser/devtools/shared/widgets/SimpleListWidget.jsm
@@ -23,17 +23,17 @@ this.EXPORTED_SYMBOLS = ["SimpleListWidg
  */
 function SimpleListWidget(aNode) {
   this.document = aNode.ownerDocument;
   this.window = this.document.defaultView;
   this._parent = aNode;
 
   // Create an internal list container.
   this._list = this.document.createElement("scrollbox");
-  this._list.className = "simple-list-widget-container";
+  this._list.className = "simple-list-widget-container theme-body";
   this._list.setAttribute("flex", "1");
   this._list.setAttribute("orient", "vertical");
   this._parent.appendChild(this._list);
 
   // Delegate some of the associated node's methods to satisfy the interface
   // required by WidgetMethods instances.
   ViewHelpers.delegateWidgetAttributeMethods(this, aNode);
   ViewHelpers.delegateWidgetEventMethods(this, aNode);
--- a/browser/themes/linux/devtools/debugger.css
+++ b/browser/themes/linux/devtools/debugger.css
@@ -1,598 +1,9 @@
-/* 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/. */
 
-/* Sources and breakpoints pane */
-
-#sources-pane > tabs {
-  -moz-border-end: 1px solid #222426; /* Match the sources list's dark margin. */
-}
-
-#sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
-  border-color: transparent;
-}
-
-/* Sources toolbar */
-
-#sources-toolbar {
-  border: none; /* Remove the devtools-toolbar's black bottom border. */
-  -moz-border-end: 1px solid #222426; /* Match the sources list's dark margin. */
-}
-
-#sources-toolbar > .devtools-toolbarbutton,
-#sources-controls > .devtools-toolbarbutton {
-  min-width: 32px;
-}
-
-#black-box {
-  list-style-image: url(debugger-blackbox.png);
-}
-
-#pretty-print {
-  font-weight: bold;
-}
-
-#toggle-breakpoints {
-  list-style-image: url(debugger-toggleBreakpoints.png);
-}
-
-#sources-toolbar .devtools-toolbarbutton:not([label]) {
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-#sources .black-boxed {
-  color: #888;
-}
-
-#sources .black-boxed > .dbg-breakpoint {
-  display: none;
-}
-
-#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
-  background-image: none;
-  box-shadow: inset -1px 0 0 #222426;
-}
-
-#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
-  background-image: none;
-  box-shadow: inset 1px 0 0 #222426;
-}
-
-/* Black box message and source progress meter */
-
-#black-boxed-message,
-#source-progress-container {
-  background: url(background-noise-toolbar.png) rgb(61,69,76);
-  /* Prevent the container deck from aquiring the size from this message. */
-  min-width: 1px;
-  min-height: 1px;
-  color: white;
-}
-
-#source-progress {
-  min-height: 2em;
-  min-width: 40em;
-}
-
-#black-boxed-message-label,
-#black-boxed-message-button {
-  text-align: center;
-  font-size: 120%;
-}
-
-#black-boxed-message-button {
-  margin-top: 1em;
-  padding: .25em;
-}
-
-/* Tracer */
-
-#trace {
-  list-style-image: url(tracer-icon.png);
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#trace[checked] {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-#clear-tracer {
-  /* Make this button as narrow as the text inside it. */
-  min-width: 1px;
-}
-
-.trace-name {
-  -moz-padding-start: 4px !important;
-}
-
-/* Tracer dark theme */
-
-.theme-dark .trace-item {
-  color: #f5f7fa; /* Light foreground text */
-}
-
-.theme-dark .trace-item.selected-matching {
-  background-color: rgba(29, 79, 115, .4); /* Select highlight blue at 40% alpha */
-}
-
-.theme-dark .selected > .trace-item {
-  background-color: rgba(29, 79, 115, .75); /* Select highlight blue at 75% alpha */
-}
-
-.theme-dark .trace-call {
-  color: #46afe3; /* highlight blue */
-}
-
-.theme-dark .trace-return,
-.theme-dark .trace-yield {
-  color: #70bf53; /* highlight green */
-}
-
-.theme-dark .trace-throw {
-  color: #eb5368; /* highlight red */
-}
-
-.theme-dark .trace-param {
-  color: #b8c8d9; /* Content text light */
-}
-
-.theme-dark .trace-syntax {
-  color: #8fa1b2; /* Content text grey */
-}
-
-/* Tracer light theme */
-
-.theme-light .trace-item {
-  color: #292e33; /* Dark foreground text */
-}
-
-.theme-light .trace-item.selected-matching {
-  background-color: rgba(76, 158, 217, .4); /* Select highlight blue at 40% alpha */
-}
-
-.theme-light .selected > .trace-item {
-  background-color: rgba(76, 158, 217, .75); /* Select highlight blue at 75% alpha */
-}
-
-.theme-light .trace-call {
-  color: #0088cc; /* highlight blue */
-}
-
-.theme-light .trace-return,
-.theme-light .trace-yield {
-  color: #2cbb0f; /* highlight green */
-}
-
-.theme-light .trace-throw {
-  color: #ed2655; /* highlight red */
-}
-
-.theme-light .trace-param {
-  color: #667380; /* Content text dark grey  */
-}
-
-.theme-light .trace-syntax {
-  color: #8fa1b2; /* Content text grey */
-}
-
-/* Breadcrumbs stack frames view */
-
-.breadcrumbs-widget-item {
-  max-width: none;
-}
-
-.dbg-stackframe-details {
-  -moz-padding-start: 4px;
-}
-
-/* Classic stack frames view */
-
-.dbg-classic-stackframe {
-  display: block;
-  padding: 0px 4px;
-}
-
-.dbg-classic-stackframe-title {
-  font-weight: 600;
-  color: #046;
-}
-
-.dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
-  float: right;
-}
-
-.dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
-  float: left;
-}
-
-.dbg-classic-stackframe-details-url {
-  max-width: 90%;
-  text-align: end;
-  color: #666;
-}
-
-.dbg-classic-stackframe-details-sep {
-  color: #aaa;
-}
-
-.dbg-classic-stackframe-details-line {
-  color: #58b;
-}
-
-#callstack-list .side-menu-widget-item.selected label {
-  color: #fff;
-}
-
-/* Sources and breakpoints view */
-
-.dbg-breakpoint {
-  -moz-margin-start: 4px;
-}
-
-.dbg-breakpoint-line {
-  font-weight: 600;
-}
-
-.dbg-breakpoint-text {
-  -moz-margin-start: 10px !important;
-  font-style: italic;
-  font-size: 90%;
-}
-
-.dbg-breakpoint-checkbox {
-  width: 16px;
-  height: 16px;
-  margin: 2px;
-}
-
-/* Variable bubble view */
-
-.devtools-tooltip-simple-text.token-undefined,
-.devtools-tooltip-simple-text.token-null {
-  text-align: center;
-  color: #666 !important; /* Override the theme's color. */
-}
-
-.devtools-tooltip-simple-text.token-boolean {
-  text-align: center;
-  color: #10c !important;
-}
-
-.devtools-tooltip-simple-text.token-number {
-  text-align: center;
-  color: #c00 !important;
-}
-
-.devtools-tooltip-simple-text.token-string {
-  text-align: start;
-  color: #282 !important;
-}
-
-.devtools-tooltip-simple-text.token-other {
-  text-align: center;
-  color: #333 !important;
-}
-
-/* Instruments pane (watch expressions, variables, event listeners...) */
-
-#instruments-pane .side-menu-widget-container,
-#instruments-pane .side-menu-widget-empty-text {
-  box-shadow: none !important;
-}
-
-/* Watch expressions view */
-
-#expressions {
-  min-height: 10px;
-  max-height: 125px;
-}
-
-.dbg-expression {
-  height: 20px;
-}
-
-.dbg-expression-arrow {
-  width: 16px;
-  height: auto;
-  margin: 2px;
-  background: -moz-image-rect(url(commandline-icon.png), 0, 32, 16, 16);
-}
-
-.dbg-expression-input {
-  color: inherit;
-}
-
-/* Event listeners view */
-
-.dbg-event-listener {
-  padding: 0px 8px;
-}
-
-.dbg-event-listener-type {
-  font-weight: 600;
-}
-
-.dbg-event-listener-separator {
-  color: #999;
-}
-
-.dbg-event-listener-targets {
-  color: #046;
-}
-
-.dbg-event-listener-location {
-  color: #666;
-}
-
-#event-listeners .side-menu-widget-item.selected {
-  background: none !important;
-}
-
-/* Searchbox and the search operations help panel */
-
-#searchbox {
-  min-width: 220px;
-  -moz-margin-start: 1px;
-}
-
-#filter-label {
-  -moz-margin-start: 2px;
-}
-
-#searchbox-panel-operators {
-  margin-top: 5px;
-  margin-bottom: 8px;
-  -moz-margin-start: 2px;
-}
-
-.searchbox-panel-operator-button {
-  min-width: 26px;
-  margin-top: 0;
-  margin-bottom: 0;
-  -moz-margin-start: 2px;
-  -moz-margin-end: 6px;
-  text-align: center;
-}
-
-.searchbox-panel-operator-label {
-  padding-bottom: 2px;
-}
-
-/* Searchbox results panel */
-
-.results-panel {
-  padding: 4px;
-}
-
-.results-panel-item {
-  background: #f4f4f4;
-  border: 1px solid #ddd;
-  border-top-color: #fff;
-  padding: 5px;
-  cursor: pointer;
-}
-
-.results-panel-item:first-of-type {
-  border-top-color: #ddd;
-  border-radius: 4px 4px 0 0;
-}
-
-.results-panel-item:last-of-type {
-  border-radius: 0 0 4px 4px;
-}
-
-.results-panel-item:only-of-type {
-  border-radius: 4px;
-}
-
-.results-panel-item:not(.selected):not(:hover) {
-  text-shadow: 0 1px #fff;
-}
-
-.results-panel-item-label-before {
-  -moz-margin-end: 5px !important;
-  color: #444;
-  cursor: inherit;
-}
-
-.results-panel-item-label {
-  color: #111;
-  font-weight: 600;
-  cursor: inherit;
-}
-
-.results-panel-item-label-below {
-  color: #7f7f7f;
-  cursor: inherit;
-}
-
-/* Sources search view */
-
-#globalsearch {
-  min-height: 10px;
-  max-height: 125px;
-  box-shadow: inset 0 -4px 8px #eee;
-  background: url(background-noise-toolbar.png);
-}
-
-#globalsearch + .devtools-horizontal-splitter {
-  border-color: #bfbfbf;
-}
-
-.dbg-source-results {
-  padding: 0;
-  background: none !important;
-}
-
-.dbg-results-header {
-  -moz-padding-start: 6px;
-}
-
-.dbg-results-header-location {
-  font-weight: 600;
-}
-
-.dbg-results-header-match-count {
-  -moz-padding-start: 6px;
-  color: GrayText;
-}
-
-.dbg-results-line-number {
-  background: #e2e2e2;
-  min-width: 40px;
-  -moz-border-end: 1px solid #b4c4d3;
-  -moz-padding-end: 4px;
-  padding-top: 2px;
-  text-align: end;
-  color: #8c8c8c;
-}
-
-.dbg-results-line-contents {
-  -moz-padding-start: 4px;
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
-
-.dbg-results-line-contents-string {
-  padding: 1px;
-}
-
-.dbg-results-line-contents-string[match=true] {
-  background: rgba(255,255,0,0.5);
-  padding: 0;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.dbg-results-line-contents-string[match=true][focusing] {
-  transition: transform 0.3s ease-in-out;
-}
-
-.dbg-results-line-contents-string[match=true][focused] {
-  transition-duration: 0.1s;
-  transform: scale(1.75, 1.75);
-}
-
-/* Toolbar controls */
+%include ../../shared/devtools/debugger.inc.css
 
 .devtools-sidebar-tabs > tabs > tab {
-  min-height: 25px !important;
-  padding: 0 !important;
-}
-
-#resumption-panel-desc {
-  width: 200px;
-}
-
-#resumption-order-panel {
-  -moz-margin-start: -8px;
-}
-
-#resume {
-  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");
-}
-
-#step-in {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
-}
-
-#step-out {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
-}
-
-#debugger-controls > toolbarbutton,
-#sources-controls > toolbarbutton {
-  margin: 0;
-  box-shadow: none;
-  border-radius: 0;
-  border-width: 0;
-  -moz-border-end-width: 1px;
-  outline-offset: -3px;
+  min-height: 24px !important;
 }
-
-#debugger-controls > toolbarbutton:last-of-type,
-#sources-controls > toolbarbutton:last-of-type {
-  -moz-border-end-width: 0;
-}
-
-#debugger-controls,
-#sources-controls {
-  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);
-  border: 1px solid hsla(210,8%,5%,.45);
-  border-radius: 3px;
-  margin: 0 3px;
-}
-
-#instruments-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border: none;
-  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#instruments-pane-toggle[pane-collapsed] {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
-}
-
-#instruments-pane-toggle:active {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-/* Horizontal vs. vertical layout */
-
-#vertical-layout-panes-container {
-  min-height: 35vh;
-  max-height: 80vh;
-}
-
-#body[layout=vertical] #sources-pane > tabs {
-  -moz-border-end: none;
-}
-
-#body[layout=vertical] #instruments-pane {
-  margin: 0 !important;
-  /* To prevent all the margin hacks to hide the sidebar. */
-}
-
-#body[layout=vertical] .side-menu-widget-container,
-#body[layout=vertical] .side-menu-widget-empty-text {
-  box-shadow: none !important;
-}
-
-#body[layout=vertical] .side-menu-widget-item-arrow {
-  background-image: none !important;
-}
-
-#body[layout=vertical] .side-menu-widget-group,
-#body[layout=vertical] .side-menu-widget-item {
-  -moz-margin-end: 0;
-}
deleted file mode 100644
index 6cc3e984b62fefeba1b6a22f7129bc23d3e9ddc1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 0f8f4b1b0b6a6776d1aac85209e2374cb9bbffba..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/linux/devtools/netmonitor.css
+++ b/browser/themes/linux/devtools/netmonitor.css
@@ -1,554 +1,28 @@
-/* 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/. */
 
-#body {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-}
-
-/* Network requests table */
+%include ../../shared/devtools/netmonitor.inc.css
 
-#requests-menu-empty-notice {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  padding: 12px;
-  font-size: 110%;
-  color: #fff;
-}
-
-#requests-menu-toolbar {
-  height: 32px;
-  padding: 0;
-}
-
-.requests-menu-header:first-child {
-  -moz-padding-start: 4px;
-}
-
-.requests-menu-subitem {
+#headers-summary-resend {
   padding: 4px;
 }
 
-.requests-menu-header:not(:last-child):-moz-locale-dir(ltr),
-.requests-menu-subitem:not(:last-child):-moz-locale-dir(ltr) {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
-.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-header-button {
-  -moz-appearance: none;
-  background: none;
-  min-width: 20px;
-  min-height: 32px;
-  margin: 0;
-  border: none;
-  padding: 0;
-  color: inherit;
-  font-weight: inherit !important;
-  transition: background-color 0.1s ease-in-out;
-}
-
-.requests-menu-header-button:hover {
-  background: rgba(0,0,0,0.10);
-}
-
-.requests-menu-header-button:hover:active {
-  background: rgba(0,0,0,0.25);
-}
-
-.requests-menu-header-button:not(:active)[sorted] {
-  background: rgba(0,0,0,0.15);
-}
-
-.requests-menu-header-button:not(:active)[sorted=ascending] {
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-}
-
-.requests-menu-header-button:not(:active)[sorted=descending] {
-  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-  background-position: bottom;
-}
-
-/* Network requests table: specific column dimensions */
-
 .requests-menu-status-and-method {
   width: 7em;
 }
 
-.requests-menu-status {
-  width: 10px;
-  height: 10px;
-}
-
-.requests-menu-method {
-  text-align: center;
-  font-weight: 600;
-}
-
-.requests-menu-file {
-  width: 20vw;
-  min-width: 4em;
-}
-
 .requests-menu-domain {
   width: 16vw;
-  min-width: 10em;
-}
-
-.requests-menu-type {
-  text-align: center;
-  width: 4em;
 }
 
 .requests-menu-size {
-  text-align: center;
   width: 6em;
 }
 
-/* Network requests table: status codes */
-
-box.requests-menu-status {
-  background: #fff;
-  -moz-margin-start: 5px;
-  -moz-margin-end: 5px;
-  border-radius: 20px;
-  box-shadow:
-    0 0 0 1px rgba(255,255,255,0.4) inset,
-    0 -6px 4px 0 rgba(32,32,32,1.0) inset,
-    0 0 8px 0 rgba(32,0,0,0.4);
-  transition: box-shadow 0.5s ease-in-out;
-}
-
-box.requests-menu-status[code^="1"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,0,64,1.0) inset,
-    0 0 8px 0 rgba(0,0,128,1.0);
-}
-
-box.requests-menu-status[code^="2"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,64,0,1.0) inset,
-    0 0 8px 0 rgba(0,128,0,1.0);
-}
-
-box.requests-menu-status[code^="3"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,32,0,1.0) inset,
-    0 0 8px 0 rgba(128,128,0,1.0);
-}
-
-box.requests-menu-status[code^="4"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,0,0,1.0) inset,
-    0 0 8px 0 rgba(128,0,0,1.0);
-}
-
-box.requests-menu-status[code^="5"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,0,64,1.0) inset,
-    0 0 8px 0 rgba(128,0,128,1.0);
-}
-
-/* Network requests table: waterfall header */
-
-#requests-menu-waterfall-label {
-  -moz-padding-start: 8px;
-  -moz-padding-end: 8px;
-}
-
-.requests-menu-timings-division {
-  width: 100px;
-  padding-top: 2px;
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #999;
-  font-size: 75%;
-  pointer-events: none;
-}
-
-.requests-menu-timings-division:not(:first-child) {
-  -moz-margin-start: -100px !important; /* Don't affect layout. */
-}
-
-.requests-menu-timings-division:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings-division:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-/* Network requests table: waterfall items */
-
-.requests-menu-subitem.requests-menu-waterfall {
-  -moz-padding-start: 4px;
-  -moz-padding-end: 4px;
-  background-repeat: repeat-y; /* Background created on a <canvas> in js. */
-  margin-top: -1px; /* Compensate borders. */
-  margin-bottom: -1px;
-}
-
-.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
-  background-position: right center;
-}
-
-.requests-menu-timings:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-.requests-menu-timings-total:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings-total:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-.requests-menu-timings-total {
-  -moz-padding-start: 8px;
-  font-size: 85%;
-  font-weight: 600;
-}
-
-.requests-menu-timings-cap {
-  width: 4px;
-  height: 10px;
-  border: 1px solid #fff;
-}
-
-.requests-menu-timings-cap.start {
-  -moz-border-end: none;
-}
-
-.requests-menu-timings-cap.end {
-  -moz-border-start: none;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(ltr) {
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(rtl) {
-  border-radius: 0 4px 4px 0;
-  transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(ltr) {
-  border-radius: 0 4px 4px 0;
-  transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(rtl) {
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
-}
-
-.requests-menu-timings-box {
-  height: 10px;
-  border-top: 1px solid #fff;
-  border-bottom: 1px solid #fff;
-}
-
-.requests-menu-timings-box.blocked,
-.requests-menu-timings-cap.blocked {
-  background-color: rgba(255,32,32,0.8);
-  box-shadow: 0 0 8px 0 rgba(128,32,32,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.dns,
-.requests-menu-timings-cap.dns {
-  background-color: rgba(255,128,255,0.6);
-  box-shadow: 0 0 8px 0 rgba(128,128,255,1.0),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.connect,
-.requests-menu-timings-cap.connect {
-  background-color: rgba(255,128,16,0.4);
-  box-shadow: 0 0 8px 0 rgba(128,128,16,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.send,
-.requests-menu-timings-cap.send {
-  background-color: rgba(255,255,128,0.4);
-  box-shadow: 0 0 8px 0 rgba(128,255,128,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.wait,
-.requests-menu-timings-cap.wait {
-  background-color: rgba(255,255,255,0.2);
-  box-shadow: 0 0 8px 0 rgba(128,255,255,0.4),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.receive,
-.requests-menu-timings-cap.receive {
-  background-color: rgba(255,255,255,1.0);
-  box-shadow: 0 0 8px 0 rgba(128,255,255,1.0),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-/* SideMenuWidget */
-
-.side-menu-widget-item-contents {
-  padding: 0px;
-}
-
-.side-menu-widget-container {
-  box-shadow: none !important;
-}
-
-.side-menu-widget-item[odd] {
-  background: rgba(255,255,255,0.05);
-}
-
-/* Network request details */
-
-#details-pane {
-  background: hsl(208,11%,27%);
-  max-width: 500px;
-}
-
-#details-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border-color: transparent;
-  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#details-pane-toggle[pane-collapsed] {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
-}
-
-#details-pane-toggle:active {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-/* Network request details tabpanels */
-
-.tabpanel-content {
-  background: url(background-noise-toolbar.png), #3e4750;
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset;
-  color: #fff;
-}
-
-.tabpanel-summary-container {
-  padding: 1px;
-}
-
-.tabpanel-summary-label {
-  -moz-padding-start: 4px;
-  -moz-padding-end: 3px;
-  font-weight: 600;
-  text-shadow: 0 1px 0 #000;
-  color: hsl(210,30%,85%);
-}
-
-.tabpanel-summary-value {
-  -moz-padding-start: 3px;
-}
-
-/* Headers tabpanel */
-
-#headers-summary-status,
-#headers-summary-version {
-  padding-bottom: 2px;
-}
-
-#headers-summary-size {
-  padding-top: 2px;
-}
-
-#headers-summary-resend {
-  margin: 0 6px;
-  min-height: 20px;
-}
-
-/* Response tabpanel */
-
-#response-content-info-header {
-  background:
-    url(background-noise-toolbar.png),
-    linear-gradient(hsl(0,61%,40%), hsl(0,61%,31%)) repeat-x top left;
-  box-shadow:
-    inset 0 1px 0 hsla(210,40%,83%,.15),
-    inset 0 -1px 0 hsla(210,40%,83%,.05);
-  margin: 0;
-  padding: 5px 8px;
-}
-
-#response-content-image-box {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-#response-content-image {
-  background: #fff;
-  border: 1px dashed GrayText;
-  margin-bottom: 10px;
-}
-
-/* Timings tabpanel */
-
-#timings-tabpanel .tabpanel-summary-label {
-  width: 10em;
-}
-
-#timings-tabpanel .requests-menu-timings-box {
-  transition: transform 0.2s ease-out;
-  min-width: 1px;
-}
-
-#timings-tabpanel .requests-menu-timings-total {
-  transition: transform 0.2s ease-out;
-}
-
-/* Custom request form */
-
-#custom-pane {
-  padding: 0.6em 0.5em;
-}
-
-.custom-header {
-  font-size: 1.1em;
-}
-
-.custom-section {
-  margin-top: 0.5em;
-}
-
-#custom-method-value {
-  width: 4.5em;
-}
-
-/* Footer */
-
-#requests-menu-footer {
-  box-shadow: inset 0 1px 16px hsla(210,8%,5%,.3);
-}
-
-.requests-menu-footer-button,
-.requests-menu-footer-label {
-  min-width: 1em;
-  margin: 0;
-  border: none;
-  padding: 2px 1.5vw;
-  color: #fff;
-}
-
-.requests-menu-footer-spacer {
-  min-width: 2px;
-}
-
-.requests-menu-footer-spacer,
-.requests-menu-footer-button {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-footer-button {
-  -moz-appearance: none;
-  background: rgba(0,0,0,0.025);
-}
-
-.requests-menu-footer-button:hover {
-  background: rgba(0,0,0,0.20);
-}
-
-.requests-menu-footer-button:hover:active {
-  background: rgba(0,0,0,0.35);
-}
-
-.requests-menu-footer-button:not(:active)[checked] {
-  background-color: rgba(0,0,0,0.25);
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-}
-
-.requests-menu-footer-label {
-  font-weight: 600;
-}
-
 /* Responsive sidebar */
 @media (max-width: 700px) {
-  #requests-menu-toolbar {
-    height: 26px;
-  }
-
   .requests-menu-header-button {
-    min-height: 26px;
     font-size: 85%;
   }
-
-  .requests-menu-footer-button,
-  .requests-menu-footer-label {
-    padding: 2px 2vw;
-  }
-
-  #details-pane {
-    max-width: none;
-    margin: 0 !important;
-    /* To prevent all the margin hacks to hide the sidebar. */
-  }
-
-  .requests-menu-status-and-method {
-    width: 16vw;
-  }
-
-  .requests-menu-file,
-  .requests-menu-domain {
-    width: 30vw;
-  }
-
-  .requests-menu-type {
-    width: 8vw;
-  }
-
-  .requests-menu-size {
-    width: 16vw;
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Timeline" header is not visible anymore, and thus the
-       right border and box-shadow of "Size" column should be hidden. */
-  }
 }
-
-@media (min-width: 701px) {
-  #network-table[type-overflows] .requests-menu-domain {
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Type" header is not visible anymore, and thus the
-       right border and box-shadow of "Domain" column should be hidden. */
-  }
-
-  #network-table[domain-overflows] .requests-menu-file {
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Domain" header is not visible anymore, and thus the
-       right border and box-shadow of "File" column should be hidden. */
-  }
-}
--- a/browser/themes/linux/devtools/shadereditor.css
+++ b/browser/themes/linux/devtools/shadereditor.css
@@ -1,9 +1,5 @@
 /* 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/devtools/shadereditor.inc.css
-
-.side-menu-widget-item-checkbox > .checkbox-spacer-box {
-  -moz-appearance: none;
-}
--- a/browser/themes/linux/devtools/widgets.css
+++ b/browser/themes/linux/devtools/widgets.css
@@ -1,723 +1,11 @@
-/* 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/. */
 
-/* Generic pane helpers */
-
-.generic-toggled-side-pane {
-  -moz-margin-start: 0px !important;
-  /* Unfortunately, transitions don't work properly with locale-aware properties,
-     so both the left and right margins are set via js, while the start margin
-     is always overridden here. */
-}
-
-.generic-toggled-side-pane[animated] {
-  transition: margin 0.25s ease-in-out;
-}
-
-/* BreacrumbsWidget */
-
-.breadcrumbs-widget-container {
-  -moz-margin-end: 3px;
-  /* A fake 1px-shadow is included in the border-images of the
-     breadcrumbs-widget-items, to match toolbar-buttons style.
-     This negative margin compensates the extra row of pixels created
-     by the shadow.*/
-  margin-bottom: -1px;
-}
-
-/* Preloading hack, LTR */
-
-.breadcrumbs-widget-container:-moz-locale-dir(ltr)::after {
-  content: '';
-  display: block;
-  background-image:
-    url(breadcrumbs/ltr-start.png),
-    url(breadcrumbs/ltr-start-selected.png),
-    url(breadcrumbs/ltr-start-pressed.png),
-    url(breadcrumbs/ltr-start-selected-pressed.png),
-    url(breadcrumbs/ltr-middle.png),
-    url(breadcrumbs/ltr-middle-selected.png),
-    url(breadcrumbs/ltr-middle-pressed.png),
-    url(breadcrumbs/ltr-middle-selected-pressed.png),
-    url(breadcrumbs/ltr-end.png),
-    url(breadcrumbs/ltr-end-selected.png),
-    url(breadcrumbs/ltr-end-pressed.png),
-    url(breadcrumbs/ltr-end-selected-pressed.png);
-}
-
-/* Preloading hack, RTL */
-
-.breadcrumbs-widget-container:-moz-locale-dir(rtl)::after {
-  content: '';
-  display: block;
-  background-image:
-    url(breadcrumbs/rtl-start.png),
-    url(breadcrumbs/rtl-start-selected.png),
-    url(breadcrumbs/rtl-start-pressed.png),
-    url(breadcrumbs/rtl-start-selected-pressed.png),
-    url(breadcrumbs/rtl-middle.png),
-    url(breadcrumbs/rtl-middle-selected.png),
-    url(breadcrumbs/rtl-middle-pressed.png),
-    url(breadcrumbs/rtl-middle-selected-pressed.png),
-    url(breadcrumbs/rtl-end.png),
-    url(breadcrumbs/rtl-end-selected.png),
-    url(breadcrumbs/rtl-end-pressed.png),
-    url(breadcrumbs/rtl-end-selected-pressed.png);
-}
-
-.scrollbutton-up,
-.scrollbutton-down {
-  -moz-appearance: none;
-  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);
-  border: 1px solid hsla(210,8%,5%,.45);
-  margin: 0 0 1px;
-}
-
-.scrollbutton-up:not([disabled]):active:hover,
-.scrollbutton-down:not([disabled]):active:hover {
-  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);
-  border-color: hsla(210,8%,5%,.6);
-}
-
-.scrollbutton-up > .toolbarbutton-icon,
-.scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
-  list-style-image: url("breadcrumbs-scrollbutton.png");
-  -moz-image-region: rect(0px,7px,16px,0px);
-  margin: 0 5px;
-}
-
-.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  -moz-image-region: rect(0px,14px,16px,7px);
-}
-
-.scrollbutton-up[disabled] > .toolbarbutton-icon,
-.scrollbutton-down[disabled] > .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
-.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
-  transform: scaleX(-1);
-}
-
-.breadcrumbs-widget-item {
-  background-color: transparent;
-  -moz-appearance: none;
-  overflow: hidden;
-  min-width: 85px;
-  max-width: 250px;
-  min-height: 25px;
-  border-style: solid;
-  border-width: 1px 13px 2px 13px;
-  margin: 0 -11px 0 0;
-  padding: 0 9px;
-  outline: none;
-  color: hsl(210,30%,85%);
-}
-
-.breadcrumbs-widget-item:-moz-focusring > label {
-  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag {
-  color: hsl(208,100%,60%);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id {
-  color: hsl(205,100%,70%);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes {
-  color: hsl(20,100%,70%);
-}
-
-.breadcrumbs-widget-item-id,
-.breadcrumbs-widget-item-classes {
-  color: #8d99a6;
-}
-
-.breadcrumbs-widget-item-pseudo-classes {
-  color: hsl(20,100%,85%);
-}
-
-/* Breadcrumbs LTR */
-
-.breadcrumbs-widget-item:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
-  border-left-width: 0;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
-  border-right-width: 0;
-}
-
-/* Breadcrumbs RTL */
-
-.breadcrumbs-widget-item:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
-  border-right-width: 0;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
-  border-left-width: 0;
-}
-
-/* SimpleListWidget */
-
-.simple-list-widget-item:not(.selected):hover {
-  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.85)), Highlight;
-}
-
-.simple-list-widget-item.selected {
-  background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.8)), Highlight;
-  color: #000;
-}
-
-.simple-list-widget-perma-text,
-.simple-list-widget-empty-text {
-  color: GrayText;
-  padding: 4px 8px;
-}
-
-/* FastListWidget */
-
-.fast-list-widget-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.theme-dark .fast-list-widget-empty-text {
-  padding: 12px;
-  font-weight: 600;
-  color: #fff;
-}
-
-.theme-light .fast-list-widget-empty-text {
-  padding: 4px 8px;
-  color: GrayText;
-}
-
-/* SideMenuWidget */
-
-.side-menu-widget-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.side-menu-widget-container[theme="dark"] {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  color: #fff;
-}
-
-.side-menu-widget-container[theme="light"] {
-  background: #fff;
-  color: #000;
-}
-
-/* SideMenuWidget container */
-
-.side-menu-widget-container:-moz-locale-dir(ltr),
-.side-menu-widget-empty-text:-moz-locale-dir(ltr) {
-  box-shadow: inset -1px 0 0 #222426;
-}
-
-.side-menu-widget-container:-moz-locale-dir(rtl),
-.side-menu-widget-empty-text:-moz-locale-dir(rtl) {
-  box-shadow: inset 1px 0 0 #222426;
-}
-
-.side-menu-widget-group {
-  /* To allow visibility of the dark margin shadow. */
-  -moz-margin-end: 1px;
-}
-
-.side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
-  /* To compensate for the arrow image's dark margin. */
-  -moz-margin-end: -1px;
-}
-
-/* SideMenuWidget groups */
-
-.side-menu-widget-group-title {
-  padding: 4px;
-}
-
-.side-menu-widget-group-title[theme="dark"] {
-  background-image: linear-gradient(#1f3e4f, #1b3243);
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
-              0 -2px 0 hsla(206,37%,4%,.05) inset,
-              0 -1px 1px hsla(206,37%,4%,.1) inset;
-}
-
-.side-menu-widget-group-title[theme="light"] {
-  background-image: linear-gradient(#fff, #eee);
-}
-
-/* SideMenuWidget items */
-
-.side-menu-widget-item[theme="dark"] {
-  border-top: 1px solid hsla(210,8%,5%,.25);
-  border-bottom: 1px solid hsla(210,16%,76%,.1);
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
-
-.side-menu-widget-item[theme="light"] {
-  border-top: 1px solid hsla(210,8%,75%,.25);
-  border-bottom: 1px solid hsla(210,16%,76%,.1);
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
-
-.side-menu-widget-item[theme="dark"]:last-of-type {
-  box-shadow: inset 0 -1px 0 hsla(210,8%,5%,.25);
-}
-
-.side-menu-widget-item[theme="light"]:last-of-type {
-  box-shadow: inset 0 -1px 0 hsla(210,8%,75%,.25);
-}
-
-.side-menu-widget-item.selected {
-  background: linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%)) repeat-x top left !important;
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15);
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
-  background-size: auto, 1px 100%;
-  background-repeat: no-repeat;
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
-  background-image: url(itemArrow-ltr.png), linear-gradient(to right, #222426, #222426);
-  background-position: center right, top right;
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
-  background-image: url(itemArrow-rtl.png), linear-gradient(to right, #222426, #222426);
-  background-position: center left, top left;
-}
-
-/* SideMenuWidget items contents */
-
-.side-menu-widget-item-contents {
-  padding: 4px 0px;
-}
-
-.side-menu-widget-item-arrow {
-  -moz-margin-start: -8px;
-  width: 8px;
-}
-
-.side-menu-widget-item-other {
-  background: url(background-noise-toolbar.png), hsla(208,11%,27%, 0.65);
-}
-
-.side-menu-widget-item-other.selected {
-  background: url(background-noise-toolbar.png), hsla(208,11%,27%, 0.15);
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.07),
-              inset 0 -1px 0 hsla(210,40%,83%,.07);
-}
-
-.side-menu-widget-item-other:first-of-type {
-  margin-bottom: 4px;
-  border-top-left-radius: 4px;
-}
-
-.side-menu-widget-item-other:last-of-type {
-  margin-bottom: -4px;
-}
-
-.side-menu-widget-item-other > label {
-  color: #f5f7fa;
-  text-shadow: 0 1px 1px #111;
-}
-
-/* SideMenuWidget checkboxes */
-
-.side-menu-widget-group-checkbox {
-  margin: 0;
-  -moz-margin-end: 4px;
-}
-
-.side-menu-widget-item-checkbox {
-  margin: 0;
-  -moz-margin-start: 4px;
-  -moz-margin-end: -4px;
-}
+%include ../../shared/devtools/widgets.inc.css
 
 .side-menu-widget-group-checkbox .checkbox-spacer-box,
 .side-menu-widget-item-checkbox .checkbox-spacer-box {
   margin: 0;
   border: none;
 }
-
-/* SideMenuWidget misc */
-
-.side-menu-widget-empty-text[theme="dark"] {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  padding: 12px;
-  font-weight: 600;
-  color: #fff;
-}
-
-.side-menu-widget-empty-text[theme="light"] {
-  background: #fff;
-  padding: 4px 8px;
-  color: GrayText;
-}
-
-/* VariablesView */
-
-.variables-view-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.variables-view-empty-notice {
-  color: GrayText;
-  padding: 2px;
-}
-
-.variables-view-scope > .title {
-  color: #fff;
-}
-
-/* Generic variables traits */
-
-.variables-view-variable:not(:last-child) {
-  border-bottom: 1px solid rgba(128, 128, 128, .15);
-}
-
-.variables-view-variable > .title > .name {
-  font-weight: 600;
-}
-
-/* Generic variables *and* properties traits */
-
-.variable-or-property:focus > .title > label {
-  color: inherit !important;
-}
-
-.variable-or-property > .title > .value {
-  -moz-box-flex: 1;
-}
-
-.variable-or-property > .title > .arrow {
-  -moz-margin-start: 3px;
-}
-
-.variable-or-property:not([untitled]) > .variables-view-element-details {
-  -moz-margin-start: 7px;
-}
-
-/* Traits applied when variables or properties are changed or overridden */
-
-.variable-or-property:not([overridden]) {
-  transition: background 1s ease-in-out;
-}
-
-.variable-or-property:not([overridden])[changed] {
-  transition-duration: .4s;
-}
-
-.variable-or-property[overridden] {
-  background: rgba(128,128,128,0.05);
-}
-
-.variable-or-property[overridden] .title > label {
-  /* Cross out the title for this variable and all child properties. */
-  font-style: italic;
-  text-decoration: line-through;
-  border-bottom: none !important;
-  color: rgba(128,128,128,0.9);
-  opacity: 0.7;
-}
-
-/* Traits applied when variables or properties are editable */
-
-.variable-or-property[editable] > .title > .value {
-  cursor: text;
-}
-
-.variable-or-property[overridden] .title > .value {
-  /* Disallow editing this variable and all child properties. */
-  pointer-events: none;
-}
-
-/* Custom configurable/enumerable/writable or frozen/sealed/extensible
- * variables and properties */
-
-.variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
-  opacity: 0.6;
-}
-
-.variable-or-property[non-configurable]:not([pseudo-item]) > .title > .name {
-  border-bottom: 1px dashed #99f;
-}
-
-.variable-or-property[non-writable]:not([pseudo-item]) > .title > .name {
-  border-bottom: 1px dashed #f99;
-}
-
-.variable-or-property[safe-getter]:not([pseudo-item]) > .title > .name {
-  border-bottom: 1px dashed #8b0;
-}
-
-.variable-or-property-non-writable-icon {
-  background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
-  width: 16px;
-  height: 16px;
-  opacity: 0.5;
-}
-
-@media (min-resolution: 2dppx) {
-  .variable-or-property-non-writable-icon {
-    background-image: url("chrome://browser/skin/identity-icons-https@2x.png");
-    background-size: 32px;
-  }
-}
-
-.variable-or-property-frozen-label,
-.variable-or-property-sealed-label,
-.variable-or-property-non-extensible-label {
-  -moz-padding-end: 4px;
-}
-
-.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
-.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
-.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
-  color: #666;
-}
-
-/* Aligned values */
-
-.variables-view-container[aligned-values] .title > .separator {
-  -moz-box-flex: 1;
-}
-
-.variables-view-container[aligned-values] .title > .value {
-  -moz-box-flex: 0;
-  width: 70vw;
-}
-
-.variables-view-container[aligned-values] .title > .element-value-input {
-  width: calc(70vw - 10px);
-}
-
-/* Actions first */
-
-.variables-view-container[actions-first] .variables-view-delete,
-.variables-view-container[actions-first] .variables-view-add-property {
-  -moz-box-ordinal-group: 0;
-}
-
-.variables-view-container[actions-first] [invisible] {
-  visibility: hidden;
-}
-
-/* Variables and properties tooltips */
-
-.variable-or-property > tooltip > label {
-  margin: 0 2px 0 2px;
-}
-
-.variable-or-property[non-enumerable] > tooltip > label.enumerable,
-.variable-or-property[non-configurable] > tooltip > label.configurable,
-.variable-or-property[non-writable] > tooltip > label.writable,
-.variable-or-property[non-extensible] > tooltip > label.extensible {
-  color: #800;
-  text-decoration: line-through;
-}
-
-.variable-or-property[overridden] > tooltip > label.overridden {
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #000;
-}
-
-.variable-or-property[safe-getter] > tooltip > label.WebIDL {
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #000;
-  color: #080;
-}
-
-/* Variables and properties editing */
-
-.variables-view-delete {
-  list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
-  -moz-image-region: rect(0,16px,16px,0);
-}
-
-.variables-view-delete:hover {
-  -moz-image-region: rect(0,32px,16px,16px);
-}
-
-.variables-view-delete:active {
-  -moz-image-region: rect(0,48px,16px,32px);
-}
-
-.variables-view-edit {
-  background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
-  width: 20px;
-  height: 16px;
-  cursor: pointer;
-}
-
-.variables-view-throbber {
-  background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
-  width: 16px;
-  height: 16px;
-}
-
-.element-value-input {
-  -moz-margin-start: -2px !important;
-  -moz-margin-end: 2px !important;
-}
-
-.element-name-input {
-  -moz-margin-start: -2px !important;
-  -moz-margin-end: 2px !important;
-  font-weight: 600;
-}
-
-.element-value-input,
-.element-name-input {
-  border: 1px solid rgba(128, 128, 128, .5) !important;
-  border-radius: 0;
-  color: inherit;
-}
-
-/* Variables and properties searching */
-
-.variables-view-searchinput {
-  min-height: 24px;
-}
-
-.variable-or-property[unmatched] {
-  border: none;
-  margin: 0;
-}
-
-/* Expand/collapse arrow */
-
-.arrow {
-  -moz-appearance: treetwisty;
-  height: 20px;
-  margin-top: 1px;
-  -moz-margin-start: 10px;
-  -moz-margin-end: 5px;
-}
-
-.arrow[open] {
-  -moz-appearance: treetwistyopen;
-}
-
-.arrow[invisible] {
-  visibility: hidden;
-}
-
-%include ../../shared/devtools/app-manager/manifest-editor.inc.css
--- a/browser/themes/linux/jar.mn
+++ b/browser/themes/linux/jar.mn
@@ -191,25 +191,27 @@ browser.jar:
   skin/classic/browser/devtools/breadcrumbs/rtl-middle.png                   (devtools/breadcrumbs/rtl-middle.png)
   skin/classic/browser/devtools/breadcrumbs/rtl-start-pressed.png            (devtools/breadcrumbs/rtl-start-pressed.png)
   skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
   skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
   skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
   skin/classic/browser/devtools/splitview.css         (devtools/splitview.css)
   skin/classic/browser/devtools/styleeditor.css       (devtools/styleeditor.css)
 * skin/classic/browser/devtools/shadereditor.css      (devtools/shadereditor.css)
-  skin/classic/browser/devtools/debugger.css          (devtools/debugger.css)
+* skin/classic/browser/devtools/debugger.css          (devtools/debugger.css)
 * skin/classic/browser/devtools/profiler.css          (devtools/profiler.css)
-  skin/classic/browser/devtools/netmonitor.css        (devtools/netmonitor.css)
+* skin/classic/browser/devtools/netmonitor.css        (devtools/netmonitor.css)
 * skin/classic/browser/devtools/scratchpad.css        (devtools/scratchpad.css)
   skin/classic/browser/devtools/magnifying-glass.png  (devtools/magnifying-glass.png)
   skin/classic/browser/devtools/option-icon.png       (devtools/option-icon.png)
   skin/classic/browser/devtools/itemToggle.png        (devtools/itemToggle.png)
-  skin/classic/browser/devtools/itemArrow-rtl.png     (devtools/itemArrow-rtl.png)
-  skin/classic/browser/devtools/itemArrow-ltr.png     (devtools/itemArrow-ltr.png)
+  skin/classic/browser/devtools/itemArrow-dark-rtl.png (../shared/devtools/images/itemArrow-dark-rtl.png)
+  skin/classic/browser/devtools/itemArrow-dark-ltr.png (../shared/devtools/images/itemArrow-dark-ltr.png)
+  skin/classic/browser/devtools/itemArrow-rtl.png      (../shared/devtools/images/itemArrow-rtl.png)
+  skin/classic/browser/devtools/itemArrow-ltr.png      (../shared/devtools/images/itemArrow-ltr.png)
   skin/classic/browser/devtools/background-noise-toolbar.png (devtools/background-noise-toolbar.png)
   skin/classic/browser/devtools/noise.png             (devtools/noise.png)
   skin/classic/browser/devtools/inspect-button.png    (devtools/inspect-button.png)
   skin/classic/browser/devtools/dropmarker.png        (devtools/dropmarker.png)
   skin/classic/browser/devtools/layout-background-grid.png (devtools/layout-background-grid.png)
   skin/classic/browser/devtools/layoutview.css        (devtools/layoutview.css)
   skin/classic/browser/devtools/debugger-collapse.png  (devtools/debugger-collapse.png)
   skin/classic/browser/devtools/debugger-expand.png    (devtools/debugger-expand.png)
--- a/browser/themes/osx/devtools/debugger.css
+++ b/browser/themes/osx/devtools/debugger.css
@@ -1,600 +1,6 @@
-/* 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
-
-/* Sources and breakpoints pane */
-
-#sources-pane > tabs {
-  -moz-border-end: 1px solid #222426; /* Match the sources list's dark margin. */
-}
-
-#sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
-  border-color: transparent;
-}
-
-/* Sources toolbar */
-
-#sources-toolbar {
-  border: none; /* Remove the devtools-toolbar's black bottom border. */
-  -moz-border-end: 1px solid #222426; /* Match the sources list's dark margin. */
-}
-
-#sources-toolbar > .devtools-toolbarbutton,
-#sources-controls > .devtools-toolbarbutton {
-  min-width: 32px;
-}
-
-#black-box {
-  list-style-image: url(debugger-blackbox.png);
-}
-
-#pretty-print {
-  font-weight: bold;
-}
-
-#toggle-breakpoints {
-  list-style-image: url(debugger-toggleBreakpoints.png);
-}
-
-#sources-toolbar .devtools-toolbarbutton:not([label]) {
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-#sources .black-boxed {
-  color: #888;
-}
-
-#sources .black-boxed > .dbg-breakpoint {
-  display: none;
-}
-
-#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
-  background-image: none;
-  box-shadow: inset -1px 0 0 #222426;
-}
-
-#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
-  background-image: none;
-  box-shadow: inset 1px 0 0 #222426;
-}
-
-/* Black box message and source progress meter */
-
-#black-boxed-message,
-#source-progress-container {
-  background: url(background-noise-toolbar.png) rgb(61,69,76);
-  /* Prevent the container deck from aquiring the size from this message. */
-  min-width: 1px;
-  min-height: 1px;
-  color: white;
-}
-
-#source-progress {
-  min-height: 2em;
-  min-width: 40em;
-}
-
-#black-boxed-message-label,
-#black-boxed-message-button {
-  text-align: center;
-  font-size: 120%;
-}
-
-#black-boxed-message-button {
-  margin-top: 1em;
-  padding: .25em;
-}
-
-/* Tracer */
-
-#trace {
-  list-style-image: url(tracer-icon.png);
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#trace[checked] {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-#clear-tracer {
-  /* Make this button as narrow as the text inside it. */
-  min-width: 1px;
-}
-
-.trace-name {
-  -moz-padding-start: 4px !important;
-}
-
-/* Tracer dark theme */
-
-.theme-dark .trace-item {
-  color: #f5f7fa; /* Light foreground text */
-}
-
-.theme-dark .trace-item.selected-matching {
-  background-color: rgba(29, 79, 115, .4); /* Select highlight blue at 40% alpha */
-}
-
-.theme-dark .selected > .trace-item {
-  background-color: rgba(29, 79, 115, .75); /* Select highlight blue at 75% alpha */
-}
-
-.theme-dark .trace-call {
-  color: #46afe3; /* highlight blue */
-}
-
-.theme-dark .trace-return,
-.theme-dark .trace-yield {
-  color: #70bf53; /* highlight green */
-}
-
-.theme-dark .trace-throw {
-  color: #eb5368; /* highlight red */
-}
-
-.theme-dark .trace-param {
-  color: #b8c8d9; /* Content text light */
-}
-
-.theme-dark .trace-syntax {
-  color: #8fa1b2; /* Content text grey */
-}
-
-/* Tracer light theme */
-
-.theme-light .trace-item {
-  color: #292e33; /* Dark foreground text */
-}
-
-.theme-light .trace-item.selected-matching {
-  background-color: rgba(76, 158, 217, .4); /* Select highlight blue at 40% alpha */
-}
-
-.theme-light .selected > .trace-item {
-  background-color: rgba(76, 158, 217, .75); /* Select highlight blue at 75% alpha */
-}
-
-.theme-light .trace-call {
-  color: #0088cc; /* highlight blue */
-}
-
-.theme-light .trace-return,
-.theme-light .trace-yield {
-  color: #2cbb0f; /* highlight green */
-}
-
-.theme-light .trace-throw {
-  color: #ed2655; /* highlight red */
-}
-
-.theme-light .trace-param {
-  color: #667380; /* Content text dark grey  */
-}
-
-.theme-light .trace-syntax {
-  color: #8fa1b2; /* Content text grey */
-}
-
-/* Breadcrumbs stack frames view */
-
-.breadcrumbs-widget-item {
-  max-width: none;
-}
-
-.dbg-stackframe-details {
-  -moz-padding-start: 4px;
-}
-
-/* Classic stack frames view */
-
-.dbg-classic-stackframe {
-  display: block;
-  padding: 0px 4px;
-}
-
-.dbg-classic-stackframe-title {
-  font-weight: 600;
-  color: #046;
-}
-
-.dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
-  float: right;
-}
-
-.dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
-  float: left;
-}
-
-.dbg-classic-stackframe-details-url {
-  max-width: 90%;
-  text-align: end;
-  color: #666;
-}
-
-.dbg-classic-stackframe-details-sep {
-  color: #aaa;
-}
-
-.dbg-classic-stackframe-details-line {
-  color: #58b;
-}
-
-#callstack-list .side-menu-widget-item.selected label {
-  color: #fff;
-}
-
-/* Sources and breakpoints view */
-
-.dbg-breakpoint {
-  -moz-margin-start: 4px;
-}
-
-.dbg-breakpoint-line {
-  font-weight: 600;
-}
-
-.dbg-breakpoint-text {
-  -moz-margin-start: 10px !important;
-  font-style: italic;
-  font-size: 90%;
-}
-
-.dbg-breakpoint-checkbox {
-  width: 16px;
-  height: 16px;
-  margin: 2px;
-}
-
-/* Variable bubble view */
-
-.devtools-tooltip-simple-text.token-undefined,
-.devtools-tooltip-simple-text.token-null {
-  text-align: center;
-  color: #666 !important; /* Override the theme's color. */
-}
-
-.devtools-tooltip-simple-text.token-boolean {
-  text-align: center;
-  color: #10c !important;
-}
-
-.devtools-tooltip-simple-text.token-number {
-  text-align: center;
-  color: #c00 !important;
-}
-
-.devtools-tooltip-simple-text.token-string {
-  text-align: start;
-  color: #282 !important;
-}
-
-.devtools-tooltip-simple-text.token-other {
-  text-align: center;
-  color: #333 !important;
-}
-
-/* Instruments pane (watch expressions, variables, event listeners...) */
-
-#instruments-pane .side-menu-widget-container,
-#instruments-pane .side-menu-widget-empty-text {
-  box-shadow: none !important;
-}
-
-/* Watch expressions view */
-
-#expressions {
-  min-height: 10px;
-  max-height: 125px;
-}
-
-.dbg-expression {
-  height: 20px;
-}
-
-.dbg-expression-arrow {
-  width: 16px;
-  height: auto;
-  margin: 2px;
-  background: -moz-image-rect(url(commandline-icon.png), 0, 32, 16, 16);
-}
-
-.dbg-expression-input {
-  color: inherit;
-}
-
-/* Event listeners view */
-
-.dbg-event-listener {
-  padding: 0px 8px;
-}
-
-.dbg-event-listener-type {
-  font-weight: 600;
-}
-
-.dbg-event-listener-separator {
-  color: #999;
-}
-
-.dbg-event-listener-targets {
-  color: #046;
-}
-
-.dbg-event-listener-location {
-  color: #666;
-}
-
-#event-listeners .side-menu-widget-item.selected {
-  background: none !important;
-}
-
-/* Searchbox and the search operations help panel */
-
-#searchbox {
-  min-width: 220px;
-  -moz-margin-start: 1px;
-}
-
-#filter-label {
-  -moz-margin-start: 2px;
-}
-
-#searchbox-panel-operators {
-  margin-top: 5px;
-  margin-bottom: 8px;
-  -moz-margin-start: 2px;
-}
-
-.searchbox-panel-operator-button {
-  min-width: 26px;
-  margin-top: 0;
-  margin-bottom: 0;
-  -moz-margin-start: 2px;
-  -moz-margin-end: 6px;
-  text-align: center;
-}
-
-.searchbox-panel-operator-label {
-  padding-bottom: 2px;
-}
-
-/* Searchbox results panel */
-
-.results-panel {
-  padding: 4px;
-}
-
-.results-panel-item {
-  background: #f4f4f4;
-  border: 1px solid #ddd;
-  border-top-color: #fff;
-  padding: 5px;
-  cursor: pointer;
-}
-
-.results-panel-item:first-of-type {
-  border-top-color: #ddd;
-  border-radius: 4px 4px 0 0;
-}
-
-.results-panel-item:last-of-type {
-  border-radius: 0 0 4px 4px;
-}
-
-.results-panel-item:only-of-type {
-  border-radius: 4px;
-}
-
-.results-panel-item:not(.selected):not(:hover) {
-  text-shadow: 0 1px #fff;
-}
-
-.results-panel-item-label-before {
-  -moz-margin-end: 5px !important;
-  color: #444;
-  cursor: inherit;
-}
-
-.results-panel-item-label {
-  color: #111;
-  font-weight: 600;
-  cursor: inherit;
-}
-
-.results-panel-item-label-below {
-  color: #7f7f7f;
-  cursor: inherit;
-}
-
-/* Sources search view */
-
-#globalsearch {
-  min-height: 10px;
-  max-height: 125px;
-  box-shadow: inset 0 -4px 8px #eee;
-  background: url(background-noise-toolbar.png);
-}
-
-#globalsearch + .devtools-horizontal-splitter {
-  border-color: #bfbfbf;
-}
-
-.dbg-source-results {
-  padding: 0;
-  background: none !important;
-}
-
-.dbg-results-header {
-  -moz-padding-start: 6px;
-}
-
-.dbg-results-header-location {
-  font-weight: 600;
-}
-
-.dbg-results-header-match-count {
-  -moz-padding-start: 6px;
-  color: GrayText;
-}
-
-.dbg-results-line-number {
-  background: #e2e2e2;
-  min-width: 40px;
-  -moz-border-end: 1px solid #b4c4d3;
-  -moz-padding-end: 4px;
-  padding-top: 2px;
-  text-align: end;
-  color: #8c8c8c;
-}
-
-.dbg-results-line-contents {
-  -moz-padding-start: 4px;
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
-
-.dbg-results-line-contents-string {
-  padding: 1px;
-}
-
-.dbg-results-line-contents-string[match=true] {
-  background: rgba(255,255,0,0.5);
-  padding: 0;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.dbg-results-line-contents-string[match=true][focusing] {
-  transition: transform 0.3s ease-in-out;
-}
-
-.dbg-results-line-contents-string[match=true][focused] {
-  transition-duration: 0.1s;
-  transform: scale(1.75, 1.75);
-}
-
-/* Toolbar controls */
-
-.devtools-sidebar-tabs > tabs > tab {
-  min-height: 1em !important;
-  padding: 0 !important;
-}
-
-#resumption-panel-desc {
-  width: 200px;
-}
-
-#resumption-order-panel {
-  -moz-margin-start: -8px;
-}
-
-#resume {
-  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");
-}
-
-#step-in {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
-}
-
-#step-out {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
-}
-
-#debugger-controls > toolbarbutton,
-#sources-controls > toolbarbutton {
-  margin: 0;
-  box-shadow: none;
-  border-radius: 0;
-  border-width: 0;
-  -moz-border-end-width: 1px;
-  outline-offset: -3px;
-}
-
-#debugger-controls > toolbarbutton:last-of-type,
-#sources-controls > toolbarbutton:last-of-type {
-  -moz-border-end-width: 0;
-}
-
-#debugger-controls,
-#sources-controls {
-  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);
-  border: 1px solid hsla(210,8%,5%,.45);
-  border-radius: @toolbarbuttonCornerRadius@;
-  margin: 0 3px;
-}
-
-#instruments-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border: none;
-  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#instruments-pane-toggle[pane-collapsed] {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
-}
-
-#instruments-pane-toggle:active {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-/* Horizontal vs. vertical layout */
-
-#vertical-layout-panes-container {
-  min-height: 35vh;
-  max-height: 80vh;
-}
-
-#body[layout=vertical] #sources-pane > tabs {
-  -moz-border-end: none;
-}
-
-#body[layout=vertical] #instruments-pane {
-  margin: 0 !important;
-  /* To prevent all the margin hacks to hide the sidebar. */
-}
-
-#body[layout=vertical] .side-menu-widget-container,
-#body[layout=vertical] .side-menu-widget-empty-text {
-  box-shadow: none !important;
-}
-
-#body[layout=vertical] .side-menu-widget-item-arrow {
-  background-image: none !important;
-}
-
-#body[layout=vertical] .side-menu-widget-group,
-#body[layout=vertical] .side-menu-widget-item {
-  -moz-margin-end: 0;
-}
+%include ../../shared/devtools/debugger.inc.css
--- a/browser/themes/osx/devtools/netmonitor.css
+++ b/browser/themes/osx/devtools/netmonitor.css
@@ -1,553 +1,6 @@
-/* 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/. */
 
-#body {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-}
-
-/* Network requests table */
-
-#requests-menu-empty-notice {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  padding: 12px;
-  font-size: 110%;
-  color: #fff;
-}
-
-#requests-menu-toolbar {
-  height: 32px;
-  padding: 0;
-}
-
-.requests-menu-header:first-child {
-  -moz-padding-start: 4px;
-}
-
-.requests-menu-subitem {
-  padding: 4px;
-}
-
-.requests-menu-header:not(:last-child):-moz-locale-dir(ltr),
-.requests-menu-subitem:not(:last-child):-moz-locale-dir(ltr) {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
-.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-header-button {
-  -moz-appearance: none;
-  background: none;
-  min-width: 20px;
-  min-height: 32px;
-  margin: 0;
-  border: none;
-  padding: 0;
-  color: inherit;
-  font-weight: inherit !important;
-  transition: background-color 0.1s ease-in-out;
-}
-
-.requests-menu-header-button:hover {
-  background: rgba(0,0,0,0.10);
-}
-
-.requests-menu-header-button:hover:active {
-  background: rgba(0,0,0,0.25);
-}
-
-.requests-menu-header-button:not(:active)[sorted] {
-  background: rgba(0,0,0,0.15);
-}
-
-.requests-menu-header-button:not(:active)[sorted=ascending] {
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-}
-
-.requests-menu-header-button:not(:active)[sorted=descending] {
-  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-  background-position: bottom;
-}
-
-/* Network requests table: specific column dimensions */
-
-.requests-menu-status-and-method {
-  width: 8em;
-}
-
-.requests-menu-status {
-  width: 10px;
-  height: 10px;
-}
-
-.requests-menu-method {
-  text-align: center;
-  font-weight: 600;
-}
-
-.requests-menu-file {
-  width: 20vw;
-  min-width: 4em;
-}
-
-.requests-menu-domain {
-  width: 14vw;
-  min-width: 10em;
-}
-
-.requests-menu-type {
-  text-align: center;
-  width: 4em;
-}
-
-.requests-menu-size {
-  text-align: center;
-  width: 8em;
-}
-
-/* Network requests table: status codes */
-
-box.requests-menu-status {
-  background: #fff;
-  -moz-margin-start: 5px;
-  -moz-margin-end: 5px;
-  border-radius: 20px;
-  box-shadow:
-    0 0 0 1px rgba(255,255,255,0.4) inset,
-    0 -6px 4px 0 rgba(32,32,32,1.0) inset,
-    0 0 8px 0 rgba(32,0,0,0.4);
-  transition: box-shadow 0.5s ease-in-out;
-}
-
-box.requests-menu-status[code^="1"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,0,64,1.0) inset,
-    0 0 8px 0 rgba(0,0,128,1.0);
-}
-
-box.requests-menu-status[code^="2"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,64,0,1.0) inset,
-    0 0 8px 0 rgba(0,128,0,1.0);
-}
-
-box.requests-menu-status[code^="3"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,32,0,1.0) inset,
-    0 0 8px 0 rgba(128,128,0,1.0);
-}
-
-box.requests-menu-status[code^="4"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,0,0,1.0) inset,
-    0 0 8px 0 rgba(128,0,0,1.0);
-}
-
-box.requests-menu-status[code^="5"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,0,64,1.0) inset,
-    0 0 8px 0 rgba(128,0,128,1.0);
-}
-
-/* Network requests table: waterfall header */
-
-#requests-menu-waterfall-label {
-  -moz-padding-start: 8px;
-  -moz-padding-end: 8px;
-}
-
-.requests-menu-timings-division {
-  width: 100px;
-  padding-top: 2px;
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #999;
-  font-size: 75%;
-  pointer-events: none;
-}
-
-.requests-menu-timings-division:not(:first-child) {
-  -moz-margin-start: -100px !important; /* Don't affect layout. */
-}
-
-.requests-menu-timings-division:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings-division:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-/* Network requests table: waterfall items */
-
-.requests-menu-subitem.requests-menu-waterfall {
-  -moz-padding-start: 4px;
-  -moz-padding-end: 4px;
-  background-repeat: repeat-y; /* Background created on a <canvas> in js. */
-  margin-top: -1px; /* Compensate borders. */
-  margin-bottom: -1px;
-}
-
-.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
-  background-position: right center;
-}
-
-.requests-menu-timings:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-.requests-menu-timings-total:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings-total:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-.requests-menu-timings-total {
-  -moz-padding-start: 8px;
-  font-size: 85%;
-  font-weight: 600;
-}
-
-.requests-menu-timings-cap {
-  width: 4px;
-  height: 10px;
-  border: 1px solid #fff;
-}
-
-.requests-menu-timings-cap.start {
-  -moz-border-end: none;
-}
-
-.requests-menu-timings-cap.end {
-  -moz-border-start: none;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(ltr) {
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(rtl) {
-  border-radius: 0 4px 4px 0;
-  transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(ltr) {
-  border-radius: 0 4px 4px 0;
-  transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(rtl) {
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
-}
-
-.requests-menu-timings-box {
-  height: 10px;
-  border-top: 1px solid #fff;
-  border-bottom: 1px solid #fff;
-}
-
-.requests-menu-timings-box.blocked,
-.requests-menu-timings-cap.blocked {
-  background-color: rgba(255,32,32,0.8);
-  box-shadow: 0 0 8px 0 rgba(128,32,32,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.dns,
-.requests-menu-timings-cap.dns {
-  background-color: rgba(255,128,255,0.6);
-  box-shadow: 0 0 8px 0 rgba(128,128,255,1.0),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.connect,
-.requests-menu-timings-cap.connect {
-  background-color: rgba(255,128,16,0.4);
-  box-shadow: 0 0 8px 0 rgba(128,128,16,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.send,
-.requests-menu-timings-cap.send {
-  background-color: rgba(255,255,128,0.4);
-  box-shadow: 0 0 8px 0 rgba(128,255,128,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.wait,
-.requests-menu-timings-cap.wait {
-  background-color: rgba(255,255,255,0.2);
-  box-shadow: 0 0 8px 0 rgba(128,255,255,0.4),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.receive,
-.requests-menu-timings-cap.receive {
-  background-color: rgba(255,255,255,1.0);
-  box-shadow: 0 0 8px 0 rgba(128,255,255,1.0),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-/* SideMenuWidget */
-
-.side-menu-widget-item-contents {
-  padding: 0px;
-}
-
-.side-menu-widget-container {
-  box-shadow: none !important;
-}
-
-.side-menu-widget-item[odd] {
-  background: rgba(255,255,255,0.05);
-}
-
-/* Network request details */
-
-#details-pane {
-  background: hsl(208,11%,27%);
-  max-width: 500px;
-}
-
-#details-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border-color: transparent;
-  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#details-pane-toggle[pane-collapsed] {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
-}
-
-#details-pane-toggle:active {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-/* Network request details tabpanels */
-
-.tabpanel-content {
-  background: url(background-noise-toolbar.png), #3e4750;
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset;
-  color: #fff;
-}
-
-.tabpanel-summary-container {
-  padding: 1px;
-}
-
-.tabpanel-summary-label {
-  -moz-padding-start: 4px;
-  -moz-padding-end: 3px;
-  font-weight: 600;
-  text-shadow: 0 1px 0 #000;
-  color: hsl(210,30%,85%);
-}
-
-.tabpanel-summary-value {
-  -moz-padding-start: 3px;
-}
-
-/* Headers tabpanel */
-
-#headers-summary-status,
-#headers-summary-version {
-  padding-bottom: 2px;
-}
-
-#headers-summary-size {
-  padding-top: 2px;
-}
-
-#headers-summary-resend {
-  margin: 0 6px;
-  min-height: 20px;
-}
-
-/* Response tabpanel */
-
-#response-content-info-header {
-  background:
-    url(background-noise-toolbar.png),
-    linear-gradient(hsl(0,61%,40%), hsl(0,61%,31%)) repeat-x top left;
-  box-shadow:
-    inset 0 1px 0 hsla(210,40%,83%,.15),
-    inset 0 -1px 0 hsla(210,40%,83%,.05);
-  margin: 0;
-  padding: 5px 8px;
-}
-
-#response-content-image-box {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-#response-content-image {
-  background: #fff;
-  border: 1px dashed GrayText;
-  margin-bottom: 10px;
-}
-
-/* Timings tabpanel */
-
-#timings-tabpanel .tabpanel-summary-label {
-  width: 10em;
-}
-
-#timings-tabpanel .requests-menu-timings-box {
-  transition: transform 0.2s ease-out;
-  min-width: 1px;
-}
-
-#timings-tabpanel .requests-menu-timings-total {
-  transition: transform 0.2s ease-out;
-}
-
-/* Custom request form */
-
-#custom-pane {
-  padding: 0.6em 0.5em;
-}
-
-.custom-header {
-  font-size: 1.1em;
-}
-
-.custom-section {
-  margin-top: 0.5em;
-}
-
-#custom-method-value {
-  width: 4.5em;
-}
-
-/* Footer */
-
-#requests-menu-footer {
-  box-shadow: inset 0 1px 16px hsla(210,8%,5%,.3);
-}
-
-.requests-menu-footer-button,
-.requests-menu-footer-label {
-  min-width: 1em;
-  margin: 0;
-  border: none;
-  padding: 2px 1.5vw;
-  color: #fff;
-}
-
-.requests-menu-footer-spacer {
-  min-width: 2px;
-}
-
-.requests-menu-footer-spacer,
-.requests-menu-footer-button {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-footer-button {
-  -moz-appearance: none;
-  background: rgba(0,0,0,0.025);
-}
-
-.requests-menu-footer-button:hover {
-  background: rgba(0,0,0,0.20);
-}
-
-.requests-menu-footer-button:hover:active {
-  background: rgba(0,0,0,0.35);
-}
-
-.requests-menu-footer-button:not(:active)[checked] {
-  background-color: rgba(0,0,0,0.25);
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-}
-
-.requests-menu-footer-label {
-  font-weight: 600;
-}
-
-/* Responsive sidebar */
-@media (max-width: 700px) {
-  #requests-menu-toolbar {
-    height: 24px;
-  }
-
-  .requests-menu-header-button {
-    min-height: 24px;
-  }
-
-  .requests-menu-footer-button,
-  .requests-menu-footer-label {
-    padding: 2px 2vw;
-  }
-
-  #details-pane {
-    max-width: none;
-    margin: 0 !important;
-    /* To prevent all the margin hacks to hide the sidebar. */
-  }
-
-  .requests-menu-status-and-method {
-    width: 16vw;
-  }
-
-  .requests-menu-file,
-  .requests-menu-domain {
-    width: 30vw;
-  }
-
-  .requests-menu-type {
-    width: 8vw;
-  }
-
-  .requests-menu-size {
-    width: 16vw;
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Timeline" header is not visible anymore, and thus the
-       right border and box-shadow of "Size" column should be hidden. */
-  }
-}
-
-@media (min-width: 701px) {
-  #network-table[type-overflows] .requests-menu-domain {
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Type" header is not visible anymore, and thus the
-       right border and box-shadow of "Domain" column should be hidden. */
-  }
-
-  #network-table[domain-overflows] .requests-menu-file {
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Domain" header is not visible anymore, and thus the
-       right border and box-shadow of "File" column should be hidden. */
-  }
-}
+%include ../shared.inc
+%include ../../shared/devtools/netmonitor.inc.css
--- a/browser/themes/osx/devtools/widgets.css
+++ b/browser/themes/osx/devtools/widgets.css
@@ -1,713 +1,6 @@
-/* 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/. */
 
-/* Generic pane helpers */
-
-.generic-toggled-side-pane {
-  -moz-margin-start: 0px !important;
-  /* Unfortunately, transitions don't work properly with locale-aware properties,
-     so both the left and right margins are set via js, while the start margin
-     is always overridden here. */
-}
-
-.generic-toggled-side-pane[animated] {
-  transition: margin 0.25s ease-in-out;
-}
-
-/* BreacrumbsWidget */
-
-.breadcrumbs-widget-container {
-  -moz-margin-end: 3px;
-  /* A fake 1px-shadow is included in the border-images of the
-     breadcrumbs-widget-items, to match toolbar-buttons style.
-     This negative margin compensates the extra row of pixels created
-     by the shadow.*/
-  margin-bottom: -1px;
-}
-
-/* Preloading hack, LTR */
-
-.breadcrumbs-widget-container:-moz-locale-dir(ltr)::after {
-  content: '';
-  display: block;
-  background-image:
-    url(breadcrumbs/ltr-start.png),
-    url(breadcrumbs/ltr-start-selected.png),
-    url(breadcrumbs/ltr-start-pressed.png),
-    url(breadcrumbs/ltr-start-selected-pressed.png),
-    url(breadcrumbs/ltr-middle.png),
-    url(breadcrumbs/ltr-middle-selected.png),
-    url(breadcrumbs/ltr-middle-pressed.png),
-    url(breadcrumbs/ltr-middle-selected-pressed.png),
-    url(breadcrumbs/ltr-end.png),
-    url(breadcrumbs/ltr-end-selected.png),
-    url(breadcrumbs/ltr-end-pressed.png),
-    url(breadcrumbs/ltr-end-selected-pressed.png);
-}
-
-/* Preloading hack, RTL */
-
-.breadcrumbs-widget-container:-moz-locale-dir(rtl)::after {
-  content: '';
-  display: block;
-  background-image:
-    url(breadcrumbs/rtl-start.png),
-    url(breadcrumbs/rtl-start-selected.png),
-    url(breadcrumbs/rtl-start-pressed.png),
-    url(breadcrumbs/rtl-start-selected-pressed.png),
-    url(breadcrumbs/rtl-middle.png),
-    url(breadcrumbs/rtl-middle-selected.png),
-    url(breadcrumbs/rtl-middle-pressed.png),
-    url(breadcrumbs/rtl-middle-selected-pressed.png),
-    url(breadcrumbs/rtl-end.png),
-    url(breadcrumbs/rtl-end-selected.png),
-    url(breadcrumbs/rtl-end-pressed.png),
-    url(breadcrumbs/rtl-end-selected-pressed.png);
-}
-
-.scrollbutton-up,
-.scrollbutton-down {
-  -moz-appearance: none;
-  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);
-  border: 1px solid hsla(210,8%,5%,.45);
-  margin: 0 0 1px;
-}
-
-.scrollbutton-up:not([disabled]):active:hover,
-.scrollbutton-down:not([disabled]):active:hover {
-  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);
-  border-color: hsla(210,8%,5%,.6);
-}
-
-.scrollbutton-up > .toolbarbutton-icon,
-.scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
-  list-style-image: url("breadcrumbs-scrollbutton.png");
-  -moz-image-region: rect(0px,7px,16px,0px);
-  margin: 0 5px;
-}
-
-.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  -moz-image-region: rect(0px,14px,16px,7px);
-}
-
-.scrollbutton-up[disabled] > .toolbarbutton-icon,
-.scrollbutton-down[disabled] > .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
-.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
-  transform: scaleX(-1);
-}
-
-.breadcrumbs-widget-item {
-  background-color: transparent;
-  -moz-appearance: none;
-  overflow: hidden;
-  min-width: 85px;
-  max-width: 250px;
-  min-height: 25px;
-  border-style: solid;
-  border-width: 1px 13px 2px 13px;
-  margin: 0 -11px 0 0;
-  padding: 0 9px;
-  outline: none;
-  color: hsl(210,30%,85%);
-}
-
-.breadcrumbs-widget-item:-moz-focusring > label {
-  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag {
-  color: hsl(208,100%,60%);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id {
-  color: hsl(205,100%,70%);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes {
-  color: hsl(20,100%,70%);
-}
-
-.breadcrumbs-widget-item-id,
-.breadcrumbs-widget-item-classes {
-  color: #8d99a6;
-}
-
-.breadcrumbs-widget-item-pseudo-classes {
-  color: hsl(20,100%,85%);
-}
-
-/* Breadcrumbs LTR */
-
-.breadcrumbs-widget-item:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
-  border-left-width: 0;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
-  border-right-width: 0;
-}
-
-/* Breadcrumbs RTL */
-
-.breadcrumbs-widget-item:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
-  border-right-width: 0;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
-  border-left-width: 0;
-}
-
-/* SimpleListWidget */
-
-.simple-list-widget-item:not(.selected):hover {
-  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.85)), Highlight;
-}
-
-.simple-list-widget-item.selected {
-  background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.8)), Highlight;
-  color: #000;
-}
-
-.simple-list-widget-perma-text,
-.simple-list-widget-empty-text {
-  color: GrayText;
-  padding: 4px 8px;
-}
-
-/* FastListWidget */
-
-.fast-list-widget-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.theme-dark .fast-list-widget-empty-text {
-  padding: 12px;
-  font-weight: 600;
-  color: #fff;
-}
-
-.theme-light .fast-list-widget-empty-text {
-  padding: 4px 8px;
-  color: GrayText;
-}
-
-/* SideMenuWidget */
-
-.side-menu-widget-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.side-menu-widget-container[theme="dark"] {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  color: #fff;
-}
-
-.side-menu-widget-container[theme="light"] {
-  background: #fff;
-  color: #000;
-}
-
-/* SideMenuWidget container */
-
-.side-menu-widget-container:-moz-locale-dir(ltr),
-.side-menu-widget-empty-text:-moz-locale-dir(ltr) {
-  box-shadow: inset -1px 0 0 #222426;
-}
-
-.side-menu-widget-container:-moz-locale-dir(rtl),
-.side-menu-widget-empty-text:-moz-locale-dir(rtl) {
-  box-shadow: inset 1px 0 0 #222426;
-}
-
-.side-menu-widget-group {
-  /* To allow visibility of the dark margin shadow. */
-  -moz-margin-end: 1px;
-}
-
-.side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
-  /* To compensate for the arrow image's dark margin. */
-  -moz-margin-end: -1px;
-}
-
-/* SideMenuWidget groups */
-
-.side-menu-widget-group-title {
-  padding: 4px;
-}
-
-.side-menu-widget-group-title[theme="dark"] {
-  background-image: linear-gradient(#1f3e4f, #1b3243);
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
-              0 -2px 0 hsla(206,37%,4%,.05) inset,
-              0 -1px 1px hsla(206,37%,4%,.1) inset;
-}
-
-.side-menu-widget-group-title[theme="light"] {
-  background-image: linear-gradient(#fff, #eee);
-}
-
-/* SideMenuWidget items */
-
-.side-menu-widget-item[theme="dark"] {
-  border-top: 1px solid hsla(210,8%,5%,.25);
-  border-bottom: 1px solid hsla(210,16%,76%,.1);
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
-
-.side-menu-widget-item[theme="light"] {
-  border-top: 1px solid hsla(210,8%,75%,.25);
-  border-bottom: 1px solid hsla(210,16%,76%,.1);
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
-
-.side-menu-widget-item[theme="dark"]:last-of-type {
-  box-shadow: inset 0 -1px 0 hsla(210,8%,5%,.25);
-}
-
-.side-menu-widget-item[theme="light"]:last-of-type {
-  box-shadow: inset 0 -1px 0 hsla(210,8%,75%,.25);
-}
-
-.side-menu-widget-item.selected {
-  background: linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%)) repeat-x top left !important;
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15);
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
-  background-size: auto, 1px 100%;
-  background-repeat: no-repeat;
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
-  background-image: url(itemArrow-ltr.png), linear-gradient(to right, #222426, #222426);
-  background-position: center right, top right;
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
-  background-image: url(itemArrow-rtl.png), linear-gradient(to right, #222426, #222426);
-  background-position: center left, top left;
-}
-
-/* SideMenuWidget items contents */
-
-.side-menu-widget-item-contents {
-  padding: 4px 0px;
-}
-
-.side-menu-widget-item-arrow {
-  -moz-margin-start: -8px;
-  width: 8px;
-}
-
-.side-menu-widget-item-other {
-  background: url(background-noise-toolbar.png), hsla(208,11%,27%, 0.65);
-}
-
-.side-menu-widget-item-other.selected {
-  background: url(background-noise-toolbar.png), hsla(208,11%,27%, 0.15);
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.07),
-              inset 0 -1px 0 hsla(210,40%,83%,.07);
-}
-
-.side-menu-widget-item-other:first-of-type {
-  margin-top: 4px;
-  border-top-left-radius: 4px;
-}
-
-.side-menu-widget-item-other:last-of-type {
-  margin-bottom: -4px;
-}
-
-.side-menu-widget-item-other > label {
-  color: #f5f7fa;
-  text-shadow: 0 1px 1px #111;
-}
-
-/* SideMenuWidget checkboxes */
-
-.side-menu-widget-group-checkbox {
-  margin: 0;
-  -moz-margin-end: 4px;
-}
-
-.side-menu-widget-item-checkbox {
-  margin: 0;
-  -moz-margin-start: 4px;
-  -moz-margin-end: -4px;
-}
-
-/* SideMenuWidget misc */
-
-.side-menu-widget-empty-text[theme="dark"] {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  padding: 12px;
-  font-weight: 600;
-  color: #fff;
-}
-
-.side-menu-widget-empty-text[theme="light"] {
-  background: #fff;
-  padding: 4px 8px;
-  color: GrayText;
-}
-
-/* VariablesView */
-
-.variables-view-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.variables-view-empty-notice {
-  color: GrayText;
-  padding: 2px;
-}
-
-.variables-view-scope > .title {
-  color: #fff;
-}
-
-/* Generic variables traits */
-
-.variables-view-variable:not(:last-child) {
-  border-bottom: 1px solid rgba(128, 128, 128, .15);
-}
-
-.variables-view-variable > .title > .name {
-  font-weight: 600;
-}
-
-/* Generic variables *and* properties traits */
-
-.variable-or-property:focus > .title > label {
-  color: inherit !important;
-}
-
-.variable-or-property > .title > .value {
-  -moz-box-flex: 1;
-}
-
-.variable-or-property > .title > .arrow {
-  -moz-margin-start: 3px;
-}
-
-.variable-or-property:not([untitled]) > .variables-view-element-details {
-  -moz-margin-start: 7px;
-}
-
-/* Traits applied when variables or properties are changed or overridden */
-
-.variable-or-property:not([overridden]) {
-  transition: background 1s ease-in-out;
-}
-
-.variable-or-property:not([overridden])[changed] {
-  transition-duration: .4s;
-}
-
-.variable-or-property[overridden] {
-  background: rgba(128,128,128,0.05);
-}
-
-.variable-or-property[overridden] .title > label {
-  /* Cross out the title for this variable and all child properties. */
-  font-style: italic;
-  text-decoration: line-through;
-  border-bottom: none !important;
-  color: rgba(128,128,128,0.9);
-  opacity: 0.7;
-}
-
-/* Traits applied when variables or properties are editable */
-
-.variable-or-property[editable] > .title > .value {
-  cursor: text;
-}
-
-.variable-or-property[overridden] .title > .value {
-  /* Disallow editing this variable and all child properties. */
-  pointer-events: none;
-}
-
-/* Custom configurable/enumerable/writable or frozen/sealed/extensible
- * variables and properties */
-
-.variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
-  opacity: 0.6;
-}
-
-.variable-or-property[non-configurable]:not([pseudo-item]) > .title > .name {
-  border-bottom: 1px dashed #99f;
-}
-
-.variable-or-property[non-writable]:not([pseudo-item]) > .title > .name {
-  border-bottom: 1px dashed #f99;
-}
-
-.variable-or-property[safe-getter]:not([pseudo-item]) > .title > .name {
-  border-bottom: 1px dashed #8b0;
-}
-
-.variable-or-property-non-writable-icon {
-  background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
-  width: 16px;
-  height: 16px;
-  opacity: 0.5;
-}
-
-@media (min-resolution: 2dppx) {
-  .variable-or-property-non-writable-icon {
-    background-image: url("chrome://browser/skin/identity-icons-https@2x.png");
-    background-size: 32px;
-  }
-}
-
-.variable-or-property-frozen-label,
-.variable-or-property-sealed-label,
-.variable-or-property-non-extensible-label {
-  -moz-padding-end: 4px;
-}
-
-.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
-.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
-.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
-  color: #666;
-}
-
-/* Aligned values */
-
-.variables-view-container[aligned-values] .title > .separator {
-  -moz-box-flex: 1;
-}
-
-.variables-view-container[aligned-values] .title > .value {
-  -moz-box-flex: 0;
-  width: 70vw;
-}
-
-.variables-view-container[aligned-values] .title > .element-value-input {
-  width: calc(70vw - 10px);
-}
-
-/* Actions first */
-
-.variables-view-container[actions-first] .variables-view-delete,
-.variables-view-container[actions-first] .variables-view-add-property {
-  -moz-box-ordinal-group: 0;
-}
-
-.variables-view-container[actions-first] [invisible] {
-  visibility: hidden;
-}
-
-/* Variables and properties tooltips */
-
-.variable-or-property > tooltip > label {
-  margin: 0 2px 0 2px;
-}
-
-.variable-or-property[non-enumerable] > tooltip > label.enumerable,
-.variable-or-property[non-configurable] > tooltip > label.configurable,
-.variable-or-property[non-writable] > tooltip > label.writable,
-.variable-or-property[non-extensible] > tooltip > label.extensible {
-  color: #800;
-  text-decoration: line-through;
-}
-
-.variable-or-property[overridden] > tooltip > label.overridden {
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #000;
-}
-
-.variable-or-property[safe-getter] > tooltip > label.WebIDL {
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #000;
-  color: #080;
-}
-
-/* Variables and properties editing */
-
-.variables-view-delete {
-  list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
-  -moz-image-region: rect(0,16px,16px,0);
-}
-
-.variables-view-delete:hover {
-  -moz-image-region: rect(0,32px,16px,16px);
-}
-
-.variables-view-delete:active {
-  -moz-image-region: rect(0,48px,16px,32px);
-}
-
-.variables-view-edit {
-  background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
-  width: 20px;
-  height: 16px;
-  cursor: pointer;
-}
-
-.variables-view-throbber {
-  background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
-  width: 16px;
-  height: 16px;
-}
-
-.element-value-input {
-  -moz-margin-start: -2px !important;
-  -moz-margin-end: 2px !important;
-}
-
-.element-name-input {
-  -moz-margin-start: -2px !important;
-  -moz-margin-end: 2px !important;
-  font-weight: 600;
-}
-
-.element-value-input,
-.element-name-input {
-  border: 1px solid rgba(128, 128, 128, .5) !important;
-  border-radius: 0;
-  color: inherit;
-}
-
-/* Variables and properties searching */
-
-.variables-view-searchinput {
-  min-height: 24px;
-}
-
-.variable-or-property[unmatched] {
-  border: none;
-  margin: 0;
-}
-
-/* Expand/collapse arrow */
-
-.arrow {
-  -moz-appearance: treetwisty;
-}
-
-.arrow[open] {
-  -moz-appearance: treetwistyopen;
-}
-
-.arrow[invisible] {
-  visibility: hidden;
-}
-
-%include ../../shared/devtools/app-manager/manifest-editor.inc.css
+%include ../shared.inc
+%include ../../shared/devtools/widgets.inc.css
--- a/browser/themes/osx/jar.mn
+++ b/browser/themes/osx/jar.mn
@@ -296,23 +296,25 @@ browser.jar:
   skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
   skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
   skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
   skin/classic/browser/devtools/splitview.css               (devtools/splitview.css)
   skin/classic/browser/devtools/styleeditor.css             (devtools/styleeditor.css)
 * skin/classic/browser/devtools/shadereditor.css            (devtools/shadereditor.css)
 * skin/classic/browser/devtools/debugger.css                (devtools/debugger.css)
 * skin/classic/browser/devtools/profiler.css                (devtools/profiler.css)
-  skin/classic/browser/devtools/netmonitor.css              (devtools/netmonitor.css)
+* skin/classic/browser/devtools/netmonitor.css              (devtools/netmonitor.css)
 * skin/classic/browser/devtools/scratchpad.css              (devtools/scratchpad.css)
   skin/classic/browser/devtools/magnifying-glass.png        (devtools/magnifying-glass.png)
   skin/classic/browser/devtools/option-icon.png             (devtools/option-icon.png)
   skin/classic/browser/devtools/itemToggle.png              (devtools/itemToggle.png)
-  skin/classic/browser/devtools/itemArrow-rtl.png           (devtools/itemArrow-rtl.png)
-  skin/classic/browser/devtools/itemArrow-ltr.png           (devtools/itemArrow-ltr.png)
+  skin/classic/browser/devtools/itemArrow-dark-rtl.png      (../shared/devtools/images/itemArrow-dark-rtl.png)
+  skin/classic/browser/devtools/itemArrow-dark-ltr.png      (../shared/devtools/images/itemArrow-dark-ltr.png)
+  skin/classic/browser/devtools/itemArrow-rtl.png           (../shared/devtools/images/itemArrow-rtl.png)
+  skin/classic/browser/devtools/itemArrow-ltr.png           (../shared/devtools/images/itemArrow-ltr.png)
   skin/classic/browser/devtools/background-noise-toolbar.png (devtools/background-noise-toolbar.png)
   skin/classic/browser/devtools/noise.png                   (devtools/noise.png)
   skin/classic/browser/devtools/inspect-button.png          (devtools/inspect-button.png)
   skin/classic/browser/devtools/dropmarker.png              (devtools/dropmarker.png)
   skin/classic/browser/devtools/layout-background-grid.png  (devtools/layout-background-grid.png)
   skin/classic/browser/devtools/layoutview.css              (devtools/layoutview.css)
   skin/classic/browser/devtools/debugger-collapse.png       (devtools/debugger-collapse.png)
   skin/classic/browser/devtools/debugger-expand.png         (devtools/debugger-expand.png)
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/devtools/debugger.inc.css
@@ -0,0 +1,623 @@
+/* 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/. */
+
+/* Sources and breakpoints pane */
+
+#sources-pane > tabs {
+  -moz-border-end: 1px solid #222426; /* Match the sources list's dark margin. */
+}
+
+#sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
+  border-color: transparent;
+}
+
+#sources-pane .devtools-toolbar {
+  border: none; /* Remove the devtools-toolbar's black bottom border. */
+  -moz-border-end: 1px solid #222426; /* Match the sources list's dark margin. */
+}
+
+/* Sources and breakpoints list */
+
+.dbg-source-item {
+  padding: 2px 0px;
+}
+
+.dbg-breakpoint-line {
+  font-weight: 600;
+}
+
+.dbg-breakpoint-text {
+  -moz-padding-start: 6px;
+  font-style: italic;
+  font-size: 90%;
+}
+
+.dbg-breakpoint-checkbox {
+  width: 16px;
+  height: 16px;
+  margin: 2px;
+}
+
+/* Sources toolbar */
+
+#sources-toolbar > .devtools-toolbarbutton,
+#sources-controls > .devtools-toolbarbutton {
+  min-width: 32px;
+}
+
+#black-box {
+  list-style-image: url(debugger-blackbox.png);
+}
+
+#pretty-print {
+  font-weight: bold;
+}
+
+#toggle-breakpoints {
+  list-style-image: url(debugger-toggleBreakpoints.png);
+}
+
+#sources-toolbar .devtools-toolbarbutton:not([label]) {
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+#sources .black-boxed {
+  color: rgba(255,255,255,0.4);
+}
+
+#sources .black-boxed > .dbg-breakpoint {
+  display: none;
+}
+
+/* Black box message and source progress meter */
+
+#black-boxed-message,
+#source-progress-container {
+  background: url(background-noise-toolbar.png);
+  /* Prevent the container deck from aquiring the size from this message. */
+  min-width: 1px;
+  min-height: 1px;
+}
+
+#source-progress {
+  min-height: 2em;
+  min-width: 40em;
+}
+
+#black-boxed-message-label,
+#black-boxed-message-button {
+  text-align: center;
+  font-size: 120%;
+}
+
+#black-boxed-message-button {
+  margin-top: 1em;
+  padding: .25em;
+}
+
+/* Breadcrumbs stack frames view */
+
+.breadcrumbs-widget-item {
+  max-width: none;
+}
+
+.dbg-stackframe-details {
+  -moz-padding-start: 4px;
+}
+
+/* Classic stack frames view */
+
+.dbg-classic-stackframe {
+  display: block;
+}
+
+.dbg-classic-stackframe-title {
+  font-weight: 600;
+}
+
+.dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
+  float: right;
+}
+
+.dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
+  float: left;
+}
+
+.dbg-classic-stackframe-details-url {
+  max-width: 90%;
+  text-align: end;
+}
+
+.theme-dark .dbg-classic-stackframe-details-url {
+  color: #b8c8d9; /* Light content text */
+}
+
+.theme-light .dbg-classic-stackframe-details-url {
+  color: #667380; /* Dark grey content text */
+}
+
+.theme-dark .dbg-classic-stackframe-details-sep {
+  color: #b6babf; /* Grey foreground text */
+}
+
+.theme-light .dbg-classic-stackframe-details-sep {
+  color: #585959; /* Grey foreground text */
+}
+
+.theme-dark .dbg-classic-stackframe-details-line {
+  color: #5e88b0; /* Highlight blue grey */
+}
+
+.theme-light .dbg-classic-stackframe-details-line {
+  color: #5f88b0; /* Highlight blue grey */
+}
+
+#callstack-list .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Tracer */
+
+#trace {
+  list-style-image: url(tracer-icon.png);
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#trace[checked] {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+#clear-tracer {
+  /* Make this button as narrow as the text inside it. */
+  min-width: 1px;
+}
+
+.trace-name {
+  -moz-padding-start: 4px;
+}
+
+/* Tracer dark theme */
+
+.theme-dark .trace-item {
+  color: #f5f7fa; /* Light foreground text */
+}
+
+.theme-dark .trace-item.selected-matching {
+  background-color: rgba(29,79,115,.4); /* Select highlight blue at 40% alpha */
+}
+
+.theme-dark .selected > .trace-item {
+  background-color: rgba(29,79,115,.6); /* Select highlight blue at 60% alpha */
+}
+
+.theme-dark .trace-call {
+  color: #46afe3; /* Highlight blue */
+}
+
+.theme-dark .trace-return,
+.theme-dark .trace-yield {
+  color: #70bf53; /* Highlight green */
+}
+
+.theme-dark .trace-throw {
+  color: #eb5368; /* Highlight red */
+}
+
+.theme-dark .trace-param {
+  color: #b8c8d9; /* Content text light */
+}
+
+.theme-dark .trace-syntax {
+  color: #8fa1b2; /* Content text grey */
+}
+
+/* Tracer light theme */
+
+.theme-light .trace-item {
+  color: #292e33; /* Dark foreground text */
+}
+
+.theme-light .trace-item.selected-matching {
+  background-color: rgba(76,158,217,.4); /* Select highlight blue at 40% alpha */
+}
+
+.theme-light .selected > .trace-item {
+  background-color: rgba(76,158,217,.6); /* Select highlight blue at 60% alpha */
+}
+
+.theme-light .trace-call {
+  color: #0088cc; /* Highlight blue */
+}
+
+.theme-light .trace-return,
+.theme-light .trace-yield {
+  color: #2cbb0f; /* Highlight green */
+}
+
+.theme-light .trace-throw {
+  color: #ed2655; /* Highlight red */
+}
+
+.theme-light .trace-param {
+  color: #667380; /* Content text dark grey  */
+}
+
+.theme-light .trace-syntax {
+  color: #8fa1b2; /* Content text grey */
+}
+
+#tracer-traces .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Watch expressions view */
+
+#expressions {
+  min-height: 10px;
+  max-height: 125px;
+}
+
+.dbg-expression {
+  height: 20px;
+}
+
+.dbg-expression-arrow {
+  width: 16px;
+  height: auto;
+  margin: 2px;
+  background: -moz-image-rect(url(commandline-icon.png), 0, 32, 16, 16);
+}
+
+.dbg-expression-input {
+  color: inherit;
+}
+
+/* Event listeners view */
+
+.dbg-event-listener-type {
+  font-weight: 600;
+}
+
+.theme-dark .dbg-event-listener-location {
+  color: #b8c8d9; /* Light content text */
+}
+
+.theme-light .dbg-event-listener-location {
+  color: #667380; /* Dark grey content text */
+}
+
+.theme-dark .dbg-event-listener-separator {
+  color: #b6babf; /* Grey foreground text */
+}
+
+.theme-light .dbg-event-listener-separator {
+  color: #585959; /* Grey foreground text */
+}
+
+.theme-dark .dbg-event-listener-targets {
+  color: #5e88b0; /* Highlight blue grey */
+}
+
+.theme-light .dbg-event-listener-targets {
+  color: #5f88b0; /* Highlight blue grey */
+}
+
+.theme-dark #event-listeners .selected {
+  /* Selected items shouldn't be displayed differently. */
+  background: none;
+  color: #fff;
+}
+
+.theme-light #event-listeners .selected {
+  /* Selected items shouldn't be displayed differently. */
+  background: none;
+  color: #000;
+}
+
+/* Searchbox and the search operations help panel */
+
+#searchbox {
+  min-width: 220px;
+  -moz-margin-start: 1px;
+}
+
+#filter-label {
+  -moz-margin-start: 2px;
+}
+
+#searchbox-panel-operators {
+  margin-top: 5px;
+  margin-bottom: 8px;
+  -moz-margin-start: 2px;
+}
+
+.searchbox-panel-operator-button {
+  min-width: 26px;
+  margin-top: 0;
+  margin-bottom: 0;
+  -moz-margin-start: 2px;
+  -moz-margin-end: 6px;
+  text-align: center;
+}
+
+.searchbox-panel-operator-label {
+  padding-bottom: 2px;
+}
+
+/* Searchbox results panel */
+
+#results-panel {
+  border: none;
+}
+
+.results-panel-item {
+  padding: 6px 8px;
+  border-top: 1px solid rgba(128,128,128,0.2);
+}
+
+.results-panel-item:first-of-type {
+  border-top: none;
+}
+
+.results-panel-item-label {
+  font-weight: 600;
+}
+
+.results-panel-item-label-before {
+  -moz-padding-end: 6px;
+}
+
+.theme-dark .results-panel-item-label {
+  color: #f5f7fa; /* Light foreground text */
+}
+
+.theme-light .results-panel-item-label {
+  color: #18191a; /* Dark foreground text */
+}
+
+.theme-dark .results-panel-item-label-before {
+  color: #5e88b0; /* Highlight blue grey */
+}
+
+.theme-light .results-panel-item-label-before {
+  color: #5f88b0; /* Highlight blue grey */
+}
+
+.theme-dark .results-panel-item-label-below {
+  color: #5f7387; /* Dark grey content text */
+}
+
+.theme-light .results-panel-item-label-below {
+  color: #667380; /* Dark grey content text */
+}
+
+#results-panel .selected label {
+  /* Text inside a selected item should not be custom colored. */
+  color: inherit !important;
+}
+
+/* Sources search view */
+
+#globalsearch {
+  min-height: 10px;
+  max-height: 50vh;
+}
+
+.dbg-results-header {
+  -moz-padding-start: 6px;
+}
+
+.dbg-results-header-location {
+  font-weight: 600;
+}
+
+.dbg-results-header-match-count {
+  -moz-padding-start: 6px;
+}
+
+.dbg-results-line-number {
+  min-width: 3em;
+  -moz-border-end: 1px solid rgba(128,128,128,0.2);
+  -moz-padding-end: 4px;
+  text-align: end;
+}
+
+.dbg-results-line-contents {
+  -moz-padding-start: 4px;
+}
+
+.dbg-results-line-contents-string[match=true] {
+  background-color: rgba(255,255,0,0.2);
+  border: 1px solid rgba(128,128,128,0.7);
+  border-radius: 4px;
+  margin-top: -1px !important;
+  margin-bottom: -1px !important;
+  cursor: pointer;
+}
+
+.dbg-results-line-contents-string[match=true][focusing] {
+  transition: transform 0.3s ease-in-out;
+}
+
+.dbg-results-line-contents-string[match=true][focused] {
+  transition-duration: 0.1s;
+  transform: scale(1.75, 1.75);
+}
+
+.theme-dark .dbg-results-header {
+  background-color: #252c33; /* Tab toolbar */
+  color: #b8c8d9; /* Light content text */
+}
+
+.theme-light .dbg-results-header {
+  background-color: #ebeced; /* Tab toolbar */
+  color: #667380; /* Dark grey content text */
+}
+
+.theme-dark .dbg-search-result:hover {
+  background-color: rgba(29,79,115,.2); /* Select highlight blue at 40% alpha */
+}
+
+.theme-light .dbg-search-result:hover {
+  background-color: rgba(76,158,217,.2); /* Select highlight blue at 40% alpha */
+}
+
+.theme-dark .dbg-results-header-match-count {
+  color: #5f7387; /* Dark grey content text */
+}
+
+.theme-light .dbg-results-header-match-count {
+  color: #667380; /* Dark grey content text */
+}
+
+.theme-dark .dbg-results-line-number {
+  background-color: #252c33; /* Tab toolbars */
+  color: #b6babf; /* Grey foreground text */
+}
+
+.theme-light .dbg-results-line-number {
+  background-color: #ebeced; /* Tab toolbars */
+  color: #585959; /* Grey foreground text */
+}
+
+.theme-dark .dbg-results-line-contents-string {
+  color: #b6babf; /* Grey foreground text */
+}
+
+.theme-light .dbg-results-line-contents-string {
+  color: #585959; /* Grey foreground text */
+}
+
+.theme-dark .dbg-results-line-contents-string[match=true] {
+  color: #f5f7fa; /* Light foreground text */
+}
+
+.theme-light .dbg-results-line-contents-string[match=true] {
+  color: #18191a; /* Dark foreground text */
+}
+
+/* Toolbar controls */
+
+.devtools-sidebar-tabs > tabs > tab {
+  min-height: 1em !important;
+  padding: 0 !important;
+}
+
+#resumption-panel-desc {
+  width: 200px;
+}
+
+#resumption-order-panel {
+  -moz-margin-start: -8px;
+}
+
+#resume {
+  list-style-image: url(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(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(debugger-step-over.png);
+}
+
+#step-in {
+  list-style-image: url(debugger-step-in.png);
+}
+
+#step-out {
+  list-style-image: url(debugger-step-out.png);
+}
+
+#debugger-controls > toolbarbutton,
+#sources-controls > toolbarbutton {
+  margin: 0;
+  box-shadow: none;
+  border-radius: 0;
+  border-width: 0;
+  -moz-border-end-width: 1px;
+  outline-offset: -3px;
+}
+
+#debugger-controls > toolbarbutton:last-of-type,
+#sources-controls > toolbarbutton:last-of-type {
+  -moz-border-end-width: 0;
+}
+
+#debugger-controls,
+#sources-controls {
+  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);
+  border: 1px solid hsla(210,8%,5%,.45);
+  border-radius: 3px;
+  margin: 0 3px;
+}
+
+#instruments-pane-toggle {
+  background: none;
+  box-shadow: none;
+  border: none;
+  list-style-image: url(debugger-collapse.png);
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#instruments-pane-toggle[pane-collapsed] {
+  list-style-image: url(debugger-expand.png);
+}
+
+#instruments-pane-toggle:active {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+/* Horizontal vs. vertical layout */
+
+#vertical-layout-panes-container {
+  min-height: 35vh;
+  max-height: 80vh;
+}
+
+#body[layout=vertical] #sources-pane > tabs {
+  -moz-border-end: none;
+}
+
+#body[layout=vertical] #instruments-pane {
+  margin: 0 !important;
+  /* To prevent all the margin hacks to hide the sidebar. */
+}
+
+#body[layout=vertical] .side-menu-widget-container,
+#body[layout=vertical] .side-menu-widget-empty-text {
+  box-shadow: none !important;
+}
+
+#body[layout=vertical] .side-menu-widget-item-arrow {
+  background-image: none !important;
+}
+
+#body[layout=vertical] .side-menu-widget-group,
+#body[layout=vertical] .side-menu-widget-item {
+  -moz-margin-end: 0;
+}
new file mode 100644
index 0000000000000000000000000000000000000000..375dd86f606eddc85706a9d32ecad786d78a3319
GIT binary patch
literal 2895
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
new file mode 100644
index 0000000000000000000000000000000000000000..5a639fd0d470d38556a284ff977e55843312b0b1
GIT binary patch
literal 2912
zc$@)X3!n6fP)<h;3K|Lk000e1NJLTq000L7000aK1^@s6u9c?{00009a7bBm000XU
z000XU0RWnu7ytkYPiaF#P*7-ZbZ>KLZ*U+<Lqi~Na&Km7Y-Iodc-oy)XH-+^7Crag
z^g>IBfRsybQWXdwQbLP>6p<z>Aqfylh#{fb6;Z(vMMVS~$e@S=j*ftg6;Uh<iVD~V
z<RPMtgQJLw%KPDaqifc@_vX$1wbwr9tn;0-&j-K=43<bUQ8j=JsX`tR;Dg7+#^K~H
zK!FM*Z~zbpvt%K2{UZSY_<lS*D<Z%Lz5oGu(+dayz)hRLFdT>f59&ghTmgWD0l;*T
zI7<kC6aYYajzXpYKt=(8otP$50H6c_V9R4-;{Z@C0AMG7=F<Rxo%or10RUT+Ar%3j
zkpLhQWr#!oXgdI`&sK^>09Y^p6lP1rIRMx#05C~cW=H_Aw*bJ-5DT&Z2n+x)QHX^p
z00esgV8|mQcmRZ%02D^@S3L16t`O%c004NIvOKvYIYoh62rY33S640`D9%Y2D-<?i
z0%4j!F2Z@488U%158(66005wo6%pWr^Zj_v4zAA5HjcIqUoGmt2LB>rV&neh&#Q1i
z007~1e$oCcFS8neI|hJl{-P!B1ZZ9hpmq0)X0i`JwE&>$+E?>%_<lS*MWK+n+1cgf
z<k(8YLR(?VSAG6x!e78w{cQPuJpA|d;J)G{fihizM+Erb!p!tcr5w+a34~(Y=8s4G
zw+sLL9n&JjNn*KJDiq^U5^;`1nvC-@r6P$!k}1U{(*I=Q-z@tBKHoI}uxdU5dyy@u
zU1J0GOD7Ombim^G008p4Z^6_k2m^p<gW=D2|L;HjN1!DDfM!XOaR2~bL?kX$%CkSm
z2mk;?pn)o|K^yeJ7%adB9Ki+L!3+FgHiSYX#KJ-lLJDMn9CBbOtb#%)hRv`YDqt_v
zKpix|QD}yfa1JiQRk#j4a1Z)n2%f<xynzV>LC6RbVIkUx0b+_+BaR3cnT7Zv!AJxW
zizFb)h!jyGOOZ85F;a?DAXP{m@;!0_Ifq<Ex{*7`05XF7hP+2Hl!3BQJ=6@fL%FCo
z8iYoo3(#bAF`ADSpqtQgv>H8(HlgRxt7s3}k3K`kFu>>-2Q$QMFfPW!La{h336o>X
zu_CMttHv6zR;&ZNiS=X8v3CR#fknUxHUxJ<AYmRsNLWl*PS{AOARHt#5!wki2?K;t
z!Y3k=s7tgax)J%r7-BLphge7~Bi0g+6E6^Zh(p9TBoc{3GAFr^0!gu?RMHaCM$&Fl
zBk3%un>0uoBa_M6WNWeqIg~6QE69c9o#eyhGvpiOA@W-aonk<7r1(?fC{oI5N*U!4
z<uv66WtcKSRim0x-Ke2d5jBrmLam{;Qm;{ms1r1GnmNsb7D-E`t)i9F8fX`2_i3-_
zbh;7Ul^#x)&{xvS=|||7=mYe33=M`AgU5(xC>fg=2N-7=cNnjjOr{yriy6mMFgG#l
znCF=fnQv8CDz++o6_Lscl}eQ+l^ZHARH>?_s@|##Rr6KLRFA1%Q+=*RRWnoLsR`7U
zt5vF<Q0r40Q)j6=sE4X&sBct1q<&fbi3VB2Ov6t@q*0);U*o*SAPZv|vv@2aYYnT0
zb%8a+Cb7-ge0D0knEf5Qi#@8Tp*ce{N;6lpQuCB%KL_KOarm5cP6_8Ir<e17iry6O
zDdH&`rZh~sF=bq9s+O0QSgS~@QL9Jmy*94xr=6y~MY~!1fet~(N+(<=M`w@D1)b+p
z*;C!83a1uLJv#NSE~;y#8=<>IcfW3@?wFpwUVxrVZ>QdQz32KIeJ}k~{cZZE^+ya?
z2D1z#2HOnI7(B%_ac?{wFUQ;QQA1tBKtrWrm0_3Rgps+?Jfqb{jYbcQX~taRB;#$y
zZN{S}1|}gUOHJxc?wV3fxuz+mJ4`!F$IZ;mqRrNsHJd##*D~ju=bP7?-?v~|cv>vB
zsJ6IeNwVZxrdjT`yl#bBIa#GxRa#xMMy;K#CDyyGyQdMSxlWT#tDe?p!?5wT$+oGt
z8L;Kp2HUQ-ZMJ=3XJQv;x5ci*?vuTfeY$;({XGW_huIFR9a<fJbF^|4I#xQ~n$Dc=
zKYhjYmgz5NSkDm8*fZm{6U!;YX`NG>(?@3)XSs8O^N5RyOM=TTmp(3=8^+zpz2r)C
z^>JO{deZfso3oq3?Wo(Y?l$ge?uXo;%ru`Vo>?<<(8I_>;8Eq#KMS9gFl*neeosSB
zfoHYnBQIkwkyowPu(zdms`p{<7e4kra-ZWq<2*OsGTvEV%s0Td$hXT+!*8Bnh2KMe
zBmZRodjHV?r+_5^X9J0WL4jKW`}lf%A-|44I@@LTvf1rHjG(ze6+w@Jt%Bvjts!X0
z?2xS?_ve_-k<Mujg;0Lz*3buG=3$G&ehepthlN*$KaOySSQ^nWmo<0M+(UEUMEXRQ
zMBbZcF;6+KElM>iKB_KiJlZ$9G`c^=E@oNG)mWWaNo-3TIW8)$Hg0Ub-~8?KhvJ>$
z3*&nim@mj(aCxE5!t{lw7O5^0EIO7zOo&c6l<+|iDySBWCGrz@C5{St!X3hAA}`T4
z(TLbXTq+(;@<=L8dXnssyft|w#WSTW<++3>sgS%(4NTpeI-VAqb|7ssJvzNHgOZVu
zaYCvgO_R1~>SyL=cFU|~g|hy|Zi}}s9+d~lYqOB71z9Z$wnC=pR9Yz4DhIM>Wmjgu
z&56o6maCpC&F##y%G;1PobR9i?GnNg;gYtchD%p19a!eQtZF&3JaKv33gZ<8D~47E
ztUS1iwkmDaPpj=$m#%)jCVEY4fnLGNg2A-`YwHVD3gv};>)hAvT~AmqS>Lr``i7kw
zJ{5_It`yrBmlc25DBO7E8;5VoznR>Ww5hAaxn$2~(q`%A-YuS64wkBy=9dm`4cXeX
z4c}I@?e+FW+b@^RDBHV(wnMq2zdX3SWv9u`%{xC-q*U}&`cyXV(%rRT*Z6MH?i+i&
z_B8C(+grT%{XWUQ+f@NoP1R=AW&26{v-dx)iK^-Nmiuj8txj!m?Z*Ss1N{dh4z}01
z)YTo*JycSU)+_5r4#yw9{+;i4Ee$peRgIj+;v;ZGdF1K$3E%e~4LaI(jC-u%2h$&R
z9cLXcYC@Xwnns&bn)_Q~Te?roKGD|d-g^8;+aC{{G(1^(O7m37Y1-+6)01cN&y1aw
zoqc{T`P^XJqPBbIW6s}d4{z_f5Om?vMgNQEJG?v2T=KYd^0M3I6IZxbny)%vZR&LD
zJpPl@Psh8QyPB@KTx+@RdcC!KX7}kEo;S|j^u2lU7XQ}Oo;f|;z4Ll+_r>@1-xl3|
zawq-H%e&ckC+@AhPrP6BK<z=<L*0kfKU@CX*zeqbYQT4(^U>T#_XdT7&;F71j}Joy
zkC~6lh7E@6o;W@^IpRNZ{ptLtL(gQ-CY~4mqW;US7Zxvm_|@yz&e53Bp_lTPlfP|z
zrTyx_>lv@x#=^!PzR7qqF<$gm`|ZJZ+;<)Cqu&ot<a{81DF0~rvGr5Xr~8u`lav1h
z1DNytV>2z=0000WV@Og>004R=004l4008;_004mL004C`008P>0026e000+nl3&F}
z0001sNkl<Zc-nl9F$%&!5Jg|6NFXN=f}rarv9VfDZfR-l9$*Q<$}0qtW-P+Ox<nrg
z47~rD!PriX?VPHTPqEt{w602kYjf;9z~g=cKmewB0eHS&!I2<w*$POSjDb_zJ7B#@
zM*KnegZyd%Ube(EFaE2Uin=Nphp@_2wC4-s5CABQ?KE#hJ_7)y6GPYfiew)E0000<
KMNUMnLSTXwWoAGC
rename from browser/themes/osx/devtools/itemArrow-ltr.png
rename to browser/themes/shared/devtools/images/itemArrow-ltr.png
index 6cc3e984b62fefeba1b6a22f7129bc23d3e9ddc1..317a7c84c8a70429f9473ebeb6d161159d1659da
GIT binary patch
literal 2894
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
rename from browser/themes/osx/devtools/itemArrow-rtl.png
rename to browser/themes/shared/devtools/images/itemArrow-rtl.png
index 0f8f4b1b0b6a6776d1aac85209e2374cb9bbffba..9b872afe21a61937900a773f32739498bb4429c1
GIT binary patch
literal 2911
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
JPDHLkV1iAAW|#l~
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/devtools/netmonitor.inc.css
@@ -0,0 +1,570 @@
+/* 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/. */
+
+#body {
+  background: url(background-noise-toolbar.png), #343c45; /* Dark toolbars */
+}
+
+#requests-menu-empty-notice {
+  background: url(background-noise-toolbar.png), #343c45; /* Dark toolbars */
+  padding: 12px;
+  font-size: 110%;
+  color: #f5f7fa; /* Light foreground text */
+}
+
+%filter substitution
+%define tableBorderLight rgba(0,0,0,0.2)
+%define tableBorderDark rgba(128,128,128,0.15)
+
+/* Network requests table */
+
+#requests-menu-toolbar {
+  padding: 0;
+}
+
+.requests-menu-header:first-child,
+.requests-menu-subitem:first-child {
+  -moz-padding-start: 6px;
+}
+
+.requests-menu-subitem {
+  padding: 3px;
+}
+
+.requests-menu-header:not(:last-child):-moz-locale-dir(ltr),
+.requests-menu-subitem:not(:last-child):-moz-locale-dir(ltr) {
+  -moz-border-end: 1px solid @tableBorderLight@;
+  box-shadow: 1px 0 0 @tableBorderDark@;
+}
+
+.requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
+.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
+  -moz-border-end: 1px solid @tableBorderLight@;
+  box-shadow: -1px 0 0 @tableBorderDark@;
+}
+
+.requests-menu-header-button {
+  -moz-appearance: none;
+  background: none;
+  min-width: 1px;
+  min-height: 32px;
+  margin: 0;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font-weight: inherit !important;
+  transition: background-color 0.1s ease-in-out;
+}
+
+.requests-menu-header-button:hover {
+  background: rgba(0,0,0,0.10);
+}
+
+.requests-menu-header-button:hover:active {
+  background: rgba(0,0,0,0.25);
+}
+
+.requests-menu-header-button:not(:active)[sorted] {
+  background: rgba(0,0,0,0.15);
+}
+
+.requests-menu-header-button:not(:active)[sorted=ascending] {
+  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+}
+
+.requests-menu-header-button:not(:active)[sorted=descending] {
+  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+  background-position: bottom;
+}
+
+/* Network requests table: specific column dimensions */
+
+.requests-menu-status-and-method {
+  width: 8em;
+}
+
+.requests-menu-status {
+  width: 20px;
+  height: 10px;
+}
+
+.requests-menu-method {
+  text-align: center;
+  font-weight: 600;
+}
+
+.requests-menu-file {
+  width: 20vw;
+  min-width: 4em;
+}
+
+.requests-menu-domain {
+  width: 14vw;
+  min-width: 10em;
+}
+
+.requests-menu-type {
+  text-align: center;
+  width: 4em;
+}
+
+.requests-menu-size {
+  text-align: center;
+  width: 8em;
+}
+
+/* Network requests table: status codes */
+
+box.requests-menu-status {
+  background: #fff;
+  width: 10px;
+  -moz-margin-start: 5px;
+  -moz-margin-end: 5px;
+  border-radius: 10px;
+  transition: box-shadow 0.5s ease-in-out;
+}
+
+box.requests-menu-status:not([code]) {
+  box-shadow:
+    0 0 0 1px rgba(255,255,255,0.4) inset,
+    0 -6px 4px 0 rgba(32,32,32,1.0) inset,
+    0 0 8px 0 rgba(32,0,0,0.4);
+}
+
+box.requests-menu-status[code^="1"] {
+  box-shadow:
+    0 0 2px 1px rgba(255,255,255,0.8) inset,
+    0 -6px 4px 0 rgba(0,0,64,1.0) inset,
+    0 0 8px 0 rgba(0,0,128,1.0);
+}
+
+box.requests-menu-status[code^="2"] {
+  box-shadow:
+    0 0 2px 1px rgba(255,255,255,0.8) inset,
+    0 -6px 4px 0 rgba(0,64,0,1.0) inset,
+    0 0 8px 0 rgba(0,128,0,1.0);
+}
+
+box.requests-menu-status[code^="3"] {
+  box-shadow:
+    0 0 2px 1px rgba(255,255,255,0.8) inset,
+    0 -6px 4px 0 rgba(64,32,0,1.0) inset,
+    0 0 8px 0 rgba(128,128,0,1.0);
+}
+
+box.requests-menu-status[code^="4"] {
+  box-shadow:
+    0 0 2px 1px rgba(255,255,255,0.8) inset,
+    0 -6px 4px 0 rgba(64,0,0,1.0) inset,
+    0 0 8px 0 rgba(128,0,0,1.0);
+}
+
+box.requests-menu-status[code^="5"] {
+  box-shadow:
+    0 0 2px 1px rgba(255,255,255,0.8) inset,
+    0 -6px 4px 0 rgba(64,0,64,1.0) inset,
+    0 0 8px 0 rgba(128,0,128,1.0);
+}
+
+/* Network requests table: waterfall header */
+
+#requests-menu-waterfall-label {
+  -moz-padding-start: 8px;
+  -moz-padding-end: 8px;
+}
+
+.requests-menu-timings-division {
+  width: 100px;
+  padding-top: 2px;
+  -moz-padding-start: 4px;
+  -moz-border-start: 1px dotted #999;
+  font-size: 75%;
+  pointer-events: none;
+}
+
+.requests-menu-timings-division:not(:first-child) {
+  -moz-margin-start: -100px !important; /* Don't affect layout. */
+}
+
+.requests-menu-timings-division:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings-division:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
+/* Network requests table: waterfall items */
+
+.requests-menu-subitem.requests-menu-waterfall {
+  -moz-padding-start: 4px;
+  -moz-padding-end: 4px;
+  background-repeat: repeat-y; /* Background created on a <canvas> in js. */
+  margin-top: -1px; /* Compensate borders. */
+  margin-bottom: -1px;
+}
+
+.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
+  background-position: right center;
+}
+
+.requests-menu-timings:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
+.requests-menu-timings-total:-moz-locale-dir(ltr) {
+  transform-origin: left center;
+}
+
+.requests-menu-timings-total:-moz-locale-dir(rtl) {
+  transform-origin: right center;
+}
+
+.requests-menu-timings-total {
+  -moz-padding-start: 8px;
+  font-size: 85%;
+  font-weight: 600;
+}
+
+.requests-menu-timings-cap {
+  width: 4px;
+  height: 9px;
+  border: 1px solid #fff;
+}
+
+.requests-menu-timings-cap.start {
+  -moz-border-end: none;
+}
+
+.requests-menu-timings-cap.end {
+  -moz-border-start: none;
+}
+
+.requests-menu-timings-cap.start:-moz-locale-dir(ltr) {
+  border-radius: 4px 0 0 4px;
+  transform-origin: right center;
+}
+
+.requests-menu-timings-cap.start:-moz-locale-dir(rtl) {
+  border-radius: 0 4px 4px 0;
+  transform-origin: left center;
+}
+
+.requests-menu-timings-cap.end:-moz-locale-dir(ltr) {
+  border-radius: 0 4px 4px 0;
+  transform-origin: left center;
+}
+
+.requests-menu-timings-cap.end:-moz-locale-dir(rtl) {
+  border-radius: 4px 0 0 4px;
+  transform-origin: right center;
+}
+
+.requests-menu-timings-box {
+  height: 9px;
+  border-top: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+}
+
+.requests-menu-timings-box.blocked,
+.requests-menu-timings-cap.blocked {
+  background-color: rgba(255,32,32,0.8);
+  box-shadow: 0 0 8px 0 rgba(128,32,32,0.8),
+              0 0 4px 0 rgba(255,255,255,1.0) inset;
+}
+
+.requests-menu-timings-box.dns,
+.requests-menu-timings-cap.dns {
+  background-color: rgba(255,128,255,0.6);
+  box-shadow: 0 0 8px 0 rgba(128,128,255,1.0),
+              0 0 4px 0 rgba(255,255,255,1.0) inset;
+}
+
+.requests-menu-timings-box.connect,
+.requests-menu-timings-cap.connect {
+  background-color: rgba(255,128,16,0.4);
+  box-shadow: 0 0 8px 0 rgba(128,128,16,0.8),
+              0 0 4px 0 rgba(255,255,255,1.0) inset;
+}
+
+.requests-menu-timings-box.send,
+.requests-menu-timings-cap.send {
+  background-color: rgba(255,255,128,0.4);
+  box-shadow: 0 0 8px 0 rgba(128,255,128,0.8),
+              0 0 4px 0 rgba(255,255,255,1.0) inset;
+}
+
+.requests-menu-timings-box.wait,
+.requests-menu-timings-cap.wait {
+  background-color: rgba(255,255,255,0.2);
+  box-shadow: 0 0 8px 0 rgba(128,255,255,0.4),
+              0 0 4px 0 rgba(255,255,255,1.0) inset;
+}
+
+.requests-menu-timings-box.receive,
+.requests-menu-timings-cap.receive {
+  background-color: rgba(255,255,255,1.0);
+  box-shadow: 0 0 8px 0 rgba(128,255,255,1.0),
+              0 0 4px 0 rgba(255,255,255,1.0) inset;
+}
+
+/* SideMenuWidget */
+
+.side-menu-widget-item-contents {
+  padding: 0px;
+}
+
+.side-menu-widget-item:not(.selected)[odd] {
+  background: rgba(255,255,255,0.05);
+}
+
+/* The network monitor table is temporarily always dark.
+   The redesign will be taken care of in bug 909251. */
+
+.theme-light .side-menu-widget-container {
+  background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
+}
+
+.theme-light .side-menu-widget-item {
+  border-top: 1px solid @tableBorderLight@;
+  border-bottom: 1px solid @tableBorderDark@;
+  color: #f5f7fa; /* Light foreground text */
+}
+
+.theme-light .side-menu-widget-item:last-of-type {
+  box-shadow: inset 0 -1px 0 @tableBorderLight@;
+}
+
+/* Network request details */
+
+#details-pane {
+  background: #343c45; /* Dark toolbars */
+  max-width: 500px;
+}
+
+#details-pane-toggle {
+  background: none;
+  box-shadow: none;
+  border-color: transparent;
+  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
+  -moz-image-region: rect(0px,16px,16px,0px);
+}
+
+#details-pane-toggle[pane-collapsed] {
+  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
+}
+
+#details-pane-toggle:active {
+  -moz-image-region: rect(0px,32px,16px,16px);
+}
+
+/* Network request details tabpanels */
+
+.tabpanel-content {
+  background: url(background-noise-toolbar.png), #343c45; /* Dark toolbars */
+  color: #f5f7fa; /* Light foreground text */
+}
+
+.tabpanel-summary-container {
+  padding: 1px;
+}
+
+.tabpanel-summary-label {
+  -moz-padding-start: 4px;
+  -moz-padding-end: 3px;
+  font-weight: 600;
+  color: #f5f7fa; /* Dark foreground text */
+}
+
+.tabpanel-summary-value {
+  -moz-padding-start: 3px;
+}
+
+/* Headers tabpanel */
+
+#headers-summary-status,
+#headers-summary-version {
+  padding-bottom: 2px;
+}
+
+#headers-summary-size {
+  padding-top: 2px;
+}
+
+#headers-summary-resend {
+  margin-top: -10px;
+  -moz-margin-end: 6px;
+}
+
+/* Response tabpanel */
+
+#response-content-info-header {
+  background: linear-gradient(hsl(0,60%,40%), hsl(0,60%,30%)) repeat-x top left;
+  box-shadow: inset 0 1px 0 hsla(210,40%,80%,.15),
+              inset 0 -1px 0 hsla(210,40%,80%,.05);
+  margin: 0;
+  padding: 5px 8px;
+}
+
+#response-content-image-box {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+#response-content-image {
+  background: #fff;
+  border: 1px dashed GrayText;
+  margin-bottom: 10px;
+}
+
+/* Timings tabpanel */
+
+#timings-tabpanel .tabpanel-summary-label {
+  width: 10em;
+}
+
+#timings-tabpanel .requests-menu-timings-box {
+  transition: transform 0.2s ease-out;
+  min-width: 1px;
+}
+
+#timings-tabpanel .requests-menu-timings-total {
+  transition: transform 0.2s ease-out;
+}
+
+/* Custom request form */
+
+#custom-pane {
+  padding: 0.6em 0.5em;
+}
+
+.custom-header {
+  font-size: 1.1em;
+}
+
+.custom-section {
+  margin-top: 0.5em;
+}
+
+#custom-method-value {
+  width: 4.5em;
+}
+
+/* Footer */
+
+#requests-menu-footer {
+  box-shadow: inset 0 1px 16px hsla(210,5%,5%,.3);
+}
+
+.requests-menu-footer-button,
+.requests-menu-footer-label {
+  min-width: 1em;
+  margin: 0;
+  border: none;
+  padding: 2px 1.5vw;
+  color: #f5f7fa; /* Light foreground text */
+}
+
+.requests-menu-footer-spacer {
+  min-width: 2px;
+}
+
+.requests-menu-footer-spacer:not(:first-of-type),
+.requests-menu-footer-button:not(:first-of-type) {
+  -moz-border-start: 1px solid @tableBorderDark@;
+  box-shadow: -1px 0 0 @tableBorderLight@;
+}
+
+.requests-menu-footer-button {
+  -moz-appearance: none;
+  background: rgba(0,0,0,0.025);
+}
+
+.requests-menu-footer-button:hover {
+  background: rgba(0,0,0,0.20);
+}
+
+.requests-menu-footer-button:hover:active {
+  background: rgba(0,0,0,0.35);
+}
+
+.requests-menu-footer-button:not(:active)[checked] {
+  background-color: rgba(0,0,0,0.25);
+  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
+  background-size: 100% 1px;
+  background-repeat: no-repeat;
+}
+
+.requests-menu-footer-label {
+  padding-top: 2px;
+  font-weight: 600;
+}
+
+/* Responsive sidebar */
+@media (max-width: 700px) {
+  #requests-menu-toolbar {
+    height: 22px;
+  }
+
+  .requests-menu-header-button {
+    min-height: 20px;
+  }
+
+  .requests-menu-footer-button,
+  .requests-menu-footer-label {
+    padding: 2px 2vw;
+  }
+
+  #details-pane {
+    max-width: none;
+    margin: 0 !important;
+    /* To prevent all the margin hacks to hide the sidebar. */
+  }
+
+  .requests-menu-status-and-method {
+    width: 16vw;
+  }
+
+  .requests-menu-file,
+  .requests-menu-domain {
+    width: 30vw;
+  }
+
+  .requests-menu-type {
+    width: 8vw;
+  }
+
+  .requests-menu-size {
+    width: 16vw;
+    border-width: 0 !important;
+    box-shadow: none !important;
+    /* The "Timeline" header is not visible anymore, and thus the
+       right border and box-shadow of "Size" column should be hidden. */
+  }
+}
+
+@media (min-width: 701px) {
+  #network-table[type-overflows] .requests-menu-domain {
+    border-width: 0 !important;
+    box-shadow: none !important;
+    /* The "Type" header is not visible anymore, and thus the
+       right border and box-shadow of "Domain" column should be hidden. */
+  }
+
+  #network-table[domain-overflows] .requests-menu-file {
+    border-width: 0 !important;
+    box-shadow: none !important;
+    /* The "Domain" header is not visible anymore, and thus the
+       right border and box-shadow of "File" column should be hidden. */
+  }
+}
--- a/browser/themes/shared/devtools/profiler.inc.css
+++ b/browser/themes/shared/devtools/profiler.inc.css
@@ -7,20 +7,16 @@
 .profiler-sidebar-empty-notice {
   max-width: 176px;
   padding: 10px;
   background-color: rgb(61, 69, 76);
   color: white;
   font-weight: bold;
 }
 
-.devtools-toolbar {
-  min-height: 33px;
-}
-
 .profiler-sidebar {
   min-width: 196px;
 }
 
 .profiler-sidebar + .devtools-side-splitter {
   border-color: transparent;
 }
 
@@ -44,17 +40,17 @@
 }
 
 .profiler-sidebar-item > hbox > a {
   display: none;
   text-decoration: underline;
   cursor: pointer;
 }
 
-[state=completed].selected .profiler-sidebar-item > hbox > a {
+.selected [state=completed] .profiler-sidebar-item > hbox > a {
   display: block;
 }
 
 .selected .profiler-sidebar-item > hbox {
   color: rgb(128, 195, 228);
 }
 
 #profiler-controls > toolbarbutton {
--- a/browser/themes/shared/devtools/shadereditor.inc.css
+++ b/browser/themes/shared/devtools/shadereditor.inc.css
@@ -1,18 +1,14 @@
 /* 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/. */
 
 #body {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-}
-
-#content {
-  background: #fff;
+  background: url(background-noise-toolbar.png), #343c45; /* Dark toolbars */
 }
 
 /* Reload and waiting notices */
 
 .notice-container {
   background: transparent;
   margin-top: -50vh;
   color: #fff;
@@ -44,16 +40,20 @@
 #shaders-pane {
   min-width: 150px;
 }
 
 #shaders-pane + .devtools-side-splitter {
   border-color: transparent;
 }
 
+.program-item {
+  padding: 2px 0px;
+}
+
 .side-menu-widget-item-checkbox {
   -moz-appearance: none;
   opacity: 0;
   transition: opacity .15s ease-out 0s;
 }
 
 /* Only show the checkbox when the source is hovered over, is selected, or if it
  * is not checked. */
@@ -61,52 +61,45 @@
 .side-menu-widget-item.selected > .side-menu-widget-item-checkbox,
 .side-menu-widget-item-checkbox:not([checked]) {
   opacity: 1;
   transition: opacity .15s ease-out 0s;
 }
 
 .side-menu-widget-item-checkbox .checkbox-check {
   -moz-appearance: none;
-  background: none;
-  background-image: url(itemToggle.png);
+  background: url(itemToggle.png);
   background-repeat: no-repeat;
   background-clip: content-box;
   background-size: 32px 16px;
   background-position: -16px 0;
   width: 16px;
   height: 16px;
   border: 0;
 }
 
 .side-menu-widget-item-checkbox[checked] .checkbox-check {
   background-position: 0 0;
 }
 
 .side-menu-widget-item-checkbox:not([checked]) ~ .side-menu-widget-item-contents {
-  color: #888;
+  color: rgba(255,255,255,0.4);
 }
 
 /* Shader source editors */
 
-#editors-splitter {
-  border-color: rgb(61,69,76);
-}
-
 .editor-label {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
+  background: url(background-noise-toolbar.png), #343c45; /* Dark toolbars */
   border-top: 1px solid #222426;
   padding: 1px 12px;
   color: #fff;
 }
 
 .editor-label[selected] {
-  background: linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%)) repeat-x top left;
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15),
-              inset 0 -1px 0 hsla(210,40%,83%,.05);
+  background: linear-gradient(hsl(206,59%,39%), hsl(206,59%,29%)) repeat-x top left;
 }
 
 /* Responsive sidebar */
 
 @media (max-width: 700px) {
   #shaders-pane {
     max-height: 60vh;
   }
@@ -114,21 +107,12 @@
   .side-menu-widget-container {
     box-shadow: none !important;
   }
 
   .side-menu-widget-item-arrow {
     background-image: none !important;
   }
 
-  .devtools-side-splitter {
-    border-top-color: transparent !important;
-  }
-
   .editor-label {
     -moz-box-ordinal-group: 0;
   }
-
-  .editor-label:not([selected]) {
-    border-top: 1px solid hsla(210,8%,5%,.25);
-    box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15);
-  }
 }
--- a/browser/themes/shared/devtools/toolbars.inc.css
+++ b/browser/themes/shared/devtools/toolbars.inc.css
@@ -209,16 +209,17 @@
 
 .devtools-sidebar-tabs {
   -moz-appearance: none;
   margin: 0;
 }
 
 .devtools-sidebar-tabs > tabpanels {
   -moz-appearance: none;
+  background: transparent;
   padding: 0;
   border: 0;
 }
 
 .devtools-sidebar-tabs > tabs {
   -moz-appearance: none;
   position: static;
   font: inherit;
new file mode 100644
--- /dev/null
+++ b/browser/themes/shared/devtools/widgets.inc.css
@@ -0,0 +1,785 @@
+/* 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/. */
+
+/* Generic pane helpers */
+
+.generic-toggled-side-pane {
+  -moz-margin-start: 0 !important;
+  /* Unfortunately, transitions don't work properly with locale-aware properties,
+     so both the left and right margins are set via js, while the start margin
+     is always overridden here. */
+}
+
+.generic-toggled-side-pane[animated] {
+  transition: margin 0.25s ease-in-out;
+}
+
+/* BreacrumbsWidget */
+
+.breadcrumbs-widget-container {
+  -moz-margin-end: 3px;
+  /* A fake 1px-shadow is included in the border-images of the
+     breadcrumbs-widget-items, to match toolbar-buttons style.
+     This negative margin compensates the extra row of pixels created
+     by the shadow.*/
+  margin-bottom: -1px;
+}
+
+/* Preloading hack, LTR */
+
+.breadcrumbs-widget-container:-moz-locale-dir(ltr)::after {
+  content: '';
+  display: block;
+  background-image:
+    url(breadcrumbs/ltr-start.png),
+    url(breadcrumbs/ltr-start-selected.png),
+    url(breadcrumbs/ltr-start-pressed.png),
+    url(breadcrumbs/ltr-start-selected-pressed.png),
+    url(breadcrumbs/ltr-middle.png),
+    url(breadcrumbs/ltr-middle-selected.png),
+    url(breadcrumbs/ltr-middle-pressed.png),
+    url(breadcrumbs/ltr-middle-selected-pressed.png),
+    url(breadcrumbs/ltr-end.png),
+    url(breadcrumbs/ltr-end-selected.png),
+    url(breadcrumbs/ltr-end-pressed.png),
+    url(breadcrumbs/ltr-end-selected-pressed.png);
+}
+
+/* Preloading hack, RTL */
+
+.breadcrumbs-widget-container:-moz-locale-dir(rtl)::after {
+  content: '';
+  display: block;
+  background-image:
+    url(breadcrumbs/rtl-start.png),
+    url(breadcrumbs/rtl-start-selected.png),
+    url(breadcrumbs/rtl-start-pressed.png),
+    url(breadcrumbs/rtl-start-selected-pressed.png),
+    url(breadcrumbs/rtl-middle.png),
+    url(breadcrumbs/rtl-middle-selected.png),
+    url(breadcrumbs/rtl-middle-pressed.png),
+    url(breadcrumbs/rtl-middle-selected-pressed.png),
+    url(breadcrumbs/rtl-end.png),
+    url(breadcrumbs/rtl-end-selected.png),
+    url(breadcrumbs/rtl-end-pressed.png),
+    url(breadcrumbs/rtl-end-selected-pressed.png);
+}
+
+.scrollbutton-up,
+.scrollbutton-down {
+  -moz-appearance: none;
+  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);
+  border: 1px solid hsla(210,8%,5%,.45);
+  margin: 0 0 1px;
+}
+
+.scrollbutton-up:not([disabled]):active:hover,
+.scrollbutton-down:not([disabled]):active:hover {
+  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);
+  border-color: hsla(210,8%,5%,.6);
+}
+
+.scrollbutton-up > .toolbarbutton-icon,
+.scrollbutton-down > .toolbarbutton-icon {
+  -moz-appearance: none;
+  list-style-image: url("breadcrumbs-scrollbutton.png");
+  -moz-image-region: rect(0px,7px,16px,0px);
+  margin: 0 5px;
+}
+
+.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
+.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
+  -moz-image-region: rect(0px,14px,16px,7px);
+}
+
+.scrollbutton-up[disabled] > .toolbarbutton-icon,
+.scrollbutton-down[disabled] > .toolbarbutton-icon {
+  opacity: 0.5;
+}
+
+.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
+.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
+  transform: scaleX(-1);
+}
+
+.breadcrumbs-widget-item {
+  background-color: transparent;
+  -moz-appearance: none;
+  overflow: hidden;
+  min-width: 85px;
+  max-width: 250px;
+  min-height: 25px;
+  border-style: solid;
+  border-width: 1px 13px 2px 13px;
+  margin: 0 -11px 0 0;
+  padding: 0 9px;
+  outline: none;
+  color: hsl(210,30%,85%);
+}
+
+.breadcrumbs-widget-item:-moz-focusring > label {
+  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
+}
+
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag {
+  color: hsl(208,100%,60%);
+}
+
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id {
+  color: hsl(205,100%,70%);
+}
+
+.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes {
+  color: hsl(20,100%,70%);
+}
+
+.breadcrumbs-widget-item-id,
+.breadcrumbs-widget-item-classes {
+  color: #8d99a6;
+}
+
+.breadcrumbs-widget-item-pseudo-classes {
+  color: hsl(20,100%,85%);
+}
+
+/* Breadcrumbs LTR */
+
+.breadcrumbs-widget-item:-moz-locale-dir(ltr) {
+  border-image: url("breadcrumbs/ltr-middle.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(ltr) {
+  border-image: url("breadcrumbs/ltr-middle-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item[checked]:-moz-locale-dir(ltr) {
+  border-image: url("breadcrumbs/ltr-middle-selected.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(ltr) {
+  border-image: url("breadcrumbs/ltr-middle-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
+  border-image: url("breadcrumbs/ltr-start.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
+  border-image: url("breadcrumbs/ltr-start-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(ltr) {
+  border-image: url("breadcrumbs/ltr-start-selected.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
+  border-image: url("breadcrumbs/ltr-start-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
+  border-image: url("breadcrumbs/ltr-end.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
+  border-image: url("breadcrumbs/ltr-end-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(ltr) {
+  border-image: url("breadcrumbs/ltr-end-selected.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
+  border-image: url("breadcrumbs/ltr-end-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
+  border-left-width: 0;
+}
+
+.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
+  border-right-width: 0;
+}
+
+/* Breadcrumbs RTL */
+
+.breadcrumbs-widget-item:-moz-locale-dir(rtl) {
+  border-image: url("breadcrumbs/rtl-middle.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  border-image: url("breadcrumbs/rtl-middle-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item[checked]:-moz-locale-dir(rtl) {
+  border-image: url("breadcrumbs/rtl-middle-selected.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(rtl) {
+  border-image: url("breadcrumbs/rtl-middle-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
+  border-image: url("breadcrumbs/rtl-start.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  border-image: url("breadcrumbs/rtl-start-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(rtl) {
+  border-image: url("breadcrumbs/rtl-start-selected.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
+  border-image: url("breadcrumbs/rtl-start-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
+  border-image: url("breadcrumbs/rtl-end.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
+  border-image: url("breadcrumbs/rtl-end-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(rtl) {
+  border-image: url("breadcrumbs/rtl-end-selected.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
+  border-image: url("breadcrumbs/rtl-end-selected-pressed.png") 1 13 2 13 fill stretch;
+}
+
+.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
+  border-right-width: 0;
+}
+
+.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
+  border-left-width: 0;
+}
+
+/* SimpleListWidget */
+
+%filter substitution
+%define slw_selectionGradient linear-gradient(hsl(206,59%,39%), hsl(206,59%,29%))
+%define slw_selectionTextColor #fff
+
+.simple-list-widget-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.simple-list-widget-item.selected {
+  background: @slw_selectionGradient@;
+  color: @slw_selectionTextColor@;
+}
+
+.theme-dark .simple-list-widget-item:not(.selected):hover {
+  background-color: #181d20; /* Sidebar background */
+}
+
+.theme-light .simple-list-widget-item:not(.selected):hover {
+  background-color: #f7f7f7; /* Sidebar background */
+}
+
+.simple-list-widget-empty-text,
+.simple-list-widget-perma-text {
+  padding: 4px 8px;
+}
+
+.theme-dark .simple-list-widget-empty-text,
+.theme-dark .simple-list-widget-perma-text {
+  color: #b6babf; /* Light foreground text */
+}
+
+.theme-light .simple-list-widget-empty-text,
+.theme-light .simple-list-widget-perma-text {
+  color: #585959; /* Grey foreground text */
+}
+
+/* FastListWidget */
+
+.fast-list-widget-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.fast-list-widget-empty-text {
+  padding: 4px 8px;
+}
+
+.theme-dark .fast-list-widget-empty-text {
+  color: #b6babf; /* Light foreground text */
+}
+
+.theme-light .fast-list-widget-empty-text {
+  color: #585959; /* Grey foreground text */
+}
+
+/* SideMenuWidget */
+
+%filter substitution
+%define smw_selectionGradient linear-gradient(hsl(206,59%,39%), hsl(206,59%,29%))
+%define smw_selectionTextColor #fff
+%define smw_margin #222426
+%define smw_itemDarkTopBorder rgba(0,0,0,0.2)
+%define smw_itemDarkBottomBorder rgba(128,128,128,0.15)
+%define smw_itemLightTopBorder rgba(128,128,128,0.15)
+%define smw_itemLightBottomBorder transparent
+
+.side-menu-widget-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.theme-dark .side-menu-widget-container,
+.theme-dark .side-menu-widget-empty-text {
+  background: url(background-noise-toolbar.png), #343c45; /* Toolbars */
+}
+
+/* SideMenuWidget container */
+
+.side-menu-widget-container:-moz-locale-dir(ltr),
+.side-menu-widget-empty-text:-moz-locale-dir(ltr) {
+  box-shadow: inset -1px 0 0 @smw_margin@;
+}
+
+.side-menu-widget-container:-moz-locale-dir(rtl),
+.side-menu-widget-empty-text:-moz-locale-dir(rtl) {
+  box-shadow: inset 1px 0 0 @smw_margin@;
+}
+
+.side-menu-widget-group {
+  /* To allow visibility of the dark margin shadow. */
+  -moz-margin-end: 1px;
+}
+
+.side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
+  /* To compensate for the arrow image's dark margin. */
+  -moz-margin-end: -1px;
+}
+
+/* SideMenuWidget groups */
+
+.side-menu-widget-group-title {
+  padding: 4px;
+}
+
+.theme-dark .side-menu-widget-group-title {
+  background-color: #252c33; /* Tab toolbar */
+  color: #b8c8d9; /* Light content text */
+}
+
+.theme-light .side-menu-widget-group-title {
+  background-color: #ebeced; /* Tab toolbar */
+  color: #667380; /* Dark grey content text */
+}
+
+/* SideMenuWidget items */
+
+.side-menu-widget-item {
+  /* To compensate for the top and bottom borders */
+  margin-top: -1px;
+  margin-bottom: -1px;
+}
+
+.theme-dark .side-menu-widget-item {
+  border-top: 1px solid @smw_itemDarkTopBorder@;
+  border-bottom: 1px solid @smw_itemDarkBottomBorder@;
+  color: #f5f7fa; /* Light foreground text */
+}
+
+.theme-dark .side-menu-widget-item:last-of-type {
+  box-shadow: inset 0 -1px 0 @smw_itemDarkTopBorder@;
+}
+
+.theme-light .side-menu-widget-item {
+  border-top: 1px solid @smw_itemLightTopBorder@;
+  border-bottom: 1px solid @smw_itemLightBottomBorder@;
+  color: #18191a; /* Dark foreground text */
+}
+
+.theme-light .side-menu-widget-item:last-of-type {
+  box-shadow: inset 0 -1px 0 @smw_itemLightTopBorder@;
+}
+
+.side-menu-widget-item.selected {
+  background: @smw_selectionGradient@ repeat-x top left;
+  color: @smw_selectionTextColor@;
+}
+
+.side-menu-widget-item-arrow {
+  -moz-margin-start: -7px;
+  width: 7px; /* The image's width is 7 pixels */
+}
+
+.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
+  background-size: auto, 1px 100%;
+  background-repeat: no-repeat;
+}
+
+.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
+  background-position: center right, top right;
+}
+
+.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
+  background-position: center left, top left;
+}
+
+.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
+  background-image: url(itemArrow-dark-ltr.png), linear-gradient(to right, @smw_margin@, @smw_margin@);
+}
+
+.theme-dark .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
+  background-image: url(itemArrow-dark-rtl.png), linear-gradient(to right, @smw_margin@, @smw_margin@);
+}
+
+.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
+  background-image: url(itemArrow-ltr.png), linear-gradient(to right, @smw_margin@, @smw_margin@);
+}
+
+.theme-light .side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
+  background-image: url(itemArrow-rtl.png), linear-gradient(to right, @smw_margin@, @smw_margin@);
+}
+
+/* SideMenuWidget items contents */
+
+.side-menu-widget-item-contents {
+  padding: 4px;
+  /* To avoid having content overlapping the arrow image. */
+  -moz-padding-end: 8px;
+}
+
+.side-menu-widget-item-other {
+  /* To avoid having content overlapping the arrow image. */
+  -moz-padding-end: 8px;
+  /* To compensate for the .side-menu-widget-item-contents padding. */
+  -moz-margin-start: -4px;
+  -moz-margin-end: -8px;
+}
+
+.side-menu-widget-item-other:first-of-type {
+  margin-top: 4px;
+}
+
+.side-menu-widget-item-other:last-of-type {
+  margin-bottom: -4px;
+}
+
+.theme-dark .side-menu-widget-item-other {
+  background: url(background-noise-toolbar.png), rgba(0,0,0,.1);
+}
+
+.theme-light .side-menu-widget-item-other {
+  background: url(background-noise-toolbar.png), rgba(128,128,128,.1);
+}
+
+.theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other {
+  background-color: rgba(0,0,0,.2); /* Darken the selection by 20% */
+  color: #f5f7fa; /* Light foreground text */
+}
+
+.theme-light .side-menu-widget-item.selected .side-menu-widget-item-other {
+  background-color: rgba(255,255,255,.8); /* Lighten the selection by 20% */
+  color: #18191a; /* Dark foreground text */
+}
+
+.theme-dark .side-menu-widget-item.selected .side-menu-widget-item-other.selected {
+  background-color: transparent;
+  color: @smw_selectionTextColor@;
+}
+
+.theme-light .side-menu-widget-item.selected .side-menu-widget-item-other.selected {
+  background-color: transparent;
+  color: @smw_selectionTextColor@;
+}
+
+/* SideMenuWidget checkboxes */
+
+.side-menu-widget-group-checkbox {
+  margin: 0;
+  -moz-margin-end: 4px;
+}
+
+.side-menu-widget-item-checkbox {
+  margin: 0;
+  -moz-margin-start: 4px;
+}
+
+/* SideMenuWidget misc */
+
+.side-menu-widget-empty-text {
+  padding: 4px 8px;
+}
+
+.theme-dark .side-menu-widget-empty-text {
+  color: #b6babf; /* Light foreground text */
+}
+
+.theme-light .side-menu-widget-empty-text {
+  color: #585959; /* Grey foreground text */
+}
+
+/* VariablesView */
+
+.variables-view-container {
+  /* Hack: force hardware acceleration */
+  transform: translateZ(1px);
+}
+
+.variables-view-empty-notice {
+  padding: 2px;
+}
+
+.theme-dark .variables-view-empty-notice {
+  color: #b6babf; /* Light foreground text */
+}
+
+.theme-light .variables-view-empty-notice {
+  color: #585959; /* Grey foreground text */
+}
+
+.variables-view-scope > .title {
+  color: #fff;
+}
+
+/* Generic variables traits */
+
+.variables-view-variable:not(:last-child) {
+  border-bottom: 1px solid rgba(128, 128, 128, .15);
+}
+
+.variables-view-variable > .title > .name {
+  font-weight: 600;
+}
+
+/* Generic variables *and* properties traits */
+
+.variable-or-property:focus > .title > label {
+  color: inherit !important;
+}
+
+.variable-or-property > .title > .value {
+  -moz-box-flex: 1;
+}
+
+.variable-or-property > .title > .arrow {
+  -moz-margin-start: 3px;
+}
+
+.variable-or-property:not([untitled]) > .variables-view-element-details {
+  -moz-margin-start: 7px;
+}
+
+/* Traits applied when variables or properties are changed or overridden */
+
+.variable-or-property:not([overridden]) {
+  transition: background 1s ease-in-out;
+}
+
+.variable-or-property:not([overridden])[changed] {
+  transition-duration: .4s;
+}
+
+.variable-or-property[overridden] {
+  background: rgba(128,128,128,0.05);
+}
+
+.variable-or-property[overridden] .title > label {
+  /* Cross out the title for this variable and all child properties. */
+  font-style: italic;
+  text-decoration: line-through;
+  border-bottom: none !important;
+  color: rgba(128,128,128,0.9);
+  opacity: 0.7;
+}
+
+/* Traits applied when variables or properties are editable */
+
+.variable-or-property[editable] > .title > .value {
+  cursor: text;
+}
+
+.variable-or-property[overridden] .title > .value {
+  /* Disallow editing this variable and all child properties. */
+  pointer-events: none;
+}
+
+/* Custom configurable/enumerable/writable or frozen/sealed/extensible
+ * variables and properties */
+
+.variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
+  opacity: 0.6;
+}
+
+.variable-or-property[non-configurable]:not([pseudo-item]) > .title > .name {
+  border-bottom: 1px dashed #99f;
+}
+
+.variable-or-property[non-writable]:not([pseudo-item]) > .title > .name {
+  border-bottom: 1px dashed #f99;
+}
+
+.variable-or-property[safe-getter]:not([pseudo-item]) > .title > .name {
+  border-bottom: 1px dashed #8b0;
+}
+
+.variable-or-property-non-writable-icon {
+  background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
+  width: 16px;
+  height: 16px;
+  opacity: 0.5;
+}
+
+@media (min-resolution: 2dppx) {
+  .variable-or-property-non-writable-icon {
+    background-image: url("chrome://browser/skin/identity-icons-https@2x.png");
+    background-size: 32px;
+  }
+}
+
+.variable-or-property-frozen-label,
+.variable-or-property-sealed-label,
+.variable-or-property-non-extensible-label {
+  -moz-padding-end: 4px;
+}
+
+.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
+.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
+.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
+  color: #666;
+}
+
+/* Aligned values */
+
+.variables-view-container[aligned-values] .title > .separator {
+  -moz-box-flex: 1;
+}
+
+.variables-view-container[aligned-values] .title > .value {
+  -moz-box-flex: 0;
+  width: 70vw;
+}
+
+.variables-view-container[aligned-values] .title > .element-value-input {
+  width: calc(70vw - 10px);
+}
+
+/* Actions first */
+
+.variables-view-container[actions-first] .variables-view-delete,
+.variables-view-container[actions-first] .variables-view-add-property {
+  -moz-box-ordinal-group: 0;
+}
+
+.variables-view-container[actions-first] [invisible] {
+  visibility: hidden;
+}
+
+/* Variables and properties tooltips */
+
+.variable-or-property > tooltip > label {
+  margin: 0 2px 0 2px;
+}
+
+.variable-or-property[non-enumerable] > tooltip > label.enumerable,
+.variable-or-property[non-configurable] > tooltip > label.configurable,
+.variable-or-property[non-writable] > tooltip > label.writable,
+.variable-or-property[non-extensible] > tooltip > label.extensible {
+  color: #800;
+  text-decoration: line-through;
+}
+
+.variable-or-property[overridden] > tooltip > label.overridden {
+  -moz-padding-start: 4px;
+  -moz-border-start: 1px dotted #000;
+}
+
+.variable-or-property[safe-getter] > tooltip > label.WebIDL {
+  -moz-padding-start: 4px;
+  -moz-border-start: 1px dotted #000;
+  color: #080;
+}
+
+/* Variables and properties editing */
+
+.variables-view-delete {
+  list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
+  -moz-image-region: rect(0,16px,16px,0);
+}
+
+.variables-view-delete:hover {
+  -moz-image-region: rect(0,32px,16px,16px);
+}
+
+.variables-view-delete:active {
+  -moz-image-region: rect(0,48px,16px,32px);
+}
+
+.variables-view-edit {
+  background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
+  width: 20px;
+  height: 16px;
+  cursor: pointer;
+}
+
+.variables-view-throbber {
+  background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
+  width: 16px;
+  height: 16px;
+}
+
+.element-value-input {
+  -moz-margin-start: -2px !important;
+  -moz-margin-end: 2px !important;
+}
+
+.element-name-input {
+  -moz-margin-start: -2px !important;
+  -moz-margin-end: 2px !important;
+  font-weight: 600;
+}
+
+.element-value-input,
+.element-name-input {
+  border: 1px solid rgba(128, 128, 128, .5) !important;
+  border-radius: 0;
+  color: inherit;
+}
+
+/* Variables and properties searching */
+
+.variables-view-searchinput {
+  min-height: 24px;
+}
+
+.variable-or-property[unmatched] {
+  border: none;
+  margin: 0;
+}
+
+/* Expand/collapse arrow */
+
+.arrow {
+  -moz-appearance: treetwisty;
+  width: 20px;
+  height: 20px;
+}
+
+.arrow[open] {
+  -moz-appearance: treetwistyopen;
+}
+
+.arrow[invisible] {
+  visibility: hidden;
+}
+
+%include ../../shared/devtools/app-manager/manifest-editor.inc.css
--- a/browser/themes/windows/devtools/debugger.css
+++ b/browser/themes/windows/devtools/debugger.css
@@ -1,603 +1,17 @@
-/* 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/. */
 
-/* Sources and breakpoints pane */
-
-#sources-pane > tabs {
-  -moz-border-end: 1px solid #222426; /* Match the sources list's dark margin. */
-}
-
-#sources-pane[selectedIndex="0"] + #sources-and-editor-splitter {
-  border-color: transparent;
-}
-
-/* Sources toolbar */
-
-#sources-toolbar {
-  border: none; /* Remove the devtools-toolbar's black bottom border. */
-  -moz-border-end: 1px solid #222426; /* Match the sources list's dark margin. */
-}
-
-#sources-toolbar > .devtools-toolbarbutton,
-#sources-controls > .devtools-toolbarbutton {
-  min-width: 32px;
-}
-
-#black-box {
-  list-style-image: url(debugger-blackbox.png);
-}
-
-#pretty-print {
-  font-weight: bold;
-}
-
-#toggle-breakpoints {
-  list-style-image: url(debugger-toggleBreakpoints.png);
-}
-
-#sources-toolbar .devtools-toolbarbutton:not([label]) {
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#sources-toolbar .devtools-toolbarbutton:not([label])[checked] {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-#sources .black-boxed {
-  color: #888;
-}
-
-#sources .black-boxed > .dbg-breakpoint {
-  display: none;
-}
-
-#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
-  background-image: none;
-  box-shadow: inset -1px 0 0 #222426;
-}
-
-#sources .black-boxed + .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
-  background-image: none;
-  box-shadow: inset 1px 0 0 #222426;
-}
-
-/* Black box message and source progress meter */
-
-#black-boxed-message,
-#source-progress-container {
-  background: url(background-noise-toolbar.png) rgb(61,69,76);
-  /* Prevent the container deck from aquiring the size from this message. */
-  min-width: 1px;
-  min-height: 1px;
-  color: white;
-}
-
-#source-progress {
-  min-height: 2em;
-  min-width: 40em;
-}
-
-#black-boxed-message-label,
-#black-boxed-message-button {
-  text-align: center;
-  font-size: 120%;
-}
-
-#black-boxed-message-button {
-  margin-top: 1em;
-  padding: .25em;
-}
-
-/* Tracer */
-
-#trace {
-  list-style-image: url(tracer-icon.png);
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#trace[checked] {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-#clear-tracer {
-  /* Make this button as narrow as the text inside it. */
-  min-width: 1px;
-}
-
-.trace-name {
-  -moz-padding-start: 4px !important;
-}
-
-/* Tracer dark theme */
-
-.theme-dark .trace-item {
-  color: #f5f7fa; /* Light foreground text */
-}
-
-.theme-dark .trace-item.selected-matching {
-  background-color: rgba(29, 79, 115, .4); /* Select highlight blue at 40% alpha */
-}
-
-.theme-dark .selected > .trace-item {
-  background-color: rgba(29, 79, 115, .75); /* Select highlight blue at 75% alpha */
-}
-
-.theme-dark .trace-call {
-  color: #46afe3; /* highlight blue */
-}
-
-.theme-dark .trace-return,
-.theme-dark .trace-yield {
-  color: #70bf53; /* highlight green */
-}
-
-.theme-dark .trace-throw {
-  color: #eb5368; /* highlight red */
-}
-
-.theme-dark .trace-param {
-  color: #b8c8d9; /* Content text light */
-}
-
-.theme-dark .trace-syntax {
-  color: #8fa1b2; /* Content text grey */
-}
-
-/* Tracer light theme */
-
-.theme-light .trace-item {
-  color: #292e33; /* Dark foreground text */
-}
-
-.theme-light .trace-item.selected-matching {
-  background-color: rgba(76, 158, 217, .4); /* Select highlight blue at 40% alpha */
-}
-
-.theme-light .selected > .trace-item {
-  background-color: rgba(76, 158, 217, .75); /* Select highlight blue at 75% alpha */
-}
-
-.theme-light .trace-call {
-  color: #0088cc; /* highlight blue */
-}
-
-.theme-light .trace-return,
-.theme-light .trace-yield {
-  color: #2cbb0f; /* highlight green */
-}
-
-.theme-light .trace-throw {
-  color: #ed2655; /* highlight red */
-}
-
-.theme-light .trace-param {
-  color: #667380; /* Content text dark grey  */
-}
-
-.theme-light .trace-syntax {
-  color: #8fa1b2; /* Content text grey */
-}
-
-/* Breadcrumbs stack frames view */
-
-.breadcrumbs-widget-item {
-  max-width: none;
-}
-
-.dbg-stackframe-details {
-  -moz-padding-start: 4px;
-}
-
-/* Classic stack frames view */
-
-.dbg-classic-stackframe {
-  display: block;
-  padding: 0px 4px;
-}
-
-.dbg-classic-stackframe-title {
-  font-weight: 600;
-  color: #046;
-}
-
-.dbg-classic-stackframe-details:-moz-locale-dir(ltr) {
-  float: right;
-}
-
-.dbg-classic-stackframe-details:-moz-locale-dir(rtl) {
-  float: left;
-}
-
-.dbg-classic-stackframe-details-url {
-  max-width: 90%;
-  text-align: end;
-  color: #666;
-}
-
-.dbg-classic-stackframe-details-sep {
-  color: #aaa;
-}
-
-.dbg-classic-stackframe-details-line {
-  color: #58b;
-}
-
-#callstack-list .side-menu-widget-item.selected label {
-  color: #fff;
-}
-
-/* Sources and breakpoints view */
-
-.dbg-breakpoint {
-  -moz-margin-start: 4px;
-}
-
-.dbg-breakpoint-line {
-  font-weight: 600;
-}
-
-.dbg-breakpoint-text {
-  -moz-margin-start: 10px !important;
-  font-style: italic;
-  font-size: 90%;
-}
-
-.dbg-breakpoint-checkbox {
-  width: 16px;
-  height: 16px;
-  margin: 2px;
-}
-
-/* Variable bubble view */
-
-.devtools-tooltip-simple-text.token-undefined,
-.devtools-tooltip-simple-text.token-null {
-  text-align: center;
-  color: #666 !important; /* Override the theme's color. */
-}
-
-.devtools-tooltip-simple-text.token-boolean {
-  text-align: center;
-  color: #10c !important;
-}
-
-.devtools-tooltip-simple-text.token-number {
-  text-align: center;
-  color: #c00 !important;
-}
-
-.devtools-tooltip-simple-text.token-string {
-  text-align: start;
-  color: #282 !important;
-}
-
-.devtools-tooltip-simple-text.token-other {
-  text-align: center;
-  color: #333 !important;
-}
-
-/* Instruments pane (watch expressions, variables, event listeners...) */
-
-#instruments-pane .side-menu-widget-container,
-#instruments-pane .side-menu-widget-empty-text {
-  box-shadow: none !important;
-}
-
-/* Watch expressions view */
-
-#expressions {
-  min-height: 10px;
-  max-height: 125px;
-}
-
-.dbg-expression {
-  height: 20px;
-}
-
-.dbg-expression-arrow {
-  width: 16px;
-  height: auto;
-  margin: 2px;
-  background: -moz-image-rect(url(commandline-icon.png), 0, 32, 16, 16);
-}
-
-.dbg-expression-input {
-  color: inherit;
-}
-
-/* Event listeners view */
-
-.dbg-event-listener {
-  padding: 0px 8px;
-}
-
-.dbg-event-listener-type {
-  font-weight: 600;
-}
-
-.dbg-event-listener-separator {
-  color: #999;
-}
-
-.dbg-event-listener-targets {
-  color: #046;
-}
-
-.dbg-event-listener-location {
-  color: #666;
-}
-
-#event-listeners .side-menu-widget-item.selected {
-  background: none !important;
-}
-
-/* Searchbox and the search operations help panel */
-
-#searchbox {
-  min-width: 220px;
-  -moz-margin-start: 1px;
-}
-
-#filter-label {
-  -moz-margin-start: 2px;
-}
-
-#searchbox-panel-operators {
-  margin-top: 5px;
-  margin-bottom: 8px;
-  -moz-margin-start: 2px;
-}
-
-.searchbox-panel-operator-button {
-  min-width: 26px;
-  margin-top: 0;
-  margin-bottom: 0;
-  -moz-margin-start: 2px;
-  -moz-margin-end: 6px;
-  text-align: center;
-}
-
-.searchbox-panel-operator-label {
-  padding-bottom: 2px;
-}
-
-/* Searchbox results panel */
-
-.results-panel {
-  padding: 4px;
-}
-
-.results-panel-item {
-  background: #f4f4f4;
-  border: 1px solid #ddd;
-  border-top-color: #fff;
-  padding: 5px;
-  cursor: pointer;
-}
-
-.results-panel-item:first-of-type {
-  border-top-color: #ddd;
-  border-radius: 4px 4px 0 0;
-}
-
-.results-panel-item:last-of-type {
-  border-radius: 0 0 4px 4px;
-}
-
-.results-panel-item:only-of-type {
-  border-radius: 4px;
-}
-
-.results-panel-item:not(.selected):not(:hover) {
-  text-shadow: 0 1px #fff;
-}
-
-.results-panel-item-label-before {
-  -moz-margin-end: 5px !important;
-  color: #444;
-  cursor: inherit;
-}
-
-.results-panel-item-label {
-  color: #111;
-  font-weight: 600;
-  cursor: inherit;
-}
-
-.results-panel-item-label-below {
-  color: #7f7f7f;
-  cursor: inherit;
-}
-
-/* Sources search view */
-
-#globalsearch {
-  min-height: 10px;
-  max-height: 125px;
-  box-shadow: inset 0 -4px 8px #eee;
-  background: url(background-noise-toolbar.png);
-}
-
-#globalsearch + .devtools-horizontal-splitter {
-  border-color: #bfbfbf;
-}
-
-.dbg-source-results {
-  padding: 0;
-  background: none !important;
-}
-
-.dbg-results-header {
-  -moz-padding-start: 6px;
-}
-
-.dbg-results-header-location {
-  font-weight: 600;
-}
-
-.dbg-results-header-match-count {
-  -moz-padding-start: 6px;
-  color: GrayText;
-}
-
-.dbg-results-line-number {
-  background: #e2e2e2;
-  min-width: 40px;
-  -moz-border-end: 1px solid #b4c4d3;
-  -moz-padding-end: 4px;
-  padding-top: 2px;
-  text-align: end;
-  color: #8c8c8c;
-}
-
-.dbg-results-line-contents {
-  -moz-padding-start: 4px;
-  padding-top: 1px;
-  padding-bottom: 1px;
-}
-
-.dbg-results-line-contents-string {
-  padding: 1px;
-}
-
-.dbg-results-line-contents-string[match=true] {
-  background: rgba(255,255,0,0.5);
-  padding: 0;
-  border: 1px solid #aaa;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.dbg-results-line-contents-string[match=true][focusing] {
-  transition: transform 0.3s ease-in-out;
-}
-
-.dbg-results-line-contents-string[match=true][focused] {
-  transition-duration: 0.1s;
-  transform: scale(1.75, 1.75);
-}
-
-/* Toolbar controls */
+%include ../../shared/devtools/debugger.inc.css
 
 .devtools-sidebar-tabs > tabs > tab {
-  min-height: 25px !important;
-  padding: 0 !important;
-}
-
-#resumption-panel-desc {
-  width: 200px;
-}
-
-#resumption-order-panel {
-  -moz-margin-start: -8px;
-}
-
-#resume {
-  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");
-}
-
-#step-in {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-in.png");
-}
-
-#step-out {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-step-out.png");
-}
-
-#debugger-controls > toolbarbutton,
-#sources-controls > toolbarbutton {
-  margin: 0;
-  box-shadow: none;
-  border-radius: 0;
-  border-width: 0;
-  -moz-border-end-width: 1px;
-  outline-offset: -3px;
-}
-
-#debugger-controls > toolbarbutton:last-of-type,
-#sources-controls > toolbarbutton:last-of-type {
-  -moz-border-end-width: 0;
-}
-
-#debugger-controls,
-#sources-controls {
-  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);
-  border: 1px solid hsla(210,8%,5%,.45);
-  border-radius: 3px;
-  margin: 0 3px;
-}
-
-#instruments-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border: none;
-  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#instruments-pane-toggle[pane-collapsed] {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
+  min-height: 22px !important;
 }
 
 #instruments-pane-toggle:hover {
   -moz-image-region: rect(0px,32px,16px,16px);
 }
 
 #instruments-pane-toggle:hover:active {
   -moz-image-region: rect(0px,48px,16px,32px);
 }
-
-/* Horizontal vs. vertical layout */
-
-#vertical-layout-panes-container {
-  min-height: 35vh;
-  max-height: 80vh;
-}
-
-#body[layout=vertical] #sources-pane > tabs {
-  -moz-border-end: none;
-}
-
-#body[layout=vertical] #instruments-pane {
-  margin: 0 !important;
-  /* To prevent all the margin hacks to hide the sidebar. */
-}
-
-#body[layout=vertical] .side-menu-widget-container,
-#body[layout=vertical] .side-menu-widget-empty-text {
-  box-shadow: none !important;
-}
-
-#body[layout=vertical] .side-menu-widget-item-arrow {
-  background-image: none !important;
-}
-
-#body[layout=vertical] .side-menu-widget-group,
-#body[layout=vertical] .side-menu-widget-item {
-  -moz-margin-end: 0;
-}
deleted file mode 100644
index 6cc3e984b62fefeba1b6a22f7129bc23d3e9ddc1..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
deleted file mode 100644
index 0f8f4b1b0b6a6776d1aac85209e2374cb9bbffba..0000000000000000000000000000000000000000
GIT binary patch
literal 0
Hc$@<O00001
--- a/browser/themes/windows/devtools/netmonitor.css
+++ b/browser/themes/windows/devtools/netmonitor.css
@@ -1,553 +1,29 @@
-/* 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/. */
 
-#body {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-}
-
-/* Network requests table */
-
-#requests-menu-empty-notice {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  padding: 12px;
-  font-size: 110%;
-  color: #fff;
-}
-
-#requests-menu-toolbar {
-  height: 33px;
-  padding: 0;
-}
-
-.requests-menu-header:first-child {
-  -moz-padding-start: 4px;
-}
-
-.requests-menu-subitem {
-  padding: 4px;
-}
-
-.requests-menu-header:not(:last-child):-moz-locale-dir(ltr),
-.requests-menu-subitem:not(:last-child):-moz-locale-dir(ltr) {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-header:not(:last-child):-moz-locale-dir(rtl),
-.requests-menu-subitem:not(:last-child):-moz-locale-dir(rtl) {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: -1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-header-button {
-  -moz-appearance: none;
-  background: none;
-  min-width: 20px;
-  min-height: 32px;
-  margin: 0;
-  border: none;
-  padding: 0;
-  color: inherit;
-  font-weight: inherit !important;
-  transition: background-color 0.1s ease-in-out;
-}
-
-.requests-menu-header-button:hover {
-  background: rgba(0,0,0,0.10);
-}
-
-.requests-menu-header-button:hover:active {
-  background: rgba(0,0,0,0.25);
-}
-
-.requests-menu-header-button:not(:active)[sorted] {
-  background: rgba(0,0,0,0.15);
-}
-
-.requests-menu-header-button:not(:active)[sorted=ascending] {
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-}
-
-.requests-menu-header-button:not(:active)[sorted=descending] {
-  background-image: radial-gradient(farthest-side at center bottom, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-  background-position: bottom;
-}
-
-/* Network requests table: specific column dimensions */
-
-.requests-menu-status-and-method {
-  width: 8em;
-}
+%include ../../shared/devtools/netmonitor.inc.css
 
-.requests-menu-status {
-  width: 10px;
-  height: 10px;
-}
-
-.requests-menu-method {
-  text-align: center;
-  font-weight: 600;
-}
-
-.requests-menu-file {
-  width: 20vw;
-  min-width: 4em;
-}
-
-.requests-menu-domain {
-  width: 14vw;
-  min-width: 10em;
-}
-
-.requests-menu-type {
-  text-align: center;
-  width: 4em;
-}
-
-.requests-menu-size {
-  text-align: center;
-  width: 8em;
-}
-
-/* Network requests table: status codes */
-
-box.requests-menu-status {
-  background: #fff;
-  -moz-margin-start: 5px;
-  -moz-margin-end: 5px;
-  border-radius: 20px;
-  box-shadow:
-    0 0 0 1px rgba(255,255,255,0.4) inset,
-    0 -6px 4px 0 rgba(32,32,32,1.0) inset,
-    0 0 8px 0 rgba(32,0,0,0.4);
-  transition: box-shadow 0.5s ease-in-out;
-}
-
-box.requests-menu-status[code^="1"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,0,64,1.0) inset,
-    0 0 8px 0 rgba(0,0,128,1.0);
-}
-
-box.requests-menu-status[code^="2"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(0,64,0,1.0) inset,
-    0 0 8px 0 rgba(0,128,0,1.0);
-}
-
-box.requests-menu-status[code^="3"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,32,0,1.0) inset,
-    0 0 8px 0 rgba(128,128,0,1.0);
-}
-
-box.requests-menu-status[code^="4"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,0,0,1.0) inset,
-    0 0 8px 0 rgba(128,0,0,1.0);
-}
-
-box.requests-menu-status[code^="5"] {
-  box-shadow:
-    0 0 2px 1px rgba(255,255,255,0.8) inset,
-    0 -6px 4px 0 rgba(64,0,64,1.0) inset,
-    0 0 8px 0 rgba(128,0,128,1.0);
-}
-
-/* Network requests table: waterfall header */
-
-#requests-menu-waterfall-label {
-  -moz-padding-start: 8px;
-  -moz-padding-end: 8px;
+.requests-menu-header-button > .button-box {
+  padding: 0;
 }
 
 .requests-menu-timings-division {
-  width: 100px;
   padding-top: 1px;
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #999;
   font-size: 90%;
-  pointer-events: none;
-}
-
-.requests-menu-timings-division:not(:first-child) {
-  -moz-margin-start: -100px !important; /* Don't affect layout. */
-}
-
-.requests-menu-timings-division:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings-division:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-/* Network requests table: waterfall items */
-
-.requests-menu-subitem.requests-menu-waterfall {
-  -moz-padding-start: 4px;
-  -moz-padding-end: 4px;
-  background-repeat: repeat-y; /* Background created on a <canvas> in js. */
-  margin-top: -1px; /* Compensate borders. */
-  margin-bottom: -1px;
-}
-
-.requests-menu-subitem.requests-menu-waterfall:-moz-locale-dir(rtl) {
-  background-position: right center;
-}
-
-.requests-menu-timings:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-.requests-menu-timings-total:-moz-locale-dir(ltr) {
-  transform-origin: left center;
-}
-
-.requests-menu-timings-total:-moz-locale-dir(rtl) {
-  transform-origin: right center;
-}
-
-.requests-menu-timings-total {
-  -moz-padding-start: 8px;
-  font-size: 85%;
-  font-weight: 600;
-}
-
-.requests-menu-timings-cap {
-  width: 4px;
-  height: 10px;
-  border: 1px solid #fff;
-}
-
-.requests-menu-timings-cap.start {
-  -moz-border-end: none;
-}
-
-.requests-menu-timings-cap.end {
-  -moz-border-start: none;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(ltr) {
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
-}
-
-.requests-menu-timings-cap.start:-moz-locale-dir(rtl) {
-  border-radius: 0 4px 4px 0;
-  transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(ltr) {
-  border-radius: 0 4px 4px 0;
-  transform-origin: left center;
-}
-
-.requests-menu-timings-cap.end:-moz-locale-dir(rtl) {
-  border-radius: 4px 0 0 4px;
-  transform-origin: right center;
-}
-
-.requests-menu-timings-box {
-  height: 10px;
-  border-top: 1px solid #fff;
-  border-bottom: 1px solid #fff;
-}
-
-.requests-menu-timings-box.blocked,
-.requests-menu-timings-cap.blocked {
-  background-color: rgba(255,32,32,0.8);
-  box-shadow: 0 0 8px 0 rgba(128,32,32,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.dns,
-.requests-menu-timings-cap.dns {
-  background-color: rgba(255,128,255,0.6);
-  box-shadow: 0 0 8px 0 rgba(128,128,255,1.0),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.connect,
-.requests-menu-timings-cap.connect {
-  background-color: rgba(255,128,16,0.4);
-  box-shadow: 0 0 8px 0 rgba(128,128,16,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.send,
-.requests-menu-timings-cap.send {
-  background-color: rgba(255,255,128,0.4);
-  box-shadow: 0 0 8px 0 rgba(128,255,128,0.8),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.wait,
-.requests-menu-timings-cap.wait {
-  background-color: rgba(255,255,255,0.2);
-  box-shadow: 0 0 8px 0 rgba(128,255,255,0.4),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-.requests-menu-timings-box.receive,
-.requests-menu-timings-cap.receive {
-  background-color: rgba(255,255,255,1.0);
-  box-shadow: 0 0 8px 0 rgba(128,255,255,1.0),
-              0 0 4px 0 rgba(255,255,255,1.0) inset;
-}
-
-/* SideMenuWidget */
-
-.side-menu-widget-item-contents {
-  padding: 0px;
-}
-
-.side-menu-widget-container {
-  box-shadow: none !important;
-}
-
-.side-menu-widget-item[odd] {
-  background: rgba(255,255,255,0.05);
-}
-
-/* Network request details */
-
-#details-pane {
-  background: hsl(208,11%,27%);
-  max-width: 500px;
-}
-
-#details-pane-toggle {
-  background: none;
-  box-shadow: none;
-  border-color: transparent;
-  list-style-image: url("chrome://browser/skin/devtools/debugger-collapse.png");
-  -moz-image-region: rect(0px,16px,16px,0px);
-}
-
-#details-pane-toggle[pane-collapsed] {
-  list-style-image: url("chrome://browser/skin/devtools/debugger-expand.png");
-}
-
-#details-pane-toggle:active {
-  -moz-image-region: rect(0px,32px,16px,16px);
-}
-
-/* Network request details tabpanels */
-
-.tabpanel-content {
-  background: url(background-noise-toolbar.png), #3e4750;
-  box-shadow: 0 1px 0 hsla(204,45%,98%,.05) inset;
-  color: #fff;
-}
-
-.tabpanel-summary-container {
-  padding: 1px;
-}
-
-.tabpanel-summary-label {
-  -moz-padding-start: 4px;
-  -moz-padding-end: 3px;
-  font-weight: 600;
-  text-shadow: 0 1px 0 #000;
-  color: hsl(210,30%,85%);
-}
-
-.tabpanel-summary-value {
-  -moz-padding-start: 3px;
-}
-
-/* Headers tabpanel */
-
-#headers-summary-status,
-#headers-summary-version {
-  padding-bottom: 2px;
-}
-
-#headers-summary-size {
-  padding-top: 2px;
-}
-
-#headers-summary-resend {
-  margin: 0 6px;
-  min-height: 20px;
-}
-
-/* Response tabpanel */
-
-#response-content-info-header {
-  background:
-    url(background-noise-toolbar.png),
-    linear-gradient(hsl(0,61%,40%), hsl(0,61%,31%)) repeat-x top left;
-  box-shadow:
-    inset 0 1px 0 hsla(210,40%,83%,.15),
-    inset 0 -1px 0 hsla(210,40%,83%,.05);
-  margin: 0;
-  padding: 5px 8px;
-}
-
-#response-content-image-box {
-  padding-top: 10px;
-  padding-bottom: 10px;
-}
-
-#response-content-image {
-  background: #fff;
-  border: 1px dashed GrayText;
-  margin-bottom: 10px;
-}
-
-/* Timings tabpanel */
-
-#timings-tabpanel .tabpanel-summary-label {
-  width: 10em;
-}
-
-#timings-tabpanel .requests-menu-timings-box {
-  transition: transform 0.2s ease-out;
-  min-width: 1px;
-}
-
-#timings-tabpanel .requests-menu-timings-total {
-  transition: transform 0.2s ease-out;
-}
-
-/* Custom request form */
-
-#custom-pane {
-  padding: 0.6em 0.5em;
-}
-
-.custom-header {
-  font-size: 1.1em;
-}
-
-.custom-section {
-  margin-top: 0.5em;
-}
-
-#custom-method-value {
-  width: 4.5em;
-}
-
-/* Footer */
-
-#requests-menu-footer {
-  box-shadow: inset 0 1px 16px hsla(210,8%,5%,.3);
 }
 
 .requests-menu-footer-button,
 .requests-menu-footer-label {
-  min-width: 1em;
-  margin: 0;
-  border: none;
-  padding: 0px 1.5vw;
-  color: #fff;
-}
-
-.requests-menu-footer-spacer {
-  min-width: 2px;
-}
-
-.requests-menu-footer-spacer,
-.requests-menu-footer-button {
-  -moz-border-end: 1px solid hsla(210,8%,5%,.25);
-  box-shadow: 1px 0 0 hsla(210,16%,76%,.1);
-}
-
-.requests-menu-footer-button {
-  -moz-appearance: none;
-  background: rgba(0,0,0,0.025);
-}
-
-.requests-menu-footer-button:hover {
-  background: rgba(0,0,0,0.20);
-}
-
-.requests-menu-footer-button:hover:active {
-  background: rgba(0,0,0,0.35);
-}
-
-.requests-menu-footer-button:not(:active)[checked] {
-  background-color: rgba(0,0,0,0.25);
-  background-image: radial-gradient(farthest-side at center top, hsla(200,100%,70%,.7), hsla(200,100%,70%,0.3));
-  background-size: 100% 1px;
-  background-repeat: no-repeat;
-}
-
-.requests-menu-footer-label {
-  font-weight: 600;
+  padding-top: 0px;
+  padding-bottom: 0px;
 }
 
 /* Responsive sidebar */
 @media (max-width: 700px) {
-  #requests-menu-toolbar {
-    height: 24px;
-  }
-
-  .requests-menu-header-button {
-    min-height: 24px;
-  }
-
   .requests-menu-footer-button,
   .requests-menu-footer-label {
-    padding: 0px 2vw;
-  }
-
-  #details-pane {
-    max-width: none;
-    margin: 0 !important;
-    /* To prevent all the margin hacks to hide the sidebar. */
-  }
-
-  .requests-menu-status-and-method {
-    width: 16vw;
-  }
-
-  .requests-menu-file,
-  .requests-menu-domain {
-    width: 30vw;
-  }
-
-  .requests-menu-type {
-    width: 8vw;
-  }
-
-  .requests-menu-size {
-    width: 16vw;
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Timeline" header is not visible anymore, and thus the
-       right border and box-shadow of "Size" column should be hidden. */
+    padding-top: 0px;
+    padding-bottom: 0px;
   }
 }
-
-@media (min-width: 701px) {
-  #network-table[type-overflows] .requests-menu-domain {
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Type" header is not visible anymore, and thus the
-       right border and box-shadow of "Domain" column should be hidden. */
-  }
-
-  #network-table[domain-overflows] .requests-menu-file {
-    border-width: 0 !important;
-    box-shadow: none !important;
-    /* The "Domain" header is not visible anymore, and thus the
-       right border and box-shadow of "File" column should be hidden. */
-  }
-}
--- a/browser/themes/windows/devtools/widgets.css
+++ b/browser/themes/windows/devtools/widgets.css
@@ -1,720 +1,19 @@
-/* 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/. */
 
-/* Generic pane helpers */
-
-.generic-toggled-side-pane {
-  -moz-margin-start: 0px !important;
-  /* Unfortunately, transitions don't work properly with locale-aware properties,
-     so both the left and right margins are set via js, while the start margin
-     is always overridden here. */
-}
-
-.generic-toggled-side-pane[animated] {
-  transition: margin 0.25s ease-in-out;
-}
-
-/* BreacrumbsWidget */
-
-.breadcrumbs-widget-container {
-  -moz-margin-end: 3px;
-  /* A fake 1px-shadow is included in the border-images of the
-     breadcrumbs-widget-items, to match toolbar-buttons style.
-     This negative margin compensates the extra row of pixels created
-     by the shadow.*/
-  margin: -1px 0;
-}
-
-/* Preloading hack, LTR */
-
-.breadcrumbs-widget-container:-moz-locale-dir(ltr)::after {
-  content: '';
-  display: block;
-  background-image:
-    url(breadcrumbs/ltr-start.png),
-    url(breadcrumbs/ltr-start-selected.png),
-    url(breadcrumbs/ltr-start-pressed.png),
-    url(breadcrumbs/ltr-start-selected-pressed.png),
-    url(breadcrumbs/ltr-middle.png),
-    url(breadcrumbs/ltr-middle-selected.png),
-    url(breadcrumbs/ltr-middle-pressed.png),
-    url(breadcrumbs/ltr-middle-selected-pressed.png),
-    url(breadcrumbs/ltr-end.png),
-    url(breadcrumbs/ltr-end-selected.png),
-    url(breadcrumbs/ltr-end-pressed.png),
-    url(breadcrumbs/ltr-end-selected-pressed.png);
-}
-
-/* Preloading hack, RTL */
-
-.breadcrumbs-widget-container:-moz-locale-dir(rtl)::after {
-  content: '';
-  display: block;
-  background-image:
-    url(breadcrumbs/rtl-start.png),
-    url(breadcrumbs/rtl-start-selected.png),
-    url(breadcrumbs/rtl-start-pressed.png),
-    url(breadcrumbs/rtl-start-selected-pressed.png),
-    url(breadcrumbs/rtl-middle.png),
-    url(breadcrumbs/rtl-middle-selected.png),
-    url(breadcrumbs/rtl-middle-pressed.png),
-    url(breadcrumbs/rtl-middle-selected-pressed.png),
-    url(breadcrumbs/rtl-end.png),
-    url(breadcrumbs/rtl-end-selected.png),
-    url(breadcrumbs/rtl-end-pressed.png),
-    url(breadcrumbs/rtl-end-selected-pressed.png);
-}
-
-.scrollbutton-up,
-.scrollbutton-down {
-  -moz-appearance: none;
-  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);
-  border: 1px solid hsla(210,8%,5%,.45);
-  margin: 1px 0 1px;
-}
-
-.scrollbutton-up:not([disabled]):active:hover,
-.scrollbutton-down:not([disabled]):active:hover {
-  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);
-  border-color: hsla(210,8%,5%,.6);
-}
-
-.scrollbutton-up > .toolbarbutton-icon,
-.scrollbutton-down > .toolbarbutton-icon {
-  -moz-appearance: none;
-  list-style-image: url("breadcrumbs-scrollbutton.png");
-  -moz-image-region: rect(0px,7px,16px,0px);
-  margin: 0 5px;
-}
-
-.scrollbutton-up:not([disabled]):active:hover > .toolbarbutton-icon,
-.scrollbutton-down:not([disabled]):active:hover > .toolbarbutton-icon {
-  -moz-image-region: rect(0px,14px,16px,7px);
-}
-
-.scrollbutton-up[disabled] > .toolbarbutton-icon,
-.scrollbutton-down[disabled] > .toolbarbutton-icon {
-  opacity: 0.5;
-}
-
-.scrollbutton-up > .toolbarbutton-icon:-moz-locale-dir(rtl),
-.scrollbutton-down > .toolbarbutton-icon:-moz-locale-dir(ltr) {
-  transform: scaleX(-1);
-}
-
-.breadcrumbs-widget-item {
-  background-color: transparent;
-  -moz-appearance: none;
-  overflow: hidden;
-  min-width: 85px;
-  max-width: 250px;
-  min-height: 25px;
-  border-style: solid;
-  border-width: 2px 13px;
-  margin: 0 -11px 0 0;
-  padding: 0 9px;
-  outline: none;
-  color: hsl(210,30%,85%);
-}
-
-.breadcrumbs-widget-item:-moz-focusring > label {
-  border-bottom: 1px dotted hsla(210,30%,85%,0.4);
-}
+%include ../../shared/devtools/widgets.inc.css
 
 .breadcrumbs-widget-item:-moz-focusring > .button-box {
   border-width: 0;
 }
 
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-tag {
-  color: hsl(208,100%,60%);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-id {
-  color: hsl(205,100%,70%);
-}
-
-.breadcrumbs-widget-item[checked] .breadcrumbs-widget-item-pseudo-classes {
-  color: hsl(20,100%,70%);
-}
-
-.breadcrumbs-widget-item-id,
-.breadcrumbs-widget-item-classes {
-  color: #8d99a6;
-}
-
-.breadcrumbs-widget-item-pseudo-classes {
-  color: hsl(20,100%,85%);
-}
-
-/* Breadcrumbs LTR */
-
-.breadcrumbs-widget-item:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-middle-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-start-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(ltr) {
-  border-image: url("breadcrumbs/ltr-end-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(ltr) {
-  border-left-width: 0;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(ltr) {
-  border-right-width: 0;
-}
-
-/* Breadcrumbs RTL */
-
-.breadcrumbs-widget-item:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-middle-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:first-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-start-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type:not([checked]):hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-selected.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-item:last-of-type[checked]:hover:active:-moz-locale-dir(rtl) {
-  border-image: url("breadcrumbs/rtl-end-selected-pressed.png") 2 13 2 13 fill stretch;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:first-of-type:-moz-locale-dir(rtl) {
-  border-right-width: 0;
-}
-
-.breadcrumbs-widget-container[overflows] > .breadcrumbs-widget-item:last-of-type:-moz-locale-dir(rtl) {
-  border-left-width: 0;
-}
-
-/* SimpleListWidget */
-
-.simple-list-widget-item:not(.selected):hover {
-  background: linear-gradient(rgba(255,255,255,0.9), rgba(255,255,255,0.85)), Highlight;
-}
-
-.simple-list-widget-item.selected {
-  background: linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.8)), Highlight;
-  color: #000;
-}
-
-.simple-list-widget-perma-text,
-.simple-list-widget-empty-text {
-  color: GrayText;
-  padding: 4px 8px;
-}
-
-/* FastListWidget */
-
-.fast-list-widget-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.theme-dark .fast-list-widget-empty-text {
-  padding: 12px;
-  font-weight: 600;
-  color: #fff;
-}
-
-.theme-light .fast-list-widget-empty-text {
-  padding: 4px 8px;
-  color: GrayText;
-}
-
-/* SideMenuWidget */
-
-.side-menu-widget-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.side-menu-widget-container[theme="dark"] {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  color: #fff;
-}
-
-.side-menu-widget-container[theme="light"] {
-  background: #fff;
-  color: #000;
-}
-
-/* SideMenuWidget container */
-
-.side-menu-widget-container:-moz-locale-dir(ltr),
-.side-menu-widget-empty-text:-moz-locale-dir(ltr) {
-  box-shadow: inset -1px 0 0 #222426;
-}
-
-.side-menu-widget-container:-moz-locale-dir(rtl),
-.side-menu-widget-empty-text:-moz-locale-dir(rtl) {
-  box-shadow: inset 1px 0 0 #222426;
-}
-
-.side-menu-widget-group {
-  /* To allow visibility of the dark margin shadow. */
-  -moz-margin-end: 1px;
-}
-
-.side-menu-widget-container[with-arrows=true] .side-menu-widget-item {
-  /* To compensate for the arrow image's dark margin. */
-  -moz-margin-end: -1px;
-}
-
-/* SideMenuWidget groups */
-
-.side-menu-widget-group-title {
-  padding: 4px;
-}
-
-.side-menu-widget-group-title[theme="dark"] {
-  background-image: linear-gradient(#1f3e4f, #1b3243);
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  box-shadow: 0 1px 0 hsla(0,0%,100%,.05) inset,
-              0 -2px 0 hsla(206,37%,4%,.05) inset,
-              0 -1px 1px hsla(206,37%,4%,.1) inset;
-}
-
-.side-menu-widget-group-title[theme="light"] {
-  background-image: linear-gradient(#fff, #eee);
-}
-
-/* SideMenuWidget items */
-
-.side-menu-widget-item[theme="dark"] {
-  border-top: 1px solid hsla(210,8%,5%,.25);
-  border-bottom: 1px solid hsla(210,16%,76%,.1);
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
-
-.side-menu-widget-item[theme="light"] {
-  border-top: 1px solid hsla(210,8%,75%,.25);
-  border-bottom: 1px solid hsla(210,16%,76%,.1);
-  margin-top: -1px;
-  margin-bottom: -1px;
-}
-
-.side-menu-widget-item[theme="dark"]:last-of-type {
-  box-shadow: inset 0 -1px 0 hsla(210,8%,5%,.25);
-}
-
-.side-menu-widget-item[theme="light"]:last-of-type {
-  box-shadow: inset 0 -1px 0 hsla(210,8%,75%,.25);
-}
-
-.side-menu-widget-item.selected {
-  background: linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%)) repeat-x top left !important;
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15);
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow {
-  background-size: auto, 1px 100%;
-  background-repeat: no-repeat;
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(ltr) {
-  background-image: url(itemArrow-ltr.png), linear-gradient(to right, #222426, #222426);
-  background-position: center right, top right;
-}
-
-.side-menu-widget-item.selected > .side-menu-widget-item-arrow:-moz-locale-dir(rtl) {
-  background-image: url(itemArrow-rtl.png), linear-gradient(to right, #222426, #222426);
-  background-position: center left, top left;
-}
-
-/* SideMenuWidget items contents */
-
-.side-menu-widget-item-contents {
-  padding: 4px 0px;
-}
-
-.side-menu-widget-item-arrow {
-  -moz-margin-start: -8px;
-  width: 8px;
-}
-
-.side-menu-widget-item-other {
-  background: url(background-noise-toolbar.png), hsla(208,11%,27%, 0.65);
-}
-
-.side-menu-widget-item-other.selected {
-  background: url(background-noise-toolbar.png), hsla(208,11%,27%, 0.15);
-  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.07),
-              inset 0 -1px 0 hsla(210,40%,83%,.07);
-}
-
-.side-menu-widget-item-other:first-of-type {
-  margin-top: 4px;
-  border-top-left-radius: 4px;
-}
-
-.side-menu-widget-item-other:last-of-type {
-  margin-bottom: -4px;
-}
-
-.side-menu-widget-item-other > label {
-  color: #f5f7fa;
-}
-
-/* SideMenuWidget checkboxes */
-
-.side-menu-widget-group-checkbox {
-  margin: 0;
-  -moz-margin-end: 4px;
-}
-
-.side-menu-widget-item-checkbox {
-  margin: 0;
-  -moz-margin-start: 4px;
-  -moz-margin-end: -4px;
-}
-
-/* SideMenuWidget misc */
-
-.side-menu-widget-empty-text[theme="dark"] {
-  background: url(background-noise-toolbar.png), hsl(208,11%,27%);
-  padding: 12px;
-  font-weight: 600;
-  color: #fff;
-}
-
-.side-menu-widget-empty-text[theme="light"] {
-  background: #fff;
-  padding: 4px 8px;
-  color: GrayText;
-}
-
-/* VariablesView */
-
-.variables-view-container {
-  /* Hack: force hardware acceleration */
-  transform: translateZ(1px);
-}
-
-.variables-view-empty-notice {
-  color: GrayText;
-  padding: 2px;
-}
-
-.variables-view-scope > .title {
-  color: #fff;
-}
-
-/* Generic variables traits */
-
-.variables-view-variable:not(:last-child) {
-  border-bottom: 1px solid rgba(128, 128, 128, .15);
-}
-
-.variables-view-variable > .title > .name {
-  font-weight: 600;
-}
-
-/* Generic variables *and* properties traits */
-
-.variable-or-property:focus > .title > label {
-  color: inherit !important;
-}
-
-.variable-or-property > .title > .value {
-  -moz-box-flex: 1;
-}
-
-.variable-or-property > .title > .arrow {
-  -moz-margin-start: 3px;
-}
-
-.variable-or-property:not([untitled]) > .variables-view-element-details {
-  -moz-margin-start: 7px;
-}
-
-/* Traits applied when variables or properties are changed or overridden */
-
-.variable-or-property:not([overridden]) {
-  transition: background 1s ease-in-out;
-}
-
-.variable-or-property:not([overridden])[changed] {
-  transition-duration: .4s;
-}
-
-.variable-or-property[overridden] {
-  background: rgba(128,128,128,0.05);
-}
-
-.variable-or-property[overridden] .title > label {
-  /* Cross out the title for this variable and all child properties. */
-  font-style: italic;
-  text-decoration: line-through;
-  border-bottom: none !important;
-  color: rgba(128,128,128,0.9);
-  opacity: 0.7;
-}
-
-/* Traits applied when variables or properties are editable */
-
-.variable-or-property[editable] > .title > .value {
-  cursor: text;
-}
-
-.variable-or-property[overridden] .title > .value {
-  /* Disallow editing this variable and all child properties. */
-  pointer-events: none;
-}
-
-/* Custom configurable/enumerable/writable or frozen/sealed/extensible
- * variables and properties */
-
-.variable-or-property[non-enumerable]:not([self]):not([pseudo-item]) > .title > .name {
-  opacity: 0.6;
-}
-
-.variable-or-property[non-configurable]:not([pseudo-item]) > .title > .name {
-  border-bottom: 1px dashed #99f;
-}
-
-.variable-or-property[non-writable]:not([pseudo-item]) > .title > .name {
-  border-bottom: 1px dashed #f99;
-}
-
-.variable-or-property[safe-getter]:not([pseudo-item]) > .title > .name {
-  border-bottom: 1px dashed #8b0;
-}
-
-.variable-or-property-non-writable-icon {
-  background: url("chrome://browser/skin/identity-icons-https.png") no-repeat;
-  width: 16px;
-  height: 16px;
-  opacity: 0.5;
-}
-
-@media (min-resolution: 2dppx) {
-  .variable-or-property-non-writable-icon {
-    background-image: url("chrome://browser/skin/identity-icons-https@2x.png");
-    background-size: 32px;
-  }
-}
-
-.variable-or-property-frozen-label,
-.variable-or-property-sealed-label,
-.variable-or-property-non-extensible-label {
-  -moz-padding-end: 4px;
-}
-
-.variable-or-property:not(:focus) > .title > .variable-or-property-frozen-label,
-.variable-or-property:not(:focus) > .title > .variable-or-property-sealed-label,
-.variable-or-property:not(:focus) > .title > .variable-or-property-non-extensible-label {
-  color: #666;
-}
-
-/* Aligned values */
-
-.variables-view-container[aligned-values] .title > .separator {
-  -moz-box-flex: 1;
-}
-
-.variables-view-container[aligned-values] .title > .value {
-  -moz-box-flex: 0;
-  width: 70vw;
-}
-
-.variables-view-container[aligned-values] .title > .element-value-input {
-  width: calc(70vw - 10px);
-}
-
-/* Actions first */
-
-.variables-view-container[actions-first] .variables-view-delete,
-.variables-view-container[actions-first] .variables-view-add-property {
-  -moz-box-ordinal-group: 0;
-}
-
-.variables-view-container[actions-first] [invisible] {
-  visibility: hidden;
-}
-
-/* Variables and properties tooltips */
-
-.variable-or-property > tooltip > label {
-  margin: 0 2px 0 2px;
-}
-
-.variable-or-property[non-enumerable] > tooltip > label.enumerable,
-.variable-or-property[non-configurable] > tooltip > label.configurable,
-.variable-or-property[non-writable] > tooltip > label.writable,
-.variable-or-property[non-extensible] > tooltip > label.extensible {
-  color: #800;
-  text-decoration: line-through;
-}
-
-.variable-or-property[overridden] > tooltip > label.overridden {
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #000;
-}
-
-.variable-or-property[safe-getter] > tooltip > label.WebIDL {
-  -moz-padding-start: 4px;
-  -moz-border-start: 1px dotted #000;
-  color: #080;
-}
-
-/* Variables and properties editing */
-
-.variables-view-delete {
-  list-style-image: url("chrome://browser/skin/devtools/vview-delete.png");
-  -moz-image-region: rect(0,16px,16px,0);
-}
-
-.variables-view-delete:hover {
-  -moz-image-region: rect(0,32px,16px,16px);
-}
-
-.variables-view-delete:active {
-  -moz-image-region: rect(0,48px,16px,32px);
-}
-
-.variables-view-edit {
-  background: url("chrome://browser/skin/devtools/vview-edit.png") center no-repeat;
-  width: 20px;
-  height: 16px;
-  cursor: pointer;
-}
-
-.variables-view-throbber {
-  background: url("chrome://global/skin/icons/loading_16.png") center no-repeat;
-  width: 16px;
-  height: 16px;
-}
-
-.element-value-input {
-  -moz-margin-start: -2px !important;
-  -moz-margin-end: 2px !important;
-}
-
-.element-name-input {
-  -moz-margin-start: -2px !important;
-  -moz-margin-end: 2px !important;
-  font-weight: 600;
-}
-
-.element-value-input,
-.element-name-input {
-  border: 1px solid rgba(128, 128, 128, .5) !important;
-  border-radius: 0;
-  color: inherit;
-}
-
-/* Variables and properties searching */
-
-.variables-view-searchinput {
-  min-height: 24px;
-}
-
-.variable-or-property[unmatched] {
-  border: none;
-  margin: 0;
-}
-
-/* Expand/collapse arrow */
-
 .arrow {
+  -moz-appearance: none;
   background: url("chrome://global/skin/tree/twisty-clsd.png") center center no-repeat;
-  width: 9px;
-  height: 20px;
-  -moz-margin-start: 5px;
-  -moz-margin-end: 5px;
 }
 
 .arrow[open] {
+  -moz-appearance: none;
   background-image: url("chrome://global/skin/tree/twisty-open.png");
 }
-
-.arrow[invisible] {
-  visibility: hidden;
-}
-
-%include ../../shared/devtools/app-manager/manifest-editor.inc.css
--- a/browser/themes/windows/jar.mn
+++ b/browser/themes/windows/jar.mn
@@ -219,25 +219,27 @@ browser.jar:
         skin/classic/browser/devtools/breadcrumbs/rtl-middle.png                   (devtools/breadcrumbs/rtl-middle.png)
         skin/classic/browser/devtools/breadcrumbs/rtl-start-pressed.png            (devtools/breadcrumbs/rtl-start-pressed.png)
         skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
         skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
         skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
         skin/classic/browser/devtools/splitview.css                 (devtools/splitview.css)
         skin/classic/browser/devtools/styleeditor.css               (devtools/styleeditor.css)
 *       skin/classic/browser/devtools/shadereditor.css              (devtools/shadereditor.css)
-        skin/classic/browser/devtools/debugger.css                  (devtools/debugger.css)
+*       skin/classic/browser/devtools/debugger.css                  (devtools/debugger.css)
 *       skin/classic/browser/devtools/profiler.css                  (devtools/profiler.css)
-        skin/classic/browser/devtools/netmonitor.css                (devtools/netmonitor.css)
+*       skin/classic/browser/devtools/netmonitor.css                (devtools/netmonitor.css)
 *       skin/classic/browser/devtools/scratchpad.css                (devtools/scratchpad.css)
         skin/classic/browser/devtools/magnifying-glass.png          (devtools/magnifying-glass.png)
         skin/classic/browser/devtools/option-icon.png               (devtools/option-icon.png)
         skin/classic/browser/devtools/itemToggle.png                (devtools/itemToggle.png)
-        skin/classic/browser/devtools/itemArrow-rtl.png             (devtools/itemArrow-rtl.png)
-        skin/classic/browser/devtools/itemArrow-ltr.png             (devtools/itemArrow-ltr.png)
+        skin/classic/browser/devtools/itemArrow-dark-rtl.png        (../shared/devtools/images/itemArrow-dark-rtl.png)
+        skin/classic/browser/devtools/itemArrow-dark-ltr.png        (../shared/devtools/images/itemArrow-dark-ltr.png)
+        skin/classic/browser/devtools/itemArrow-rtl.png             (../shared/devtools/images/itemArrow-rtl.png)
+        skin/classic/browser/devtools/itemArrow-ltr.png             (../shared/devtools/images/itemArrow-ltr.png)
         skin/classic/browser/devtools/background-noise-toolbar.png  (devtools/background-noise-toolbar.png)
         skin/classic/browser/devtools/noise.png                     (devtools/noise.png)
         skin/classic/browser/devtools/inspect-button.png            (devtools/inspect-button.png)
         skin/classic/browser/devtools/dropmarker.png                (devtools/dropmarker.png)
         skin/classic/browser/devtools/layout-background-grid.png    (devtools/layout-background-grid.png)
         skin/classic/browser/devtools/layoutview.css                (devtools/layoutview.css)
         skin/classic/browser/devtools/debugger-collapse.png         (devtools/debugger-collapse.png)
         skin/classic/browser/devtools/debugger-expand.png           (devtools/debugger-expand.png)
@@ -530,27 +532,29 @@ browser.jar:
         skin/classic/aero/browser/devtools/breadcrumbs/rtl-middle.png                   (devtools/breadcrumbs/rtl-middle.png)
         skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-pressed.png            (devtools/breadcrumbs/rtl-start-pressed.png)
         skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
         skin/classic/aero/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
         skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
         skin/classic/aero/browser/devtools/splitview.css             (devtools/splitview.css)
         skin/classic/aero/browser/devtools/styleeditor.css           (devtools/styleeditor.css)
 *       skin/classic/aero/browser/devtools/shadereditor.css          (devtools/shadereditor.css)
-        skin/classic/aero/browser/devtools/debugger.css              (devtools/debugger.css)
+*       skin/classic/aero/browser/devtools/debugger.css              (devtools/debugger.css)
 *       skin/classic/aero/browser/devtools/profiler.css              (devtools/profiler.css)
-        skin/classic/aero/browser/devtools/netmonitor.css            (devtools/netmonitor.css)
+*       skin/classic/aero/browser/devtools/netmonitor.css            (devtools/netmonitor.css)
 *       skin/classic/aero/browser/devtools/scratchpad.css            (devtools/scratchpad.css)
         skin/classic/aero/browser/devtools/magnifying-glass.png      (devtools/magnifying-glass.png)
         skin/classic/aero/browser/devtools/option-icon.png           (devtools/option-icon.png)
         skin/classic/aero/browser/devtools/itemToggle.png            (devtools/itemToggle.png)
-        skin/classic/aero/browser/devtools/itemArrow-rtl.png         (devtools/itemArrow-rtl.png)
+        skin/classic/aero/browser/devtools/itemArrow-dark-rtl.png    (../shared/devtools/images/itemArrow-dark-rtl.png)
+        skin/classic/aero/browser/devtools/itemArrow-dark-ltr.png    (../shared/devtools/images/itemArrow-dark-ltr.png)
+        skin/classic/aero/browser/devtools/itemArrow-rtl.png         (../shared/devtools/images/itemArrow-rtl.png)
+        skin/classic/aero/browser/devtools/itemArrow-ltr.png         (../shared/devtools/images/itemArrow-ltr.png)
         skin/classic/aero/browser/devtools/background-noise-toolbar.png (devtools/background-noise-toolbar.png)
         skin/classic/aero/browser/devtools/noise.png                 (devtools/noise.png)
-        skin/classic/aero/browser/devtools/itemArrow-ltr.png         (devtools/itemArrow-ltr.png)
         skin/classic/aero/browser/devtools/inspect-button.png        (devtools/inspect-button.png)
         skin/classic/aero/browser/devtools/dropmarker.png            (devtools/dropmarker.png)
         skin/classic/aero/browser/devtools/layout-background-grid.png (devtools/layout-background-grid.png)
         skin/classic/aero/browser/devtools/layoutview.css            (devtools/layoutview.css)
         skin/classic/aero/browser/devtools/debugger-collapse.png     (devtools/debugger-collapse.png)
         skin/classic/aero/browser/devtools/debugger-expand.png       (devtools/debugger-expand.png)
         skin/classic/aero/browser/devtools/debugger-pause.png        (devtools/debugger-pause.png)
         skin/classic/aero/browser/devtools/debugger-play.png         (devtools/debugger-play.png)