From bc8c249c183aa157d20d276887deee2883518349 Mon Sep 17 00:00:00 2001
From: Paul Rouget <paul@mozilla.com>
Date: Mon, 19 Dec 2011 15:14:58 +0100
Subject: [PATCH] Bug 687702 - Skin the Style Editor according to shorlander's
 mockups. r=dao

---
 browser/base/content/browser.xul              |   9 +-
 browser/devtools/highlighter/inspector.jsm    |   2 +
 browser/devtools/styleeditor/SplitView.jsm    |  38 +---
 .../styleeditor/StyleEditorChrome.jsm         |   2 +-
 browser/devtools/styleeditor/splitview.css    |  30 ++-
 browser/devtools/styleeditor/styleeditor.css  |  80 +++++++-
 browser/devtools/styleeditor/styleeditor.xul  |  55 +++---
 .../test/browser_styleeditor_readonly.js      |   2 +-
 browser/themes/gnomestripe/browser.css        |  55 ------
 .../themes/gnomestripe/devtools/common.css    | 112 +++++++++++
 .../gnomestripe/devtools/eye-toggle.png       | Bin 784 -> 0 bytes
 .../gnomestripe/devtools/itemArrow-ltr.png    | Bin 0 -> 2912 bytes
 .../gnomestripe/devtools/itemArrow-rtl.png    | Bin 0 -> 2908 bytes
 .../gnomestripe/devtools/itemToggle.png       | Bin 0 -> 1103 bytes
 .../gnomestripe/devtools/magnifying-glass.png | Bin 0 -> 275 bytes
 .../themes/gnomestripe/devtools/splitview.css | 165 +++++++++-------
 .../gnomestripe/devtools/styleeditor.css      | 187 ++++++++----------
 browser/themes/gnomestripe/jar.mn             |   6 +-
 browser/themes/pinstripe/browser.css          |  53 -----
 browser/themes/pinstripe/devtools/common.css  | 113 +++++++++++
 .../themes/pinstripe/devtools/eye-toggle.png  | Bin 784 -> 0 bytes
 .../pinstripe/devtools/itemArrow-ltr.png      | Bin 0 -> 2912 bytes
 .../pinstripe/devtools/itemArrow-rtl.png      | Bin 0 -> 2908 bytes
 .../themes/pinstripe/devtools/itemToggle.png  | Bin 0 -> 1103 bytes
 .../pinstripe/devtools/magnifying-glass.png   | Bin 0 -> 275 bytes
 .../themes/pinstripe/devtools/splitview.css   | 165 +++++++++-------
 .../themes/pinstripe/devtools/styleeditor.css | 187 ++++++++----------
 browser/themes/pinstripe/jar.mn               |   6 +-
 browser/themes/winstripe/browser.css          |  54 -----
 browser/themes/winstripe/devtools/common.css  | 120 +++++++++++
 .../themes/winstripe/devtools/eye-toggle.png  | Bin 784 -> 0 bytes
 .../winstripe/devtools/itemArrow-ltr.png      | Bin 0 -> 2912 bytes
 .../winstripe/devtools/itemArrow-rtl.png      | Bin 0 -> 2908 bytes
 .../themes/winstripe/devtools/itemToggle.png  | Bin 0 -> 1103 bytes
 .../winstripe/devtools/magnifying-glass.png   | Bin 0 -> 1111 bytes
 .../themes/winstripe/devtools/splitview.css   | 165 +++++++++-------
 .../themes/winstripe/devtools/styleeditor.css | 187 ++++++++----------
 browser/themes/winstripe/jar.mn               |  12 +-
 38 files changed, 1061 insertions(+), 744 deletions(-)
 create mode 100644 browser/themes/gnomestripe/devtools/common.css
 delete mode 100644 browser/themes/gnomestripe/devtools/eye-toggle.png
 create mode 100644 browser/themes/gnomestripe/devtools/itemArrow-ltr.png
 create mode 100644 browser/themes/gnomestripe/devtools/itemArrow-rtl.png
 create mode 100644 browser/themes/gnomestripe/devtools/itemToggle.png
 create mode 100644 browser/themes/gnomestripe/devtools/magnifying-glass.png
 create mode 100644 browser/themes/pinstripe/devtools/common.css
 delete mode 100644 browser/themes/pinstripe/devtools/eye-toggle.png
 create mode 100644 browser/themes/pinstripe/devtools/itemArrow-ltr.png
 create mode 100644 browser/themes/pinstripe/devtools/itemArrow-rtl.png
 create mode 100644 browser/themes/pinstripe/devtools/itemToggle.png
 create mode 100644 browser/themes/pinstripe/devtools/magnifying-glass.png
 create mode 100644 browser/themes/winstripe/devtools/common.css
 delete mode 100644 browser/themes/winstripe/devtools/eye-toggle.png
 create mode 100644 browser/themes/winstripe/devtools/itemArrow-ltr.png
 create mode 100644 browser/themes/winstripe/devtools/itemArrow-rtl.png
 create mode 100644 browser/themes/winstripe/devtools/itemToggle.png
 create mode 100644 browser/themes/winstripe/devtools/magnifying-glass.png

diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index d96ef8d894ab..d510b536e9c1 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -55,6 +55,7 @@
 
 <?xml-stylesheet href="chrome://browser/content/browser.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/content/places/places.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/devtools/webconsole.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/" type="text/css"?>
 
@@ -971,7 +972,9 @@
     <splitter id="devtools-side-splitter" hidden="true"/>
     <vbox id="devtools-sidebar-box" hidden="true"
           style="min-width: 18em; width: 22em; max-width: 42em;" persist="width">
-      <toolbar id="devtools-sidebar-toolbar" nowindowdrag="true"/>
+      <toolbar id="devtools-sidebar-toolbar"
+               class="devtools-toolbar"
+               nowindowdrag="true"/>
       <deck id="devtools-sidebar-deck" flex="1"/>
     </vbox>
     <vbox id="browser-border-end" hidden="true" layer="true"/>
@@ -987,6 +990,7 @@
 
   <vbox id="browser-bottombox" layer="true">
     <toolbar id="inspector-toolbar"
+             class="devtools-toolbar"
              nowindowdrag="true"
              hidden="true">
       <vbox flex="1">
@@ -1001,6 +1005,7 @@
                          tooltiptext="&inspectCloseButton.tooltiptext;"/>
 #endif
           <toolbarbutton id="inspector-inspect-toolbutton"
+                         class="devtools-toolbarbutton"
                          label="&inspectButton.label;"
                          accesskey="&inspectButton.accesskey;"
                          command="Inspector:Inspect"/>
@@ -1009,11 +1014,13 @@
                           clicktoscroll="true"/>
           <hbox id="inspector-tools">
             <toolbarbutton id="inspector-3D-button"
+                           class="devtools-toolbarbutton"
                            hidden="true"
                            label="&inspect3DButton.label;"
                            accesskey="&inspect3DButton.accesskey;"
                            command="Inspector:Tilt"/>
             <toolbarbutton id="inspector-style-button"
+                           class="devtools-toolbarbutton"
                            label="&inspectStyleButton.label;"
                            accesskey="&inspectStyleButton.accesskey;"
                            command="Inspector:Sidebar"/>
diff --git a/browser/devtools/highlighter/inspector.jsm b/browser/devtools/highlighter/inspector.jsm
index 5925ffd3d7f1..32926bce15be 100644
--- a/browser/devtools/highlighter/inspector.jsm
+++ b/browser/devtools/highlighter/inspector.jsm
@@ -1672,6 +1672,7 @@ InspectorUI.prototype = {
     btn = this.chromeDoc.createElement("toolbarbutton");
     let buttonId = this.getToolbarButtonId(aRegObj.id);
     btn.setAttribute("id", buttonId);
+    btn.setAttribute("class", "devtools-toolbarbutton");
     btn.setAttribute("label", aRegObj.label);
     btn.setAttribute("tooltiptext", aRegObj.tooltiptext);
     btn.setAttribute("accesskey", aRegObj.accesskey);
@@ -1733,6 +1734,7 @@ InspectorUI.prototype = {
 
     btn.id = buttonId;
     btn.setAttribute("label", aRegObj.label);
+    btn.setAttribute("class", "devtools-toolbarbutton");
     btn.setAttribute("tooltiptext", aRegObj.tooltiptext);
     btn.setAttribute("accesskey", aRegObj.accesskey);
     btn.setAttribute("image", aRegObj.icon || "");
diff --git a/browser/devtools/styleeditor/SplitView.jsm b/browser/devtools/styleeditor/SplitView.jsm
index 6edf5a817815..6262ed713319 100644
--- a/browser/devtools/styleeditor/SplitView.jsm
+++ b/browser/devtools/styleeditor/SplitView.jsm
@@ -20,6 +20,7 @@
  *
  * Contributor(s):
  *   Cedric Vivier <cedricv@neonux.com> (original author)
+ *   Paul Rouget <paul@mozilla.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -232,9 +233,6 @@ SplitView.prototype = {
    *         string and will be hidden.
    *     - object data
    *         Object to pass to the callbacks above.
-   *     - boolean disableAnimations
-   *         If true there is no animation or scrolling when this item is
-   *         appended. Set this when batch appending (eg. initial population).
    *     - number ordinal
    *         Items with a lower ordinal are displayed before those with a
    *         higher ordinal.
@@ -247,10 +245,6 @@ SplitView.prototype = {
     binding._details = aDetails;
     aSummary.setUserData(BINDING_USERDATA, binding, null);
 
-    if (!binding.disableAnimations) {
-      aSummary.classList.add("splitview-slide");
-      aSummary.classList.add("splitview-flash");
-    }
     this._nav.appendChild(aSummary);
 
     aSummary.addEventListener("click", function onSummaryClick(aEvent) {
@@ -266,11 +260,6 @@ SplitView.prototype = {
         binding.onCreate(aSummary, aDetails, binding.data);
       }, 0);
     }
-
-    if (!binding.disableAnimations) {
-      scheduleAnimation(aSummary, "splitview-slide", "splitview-flash");
-      aSummary.scrollIntoView();
-    }
   },
 
   /**
@@ -462,28 +451,3 @@ SplitView.prototype = {
     }
   }
 };
-
-//
-// private helpers
-
-/**
- * Schedule one or multiple CSS animation(s) on an element.
- *
- * @param DOMElement aElement
- * @param string ...
- *        One or multiple animation class name(s).
- */
-function scheduleAnimation(aElement)
-{
-  let classes = Array.prototype.slice.call(arguments, 1);
-  for each (let klass in classes) {
-    aElement.classList.add(klass);
-  }
-
-  let window = aElement.ownerDocument.defaultView;
-  window.mozRequestAnimationFrame(function triggerAnimation() {
-    for each (let klass in classes) {
-      aElement.classList.remove(klass);
-    }
-  });
-}
diff --git a/browser/devtools/styleeditor/StyleEditorChrome.jsm b/browser/devtools/styleeditor/StyleEditorChrome.jsm
index f6d10f70e260..b71a8d15bbbd 100644
--- a/browser/devtools/styleeditor/StyleEditorChrome.jsm
+++ b/browser/devtools/styleeditor/StyleEditorChrome.jsm
@@ -351,7 +351,7 @@ StyleEditorChrome.prototype = {
    */
   _disableChrome: function SEC__disableChrome()
   {
-    let matches = this._root.querySelectorAll("button,input,select");
+    let matches = this._root.querySelectorAll("button,toolbarbutton,textbox");
     for (let i = 0; i < matches.length; ++i) {
       matches[i].setAttribute("disabled", "disabled");
     }
diff --git a/browser/devtools/styleeditor/splitview.css b/browser/devtools/styleeditor/splitview.css
index f1745772fd9b..cf1f68eb0690 100644
--- a/browser/devtools/styleeditor/splitview.css
+++ b/browser/devtools/styleeditor/splitview.css
@@ -20,6 +20,7 @@
  *
  * Contributor(s):
  *   Cedric Vivier <cedricv@neonux.com> (original author)
+ *   Paul Rouget <paul@mozilla.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -41,17 +42,24 @@ box,
   -moz-box-orient: vertical;
 }
 
+.splitview-nav-container {
+  -moz-box-pack: center;
+}
+
+.splitview-controller,
 .splitview-main {
   -moz-box-flex: 0;
 }
 
 .splitview-controller {
-  min-height: 8em;
+  min-height: 3em;
   max-height: 14em;
 }
 
 .splitview-nav {
   display: -moz-box;
+  overflow-x: hidden;
+  overflow-y: auto;
 }
 
 /* only the active details pane is shown */
@@ -62,13 +70,16 @@ box,
   display: -moz-box;
 }
 
+.splitview-landscape-resizer {
+  cursor: ew-resize;
+}
+
 /* this is to keep in sync with SplitView.jsm's LANDSCAPE_MEDIA_QUERY */
 @media (min-aspect-ratio: 5/3) {
   .splitview-root {
     -moz-box-orient: horizontal;
   }
   .splitview-controller {
-    -moz-box-flex: 0;
     max-height: none;
   }
   .splitview-details {
@@ -94,3 +105,18 @@ ol.splitview-nav > li.splitview-filtered {
 .splitview-nav:empty ~ .splitview-nav.placeholder.empty {
   display: -moz-box;
 }
+
+.splitview-portrait-resizer {
+  display: none;
+}
+
+/* portrait mode */
+@media (max-aspect-ratio: 5/3) {
+  #splitview-details-toolbar {
+    display: none;
+  }
+
+  .splitview-portrait-resizer {
+    display: -moz-box;
+  }
+}
diff --git a/browser/devtools/styleeditor/styleeditor.css b/browser/devtools/styleeditor/styleeditor.css
index 45e2f01f9d22..72286dd0472b 100644
--- a/browser/devtools/styleeditor/styleeditor.css
+++ b/browser/devtools/styleeditor/styleeditor.css
@@ -35,9 +35,85 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
-.splitview-nav > li hgroup > .stylesheet-error-message {
+.stylesheet-error-message {
   display: none;
 }
-.splitview-nav > li.error hgroup > .stylesheet-error-message {
+
+li.error > .stylesheet-info > .stylesheet-more  > .stylesheet-error-message {
   display: block;
 }
+
+.splitview-nav > li,
+.stylesheet-info,
+.stylesheet-more {
+  display: -moz-box;
+}
+
+.splitview-nav > li {
+  -moz-box-orient: horizontal;
+}
+
+.splitview-nav > li > hgroup {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  -moz-box-flex: 1;
+}
+
+.stylesheet-info > h1 {
+  -moz-box-flex: 1;
+}
+
+.stylesheet-name {
+  /* clip the text at the beginning */
+  display: -moz-box;
+  direction: rtl;
+  text-align: left;
+  overflow: hidden;
+}
+
+.splitview-nav > li > hgroup.stylesheet-info {
+  -moz-box-pack: center;
+}
+
+.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
+.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
+  content: "* ";
+}
+
+.stylesheet-enabled {
+  display: -moz-box;
+}
+
+.stylesheet-saveButton {
+  display: none;
+}
+
+.stylesheet-rule-count,
+li:hover > hgroup > .stylesheet-more > h3 >  .stylesheet-saveButton {
+  display: -moz-box;
+}
+
+.stylesheet-more > spacer {
+  -moz-box-flex: 1;
+}
+
+/* portrait mode */
+@media (max-aspect-ratio: 5/3) {
+  li:hover > hgroup > .stylesheet-more > .stylesheet-rule-count {
+    display: none;
+  }
+
+  .stylesheet-more {
+    -moz-box-flex: 1;
+    -moz-box-direction: reverse;
+  }
+
+  .splitview-nav > li > hgroup.stylesheet-info {
+    -moz-box-orient: horizontal;
+    -moz-box-flex: 1;
+  }
+
+  .stylesheet-more > spacer {
+    -moz-box-flex: 0;
+  }
+}
diff --git a/browser/devtools/styleeditor/styleeditor.xul b/browser/devtools/styleeditor/styleeditor.xul
index 82618ee83125..86c12abf9355 100644
--- a/browser/devtools/styleeditor/styleeditor.xul
+++ b/browser/devtools/styleeditor/styleeditor.xul
@@ -20,6 +20,7 @@
    -
    - Contributor(s):
    -   Cedric Vivier <cedricv@neonux.com> (original author)
+   -   Paul Rouget <paul@mozilla.com>
    -
    - Alternatively, the contents of this file may be used under the terms of
    - either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -40,6 +41,7 @@
 ]>
 <?xml-stylesheet href="chrome://global/skin/global.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/content/splitview.css" type="text/css"?>
+<?xml-stylesheet href="chrome://browser/skin/devtools/common.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/devtools/splitview.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/content/styleeditor.css" type="text/css"?>
 <?xml-stylesheet href="chrome://browser/skin/devtools/styleeditor.css" type="text/css"?>
@@ -53,24 +55,23 @@
 <xul:script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
 
 <xul:box id="style-editor-chrome" class="splitview-root">
-  <xul:box class="splitview-side-details"></xul:box>
-  <xul:box class="splitview-controller">
+  <xul:box class="splitview-controller" id="stylesheets-controller" persist="width height">
     <xul:box class="splitview-main">
-      <xul:box class="toolbar">
-        <xul:button class="style-editor-newButton"
+      <xul:toolbar class="devtools-toolbar">
+        <xul:toolbarbutton class="style-editor-newButton devtools-toolbarbutton"
                     accesskey="&newButton.accesskey;"
                     tooltiptext="&newButton.tooltip;"
-                    label="&newButton.label;"></xul:button>
-        <xul:button class="style-editor-importButton"
+                    label="&newButton.label;"/>
+        <xul:toolbarbutton class="style-editor-importButton devtools-toolbarbutton"
                     accesskey="&importButton.accesskey;"
                     tooltiptext="&importButton.tooltip;"
-                    label="&importButton.label;"></xul:button>
-        <xul:box class="spacer" flex="1"></xul:box>
-        <xul:textbox class="splitview-filter"
-                     type="search"
+                    label="&importButton.label;"/>
+        <xul:spacer flex="1"/>
+        <xul:textbox class="splitview-filter devtools-searchinput"
+                     type="search" flex="1"
                      tooltiptext="&searchInput.tooltip;"
                      placeholder="&searchInput.placeholder;"/>
-      </xul:box>
+      </xul:toolbar>
     </xul:box>
     <xul:box class="splitview-nav-container">
       <ol class="splitview-nav" tabindex="0"></ol>
@@ -90,6 +91,7 @@
       </div>
     </xul:box> <!-- .splitview-nav-container -->
   </xul:box>   <!-- .splitview-controller -->
+  <xul:box class="splitview-side-details"/>
 
   <div id="splitview-templates" hidden="true">
     <li id="splitview-tpl-summary-stylesheet" tabindex="0">
@@ -98,24 +100,29 @@
          accesskey="&saveButton.accesskey;"></a>
       <hgroup class="stylesheet-info">
         <h1><a class="stylesheet-name" href="#"></a></h1>
-        <h2 class="stylesheet-title"></h2>
-        <h3 class="stylesheet-error-message"></h3>
-      </hgroup>
-      <div class="stylesheet-more">
-        <hgroup class="stylesheet-stats">
+        <div class="stylesheet-more">
+          <h3 class="stylesheet-title"></h3>
           <h3 class="stylesheet-rule-count"></h3>
-        </hgroup>
-        <hgroup class="stylesheet-actions">
-          <h1><a class="stylesheet-saveButton" href="#"
+          <h3 class="stylesheet-error-message"></h3>
+          <xul:spacer/>
+          <h3><a class="stylesheet-saveButton" href="#"
                  title="&saveButton.tooltip;"
-                 accesskey="&saveButton.accesskey;">&saveButton.label;</a></h1>
-        </hgroup>
-      </div>
+                 accesskey="&saveButton.accesskey;">&saveButton.label;</a></h3>
+        </div>
+      </hgroup>
     </li>
 
     <xul:box id="splitview-tpl-details-stylesheet" class="splitview-details">
-      <div class="stylesheet-editor-input textbox"
-           data-placeholder="&editorTextbox.placeholder;"></div>
+      <xul:resizer class="splitview-portrait-resizer"
+               dir="bottom"
+               element="stylesheets-controller"/>
+      <xul:toolbar id="splitview-details-toolbar" class="devtools-toolbar">
+        <xul:resizer class="splitview-landscape-resizer"
+                     dir="bottomend"
+                     element="stylesheets-controller"/>
+      </xul:toolbar>
+      <xul:box class="stylesheet-editor-input textbox"
+               data-placeholder="&editorTextbox.placeholder;"/>
     </xul:box>
   </div> <!-- #splitview-templates -->
 </xul:box>   <!-- .splitview-root -->
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_readonly.js b/browser/devtools/styleeditor/test/browser_styleeditor_readonly.js
index d307cccbb309..29aaf4548c26 100644
--- a/browser/devtools/styleeditor/test/browser_styleeditor_readonly.js
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_readonly.js
@@ -51,7 +51,7 @@ function run(aChrome)
   let elements;
 
   disabledCount = 0;
-  elements = document.querySelectorAll("button,input,select");
+  elements = document.querySelectorAll("button,toolbarbutton,textbox");
   for (let i = 0; i < elements.length; ++i) {
     if (elements[i].hasAttribute("disabled")) {
       disabledCount++;
diff --git a/browser/themes/gnomestripe/browser.css b/browser/themes/gnomestripe/browser.css
index b6a35396a364..6c1d76384f37 100644
--- a/browser/themes/gnomestripe/browser.css
+++ b/browser/themes/gnomestripe/browser.css
@@ -1983,11 +1983,7 @@ panel[dimmed="true"] {
 /* Highlighter toolbar */
 
 #inspector-toolbar {
-  -moz-appearance: none;
-  padding: 4px 3px;
   border-top: 1px solid hsla(210, 8%, 5%, .65);
-  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
-  background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
 }
 
 #inspector-toolbar[treepanel-open] {
@@ -1995,13 +1991,6 @@ panel[dimmed="true"] {
   -moz-padding-end: 0;
 }
 
-#devtools-sidebar-toolbar {
-  -moz-appearance: none;
-  padding: 4px 3px;
-  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
-  background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
-}
-
 #devtools-side-splitter {
   -moz-appearance: none;
   border: 0;
@@ -2013,50 +2002,6 @@ panel[dimmed="true"] {
   position: relative;
 }
 
-#inspector-inspect-toolbutton,
-#inspector-tools > toolbarbutton,
-#devtools-sidebar-toolbar > toolbarbutton {
-  -moz-appearance: none;
-  min-width: 78px;
-  min-height: 22px;
-  color: hsl(210,30%,85%);
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border: 1px solid hsla(210,8%,5%,.45);
-  border-radius: 3px;
-  background: -moz-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);
-  margin: 0 3px;
-}
-
-#inspector-inspect-toolbutton:not([checked]):hover:active,
-#inspector-tools > toolbarbutton:not([checked]):hover:active,
-#devtools-sidebar-toolbar > toolbarbutton:not([checked]):hover:active {
-  border-color: hsla(210,8%,5%,.6);
-  background: -moz-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);
-}
-
-#inspector-inspect-toolbutton[checked],
-#inspector-tools > toolbarbutton[checked],
-#devtools-sidebar-toolbar > toolbarbutton[checked] {
-  color: hsl(208,100%,60%) !important;
-  border-color: hsla(210,8%,5%,.6) !important;
-  background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
-  box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
-}
-
-#inspector-inspect-toolbutton[checked]:hover,
-#inspector-tools > toolbarbutton[checked]:hover,
-#devtools-sidebar-toolbar > toolbarbutton[checked]:hover {
-  background-color: transparent !important;
-}
-
-#inspector-inspect-toolbutton[checked]:hover:active,
-#inspector-tools > toolbarbutton[checked]:hover:active,
-#devtools-sidebar-toolbar > toolbarbutton[checked]:hover:active {
-  background-color: hsla(210,8%,5%,.2) !important;
-}
-
 /* Highlighter - toolbar resizers */
 
 .inspector-resizer {
diff --git a/browser/themes/gnomestripe/devtools/common.css b/browser/themes/gnomestripe/devtools/common.css
new file mode 100644
index 000000000000..ce1ebf36f8be
--- /dev/null
+++ b/browser/themes/gnomestripe/devtools/common.css
@@ -0,0 +1,112 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is DevTools code.
+ *
+ * The Initial Developer of the Original Code is Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Paul Rouget <paul@mozilla.com> (original author)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/* Toolbar and Toolbar items */
+
+.devtools-toolbar {
+  -moz-appearance: none;
+  padding: 4px 3px;
+  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
+  background: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
+}
+
+.devtools-toolbarbutton {
+  -moz-appearance: none;
+  min-width: 78px;
+  min-height: 22px;
+  color: hsl(210,30%,85%);
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  border: 1px solid hsla(210,8%,5%,.45);
+  border-radius: 3px;
+  background: -moz-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);
+  margin: 0 3px;
+}
+
+.devtools-toolbarbutton:not([checked]):hover:active {
+  border-color: hsla(210,8%,5%,.6);
+  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
+  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-toolbarbutton[checked] {
+  color: hsl(208,100%,60%) !important;
+  border-color: hsla(210,8%,5%,.6) !important;
+  background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
+  box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-toolbarbutton[checked]:hover {
+  background-color: transparent !important;
+}
+
+.devtools-toolbarbutton[checked]:hover:active {
+  background-color: hsla(210,8%,5%,.2) !important;
+}
+
+/* Search input */
+
+.devtools-searchinput {
+  -moz-appearance: none;
+  margin: 0 3px;
+  background-color: transparent;
+  border: 1px solid hsla(210,8%,5%,.6);
+  border-radius: 20px;
+  background-image: url(magnifying-glass.png), -moz-linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
+  background-repeat: no-repeat;
+  background-position: 4px 3px, top left, top left;
+  padding-top: 0;
+  padding-bottom: 0;
+  -moz-padding-start: 18px;
+  -moz-padding-end: 12px;
+  box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset,
+              0 0 0 1px hsla(210,16%,76%,.1) inset,
+              0 1px 0 hsla(210,16%,76%,.15);
+  color: hsl(210,30%,85%);
+}
+
+.devtools-searchinput:-moz-locale-dir(rtl) {
+  background-position: -moz-calc(100% - 4px) 3px, top left, top left;
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
+  display: none;
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-input:-moz-placeholder {
+  color: hsl(208,10%,66%);
+}
diff --git a/browser/themes/gnomestripe/devtools/eye-toggle.png b/browser/themes/gnomestripe/devtools/eye-toggle.png
deleted file mode 100644
index 4ad3c219c6493fdfbe3152b206a9052288dee505..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 784
zcmV+r1MmEaP)<h;3K|Lk000e1NJLTq000sI000aK1^@s6ZxZdi00001b5ch_0Itp)
z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2ipq)
z69Y1a+YeFz00NLnL_t(2&#jVANK|1I#n1P>H}hnkqo@lJnzD3;q(aN6O^d)#p`rYf
zWtIqqNP*CzRl61yQj16uG!zUiMQsoVsv%kwCYDJCQmG_nng2`2H_jX1_uUpfgra2^
z&gOFX!9C{!|7qCYi;7caiG~p=0kBh&^bwE>0t3U6!uTi{n~vA@&i0PZg@1xV!2oY)
zYAzQ-))L6As>*oA_VoIKBY9&0*wbgveV->MYb{G;5+EI_T7RMXTyws^SZ;zs!GLnN
zvAIr4k;fS`9Zu(T)!EZmG^cX~fNA@jW-ON2+V=3e6^m^VL~)9$bYHAKe<R;tER|3&
zz#Hy0UnL<9E1VesuxD3R{f_kXiTe*ax4q~exHkCat^d>b#At3#_V@Mm^@Z8F`9qwu
zbs^;L;gJ#j&aJxFO4x{87M3WmAr|92T3U3h5y0BZ{(+kul*Sp{rWwmQus^qZtH<+W
zX!u<rK$0_N3L*CnkBqofr^69%3b6*j0ze=l08s!;Rh6i)L<9g-Rf*asMnSY;`x$3U
zs*0M-D=SX6xOCST5hQ>ONyK}4`@8_)^Jcbbnl__p+N{r;*#-bTy?tIu!~tv&LF&5x
zv9jV+3kwAUiE9xft-GhU#xM*I013uc%gahGr6ecE0Z6oqU0GUQj&^iCx(%WP09@Dg
zsS~Bgo8n#iEDHq#3IO+7#7KSoBvdp%zqn5lIT>S%ZnwL!>P-0u0BCLR$O?zUHAIxc
z8M9JSlHdD}7IwwE^f>_G&H4f80Fu7W%%r^<7(DoMWz}QGOpg?lgx_JT#%bDALW28S
zZcg@)H#6f4fMozizQ0)f@sI#C04`e&00cnV7H)@a0f^W#^ZmsF0Db`r+#yvr<!LDZ
O0000<MNUMnLSTYptX97O

diff --git a/browser/themes/gnomestripe/devtools/itemArrow-ltr.png b/browser/themes/gnomestripe/devtools/itemArrow-ltr.png
new file mode 100644
index 0000000000000000000000000000000000000000..b4b2e3fa4dd09f6c51320fc5a6cd186fce469c62
GIT binary patch
literal 2912
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
KMNUMnLSTY4k7Jqu

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/itemArrow-rtl.png b/browser/themes/gnomestripe/devtools/itemArrow-rtl.png
new file mode 100644
index 0000000000000000000000000000000000000000..25da9dbe6b782203c112fd851b0b3345f5ac4cd9
GIT binary patch
literal 2908
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
GLSTYDE@Vys

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/itemToggle.png b/browser/themes/gnomestripe/devtools/itemToggle.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf70394e6a1c4fae7c8aa60266063d417740798a
GIT binary patch
literal 1103
zcmV-V1hD&wP)<h;3K|Lk000e1NJLTq001xm000;W1^@s6y#0RM0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#@kvBMRCwC#S6yfvRTQ3kXLoj!?6_@H
zv%5{ENow;`TPuiIL&ZK+6cO6uLks$%NU2YyQ1GE3^r_-g3s!;wn-_)J)}J+4MJ%WY
zMX3)>2>Gk2yVGQMlBVfoce}HhnL9nFo-M;RyTKPFuoph&&b{Z}d%p8`XPD=C(pqj@
zTH~!wpiZDpV2!uH!%npIk;y-={v1ujTV9tK>y^3O&6pJ9oHHTBg5$cQo)CH_Ykbk!
z(LP_fHrf<k_3+F>PKHM_pn(tsFn|rX2Pgq<104UlM6<f82e^J?<c+r0#1Daha@?`q
z?ytZ7?xPm1`{2gbtp_iCGj!Tsc6wm$-F8j8lFt_oH*b34UwIRhN5!86v;mN98ZZJF
z2Bc_g6JQ6RrP@BMe3AJ)AkR#Xekcc(y}}WtTp_PN+qdULE|)jSB4{B+RU^@BSARLx
z)D&q8$UMAUvMz1zdg_CP*}ueU9suRr;jw{U(bAKE${Q8W=>{~?`y60qH4kuoYUCsj
z1b5rEYkEv_&R_U)5R||3`>#K0MrxveUZ3p8K91oWgq3SMuBn7V`%)9vkD@17ZOfy@
z*OS5sot~&@7oo9Y4)Hi3UdsbKJvn?_35WODjws?HPq^;pt=r#$zM1)Ze9)74>>twz
zBhk_OHX1s8WAszTWsGH}1muWSym!96=jpSKIU`n3K3)+HE?|`UU6cpd@cb$2Z^x+c
ztuep@#v@6L36w7sB2gujr=;;1<H*iJ<%-3U6$*#Z-I8UMEON00GB(LG7qYu(SsQ5I
z<tkOrA1eO7@V$!)8NZxdwT$-ddF9-kF*nH>!wqbRZJxaNIa)^gDmnC-Y2KX$WU-H9
zIEOMQi)*r(?D+F9zI=|ztr$V*O;S*hT-oZgfIMNA#u`YbEPt2wSTTf<StK5dB`zl~
z9Eru_8t@j9=PvDib^o#Pi7Cv=D6KPld%CPE-zU#VOnwZG;Mq(j_1b|$16jk!q7o27
zZj~HhRC!cixZJElxYI{42e^ga@F#I)6+#j!kcbTqe0*T%&K=LlvaEQXdt29Uee&E3
zFO8wlAHV&yP1D+rFeW!c)Hq{f6T@%5b@(DEkFl9s%uKs#W2jalBZ-Yvi5P{cL1fC7
zk5MVbb_XzD4y9TI$|RbwQta;Am3aTed%L!Dc4$#m)q+8J{e#SN#nPg=luD)bnX~-^
z*OEh*({xAyl}DLc1S&4Fb)>N3%So4Vs7N7aSG&koB2dna5S6n=x*<JZa&fYpLv{SY
zt+|+;ei$}tL+HQ#l&ENe*e_F31;{hZR~ZBmK<fxl{(t$kWA$IkI)OTYwcYLuFaR=9
VtWP9k_G|zE002ovPDHLkV1jva5dZ)H

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/magnifying-glass.png b/browser/themes/gnomestripe/devtools/magnifying-glass.png
new file mode 100644
index 0000000000000000000000000000000000000000..673c32810029e3121cbbe386b108a2951520783b
GIT binary patch
literal 275
zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOUqhk|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*D5XwtBiahE&{2x>NXqhgskQ<3?$L(}oTQlojr=9+@vOfq`3~
zo1xH1pjfH%HN!?Df%D9dt{XV2DU>y7)i4~{yzmEO$QjO?DHD=ZHL7_9>{}n11{kK6
z9BsLw(e!;`j=jRO#w7a{H)2cp-!Uh#DugjU5;8f=(l|r9WB(x^wx4BI0`bg`^aFU3
z_Om2$D)hBxG0Z;0z<WM4V_B2P5yi}io~z0M44bM1C-Lsm;rYSn(`+U%pNYeOAx2GU
V`l@q2u|N+nc)I$ztaD0e0su94U2OmW

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/devtools/splitview.css b/browser/themes/gnomestripe/devtools/splitview.css
index 2ff733e2c9e2..836e7d3812dd 100644
--- a/browser/themes/gnomestripe/devtools/splitview.css
+++ b/browser/themes/gnomestripe/devtools/splitview.css
@@ -20,6 +20,7 @@
  *
  * Contributor(s):
  *   Cedric Vivier <cedricv@neonux.com> (original author)
+ *   Paul Rouget <paul@mozilla.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -35,90 +36,124 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
-.splitview-root {
-  margin-top: 4px;
-}
-
-.splitview-filter {
-  -moz-box-flex: 1;
-  -moz-margin-start: 1ex;
-  max-width: 25ex;
-}
-
 .splitview-nav-container {
-  -moz-box-pack: center;
-  margin: 4px;
-  border: 1px inset WindowFrame;
-  border-radius: 4px;
-  background-color: -moz-default-background-color;
-  color: -moz-default-color;
+  background-color: hsl(208,11%,27%);
+  color: white;
 }
 
-ol.splitview-nav {
-  overflow-x: hidden;
-  overflow-y: auto;
+.splitview-nav {
+  -moz-appearance: none;
+  margin: 0;
+  box-shadow: inset -1px 0 0 #222426;
+}
+
+.splitview-nav > li {
+  color: white;
+  background-clip: padding-box;
+  border-bottom: 1px solid hsla(210,16%,76%,.1);
+  box-shadow: inset 0 -1px 0 hsla(210,8%,5%,.25);
+  -moz-padding-end: 8px;
+  -moz-box-align: center;
+}
+
+.splitview-nav {
   list-style-image: none;
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
-ol.splitview-nav > li {
-  display: -moz-box;
-  -moz-box-orient: vertical;
+.splitview-nav > li {
   outline: 0;
-  border-bottom: 1px solid ThreeDShadow;
-  padding: 2px;
-  padding-top: 4px;
   vertical-align: bottom;
-  color: black;
-  -moz-transition-property: background-color, max-height;
-  -moz-transition-duration: 1s;
-  max-height: 2048px; /* for slide transition */
-}
-ol.splitview-nav > li.splitview-active {
-  background-color: #eaf2fe;   /* same as orion.css's .line_caret */
-}
-ol.splitview-nav > li:hover,
-ol.splitview-nav > li:focus {
-  background-color: #f0f5fd;   /* slightly lighter .line_caret */
 }
 
-ol.splitview-nav > li.splitview-flash {
-  background-color: #faf0e1;   /* complement of .line_caret */
-}
-ol.splitview-nav > li.splitview-slide {
-  max-height: 0;
-  overflow: hidden;
-}
-
-.splitview-side-details {
-  margin: 2px;
-}
-
-.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
-.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
-  -moz-box-flex: 0;
+.placeholder {
+  -moz-box-flex: 1;
+  -moz-box-back: center;
   text-align: center;
 }
 
-.splitview-main .toolbar,
-.splitview-main .toolbar > * {
-  display: -moz-box;
-}
-.splitview-main .toolbar {
-  -moz-box-flex: 1;
-  -moz-box-orient: horizontal;
-  -moz-padding-start: 3px;
+.splitview-nav > li.splitview-active {
+  background-image: url(itemArrow-ltr.png),
+                    -moz-linear-gradient(left, black, black),
+                    -moz-linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%));
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-position: center right, top right, top left;
+  background-size: auto, 1px 100%, auto;
+  border-bottom: 1px solid hsla(210,8%,5%,.25);
+  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15),
+              inset 0 -1px 0 hsla(210,40%,83%,.05);
 }
 
-a {
-  color: -moz-hyperlinktext;
-  text-decoration: underline;
+.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
+  background-image: url(itemArrow-rtl.png),
+                    -moz-linear-gradient(left, black, black),
+                    -moz-linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%));
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-position: center left, top left, top right;
 }
 
-button {
-  margin: 0;
+/* Toolbars */
+
+.devtools-toolbar {
+  height: 26px;
+  background-origin: border-box;
+  background-clip: border-box;
+  border-top: 1px solid hsla(210,8%,5%,.5);
+  border-bottom: 1px solid hsla(210,8%,5%,.65);
+  padding: 3px;
+}
+
+.splitview-main > toolbar:-moz-locale-dir(ltr) {
+  border-right: 1px solid hsla(210,8%,5%,.5);
+}
+
+.splitview-main > toolbar:-moz-locale-dir(rtl) {
+  border-left: 1px solid hsla(210,8%,5%,.5);
+}
+
+.devtools-toolbarbutton {
+  font-size: 11px;
+  padding: 0 8px;
+  width: auto;
+  min-width: 48px;
+  min-height: 0;
+}
+
+
+/* Resizers */
+
+.splitview-landscape-resizer {
+  -moz-appearance: none;
+  width: 7px;
+  background-image: -moz-linear-gradient(left, black 1px, rgba(255,255,255,0.2) 1px);
+  background-size: 2px 10px;
+  background-clip: padding-box;
+  background-repeat: repeat-x;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(255, 255, 255, 0.05);
+  margin: 5px 0;
+  -moz-transform: translateX(-7px);
+}
+
+.splitview-landscape-resizer:-moz-locale-dir(rtl) {
+  -moz-transform: translateX(7px);
+}
+
+.splitview-portrait-resizer {
+  -moz-appearance: none;
+  background: -moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px),
+              -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
+  height: 12px;
+  background-size: 10px 2px, 100% 12px;
+  background-clip: content-box, border-box;
+  background-repeat: repeat-y, no-repeat;
+  background-position: center center;
+  padding: 2px 0;
+  border-top: 1px solid hsla(210,8%,5%,.5);
+  border-bottom: 1px solid hsla(210,8%,5%,.5);
 }
 
 /* limited width mode (hide search unless it has focus [search-on-type]) */
@@ -128,8 +163,6 @@ button {
     position: fixed;
     margin: 0;
     bottom: -4em;
-    -moz-transition-property: bottom;
-    -moz-transition-duration: 0.2s;
   }
   .splitview-filter[focused="true"] {
     bottom: 0;
diff --git a/browser/themes/gnomestripe/devtools/styleeditor.css b/browser/themes/gnomestripe/devtools/styleeditor.css
index 4de0201079be..6ed3edded54e 100644
--- a/browser/themes/gnomestripe/devtools/styleeditor.css
+++ b/browser/themes/gnomestripe/devtools/styleeditor.css
@@ -20,6 +20,7 @@
  *
  * Contributor(s):
  *   Cedric Vivier <cedricv@neonux.com> (original author)
+ *   Paul Rouget <paul@mozilla.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -35,136 +36,89 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
-ol.splitview-nav:focus {
+.stylesheet-title,
+.stylesheet-name {
+  text-decoration: none;
+  color: hsl(207,17%,88%);
+}
+
+.stylesheet-name {
+  font-size: 13px;
+}
+
+.stylesheet-rule-count,
+.stylesheet-saveButton {
+  color: hsl(211,12%,60%);
+}
+
+.stylesheet-saveButton {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.splitview-active .stylesheet-title,
+.splitview-active .stylesheet-name {
+  color: hsl(0,0%,100%);
+}
+
+.splitview-active .stylesheet-rule-count,
+.splitview-active .stylesheet-saveButton {
+  color: hsl(200,66%,70%);
+}
+
+.splitview-nav:focus {
   outline: 0; /* focus ring is on the stylesheet name */
 }
 
-.splitview-nav > li:-moz-locale-dir(ltr),
-.splitview-nav > li hgroup:-moz-locale-dir(ltr) {
-  float: left;
-}
-.splitview-nav > li:-moz-locale-dir(rtl),
-.splitview-nav > li hgroup:-moz-locale-dir(rtl) {
-  float: right;
-}
-.splitview-nav > li > hgroup.stylesheet-info {
-  max-width: 66%;
-}
-.splitview-nav > li > hgroup .stylesheet-name {
-  display: inline-block;
-  width: 100%;
-  max-width: 34ex;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 .splitview-nav > li.unsaved > hgroup .stylesheet-name {
   font-style: italic;
 }
-.splitview-nav > li.unsaved > hgroup .stylesheet-name:before:-moz-locale-dir(ltr),
-.splitview-nav > li.unsaved > hgroup .stylesheet-name:after:-moz-locale-dir(rtl) {
+
+.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
+.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
   font-style: italic;
-  content: "* ";
 }
 
-.splitview-nav > li > .stylesheet-enabled {
-  float: left;
-  width: 20px;
-  height: 20px;
-  -moz-margin-end: 6px;
-  border: 1px solid transparent;
-  background-image: url(eye-toggle.png);
-  background-position: center center;
+.stylesheet-enabled {
+  padding: 8px 0;
+  margin: 0 8px;
+  background-image: url(itemToggle.png);
   background-repeat: no-repeat;
+  background-clip: content-box;
+  background-position: 0 8px;
+  width: 24px;
+  height: 40px;
 }
-.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
-  float: right;
-}
-.splitview-nav > li.disabled > .stylesheet-enabled {
-  background-image: none;
+
+.disabled > .stylesheet-enabled {
+  background-position: -24px 8px;
 }
+
 .splitview-nav > li > .stylesheet-enabled:focus,
 .splitview-nav > li:hover > .stylesheet-enabled {
   outline: 0;
-  border: 1px inset WindowFrame;
-  -moz-margin-end: 6px;
 }
 
-.splitview-nav > li hgroup .stylesheet-title {
-  color: GrayText;
-  font-size: 0.8em;
-}
-.splitview-nav > li.error hgroup > .stylesheet-error-message {
+.stylesheet-error-message {
   color: red;
-  font-size: 0.8em;
 }
 
-.splitview-nav > li > .stylesheet-more {
-  position: relative;
-  right: 0;
-}
-.splitview-nav > li > .stylesheet-more:-moz-locale-dir(rtl) {
-  left: 0;
+.stylesheet-more > h3 {
+  font-size: 11px;
+  -moz-margin-end: 2px;
 }
 
-.splitview-nav > li hgroup.stylesheet-stats,
-.splitview-nav > li hgroup.stylesheet-actions {
-  position: absolute;
-  z-index: 2;
-  -moz-transition-property: left, right;
-  -moz-transition-duration: 0.2s;
-  -moz-transition-delay: 0.2s;
-  -moz-transition-timing-function: ease-in-out;
+.devtools-searchinput {
+  max-width: 25ex;
+  font-size: 11px;
 }
 
-.splitview-nav > li hgroup.stylesheet-stats {
-  z-index: 1;
-  -moz-transition-delay: 0.4s;
-  color: GrayText;
-  padding-left: 6px; /* Fitts */
-  padding-right: 6px;
-}
-.splitview-nav > li hgroup.stylesheet-actions a {
-  color: ButtonText;
-  padding-left: 6px; /* Fitts */
-  padding-right: 6px;
+.placeholder {
+  color: white;
 }
 
-.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(ltr),
-.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(ltr),
-.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(ltr),
-.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(ltr) {
-  right: -50ex;
-}
-.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(rtl),
-.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(rtl),
-.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(rtl),
-.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(rtl) {
-  left: -50ex;
-}
-.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(ltr),
-.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(ltr),
-.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(ltr),
-.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(ltr) {
-  right: 0;
-}
-.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(rtl),
-.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(rtl),
-.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(rtl),
-.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(rtl) {
-  left: 0;
-}
-
-.stylesheet-editor-input {
-  display: -moz-box;
-  -moz-box-flex: 1;
-  overflow: hidden;
-  min-height: 8em;
-  margin: 3px;
-  margin-top: 0;
-  border: 1px inset WindowFrame;
-  border-radius: 4px;
-  background-color: -moz-default-background-color;
+.placeholder a {
+  text-decoration: underline;
 }
 
 h1,
@@ -175,3 +129,28 @@ h3 {
   margin: 0;
   padding: 0;
 }
+
+/* portrait mode */
+@media (max-aspect-ratio: 5/3) {
+  .splitview-nav {
+    box-shadow: none;
+  }
+
+  .splitview-nav > li.splitview-active {
+    background-size: 0 0, 0 0, auto;
+  }
+
+  .stylesheet-enabled {
+    padding: 0;
+    background-position: 0 0;
+    height: 24px;
+  }
+
+  .disabled > .stylesheet-enabled {
+    background-position: -24px 0;
+  }
+
+  .splitview-nav > li > hgroup.stylesheet-info {
+    -moz-box-align: baseline;
+  }
+}
diff --git a/browser/themes/gnomestripe/jar.mn b/browser/themes/gnomestripe/jar.mn
index a9508deb435d..c144ecd87ad1 100644
--- a/browser/themes/gnomestripe/jar.mn
+++ b/browser/themes/gnomestripe/jar.mn
@@ -82,6 +82,7 @@ browser.jar:
   skin/classic/browser/tabview/stack-expander.png     (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png            (tabview/tabview.png)
   skin/classic/browser/tabview/tabview.css            (tabview/tabview.css)
+  skin/classic/browser/devtools/common.css            (devtools/common.css)
   skin/classic/browser/devtools/arrows.png            (devtools/arrows.png)
   skin/classic/browser/devtools/goto-mdn.png          (devtools/goto-mdn.png)
   skin/classic/browser/devtools/csshtmltree.css       (devtools/csshtmltree.css)
@@ -115,7 +116,10 @@ browser.jar:
   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/eye-toggle.png        (devtools/eye-toggle.png)
+  skin/classic/browser/devtools/magnifying-glass.png  (devtools/magnifying-glass.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)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-16-throbber.png
   skin/classic/browser/sync-16.png
diff --git a/browser/themes/pinstripe/browser.css b/browser/themes/pinstripe/browser.css
index 8ae6fdeeb106..54d9c174b022 100644
--- a/browser/themes/pinstripe/browser.css
+++ b/browser/themes/pinstripe/browser.css
@@ -2722,10 +2722,7 @@ panel[dimmed="true"] {
 /* Highlighter toolbar */
 
 #inspector-toolbar {
-  -moz-appearance: none;
   border-top: 1px solid hsla(210, 8%, 5%, .65);
-  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
-  background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
   padding: 4px 16px 4px 0; /* use -moz-padding-end: 16px when/if bug 631729 gets fixed */
 }
 
@@ -2733,13 +2730,6 @@ panel[dimmed="true"] {
   padding: 0 0 4px;
 }
 
-#devtools-sidebar-toolbar {
-  -moz-appearance: none;
-  padding: 4px 3px;
-  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
-  background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
-}
-
 #devtools-side-splitter {
   background-image: none !important;
   border: 0;
@@ -2751,49 +2741,6 @@ panel[dimmed="true"] {
   position: relative;
 }
 
-#inspector-inspect-toolbutton,
-#inspector-tools > toolbarbutton,
-#devtools-sidebar-toolbar > toolbarbutton {
-  -moz-appearance: none;
-  min-width: 78px;
-  min-height: 22px;
-  color: hsl(210,30%,85%);
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border: 1px solid hsla(210,8%,5%,.45);
-  border-radius: @toolbarbuttonCornerRadius@;
-  background: -moz-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);
-}
-
-#inspector-inspect-toolbutton > .toolbarbutton-text ,
-#inspector-tools > toolbarbutton  > .toolbarbutton-text,
-#devtools-sidebar-toolbar > toolbarbutton > .toolbarbutton-text {
-  margin: 1px 6px;
-}
-
-#inspector-inspect-toolbutton:not([checked]):hover:active,
-#inspector-tools > toolbarbutton:not([checked]):hover:active,
-#devtools-sidebar-toolbar > toolbarbutton:not([checked]):hover:active {
-  border-color: hsla(210,8%,5%,.6);
-  background: -moz-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);
-}
-
-#inspector-inspect-toolbutton[checked],
-#inspector-tools > toolbarbutton[checked],
-#devtools-sidebar-toolbar > toolbarbutton[checked] {
-  color: hsl(208,100%,60%) !important;
-  border-color: hsla(210,8%,5%,.6);
-  background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
-  box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
-}
-
-#inspector-inspect-toolbutton[checked]:hover:active,
-#inspector-tools > toolbarbutton[checked]:hover:active,
-#devtools-sidebar-toolbar > toolbarbutton[checked]:hover:active {
-  background-color: hsla(210,8%,5%,.2);
-}
-
 /* Highlighter - toolbar resizers */
 
 .inspector-resizer {
diff --git a/browser/themes/pinstripe/devtools/common.css b/browser/themes/pinstripe/devtools/common.css
new file mode 100644
index 000000000000..ee0eb582603a
--- /dev/null
+++ b/browser/themes/pinstripe/devtools/common.css
@@ -0,0 +1,113 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is DevTools code.
+ *
+ * The Initial Developer of the Original Code is Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Paul Rouget <paul@mozilla.com> (original author)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+%include ../shared.inc
+
+/* Toolbar and Toolbar items */
+
+.devtools-toolbar {
+  -moz-appearance: none;
+  padding: 4px 3px;
+  box-shadow: 0 1px 0 0 hsla(210, 16%, 76%, .2) inset;
+  background-image: -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
+}
+
+.devtools-toolbarbutton {
+  -moz-appearance: none;
+  min-width: 78px;
+  min-height: 22px;
+  color: hsl(210,30%,85%);
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  border: 1px solid hsla(210,8%,5%,.45);
+  border-radius: @toolbarbuttonCornerRadius@;
+  background: -moz-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);
+}
+
+.devtools-toolbarbutton > .toolbarbutton-text {
+  margin: 1px 6px;
+}
+
+.devtools-toolbarbutton:not([checked]):hover:active {
+  border-color: hsla(210,8%,5%,.6);
+  background: -moz-linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
+  box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-toolbarbutton[checked] {
+  color: hsl(208,100%,60%) !important;
+  border-color: hsla(210,8%,5%,.6);
+  background: -moz-linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
+  box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15);
+}
+
+.devtools-toolbarbutton[checked]:hover:active {
+  background-color: hsla(210,8%,5%,.2);
+}
+
+/* Search input */
+
+.devtools-searchinput {
+  -moz-appearance: none;
+  margin: 0 3px;
+  background-color: transparent;
+  border: 1px solid hsla(210,8%,5%,.6);
+  border-radius: 20px;
+  background-image: url(magnifying-glass.png), -moz-linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
+  background-repeat: no-repeat;
+  background-position: 4px 3px, top left, top left;
+  padding-top: 0;
+  padding-bottom: 0;
+  -moz-padding-start: 18px;
+  -moz-padding-end: 12px;
+  box-shadow: 0 1px 1px hsla(210,8%,5%,.3) inset,
+              0 0 0 1px hsla(210,16%,76%,.1) inset,
+              0 1px 0 hsla(210,16%,76%,.15);
+  color: hsl(210,30%,85%);
+}
+
+.devtools-searchinput:-moz-locale-dir(rtl) {
+  background-position: -moz-calc(100% - 4px) 3px, top left, top left;
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
+  display: none;
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-input:-moz-placeholder {
+  color: hsl(208,10%,66%);
+}
diff --git a/browser/themes/pinstripe/devtools/eye-toggle.png b/browser/themes/pinstripe/devtools/eye-toggle.png
deleted file mode 100644
index 4ad3c219c6493fdfbe3152b206a9052288dee505..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 784
zcmV+r1MmEaP)<h;3K|Lk000e1NJLTq000sI000aK1^@s6ZxZdi00001b5ch_0Itp)
z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2ipq)
z69Y1a+YeFz00NLnL_t(2&#jVANK|1I#n1P>H}hnkqo@lJnzD3;q(aN6O^d)#p`rYf
zWtIqqNP*CzRl61yQj16uG!zUiMQsoVsv%kwCYDJCQmG_nng2`2H_jX1_uUpfgra2^
z&gOFX!9C{!|7qCYi;7caiG~p=0kBh&^bwE>0t3U6!uTi{n~vA@&i0PZg@1xV!2oY)
zYAzQ-))L6As>*oA_VoIKBY9&0*wbgveV->MYb{G;5+EI_T7RMXTyws^SZ;zs!GLnN
zvAIr4k;fS`9Zu(T)!EZmG^cX~fNA@jW-ON2+V=3e6^m^VL~)9$bYHAKe<R;tER|3&
zz#Hy0UnL<9E1VesuxD3R{f_kXiTe*ax4q~exHkCat^d>b#At3#_V@Mm^@Z8F`9qwu
zbs^;L;gJ#j&aJxFO4x{87M3WmAr|92T3U3h5y0BZ{(+kul*Sp{rWwmQus^qZtH<+W
zX!u<rK$0_N3L*CnkBqofr^69%3b6*j0ze=l08s!;Rh6i)L<9g-Rf*asMnSY;`x$3U
zs*0M-D=SX6xOCST5hQ>ONyK}4`@8_)^Jcbbnl__p+N{r;*#-bTy?tIu!~tv&LF&5x
zv9jV+3kwAUiE9xft-GhU#xM*I013uc%gahGr6ecE0Z6oqU0GUQj&^iCx(%WP09@Dg
zsS~Bgo8n#iEDHq#3IO+7#7KSoBvdp%zqn5lIT>S%ZnwL!>P-0u0BCLR$O?zUHAIxc
z8M9JSlHdD}7IwwE^f>_G&H4f80Fu7W%%r^<7(DoMWz}QGOpg?lgx_JT#%bDALW28S
zZcg@)H#6f4fMozizQ0)f@sI#C04`e&00cnV7H)@a0f^W#^ZmsF0Db`r+#yvr<!LDZ
O0000<MNUMnLSTYptX97O

diff --git a/browser/themes/pinstripe/devtools/itemArrow-ltr.png b/browser/themes/pinstripe/devtools/itemArrow-ltr.png
new file mode 100644
index 0000000000000000000000000000000000000000..b4b2e3fa4dd09f6c51320fc5a6cd186fce469c62
GIT binary patch
literal 2912
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
KMNUMnLSTY4k7Jqu

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/itemArrow-rtl.png b/browser/themes/pinstripe/devtools/itemArrow-rtl.png
new file mode 100644
index 0000000000000000000000000000000000000000..25da9dbe6b782203c112fd851b0b3345f5ac4cd9
GIT binary patch
literal 2908
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
GLSTYDE@Vys

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/itemToggle.png b/browser/themes/pinstripe/devtools/itemToggle.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf70394e6a1c4fae7c8aa60266063d417740798a
GIT binary patch
literal 1103
zcmV-V1hD&wP)<h;3K|Lk000e1NJLTq001xm000;W1^@s6y#0RM0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#@kvBMRCwC#S6yfvRTQ3kXLoj!?6_@H
zv%5{ENow;`TPuiIL&ZK+6cO6uLks$%NU2YyQ1GE3^r_-g3s!;wn-_)J)}J+4MJ%WY
zMX3)>2>Gk2yVGQMlBVfoce}HhnL9nFo-M;RyTKPFuoph&&b{Z}d%p8`XPD=C(pqj@
zTH~!wpiZDpV2!uH!%npIk;y-={v1ujTV9tK>y^3O&6pJ9oHHTBg5$cQo)CH_Ykbk!
z(LP_fHrf<k_3+F>PKHM_pn(tsFn|rX2Pgq<104UlM6<f82e^J?<c+r0#1Daha@?`q
z?ytZ7?xPm1`{2gbtp_iCGj!Tsc6wm$-F8j8lFt_oH*b34UwIRhN5!86v;mN98ZZJF
z2Bc_g6JQ6RrP@BMe3AJ)AkR#Xekcc(y}}WtTp_PN+qdULE|)jSB4{B+RU^@BSARLx
z)D&q8$UMAUvMz1zdg_CP*}ueU9suRr;jw{U(bAKE${Q8W=>{~?`y60qH4kuoYUCsj
z1b5rEYkEv_&R_U)5R||3`>#K0MrxveUZ3p8K91oWgq3SMuBn7V`%)9vkD@17ZOfy@
z*OS5sot~&@7oo9Y4)Hi3UdsbKJvn?_35WODjws?HPq^;pt=r#$zM1)Ze9)74>>twz
zBhk_OHX1s8WAszTWsGH}1muWSym!96=jpSKIU`n3K3)+HE?|`UU6cpd@cb$2Z^x+c
ztuep@#v@6L36w7sB2gujr=;;1<H*iJ<%-3U6$*#Z-I8UMEON00GB(LG7qYu(SsQ5I
z<tkOrA1eO7@V$!)8NZxdwT$-ddF9-kF*nH>!wqbRZJxaNIa)^gDmnC-Y2KX$WU-H9
zIEOMQi)*r(?D+F9zI=|ztr$V*O;S*hT-oZgfIMNA#u`YbEPt2wSTTf<StK5dB`zl~
z9Eru_8t@j9=PvDib^o#Pi7Cv=D6KPld%CPE-zU#VOnwZG;Mq(j_1b|$16jk!q7o27
zZj~HhRC!cixZJElxYI{42e^ga@F#I)6+#j!kcbTqe0*T%&K=LlvaEQXdt29Uee&E3
zFO8wlAHV&yP1D+rFeW!c)Hq{f6T@%5b@(DEkFl9s%uKs#W2jalBZ-Yvi5P{cL1fC7
zk5MVbb_XzD4y9TI$|RbwQta;Am3aTed%L!Dc4$#m)q+8J{e#SN#nPg=luD)bnX~-^
z*OEh*({xAyl}DLc1S&4Fb)>N3%So4Vs7N7aSG&koB2dna5S6n=x*<JZa&fYpLv{SY
zt+|+;ei$}tL+HQ#l&ENe*e_F31;{hZR~ZBmK<fxl{(t$kWA$IkI)OTYwcYLuFaR=9
VtWP9k_G|zE002ovPDHLkV1jva5dZ)H

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/magnifying-glass.png b/browser/themes/pinstripe/devtools/magnifying-glass.png
new file mode 100644
index 0000000000000000000000000000000000000000..673c32810029e3121cbbe386b108a2951520783b
GIT binary patch
literal 275
zcmeAS@N?(olHy`uVBq!ia0vp^+#t-s1|(OmDOUqhk|nMYCBgY=CFO}lsSJ)O`AMk?
zp1FzXsX?iUDV2pMQ*D5XwtBiahE&{2x>NXqhgskQ<3?$L(}oTQlojr=9+@vOfq`3~
zo1xH1pjfH%HN!?Df%D9dt{XV2DU>y7)i4~{yzmEO$QjO?DHD=ZHL7_9>{}n11{kK6
z9BsLw(e!;`j=jRO#w7a{H)2cp-!Uh#DugjU5;8f=(l|r9WB(x^wx4BI0`bg`^aFU3
z_Om2$D)hBxG0Z;0z<WM4V_B2P5yi}io~z0M44bM1C-Lsm;rYSn(`+U%pNYeOAx2GU
V`l@q2u|N+nc)I$ztaD0e0su94U2OmW

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/devtools/splitview.css b/browser/themes/pinstripe/devtools/splitview.css
index 2ff733e2c9e2..836e7d3812dd 100644
--- a/browser/themes/pinstripe/devtools/splitview.css
+++ b/browser/themes/pinstripe/devtools/splitview.css
@@ -20,6 +20,7 @@
  *
  * Contributor(s):
  *   Cedric Vivier <cedricv@neonux.com> (original author)
+ *   Paul Rouget <paul@mozilla.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -35,90 +36,124 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
-.splitview-root {
-  margin-top: 4px;
-}
-
-.splitview-filter {
-  -moz-box-flex: 1;
-  -moz-margin-start: 1ex;
-  max-width: 25ex;
-}
-
 .splitview-nav-container {
-  -moz-box-pack: center;
-  margin: 4px;
-  border: 1px inset WindowFrame;
-  border-radius: 4px;
-  background-color: -moz-default-background-color;
-  color: -moz-default-color;
+  background-color: hsl(208,11%,27%);
+  color: white;
 }
 
-ol.splitview-nav {
-  overflow-x: hidden;
-  overflow-y: auto;
+.splitview-nav {
+  -moz-appearance: none;
+  margin: 0;
+  box-shadow: inset -1px 0 0 #222426;
+}
+
+.splitview-nav > li {
+  color: white;
+  background-clip: padding-box;
+  border-bottom: 1px solid hsla(210,16%,76%,.1);
+  box-shadow: inset 0 -1px 0 hsla(210,8%,5%,.25);
+  -moz-padding-end: 8px;
+  -moz-box-align: center;
+}
+
+.splitview-nav {
   list-style-image: none;
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
-ol.splitview-nav > li {
-  display: -moz-box;
-  -moz-box-orient: vertical;
+.splitview-nav > li {
   outline: 0;
-  border-bottom: 1px solid ThreeDShadow;
-  padding: 2px;
-  padding-top: 4px;
   vertical-align: bottom;
-  color: black;
-  -moz-transition-property: background-color, max-height;
-  -moz-transition-duration: 1s;
-  max-height: 2048px; /* for slide transition */
-}
-ol.splitview-nav > li.splitview-active {
-  background-color: #eaf2fe;   /* same as orion.css's .line_caret */
-}
-ol.splitview-nav > li:hover,
-ol.splitview-nav > li:focus {
-  background-color: #f0f5fd;   /* slightly lighter .line_caret */
 }
 
-ol.splitview-nav > li.splitview-flash {
-  background-color: #faf0e1;   /* complement of .line_caret */
-}
-ol.splitview-nav > li.splitview-slide {
-  max-height: 0;
-  overflow: hidden;
-}
-
-.splitview-side-details {
-  margin: 2px;
-}
-
-.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
-.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
-  -moz-box-flex: 0;
+.placeholder {
+  -moz-box-flex: 1;
+  -moz-box-back: center;
   text-align: center;
 }
 
-.splitview-main .toolbar,
-.splitview-main .toolbar > * {
-  display: -moz-box;
-}
-.splitview-main .toolbar {
-  -moz-box-flex: 1;
-  -moz-box-orient: horizontal;
-  -moz-padding-start: 3px;
+.splitview-nav > li.splitview-active {
+  background-image: url(itemArrow-ltr.png),
+                    -moz-linear-gradient(left, black, black),
+                    -moz-linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%));
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-position: center right, top right, top left;
+  background-size: auto, 1px 100%, auto;
+  border-bottom: 1px solid hsla(210,8%,5%,.25);
+  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15),
+              inset 0 -1px 0 hsla(210,40%,83%,.05);
 }
 
-a {
-  color: -moz-hyperlinktext;
-  text-decoration: underline;
+.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
+  background-image: url(itemArrow-rtl.png),
+                    -moz-linear-gradient(left, black, black),
+                    -moz-linear-gradient(hsl(206,61%,40%), hsl(206,61%,31%));
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-position: center left, top left, top right;
 }
 
-button {
-  margin: 0;
+/* Toolbars */
+
+.devtools-toolbar {
+  height: 26px;
+  background-origin: border-box;
+  background-clip: border-box;
+  border-top: 1px solid hsla(210,8%,5%,.5);
+  border-bottom: 1px solid hsla(210,8%,5%,.65);
+  padding: 3px;
+}
+
+.splitview-main > toolbar:-moz-locale-dir(ltr) {
+  border-right: 1px solid hsla(210,8%,5%,.5);
+}
+
+.splitview-main > toolbar:-moz-locale-dir(rtl) {
+  border-left: 1px solid hsla(210,8%,5%,.5);
+}
+
+.devtools-toolbarbutton {
+  font-size: 11px;
+  padding: 0 8px;
+  width: auto;
+  min-width: 48px;
+  min-height: 0;
+}
+
+
+/* Resizers */
+
+.splitview-landscape-resizer {
+  -moz-appearance: none;
+  width: 7px;
+  background-image: -moz-linear-gradient(left, black 1px, rgba(255,255,255,0.2) 1px);
+  background-size: 2px 10px;
+  background-clip: padding-box;
+  background-repeat: repeat-x;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(255, 255, 255, 0.05);
+  margin: 5px 0;
+  -moz-transform: translateX(-7px);
+}
+
+.splitview-landscape-resizer:-moz-locale-dir(rtl) {
+  -moz-transform: translateX(7px);
+}
+
+.splitview-portrait-resizer {
+  -moz-appearance: none;
+  background: -moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px),
+              -moz-linear-gradient(top, hsl(210,11%,36%), hsl(210,11%,18%));
+  height: 12px;
+  background-size: 10px 2px, 100% 12px;
+  background-clip: content-box, border-box;
+  background-repeat: repeat-y, no-repeat;
+  background-position: center center;
+  padding: 2px 0;
+  border-top: 1px solid hsla(210,8%,5%,.5);
+  border-bottom: 1px solid hsla(210,8%,5%,.5);
 }
 
 /* limited width mode (hide search unless it has focus [search-on-type]) */
@@ -128,8 +163,6 @@ button {
     position: fixed;
     margin: 0;
     bottom: -4em;
-    -moz-transition-property: bottom;
-    -moz-transition-duration: 0.2s;
   }
   .splitview-filter[focused="true"] {
     bottom: 0;
diff --git a/browser/themes/pinstripe/devtools/styleeditor.css b/browser/themes/pinstripe/devtools/styleeditor.css
index 4de0201079be..6ed3edded54e 100644
--- a/browser/themes/pinstripe/devtools/styleeditor.css
+++ b/browser/themes/pinstripe/devtools/styleeditor.css
@@ -20,6 +20,7 @@
  *
  * Contributor(s):
  *   Cedric Vivier <cedricv@neonux.com> (original author)
+ *   Paul Rouget <paul@mozilla.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -35,136 +36,89 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
-ol.splitview-nav:focus {
+.stylesheet-title,
+.stylesheet-name {
+  text-decoration: none;
+  color: hsl(207,17%,88%);
+}
+
+.stylesheet-name {
+  font-size: 13px;
+}
+
+.stylesheet-rule-count,
+.stylesheet-saveButton {
+  color: hsl(211,12%,60%);
+}
+
+.stylesheet-saveButton {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.splitview-active .stylesheet-title,
+.splitview-active .stylesheet-name {
+  color: hsl(0,0%,100%);
+}
+
+.splitview-active .stylesheet-rule-count,
+.splitview-active .stylesheet-saveButton {
+  color: hsl(200,66%,70%);
+}
+
+.splitview-nav:focus {
   outline: 0; /* focus ring is on the stylesheet name */
 }
 
-.splitview-nav > li:-moz-locale-dir(ltr),
-.splitview-nav > li hgroup:-moz-locale-dir(ltr) {
-  float: left;
-}
-.splitview-nav > li:-moz-locale-dir(rtl),
-.splitview-nav > li hgroup:-moz-locale-dir(rtl) {
-  float: right;
-}
-.splitview-nav > li > hgroup.stylesheet-info {
-  max-width: 66%;
-}
-.splitview-nav > li > hgroup .stylesheet-name {
-  display: inline-block;
-  width: 100%;
-  max-width: 34ex;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 .splitview-nav > li.unsaved > hgroup .stylesheet-name {
   font-style: italic;
 }
-.splitview-nav > li.unsaved > hgroup .stylesheet-name:before:-moz-locale-dir(ltr),
-.splitview-nav > li.unsaved > hgroup .stylesheet-name:after:-moz-locale-dir(rtl) {
+
+.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
+.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
   font-style: italic;
-  content: "* ";
 }
 
-.splitview-nav > li > .stylesheet-enabled {
-  float: left;
-  width: 20px;
-  height: 20px;
-  -moz-margin-end: 6px;
-  border: 1px solid transparent;
-  background-image: url(eye-toggle.png);
-  background-position: center center;
+.stylesheet-enabled {
+  padding: 8px 0;
+  margin: 0 8px;
+  background-image: url(itemToggle.png);
   background-repeat: no-repeat;
+  background-clip: content-box;
+  background-position: 0 8px;
+  width: 24px;
+  height: 40px;
 }
-.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
-  float: right;
-}
-.splitview-nav > li.disabled > .stylesheet-enabled {
-  background-image: none;
+
+.disabled > .stylesheet-enabled {
+  background-position: -24px 8px;
 }
+
 .splitview-nav > li > .stylesheet-enabled:focus,
 .splitview-nav > li:hover > .stylesheet-enabled {
   outline: 0;
-  border: 1px inset WindowFrame;
-  -moz-margin-end: 6px;
 }
 
-.splitview-nav > li hgroup .stylesheet-title {
-  color: GrayText;
-  font-size: 0.8em;
-}
-.splitview-nav > li.error hgroup > .stylesheet-error-message {
+.stylesheet-error-message {
   color: red;
-  font-size: 0.8em;
 }
 
-.splitview-nav > li > .stylesheet-more {
-  position: relative;
-  right: 0;
-}
-.splitview-nav > li > .stylesheet-more:-moz-locale-dir(rtl) {
-  left: 0;
+.stylesheet-more > h3 {
+  font-size: 11px;
+  -moz-margin-end: 2px;
 }
 
-.splitview-nav > li hgroup.stylesheet-stats,
-.splitview-nav > li hgroup.stylesheet-actions {
-  position: absolute;
-  z-index: 2;
-  -moz-transition-property: left, right;
-  -moz-transition-duration: 0.2s;
-  -moz-transition-delay: 0.2s;
-  -moz-transition-timing-function: ease-in-out;
+.devtools-searchinput {
+  max-width: 25ex;
+  font-size: 11px;
 }
 
-.splitview-nav > li hgroup.stylesheet-stats {
-  z-index: 1;
-  -moz-transition-delay: 0.4s;
-  color: GrayText;
-  padding-left: 6px; /* Fitts */
-  padding-right: 6px;
-}
-.splitview-nav > li hgroup.stylesheet-actions a {
-  color: ButtonText;
-  padding-left: 6px; /* Fitts */
-  padding-right: 6px;
+.placeholder {
+  color: white;
 }
 
-.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(ltr),
-.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(ltr),
-.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(ltr),
-.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(ltr) {
-  right: -50ex;
-}
-.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(rtl),
-.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(rtl),
-.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(rtl),
-.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(rtl) {
-  left: -50ex;
-}
-.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(ltr),
-.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(ltr),
-.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(ltr),
-.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(ltr) {
-  right: 0;
-}
-.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(rtl),
-.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(rtl),
-.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(rtl),
-.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(rtl) {
-  left: 0;
-}
-
-.stylesheet-editor-input {
-  display: -moz-box;
-  -moz-box-flex: 1;
-  overflow: hidden;
-  min-height: 8em;
-  margin: 3px;
-  margin-top: 0;
-  border: 1px inset WindowFrame;
-  border-radius: 4px;
-  background-color: -moz-default-background-color;
+.placeholder a {
+  text-decoration: underline;
 }
 
 h1,
@@ -175,3 +129,28 @@ h3 {
   margin: 0;
   padding: 0;
 }
+
+/* portrait mode */
+@media (max-aspect-ratio: 5/3) {
+  .splitview-nav {
+    box-shadow: none;
+  }
+
+  .splitview-nav > li.splitview-active {
+    background-size: 0 0, 0 0, auto;
+  }
+
+  .stylesheet-enabled {
+    padding: 0;
+    background-position: 0 0;
+    height: 24px;
+  }
+
+  .disabled > .stylesheet-enabled {
+    background-position: -24px 0;
+  }
+
+  .splitview-nav > li > hgroup.stylesheet-info {
+    -moz-box-align: baseline;
+  }
+}
diff --git a/browser/themes/pinstripe/jar.mn b/browser/themes/pinstripe/jar.mn
index 0bdb4fc533c4..9e8bf4b427a3 100644
--- a/browser/themes/pinstripe/jar.mn
+++ b/browser/themes/pinstripe/jar.mn
@@ -121,6 +121,7 @@ browser.jar:
   skin/classic/browser/tabview/stack-expander.png           (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png                  (tabview/tabview.png)
   skin/classic/browser/tabview/tabview.css                  (tabview/tabview.css)
+* skin/classic/browser/devtools/common.css                  (devtools/common.css)
   skin/classic/browser/devtools/arrows.png                  (devtools/arrows.png)
   skin/classic/browser/devtools/goto-mdn.png                (devtools/goto-mdn.png)
   skin/classic/browser/devtools/csshtmltree.css             (devtools/csshtmltree.css)
@@ -155,7 +156,10 @@ browser.jar:
   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/eye-toggle.png              (devtools/eye-toggle.png)
+  skin/classic/browser/devtools/magnifying-glass.png	    (devtools/magnifying-glass.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)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-throbber.png
   skin/classic/browser/sync-16.png
diff --git a/browser/themes/winstripe/browser.css b/browser/themes/winstripe/browser.css
index 4be31d3f45c2..75ebcb2a776a 100644
--- a/browser/themes/winstripe/browser.css
+++ b/browser/themes/winstripe/browser.css
@@ -2654,11 +2654,7 @@ panel[dimmed="true"] {
 /* Highlighter toolbar */
 
 #inspector-toolbar {
-  -moz-appearance: none;
-  padding: 4px 3px;
   border-top: 1px solid hsla(211,68%,6%,.65) !important;
-  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
-  background-image: -moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%));
 }
 
 #inspector-toolbar[treepanel-open] {
@@ -2666,13 +2662,6 @@ panel[dimmed="true"] {
   -moz-padding-end: 0;
 }
 
-#devtools-sidebar-toolbar {
-  -moz-appearance: none;
-  padding: 4px 3px;
-  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
-  background-image: -moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%));
-}
-
 #devtools-side-splitter {
   border: 0;
   -moz-border-start: 1px solid #242b33;
@@ -2683,49 +2672,6 @@ panel[dimmed="true"] {
   position: relative;
 }
 
-#inspector-inspect-toolbutton,
-#inspector-tools > toolbarbutton,
-#devtools-sidebar-toolbar > toolbarbutton {
-  -moz-appearance: none;
-  min-width: 78px;
-  min-height: 22px;
-  color: hsl(210,30%,85%);
-  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
-  border: 1px solid hsla(211,68%,6%,.5);
-  border-radius: 3px;
-  background: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)) padding-box;
-  box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
-}
-
-#inspector-inspect-toolbutton > .toolbarbutton-icon,
-#inspector-tools > toolbarbutton  > .toolbarbutton-icon,
-#devtools-sidebar-toolbar > toolbarbutton > .toolbarbutton-icon {
-  margin: 0;
-}
-
-#inspector-inspect-toolbutton:not([checked]):hover:active,
-#inspector-tools > toolbarbutton:not([checked]):hover:active,
-#devtools-sidebar-toolbar > toolbarbutton:not([checked]):hover:active {
-  background-color: hsla(210,18%,9%,.1);
-  background-image: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2));
-  box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
-}
-
-#inspector-inspect-toolbutton[checked],
-#inspector-tools > toolbarbutton[checked],
-#devtools-sidebar-toolbar > toolbarbutton[checked] {
-  border-color: hsla(211,68%,6%,.6);
-  background: -moz-linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2));
-  box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
-  color: hsl(200,100%,60%) !important;
-}
-
-#inspector-inspect-toolbutton[checked]:hover:active,
-#inspector-tools > toolbarbutton[checked]:hover:active,
-#devtools-sidebar-toolbar > toolbarbutton[checked]:hover:active {
-  background-color: hsla(211,68%,6%,.2);
-}
-
 /* Highlighter - toolbar resizers */
 
 .inspector-resizer {
diff --git a/browser/themes/winstripe/devtools/common.css b/browser/themes/winstripe/devtools/common.css
new file mode 100644
index 000000000000..2a4962a79695
--- /dev/null
+++ b/browser/themes/winstripe/devtools/common.css
@@ -0,0 +1,120 @@
+/* vim:set ts=2 sw=2 sts=2 et: */
+/* ***** BEGIN LICENSE BLOCK *****
+ * Version: MPL 1.1/GPL 2.0/LGPL 2.1
+ *
+ * The contents of this file are subject to the Mozilla Public License Version
+ * 1.1 (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ * http://www.mozilla.org/MPL/
+ *
+ * Software distributed under the License is distributed on an "AS IS" basis,
+ * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
+ * for the specific language governing rights and limitations under the
+ * License.
+ *
+ * The Original Code is DevTools code.
+ *
+ * The Initial Developer of the Original Code is Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Paul Rouget <paul@mozilla.com> (original author)
+ *
+ * Alternatively, the contents of this file may be used under the terms of
+ * either the GNU General Public License Version 2 or later (the "GPL"), or
+ * the GNU Lesser General Public License Version 2.1 or later (the "LGPL"),
+ * in which case the provisions of the GPL or the LGPL are applicable instead
+ * of those above. If you wish to allow use of your version of this file only
+ * under the terms of either the GPL or the LGPL, and not to allow others to
+ * use your version of this file under the terms of the MPL, indicate your
+ * decision by deleting the provisions above and replace them with the notice
+ * and other provisions required by the GPL or the LGPL. If you do not delete
+ * the provisions above, a recipient may use your version of this file under
+ * the terms of any one of the MPL, the GPL or the LGPL.
+ *
+ * ***** END LICENSE BLOCK ***** */
+
+/* Toolbar and Toolbar items */
+
+.devtools-toolbar {
+  -moz-appearance: none;
+  padding: 4px 3px;
+  box-shadow: 0 1px 0 hsla(209,29%,72%,.25) inset;
+  background-image: -moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%));
+}
+
+.devtools-toolbarbutton {
+  -moz-appearance: none;
+  min-width: 78px;
+  min-height: 22px;
+  color: hsl(210,30%,85%);
+  text-shadow: 0 -1px 0 hsla(210,8%,5%,.45);
+  border: 1px solid hsla(211,68%,6%,.5);
+  border-radius: 3px;
+  background: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2)) padding-box;
+  box-shadow: 0 1px 0 hsla(209,29%,72%,.15) inset, 0 0 0 1px hsla(209,29%,72%,.1) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
+  -moz-margin-end: 3px;
+}
+
+.devtools-toolbarbutton > .toolbarbutton-icon {
+  margin: 0;
+}
+
+.devtools-toolbarbutton:not([checked]):hover:active {
+  background-color: hsla(210,18%,9%,.1);
+  background-image: -moz-linear-gradient(hsla(209,13%,54%,.35), hsla(209,13%,54%,.1) 85%, hsla(209,13%,54%,.2));
+  box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
+}
+
+.devtools-toolbarbutton[checked] {
+  border-color: hsla(211,68%,6%,.6);
+  background: -moz-linear-gradient(hsla(211,68%,6%,.1), hsla(211,68%,6%,.2));
+  box-shadow: 0 1px 3px hsla(211,68%,6%,.5) inset, 0 0 0 1px hsla(209,29%,72%,.1), 0 1px 0 hsla(210,16%,76%,.1);
+  color: hsl(200,100%,60%) !important;
+}
+
+.devtools-toolbarbutton:[checked]:hover:active {
+  background-color: hsla(211,68%,6%,.2);
+}
+
+/* Search input */
+
+.devtools-searchinput {
+  -moz-appearance: none;
+  margin: 0 3px;
+  border: 1px solid hsla(211,68%,6%,.6);
+  box-shadow: inset 0 1px 0 hsla(211,68%,6%,.05), 0 0 0 1px hsla(210,40%,83%,.1);
+  border-radius: 2px;
+  background-color: transparent;
+  background-image: url(magnifying-glass.png), -moz-linear-gradient(hsla(210,16%,76%,.15), hsla(210,16%,76%,.35));
+  background-repeat: no-repeat;
+  background-position: 4px 3px, top left, top left;
+  padding-top: 0;
+  padding-bottom: 0;
+  -moz-padding-start: 18px;
+  -moz-padding-end: 12px;
+  color: hsl(210,30%,85%);
+  -moz-transition-property: background-color, border-color, box-shadow;
+  -moz-transition-duration: 150ms;
+  -moz-transition-timing-function: ease;
+}
+
+.devtools-searchinput[focused] {
+  border-color: hsl(200,70%,40%) hsl(200,75%,37%) hsl(200,80%,35%);
+  background-origin: padding-box;
+  background-clip: padding-box;
+  box-shadow: inset 0 0 0 1px hsla(211,68%,6%,.1);
+}
+
+.devtools-searchinput:-moz-locale-dir(rtl) {
+  background-position: -moz-calc(100% - 4px) 3px, top left, top left;
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-search-icons {
+  display: none;
+}
+
+.devtools-searchinput > .textbox-input-box > .textbox-input:-moz-placeholder {
+  color: hsl(208,10%,66%);
+}
diff --git a/browser/themes/winstripe/devtools/eye-toggle.png b/browser/themes/winstripe/devtools/eye-toggle.png
deleted file mode 100644
index 4ad3c219c6493fdfbe3152b206a9052288dee505..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 784
zcmV+r1MmEaP)<h;3K|Lk000e1NJLTq000sI000aK1^@s6ZxZdi00001b5ch_0Itp)
z=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2ipq)
z69Y1a+YeFz00NLnL_t(2&#jVANK|1I#n1P>H}hnkqo@lJnzD3;q(aN6O^d)#p`rYf
zWtIqqNP*CzRl61yQj16uG!zUiMQsoVsv%kwCYDJCQmG_nng2`2H_jX1_uUpfgra2^
z&gOFX!9C{!|7qCYi;7caiG~p=0kBh&^bwE>0t3U6!uTi{n~vA@&i0PZg@1xV!2oY)
zYAzQ-))L6As>*oA_VoIKBY9&0*wbgveV->MYb{G;5+EI_T7RMXTyws^SZ;zs!GLnN
zvAIr4k;fS`9Zu(T)!EZmG^cX~fNA@jW-ON2+V=3e6^m^VL~)9$bYHAKe<R;tER|3&
zz#Hy0UnL<9E1VesuxD3R{f_kXiTe*ax4q~exHkCat^d>b#At3#_V@Mm^@Z8F`9qwu
zbs^;L;gJ#j&aJxFO4x{87M3WmAr|92T3U3h5y0BZ{(+kul*Sp{rWwmQus^qZtH<+W
zX!u<rK$0_N3L*CnkBqofr^69%3b6*j0ze=l08s!;Rh6i)L<9g-Rf*asMnSY;`x$3U
zs*0M-D=SX6xOCST5hQ>ONyK}4`@8_)^Jcbbnl__p+N{r;*#-bTy?tIu!~tv&LF&5x
zv9jV+3kwAUiE9xft-GhU#xM*I013uc%gahGr6ecE0Z6oqU0GUQj&^iCx(%WP09@Dg
zsS~Bgo8n#iEDHq#3IO+7#7KSoBvdp%zqn5lIT>S%ZnwL!>P-0u0BCLR$O?zUHAIxc
z8M9JSlHdD}7IwwE^f>_G&H4f80Fu7W%%r^<7(DoMWz}QGOpg?lgx_JT#%bDALW28S
zZcg@)H#6f4fMozizQ0)f@sI#C04`e&00cnV7H)@a0f^W#^ZmsF0Db`r+#yvr<!LDZ
O0000<MNUMnLSTYptX97O

diff --git a/browser/themes/winstripe/devtools/itemArrow-ltr.png b/browser/themes/winstripe/devtools/itemArrow-ltr.png
new file mode 100644
index 0000000000000000000000000000000000000000..b4b2e3fa4dd09f6c51320fc5a6cd186fce469c62
GIT binary patch
literal 2912
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
KMNUMnLSTY4k7Jqu

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/itemArrow-rtl.png b/browser/themes/winstripe/devtools/itemArrow-rtl.png
new file mode 100644
index 0000000000000000000000000000000000000000..25da9dbe6b782203c112fd851b0b3345f5ac4cd9
GIT binary patch
literal 2908
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
GLSTYDE@Vys

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/itemToggle.png b/browser/themes/winstripe/devtools/itemToggle.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf70394e6a1c4fae7c8aa60266063d417740798a
GIT binary patch
literal 1103
zcmV-V1hD&wP)<h;3K|Lk000e1NJLTq001xm000;W1^@s6y#0RM0000PbVXQnQ*UN;
zcVTj606}DLVr3vnZDD6+Qe|Oed2z{QJOBU#@kvBMRCwC#S6yfvRTQ3kXLoj!?6_@H
zv%5{ENow;`TPuiIL&ZK+6cO6uLks$%NU2YyQ1GE3^r_-g3s!;wn-_)J)}J+4MJ%WY
zMX3)>2>Gk2yVGQMlBVfoce}HhnL9nFo-M;RyTKPFuoph&&b{Z}d%p8`XPD=C(pqj@
zTH~!wpiZDpV2!uH!%npIk;y-={v1ujTV9tK>y^3O&6pJ9oHHTBg5$cQo)CH_Ykbk!
z(LP_fHrf<k_3+F>PKHM_pn(tsFn|rX2Pgq<104UlM6<f82e^J?<c+r0#1Daha@?`q
z?ytZ7?xPm1`{2gbtp_iCGj!Tsc6wm$-F8j8lFt_oH*b34UwIRhN5!86v;mN98ZZJF
z2Bc_g6JQ6RrP@BMe3AJ)AkR#Xekcc(y}}WtTp_PN+qdULE|)jSB4{B+RU^@BSARLx
z)D&q8$UMAUvMz1zdg_CP*}ueU9suRr;jw{U(bAKE${Q8W=>{~?`y60qH4kuoYUCsj
z1b5rEYkEv_&R_U)5R||3`>#K0MrxveUZ3p8K91oWgq3SMuBn7V`%)9vkD@17ZOfy@
z*OS5sot~&@7oo9Y4)Hi3UdsbKJvn?_35WODjws?HPq^;pt=r#$zM1)Ze9)74>>twz
zBhk_OHX1s8WAszTWsGH}1muWSym!96=jpSKIU`n3K3)+HE?|`UU6cpd@cb$2Z^x+c
ztuep@#v@6L36w7sB2gujr=;;1<H*iJ<%-3U6$*#Z-I8UMEON00GB(LG7qYu(SsQ5I
z<tkOrA1eO7@V$!)8NZxdwT$-ddF9-kF*nH>!wqbRZJxaNIa)^gDmnC-Y2KX$WU-H9
zIEOMQi)*r(?D+F9zI=|ztr$V*O;S*hT-oZgfIMNA#u`YbEPt2wSTTf<StK5dB`zl~
z9Eru_8t@j9=PvDib^o#Pi7Cv=D6KPld%CPE-zU#VOnwZG;Mq(j_1b|$16jk!q7o27
zZj~HhRC!cixZJElxYI{42e^ga@F#I)6+#j!kcbTqe0*T%&K=LlvaEQXdt29Uee&E3
zFO8wlAHV&yP1D+rFeW!c)Hq{f6T@%5b@(DEkFl9s%uKs#W2jalBZ-Yvi5P{cL1fC7
zk5MVbb_XzD4y9TI$|RbwQta;Am3aTed%L!Dc4$#m)q+8J{e#SN#nPg=luD)bnX~-^
z*OEh*({xAyl}DLc1S&4Fb)>N3%So4Vs7N7aSG&koB2dna5S6n=x*<JZa&fYpLv{SY
zt+|+;ei$}tL+HQ#l&ENe*e_F31;{hZR~ZBmK<fxl{(t$kWA$IkI)OTYwcYLuFaR=9
VtWP9k_G|zE002ovPDHLkV1jva5dZ)H

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/magnifying-glass.png b/browser/themes/winstripe/devtools/magnifying-glass.png
new file mode 100644
index 0000000000000000000000000000000000000000..236d93d49b03455585d2e76b44d1210ea8ab09a7
GIT binary patch
literal 1111
zcmaJ=S!mQi7>*~}14YrIJ{VF(1vkfbw>Gh{Zj)VIG<DrBx*n)$GVO*nnKYSovlYYx
z6u}!``clw>4}yxvn_#WhW3?h44_;3y2r3j2@p^GmyVVERz+`5A{_p#*Zw@9}R#aEa
zt{@1aI=)g);=RgWlP2Q-y4>b>c$<ZyY19haQC@Wb5z%2AAmgUm0g^z~3!O#KND$-Z
z8L2c%E2{+!nzZWs(4J{yG(j{rdA6!$0V3N#hhd4-(A7SQG<1<#A68h!mO#c>+2w%N
zu9lS6mDPBiYFb7%dIBae0a8iN+-|voCsM<_0zUg@h9ZYuP*$XVCzVzbqy!y6hG{mS
zvGp8TAELPs%ZK>IWRT@ph6^(6k^sjF;Uxmgks}|4qd9uJkd$L1vG7f#G6>lM!{qaM
zI$uXar-R{mo@dw~6AT8hN5CyuNc94iTU%m~fvY)&jSOg!KBL+Ob4a9croT%t?NM6G
z9cdG87~`on!_ll?Qpr(K{_kp<quwq`f<O8Glh{oaY``Re3v-T!2iIQfhq4990V;w{
z3c~HBE+#S%K{o?!Qfdv;9I2?9VfmI}grW#>%SEcCfw(MEn1eP9UErIgx_Ukmj)fXz
zj*GGpE*6Y71SN@!MnhpvE@5S;<xF6q5?23%tuKr9#bDYvvJ4z!2hd{<G|Azj1*3c}
zb!GWRuzLAiLS?ZGPKNPE``4&TCafR-I4WFx8I?Y;u-+Xk?9KzJKKv+(aXFImUK~39
zpfa*{>aDrr`yc7GUSZSoyUiQ!-Mevn?nj{Ai4|7GPaM5;x~8(&EnGOWDEK97eeHSj
zs=GM&rniHd@`EHM*b}&C#a=itpB)p;)f}6VPT$=9di>)4>MM~-)W2np{Om11wx;Ld
z^*xEf4Paqi-^qr<(=R{Szw~nI+-zyz_fyrA@2@)aZAkc8QRsUlK3yJFvYE4YGgGcj
zI~qCid6#qY$j<Z!G4pBW;Psb3r#+U2wsvk*D}+~X*IXP}v3m?*om;T0w!KR5pL#sn
KBA;*Gw)Ypec69~-

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/devtools/splitview.css b/browser/themes/winstripe/devtools/splitview.css
index 2ff733e2c9e2..645390e8b1b9 100644
--- a/browser/themes/winstripe/devtools/splitview.css
+++ b/browser/themes/winstripe/devtools/splitview.css
@@ -20,6 +20,7 @@
  *
  * Contributor(s):
  *   Cedric Vivier <cedricv@neonux.com> (original author)
+ *   Paul Rouget <paul@mozilla.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -35,90 +36,124 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
-.splitview-root {
-  margin-top: 4px;
-}
-
-.splitview-filter {
-  -moz-box-flex: 1;
-  -moz-margin-start: 1ex;
-  max-width: 25ex;
-}
-
 .splitview-nav-container {
-  -moz-box-pack: center;
-  margin: 4px;
-  border: 1px inset WindowFrame;
-  border-radius: 4px;
-  background-color: -moz-default-background-color;
-  color: -moz-default-color;
+  background-color: hsl(211,21%,26%);
+  color: white;
 }
 
-ol.splitview-nav {
-  overflow-x: hidden;
-  overflow-y: auto;
+.splitview-nav {
+  -moz-appearance: none;
+  margin: 0;
+  box-shadow: inset -1px 0 0 #222426;
+}
+
+.splitview-nav > li {
+  color: white;
+  background-clip: padding-box;
+  border-bottom: 1px solid hsla(210,40%,83%,.1);
+  box-shadow: inset 0 -1px 0 hsla(211,68%,6%,.3);
+  -moz-padding-end: 8px;
+  -moz-box-align: center;
+}
+
+.splitview-nav {
   list-style-image: none;
   list-style: none;
   padding: 0;
   margin: 0;
 }
 
-ol.splitview-nav > li {
-  display: -moz-box;
-  -moz-box-orient: vertical;
+.splitview-nav > li {
   outline: 0;
-  border-bottom: 1px solid ThreeDShadow;
-  padding: 2px;
-  padding-top: 4px;
   vertical-align: bottom;
-  color: black;
-  -moz-transition-property: background-color, max-height;
-  -moz-transition-duration: 1s;
-  max-height: 2048px; /* for slide transition */
-}
-ol.splitview-nav > li.splitview-active {
-  background-color: #eaf2fe;   /* same as orion.css's .line_caret */
-}
-ol.splitview-nav > li:hover,
-ol.splitview-nav > li:focus {
-  background-color: #f0f5fd;   /* slightly lighter .line_caret */
 }
 
-ol.splitview-nav > li.splitview-flash {
-  background-color: #faf0e1;   /* complement of .line_caret */
-}
-ol.splitview-nav > li.splitview-slide {
-  max-height: 0;
-  overflow: hidden;
-}
-
-.splitview-side-details {
-  margin: 2px;
-}
-
-.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
-.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
-  -moz-box-flex: 0;
+.placeholder {
+  -moz-box-flex: 1;
+  -moz-box-back: center;
   text-align: center;
 }
 
-.splitview-main .toolbar,
-.splitview-main .toolbar > * {
-  display: -moz-box;
-}
-.splitview-main .toolbar {
-  -moz-box-flex: 1;
-  -moz-box-orient: horizontal;
-  -moz-padding-start: 3px;
+.splitview-nav > li.splitview-active {
+  background-image: url(itemArrow-ltr.png),
+                    -moz-linear-gradient(left, black, black),
+                    -moz-linear-gradient(hsl(200,100%,33%), hsl(200,100%,25%));
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-position: center right, top right, top left;
+  background-size: auto, 1px 100%, auto;
+  border-bottom: 1px solid hsla(210,8%,5%,.25);
+  box-shadow: inset 0 1px 0 hsla(210,40%,83%,.15),
+              inset 0 -1px 0 hsla(210,40%,83%,.05);
 }
 
-a {
-  color: -moz-hyperlinktext;
-  text-decoration: underline;
+.splitview-nav > li.splitview-active:-moz-locale-dir(rtl) {
+  background-image: url(itemArrow-rtl.png),
+                    -moz-linear-gradient(left, black, black),
+                    -moz-linear-gradient(hsl(200,100%,33%), hsl(200,100%,25%));
+  background-repeat: no-repeat, no-repeat, repeat-x;
+  background-position: center left, top left, top right;
 }
 
-button {
-  margin: 0;
+/* Toolbars */
+
+.devtools-toolbar {
+  height: 26px;
+  background-origin: border-box;
+  background-clip: border-box;
+  border-top: 1px solid hsla(210,8%,5%,.5);
+  border-bottom: 1px solid hsla(210,8%,5%,.65);
+  padding: 3px;
+}
+
+.splitview-main > toolbar:-moz-locale-dir(ltr) {
+  border-right: 1px solid hsla(210,8%,5%,.5);
+}
+
+.splitview-main > toolbar:-moz-locale-dir(rtl) {
+  border-left: 1px solid hsla(210,8%,5%,.5);
+}
+
+.devtools-toolbarbutton {
+  font-size: 11px;
+  padding: 0 8px;
+  width: auto;
+  min-width: 48px;
+  min-height: 0;
+}
+
+
+/* Resizers */
+
+.splitview-landscape-resizer {
+  -moz-appearance: none;
+  width: 7px;
+  background-image: -moz-linear-gradient(left, black 1px, rgba(255,255,255,0.2) 1px);
+  background-size: 2px 10px;
+  background-clip: padding-box;
+  background-repeat: repeat-x;
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(255, 255, 255, 0.05);
+  margin: 5px 0;
+  -moz-transform: translateX(-7px);
+}
+
+.splitview-landscape-resizer:-moz-locale-dir(rtl) {
+  -moz-transform: translateX(7px);
+}
+
+.splitview-portrait-resizer {
+  -moz-appearance: none;
+  background: -moz-linear-gradient(top, black 1px, rgba(255,255,255,0.2) 1px),
+              -moz-linear-gradient(top, hsl(209,18%,34%), hsl(210,24%,16%));
+  height: 12px;
+  background-size: 10px 2px, 100% 12px;
+  background-clip: content-box, border-box;
+  background-repeat: repeat-y, no-repeat;
+  background-position: center center;
+  padding: 2px 0;
+  border-top: 1px solid hsla(210,8%,5%,.5);
+  border-bottom: 1px solid hsla(210,8%,5%,.5);
 }
 
 /* limited width mode (hide search unless it has focus [search-on-type]) */
@@ -128,8 +163,6 @@ button {
     position: fixed;
     margin: 0;
     bottom: -4em;
-    -moz-transition-property: bottom;
-    -moz-transition-duration: 0.2s;
   }
   .splitview-filter[focused="true"] {
     bottom: 0;
diff --git a/browser/themes/winstripe/devtools/styleeditor.css b/browser/themes/winstripe/devtools/styleeditor.css
index 4de0201079be..bd933c15ccf7 100644
--- a/browser/themes/winstripe/devtools/styleeditor.css
+++ b/browser/themes/winstripe/devtools/styleeditor.css
@@ -20,6 +20,7 @@
  *
  * Contributor(s):
  *   Cedric Vivier <cedricv@neonux.com> (original author)
+ *   Paul Rouget <paul@mozilla.com>
  *
  * Alternatively, the contents of this file may be used under the terms of
  * either the GNU General Public License Version 2 or later (the "GPL"), or
@@ -35,136 +36,89 @@
  *
  * ***** END LICENSE BLOCK ***** */
 
-ol.splitview-nav:focus {
+.stylesheet-title,
+.stylesheet-name {
+  text-decoration: none;
+  color: hsl(210,30%,85%);
+}
+
+.stylesheet-name {
+  font-size: 13px;
+}
+
+.stylesheet-rule-count,
+.stylesheet-saveButton {
+  color: hsl(210,16%,53%);
+}
+
+.stylesheet-saveButton {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.splitview-active .stylesheet-title,
+.splitview-active .stylesheet-name {
+  color: hsl(0,0%,100%);
+}
+
+.splitview-active .stylesheet-rule-count,
+.splitview-active .stylesheet-saveButton {
+  color: hsl(205,50%,70%);
+}
+
+.splitview-nav:focus {
   outline: 0; /* focus ring is on the stylesheet name */
 }
 
-.splitview-nav > li:-moz-locale-dir(ltr),
-.splitview-nav > li hgroup:-moz-locale-dir(ltr) {
-  float: left;
-}
-.splitview-nav > li:-moz-locale-dir(rtl),
-.splitview-nav > li hgroup:-moz-locale-dir(rtl) {
-  float: right;
-}
-.splitview-nav > li > hgroup.stylesheet-info {
-  max-width: 66%;
-}
-.splitview-nav > li > hgroup .stylesheet-name {
-  display: inline-block;
-  width: 100%;
-  max-width: 34ex;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
 .splitview-nav > li.unsaved > hgroup .stylesheet-name {
   font-style: italic;
 }
-.splitview-nav > li.unsaved > hgroup .stylesheet-name:before:-moz-locale-dir(ltr),
-.splitview-nav > li.unsaved > hgroup .stylesheet-name:after:-moz-locale-dir(rtl) {
+
+.splitview-nav:-moz-locale-dir(ltr) > li.unsaved > hgroup .stylesheet-name:before,
+.splitview-nav:-moz-locale-dir(rtl) > li.unsaved > hgroup .stylesheet-name:after {
   font-style: italic;
-  content: "* ";
 }
 
-.splitview-nav > li > .stylesheet-enabled {
-  float: left;
-  width: 20px;
-  height: 20px;
-  -moz-margin-end: 6px;
-  border: 1px solid transparent;
-  background-image: url(eye-toggle.png);
-  background-position: center center;
+.stylesheet-enabled {
+  padding: 8px 0;
+  margin: 0 8px;
+  background-image: url(itemToggle.png);
   background-repeat: no-repeat;
+  background-clip: content-box;
+  background-position: 0 8px;
+  width: 24px;
+  height: 40px;
 }
-.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
-  float: right;
-}
-.splitview-nav > li.disabled > .stylesheet-enabled {
-  background-image: none;
+
+.disabled > .stylesheet-enabled {
+  background-position: -24px 8px;
 }
+
 .splitview-nav > li > .stylesheet-enabled:focus,
 .splitview-nav > li:hover > .stylesheet-enabled {
   outline: 0;
-  border: 1px inset WindowFrame;
-  -moz-margin-end: 6px;
 }
 
-.splitview-nav > li hgroup .stylesheet-title {
-  color: GrayText;
-  font-size: 0.8em;
-}
-.splitview-nav > li.error hgroup > .stylesheet-error-message {
+.stylesheet-error-message {
   color: red;
-  font-size: 0.8em;
 }
 
-.splitview-nav > li > .stylesheet-more {
-  position: relative;
-  right: 0;
-}
-.splitview-nav > li > .stylesheet-more:-moz-locale-dir(rtl) {
-  left: 0;
+.stylesheet-more > h3 {
+  font-size: 11px;
+  -moz-margin-end: 2px;
 }
 
-.splitview-nav > li hgroup.stylesheet-stats,
-.splitview-nav > li hgroup.stylesheet-actions {
-  position: absolute;
-  z-index: 2;
-  -moz-transition-property: left, right;
-  -moz-transition-duration: 0.2s;
-  -moz-transition-delay: 0.2s;
-  -moz-transition-timing-function: ease-in-out;
+.devtools-searchinput {
+  max-width: 25ex;
+  font-size: 11px;
 }
 
-.splitview-nav > li hgroup.stylesheet-stats {
-  z-index: 1;
-  -moz-transition-delay: 0.4s;
-  color: GrayText;
-  padding-left: 6px; /* Fitts */
-  padding-right: 6px;
-}
-.splitview-nav > li hgroup.stylesheet-actions a {
-  color: ButtonText;
-  padding-left: 6px; /* Fitts */
-  padding-right: 6px;
+.placeholder {
+  color: white;
 }
 
-.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(ltr),
-.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(ltr),
-.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(ltr),
-.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(ltr) {
-  right: -50ex;
-}
-.splitview-nav > li hgroup.stylesheet-actions:-moz-locale-dir(rtl),
-.splitview-nav > li:hover hgroup.stylesheet-stats:-moz-locale-dir(rtl),
-.splitview-nav > li:focus hgroup.stylesheet-stats:-moz-locale-dir(rtl),
-.splitview-nav > li.splitview-active hgroup.stylesheet-stats:-moz-locale-dir(rtl) {
-  left: -50ex;
-}
-.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(ltr),
-.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(ltr),
-.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(ltr),
-.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(ltr) {
-  right: 0;
-}
-.splitview-nav > li hgroup.stylesheet-stats:-moz-locale-dir(rtl),
-.splitview-nav > li:hover hgroup.stylesheet-actions:-moz-locale-dir(rtl),
-.splitview-nav > li:focus hgroup.stylesheet-actions:-moz-locale-dir(rtl),
-.splitview-nav > li.splitview-active hgroup.stylesheet-actions:-moz-locale-dir(rtl) {
-  left: 0;
-}
-
-.stylesheet-editor-input {
-  display: -moz-box;
-  -moz-box-flex: 1;
-  overflow: hidden;
-  min-height: 8em;
-  margin: 3px;
-  margin-top: 0;
-  border: 1px inset WindowFrame;
-  border-radius: 4px;
-  background-color: -moz-default-background-color;
+.placeholder a {
+  text-decoration: underline;
 }
 
 h1,
@@ -175,3 +129,28 @@ h3 {
   margin: 0;
   padding: 0;
 }
+
+/* portrait mode */
+@media (max-aspect-ratio: 5/3) {
+  .splitview-nav {
+    box-shadow: none;
+  }
+
+  .splitview-nav > li.splitview-active {
+    background-size: 0 0, 0 0, auto;
+  }
+
+  .stylesheet-enabled {
+    padding: 0;
+    background-position: 0 0;
+    height: 24px;
+  }
+
+  .disabled > .stylesheet-enabled {
+    background-position: -24px 0;
+  }
+
+  .splitview-nav > li > hgroup.stylesheet-info {
+    -moz-box-align: baseline;
+  }
+}
diff --git a/browser/themes/winstripe/jar.mn b/browser/themes/winstripe/jar.mn
index cb62dfd169df..7c8fc23eea37 100644
--- a/browser/themes/winstripe/jar.mn
+++ b/browser/themes/winstripe/jar.mn
@@ -105,6 +105,7 @@ browser.jar:
         skin/classic/browser/tabview/tabview.png                    (tabview/tabview.png)
         skin/classic/browser/tabview/tabview-inverted.png           (tabview/tabview-inverted.png)
         skin/classic/browser/tabview/tabview.css                    (tabview/tabview.css)
+        skin/classic/browser/devtools/common.css                    (devtools/common.css)
         skin/classic/browser/devtools/arrows.png                    (devtools/arrows.png)
         skin/classic/browser/devtools/goto-mdn.png                  (devtools/goto-mdn.png)
         skin/classic/browser/devtools/csshtmltree.css               (devtools/csshtmltree.css)
@@ -139,7 +140,10 @@ browser.jar:
         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/eye-toggle.png                (devtools/eye-toggle.png)
+        skin/classic/browser/devtools/magnifying-glass.png          (devtools/magnifying-glass.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)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-throbber.png
         skin/classic/browser/sync-16.png
@@ -260,6 +264,7 @@ browser.jar:
         skin/classic/aero/browser/tabview/tabview.png                (tabview/tabview.png)
         skin/classic/aero/browser/tabview/tabview-inverted.png       (tabview/tabview-inverted.png)
         skin/classic/aero/browser/tabview/tabview.css                (tabview/tabview.css)
+        skin/classic/aero/browser/devtools/common.css                (devtools/common.css)
         skin/classic/aero/browser/devtools/arrows.png                (devtools/arrows.png)
         skin/classic/aero/browser/devtools/goto-mdn.png              (devtools/goto-mdn.png)
         skin/classic/aero/browser/devtools/csshtmltree.css           (devtools/csshtmltree.css)
@@ -294,7 +299,10 @@ browser.jar:
         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/eye-toggle.png            (devtools/eye-toggle.png)
+        skin/classic/aero/browser/devtools/magnifying-glass.png      (devtools/magnifying-glass.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-ltr.png         (devtools/itemArrow-ltr.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/sync-throbber.png
         skin/classic/aero/browser/sync-16.png