Diagnostics: Conditionally show data points section

Bug: 1125150
Test: browser_tests --gtest_Filter=DiagnosticsApp*
Change-Id: I160f9f3d342f603f82fb3f128c5f070fc67dfd48
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2538014
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#828737}

chrome/test/data/webui/chromeos/diagnostics/battery_status_card_test.js

@@ -11,7 +11,7 @@ import {getSystemDataProvider, setSystemDataProviderForTesting} from 'chrome://d
 import {mojoString16ToString} from 'chrome://diagnostics/mojo_utils.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
-import {flushTasks} from '../../test_util.m.js';
+import {flushTasks, isChildVisible} from '../../test_util.m.js';
 
 import * as dx_utils from './diagnostics_test_utils.js';
 
@@ -88,6 +88,11 @@ export function batteryStatusCardTestSuite() {
           assertEquals(
               fakeBatteryChargeStatus[0].chargeNowMilliampHours,
               barChart.value);
+
+          // Verify that the data points container is visible.
+          const diagnosticsCard =
+              dx_utils.getDiagnosticsCard(batteryStatusElement);
+          assertTrue(isChildVisible(diagnosticsCard, '.data-points'));
         });
   });
 }

chrome/test/data/webui/chromeos/diagnostics/cpu_card_test.js

@@ -10,7 +10,7 @@ import {FakeSystemDataProvider} from 'chrome://diagnostics/fake_system_data_prov
 import {getSystemDataProvider, setSystemDataProviderForTesting} from 'chrome://diagnostics/mojo_interface_provider.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
-import {flushTasks} from '../../test_util.m.js';
+import {flushTasks, isChildVisible} from '../../test_util.m.js';
 
 import * as dx_utils from './diagnostics_test_utils.js';
 
@@ -114,6 +114,10 @@ export function cpuCardTestSuite() {
       assertTrue(!!getRoutineSection());
       assertTrue(!!getRunTestsButton());
       assertFalse(isRunTestsButtonDisabled());
+
+      // Verify that the data points container is visible.
+      const diagnosticsCard = dx_utils.getDiagnosticsCard(cpuElement);
+      assertTrue(isChildVisible(diagnosticsCard, '.data-points'));
     });
   });
 }

chrome/test/data/webui/chromeos/diagnostics/diagnostics_test_utils.js

@@ -114,3 +114,13 @@ export function assertElementContainsText(element, text) {
 export function assertTextContains(text, subStr) {
   assertTrue(text.trim().indexOf(subStr) !== -1);
 }
+
+/**
+ * Helper function for getting the diagnostics-card from an element.
+ * @param {?Element} element
+ * @return {!DiagnosticsCardElement}
+ */
+export function getDiagnosticsCard(element) {
+  return /** @type {!DiagnosticsCardElement} */ (
+      element.shadowRoot.querySelector('diagnostics-card'));
+}

chrome/test/data/webui/chromeos/diagnostics/memory_card_test.js

@@ -10,7 +10,7 @@ import {FakeSystemDataProvider} from 'chrome://diagnostics/fake_system_data_prov
 import {setSystemDataProviderForTesting} from 'chrome://diagnostics/mojo_interface_provider.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
-import {flushTasks} from '../../test_util.m.js';
+import {flushTasks, isChildVisible} from '../../test_util.m.js';
 
 import * as dx_utils from './diagnostics_test_utils.js';
 
@@ -98,6 +98,10 @@ export function memoryCardTestSuite() {
       assertTrue(!!getRoutineSection());
       assertTrue(!!getRunTestsButton());
       assertFalse(isRunTestsButtonDisabled());
+
+      // Verify that the data points container is not visible.
+      const diagnosticsCard = dx_utils.getDiagnosticsCard(memoryElement);
+      assertFalse(isChildVisible(diagnosticsCard, '.data-points'));
     });
   });
 }

chromeos/components/diagnostics_ui/resources/diagnostics_card.html

@@ -6,14 +6,6 @@
     padding: 4px 8px;
   }
 
-  .body-container {
-    column-gap: 10px;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, 100px);
-    justify-content: end;
-    row-gap: 5px;
-  }
-
   .card-columns {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -39,6 +31,14 @@
     margin: 10px 0;
   }
 
+  .data-points {
+    column-gap: 10px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 100px);
+    justify-content: end;
+    row-gap: 5px;
+  }
+
   .routine-container {
     @apply --diagnostics-default-font;
   }
@@ -59,7 +59,7 @@
       <div>
         <slot name="left-panel"></slot>
       </div>
-      <div id="body" class="body-container">
+      <div id="body" class="data-points" hidden$="[[hideDataPoints]]">
         <slot name="body"></slot>
       </div>
     </div>

chromeos/components/diagnostics_ui/resources/diagnostics_card.js

@@ -17,4 +17,12 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
+  properties: {
+    /** @type {boolean} */
+    hideDataPoints: {
+      type: Boolean,
+      value: false,
+      reflectToAttribute: true,
+    },
+  },
 });

chromeos/components/diagnostics_ui/resources/memory_card.html

 <style include="diagnostics-shared">
 </style>
 
-<diagnostics-card>
+<diagnostics-card hide-data-points="true">
   <div id="cardTitle" slot="title">[[i18n('memoryTitle')]]</div>
   <percent-bar-chart slot="left-panel" header="[[i18n('usedMemory')]]"
     value="[[getTotalUsedMemory_(memoryUsage_)]]"