--- a/devtools/client/animationinspector/animation-inspector.xhtml
+++ b/devtools/client/animationinspector/animation-inspector.xhtml
@@ -17,17 +17,17 @@
     </div>
     <div id="timeline-toolbar" class="theme-toolbar">
       <button id="rewind-timeline" class="devtools-button"></button>
       <button id="pause-resume-timeline" class="devtools-button pause-button paused"></button>
       <span id="timeline-rate" class="devtools-button"></span>
       <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>
     </div>
     <script type="text/javascript">
       /* eslint-disable */
       var isInChrome = window.location.href.includes("chrome:");
       if (isInChrome) {

--- a/devtools/client/inspector/grids/components/Grid.js
+++ b/devtools/client/inspector/grids/components/Grid.js
@@ -83,15 +83,15 @@ module.exports = createClass({
           grids,
           onShowGridAreaHighlight,
           onShowGridCellHighlight,
         })
       )
       :
       dom.div(
         {
-          className: "layout-no-grids",
+          className: "devtools-sidepanel-no-result",
         },
         getStr("layout.noGridsOnThisPage")
       );
   },
 
 });

--- a/devtools/client/inspector/grids/test/browser_grids_grid-list-no-grids.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-no-grids.js
@@ -17,17 +17,17 @@ const TEST_URI = `
 
 add_task(function* () {
   yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
   let { inspector, gridInspector } = yield openLayoutView();
   let { document: doc } = gridInspector;
   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.");
   ok(noGridList, "The message no grid containers is displayed.");
   ok(!gridList, "No grid containers are listed.");
   ok(!highlighters.highlighters[HIGHLIGHTER_TYPE],
     "No CSS grid highlighter exists in the highlighters overlay.");
   ok(!highlighters.gridHighlighterShown, "No CSS grid highlighter is shown.");

--- a/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-removed.js
+++ b/devtools/client/inspector/grids/test/browser_grids_grid-list-on-mutation-element-removed.js
@@ -53,11 +53,11 @@ add_task(function* () {
   testActor.eval(`
     content.document.getElementById("grid").remove();
   `);
   yield onHighlighterHidden;
   yield onCheckboxChange;
 
   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.");
 });

--- a/devtools/client/inspector/inspector.xhtml
+++ b/devtools/client/inspector/inspector.xhtml
@@ -125,17 +125,17 @@
           <label id="browser-style-checkbox-label" for="browser-style-checkbox"
                  data-localization="content=inspector.browserStyles.label"></label>
         </div>
 
         <div id="computed-container">
           <div id="computed-container-focusable" tabindex="-1">
             <div id="boxmodel-wrapper"></div>
             <div id="computed-property-container" class="theme-separator 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>
 
       <div id="sidebar-panel-animationinspector" class="theme-sidebar inspector-tabpanel">
         <iframe class="devtools-inspector-tab-frame"></iframe>
       </div>
     </div>

--- a/devtools/client/inspector/rules/rules.js
+++ b/devtools/client/inspector/rules/rules.js
@@ -909,16 +909,17 @@ CssRuleView.prototype = {
    */
   _showEmpty: function () {
     if (this.styleDocument.getElementById("ruleview-no-results")) {
       return;
     }
 
     createChild(this.element, "div", {
       id: "ruleview-no-results",
+      class: "devtools-sidepanel-no-result",
       textContent: l10n("rule.empty")
     });
   },
 
   /**
    * Clear the rules.
    */
   _clearRules: function () {

--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -152,18 +152,16 @@ body {
 
 [empty] #players {
   display: none;
 }
 
 /* The error message, shown when an invalid/unanimated element is selected */
 
 #error-message {
-  padding-top: 10%;
-  text-align: center;
   flex: 1;
   overflow: auto;
 
   /* The error message is hidden by default */
   display: none;
 }
 
 [empty] #error-message {

--- a/devtools/client/themes/common.css
+++ b/devtools/client/themes/common.css
@@ -1,13 +1,12 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * 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");
 
 :root {
   font: message-box;
 }
 
 :root[platform="mac"] {
@@ -682,8 +681,18 @@ checkbox:-moz-focusring {
 
   border-inline-start: 1px solid var(--theme-splitter-color);
 
   background: var(--theme-tab-toolbar-background);
   background-image: url("chrome://devtools/skin/images/dropmarker.svg");
   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;
+}

--- a/devtools/client/themes/inspector.css
+++ b/devtools/client/themes/inspector.css
@@ -183,34 +183,24 @@ window {
   right: 0;
 }
 
 /* Override `-moz-user-focus:ignore;` from toolkit/content/minimal-xul.css */
 .inspector-tabpanel > * {
   -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 {
   border: 0;
 }
 
 #markup-box {
   width: 100%;
   flex: 1;
   min-height: 0;
 }
 
 #markup-box > iframe {
   height: 100%;
   width: 100%;
 }
-

--- a/devtools/client/themes/layout.css
+++ b/devtools/client/themes/layout.css
@@ -169,26 +169,16 @@
 .grid-outline-text-icon {
   background: url("chrome://devtools/skin/images/sad-face.svg");
   margin-inline-end: 5px;
   width: 16px;
   height: 16px;
 }
 
 /**
- * Container when no grids are present
- */
-
-.layout-no-grids {
-  font-style: italic;
-  text-align: center;
-  padding: 0.5em;
-}
-
-/**
  * Grid Item
  */
 
 .grid-color-swatch {
   width: 12px;
   height: 12px;
   margin-left: 5px;
   border: 1px solid var(--theme-highlight-gray);