Bug 689759 - Style Inspector needs a no-results placeholder; r=msucan

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();
@@ -153,6 +156,9 @@ CssHtmlTree.prototype = {
   // Toggle for zebra striping
   _darkStripe: true,
 
+  // Number of visible properties
+  numVisibleProperties: 0,
+
   get showOnlyUserStyles()
   {
     return this.onlyUserStylesCheckbox.checked;
@@ -196,6 +202,9 @@ CssHtmlTree.prototype = {
             let propView = new PropertyView(this, name);
             CssHtmlTree.processTemplate(this.templateProperty,
               this.propertyContainer, propView, true);
+            if (propView.visible) {
+              this.numVisibleProperties++;
+            }
             propView.refreshMatchedSelectors();
             this.propertyViews.push(propView);
           }
@@ -207,6 +216,7 @@ CssHtmlTree.prototype = {
           } else {
             this.htmlComplete = true;
             this._panelRefreshTimeout = null;
+            this.noResults.hidden = this.numVisibleProperties ? true : false;
             Services.obs.notifyObservers(null, "StyleInspector-populated", null);
           }
         }
@@ -225,6 +235,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;
 
@@ -244,6 +259,7 @@ CssHtmlTree.prototype = {
         this._panelRefreshTimeout = this.win.setTimeout(refreshView.bind(this), 15);
       } else {
         this._panelRefreshTimeout = null;
+        this.noResults.hidden = this.numVisibleProperties ? true : false;
         Services.obs.notifyObservers(null, "StyleInspector-populated", null);
       }
     }
@@ -515,6 +531,7 @@ PropertyView.prototype = {
       return;
     }
 
+    this.tree.numVisibleProperties++;
     this.valueNode.innerHTML = this.propertyInfo.value;
     this.refreshMatchedSelectors();
   },

browser/devtools/styleinspector/csshtmltree.xhtml

@@ -69,6 +69,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>

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 \

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";
+}

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 (bestMatch, matched & parentMatch): For each style
   -  property the panel shows the rules which hold that specific property. For
   -  every rule, the rule status is also displayed: a rule can be the best

browser/themes/gnomestripe/browser/devtools/csshtmltree.css

@@ -214,6 +214,12 @@ body {
   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;

browser/themes/pinstripe/browser/devtools/csshtmltree.css

@@ -214,6 +214,12 @@ body {
   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;

browser/themes/winstripe/browser/devtools/csshtmltree.css

@@ -213,6 +213,12 @@ body {
   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;