Bug 672744 - Add search filter to style inspector; r=msucan
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Tue, 20 Sep 2011 11:59:13 +0200
changeset 77245 eff517413fc19fcd8128ed1236e8ab98675161b9
parent 77244 1314532cfdb9ca84b25442f548d2ff42fef76cb5
child 77246 304f93baaa1bfc7ac0249cfd7d303920c0f3294e
push id3
push userfelipc@gmail.com
push dateFri, 30 Sep 2011 20:09:13 +0000
reviewersmsucan
bugs672744
milestone9.0a1
Bug 672744 - Add search filter to style inspector; r=msucan
browser/base/content/browser.css
browser/devtools/styleinspector/CssHtmlTree.jsm
browser/devtools/styleinspector/StyleInspector.jsm
browser/devtools/styleinspector/csshtmltree.xhtml
browser/devtools/styleinspector/test/browser/Makefile.in
browser/devtools/styleinspector/test/browser/browser_styleinspector_bug_672744_search_filter.js
browser/themes/gnomestripe/browser/devtools/csshtmltree.css
browser/themes/gnomestripe/browser/devtools/search.png
browser/themes/gnomestripe/browser/jar.mn
browser/themes/pinstripe/browser/devtools/csshtmltree.css
browser/themes/pinstripe/browser/devtools/search.png
browser/themes/pinstripe/browser/jar.mn
browser/themes/winstripe/browser/devtools/csshtmltree.css
browser/themes/winstripe/browser/devtools/search.png
browser/themes/winstripe/browser/jar.mn
--- a/browser/base/content/browser.css
+++ b/browser/base/content/browser.css
@@ -522,14 +522,18 @@ statuspanel[label=""] {
 }
 
 .statuspanel-inner {
   height: 3em;
   width: 100%;
   -moz-box-align: end;
 }
 
+.styleInspector {
+  min-width: 350px;
+}
+
 .panel-inner-arrowcontentfooter[footertype="promobox"] {
   -moz-binding: url("chrome://browser/content/urlbarBindings.xml#promobox");
 }
 
 /* highlighter */
 %include highlighter.css
--- a/browser/devtools/styleinspector/CssHtmlTree.jsm
+++ b/browser/devtools/styleinspector/CssHtmlTree.jsm
@@ -35,16 +35,17 @@
  * 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 ***** */
 
 const Cu = Components.utils;
+const FILTER_CHANGED_TIMEOUT = 300;
 
 Cu.import("resource://gre/modules/Services.jsm");
 Cu.import("resource://gre/modules/PluralForm.jsm");
 Cu.import("resource://gre/modules/XPCOMUtils.jsm");
 Cu.import("resource:///modules/devtools/CssLogic.jsm");
 Cu.import("resource:///modules/devtools/Templater.jsm");
 
 var EXPORTED_SYMBOLS = ["CssHtmlTree", "PropertyView"];
@@ -145,16 +146,22 @@ XPCOMUtils.defineLazyGetter(CssHtmlTree,
   return mainWindow.getComputedStyle(mainWindow.gBrowser).direction;
 });
 
 XPCOMUtils.defineLazyGetter(CssHtmlTree, "_strings", function() Services.strings
     .createBundle("chrome://browser/locale/styleinspector.properties"));
 
 CssHtmlTree.prototype = {
   htmlComplete: false,
+
+  // Used for cancelling timeouts in the style filter.
+  filterChangedTimeout: null,
+
+  // The search filter
+  searchField: null,
   
   // Reference to the "Only user Styles" checkbox.
   onlyUserStylesCheckbox: null,
 
   get showOnlyUserStyles()
   {
     return this.onlyUserStylesCheckbox.checked;
   },
@@ -239,16 +246,35 @@ CssHtmlTree.prototype = {
         }
       } else {
         this.panel.selectNode(aEvent.target.pathElement);
       }
     }
   },
 
   /**
+   * Called when the user enters a search term.
+   *
+   * @param {Event} aEvent the DOM Event object.
+   */
+  filterChanged: function CssHtmlTree_filterChanged(aEvent)
+  {
+    let win = this.styleWin.contentWindow;
+
+    if (this.filterChangedTimeout) {
+      win.clearTimeout(this.filterChangedTimeout);
+      this.filterChangeTimeout = null;
+    }
+
+    this.filterChangedTimeout = win.setTimeout(function() {
+      this.refreshPanel();
+    }.bind(this), FILTER_CHANGED_TIMEOUT);
+  },
+
+  /**
    * The change event handler for the onlyUserStyles checkbox. When
    * onlyUserStyles.checked is true we do not display properties that have no
    * matched selectors, and we do not display UA styles. If .checked is false we
    * do display even properties with no matched selectors, and we include the UA
    * styles.
    *
    * @param {Event} aEvent the DOM Event object.
    */
@@ -392,16 +418,22 @@ PropertyView.prototype = {
    * Should this property be visible?
    */
   get visible()
   {
     if (this.tree.showOnlyUserStyles && this.matchedSelectorCount == 0) {
       return false;
     }
 
+    let searchTerm = this.tree.searchField.value.toLowerCase();
+    if (searchTerm && this.name.toLowerCase().indexOf(searchTerm) == -1 &&
+      this.value.toLowerCase().indexOf(searchTerm) == -1) {
+      return false;
+    }
+
     return true;
   },
 
   /**
    * Returns the className that should be assigned to the propertyView.
    */
   get className()
   {
--- a/browser/devtools/styleinspector/StyleInspector.jsm
+++ b/browser/devtools/styleinspector/StyleInspector.jsm
@@ -63,28 +63,26 @@ var StyleInspector = {
    */
   createPanel: function SI_createPanel(aPreserveOnHide)
   {
     let win = Services.wm.getMostRecentWindow("navigator:browser");
     let popupSet = win.document.getElementById("mainPopupSet");
     let ns = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
     let panel = win.document.createElementNS(ns, "panel");
 
+    panel.setAttribute("class", "styleInspector");
     panel.setAttribute("orient", "vertical");
     panel.setAttribute("ignorekeys", "true");
     panel.setAttribute("noautofocus", "true");
     panel.setAttribute("noautohide", "true");
     panel.setAttribute("titlebar", "normal");
     panel.setAttribute("close", "true");
     panel.setAttribute("label", StyleInspector.l10n("panelTitle"));
-
-    // size panel to 200px wide by half browser height - 60.
-    let contentWindow = win.gBrowser.selectedBrowser.contentWindow;
-    panel.setAttribute("width", 200);
-    panel.setAttribute("height", contentWindow.outerHeight / 2 - 60);
+    panel.setAttribute("width", 350);
+    panel.setAttribute("height", win.screen.height / 2);
 
     let vbox = win.document.createElement("vbox");
     vbox.setAttribute("flex", "1");
     panel.appendChild(vbox);
 
     let iframe = win.document.createElementNS(ns, "iframe");
     iframe.setAttribute("flex", "1");
     iframe.setAttribute("tooltip", "aHTMLTooltip");
--- a/browser/devtools/styleinspector/csshtmltree.xhtml
+++ b/browser/devtools/styleinspector/csshtmltree.xhtml
@@ -84,16 +84,18 @@ To visually debug the templates without 
   -->
   <div id="templateRoot">
     <div class="filters">
       <label class="userStylesLabel" dir="${getRTLAttr}">
         &userStylesLabel;
         <input class="userStyles" save="${onlyUserStylesCheckbox}" type="checkbox"
                onchange="${onlyUserStylesChanged}" checked=""/>
       </label>
+      <input save="${searchField}" class="searchfield" type="text"
+             oninput="${filterChanged}"/>
     </div>
   </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">
--- a/browser/devtools/styleinspector/test/browser/Makefile.in
+++ b/browser/devtools/styleinspector/test/browser/Makefile.in
@@ -45,16 +45,17 @@ relativesrcdir  = browser/devtools/style
 include $(DEPTH)/config/autoconf.mk
 include $(topsrcdir)/config/rules.mk
 
 _BROWSER_TEST_FILES = \
   browser_styleinspector.js \
   browser_styleinspector_webconsole.js \
   browser_bug683672.js \
   browser_styleinspector_bug_672746_default_styles.js \
+  browser_styleinspector_bug_672744_search_filter.js \
   head.js \
   $(NULL)
 
 _BROWSER_TEST_PAGES = \
   browser_styleinspector_webconsole.htm \
   browser_bug683672.html \
   $(NULL)
 
new file mode 100644
--- /dev/null
+++ b/browser/devtools/styleinspector/test/browser/browser_styleinspector_bug_672744_search_filter.js
@@ -0,0 +1,112 @@
+/* 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 search filter 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>' +
+    '</div>';
+  doc.title = "Style Inspector Search Filter Test";
+  ok(window.StyleInspector, "StyleInspector exists");
+  ok(StyleInspector.isEnabled, "style inspector preference is enabled");
+  stylePanel = StyleInspector.createPanel();
+  Services.obs.addObserver(runStyleInspectorTests, "StyleInspector-opened", false);
+  stylePanel.openPopup(gBrowser.selectedBrowser, "end_before", 0, 0, false, false);
+}
+
+function runStyleInspectorTests()
+{
+  Services.obs.removeObserver(runStyleInspectorTests, "StyleInspector-opened", false);
+
+  ok(stylePanel.isOpen(), "style inspector is open");
+
+  Services.obs.addObserver(SI_toggleDefaultStyles, "StyleInspector-populated", false);
+  SI_inspectNode();
+}
+
+function SI_inspectNode()
+{
+  var 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_toggleDefaultStyles()
+{
+  Services.obs.removeObserver(SI_toggleDefaultStyles, "StyleInspector-populated", false);
+
+  info("clearing \"only user styles\" checkbox");
+  let iframe = stylePanel.querySelector("iframe");
+  let checkbox = iframe.contentDocument.querySelector(".userStyles");
+  Services.obs.addObserver(SI_AddFilterText, "StyleInspector-populated", false);
+  EventUtils.synthesizeMouse(checkbox, 5, 5, {}, iframe.contentWindow);
+}
+
+function SI_AddFilterText()
+{
+  Services.obs.removeObserver(SI_AddFilterText, "StyleInspector-populated", false);
+
+  let iframe = stylePanel.querySelector("iframe");
+  let searchbar = iframe.contentDocument.querySelector(".searchfield");
+
+  Services.obs.addObserver(SI_checkFilter, "StyleInspector-populated", false);
+  info("setting filter text to \"color\"");
+  searchbar.focus();
+  EventUtils.synthesizeKey("c", {}, iframe.contentWindow);
+  EventUtils.synthesizeKey("o", {}, iframe.contentWindow);
+  EventUtils.synthesizeKey("l", {}, iframe.contentWindow);
+  EventUtils.synthesizeKey("o", {}, iframe.contentWindow);
+  EventUtils.synthesizeKey("r", {}, iframe.contentWindow);
+}
+
+function SI_checkFilter()
+{
+  Services.obs.removeObserver(SI_checkFilter, "StyleInspector-populated", false);
+  let propertyViews = stylePanel.cssHtmlTree.propertyViews;
+
+  info("check that the correct properties are visible");
+  for each(let propView in propertyViews) {
+    let name = propView.name;
+    is(propView.visible, name.indexOf("color") > -1,
+      "span " + name + " property visibility check");
+  }
+
+  Services.obs.addObserver(finishUp, "StyleInspector-closed", false);
+  stylePanel.hidePopup();
+}
+
+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,default styles test";
+}
--- a/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/gnomestripe/browser/devtools/csshtmltree.css
@@ -116,16 +116,24 @@ a.link:visited {
   float: left;
   -moz-margin-start: 15px;
   -moz-margin-end: 5px;
   margin-top: 3px;
   background: url("chrome://browser/skin/devtools/arrows.png");
   background-position: 24px 0;
 }
 
+.searchfield {
+  background: url("chrome://browser/skin/devtools/search.png") no-repeat #FFF;
+  border-radius: 5px;
+  -moz-padding-start: 20px;
+  width: 135px;
+  float: right;
+}
+
 .expander[dir="rtl"] {
   background-position: 16px 0;
 }
 .expander[open] {
   background-position: 8px 0;
 }
 
 .property-name {
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..df7212d78c8f86e7abe5073d85bf419786993550
GIT binary patch
literal 1445
zc%17D@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE;=WQl7;NpOBzNqJ&XDuZK6ep0G}
zXKrG8YEWuoN@d~6R2v2cW~I!Kh>{3jAFJg2T)jk)8oi3#0tOJUv9BmdOwLX%QAkQn
z&&;z`dcS+Wl0s&Rtx~wDuYqrYb81GWM^#a3aFt(3a#eP+Wr~u$oq|n;70`g()RIJn
zirk#MVyg;UC9t_xKsHENUr7P1q$Jx`3F4>--v9;Y{GwC^Q#}LSWCJq;1v5iELt_(j
zb8{U9BLhPNeFGzXLnB>7b1P#bD+2=sC{P00R+N%v73AUuwF}6zRmvzSDX`MlFE20G
zD>v55FG|-pw6wGYnPFt43sj+7T$xvrSfQI&tPC^3CAB!YD6^m>Ge1uO#7|7hFD<cE
zQi6FQw*YQzUNJP7fB~jokyxN_sAr&$q|nzFztY@Xxa#7Ppwu+{s*6J^3sUuiQj7CT
zi;{s6m!=HTTwvu~l$uzQUlfv`p92fUfQ<Z-{NjxK0tM$_Qw86|<jgz}AFSTj*UB@m
zxFj(zIn~p}RtYGgmzkMj<?8HW<YHiH=45K*WN7H(W@%|*=4@<YVCL%N=458z2-EA5
zpIn-onpXnTn}X15j#DovDL{0m7G;*DrnnX5=PH1`Y?X=IEhf0#0@0g-+byOz_38s1
zqmLHRFd<;-0Wsmp7RZ4o{M0;PYA*sN>rTV&CkzZslAbP(Ar-gIOxf=(ohWhqzW0|&
z%5$EucNmJziJ9UcY}`?-!m3zuX2F9?x{8aG4(>moX>nv>w|9Gzh2oBmj%RINv%&-y
zpVk#z=i6j)gwJ;IvDe>Qzh`+QC3QFR*HpyK+x@)y{pUUBtLLnH{Y3SwOWchrE88a)
zc|v(2D?~zyzr{BRL^aK3Wm<7rz(Bc<b3enw!|LW2?>MWhJ-C;7dz-+8nFfjSk&gGC
zud{8r!LAmz`Sx4$iy0w$V%@KA=9DSR@Xg=wy?(aOGSNN1m%SBx$;Z1U?6rA|pRU;H
zm5VfrJ9-)9Iu6Kp9}TMTYdz26=wbRy%0`bvl9@}xMQLKc&kD=LBX7&zKc2gO#e)TN
zAKaf*Yj<DZ_2hG(_nfJ^k<)ekwQc+LRaaN7eyrKO=mz(9ht^L&_k6gbDaOUB{dV!;
zhYEMAEIRI8{8!U>zx93gOMb=23DO>o4iAElPfA>xVBo>}dTUhg1C?NllMaVjd}g10
zR;g3pwA)2#<JUQsU#e~9T@6~f<f5JFnTN6~nz9S{*%GXu7FBM(9cwo!wNhDxD>m`0
zaijbLrazl*=Im|w7QQ+}%lO9E-|Ng<Ie!-KyyK!a`DJ+M)uvCcXEeR8uvw?{>_Eic
zt0ui_d`-z2I@@L6sJWQks5@rRy<5dI>Og|G$MV`ge)S5v&42rMTzdIs(dCzS4lg);
zGUd{bh})CqXP0bPeuMRfnI6;kSO0I+vq&&pJYHef^w)U`sNnQ;^>bP0l+XkKR`nx-
--- a/browser/themes/gnomestripe/browser/jar.mn
+++ b/browser/themes/gnomestripe/browser/jar.mn
@@ -80,16 +80,17 @@ browser.jar:
   skin/classic/browser/tabbrowser/tab-overflow-border.png (tabbrowser/tab-overflow-border.png)
   skin/classic/browser/tabbrowser/tabDragIndicator.png (tabbrowser/tabDragIndicator.png)
   skin/classic/browser/tabview/edit-light.png         (tabview/edit-light.png)
   skin/classic/browser/tabview/search.png             (tabview/search.png)  
   skin/classic/browser/tabview/stack-expander.png     (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png            (tabview/tabview.png)
   skin/classic/browser/tabview/tabview.css            (tabview/tabview.css)
   skin/classic/browser/devtools/arrows.png            (devtools/arrows.png)
+  skin/classic/browser/devtools/search.png            (devtools/search.png)
   skin/classic/browser/devtools/csshtmltree.css       (devtools/csshtmltree.css)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-16-throbber.png
   skin/classic/browser/sync-16.png
   skin/classic/browser/sync-24-throbber.png
   skin/classic/browser/sync-32.png
   skin/classic/browser/sync-bg.png
   skin/classic/browser/sync-desktopIcon.png
--- a/browser/themes/pinstripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/pinstripe/browser/devtools/csshtmltree.css
@@ -116,16 +116,24 @@ a.link:visited {
   float: left;
   -moz-margin-start: 15px;
   -moz-margin-end: 5px;
   margin-top: 3px;
   background: url("chrome://browser/skin/devtools/arrows.png");
   background-position: 24px 0;
 }
 
+.searchfield {
+  background: url("chrome://browser/skin/devtools/search.png") no-repeat #FFF;
+  border-radius: 5px;
+  -moz-padding-start: 20px;
+  width: 135px;
+  float: right;
+}
+
 .expander[dir="rtl"] {
   background-position: 16px 0;
 }
 .expander[open] {
   background-position: 8px 0;
 }
 
 .property-name {
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..df7212d78c8f86e7abe5073d85bf419786993550
GIT binary patch
literal 1445
zc%17D@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE;=WQl7;NpOBzNqJ&XDuZK6ep0G}
zXKrG8YEWuoN@d~6R2v2cW~I!Kh>{3jAFJg2T)jk)8oi3#0tOJUv9BmdOwLX%QAkQn
z&&;z`dcS+Wl0s&Rtx~wDuYqrYb81GWM^#a3aFt(3a#eP+Wr~u$oq|n;70`g()RIJn
zirk#MVyg;UC9t_xKsHENUr7P1q$Jx`3F4>--v9;Y{GwC^Q#}LSWCJq;1v5iELt_(j
zb8{U9BLhPNeFGzXLnB>7b1P#bD+2=sC{P00R+N%v73AUuwF}6zRmvzSDX`MlFE20G
zD>v55FG|-pw6wGYnPFt43sj+7T$xvrSfQI&tPC^3CAB!YD6^m>Ge1uO#7|7hFD<cE
zQi6FQw*YQzUNJP7fB~jokyxN_sAr&$q|nzFztY@Xxa#7Ppwu+{s*6J^3sUuiQj7CT
zi;{s6m!=HTTwvu~l$uzQUlfv`p92fUfQ<Z-{NjxK0tM$_Qw86|<jgz}AFSTj*UB@m
zxFj(zIn~p}RtYGgmzkMj<?8HW<YHiH=45K*WN7H(W@%|*=4@<YVCL%N=458z2-EA5
zpIn-onpXnTn}X15j#DovDL{0m7G;*DrnnX5=PH1`Y?X=IEhf0#0@0g-+byOz_38s1
zqmLHRFd<;-0Wsmp7RZ4o{M0;PYA*sN>rTV&CkzZslAbP(Ar-gIOxf=(ohWhqzW0|&
z%5$EucNmJziJ9UcY}`?-!m3zuX2F9?x{8aG4(>moX>nv>w|9Gzh2oBmj%RINv%&-y
zpVk#z=i6j)gwJ;IvDe>Qzh`+QC3QFR*HpyK+x@)y{pUUBtLLnH{Y3SwOWchrE88a)
zc|v(2D?~zyzr{BRL^aK3Wm<7rz(Bc<b3enw!|LW2?>MWhJ-C;7dz-+8nFfjSk&gGC
zud{8r!LAmz`Sx4$iy0w$V%@KA=9DSR@Xg=wy?(aOGSNN1m%SBx$;Z1U?6rA|pRU;H
zm5VfrJ9-)9Iu6Kp9}TMTYdz26=wbRy%0`bvl9@}xMQLKc&kD=LBX7&zKc2gO#e)TN
zAKaf*Yj<DZ_2hG(_nfJ^k<)ekwQc+LRaaN7eyrKO=mz(9ht^L&_k6gbDaOUB{dV!;
zhYEMAEIRI8{8!U>zx93gOMb=23DO>o4iAElPfA>xVBo>}dTUhg1C?NllMaVjd}g10
zR;g3pwA)2#<JUQsU#e~9T@6~f<f5JFnTN6~nz9S{*%GXu7FBM(9cwo!wNhDxD>m`0
zaijbLrazl*=Im|w7QQ+}%lO9E-|Ng<Ie!-KyyK!a`DJ+M)uvCcXEeR8uvw?{>_Eic
zt0ui_d`-z2I@@L6sJWQks5@rRy<5dI>Og|G$MV`ge)S5v&42rMTzdIs(dCzS4lg);
zGUd{bh})CqXP0bPeuMRfnI6;kSO0I+vq&&pJYHef^w)U`sNnQ;^>bP0l+XkKR`nx-
--- a/browser/themes/pinstripe/browser/jar.mn
+++ b/browser/themes/pinstripe/browser/jar.mn
@@ -119,16 +119,17 @@ browser.jar:
   skin/classic/browser/tabbrowser/tabDragIndicator.png                   (tabbrowser/tabDragIndicator.png)
   skin/classic/browser/tabview/close.png                    (tabview/close.png)
   skin/classic/browser/tabview/edit-light.png               (tabview/edit-light.png)
   skin/classic/browser/tabview/search.png                   (tabview/search.png)
   skin/classic/browser/tabview/stack-expander.png           (tabview/stack-expander.png)
   skin/classic/browser/tabview/tabview.png                  (tabview/tabview.png)
   skin/classic/browser/tabview/tabview.css                  (tabview/tabview.css)
   skin/classic/browser/devtools/arrows.png                  (devtools/arrows.png)
+  skin/classic/browser/devtools/search.png                  (devtools/search.png)
   skin/classic/browser/devtools/csshtmltree.css             (devtools/csshtmltree.css)
 #ifdef MOZ_SERVICES_SYNC
   skin/classic/browser/sync-throbber.png
   skin/classic/browser/sync-16.png
   skin/classic/browser/sync-32.png
   skin/classic/browser/sync-bg.png
   skin/classic/browser/sync-desktopIcon.png
   skin/classic/browser/sync-mobileIcon.png
--- a/browser/themes/winstripe/browser/devtools/csshtmltree.css
+++ b/browser/themes/winstripe/browser/devtools/csshtmltree.css
@@ -116,16 +116,24 @@ a.link:visited {
   float: left;
   -moz-margin-start: 15px;
   -moz-margin-end: 5px;
   margin-top: 3px;
   background: url("chrome://browser/skin/devtools/arrows.png");
   background-position: 24px 0;
 }
 
+.searchfield {
+  background: url("chrome://browser/skin/devtools/search.png") no-repeat #FFF;
+  border-radius: 5px;
+  -moz-padding-start: 20px;
+  width: 135px;
+  float: right;
+}
+
 .expander[dir="rtl"] {
   background-position: 16px 0;
 }
 .expander[open] {
   background-position: 8px 0;
 }
 
 .property-name {
new file mode 100644
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..df7212d78c8f86e7abe5073d85bf419786993550
GIT binary patch
literal 1445
zc%17D@N?(olHy`uVBq!ia0vp^A|TAc1|)ksWqE;=WQl7;NpOBzNqJ&XDuZK6ep0G}
zXKrG8YEWuoN@d~6R2v2cW~I!Kh>{3jAFJg2T)jk)8oi3#0tOJUv9BmdOwLX%QAkQn
z&&;z`dcS+Wl0s&Rtx~wDuYqrYb81GWM^#a3aFt(3a#eP+Wr~u$oq|n;70`g()RIJn
zirk#MVyg;UC9t_xKsHENUr7P1q$Jx`3F4>--v9;Y{GwC^Q#}LSWCJq;1v5iELt_(j
zb8{U9BLhPNeFGzXLnB>7b1P#bD+2=sC{P00R+N%v73AUuwF}6zRmvzSDX`MlFE20G
zD>v55FG|-pw6wGYnPFt43sj+7T$xvrSfQI&tPC^3CAB!YD6^m>Ge1uO#7|7hFD<cE
zQi6FQw*YQzUNJP7fB~jokyxN_sAr&$q|nzFztY@Xxa#7Ppwu+{s*6J^3sUuiQj7CT
zi;{s6m!=HTTwvu~l$uzQUlfv`p92fUfQ<Z-{NjxK0tM$_Qw86|<jgz}AFSTj*UB@m
zxFj(zIn~p}RtYGgmzkMj<?8HW<YHiH=45K*WN7H(W@%|*=4@<YVCL%N=458z2-EA5
zpIn-onpXnTn}X15j#DovDL{0m7G;*DrnnX5=PH1`Y?X=IEhf0#0@0g-+byOz_38s1
zqmLHRFd<;-0Wsmp7RZ4o{M0;PYA*sN>rTV&CkzZslAbP(Ar-gIOxf=(ohWhqzW0|&
z%5$EucNmJziJ9UcY}`?-!m3zuX2F9?x{8aG4(>moX>nv>w|9Gzh2oBmj%RINv%&-y
zpVk#z=i6j)gwJ;IvDe>Qzh`+QC3QFR*HpyK+x@)y{pUUBtLLnH{Y3SwOWchrE88a)
zc|v(2D?~zyzr{BRL^aK3Wm<7rz(Bc<b3enw!|LW2?>MWhJ-C;7dz-+8nFfjSk&gGC
zud{8r!LAmz`Sx4$iy0w$V%@KA=9DSR@Xg=wy?(aOGSNN1m%SBx$;Z1U?6rA|pRU;H
zm5VfrJ9-)9Iu6Kp9}TMTYdz26=wbRy%0`bvl9@}xMQLKc&kD=LBX7&zKc2gO#e)TN
zAKaf*Yj<DZ_2hG(_nfJ^k<)ekwQc+LRaaN7eyrKO=mz(9ht^L&_k6gbDaOUB{dV!;
zhYEMAEIRI8{8!U>zx93gOMb=23DO>o4iAElPfA>xVBo>}dTUhg1C?NllMaVjd}g10
zR;g3pwA)2#<JUQsU#e~9T@6~f<f5JFnTN6~nz9S{*%GXu7FBM(9cwo!wNhDxD>m`0
zaijbLrazl*=Im|w7QQ+}%lO9E-|Ng<Ie!-KyyK!a`DJ+M)uvCcXEeR8uvw?{>_Eic
zt0ui_d`-z2I@@L6sJWQks5@rRy<5dI>Og|G$MV`ge)S5v&42rMTzdIs(dCzS4lg);
zGUd{bh})CqXP0bPeuMRfnI6;kSO0I+vq&&pJYHef^w)U`sNnQ;^>bP0l+XkKR`nx-
--- a/browser/themes/winstripe/browser/jar.mn
+++ b/browser/themes/winstripe/browser/jar.mn
@@ -102,16 +102,17 @@ browser.jar:
         skin/classic/browser/tabview/edit-light.png                 (tabview/edit-light.png)
         skin/classic/browser/tabview/grain.png                      (tabview/grain.png)
         skin/classic/browser/tabview/search.png                     (tabview/search.png)
         skin/classic/browser/tabview/stack-expander.png             (tabview/stack-expander.png)
         skin/classic/browser/tabview/tabview.png                    (tabview/tabview.png)
         skin/classic/browser/tabview/tabview-inverted.png           (tabview/tabview-inverted.png)
         skin/classic/browser/tabview/tabview.css                    (tabview/tabview.css)
         skin/classic/browser/devtools/arrows.png                    (devtools/arrows.png)
+        skin/classic/browser/devtools/search.png                    (devtools/search.png)
         skin/classic/browser/devtools/csshtmltree.css               (devtools/csshtmltree.css)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/browser/sync-throbber.png
         skin/classic/browser/sync-16.png
         skin/classic/browser/sync-32.png
         skin/classic/browser/sync-bg.png
         skin/classic/browser/sync-desktopIcon.png
         skin/classic/browser/sync-mobileIcon.png
@@ -224,16 +225,17 @@ browser.jar:
         skin/classic/aero/browser/tabview/edit-light.png             (tabview/edit-light.png)
         skin/classic/aero/browser/tabview/grain.png                  (tabview/grain.png)
         skin/classic/aero/browser/tabview/search.png                 (tabview/search.png)
         skin/classic/aero/browser/tabview/stack-expander.png         (tabview/stack-expander.png)
         skin/classic/aero/browser/tabview/tabview.png                (tabview/tabview.png)
         skin/classic/aero/browser/tabview/tabview-inverted.png       (tabview/tabview-inverted.png)
         skin/classic/aero/browser/tabview/tabview.css                (tabview/tabview.css)
         skin/classic/aero/browser/devtools/arrows.png                (devtools/arrows.png)
+        skin/classic/aero/browser/devtools/search.png                (devtools/search.png)
         skin/classic/aero/browser/devtools/csshtmltree.css           (devtools/csshtmltree.css)
 #ifdef MOZ_SERVICES_SYNC
         skin/classic/aero/browser/sync-throbber.png
         skin/classic/aero/browser/sync-16.png
         skin/classic/aero/browser/sync-32.png
         skin/classic/aero/browser/sync-bg.png
         skin/classic/aero/browser/sync-desktopIcon.png
         skin/classic/aero/browser/sync-mobileIcon.png