foo.diff

diff --git a/src/devtools/client/inspector/computed/components/ComputedApp.tsx b/src/devtools/client/inspector/computed/components/ComputedApp.tsx
index a5675fc0..f445dfe4 100644
--- a/src/devtools/client/inspector/computed/components/ComputedApp.tsx
+++ b/src/devtools/client/inspector/computed/components/ComputedApp.tsx
@@ -27,17 +27,7 @@ function isHidden(property: ComputedPropertyState, search: string, showBrowserSt
   return false;
 }
 
-function ComputedApp(props: PropsFromRedux) {
-  const {
-    properties,
-    expandedProperties,
-    search,
-    setComputedPropertySearch,
-    showBrowserStyles,
-    setShowBrowserStyles,
-    setComputedPropertyExpanded,
-  } = props;
-
+function ComputedToolbar({ setComputedPropertySearch, setShowBrowserStyles }) {
   const searchFieldRef = useRef<HTMLInputElement>(null);
 
   const setSearch = debounce(() => {
@@ -57,14 +47,45 @@ function ComputedApp(props: PropsFromRedux) {
     setShowBrowserStyles(event.currentTarget.checked);
   }
 
+  return (
+    <div id="computed-toolbar" className="devtools-toolbar devtools-input-toolbar">
+      <div className="devtools-searchbox">
+        <input
+          id="computed-searchbox"
+          className="devtools-filterinput"
+          type="search"
+          placeholder="Filter Styles"
+          ref={searchFieldRef}
+          onInput={setSearch}
+        />
+        <button
+          id="computed-searchinput-clear"
+          className="devtools-searchinput-clear"
+          onClick={clearSearch}
+        ></button>
+      </div>
+      <div className="devtools-separator"></div>
+      <input
+        id="browser-style-checkbox"
+        type="checkbox"
+        className="includebrowserstyles"
+        onInput={setShowAll}
+      />
+      <label id="browser-style-checkbox-label" htmlFor="browser-style-checkbox">
+        Browser Styles
+      </label>
+    </div>
+  );
+}
+
+function ComputedProperties({ properties, expandedProperties, setComputedPropertyExpanded }) {
   let dark = false;
-  let allPropertiesHidden = true;
   const renderedProperties = properties.map((property, index) => {
     const hidden = isHidden(property, search, showBrowserStyles);
     if (!hidden) {
       dark = !dark;
-      allPropertiesHidden = false;
     }
+
     const isExpanded = expandedProperties.indexOf(property.name) >= 0;
     const toggleExpanded = () => setComputedPropertyExpanded(property.name, !isExpanded);
 
@@ -81,53 +102,51 @@ function ComputedApp(props: PropsFromRedux) {
   });
 
   return (
-    <div id="sidebar-panel-computedview" className="theme-sidebar inspector-tabpanel">
-      <div id="computed-toolbar" className="devtools-toolbar devtools-input-toolbar">
-        <div className="devtools-searchbox">
-          <input
-            id="computed-searchbox"
-            className="devtools-filterinput"
-            type="search"
-            placeholder="Filter Styles"
-            ref={searchFieldRef}
-            onInput={setSearch}
-          />
-          <button
-            id="computed-searchinput-clear"
-            className="devtools-searchinput-clear"
-            onClick={clearSearch}
-          ></button>
-        </div>
-        <div className="devtools-separator"></div>
-        <input
-          id="browser-style-checkbox"
-          type="checkbox"
-          className="includebrowserstyles"
-          onInput={setShowAll}
-        />
-        <label id="browser-style-checkbox-label" htmlFor="browser-style-checkbox">
-          Browser Styles
-        </label>
-      </div>
+    <div id="computed-property-container" className="devtools-monospace" tabIndex={0} dir="ltr">
+      {renderedProperties}
+    </div>
+  );
+}
 
+function ComputedApp(props: PropsFromRedux) {
+  const {
+    properties,
+    expandedProperties,
+    search,
+    setShowBrowserStyles,
+    setComputedPropertyExpanded,
+    setComputedPropertySearch,
+    showBrowserStyles,
+  } = props;
+
+  let allPropertiesHidden = properties.every(property =>
+    isHidden(property, search, showBrowserStyles)
+  );
+
+  return (
+    <div id="sidebar-panel-computedview" className="theme-sidebar inspector-tabpanel">
+      <ComputedToolbar
+        setComputedPropertySearch={setComputedPropertySearch}
+        setShowBrowserStyles={setShowBrowserStyles}
+      />
       <div id="computed-container">
         <div id="computed-container-focusable" tabIndex={-1}>
-          <div
-            id="computed-property-container"
-            className="devtools-monospace"
-            tabIndex={0}
-            dir="ltr"
-          >
-            {renderedProperties}
-          </div>
-          <div
-            id="computed-no-results"
-            className="devtools-sidepanel-no-result"
-            hidden={!allPropertiesHidden}
-            data-localization="content=inspector.noProperties"
-          >
-            No CSS properties found.
-          </div>
+          {allPropertiesHidden ? (
+            <div
+              id="computed-no-results"
+              className="devtools-sidepanel-no-result"
+              hidden={!allPropertiesHidden}
+              data-localization="content=inspector.noProperties"
+            >
+              No CSS properties found.
+            </div>
+          ) : (
+            <ComputedProperties
+              expandedProperties={expandedProperties}
+              properties={properties}
+              setComputedPropertyExpanded={setComputedPropertyExpanded}
+            />
+          )}
         </div>
       </div>
     </div>
@@ -140,11 +159,13 @@ const mapStateToProps = (state: UIState) => ({
   search: state.computed.search,
   showBrowserStyles: state.computed.showBrowserStyles,
 });
+
 const mapDispatchToProps = {
   setComputedPropertySearch,
   setShowBrowserStyles,
   setComputedPropertyExpanded,
 };
+
 const connector = connect(mapStateToProps, mapDispatchToProps);
 type PropsFromRedux = ConnectedProps<typeof connector>;