Bug 1390727 - Add a consistent style for all the no result messages in the inspector sidepanel. r=bgrins

devtools/client/animationinspector/animation-inspector.xhtml

@@ -22,7 +22,7 @@
       <span id="timeline-current-time" class="label"></span>
     </div>
     <div id="players"></div>
-    <div id="error-message">
+    <div id="error-message" class="devtools-sidepanel-no-result">
       <p id="error-type"></p>
       <p id="error-hint"></p>
       <button id="element-picker" data-standalone="true" class="devtools-button"></button>

devtools/client/inspector/grids/components/Grid.js

@@ -88,7 +88,7 @@ module.exports = createClass({
       :
       dom.div(
         {
-          className: "layout-no-grids",
+          className: "devtools-sidepanel-no-result",
         },
         getStr("layout.noGridsOnThisPage")
       );

devtools/client/inspector/grids/test/browser_grids_grid-list-no-grids.js

@@ -22,7 +22,7 @@ add_task(function* () {
   let { highlighters } = inspector;
 
   yield selectNode("#grid", inspector);
-  let noGridList = doc.querySelector(".layout-no-grids");
+  let noGridList = doc.querySelector(".grid-pane .devtools-sidepanel-no-result");
   let gridList = doc.getElementById("grid-list");
 
   info("Checking the initial state of the Grid Inspector.");

devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-removed.js

@@ -58,6 +58,6 @@ add_task(function* () {
 
   info("Checking the CSS grid highlighter is not shown.");
   ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");
-  let noGridList = doc.querySelector(".layout-no-grids");
+  let noGridList = doc.querySelector(".grid-pane .devtools-sidepanel-no-result");
   ok(noGridList, "The message no grid containers is displayed.");
 });

devtools/client/inspector/inspector.xhtml

@@ -130,7 +130,7 @@
           <div id="computed-container-focusable" tabindex="-1">
             <div id="boxmodel-wrapper"></div>
             <div id="computed-property-container" class="devtools-monospace" tabindex="0" dir="ltr"></div>
-            <div id="computed-no-results" hidden="" data-localization="content=inspector.noProperties"></div>
+            <div id="computed-no-results" class="devtools-sidepanel-no-result" hidden="" data-localization="content=inspector.noProperties"></div>
           </div>
         </div>
       </div>

devtools/client/inspector/rules/rules.js

@@ -911,6 +911,7 @@ CssRuleView.prototype = {
 
     createChild(this.element, "div", {
       id: "ruleview-no-results",
+      class: "devtools-sidepanel-no-result",
       textContent: l10n("rule.empty")
     });
   },

devtools/client/themes/animationinspector.css

@@ -157,8 +157,6 @@ body {
 /* The error message, shown when an invalid/unanimated element is selected */
 
 #error-message {
-  padding-top: 10%;
-  text-align: center;
   flex: 1;
   overflow: auto;
 

devtools/client/themes/common.css

@@ -2,7 +2,6 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-
 @import url("resource://devtools/client/themes/splitters.css");
 @namespace html url("http://www.w3.org/1999/xhtml");
 
@@ -687,3 +686,13 @@ checkbox:-moz-focusring {
   background-repeat: no-repeat;
   background-position: center;
 }
+
+/* No result message styles */
+
+.devtools-sidepanel-no-result {
+  font-style: italic;
+  text-align: center;
+  padding: 0.5em;
+  -moz-user-select: none;
+  font-size: 12px;
+}

devtools/client/themes/inspector.css

@@ -188,15 +188,6 @@ window {
   -moz-user-focus: normal;
 }
 
-/* "no results" warning message displayed in the ruleview and in the computed view */
-
-#ruleview-no-results,
-#computed-no-results {
-  color: var(--theme-body-color-inactive);
-  text-align: center;
-  margin: 5px;
-}
-
 /* Markup Box */
 
 iframe {
@@ -213,4 +204,3 @@ iframe {
   height: 100%;
   width: 100%;
 }
-

devtools/client/themes/layout.css

@@ -173,16 +173,6 @@
   height: 16px;
 }
 
-/**
- * Container when no grids are present
- */
-
-.layout-no-grids {
-  font-style: italic;
-  text-align: center;
-  padding: 0.5em;
-}
-
 /**
  * Grid Item
  */