--- a/devtools/client/inspector/computed/computed.js
+++ b/devtools/client/inspector/computed/computed.js
@@ -189,17 +189,17 @@ function CssComputedView(inspector, docu
                                     this._onFilterTextboxContextMenu);
   this.searchClearButton.addEventListener("click", this._onClearSearch);
   this.includeBrowserStylesCheckbox.addEventListener("command",
     this._onIncludeBrowserStyles);
 
   this.searchClearButton.hidden = true;
 
   // No results text.
-  this.noResults = this.styleDocument.getElementById("noResults");
+  this.noResults = this.styleDocument.getElementById("computedview-no-results");
 
   // Refresh panel when color unit changed.
   this._handlePrefChange = this._handlePrefChange.bind(this);
   gDevTools.on("pref-changed", this._handlePrefChange);
 
   // Refresh panel when pref for showing original sources changes
   this._onSourcePrefChanged = this._onSourcePrefChanged.bind(this);
   this._prefObserver = new PrefObserver("devtools.");

--- a/devtools/client/inspector/computed/test/browser.ini
+++ b/devtools/client/inspector/computed/test/browser.ini
@@ -29,11 +29,12 @@ support-files =
 [browser_computed_original-source-link.js]
 [browser_computed_pseudo-element_01.js]
 [browser_computed_refresh-on-style-change_01.js]
 [browser_computed_search-filter.js]
 [browser_computed_search-filter_clear.js]
 [browser_computed_search-filter_context-menu.js]
 subsuite = clipboard
 [browser_computed_search-filter_escape-keypress.js]
+[browser_computed_search-filter_noproperties.js]
 [browser_computed_select-and-copy-styles.js]
 subsuite = clipboard
 [browser_computed_style-editor-link.js]

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/computed/test/browser_computed_search-filter_noproperties.js
@@ -0,0 +1,61 @@
+/* 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/ */
+
+"use strict";
+
+// Tests that the "no-results" message is displayed when selecting an invalid element or
+// when all properties have been filtered out.
+
+const TEST_URI = `
+  <style type="text/css">
+    .matches {
+      color: #F00;
+      background-color: #00F;
+      border-color: #0F0;
+    }
+  </style>
+  <div>
+    <!-- comment node -->
+    <span id="matches" class="matches">Some styled text</span>
+  </div>
+`;
+
+add_task(function* () {
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
+  let {inspector, view} = yield openComputedView();
+  let propertyViews = view.propertyViews;
+
+  info("Select the #matches node");
+  let matchesNode = yield getNodeFront("#matches", inspector);
+  let onRefresh = inspector.once("computed-view-refreshed");
+  yield selectNode(matchesNode, inspector);
+  yield onRefresh;
+
+  ok(propertyViews.filter(p => p.visible).length > 0, "CSS properties are displayed");
+  ok(view.noResults.hasAttribute("hidden"), "no-results message is hidden");
+
+  info("Select a comment node");
+  let commentNode = yield inspector.walker.previousSibling(matchesNode);
+  yield selectNode(commentNode, inspector);
+
+  is(propertyViews.filter(p => p.visible).length, 0, "No properties displayed");
+  ok(!view.noResults.hasAttribute("hidden"), "no-results message is displayed");
+
+  info("Select the #matches node again");
+  onRefresh = inspector.once("computed-view-refreshed");
+  yield selectNode(matchesNode, inspector);
+  yield onRefresh;
+
+  ok(propertyViews.filter(p => p.visible).length > 0, "CSS properties are displayed");
+  ok(view.noResults.hasAttribute("hidden"), "no-results message is hidden");
+
+  info("Filter by 'will-not-match' and check the no-results message is displayed");
+  let searchField = view.searchField;
+  searchField.focus();
+  synthesizeKeys("will-not-match", view.styleWindow);
+  yield inspector.once("computed-view-refreshed");
+
+  is(propertyViews.filter(p => p.visible).length, 0, "No properties displayed");
+  ok(!view.noResults.hasAttribute("hidden"), "no-results message is displayed");
+});

--- a/devtools/client/inspector/inspector.xul
+++ b/devtools/client/inspector/inspector.xul
@@ -106,17 +106,17 @@
                       class="includebrowserstyles"
                       checked="false"
                       label="&browserStylesLabel;"/>
           </html:div>
 
           <html:div id="propertyContainer">
           </html:div>
 
-          <html:div id="noResults" hidden="">
+          <html:div id="computedview-no-results" hidden="">
             &noPropertiesFound;
           </html:div>
         </tabpanel>
 
         <tabpanel id="sidebar-panel-fontinspector" class="devtools-monospace theme-sidebar inspector-tabpanel">
           <html:div class="devtools-toolbar">
             <html:div class="devtools-searchbox">
               <html:input id="font-preview-text-input"

--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -957,22 +957,22 @@ CssRuleView.prototype = {
       }, e => console.error(e));
     }).then(null, promiseWarn);
   },
 
   /**
    * Show the user that the rule view has no node selected.
    */
   _showEmpty: function () {
-    if (this.styleDocument.getElementById("noResults") > 0) {
+    if (this.styleDocument.getElementById("ruleview-no-results")) {
       return;
     }
 
     createChild(this.element, "div", {
-      id: "noResults",
+      id: "ruleview-no-results",
       textContent: l10n("rule.empty")
     });
   },
 
   /**
    * Clear the rules.
    */
   _clearRules: function () {

--- a/devtools/client/inspector/rules/test/browser_rules_content_01.js
+++ b/devtools/client/inspector/rules/test/browser_rules_content_01.js
@@ -21,21 +21,21 @@ const TEST_URI = `
   <div id="testid2">Styled Node</div>
 `;
 
 add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let {inspector, view} = yield openRuleView();
 
   yield selectNode("#testid", inspector);
-  is(view.element.querySelectorAll("#noResults").length, 0,
+  is(view.element.querySelectorAll("#ruleview-no-results").length, 0,
     "After a highlight, no longer has a no-results element.");
 
   yield clearCurrentNodeSelection(inspector);
-  is(view.element.querySelectorAll("#noResults").length, 1,
+  is(view.element.querySelectorAll("#ruleview-no-results").length, 1,
     "After highlighting null, has a no-results element again.");
 
   yield selectNode("#testid", inspector);
 
   let linkText = getRuleViewLinkTextByIndex(view, 1);
   is(linkText, "inline:3 @screen and (min-width: 10px)",
     "link text at index 1 contains media query text.");
 

--- a/devtools/client/themes/computed.css
+++ b/devtools/client/themes/computed.css
@@ -136,20 +136,18 @@
 .matched {
   text-decoration: line-through;
 }
 
 .parentmatch {
   opacity: 0.5;
 }
 
-#noResults {
-  font-size: 110%;
-  margin: 5px;
-  text-align: center;
+#computedview-no-results {
+  height: 100%;
 }
 
 .onlyuserstyles {
   cursor: pointer;
 }
 
 .legendKey {
   margin: 0 5px;

--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -96,8 +96,17 @@
   }
 }
 
 /* Add element toolbar button */
 
 #inspector-element-add-button::before {
   background-image: url("chrome://devtools/skin/images/add.svg");
 }
+
+/* "no results" warning message displayed in the ruleview and in the computed view */
+
+#ruleview-no-results,
+#computedview-no-results {
+  color: var(--theme-body-color-inactive);
+  text-align: center;
+  margin: 5px;
+}

--- a/devtools/client/themes/rules.css
+++ b/devtools/client/themes/rules.css
@@ -193,18 +193,17 @@
   cursor: pointer;
 }
 
 .ruleview-rule-pseudo-element {
   padding-left:20px;
   border-left: solid 10px;
 }
 
-.ruleview-rule,
-#noResults {
+.ruleview-rule {
   padding: 2px 4px;
 }
 
 /**
  * Display rules that don't match the current selected element and uneditable
  * user agent styles differently
  */
 .ruleview-rule[unmatched=true],
@@ -262,21 +261,16 @@
 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-propertyvaluecontainer * {
   color: #CCCCCC;
 }
 
 .theme-firebug .ruleview-enableproperty:not([checked]) ~ .ruleview-computedlist * {
   color: #CCCCCC;
 }
 
-#noResults {
-  font: message-box;
-  color: GrayText;
-}
-
 .ruleview-rule + .ruleview-rule {
   border-top-width: 1px;
   border-top-style: dotted;
 }
 
 .theme-firebug .ruleview-rule + .ruleview-rule {
   border-top: none;
 }