From 92f0b2bf9c684d63da2549febc25fe8027b3a7c8 Mon Sep 17 00:00:00 2001
From: Cedric Vivier <cedricv@neonux.com>
Date: Wed, 26 Oct 2011 17:02:08 +0800
Subject: [PATCH 01/21] Bug 583041 - Style Editor integration, part 1/2;
 r=rcampbell,dao,l10n

---
 browser/app/profile/firefox.js                |    3 +
 browser/base/content/browser-appmenu.inc      |    5 +
 browser/base/content/browser-menubar.inc      |    6 +
 browser/base/content/browser-sets.inc         |    3 +
 browser/base/content/browser.js               |   38 +
 browser/devtools/Makefile.in                  |    1 +
 browser/devtools/jar.mn                       |    3 +
 browser/devtools/styleeditor/Makefile.in      |   54 +
 browser/devtools/styleeditor/SplitView.jsm    |  485 +++++++
 browser/devtools/styleeditor/StyleEditor.jsm  | 1112 +++++++++++++++++
 .../styleeditor/StyleEditorChrome.jsm         |  488 ++++++++
 .../devtools/styleeditor/StyleEditorUtil.jsm  |  196 +++
 browser/devtools/styleeditor/splitview.css    |   96 ++
 browser/devtools/styleeditor/styleeditor.css  |   43 +
 browser/devtools/styleeditor/styleeditor.xul  |  130 ++
 .../locales/en-US/chrome/browser/browser.dtd  |    7 +
 .../chrome/browser/devtools/styleeditor.dtd   |   62 +
 .../browser/devtools/styleeditor.properties   |   53 +
 browser/locales/jar.mn                        |    2 +
 .../browser/devtools/eye-toggle.png           |  Bin 0 -> 784 bytes
 .../browser/devtools/splitview.css            |  137 ++
 .../browser/devtools/styleeditor.css          |  177 +++
 browser/themes/gnomestripe/browser/jar.mn     |    4 +-
 .../pinstripe/browser/devtools/eye-toggle.png |  Bin 0 -> 784 bytes
 .../pinstripe/browser/devtools/splitview.css  |  137 ++
 .../browser/devtools/styleeditor.css          |  177 +++
 browser/themes/pinstripe/browser/jar.mn       |    4 +-
 .../winstripe/browser/devtools/eye-toggle.png |  Bin 0 -> 784 bytes
 .../winstripe/browser/devtools/splitview.css  |  137 ++
 .../browser/devtools/styleeditor.css          |  177 +++
 browser/themes/winstripe/browser/jar.mn       |    8 +-
 31 files changed, 3741 insertions(+), 4 deletions(-)
 create mode 100644 browser/devtools/styleeditor/Makefile.in
 create mode 100644 browser/devtools/styleeditor/SplitView.jsm
 create mode 100644 browser/devtools/styleeditor/StyleEditor.jsm
 create mode 100644 browser/devtools/styleeditor/StyleEditorChrome.jsm
 create mode 100644 browser/devtools/styleeditor/StyleEditorUtil.jsm
 create mode 100644 browser/devtools/styleeditor/splitview.css
 create mode 100644 browser/devtools/styleeditor/styleeditor.css
 create mode 100644 browser/devtools/styleeditor/styleeditor.xul
 create mode 100644 browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd
 create mode 100644 browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
 create mode 100644 browser/themes/gnomestripe/browser/devtools/eye-toggle.png
 create mode 100644 browser/themes/gnomestripe/browser/devtools/splitview.css
 create mode 100644 browser/themes/gnomestripe/browser/devtools/styleeditor.css
 create mode 100644 browser/themes/pinstripe/browser/devtools/eye-toggle.png
 create mode 100644 browser/themes/pinstripe/browser/devtools/splitview.css
 create mode 100644 browser/themes/pinstripe/browser/devtools/styleeditor.css
 create mode 100644 browser/themes/winstripe/browser/devtools/eye-toggle.png
 create mode 100644 browser/themes/winstripe/browser/devtools/splitview.css
 create mode 100644 browser/themes/winstripe/browser/devtools/styleeditor.css

diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
index e4b30bf3703e..46922b55e85b 100644
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1014,6 +1014,9 @@ pref("devtools.ruleview.enabled", true);
 // Enable the Scratchpad tool.
 pref("devtools.scratchpad.enabled", true);
 
+// Enable the Style Editor.
+pref("devtools.styleeditor.enabled", true);
+
 // Enable tools for Chrome development.
 pref("devtools.chrome.enabled", false);
 
diff --git a/browser/base/content/browser-appmenu.inc b/browser/base/content/browser-appmenu.inc
index 72f320b228bd..54f382b624aa 100644
--- a/browser/base/content/browser-appmenu.inc
+++ b/browser/base/content/browser-appmenu.inc
@@ -192,6 +192,11 @@
                     label="&scratchpad.label;"
                     key="key_scratchpad"
                     command="Tools:Scratchpad"/>
+          <menuitem id="appmenu_styleeditor"
+                    hidden="true"
+                    label="&styleeditor.label;"
+                    key="key_styleeditor"
+                    command="Tools:StyleEditor"/>
           <menuitem id="appmenu_pageSource"
                     label="&viewPageSourceCmd.label;"
                     command="View:PageSource"
diff --git a/browser/base/content/browser-menubar.inc b/browser/base/content/browser-menubar.inc
index 094a0f202a33..24a3b7d3fc24 100644
--- a/browser/base/content/browser-menubar.inc
+++ b/browser/base/content/browser-menubar.inc
@@ -550,6 +550,12 @@
                             accesskey="&scratchpad.accesskey;"
                             key="key_scratchpad"
                             command="Tools:Scratchpad"/>
+                  <menuitem id="menu_styleeditor"
+                            hidden="true"
+                            label="&styleeditor.label;"
+                            accesskey="&styleeditor.accesskey;"
+                            key="key_styleeditor"
+                            command="Tools:StyleEditor"/>
                   <menuitem id="menu_pageSource"
                             accesskey="&pageSourceCmd.accesskey;"
                             label="&pageSourceCmd.label;"
diff --git a/browser/base/content/browser-sets.inc b/browser/base/content/browser-sets.inc
index 7cb689e57152..92f17726993a 100644
--- a/browser/base/content/browser-sets.inc
+++ b/browser/base/content/browser-sets.inc
@@ -126,6 +126,7 @@
     <command id="Tools:Downloads" oncommand="BrowserDownloadsUI();"/>
     <command id="Tools:Inspect" oncommand="InspectorUI.toggleInspectorUI();" disabled="true"/>
     <command id="Tools:Scratchpad" oncommand="Scratchpad.openScratchpad();" disabled="true"/>
+    <command id="Tools:StyleEditor" oncommand="StyleEditor.openChrome();" disabled="true"/>
     <command id="Tools:Addons" oncommand="BrowserOpenAddonsMgr();"/>
     <command id="Tools:Sanitize"
      oncommand="Cc['@mozilla.org/browser/browserglue;1'].getService(Ci.nsIBrowserGlue).sanitize(window);"/>
@@ -244,6 +245,8 @@
     <key id="key_inspect" key="&inspectMenu.commandkey;" command="Tools:Inspect" modifiers="accel,shift"/>
     <key id="key_scratchpad" keycode="&scratchpad.keycode;" modifiers="shift"
          keytext="&scratchpad.keytext;" command="Tools:Scratchpad"/>
+    <key id="key_styleeditor" keycode="&styleeditor.keycode;" modifiers="shift"
+         keytext="&styleeditor.keytext;" command="Tools:StyleEditor"/>
     <key id="openFileKb" key="&openFileCmd.commandkey;" command="Browser:OpenFile"  modifiers="accel"/>
     <key id="key_savePage" key="&savePageCmd.commandkey;" command="Browser:SavePage" modifiers="accel"/>
     <key id="printKb" key="&printCmd.commandkey;" command="cmd_print"  modifiers="accel"/>
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 13a8c8103a04..86167906e1ea 100644
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -1721,6 +1721,16 @@ function delayedStartup(isLoadingBlank, mustLoadSidebar) {
 #endif
   }
 
+  // Enable Style Editor?
+  let styleEditorEnabled = gPrefService.getBoolPref(StyleEditor.prefEnabledName);
+  if (styleEditorEnabled) {
+    document.getElementById("menu_styleeditor").hidden = false;
+    document.getElementById("Tools:StyleEditor").removeAttribute("disabled");
+#ifdef MENUBAR_CAN_AUTOHIDE
+    document.getElementById("appmenu_styleeditor").hidden = false;
+#endif
+  }
+
 #ifdef MENUBAR_CAN_AUTOHIDE
   // If the user (or the locale) hasn't enabled the top-level "Character
   // Encoding" menu via the "browser.menu.showCharacterEncoding" preference,
@@ -8947,6 +8957,34 @@ XPCOMUtils.defineLazyGetter(Scratchpad, "ScratchpadManager", function() {
   return tmp.ScratchpadManager;
 });
 
+var StyleEditor = {
+  prefEnabledName: "devtools.styleeditor.enabled",
+  openChrome: function SE_openChrome()
+  {
+    const CHROME_URL = "chrome://browser/content/styleeditor.xul";
+    const CHROME_WINDOW_TYPE = "Tools:StyleEditor";
+    const CHROME_WINDOW_FLAGS = "chrome,centerscreen,resizable,dialog=no";
+
+    // focus currently open Style Editor window for this document, if any
+    let contentWindow = gBrowser.selectedBrowser.contentWindow;
+    let contentWindowID = contentWindow.QueryInterface(Ci.nsIInterfaceRequestor).
+      getInterface(Ci.nsIDOMWindowUtils).currentInnerWindowID;
+    let enumerator = Services.wm.getEnumerator(CHROME_WINDOW_TYPE);
+    while (enumerator.hasMoreElements()) {
+      var win = enumerator.getNext();
+      if (win.styleEditorChrome.contentWindowID == contentWindowID) {
+        win.focus();
+        return win;
+      }
+    }
+
+    let chromeWindow = Services.ww.openWindow(null, CHROME_URL, "_blank",
+                                              CHROME_WINDOW_FLAGS,
+                                              contentWindow);
+    chromeWindow.focus();
+    return chromeWindow;
+  }
+};
 
 XPCOMUtils.defineLazyGetter(window, "gShowPageResizers", function () {
 #ifdef XP_WIN
diff --git a/browser/devtools/Makefile.in b/browser/devtools/Makefile.in
index 83271a16c81a..290329ace4fc 100644
--- a/browser/devtools/Makefile.in
+++ b/browser/devtools/Makefile.in
@@ -50,6 +50,7 @@ DIRS = \
   highlighter \
   webconsole \
   sourceeditor \
+  styleeditor \
   styleinspector \
   scratchpad \
   shared \
diff --git a/browser/devtools/jar.mn b/browser/devtools/jar.mn
index 7fca7adc9247..7855fa51dd15 100644
--- a/browser/devtools/jar.mn
+++ b/browser/devtools/jar.mn
@@ -3,6 +3,9 @@ browser.jar:
     content/browser/NetworkPanel.xhtml            (webconsole/NetworkPanel.xhtml)
 *   content/browser/scratchpad.xul                (scratchpad/scratchpad.xul)
 *   content/browser/scratchpad.js                 (scratchpad/scratchpad.js)
+*   content/browser/styleeditor.xul               (styleeditor/styleeditor.xul)
+    content/browser/splitview.css                 (styleeditor/splitview.css)
+    content/browser/styleeditor.css               (styleeditor/styleeditor.css)
     content/browser/devtools/csshtmltree.xul      (styleinspector/csshtmltree.xul)
     content/browser/devtools/cssruleview.xul      (styleinspector/cssruleview.xul)
     content/browser/devtools/styleinspector.css   (styleinspector/styleinspector.css)
diff --git a/browser/devtools/styleeditor/Makefile.in b/browser/devtools/styleeditor/Makefile.in
new file mode 100644
index 000000000000..f49fa5a32e0b
--- /dev/null
+++ b/browser/devtools/styleeditor/Makefile.in
@@ -0,0 +1,54 @@
+# ***** 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 Style Editor code.
+#
+# The Initial Developer of the Original Code is Mozilla Foundation.
+#
+# Portions created by the Initial Developer are Copyright (C) 2010
+# the Initial Developer. All Rights Reserved.
+#
+# Contributor(s):
+#    Cedric Vivier <cedricv@neonux.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 *****
+
+DEPTH		= ../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+
+include $(DEPTH)/config/autoconf.mk
+
+ifdef ENABLE_TESTS
+  ifneq (mobile,$(MOZ_BUILD_APP))
+  	  DIRS += test
+  endif
+endif
+
+include $(topsrcdir)/config/rules.mk
+
+libs::
+	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools
diff --git a/browser/devtools/styleeditor/SplitView.jsm b/browser/devtools/styleeditor/SplitView.jsm
new file mode 100644
index 000000000000..2e726cfeda9e
--- /dev/null
+++ b/browser/devtools/styleeditor/SplitView.jsm
@@ -0,0 +1,485 @@
+/* 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 Style Editor 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):
+ *   Cedric Vivier <cedricv@neonux.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 ***** */
+
+"use strict";
+
+const EXPORTED_SYMBOLS = ["SplitView"];
+
+/* this must be kept in sync with CSS (ie. splitview.css) */
+const LANDSCAPE_MEDIA_QUERY = "(min-aspect-ratio: 5/3)";
+
+const BINDING_USERDATA = "splitview-binding";
+
+
+/**
+ * SplitView constructor
+ *
+ * Initialize the split view UI on an existing DOM element.
+ *
+ * A split view contains items, each of those having one summary and one details
+ * elements.
+ * It is adaptive as it behaves similarly to a richlistbox when there the aspect
+ * ratio is narrow or as a pair listbox-box otherwise.
+ *
+ * @param DOMElement aRoot
+ * @see appendItem
+ */
+function SplitView(aRoot)
+{
+  this._root = aRoot;
+  this._controller = aRoot.querySelector(".splitview-controller");
+  this._nav = aRoot.querySelector(".splitview-nav");
+  this._side = aRoot.querySelector(".splitview-side-details");
+  this._activeSummary = null
+
+  this._mql = aRoot.ownerDocument.defaultView.matchMedia(LANDSCAPE_MEDIA_QUERY);
+
+  this._filter = aRoot.querySelector(".splitview-filter");
+  if (this._filter) {
+    this._setupFilterBox();
+  }
+
+  // items list focus and search-on-type handling
+  this._nav.addEventListener("keydown", function onKeyCatchAll(aEvent) {
+    function getFocusedItemWithin(nav) {
+      let node = nav.ownerDocument.activeElement;
+      while (node && node.parentNode != nav) {
+        node = node.parentNode;
+      }
+      return node;
+    }
+
+    // do not steal focus from inside iframes or textboxes
+    if (aEvent.target.ownerDocument != this._nav.ownerDocument ||
+        aEvent.target.tagName == "input" ||
+        aEvent.target.tagName == "textbox" ||
+        aEvent.target.tagName == "textarea" ||
+        aEvent.target.classList.contains("textbox")) {
+      return false;
+    }
+
+    // handle keyboard navigation within the items list
+    let newFocusOrdinal;
+    if (aEvent.keyCode == aEvent.DOM_VK_PAGE_UP ||
+        aEvent.keyCode == aEvent.DOM_VK_HOME) {
+      newFocusOrdinal = 0;
+    } else if (aEvent.keyCode == aEvent.DOM_VK_PAGE_DOWN ||
+               aEvent.keyCode == aEvent.DOM_VK_END) {
+      newFocusOrdinal = this._nav.childNodes.length - 1;
+    } else if (aEvent.keyCode == aEvent.DOM_VK_UP) {
+      newFocusOrdinal = getFocusedItemWithin(this._nav).getAttribute("data-ordinal");
+      newFocusOrdinal--;
+    } else if (aEvent.keyCode == aEvent.DOM_VK_DOWN) {
+      newFocusOrdinal = getFocusedItemWithin(this._nav).getAttribute("data-ordinal");
+      newFocusOrdinal++;
+    }
+    if (newFocusOrdinal !== undefined) {
+      aEvent.stopPropagation();
+      let el = this.getSummaryElementByOrdinal(newFocusOrdinal);
+      if (el) {
+        el.focus();
+      }
+      return false;
+    }
+
+    // search-on-type when any non-whitespace character is pressed while list
+    // has the focus
+    if (this._filter &&
+        !/\s/.test(String.fromCharCode(aEvent.which))) {
+      this._filter.focus();
+    }
+  }.bind(this), false);
+}
+
+SplitView.prototype = {
+  /**
+    * Retrieve whether the UI currently has a landscape orientation.
+    *
+    * @return boolean
+    */
+  get isLandscape() this._mql.matches,
+
+  /**
+    * Retrieve the root element.
+    *
+    * @return DOMElement
+    */
+  get rootElement() this._root,
+
+  /**
+    * Retrieve the active item's summary element or null if there is none.
+    *
+    * @return DOMElement
+    */
+  get activeSummary() this._activeSummary,
+
+  /**
+    * Set the active item's summary element.
+    *
+    * @param DOMElement aSummary
+    */
+  set activeSummary(aSummary)
+  {
+    if (aSummary == this._activeSummary) {
+      return;
+    }
+
+    if (this._activeSummary) {
+      let binding = this._activeSummary.getUserData(BINDING_USERDATA);
+      this._activeSummary.classList.remove("splitview-active");
+      binding._details.classList.remove("splitview-active");
+
+      if (binding.onHide) {
+        binding.onHide(this._activeSummary, binding._details, binding.data);
+      }
+    }
+
+    if (!aSummary) {
+      return;
+    }
+
+    let binding = aSummary.getUserData(BINDING_USERDATA);
+    aSummary.classList.add("splitview-active");
+    binding._details.classList.add("splitview-active");
+
+    this._activeSummary = aSummary;
+
+    if (binding.onShow) {
+      binding.onShow(aSummary, binding._details, binding.data);
+    }
+    aSummary.scrollIntoView();
+  },
+
+  /**
+    * Retrieve the active item's details element or null if there is none.
+    * @return DOMElement
+    */
+  get activeDetails()
+  {
+    let summary = this.activeSummary;
+    return summary ? summary.getUserData(BINDING_USERDATA)._details : null;
+  },
+
+  /**
+   * Retrieve the summary element for a given ordinal.
+   *
+   * @param number aOrdinal
+   * @return DOMElement
+   *         Summary element with given ordinal or null if not found.
+   * @see appendItem
+   */
+  getSummaryElementByOrdinal: function SEC_getSummaryElementByOrdinal(aOrdinal)
+  {
+    return this._nav.querySelector("* > li[data-ordinal='" + aOrdinal + "']");
+  },
+
+  /**
+   * Append an item to the split view.
+   *
+   * @param DOMElement aSummary
+   *        The summary element for the item.
+   * @param DOMElement aDetails
+   *        The details element for the item.
+   * @param object aOptions
+   *     Optional object that defines custom behavior and data for the item.
+   *     All properties are optional :
+   *     - function(DOMElement summary, DOMElement details, object data) onCreate
+   *         Called when the item has been added.
+   *     - function(summary, details, data) onShow
+   *         Called when the item is shown/active.
+   *     - function(summary, details, data) onHide
+   *         Called when the item is hidden/inactive.
+   *     - function(summary, details, data) onDestroy
+   *         Called when the item has been removed.
+   *     - function(summary, details, data, query) onFilterBy
+   *         Called when the user performs a filtering search.
+   *         If the function returns false, the item does not match query
+   *         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.
+   */
+  appendItem: function ASV_appendItem(aSummary, aDetails, aOptions)
+  {
+    let binding = aOptions || {};
+
+    binding._summary = aSummary;
+    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) {
+      aEvent.stopPropagation();
+      this.activeSummary = aSummary;
+    }.bind(this), false);
+
+    this._side.appendChild(aDetails);
+
+    if (binding.onCreate) {
+      binding.onCreate(aSummary, aDetails, binding.data);
+    }
+
+    if (!binding.disableAnimations) {
+      scheduleAnimation(aSummary, "splitview-slide", "splitview-flash");
+      aSummary.scrollIntoView();
+    }
+  },
+
+  /**
+   * Append an item to the split view according to two template elements
+   * (one for the item's summary and the other for the item's details).
+   *
+   * @param string aName
+   *        Name of the template elements to instantiate.
+   *        Requires two (hidden) DOM elements with id "splitview-tpl-summary-"
+   *        and "splitview-tpl-details-" suffixed with aName.
+   * @param object aOptions
+   *        Optional object that defines custom behavior and data for the item.
+   *        See appendItem for full description.
+   * @return object{summary:,details:}
+   *         Object with the new DOM elements created for summary and details.
+   * @see appendItem
+   */
+  appendTemplatedItem: function ASV_appendTemplatedItem(aName, aOptions)
+  {
+    aOptions = aOptions || {};
+    let summary = this._root.querySelector("#splitview-tpl-summary-" + aName);
+    let details = this._root.querySelector("#splitview-tpl-details-" + aName);
+
+    summary = summary.cloneNode(true);
+    summary.id = "";
+    if (aOptions.ordinal !== undefined) { // can be zero
+      summary.style.MozBoxOrdinalGroup = aOptions.ordinal;
+      summary.setAttribute("data-ordinal", aOptions.ordinal);
+    }
+    details = details.cloneNode(true);
+    details.id = "";
+
+    this.appendItem(summary, details, aOptions);
+    return {summary: summary, details: details};
+  },
+
+  /**
+    * Remove an item from the split view.
+    *
+    * @param DOMElement aSummary
+    *        Summary element of the item to remove.
+    */
+  removeItem: function ASV_removeItem(aSummary)
+  {
+    if (aSummary == this._activeSummary) {
+      this.activeSummary = null;
+    }
+
+    let binding = aSummary.getUserData(BINDING_USERDATA);
+    aSummary.parentNode.removeChild(aSummary);
+    binding._details.parentNode.removeChild(binding._details);
+
+    if (binding.onDestroy) {
+      binding.onDestroy(aSummary, binding._details, binding.data);
+    }
+  },
+
+  /**
+   * Remove all items from the split view.
+   */
+  removeAll: function ASV_removeAll()
+  {
+    while (this._nav.hasChildNodes()) {
+      this.removeItem(this._nav.firstChild);
+    }
+  },
+
+  /**
+    * Filter items by given string.
+    * Matching is performed on every item by calling onFilterBy when defined
+    * and then by searching aQuery in the summary element's text item.
+    * Non-matching item is hidden.
+    *
+    * If no item matches, 'splitview-all-filtered' class is set on the filter
+    * input element and the splitview-nav element.
+    *
+    * @param string aQuery
+    *        The query string. Use null to reset (no filter).
+    * @return number
+    *         The number of filtered (non-matching) item.
+    */
+  filterItemsBy: function ASV_filterItemsBy(aQuery)
+  {
+    if (!this._nav.hasChildNodes()) {
+      return 0;
+    }
+    if (aQuery) {
+      aQuery = aQuery.trim();
+    }
+    if (!aQuery) {
+      for (let i = 0; i < this._nav.childNodes.length; ++i) {
+        this._nav.childNodes[i].classList.remove("splitview-filtered");
+      }
+      this._filter.classList.remove("splitview-all-filtered");
+      this._nav.classList.remove("splitview-all-filtered");
+      return 0;
+    }
+
+    let count = 0;
+    let filteredCount = 0;
+    for (let i = 0; i < this._nav.childNodes.length; ++i) {
+      let summary = this._nav.childNodes[i];
+
+      let matches = false;
+      let binding = summary.getUserData(BINDING_USERDATA);
+      if (binding.onFilterBy) {
+        matches = binding.onFilterBy(summary, binding._details, binding.data, aQuery);
+      }
+      if (!matches) { // try text content
+        let content = summary.textContent.toUpperCase();
+        matches = (content.indexOf(aQuery.toUpperCase()) > -1);
+      }
+
+      count++;
+      if (!matches) {
+        summary.classList.add("splitview-filtered");
+        filteredCount++;
+      } else {
+        summary.classList.remove("splitview-filtered");
+      }
+    }
+
+    if (count > 0 && filteredCount == count) {
+      this._filter.classList.add("splitview-all-filtered");
+      this._nav.classList.add("splitview-all-filtered");
+    } else {
+      this._filter.classList.remove("splitview-all-filtered");
+      this._nav.classList.remove("splitview-all-filtered");
+    }
+    return filteredCount;
+  },
+
+  /**
+   * Set the item's CSS class name.
+   * This sets the class on both the summary and details elements, retaining
+   * any SplitView-specific classes.
+   *
+   * @param DOMElement aSummary
+   *        Summary element of the item to set.
+   * @param string aClassName
+   *        One or more space-separated CSS classes.
+   */
+  setItemClassName: function ASV_setItemClassName(aSummary, aClassName)
+  {
+    let binding = aSummary.getUserData(BINDING_USERDATA);
+    let viewSpecific;
+
+    viewSpecific = aSummary.className.match(/(splitview\-[\w-]+)/g);
+    viewSpecific = viewSpecific ? viewSpecific.join(" ") : "";
+    aSummary.className = viewSpecific + " " + aClassName;
+
+    viewSpecific = binding._details.className.match(/(splitview\-[\w-]+)/g);
+    viewSpecific = viewSpecific ? viewSpecific.join(" ") : "";
+    binding._details.className = viewSpecific + " " + aClassName;
+  },
+
+  /**
+   * Set up filter search box.
+   */
+  _setupFilterBox: function ASV__setupFilterBox()
+  {
+    let clearFilter = function clearFilter(aEvent) {
+      this._filter.value = "";
+      this.filterItemsBy("");
+      return false;
+    }.bind(this);
+
+    this._filter.addEventListener("command", function onFilterInput(aEvent) {
+      this.filterItemsBy(this._filter.value);
+    }.bind(this), false);
+
+    this._filter.addEventListener("keyup", function onFilterKeyUp(aEvent) {
+      if (aEvent.keyCode == aEvent.DOM_VK_ESCAPE) {
+        clearFilter();
+      }
+      if (aEvent.keyCode == aEvent.DOM_VK_ENTER ||
+          aEvent.keyCode == aEvent.DOM_VK_RETURN) {
+        // autofocus matching item if there is only one
+        let matches = this._nav.querySelectorAll("* > li:not(.splitview-filtered)");
+        if (matches.length == 1) {
+          this.activeSummary = matches[0];
+        }
+      }
+    }.bind(this), false);
+
+    let clearButtons = this._root.querySelectorAll(".splitview-filter-clearButton");
+    for (let i = 0; i < clearButtons.length; ++i) {
+      clearButtons[i].addEventListener("click", clearFilter, false);
+    }
+  }
+};
+
+//
+// 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/StyleEditor.jsm b/browser/devtools/styleeditor/StyleEditor.jsm
new file mode 100644
index 000000000000..de000a6fdebf
--- /dev/null
+++ b/browser/devtools/styleeditor/StyleEditor.jsm
@@ -0,0 +1,1112 @@
+/* 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 Style Editor 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):
+ *   Cedric Vivier <cedricv@neonux.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 ***** */
+
+"use strict";
+
+const EXPORTED_SYMBOLS = ["StyleEditor", "StyleEditorFlags"];
+
+const Cc = Components.classes;
+const Ci = Components.interfaces;
+const Cu = Components.utils;
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/NetUtil.jsm");
+Cu.import("resource://gre/modules/FileUtils.jsm");
+Cu.import("resource:///modules/devtools/StyleEditorUtil.jsm");
+Cu.import("resource:///modules/source-editor.jsm");
+
+const LOAD_ERROR = "error-load";
+const SAVE_ERROR = "error-save";
+
+// max update frequency in ms (avoid potential typing lag and/or flicker)
+// @see StyleEditor.updateStylesheet
+const UPDATE_STYLESHEET_THROTTLE_DELAY = 500;
+
+// @see StyleEditor._persistExpando
+const STYLESHEET_EXPANDO = "-moz-styleeditor-stylesheet-";
+
+
+/**
+ * StyleEditor constructor.
+ *
+ * The StyleEditor is initialized 'headless', it does not display source
+ * or receive input. Setting inputElement attaches a DOMElement to handle this.
+ *
+ * An editor can be created stand-alone or created by StyleEditorChrome to
+ * manage all the style sheets of a document, including @import'ed sheets.
+ *
+ * @param DOMDocument aDocument
+ *        The content document where changes will be applied to.
+ * @param DOMStyleSheet aStyleSheet
+ *        Optional. The DOMStyleSheet to edit.
+ *        If not set, a new empty style sheet will be appended to the document.
+ * @see inputElement
+ * @see StyleEditorChrome
+ */
+function StyleEditor(aDocument, aStyleSheet)
+{
+  assert(aDocument, "Argument 'aDocument' is required.");
+
+  this._document = aDocument; // @see contentDocument
+  this._inputElement = null;  // @see inputElement
+  this._sourceEditor = null;  // @see sourceEditor
+
+  this._state = {             // state to handle inputElement attach/detach
+    text: "",                 // seamlessly
+    selection: {start: 0, end: 0},
+    readOnly: false
+  };
+
+  this._styleSheet = aStyleSheet;
+  this._styleSheetIndex = -1; // unknown for now, will be set after load
+
+  this._loaded = false;
+
+  this._flags = [];           // @see flags
+  this._savedFile = null;     // @see savedFile
+
+  this._errorMessage = null;  // @see errorMessage
+
+  // listeners for significant editor actions. @see addActionListener
+  this._actionListeners = [];
+
+  // this is to perform pending updates before editor closing
+  this._onWindowUnloadBinding = this._onWindowUnload.bind(this);
+  // this is to proxy the focus event to underlying SourceEditor
+  this._onInputElementFocusBinding = this._onInputElementFocus.bind(this);
+  this._focusOnSourceEditorReady = false;
+}
+
+StyleEditor.prototype = {
+  /**
+   * Retrieve the content document this editor will apply changes to.
+   *
+   * @return DOMDocument
+   */
+  get contentDocument() this._document,
+
+  /**
+   * Retrieve the stylesheet this editor is attached to.
+   *
+   * @return DOMStyleSheet
+   */
+  get styleSheet()
+  {
+    assert(this._styleSheet, "StyleSheet must be loaded first.")
+    return this._styleSheet;
+  },
+
+  /**
+   * Retrieve the index (order) of stylesheet in the document.
+   *
+   * @return number
+   */
+  get styleSheetIndex()
+  {
+    let document = this.contentDocument;
+    if (this._styleSheetIndex == -1) {
+      for (let i = 0; i < document.styleSheets.length; ++i) {
+        if (document.styleSheets[i] == this.styleSheet) {
+          this._styleSheetIndex = i;
+          break;
+        }
+      }
+    }
+    return this._styleSheetIndex;
+  },
+
+  /**
+   * Retrieve the input element that handles display and input for this editor.
+   * Can be null if the editor is detached/headless, which means that this
+   * StyleEditor is not attached to an input element.
+   *
+   * @return DOMElement
+   */
+  get inputElement() this._inputElement,
+
+  /**
+   * Set the input element that handles display and input for this editor.
+   * This detaches the previous input element if previously set.
+   *
+   * @param DOMElement aElement
+   */
+  set inputElement(aElement)
+  {
+    if (aElement == this._inputElement) {
+      return; // no change
+    }
+
+    if (this._inputElement) {
+      // detach from current input element
+      if (this._sourceEditor) {
+        // save existing state first (for seamless reattach)
+        this._state = {
+          text: this._sourceEditor.getText(),
+          selection: this._sourceEditor.getSelection(),
+          readOnly: this._sourceEditor.readOnly
+        };
+        this._sourceEditor.destroy();
+        this._sourceEditor = null;
+      }
+
+      this.window.removeEventListener("unload",
+                                      this._onWindowUnloadBinding, false);
+      this._inputElement.removeEventListener("focus",
+        this._onInputElementFocusBinding, true);
+      this._triggerAction("Detach");
+    }
+
+    this._inputElement = aElement;
+    if (!aElement) {
+      return;
+    }
+
+    // attach to new input element
+    this.window.addEventListener("unload", this._onWindowUnloadBinding, false);
+    this._focusOnSourceEditorReady = false;
+    aElement.addEventListener("focus", this._onInputElementFocusBinding, true);
+
+    this._sourceEditor = null; // set it only when ready (safe to use)
+
+    let sourceEditor = new SourceEditor();
+    let config = {
+      placeholderText: this._state.text, //! this is initialText (bug 680371)
+      showLineNumbers: true,
+      mode: SourceEditor.MODES.CSS,
+      readOnly: this._state.readOnly,
+      keys: this._getKeyBindings()
+    };
+
+    sourceEditor.init(aElement, config, function onSourceEditorReady() {
+      sourceEditor.setSelection(this._state.selection.start,
+                                this._state.selection.end);
+
+      if (this._focusOnSourceEditorReady) {
+        sourceEditor.focus();
+      }
+
+      sourceEditor.addEventListener(SourceEditor.EVENTS.TEXT_CHANGED,
+                                    function onTextChanged(aEvent) {
+        this.updateStyleSheet();
+      }.bind(this));
+
+      this._sourceEditor = sourceEditor;
+      this._triggerAction("Attach");
+    }.bind(this));
+  },
+
+  /**
+   * Retrieve the underlying SourceEditor instance for this StyleEditor.
+   * Can be null if not ready or Style Editor is detached/headless.
+   *
+   * @return SourceEditor
+   */
+  get sourceEditor() this._sourceEditor,
+
+  /**
+   * Setter for the read-only state of the editor.
+   *
+   * @param boolean aValue
+   *        Tells if you want the editor to be read-only or not.
+   */
+  set readOnly(aValue)
+  {
+    this._state.readOnly = aValue;
+    if (this._sourceEditor) {
+      this._sourceEditor.readOnly = aValue;
+    }
+  },
+
+  /**
+   * Getter for the read-only state of the editor.
+   *
+   * @return boolean
+   */
+  get readOnly()
+  {
+    return this._state.readOnly;
+  },
+
+  /**
+   * Retrieve the window that contains the editor.
+   * Can be null if the editor is detached/headless.
+   *
+   * @return DOMWindow
+   */
+  get window()
+  {
+    if (!this.inputElement) {
+      return null;
+    }
+    return this.inputElement.ownerDocument.defaultView;
+  },
+
+  /**
+   * Retrieve the last file this editor has been saved to or null if none.
+   *
+   * @return nsIFile
+   */
+  get savedFile() this._savedFile,
+
+  /**
+   * Import style sheet from file and load it into the editor asynchronously.
+   * "Load" action triggers when complete.
+   *
+   * @param mixed aFile
+   *        Optional nsIFile or filename string.
+   *        If not set a file picker will be shown.
+   * @param nsIWindow aParentWindow
+   *        Optional parent window for the file picker.
+   */
+  importFromFile: function SE_importFromFile(aFile, aParentWindow)
+  {
+    aFile = this._showFilePicker(aFile, false, aParentWindow);
+    if (!aFile) {
+      return;
+    }
+    this._savedFile = aFile; // remember filename for next save if any
+
+    NetUtil.asyncFetch(aFile, function onAsyncFetch(aStream, aStatus) {
+      if (!Components.isSuccessCode(aStatus)) {
+        return this._signalError(LOAD_ERROR);
+      }
+      let source = NetUtil.readInputStreamToString(aStream, aStream.available());
+      aStream.close();
+
+      this._appendNewStyleSheet(source);
+      this.clearFlag(StyleEditorFlags.ERROR);
+    }.bind(this));
+  },
+
+  /**
+    * Retrieve localized error message of last error condition, or null if none.
+    * This is set when the editor has flag StyleEditorFlags.ERROR.
+    *
+    * @see addActionListener
+    */
+  get errorMessage() this._errorMessage,
+
+  /**
+   * Tell whether the stylesheet has been loaded and ready for modifications.
+   *
+   * @return boolean
+   */
+  get isLoaded() this._loaded,
+
+  /**
+   * Load style sheet source into the editor, asynchronously.
+   * "Load" handler triggers when complete.
+   *
+   * @see addActionListener
+   */
+  load: function SE_load()
+  {
+    if (!this._styleSheet) {
+      this._flags.push(StyleEditorFlags.NEW);
+      this._appendNewStyleSheet();
+    }
+    this._loadSource();
+  },
+
+  /**
+   * Get a user-friendly name for the style sheet.
+   *
+   * @return string
+   */
+  getFriendlyName: function SE_getFriendlyName()
+  {
+    if (this.savedFile) { // reuse the saved filename if any
+      return this.savedFile.leafName;
+    }
+
+    if (this.hasFlag(StyleEditorFlags.NEW)) {
+      let index = this.styleSheetIndex + 1; // 0-indexing only works for devs
+      return _("newStyleSheet", index);
+    }
+
+    if (this.hasFlag(StyleEditorFlags.INLINE)) {
+      let index = this.styleSheetIndex + 1; // 0-indexing only works for devs
+      return _("inlineStyleSheet", index);
+    }
+
+    if (!this._friendlyName) {
+      let sheetURI = this.styleSheet.href;
+      let contentURI = this.contentDocument.baseURIObject;
+      let contentURIScheme = contentURI.scheme;
+      let contentURILeafIndex = contentURI.specIgnoringRef.lastIndexOf("/");
+      contentURI = contentURI.specIgnoringRef;
+
+      // get content base URI without leaf name (if any)
+      if (contentURILeafIndex > contentURIScheme.length) {
+        contentURI = contentURI.substring(0, contentURILeafIndex + 1);
+      }
+
+      // avoid verbose repetition of absolute URI when the style sheet URI
+      // is relative to the content URI
+      this._friendlyName = (sheetURI.indexOf(contentURI) == 0)
+                           ? sheetURI.substring(contentURI.length)
+                           : sheetURI;
+    }
+    return this._friendlyName;
+  },
+
+  /**
+   * Add a listener for significant StyleEditor actions.
+   *
+   * The listener implements IStyleEditorActionListener := {
+   *   onLoad:                 Called when the style sheet has been loaded and
+   *                           parsed.
+   *                           Arguments: (StyleEditor editor)
+   *                           @see load
+   *
+   *   onFlagChange:           Called when a flag has been set or cleared.
+   *                           Arguments: (StyleEditor editor, string flagName)
+   *                           @see setFlag
+   *
+   *   onAttach:               Called when an input element has been attached.
+   *                           Arguments: (StyleEditor editor)
+   *                           @see inputElement
+   *
+   *   onDetach:               Called when input element has been detached.
+   *                           Arguments: (StyleEditor editor)
+   *                           @see inputElement
+   *
+   *   onCommit:               Called when changes have been committed/applied
+   *                           to the live DOM style sheet.
+   *                           Arguments: (StyleEditor editor)
+   * }
+   *
+   * All listener methods are optional.
+   *
+   * @param IStyleEditorActionListener aListener
+   * @see removeActionListener
+   */
+  addActionListener: function SE_addActionListener(aListener)
+  {
+    this._actionListeners.push(aListener);
+  },
+
+  /**
+   * Remove a listener for editor actions from the current list of listeners.
+   *
+   * @param IStyleEditorActionListener aListener
+   * @see addActionListener
+   */
+  removeActionListener: function SE_removeActionListener(aListener)
+  {
+    let index = this._actionListeners.indexOf(aListener);
+    if (index != -1) {
+      this._actionListeners.splice(index, 1);
+    }
+  },
+
+  /**
+   * Editor UI flags.
+   *
+   * These are 1-bit indicators that can be used for UI feedback/indicators or
+   * extensions to track the editor status.
+   * Since they are simple strings, they promote loose coupling and can simply
+   * map to CSS class names, which allows to 'expose' indicators declaratively
+   * via CSS (including possibly complex combinations).
+   *
+   * Flag changes can be tracked via onFlagChange (@see addActionListener).
+   *
+   * @see StyleEditorFlags
+   */
+
+  /**
+   * Retrieve a space-separated string of all UI flags set on this editor.
+   *
+   * @return string
+   * @see setFlag
+   * @see clearFlag
+   */
+  get flags() this._flags.join(" "),
+
+  /**
+   * Set a flag.
+   *
+   * @param string aName
+   *        Name of the flag to set. One of StyleEditorFlags members.
+   * @return boolean
+   *         True if the flag has been set, false if flag is already set.
+   * @see StyleEditorFlags
+   */
+  setFlag: function SE_setFlag(aName)
+  {
+    let prop = aName.toUpperCase();
+    assert(StyleEditorFlags[prop], "Unknown flag: " + prop);
+
+    if (this.hasFlag(aName)) {
+      return false;
+    }
+    this._flags.push(aName);
+    this._triggerAction("FlagChange", [aName]);
+    return true;
+  },
+
+  /**
+   * Clear a flag.
+   *
+   * @param string aName
+   *        Name of the flag to clear.
+   * @return boolean
+   *         True if the flag has been cleared, false if already clear.
+   */
+  clearFlag: function SE_clearFlag(aName)
+  {
+    let index = this._flags.indexOf(aName);
+    if (index == -1) {
+      return false;
+    }
+    this._flags.splice(index, 1);
+    this._triggerAction("FlagChange", [aName]);
+    return true;
+  },
+
+  /**
+   * Toggle a flag, according to a condition.
+   *
+   * @param aCondition
+   *        If true the flag is set, otherwise cleared.
+   * @param string aName
+   *        Name of the flag to toggle.
+   * @return boolean
+   *        True if the flag has been set or cleared, ie. the flag got switched.
+   */
+  toggleFlag: function SE_toggleFlag(aCondition, aName)
+  {
+    return (aCondition) ? this.setFlag(aName) : this.clearFlag(aName);
+  },
+
+  /**
+   * Check if given flag is set.
+   *
+   * @param string aName
+   *        Name of the flag to check presence for.
+   * @return boolean
+   *         True if the flag is set, false otherwise.
+   */
+  hasFlag: function SE_hasFlag(aName) (this._flags.indexOf(aName) != -1),
+
+  /**
+   * Enable or disable style sheet.
+   *
+   * @param boolean aEnabled
+   */
+  enableStyleSheet: function SE_enableStyleSheet(aEnabled)
+  {
+    this.styleSheet.disabled = !aEnabled;
+    this.toggleFlag(this.styleSheet.disabled, StyleEditorFlags.DISABLED);
+
+    if (this._updateTask) {
+      this._updateStyleSheet(); // perform cancelled update
+    }
+  },
+
+  /**
+   * Save the editor contents into a file and set savedFile property.
+   * A file picker UI will open if file is not set and editor is not headless.
+   *
+   * @param mixed aFile
+   *        Optional nsIFile or string representing the filename to save in the
+   *        background, no UI will be displayed.
+   *        To implement 'Save' instead of 'Save as', you can pass savedFile here.
+   * @param function(nsIFile aFile) aCallback
+   *        Optional callback called when the operation has finished.
+   *        aFile has the nsIFile object for saved file or null if the operation
+   *        has failed or has been canceled by the user.
+   * @see savedFile
+   */
+  saveToFile: function SE_saveToFile(aFile, aCallback)
+  {
+    aFile = this._showFilePicker(aFile, true);
+    if (!aFile) {
+      if (aCallback) {
+        aCallback(null);
+      }
+      return;
+    }
+
+    if (this._sourceEditor) {
+      this._state.text = this._sourceEditor.getText();
+    }
+
+    let ostream = FileUtils.openSafeFileOutputStream(aFile);
+    let converter = Cc["@mozilla.org/intl/scriptableunicodeconverter"]
+                      .createInstance(Ci.nsIScriptableUnicodeConverter);
+    converter.charset = "UTF-8";
+    let istream = converter.convertToInputStream(this._state.text);
+
+    NetUtil.asyncCopy(istream, ostream, function SE_onStreamCopied(status) {
+      if (!Components.isSuccessCode(status)) {
+        if (aCallback) {
+          aCallback(null);
+        }
+        this._signalError(SAVE_ERROR);
+        return;
+      }
+      FileUtils.closeSafeFileOutputStream(ostream);
+
+      // remember filename for next save if any
+      this._friendlyName = null;
+      this._savedFile = aFile;
+      this._persistExpando();
+
+      if (aCallback) {
+        aCallback(aFile);
+      }
+      this.clearFlag(StyleEditorFlags.UNSAVED);
+      this.clearFlag(StyleEditorFlags.ERROR);
+    }.bind(this));
+  },
+
+  /**
+   * Queue a throttled task to update the live style sheet.
+   *
+   * @param boolean aImmediate
+   *        Optional. If true the update is performed immediately.
+   */
+  updateStyleSheet: function SE_updateStyleSheet(aImmediate)
+  {
+    let window = this.window;
+
+    if (this._updateTask) {
+      // cancel previous queued task not executed within throttle delay
+      window.clearTimeout(this._updateTask);
+    }
+
+    if (aImmediate) {
+      this._updateStyleSheet();
+    } else {
+      this._updateTask = window.setTimeout(this._updateStyleSheet.bind(this),
+                                           UPDATE_STYLESHEET_THROTTLE_DELAY);
+    }
+  },
+
+  /**
+   * Update live style sheet according to modifications.
+   */
+  _updateStyleSheet: function SE__updateStyleSheet()
+  {
+    this.setFlag(StyleEditorFlags.UNSAVED);
+
+    if (this.styleSheet.disabled) {
+      return;
+    }
+
+    this._updateTask = null; // reset only if we actually perform an update
+                             // (stylesheet is enabled) so that 'missed' updates
+                             // while the stylesheet is disabled can be performed
+                             // when it is enabled back. @see enableStylesheet
+
+    if (this.sourceEditor) {
+      this._state.text = this.sourceEditor.getText();
+    }
+    let source = this._state.text;
+    let oldNode = this.styleSheet.ownerNode;
+    let oldIndex = this.styleSheetIndex;
+
+    let newNode = this.contentDocument.createElement("style");
+    newNode.setAttribute("type", "text/css");
+    newNode.appendChild(this.contentDocument.createTextNode(source));
+    oldNode.parentNode.replaceChild(newNode, oldNode);
+
+    this._styleSheet = this.contentDocument.styleSheets[oldIndex];
+    this._persistExpando();
+
+    this._triggerAction("Commit");
+  },
+
+  /**
+   * Show file picker and return the file user selected.
+   *
+   * @param mixed aFile
+   *        Optional nsIFile or string representing the filename to auto-select.
+   * @param boolean aSave
+   *        If true, the user is selecting a filename to save.
+   * @param nsIWindow aParentWindow
+   *        Optional parent window. If null the parent window of the file picker
+   *        will be the window of the attached input element.
+   * @return nsIFile
+   *         The selected file or null if the user did not pick one.
+   */
+  _showFilePicker: function SE__showFilePicker(aFile, aSave, aParentWindow)
+  {
+    if (typeof(aFile) == "string") {
+      try {
+        let file = Cc["@mozilla.org/file/local;1"].createInstance(Ci.nsILocalFile);
+        file.initWithPath(aFile);
+        return file;
+      } catch (ex) {
+        this._signalError(aSave ? SAVE_ERROR : LOAD_ERROR);
+        return null;
+      }
+    }
+    if (aFile) {
+      return aFile;
+    }
+
+    let window = aParentWindow
+                 ? aParentWindow
+                 : this.inputElement.ownerDocument.defaultView;
+    let fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker);
+    let mode = aSave ? fp.modeSave : fp.modeOpen;
+    let key = aSave ? "saveStyleSheet" : "importStyleSheet";
+
+    fp.init(window, _(key + ".title"), mode);
+    fp.appendFilters(_(key + ".filter"), "*.css");
+    fp.appendFilters(fp.filterAll);
+
+    let rv = fp.show();
+    return (rv == fp.returnCancel) ? null : fp.file;
+  },
+
+  /**
+   * Retrieve the style sheet source from the cache or from a local file.
+   */
+  _loadSource: function SE__loadSource()
+  {
+    if (!this.styleSheet.href) {
+      // this is an inline <style> sheet
+      this._flags.push(StyleEditorFlags.INLINE);
+      this._onSourceLoad(this.styleSheet.ownerNode.textContent);
+      return;
+    }
+
+    let scheme = Services.io.extractScheme(this.styleSheet.href);
+    switch (scheme) {
+      case "file":
+      case "chrome":
+      case "resource":
+        this._loadSourceFromFile(this.styleSheet.href);
+        break;
+      default:
+        this._loadSourceFromCache(this.styleSheet.href);
+        break;
+    }
+  },
+
+  /**
+   * Load source from a file or file-like resource.
+   *
+   * @param string aHref
+   *        URL for the stylesheet.
+   */
+  _loadSourceFromFile: function SE__loadSourceFromFile(aHref)
+  {
+    try {
+      NetUtil.asyncFetch(aHref, function onFetch(aStream, aStatus) {
+        if (!Components.isSuccessCode(aStatus)) {
+          return this._signalError(LOAD_ERROR);
+        }
+        let source = NetUtil.readInputStreamToString(aStream, aStream.available());
+        aStream.close();
+        this._onSourceLoad(source);
+      }.bind(this));
+    } catch (ex) {
+      this._signalError(LOAD_ERROR);
+    }
+  },
+
+  /**
+   * Load source from the HTTP cache.
+   *
+   * @param string aHref
+   *        URL for the stylesheet.
+   */
+  _loadSourceFromCache: function SE__loadSourceFromCache(aHref)
+  {
+    try {
+      let cacheService = Cc["@mozilla.org/network/cache-service;1"]
+                           .getService(Ci.nsICacheService);
+      let session = cacheService.createSession("HTTP", Ci.nsICache.STORE_ANYWHERE, true);
+      session.doomEntriesIfExpired = false;
+      session.asyncOpenCacheEntry(aHref, Ci.nsICache.ACCESS_READ, {
+        onCacheEntryAvailable: this._onCacheEntryAvailable.bind(this)
+      });
+    } catch (ex) {
+      this._signalError(LOAD_ERROR);
+    }
+  },
+
+   /**
+    * The nsICacheListener.onCacheEntryAvailable method implementation used when
+    * the style sheet source is loaded from the browser cache.
+    *
+    * @param nsICacheEntryDescriptor aEntry
+    * @param nsCacheAccessMode aMode
+    * @param integer aStatus
+    */
+  _onCacheEntryAvailable: function SE__onCacheEntryAvailable(aEntry, aMode, aStatus)
+  {
+    assert(!this._loadingContext);
+    if (!Components.isSuccessCode(aStatus)) {
+      return this._signalError(LOAD_ERROR);
+    }
+
+    let stream = aEntry.openInputStream(0);
+    let context = {
+      chunks: [],
+      stream: stream,
+      entry: aEntry,
+      inputSink: this.onDataAvailable.bind(this),
+      editor: this,
+    };
+    this._loadingContext = context;
+
+    let head = aEntry.getMetaDataElement("response-head");
+    if (/^Content-Encoding:\s*gzip/mi.test(head)) {
+      let converter = Cc["@mozilla.org/streamconv;1?from=gzip&to=uncompressed"]
+                        .createInstance(Ci.nsIStreamConverter);
+      converter.asyncConvertData("gzip", "uncompressed", this, null);
+      context.inputSink = converter.onDataAvailable;
+    }
+
+    // start grabbing available chunk(s)
+    context.inputSink(null, null, stream, 0, stream.available());
+  },
+
+  /**
+   * nsIStreamListener.onDataAvailable implementation used as input sink when
+   * style sheet source is loaded from the browser cache.
+   *
+   * @private
+   * @param nsIRequest aRequest
+   * @param nsISupports aContext
+   * @param nsIInputStream aStream
+   * @param number aOffset
+   * @param number aCount
+   */
+  onDataAvailable: function SE_onDataAvailable(aRequest, aContext, aStream, aOffset, aCount) {
+    let context = this._loadingContext;
+    context.chunks.push(NetUtil.readInputStreamToString(aStream, aCount));
+
+    let available;
+    try {
+      available = context.stream.available();
+      if (!available) {
+        context.stream.close();
+      }
+    } catch (ex) {
+      // note: some nsIInputStream implementations auto-close at EOS and throw
+    }
+    if (!available) {
+      context.entry.close();
+      context.editor._onSourceLoad(context.chunks.join(""));
+      context.editor._loadingContext = null;
+      return;
+    }
+
+    // load the next available chunk
+    context.inputSink(null, aContext, context.stream, 0, available);
+  },
+
+  /**
+   * Called when source has been loaded.
+   *
+   * @param string aSourceText
+   */
+  _onSourceLoad: function SE__onSourceLoad(aSourceText)
+  {
+    this._restoreExpando();
+    this._state.text = prettifyCSS(aSourceText);
+    this._loaded = true;
+    this._triggerAction("Load");
+  },
+
+  /**
+   * Create a new style sheet and append it to the content document.
+   *
+   * @param string aText
+   *        Optional CSS text.
+   */
+  _appendNewStyleSheet: function SE__appendNewStyleSheet(aText)
+  {
+    let document = this.contentDocument;
+    let parent = document.documentElement;
+    let style = document.createElement("style");
+    style.setAttribute("type", "text/css");
+    if (aText) {
+      style.appendChild(document.createTextNode(aText));
+    }
+    parent.appendChild(style);
+
+    this._styleSheet = document.styleSheets[document.styleSheets.length - 1];
+    this._flags.push(aText ? StyleEditorFlags.IMPORTED : StyleEditorFlags.NEW);
+    if (aText) {
+      this._onSourceLoad(aText);
+    }
+  },
+
+  /**
+   * Signal an error to the user.
+   *
+   * @param string aErrorCode
+   *        String name for the localized error property in the string bundle.
+   * @param ...rest
+   *        Optional arguments to pass for message formatting.
+   * @see StyleEditorUtil._
+   */
+  _signalError: function SE__signalError(aErrorCode)
+  {
+    this._errorMessage = _.apply(null, arguments);
+    this.setFlag(StyleEditorFlags.ERROR);
+  },
+
+  /**
+   * Trigger named action handler in listeners.
+   *
+   * @param string aName
+   *        Name of the action to trigger.
+   * @param Array aArgs
+   *        Optional array of arguments to pass to the listener(s).
+   * @see addActionListener
+   */
+  _triggerAction: function SE__triggerAction(aName, aArgs)
+  {
+    // insert the origin editor instance as first argument
+    if (!aArgs) {
+      aArgs = [this];
+    } else {
+      aArgs.unshift(this);
+    }
+
+    // trigger all listeners that have this action handler
+    for (let i = 0; i < this._actionListeners.length; ++i) {
+      let listener = this._actionListeners[i];
+      let actionHandler = listener["on" + aName];
+      if (actionHandler) {
+        actionHandler.apply(listener, aArgs);
+      }
+    }
+
+    // when a flag got changed, user-facing state need to be persisted
+    if (aName == "FlagChange") {
+      this._persistExpando();
+    }
+  },
+
+  /**
+    * Unload event handler to perform any pending update before closing
+    */
+  _onWindowUnload: function SE__onWindowUnload(aEvent)
+  {
+    if (this._updateTask) {
+      this.updateStyleSheet(true);
+    }
+  },
+
+  /**
+    * Focus event handler to automatically proxy inputElement's focus event to
+    * SourceEditor whenever it is ready.
+    * SourceEditor should probably have a command buffer so that timing issues
+    * related to iframe implementation details are handled by itself rather than
+    * by all its users.
+    */
+  _onInputElementFocus: function SE__onInputElementFocus(aEvent)
+  {
+    if (this._sourceEditor) {
+      this._sourceEditor.focus();
+    } else {
+      this._focusOnSourceEditorReady = true;
+    }
+  },
+
+  /**
+    * Persist StyleEditor extra data to the attached DOM stylesheet expando.
+    * The expando on the DOM stylesheet is used to restore user-facing state
+    * when the StyleEditor is closed and then reopened again.
+    *
+    * @see styleSheet
+    */
+  _persistExpando: function SE__persistExpando() {
+    if (!this._styleSheet) {
+      return; // not loaded
+    }
+    let name = STYLESHEET_EXPANDO + this.styleSheetIndex;
+    let expando = this.contentDocument.getUserData(name);
+    if (!expando) {
+      expando = {};
+      this.contentDocument.setUserData(name, expando, null);
+    }
+    expando._flags = this._flags;
+    expando._savedFile = this._savedFile;
+  },
+
+  /**
+    * Restore the attached DOM stylesheet expando into this editor state.
+    *
+    * @see styleSheet
+    */
+  _restoreExpando: function SE__restoreExpando() {
+    if (!this._styleSheet) {
+      return; // not loaded
+    }
+    let name = STYLESHEET_EXPANDO + this.styleSheetIndex;
+    let expando = this.contentDocument.getUserData(name);
+    if (expando) {
+      this._flags = expando._flags;
+      this._savedFile = expando._savedFile;
+    }
+  },
+
+  /**
+    * Retrieve custom key bindings objects as expected by SourceEditor.
+    * SourceEditor action names are not displayed to the user.
+    *
+    * @return Array
+    */
+  _getKeyBindings: function () {
+    let bindings = [];
+
+    bindings.push({
+      action: "StyleEditor.save",
+      code: _("saveStyleSheet.commandkey"),
+      accel: true,
+      callback: function save() {
+        this.saveToFile(this._savedFile);
+      }.bind(this)
+    });
+    bindings.push({
+      action: "StyleEditor.saveAs",
+      code: _("saveStyleSheet.commandkey"),
+      accel: true,
+      shift: true,
+      callback: function saveAs() {
+        this.saveToFile();
+      }.bind(this)
+    });
+
+    return bindings;
+  }
+};
+
+/**
+ * List of StyleEditor UI flags.
+ * A Style Editor add-on using its own flag needs to add it to this object.
+ *
+ * @see StyleEditor.setFlag
+ */
+let StyleEditorFlags = {
+  DISABLED:      "disabled",
+  ERROR:         "error",
+  IMPORTED:      "imported",
+  INLINE:        "inline",
+  MODIFIED:      "modified",
+  NEW:           "new",
+  UNSAVED:       "unsaved"
+};
+
+
+const TAB_CHARS   = "\t";
+
+const OS = Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
+const LINE_SEPARATOR = OS === "WINNT" ? "\r\n" : "\n";
+
+/**
+ * Prettify minified CSS text.
+ * This prettifies CSS code where there is no indentation in usual places while
+ * keeping original indentation as-is elsewhere.
+ *
+ * @param string aText
+ *        The CSS source to prettify.
+ * @return string
+ *         Prettified CSS source
+ */
+function prettifyCSS(aText)
+{
+  // remove initial and terminating HTML comments and surrounding whitespace
+  aText = aText.replace(/(?:^\s*<!--[\r\n]*)|(?:\s*-->\s*$)/g, "");
+
+  let parts = [];    // indented parts
+  let partStart = 0; // start offset of currently parsed part
+  let indent = "";
+  let indentLevel = 0;
+
+  for (let i = 0; i < aText.length; i++) {
+    let c = aText[i];
+    let shouldIndent = false;
+
+    switch (c) {
+      case "}":
+        if (i - partStart > 1) {
+          // there's more than just } on the line, add line
+          parts.push(indent + aText.substring(partStart, i));
+          partStart = i;
+        }
+        indent = repeat(TAB_CHARS, --indentLevel);
+        /* fallthrough */
+      case ";":
+      case "{":
+        shouldIndent = true;
+        break;
+    }
+
+    if (shouldIndent) {
+      let la = aText[i+1]; // one-character lookahead
+      if (!/\s/.test(la)) {
+        // following character should be a new line (or whitespace) but it isn't
+        // force indentation then
+        parts.push(indent + aText.substring(partStart, i + 1));
+        if (c == "}") {
+          parts.push(""); // for extra line separator
+        }
+        partStart = i + 1;
+      } else {
+        return aText; // assume it is not minified, early exit
+      }
+    }
+
+    if (c == "{") {
+      indent = repeat(TAB_CHARS, ++indentLevel);
+    }
+  }
+  return parts.join(LINE_SEPARATOR);
+}
+
+/**
+  * Return string that repeats aText for aCount times.
+  *
+  * @param string aText
+  * @param number aCount
+  * @return string
+  */
+function repeat(aText, aCount)
+{
+  return (new Array(aCount + 1)).join(aText);
+}
diff --git a/browser/devtools/styleeditor/StyleEditorChrome.jsm b/browser/devtools/styleeditor/StyleEditorChrome.jsm
new file mode 100644
index 000000000000..74f29d4100da
--- /dev/null
+++ b/browser/devtools/styleeditor/StyleEditorChrome.jsm
@@ -0,0 +1,488 @@
+/* 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 Style Editor 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):
+ *   Cedric Vivier <cedricv@neonux.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 ***** */
+
+"use strict";
+
+const EXPORTED_SYMBOLS = ["StyleEditorChrome"];
+
+const Cc = Components.classes;
+const Ci = Components.interfaces;
+const Cu = Components.utils;
+
+Cu.import("resource://gre/modules/Services.jsm");
+Cu.import("resource://gre/modules/PluralForm.jsm");
+Cu.import("resource:///modules/devtools/StyleEditor.jsm");
+Cu.import("resource:///modules/devtools/StyleEditorUtil.jsm");
+Cu.import("resource:///modules/devtools/SplitView.jsm");
+
+const STYLE_EDITOR_TEMPLATE = "stylesheet";
+
+
+/**
+ * StyleEditorChrome constructor.
+ *
+ * The 'chrome' of the Style Editor is all the around the actual editor (textbox).
+ * Manages the sheet selector, history, and opened editor(s) for the attached
+ * content window.
+ *
+ * @param DOMElement aRoot
+ *        Element that owns the chrome UI.
+ * @param DOMWindow aContentWindow
+ *        Content DOMWindow to attach to this chrome.
+ */
+function StyleEditorChrome(aRoot, aContentWindow)
+{
+  assert(aRoot, "Argument 'aRoot' is required to initialize StyleEditorChrome.");
+
+  this._root = aRoot;
+  this._document = this._root.ownerDocument;
+  this._window = this._document.defaultView;
+
+  this._editors = [];
+  this._listeners = []; // @see addChromeListener
+
+  this._contentWindow = null;
+  this._isContentAttached = false;
+
+  let initializeUI = function (aEvent) {
+    if (aEvent) {
+      this._window.removeEventListener("load", initializeUI, false);
+    }
+
+    let viewRoot = this._root.parentNode.querySelector(".splitview-root");
+    this._view = new SplitView(viewRoot);
+
+    this._setupChrome();
+
+    // attach to the content window
+    this.contentWindow = aContentWindow;
+    this._contentWindowID = null;
+  }.bind(this);
+
+  if (this._document.readyState == "complete") {
+    initializeUI();
+  } else {
+    this._window.addEventListener("load", initializeUI, false);
+  }
+}
+
+StyleEditorChrome.prototype = {
+  /**
+   * Retrieve the content window attached to this chrome.
+   *
+   * @return DOMWindow
+   *         Content window or null if no content window is attached.
+   */
+  get contentWindow() this._contentWindow,
+
+  /**
+   * Retrieve the ID of the content window attached to this chrome.
+   *
+   * @return number
+   *         Window ID or -1 if no content window is attached.
+   */
+  get contentWindowID()
+  {
+    try {
+      return this._contentWindow.QueryInterface(Ci.nsIInterfaceRequestor).
+        getInterface(Ci.nsIDOMWindowUtils).currentInnerWindowID;
+    } catch (ex) {
+      return -1;
+    }
+  },
+
+  /**
+   * Set the content window attached to this chrome.
+   * Content attach or detach events/notifications are triggered after the
+   * operation is complete (possibly asynchronous if the content is not fully
+   * loaded yet).
+   *
+   * @param DOMWindow aContentWindow
+   * @see addChromeListener
+   */
+  set contentWindow(aContentWindow)
+  {
+    if (this._contentWindow == aContentWindow) {
+      return; // no change
+    }
+
+    this._contentWindow = aContentWindow;
+
+    if (!aContentWindow) {
+      this._disableChrome();
+      return;
+    }
+
+    let onContentUnload = function () {
+      aContentWindow.removeEventListener("unload", onContentUnload, false);
+      if (this.contentWindow == aContentWindow) {
+        this.contentWindow = null; // detach
+      }
+    }.bind(this);
+    aContentWindow.addEventListener("unload", onContentUnload, false);
+
+    if (aContentWindow.document.readyState == "complete") {
+      this._populateChrome();
+      return;
+    } else {
+      let onContentReady = function () {
+        aContentWindow.removeEventListener("load", onContentReady, false);
+        this._populateChrome();
+      }.bind(this);
+      aContentWindow.addEventListener("load", onContentReady, false);
+    }
+  },
+
+  /**
+   * Retrieve the content document attached to this chrome.
+   *
+   * @return DOMDocument
+   */
+  get contentDocument()
+  {
+    return this._contentWindow ? this._contentWindow.document : null;
+  },
+
+  /**
+    * Retrieve whether the content has been attached and StyleEditor instances
+    * exist for all of its stylesheets.
+    *
+    * @return boolean
+    * @see addChromeListener
+    */
+  get isContentAttached() this._isContentAttached,
+
+  /**
+   * Retrieve an array with the StyleEditor instance for each live style sheet,
+   * ordered by style sheet index.
+   *
+   * @return Array<StyleEditor>
+   */
+  get editors()
+  {
+    let editors = [];
+    this._editors.forEach(function (aEditor) {
+      if (aEditor.styleSheetIndex >= 0) {
+        editors[aEditor.styleSheetIndex] = aEditor;
+      }
+    });
+    return editors;
+  },
+
+  /**
+   * Add a listener for StyleEditorChrome events.
+   *
+   * The listener implements IStyleEditorChromeListener := {
+   *   onContentAttach:        Called when a content window has been attached.
+   *                           All editors are instantiated, though they might
+   *                           not be loaded yet.
+   *                           Arguments: (StyleEditorChrome aChrome)
+   *                           @see contentWindow
+   *                           @see StyleEditor.isLoaded
+   *                           @see StyleEditor.addActionListener
+   *
+   *   onContentDetach:        Called when the content window has been detached.
+   *                           Arguments: (StyleEditorChrome aChrome)
+   *                           @see contentWindow
+   *
+   *   onEditorAdded:          Called when a stylesheet (therefore a StyleEditor
+   *                           instance) has been added to the UI.
+   *                           Arguments (StyleEditorChrome aChrome,
+   *                                      StyleEditor aEditor)
+   * }
+   *
+   * All listener methods are optional.
+   *
+   * @param IStyleEditorChromeListener aListener
+   * @see removeChromeListener
+   */
+  addChromeListener: function SEC_addChromeListener(aListener)
+  {
+    this._listeners.push(aListener);
+  },
+
+  /**
+   * Remove a listener for Chrome events from the current list of listeners.
+   *
+   * @param IStyleEditorChromeListener aListener
+   * @see addChromeListener
+   */
+  removeChromeListener: function SEC_removeChromeListener(aListener)
+  {
+    let index = this._listeners.indexOf(aListener);
+    if (index != -1) {
+      this._listeners.splice(index, 1);
+    }
+  },
+
+  /**
+   * Trigger named handlers in StyleEditorChrome listeners.
+   *
+   * @param string aName
+   *        Name of the event to trigger.
+   * @param Array aArgs
+   *        Optional array of arguments to pass to the listener(s).
+   * @see addActionListener
+   */
+  _triggerChromeListeners: function SE__triggerChromeListeners(aName, aArgs)
+  {
+    // insert the origin Chrome instance as first argument
+    if (!aArgs) {
+      aArgs = [this];
+    } else {
+      aArgs.unshift(this);
+    }
+
+    // trigger all listeners that have this named handler
+    for (let i = 0; i < this._listeners.length; ++i) {
+      let listener = this._listeners[i];
+      let handler = listener["on" + aName];
+      if (handler) {
+        handler.apply(listener, aArgs);
+      }
+    }
+  },
+
+  /**
+   * Set up the chrome UI. Install event listeners and so on.
+   */
+  _setupChrome: function SEC__setupChrome()
+  {
+    // wire up UI elements
+    wire(this._view.rootElement, ".style-editor-newButton", function onNewButton() {
+      let editor = new StyleEditor(this.contentDocument);
+      this._editors.push(editor);
+      editor.addActionListener(this);
+      editor.load();
+    }.bind(this));
+
+    wire(this._view.rootElement, ".style-editor-importButton", function onImportButton() {
+      let editor = new StyleEditor(this.contentDocument);
+      this._editors.push(editor);
+      editor.addActionListener(this);
+      editor.importFromFile(this._mockImportFile || null, this._window);
+    }.bind(this));
+  },
+
+  /**
+   * Reset the chrome UI to an empty state.
+   */
+  _resetChrome: function SEC__resetChrome()
+  {
+    this._editors.forEach(function (aEditor) {
+      aEditor.removeActionListener(this);
+    }.bind(this));
+    this._editors = [];
+
+    this._view.removeAll();
+  },
+
+  /**
+   * Populate the chrome UI according to the content document.
+   *
+   * @see StyleEditor._setupShadowStyleSheet
+   */
+  _populateChrome: function SEC__populateChrome()
+  {
+    this._resetChrome();
+
+    this._document.title = _("chromeWindowTitle",
+          this.contentDocument.title || this.contentDocument.location.href);
+
+    let document = this.contentDocument;
+    for (let i = 0; i < document.styleSheets.length; ++i) {
+      let styleSheet = document.styleSheets[i];
+
+      let editor = new StyleEditor(document, styleSheet);
+      editor.addActionListener(this);
+      this._editors.push(editor);
+    }
+
+    this._triggerChromeListeners("ContentAttach");
+
+    // Queue editors loading so that ContentAttach is consistently triggered
+    // right after all editor instances are available (this.editors) but are
+    // NOT loaded/ready yet. This also helps responsivity during loading when
+    // there are many heavy stylesheets.
+    this._editors.forEach(function (aEditor) {
+      this._window.setTimeout(aEditor.load.bind(aEditor), 0);
+    }, this);
+  },
+
+  /**
+   * Disable all UI, effectively making editors read-only.
+   * This is automatically called when no content window is attached.
+   *
+   * @see contentWindow
+   */
+  _disableChrome: function SEC__disableChrome()
+  {
+    let matches = this._root.querySelectorAll("button,input,select");
+    for (let i = 0; i < matches.length; ++i) {
+      matches[i].setAttribute("disabled", "disabled");
+    }
+
+    this.editors.forEach(function onEnterReadOnlyMode(aEditor) {
+      aEditor.readOnly = true;
+    });
+
+    this._view.rootElement.setAttribute("disabled", "disabled");
+
+    this._triggerChromeListeners("ContentDetach");
+  },
+
+  /**
+   * Retrieve the summary element for a given editor.
+   *
+   * @param StyleEditor aEditor
+   * @return DOMElement
+   *         Item's summary element or null if not found.
+   * @see SplitView
+   */
+  getSummaryElementForEditor: function SEC_getSummaryElementForEditor(aEditor)
+  {
+    return this._view.getSummaryElementByOrdinal(aEditor.styleSheetIndex);
+  },
+
+  /**
+   * Update split view summary of given StyleEditor instance.
+   *
+   * @param StyleEditor aEditor
+   * @param DOMElement aSummary
+   *        Optional item's summary element to update. If none, item corresponding
+   *        to passed aEditor is used.
+   */
+  _updateSummaryForEditor: function SEC__updateSummaryForEditor(aEditor, aSummary)
+  {
+    let summary = aSummary || this.getSummaryElementForEditor(aEditor);
+    let ruleCount = aEditor.styleSheet.cssRules.length;
+
+    this._view.setItemClassName(summary, aEditor.flags);
+
+    text(summary, ".stylesheet-name", aEditor.getFriendlyName());
+    text(summary, ".stylesheet-title", aEditor.styleSheet.title || "");
+    text(summary, ".stylesheet-rule-count",
+      PluralForm.get(ruleCount, _("ruleCount.label")).replace("#1", ruleCount));
+    text(summary, ".stylesheet-error-message", aEditor.errorMessage);
+  },
+
+  /**
+   * IStyleEditorActionListener implementation
+   * @See StyleEditor.addActionListener.
+   */
+
+  /**
+   * Called when source has been loaded and editor is ready for some action.
+   *
+   * @param StyleEditor aEditor
+   */
+  onLoad: function SEAL_onLoad(aEditor)
+  {
+    let item = this._view.appendTemplatedItem(STYLE_EDITOR_TEMPLATE, {
+      data: {
+        editor: aEditor
+      },
+      disableAnimations: this._alwaysDisableAnimations,
+      ordinal: aEditor.styleSheetIndex,
+      onCreate: function ASV_onItemCreate(aSummary, aDetails, aData) {
+        let editor = aData.editor;
+
+        wire(aSummary, ".stylesheet-enabled", function onToggleEnabled(aEvent) {
+          aEvent.stopPropagation();
+          aEvent.target.blur();
+
+          editor.enableStyleSheet(editor.styleSheet.disabled);
+        });
+
+        wire(aSummary, ".stylesheet-saveButton", function onSaveButton(aEvent) {
+          aEvent.stopPropagation();
+          aEvent.target.blur();
+
+          editor.saveToFile(editor.savedFile);
+        });
+
+        this._updateSummaryForEditor(editor, aSummary);
+
+        // autofocus first or new stylesheet
+        if (editor.styleSheetIndex == 0 ||
+            editor.hasFlag(StyleEditorFlags.NEW)) {
+          this._view.activeSummary = aSummary;
+        }
+
+        aSummary.addEventListener("focus", function onSummaryFocus(aEvent) {
+          if (aEvent.target == aSummary) {
+            // autofocus the stylesheet name
+            aSummary.querySelector(".stylesheet-name").focus();
+          }
+        }, false);
+
+        this._triggerChromeListeners("EditorAdded", [editor]);
+      }.bind(this),
+      onShow: function ASV_onItemShow(aSummary, aDetails, aData) {
+        let editor = aData.editor;
+        if (!editor.inputElement) {
+          // attach editor to input element the first time it is shown
+          editor.inputElement = aDetails.querySelector(".stylesheet-editor-input");
+        }
+        editor.inputElement.focus();
+      }
+    });
+  },
+
+  /**
+   * Called when an editor flag changed.
+   *
+   * @param StyleEditor aEditor
+   * @param string aFlagName
+   * @see StyleEditor.flags
+   */
+  onFlagChange: function SEAL_onFlagChange(aEditor, aFlagName)
+  {
+    this._updateSummaryForEditor(aEditor);
+  },
+
+  /**
+   * Called when  when changes have been committed/applied to the live DOM
+   * stylesheet.
+   *
+   * @param StyleEditor aEditor
+   */
+  onCommit: function SEAL_onCommit(aEditor)
+  {
+    this._updateSummaryForEditor(aEditor);
+  },
+};
diff --git a/browser/devtools/styleeditor/StyleEditorUtil.jsm b/browser/devtools/styleeditor/StyleEditorUtil.jsm
new file mode 100644
index 000000000000..ead38aa11e96
--- /dev/null
+++ b/browser/devtools/styleeditor/StyleEditorUtil.jsm
@@ -0,0 +1,196 @@
+/* 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 Style Editor 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):
+ *   Cedric Vivier <cedricv@neonux.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 ***** */
+
+"use strict";
+
+const EXPORTED_SYMBOLS = [
+  "_",
+  "assert",
+  "attr",
+  "getCurrentBrowserTabContentWindow",
+  "log",
+  "text",
+  "wire"
+];
+
+const Cc = Components.classes;
+const Ci = Components.interfaces;
+const Cu = Components.utils;
+
+Cu.import("resource://gre/modules/Services.jsm");
+
+const PROPERTIES_URL = "chrome://browser/locale/devtools/styleeditor.properties";
+
+const console = Services.console;
+const gStringBundle = Services.strings.createBundle(PROPERTIES_URL);
+
+
+/**
+ * Returns a localized string with the given key name from the string bundle.
+ *
+ * @param aName
+ * @param ...rest
+ *        Optional arguments to format in the string.
+ * @return string
+ */
+function _(aName)
+{
+
+  if (arguments.length == 1) {
+    return gStringBundle.GetStringFromName(aName);
+  }
+  let rest = Array.prototype.slice.call(arguments, 1);
+  return gStringBundle.formatStringFromName(aName, rest, rest.length);
+}
+
+/**
+ * Assert an expression is true or throw if false.
+ *
+ * @param aExpression
+ * @param aMessage
+ *        Optional message.
+ * @return aExpression
+ */
+function assert(aExpression, aMessage)
+{
+  if (!!!(aExpression)) {
+    let msg = aMessage ? "ASSERTION FAILURE:" + aMessage : "ASSERTION FAILURE";
+    log(msg);
+    throw new Error(msg);
+  }
+  return aExpression;
+}
+
+/**
+ * Retrieve or set the text content of an element.
+ *
+ * @param DOMElement aRoot
+ *        The element to use for querySelector.
+ * @param string aSelector
+ *        Selector string for the element to get/set the text content.
+ * @param string aText
+ *        Optional text to set.
+ * @return string
+ *         Text content of matching element or null if there were no element
+ *         matching aSelector.
+ */
+function text(aRoot, aSelector, aText)
+{
+  let element = aRoot.querySelector(aSelector);
+  if (!element) {
+    return null;
+  }
+
+  if (aText === undefined) {
+    return element.textContent;
+  }
+  element.textContent = aText;
+  return aText;
+}
+
+/**
+ * Iterates _own_ properties of an object.
+ *
+ * @param aObject
+ *        The object to iterate.
+ * @param function aCallback(aKey, aValue)
+ */
+function forEach(aObject, aCallback)
+{
+  for (let key in aObject) {
+    if (aObject.hasOwnProperty(key)) {
+      aCallback(key, aObject[key]);
+    }
+  }
+}
+
+/**
+ * Log a message to the console.
+ * 
+ * @param ...rest
+ *        One or multiple arguments to log.
+ *        If multiple arguments are given, they will be joined by " " in the log.
+ */
+function log()
+{
+  console.logStringMessage(Array.prototype.slice.call(arguments).join(" "));
+}
+
+/**
+ * Wire up element(s) matching selector with attributes, event listeners, etc.
+ *
+ * @param DOMElement aRoot
+ *        The element to use for querySelectorAll.
+ *        Can be null if aSelector is a DOMElement.
+ * @param string|DOMElement aSelectorOrElement
+ *        Selector string or DOMElement for the element(s) to wire up.
+ * @param object aDescriptor
+ *        An object describing how to wire matching selector, supported properties
+ *        are "events", "attributes" and "userData" taking objects themselves.
+ *        Each key of properties above represents the name of the event, attribute
+ *        or userData, with the value being a function used as an event handler,
+ *        string to use as attribute value, or object to use as named userData
+ *        respectively.
+ *        If aDescriptor is a function, the argument is equivalent to :
+ *        {events: {'click': aDescriptor}}
+ */
+function wire(aRoot, aSelectorOrElement, aDescriptor)
+{
+  let matches;
+  if (typeof(aSelectorOrElement) == "string") { // selector
+    matches = aRoot.querySelectorAll(aSelectorOrElement);
+    if (!matches.length) {
+      return;
+    }
+  } else {
+    matches = [aSelectorOrElement]; // element
+  }
+
+  if (typeof(aDescriptor) == "function") {
+    aDescriptor = {events: {click: aDescriptor}};
+  }
+
+  for (let i = 0; i < matches.length; ++i) {
+    let element = matches[i];
+    forEach(aDescriptor.events, function (aName, aHandler) {
+      element.addEventListener(aName, aHandler, false);
+    });
+    forEach(aDescriptor.attributes, element.setAttribute);
+    forEach(aDescriptor.userData, element.setUserData);
+  }
+}
+
diff --git a/browser/devtools/styleeditor/splitview.css b/browser/devtools/styleeditor/splitview.css
new file mode 100644
index 000000000000..f1745772fd9b
--- /dev/null
+++ b/browser/devtools/styleeditor/splitview.css
@@ -0,0 +1,96 @@
+/* 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 Style Editor 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):
+ *   Cedric Vivier <cedricv@neonux.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 ***** */
+
+box,
+.splitview-nav {
+  -moz-box-flex: 1;
+  -moz-box-orient: vertical;
+}
+
+.splitview-main {
+  -moz-box-flex: 0;
+}
+
+.splitview-controller {
+  min-height: 8em;
+  max-height: 14em;
+}
+
+.splitview-nav {
+  display: -moz-box;
+}
+
+/* only the active details pane is shown */
+.splitview-side-details > * {
+  display: none;
+}
+.splitview-side-details > .splitview-active {
+  display: -moz-box;
+}
+
+/* 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 {
+    display: none;
+  }
+  .splitview-details.splitview-active {
+    display: -moz-box;
+  }
+}
+
+/* filtered items are hidden */
+ol.splitview-nav > li.splitview-filtered {
+  display: none;
+}
+
+/* "empty list" and "all filtered" placeholders are hidden */
+.splitview-nav:empty,
+.splitview-nav.splitview-all-filtered,
+.splitview-nav + .splitview-nav.placeholder {
+  display: none;
+}
+.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
+.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
+  display: -moz-box;
+}
diff --git a/browser/devtools/styleeditor/styleeditor.css b/browser/devtools/styleeditor/styleeditor.css
new file mode 100644
index 000000000000..45e2f01f9d22
--- /dev/null
+++ b/browser/devtools/styleeditor/styleeditor.css
@@ -0,0 +1,43 @@
+/* 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 Style Editor 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):
+ *   Cedric Vivier <cedricv@neonux.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 ***** */
+
+.splitview-nav > li hgroup > .stylesheet-error-message {
+  display: none;
+}
+.splitview-nav > li.error hgroup > .stylesheet-error-message {
+  display: block;
+}
diff --git a/browser/devtools/styleeditor/styleeditor.xul b/browser/devtools/styleeditor/styleeditor.xul
new file mode 100644
index 000000000000..9c0d01b55742
--- /dev/null
+++ b/browser/devtools/styleeditor/styleeditor.xul
@@ -0,0 +1,130 @@
+<?xml version="1.0"?>
+<!-- ***** 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 Style Editor code.
+   -
+   - The Initial Developer of the Original Code is The Mozilla Foundation.
+   - Portions created by the Initial Developer are Copyright (C) 2011
+   - the Initial Developer. All Rights Reserved.
+   -
+   - Contributor(s):
+   -   Cedric Vivier <cedricv@neonux.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 ***** -->
+<!DOCTYPE window [
+<!ENTITY % styleEditorDTD SYSTEM "chrome://browser/locale/devtools/styleeditor.dtd" >
+ %styleEditorDTD;
+]>
+<?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/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"?>
+<xul:window xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
+        xmlns="http://www.w3.org/1999/xhtml"
+        id="style-editor-chrome-window"
+        title="&window.title;"
+        windowtype="Tools:StyleEditor"
+        width="800" height="280"
+        persist="screenX screenY width height sizemode">
+<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-main">
+      <xul:box class="toolbar">
+        <xul:button class="style-editor-newButton"
+                    accesskey="&newButton.accesskey;"
+                    tooltiptext="&newButton.tooltip;"
+                    label="&newButton.label;"></xul:button>
+        <xul:button class="style-editor-importButton"
+                    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"
+                     tooltiptext="&searchInput.tooltip;"
+                     placeholder="&searchInput.placeholder;"/>
+      </xul:box>
+    </xul:box>
+    <xul:box class="splitview-nav-container">
+      <ol class="splitview-nav" tabindex="0"></ol>
+      <div class="splitview-nav placeholder empty">
+        <p><strong>&noStyleSheet.label;</strong></p>
+        <p>&noStyleSheet-tip-start.label;
+          <a href="#"
+             class="style-editor-newButton">&noStyleSheet-tip-action.label;</a>
+          &noStyleSheet-tip-end.label;</p>
+      </div>
+      <div class="splitview-nav placeholder all-filtered">
+        <p><strong>&searchNoResults.label;</strong></p>
+        <p>
+          <a href="#"
+             class="splitview-filter-clearButton">&searchClearButton.label;</a>
+        </p>
+      </div>
+    </xul:box> <!-- .splitview-nav-container -->
+  </xul:box>   <!-- .splitview-controller -->
+
+  <div id="splitview-templates" hidden="true">
+    <li id="splitview-tpl-summary-stylesheet" tabindex="0">
+      <a class="stylesheet-enabled" tabindex="0" href="#"
+         title="&visibilityToggle.tooltip;"
+         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">
+          <h3 class="stylesheet-rule-count"></h3>
+        </hgroup>
+        <hgroup class="stylesheet-actions">
+          <h1><a class="stylesheet-saveButton" href="#"
+                 title="&saveButton.tooltip;"
+                 accesskey="&saveButton.accesskey;">&saveButton.label;</a></h1>
+        </hgroup>
+      </div>
+    </li>
+
+    <xul:box id="splitview-tpl-details-stylesheet" class="splitview-details">
+      <div class="stylesheet-editor-input textbox" tabindex="0"
+           data-placeholder="&editorTextbox.placeholder;"></div>
+    </xul:box>
+  </div> <!-- #splitview-templates -->
+</xul:box>   <!-- .splitview-root -->
+
+<xul:script type="application/javascript"><![CDATA[
+Components.utils.import("resource:///modules/devtools/StyleEditorChrome.jsm");
+let chromeRoot = document.getElementById("style-editor-chrome");
+let contentWindow = window.arguments[0];
+let chrome = new StyleEditorChrome(chromeRoot, contentWindow);
+window.styleEditorChrome = chrome;
+]]></xul:script>
+</xul:window>
diff --git a/browser/locales/en-US/chrome/browser/browser.dtd b/browser/locales/en-US/chrome/browser/browser.dtd
index e21494d37e5b..ec577cbb6f99 100644
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -220,6 +220,13 @@ can reach it easily. -->
 <!ENTITY inspectStyleButton.label     "Style">
 <!ENTITY inspectStyleButton.accesskey "S">
 
+<!-- LOCALIZATION NOTE (styleeditor.label): This menu item label appears
+  -  in the Tools menu. -->
+<!ENTITY styleeditor.label            "Style Editor">
+<!ENTITY styleeditor.accesskey        "y">
+<!ENTITY styleeditor.keycode          "VK_F7">
+<!ENTITY styleeditor.keytext          "F7">
+
 <!ENTITY getMoreDevtoolsCmd.label        "Get More Tools">
 <!ENTITY getMoreDevtoolsCmd.accesskey    "M">
 
diff --git a/browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd b/browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd
new file mode 100644
index 000000000000..2fcdfbec8883
--- /dev/null
+++ b/browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd
@@ -0,0 +1,62 @@
+<!-- LOCALIZATION NOTE : FILE This file contains the Style Editor window strings -->
+<!-- LOCALIZATION NOTE : FILE Do not translate commandkeys -->
+<!-- LOCALIZATION NOTE : The correct localization of this file might be to keep
+     it in English, or another language commonly spoken among web developers.
+     You want to make that choice consistent across the developer tools.
+     A good criteria is the language in which you'd find the best documentation
+     on web development on the web. -->
+
+<!-- LOCALIZATION NOTE (window.title): This is the default title for Style Editor
+     main window. NB: the property chromeWindowTitle in styleeditor.properties
+     is used to dynamically update the Style Editor window title with the title
+     of the web page it is editing. -->
+<!ENTITY window.title               "Style Editor">
+
+<!ENTITY newButton.label            "New">
+<!ENTITY newButton.tooltip          "Create and append a new style sheet to the document">
+<!ENTITY newButton.accesskey        "N">
+<!ENTITY newButton.commandkey       "n">
+
+<!ENTITY importButton.label         "Import…">
+<!ENTITY importButton.tooltip       "Import and append an existing style sheet to the document">
+<!ENTITY importButton.accesskey     "I">
+<!ENTITY importButton.commandkey    "i">
+
+<!ENTITY searchInput.tooltip        "Filter style sheets by name">
+<!ENTITY searchInput.placeholder    "Find style sheet">
+
+<!-- LOCALIZATION NOTE  (searchNoResults): This is shown when searching a term
+     that is not found in any stylesheet or stylesheet name. -->
+<!ENTITY searchNoResults.label      "No matching style sheet has been found.">
+
+<!-- LOCALIZATION NOTE  (searchClearButton): This button clears the search input
+     box and is visible only when a search term has been typed. -->
+<!ENTITY searchClearButton.label    "Clear">
+
+<!ENTITY visibilityToggle.tooltip   "Toggle style sheet visibility">
+<!ENTITY visibilityToggle.accesskey "V">
+
+<!ENTITY saveButton.label           "Save">
+<!ENTITY saveButton.tooltip         "Save this style sheet to a file">
+<!ENTITY saveButton.accesskey       "S">
+<!ENTITY saveButton.commandkey      "s">
+
+<!-- LOCALICATION NOTE  (scoped.label): This is shown in a stylesheets list item
+     when the stylesheet uses the scoped attribute on the <style> element. -->
+<!ENTITY scoped.label               "Scoped.">
+
+<!ENTITY editorTextbox.placeholder  "Type CSS here.">
+
+<!-- LOCALICATION NOTE  (noStyleSheet.label): This is shown when a page has no
+     stylesheet. -->
+<!ENTITY noStyleSheet.label         "This page has no style sheet.">
+
+<!-- LOCALICATION NOTE  (noStyleSheet-tip-start.label): This is the start of a
+     tip sentence shown when there is no stylesheet. It suggests to create a new
+     stylesheet and provides an action link to do so. -->
+<!ENTITY noStyleSheet-tip-start.label  "Perhaps you'd like to ">
+<!-- LOCALICATION NOTE  (noStyleSheet-tip-action.label): This is text for the
+     link that triggers creation of a new stylesheet. -->
+<!ENTITY noStyleSheet-tip-action.label "append a new style sheet">
+<!-- LOCALICATION NOTE  (noStyleSheet-tip-end.label): End of the tip sentence -->
+<!ENTITY noStyleSheet-tip-end.label    "?">
diff --git a/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties b/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
new file mode 100644
index 000000000000..e25997807365
--- /dev/null
+++ b/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
@@ -0,0 +1,53 @@
+# LOCALIZATION NOTE These strings are used inside the Style Editor.
+# LOCALIZATION NOTE The correct localization of this file might be to keep it
+# in English, or another language commonly spoken among web developers.
+# You want to make that choice consistent across the developer tools.
+# A good criteria is the language in which you'd find the best documentation
+# on web development on the web.
+
+# LOCALIZATION NOTE  (chromeWindowTitle): This is the title of the Style Editor
+# 'chrome' window. That is, the main window with the stylesheets list.
+# The argument is either the content document's title or its href if no title
+# is available.
+chromeWindowTitle=Style Editor [%S]
+
+# LOCALIZATION NOTE  (inlineStyleSheet): This is the name used for an style sheet
+# that is declared inline in the <style> element. Shown in the stylesheets list.
+# the argument is the index (order) of the containing <style> element in the
+# document.
+inlineStyleSheet=<inline style sheet #%S>
+
+# LOCALIZATION NOTE  (newStyleSheet): This is the default name for a new
+# user-created style sheet.
+newStyleSheet=New style sheet #%S
+
+# LOCALIZATION NOTE  (ruleCount.label): Semi-colon list of plural forms.
+# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
+# This is shown in the style sheets list.
+# #1 rule.
+# example: 111 rules.
+ruleCount.label=#1 rule.;#1 rules.
+
+# LOCALIZATION NOTE  (error-load.label): This is shown when loading fails.
+error-load=Style sheet could not be loaded.
+
+# LOCALIZATION NOTE  (error-save.label): This is shown when saving fails.
+error-save=Style sheet could not be saved.
+
+# LOCALIZATION NOTE  (importStyleSheet.title): This is the file picker title,
+# when you import a style sheet into the Style Editor.
+importStyleSheet.title=Import style sheet
+
+# LOCALIZATION NOTE  (importStyleSheet.title): This is the *.css filter title
+importStyleSheet.filter=CSS files
+
+# LOCALIZATION NOTE  (saveStyleSheet.title): This is the file picker title,
+# when you save a style sheet from the Style Editor.
+saveStyleSheet.title=Save style sheet
+
+# LOCALIZATION NOTE  (saveStyleSheet.title): This is the *.css filter title
+saveStyleSheet.filter=CSS files
+
+# LOCALIZATION NOTE  (saveStyleSheet.commandkey): This the key to use in
+# conjunction with accel (Command on Mac or Ctrl on other platforms) to Save
+saveStyleSheet.commandkey=S
diff --git a/browser/locales/jar.mn b/browser/locales/jar.mn
index c334e3f04ac8..a3e78af9dcc3 100644
--- a/browser/locales/jar.mn
+++ b/browser/locales/jar.mn
@@ -21,6 +21,8 @@
     locale/browser/devtools/inspector.properties      (%chrome/browser/devtools/inspector.properties)
     locale/browser/devtools/scratchpad.properties     (%chrome/browser/devtools/scratchpad.properties)
     locale/browser/devtools/scratchpad.dtd            (%chrome/browser/devtools/scratchpad.dtd)
+    locale/browser/devtools/styleeditor.properties    (%chrome/browser/devtools/styleeditor.properties)
+    locale/browser/devtools/styleeditor.dtd           (%chrome/browser/devtools/styleeditor.dtd)
     locale/browser/devtools/styleinspector.properties (%chrome/browser/devtools/styleinspector.properties)
     locale/browser/devtools/styleinspector.dtd        (%chrome/browser/devtools/styleinspector.dtd)
     locale/browser/devtools/webConsole.dtd            (%chrome/browser/devtools/webConsole.dtd)
diff --git a/browser/themes/gnomestripe/browser/devtools/eye-toggle.png b/browser/themes/gnomestripe/browser/devtools/eye-toggle.png
new file mode 100644
index 0000000000000000000000000000000000000000..4ad3c219c6493fdfbe3152b206a9052288dee505
GIT binary patch
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

literal 0
HcmV?d00001

diff --git a/browser/themes/gnomestripe/browser/devtools/splitview.css b/browser/themes/gnomestripe/browser/devtools/splitview.css
new file mode 100644
index 000000000000..2ff733e2c9e2
--- /dev/null
+++ b/browser/themes/gnomestripe/browser/devtools/splitview.css
@@ -0,0 +1,137 @@
+/* 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 Style Editor 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):
+ *   Cedric Vivier <cedricv@neonux.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 ***** */
+
+.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;
+}
+
+ol.splitview-nav {
+  overflow-x: hidden;
+  overflow-y: auto;
+  list-style-image: none;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+ol.splitview-nav > li {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  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;
+  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;
+}
+
+a {
+  color: -moz-hyperlinktext;
+  text-decoration: underline;
+}
+
+button {
+  margin: 0;
+}
+
+/* limited width mode (hide search unless it has focus [search-on-type]) */
+@media (max-width: 250px) {
+  .splitview-filter {
+    max-width: none;
+    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/browser/devtools/styleeditor.css b/browser/themes/gnomestripe/browser/devtools/styleeditor.css
new file mode 100644
index 000000000000..4de0201079be
--- /dev/null
+++ b/browser/themes/gnomestripe/browser/devtools/styleeditor.css
@@ -0,0 +1,177 @@
+/* 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 Style Editor 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):
+ *   Cedric Vivier <cedricv@neonux.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 ***** */
+
+ol.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) {
+  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;
+  background-repeat: no-repeat;
+}
+.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
+  float: right;
+}
+.splitview-nav > li.disabled > .stylesheet-enabled {
+  background-image: none;
+}
+.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 {
+  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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+h1,
+h2,
+h3 {
+  font-size: inherit;
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+}
diff --git a/browser/themes/gnomestripe/browser/jar.mn b/browser/themes/gnomestripe/browser/jar.mn
index d37625c3d17d..1d042b51cf6d 100644
--- a/browser/themes/gnomestripe/browser/jar.mn
+++ b/browser/themes/gnomestripe/browser/jar.mn
@@ -111,7 +111,9 @@ browser.jar:
   skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
   skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
   skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
-
+  skin/classic/browser/devtools/splitview.css         (devtools/splitview.css)
+  skin/classic/browser/devtools/styleeditor.css       (devtools/styleeditor.css)
+  skin/classic/browser/devtools/eye-toggle.png        (devtools/eye-toggle.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/devtools/eye-toggle.png b/browser/themes/pinstripe/browser/devtools/eye-toggle.png
new file mode 100644
index 0000000000000000000000000000000000000000..4ad3c219c6493fdfbe3152b206a9052288dee505
GIT binary patch
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

literal 0
HcmV?d00001

diff --git a/browser/themes/pinstripe/browser/devtools/splitview.css b/browser/themes/pinstripe/browser/devtools/splitview.css
new file mode 100644
index 000000000000..2ff733e2c9e2
--- /dev/null
+++ b/browser/themes/pinstripe/browser/devtools/splitview.css
@@ -0,0 +1,137 @@
+/* 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 Style Editor 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):
+ *   Cedric Vivier <cedricv@neonux.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 ***** */
+
+.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;
+}
+
+ol.splitview-nav {
+  overflow-x: hidden;
+  overflow-y: auto;
+  list-style-image: none;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+ol.splitview-nav > li {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  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;
+  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;
+}
+
+a {
+  color: -moz-hyperlinktext;
+  text-decoration: underline;
+}
+
+button {
+  margin: 0;
+}
+
+/* limited width mode (hide search unless it has focus [search-on-type]) */
+@media (max-width: 250px) {
+  .splitview-filter {
+    max-width: none;
+    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/browser/devtools/styleeditor.css b/browser/themes/pinstripe/browser/devtools/styleeditor.css
new file mode 100644
index 000000000000..4de0201079be
--- /dev/null
+++ b/browser/themes/pinstripe/browser/devtools/styleeditor.css
@@ -0,0 +1,177 @@
+/* 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 Style Editor 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):
+ *   Cedric Vivier <cedricv@neonux.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 ***** */
+
+ol.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) {
+  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;
+  background-repeat: no-repeat;
+}
+.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
+  float: right;
+}
+.splitview-nav > li.disabled > .stylesheet-enabled {
+  background-image: none;
+}
+.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 {
+  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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+h1,
+h2,
+h3 {
+  font-size: inherit;
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+}
diff --git a/browser/themes/pinstripe/browser/jar.mn b/browser/themes/pinstripe/browser/jar.mn
index 0264b5c2a504..0ce510a50e1a 100644
--- a/browser/themes/pinstripe/browser/jar.mn
+++ b/browser/themes/pinstripe/browser/jar.mn
@@ -151,7 +151,9 @@ browser.jar:
   skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
   skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
   skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
-
+  skin/classic/browser/devtools/splitview.css               (devtools/splitview.css)
+  skin/classic/browser/devtools/styleeditor.css             (devtools/styleeditor.css)
+  skin/classic/browser/devtools/eye-toggle.png              (devtools/eye-toggle.png)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-throbber.png
   skin/classic/browser/sync-16.png
diff --git a/browser/themes/winstripe/browser/devtools/eye-toggle.png b/browser/themes/winstripe/browser/devtools/eye-toggle.png
new file mode 100644
index 0000000000000000000000000000000000000000..4ad3c219c6493fdfbe3152b206a9052288dee505
GIT binary patch
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

literal 0
HcmV?d00001

diff --git a/browser/themes/winstripe/browser/devtools/splitview.css b/browser/themes/winstripe/browser/devtools/splitview.css
new file mode 100644
index 000000000000..2ff733e2c9e2
--- /dev/null
+++ b/browser/themes/winstripe/browser/devtools/splitview.css
@@ -0,0 +1,137 @@
+/* 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 Style Editor 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):
+ *   Cedric Vivier <cedricv@neonux.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 ***** */
+
+.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;
+}
+
+ol.splitview-nav {
+  overflow-x: hidden;
+  overflow-y: auto;
+  list-style-image: none;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+ol.splitview-nav > li {
+  display: -moz-box;
+  -moz-box-orient: vertical;
+  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;
+  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;
+}
+
+a {
+  color: -moz-hyperlinktext;
+  text-decoration: underline;
+}
+
+button {
+  margin: 0;
+}
+
+/* limited width mode (hide search unless it has focus [search-on-type]) */
+@media (max-width: 250px) {
+  .splitview-filter {
+    max-width: none;
+    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/browser/devtools/styleeditor.css b/browser/themes/winstripe/browser/devtools/styleeditor.css
new file mode 100644
index 000000000000..4de0201079be
--- /dev/null
+++ b/browser/themes/winstripe/browser/devtools/styleeditor.css
@@ -0,0 +1,177 @@
+/* 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 Style Editor 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):
+ *   Cedric Vivier <cedricv@neonux.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 ***** */
+
+ol.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) {
+  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;
+  background-repeat: no-repeat;
+}
+.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
+  float: right;
+}
+.splitview-nav > li.disabled > .stylesheet-enabled {
+  background-image: none;
+}
+.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 {
+  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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+h1,
+h2,
+h3 {
+  font-size: inherit;
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+}
diff --git a/browser/themes/winstripe/browser/jar.mn b/browser/themes/winstripe/browser/jar.mn
index d3358ea5fbc9..92ab8fb19084 100644
--- a/browser/themes/winstripe/browser/jar.mn
+++ b/browser/themes/winstripe/browser/jar.mn
@@ -135,7 +135,9 @@ browser.jar:
         skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
         skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
         skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
-
+        skin/classic/browser/devtools/splitview.css                 (devtools/splitview.css)
+        skin/classic/browser/devtools/styleeditor.css               (devtools/styleeditor.css)
+        skin/classic/browser/devtools/eye-toggle.png                (devtools/eye-toggle.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-throbber.png
         skin/classic/browser/sync-16.png
@@ -287,7 +289,9 @@ browser.jar:
         skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
         skin/classic/aero/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
         skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
-
+        skin/classic/aero/browser/devtools/splitview.css             (devtools/splitview.css)
+        skin/classic/aero/browser/devtools/styleeditor.css           (devtools/styleeditor.css)
+        skin/classic/aero/browser/devtools/eye-toggle.png            (devtools/eye-toggle.png)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/sync-throbber.png
         skin/classic/aero/browser/sync-16.png

From cd0aa2e3d382cb9c608a4055737b06a8e7b3d23d Mon Sep 17 00:00:00 2001
From: Cedric Vivier <cedricv@neonux.com>
Date: Wed, 26 Oct 2011 17:52:17 +0800
Subject: [PATCH 02/21] Bug 583041 - Style Editor integration, part 2/2 -
 tests; r=rcampbell

---
 browser/devtools/styleeditor/test/Makefile.in |  72 ++++++++
 .../test/browser_styleeditor_enabled.js       | 101 ++++++++++++
 .../test/browser_styleeditor_import.js        |  87 ++++++++++
 .../test/browser_styleeditor_init.js          | 126 ++++++++++++++
 .../test/browser_styleeditor_loading.js       |  39 +++++
 .../test/browser_styleeditor_new.js           | 117 +++++++++++++
 .../test/browser_styleeditor_pretty.js        |  56 +++++++
 .../test/browser_styleeditor_readonly.js      |  74 +++++++++
 .../test/browser_styleeditor_reopen.js        | 155 ++++++++++++++++++
 .../test/browser_styleeditor_sv_filter.js     | 101 ++++++++++++
 .../test/browser_styleeditor_sv_keynav.js     |  80 +++++++++
 .../test/browser_styleeditor_sv_resize.js     |  63 +++++++
 browser/devtools/styleeditor/test/four.html   |  25 +++
 browser/devtools/styleeditor/test/head.js     |  44 +++++
 .../devtools/styleeditor/test/media-small.css |   5 +
 browser/devtools/styleeditor/test/media.html  |  11 ++
 .../devtools/styleeditor/test/minified.html   |  17 ++
 browser/devtools/styleeditor/test/simple.css  |   8 +
 .../devtools/styleeditor/test/simple.css.gz   | Bin 0 -> 166 bytes
 .../styleeditor/test/simple.css.gz^headers^   |   4 +
 .../devtools/styleeditor/test/simple.gz.html  |  23 +++
 browser/devtools/styleeditor/test/simple.html |  23 +++
 22 files changed, 1231 insertions(+)
 create mode 100644 browser/devtools/styleeditor/test/Makefile.in
 create mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_enabled.js
 create mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_import.js
 create mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_init.js
 create mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_loading.js
 create mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_new.js
 create mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_pretty.js
 create mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_readonly.js
 create mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_reopen.js
 create mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_sv_filter.js
 create mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_sv_keynav.js
 create mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_sv_resize.js
 create mode 100644 browser/devtools/styleeditor/test/four.html
 create mode 100644 browser/devtools/styleeditor/test/head.js
 create mode 100644 browser/devtools/styleeditor/test/media-small.css
 create mode 100644 browser/devtools/styleeditor/test/media.html
 create mode 100644 browser/devtools/styleeditor/test/minified.html
 create mode 100644 browser/devtools/styleeditor/test/simple.css
 create mode 100644 browser/devtools/styleeditor/test/simple.css.gz
 create mode 100644 browser/devtools/styleeditor/test/simple.css.gz^headers^
 create mode 100644 browser/devtools/styleeditor/test/simple.gz.html
 create mode 100644 browser/devtools/styleeditor/test/simple.html

diff --git a/browser/devtools/styleeditor/test/Makefile.in b/browser/devtools/styleeditor/test/Makefile.in
new file mode 100644
index 000000000000..28db3bfd0279
--- /dev/null
+++ b/browser/devtools/styleeditor/test/Makefile.in
@@ -0,0 +1,72 @@
+# ***** 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 Style Editor code.
+#
+# The Initial Developer of the Original Code is Mozilla Foundation.
+#
+# Portions created by the Initial Developer are Copyright (C) 2007
+# the Initial Developer. All Rights Reserved.
+#
+# Contributor(s):
+#   Cedric Vivier <cedricv@neonux.com> (original author)
+#
+# Alternatively, the contents of this file may be used under the terms of
+# either of 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 *****
+
+DEPTH		= ../../../..
+topsrcdir	= @top_srcdir@
+srcdir		= @srcdir@
+VPATH		= @srcdir@
+relativesrcdir  = browser/devtools/styleeditor/test
+
+include $(DEPTH)/config/autoconf.mk
+include $(topsrcdir)/config/rules.mk
+
+_BROWSER_TEST_FILES = \
+                 browser_styleeditor_enabled.js \
+                 browser_styleeditor_import.js \
+                 browser_styleeditor_init.js \
+                 browser_styleeditor_loading.js \
+                 browser_styleeditor_new.js \
+                 browser_styleeditor_pretty.js \
+                 browser_styleeditor_readonly.js \
+                 browser_styleeditor_reopen.js \
+                 browser_styleeditor_sv_filter.js \
+                 browser_styleeditor_sv_keynav.js \
+                 browser_styleeditor_sv_resize.js \
+                 four.html \
+                 head.js \
+                 media.html \
+                 media-small.css \
+                 minified.html \
+                 simple.css \
+                 simple.css.gz \
+                 simple.css.gz^headers^ \
+                 simple.gz.html \
+                 simple.html \
+                 $(NULL)
+
+libs::	$(_BROWSER_TEST_FILES)
+	$(INSTALL) $(foreach f,$^,"$f") $(DEPTH)/_tests/testing/mochitest/browser/$(relativesrcdir)
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_enabled.js b/browser/devtools/styleeditor/test/browser_styleeditor_enabled.js
new file mode 100644
index 000000000000..0a77e4bc4e9d
--- /dev/null
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_enabled.js
@@ -0,0 +1,101 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// https rather than chrome to improve coverage
+const TESTCASE_URI = TEST_BASE_HTTPS + "simple.html";
+
+
+function test()
+{
+  waitForExplicitFinish();
+
+  let count = 0;
+  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
+    aChrome.addChromeListener({
+      onEditorAdded: function (aChrome, aEditor) {
+        count++;
+        if (count == 2) {
+          // we test against first stylesheet after all are ready
+          let editor = aChrome.editors[0];
+          if (!editor.sourceEditor) {
+            editor.addActionListener({
+              onAttach: function (aEditor) {
+                run(aChrome, aEditor);
+              }
+            });
+          } else {
+            run(aChrome, editor);
+          }
+        }
+      }
+    });
+  });
+
+  content.location = TESTCASE_URI;
+}
+
+function run(aChrome, aEditor)
+{
+  testEnabledToggle(aChrome, aEditor);
+}
+
+function testEnabledToggle(aChrome, aEditor)
+{
+  is(aEditor, aChrome.editors[0],
+     "stylesheet with index 0 is the first stylesheet listed in the UI");
+
+  let firstStyleSheetEditor = aEditor;
+  let firstStyleSheetUI = aChrome.getSummaryElementForEditor(aEditor);
+  let enabledToggle = firstStyleSheetUI.querySelector(".stylesheet-enabled");
+
+  is(firstStyleSheetEditor.contentDocument.styleSheets[0].disabled, false,
+     "first stylesheet is initially enabled");
+  is(firstStyleSheetEditor.hasFlag("disabled"), false,
+     "first stylesheet is initially enabled, it does not have DISABLED flag");
+  is(firstStyleSheetUI.classList.contains("disabled"), false,
+     "first stylesheet is initially enabled, UI does not have DISABLED class");
+
+  let disabledToggleCount = 0;
+  firstStyleSheetEditor.addActionListener({
+    onFlagChange: function (aEditor, aFlagName) {
+      if (aFlagName != "disabled") {
+        return;
+      }
+      disabledToggleCount++;
+
+      if (disabledToggleCount == 1) {
+        is(firstStyleSheetEditor, aEditor,
+           "FlagChange handler triggered for DISABLED flag on the first editor");
+        is(firstStyleSheetEditor.styleSheet.disabled, true,
+           "first stylesheet is now disabled");
+        is(firstStyleSheetEditor.hasFlag("disabled"), true,
+           "first stylesheet is now disabled, it has DISABLED flag");
+        is(firstStyleSheetUI.classList.contains("disabled"), true,
+           "first stylesheet is now disabled, UI has DISABLED class");
+
+        // now toggle it back to enabled
+        waitForFocus(function () {
+          EventUtils.synthesizeMouseAtCenter(enabledToggle, {}, gChromeWindow);
+        }, gChromeWindow);
+        return;
+      }
+
+      // disabledToggleCount == 2
+      is(firstStyleSheetEditor, aEditor,
+         "FlagChange handler triggered for DISABLED flag on the first editor (2)");
+      is(firstStyleSheetEditor.styleSheet.disabled, false,
+         "first stylesheet is now enabled again");
+      is(firstStyleSheetEditor.hasFlag("disabled"), false,
+         "first stylesheet is now enabled again, it does not have DISABLED flag");
+      is(firstStyleSheetUI.classList.contains("disabled"), false,
+         "first stylesheet is now enabled again, UI does not have DISABLED class");
+
+      finish();
+    }
+  });
+
+  waitForFocus(function () {
+    EventUtils.synthesizeMouseAtCenter(enabledToggle, {}, gChromeWindow);
+  }, gChromeWindow);
+}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_import.js b/browser/devtools/styleeditor/test/browser_styleeditor_import.js
new file mode 100644
index 000000000000..dc8ad16d57b8
--- /dev/null
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_import.js
@@ -0,0 +1,87 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// http rather than chrome to improve coverage
+const TESTCASE_URI = TEST_BASE_HTTP + "simple.html";
+
+Components.utils.import("resource://gre/modules/FileUtils.jsm");
+const FILENAME = "styleeditor-import-test.css";
+const SOURCE = "body{background:red;}";
+
+
+function test()
+{
+  waitForExplicitFinish();
+
+  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
+    aChrome.addChromeListener({
+      onContentAttach: run,
+      onEditorAdded: testEditorAdded
+    });
+    if (aChrome.isContentAttached) {
+      run(aChrome);
+    }
+  });
+
+  content.location = TESTCASE_URI;
+}
+
+function run(aChrome)
+{
+  is(aChrome.editors.length, 2,
+     "there is 2 stylesheets initially");
+}
+
+function testImport(aChrome, aEditor)
+{
+  // create file to import first
+  let file = FileUtils.getFile("ProfD", [FILENAME]);
+  let ostream = FileUtils.openSafeFileOutputStream(file);
+  let converter = Cc["@mozilla.org/intl/scriptableunicodeconverter"]
+                    .createInstance(Ci.nsIScriptableUnicodeConverter);
+  converter.charset = "UTF-8";
+  let istream = converter.convertToInputStream(SOURCE);
+  NetUtil.asyncCopy(istream, ostream, function (status) {
+    FileUtils.closeSafeFileOutputStream(ostream);
+
+    // click the import button now that the file to import is ready
+    aChrome._mockImportFile = file;
+
+    waitForFocus(function () {
+      let document = gChromeWindow.document
+      let importButton = document.querySelector(".style-editor-importButton");
+      EventUtils.synthesizeMouseAtCenter(importButton, {}, gChromeWindow);
+    }, gChromeWindow);
+  });
+}
+
+let gAddedCount = 0;
+function testEditorAdded(aChrome, aEditor)
+{
+  if (++gAddedCount == 2) {
+    // test import after the 2 initial stylesheets have been loaded
+    if (!aChrome.editors[0].sourceEditor) {
+      aChrome.editors[0].addActionListener({
+        onAttach: function () {
+          testImport(aChrome);
+        }
+      });
+    } else {
+      testImport(aChrome);
+    }
+  }
+
+  if (!aEditor.hasFlag("imported")) {
+    return;
+  }
+
+  ok(!aEditor.hasFlag("inline"),
+     "imported stylesheet does not have INLINE flag");
+  ok(aEditor.savedFile,
+     "imported stylesheet will be saved directly into the same file");
+  is(aEditor.getFriendlyName(), FILENAME,
+     "imported stylesheet has the same name as the filename");
+
+  finish();
+}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_init.js b/browser/devtools/styleeditor/test/browser_styleeditor_init.js
new file mode 100644
index 000000000000..f810b85d6d41
--- /dev/null
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_init.js
@@ -0,0 +1,126 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TESTCASE_URI = TEST_BASE + "simple.html";
+
+
+function test()
+{
+  waitForExplicitFinish();
+
+  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
+    aChrome.addChromeListener({
+      onContentAttach: run,
+      onEditorAdded: testEditorAdded
+    });
+    if (aChrome.isContentAttached) {
+      run(aChrome);
+    }
+  });
+
+  content.location = TESTCASE_URI;
+}
+
+let gContentAttachHandled = false;
+function run(aChrome)
+{
+  gContentAttachHandled = true;
+  is(aChrome.contentWindow.document.readyState, "complete",
+     "content document is complete");
+
+  let SEC = gChromeWindow.styleEditorChrome;
+  is(SEC, aChrome, "StyleEditorChrome object exists as new window property");
+
+  ok(gChromeWindow.document.title.indexOf("simple testcase") >= 0,
+     "the Style Editor window title contains the document's title");
+
+  // check editors are instantiated
+  is(SEC.editors.length, 2,
+     "there is two StyleEditor instances managed");
+  ok(SEC.editors[0].styleSheetIndex < SEC.editors[1].styleSheetIndex,
+     "editors are ordered by styleSheetIndex");
+
+  // check StyleEditorChrome is a singleton wrt to the same DOMWindow
+  let chromeWindow = StyleEditor.openChrome();
+  is(chromeWindow, gChromeWindow,
+     "attempt to edit the same document returns the same Style Editor window");
+}
+
+let gEditorAddedCount = 0;
+function testEditorAdded(aChrome, aEditor)
+{
+  if (!gEditorAddedCount) {
+    is(gContentAttachHandled, true,
+       "ContentAttach event triggered before EditorAdded");
+  }
+
+  if (aEditor.styleSheetIndex == 0) {
+    gEditorAddedCount++;
+    testFirstStyleSheetEditor(aChrome, aEditor);
+  }
+  if (aEditor.styleSheetIndex == 1) {
+    gEditorAddedCount++;
+    testSecondStyleSheetEditor(aChrome, aEditor);
+  }
+
+  if (gEditorAddedCount == 2) {
+    finish();
+  }
+}
+
+function testFirstStyleSheetEditor(aChrome, aEditor)
+{
+  //testing TESTCASE's simple.css stylesheet
+  is(aEditor.styleSheetIndex, 0,
+     "first stylesheet is at index 0");
+
+  is(aEditor, aChrome.editors[0],
+     "first stylesheet corresponds to StyleEditorChrome.editors[0]");
+
+  ok(!aEditor.hasFlag("inline"),
+     "first stylesheet does not have INLINE flag");
+
+  let summary = aChrome.getSummaryElementForEditor(aEditor);
+  ok(!summary.classList.contains("inline"),
+     "first stylesheet UI does not have INLINE class");
+
+  let name = summary.querySelector(".stylesheet-name").textContent;
+  is(name, "simple.css",
+     "first stylesheet's name is `simple.css`");
+
+  let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
+  is(parseInt(ruleCount), 1,
+     "first stylesheet UI shows rule count as 1");
+
+  ok(summary.classList.contains("splitview-active"),
+     "first stylesheet UI is focused/active");
+}
+
+function testSecondStyleSheetEditor(aChrome, aEditor)
+{
+  //testing TESTCASE's inline stylesheet
+  is(aEditor.styleSheetIndex, 1,
+     "second stylesheet is at index 1");
+
+  is(aEditor, aChrome.editors[1],
+     "second stylesheet corresponds to StyleEditorChrome.editors[1]");
+
+  ok(aEditor.hasFlag("inline"),
+     "second stylesheet has INLINE flag");
+
+  let summary = aChrome.getSummaryElementForEditor(aEditor);
+  ok(summary.classList.contains("inline"),
+     "second stylesheet UI has INLINE class");
+
+  let name = summary.querySelector(".stylesheet-name").textContent;
+  ok(/^<.*>$/.test(name),
+     "second stylesheet's name is surrounded by `<>`");
+
+  let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
+  is(parseInt(ruleCount), 3,
+     "second stylesheet UI shows rule count as 3");
+
+  ok(!summary.classList.contains("splitview-active"),
+     "second stylesheet UI is NOT focused/active");
+}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_loading.js b/browser/devtools/styleeditor/test/browser_styleeditor_loading.js
new file mode 100644
index 000000000000..01cb48201d50
--- /dev/null
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_loading.js
@@ -0,0 +1,39 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TESTCASE_URI = TEST_BASE + "simple.html";
+
+
+function test()
+{
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+
+  // launch Style Editor right when the tab is created (before load)
+  // this checks that the Style Editor still launches correctly when it is opened
+  // *while* the page is still loading
+  launchStyleEditorChrome(function (aChrome) {
+    isnot(gBrowser.selectedBrowser.contentWindow.document.readyState, "complete",
+          "content document is still loading");
+
+    if (!aChrome.isContentAttached) {
+      aChrome.addChromeListener({
+        onContentAttach: run
+      });
+    } else {
+      run(aChrome);
+    }
+  });
+
+  content.location = TESTCASE_URI;
+}
+
+function run(aChrome)
+{
+  is(aChrome.contentWindow.document.readyState, "complete",
+     "content document is complete");
+
+  finish();
+}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_new.js b/browser/devtools/styleeditor/test/browser_styleeditor_new.js
new file mode 100644
index 000000000000..e9e271eb49d2
--- /dev/null
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_new.js
@@ -0,0 +1,117 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TESTCASE_URI = TEST_BASE + "simple.html";
+
+
+function test()
+{
+  waitForExplicitFinish();
+
+  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
+    aChrome.addChromeListener({
+      onContentAttach: run,
+      onEditorAdded: testEditorAdded
+    });
+    if (aChrome.isContentAttached) {
+      run(aChrome);
+    }
+  });
+
+  content.location = TESTCASE_URI;
+}
+
+function run(aChrome)
+{
+  is(aChrome.editors.length, 2,
+     "there is 2 stylesheets initially");
+}
+
+let gNewEditor;       // to make sure only one new stylesheet got created
+let gCommitCount = 0; // to make sure only one Commit event is triggered
+
+function testEditorAdded(aChrome, aEditor)
+{
+  if (aEditor.styleSheetIndex != 2) { // this is not the new stylesheet
+    if (aChrome.editors[0].isLoaded && aChrome.editors[1].isLoaded) {
+      // test after the 2 initial stylesheets have been loaded
+      waitForFocus(function () {
+        // create a new style sheet
+        let newButton = gChromeWindow.document.querySelector(".style-editor-newButton");
+        EventUtils.synthesizeMouseAtCenter(newButton, {}, gChromeWindow);
+      }, gChromeWindow);
+    }
+    return;
+  }
+
+  ok(!gNewEditor, "creating a new stylesheet triggers one EditorAdded event");
+  gNewEditor = aEditor; // above test will fail if we get a duplicate event
+
+  is(aChrome.editors.length, 3,
+     "creating a new stylesheet added a new StyleEditor instance");
+
+  let listener = {
+    onAttach: function (aEditor) {
+      waitForFocus(function () {
+        ok(aEditor.isLoaded,
+           "new editor is loaded when attached");
+        ok(aEditor.hasFlag("new"),
+           "new editor has NEW flag");
+        ok(!aEditor.hasFlag("unsaved"),
+           "new editor does not have UNSAVED flag");
+
+        ok(aEditor.inputElement,
+           "new editor has an input element attached");
+
+        ok(aEditor.sourceEditor.hasFocus(),
+           "new editor has focus");
+
+        let summary = aChrome.getSummaryElementForEditor(aEditor);
+        let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
+        is(parseInt(ruleCount), 0,
+           "new editor initially shows 0 rules");
+
+        let computedStyle = content.getComputedStyle(content.document.body, null);
+        is(computedStyle.backgroundColor, "rgb(255, 255, 255)",
+           "content's background color is initially white");
+
+        for each (let c in "body{background-color:red;}") {
+          EventUtils.synthesizeKey(c, {}, gChromeWindow);
+        }
+      }, gChromeWindow) ;
+    },
+
+    onCommit: function (aEditor) {
+      gCommitCount++;
+
+      ok(aEditor.hasFlag("new"),
+         "new editor still has NEW flag");
+      ok(aEditor.hasFlag("unsaved"),
+         "new editor has UNSAVED flag after modification");
+
+      let summary = aChrome.getSummaryElementForEditor(aEditor);
+      let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
+      is(parseInt(ruleCount), 1,
+         "new editor shows 1 rule after modification");
+
+      let computedStyle = content.getComputedStyle(content.document.body, null);
+      is(computedStyle.backgroundColor, "rgb(255, 0, 0)",
+         "content's background color has been updated to red");
+
+      executeSoon(function () {
+        is(gCommitCount, 1, "received only one Commit event (throttle)");
+
+        aEditor.removeActionListener(listener);
+
+        gNewEditor = null;
+        finish();
+      });
+    }
+  };
+
+  aEditor.addActionListener(listener);
+  if (aEditor.sourceEditor) {
+    listener.onAttach(aEditor);
+  }
+}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_pretty.js b/browser/devtools/styleeditor/test/browser_styleeditor_pretty.js
new file mode 100644
index 000000000000..0651a77c3439
--- /dev/null
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_pretty.js
@@ -0,0 +1,56 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TESTCASE_URI = TEST_BASE + "minified.html";
+
+
+function test()
+{
+  waitForExplicitFinish();
+
+  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
+    aChrome.addChromeListener({
+      onEditorAdded: function (aChrome, aEditor) {
+        if (aEditor.sourceEditor) {
+          run(aEditor); // already attached to input element
+        } else {
+          aEditor.addActionListener({
+            onAttach: run
+          });
+        }
+      }
+    });
+  });
+
+  content.location = TESTCASE_URI;
+}
+
+let editorTestedCount = 0;
+function run(aEditor)
+{
+  if (aEditor.styleSheetIndex == 0) {
+    let prettifiedSource = "body\{\r?\n\tbackground\:white;\r?\n\}\r?\n\r?\ndiv\{\r?\n\tfont\-size\:4em;\r?\n\tcolor\:red\r?\n\}\r?\n";
+    let prettifiedSourceRE = new RegExp(prettifiedSource);
+
+    ok(prettifiedSourceRE.test(aEditor.sourceEditor.getText()),
+       "minified source has been prettified automatically");
+    editorTestedCount++;
+    let chrome = gChromeWindow.styleEditorChrome;
+    let summary = chrome.getSummaryElementForEditor(chrome.editors[1]);
+    EventUtils.synthesizeMouseAtCenter(summary, {}, gChromeWindow);
+  }
+
+  if (aEditor.styleSheetIndex == 1) {
+    let originalSource = "body \{ background\: red; \}\r?\ndiv \{\r?\nfont\-size\: 5em;\r?\ncolor\: red\r?\n\}";
+    let originalSourceRE = new RegExp(originalSource);
+
+    ok(originalSourceRE.test(aEditor.sourceEditor.getText()),
+       "non-minified source has been left untouched");
+    editorTestedCount++;
+  }
+
+  if (editorTestedCount == 2) {
+    finish();
+  }
+}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_readonly.js b/browser/devtools/styleeditor/test/browser_styleeditor_readonly.js
new file mode 100644
index 000000000000..d307cccbb309
--- /dev/null
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_readonly.js
@@ -0,0 +1,74 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TESTCASE_URI = TEST_BASE + "simple.html";
+
+
+let gEditorAddedCount = 0;
+let gEditorReadOnlyCount = 0;
+let gChromeListener = {
+  onEditorAdded: function (aChrome, aEditor) {
+    gEditorAddedCount++;
+    if (aEditor.readOnly) {
+      gEditorReadOnlyCount++;
+    }
+
+    if (gEditorAddedCount == aChrome.editors.length) {
+      // continue testing after all editors are ready
+
+      is(gEditorReadOnlyCount, 0,
+         "all editors are NOT read-only initially");
+
+      // all editors have been loaded, queue closing the content tab
+      executeSoon(function () {
+        gBrowser.removeCurrentTab();
+      });
+    }
+  },
+  onContentDetach: function (aChrome) {
+    // check that the UI has switched to read-only
+    run(aChrome);
+  }
+};
+
+function test()
+{
+  waitForExplicitFinish();
+
+  gBrowser.addTab(); // because we'll close the next one
+  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
+    aChrome.addChromeListener(gChromeListener);
+  });
+
+  content.location = TESTCASE_URI;
+}
+
+function run(aChrome)
+{
+  let document = gChromeWindow.document;
+  let disabledCount;
+  let elements;
+
+  disabledCount = 0;
+  elements = document.querySelectorAll("button,input,select");
+  for (let i = 0; i < elements.length; ++i) {
+    if (elements[i].hasAttribute("disabled")) {
+      disabledCount++;
+    }
+  }
+  ok(elements.length && disabledCount == elements.length,
+     "all buttons, input and select elements are disabled");
+
+  disabledCount = 0;
+  aChrome.editors.forEach(function (aEditor) {
+    if (aEditor.readOnly) {
+      disabledCount++;
+    }
+  });
+  ok(aChrome.editors.length && disabledCount == aChrome.editors.length,
+     "all editors are read-only");
+
+  aChrome.removeChromeListener(gChromeListener);
+  finish();
+}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js b/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js
new file mode 100644
index 000000000000..65210b05ec21
--- /dev/null
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js
@@ -0,0 +1,155 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// http rather than chrome to improve coverage
+const TESTCASE_URI = TEST_BASE_HTTP + "simple.gz.html";
+
+const Cc = Components.classes;
+const Ci = Components.interfaces;
+Components.utils.import("resource://gre/modules/FileUtils.jsm");
+
+
+function test()
+{
+  waitForExplicitFinish();
+
+  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
+    aChrome.addChromeListener({
+      onEditorAdded: function (aChrome, aEditor) {
+        if (aEditor.styleSheetIndex != 0) {
+          return; // we want to test against the first stylesheet
+        }
+
+        if (aEditor.sourceEditor) {
+          run(aEditor); // already attached to input element
+        } else {
+          aEditor.addActionListener({
+            onAttach: run
+          });
+        }
+      }
+    });
+
+    gChromeWindow.addEventListener("unload", function onClose() {
+      gChromeWindow.removeEventListener("unload", onClose, true);
+      gChromeWindow = null;
+      executeSoon(function () {
+        waitForFocus(function () {
+          // wait that browser has focus again
+          // open StyleEditorChrome again (a new one since we closed the previous one)
+          launchStyleEditorChrome(function (aChrome) {
+            is(gChromeWindow.document.documentElement.hasAttribute("data-marker"),
+               false,
+               "opened a completely new StyleEditorChrome window");
+
+            aChrome.addChromeListener({
+              onEditorAdded: function (aChrome, aEditor) {
+                if (aEditor.styleSheetIndex != 0) {
+                  return; // we want to test against the first stylesheet
+                }
+
+                if (aEditor.sourceEditor) {
+                  testNewChrome(aEditor); // already attached to input element
+                } else {
+                  aEditor.addActionListener({
+                    onAttach: testNewChrome
+                  });
+                }
+              }
+            });
+          });
+        });
+      });
+    }, true);
+  });
+
+  content.location = TESTCASE_URI;
+}
+
+let gFilename;
+
+function run(aEditor)
+{
+  gFilename = FileUtils.getFile("ProfD", ["styleeditor-test.css"])
+
+  aEditor.saveToFile(gFilename, function (aFile) {
+    ok(aFile, "file got saved successfully");
+
+    aEditor.addActionListener({
+      onFlagChange: function (aEditor, aFlag) {
+        if (aFlag != "unsaved") {
+          return;
+        }
+
+        ok(aEditor.hasFlag("unsaved"),
+           "first stylesheet has UNSAVED flag after making a change");
+
+        // marker used to check it does not exist when we reopen
+        // ie. the window we opened is indeed a new one
+        gChromeWindow.document.documentElement.setAttribute("data-marker", "true");
+        gChromeWindow.close();
+      }
+    });
+
+    waitForFocus(function () {
+      // insert char so that this stylesheet has the UNSAVED flag
+      EventUtils.synthesizeKey("x", {}, gChromeWindow);
+    }, gChromeWindow);
+  });
+}
+
+function testNewChrome(aEditor)
+{
+  ok(aEditor.savedFile,
+     "first stylesheet editor will save directly into the same file");
+
+  is(aEditor.getFriendlyName(), gFilename.leafName,
+     "first stylesheet still has the filename as it was saved");
+  gFilename = null;
+
+  ok(aEditor.hasFlag("unsaved"),
+     "first stylesheet still has UNSAVED flag at reopening");
+
+  ok(!aEditor.hasFlag("inline"),
+     "first stylesheet does not have INLINE flag");
+
+  ok(!aEditor.hasFlag("error"),
+     "editor does not have error flag initially");
+  let hadError = false;
+
+  let onSaveCallback = function (aFile) {
+    aEditor.addActionListener({
+      onFlagChange: function (aEditor, aFlag) {
+        if (!hadError && aFlag == "error") {
+          ok(aEditor.hasFlag("error"),
+             "editor has ERROR flag after attempting to save with invalid path");
+          hadError = true;
+
+          // save using source editor key binding (previous successful path)
+          waitForFocus(function () {
+            EventUtils.synthesizeKey("S", {accelKey: true}, gChromeWindow);
+          }, gChromeWindow);
+          return;
+        }
+
+        if (hadError && aFlag == "unsaved") {
+          executeSoon(function () {
+            ok(!aEditor.hasFlag("unsaved"),
+               "first stylesheet has no UNSAVED flag after successful save");
+            ok(!aEditor.hasFlag("error"),
+               "ERROR flag has been removed since last operation succeeded");
+            finish();
+          });
+        }
+      }
+    });
+  }
+
+  let os = Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
+  if (os == "WINNT") {
+    aEditor.saveToFile("C:\\I_DO_NOT_EXIST_42\\bogus.css", onSaveCallback);
+  } else {
+    aEditor.saveToFile("/I_DO_NOT_EXIST_42/bogos.css", onSaveCallback);
+  }
+}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_sv_filter.js b/browser/devtools/styleeditor/test/browser_styleeditor_sv_filter.js
new file mode 100644
index 000000000000..c41feb6a9b71
--- /dev/null
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_sv_filter.js
@@ -0,0 +1,101 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TESTCASE_URI = TEST_BASE + "simple.html";
+
+
+function test()
+{
+  waitForExplicitFinish();
+
+  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
+    aChrome.addChromeListener({
+      onContentAttach: run
+    });
+    if (aChrome.isContentAttached) {
+      run(aChrome);
+    }
+  });
+
+  content.location = TESTCASE_URI;
+}
+
+function getFilteredItemsCount(nav)
+{
+  let matches = nav.querySelectorAll("*.splitview-filtered");
+  return matches ? matches.length : 0;
+}
+
+function run(aChrome)
+{
+  aChrome.editors[0].addActionListener({onAttach: onFirstEditorAttach});
+  aChrome.editors[1].addActionListener({onAttach: onSecondEditorAttach});
+}
+
+function onFirstEditorAttach(aEditor)
+{
+  let filter = gChromeWindow.document.querySelector(".splitview-filter");
+  // force the command event on input since it is not possible to disable
+  // the search textbox's timeout.
+  let forceCommandEvent = function forceCommandEvent() {
+    let evt = gChromeWindow.document.createEvent("XULCommandEvent");
+    evt.initCommandEvent("command", true, true, gChromeWindow, 0, false, false,
+                         false, false, null);
+    filter.dispatchEvent(evt);
+  }
+  filter.addEventListener("input", forceCommandEvent, false);
+
+  let nav = gChromeWindow.document.querySelector(".splitview-nav");
+  nav.focus();
+
+  is(getFilteredItemsCount(nav), 0,
+     "there is 0 filtered item initially");
+
+  waitForFocus(function () {
+    // Search [s] (type-on-search since we focused nav above - not filter directly)
+    EventUtils.synthesizeKey("s", {}, gChromeWindow);
+
+    // the search space is "simple.css" and "inline stylesheet #1" (2 sheets)
+    is(getFilteredItemsCount(nav), 0,
+       "there is 0 filtered item if searching for 's'");
+
+    EventUtils.synthesizeKey("i", {}, gChromeWindow); // Search [si]
+
+    is(getFilteredItemsCount(nav), 1, // inline stylesheet is filtered
+       "there is 1 filtered item if searching for 's'");
+
+    // use uppercase to check that filtering is case-insensitive
+    EventUtils.synthesizeKey("X", {}, gChromeWindow); // Search [siX]
+    is(getFilteredItemsCount(nav), 2,
+       "there is 2 filtered items if searching for 's'"); // no match
+
+    // clear the search
+    EventUtils.synthesizeKey("VK_ESCAPE", {}, gChromeWindow);
+
+    is(filter.value, "",
+       "filter is back to empty");
+    is(getFilteredItemsCount(nav), 0,
+       "there is 0 filtered item when filter is empty again");
+
+    for each (let c in "inline") {
+      EventUtils.synthesizeKey(c, {}, gChromeWindow);
+    }
+
+    is(getFilteredItemsCount(nav), 1, // simple.css is filtered
+       "there is 1 filtered item if searching for 'inline'");
+
+    // auto-select the only result (enter the editor)
+    EventUtils.synthesizeKey("VK_ENTER", {}, gChromeWindow);
+
+    filter.removeEventListener("input", forceCommandEvent, false);
+  }, gChromeWindow);
+}
+
+function onSecondEditorAttach(aEditor)
+{
+  ok(aEditor.sourceEditor.hasFocus(),
+     "second editor has been selected and focused automatically.");
+
+  finish();
+}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_sv_keynav.js b/browser/devtools/styleeditor/test/browser_styleeditor_sv_keynav.js
new file mode 100644
index 000000000000..e734f7d0237a
--- /dev/null
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_sv_keynav.js
@@ -0,0 +1,80 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TESTCASE_URI = TEST_BASE + "four.html";
+
+
+function test()
+{
+  waitForExplicitFinish();
+
+  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
+    aChrome.addChromeListener({
+      onContentAttach: run
+    });
+    if (aChrome.isContentAttached) {
+      run(aChrome);
+    }
+  });
+
+  content.location = TESTCASE_URI;
+}
+
+let gChrome;
+
+function run(aChrome)
+{
+  gChrome = aChrome;
+  aChrome.editors[0].addActionListener({onAttach: onEditor0Attach});
+  aChrome.editors[2].addActionListener({onAttach: onEditor2Attach});
+}
+
+function getStylesheetNameLinkFor(aEditor)
+{
+  return gChrome.getSummaryElementForEditor(aEditor).querySelector(".stylesheet-name");
+}
+
+function onEditor0Attach(aEditor)
+{
+  waitForFocus(function () {
+    let summary = gChrome.getSummaryElementForEditor(aEditor);
+    EventUtils.synthesizeMouseAtCenter(summary, {}, gChromeWindow);
+
+    let item = getStylesheetNameLinkFor(gChrome.editors[0]);
+    is(gChromeWindow.document.activeElement, item,
+       "editor 0 item is the active element");
+
+    EventUtils.synthesizeKey("VK_DOWN", {}, gChromeWindow);
+    item = getStylesheetNameLinkFor(gChrome.editors[1]);
+    is(gChromeWindow.document.activeElement, item,
+       "editor 1 item is the active element");
+
+    EventUtils.synthesizeKey("VK_HOME", {}, gChromeWindow);
+    item = getStylesheetNameLinkFor(gChrome.editors[0]);
+    is(gChromeWindow.document.activeElement, item,
+       "fist editor item is the active element");
+
+    EventUtils.synthesizeKey("VK_END", {}, gChromeWindow);
+    item = getStylesheetNameLinkFor(gChrome.editors[3]);
+    is(gChromeWindow.document.activeElement, item,
+       "last editor item is the active element");
+
+    EventUtils.synthesizeKey("VK_UP", {}, gChromeWindow);
+    item = getStylesheetNameLinkFor(gChrome.editors[2]);
+    is(gChromeWindow.document.activeElement, item,
+       "editor 2 item is the active element");
+
+    EventUtils.synthesizeKey("VK_RETURN", {}, gChromeWindow);
+    // this will attach and give focus editor 2
+  }, gChromeWindow);
+}
+
+function onEditor2Attach(aEditor)
+{
+  ok(aEditor.sourceEditor.hasFocus(),
+     "editor 2 has focus");
+
+  gChrome = null;
+  finish();
+}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_sv_resize.js b/browser/devtools/styleeditor/test/browser_styleeditor_sv_resize.js
new file mode 100644
index 000000000000..4c2766363b77
--- /dev/null
+++ b/browser/devtools/styleeditor/test/browser_styleeditor_sv_resize.js
@@ -0,0 +1,63 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TESTCASE_URI = TEST_BASE + "simple.html";
+
+let gOriginalWidth; // these are set by run() when gChromeWindow is ready
+let gOriginalHeight;
+
+function test()
+{
+  waitForExplicitFinish();
+
+  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
+    if (aChrome.isContentAttached) {
+      run(aChrome);
+    } else {
+      aChrome.addChromeListener({
+        onContentAttach: run
+      });
+    }
+  });
+
+  content.location = TESTCASE_URI;
+}
+
+function run(aChrome)
+{
+  is(aChrome.editors.length, 2,
+     "there is 2 stylesheets initially");
+
+  aChrome.editors[0].addActionListener({
+    onAttach: function onEditorAttached(aEditor) {
+      let originalSourceEditor = aEditor.sourceEditor;
+      aEditor.sourceEditor.setCaretOffset(4); // to check the caret is preserved
+
+      // queue a resize to inverse aspect ratio
+      // this will trigger a detach and reattach (to workaround bug 254144)
+      executeSoon(function () {
+        waitForFocus(function () {
+          gOriginalWidth = gChromeWindow.outerWidth;
+          gOriginalHeight = gChromeWindow.outerHeight;
+          gChromeWindow.resizeTo(120, 480);
+
+          executeSoon(function () {
+            is(aEditor.sourceEditor, originalSourceEditor,
+               "the editor still references the same SourceEditor instance");
+            is(aEditor.sourceEditor.getCaretOffset(), 4,
+               "the caret position has been preserved");
+
+            // queue a resize to original aspect ratio
+            waitForFocus(function () {
+              gChromeWindow.resizeTo(gOriginalWidth, gOriginalHeight);
+              executeSoon(function () {
+                finish();
+              });
+            }, gChromeWindow);
+          });
+        }, gChromeWindow);
+      });
+    }
+  });
+}
diff --git a/browser/devtools/styleeditor/test/four.html b/browser/devtools/styleeditor/test/four.html
new file mode 100644
index 000000000000..c0d51d691c5b
--- /dev/null
+++ b/browser/devtools/styleeditor/test/four.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<html>
+<head>
+  <title>four stylesheets</title>
+  <link rel="stylesheet" type="text/css" media="scren" href="simple.css"/>
+  <style type="text/css">
+  div {
+    font-size: 2em;
+  }
+  </style>
+  <style type="text/css">
+  span {
+    font-size: 3em;
+  }
+  </style>
+  <style type="text/css">
+  p {
+    font-size: 4em;
+  }
+  </style>
+</head>
+<body>
+	<div>four <span>stylesheets</span></div>
+</body>
+</html>
diff --git a/browser/devtools/styleeditor/test/head.js b/browser/devtools/styleeditor/test/head.js
new file mode 100644
index 000000000000..eb07631a5131
--- /dev/null
+++ b/browser/devtools/styleeditor/test/head.js
@@ -0,0 +1,44 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+const TEST_BASE = "chrome://mochitests/content/browser/browser/devtools/styleeditor/test/";
+const TEST_BASE_HTTP = "http://example.com/browser/browser/devtools/styleeditor/test/";
+const TEST_BASE_HTTPS = "https://example.com/browser/browser/devtools/styleeditor/test/";
+
+let gChromeWindow;               //StyleEditorChrome window
+
+function cleanup()
+{
+  if (gChromeWindow) {
+    gChromeWindow.close();
+    gChromeWindow = null;
+  }
+  if (gBrowser.tabs.length > 1) {
+    gBrowser.removeCurrentTab();
+  }
+}
+
+function launchStyleEditorChrome(aCallback)
+{
+  gChromeWindow = StyleEditor.openChrome();
+  if (gChromeWindow.document.readyState != "complete") {
+    gChromeWindow.addEventListener("load", function onChromeLoad() {
+      gChromeWindow.removeEventListener("load", onChromeLoad, true);
+      aCallback(gChromeWindow.styleEditorChrome);
+    }, true);
+  } else {
+    aCallback(gChromeWindow.styleEditorChrome);
+  }
+}
+
+function addTabAndLaunchStyleEditorChromeWhenLoaded(aCallback)
+{
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onLoad() {
+    gBrowser.selectedBrowser.removeEventListener("load", onLoad, true);
+    launchStyleEditorChrome(aCallback);
+  }, true);
+}
+
+registerCleanupFunction(cleanup);
diff --git a/browser/devtools/styleeditor/test/media-small.css b/browser/devtools/styleeditor/test/media-small.css
new file mode 100644
index 000000000000..d64756ddc7e1
--- /dev/null
+++ b/browser/devtools/styleeditor/test/media-small.css
@@ -0,0 +1,5 @@
+/* this stylesheet applies when min-width<400px */
+body {
+	background: red;
+}
+
diff --git a/browser/devtools/styleeditor/test/media.html b/browser/devtools/styleeditor/test/media.html
new file mode 100644
index 000000000000..ef05818c5894
--- /dev/null
+++ b/browser/devtools/styleeditor/test/media.html
@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+<head>
+  <link rel="stylesheet" type="text/css" href="simple.css" media="screen,print"/>
+  <link rel="stylesheet" type="text/css" href="media-small.css" media="screen and (min-width: 200px)"/>
+</head>
+<body>
+	<div>test for media labels</div>
+</body>
+</html>
+
diff --git a/browser/devtools/styleeditor/test/minified.html b/browser/devtools/styleeditor/test/minified.html
new file mode 100644
index 000000000000..a7d3eec3267e
--- /dev/null
+++ b/browser/devtools/styleeditor/test/minified.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+<head>
+  <title>minified testcase</title>
+  <style type="text/css"><!--
+body{background:white;}div{font-size:4em;color:red}
+--></style>
+  <style type="text/css">body { background: red; }
+div {
+font-size: 5em;
+color: red
+}</style>
+</head>
+<body>
+	<div>minified <span>testcase</span></div>
+</body>
+</html>
diff --git a/browser/devtools/styleeditor/test/simple.css b/browser/devtools/styleeditor/test/simple.css
new file mode 100644
index 000000000000..eb22505d3aee
--- /dev/null
+++ b/browser/devtools/styleeditor/test/simple.css
@@ -0,0 +1,8 @@
+/* vim: set ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+body {
+  margin: 0;
+}
+
diff --git a/browser/devtools/styleeditor/test/simple.css.gz b/browser/devtools/styleeditor/test/simple.css.gz
new file mode 100644
index 0000000000000000000000000000000000000000..ee3b9efbc1db99982c1bd4d723a4d33694170ab2
GIT binary patch
literal 166
zcmV;X09pSZiwFodqB2eZ19NF@aBO8RV{>x=9gV>bf-n#T@BNB*=D?ySQ^Uc;5AYXC
z+rTEaOWGBJ#(x(%&1EJ-4HixoH7d0BXY8!&PF?#;XVH+M2DiMy%e)mHCk0o87}z_F
z0V>cb;_(`u>~WXmIJXACq&iz7U!qf9qL-8;*H+3%^C5@BrFSesr?#X2%M21WeD*%M
UGIF-)uI6jZ4+5k&-lqTn09FA?{r~^~

literal 0
HcmV?d00001

diff --git a/browser/devtools/styleeditor/test/simple.css.gz^headers^ b/browser/devtools/styleeditor/test/simple.css.gz^headers^
new file mode 100644
index 000000000000..092020ab00d5
--- /dev/null
+++ b/browser/devtools/styleeditor/test/simple.css.gz^headers^
@@ -0,0 +1,4 @@
+Vary: Accept-Encoding
+Content-Encoding: gzip
+Content-Type: text/css
+
diff --git a/browser/devtools/styleeditor/test/simple.gz.html b/browser/devtools/styleeditor/test/simple.gz.html
new file mode 100644
index 000000000000..d63362b8e008
--- /dev/null
+++ b/browser/devtools/styleeditor/test/simple.gz.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+  <title>simple testcase</title>
+  <link rel="stylesheet" type="text/css" media="scren" href="simple.css.gz"/>
+  <style type="text/css">
+  body {
+    background: white;
+  }
+
+  div {
+    font-size: 4em;
+  }
+
+  div > span {
+     text-decoration: underline;
+  }
+  </style>
+</head>
+<body>
+	<div>simple <span>testcase</span></div>
+</body>
+</html>
diff --git a/browser/devtools/styleeditor/test/simple.html b/browser/devtools/styleeditor/test/simple.html
new file mode 100644
index 000000000000..d586cf4d1011
--- /dev/null
+++ b/browser/devtools/styleeditor/test/simple.html
@@ -0,0 +1,23 @@
+<!doctype html>
+<html>
+<head>
+  <title>simple testcase</title>
+  <link rel="stylesheet" type="text/css" media="scren" href="simple.css"/>
+  <style type="text/css">
+  body {
+    background: white;
+  }
+
+  div {
+    font-size: 4em;
+  }
+
+  div > span {
+     text-decoration: underline;
+  }
+  </style>
+</head>
+<body>
+	<div>simple <span>testcase</span></div>
+</body>
+</html>

From 0a65912c6dec084712fcdd27c3b373144ca034fb Mon Sep 17 00:00:00 2001
From: Cedric Vivier <cedricv@neonux.com>
Date: Mon, 7 Nov 2011 13:23:29 +0800
Subject: [PATCH 03/21] Bug 583041 - Style Editor integration; testfix;
 r=rcampbell

---
 .../scratchpad/test/browser_scratchpad_bug_660560_tab.js      | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/browser/devtools/scratchpad/test/browser_scratchpad_bug_660560_tab.js b/browser/devtools/scratchpad/test/browser_scratchpad_bug_660560_tab.js
index b1e8cd78fd0f..1550968e0125 100644
--- a/browser/devtools/scratchpad/test/browser_scratchpad_bug_660560_tab.js
+++ b/browser/devtools/scratchpad/test/browser_scratchpad_bug_660560_tab.js
@@ -18,7 +18,7 @@ function test()
     Services.prefs.setIntPref("devtools.editor.tabsize", 5);
 
     gScratchpadWindow = Scratchpad.openScratchpad();
-    gScratchpadWindow.addEventListener("load", runTests, false);
+    waitForFocus(runTests, gScratchpadWindow);
   }, true);
 
   content.location = "data:text/html,Scratchpad test for the Tab key, bug 660560";
@@ -64,7 +64,7 @@ function runTests()
   Services.prefs.setIntPref("devtools.editor.tabsize", 6);
   Services.prefs.setBoolPref("devtools.editor.expandtab", false);
   gScratchpadWindow = Scratchpad.openScratchpad();
-  gScratchpadWindow.addEventListener("load", runTests2, false);
+  waitForFocus(runTests2, gScratchpadWindow);
 }
 
 function runTests2()

From ae9e468806e7fb29d68e6d81a3a948123edd26a0 Mon Sep 17 00:00:00 2001
From: Cedric Vivier <cedricv@neonux.com>
Date: Mon, 3 Oct 2011 19:08:15 +0800
Subject: [PATCH 04/21] Bug 583041 - Style Editor integration; sourceeditor
 fix; r=rcampbell,msucan

---
 .../devtools/sourceeditor/source-editor-orion.jsm    | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/browser/devtools/sourceeditor/source-editor-orion.jsm b/browser/devtools/sourceeditor/source-editor-orion.jsm
index aa5980e48a6b..183ec25fb2f5 100644
--- a/browser/devtools/sourceeditor/source-editor-orion.jsm
+++ b/browser/devtools/sourceeditor/source-editor-orion.jsm
@@ -222,7 +222,17 @@ SourceEditor.prototype = {
     }, this);
 
     if (aCallback) {
-      aCallback(this);
+      let iframe = this._view._frame;
+      let document = iframe.contentDocument;
+      if (!document || document.readyState != "complete") {
+        let onIframeLoad = function () {
+          iframe.contentWindow.removeEventListener("load", onIframeLoad, false);
+          aCallback(this);
+        }.bind(this);
+        iframe.contentWindow.addEventListener("load", onIframeLoad, false);
+      } else {
+        aCallback(this);
+      }
     }
   },
 

From c4a56896160ab27d35f4287f35945a86f8b83903 Mon Sep 17 00:00:00 2001
From: Mihai Sucan <mihai.sucan@gmail.com>
Date: Sun, 6 Nov 2011 12:26:09 +0200
Subject: [PATCH 05/21] Bug 698762 - Remove unmatched rules from style
 inspector. r=robcee

---
 .../devtools/styleinspector/CssHtmlTree.jsm   | 10 +-----
 .../devtools/styleinspector/csshtmltree.xul   | 34 -------------------
 .../test/browser/browser_bug683672.js         |  2 +-
 .../test/browser/browser_styleinspector.js    |  2 +-
 4 files changed, 3 insertions(+), 45 deletions(-)

diff --git a/browser/devtools/styleinspector/CssHtmlTree.jsm b/browser/devtools/styleinspector/CssHtmlTree.jsm
index 7f37d61ab3c0..f5f27e929b24 100644
--- a/browser/devtools/styleinspector/CssHtmlTree.jsm
+++ b/browser/devtools/styleinspector/CssHtmlTree.jsm
@@ -444,7 +444,6 @@ function PropertyView(aTree, aName)
   this.link = "https://developer.mozilla.org/en/CSS/" + aName;
 
   this.templateMatchedSelectors = aTree.styleDocument.getElementById("templateMatchedSelectors");
-  this.templateUnmatchedSelectors = aTree.styleDocument.getElementById("templateUnmatchedSelectors");
 }
 
 PropertyView.prototype = {
@@ -575,11 +574,8 @@ PropertyView.prototype = {
     if (!this.tree.viewedElement || !this.visible) {
       this.valueNode.innerHTML = "";
       this.matchedSelectorsContainer.hidden = true;
-      this.unmatchedSelectorsContainer.hidden = true;
-      this.unmatchedSelectorTable.innerHTML = "";
       this.matchedSelectorsContainer.innerHTML = "";
       this.matchedExpander.removeAttribute("open");
-      this.unmatchedExpander.removeAttribute("open");
       return;
     }
 
@@ -595,7 +591,7 @@ PropertyView.prototype = {
     let hasMatchedSelectors = this.hasMatchedSelectors;
     this.matchedSelectorsContainer.hidden = !hasMatchedSelectors;
 
-    if (hasMatchedSelectors || this.hasUnmatchedSelectors) {
+    if (hasMatchedSelectors) {
       this.propertyHeader.classList.add("expandable");
     } else {
       this.propertyHeader.classList.remove("expandable");
@@ -654,7 +650,6 @@ PropertyView.prototype = {
   refreshAllSelectors: function PropertyView_refreshAllSelectors()
   {
     this.refreshMatchedSelectors();
-    this.refreshUnmatchedSelectors();
   },
 
   /**
@@ -702,9 +697,6 @@ PropertyView.prototype = {
   {
     if (aEvent.target.className != "helplink") {
       this.matchedExpanded = !this.matchedExpanded;
-      if (!this.hasMatchedSelectors && this.hasUnmatchedSelectors) {
-        this.unmatchedExpanded = !this.unmatchedExpanded;
-      }
       this.refreshAllSelectors();
       aEvent.preventDefault();
     }
diff --git a/browser/devtools/styleinspector/csshtmltree.xul b/browser/devtools/styleinspector/csshtmltree.xul
index ba54faaf1072..45e66b44aa9b 100644
--- a/browser/devtools/styleinspector/csshtmltree.xul
+++ b/browser/devtools/styleinspector/csshtmltree.xul
@@ -71,7 +71,6 @@
   <xul:label class="legendKey bestmatch">&bestMatch;</xul:label>
   <xul:label class="legendKey matched">&matched;</xul:label>
   <xul:label class="legendKey parentmatch">&parentMatch;</xul:label>
-  <xul:label class="legendKey unmatched">&unmatched;</xul:label>
   <xul:spacer flex="1"/>
   <xul:resizer dir="bottomright"/>
 </xul:hbox>
@@ -136,14 +135,6 @@ To visually debug the templates without running firefox, alter the display:none
 
       <div save="${matchedSelectorsContainer}" class="rulelink">
       </div>
-      <div save="${unmatchedSelectorsContainer}" class="rulelink">
-        <div save="${unmatchedTitleBlock}" onclick="${unmatchedSelectorsClick}"
-             class="rule-unmatched">
-          <div save="${unmatchedExpander}" class="expander"/>
-          <div save="${unmatchedSelectorsTitleNode}">&unmatchedSelectors;</div>
-        </div>
-        <div save="${unmatchedSelectorTable}" class="unmatchedSelectorTable"/>
-      </div>
     </div>
   </div>
 
@@ -171,31 +162,6 @@ To visually debug the templates without running firefox, alter the display:none
       </loop>
     </table>
   </div>
-
-  <!--
-  A templateUnmatchedSelectors sits inside each templateProperties showing the
-  list of selectors that do not affect that property. Each needs data like this:
-  {
-    unmatchedSelectorViews: ..., // from cssHtmlTree.propertyViews[name].unmatchedSelectorViews
-  }
-  This is a template so the parent does not need to be a table, except that
-  using a div as the parent causes the DOM to muck with the tr elements
-  -->
-  <div id="templateUnmatchedSelectors">
-    <table>
-      <loop foreach="selector in ${unmatchedSelectorViews}">
-        <tr>
-          <td dir="ltr" class="rule-text ${selector.statusClass}">
-            ${selector.humanReadableText(__element)}
-          </td>
-          <td class="rule-link">
-            <a target="_blank" href="view-source:${selector.selectorInfo.href}" class="link"
-                title="${selector.selectorInfo.href}">${selector.selectorInfo.source}</a>
-          </td>
-        </tr>
-      </loop>
-    </table>
-  </div>
 </div>
 
 </xul:window>
diff --git a/browser/devtools/styleinspector/test/browser/browser_bug683672.js b/browser/devtools/styleinspector/test/browser/browser_bug683672.js
index 01c11c243a07..e620e870b2bd 100644
--- a/browser/devtools/styleinspector/test/browser/browser_bug683672.js
+++ b/browser/devtools/styleinspector/test/browser/browser_bug683672.js
@@ -38,7 +38,7 @@ function runTests()
   ok(stylePanel.isOpen(), "style inspector is open");
 
   testMatchedSelectors();
-  testUnmatchedSelectors();
+  //testUnmatchedSelectors();
 
   info("finishing up");
   Services.obs.addObserver(finishUp, "StyleInspector-closed", false);
diff --git a/browser/devtools/styleinspector/test/browser/browser_styleinspector.js b/browser/devtools/styleinspector/test/browser/browser_styleinspector.js
index 0f53bf235682..ef263573df62 100644
--- a/browser/devtools/styleinspector/test/browser/browser_styleinspector.js
+++ b/browser/devtools/styleinspector/test/browser/browser_styleinspector.js
@@ -64,7 +64,7 @@ function SI_CheckProperty()
   let cssLogic = stylePanel.cssLogic;
   let propertyInfo = cssLogic.getPropertyInfo("color");
   ok(propertyInfo.matchedRuleCount > 0, "color property has matching rules");
-  ok(propertyInfo.unmatchedRuleCount > 0, "color property has unmatched rules");
+  //ok(propertyInfo.unmatchedRuleCount > 0, "color property has unmatched rules");
 }
 
 function finishUp()

From 4c88cb511b7f8b133c67c97340332ada042ed894 Mon Sep 17 00:00:00 2001
From: Mihai Sucan <mihai.sucan@gmail.com>
Date: Sun, 6 Nov 2011 16:48:59 +0200
Subject: [PATCH 06/21] Bug 699308 - Highlighter closes during iframe requests.
 r=robcee

---
 browser/devtools/highlighter/inspector.jsm    |  9 ++-
 browser/devtools/highlighter/test/Makefile.in |  1 +
 ..._inspector_bug_699308_iframe_navigation.js | 77 +++++++++++++++++++
 3 files changed, 85 insertions(+), 2 deletions(-)
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_bug_699308_iframe_navigation.js

diff --git a/browser/devtools/highlighter/inspector.jsm b/browser/devtools/highlighter/inspector.jsm
index 5a19a616faae..abc1e5bed6af 100644
--- a/browser/devtools/highlighter/inspector.jsm
+++ b/browser/devtools/highlighter/inspector.jsm
@@ -2062,8 +2062,13 @@ InspectorProgressListener.prototype = {
       return;
     }
 
-    // Skip non-start states.
-    if (!(aFlag & Ci.nsIWebProgressListener.STATE_START)) {
+    let isStart = aFlag & Ci.nsIWebProgressListener.STATE_START;
+    let isDocument = aFlag & Ci.nsIWebProgressListener.STATE_IS_DOCUMENT;
+    let isNetwork = aFlag & Ci.nsIWebProgressListener.STATE_IS_NETWORK;
+    let isRequest = aFlag & Ci.nsIWebProgressListener.STATE_IS_REQUEST;
+
+    // Skip non-interesting states.
+    if (!isStart || !isDocument || !isRequest || !isNetwork) {
       return;
     }
 
diff --git a/browser/devtools/highlighter/test/Makefile.in b/browser/devtools/highlighter/test/Makefile.in
index 0705e1d9cd8b..2b39a5d2913d 100644
--- a/browser/devtools/highlighter/test/Makefile.in
+++ b/browser/devtools/highlighter/test/Makefile.in
@@ -65,6 +65,7 @@ _BROWSER_FILES = \
 		browser_inspector_keybindings.js \
 		browser_inspector_breadcrumbs.html \
 		browser_inspector_breadcrumbs.js \
+		browser_inspector_bug_699308_iframe_navigation.js \
 		$(NULL)
 
 # Disabled due to constant failures
diff --git a/browser/devtools/highlighter/test/browser_inspector_bug_699308_iframe_navigation.js b/browser/devtools/highlighter/test/browser_inspector_bug_699308_iframe_navigation.js
new file mode 100644
index 000000000000..50beccc16e29
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_bug_699308_iframe_navigation.js
@@ -0,0 +1,77 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let iframe;
+let iframeLoads = 0;
+let checksAfterLoads = false;
+
+function startTest() {
+  ok(window.InspectorUI, "InspectorUI variable exists");
+  Services.obs.addObserver(runInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, null);
+  InspectorUI.toggleInspectorUI();
+}
+
+function runInspectorTests() {
+  Services.obs.removeObserver(runInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, null);
+
+  iframe = content.document.querySelector("iframe");
+  ok(iframe, "found the iframe element");
+
+  ok(InspectorUI.inspecting, "Inspector is highlighting");
+  ok(InspectorUI.isInspectorOpen, "Inspector is open");
+
+  Services.obs.addObserver(finishTest,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+
+  iframe.addEventListener("load", onIframeLoad, false);
+
+  executeSoon(function() {
+    iframe.contentWindow.location = "javascript:location.reload()";
+  });
+}
+
+function onIframeLoad() {
+  if (++iframeLoads != 2) {
+    executeSoon(function() {
+      iframe.contentWindow.location = "javascript:location.reload()";
+    });
+    return;
+  }
+
+  iframe.removeEventListener("load", onIframeLoad, false);
+
+  ok(InspectorUI.inspecting, "Inspector is highlighting after iframe nav");
+  ok(InspectorUI.isInspectorOpen, "Inspector Panel is open after iframe nav");
+
+  checksAfterLoads = true;
+
+  InspectorUI.closeInspectorUI();
+}
+
+function finishTest() {
+  Services.obs.removeObserver(finishTest,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
+
+  is(iframeLoads, 2, "iframe loads");
+  ok(checksAfterLoads, "the Inspector tests got the chance to run after iframe reloads");
+  ok(!InspectorUI.isInspectorOpen, "Inspector Panel is not open");
+
+  iframe = null;
+  gBrowser.removeCurrentTab();
+  executeSoon(finish);
+}
+
+function test() {
+  waitForExplicitFinish();
+
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onBrowserLoad() {
+    gBrowser.selectedBrowser.removeEventListener("load", onBrowserLoad, true);
+    waitForFocus(startTest, content);
+  }, true);
+
+  content.location = "data:text/html,<p>bug 699308 - test iframe navigation" +
+    "<iframe src='data:text/html,hello world'></iframe>";
+}

From 2f9465608e19d959362442778c6f44e6b43bdcc5 Mon Sep 17 00:00:00 2001
From: Michael Ratcliffe <mratcliffe@mozilla.com>
Date: Sun, 6 Nov 2011 12:36:38 +0200
Subject: [PATCH 07/21] Bug 689759 - Style Inspector needs a no-results
 placeholder.  r=msucan

---
 .../devtools/styleinspector/CssHtmlTree.jsm   |  17 +++
 .../devtools/styleinspector/csshtmltree.xul   |   5 +
 .../styleinspector/test/browser/Makefile.in   |   1 +
 ...ector_bug_689759_no_results_placeholder.js | 118 ++++++++++++++++++
 .../browser/devtools/styleinspector.dtd       |   5 +
 .../browser/devtools/csshtmltree.css          |   6 +
 .../browser/devtools/csshtmltree.css          |   6 +
 .../browser/devtools/csshtmltree.css          |   6 +
 8 files changed, 164 insertions(+)
 create mode 100644 browser/devtools/styleinspector/test/browser/browser_styleinspector_bug_689759_no_results_placeholder.js

diff --git a/browser/devtools/styleinspector/CssHtmlTree.jsm b/browser/devtools/styleinspector/CssHtmlTree.jsm
index f5f27e929b24..480cb54afc52 100644
--- a/browser/devtools/styleinspector/CssHtmlTree.jsm
+++ b/browser/devtools/styleinspector/CssHtmlTree.jsm
@@ -81,6 +81,9 @@ function CssHtmlTree(aStyleInspector)
   this.templateProperty = this.styleDocument.getElementById("templateProperty");
   this.panel = aStyleInspector.panel;
 
+  // No results text.
+  this.noResults = this.styleDocument.getElementById("noResults");
+
   // The element that we're inspecting, and the document that it comes from.
   this.viewedElement = null;
   this.createStyleViews();
@@ -154,6 +157,9 @@ CssHtmlTree.prototype = {
   // Toggle for zebra striping
   _darkStripe: true,
 
+  // Number of visible properties
+  numVisibleProperties: 0,
+
   get showOnlyUserStyles()
   {
     return this.onlyUserStylesCheckbox.checked;
@@ -198,6 +204,9 @@ CssHtmlTree.prototype = {
             let propView = new PropertyView(this, name);
             CssHtmlTree.processTemplate(this.templateProperty,
               this.propertyContainer, propView, true);
+            if (propView.visible) {
+              this.numVisibleProperties++;
+            }
             propView.refreshAllSelectors();
             this.propertyViews.push(propView);
           }
@@ -209,6 +218,7 @@ CssHtmlTree.prototype = {
           } else {
             this.htmlComplete = true;
             this._panelRefreshTimeout = null;
+            this.noResults.hidden = this.numVisibleProperties > 0;
             Services.obs.notifyObservers(null, "StyleInspector-populated", null);
           }
         }
@@ -227,6 +237,11 @@ CssHtmlTree.prototype = {
       this.win.clearTimeout(this._panelRefreshTimeout);
     }
 
+    this.noResults.hidden = true;
+
+    // Reset visible property count
+    this.numVisibleProperties = 0;
+
     // Reset zebra striping.
     this._darkStripe = true;
 
@@ -246,6 +261,7 @@ CssHtmlTree.prototype = {
         this._panelRefreshTimeout = this.win.setTimeout(refreshView.bind(this), 15);
       } else {
         this._panelRefreshTimeout = null;
+        this.noResults.hidden = this.numVisibleProperties > 0;
         Services.obs.notifyObservers(null, "StyleInspector-populated", null);
       }
     }
@@ -579,6 +595,7 @@ PropertyView.prototype = {
       return;
     }
 
+    this.tree.numVisibleProperties++;
     this.valueNode.innerHTML = this.propertyInfo.value;
     this.refreshAllSelectors();
   },
diff --git a/browser/devtools/styleinspector/csshtmltree.xul b/browser/devtools/styleinspector/csshtmltree.xul
index 45e66b44aa9b..3ce7c9db6dd0 100644
--- a/browser/devtools/styleinspector/csshtmltree.xul
+++ b/browser/devtools/styleinspector/csshtmltree.xul
@@ -63,6 +63,11 @@
 <div id="path">
 </div>
 
+<!-- When no properties are found the following block is displayed. -->
+<div id="noResults" hidden="">
+  &noPropertiesFound;
+</div>
+
 <!-- The output from #templateProperty (below) is appended here. -->
 <div id="propertyContainer">
 </div>
diff --git a/browser/devtools/styleinspector/test/browser/Makefile.in b/browser/devtools/styleinspector/test/browser/Makefile.in
index f6c48b59dae9..26728730c0aa 100644
--- a/browser/devtools/styleinspector/test/browser/Makefile.in
+++ b/browser/devtools/styleinspector/test/browser/Makefile.in
@@ -51,6 +51,7 @@ _BROWSER_TEST_FILES = \
   browser_bug683672.js \
   browser_styleinspector_bug_672746_default_styles.js \
   browser_styleinspector_bug_672744_search_filter.js \
+  browser_styleinspector_bug_689759_no_results_placeholder.js \
   browser_bug_692400_element_style.js \
   browser_ruleview_editor.js \
   browser_ruleview_inherit.js \
diff --git a/browser/devtools/styleinspector/test/browser/browser_styleinspector_bug_689759_no_results_placeholder.js b/browser/devtools/styleinspector/test/browser/browser_styleinspector_bug_689759_no_results_placeholder.js
new file mode 100644
index 000000000000..0a7ae442d51e
--- /dev/null
+++ b/browser/devtools/styleinspector/test/browser/browser_styleinspector_bug_689759_no_results_placeholder.js
@@ -0,0 +1,118 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Tests that the no results placeholder works properly.
+
+let doc;
+let stylePanel;
+
+function createDocument()
+{
+  doc.body.innerHTML = '<style type="text/css"> ' +
+    '.matches {color: #F00;}</style>' +
+    '<span id="matches" class="matches">Some styled text</span>';
+  doc.title = "Tests that the no results placeholder works properly";
+  ok(window.StyleInspector, "StyleInspector exists");
+  stylePanel = new StyleInspector(window);
+  Services.obs.addObserver(runStyleInspectorTests, "StyleInspector-opened", false);
+  stylePanel.createPanel(false, function() {
+    stylePanel.open(doc.body);
+  });
+}
+
+function runStyleInspectorTests()
+{
+  Services.obs.removeObserver(runStyleInspectorTests, "StyleInspector-opened", false);
+
+  ok(stylePanel.isOpen(), "style inspector is open");
+
+  Services.obs.addObserver(SI_AddFilterText, "StyleInspector-populated", false);
+
+  let span = doc.querySelector("#matches");
+  ok(span, "captain, we have the matches span");
+
+  let htmlTree = stylePanel.cssHtmlTree;
+  stylePanel.selectNode(span);
+
+  is(span, htmlTree.viewedElement,
+    "style inspector node matches the selected node");
+  is(htmlTree.viewedElement, stylePanel.cssLogic.viewedElement,
+     "cssLogic node matches the cssHtmlTree node");
+}
+
+function SI_AddFilterText()
+{
+  Services.obs.removeObserver(SI_AddFilterText, "StyleInspector-populated", false);
+
+  let iframe = stylePanel.iframe;
+  let searchbar = stylePanel.cssHtmlTree.searchField;
+  let searchTerm = "xxxxx";
+
+  Services.obs.addObserver(SI_checkPlaceholderVisible, "StyleInspector-populated", false);
+  info("setting filter text to \"" + searchTerm + "\"");
+  searchbar.focus();
+  for each (let c in searchTerm) {
+    EventUtils.synthesizeKey(c, {}, iframe.contentWindow);
+  }
+}
+
+function SI_checkPlaceholderVisible()
+{
+  Services.obs.removeObserver(SI_checkPlaceholderVisible, "StyleInspector-populated", false);
+  info("SI_checkPlaceholderVisible called");
+  let placeholder = stylePanel.cssHtmlTree.noResults;
+  let iframe = stylePanel.iframe;
+  let display = iframe.contentWindow.getComputedStyle(placeholder).display;
+
+  is(display, "block", "placeholder is visible");
+
+  SI_ClearFilterText();
+}
+
+function SI_ClearFilterText()
+{
+  let iframe = stylePanel.iframe;
+  let searchbar = stylePanel.cssHtmlTree.searchField;
+
+  Services.obs.addObserver(SI_checkPlaceholderHidden, "StyleInspector-populated", false);
+  info("clearing filter text");
+  searchbar.focus();
+  searchbar.value = "";
+  EventUtils.synthesizeKey("c", {}, iframe.contentWindow);
+}
+
+function SI_checkPlaceholderHidden()
+{
+  Services.obs.removeObserver(SI_checkPlaceholderHidden, "StyleInspector-populated", false);
+  let placeholder = stylePanel.cssHtmlTree.noResults;
+  let iframe = stylePanel.iframe;
+  let display = iframe.contentWindow.getComputedStyle(placeholder).display;
+
+  is(display, "none", "placeholder is hidden");
+
+  Services.obs.addObserver(finishUp, "StyleInspector-closed", false);
+  stylePanel.close();
+}
+
+function finishUp()
+{
+  Services.obs.removeObserver(finishUp, "StyleInspector-closed", false);
+  ok(!stylePanel.isOpen(), "style inspector is closed");
+  doc = stylePanel = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,no results placeholder test";
+}
diff --git a/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd b/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd
index 07bc28aad96f..56427f2b788f 100644
--- a/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd
@@ -18,6 +18,11 @@
   -  This is the link title shown in the hover tooltip. -->
 <!ENTITY helpLinkTitle         "Read the documentation for this property">
 
+<!-- LOCALIZATION NOTE (noPropertiesFound): In the case where there are no CSS
+  -  properties to display e.g. due to search criteria this message is
+  -  displayed. -->
+<!ENTITY noPropertiesFound     "No CSS properties found.">
+
 <!-- LOCALIZATION NOTE (unmatchedSelectors): For each style property
   -  the panel shows whether there are any selectors that do not match the
   -  currently selected element. -->
diff --git a/browser/themes/gnomestripe/browser/devtools/csshtmltree.css b/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
index dd1df3f6102d..0f6fa69edfab 100644
--- a/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
@@ -224,6 +224,12 @@
   background-color: rgba(0,0,0,.022);
 }
 
+#noResults {
+  font-size: 18px;
+  margin-top: 5px;
+  text-align: center;
+}
+
 .header {
   color: -moz-dialogtext;
   background-color: -moz-dialog;
diff --git a/browser/themes/pinstripe/browser/devtools/csshtmltree.css b/browser/themes/pinstripe/browser/devtools/csshtmltree.css
index 626f146b733e..043739ab2b67 100644
--- a/browser/themes/pinstripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/pinstripe/browser/devtools/csshtmltree.css
@@ -222,6 +222,12 @@
   background-color: rgba(0,0,0,.022);
 }
 
+#noResults {
+  font-size: 18px;
+  margin-top: 5px;
+  text-align: center;
+}
+
 .header {
   color: -moz-dialogtext;
   background-color: -moz-dialog;
diff --git a/browser/themes/winstripe/browser/devtools/csshtmltree.css b/browser/themes/winstripe/browser/devtools/csshtmltree.css
index 7969e2ad7a03..0fa362039d03 100644
--- a/browser/themes/winstripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/winstripe/browser/devtools/csshtmltree.css
@@ -223,6 +223,12 @@
   background-color: rgba(0,0,0,.022);
 }
 
+#noResults {
+  font-size: 18px;
+  margin-top: 5px;
+  text-align: center;
+}
+
 .header {
   color: -moz-dialogtext;
   background-color: -moz-dialog;

From 54645c63bab48a740f13879dd02da89b21929805 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A3o=20Gottwald?= <dao@mozilla.com>
Date: Sun, 6 Nov 2011 10:26:00 -0800
Subject: [PATCH 08/21] Bug 699832 - Style Inspector needs a way to display
 treetwisties that will work on all operating systems. r=dcamp

---
 .../devtools/styleinspector/csshtmltree.xul   |  6 +--
 .../browser/devtools/csshtmltree.css          | 45 +++++++------------
 .../browser/devtools/csshtmltree.css          | 35 ++++++---------
 .../browser/devtools/csshtmltree.css          | 38 ++++++----------
 4 files changed, 46 insertions(+), 78 deletions(-)

diff --git a/browser/devtools/styleinspector/csshtmltree.xul b/browser/devtools/styleinspector/csshtmltree.xul
index 3ce7c9db6dd0..0f8f491cc543 100644
--- a/browser/devtools/styleinspector/csshtmltree.xul
+++ b/browser/devtools/styleinspector/csshtmltree.xul
@@ -126,8 +126,8 @@ To visually debug the templates without running firefox, alter the display:none
   -->
   <div id="templateProperty">
     <div class="${className}" save="${element}">
-      <div class="property-header" save="${propertyHeader}"
-           onclick="${propertyHeaderClick}">
+      <xul:hbox class="property-header" save="${propertyHeader}"
+                onclick="${propertyHeaderClick}">
         <div save="${matchedExpander}" class="match expander"/>
         <div class="property-name">${name}</div>
         <div class="helplink-container">
@@ -136,7 +136,7 @@ To visually debug the templates without running firefox, alter the display:none
           </a>
         </div>
         <div save="${valueNode}" class="property-value" dir="ltr">${value}</div>
-      </div>
+      </xul:hbox>
 
       <div save="${matchedSelectorsContainer}" class="rulelink">
       </div>
diff --git a/browser/themes/gnomestripe/browser/devtools/csshtmltree.css b/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
index 0f6fa69edfab..83f68c347dce 100644
--- a/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
@@ -83,13 +83,13 @@
   -moz-padding-end: 5px;
 }
 
- .rule-unmatched {
-   cursor: pointer;
-   padding: 2px;
-   -moz-padding-start: 4px;
-   -moz-padding-end: 0;
-   white-space: nowrap;
- }
+.rule-unmatched {
+  cursor: pointer;
+  padding: 2px;
+  -moz-padding-start: 4px;
+  -moz-padding-end: 0;
+  white-space: nowrap;
+}
 
 /* Take away these two :visited rules to get a core dumper     */
 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
@@ -107,21 +107,20 @@
 .helplink-container {
   position: relative;
   top: 2px;
-  display: inline-block;
-  visibility: hidden;
 }
 
 .helplink {
   display: block;
-  height: 0;
-  width: 14px;
+  height: 14px;
+  width: 0;
   overflow: hidden;
-  padding-top: 14px;
+  -moz-padding-start: 14px;
   background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
+  -moz-margin-end: 2px;
 }
 
-.property-header:hover > .helplink-container {
-  visibility: visible;
+.property-header:not(:hover) > .helplink-container {
+  visibility: hidden;
 }
 
 .unmatchedSelectorTable {
@@ -134,22 +133,13 @@
 }
 
 .expander {
-  width: 8px;
-  height: 8px;
-  float: left;
-  -moz-margin-start: 15px;
+  -moz-appearance: treetwisty;
+  -moz-margin-start: 10px;
   -moz-margin-end: 5px;
-  margin-top: 3px;
-  background: url("chrome://browser/skin/devtools/arrows.png") 48px 0;
-}
-
-.expander:-moz-locale-dir(rtl) {
-  float: right;
-  background-position: 40px 0;
 }
 
 .expander[open] {
-  background-position: 32px 0;
+  -moz-appearance: treetwistyopen;
 }
 
 .expandable {
@@ -161,7 +151,6 @@
 }
 
 .expandable > .match {
-  margin-top: 5px;
   visibility: visible;
 }
 
@@ -170,13 +159,11 @@
 }
 
 .property-name {
-  display: inline-block;
   font-size: 12px;
   color: -moz-FieldText;
   width: 220px;
 }
 .property-value {
-  display: inline-block;
   font-size: 10px;
   color: grey;
 }
diff --git a/browser/themes/pinstripe/browser/devtools/csshtmltree.css b/browser/themes/pinstripe/browser/devtools/csshtmltree.css
index 043739ab2b67..3f2e4ff779c7 100644
--- a/browser/themes/pinstripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/pinstripe/browser/devtools/csshtmltree.css
@@ -83,13 +83,13 @@
   -moz-padding-end: 5px;
 }
 
- .rule-unmatched {
-   cursor: pointer;
-   padding: 2px;
-   -moz-padding-start: 4px;
-   -moz-padding-end: 0;
-   white-space: nowrap;
- }
+.rule-unmatched {
+  cursor: pointer;
+  padding: 2px;
+  -moz-padding-start: 4px;
+  -moz-padding-end: 0;
+  white-space: nowrap;
+}
 
 /* Take away these two :visited rules to get a core dumper     */
 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
@@ -107,21 +107,20 @@
 .helplink-container {
   position: relative;
   top: 2px;
-  display: inline-block;
-  visibility: hidden;
 }
 
 .helplink {
   display: block;
-  height: 0;
-  width: 14px;
+  height: 14px;
+  width: 0;
   overflow: hidden;
-  padding-top: 14px;
+  -moz-padding-start: 14px;
   background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
+  -moz-margin-end: 2px;
 }
 
-.property-header:hover > .helplink-container {
-  visibility: visible;
+.property-header:not(:hover) > .helplink-container {
+  visibility: hidden;
 }
 
 .unmatchedSelectorTable {
@@ -137,15 +136,10 @@
   -moz-appearance: treetwisty;
   width: 12px;
   height: 12px;
-  float: left;
   -moz-margin-start: 5px;
   -moz-margin-end: 5px;
 }
 
-.expander:-moz-locale-dir(rtl) {
-  float: right;
-}
-
 .expander[open] {
   -moz-appearance: treetwistyopen;
 }
@@ -159,7 +153,6 @@
 }
 
 .expandable > .match {
-  margin-top: 5px;
   visibility: visible;
 }
 
@@ -168,13 +161,11 @@
 }
 
 .property-name {
-  display: inline-block;
   font-size: 12px;
   color: -moz-FieldText;
   width: 220px;
 }
 .property-value {
-  display: inline-block;
   font-size: 10px;
   color: grey;
 }
diff --git a/browser/themes/winstripe/browser/devtools/csshtmltree.css b/browser/themes/winstripe/browser/devtools/csshtmltree.css
index 0fa362039d03..ae1fe48db042 100644
--- a/browser/themes/winstripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/winstripe/browser/devtools/csshtmltree.css
@@ -83,13 +83,13 @@
   -moz-padding-end: 5px;
 }
 
- .rule-unmatched {
-   cursor: pointer;
-   padding: 2px;
-   -moz-padding-start: 4px;
-   -moz-padding-end: 0;
-   white-space: nowrap;
- }
+.rule-unmatched {
+  cursor: pointer;
+  padding: 2px;
+  -moz-padding-start: 4px;
+  -moz-padding-end: 0;
+  white-space: nowrap;
+}
 
 /* Take away these two :visited rules to get a core dumper     */
 /* See https://bugzilla.mozilla.org/show_bug.cgi?id=575675#c30 */
@@ -107,21 +107,20 @@
 .helplink-container {
   position: relative;
   top: 2px;
-  display: inline-block;
-  visibility: hidden;
 }
 
 .helplink {
   display: block;
-  height: 0;
-  width: 14px;
+  height: 14px;
+  width: 0;
   overflow: hidden;
-  padding-top: 14px;
+  -moz-padding-start: 14px;
   background-image: url("chrome://browser/skin/devtools/goto-mdn.png");
+  -moz-margin-end: 2px;
 }
 
-.property-header:hover > .helplink-container {
-  visibility: visible;
+.property-header:not(:hover) > .helplink-container {
+  visibility: hidden;
 }
 
 .unmatchedSelectorTable {
@@ -136,15 +135,9 @@
 .expander {
   width: 9px;
   height: 9px;
-  float: left;
-  margin-top: 1px;
   -moz-margin-start: 5px;
   -moz-margin-end: 5px;
-  background-image: url("chrome://global/skin/tree/twisty-clsd.png");
-}
-
-.expander:-moz-locale-dir(rtl) {
-  float: right;
+  background: url("chrome://global/skin/tree/twisty-clsd.png") center center no-repeat;
 }
 
 .expander[open] {
@@ -160,7 +153,6 @@
 }
 
 .expandable > .match {
-  margin-top: 5px;
   visibility: visible;
 }
 
@@ -169,13 +161,11 @@
 }
 
 .property-name {
-  display: inline-block;
   font-size: 12px;
   color: -moz-FieldText;
   width: 220px;
 }
 .property-value {
-  display: inline-block;
   font-size: 10px;
   color: grey;
 }

From d920f066afe73b3b1619891d1f079a4b223cc1c2 Mon Sep 17 00:00:00 2001
From: Dave Camp <dcamp@mozilla.com>
Date: Sun, 6 Nov 2011 19:02:08 -0800
Subject: [PATCH 09/21] Bug 699978 - Tools should notify the highlighter when
 they've modified a node. r=robcee

---
 browser/devtools/highlighter/TreePanel.jsm    |   1 +
 browser/devtools/highlighter/inspector.jsm    |  48 +++++-
 browser/devtools/highlighter/test/Makefile.in |   1 +
 .../test/browser_inspector_changes.js         | 158 ++++++++++++++++++
 .../devtools/styleinspector/CssHtmlTree.jsm   |   8 +-
 .../devtools/styleinspector/CssRuleView.jsm   |  39 ++++-
 .../styleinspector/StyleInspector.jsm         |  12 ++
 .../test/browser/browser_ruleview_ui.js       |  24 +++
 8 files changed, 279 insertions(+), 12 deletions(-)
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_changes.js

diff --git a/browser/devtools/highlighter/TreePanel.jsm b/browser/devtools/highlighter/TreePanel.jsm
index 24213cf44bfa..cd46ebcd0b5e 100644
--- a/browser/devtools/highlighter/TreePanel.jsm
+++ b/browser/devtools/highlighter/TreePanel.jsm
@@ -577,6 +577,7 @@ TreePanel.prototype = {
     this.editingContext.attrObj.innerHTML = editorInput.value;
 
     this.IUI.isDirty = true;
+    this.IUI.nodeChanged(this.registrationObject);
 
     // event notification
     Services.obs.notifyObservers(null, this.IUI.INSPECTOR_NOTIFICATIONS.EDITOR_SAVED,
diff --git a/browser/devtools/highlighter/inspector.jsm b/browser/devtools/highlighter/inspector.jsm
index abc1e5bed6af..86a281e46511 100644
--- a/browser/devtools/highlighter/inspector.jsm
+++ b/browser/devtools/highlighter/inspector.jsm
@@ -1158,6 +1158,19 @@ InspectorUI.prototype = {
     this.toolsSelect(aScroll);
   },
 
+  /**
+   * Called when the highlighted node is changed by a tool.
+   *
+   * @param object aUpdater
+   *        The tool that triggered the update (if any), that tool's
+   *        onChanged will not be called.
+   */
+  nodeChanged: function IUI_nodeChanged(aUpdater)
+  {
+    this.highlighter.highlight();
+    this.toolsOnChanged(aUpdater);
+  },
+
   /////////////////////////////////////////////////////////////////////////
   //// Event Handling
 
@@ -1340,6 +1353,10 @@ InspectorUI.prototype = {
       iframe.removeEventListener("load", boundLoadListener, true);
       let doc = iframe.contentDocument;
       this.ruleView = new CssRuleView(doc);
+      this.boundRuleViewChanged = this.ruleViewChanged.bind(this);
+      this.ruleView.element.addEventListener("CssRuleViewChanged",
+                                             this.boundRuleViewChanged);
+
       doc.documentElement.appendChild(this.ruleView.element);
       this.ruleView.highlight(this.selection);
       Services.obs.notifyObservers(null,
@@ -1370,6 +1387,12 @@ InspectorUI.prototype = {
       this.ruleView.highlight(aNode);
   },
 
+  ruleViewChanged: function IUI_ruleViewChanged()
+  {
+    this.isDirty = true;
+    this.nodeChanged(this.ruleViewObject);
+  },
+
   /**
    * Destroy the rule view.
    */
@@ -1379,6 +1402,9 @@ InspectorUI.prototype = {
     iframe.parentNode.removeChild(iframe);
 
     if (this.ruleView) {
+      this.ruleView.element.removeEventListener("CssRuleViewChanged",
+                                                this.boundRuleViewChanged);
+      delete boundRuleViewChanged;
       this.ruleView.clear();
       delete this.ruleView;
     }
@@ -1685,8 +1711,6 @@ InspectorUI.prototype = {
    */
   toolShow: function IUI_toolShow(aTool)
   {
-    aTool.show.call(aTool.context, this.selection);
-
     let btn = this.chromeDoc.getElementById(this.getToolbarButtonId(aTool.id));
     btn.setAttribute("checked", "true");
     if (aTool.sidebar) {
@@ -1697,6 +1721,8 @@ InspectorUI.prototype = {
             this.getToolbarButtonId(other.id)).removeAttribute("checked");
       }.bind(this));
     }
+
+    aTool.show.call(aTool.context, this.selection);
   },
 
   /**
@@ -1848,13 +1874,29 @@ InspectorUI.prototype = {
    */
   toolsDim: function IUI_toolsDim(aState)
   {
-    this.toolsDo(function IUI_toolsOnSelect(aTool) {
+    this.toolsDo(function IUI_toolsDim(aTool) {
       if (aTool.isOpen && "dim" in aTool) {
         aTool.dim.call(aTool.context, aState);
       }
     });
   },
 
+  /**
+   * Notify registered tools of changes to the highlighted element.
+   *
+   * @param object aUpdater
+   *        The tool that triggered the update (if any), that tool's
+   *        onChanged will not be called.
+   */
+  toolsOnChanged: function IUI_toolsChanged(aUpdater)
+  {
+    this.toolsDo(function IUI_toolsOnChanged(aTool) {
+      if (aTool.isOpen && ("onChanged" in aTool) && aTool != aUpdater) {
+        aTool.onChanged.call(aTool.context);
+      }
+    });
+  },
+
   /**
    * Loop through all registered tools and pass each into the provided function
    * @param aFunction The function to which each tool is to be passed
diff --git a/browser/devtools/highlighter/test/Makefile.in b/browser/devtools/highlighter/test/Makefile.in
index 2b39a5d2913d..a665483c651b 100644
--- a/browser/devtools/highlighter/test/Makefile.in
+++ b/browser/devtools/highlighter/test/Makefile.in
@@ -66,6 +66,7 @@ _BROWSER_FILES = \
 		browser_inspector_breadcrumbs.html \
 		browser_inspector_breadcrumbs.js \
 		browser_inspector_bug_699308_iframe_navigation.js \
+        browser_inspector_changes.js \
 		$(NULL)
 
 # Disabled due to constant failures
diff --git a/browser/devtools/highlighter/test/browser_inspector_changes.js b/browser/devtools/highlighter/test/browser_inspector_changes.js
new file mode 100644
index 000000000000..cec5ac15f62d
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_changes.js
@@ -0,0 +1,158 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+/* ***** 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 Inspect Tests.
+ *
+ * The Initial Developer of the Original Code is
+ * The Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Dave Camp <dcamp@mozilla.com>
+ *   Rob Campbell <rcampbell@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
+ * 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 ***** */
+let doc;
+let testDiv;
+
+function createDocument()
+{
+  doc.body.innerHTML = '<div id="testdiv">Test div!</div>';
+  doc.title = "Inspector Change Test";
+  startInspectorTests();
+}
+
+
+function getInspectorProp(aName)
+{
+  for each (let view in InspectorUI.stylePanel.cssHtmlTree.propertyViews) {
+    if (view.name == aName) {
+      return view;
+    }
+  }
+  return null;
+}
+
+function startInspectorTests()
+{
+  ok(InspectorUI, "InspectorUI variable exists");
+  Services.obs.addObserver(runInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.toggleInspectorUI();
+}
+
+function runInspectorTests()
+{
+  Services.obs.removeObserver(runInspectorTests, InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+  testDiv = doc.getElementById("testdiv");
+
+  testDiv.style.fontSize = "10px";
+
+  InspectorUI.inspectNode(testDiv);
+  InspectorUI.stopInspecting();
+
+  // Start up the style inspector panel...
+  Services.obs.addObserver(stylePanelTests, "StyleInspector-populated", false);
+
+  executeSoon(function() {
+    InspectorUI.showSidebar();
+    document.getElementById(InspectorUI.getToolbarButtonId("styleinspector")).click();
+  });
+}
+
+function stylePanelTests()
+{
+  Services.obs.removeObserver(stylePanelTests, "StyleInspector-populated");
+
+  ok(InspectorUI.isSidebarOpen, "Inspector Sidebar is open");
+  ok(InspectorUI.stylePanel.cssHtmlTree, "Style Panel has a cssHtmlTree");
+
+  let propView = getInspectorProp("font-size");
+  is(propView.value, "10px", "Style inspector should be showing the correct font size.");
+
+  Services.obs.addObserver(stylePanelAfterChange, "StyleInspector-populated", false);
+
+  testDiv.style.fontSize = "15px";
+  InspectorUI.nodeChanged();
+}
+
+function stylePanelAfterChange()
+{
+  Services.obs.removeObserver(stylePanelAfterChange, "StyleInspector-populated");
+
+  let propView = getInspectorProp("font-size");
+  is(propView.value, "15px", "Style inspector should be showing the new font size.");
+
+  stylePanelNotActive();
+}
+
+function stylePanelNotActive()
+{
+  // Tests changes made while the style panel is not active.
+  InspectorUI.ruleButton.click();
+  executeSoon(function() {
+    testDiv.style.fontSize = "20px";
+    Services.obs.addObserver(stylePanelAfterSwitch, "StyleInspector-populated", false);
+    document.getElementById(InspectorUI.getToolbarButtonId("styleinspector")).click();
+  });
+}
+
+function stylePanelAfterSwitch()
+{
+  Services.obs.removeObserver(stylePanelAfterSwitch, "StyleInspector-populated");
+
+  let propView = getInspectorProp("font-size");
+  is(propView.value, "20px", "Style inspector should be showing the newest font size.");
+
+  Services.obs.addObserver(finishTest, InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED, false);
+  executeSoon(function() {
+    InspectorUI.closeInspectorUI(true);
+  });
+}
+
+function finishTest()
+{
+  Services.obs.removeObserver(finishTest,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.CLOSED);
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for inspector";
+}
+
diff --git a/browser/devtools/styleinspector/CssHtmlTree.jsm b/browser/devtools/styleinspector/CssHtmlTree.jsm
index 480cb54afc52..4c7db92792b0 100644
--- a/browser/devtools/styleinspector/CssHtmlTree.jsm
+++ b/browser/devtools/styleinspector/CssHtmlTree.jsm
@@ -172,10 +172,6 @@ CssHtmlTree.prototype = {
    */
   highlight: function CssHtmlTree_highlight(aElement)
   {
-    if (this.viewedElement == aElement) {
-      return;
-    }
-
     this.viewedElement = aElement;
     this._unmatchedProperties = null;
     this._matchedProperties = null;
@@ -529,7 +525,7 @@ PropertyView.prototype = {
    */
   get hasMatchedSelectors()
   {
-    return this.tree.matchedProperties[this.name];
+    return this.name in this.tree.matchedProperties;
   },
 
   /**
@@ -537,7 +533,7 @@ PropertyView.prototype = {
    */
   get hasUnmatchedSelectors()
   {
-    return this.tree.hasUnmatchedSelectors(this.name);
+    return this.name in this.tree.hasUnmatchedSelectors;
   },
 
   /**
diff --git a/browser/devtools/styleinspector/CssRuleView.jsm b/browser/devtools/styleinspector/CssRuleView.jsm
index 3fc576e18020..3c6b86246e7e 100644
--- a/browser/devtools/styleinspector/CssRuleView.jsm
+++ b/browser/devtools/styleinspector/CssRuleView.jsm
@@ -117,6 +117,17 @@ ElementStyle.prototype = {
 
   domUtils: Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils),
 
+  /**
+   * Called by the Rule object when it has been changed through the
+   * setProperty* methods.
+   */
+  _changed: function ElementStyle_changed()
+  {
+    if (this.onChanged) {
+      this.onChanged();
+    }
+  },
+
   /**
    * Refresh the list of rules to be displayed for the active element.
    * Upon completion, this.rules[] will hold a list of Rule objects.
@@ -388,6 +399,7 @@ Rule.prototype = {
       prop.priority = this.style.getPropertyPriority(prop.name);
       prop.updateComputed();
     }
+    this.elementStyle._changed();
 
     this.elementStyle.markOverridden();
   },
@@ -627,7 +639,15 @@ CssRuleView.prototype = {
       return;
     }
 
+    if (this._elementStyle) {
+      delete this._elementStyle.onChanged;
+    }
+
     this._elementStyle = new ElementStyle(aElement);
+    this._elementStyle.onChanged = function() {
+      this._changed();
+    }.bind(this);
+
     this._createEditors();
   },
 
@@ -643,6 +663,17 @@ CssRuleView.prototype = {
     this._elementStyle = null;
   },
 
+  /**
+   * Called when the user has made changes to the ElementStyle.
+   * Emits an event that clients can listen to.
+   */
+  _changed: function CssRuleView_changed()
+  {
+    var evt = this.doc.createEvent("Events");
+    evt.initEvent("CssRuleViewChanged", true, false);
+    this.element.dispatchEvent(evt);
+  },
+
   /**
    * Creates editor UI for each of the rules in _elementStyle.
    */
@@ -1003,10 +1034,12 @@ TextPropertyEditor.prototype = {
    */
   _parseValue: function TextPropertyEditor_parseValue(aValue)
   {
-    let [value, priority] = aValue.split("!", 2);
+    let pieces = aValue.split("!", 2);
+    let value = pieces[0];
+    let priority = pieces.length > 1 ? pieces[1] : "";
     return {
-      value: value.trim(),
-      priority: (priority ? priority.trim() : "")
+      value: pieces[0].trim(),
+      priority: (pieces.length > 1 ? pieces[1].trim() : "")
     };
   },
 
diff --git a/browser/devtools/styleinspector/StyleInspector.jsm b/browser/devtools/styleinspector/StyleInspector.jsm
index c2bfe00ae1ee..2d59a6ec6562 100644
--- a/browser/devtools/styleinspector/StyleInspector.jsm
+++ b/browser/devtools/styleinspector/StyleInspector.jsm
@@ -87,6 +87,7 @@ StyleInspector.prototype = {
         context: this,
         get isOpen() isOpen(),
         onSelect: this.selectNode,
+        onChanged: this.updateNode,
         show: this.open,
         hide: this.close,
         dim: this.dimTool,
@@ -247,6 +248,17 @@ StyleInspector.prototype = {
     }
   },
 
+  /**
+   * Update the display for the currently-selected node.
+   */
+  updateNode: function SI_updateNode()
+  {
+    if (this.isOpen() && !this.dimmed) {
+      this.cssLogic.highlight(this.selectedNode);
+      this.cssHtmlTree.refreshPanel();
+    }
+  },
+
   /**
    * Dim or undim a panel by setting or removing a dimmed attribute.
    * @param aState
diff --git a/browser/devtools/styleinspector/test/browser/browser_ruleview_ui.js b/browser/devtools/styleinspector/test/browser/browser_ruleview_ui.js
index 655db48ffacb..636d5dc5f891 100644
--- a/browser/devtools/styleinspector/test/browser/browser_ruleview_ui.js
+++ b/browser/devtools/styleinspector/test/browser/browser_ruleview_ui.js
@@ -32,6 +32,18 @@ function waitForEditorBlur(aEditor, aCallback)
   }, false);
 }
 
+var gRuleViewChanged = false;
+function ruleViewChanged()
+{
+  gRuleViewChanged = true;
+}
+
+function expectChange()
+{
+  ok(gRuleViewChanged, "Rule view should have fired a change event.");
+  gRuleViewChanged = false;
+}
+
 function startTest()
 {
   let style = '' +
@@ -54,6 +66,7 @@ function startTest()
     let doc = ruleDialog.document;
     ruleView = new CssRuleView(doc);
     doc.documentElement.appendChild(ruleView.element);
+    ruleView.element.addEventListener("CssRuleViewChanged", ruleViewChanged, false);
     ruleView.highlight(testElement);
     waitForFocus(testCancelNew, ruleDialog);
   }, true);
@@ -69,6 +82,7 @@ function testCancelNew()
     is(elementRuleEditor.newPropSpan.inplaceEditor, aEditor, "Next focused editor should be the new property editor.");
     let input = aEditor.input;
     waitForEditorBlur(aEditor, function () {
+      ok(!gRuleViewChanged, "Shouldn't get a change event after a cancel.");
       is(elementRuleEditor.rule.textProps.length,  0, "Should have canceled creating a new text property.");
       ok(!elementRuleEditor.propertyList.hasChildNodes(), "Should not have any properties.");
       testCreateNew();
@@ -91,6 +105,7 @@ function testCreateNew()
     input.value = "background-color";
 
     waitForEditorFocus(elementRuleEditor.element, function onNewValue(aEditor) {
+      expectChange();
       is(elementRuleEditor.rule.textProps.length,  1, "Should have created a new text property.");
       is(elementRuleEditor.propertyList.children.length, 1, "Should have created a property editor.");
       let textProp = elementRuleEditor.rule.textProps[0];
@@ -98,6 +113,7 @@ function testCreateNew()
 
       aEditor.input.value = "purple";
       waitForEditorBlur(aEditor, function() {
+        expectChange();
         is(textProp.value, "purple", "Text prop should have been changed.");
         testEditProperty();
       });
@@ -120,10 +136,12 @@ function testEditProperty()
     is(propEditor.nameSpan.inplaceEditor, aEditor, "Next focused editor should be the name editor.");
     let input = aEditor.input;
     waitForEditorFocus(propEditor.element, function onNewName(aEditor) {
+      expectChange();
       input = aEditor.input;
       is(propEditor.valueSpan.inplaceEditor, aEditor, "Focus should have moved to the value.");
 
       waitForEditorBlur(aEditor, function() {
+        expectChange();
         is(idRuleEditor.rule.style.getPropertyValue("border-color"), "red",
            "border-color should have been set.");
         testDisableProperty();
@@ -150,14 +168,20 @@ function testDisableProperty()
 
   propEditor.enable.click();
   is(idRuleEditor.rule.style.getPropertyValue("border-color"), "", "Border-color should have been unset.");
+  expectChange();
+
   propEditor.enable.click();
   is(idRuleEditor.rule.style.getPropertyValue("border-color"), "red",
      "Border-color should have been reset.");
+  expectChange();
+
   finishTest();
 }
 
 function finishTest()
 {
+  ruleView.element.removeEventListener("CssRuleViewChanged", ruleViewChanged, false);
+  ruleView.clear();
   ruleDialog.close();
   ruleDialog = ruleView = null;
   doc = null;

From 3aa13acce3c5b4ff8e6eb7eac54b2cbe254a5a8f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A3o=20Gottwald?= <dao@mozilla.com>
Date: Mon, 7 Nov 2011 13:52:06 +0100
Subject: [PATCH 10/21] Bug 700243 - Rename csshtmltree.xul's 'header' class.
 r=msucan

---
 browser/devtools/styleinspector/csshtmltree.xul    | 14 +++++++++-----
 .../gnomestripe/browser/devtools/csshtmltree.css   |  5 +++--
 .../pinstripe/browser/devtools/csshtmltree.css     |  5 +++--
 .../winstripe/browser/devtools/csshtmltree.css     |  5 +++--
 4 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/browser/devtools/styleinspector/csshtmltree.xul b/browser/devtools/styleinspector/csshtmltree.xul
index 0f8f491cc543..d4bd5cc7ada8 100644
--- a/browser/devtools/styleinspector/csshtmltree.xul
+++ b/browser/devtools/styleinspector/csshtmltree.xul
@@ -19,9 +19,10 @@
    - the Initial Developer. All Rights Reserved.
    -
    - Contributor(s):
-   -   Joe Walker (jwalker@mozilla.com) (original author)
+   -   Joe Walker <jwalker@mozilla.com> (original author)
    -   Mihai Șucan <mihai.sucan@gmail.com>
    -   Michael Ratcliffe <mratcliffe@mozilla.com>
+   -   Dão Gottwald <dao@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
@@ -36,8 +37,10 @@
    - the terms of any one of the MPL, the GPL or the LGPL.
    -
    - ***** END LICENSE BLOCK ***** -->
+
 <?xml-stylesheet href="chrome://global/skin/global.css"?>
 <?xml-stylesheet href="chrome://browser/skin/devtools/csshtmltree.css" type="text/css"?>
+
 <!DOCTYPE window [
   <!ENTITY % inspectorDTD SYSTEM "chrome://browser/locale/devtools/styleinspector.dtd">
   %inspectorDTD;
@@ -53,6 +56,7 @@
   <!ATTLIST loop if CDATA #IMPLIED>
   <!ATTLIST tr if CDATA #IMPLIED>
 ]>
+
 <xul:window xmlns="http://www.w3.org/1999/xhtml"
             xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 
@@ -88,15 +92,15 @@ To visually debug the templates without running firefox, alter the display:none
   styles" checkbox. For data it needs an instance of CssHtmlTree.
   -->
   <div id="templateRoot">
-    <xul:hbox class="header" flex="1">
+    <xul:hbox class="headerControls" flex="1">
       <label class="userStylesLabel">
         <input class="onlyuserstyles" save="${onlyUserStylesCheckbox}"
                type="checkbox" onchange="${onlyUserStylesChanged}" checked=""/>
         &userStylesLabel;
       </label>
       <xul:textbox class="searchfield" type="search" save="${searchField}"
-                    placeholder="&userStylesSearch;"
-                    oncommand="${filterChanged}"/>
+                   placeholder="&userStylesSearch;"
+                   oncommand="${filterChanged}"/>
     </xul:hbox>
   </div>
 
@@ -161,7 +165,7 @@ To visually debug the templates without running firefox, alter the display:none
           </td>
           <td class="rule-link">
             <a target="_blank" href="view-source:${selector.selectorInfo.href}" class="link"
-                title="${selector.selectorInfo.href}">${selector.selectorInfo.source}</a>
+               title="${selector.selectorInfo.href}">${selector.selectorInfo.source}</a>
           </td>
         </tr>
       </loop>
diff --git a/browser/themes/gnomestripe/browser/devtools/csshtmltree.css b/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
index 83f68c347dce..1d643f02f04e 100644
--- a/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
@@ -22,6 +22,7 @@
  *   Joe Walker <jwalker@mozilla.com> (original author)
  *   Mihai Șucan <mihai.sucan@gmail.com>
  *   Michael Ratcliffe <mratcliffe@mozilla.com>
+ *   Dão Gottwald <dao@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
@@ -217,10 +218,10 @@
   text-align: center;
 }
 
-.header {
+.headerControls {
   color: -moz-dialogtext;
   background-color: -moz-dialog;
-  padding: 5px 0 0;
+  padding-top: 5px;
 }
 
 .onlyuserstyles,
diff --git a/browser/themes/pinstripe/browser/devtools/csshtmltree.css b/browser/themes/pinstripe/browser/devtools/csshtmltree.css
index 3f2e4ff779c7..e62f2a96b473 100644
--- a/browser/themes/pinstripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/pinstripe/browser/devtools/csshtmltree.css
@@ -22,6 +22,7 @@
  *   Joe Walker <jwalker@mozilla.com> (original author)
  *   Mihai Șucan <mihai.sucan@gmail.com>
  *   Michael Ratcliffe <mratcliffe@mozilla.com>
+ *   Dão Gottwald <dao@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
@@ -219,10 +220,10 @@
   text-align: center;
 }
 
-.header {
+.headerControls {
   color: -moz-dialogtext;
   background-color: -moz-dialog;
-  padding: 5px 0 0;
+  padding-top: 5px;
 }
 
 .onlyuserstyles,
diff --git a/browser/themes/winstripe/browser/devtools/csshtmltree.css b/browser/themes/winstripe/browser/devtools/csshtmltree.css
index ae1fe48db042..c5f5d3798d89 100644
--- a/browser/themes/winstripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/winstripe/browser/devtools/csshtmltree.css
@@ -22,6 +22,7 @@
  *   Joe Walker <jwalker@mozilla.com> (original author)
  *   Mihai Șucan <mihai.sucan@gmail.com>
  *   Michael Ratcliffe <mratcliffe@mozilla.com>
+ *   Dão Gottwald <dao@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
@@ -219,10 +220,10 @@
   text-align: center;
 }
 
-.header {
+.headerControls {
   color: -moz-dialogtext;
   background-color: -moz-dialog;
-  padding: 5px 0 0;
+  padding-top: 5px;
 }
 
 .onlyuserstyles,

From a64b471f8c79772d3112a8068b079177be57d940 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A3o=20Gottwald?= <dao@mozilla.com>
Date: Mon, 7 Nov 2011 16:24:44 +0100
Subject: [PATCH 11/21] Bug 700272 - Remove non-functional resizer from the
 style inspector. r=rcampbell

---
 browser/devtools/styleinspector/csshtmltree.xul | 2 --
 1 file changed, 2 deletions(-)

diff --git a/browser/devtools/styleinspector/csshtmltree.xul b/browser/devtools/styleinspector/csshtmltree.xul
index d4bd5cc7ada8..cad4f35ab636 100644
--- a/browser/devtools/styleinspector/csshtmltree.xul
+++ b/browser/devtools/styleinspector/csshtmltree.xul
@@ -80,8 +80,6 @@
   <xul:label class="legendKey bestmatch">&bestMatch;</xul:label>
   <xul:label class="legendKey matched">&matched;</xul:label>
   <xul:label class="legendKey parentmatch">&parentMatch;</xul:label>
-  <xul:spacer flex="1"/>
-  <xul:resizer dir="bottomright"/>
 </xul:hbox>
 <!--
 To visually debug the templates without running firefox, alter the display:none

From c1b24fe9483a8ccc804d0fcdd38c81ad086cd289 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?D=C3=A3o=20Gottwald?= <dao@mozilla.com>
Date: Mon, 7 Nov 2011 16:25:08 +0100
Subject: [PATCH 12/21] Bug 699002 - Use a xul:checkbox for "Only user styles"
 option. r=rcampbell

---
 .../devtools/styleinspector/csshtmltree.xul    | 12 +++++-------
 .../browser/devtools/csshtmltree.css           | 18 ++----------------
 .../pinstripe/browser/devtools/csshtmltree.css | 18 ++----------------
 .../winstripe/browser/devtools/csshtmltree.css | 18 ++----------------
 4 files changed, 11 insertions(+), 55 deletions(-)

diff --git a/browser/devtools/styleinspector/csshtmltree.xul b/browser/devtools/styleinspector/csshtmltree.xul
index cad4f35ab636..79417ff8f9cd 100644
--- a/browser/devtools/styleinspector/csshtmltree.xul
+++ b/browser/devtools/styleinspector/csshtmltree.xul
@@ -90,14 +90,12 @@ To visually debug the templates without running firefox, alter the display:none
   styles" checkbox. For data it needs an instance of CssHtmlTree.
   -->
   <div id="templateRoot">
-    <xul:hbox class="headerControls" flex="1">
-      <label class="userStylesLabel">
-        <input class="onlyuserstyles" save="${onlyUserStylesCheckbox}"
-               type="checkbox" onchange="${onlyUserStylesChanged}" checked=""/>
-        &userStylesLabel;
-      </label>
+    <xul:hbox class="headerControls" flex="1" align="center">
+      <xul:checkbox class="onlyuserstyles" save="${onlyUserStylesCheckbox}"
+                    oncommand="${onlyUserStylesChanged}" checked="true"
+                    label="&userStylesLabel;"/>
       <xul:textbox class="searchfield" type="search" save="${searchField}"
-                   placeholder="&userStylesSearch;"
+                   placeholder="&userStylesSearch;" flex="1"
                    oncommand="${filterChanged}"/>
     </xul:hbox>
   </div>
diff --git a/browser/themes/gnomestripe/browser/devtools/csshtmltree.css b/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
index 1d643f02f04e..f6977d95eeb0 100644
--- a/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
@@ -224,27 +224,13 @@
   padding-top: 5px;
 }
 
-.onlyuserstyles,
-.userStylesLabel {
-  cursor: pointer;
-}
-
-.userStylesLabel {
-  display: -moz-box;
-  white-space: nowrap;
-}
-
 .onlyuserstyles {
-  position: relative;
-  top: 3px;
-  font-family: sans-serif;
+  cursor: pointer;
   font-size: 11px;
 }
 
 .searchfield {
-  display: -moz-box;
-  -moz-box-flex: 1;
-  margin-left: 10px;
+  -moz-margin-start: 10px;
 }
 
 .styleinspector-legend {
diff --git a/browser/themes/pinstripe/browser/devtools/csshtmltree.css b/browser/themes/pinstripe/browser/devtools/csshtmltree.css
index e62f2a96b473..86a584a85bce 100644
--- a/browser/themes/pinstripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/pinstripe/browser/devtools/csshtmltree.css
@@ -226,27 +226,13 @@
   padding-top: 5px;
 }
 
-.onlyuserstyles,
-.userStylesLabel {
-  cursor: pointer;
-}
-
-.userStylesLabel {
-  display: -moz-box;
-  white-space: nowrap;
-}
-
 .onlyuserstyles {
-  position: relative;
-  top: 3px;
-  font-family: sans-serif;
+  cursor: pointer;
   font-size: 11px;
 }
 
 .searchfield {
-  display: -moz-box;
-  -moz-box-flex: 1;
-  margin-left: 10px;
+  -moz-margin-start: 10px;
 }
 
 .styleinspector-legend {
diff --git a/browser/themes/winstripe/browser/devtools/csshtmltree.css b/browser/themes/winstripe/browser/devtools/csshtmltree.css
index c5f5d3798d89..be962a00ed9d 100644
--- a/browser/themes/winstripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/winstripe/browser/devtools/csshtmltree.css
@@ -226,27 +226,13 @@
   padding-top: 5px;
 }
 
-.onlyuserstyles,
-.userStylesLabel {
-  cursor: pointer;
-}
-
-.userStylesLabel {
-  display: -moz-box;
-  white-space: nowrap;
-}
-
 .onlyuserstyles {
-  position: relative;
-  top: 3px;
-  font-family: sans-serif;
+  cursor: pointer;
   font-size: 11px;
 }
 
 .searchfield {
-  display: -moz-box;
-  -moz-box-flex: 1;
-  margin-left: 10px;
+  -moz-margin-start: 10px;
 }
 
 .styleinspector-legend {

From 04e5c9080f6254d8894d774abbe425f48e7aab45 Mon Sep 17 00:00:00 2001
From: Dave Camp <dcamp@mozilla.com>
Date: Mon, 7 Nov 2011 10:35:39 -0800
Subject: [PATCH 13/21] Bug 691978 - CssLogic doesn't discern between inherited
 and not-inherited properties. r=msucan

---
 browser/devtools/styleinspector/CssLogic.jsm  | 17 +++++--
 .../styleinspector/test/browser/Makefile.in   |  1 +
 .../browser/browser_csslogic_inherited.js     | 46 +++++++++++++++++++
 3 files changed, 59 insertions(+), 5 deletions(-)
 create mode 100644 browser/devtools/styleinspector/test/browser/browser_csslogic_inherited.js

diff --git a/browser/devtools/styleinspector/CssLogic.jsm b/browser/devtools/styleinspector/CssLogic.jsm
index 278b915b5f5d..d4b03d1c2a4e 100644
--- a/browser/devtools/styleinspector/CssLogic.jsm
+++ b/browser/devtools/styleinspector/CssLogic.jsm
@@ -604,15 +604,19 @@ CssLogic.prototype = {
 
     this._matchedRules.some(function(aValue) {
       let rule = aValue[0];
+      let status = aValue[1];
       aProperties = aProperties.filter(function(aProperty) {
-        if (rule.getPropertyValue(aProperty)) {
-          // We just need to find if a rule has this property while it matches
-          // the viewedElement (or its parents).
+        // We just need to find if a rule has this property while it matches
+        // the viewedElement (or its parents).
+        if (rule.getPropertyValue(aProperty) &&
+            (status == CssLogic.STATUS.MATCHED ||
+             (status == CssLogic.STATUS.PARENT_MATCH &&
+              this.domUtils.isInheritedProperty(aProperty)))) {
           result[aProperty] = true;
           return false;
         }
         return true; // Keep the property for the next rule.
-      });
+      }.bind(this));
       return aProperties.length == 0;
     }, this);
 
@@ -1660,7 +1664,10 @@ CssPropertyInfo.prototype = {
   {
     let cssRule = aSelector._cssRule;
     let value = cssRule.getPropertyValue(this.property);
-    if (value) {
+    if (value &&
+        (aStatus == CssLogic.STATUS.MATCHED ||
+         (aStatus == CssLogic.STATUS.PARENT_MATCH &&
+          this._cssLogic.domUtils.isInheritedProperty(this.property)))) {
       let selectorInfo = new CssSelectorInfo(aSelector, this.property, value,
           aStatus);
       this._matchedSelectors.push(selectorInfo);
diff --git a/browser/devtools/styleinspector/test/browser/Makefile.in b/browser/devtools/styleinspector/test/browser/Makefile.in
index 26728730c0aa..e32182eb589c 100644
--- a/browser/devtools/styleinspector/test/browser/Makefile.in
+++ b/browser/devtools/styleinspector/test/browser/Makefile.in
@@ -53,6 +53,7 @@ _BROWSER_TEST_FILES = \
   browser_styleinspector_bug_672744_search_filter.js \
   browser_styleinspector_bug_689759_no_results_placeholder.js \
   browser_bug_692400_element_style.js \
+  browser_csslogic_inherited.js \
   browser_ruleview_editor.js \
   browser_ruleview_inherit.js \
   browser_ruleview_manipulation.js \
diff --git a/browser/devtools/styleinspector/test/browser/browser_csslogic_inherited.js b/browser/devtools/styleinspector/test/browser/browser_csslogic_inherited.js
new file mode 100644
index 000000000000..670d10ff6cb3
--- /dev/null
+++ b/browser/devtools/styleinspector/test/browser/browser_csslogic_inherited.js
@@ -0,0 +1,46 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+// Test that inherited properties are treated correctly.
+
+Cu.import("resource:///modules/devtools/CssLogic.jsm");
+
+let doc;
+
+function createDocument()
+{
+  doc.body.innerHTML = '<div style="margin-left:10px; font-size: 5px"><div id="innerdiv">Inner div</div></div>';
+  doc.title = "Style Inspector Inheritance Test";
+
+  let cssLogic = new CssLogic();
+  cssLogic.highlight(doc.getElementById("innerdiv"));
+
+  let marginProp = cssLogic.getPropertyInfo("margin-left");
+  is(marginProp.matchedRuleCount, 0, "margin-left should not be included in matched selectors.");
+
+  let fontSizeProp = cssLogic.getPropertyInfo("font-size");
+  is(fontSizeProp.matchedRuleCount, 1, "font-size should be included in matched selectors.");
+
+  finishUp();
+}
+
+function finishUp()
+{
+  doc = null;
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function onLoad(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, onLoad, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,selector text test, bug 692400";
+}

From 65894629d36a46252e6ca299fbda5c9d2241d4c5 Mon Sep 17 00:00:00 2001
From: Dave Camp <dcamp@mozilla.com>
Date: Mon, 7 Nov 2011 10:35:40 -0800
Subject: [PATCH 14/21] Bug 700194 - Speed up style inspector creation and
 refresh.  r=msucan

---
 .../devtools/styleinspector/CssHtmlTree.jsm   | 236 +++++++++++++-----
 .../devtools/styleinspector/csshtmltree.xul   |  24 --
 .../browser/devtools/styleinspector.dtd       |   6 -
 .../devtools/styleinspector.properties        |   5 +
 4 files changed, 183 insertions(+), 88 deletions(-)

diff --git a/browser/devtools/styleinspector/CssHtmlTree.jsm b/browser/devtools/styleinspector/CssHtmlTree.jsm
index 4c7db92792b0..f9db90602725 100644
--- a/browser/devtools/styleinspector/CssHtmlTree.jsm
+++ b/browser/devtools/styleinspector/CssHtmlTree.jsm
@@ -43,6 +43,9 @@
 const Cu = Components.utils;
 const FILTER_CHANGED_TIMEOUT = 300;
 
+const HTML_NS = "http://www.w3.org/1999/xhtml";
+const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
+
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/PluralForm.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
@@ -51,6 +54,94 @@ Cu.import("resource:///modules/devtools/Templater.jsm");
 
 var EXPORTED_SYMBOLS = ["CssHtmlTree", "PropertyView"];
 
+/**
+ * Helper for long-running processes that should yield occasionally to
+ * the mainloop.
+ *
+ * @param {Window} aWin
+ *        Timeouts will be set on this window when appropriate.
+ * @param {Generator} aGenerator
+ *        Will iterate this generator.
+ * @param {object} aOptions
+ *        Options for the update process:
+ *          onItem {function} Will be called with the value of each iteration.
+ *          onBatch {function} Will be called after each batch of iterations,
+ *            before yielding to the main loop.
+ *          onDone {function} Will be called when iteration is complete.
+ *          onCancel {function} Will be called if the process is canceled.
+ *          threshold {int} How long to process before yielding, in ms.
+ *
+ * @constructor
+ */
+function UpdateProcess(aWin, aGenerator, aOptions)
+{
+  this.win = aWin;
+  this.iter = Iterator(aGenerator);
+  this.onItem = aOptions.onItem || function() {};
+  this.onBatch = aOptions.onBatch || function () {};
+  this.onDone = aOptions.onDone || function() {};
+  this.onCancel = aOptions.onCancel || function() {};
+  this.threshold = aOptions.threshold || 45;
+
+  this.canceled = false;
+}
+
+UpdateProcess.prototype = {
+  /**
+   * Schedule a new batch on the main loop.
+   */
+  schedule: function UP_schedule()
+  {
+    if (this.cancelled) {
+      return;
+    }
+    this._timeout = this.win.setTimeout(this._timeoutHandler.bind(this), 0);
+  },
+
+  /**
+   * Cancel the running process.  onItem will not be called again,
+   * and onCancel will be called.
+   */
+  cancel: function UP_cancel()
+  {
+    if (this._timeout) {
+      this.win.clearTimeout(this._timeout);
+      this._timeout = 0;
+    }
+    this.canceled = true;
+    this.onCancel();
+  },
+
+  _timeoutHandler: function UP_timeoutHandler() {
+    this._timeout = null;
+    try {
+      this._runBatch();
+      this.schedule();
+    } catch(e) {
+      if (e instanceof StopIteration) {
+        this.onBatch();
+        this.onDone();
+        return;
+      }
+      throw e;
+    }
+  },
+
+  _runBatch: function Y_runBatch()
+  {
+    let time = Date.now();
+    while(!this.cancelled) {
+      // Continue until iter.next() throws...
+      let next = this.iter.next();
+      this.onItem(next[1]);
+      if ((Date.now() - time) > this.threshold) {
+        this.onBatch();
+        return;
+      }
+    }
+  }
+};
+
 /**
  * CssHtmlTree is a panel that manages the display of a table sorted by style.
  * There should be one instance of CssHtmlTree per style display (of which there
@@ -78,7 +169,6 @@ function CssHtmlTree(aStyleInspector)
   this.templateRoot = this.styleDocument.getElementById("templateRoot");
   this.templatePath = this.styleDocument.getElementById("templatePath");
   this.propertyContainer = this.styleDocument.getElementById("propertyContainer");
-  this.templateProperty = this.styleDocument.getElementById("templateProperty");
   this.panel = aStyleInspector.panel;
 
   // No results text.
@@ -135,6 +225,10 @@ CssHtmlTree.processTemplate = function CssHtmlTree_processTemplate(aTemplate,
 XPCOMUtils.defineLazyGetter(CssHtmlTree, "_strings", function() Services.strings
         .createBundle("chrome://browser/locale/devtools/styleinspector.properties"));
 
+XPCOMUtils.defineLazyGetter(CssHtmlTree, "HELP_LINK_TITLE", function() {
+  return CssHtmlTree.HELP_LINK_TITLE = CssHtmlTree.l10n("helpLinkTitle");
+});
+
 CssHtmlTree.prototype = {
   // Cache the list of properties that have matched and unmatched properties.
   _matchedProperties: null,
@@ -181,46 +275,38 @@ CssHtmlTree.prototype = {
     if (this.htmlComplete) {
       this.refreshPanel();
     } else {
-      if (this._panelRefreshTimeout) {
-        this.win.clearTimeout(this._panelRefreshTimeout);
+      if (this._refreshProcess) {
+        this._refreshProcess.cancel();
       }
 
       CssHtmlTree.processTemplate(this.templateRoot, this.root, this);
 
-      // We use a setTimeout loop to display the properties in batches of 15 at a
-      // time. This results in a perceptibly more responsive UI.
-      let i = 0;
-      let batchSize = 15;
-      let max = CssHtmlTree.propertyNames.length - 1;
-      function displayProperties() {
-        if (this.viewedElement == aElement && this.styleInspector.isOpen()) {
-          // Display the next 15 properties
-          for (let step = i + batchSize; i < step && i <= max; i++) {
-            let name = CssHtmlTree.propertyNames[i];
-            let propView = new PropertyView(this, name);
-            CssHtmlTree.processTemplate(this.templateProperty,
-              this.propertyContainer, propView, true);
-            if (propView.visible) {
-              this.numVisibleProperties++;
-            }
-            propView.refreshAllSelectors();
-            this.propertyViews.push(propView);
+      this.numVisibleProperties = 0;
+      let fragment = this.doc.createDocumentFragment();
+      this._refreshProcess = new UpdateProcess(this.win, CssHtmlTree.propertyNames, {
+        onItem: function(aPropertyName) {
+          // Per-item callback.
+          if (this.viewedElement != aElement || !this.styleInspector.isOpen()) {
+            return false;
           }
-          if (i < max) {
-            // There are still some properties to display. We loop here to display
-            // the next batch of 15.
-            this._panelRefreshTimeout =
-              this.win.setTimeout(displayProperties.bind(this), 15);
-          } else {
-            this.htmlComplete = true;
-            this._panelRefreshTimeout = null;
-            this.noResults.hidden = this.numVisibleProperties > 0;
-            Services.obs.notifyObservers(null, "StyleInspector-populated", null);
+          let propView = new PropertyView(this, aPropertyName);
+          fragment.appendChild(propView.build());
+          if (propView.visible) {
+            this.numVisibleProperties++;
           }
-        }
-      }
-      this._panelRefreshTimeout =
-        this.win.setTimeout(displayProperties.bind(this), 15);
+          propView.refreshAllSelectors();
+          this.propertyViews.push(propView);
+        }.bind(this),
+        onDone: function() {
+          // Completed callback.
+          this.htmlComplete = true;
+          this.propertyContainer.appendChild(fragment);
+          this.noResults.hidden = this.numVisibleProperties > 0;
+          this._refreshProcess = null;
+          Services.obs.notifyObservers(null, "StyleInspector-populated", null);
+        }.bind(this)});
+
+      this._refreshProcess.schedule();
     }
   },
 
@@ -229,8 +315,8 @@ CssHtmlTree.prototype = {
    */
   refreshPanel: function CssHtmlTree_refreshPanel()
   {
-    if (this._panelRefreshTimeout) {
-      this.win.clearTimeout(this._panelRefreshTimeout);
+    if (this._refreshProcess) {
+      this._refreshProcess.cancel();
     }
 
     this.noResults.hidden = true;
@@ -241,27 +327,18 @@ CssHtmlTree.prototype = {
     // Reset zebra striping.
     this._darkStripe = true;
 
-    // We use a setTimeout loop to display the properties in batches of 15 at a
-    // time. This results in a perceptibly more responsive UI.
-    let i = 0;
-    let batchSize = 15;
-    let max = this.propertyViews.length - 1;
-    function refreshView() {
-      // Refresh the next 15 property views
-      for (let step = i + batchSize; i < step && i <= max; i++) {
-        this.propertyViews[i].refresh();
-      }
-      if (i < max) {
-        // There are still some property views to refresh. We loop here to
-        // display the next batch of 15.
-        this._panelRefreshTimeout = this.win.setTimeout(refreshView.bind(this), 15);
-      } else {
-        this._panelRefreshTimeout = null;
-        this.noResults.hidden = this.numVisibleProperties > 0;
+    let display = this.propertyContainer.style.display;
+    this._refreshProcess = new UpdateProcess(this.win, this.propertyViews, {
+      onItem: function(aPropView) {
+        aPropView.refresh();
+      }.bind(this),
+      onDone: function() {
+        this._refreshProcess = null;
+        this.noResults.hidden = this.numVisibleProperties > 0
         Services.obs.notifyObservers(null, "StyleInspector-populated", null);
-      }
-    }
-    this._panelRefreshTimeout = this.win.setTimeout(refreshView.bind(this), 15);
+      }.bind(this)
+    });
+    this._refreshProcess.schedule();
   },
 
   /**
@@ -423,7 +500,6 @@ CssHtmlTree.prototype = {
     delete this.path;
     delete this.templatePath;
     delete this.propertyContainer;
-    delete this.templateProperty;
     delete this.panel;
 
     // The document in which we display the results (csshtmltree.xul).
@@ -570,6 +646,50 @@ PropertyView.prototype = {
     return "property-view-hidden";
   },
 
+  build: function PropertyView_build()
+  {
+    let doc = this.tree.doc;
+    this.element = doc.createElementNS(HTML_NS, "div");
+    this.element.setAttribute("class", this.className);
+
+    this.propertyHeader = doc.createElementNS(XUL_NS, "hbox");
+    this.element.appendChild(this.propertyHeader);
+    this.propertyHeader.setAttribute("class", "property-header");
+    this.propertyHeader.addEventListener("click", this.propertyHeaderClick.bind(this), false);
+
+    this.matchedExpander = doc.createElementNS(HTML_NS, "div");
+    this.propertyHeader.appendChild(this.matchedExpander);
+    this.matchedExpander.setAttribute("class", "match expander");
+
+    let name = doc.createElementNS(HTML_NS, "div");
+    this.propertyHeader.appendChild(name);
+    name.setAttribute("class", "property-name");
+    name.textContent = this.name;
+
+    let helpcontainer = doc.createElementNS(HTML_NS, "div");
+    this.propertyHeader.appendChild(helpcontainer);
+    helpcontainer.setAttribute("class", "helplink-container");
+
+    let helplink = doc.createElementNS(HTML_NS, "a");
+    helpcontainer.appendChild(helplink);
+    helplink.setAttribute("class", "helplink");
+    helplink.setAttribute("title", CssHtmlTree.HELP_LINK_TITLE);
+    helplink.textContent = CssHtmlTree.HELP_LINK_TITLE;
+    helplink.addEventListener("click", this.mdnLinkClick.bind(this), false);
+
+    this.valueNode = doc.createElementNS(HTML_NS, "div");
+    this.propertyHeader.appendChild(this.valueNode);
+    this.valueNode.setAttribute("class", "property-value");
+    this.valueNode.setAttribute("dir", "ltr");
+    this.valueNode.textContent = this.value;
+
+    this.matchedSelectorsContainer = doc.createElementNS(HTML_NS, "div");
+    this.element.appendChild(this.matchedSelectorsContainer);
+    this.matchedSelectorsContainer.setAttribute("class", "rulelink");
+
+    return this.element;
+  },
+
   /**
    * Refresh the panel's CSS property value.
    */
diff --git a/browser/devtools/styleinspector/csshtmltree.xul b/browser/devtools/styleinspector/csshtmltree.xul
index 79417ff8f9cd..0ef01d235219 100644
--- a/browser/devtools/styleinspector/csshtmltree.xul
+++ b/browser/devtools/styleinspector/csshtmltree.xul
@@ -118,30 +118,6 @@ To visually debug the templates without running firefox, alter the display:none
     </ol>
   </div>
 
-  <!--
-  TemplateProperty lists the properties themselves. Each needs data like this:
-  {
-    property: ... // PropertyView from CssHtmlTree.jsm
-  }
-  -->
-  <div id="templateProperty">
-    <div class="${className}" save="${element}">
-      <xul:hbox class="property-header" save="${propertyHeader}"
-                onclick="${propertyHeaderClick}">
-        <div save="${matchedExpander}" class="match expander"/>
-        <div class="property-name">${name}</div>
-        <div class="helplink-container">
-          <a href="${link}" class="helplink" title="&helpLinkTitle;" onclick="${mdnLinkClick}">
-            &helpLinkTitle;
-          </a>
-        </div>
-        <div save="${valueNode}" class="property-value" dir="ltr">${value}</div>
-      </xul:hbox>
-
-      <div save="${matchedSelectorsContainer}" class="rulelink">
-      </div>
-    </div>
-  </div>
 
   <!--
   A templateMatchedSelectors sits inside each templateProperties showing the
diff --git a/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd b/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd
index 56427f2b788f..1eed4ecc57f7 100644
--- a/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd
+++ b/browser/locales/en-US/chrome/browser/devtools/styleinspector.dtd
@@ -12,12 +12,6 @@
   -  tree. -->
 <!ENTITY selectedElementLabel  "Selected element:">
 
-<!-- LOCALIZATION NOTE (helpLinkTitle): For each style property
-  -  the user can hover it and get a help link button which allows one to
-  -  quickly jump to the documentation from the Mozilla Developer Network site.
-  -  This is the link title shown in the hover tooltip. -->
-<!ENTITY helpLinkTitle         "Read the documentation for this property">
-
 <!-- LOCALIZATION NOTE (noPropertiesFound): In the case where there are no CSS
   -  properties to display e.g. due to search criteria this message is
   -  displayed. -->
diff --git a/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties b/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties
index 13ec8c81fa04..f19438cfec8d 100644
--- a/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties
+++ b/browser/locales/en-US/chrome/browser/devtools/styleinspector.properties
@@ -41,3 +41,8 @@ style.highlighter.button.label1=Properties
 style.highlighter.accesskey1=P
 style.highlighter.button.tooltip=Inspect element styles
 
+# LOCALIZATION NOTE (helpLinkTitle): For each style property
+# the user can hover it and get a help link button which allows one to
+# quickly jump to the documentation from the Mozilla Developer Network site.
+# This is the link title shown in the hover tooltip.
+helpLinkTitle=Read the documentation for this property

From cf56ca0d985d025c64ab4219e05ad2906677eab3 Mon Sep 17 00:00:00 2001
From: Dave Camp <dcamp@mozilla.com>
Date: Mon, 7 Nov 2011 10:35:40 -0800
Subject: [PATCH 15/21] Bug 696181 - Properties disabled in the css rule view
 should not be lost. r=robcee

---
 browser/devtools/highlighter/inspector.jsm    |  11 +-
 browser/devtools/highlighter/test/Makefile.in |   1 +
 .../test/browser_inspector_ruleviewstore.js   | 152 ++++++++++++++++++
 .../devtools/styleinspector/CssRuleView.jsm   |  56 ++++++-
 4 files changed, 215 insertions(+), 5 deletions(-)
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_ruleviewstore.js

diff --git a/browser/devtools/highlighter/inspector.jsm b/browser/devtools/highlighter/inspector.jsm
index 86a281e46511..6a7a7f8a5cab 100644
--- a/browser/devtools/highlighter/inspector.jsm
+++ b/browser/devtools/highlighter/inspector.jsm
@@ -1352,7 +1352,16 @@ InspectorUI.prototype = {
     let boundLoadListener = function() {
       iframe.removeEventListener("load", boundLoadListener, true);
       let doc = iframe.contentDocument;
-      this.ruleView = new CssRuleView(doc);
+
+      let winID = this.winID;
+      let ruleViewStore = this.store.getValue(winID, "ruleView");
+      if (!ruleViewStore) {
+        ruleViewStore = {};
+        this.store.setValue(winID, "ruleView", ruleViewStore);
+      }
+
+      this.ruleView = new CssRuleView(doc, ruleViewStore);
+
       this.boundRuleViewChanged = this.ruleViewChanged.bind(this);
       this.ruleView.element.addEventListener("CssRuleViewChanged",
                                              this.boundRuleViewChanged);
diff --git a/browser/devtools/highlighter/test/Makefile.in b/browser/devtools/highlighter/test/Makefile.in
index a665483c651b..cfa61a70d775 100644
--- a/browser/devtools/highlighter/test/Makefile.in
+++ b/browser/devtools/highlighter/test/Makefile.in
@@ -67,6 +67,7 @@ _BROWSER_FILES = \
 		browser_inspector_breadcrumbs.js \
 		browser_inspector_bug_699308_iframe_navigation.js \
         browser_inspector_changes.js \
+        browser_inspector_ruleviewstore.js \
 		$(NULL)
 
 # Disabled due to constant failures
diff --git a/browser/devtools/highlighter/test/browser_inspector_ruleviewstore.js b/browser/devtools/highlighter/test/browser_inspector_ruleviewstore.js
new file mode 100644
index 000000000000..bd7fdfafc948
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_ruleviewstore.js
@@ -0,0 +1,152 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+/* ***** 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 Inspector Tab Switch Tests.
+ *
+ * The Initial Developer of the Original Code is
+ * The Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Rob Campbell <rcampbell@mozilla.com>
+ *   Mihai Șucan <mihai.sucan@gmail.com>
+ *   Dave Camp <dcamp@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
+ * 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 ***** */
+
+/**
+ * Tests that properties disabled in the rule view survive a tab switch.
+ */
+
+let div;
+let tab1;
+
+function waitForRuleView(aCallback)
+{
+  if (InspectorUI.ruleView) {
+    aCallback();
+    return;
+  }
+
+  let ruleViewFrame = InspectorUI.getToolIframe(InspectorUI.ruleViewObject);
+  ruleViewFrame.addEventListener("load", function(evt) {
+    ruleViewFrame.removeEventListener(evt.type, arguments.callee, true);
+    executeSoon(function() {
+      aCallback();
+    });
+  }, true);
+}
+
+function inspectorTabOpen1()
+{
+  Services.obs.addObserver(inspectorUIOpen1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.openInspectorUI();
+}
+
+function inspectorUIOpen1()
+{
+  Services.obs.removeObserver(inspectorUIOpen1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  // Highlight a node.
+  div = content.document.getElementsByTagName("div")[0];
+  InspectorUI.inspectNode(div);
+
+  // Open the rule view sidebar.
+  waitForRuleView(ruleViewOpened1);
+
+  InspectorUI.showSidebar();
+  InspectorUI.ruleButton.click();
+}
+
+function ruleViewOpened1()
+{
+  let prop = InspectorUI.ruleView._elementStyle.rules[0].textProps[0];
+  is(prop.name, "background-color", "First prop is the background color prop.");
+  prop.setEnabled(false);
+
+  // Open second tab and switch to it
+  tab2 = gBrowser.addTab();
+  gBrowser.selectedTab = tab2;
+
+  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
+                                                 true);
+    waitForFocus(inspectorTabOpen2, content);
+  }, true);
+  content.location = "data:text/html,<p>tab 2: the inspector should close now";
+}
+
+function inspectorTabOpen2()
+{
+  // Switch back to tab 1.
+  executeSoon(function() {
+    Services.obs.addObserver(inspectorFocusTab1,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+    gBrowser.removeCurrentTab();
+    gBrowser.selectedTab = tab1;
+  });
+}
+
+function inspectorFocusTab1()
+{
+  Services.obs.removeObserver(inspectorFocusTab1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  // Now wait for the rule view to load again...
+  waitForRuleView(ruleViewOpened2);
+}
+
+function ruleViewOpened2()
+{
+  let prop = InspectorUI.ruleView._elementStyle.rules[0].textProps[0];
+  is(prop.name, "background-color", "First prop is the background color prop.");
+  ok(!prop.enabled, "First prop should be disabled.");
+
+  gBrowser.removeCurrentTab();
+  InspectorUI.closeInspectorUI();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+
+  tab1 = gBrowser.addTab();
+  gBrowser.selectedTab = tab1;
+  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
+      true);
+    waitForFocus(inspectorTabOpen1, content);
+  }, true);
+
+  content.location = "data:text/html,<p>tab switching tests for inspector" +
+    '<div style="background-color: green;">tab 1</div>';
+}
+
diff --git a/browser/devtools/styleinspector/CssRuleView.jsm b/browser/devtools/styleinspector/CssRuleView.jsm
index 3c6b86246e7e..92bf0704851b 100644
--- a/browser/devtools/styleinspector/CssRuleView.jsm
+++ b/browser/devtools/styleinspector/CssRuleView.jsm
@@ -89,11 +89,25 @@ var EXPORTED_SYMBOLS = ["CssRuleView",
 /**
  * ElementStyle maintains a list of Rule objects for a given element.
  *
+ * @param Element aElement
+ *        The element whose style we are viewing.
+ * @param object aStore
+ *        The ElementStyle can use this object to store metadata
+ *        that might outlast the rule view, particularly the current
+ *        set of disabled properties.
+ *
  * @constructor
  */
-function ElementStyle(aElement)
+function ElementStyle(aElement, aStore)
 {
   this.element = aElement;
+  this.store = aStore || {};
+  if (this.store.disabled) {
+    this.store.disabled = aStore.disabled;
+  } else {
+    this.store.disabled = WeakMap();
+  }
+
   let doc = aElement.ownerDocument;
 
   // To figure out how shorthand properties are interpreted by the
@@ -383,12 +397,20 @@ Rule.prototype = {
 
   /**
    * Reapply all the properties in this rule, and update their
-   * computed styles.  Will re-mark overridden properties.
+   * computed styles.  Store disabled properties in the element
+   * style's store.  Will re-mark overridden properties.
    */
   applyProperties: function Rule_applyProperties()
   {
+    let disabledProps = [];
+
     for each (let prop in this.textProps) {
       if (!prop.enabled) {
+        disabledProps.push({
+          name: prop.name,
+          value: prop.value,
+          priority: prop.priority
+        });
         continue;
       }
 
@@ -401,6 +423,10 @@ Rule.prototype = {
     }
     this.elementStyle._changed();
 
+    // Store disabled properties in the disabled store.
+    let disabled = this.elementStyle.store.disabled;
+    disabled.set(this.style, disabledProps);
+
     this.elementStyle.markOverridden();
   },
 
@@ -489,6 +515,19 @@ Rule.prototype = {
       let prop = new TextProperty(this, name, matches[2], matches[3] || "");
       this.textProps.push(prop);
     }
+
+    // Include properties from the disabled property store, if any.
+    let disabledProps = this.elementStyle.store.disabled.get(this.style);
+    if (!disabledProps) {
+      return;
+    }
+
+    for each (let prop in disabledProps) {
+      let textProp = new TextProperty(this, prop.name,
+                                      prop.value, prop.priority);
+      textProp.enabled = false;
+      this.textProps.push(textProp);
+    }
   },
 }
 
@@ -605,15 +644,24 @@ TextProperty.prototype = {
  *
  * @param Document aDocument
  *        The document that will contain the rule view.
+ * @param object aStore
+ *        The CSS rule view can use this object to store metadata
+ *        that might outlast the rule view, particularly the current
+ *        set of disabled properties.
  * @constructor
  */
-function CssRuleView(aDoc)
+function CssRuleView(aDoc, aStore)
 {
   this.doc = aDoc;
+  this.store = aStore;
 
   this.element = this.doc.createElementNS(HTML_NS, "div");
   this.element.setAttribute("tabindex", "0");
   this.element.classList.add("ruleview");
+
+  // Give a relative position for the inplace editor's measurement
+  // span to be placed absolutely against.
+  this.element.style.position = "relative";
 }
 
 CssRuleView.prototype = {
@@ -643,7 +691,7 @@ CssRuleView.prototype = {
       delete this._elementStyle.onChanged;
     }
 
-    this._elementStyle = new ElementStyle(aElement);
+    this._elementStyle = new ElementStyle(aElement, this.store);
     this._elementStyle.onChanged = function() {
       this._changed();
     }.bind(this);

From c608257c6cdd6b0a482ed98756dc3f3e36da3e0b Mon Sep 17 00:00:00 2001
From: Rob Campbell <rcampbell@mozilla.com>
Date: Mon, 7 Nov 2011 10:35:40 -0800
Subject: [PATCH 16/21] Bug 700044 - Duplicate rule views after tab switching.
 r=msucan

---
 browser/devtools/highlighter/inspector.jsm    |   5 +
 browser/devtools/highlighter/test/Makefile.in |   1 +
 .../browser_inspector_duplicate_ruleview.js   | 126 ++++++++++++++++++
 3 files changed, 132 insertions(+)
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_duplicate_ruleview.js

diff --git a/browser/devtools/highlighter/inspector.jsm b/browser/devtools/highlighter/inspector.jsm
index 6a7a7f8a5cab..05dab84e375a 100644
--- a/browser/devtools/highlighter/inspector.jsm
+++ b/browser/devtools/highlighter/inspector.jsm
@@ -1349,6 +1349,11 @@ InspectorUI.prototype = {
   openRuleView: function IUI_openRuleView()
   {
     let iframe = this.getToolIframe(this.ruleViewObject);
+    if (iframe.getAttribute("src")) {
+      // We're already loading this tool, let it finish.
+      return;
+    }
+
     let boundLoadListener = function() {
       iframe.removeEventListener("load", boundLoadListener, true);
       let doc = iframe.contentDocument;
diff --git a/browser/devtools/highlighter/test/Makefile.in b/browser/devtools/highlighter/test/Makefile.in
index cfa61a70d775..8d66b5bbcabe 100644
--- a/browser/devtools/highlighter/test/Makefile.in
+++ b/browser/devtools/highlighter/test/Makefile.in
@@ -68,6 +68,7 @@ _BROWSER_FILES = \
 		browser_inspector_bug_699308_iframe_navigation.js \
         browser_inspector_changes.js \
         browser_inspector_ruleviewstore.js \
+        browser_inspector_duplicate_ruleview.js \
 		$(NULL)
 
 # Disabled due to constant failures
diff --git a/browser/devtools/highlighter/test/browser_inspector_duplicate_ruleview.js b/browser/devtools/highlighter/test/browser_inspector_duplicate_ruleview.js
new file mode 100644
index 000000000000..d51d18495473
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_duplicate_ruleview.js
@@ -0,0 +1,126 @@
+/* vim: set ft=javascript ts=2 et sw=2 tw=80: */
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+
+let div;
+let tab1;
+let tab2;
+let tab1window;
+
+function inspectorTabOpen1()
+{
+  ok(window.InspectorUI, "InspectorUI variable exists");
+  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
+  ok(InspectorUI.store.isEmpty(), "Inspector.store is empty");
+
+  Services.obs.addObserver(inspectorUIOpen1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.openInspectorUI();
+}
+
+function inspectorUIOpen1()
+{
+  Services.obs.removeObserver(inspectorUIOpen1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+
+  // Make sure the inspector is open.
+  ok(InspectorUI.inspecting, "Inspector is highlighting");
+  ok(!InspectorUI.treePanel.isOpen(), "Inspector Tree Panel is not open");
+  ok(!InspectorUI.isSidebarOpen, "Inspector Sidebar is not open");
+  ok(!InspectorUI.store.isEmpty(), "InspectorUI.store is not empty");
+  is(InspectorUI.store.length, 1, "Inspector.store.length = 1");
+
+  // Highlight a node.
+  div = content.document.getElementsByTagName("div")[0];
+  InspectorUI.inspectNode(div);
+  is(InspectorUI.selection, div, "selection matches the div element");
+
+  Services.obs.addObserver(inspectorRuleViewOpened,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.RULEVIEWREADY, false);
+
+  InspectorUI.showSidebar();
+  InspectorUI.openRuleView();
+}
+
+function inspectorRuleViewOpened() {
+  Services.obs.removeObserver(inspectorRuleViewOpened,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.RULEVIEWREADY);
+
+  // Open the second tab.
+  tab2 = gBrowser.addTab();
+  gBrowser.selectedTab = tab2;
+
+  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
+      true);
+    waitForFocus(inspectorTabOpen2, content);
+  }, true);
+
+  content.location = "data:text/html,<p>tab 2: the inspector should close now";
+}
+
+function inspectorTabOpen2()
+{
+  // Make sure the inspector is closed.
+  ok(!InspectorUI.inspecting, "Inspector is not highlighting");
+  ok(!InspectorUI.treePanel, "Inspector Tree Panel is closed");
+  ok(!InspectorUI.isSidebarOpen, "Inspector Sidebar is not open");
+  is(InspectorUI.store.length, 1, "Inspector.store.length = 1");
+
+  Services.obs.addObserver(inspectorFocusTab1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.RULEVIEWREADY, false);
+  // Switch back to tab 1.
+  executeSoon(function() {
+    gBrowser.selectedTab = tab1;
+  });
+}
+
+function inspectorFocusTab1()
+{
+  Services.obs.removeObserver(inspectorFocusTab1,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.RULEVIEWREADY, false);
+  Services.obs.addObserver(inspectorRuleTrap,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.RULEVIEWREADY, false);
+
+  // Make sure the inspector is open.
+  ok(InspectorUI.inspecting, "Inspector is highlighting");
+  ok(!InspectorUI.treePanel.isOpen(), "Inspector Tree Panel is not open");
+  is(InspectorUI.store.length, 1, "Inspector.store.length = 1");
+  is(InspectorUI.selection, div, "selection matches the div element");
+  ok(InspectorUI.isSidebarOpen, "sidebar is open");
+  ok(InspectorUI.isRuleViewOpen(), "rule view is open");
+  is(InspectorUI.ruleView.doc.documentElement.children.length, 1, "RuleView elements.length == 1");
+
+  requestLongerTimeout(4);
+  executeSoon(function() {
+    InspectorUI.closeInspectorUI();
+    gBrowser.removeCurrentTab(); // tab 1
+    gBrowser.removeCurrentTab(); // tab 2
+    finish();
+  });
+}
+
+function inspectorRuleTrap()
+{
+  Services.obs.removeObserver(inspectorRuleTrap,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.RULEVIEWREADY, false);
+  is(InspectorUI.ruleView.doc.documentElement.children.length, 1, "RuleView elements.length == 1");
+}
+
+function test()
+{
+  waitForExplicitFinish();
+
+  tab1 = gBrowser.addTab();
+  gBrowser.selectedTab = tab1;
+  gBrowser.selectedBrowser.addEventListener("load", function(evt) {
+    gBrowser.selectedBrowser.removeEventListener(evt.type, arguments.callee,
+      true);
+    waitForFocus(inspectorTabOpen1, content);
+  }, true);
+
+  content.location = "data:text/html,<p>tab switching tests for inspector" +
+    "<div>tab 1</div>";
+}
+

From a456333108b0ae1e24c93cd2d74736ba4803511a Mon Sep 17 00:00:00 2001
From: Jared Wein <jwein@mozilla.com>
Date: Mon, 7 Nov 2011 10:48:27 -0800
Subject: [PATCH 17/21] Bug 674744 - Implement conditional forward button for
 pinstripe. r=dao ui-r=shorlander

---
 browser/base/content/browser.xul             |   4 +
 browser/themes/pinstripe/browser/browser.css | 157 ++++++++++++++++++-
 2 files changed, 158 insertions(+), 3 deletions(-)

diff --git a/browser/base/content/browser.xul b/browser/base/content/browser.xul
index 1ca600b86d92..ba2a7cb7bdfa 100644
--- a/browser/base/content/browser.xul
+++ b/browser/base/content/browser.xul
@@ -1063,6 +1063,10 @@
       <svg:rect x="0" y="0" width="1" height="1" fill="white"/>
       <svg:circle cx="-0.41" cy="0.5" r="0.65"/>
     </svg:mask>
+    <svg:mask id="pinstripe-urlbar-back-button-mask" maskContentUnits="userSpaceOnUse">
+      <svg:rect x="0" y="-5" width="10000" height="55" fill="white"/>
+      <svg:circle cx="-9" cy="11" r="15"/>
+    </svg:mask>
     <svg:mask id="pinstripe-tab-ontop-left-curve-mask" maskContentUnits="userSpaceOnUse">
       <svg:circle cx="9" cy="3" r="3" fill="white"/>
       <svg:rect x="9" y="0" width="3" height="3" fill="white"/>
diff --git a/browser/themes/pinstripe/browser/browser.css b/browser/themes/pinstripe/browser/browser.css
index f0d20a85d827..2a96556acd40 100644
--- a/browser/themes/pinstripe/browser/browser.css
+++ b/browser/themes/pinstripe/browser/browser.css
@@ -47,6 +47,10 @@
 @import url("chrome://global/skin/");
 
 %include shared.inc
+%filter substitution
+%define forwardTransitionLength 150ms
+%define conditionalForwardWithUrlbar window:not([chromehidden~=toolbar]) #navigator-toolbox[iconsize=large][mode=icons] > :-moz-any(#nav-bar[currentset*="unified-back-forward-button,urlbar-container"],#nav-bar:not([currentset])) > #unified-back-forward-button
+%define conditionalForwardWithUrlbarWidth 27
 
 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
 @namespace html url("http://www.w3.org/1999/xhtml");
@@ -531,6 +535,71 @@ toolbar[mode="icons"] #forward-button {
   mask: url(chrome://browser/content/browser.xul#pinstripe-keyhole-forward-mask);
 }
 
+@conditionalForwardWithUrlbar@ > #forward-button:not(:-moz-lwtheme) {
+  -moz-appearance: none;
+  -moz-padding-start: 2px;
+  background: -moz-linear-gradient(hsl(0,0%,99%), hsl(0,0%,67%)) padding-box;
+  border: 1px solid;
+  border-color: hsl(0,0%,31%) hsla(0,0%,29%,.6) hsl(0,0%,27%);
+  box-shadow: inset 0 1px 0 hsla(0,0%,100%,.35),
+              0 1px 0 hsla(0,0%,100%,.2);
+}
+
+@conditionalForwardWithUrlbar@ > #forward-button {
+  border-radius: 0;
+  -moz-margin-end: 0;
+}
+
+@conditionalForwardWithUrlbar@ > #forward-button:-moz-lwtheme {
+  -moz-padding-start: 2px;
+  -moz-padding-end: 0;
+}
+
+@conditionalForwardWithUrlbar@:not([switchingtabs]) > #forward-button {
+  -moz-transition: opacity @forwardTransitionLength@ ease-out;
+}
+
+@conditionalForwardWithUrlbar@ > #forward-button:hover:active:not(:-moz-lwtheme) {
+  background-image: -moz-linear-gradient(hsl(0,0%,74%), hsl(0,0%,61%));
+  box-shadow: inset rgba(0,0,0,.3) 0 -6px 10px,
+              inset #000 0 1px 3px,
+              inset rgba(0,0,0,.2) 0 1px 3px,
+              0 1px 0 hsla(0,0%,100%,.2);
+}
+
+@conditionalForwardWithUrlbar@ > #forward-button:-moz-window-inactive:not(:-moz-lwtheme) {
+  border-color: hsl(0,0%,64%) hsl(0,0%,65%) hsl(0,0%,66%);
+  background-image: -moz-linear-gradient(hsl(0,0%,99%), hsl(0,0%,82%));
+  box-shadow: inset 0 1px 0 hsla(0,0%,100%,.35);
+}
+
+@conditionalForwardWithUrlbar@:not(:hover) > #forward-button[disabled] {
+  opacity: 0;
+}
+
+@media (-moz-mac-lion-theme) {
+  @conditionalForwardWithUrlbar@ > #forward-button:not(:-moz-lwtheme) {
+    background-image: -moz-linear-gradient(hsla(0,0%,100%,.73), hsla(0,0%,100%,.05) 85%);
+    border-color: hsla(0,0%,0%,.35) hsla(0,0%,0%,.25) hsla(0,0%,0%,.2);
+    box-shadow: inset 0 1px 0 hsla(0,0%,100%,.2),
+                inset 0 0 1px hsla(0,0%,100%,.1),
+                0 1px 0 hsla(0,0%,100%,.2);
+  }
+
+  @conditionalForwardWithUrlbar@ > #forward-button:hover:active:not(:-moz-lwtheme) {
+    background-image: -moz-linear-gradient(hsla(0,0%,60%,.37), hsla(0,0%,100%,.35) 95%);
+    border-color: hsla(0,0%,0%,.43) hsla(0,0%,0%,.25) hsla(0,0%,0%,.37);
+    box-shadow: inset 0 1px 0 hsla(0,0%,0%,.02),
+                inset 0 1px 2px hsla(0,0%,0%,.2),
+                0 1px 0 hsla(0,0%,100%,.2);
+  }
+
+  @conditionalForwardWithUrlbar@ > #forward-button:-moz-window-inactive:not(:-moz-lwtheme) {
+    background-image: none;
+    border-color: hsla(0,0%,0%,.2);
+  }
+}
+
 #navigator-toolbox[iconsize="small"][mode="icons"] > #nav-bar #forward-button {
   width: 27px;
 }
@@ -842,6 +911,57 @@ toolbar[mode="icons"] #zoom-in-button {
   border-radius: @toolbarbuttonCornerRadius@;
 }
 
+@conditionalForwardWithUrlbar@ + #urlbar-container {
+  padding-left: @conditionalForwardWithUrlbarWidth@px;
+  -moz-margin-start: -@conditionalForwardWithUrlbarWidth@px;
+  position: relative;
+  pointer-events: none;
+}
+
+@conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar {
+  -moz-border-start: none;
+  margin-left: 0;
+  pointer-events: all;
+}
+
+@conditionalForwardWithUrlbar@:not([switchingtabs]) + #urlbar-container > #urlbar {
+  -moz-transition: margin-left @forwardTransitionLength@ ease-out;
+}
+
+@conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar:-moz-locale-dir(ltr) {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+@conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar:-moz-locale-dir(rtl) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container {
+  mask: url("chrome://browser/content/browser.xul#pinstripe-urlbar-back-button-mask");
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar {
+  margin-left: -@conditionalForwardWithUrlbarWidth@px;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled]:hover:not([switchingtabs]) + #urlbar-container > #urlbar {
+  /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
+  -moz-transition-delay: 100s;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled]:not(:hover) + #urlbar-container > #urlbar {
+  /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
+  margin-left: -@conditionalForwardWithUrlbarWidth@.01px;
+}
+
+@conditionalForwardWithUrlbar@ + #urlbar-container:-moz-locale-dir(rtl),
+@conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar:-moz-locale-dir(rtl) {
+  /* let pinstripe-urlbar-back-button-mask clip the urlbar's right side for RTL */
+  -moz-transform: scaleX(-1);
+}
+
 #identity-box {
   background-image: -moz-linear-gradient(hsl(0,0%,98%), hsl(0,0%,92%));
   box-shadow: 0 1px 0 hsla(0,0%,0%,.05) inset;
@@ -860,6 +980,38 @@ toolbar[mode="icons"] #zoom-in-button {
   border-bottom-right-radius: 2px;
 }
 
+#notification-popup-box:not([hidden]) + #identity-box {
+  -moz-padding-start: 10px;
+  border-radius: 0;
+}
+
+@conditionalForwardWithUrlbar@ + #urlbar-container > #urlbar > #identity-box {
+  border-radius: 0;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
+  -moz-transition: 0s padding-left;
+  padding-left: 10px;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
+  -moz-transition: 0s padding-right;
+  padding-right: 10px;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled]:hover:not([switchingtabs]) + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box {
+  /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
+  -moz-transition-delay: 100s;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled]:not(:hover) + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
+  padding-left: 10.01px;
+}
+
+@conditionalForwardWithUrlbar@[forwarddisabled]:not(:hover) + #urlbar-container > #urlbar > #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
+  padding-right: 10.01px;
+}
+
 #identity-box:active:hover,
 #identity-box[open="true"] {
   background-image: -moz-linear-gradient(hsl(0,0%,93%), hsl(0,0%,80%));
@@ -2155,9 +2307,8 @@ toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
   -moz-margin-end: -8px;
 }
 
-#notification-popup-box:not([hidden]) + #identity-box {
-  -moz-padding-start: 10px;
-  border-radius: 0;
+@conditionalForwardWithUrlbar@[forwarddisabled] + #urlbar-container > #urlbar > #notification-popup-box {
+  padding-left: 7px;
 }
 
 #notification-popup-box:-moz-locale-dir(rtl),

From ed4d9d5d948638a4844fb8a65626b9bd11ae228e Mon Sep 17 00:00:00 2001
From: Rob Campbell <rcampbell@mozilla.com>
Date: Mon, 7 Nov 2011 15:02:55 -0400
Subject: [PATCH 18/21] Bug 583041 - Style Editor integration; backout;
 a=orange

---
 browser/app/profile/firefox.js                |    3 -
 browser/base/content/browser-appmenu.inc      |    5 -
 browser/base/content/browser-menubar.inc      |    6 -
 browser/base/content/browser-sets.inc         |    3 -
 browser/base/content/browser.js               |   38 -
 browser/devtools/Makefile.in                  |    1 -
 browser/devtools/jar.mn                       |    3 -
 .../test/browser_scratchpad_bug_660560_tab.js |    4 +-
 .../sourceeditor/source-editor-orion.jsm      |   12 +-
 browser/devtools/styleeditor/Makefile.in      |   54 -
 browser/devtools/styleeditor/SplitView.jsm    |  485 -------
 browser/devtools/styleeditor/StyleEditor.jsm  | 1112 -----------------
 .../styleeditor/StyleEditorChrome.jsm         |  488 --------
 .../devtools/styleeditor/StyleEditorUtil.jsm  |  196 ---
 browser/devtools/styleeditor/splitview.css    |   96 --
 browser/devtools/styleeditor/styleeditor.css  |   43 -
 browser/devtools/styleeditor/styleeditor.xul  |  130 --
 browser/devtools/styleeditor/test/Makefile.in |   72 --
 .../test/browser_styleeditor_enabled.js       |  101 --
 .../test/browser_styleeditor_import.js        |   87 --
 .../test/browser_styleeditor_init.js          |  126 --
 .../test/browser_styleeditor_loading.js       |   39 -
 .../test/browser_styleeditor_new.js           |  117 --
 .../test/browser_styleeditor_pretty.js        |   56 -
 .../test/browser_styleeditor_readonly.js      |   74 --
 .../test/browser_styleeditor_reopen.js        |  155 ---
 .../test/browser_styleeditor_sv_filter.js     |  101 --
 .../test/browser_styleeditor_sv_keynav.js     |   80 --
 .../test/browser_styleeditor_sv_resize.js     |   63 -
 browser/devtools/styleeditor/test/four.html   |   25 -
 browser/devtools/styleeditor/test/head.js     |   44 -
 .../devtools/styleeditor/test/media-small.css |    5 -
 browser/devtools/styleeditor/test/media.html  |   11 -
 .../devtools/styleeditor/test/minified.html   |   17 -
 browser/devtools/styleeditor/test/simple.css  |    8 -
 .../devtools/styleeditor/test/simple.css.gz   |  Bin 166 -> 0 bytes
 .../styleeditor/test/simple.css.gz^headers^   |    4 -
 .../devtools/styleeditor/test/simple.gz.html  |   23 -
 browser/devtools/styleeditor/test/simple.html |   23 -
 .../locales/en-US/chrome/browser/browser.dtd  |    7 -
 .../chrome/browser/devtools/styleeditor.dtd   |   62 -
 .../browser/devtools/styleeditor.properties   |   53 -
 browser/locales/jar.mn                        |    2 -
 .../browser/devtools/eye-toggle.png           |  Bin 784 -> 0 bytes
 .../browser/devtools/splitview.css            |  137 --
 .../browser/devtools/styleeditor.css          |  177 ---
 browser/themes/gnomestripe/browser/jar.mn     |    4 +-
 .../pinstripe/browser/devtools/eye-toggle.png |  Bin 784 -> 0 bytes
 .../pinstripe/browser/devtools/splitview.css  |  137 --
 .../browser/devtools/styleeditor.css          |  177 ---
 browser/themes/pinstripe/browser/jar.mn       |    4 +-
 .../winstripe/browser/devtools/eye-toggle.png |  Bin 784 -> 0 bytes
 .../winstripe/browser/devtools/splitview.css  |  137 --
 .../browser/devtools/styleeditor.css          |  177 ---
 browser/themes/winstripe/browser/jar.mn       |    8 +-
 55 files changed, 7 insertions(+), 4985 deletions(-)
 delete mode 100644 browser/devtools/styleeditor/Makefile.in
 delete mode 100644 browser/devtools/styleeditor/SplitView.jsm
 delete mode 100644 browser/devtools/styleeditor/StyleEditor.jsm
 delete mode 100644 browser/devtools/styleeditor/StyleEditorChrome.jsm
 delete mode 100644 browser/devtools/styleeditor/StyleEditorUtil.jsm
 delete mode 100644 browser/devtools/styleeditor/splitview.css
 delete mode 100644 browser/devtools/styleeditor/styleeditor.css
 delete mode 100644 browser/devtools/styleeditor/styleeditor.xul
 delete mode 100644 browser/devtools/styleeditor/test/Makefile.in
 delete mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_enabled.js
 delete mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_import.js
 delete mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_init.js
 delete mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_loading.js
 delete mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_new.js
 delete mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_pretty.js
 delete mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_readonly.js
 delete mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_reopen.js
 delete mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_sv_filter.js
 delete mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_sv_keynav.js
 delete mode 100644 browser/devtools/styleeditor/test/browser_styleeditor_sv_resize.js
 delete mode 100644 browser/devtools/styleeditor/test/four.html
 delete mode 100644 browser/devtools/styleeditor/test/head.js
 delete mode 100644 browser/devtools/styleeditor/test/media-small.css
 delete mode 100644 browser/devtools/styleeditor/test/media.html
 delete mode 100644 browser/devtools/styleeditor/test/minified.html
 delete mode 100644 browser/devtools/styleeditor/test/simple.css
 delete mode 100644 browser/devtools/styleeditor/test/simple.css.gz
 delete mode 100644 browser/devtools/styleeditor/test/simple.css.gz^headers^
 delete mode 100644 browser/devtools/styleeditor/test/simple.gz.html
 delete mode 100644 browser/devtools/styleeditor/test/simple.html
 delete mode 100644 browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd
 delete mode 100644 browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
 delete mode 100644 browser/themes/gnomestripe/browser/devtools/eye-toggle.png
 delete mode 100644 browser/themes/gnomestripe/browser/devtools/splitview.css
 delete mode 100644 browser/themes/gnomestripe/browser/devtools/styleeditor.css
 delete mode 100644 browser/themes/pinstripe/browser/devtools/eye-toggle.png
 delete mode 100644 browser/themes/pinstripe/browser/devtools/splitview.css
 delete mode 100644 browser/themes/pinstripe/browser/devtools/styleeditor.css
 delete mode 100644 browser/themes/winstripe/browser/devtools/eye-toggle.png
 delete mode 100644 browser/themes/winstripe/browser/devtools/splitview.css
 delete mode 100644 browser/themes/winstripe/browser/devtools/styleeditor.css

diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
index 46922b55e85b..e4b30bf3703e 100644
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1014,9 +1014,6 @@ pref("devtools.ruleview.enabled", true);
 // Enable the Scratchpad tool.
 pref("devtools.scratchpad.enabled", true);
 
-// Enable the Style Editor.
-pref("devtools.styleeditor.enabled", true);
-
 // Enable tools for Chrome development.
 pref("devtools.chrome.enabled", false);
 
diff --git a/browser/base/content/browser-appmenu.inc b/browser/base/content/browser-appmenu.inc
index 54f382b624aa..72f320b228bd 100644
--- a/browser/base/content/browser-appmenu.inc
+++ b/browser/base/content/browser-appmenu.inc
@@ -192,11 +192,6 @@
                     label="&scratchpad.label;"
                     key="key_scratchpad"
                     command="Tools:Scratchpad"/>
-          <menuitem id="appmenu_styleeditor"
-                    hidden="true"
-                    label="&styleeditor.label;"
-                    key="key_styleeditor"
-                    command="Tools:StyleEditor"/>
           <menuitem id="appmenu_pageSource"
                     label="&viewPageSourceCmd.label;"
                     command="View:PageSource"
diff --git a/browser/base/content/browser-menubar.inc b/browser/base/content/browser-menubar.inc
index 24a3b7d3fc24..094a0f202a33 100644
--- a/browser/base/content/browser-menubar.inc
+++ b/browser/base/content/browser-menubar.inc
@@ -550,12 +550,6 @@
                             accesskey="&scratchpad.accesskey;"
                             key="key_scratchpad"
                             command="Tools:Scratchpad"/>
-                  <menuitem id="menu_styleeditor"
-                            hidden="true"
-                            label="&styleeditor.label;"
-                            accesskey="&styleeditor.accesskey;"
-                            key="key_styleeditor"
-                            command="Tools:StyleEditor"/>
                   <menuitem id="menu_pageSource"
                             accesskey="&pageSourceCmd.accesskey;"
                             label="&pageSourceCmd.label;"
diff --git a/browser/base/content/browser-sets.inc b/browser/base/content/browser-sets.inc
index 92f17726993a..7cb689e57152 100644
--- a/browser/base/content/browser-sets.inc
+++ b/browser/base/content/browser-sets.inc
@@ -126,7 +126,6 @@
     <command id="Tools:Downloads" oncommand="BrowserDownloadsUI();"/>
     <command id="Tools:Inspect" oncommand="InspectorUI.toggleInspectorUI();" disabled="true"/>
     <command id="Tools:Scratchpad" oncommand="Scratchpad.openScratchpad();" disabled="true"/>
-    <command id="Tools:StyleEditor" oncommand="StyleEditor.openChrome();" disabled="true"/>
     <command id="Tools:Addons" oncommand="BrowserOpenAddonsMgr();"/>
     <command id="Tools:Sanitize"
      oncommand="Cc['@mozilla.org/browser/browserglue;1'].getService(Ci.nsIBrowserGlue).sanitize(window);"/>
@@ -245,8 +244,6 @@
     <key id="key_inspect" key="&inspectMenu.commandkey;" command="Tools:Inspect" modifiers="accel,shift"/>
     <key id="key_scratchpad" keycode="&scratchpad.keycode;" modifiers="shift"
          keytext="&scratchpad.keytext;" command="Tools:Scratchpad"/>
-    <key id="key_styleeditor" keycode="&styleeditor.keycode;" modifiers="shift"
-         keytext="&styleeditor.keytext;" command="Tools:StyleEditor"/>
     <key id="openFileKb" key="&openFileCmd.commandkey;" command="Browser:OpenFile"  modifiers="accel"/>
     <key id="key_savePage" key="&savePageCmd.commandkey;" command="Browser:SavePage" modifiers="accel"/>
     <key id="printKb" key="&printCmd.commandkey;" command="cmd_print"  modifiers="accel"/>
diff --git a/browser/base/content/browser.js b/browser/base/content/browser.js
index 86167906e1ea..13a8c8103a04 100644
--- a/browser/base/content/browser.js
+++ b/browser/base/content/browser.js
@@ -1721,16 +1721,6 @@ function delayedStartup(isLoadingBlank, mustLoadSidebar) {
 #endif
   }
 
-  // Enable Style Editor?
-  let styleEditorEnabled = gPrefService.getBoolPref(StyleEditor.prefEnabledName);
-  if (styleEditorEnabled) {
-    document.getElementById("menu_styleeditor").hidden = false;
-    document.getElementById("Tools:StyleEditor").removeAttribute("disabled");
-#ifdef MENUBAR_CAN_AUTOHIDE
-    document.getElementById("appmenu_styleeditor").hidden = false;
-#endif
-  }
-
 #ifdef MENUBAR_CAN_AUTOHIDE
   // If the user (or the locale) hasn't enabled the top-level "Character
   // Encoding" menu via the "browser.menu.showCharacterEncoding" preference,
@@ -8957,34 +8947,6 @@ XPCOMUtils.defineLazyGetter(Scratchpad, "ScratchpadManager", function() {
   return tmp.ScratchpadManager;
 });
 
-var StyleEditor = {
-  prefEnabledName: "devtools.styleeditor.enabled",
-  openChrome: function SE_openChrome()
-  {
-    const CHROME_URL = "chrome://browser/content/styleeditor.xul";
-    const CHROME_WINDOW_TYPE = "Tools:StyleEditor";
-    const CHROME_WINDOW_FLAGS = "chrome,centerscreen,resizable,dialog=no";
-
-    // focus currently open Style Editor window for this document, if any
-    let contentWindow = gBrowser.selectedBrowser.contentWindow;
-    let contentWindowID = contentWindow.QueryInterface(Ci.nsIInterfaceRequestor).
-      getInterface(Ci.nsIDOMWindowUtils).currentInnerWindowID;
-    let enumerator = Services.wm.getEnumerator(CHROME_WINDOW_TYPE);
-    while (enumerator.hasMoreElements()) {
-      var win = enumerator.getNext();
-      if (win.styleEditorChrome.contentWindowID == contentWindowID) {
-        win.focus();
-        return win;
-      }
-    }
-
-    let chromeWindow = Services.ww.openWindow(null, CHROME_URL, "_blank",
-                                              CHROME_WINDOW_FLAGS,
-                                              contentWindow);
-    chromeWindow.focus();
-    return chromeWindow;
-  }
-};
 
 XPCOMUtils.defineLazyGetter(window, "gShowPageResizers", function () {
 #ifdef XP_WIN
diff --git a/browser/devtools/Makefile.in b/browser/devtools/Makefile.in
index 290329ace4fc..83271a16c81a 100644
--- a/browser/devtools/Makefile.in
+++ b/browser/devtools/Makefile.in
@@ -50,7 +50,6 @@ DIRS = \
   highlighter \
   webconsole \
   sourceeditor \
-  styleeditor \
   styleinspector \
   scratchpad \
   shared \
diff --git a/browser/devtools/jar.mn b/browser/devtools/jar.mn
index 7855fa51dd15..7fca7adc9247 100644
--- a/browser/devtools/jar.mn
+++ b/browser/devtools/jar.mn
@@ -3,9 +3,6 @@ browser.jar:
     content/browser/NetworkPanel.xhtml            (webconsole/NetworkPanel.xhtml)
 *   content/browser/scratchpad.xul                (scratchpad/scratchpad.xul)
 *   content/browser/scratchpad.js                 (scratchpad/scratchpad.js)
-*   content/browser/styleeditor.xul               (styleeditor/styleeditor.xul)
-    content/browser/splitview.css                 (styleeditor/splitview.css)
-    content/browser/styleeditor.css               (styleeditor/styleeditor.css)
     content/browser/devtools/csshtmltree.xul      (styleinspector/csshtmltree.xul)
     content/browser/devtools/cssruleview.xul      (styleinspector/cssruleview.xul)
     content/browser/devtools/styleinspector.css   (styleinspector/styleinspector.css)
diff --git a/browser/devtools/scratchpad/test/browser_scratchpad_bug_660560_tab.js b/browser/devtools/scratchpad/test/browser_scratchpad_bug_660560_tab.js
index 1550968e0125..b1e8cd78fd0f 100644
--- a/browser/devtools/scratchpad/test/browser_scratchpad_bug_660560_tab.js
+++ b/browser/devtools/scratchpad/test/browser_scratchpad_bug_660560_tab.js
@@ -18,7 +18,7 @@ function test()
     Services.prefs.setIntPref("devtools.editor.tabsize", 5);
 
     gScratchpadWindow = Scratchpad.openScratchpad();
-    waitForFocus(runTests, gScratchpadWindow);
+    gScratchpadWindow.addEventListener("load", runTests, false);
   }, true);
 
   content.location = "data:text/html,Scratchpad test for the Tab key, bug 660560";
@@ -64,7 +64,7 @@ function runTests()
   Services.prefs.setIntPref("devtools.editor.tabsize", 6);
   Services.prefs.setBoolPref("devtools.editor.expandtab", false);
   gScratchpadWindow = Scratchpad.openScratchpad();
-  waitForFocus(runTests2, gScratchpadWindow);
+  gScratchpadWindow.addEventListener("load", runTests2, false);
 }
 
 function runTests2()
diff --git a/browser/devtools/sourceeditor/source-editor-orion.jsm b/browser/devtools/sourceeditor/source-editor-orion.jsm
index 183ec25fb2f5..aa5980e48a6b 100644
--- a/browser/devtools/sourceeditor/source-editor-orion.jsm
+++ b/browser/devtools/sourceeditor/source-editor-orion.jsm
@@ -222,17 +222,7 @@ SourceEditor.prototype = {
     }, this);
 
     if (aCallback) {
-      let iframe = this._view._frame;
-      let document = iframe.contentDocument;
-      if (!document || document.readyState != "complete") {
-        let onIframeLoad = function () {
-          iframe.contentWindow.removeEventListener("load", onIframeLoad, false);
-          aCallback(this);
-        }.bind(this);
-        iframe.contentWindow.addEventListener("load", onIframeLoad, false);
-      } else {
-        aCallback(this);
-      }
+      aCallback(this);
     }
   },
 
diff --git a/browser/devtools/styleeditor/Makefile.in b/browser/devtools/styleeditor/Makefile.in
deleted file mode 100644
index f49fa5a32e0b..000000000000
--- a/browser/devtools/styleeditor/Makefile.in
+++ /dev/null
@@ -1,54 +0,0 @@
-# ***** 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 Style Editor code.
-#
-# The Initial Developer of the Original Code is Mozilla Foundation.
-#
-# Portions created by the Initial Developer are Copyright (C) 2010
-# the Initial Developer. All Rights Reserved.
-#
-# Contributor(s):
-#    Cedric Vivier <cedricv@neonux.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 *****
-
-DEPTH		= ../../..
-topsrcdir	= @top_srcdir@
-srcdir		= @srcdir@
-VPATH		= @srcdir@
-
-include $(DEPTH)/config/autoconf.mk
-
-ifdef ENABLE_TESTS
-  ifneq (mobile,$(MOZ_BUILD_APP))
-  	  DIRS += test
-  endif
-endif
-
-include $(topsrcdir)/config/rules.mk
-
-libs::
-	$(NSINSTALL) $(srcdir)/*.jsm $(FINAL_TARGET)/modules/devtools
diff --git a/browser/devtools/styleeditor/SplitView.jsm b/browser/devtools/styleeditor/SplitView.jsm
deleted file mode 100644
index 2e726cfeda9e..000000000000
--- a/browser/devtools/styleeditor/SplitView.jsm
+++ /dev/null
@@ -1,485 +0,0 @@
-/* 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 Style Editor 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):
- *   Cedric Vivier <cedricv@neonux.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 ***** */
-
-"use strict";
-
-const EXPORTED_SYMBOLS = ["SplitView"];
-
-/* this must be kept in sync with CSS (ie. splitview.css) */
-const LANDSCAPE_MEDIA_QUERY = "(min-aspect-ratio: 5/3)";
-
-const BINDING_USERDATA = "splitview-binding";
-
-
-/**
- * SplitView constructor
- *
- * Initialize the split view UI on an existing DOM element.
- *
- * A split view contains items, each of those having one summary and one details
- * elements.
- * It is adaptive as it behaves similarly to a richlistbox when there the aspect
- * ratio is narrow or as a pair listbox-box otherwise.
- *
- * @param DOMElement aRoot
- * @see appendItem
- */
-function SplitView(aRoot)
-{
-  this._root = aRoot;
-  this._controller = aRoot.querySelector(".splitview-controller");
-  this._nav = aRoot.querySelector(".splitview-nav");
-  this._side = aRoot.querySelector(".splitview-side-details");
-  this._activeSummary = null
-
-  this._mql = aRoot.ownerDocument.defaultView.matchMedia(LANDSCAPE_MEDIA_QUERY);
-
-  this._filter = aRoot.querySelector(".splitview-filter");
-  if (this._filter) {
-    this._setupFilterBox();
-  }
-
-  // items list focus and search-on-type handling
-  this._nav.addEventListener("keydown", function onKeyCatchAll(aEvent) {
-    function getFocusedItemWithin(nav) {
-      let node = nav.ownerDocument.activeElement;
-      while (node && node.parentNode != nav) {
-        node = node.parentNode;
-      }
-      return node;
-    }
-
-    // do not steal focus from inside iframes or textboxes
-    if (aEvent.target.ownerDocument != this._nav.ownerDocument ||
-        aEvent.target.tagName == "input" ||
-        aEvent.target.tagName == "textbox" ||
-        aEvent.target.tagName == "textarea" ||
-        aEvent.target.classList.contains("textbox")) {
-      return false;
-    }
-
-    // handle keyboard navigation within the items list
-    let newFocusOrdinal;
-    if (aEvent.keyCode == aEvent.DOM_VK_PAGE_UP ||
-        aEvent.keyCode == aEvent.DOM_VK_HOME) {
-      newFocusOrdinal = 0;
-    } else if (aEvent.keyCode == aEvent.DOM_VK_PAGE_DOWN ||
-               aEvent.keyCode == aEvent.DOM_VK_END) {
-      newFocusOrdinal = this._nav.childNodes.length - 1;
-    } else if (aEvent.keyCode == aEvent.DOM_VK_UP) {
-      newFocusOrdinal = getFocusedItemWithin(this._nav).getAttribute("data-ordinal");
-      newFocusOrdinal--;
-    } else if (aEvent.keyCode == aEvent.DOM_VK_DOWN) {
-      newFocusOrdinal = getFocusedItemWithin(this._nav).getAttribute("data-ordinal");
-      newFocusOrdinal++;
-    }
-    if (newFocusOrdinal !== undefined) {
-      aEvent.stopPropagation();
-      let el = this.getSummaryElementByOrdinal(newFocusOrdinal);
-      if (el) {
-        el.focus();
-      }
-      return false;
-    }
-
-    // search-on-type when any non-whitespace character is pressed while list
-    // has the focus
-    if (this._filter &&
-        !/\s/.test(String.fromCharCode(aEvent.which))) {
-      this._filter.focus();
-    }
-  }.bind(this), false);
-}
-
-SplitView.prototype = {
-  /**
-    * Retrieve whether the UI currently has a landscape orientation.
-    *
-    * @return boolean
-    */
-  get isLandscape() this._mql.matches,
-
-  /**
-    * Retrieve the root element.
-    *
-    * @return DOMElement
-    */
-  get rootElement() this._root,
-
-  /**
-    * Retrieve the active item's summary element or null if there is none.
-    *
-    * @return DOMElement
-    */
-  get activeSummary() this._activeSummary,
-
-  /**
-    * Set the active item's summary element.
-    *
-    * @param DOMElement aSummary
-    */
-  set activeSummary(aSummary)
-  {
-    if (aSummary == this._activeSummary) {
-      return;
-    }
-
-    if (this._activeSummary) {
-      let binding = this._activeSummary.getUserData(BINDING_USERDATA);
-      this._activeSummary.classList.remove("splitview-active");
-      binding._details.classList.remove("splitview-active");
-
-      if (binding.onHide) {
-        binding.onHide(this._activeSummary, binding._details, binding.data);
-      }
-    }
-
-    if (!aSummary) {
-      return;
-    }
-
-    let binding = aSummary.getUserData(BINDING_USERDATA);
-    aSummary.classList.add("splitview-active");
-    binding._details.classList.add("splitview-active");
-
-    this._activeSummary = aSummary;
-
-    if (binding.onShow) {
-      binding.onShow(aSummary, binding._details, binding.data);
-    }
-    aSummary.scrollIntoView();
-  },
-
-  /**
-    * Retrieve the active item's details element or null if there is none.
-    * @return DOMElement
-    */
-  get activeDetails()
-  {
-    let summary = this.activeSummary;
-    return summary ? summary.getUserData(BINDING_USERDATA)._details : null;
-  },
-
-  /**
-   * Retrieve the summary element for a given ordinal.
-   *
-   * @param number aOrdinal
-   * @return DOMElement
-   *         Summary element with given ordinal or null if not found.
-   * @see appendItem
-   */
-  getSummaryElementByOrdinal: function SEC_getSummaryElementByOrdinal(aOrdinal)
-  {
-    return this._nav.querySelector("* > li[data-ordinal='" + aOrdinal + "']");
-  },
-
-  /**
-   * Append an item to the split view.
-   *
-   * @param DOMElement aSummary
-   *        The summary element for the item.
-   * @param DOMElement aDetails
-   *        The details element for the item.
-   * @param object aOptions
-   *     Optional object that defines custom behavior and data for the item.
-   *     All properties are optional :
-   *     - function(DOMElement summary, DOMElement details, object data) onCreate
-   *         Called when the item has been added.
-   *     - function(summary, details, data) onShow
-   *         Called when the item is shown/active.
-   *     - function(summary, details, data) onHide
-   *         Called when the item is hidden/inactive.
-   *     - function(summary, details, data) onDestroy
-   *         Called when the item has been removed.
-   *     - function(summary, details, data, query) onFilterBy
-   *         Called when the user performs a filtering search.
-   *         If the function returns false, the item does not match query
-   *         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.
-   */
-  appendItem: function ASV_appendItem(aSummary, aDetails, aOptions)
-  {
-    let binding = aOptions || {};
-
-    binding._summary = aSummary;
-    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) {
-      aEvent.stopPropagation();
-      this.activeSummary = aSummary;
-    }.bind(this), false);
-
-    this._side.appendChild(aDetails);
-
-    if (binding.onCreate) {
-      binding.onCreate(aSummary, aDetails, binding.data);
-    }
-
-    if (!binding.disableAnimations) {
-      scheduleAnimation(aSummary, "splitview-slide", "splitview-flash");
-      aSummary.scrollIntoView();
-    }
-  },
-
-  /**
-   * Append an item to the split view according to two template elements
-   * (one for the item's summary and the other for the item's details).
-   *
-   * @param string aName
-   *        Name of the template elements to instantiate.
-   *        Requires two (hidden) DOM elements with id "splitview-tpl-summary-"
-   *        and "splitview-tpl-details-" suffixed with aName.
-   * @param object aOptions
-   *        Optional object that defines custom behavior and data for the item.
-   *        See appendItem for full description.
-   * @return object{summary:,details:}
-   *         Object with the new DOM elements created for summary and details.
-   * @see appendItem
-   */
-  appendTemplatedItem: function ASV_appendTemplatedItem(aName, aOptions)
-  {
-    aOptions = aOptions || {};
-    let summary = this._root.querySelector("#splitview-tpl-summary-" + aName);
-    let details = this._root.querySelector("#splitview-tpl-details-" + aName);
-
-    summary = summary.cloneNode(true);
-    summary.id = "";
-    if (aOptions.ordinal !== undefined) { // can be zero
-      summary.style.MozBoxOrdinalGroup = aOptions.ordinal;
-      summary.setAttribute("data-ordinal", aOptions.ordinal);
-    }
-    details = details.cloneNode(true);
-    details.id = "";
-
-    this.appendItem(summary, details, aOptions);
-    return {summary: summary, details: details};
-  },
-
-  /**
-    * Remove an item from the split view.
-    *
-    * @param DOMElement aSummary
-    *        Summary element of the item to remove.
-    */
-  removeItem: function ASV_removeItem(aSummary)
-  {
-    if (aSummary == this._activeSummary) {
-      this.activeSummary = null;
-    }
-
-    let binding = aSummary.getUserData(BINDING_USERDATA);
-    aSummary.parentNode.removeChild(aSummary);
-    binding._details.parentNode.removeChild(binding._details);
-
-    if (binding.onDestroy) {
-      binding.onDestroy(aSummary, binding._details, binding.data);
-    }
-  },
-
-  /**
-   * Remove all items from the split view.
-   */
-  removeAll: function ASV_removeAll()
-  {
-    while (this._nav.hasChildNodes()) {
-      this.removeItem(this._nav.firstChild);
-    }
-  },
-
-  /**
-    * Filter items by given string.
-    * Matching is performed on every item by calling onFilterBy when defined
-    * and then by searching aQuery in the summary element's text item.
-    * Non-matching item is hidden.
-    *
-    * If no item matches, 'splitview-all-filtered' class is set on the filter
-    * input element and the splitview-nav element.
-    *
-    * @param string aQuery
-    *        The query string. Use null to reset (no filter).
-    * @return number
-    *         The number of filtered (non-matching) item.
-    */
-  filterItemsBy: function ASV_filterItemsBy(aQuery)
-  {
-    if (!this._nav.hasChildNodes()) {
-      return 0;
-    }
-    if (aQuery) {
-      aQuery = aQuery.trim();
-    }
-    if (!aQuery) {
-      for (let i = 0; i < this._nav.childNodes.length; ++i) {
-        this._nav.childNodes[i].classList.remove("splitview-filtered");
-      }
-      this._filter.classList.remove("splitview-all-filtered");
-      this._nav.classList.remove("splitview-all-filtered");
-      return 0;
-    }
-
-    let count = 0;
-    let filteredCount = 0;
-    for (let i = 0; i < this._nav.childNodes.length; ++i) {
-      let summary = this._nav.childNodes[i];
-
-      let matches = false;
-      let binding = summary.getUserData(BINDING_USERDATA);
-      if (binding.onFilterBy) {
-        matches = binding.onFilterBy(summary, binding._details, binding.data, aQuery);
-      }
-      if (!matches) { // try text content
-        let content = summary.textContent.toUpperCase();
-        matches = (content.indexOf(aQuery.toUpperCase()) > -1);
-      }
-
-      count++;
-      if (!matches) {
-        summary.classList.add("splitview-filtered");
-        filteredCount++;
-      } else {
-        summary.classList.remove("splitview-filtered");
-      }
-    }
-
-    if (count > 0 && filteredCount == count) {
-      this._filter.classList.add("splitview-all-filtered");
-      this._nav.classList.add("splitview-all-filtered");
-    } else {
-      this._filter.classList.remove("splitview-all-filtered");
-      this._nav.classList.remove("splitview-all-filtered");
-    }
-    return filteredCount;
-  },
-
-  /**
-   * Set the item's CSS class name.
-   * This sets the class on both the summary and details elements, retaining
-   * any SplitView-specific classes.
-   *
-   * @param DOMElement aSummary
-   *        Summary element of the item to set.
-   * @param string aClassName
-   *        One or more space-separated CSS classes.
-   */
-  setItemClassName: function ASV_setItemClassName(aSummary, aClassName)
-  {
-    let binding = aSummary.getUserData(BINDING_USERDATA);
-    let viewSpecific;
-
-    viewSpecific = aSummary.className.match(/(splitview\-[\w-]+)/g);
-    viewSpecific = viewSpecific ? viewSpecific.join(" ") : "";
-    aSummary.className = viewSpecific + " " + aClassName;
-
-    viewSpecific = binding._details.className.match(/(splitview\-[\w-]+)/g);
-    viewSpecific = viewSpecific ? viewSpecific.join(" ") : "";
-    binding._details.className = viewSpecific + " " + aClassName;
-  },
-
-  /**
-   * Set up filter search box.
-   */
-  _setupFilterBox: function ASV__setupFilterBox()
-  {
-    let clearFilter = function clearFilter(aEvent) {
-      this._filter.value = "";
-      this.filterItemsBy("");
-      return false;
-    }.bind(this);
-
-    this._filter.addEventListener("command", function onFilterInput(aEvent) {
-      this.filterItemsBy(this._filter.value);
-    }.bind(this), false);
-
-    this._filter.addEventListener("keyup", function onFilterKeyUp(aEvent) {
-      if (aEvent.keyCode == aEvent.DOM_VK_ESCAPE) {
-        clearFilter();
-      }
-      if (aEvent.keyCode == aEvent.DOM_VK_ENTER ||
-          aEvent.keyCode == aEvent.DOM_VK_RETURN) {
-        // autofocus matching item if there is only one
-        let matches = this._nav.querySelectorAll("* > li:not(.splitview-filtered)");
-        if (matches.length == 1) {
-          this.activeSummary = matches[0];
-        }
-      }
-    }.bind(this), false);
-
-    let clearButtons = this._root.querySelectorAll(".splitview-filter-clearButton");
-    for (let i = 0; i < clearButtons.length; ++i) {
-      clearButtons[i].addEventListener("click", clearFilter, false);
-    }
-  }
-};
-
-//
-// 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/StyleEditor.jsm b/browser/devtools/styleeditor/StyleEditor.jsm
deleted file mode 100644
index de000a6fdebf..000000000000
--- a/browser/devtools/styleeditor/StyleEditor.jsm
+++ /dev/null
@@ -1,1112 +0,0 @@
-/* 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 Style Editor 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):
- *   Cedric Vivier <cedricv@neonux.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 ***** */
-
-"use strict";
-
-const EXPORTED_SYMBOLS = ["StyleEditor", "StyleEditorFlags"];
-
-const Cc = Components.classes;
-const Ci = Components.interfaces;
-const Cu = Components.utils;
-
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource://gre/modules/NetUtil.jsm");
-Cu.import("resource://gre/modules/FileUtils.jsm");
-Cu.import("resource:///modules/devtools/StyleEditorUtil.jsm");
-Cu.import("resource:///modules/source-editor.jsm");
-
-const LOAD_ERROR = "error-load";
-const SAVE_ERROR = "error-save";
-
-// max update frequency in ms (avoid potential typing lag and/or flicker)
-// @see StyleEditor.updateStylesheet
-const UPDATE_STYLESHEET_THROTTLE_DELAY = 500;
-
-// @see StyleEditor._persistExpando
-const STYLESHEET_EXPANDO = "-moz-styleeditor-stylesheet-";
-
-
-/**
- * StyleEditor constructor.
- *
- * The StyleEditor is initialized 'headless', it does not display source
- * or receive input. Setting inputElement attaches a DOMElement to handle this.
- *
- * An editor can be created stand-alone or created by StyleEditorChrome to
- * manage all the style sheets of a document, including @import'ed sheets.
- *
- * @param DOMDocument aDocument
- *        The content document where changes will be applied to.
- * @param DOMStyleSheet aStyleSheet
- *        Optional. The DOMStyleSheet to edit.
- *        If not set, a new empty style sheet will be appended to the document.
- * @see inputElement
- * @see StyleEditorChrome
- */
-function StyleEditor(aDocument, aStyleSheet)
-{
-  assert(aDocument, "Argument 'aDocument' is required.");
-
-  this._document = aDocument; // @see contentDocument
-  this._inputElement = null;  // @see inputElement
-  this._sourceEditor = null;  // @see sourceEditor
-
-  this._state = {             // state to handle inputElement attach/detach
-    text: "",                 // seamlessly
-    selection: {start: 0, end: 0},
-    readOnly: false
-  };
-
-  this._styleSheet = aStyleSheet;
-  this._styleSheetIndex = -1; // unknown for now, will be set after load
-
-  this._loaded = false;
-
-  this._flags = [];           // @see flags
-  this._savedFile = null;     // @see savedFile
-
-  this._errorMessage = null;  // @see errorMessage
-
-  // listeners for significant editor actions. @see addActionListener
-  this._actionListeners = [];
-
-  // this is to perform pending updates before editor closing
-  this._onWindowUnloadBinding = this._onWindowUnload.bind(this);
-  // this is to proxy the focus event to underlying SourceEditor
-  this._onInputElementFocusBinding = this._onInputElementFocus.bind(this);
-  this._focusOnSourceEditorReady = false;
-}
-
-StyleEditor.prototype = {
-  /**
-   * Retrieve the content document this editor will apply changes to.
-   *
-   * @return DOMDocument
-   */
-  get contentDocument() this._document,
-
-  /**
-   * Retrieve the stylesheet this editor is attached to.
-   *
-   * @return DOMStyleSheet
-   */
-  get styleSheet()
-  {
-    assert(this._styleSheet, "StyleSheet must be loaded first.")
-    return this._styleSheet;
-  },
-
-  /**
-   * Retrieve the index (order) of stylesheet in the document.
-   *
-   * @return number
-   */
-  get styleSheetIndex()
-  {
-    let document = this.contentDocument;
-    if (this._styleSheetIndex == -1) {
-      for (let i = 0; i < document.styleSheets.length; ++i) {
-        if (document.styleSheets[i] == this.styleSheet) {
-          this._styleSheetIndex = i;
-          break;
-        }
-      }
-    }
-    return this._styleSheetIndex;
-  },
-
-  /**
-   * Retrieve the input element that handles display and input for this editor.
-   * Can be null if the editor is detached/headless, which means that this
-   * StyleEditor is not attached to an input element.
-   *
-   * @return DOMElement
-   */
-  get inputElement() this._inputElement,
-
-  /**
-   * Set the input element that handles display and input for this editor.
-   * This detaches the previous input element if previously set.
-   *
-   * @param DOMElement aElement
-   */
-  set inputElement(aElement)
-  {
-    if (aElement == this._inputElement) {
-      return; // no change
-    }
-
-    if (this._inputElement) {
-      // detach from current input element
-      if (this._sourceEditor) {
-        // save existing state first (for seamless reattach)
-        this._state = {
-          text: this._sourceEditor.getText(),
-          selection: this._sourceEditor.getSelection(),
-          readOnly: this._sourceEditor.readOnly
-        };
-        this._sourceEditor.destroy();
-        this._sourceEditor = null;
-      }
-
-      this.window.removeEventListener("unload",
-                                      this._onWindowUnloadBinding, false);
-      this._inputElement.removeEventListener("focus",
-        this._onInputElementFocusBinding, true);
-      this._triggerAction("Detach");
-    }
-
-    this._inputElement = aElement;
-    if (!aElement) {
-      return;
-    }
-
-    // attach to new input element
-    this.window.addEventListener("unload", this._onWindowUnloadBinding, false);
-    this._focusOnSourceEditorReady = false;
-    aElement.addEventListener("focus", this._onInputElementFocusBinding, true);
-
-    this._sourceEditor = null; // set it only when ready (safe to use)
-
-    let sourceEditor = new SourceEditor();
-    let config = {
-      placeholderText: this._state.text, //! this is initialText (bug 680371)
-      showLineNumbers: true,
-      mode: SourceEditor.MODES.CSS,
-      readOnly: this._state.readOnly,
-      keys: this._getKeyBindings()
-    };
-
-    sourceEditor.init(aElement, config, function onSourceEditorReady() {
-      sourceEditor.setSelection(this._state.selection.start,
-                                this._state.selection.end);
-
-      if (this._focusOnSourceEditorReady) {
-        sourceEditor.focus();
-      }
-
-      sourceEditor.addEventListener(SourceEditor.EVENTS.TEXT_CHANGED,
-                                    function onTextChanged(aEvent) {
-        this.updateStyleSheet();
-      }.bind(this));
-
-      this._sourceEditor = sourceEditor;
-      this._triggerAction("Attach");
-    }.bind(this));
-  },
-
-  /**
-   * Retrieve the underlying SourceEditor instance for this StyleEditor.
-   * Can be null if not ready or Style Editor is detached/headless.
-   *
-   * @return SourceEditor
-   */
-  get sourceEditor() this._sourceEditor,
-
-  /**
-   * Setter for the read-only state of the editor.
-   *
-   * @param boolean aValue
-   *        Tells if you want the editor to be read-only or not.
-   */
-  set readOnly(aValue)
-  {
-    this._state.readOnly = aValue;
-    if (this._sourceEditor) {
-      this._sourceEditor.readOnly = aValue;
-    }
-  },
-
-  /**
-   * Getter for the read-only state of the editor.
-   *
-   * @return boolean
-   */
-  get readOnly()
-  {
-    return this._state.readOnly;
-  },
-
-  /**
-   * Retrieve the window that contains the editor.
-   * Can be null if the editor is detached/headless.
-   *
-   * @return DOMWindow
-   */
-  get window()
-  {
-    if (!this.inputElement) {
-      return null;
-    }
-    return this.inputElement.ownerDocument.defaultView;
-  },
-
-  /**
-   * Retrieve the last file this editor has been saved to or null if none.
-   *
-   * @return nsIFile
-   */
-  get savedFile() this._savedFile,
-
-  /**
-   * Import style sheet from file and load it into the editor asynchronously.
-   * "Load" action triggers when complete.
-   *
-   * @param mixed aFile
-   *        Optional nsIFile or filename string.
-   *        If not set a file picker will be shown.
-   * @param nsIWindow aParentWindow
-   *        Optional parent window for the file picker.
-   */
-  importFromFile: function SE_importFromFile(aFile, aParentWindow)
-  {
-    aFile = this._showFilePicker(aFile, false, aParentWindow);
-    if (!aFile) {
-      return;
-    }
-    this._savedFile = aFile; // remember filename for next save if any
-
-    NetUtil.asyncFetch(aFile, function onAsyncFetch(aStream, aStatus) {
-      if (!Components.isSuccessCode(aStatus)) {
-        return this._signalError(LOAD_ERROR);
-      }
-      let source = NetUtil.readInputStreamToString(aStream, aStream.available());
-      aStream.close();
-
-      this._appendNewStyleSheet(source);
-      this.clearFlag(StyleEditorFlags.ERROR);
-    }.bind(this));
-  },
-
-  /**
-    * Retrieve localized error message of last error condition, or null if none.
-    * This is set when the editor has flag StyleEditorFlags.ERROR.
-    *
-    * @see addActionListener
-    */
-  get errorMessage() this._errorMessage,
-
-  /**
-   * Tell whether the stylesheet has been loaded and ready for modifications.
-   *
-   * @return boolean
-   */
-  get isLoaded() this._loaded,
-
-  /**
-   * Load style sheet source into the editor, asynchronously.
-   * "Load" handler triggers when complete.
-   *
-   * @see addActionListener
-   */
-  load: function SE_load()
-  {
-    if (!this._styleSheet) {
-      this._flags.push(StyleEditorFlags.NEW);
-      this._appendNewStyleSheet();
-    }
-    this._loadSource();
-  },
-
-  /**
-   * Get a user-friendly name for the style sheet.
-   *
-   * @return string
-   */
-  getFriendlyName: function SE_getFriendlyName()
-  {
-    if (this.savedFile) { // reuse the saved filename if any
-      return this.savedFile.leafName;
-    }
-
-    if (this.hasFlag(StyleEditorFlags.NEW)) {
-      let index = this.styleSheetIndex + 1; // 0-indexing only works for devs
-      return _("newStyleSheet", index);
-    }
-
-    if (this.hasFlag(StyleEditorFlags.INLINE)) {
-      let index = this.styleSheetIndex + 1; // 0-indexing only works for devs
-      return _("inlineStyleSheet", index);
-    }
-
-    if (!this._friendlyName) {
-      let sheetURI = this.styleSheet.href;
-      let contentURI = this.contentDocument.baseURIObject;
-      let contentURIScheme = contentURI.scheme;
-      let contentURILeafIndex = contentURI.specIgnoringRef.lastIndexOf("/");
-      contentURI = contentURI.specIgnoringRef;
-
-      // get content base URI without leaf name (if any)
-      if (contentURILeafIndex > contentURIScheme.length) {
-        contentURI = contentURI.substring(0, contentURILeafIndex + 1);
-      }
-
-      // avoid verbose repetition of absolute URI when the style sheet URI
-      // is relative to the content URI
-      this._friendlyName = (sheetURI.indexOf(contentURI) == 0)
-                           ? sheetURI.substring(contentURI.length)
-                           : sheetURI;
-    }
-    return this._friendlyName;
-  },
-
-  /**
-   * Add a listener for significant StyleEditor actions.
-   *
-   * The listener implements IStyleEditorActionListener := {
-   *   onLoad:                 Called when the style sheet has been loaded and
-   *                           parsed.
-   *                           Arguments: (StyleEditor editor)
-   *                           @see load
-   *
-   *   onFlagChange:           Called when a flag has been set or cleared.
-   *                           Arguments: (StyleEditor editor, string flagName)
-   *                           @see setFlag
-   *
-   *   onAttach:               Called when an input element has been attached.
-   *                           Arguments: (StyleEditor editor)
-   *                           @see inputElement
-   *
-   *   onDetach:               Called when input element has been detached.
-   *                           Arguments: (StyleEditor editor)
-   *                           @see inputElement
-   *
-   *   onCommit:               Called when changes have been committed/applied
-   *                           to the live DOM style sheet.
-   *                           Arguments: (StyleEditor editor)
-   * }
-   *
-   * All listener methods are optional.
-   *
-   * @param IStyleEditorActionListener aListener
-   * @see removeActionListener
-   */
-  addActionListener: function SE_addActionListener(aListener)
-  {
-    this._actionListeners.push(aListener);
-  },
-
-  /**
-   * Remove a listener for editor actions from the current list of listeners.
-   *
-   * @param IStyleEditorActionListener aListener
-   * @see addActionListener
-   */
-  removeActionListener: function SE_removeActionListener(aListener)
-  {
-    let index = this._actionListeners.indexOf(aListener);
-    if (index != -1) {
-      this._actionListeners.splice(index, 1);
-    }
-  },
-
-  /**
-   * Editor UI flags.
-   *
-   * These are 1-bit indicators that can be used for UI feedback/indicators or
-   * extensions to track the editor status.
-   * Since they are simple strings, they promote loose coupling and can simply
-   * map to CSS class names, which allows to 'expose' indicators declaratively
-   * via CSS (including possibly complex combinations).
-   *
-   * Flag changes can be tracked via onFlagChange (@see addActionListener).
-   *
-   * @see StyleEditorFlags
-   */
-
-  /**
-   * Retrieve a space-separated string of all UI flags set on this editor.
-   *
-   * @return string
-   * @see setFlag
-   * @see clearFlag
-   */
-  get flags() this._flags.join(" "),
-
-  /**
-   * Set a flag.
-   *
-   * @param string aName
-   *        Name of the flag to set. One of StyleEditorFlags members.
-   * @return boolean
-   *         True if the flag has been set, false if flag is already set.
-   * @see StyleEditorFlags
-   */
-  setFlag: function SE_setFlag(aName)
-  {
-    let prop = aName.toUpperCase();
-    assert(StyleEditorFlags[prop], "Unknown flag: " + prop);
-
-    if (this.hasFlag(aName)) {
-      return false;
-    }
-    this._flags.push(aName);
-    this._triggerAction("FlagChange", [aName]);
-    return true;
-  },
-
-  /**
-   * Clear a flag.
-   *
-   * @param string aName
-   *        Name of the flag to clear.
-   * @return boolean
-   *         True if the flag has been cleared, false if already clear.
-   */
-  clearFlag: function SE_clearFlag(aName)
-  {
-    let index = this._flags.indexOf(aName);
-    if (index == -1) {
-      return false;
-    }
-    this._flags.splice(index, 1);
-    this._triggerAction("FlagChange", [aName]);
-    return true;
-  },
-
-  /**
-   * Toggle a flag, according to a condition.
-   *
-   * @param aCondition
-   *        If true the flag is set, otherwise cleared.
-   * @param string aName
-   *        Name of the flag to toggle.
-   * @return boolean
-   *        True if the flag has been set or cleared, ie. the flag got switched.
-   */
-  toggleFlag: function SE_toggleFlag(aCondition, aName)
-  {
-    return (aCondition) ? this.setFlag(aName) : this.clearFlag(aName);
-  },
-
-  /**
-   * Check if given flag is set.
-   *
-   * @param string aName
-   *        Name of the flag to check presence for.
-   * @return boolean
-   *         True if the flag is set, false otherwise.
-   */
-  hasFlag: function SE_hasFlag(aName) (this._flags.indexOf(aName) != -1),
-
-  /**
-   * Enable or disable style sheet.
-   *
-   * @param boolean aEnabled
-   */
-  enableStyleSheet: function SE_enableStyleSheet(aEnabled)
-  {
-    this.styleSheet.disabled = !aEnabled;
-    this.toggleFlag(this.styleSheet.disabled, StyleEditorFlags.DISABLED);
-
-    if (this._updateTask) {
-      this._updateStyleSheet(); // perform cancelled update
-    }
-  },
-
-  /**
-   * Save the editor contents into a file and set savedFile property.
-   * A file picker UI will open if file is not set and editor is not headless.
-   *
-   * @param mixed aFile
-   *        Optional nsIFile or string representing the filename to save in the
-   *        background, no UI will be displayed.
-   *        To implement 'Save' instead of 'Save as', you can pass savedFile here.
-   * @param function(nsIFile aFile) aCallback
-   *        Optional callback called when the operation has finished.
-   *        aFile has the nsIFile object for saved file or null if the operation
-   *        has failed or has been canceled by the user.
-   * @see savedFile
-   */
-  saveToFile: function SE_saveToFile(aFile, aCallback)
-  {
-    aFile = this._showFilePicker(aFile, true);
-    if (!aFile) {
-      if (aCallback) {
-        aCallback(null);
-      }
-      return;
-    }
-
-    if (this._sourceEditor) {
-      this._state.text = this._sourceEditor.getText();
-    }
-
-    let ostream = FileUtils.openSafeFileOutputStream(aFile);
-    let converter = Cc["@mozilla.org/intl/scriptableunicodeconverter"]
-                      .createInstance(Ci.nsIScriptableUnicodeConverter);
-    converter.charset = "UTF-8";
-    let istream = converter.convertToInputStream(this._state.text);
-
-    NetUtil.asyncCopy(istream, ostream, function SE_onStreamCopied(status) {
-      if (!Components.isSuccessCode(status)) {
-        if (aCallback) {
-          aCallback(null);
-        }
-        this._signalError(SAVE_ERROR);
-        return;
-      }
-      FileUtils.closeSafeFileOutputStream(ostream);
-
-      // remember filename for next save if any
-      this._friendlyName = null;
-      this._savedFile = aFile;
-      this._persistExpando();
-
-      if (aCallback) {
-        aCallback(aFile);
-      }
-      this.clearFlag(StyleEditorFlags.UNSAVED);
-      this.clearFlag(StyleEditorFlags.ERROR);
-    }.bind(this));
-  },
-
-  /**
-   * Queue a throttled task to update the live style sheet.
-   *
-   * @param boolean aImmediate
-   *        Optional. If true the update is performed immediately.
-   */
-  updateStyleSheet: function SE_updateStyleSheet(aImmediate)
-  {
-    let window = this.window;
-
-    if (this._updateTask) {
-      // cancel previous queued task not executed within throttle delay
-      window.clearTimeout(this._updateTask);
-    }
-
-    if (aImmediate) {
-      this._updateStyleSheet();
-    } else {
-      this._updateTask = window.setTimeout(this._updateStyleSheet.bind(this),
-                                           UPDATE_STYLESHEET_THROTTLE_DELAY);
-    }
-  },
-
-  /**
-   * Update live style sheet according to modifications.
-   */
-  _updateStyleSheet: function SE__updateStyleSheet()
-  {
-    this.setFlag(StyleEditorFlags.UNSAVED);
-
-    if (this.styleSheet.disabled) {
-      return;
-    }
-
-    this._updateTask = null; // reset only if we actually perform an update
-                             // (stylesheet is enabled) so that 'missed' updates
-                             // while the stylesheet is disabled can be performed
-                             // when it is enabled back. @see enableStylesheet
-
-    if (this.sourceEditor) {
-      this._state.text = this.sourceEditor.getText();
-    }
-    let source = this._state.text;
-    let oldNode = this.styleSheet.ownerNode;
-    let oldIndex = this.styleSheetIndex;
-
-    let newNode = this.contentDocument.createElement("style");
-    newNode.setAttribute("type", "text/css");
-    newNode.appendChild(this.contentDocument.createTextNode(source));
-    oldNode.parentNode.replaceChild(newNode, oldNode);
-
-    this._styleSheet = this.contentDocument.styleSheets[oldIndex];
-    this._persistExpando();
-
-    this._triggerAction("Commit");
-  },
-
-  /**
-   * Show file picker and return the file user selected.
-   *
-   * @param mixed aFile
-   *        Optional nsIFile or string representing the filename to auto-select.
-   * @param boolean aSave
-   *        If true, the user is selecting a filename to save.
-   * @param nsIWindow aParentWindow
-   *        Optional parent window. If null the parent window of the file picker
-   *        will be the window of the attached input element.
-   * @return nsIFile
-   *         The selected file or null if the user did not pick one.
-   */
-  _showFilePicker: function SE__showFilePicker(aFile, aSave, aParentWindow)
-  {
-    if (typeof(aFile) == "string") {
-      try {
-        let file = Cc["@mozilla.org/file/local;1"].createInstance(Ci.nsILocalFile);
-        file.initWithPath(aFile);
-        return file;
-      } catch (ex) {
-        this._signalError(aSave ? SAVE_ERROR : LOAD_ERROR);
-        return null;
-      }
-    }
-    if (aFile) {
-      return aFile;
-    }
-
-    let window = aParentWindow
-                 ? aParentWindow
-                 : this.inputElement.ownerDocument.defaultView;
-    let fp = Cc["@mozilla.org/filepicker;1"].createInstance(Ci.nsIFilePicker);
-    let mode = aSave ? fp.modeSave : fp.modeOpen;
-    let key = aSave ? "saveStyleSheet" : "importStyleSheet";
-
-    fp.init(window, _(key + ".title"), mode);
-    fp.appendFilters(_(key + ".filter"), "*.css");
-    fp.appendFilters(fp.filterAll);
-
-    let rv = fp.show();
-    return (rv == fp.returnCancel) ? null : fp.file;
-  },
-
-  /**
-   * Retrieve the style sheet source from the cache or from a local file.
-   */
-  _loadSource: function SE__loadSource()
-  {
-    if (!this.styleSheet.href) {
-      // this is an inline <style> sheet
-      this._flags.push(StyleEditorFlags.INLINE);
-      this._onSourceLoad(this.styleSheet.ownerNode.textContent);
-      return;
-    }
-
-    let scheme = Services.io.extractScheme(this.styleSheet.href);
-    switch (scheme) {
-      case "file":
-      case "chrome":
-      case "resource":
-        this._loadSourceFromFile(this.styleSheet.href);
-        break;
-      default:
-        this._loadSourceFromCache(this.styleSheet.href);
-        break;
-    }
-  },
-
-  /**
-   * Load source from a file or file-like resource.
-   *
-   * @param string aHref
-   *        URL for the stylesheet.
-   */
-  _loadSourceFromFile: function SE__loadSourceFromFile(aHref)
-  {
-    try {
-      NetUtil.asyncFetch(aHref, function onFetch(aStream, aStatus) {
-        if (!Components.isSuccessCode(aStatus)) {
-          return this._signalError(LOAD_ERROR);
-        }
-        let source = NetUtil.readInputStreamToString(aStream, aStream.available());
-        aStream.close();
-        this._onSourceLoad(source);
-      }.bind(this));
-    } catch (ex) {
-      this._signalError(LOAD_ERROR);
-    }
-  },
-
-  /**
-   * Load source from the HTTP cache.
-   *
-   * @param string aHref
-   *        URL for the stylesheet.
-   */
-  _loadSourceFromCache: function SE__loadSourceFromCache(aHref)
-  {
-    try {
-      let cacheService = Cc["@mozilla.org/network/cache-service;1"]
-                           .getService(Ci.nsICacheService);
-      let session = cacheService.createSession("HTTP", Ci.nsICache.STORE_ANYWHERE, true);
-      session.doomEntriesIfExpired = false;
-      session.asyncOpenCacheEntry(aHref, Ci.nsICache.ACCESS_READ, {
-        onCacheEntryAvailable: this._onCacheEntryAvailable.bind(this)
-      });
-    } catch (ex) {
-      this._signalError(LOAD_ERROR);
-    }
-  },
-
-   /**
-    * The nsICacheListener.onCacheEntryAvailable method implementation used when
-    * the style sheet source is loaded from the browser cache.
-    *
-    * @param nsICacheEntryDescriptor aEntry
-    * @param nsCacheAccessMode aMode
-    * @param integer aStatus
-    */
-  _onCacheEntryAvailable: function SE__onCacheEntryAvailable(aEntry, aMode, aStatus)
-  {
-    assert(!this._loadingContext);
-    if (!Components.isSuccessCode(aStatus)) {
-      return this._signalError(LOAD_ERROR);
-    }
-
-    let stream = aEntry.openInputStream(0);
-    let context = {
-      chunks: [],
-      stream: stream,
-      entry: aEntry,
-      inputSink: this.onDataAvailable.bind(this),
-      editor: this,
-    };
-    this._loadingContext = context;
-
-    let head = aEntry.getMetaDataElement("response-head");
-    if (/^Content-Encoding:\s*gzip/mi.test(head)) {
-      let converter = Cc["@mozilla.org/streamconv;1?from=gzip&to=uncompressed"]
-                        .createInstance(Ci.nsIStreamConverter);
-      converter.asyncConvertData("gzip", "uncompressed", this, null);
-      context.inputSink = converter.onDataAvailable;
-    }
-
-    // start grabbing available chunk(s)
-    context.inputSink(null, null, stream, 0, stream.available());
-  },
-
-  /**
-   * nsIStreamListener.onDataAvailable implementation used as input sink when
-   * style sheet source is loaded from the browser cache.
-   *
-   * @private
-   * @param nsIRequest aRequest
-   * @param nsISupports aContext
-   * @param nsIInputStream aStream
-   * @param number aOffset
-   * @param number aCount
-   */
-  onDataAvailable: function SE_onDataAvailable(aRequest, aContext, aStream, aOffset, aCount) {
-    let context = this._loadingContext;
-    context.chunks.push(NetUtil.readInputStreamToString(aStream, aCount));
-
-    let available;
-    try {
-      available = context.stream.available();
-      if (!available) {
-        context.stream.close();
-      }
-    } catch (ex) {
-      // note: some nsIInputStream implementations auto-close at EOS and throw
-    }
-    if (!available) {
-      context.entry.close();
-      context.editor._onSourceLoad(context.chunks.join(""));
-      context.editor._loadingContext = null;
-      return;
-    }
-
-    // load the next available chunk
-    context.inputSink(null, aContext, context.stream, 0, available);
-  },
-
-  /**
-   * Called when source has been loaded.
-   *
-   * @param string aSourceText
-   */
-  _onSourceLoad: function SE__onSourceLoad(aSourceText)
-  {
-    this._restoreExpando();
-    this._state.text = prettifyCSS(aSourceText);
-    this._loaded = true;
-    this._triggerAction("Load");
-  },
-
-  /**
-   * Create a new style sheet and append it to the content document.
-   *
-   * @param string aText
-   *        Optional CSS text.
-   */
-  _appendNewStyleSheet: function SE__appendNewStyleSheet(aText)
-  {
-    let document = this.contentDocument;
-    let parent = document.documentElement;
-    let style = document.createElement("style");
-    style.setAttribute("type", "text/css");
-    if (aText) {
-      style.appendChild(document.createTextNode(aText));
-    }
-    parent.appendChild(style);
-
-    this._styleSheet = document.styleSheets[document.styleSheets.length - 1];
-    this._flags.push(aText ? StyleEditorFlags.IMPORTED : StyleEditorFlags.NEW);
-    if (aText) {
-      this._onSourceLoad(aText);
-    }
-  },
-
-  /**
-   * Signal an error to the user.
-   *
-   * @param string aErrorCode
-   *        String name for the localized error property in the string bundle.
-   * @param ...rest
-   *        Optional arguments to pass for message formatting.
-   * @see StyleEditorUtil._
-   */
-  _signalError: function SE__signalError(aErrorCode)
-  {
-    this._errorMessage = _.apply(null, arguments);
-    this.setFlag(StyleEditorFlags.ERROR);
-  },
-
-  /**
-   * Trigger named action handler in listeners.
-   *
-   * @param string aName
-   *        Name of the action to trigger.
-   * @param Array aArgs
-   *        Optional array of arguments to pass to the listener(s).
-   * @see addActionListener
-   */
-  _triggerAction: function SE__triggerAction(aName, aArgs)
-  {
-    // insert the origin editor instance as first argument
-    if (!aArgs) {
-      aArgs = [this];
-    } else {
-      aArgs.unshift(this);
-    }
-
-    // trigger all listeners that have this action handler
-    for (let i = 0; i < this._actionListeners.length; ++i) {
-      let listener = this._actionListeners[i];
-      let actionHandler = listener["on" + aName];
-      if (actionHandler) {
-        actionHandler.apply(listener, aArgs);
-      }
-    }
-
-    // when a flag got changed, user-facing state need to be persisted
-    if (aName == "FlagChange") {
-      this._persistExpando();
-    }
-  },
-
-  /**
-    * Unload event handler to perform any pending update before closing
-    */
-  _onWindowUnload: function SE__onWindowUnload(aEvent)
-  {
-    if (this._updateTask) {
-      this.updateStyleSheet(true);
-    }
-  },
-
-  /**
-    * Focus event handler to automatically proxy inputElement's focus event to
-    * SourceEditor whenever it is ready.
-    * SourceEditor should probably have a command buffer so that timing issues
-    * related to iframe implementation details are handled by itself rather than
-    * by all its users.
-    */
-  _onInputElementFocus: function SE__onInputElementFocus(aEvent)
-  {
-    if (this._sourceEditor) {
-      this._sourceEditor.focus();
-    } else {
-      this._focusOnSourceEditorReady = true;
-    }
-  },
-
-  /**
-    * Persist StyleEditor extra data to the attached DOM stylesheet expando.
-    * The expando on the DOM stylesheet is used to restore user-facing state
-    * when the StyleEditor is closed and then reopened again.
-    *
-    * @see styleSheet
-    */
-  _persistExpando: function SE__persistExpando() {
-    if (!this._styleSheet) {
-      return; // not loaded
-    }
-    let name = STYLESHEET_EXPANDO + this.styleSheetIndex;
-    let expando = this.contentDocument.getUserData(name);
-    if (!expando) {
-      expando = {};
-      this.contentDocument.setUserData(name, expando, null);
-    }
-    expando._flags = this._flags;
-    expando._savedFile = this._savedFile;
-  },
-
-  /**
-    * Restore the attached DOM stylesheet expando into this editor state.
-    *
-    * @see styleSheet
-    */
-  _restoreExpando: function SE__restoreExpando() {
-    if (!this._styleSheet) {
-      return; // not loaded
-    }
-    let name = STYLESHEET_EXPANDO + this.styleSheetIndex;
-    let expando = this.contentDocument.getUserData(name);
-    if (expando) {
-      this._flags = expando._flags;
-      this._savedFile = expando._savedFile;
-    }
-  },
-
-  /**
-    * Retrieve custom key bindings objects as expected by SourceEditor.
-    * SourceEditor action names are not displayed to the user.
-    *
-    * @return Array
-    */
-  _getKeyBindings: function () {
-    let bindings = [];
-
-    bindings.push({
-      action: "StyleEditor.save",
-      code: _("saveStyleSheet.commandkey"),
-      accel: true,
-      callback: function save() {
-        this.saveToFile(this._savedFile);
-      }.bind(this)
-    });
-    bindings.push({
-      action: "StyleEditor.saveAs",
-      code: _("saveStyleSheet.commandkey"),
-      accel: true,
-      shift: true,
-      callback: function saveAs() {
-        this.saveToFile();
-      }.bind(this)
-    });
-
-    return bindings;
-  }
-};
-
-/**
- * List of StyleEditor UI flags.
- * A Style Editor add-on using its own flag needs to add it to this object.
- *
- * @see StyleEditor.setFlag
- */
-let StyleEditorFlags = {
-  DISABLED:      "disabled",
-  ERROR:         "error",
-  IMPORTED:      "imported",
-  INLINE:        "inline",
-  MODIFIED:      "modified",
-  NEW:           "new",
-  UNSAVED:       "unsaved"
-};
-
-
-const TAB_CHARS   = "\t";
-
-const OS = Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
-const LINE_SEPARATOR = OS === "WINNT" ? "\r\n" : "\n";
-
-/**
- * Prettify minified CSS text.
- * This prettifies CSS code where there is no indentation in usual places while
- * keeping original indentation as-is elsewhere.
- *
- * @param string aText
- *        The CSS source to prettify.
- * @return string
- *         Prettified CSS source
- */
-function prettifyCSS(aText)
-{
-  // remove initial and terminating HTML comments and surrounding whitespace
-  aText = aText.replace(/(?:^\s*<!--[\r\n]*)|(?:\s*-->\s*$)/g, "");
-
-  let parts = [];    // indented parts
-  let partStart = 0; // start offset of currently parsed part
-  let indent = "";
-  let indentLevel = 0;
-
-  for (let i = 0; i < aText.length; i++) {
-    let c = aText[i];
-    let shouldIndent = false;
-
-    switch (c) {
-      case "}":
-        if (i - partStart > 1) {
-          // there's more than just } on the line, add line
-          parts.push(indent + aText.substring(partStart, i));
-          partStart = i;
-        }
-        indent = repeat(TAB_CHARS, --indentLevel);
-        /* fallthrough */
-      case ";":
-      case "{":
-        shouldIndent = true;
-        break;
-    }
-
-    if (shouldIndent) {
-      let la = aText[i+1]; // one-character lookahead
-      if (!/\s/.test(la)) {
-        // following character should be a new line (or whitespace) but it isn't
-        // force indentation then
-        parts.push(indent + aText.substring(partStart, i + 1));
-        if (c == "}") {
-          parts.push(""); // for extra line separator
-        }
-        partStart = i + 1;
-      } else {
-        return aText; // assume it is not minified, early exit
-      }
-    }
-
-    if (c == "{") {
-      indent = repeat(TAB_CHARS, ++indentLevel);
-    }
-  }
-  return parts.join(LINE_SEPARATOR);
-}
-
-/**
-  * Return string that repeats aText for aCount times.
-  *
-  * @param string aText
-  * @param number aCount
-  * @return string
-  */
-function repeat(aText, aCount)
-{
-  return (new Array(aCount + 1)).join(aText);
-}
diff --git a/browser/devtools/styleeditor/StyleEditorChrome.jsm b/browser/devtools/styleeditor/StyleEditorChrome.jsm
deleted file mode 100644
index 74f29d4100da..000000000000
--- a/browser/devtools/styleeditor/StyleEditorChrome.jsm
+++ /dev/null
@@ -1,488 +0,0 @@
-/* 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 Style Editor 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):
- *   Cedric Vivier <cedricv@neonux.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 ***** */
-
-"use strict";
-
-const EXPORTED_SYMBOLS = ["StyleEditorChrome"];
-
-const Cc = Components.classes;
-const Ci = Components.interfaces;
-const Cu = Components.utils;
-
-Cu.import("resource://gre/modules/Services.jsm");
-Cu.import("resource://gre/modules/PluralForm.jsm");
-Cu.import("resource:///modules/devtools/StyleEditor.jsm");
-Cu.import("resource:///modules/devtools/StyleEditorUtil.jsm");
-Cu.import("resource:///modules/devtools/SplitView.jsm");
-
-const STYLE_EDITOR_TEMPLATE = "stylesheet";
-
-
-/**
- * StyleEditorChrome constructor.
- *
- * The 'chrome' of the Style Editor is all the around the actual editor (textbox).
- * Manages the sheet selector, history, and opened editor(s) for the attached
- * content window.
- *
- * @param DOMElement aRoot
- *        Element that owns the chrome UI.
- * @param DOMWindow aContentWindow
- *        Content DOMWindow to attach to this chrome.
- */
-function StyleEditorChrome(aRoot, aContentWindow)
-{
-  assert(aRoot, "Argument 'aRoot' is required to initialize StyleEditorChrome.");
-
-  this._root = aRoot;
-  this._document = this._root.ownerDocument;
-  this._window = this._document.defaultView;
-
-  this._editors = [];
-  this._listeners = []; // @see addChromeListener
-
-  this._contentWindow = null;
-  this._isContentAttached = false;
-
-  let initializeUI = function (aEvent) {
-    if (aEvent) {
-      this._window.removeEventListener("load", initializeUI, false);
-    }
-
-    let viewRoot = this._root.parentNode.querySelector(".splitview-root");
-    this._view = new SplitView(viewRoot);
-
-    this._setupChrome();
-
-    // attach to the content window
-    this.contentWindow = aContentWindow;
-    this._contentWindowID = null;
-  }.bind(this);
-
-  if (this._document.readyState == "complete") {
-    initializeUI();
-  } else {
-    this._window.addEventListener("load", initializeUI, false);
-  }
-}
-
-StyleEditorChrome.prototype = {
-  /**
-   * Retrieve the content window attached to this chrome.
-   *
-   * @return DOMWindow
-   *         Content window or null if no content window is attached.
-   */
-  get contentWindow() this._contentWindow,
-
-  /**
-   * Retrieve the ID of the content window attached to this chrome.
-   *
-   * @return number
-   *         Window ID or -1 if no content window is attached.
-   */
-  get contentWindowID()
-  {
-    try {
-      return this._contentWindow.QueryInterface(Ci.nsIInterfaceRequestor).
-        getInterface(Ci.nsIDOMWindowUtils).currentInnerWindowID;
-    } catch (ex) {
-      return -1;
-    }
-  },
-
-  /**
-   * Set the content window attached to this chrome.
-   * Content attach or detach events/notifications are triggered after the
-   * operation is complete (possibly asynchronous if the content is not fully
-   * loaded yet).
-   *
-   * @param DOMWindow aContentWindow
-   * @see addChromeListener
-   */
-  set contentWindow(aContentWindow)
-  {
-    if (this._contentWindow == aContentWindow) {
-      return; // no change
-    }
-
-    this._contentWindow = aContentWindow;
-
-    if (!aContentWindow) {
-      this._disableChrome();
-      return;
-    }
-
-    let onContentUnload = function () {
-      aContentWindow.removeEventListener("unload", onContentUnload, false);
-      if (this.contentWindow == aContentWindow) {
-        this.contentWindow = null; // detach
-      }
-    }.bind(this);
-    aContentWindow.addEventListener("unload", onContentUnload, false);
-
-    if (aContentWindow.document.readyState == "complete") {
-      this._populateChrome();
-      return;
-    } else {
-      let onContentReady = function () {
-        aContentWindow.removeEventListener("load", onContentReady, false);
-        this._populateChrome();
-      }.bind(this);
-      aContentWindow.addEventListener("load", onContentReady, false);
-    }
-  },
-
-  /**
-   * Retrieve the content document attached to this chrome.
-   *
-   * @return DOMDocument
-   */
-  get contentDocument()
-  {
-    return this._contentWindow ? this._contentWindow.document : null;
-  },
-
-  /**
-    * Retrieve whether the content has been attached and StyleEditor instances
-    * exist for all of its stylesheets.
-    *
-    * @return boolean
-    * @see addChromeListener
-    */
-  get isContentAttached() this._isContentAttached,
-
-  /**
-   * Retrieve an array with the StyleEditor instance for each live style sheet,
-   * ordered by style sheet index.
-   *
-   * @return Array<StyleEditor>
-   */
-  get editors()
-  {
-    let editors = [];
-    this._editors.forEach(function (aEditor) {
-      if (aEditor.styleSheetIndex >= 0) {
-        editors[aEditor.styleSheetIndex] = aEditor;
-      }
-    });
-    return editors;
-  },
-
-  /**
-   * Add a listener for StyleEditorChrome events.
-   *
-   * The listener implements IStyleEditorChromeListener := {
-   *   onContentAttach:        Called when a content window has been attached.
-   *                           All editors are instantiated, though they might
-   *                           not be loaded yet.
-   *                           Arguments: (StyleEditorChrome aChrome)
-   *                           @see contentWindow
-   *                           @see StyleEditor.isLoaded
-   *                           @see StyleEditor.addActionListener
-   *
-   *   onContentDetach:        Called when the content window has been detached.
-   *                           Arguments: (StyleEditorChrome aChrome)
-   *                           @see contentWindow
-   *
-   *   onEditorAdded:          Called when a stylesheet (therefore a StyleEditor
-   *                           instance) has been added to the UI.
-   *                           Arguments (StyleEditorChrome aChrome,
-   *                                      StyleEditor aEditor)
-   * }
-   *
-   * All listener methods are optional.
-   *
-   * @param IStyleEditorChromeListener aListener
-   * @see removeChromeListener
-   */
-  addChromeListener: function SEC_addChromeListener(aListener)
-  {
-    this._listeners.push(aListener);
-  },
-
-  /**
-   * Remove a listener for Chrome events from the current list of listeners.
-   *
-   * @param IStyleEditorChromeListener aListener
-   * @see addChromeListener
-   */
-  removeChromeListener: function SEC_removeChromeListener(aListener)
-  {
-    let index = this._listeners.indexOf(aListener);
-    if (index != -1) {
-      this._listeners.splice(index, 1);
-    }
-  },
-
-  /**
-   * Trigger named handlers in StyleEditorChrome listeners.
-   *
-   * @param string aName
-   *        Name of the event to trigger.
-   * @param Array aArgs
-   *        Optional array of arguments to pass to the listener(s).
-   * @see addActionListener
-   */
-  _triggerChromeListeners: function SE__triggerChromeListeners(aName, aArgs)
-  {
-    // insert the origin Chrome instance as first argument
-    if (!aArgs) {
-      aArgs = [this];
-    } else {
-      aArgs.unshift(this);
-    }
-
-    // trigger all listeners that have this named handler
-    for (let i = 0; i < this._listeners.length; ++i) {
-      let listener = this._listeners[i];
-      let handler = listener["on" + aName];
-      if (handler) {
-        handler.apply(listener, aArgs);
-      }
-    }
-  },
-
-  /**
-   * Set up the chrome UI. Install event listeners and so on.
-   */
-  _setupChrome: function SEC__setupChrome()
-  {
-    // wire up UI elements
-    wire(this._view.rootElement, ".style-editor-newButton", function onNewButton() {
-      let editor = new StyleEditor(this.contentDocument);
-      this._editors.push(editor);
-      editor.addActionListener(this);
-      editor.load();
-    }.bind(this));
-
-    wire(this._view.rootElement, ".style-editor-importButton", function onImportButton() {
-      let editor = new StyleEditor(this.contentDocument);
-      this._editors.push(editor);
-      editor.addActionListener(this);
-      editor.importFromFile(this._mockImportFile || null, this._window);
-    }.bind(this));
-  },
-
-  /**
-   * Reset the chrome UI to an empty state.
-   */
-  _resetChrome: function SEC__resetChrome()
-  {
-    this._editors.forEach(function (aEditor) {
-      aEditor.removeActionListener(this);
-    }.bind(this));
-    this._editors = [];
-
-    this._view.removeAll();
-  },
-
-  /**
-   * Populate the chrome UI according to the content document.
-   *
-   * @see StyleEditor._setupShadowStyleSheet
-   */
-  _populateChrome: function SEC__populateChrome()
-  {
-    this._resetChrome();
-
-    this._document.title = _("chromeWindowTitle",
-          this.contentDocument.title || this.contentDocument.location.href);
-
-    let document = this.contentDocument;
-    for (let i = 0; i < document.styleSheets.length; ++i) {
-      let styleSheet = document.styleSheets[i];
-
-      let editor = new StyleEditor(document, styleSheet);
-      editor.addActionListener(this);
-      this._editors.push(editor);
-    }
-
-    this._triggerChromeListeners("ContentAttach");
-
-    // Queue editors loading so that ContentAttach is consistently triggered
-    // right after all editor instances are available (this.editors) but are
-    // NOT loaded/ready yet. This also helps responsivity during loading when
-    // there are many heavy stylesheets.
-    this._editors.forEach(function (aEditor) {
-      this._window.setTimeout(aEditor.load.bind(aEditor), 0);
-    }, this);
-  },
-
-  /**
-   * Disable all UI, effectively making editors read-only.
-   * This is automatically called when no content window is attached.
-   *
-   * @see contentWindow
-   */
-  _disableChrome: function SEC__disableChrome()
-  {
-    let matches = this._root.querySelectorAll("button,input,select");
-    for (let i = 0; i < matches.length; ++i) {
-      matches[i].setAttribute("disabled", "disabled");
-    }
-
-    this.editors.forEach(function onEnterReadOnlyMode(aEditor) {
-      aEditor.readOnly = true;
-    });
-
-    this._view.rootElement.setAttribute("disabled", "disabled");
-
-    this._triggerChromeListeners("ContentDetach");
-  },
-
-  /**
-   * Retrieve the summary element for a given editor.
-   *
-   * @param StyleEditor aEditor
-   * @return DOMElement
-   *         Item's summary element or null if not found.
-   * @see SplitView
-   */
-  getSummaryElementForEditor: function SEC_getSummaryElementForEditor(aEditor)
-  {
-    return this._view.getSummaryElementByOrdinal(aEditor.styleSheetIndex);
-  },
-
-  /**
-   * Update split view summary of given StyleEditor instance.
-   *
-   * @param StyleEditor aEditor
-   * @param DOMElement aSummary
-   *        Optional item's summary element to update. If none, item corresponding
-   *        to passed aEditor is used.
-   */
-  _updateSummaryForEditor: function SEC__updateSummaryForEditor(aEditor, aSummary)
-  {
-    let summary = aSummary || this.getSummaryElementForEditor(aEditor);
-    let ruleCount = aEditor.styleSheet.cssRules.length;
-
-    this._view.setItemClassName(summary, aEditor.flags);
-
-    text(summary, ".stylesheet-name", aEditor.getFriendlyName());
-    text(summary, ".stylesheet-title", aEditor.styleSheet.title || "");
-    text(summary, ".stylesheet-rule-count",
-      PluralForm.get(ruleCount, _("ruleCount.label")).replace("#1", ruleCount));
-    text(summary, ".stylesheet-error-message", aEditor.errorMessage);
-  },
-
-  /**
-   * IStyleEditorActionListener implementation
-   * @See StyleEditor.addActionListener.
-   */
-
-  /**
-   * Called when source has been loaded and editor is ready for some action.
-   *
-   * @param StyleEditor aEditor
-   */
-  onLoad: function SEAL_onLoad(aEditor)
-  {
-    let item = this._view.appendTemplatedItem(STYLE_EDITOR_TEMPLATE, {
-      data: {
-        editor: aEditor
-      },
-      disableAnimations: this._alwaysDisableAnimations,
-      ordinal: aEditor.styleSheetIndex,
-      onCreate: function ASV_onItemCreate(aSummary, aDetails, aData) {
-        let editor = aData.editor;
-
-        wire(aSummary, ".stylesheet-enabled", function onToggleEnabled(aEvent) {
-          aEvent.stopPropagation();
-          aEvent.target.blur();
-
-          editor.enableStyleSheet(editor.styleSheet.disabled);
-        });
-
-        wire(aSummary, ".stylesheet-saveButton", function onSaveButton(aEvent) {
-          aEvent.stopPropagation();
-          aEvent.target.blur();
-
-          editor.saveToFile(editor.savedFile);
-        });
-
-        this._updateSummaryForEditor(editor, aSummary);
-
-        // autofocus first or new stylesheet
-        if (editor.styleSheetIndex == 0 ||
-            editor.hasFlag(StyleEditorFlags.NEW)) {
-          this._view.activeSummary = aSummary;
-        }
-
-        aSummary.addEventListener("focus", function onSummaryFocus(aEvent) {
-          if (aEvent.target == aSummary) {
-            // autofocus the stylesheet name
-            aSummary.querySelector(".stylesheet-name").focus();
-          }
-        }, false);
-
-        this._triggerChromeListeners("EditorAdded", [editor]);
-      }.bind(this),
-      onShow: function ASV_onItemShow(aSummary, aDetails, aData) {
-        let editor = aData.editor;
-        if (!editor.inputElement) {
-          // attach editor to input element the first time it is shown
-          editor.inputElement = aDetails.querySelector(".stylesheet-editor-input");
-        }
-        editor.inputElement.focus();
-      }
-    });
-  },
-
-  /**
-   * Called when an editor flag changed.
-   *
-   * @param StyleEditor aEditor
-   * @param string aFlagName
-   * @see StyleEditor.flags
-   */
-  onFlagChange: function SEAL_onFlagChange(aEditor, aFlagName)
-  {
-    this._updateSummaryForEditor(aEditor);
-  },
-
-  /**
-   * Called when  when changes have been committed/applied to the live DOM
-   * stylesheet.
-   *
-   * @param StyleEditor aEditor
-   */
-  onCommit: function SEAL_onCommit(aEditor)
-  {
-    this._updateSummaryForEditor(aEditor);
-  },
-};
diff --git a/browser/devtools/styleeditor/StyleEditorUtil.jsm b/browser/devtools/styleeditor/StyleEditorUtil.jsm
deleted file mode 100644
index ead38aa11e96..000000000000
--- a/browser/devtools/styleeditor/StyleEditorUtil.jsm
+++ /dev/null
@@ -1,196 +0,0 @@
-/* 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 Style Editor 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):
- *   Cedric Vivier <cedricv@neonux.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 ***** */
-
-"use strict";
-
-const EXPORTED_SYMBOLS = [
-  "_",
-  "assert",
-  "attr",
-  "getCurrentBrowserTabContentWindow",
-  "log",
-  "text",
-  "wire"
-];
-
-const Cc = Components.classes;
-const Ci = Components.interfaces;
-const Cu = Components.utils;
-
-Cu.import("resource://gre/modules/Services.jsm");
-
-const PROPERTIES_URL = "chrome://browser/locale/devtools/styleeditor.properties";
-
-const console = Services.console;
-const gStringBundle = Services.strings.createBundle(PROPERTIES_URL);
-
-
-/**
- * Returns a localized string with the given key name from the string bundle.
- *
- * @param aName
- * @param ...rest
- *        Optional arguments to format in the string.
- * @return string
- */
-function _(aName)
-{
-
-  if (arguments.length == 1) {
-    return gStringBundle.GetStringFromName(aName);
-  }
-  let rest = Array.prototype.slice.call(arguments, 1);
-  return gStringBundle.formatStringFromName(aName, rest, rest.length);
-}
-
-/**
- * Assert an expression is true or throw if false.
- *
- * @param aExpression
- * @param aMessage
- *        Optional message.
- * @return aExpression
- */
-function assert(aExpression, aMessage)
-{
-  if (!!!(aExpression)) {
-    let msg = aMessage ? "ASSERTION FAILURE:" + aMessage : "ASSERTION FAILURE";
-    log(msg);
-    throw new Error(msg);
-  }
-  return aExpression;
-}
-
-/**
- * Retrieve or set the text content of an element.
- *
- * @param DOMElement aRoot
- *        The element to use for querySelector.
- * @param string aSelector
- *        Selector string for the element to get/set the text content.
- * @param string aText
- *        Optional text to set.
- * @return string
- *         Text content of matching element or null if there were no element
- *         matching aSelector.
- */
-function text(aRoot, aSelector, aText)
-{
-  let element = aRoot.querySelector(aSelector);
-  if (!element) {
-    return null;
-  }
-
-  if (aText === undefined) {
-    return element.textContent;
-  }
-  element.textContent = aText;
-  return aText;
-}
-
-/**
- * Iterates _own_ properties of an object.
- *
- * @param aObject
- *        The object to iterate.
- * @param function aCallback(aKey, aValue)
- */
-function forEach(aObject, aCallback)
-{
-  for (let key in aObject) {
-    if (aObject.hasOwnProperty(key)) {
-      aCallback(key, aObject[key]);
-    }
-  }
-}
-
-/**
- * Log a message to the console.
- * 
- * @param ...rest
- *        One or multiple arguments to log.
- *        If multiple arguments are given, they will be joined by " " in the log.
- */
-function log()
-{
-  console.logStringMessage(Array.prototype.slice.call(arguments).join(" "));
-}
-
-/**
- * Wire up element(s) matching selector with attributes, event listeners, etc.
- *
- * @param DOMElement aRoot
- *        The element to use for querySelectorAll.
- *        Can be null if aSelector is a DOMElement.
- * @param string|DOMElement aSelectorOrElement
- *        Selector string or DOMElement for the element(s) to wire up.
- * @param object aDescriptor
- *        An object describing how to wire matching selector, supported properties
- *        are "events", "attributes" and "userData" taking objects themselves.
- *        Each key of properties above represents the name of the event, attribute
- *        or userData, with the value being a function used as an event handler,
- *        string to use as attribute value, or object to use as named userData
- *        respectively.
- *        If aDescriptor is a function, the argument is equivalent to :
- *        {events: {'click': aDescriptor}}
- */
-function wire(aRoot, aSelectorOrElement, aDescriptor)
-{
-  let matches;
-  if (typeof(aSelectorOrElement) == "string") { // selector
-    matches = aRoot.querySelectorAll(aSelectorOrElement);
-    if (!matches.length) {
-      return;
-    }
-  } else {
-    matches = [aSelectorOrElement]; // element
-  }
-
-  if (typeof(aDescriptor) == "function") {
-    aDescriptor = {events: {click: aDescriptor}};
-  }
-
-  for (let i = 0; i < matches.length; ++i) {
-    let element = matches[i];
-    forEach(aDescriptor.events, function (aName, aHandler) {
-      element.addEventListener(aName, aHandler, false);
-    });
-    forEach(aDescriptor.attributes, element.setAttribute);
-    forEach(aDescriptor.userData, element.setUserData);
-  }
-}
-
diff --git a/browser/devtools/styleeditor/splitview.css b/browser/devtools/styleeditor/splitview.css
deleted file mode 100644
index f1745772fd9b..000000000000
--- a/browser/devtools/styleeditor/splitview.css
+++ /dev/null
@@ -1,96 +0,0 @@
-/* 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 Style Editor 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):
- *   Cedric Vivier <cedricv@neonux.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 ***** */
-
-box,
-.splitview-nav {
-  -moz-box-flex: 1;
-  -moz-box-orient: vertical;
-}
-
-.splitview-main {
-  -moz-box-flex: 0;
-}
-
-.splitview-controller {
-  min-height: 8em;
-  max-height: 14em;
-}
-
-.splitview-nav {
-  display: -moz-box;
-}
-
-/* only the active details pane is shown */
-.splitview-side-details > * {
-  display: none;
-}
-.splitview-side-details > .splitview-active {
-  display: -moz-box;
-}
-
-/* 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 {
-    display: none;
-  }
-  .splitview-details.splitview-active {
-    display: -moz-box;
-  }
-}
-
-/* filtered items are hidden */
-ol.splitview-nav > li.splitview-filtered {
-  display: none;
-}
-
-/* "empty list" and "all filtered" placeholders are hidden */
-.splitview-nav:empty,
-.splitview-nav.splitview-all-filtered,
-.splitview-nav + .splitview-nav.placeholder {
-  display: none;
-}
-.splitview-nav.splitview-all-filtered ~ .splitview-nav.placeholder.all-filtered,
-.splitview-nav:empty ~ .splitview-nav.placeholder.empty {
-  display: -moz-box;
-}
diff --git a/browser/devtools/styleeditor/styleeditor.css b/browser/devtools/styleeditor/styleeditor.css
deleted file mode 100644
index 45e2f01f9d22..000000000000
--- a/browser/devtools/styleeditor/styleeditor.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/* 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 Style Editor 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):
- *   Cedric Vivier <cedricv@neonux.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 ***** */
-
-.splitview-nav > li hgroup > .stylesheet-error-message {
-  display: none;
-}
-.splitview-nav > li.error hgroup > .stylesheet-error-message {
-  display: block;
-}
diff --git a/browser/devtools/styleeditor/styleeditor.xul b/browser/devtools/styleeditor/styleeditor.xul
deleted file mode 100644
index 9c0d01b55742..000000000000
--- a/browser/devtools/styleeditor/styleeditor.xul
+++ /dev/null
@@ -1,130 +0,0 @@
-<?xml version="1.0"?>
-<!-- ***** 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 Style Editor code.
-   -
-   - The Initial Developer of the Original Code is The Mozilla Foundation.
-   - Portions created by the Initial Developer are Copyright (C) 2011
-   - the Initial Developer. All Rights Reserved.
-   -
-   - Contributor(s):
-   -   Cedric Vivier <cedricv@neonux.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 ***** -->
-<!DOCTYPE window [
-<!ENTITY % styleEditorDTD SYSTEM "chrome://browser/locale/devtools/styleeditor.dtd" >
- %styleEditorDTD;
-]>
-<?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/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"?>
-<xul:window xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
-        xmlns="http://www.w3.org/1999/xhtml"
-        id="style-editor-chrome-window"
-        title="&window.title;"
-        windowtype="Tools:StyleEditor"
-        width="800" height="280"
-        persist="screenX screenY width height sizemode">
-<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-main">
-      <xul:box class="toolbar">
-        <xul:button class="style-editor-newButton"
-                    accesskey="&newButton.accesskey;"
-                    tooltiptext="&newButton.tooltip;"
-                    label="&newButton.label;"></xul:button>
-        <xul:button class="style-editor-importButton"
-                    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"
-                     tooltiptext="&searchInput.tooltip;"
-                     placeholder="&searchInput.placeholder;"/>
-      </xul:box>
-    </xul:box>
-    <xul:box class="splitview-nav-container">
-      <ol class="splitview-nav" tabindex="0"></ol>
-      <div class="splitview-nav placeholder empty">
-        <p><strong>&noStyleSheet.label;</strong></p>
-        <p>&noStyleSheet-tip-start.label;
-          <a href="#"
-             class="style-editor-newButton">&noStyleSheet-tip-action.label;</a>
-          &noStyleSheet-tip-end.label;</p>
-      </div>
-      <div class="splitview-nav placeholder all-filtered">
-        <p><strong>&searchNoResults.label;</strong></p>
-        <p>
-          <a href="#"
-             class="splitview-filter-clearButton">&searchClearButton.label;</a>
-        </p>
-      </div>
-    </xul:box> <!-- .splitview-nav-container -->
-  </xul:box>   <!-- .splitview-controller -->
-
-  <div id="splitview-templates" hidden="true">
-    <li id="splitview-tpl-summary-stylesheet" tabindex="0">
-      <a class="stylesheet-enabled" tabindex="0" href="#"
-         title="&visibilityToggle.tooltip;"
-         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">
-          <h3 class="stylesheet-rule-count"></h3>
-        </hgroup>
-        <hgroup class="stylesheet-actions">
-          <h1><a class="stylesheet-saveButton" href="#"
-                 title="&saveButton.tooltip;"
-                 accesskey="&saveButton.accesskey;">&saveButton.label;</a></h1>
-        </hgroup>
-      </div>
-    </li>
-
-    <xul:box id="splitview-tpl-details-stylesheet" class="splitview-details">
-      <div class="stylesheet-editor-input textbox" tabindex="0"
-           data-placeholder="&editorTextbox.placeholder;"></div>
-    </xul:box>
-  </div> <!-- #splitview-templates -->
-</xul:box>   <!-- .splitview-root -->
-
-<xul:script type="application/javascript"><![CDATA[
-Components.utils.import("resource:///modules/devtools/StyleEditorChrome.jsm");
-let chromeRoot = document.getElementById("style-editor-chrome");
-let contentWindow = window.arguments[0];
-let chrome = new StyleEditorChrome(chromeRoot, contentWindow);
-window.styleEditorChrome = chrome;
-]]></xul:script>
-</xul:window>
diff --git a/browser/devtools/styleeditor/test/Makefile.in b/browser/devtools/styleeditor/test/Makefile.in
deleted file mode 100644
index 28db3bfd0279..000000000000
--- a/browser/devtools/styleeditor/test/Makefile.in
+++ /dev/null
@@ -1,72 +0,0 @@
-# ***** 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 Style Editor code.
-#
-# The Initial Developer of the Original Code is Mozilla Foundation.
-#
-# Portions created by the Initial Developer are Copyright (C) 2007
-# the Initial Developer. All Rights Reserved.
-#
-# Contributor(s):
-#   Cedric Vivier <cedricv@neonux.com> (original author)
-#
-# Alternatively, the contents of this file may be used under the terms of
-# either of 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 *****
-
-DEPTH		= ../../../..
-topsrcdir	= @top_srcdir@
-srcdir		= @srcdir@
-VPATH		= @srcdir@
-relativesrcdir  = browser/devtools/styleeditor/test
-
-include $(DEPTH)/config/autoconf.mk
-include $(topsrcdir)/config/rules.mk
-
-_BROWSER_TEST_FILES = \
-                 browser_styleeditor_enabled.js \
-                 browser_styleeditor_import.js \
-                 browser_styleeditor_init.js \
-                 browser_styleeditor_loading.js \
-                 browser_styleeditor_new.js \
-                 browser_styleeditor_pretty.js \
-                 browser_styleeditor_readonly.js \
-                 browser_styleeditor_reopen.js \
-                 browser_styleeditor_sv_filter.js \
-                 browser_styleeditor_sv_keynav.js \
-                 browser_styleeditor_sv_resize.js \
-                 four.html \
-                 head.js \
-                 media.html \
-                 media-small.css \
-                 minified.html \
-                 simple.css \
-                 simple.css.gz \
-                 simple.css.gz^headers^ \
-                 simple.gz.html \
-                 simple.html \
-                 $(NULL)
-
-libs::	$(_BROWSER_TEST_FILES)
-	$(INSTALL) $(foreach f,$^,"$f") $(DEPTH)/_tests/testing/mochitest/browser/$(relativesrcdir)
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_enabled.js b/browser/devtools/styleeditor/test/browser_styleeditor_enabled.js
deleted file mode 100644
index 0a77e4bc4e9d..000000000000
--- a/browser/devtools/styleeditor/test/browser_styleeditor_enabled.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-// https rather than chrome to improve coverage
-const TESTCASE_URI = TEST_BASE_HTTPS + "simple.html";
-
-
-function test()
-{
-  waitForExplicitFinish();
-
-  let count = 0;
-  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
-    aChrome.addChromeListener({
-      onEditorAdded: function (aChrome, aEditor) {
-        count++;
-        if (count == 2) {
-          // we test against first stylesheet after all are ready
-          let editor = aChrome.editors[0];
-          if (!editor.sourceEditor) {
-            editor.addActionListener({
-              onAttach: function (aEditor) {
-                run(aChrome, aEditor);
-              }
-            });
-          } else {
-            run(aChrome, editor);
-          }
-        }
-      }
-    });
-  });
-
-  content.location = TESTCASE_URI;
-}
-
-function run(aChrome, aEditor)
-{
-  testEnabledToggle(aChrome, aEditor);
-}
-
-function testEnabledToggle(aChrome, aEditor)
-{
-  is(aEditor, aChrome.editors[0],
-     "stylesheet with index 0 is the first stylesheet listed in the UI");
-
-  let firstStyleSheetEditor = aEditor;
-  let firstStyleSheetUI = aChrome.getSummaryElementForEditor(aEditor);
-  let enabledToggle = firstStyleSheetUI.querySelector(".stylesheet-enabled");
-
-  is(firstStyleSheetEditor.contentDocument.styleSheets[0].disabled, false,
-     "first stylesheet is initially enabled");
-  is(firstStyleSheetEditor.hasFlag("disabled"), false,
-     "first stylesheet is initially enabled, it does not have DISABLED flag");
-  is(firstStyleSheetUI.classList.contains("disabled"), false,
-     "first stylesheet is initially enabled, UI does not have DISABLED class");
-
-  let disabledToggleCount = 0;
-  firstStyleSheetEditor.addActionListener({
-    onFlagChange: function (aEditor, aFlagName) {
-      if (aFlagName != "disabled") {
-        return;
-      }
-      disabledToggleCount++;
-
-      if (disabledToggleCount == 1) {
-        is(firstStyleSheetEditor, aEditor,
-           "FlagChange handler triggered for DISABLED flag on the first editor");
-        is(firstStyleSheetEditor.styleSheet.disabled, true,
-           "first stylesheet is now disabled");
-        is(firstStyleSheetEditor.hasFlag("disabled"), true,
-           "first stylesheet is now disabled, it has DISABLED flag");
-        is(firstStyleSheetUI.classList.contains("disabled"), true,
-           "first stylesheet is now disabled, UI has DISABLED class");
-
-        // now toggle it back to enabled
-        waitForFocus(function () {
-          EventUtils.synthesizeMouseAtCenter(enabledToggle, {}, gChromeWindow);
-        }, gChromeWindow);
-        return;
-      }
-
-      // disabledToggleCount == 2
-      is(firstStyleSheetEditor, aEditor,
-         "FlagChange handler triggered for DISABLED flag on the first editor (2)");
-      is(firstStyleSheetEditor.styleSheet.disabled, false,
-         "first stylesheet is now enabled again");
-      is(firstStyleSheetEditor.hasFlag("disabled"), false,
-         "first stylesheet is now enabled again, it does not have DISABLED flag");
-      is(firstStyleSheetUI.classList.contains("disabled"), false,
-         "first stylesheet is now enabled again, UI does not have DISABLED class");
-
-      finish();
-    }
-  });
-
-  waitForFocus(function () {
-    EventUtils.synthesizeMouseAtCenter(enabledToggle, {}, gChromeWindow);
-  }, gChromeWindow);
-}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_import.js b/browser/devtools/styleeditor/test/browser_styleeditor_import.js
deleted file mode 100644
index dc8ad16d57b8..000000000000
--- a/browser/devtools/styleeditor/test/browser_styleeditor_import.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-// http rather than chrome to improve coverage
-const TESTCASE_URI = TEST_BASE_HTTP + "simple.html";
-
-Components.utils.import("resource://gre/modules/FileUtils.jsm");
-const FILENAME = "styleeditor-import-test.css";
-const SOURCE = "body{background:red;}";
-
-
-function test()
-{
-  waitForExplicitFinish();
-
-  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
-    aChrome.addChromeListener({
-      onContentAttach: run,
-      onEditorAdded: testEditorAdded
-    });
-    if (aChrome.isContentAttached) {
-      run(aChrome);
-    }
-  });
-
-  content.location = TESTCASE_URI;
-}
-
-function run(aChrome)
-{
-  is(aChrome.editors.length, 2,
-     "there is 2 stylesheets initially");
-}
-
-function testImport(aChrome, aEditor)
-{
-  // create file to import first
-  let file = FileUtils.getFile("ProfD", [FILENAME]);
-  let ostream = FileUtils.openSafeFileOutputStream(file);
-  let converter = Cc["@mozilla.org/intl/scriptableunicodeconverter"]
-                    .createInstance(Ci.nsIScriptableUnicodeConverter);
-  converter.charset = "UTF-8";
-  let istream = converter.convertToInputStream(SOURCE);
-  NetUtil.asyncCopy(istream, ostream, function (status) {
-    FileUtils.closeSafeFileOutputStream(ostream);
-
-    // click the import button now that the file to import is ready
-    aChrome._mockImportFile = file;
-
-    waitForFocus(function () {
-      let document = gChromeWindow.document
-      let importButton = document.querySelector(".style-editor-importButton");
-      EventUtils.synthesizeMouseAtCenter(importButton, {}, gChromeWindow);
-    }, gChromeWindow);
-  });
-}
-
-let gAddedCount = 0;
-function testEditorAdded(aChrome, aEditor)
-{
-  if (++gAddedCount == 2) {
-    // test import after the 2 initial stylesheets have been loaded
-    if (!aChrome.editors[0].sourceEditor) {
-      aChrome.editors[0].addActionListener({
-        onAttach: function () {
-          testImport(aChrome);
-        }
-      });
-    } else {
-      testImport(aChrome);
-    }
-  }
-
-  if (!aEditor.hasFlag("imported")) {
-    return;
-  }
-
-  ok(!aEditor.hasFlag("inline"),
-     "imported stylesheet does not have INLINE flag");
-  ok(aEditor.savedFile,
-     "imported stylesheet will be saved directly into the same file");
-  is(aEditor.getFriendlyName(), FILENAME,
-     "imported stylesheet has the same name as the filename");
-
-  finish();
-}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_init.js b/browser/devtools/styleeditor/test/browser_styleeditor_init.js
deleted file mode 100644
index f810b85d6d41..000000000000
--- a/browser/devtools/styleeditor/test/browser_styleeditor_init.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-const TESTCASE_URI = TEST_BASE + "simple.html";
-
-
-function test()
-{
-  waitForExplicitFinish();
-
-  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
-    aChrome.addChromeListener({
-      onContentAttach: run,
-      onEditorAdded: testEditorAdded
-    });
-    if (aChrome.isContentAttached) {
-      run(aChrome);
-    }
-  });
-
-  content.location = TESTCASE_URI;
-}
-
-let gContentAttachHandled = false;
-function run(aChrome)
-{
-  gContentAttachHandled = true;
-  is(aChrome.contentWindow.document.readyState, "complete",
-     "content document is complete");
-
-  let SEC = gChromeWindow.styleEditorChrome;
-  is(SEC, aChrome, "StyleEditorChrome object exists as new window property");
-
-  ok(gChromeWindow.document.title.indexOf("simple testcase") >= 0,
-     "the Style Editor window title contains the document's title");
-
-  // check editors are instantiated
-  is(SEC.editors.length, 2,
-     "there is two StyleEditor instances managed");
-  ok(SEC.editors[0].styleSheetIndex < SEC.editors[1].styleSheetIndex,
-     "editors are ordered by styleSheetIndex");
-
-  // check StyleEditorChrome is a singleton wrt to the same DOMWindow
-  let chromeWindow = StyleEditor.openChrome();
-  is(chromeWindow, gChromeWindow,
-     "attempt to edit the same document returns the same Style Editor window");
-}
-
-let gEditorAddedCount = 0;
-function testEditorAdded(aChrome, aEditor)
-{
-  if (!gEditorAddedCount) {
-    is(gContentAttachHandled, true,
-       "ContentAttach event triggered before EditorAdded");
-  }
-
-  if (aEditor.styleSheetIndex == 0) {
-    gEditorAddedCount++;
-    testFirstStyleSheetEditor(aChrome, aEditor);
-  }
-  if (aEditor.styleSheetIndex == 1) {
-    gEditorAddedCount++;
-    testSecondStyleSheetEditor(aChrome, aEditor);
-  }
-
-  if (gEditorAddedCount == 2) {
-    finish();
-  }
-}
-
-function testFirstStyleSheetEditor(aChrome, aEditor)
-{
-  //testing TESTCASE's simple.css stylesheet
-  is(aEditor.styleSheetIndex, 0,
-     "first stylesheet is at index 0");
-
-  is(aEditor, aChrome.editors[0],
-     "first stylesheet corresponds to StyleEditorChrome.editors[0]");
-
-  ok(!aEditor.hasFlag("inline"),
-     "first stylesheet does not have INLINE flag");
-
-  let summary = aChrome.getSummaryElementForEditor(aEditor);
-  ok(!summary.classList.contains("inline"),
-     "first stylesheet UI does not have INLINE class");
-
-  let name = summary.querySelector(".stylesheet-name").textContent;
-  is(name, "simple.css",
-     "first stylesheet's name is `simple.css`");
-
-  let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
-  is(parseInt(ruleCount), 1,
-     "first stylesheet UI shows rule count as 1");
-
-  ok(summary.classList.contains("splitview-active"),
-     "first stylesheet UI is focused/active");
-}
-
-function testSecondStyleSheetEditor(aChrome, aEditor)
-{
-  //testing TESTCASE's inline stylesheet
-  is(aEditor.styleSheetIndex, 1,
-     "second stylesheet is at index 1");
-
-  is(aEditor, aChrome.editors[1],
-     "second stylesheet corresponds to StyleEditorChrome.editors[1]");
-
-  ok(aEditor.hasFlag("inline"),
-     "second stylesheet has INLINE flag");
-
-  let summary = aChrome.getSummaryElementForEditor(aEditor);
-  ok(summary.classList.contains("inline"),
-     "second stylesheet UI has INLINE class");
-
-  let name = summary.querySelector(".stylesheet-name").textContent;
-  ok(/^<.*>$/.test(name),
-     "second stylesheet's name is surrounded by `<>`");
-
-  let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
-  is(parseInt(ruleCount), 3,
-     "second stylesheet UI shows rule count as 3");
-
-  ok(!summary.classList.contains("splitview-active"),
-     "second stylesheet UI is NOT focused/active");
-}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_loading.js b/browser/devtools/styleeditor/test/browser_styleeditor_loading.js
deleted file mode 100644
index 01cb48201d50..000000000000
--- a/browser/devtools/styleeditor/test/browser_styleeditor_loading.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-const TESTCASE_URI = TEST_BASE + "simple.html";
-
-
-function test()
-{
-  waitForExplicitFinish();
-
-  gBrowser.selectedTab = gBrowser.addTab();
-
-  // launch Style Editor right when the tab is created (before load)
-  // this checks that the Style Editor still launches correctly when it is opened
-  // *while* the page is still loading
-  launchStyleEditorChrome(function (aChrome) {
-    isnot(gBrowser.selectedBrowser.contentWindow.document.readyState, "complete",
-          "content document is still loading");
-
-    if (!aChrome.isContentAttached) {
-      aChrome.addChromeListener({
-        onContentAttach: run
-      });
-    } else {
-      run(aChrome);
-    }
-  });
-
-  content.location = TESTCASE_URI;
-}
-
-function run(aChrome)
-{
-  is(aChrome.contentWindow.document.readyState, "complete",
-     "content document is complete");
-
-  finish();
-}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_new.js b/browser/devtools/styleeditor/test/browser_styleeditor_new.js
deleted file mode 100644
index e9e271eb49d2..000000000000
--- a/browser/devtools/styleeditor/test/browser_styleeditor_new.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-const TESTCASE_URI = TEST_BASE + "simple.html";
-
-
-function test()
-{
-  waitForExplicitFinish();
-
-  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
-    aChrome.addChromeListener({
-      onContentAttach: run,
-      onEditorAdded: testEditorAdded
-    });
-    if (aChrome.isContentAttached) {
-      run(aChrome);
-    }
-  });
-
-  content.location = TESTCASE_URI;
-}
-
-function run(aChrome)
-{
-  is(aChrome.editors.length, 2,
-     "there is 2 stylesheets initially");
-}
-
-let gNewEditor;       // to make sure only one new stylesheet got created
-let gCommitCount = 0; // to make sure only one Commit event is triggered
-
-function testEditorAdded(aChrome, aEditor)
-{
-  if (aEditor.styleSheetIndex != 2) { // this is not the new stylesheet
-    if (aChrome.editors[0].isLoaded && aChrome.editors[1].isLoaded) {
-      // test after the 2 initial stylesheets have been loaded
-      waitForFocus(function () {
-        // create a new style sheet
-        let newButton = gChromeWindow.document.querySelector(".style-editor-newButton");
-        EventUtils.synthesizeMouseAtCenter(newButton, {}, gChromeWindow);
-      }, gChromeWindow);
-    }
-    return;
-  }
-
-  ok(!gNewEditor, "creating a new stylesheet triggers one EditorAdded event");
-  gNewEditor = aEditor; // above test will fail if we get a duplicate event
-
-  is(aChrome.editors.length, 3,
-     "creating a new stylesheet added a new StyleEditor instance");
-
-  let listener = {
-    onAttach: function (aEditor) {
-      waitForFocus(function () {
-        ok(aEditor.isLoaded,
-           "new editor is loaded when attached");
-        ok(aEditor.hasFlag("new"),
-           "new editor has NEW flag");
-        ok(!aEditor.hasFlag("unsaved"),
-           "new editor does not have UNSAVED flag");
-
-        ok(aEditor.inputElement,
-           "new editor has an input element attached");
-
-        ok(aEditor.sourceEditor.hasFocus(),
-           "new editor has focus");
-
-        let summary = aChrome.getSummaryElementForEditor(aEditor);
-        let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
-        is(parseInt(ruleCount), 0,
-           "new editor initially shows 0 rules");
-
-        let computedStyle = content.getComputedStyle(content.document.body, null);
-        is(computedStyle.backgroundColor, "rgb(255, 255, 255)",
-           "content's background color is initially white");
-
-        for each (let c in "body{background-color:red;}") {
-          EventUtils.synthesizeKey(c, {}, gChromeWindow);
-        }
-      }, gChromeWindow) ;
-    },
-
-    onCommit: function (aEditor) {
-      gCommitCount++;
-
-      ok(aEditor.hasFlag("new"),
-         "new editor still has NEW flag");
-      ok(aEditor.hasFlag("unsaved"),
-         "new editor has UNSAVED flag after modification");
-
-      let summary = aChrome.getSummaryElementForEditor(aEditor);
-      let ruleCount = summary.querySelector(".stylesheet-rule-count").textContent;
-      is(parseInt(ruleCount), 1,
-         "new editor shows 1 rule after modification");
-
-      let computedStyle = content.getComputedStyle(content.document.body, null);
-      is(computedStyle.backgroundColor, "rgb(255, 0, 0)",
-         "content's background color has been updated to red");
-
-      executeSoon(function () {
-        is(gCommitCount, 1, "received only one Commit event (throttle)");
-
-        aEditor.removeActionListener(listener);
-
-        gNewEditor = null;
-        finish();
-      });
-    }
-  };
-
-  aEditor.addActionListener(listener);
-  if (aEditor.sourceEditor) {
-    listener.onAttach(aEditor);
-  }
-}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_pretty.js b/browser/devtools/styleeditor/test/browser_styleeditor_pretty.js
deleted file mode 100644
index 0651a77c3439..000000000000
--- a/browser/devtools/styleeditor/test/browser_styleeditor_pretty.js
+++ /dev/null
@@ -1,56 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-const TESTCASE_URI = TEST_BASE + "minified.html";
-
-
-function test()
-{
-  waitForExplicitFinish();
-
-  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
-    aChrome.addChromeListener({
-      onEditorAdded: function (aChrome, aEditor) {
-        if (aEditor.sourceEditor) {
-          run(aEditor); // already attached to input element
-        } else {
-          aEditor.addActionListener({
-            onAttach: run
-          });
-        }
-      }
-    });
-  });
-
-  content.location = TESTCASE_URI;
-}
-
-let editorTestedCount = 0;
-function run(aEditor)
-{
-  if (aEditor.styleSheetIndex == 0) {
-    let prettifiedSource = "body\{\r?\n\tbackground\:white;\r?\n\}\r?\n\r?\ndiv\{\r?\n\tfont\-size\:4em;\r?\n\tcolor\:red\r?\n\}\r?\n";
-    let prettifiedSourceRE = new RegExp(prettifiedSource);
-
-    ok(prettifiedSourceRE.test(aEditor.sourceEditor.getText()),
-       "minified source has been prettified automatically");
-    editorTestedCount++;
-    let chrome = gChromeWindow.styleEditorChrome;
-    let summary = chrome.getSummaryElementForEditor(chrome.editors[1]);
-    EventUtils.synthesizeMouseAtCenter(summary, {}, gChromeWindow);
-  }
-
-  if (aEditor.styleSheetIndex == 1) {
-    let originalSource = "body \{ background\: red; \}\r?\ndiv \{\r?\nfont\-size\: 5em;\r?\ncolor\: red\r?\n\}";
-    let originalSourceRE = new RegExp(originalSource);
-
-    ok(originalSourceRE.test(aEditor.sourceEditor.getText()),
-       "non-minified source has been left untouched");
-    editorTestedCount++;
-  }
-
-  if (editorTestedCount == 2) {
-    finish();
-  }
-}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_readonly.js b/browser/devtools/styleeditor/test/browser_styleeditor_readonly.js
deleted file mode 100644
index d307cccbb309..000000000000
--- a/browser/devtools/styleeditor/test/browser_styleeditor_readonly.js
+++ /dev/null
@@ -1,74 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-const TESTCASE_URI = TEST_BASE + "simple.html";
-
-
-let gEditorAddedCount = 0;
-let gEditorReadOnlyCount = 0;
-let gChromeListener = {
-  onEditorAdded: function (aChrome, aEditor) {
-    gEditorAddedCount++;
-    if (aEditor.readOnly) {
-      gEditorReadOnlyCount++;
-    }
-
-    if (gEditorAddedCount == aChrome.editors.length) {
-      // continue testing after all editors are ready
-
-      is(gEditorReadOnlyCount, 0,
-         "all editors are NOT read-only initially");
-
-      // all editors have been loaded, queue closing the content tab
-      executeSoon(function () {
-        gBrowser.removeCurrentTab();
-      });
-    }
-  },
-  onContentDetach: function (aChrome) {
-    // check that the UI has switched to read-only
-    run(aChrome);
-  }
-};
-
-function test()
-{
-  waitForExplicitFinish();
-
-  gBrowser.addTab(); // because we'll close the next one
-  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
-    aChrome.addChromeListener(gChromeListener);
-  });
-
-  content.location = TESTCASE_URI;
-}
-
-function run(aChrome)
-{
-  let document = gChromeWindow.document;
-  let disabledCount;
-  let elements;
-
-  disabledCount = 0;
-  elements = document.querySelectorAll("button,input,select");
-  for (let i = 0; i < elements.length; ++i) {
-    if (elements[i].hasAttribute("disabled")) {
-      disabledCount++;
-    }
-  }
-  ok(elements.length && disabledCount == elements.length,
-     "all buttons, input and select elements are disabled");
-
-  disabledCount = 0;
-  aChrome.editors.forEach(function (aEditor) {
-    if (aEditor.readOnly) {
-      disabledCount++;
-    }
-  });
-  ok(aChrome.editors.length && disabledCount == aChrome.editors.length,
-     "all editors are read-only");
-
-  aChrome.removeChromeListener(gChromeListener);
-  finish();
-}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js b/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js
deleted file mode 100644
index 65210b05ec21..000000000000
--- a/browser/devtools/styleeditor/test/browser_styleeditor_reopen.js
+++ /dev/null
@@ -1,155 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-// http rather than chrome to improve coverage
-const TESTCASE_URI = TEST_BASE_HTTP + "simple.gz.html";
-
-const Cc = Components.classes;
-const Ci = Components.interfaces;
-Components.utils.import("resource://gre/modules/FileUtils.jsm");
-
-
-function test()
-{
-  waitForExplicitFinish();
-
-  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
-    aChrome.addChromeListener({
-      onEditorAdded: function (aChrome, aEditor) {
-        if (aEditor.styleSheetIndex != 0) {
-          return; // we want to test against the first stylesheet
-        }
-
-        if (aEditor.sourceEditor) {
-          run(aEditor); // already attached to input element
-        } else {
-          aEditor.addActionListener({
-            onAttach: run
-          });
-        }
-      }
-    });
-
-    gChromeWindow.addEventListener("unload", function onClose() {
-      gChromeWindow.removeEventListener("unload", onClose, true);
-      gChromeWindow = null;
-      executeSoon(function () {
-        waitForFocus(function () {
-          // wait that browser has focus again
-          // open StyleEditorChrome again (a new one since we closed the previous one)
-          launchStyleEditorChrome(function (aChrome) {
-            is(gChromeWindow.document.documentElement.hasAttribute("data-marker"),
-               false,
-               "opened a completely new StyleEditorChrome window");
-
-            aChrome.addChromeListener({
-              onEditorAdded: function (aChrome, aEditor) {
-                if (aEditor.styleSheetIndex != 0) {
-                  return; // we want to test against the first stylesheet
-                }
-
-                if (aEditor.sourceEditor) {
-                  testNewChrome(aEditor); // already attached to input element
-                } else {
-                  aEditor.addActionListener({
-                    onAttach: testNewChrome
-                  });
-                }
-              }
-            });
-          });
-        });
-      });
-    }, true);
-  });
-
-  content.location = TESTCASE_URI;
-}
-
-let gFilename;
-
-function run(aEditor)
-{
-  gFilename = FileUtils.getFile("ProfD", ["styleeditor-test.css"])
-
-  aEditor.saveToFile(gFilename, function (aFile) {
-    ok(aFile, "file got saved successfully");
-
-    aEditor.addActionListener({
-      onFlagChange: function (aEditor, aFlag) {
-        if (aFlag != "unsaved") {
-          return;
-        }
-
-        ok(aEditor.hasFlag("unsaved"),
-           "first stylesheet has UNSAVED flag after making a change");
-
-        // marker used to check it does not exist when we reopen
-        // ie. the window we opened is indeed a new one
-        gChromeWindow.document.documentElement.setAttribute("data-marker", "true");
-        gChromeWindow.close();
-      }
-    });
-
-    waitForFocus(function () {
-      // insert char so that this stylesheet has the UNSAVED flag
-      EventUtils.synthesizeKey("x", {}, gChromeWindow);
-    }, gChromeWindow);
-  });
-}
-
-function testNewChrome(aEditor)
-{
-  ok(aEditor.savedFile,
-     "first stylesheet editor will save directly into the same file");
-
-  is(aEditor.getFriendlyName(), gFilename.leafName,
-     "first stylesheet still has the filename as it was saved");
-  gFilename = null;
-
-  ok(aEditor.hasFlag("unsaved"),
-     "first stylesheet still has UNSAVED flag at reopening");
-
-  ok(!aEditor.hasFlag("inline"),
-     "first stylesheet does not have INLINE flag");
-
-  ok(!aEditor.hasFlag("error"),
-     "editor does not have error flag initially");
-  let hadError = false;
-
-  let onSaveCallback = function (aFile) {
-    aEditor.addActionListener({
-      onFlagChange: function (aEditor, aFlag) {
-        if (!hadError && aFlag == "error") {
-          ok(aEditor.hasFlag("error"),
-             "editor has ERROR flag after attempting to save with invalid path");
-          hadError = true;
-
-          // save using source editor key binding (previous successful path)
-          waitForFocus(function () {
-            EventUtils.synthesizeKey("S", {accelKey: true}, gChromeWindow);
-          }, gChromeWindow);
-          return;
-        }
-
-        if (hadError && aFlag == "unsaved") {
-          executeSoon(function () {
-            ok(!aEditor.hasFlag("unsaved"),
-               "first stylesheet has no UNSAVED flag after successful save");
-            ok(!aEditor.hasFlag("error"),
-               "ERROR flag has been removed since last operation succeeded");
-            finish();
-          });
-        }
-      }
-    });
-  }
-
-  let os = Cc["@mozilla.org/xre/app-info;1"].getService(Ci.nsIXULRuntime).OS;
-  if (os == "WINNT") {
-    aEditor.saveToFile("C:\\I_DO_NOT_EXIST_42\\bogus.css", onSaveCallback);
-  } else {
-    aEditor.saveToFile("/I_DO_NOT_EXIST_42/bogos.css", onSaveCallback);
-  }
-}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_sv_filter.js b/browser/devtools/styleeditor/test/browser_styleeditor_sv_filter.js
deleted file mode 100644
index c41feb6a9b71..000000000000
--- a/browser/devtools/styleeditor/test/browser_styleeditor_sv_filter.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-const TESTCASE_URI = TEST_BASE + "simple.html";
-
-
-function test()
-{
-  waitForExplicitFinish();
-
-  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
-    aChrome.addChromeListener({
-      onContentAttach: run
-    });
-    if (aChrome.isContentAttached) {
-      run(aChrome);
-    }
-  });
-
-  content.location = TESTCASE_URI;
-}
-
-function getFilteredItemsCount(nav)
-{
-  let matches = nav.querySelectorAll("*.splitview-filtered");
-  return matches ? matches.length : 0;
-}
-
-function run(aChrome)
-{
-  aChrome.editors[0].addActionListener({onAttach: onFirstEditorAttach});
-  aChrome.editors[1].addActionListener({onAttach: onSecondEditorAttach});
-}
-
-function onFirstEditorAttach(aEditor)
-{
-  let filter = gChromeWindow.document.querySelector(".splitview-filter");
-  // force the command event on input since it is not possible to disable
-  // the search textbox's timeout.
-  let forceCommandEvent = function forceCommandEvent() {
-    let evt = gChromeWindow.document.createEvent("XULCommandEvent");
-    evt.initCommandEvent("command", true, true, gChromeWindow, 0, false, false,
-                         false, false, null);
-    filter.dispatchEvent(evt);
-  }
-  filter.addEventListener("input", forceCommandEvent, false);
-
-  let nav = gChromeWindow.document.querySelector(".splitview-nav");
-  nav.focus();
-
-  is(getFilteredItemsCount(nav), 0,
-     "there is 0 filtered item initially");
-
-  waitForFocus(function () {
-    // Search [s] (type-on-search since we focused nav above - not filter directly)
-    EventUtils.synthesizeKey("s", {}, gChromeWindow);
-
-    // the search space is "simple.css" and "inline stylesheet #1" (2 sheets)
-    is(getFilteredItemsCount(nav), 0,
-       "there is 0 filtered item if searching for 's'");
-
-    EventUtils.synthesizeKey("i", {}, gChromeWindow); // Search [si]
-
-    is(getFilteredItemsCount(nav), 1, // inline stylesheet is filtered
-       "there is 1 filtered item if searching for 's'");
-
-    // use uppercase to check that filtering is case-insensitive
-    EventUtils.synthesizeKey("X", {}, gChromeWindow); // Search [siX]
-    is(getFilteredItemsCount(nav), 2,
-       "there is 2 filtered items if searching for 's'"); // no match
-
-    // clear the search
-    EventUtils.synthesizeKey("VK_ESCAPE", {}, gChromeWindow);
-
-    is(filter.value, "",
-       "filter is back to empty");
-    is(getFilteredItemsCount(nav), 0,
-       "there is 0 filtered item when filter is empty again");
-
-    for each (let c in "inline") {
-      EventUtils.synthesizeKey(c, {}, gChromeWindow);
-    }
-
-    is(getFilteredItemsCount(nav), 1, // simple.css is filtered
-       "there is 1 filtered item if searching for 'inline'");
-
-    // auto-select the only result (enter the editor)
-    EventUtils.synthesizeKey("VK_ENTER", {}, gChromeWindow);
-
-    filter.removeEventListener("input", forceCommandEvent, false);
-  }, gChromeWindow);
-}
-
-function onSecondEditorAttach(aEditor)
-{
-  ok(aEditor.sourceEditor.hasFocus(),
-     "second editor has been selected and focused automatically.");
-
-  finish();
-}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_sv_keynav.js b/browser/devtools/styleeditor/test/browser_styleeditor_sv_keynav.js
deleted file mode 100644
index e734f7d0237a..000000000000
--- a/browser/devtools/styleeditor/test/browser_styleeditor_sv_keynav.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-const TESTCASE_URI = TEST_BASE + "four.html";
-
-
-function test()
-{
-  waitForExplicitFinish();
-
-  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
-    aChrome.addChromeListener({
-      onContentAttach: run
-    });
-    if (aChrome.isContentAttached) {
-      run(aChrome);
-    }
-  });
-
-  content.location = TESTCASE_URI;
-}
-
-let gChrome;
-
-function run(aChrome)
-{
-  gChrome = aChrome;
-  aChrome.editors[0].addActionListener({onAttach: onEditor0Attach});
-  aChrome.editors[2].addActionListener({onAttach: onEditor2Attach});
-}
-
-function getStylesheetNameLinkFor(aEditor)
-{
-  return gChrome.getSummaryElementForEditor(aEditor).querySelector(".stylesheet-name");
-}
-
-function onEditor0Attach(aEditor)
-{
-  waitForFocus(function () {
-    let summary = gChrome.getSummaryElementForEditor(aEditor);
-    EventUtils.synthesizeMouseAtCenter(summary, {}, gChromeWindow);
-
-    let item = getStylesheetNameLinkFor(gChrome.editors[0]);
-    is(gChromeWindow.document.activeElement, item,
-       "editor 0 item is the active element");
-
-    EventUtils.synthesizeKey("VK_DOWN", {}, gChromeWindow);
-    item = getStylesheetNameLinkFor(gChrome.editors[1]);
-    is(gChromeWindow.document.activeElement, item,
-       "editor 1 item is the active element");
-
-    EventUtils.synthesizeKey("VK_HOME", {}, gChromeWindow);
-    item = getStylesheetNameLinkFor(gChrome.editors[0]);
-    is(gChromeWindow.document.activeElement, item,
-       "fist editor item is the active element");
-
-    EventUtils.synthesizeKey("VK_END", {}, gChromeWindow);
-    item = getStylesheetNameLinkFor(gChrome.editors[3]);
-    is(gChromeWindow.document.activeElement, item,
-       "last editor item is the active element");
-
-    EventUtils.synthesizeKey("VK_UP", {}, gChromeWindow);
-    item = getStylesheetNameLinkFor(gChrome.editors[2]);
-    is(gChromeWindow.document.activeElement, item,
-       "editor 2 item is the active element");
-
-    EventUtils.synthesizeKey("VK_RETURN", {}, gChromeWindow);
-    // this will attach and give focus editor 2
-  }, gChromeWindow);
-}
-
-function onEditor2Attach(aEditor)
-{
-  ok(aEditor.sourceEditor.hasFocus(),
-     "editor 2 has focus");
-
-  gChrome = null;
-  finish();
-}
diff --git a/browser/devtools/styleeditor/test/browser_styleeditor_sv_resize.js b/browser/devtools/styleeditor/test/browser_styleeditor_sv_resize.js
deleted file mode 100644
index 4c2766363b77..000000000000
--- a/browser/devtools/styleeditor/test/browser_styleeditor_sv_resize.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-const TESTCASE_URI = TEST_BASE + "simple.html";
-
-let gOriginalWidth; // these are set by run() when gChromeWindow is ready
-let gOriginalHeight;
-
-function test()
-{
-  waitForExplicitFinish();
-
-  addTabAndLaunchStyleEditorChromeWhenLoaded(function (aChrome) {
-    if (aChrome.isContentAttached) {
-      run(aChrome);
-    } else {
-      aChrome.addChromeListener({
-        onContentAttach: run
-      });
-    }
-  });
-
-  content.location = TESTCASE_URI;
-}
-
-function run(aChrome)
-{
-  is(aChrome.editors.length, 2,
-     "there is 2 stylesheets initially");
-
-  aChrome.editors[0].addActionListener({
-    onAttach: function onEditorAttached(aEditor) {
-      let originalSourceEditor = aEditor.sourceEditor;
-      aEditor.sourceEditor.setCaretOffset(4); // to check the caret is preserved
-
-      // queue a resize to inverse aspect ratio
-      // this will trigger a detach and reattach (to workaround bug 254144)
-      executeSoon(function () {
-        waitForFocus(function () {
-          gOriginalWidth = gChromeWindow.outerWidth;
-          gOriginalHeight = gChromeWindow.outerHeight;
-          gChromeWindow.resizeTo(120, 480);
-
-          executeSoon(function () {
-            is(aEditor.sourceEditor, originalSourceEditor,
-               "the editor still references the same SourceEditor instance");
-            is(aEditor.sourceEditor.getCaretOffset(), 4,
-               "the caret position has been preserved");
-
-            // queue a resize to original aspect ratio
-            waitForFocus(function () {
-              gChromeWindow.resizeTo(gOriginalWidth, gOriginalHeight);
-              executeSoon(function () {
-                finish();
-              });
-            }, gChromeWindow);
-          });
-        }, gChromeWindow);
-      });
-    }
-  });
-}
diff --git a/browser/devtools/styleeditor/test/four.html b/browser/devtools/styleeditor/test/four.html
deleted file mode 100644
index c0d51d691c5b..000000000000
--- a/browser/devtools/styleeditor/test/four.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <title>four stylesheets</title>
-  <link rel="stylesheet" type="text/css" media="scren" href="simple.css"/>
-  <style type="text/css">
-  div {
-    font-size: 2em;
-  }
-  </style>
-  <style type="text/css">
-  span {
-    font-size: 3em;
-  }
-  </style>
-  <style type="text/css">
-  p {
-    font-size: 4em;
-  }
-  </style>
-</head>
-<body>
-	<div>four <span>stylesheets</span></div>
-</body>
-</html>
diff --git a/browser/devtools/styleeditor/test/head.js b/browser/devtools/styleeditor/test/head.js
deleted file mode 100644
index eb07631a5131..000000000000
--- a/browser/devtools/styleeditor/test/head.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-const TEST_BASE = "chrome://mochitests/content/browser/browser/devtools/styleeditor/test/";
-const TEST_BASE_HTTP = "http://example.com/browser/browser/devtools/styleeditor/test/";
-const TEST_BASE_HTTPS = "https://example.com/browser/browser/devtools/styleeditor/test/";
-
-let gChromeWindow;               //StyleEditorChrome window
-
-function cleanup()
-{
-  if (gChromeWindow) {
-    gChromeWindow.close();
-    gChromeWindow = null;
-  }
-  if (gBrowser.tabs.length > 1) {
-    gBrowser.removeCurrentTab();
-  }
-}
-
-function launchStyleEditorChrome(aCallback)
-{
-  gChromeWindow = StyleEditor.openChrome();
-  if (gChromeWindow.document.readyState != "complete") {
-    gChromeWindow.addEventListener("load", function onChromeLoad() {
-      gChromeWindow.removeEventListener("load", onChromeLoad, true);
-      aCallback(gChromeWindow.styleEditorChrome);
-    }, true);
-  } else {
-    aCallback(gChromeWindow.styleEditorChrome);
-  }
-}
-
-function addTabAndLaunchStyleEditorChromeWhenLoaded(aCallback)
-{
-  gBrowser.selectedTab = gBrowser.addTab();
-  gBrowser.selectedBrowser.addEventListener("load", function onLoad() {
-    gBrowser.selectedBrowser.removeEventListener("load", onLoad, true);
-    launchStyleEditorChrome(aCallback);
-  }, true);
-}
-
-registerCleanupFunction(cleanup);
diff --git a/browser/devtools/styleeditor/test/media-small.css b/browser/devtools/styleeditor/test/media-small.css
deleted file mode 100644
index d64756ddc7e1..000000000000
--- a/browser/devtools/styleeditor/test/media-small.css
+++ /dev/null
@@ -1,5 +0,0 @@
-/* this stylesheet applies when min-width<400px */
-body {
-	background: red;
-}
-
diff --git a/browser/devtools/styleeditor/test/media.html b/browser/devtools/styleeditor/test/media.html
deleted file mode 100644
index ef05818c5894..000000000000
--- a/browser/devtools/styleeditor/test/media.html
+++ /dev/null
@@ -1,11 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <link rel="stylesheet" type="text/css" href="simple.css" media="screen,print"/>
-  <link rel="stylesheet" type="text/css" href="media-small.css" media="screen and (min-width: 200px)"/>
-</head>
-<body>
-	<div>test for media labels</div>
-</body>
-</html>
-
diff --git a/browser/devtools/styleeditor/test/minified.html b/browser/devtools/styleeditor/test/minified.html
deleted file mode 100644
index a7d3eec3267e..000000000000
--- a/browser/devtools/styleeditor/test/minified.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <title>minified testcase</title>
-  <style type="text/css"><!--
-body{background:white;}div{font-size:4em;color:red}
---></style>
-  <style type="text/css">body { background: red; }
-div {
-font-size: 5em;
-color: red
-}</style>
-</head>
-<body>
-	<div>minified <span>testcase</span></div>
-</body>
-</html>
diff --git a/browser/devtools/styleeditor/test/simple.css b/browser/devtools/styleeditor/test/simple.css
deleted file mode 100644
index eb22505d3aee..000000000000
--- a/browser/devtools/styleeditor/test/simple.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/* vim: set ts=2 et sw=2 tw=80: */
-/* Any copyright is dedicated to the Public Domain.
-   http://creativecommons.org/publicdomain/zero/1.0/ */
-
-body {
-  margin: 0;
-}
-
diff --git a/browser/devtools/styleeditor/test/simple.css.gz b/browser/devtools/styleeditor/test/simple.css.gz
deleted file mode 100644
index ee3b9efbc1db99982c1bd4d723a4d33694170ab2..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 166
zcmV;X09pSZiwFodqB2eZ19NF@aBO8RV{>x=9gV>bf-n#T@BNB*=D?ySQ^Uc;5AYXC
z+rTEaOWGBJ#(x(%&1EJ-4HixoH7d0BXY8!&PF?#;XVH+M2DiMy%e)mHCk0o87}z_F
z0V>cb;_(`u>~WXmIJXACq&iz7U!qf9qL-8;*H+3%^C5@BrFSesr?#X2%M21WeD*%M
UGIF-)uI6jZ4+5k&-lqTn09FA?{r~^~

diff --git a/browser/devtools/styleeditor/test/simple.css.gz^headers^ b/browser/devtools/styleeditor/test/simple.css.gz^headers^
deleted file mode 100644
index 092020ab00d5..000000000000
--- a/browser/devtools/styleeditor/test/simple.css.gz^headers^
+++ /dev/null
@@ -1,4 +0,0 @@
-Vary: Accept-Encoding
-Content-Encoding: gzip
-Content-Type: text/css
-
diff --git a/browser/devtools/styleeditor/test/simple.gz.html b/browser/devtools/styleeditor/test/simple.gz.html
deleted file mode 100644
index d63362b8e008..000000000000
--- a/browser/devtools/styleeditor/test/simple.gz.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <title>simple testcase</title>
-  <link rel="stylesheet" type="text/css" media="scren" href="simple.css.gz"/>
-  <style type="text/css">
-  body {
-    background: white;
-  }
-
-  div {
-    font-size: 4em;
-  }
-
-  div > span {
-     text-decoration: underline;
-  }
-  </style>
-</head>
-<body>
-	<div>simple <span>testcase</span></div>
-</body>
-</html>
diff --git a/browser/devtools/styleeditor/test/simple.html b/browser/devtools/styleeditor/test/simple.html
deleted file mode 100644
index d586cf4d1011..000000000000
--- a/browser/devtools/styleeditor/test/simple.html
+++ /dev/null
@@ -1,23 +0,0 @@
-<!doctype html>
-<html>
-<head>
-  <title>simple testcase</title>
-  <link rel="stylesheet" type="text/css" media="scren" href="simple.css"/>
-  <style type="text/css">
-  body {
-    background: white;
-  }
-
-  div {
-    font-size: 4em;
-  }
-
-  div > span {
-     text-decoration: underline;
-  }
-  </style>
-</head>
-<body>
-	<div>simple <span>testcase</span></div>
-</body>
-</html>
diff --git a/browser/locales/en-US/chrome/browser/browser.dtd b/browser/locales/en-US/chrome/browser/browser.dtd
index ec577cbb6f99..e21494d37e5b 100644
--- a/browser/locales/en-US/chrome/browser/browser.dtd
+++ b/browser/locales/en-US/chrome/browser/browser.dtd
@@ -220,13 +220,6 @@ can reach it easily. -->
 <!ENTITY inspectStyleButton.label     "Style">
 <!ENTITY inspectStyleButton.accesskey "S">
 
-<!-- LOCALIZATION NOTE (styleeditor.label): This menu item label appears
-  -  in the Tools menu. -->
-<!ENTITY styleeditor.label            "Style Editor">
-<!ENTITY styleeditor.accesskey        "y">
-<!ENTITY styleeditor.keycode          "VK_F7">
-<!ENTITY styleeditor.keytext          "F7">
-
 <!ENTITY getMoreDevtoolsCmd.label        "Get More Tools">
 <!ENTITY getMoreDevtoolsCmd.accesskey    "M">
 
diff --git a/browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd b/browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd
deleted file mode 100644
index 2fcdfbec8883..000000000000
--- a/browser/locales/en-US/chrome/browser/devtools/styleeditor.dtd
+++ /dev/null
@@ -1,62 +0,0 @@
-<!-- LOCALIZATION NOTE : FILE This file contains the Style Editor window strings -->
-<!-- LOCALIZATION NOTE : FILE Do not translate commandkeys -->
-<!-- LOCALIZATION NOTE : The correct localization of this file might be to keep
-     it in English, or another language commonly spoken among web developers.
-     You want to make that choice consistent across the developer tools.
-     A good criteria is the language in which you'd find the best documentation
-     on web development on the web. -->
-
-<!-- LOCALIZATION NOTE (window.title): This is the default title for Style Editor
-     main window. NB: the property chromeWindowTitle in styleeditor.properties
-     is used to dynamically update the Style Editor window title with the title
-     of the web page it is editing. -->
-<!ENTITY window.title               "Style Editor">
-
-<!ENTITY newButton.label            "New">
-<!ENTITY newButton.tooltip          "Create and append a new style sheet to the document">
-<!ENTITY newButton.accesskey        "N">
-<!ENTITY newButton.commandkey       "n">
-
-<!ENTITY importButton.label         "Import…">
-<!ENTITY importButton.tooltip       "Import and append an existing style sheet to the document">
-<!ENTITY importButton.accesskey     "I">
-<!ENTITY importButton.commandkey    "i">
-
-<!ENTITY searchInput.tooltip        "Filter style sheets by name">
-<!ENTITY searchInput.placeholder    "Find style sheet">
-
-<!-- LOCALIZATION NOTE  (searchNoResults): This is shown when searching a term
-     that is not found in any stylesheet or stylesheet name. -->
-<!ENTITY searchNoResults.label      "No matching style sheet has been found.">
-
-<!-- LOCALIZATION NOTE  (searchClearButton): This button clears the search input
-     box and is visible only when a search term has been typed. -->
-<!ENTITY searchClearButton.label    "Clear">
-
-<!ENTITY visibilityToggle.tooltip   "Toggle style sheet visibility">
-<!ENTITY visibilityToggle.accesskey "V">
-
-<!ENTITY saveButton.label           "Save">
-<!ENTITY saveButton.tooltip         "Save this style sheet to a file">
-<!ENTITY saveButton.accesskey       "S">
-<!ENTITY saveButton.commandkey      "s">
-
-<!-- LOCALICATION NOTE  (scoped.label): This is shown in a stylesheets list item
-     when the stylesheet uses the scoped attribute on the <style> element. -->
-<!ENTITY scoped.label               "Scoped.">
-
-<!ENTITY editorTextbox.placeholder  "Type CSS here.">
-
-<!-- LOCALICATION NOTE  (noStyleSheet.label): This is shown when a page has no
-     stylesheet. -->
-<!ENTITY noStyleSheet.label         "This page has no style sheet.">
-
-<!-- LOCALICATION NOTE  (noStyleSheet-tip-start.label): This is the start of a
-     tip sentence shown when there is no stylesheet. It suggests to create a new
-     stylesheet and provides an action link to do so. -->
-<!ENTITY noStyleSheet-tip-start.label  "Perhaps you'd like to ">
-<!-- LOCALICATION NOTE  (noStyleSheet-tip-action.label): This is text for the
-     link that triggers creation of a new stylesheet. -->
-<!ENTITY noStyleSheet-tip-action.label "append a new style sheet">
-<!-- LOCALICATION NOTE  (noStyleSheet-tip-end.label): End of the tip sentence -->
-<!ENTITY noStyleSheet-tip-end.label    "?">
diff --git a/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties b/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
deleted file mode 100644
index e25997807365..000000000000
--- a/browser/locales/en-US/chrome/browser/devtools/styleeditor.properties
+++ /dev/null
@@ -1,53 +0,0 @@
-# LOCALIZATION NOTE These strings are used inside the Style Editor.
-# LOCALIZATION NOTE The correct localization of this file might be to keep it
-# in English, or another language commonly spoken among web developers.
-# You want to make that choice consistent across the developer tools.
-# A good criteria is the language in which you'd find the best documentation
-# on web development on the web.
-
-# LOCALIZATION NOTE  (chromeWindowTitle): This is the title of the Style Editor
-# 'chrome' window. That is, the main window with the stylesheets list.
-# The argument is either the content document's title or its href if no title
-# is available.
-chromeWindowTitle=Style Editor [%S]
-
-# LOCALIZATION NOTE  (inlineStyleSheet): This is the name used for an style sheet
-# that is declared inline in the <style> element. Shown in the stylesheets list.
-# the argument is the index (order) of the containing <style> element in the
-# document.
-inlineStyleSheet=<inline style sheet #%S>
-
-# LOCALIZATION NOTE  (newStyleSheet): This is the default name for a new
-# user-created style sheet.
-newStyleSheet=New style sheet #%S
-
-# LOCALIZATION NOTE  (ruleCount.label): Semi-colon list of plural forms.
-# See: http://developer.mozilla.org/en/docs/Localization_and_Plurals
-# This is shown in the style sheets list.
-# #1 rule.
-# example: 111 rules.
-ruleCount.label=#1 rule.;#1 rules.
-
-# LOCALIZATION NOTE  (error-load.label): This is shown when loading fails.
-error-load=Style sheet could not be loaded.
-
-# LOCALIZATION NOTE  (error-save.label): This is shown when saving fails.
-error-save=Style sheet could not be saved.
-
-# LOCALIZATION NOTE  (importStyleSheet.title): This is the file picker title,
-# when you import a style sheet into the Style Editor.
-importStyleSheet.title=Import style sheet
-
-# LOCALIZATION NOTE  (importStyleSheet.title): This is the *.css filter title
-importStyleSheet.filter=CSS files
-
-# LOCALIZATION NOTE  (saveStyleSheet.title): This is the file picker title,
-# when you save a style sheet from the Style Editor.
-saveStyleSheet.title=Save style sheet
-
-# LOCALIZATION NOTE  (saveStyleSheet.title): This is the *.css filter title
-saveStyleSheet.filter=CSS files
-
-# LOCALIZATION NOTE  (saveStyleSheet.commandkey): This the key to use in
-# conjunction with accel (Command on Mac or Ctrl on other platforms) to Save
-saveStyleSheet.commandkey=S
diff --git a/browser/locales/jar.mn b/browser/locales/jar.mn
index a3e78af9dcc3..c334e3f04ac8 100644
--- a/browser/locales/jar.mn
+++ b/browser/locales/jar.mn
@@ -21,8 +21,6 @@
     locale/browser/devtools/inspector.properties      (%chrome/browser/devtools/inspector.properties)
     locale/browser/devtools/scratchpad.properties     (%chrome/browser/devtools/scratchpad.properties)
     locale/browser/devtools/scratchpad.dtd            (%chrome/browser/devtools/scratchpad.dtd)
-    locale/browser/devtools/styleeditor.properties    (%chrome/browser/devtools/styleeditor.properties)
-    locale/browser/devtools/styleeditor.dtd           (%chrome/browser/devtools/styleeditor.dtd)
     locale/browser/devtools/styleinspector.properties (%chrome/browser/devtools/styleinspector.properties)
     locale/browser/devtools/styleinspector.dtd        (%chrome/browser/devtools/styleinspector.dtd)
     locale/browser/devtools/webConsole.dtd            (%chrome/browser/devtools/webConsole.dtd)
diff --git a/browser/themes/gnomestripe/browser/devtools/eye-toggle.png b/browser/themes/gnomestripe/browser/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/browser/devtools/splitview.css b/browser/themes/gnomestripe/browser/devtools/splitview.css
deleted file mode 100644
index 2ff733e2c9e2..000000000000
--- a/browser/themes/gnomestripe/browser/devtools/splitview.css
+++ /dev/null
@@ -1,137 +0,0 @@
-/* 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 Style Editor 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):
- *   Cedric Vivier <cedricv@neonux.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 ***** */
-
-.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;
-}
-
-ol.splitview-nav {
-  overflow-x: hidden;
-  overflow-y: auto;
-  list-style-image: none;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-ol.splitview-nav > li {
-  display: -moz-box;
-  -moz-box-orient: vertical;
-  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;
-  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;
-}
-
-a {
-  color: -moz-hyperlinktext;
-  text-decoration: underline;
-}
-
-button {
-  margin: 0;
-}
-
-/* limited width mode (hide search unless it has focus [search-on-type]) */
-@media (max-width: 250px) {
-  .splitview-filter {
-    max-width: none;
-    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/browser/devtools/styleeditor.css b/browser/themes/gnomestripe/browser/devtools/styleeditor.css
deleted file mode 100644
index 4de0201079be..000000000000
--- a/browser/themes/gnomestripe/browser/devtools/styleeditor.css
+++ /dev/null
@@ -1,177 +0,0 @@
-/* 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 Style Editor 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):
- *   Cedric Vivier <cedricv@neonux.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 ***** */
-
-ol.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) {
-  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;
-  background-repeat: no-repeat;
-}
-.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
-  float: right;
-}
-.splitview-nav > li.disabled > .stylesheet-enabled {
-  background-image: none;
-}
-.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 {
-  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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-}
-
-h1,
-h2,
-h3 {
-  font-size: inherit;
-  font-weight: normal;
-  margin: 0;
-  padding: 0;
-}
diff --git a/browser/themes/gnomestripe/browser/jar.mn b/browser/themes/gnomestripe/browser/jar.mn
index 1d042b51cf6d..d37625c3d17d 100644
--- a/browser/themes/gnomestripe/browser/jar.mn
+++ b/browser/themes/gnomestripe/browser/jar.mn
@@ -111,9 +111,7 @@ browser.jar:
   skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
   skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
   skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
-  skin/classic/browser/devtools/splitview.css         (devtools/splitview.css)
-  skin/classic/browser/devtools/styleeditor.css       (devtools/styleeditor.css)
-  skin/classic/browser/devtools/eye-toggle.png        (devtools/eye-toggle.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/devtools/eye-toggle.png b/browser/themes/pinstripe/browser/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/browser/devtools/splitview.css b/browser/themes/pinstripe/browser/devtools/splitview.css
deleted file mode 100644
index 2ff733e2c9e2..000000000000
--- a/browser/themes/pinstripe/browser/devtools/splitview.css
+++ /dev/null
@@ -1,137 +0,0 @@
-/* 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 Style Editor 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):
- *   Cedric Vivier <cedricv@neonux.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 ***** */
-
-.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;
-}
-
-ol.splitview-nav {
-  overflow-x: hidden;
-  overflow-y: auto;
-  list-style-image: none;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-ol.splitview-nav > li {
-  display: -moz-box;
-  -moz-box-orient: vertical;
-  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;
-  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;
-}
-
-a {
-  color: -moz-hyperlinktext;
-  text-decoration: underline;
-}
-
-button {
-  margin: 0;
-}
-
-/* limited width mode (hide search unless it has focus [search-on-type]) */
-@media (max-width: 250px) {
-  .splitview-filter {
-    max-width: none;
-    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/browser/devtools/styleeditor.css b/browser/themes/pinstripe/browser/devtools/styleeditor.css
deleted file mode 100644
index 4de0201079be..000000000000
--- a/browser/themes/pinstripe/browser/devtools/styleeditor.css
+++ /dev/null
@@ -1,177 +0,0 @@
-/* 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 Style Editor 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):
- *   Cedric Vivier <cedricv@neonux.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 ***** */
-
-ol.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) {
-  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;
-  background-repeat: no-repeat;
-}
-.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
-  float: right;
-}
-.splitview-nav > li.disabled > .stylesheet-enabled {
-  background-image: none;
-}
-.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 {
-  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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-}
-
-h1,
-h2,
-h3 {
-  font-size: inherit;
-  font-weight: normal;
-  margin: 0;
-  padding: 0;
-}
diff --git a/browser/themes/pinstripe/browser/jar.mn b/browser/themes/pinstripe/browser/jar.mn
index 0ce510a50e1a..0264b5c2a504 100644
--- a/browser/themes/pinstripe/browser/jar.mn
+++ b/browser/themes/pinstripe/browser/jar.mn
@@ -151,9 +151,7 @@ browser.jar:
   skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
   skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
   skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
-  skin/classic/browser/devtools/splitview.css               (devtools/splitview.css)
-  skin/classic/browser/devtools/styleeditor.css             (devtools/styleeditor.css)
-  skin/classic/browser/devtools/eye-toggle.png              (devtools/eye-toggle.png)
+
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-throbber.png
   skin/classic/browser/sync-16.png
diff --git a/browser/themes/winstripe/browser/devtools/eye-toggle.png b/browser/themes/winstripe/browser/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/browser/devtools/splitview.css b/browser/themes/winstripe/browser/devtools/splitview.css
deleted file mode 100644
index 2ff733e2c9e2..000000000000
--- a/browser/themes/winstripe/browser/devtools/splitview.css
+++ /dev/null
@@ -1,137 +0,0 @@
-/* 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 Style Editor 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):
- *   Cedric Vivier <cedricv@neonux.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 ***** */
-
-.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;
-}
-
-ol.splitview-nav {
-  overflow-x: hidden;
-  overflow-y: auto;
-  list-style-image: none;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-ol.splitview-nav > li {
-  display: -moz-box;
-  -moz-box-orient: vertical;
-  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;
-  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;
-}
-
-a {
-  color: -moz-hyperlinktext;
-  text-decoration: underline;
-}
-
-button {
-  margin: 0;
-}
-
-/* limited width mode (hide search unless it has focus [search-on-type]) */
-@media (max-width: 250px) {
-  .splitview-filter {
-    max-width: none;
-    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/browser/devtools/styleeditor.css b/browser/themes/winstripe/browser/devtools/styleeditor.css
deleted file mode 100644
index 4de0201079be..000000000000
--- a/browser/themes/winstripe/browser/devtools/styleeditor.css
+++ /dev/null
@@ -1,177 +0,0 @@
-/* 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 Style Editor 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):
- *   Cedric Vivier <cedricv@neonux.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 ***** */
-
-ol.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) {
-  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;
-  background-repeat: no-repeat;
-}
-.splitview-nav > li > .stylesheet-enabled:-moz-locale-dir(rtl) {
-  float: right;
-}
-.splitview-nav > li.disabled > .stylesheet-enabled {
-  background-image: none;
-}
-.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 {
-  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;
-}
-
-.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;
-}
-
-.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;
-}
-
-.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;
-}
-
-h1,
-h2,
-h3 {
-  font-size: inherit;
-  font-weight: normal;
-  margin: 0;
-  padding: 0;
-}
diff --git a/browser/themes/winstripe/browser/jar.mn b/browser/themes/winstripe/browser/jar.mn
index 92ab8fb19084..d3358ea5fbc9 100644
--- a/browser/themes/winstripe/browser/jar.mn
+++ b/browser/themes/winstripe/browser/jar.mn
@@ -135,9 +135,7 @@ browser.jar:
         skin/classic/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
         skin/classic/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
         skin/classic/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
-        skin/classic/browser/devtools/splitview.css                 (devtools/splitview.css)
-        skin/classic/browser/devtools/styleeditor.css               (devtools/styleeditor.css)
-        skin/classic/browser/devtools/eye-toggle.png                (devtools/eye-toggle.png)
+
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-throbber.png
         skin/classic/browser/sync-16.png
@@ -289,9 +287,7 @@ browser.jar:
         skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-selected-pressed.png   (devtools/breadcrumbs/rtl-start-selected-pressed.png)
         skin/classic/aero/browser/devtools/breadcrumbs/rtl-start.png                    (devtools/breadcrumbs/rtl-start.png)
         skin/classic/aero/browser/devtools/breadcrumbs/rtl-start-selected.png           (devtools/breadcrumbs/rtl-start-selected.png)
-        skin/classic/aero/browser/devtools/splitview.css             (devtools/splitview.css)
-        skin/classic/aero/browser/devtools/styleeditor.css           (devtools/styleeditor.css)
-        skin/classic/aero/browser/devtools/eye-toggle.png            (devtools/eye-toggle.png)
+
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/sync-throbber.png
         skin/classic/aero/browser/sync-16.png

From 9f3e45e53fc2a8cb76255a3fd3ce1b0a0f03b383 Mon Sep 17 00:00:00 2001
From: Jim Mathies <jmathies@mozilla.com>
Date: Mon, 7 Nov 2011 13:23:42 -0600
Subject: [PATCH 19/21] Bug 577867 - Adds profile based win taskbar
 registration option. r=tellrob

---
 widget/src/windows/WinTaskbar.cpp | 23 +++++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/widget/src/windows/WinTaskbar.cpp b/widget/src/windows/WinTaskbar.cpp
index 48344b2443a9..528ff53b2b4c 100644
--- a/widget/src/windows/WinTaskbar.cpp
+++ b/widget/src/windows/WinTaskbar.cpp
@@ -62,6 +62,7 @@
 #include "nsWidgetsCID.h"
 #include "nsPIDOMWindow.h"
 #include "nsAppDirectoryServiceDefs.h"
+#include "mozilla/Preferences.h"
 #include <io.h>
 #include <propvarutil.h>
 #include <propkey.h>
@@ -274,6 +275,28 @@ WinTaskbar::~WinTaskbar() {
 // static
 bool
 WinTaskbar::GetAppUserModelID(nsAString & aDefaultGroupId) {
+  // If marked as such in prefs, use a hash of the profile path for the id
+  // instead of the install path hash setup by the installer.
+  bool useProfile =
+    Preferences::GetBool("taskbar.grouping.useprofile", false);
+  if (useProfile) {
+    nsCOMPtr<nsIFile> profileDir;
+    NS_GetSpecialDirectory(NS_APP_PROFILE_DEFAULTS_50_DIR,
+                           getter_AddRefs(profileDir));
+    bool exists = false;
+    if (profileDir && NS_SUCCEEDED(profileDir->Exists(&exists)) && exists) {
+      nsCAutoString path;
+      if (NS_SUCCEEDED(profileDir->GetNativePath(path))) {
+        nsAutoString id;
+        id.AppendInt(HashString(path));
+        if (!id.IsEmpty()) {
+          aDefaultGroupId.Assign(id);
+          return true;
+        }
+      }
+    }
+  }
+
   // The default value is set by the installer and is stored in the registry
   // under (HKLM||HKCU)/Software/Mozilla/Firefox/TaskBarIDs. If for any reason
   // hash generation operation fails, the installer will not store a value in

From 982d95e2349e1cfeedd6d4d227bbafcac99c3435 Mon Sep 17 00:00:00 2001
From: Rob Campbell <rcampbell@mozilla.com>
Date: Mon, 7 Nov 2011 15:31:45 -0400
Subject: [PATCH 20/21] Bug 689946 - Docked HTML panel in the highlighter
 should remember its height; r=msucan

---
 browser/app/profile/firefox.js                |   1 +
 browser/devtools/highlighter/TreePanel.jsm    |  10 +-
 .../test/browser_inspector_tree_height.js     | 144 ++++++++++++++++++
 3 files changed, 154 insertions(+), 1 deletion(-)
 create mode 100644 browser/devtools/highlighter/test/browser_inspector_tree_height.js

diff --git a/browser/app/profile/firefox.js b/browser/app/profile/firefox.js
index e4b30bf3703e..112c1b9d5eb7 100644
--- a/browser/app/profile/firefox.js
+++ b/browser/app/profile/firefox.js
@@ -1004,6 +1004,7 @@ pref("devtools.errorconsole.enabled", false);
 
 // Enable the Inspector
 pref("devtools.inspector.enabled", true);
+pref("devtools.inspector.htmlHeight", 112);
 
 // Enable the style inspector
 pref("devtools.styleinspector.enabled", true);
diff --git a/browser/devtools/highlighter/TreePanel.jsm b/browser/devtools/highlighter/TreePanel.jsm
index cd46ebcd0b5e..b889d045e1b2 100644
--- a/browser/devtools/highlighter/TreePanel.jsm
+++ b/browser/devtools/highlighter/TreePanel.jsm
@@ -227,7 +227,14 @@ TreePanel.prototype = {
     treeBox = this.document.createElement("vbox");
     treeBox.id = "inspector-tree-box";
     treeBox.state = "open"; // for the registerTools API.
-    treeBox.minHeight = 10;
+    try {
+      treeBox.height =
+        Services.prefs.getIntPref("devtools.inspector.htmlHeight");
+    } catch(e) {
+      treeBox.height = 112;
+    }
+                      
+    treeBox.minHeight = 64;
     treeBox.flex = 1;
     toolbarParent.insertBefore(treeBox, toolbar);
 
@@ -262,6 +269,7 @@ TreePanel.prototype = {
       this.IUI.toolbar.removeAttribute("treepanel-open");
 
       let treeBox = this.container;
+      Services.prefs.setIntPref("devtools.inspector.htmlHeight", treeBox.height);
       let treeBoxParent = treeBox.parentNode;
       treeBoxParent.removeChild(treeBox);
     } else {
diff --git a/browser/devtools/highlighter/test/browser_inspector_tree_height.js b/browser/devtools/highlighter/test/browser_inspector_tree_height.js
new file mode 100644
index 000000000000..dd2c75c32dde
--- /dev/null
+++ b/browser/devtools/highlighter/test/browser_inspector_tree_height.js
@@ -0,0 +1,144 @@
+/* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
+/* vim: set ts=2 et sw=2 tw=80: */
+/* ***** 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 Inspector Tests.
+ *
+ * The Initial Developer of the Original Code is
+ * The Mozilla Foundation.
+ * Portions created by the Initial Developer are Copyright (C) 2011
+ * the Initial Developer. All Rights Reserved.
+ *
+ * Contributor(s):
+ *   Rob Campbell <rcampbell@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
+ * 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 ***** */
+let doc;
+let salutation;
+let closing;
+
+const NEWHEIGHT = 226;
+
+function createDocument()
+{
+  doc.body.innerHTML = '<div id="first" style="{ margin: 10em; ' +
+    'font-size: 14pt; font-family: helvetica, sans-serif; color: #AAA}">\n' +
+    '<h1>Some header text</h1>\n' +
+    '<p id="salutation" style="{font-size: 12pt}">hi.</p>\n' +
+    '<p id="body" style="{font-size: 12pt}">I am a test-case. This text exists ' +
+    'solely to provide some things to test the inspector initialization.</p>\n' +
+    'If you are reading this, you should go do something else instead. Maybe ' +
+    'read a book. Or better yet, write some test-cases for another bit of code. ' +
+    '<span style="{font-style: italic}">Maybe more inspector test-cases!</span></p>\n' +
+    '<p id="closing">end transmission</p>\n' +
+    '</div>';
+  doc.title = "Inspector Initialization Test";
+  startInspectorTests();
+}
+
+function startInspectorTests()
+{
+  ok(InspectorUI, "InspectorUI variable exists");
+  Services.obs.addObserver(runInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED, false);
+  InspectorUI.toggleInspectorUI();
+}
+
+function runInspectorTests()
+{
+  Services.obs.removeObserver(runInspectorTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.OPENED);
+
+  if (InspectorUI.treePanelEnabled) {
+    Services.obs.addObserver(treePanelTests,
+      InspectorUI.INSPECTOR_NOTIFICATIONS.TREEPANELREADY, false);
+
+    InspectorUI.stopInspecting();
+
+    InspectorUI.treePanel.open();
+  } else
+    finishInspectorTests();
+}
+
+function treePanelTests()
+{
+  Services.obs.removeObserver(treePanelTests,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.TREEPANELREADY);
+  Services.obs.addObserver(treePanelTests2,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.TREEPANELREADY, false);
+
+  ok(InspectorUI.treePanel.isOpen(), "Inspector Tree Panel is open");
+
+  let height = Services.prefs.getIntPref("devtools.inspector.htmlHeight");
+
+  is(InspectorUI.treePanel.container.height, height,
+     "Container height is " + height);
+
+  InspectorUI.treePanel.container.height = NEWHEIGHT;
+
+  executeSoon(function() {
+    InspectorUI.treePanel.close();
+    InspectorUI.treePanel.open();
+  });
+}
+
+function treePanelTests2()
+{
+  Services.obs.removeObserver(treePanelTests2,
+    InspectorUI.INSPECTOR_NOTIFICATIONS.TREEPANELREADY);
+
+  ok(InspectorUI.treePanel.isOpen(), "Inspector Tree Panel is open");
+
+  let height = Services.prefs.getIntPref("devtools.inspector.htmlHeight");
+
+  is(InspectorUI.treePanel.container.height, NEWHEIGHT,
+     "Container height is now " + height);
+
+  InspectorUI.treePanel.close();
+  executeSoon(function() {
+    finishInspectorTests()
+  });
+}
+
+function finishInspectorTests()
+{
+  gBrowser.removeCurrentTab();
+  finish();
+}
+
+function test()
+{
+  waitForExplicitFinish();
+  gBrowser.selectedTab = gBrowser.addTab();
+  gBrowser.selectedBrowser.addEventListener("load", function() {
+    gBrowser.selectedBrowser.removeEventListener("load", arguments.callee, true);
+    doc = content.document;
+    waitForFocus(createDocument, content);
+  }, true);
+
+  content.location = "data:text/html,basic tests for inspector";
+}
+

From 353d5dc83c24189e8c0f55395f690f921f957272 Mon Sep 17 00:00:00 2001
From: Mihai Sucan <mihai.sucan@gmail.com>
Date: Mon, 7 Nov 2011 21:57:10 +0200
Subject: [PATCH 21/21] Bug 700387 - Remove the Style Inspector breadcrumbs;
 r=dcamp

---
 .../devtools/styleinspector/CssHtmlTree.jsm   | 32 -----------------
 .../devtools/styleinspector/csshtmltree.xul   | 22 ------------
 .../browser/devtools/csshtmltree.css          | 33 ------------------
 .../browser/devtools/csshtmltree.css          | 33 ------------------
 .../browser/devtools/csshtmltree.css          | 34 -------------------
 5 files changed, 154 deletions(-)

diff --git a/browser/devtools/styleinspector/CssHtmlTree.jsm b/browser/devtools/styleinspector/CssHtmlTree.jsm
index f9db90602725..a49efa275d25 100644
--- a/browser/devtools/styleinspector/CssHtmlTree.jsm
+++ b/browser/devtools/styleinspector/CssHtmlTree.jsm
@@ -165,9 +165,7 @@ function CssHtmlTree(aStyleInspector)
 
   // Nodes used in templating
   this.root = this.styleDocument.getElementById("root");
-  this.path = this.styleDocument.getElementById("path");
   this.templateRoot = this.styleDocument.getElementById("templateRoot");
-  this.templatePath = this.styleDocument.getElementById("templatePath");
   this.propertyContainer = this.styleDocument.getElementById("propertyContainer");
   this.panel = aStyleInspector.panel;
 
@@ -270,8 +268,6 @@ CssHtmlTree.prototype = {
     this._unmatchedProperties = null;
     this._matchedProperties = null;
 
-    CssHtmlTree.processTemplate(this.templatePath, this.path, this);
-
     if (this.htmlComplete) {
       this.refreshPanel();
     } else {
@@ -341,20 +337,6 @@ CssHtmlTree.prototype = {
     this._refreshProcess.schedule();
   },
 
-  /**
-   * Called when the user clicks on a parent element in the "current element"
-   * path.
-   *
-   * @param {Event} aEvent the DOM Event object.
-   */
-  pathClick: function CssHtmlTree_pathClick(aEvent)
-  {
-    aEvent.preventDefault();
-    if (aEvent.target && this.viewedElement != aEvent.target.pathElement) {
-      this.styleInspector.selectFromPath(aEvent.target.pathElement);
-    }
-  },
-
   /**
    * Called when the user enters a search term.
    *
@@ -392,18 +374,6 @@ CssHtmlTree.prototype = {
     this.refreshPanel();
   },
 
-  /**
-   * Provide access to the path to get from document.body to the selected
-   * element.
-   *
-   * @return {array} the array holding the path from document.body to the
-   * selected element.
-   */
-  get pathElements()
-  {
-    return CssLogic.getShortNamePath(this.viewedElement);
-  },
-
   /**
    * The CSS as displayed by the UI.
    */
@@ -497,8 +467,6 @@ CssHtmlTree.prototype = {
 
     // Nodes used in templating
     delete this.root;
-    delete this.path;
-    delete this.templatePath;
     delete this.propertyContainer;
     delete this.panel;
 
diff --git a/browser/devtools/styleinspector/csshtmltree.xul b/browser/devtools/styleinspector/csshtmltree.xul
index 0ef01d235219..1834b5e6dd8e 100644
--- a/browser/devtools/styleinspector/csshtmltree.xul
+++ b/browser/devtools/styleinspector/csshtmltree.xul
@@ -63,10 +63,6 @@
 <!-- The output from #templateRoot (below) is inserted here. -->
 <div id="root"></div>
 
-<!-- The output from #templatePath (below) is inserted here. -->
-<div id="path">
-</div>
-
 <!-- When no properties are found the following block is displayed. -->
 <div id="noResults" hidden="">
   &noPropertiesFound;
@@ -100,24 +96,6 @@ To visually debug the templates without running firefox, alter the display:none
     </xul:hbox>
   </div>
 
-  <!--
-  templatePath sits just below the top of the window showing what we're looking
-  at. For data it needs an instance of CssHtmlTree.
-  -->
-  <div id="templatePath">
-    <span class="selectedElementLabel">
-      &selectedElementLabel;
-    </span>
-    <!-- following broken in RTL mode, see bug 699900 -->
-    <ol>
-      <li foreach="item in ${pathElements}">
-        <a href="#" onclick="${pathClick}" __pathElement="${item.element}">
-          ${__element.pathElement = item.element; item.display}
-        </a>
-      </li>
-    </ol>
-  </div>
-
 
   <!--
   A templateMatchedSelectors sits inside each templateProperties showing the
diff --git a/browser/themes/gnomestripe/browser/devtools/csshtmltree.css b/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
index f6977d95eeb0..aad1f2b02c80 100644
--- a/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
@@ -48,35 +48,6 @@
   display: -moz-box;
 }
 
-#path {
-  font-size: 11px;
-  word-spacing: -1px;
-  margin-bottom: 0;
-  color: -moz-dialogtext;
-  background-color: -moz-dialog;
-  padding: 4px 5px 0;
-}
-#path ol {
-  list-style: none outside none;
-  margin: 0;
-  padding: 0;
-}
-#path li {
-  border-radius: 3px;
-  padding: 2px 3px;
-  font-size: 11px;
-  display: inline-block;
-}
-#path li:after {
-  content: " > ";
-}
-#path li:last-child {
-  font-weight: bold;
-  color: #0091ff;
-}
-#path li:last-child:after {
-  content: "";
-}
 
 .property-header {
   padding: 4px;
@@ -204,10 +175,6 @@
   overflow-y: auto;
 }
 
-.selectedElementLabel {
-  font-weight: bold;
-}
-
 .darkrow {
   background-color: rgba(0,0,0,.022);
 }
diff --git a/browser/themes/pinstripe/browser/devtools/csshtmltree.css b/browser/themes/pinstripe/browser/devtools/csshtmltree.css
index 86a584a85bce..0926b62d0ba5 100644
--- a/browser/themes/pinstripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/pinstripe/browser/devtools/csshtmltree.css
@@ -48,35 +48,6 @@
   display: -moz-box;
 }
 
-#path {
-  font-size: 11px;
-  word-spacing: -1px;
-  margin-bottom: 0;
-  color: -moz-dialogtext;
-  background-color: -moz-dialog;
-  padding: 4px 5px 0;
-}
-#path ol {
-  list-style: none outside none;
-  margin: 0;
-  padding: 0;
-}
-#path li {
-  border-radius: 3px;
-  padding: 2px 3px;
-  font-size: 11px;
-  display: inline-block;
-}
-#path li:after {
-  content: " > ";
-}
-#path li:last-child {
-  font-weight: bold;
-  color: #0091ff;
-}
-#path li:last-child:after {
-  content: "";
-}
 
 .property-header {
   padding: 4px;
@@ -206,10 +177,6 @@
   overflow-y: auto;
 }
 
-.selectedElementLabel {
-  font-weight: bold;
-}
-
 .darkrow {
   background-color: rgba(0,0,0,.022);
 }
diff --git a/browser/themes/winstripe/browser/devtools/csshtmltree.css b/browser/themes/winstripe/browser/devtools/csshtmltree.css
index be962a00ed9d..f09d6ede597f 100644
--- a/browser/themes/winstripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/winstripe/browser/devtools/csshtmltree.css
@@ -48,36 +48,6 @@
   display: -moz-box;
 }
 
-#path {
-  font-size: 11px;
-  word-spacing: -1px;
-  margin-bottom: 0;
-  color: -moz-dialogtext;
-  background-color: -moz-dialog;
-  padding: 4px 5px 0;
-}
-#path ol {
-  list-style: none outside none;
-  margin: 0;
-  padding: 0;
-}
-#path li {
-  border-radius: 3px;
-  padding: 2px 3px;
-  font-size: 11px;
-  display: inline-block;
-}
-#path li:after {
-  content: " > ";
-}
-#path li:last-child {
-  font-weight: bold;
-  color: #0091ff;
-}
-#path li:last-child:after {
-  content: "";
-}
-
 .property-header {
   padding: 4px;
   -moz-padding-start: 0;
@@ -206,10 +176,6 @@
   overflow-y: auto;
 }
 
-.selectedElementLabel {
-  font-weight: bold;
-}
-
 .darkrow {
   background-color: rgba(0,0,0,.022);
 }