Diagnostics: Move header outside card border and add "chip" slot

Screenshot: http://shortn/_5A4TAyrSyR

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

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

@@ -89,6 +89,9 @@ export function batteryStatusCardTestSuite() {
               fakeBatteryChargeStatus[0].powerAdapterStatus,
               dataPoints[5].value);
           assertEquals(fakeBatteryHealth[0].cycleCount, dataPoints[6].value);
+          dx_utils.assertElementContainsText(
+              batteryStatusElement.$$('#batteryStatusChipInfo'),
+              fakeBatteryHealth[0].chargeFullDesignMilliampHours);
 
           const barChart =
               dx_utils.getPercentBarChartElement(batteryStatusElement);

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

@@ -4,8 +4,8 @@
 
 import 'chrome://diagnostics/cpu_card.js';
 
-import {CpuUsage, RoutineName, SystemDataProviderInterface} from 'chrome://diagnostics/diagnostics_types.js';
-import {fakeCpuUsage} from 'chrome://diagnostics/fake_data.js';
+import {CpuUsage, RoutineName, SystemDataProviderInterface, SystemInfo} from 'chrome://diagnostics/diagnostics_types.js';
+import {fakeCpuUsage, fakeSystemInfo} from 'chrome://diagnostics/fake_data.js';
 import {FakeSystemDataProvider} from 'chrome://diagnostics/fake_system_data_provider.js';
 import {getSystemDataProvider, setSystemDataProviderForTesting} from 'chrome://diagnostics/mojo_interface_provider.js';
 
@@ -40,13 +40,15 @@ export function cpuCardTestSuite() {
 
   /**
    * @param {!Array<!CpuUsage>} cpuUsage
+   * @param {!SystemInfo} systemInfo
    * @return {!Promise}
    */
-  function initializeCpuCard(cpuUsage) {
+  function initializeCpuCard(cpuUsage, systemInfo) {
     assertFalse(!!cpuElement);
 
     // Initialize the fake data.
     provider.setFakeCpuUsage(cpuUsage);
+    provider.setFakeSystemInfo(systemInfo);
 
     // Add the CPU card to the DOM.
     cpuElement =
@@ -88,12 +90,16 @@ export function cpuCardTestSuite() {
   }
 
   test('CpuCardPopulated', () => {
-    return initializeCpuCard(fakeCpuUsage).then(() => {
+    return initializeCpuCard(fakeCpuUsage, fakeSystemInfo).then(() => {
       const dataPoints = dx_utils.getDataPointElements(cpuElement);
       const currentlyUsingValue =
           fakeCpuUsage[0].percentUsageUser + fakeCpuUsage[0].percentUsageSystem;
       assertEquals(currentlyUsingValue, dataPoints[0].value);
       assertEquals(fakeCpuUsage[0].averageCpuTempCelsius, dataPoints[1].value);
+      dx_utils.assertElementContainsText(
+          cpuElement.$$('#cpuChipInfo'), `${fakeSystemInfo.cpuModelName}`);
+      dx_utils.assertElementContainsText(
+          cpuElement.$$('#cpuChipInfo'), `${fakeSystemInfo.cpuThreadsCount}`);
 
       const cpuChart = dx_utils.getRealtimeCpuChartElement(cpuElement);
       assertEquals(fakeCpuUsage[0].percentUsageUser, cpuChart.user);

chromeos/chromeos_strings.grd

@@ -639,6 +639,12 @@ Try tapping the mic to ask me anything.
       <message name="IDS_DIAGNOSTICS_USED_MEMORY_LABEL" desc="The label for the progress bar that displays the amount of used memory on a users' device." translateable="false">
         Used memory
       </message>
+      <message name="IDS_DIAGNOSTICS_BATTERY_CHIP_TEXT" desc="The text for a battery's full charge capacity represented in milliamp hours." translateable="true">
+        <ph name="CHARGE_VALUE">$1<ex>6000</ex></ph>mAh Battery
+      </message>
+      <message name="IDS_DIAGNOSTICS_CPU_CHIP_TEXT" desc="The text that displays the CPU name and thread count." translateable="true">
+        <ph name="CPU_NAME">$1<ex>Intel(R) Celeron(R) N4020 CPU @ 1,10Ghz</ex></ph> (<ph name="THREAD_COUNT">$2<ex>8</ex></ph> threads)
+      </message>
 
       <!-- Quick Answers -->
       <message name="IDS_QUICK_ANSWERS_DEFINITION_TITLE_TEXT" desc="The title text format string used for Quick Answers definition result card. The first placeholder contains the source query text and the second placeholder contains the phonetics.">

chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_BATTERY_CHIP_TEXT.png.sha1

+1bdc445de506e3c5622acc9b2736edbc6861f678
\ No newline at end of file

chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_CPU_CHIP_TEXT.png.sha1

+afee0b7bbe90fb49e9eeb1ae88ec52af75729fbc
\ No newline at end of file

chromeos/components/diagnostics_ui/diagnostics_ui.cc

@@ -33,10 +33,12 @@ constexpr char kGeneratedPath[] =
 void AddDiagnosticsStrings(content::WebUIDataSource* html_source) {
   static constexpr webui::LocalizedString kLocalizedStrings[] = {
       {"adapterStatus", IDS_DIAGNOSTICS_POWER_LABEL},
+      {"batteryChipText", IDS_DIAGNOSTICS_BATTERY_CHIP_TEXT},
       {"batteryTitle", IDS_DIAGNOSTICS_BATTERY_TITLE},
       {"chargeFullDesign", IDS_DIAGNOSTICS_DESIGNED_FULL_CHARGE_LABEL},
       {"chargeFullNow", IDS_DIAGNOSTICS_NOW_FULL_CHARGE_LABEL},
       {"chargeNow", IDS_DIAGNOSTICS_CHARGE_NOW_LABEL},
+      {"cpuChipText", IDS_DIAGNOSTICS_CPU_CHIP_TEXT},
       {"cpuTemp", IDS_DIAGNOSTICS_CPU_TEMPERATURE_LABEL},
       {"cpuTitle", IDS_DIAGNOSTICS_CPU_TITLE},
       {"cpuUsage", IDS_DIAGNOSTICS_CPU_USAGE_LABEL},

chromeos/components/diagnostics_ui/resources/BUILD.gn

@@ -42,6 +42,7 @@ js_library("battery_status_card") {
     ":mojo_utils",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
+    "//ui/webui/resources/js:load_time_data.m",
   ]
 }
 
@@ -51,6 +52,7 @@ js_library("cpu_card") {
     ":mojo_interface_provider",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/js:i18n_behavior.m",
+    "//ui/webui/resources/js:load_time_data.m",
   ]
 }
 

chromeos/components/diagnostics_ui/resources/battery_status_card.html

@@ -3,6 +3,9 @@
 
 <diagnostics-card>
   <div id="cardTitle" slot="title">[[i18n('batteryTitle')]]</div>
+  <div id="batteryStatusChipInfo" slot="chip">
+    [[getDesignedFullCharge_(batteryHealth_.chargeFullDesignMilliampHours)]]
+  </div>
   <percent-bar-chart slot="left-panel" header="[[i18n('remainingCharge')]]"
     value="[[batteryChargeStatus_.chargeNowMilliampHours]]"
     max="[[batteryHealth_.chargeFullNowMilliampHours]]">

chromeos/components/diagnostics_ui/resources/battery_status_card.js

@@ -9,6 +9,7 @@ import './percent_bar_chart.js';
 import './strings.m.js';
 
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {BatteryChargeStatus, BatteryHealth, BatteryInfo, SystemDataProviderInterface} from './diagnostics_types.js'
@@ -150,4 +151,9 @@ Polymer({
     this.batteryHealth_ = batteryHealth;
   },
 
+  /** @protected */
+  getDesignedFullCharge_() {
+    return loadTimeData.getStringF(
+        'batteryChipText', this.batteryHealth_.chargeFullDesignMilliampHours);
+  },
 });

chromeos/components/diagnostics_ui/resources/cpu_card.html

@@ -3,6 +3,7 @@
 
 <diagnostics-card>
   <div id="cardTitle" slot="title">[[i18n('cpuTitle')]]</div>
+  <div id="cpuChipInfo" slot="chip">[[cpuChipInfo_]]</div>
   <!-- TODO(michaelcheco): Add i18n string for percent number format -->
   <realtime-cpu-chart slot="left-panel" id="realtimeCpuChart"
     user="[[cpuUsage_.percentUsageUser]]"

chromeos/components/diagnostics_ui/resources/cpu_card.js

@@ -10,8 +10,9 @@ import './routine_section.js';
 import './strings.m.js';
 
 import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
-import {CpuUsage, RoutineName, SystemDataProviderInterface} from './diagnostics_types.js';
+import {CpuUsage, RoutineName, SystemDataProviderInterface, SystemInfo} from './diagnostics_types.js';
 import {getSystemDataProvider} from './mojo_interface_provider.js';
 
 /**
@@ -53,12 +54,19 @@ Polymer({
     cpuUsage_: {
       type: Object,
     },
+
+    /** @private {string} */
+    cpuChipInfo_: {
+      type: String,
+      value: '',
+    },
   },
 
   /** @override */
   created() {
     this.systemDataProvider_ = getSystemDataProvider();
     this.observeCpuUsage_();
+    this.fetchSystemInfo_();
   },
 
   /** @override */
@@ -95,4 +103,21 @@ Polymer({
   computeCurrentlyUsing_(percentUsageSystem, percentUsageUser) {
     return percentUsageSystem + percentUsageUser;
   },
+
+  /** @private */
+  fetchSystemInfo_() {
+    this.systemDataProvider_.getSystemInfo().then((result) => {
+      this.onSystemInfoReceived_(result.systemInfo);
+    });
+  },
+
+  /**
+   * @param {!SystemInfo} systemInfo
+   * @private
+   */
+  onSystemInfoReceived_(systemInfo) {
+    // TODO(michaelcheco): Update when number of cores is added to the api.
+    this.cpuChipInfo_ = loadTimeData.getStringF(
+        'cpuChipText', systemInfo.cpuModelName, systemInfo.cpuThreadsCount);
+  },
 });

chromeos/components/diagnostics_ui/resources/diagnostics_card.html

 <style include="diagnostics-shared diagnostics-fonts">
-  #card-wrapper {
-    border: 1px solid var(--diagnostics-border-color);
-    border-radius: 14px;
-    margin: 10px 0;
-    min-height: 150px;
+  ::slotted([slot=chip]) {
+    background-color: var(--google-grey-100);
+    border-radius: 16px;
+    color: var(--diagnostics-overview-text-color);
+    padding: 4px 8px;
   }
 
   .body-container {
@@ -19,6 +19,26 @@
     grid-template-columns: 1fr 1fr;
   }
 
+  .card-container {
+    display: flex;
+    flex-direction: column;
+    margin-top: 12px;
+  }
+
+  .card-header {
+    @apply --diagnostics-default-font;
+    display: flex;
+    justify-content: space-between;
+    min-height: 25px;
+  }
+
+  .card-wrapper {
+    border: 1px solid var(--diagnostics-border-color);
+    border-radius: 14px;
+    margin: 10px 0;
+    min-height: 150px;
+  }
+
   .routine-container {
     @apply --diagnostics-default-font;
   }
@@ -28,26 +48,24 @@
     padding-inline-end: 15px;
     padding-inline-start: 15px;
   }
-
-  .title-container {
-    @apply --diagnostics-default-font;
-  }
 </style>
-
-<div id="card-wrapper">
-  <div id="title" class="title-container spacing">
+<div class="card-container">
+  <div id="title" class="card-header">
     <slot name="title"></slot>
+    <slot name="chip"></slot>
   </div>
-  <div class="card-columns spacing">
-    <div>
-      <slot name="left-panel"></slot>
-    </div>
-    <div id="body" class="body-container">
-      <slot name="body"></slot>
+  <div class="card-wrapper">
+    <div class="card-columns spacing">
+      <div>
+        <slot name="left-panel"></slot>
+      </div>
+      <div id="body" class="body-container">
+        <slot name="body"></slot>
+      </div>
     </div>
-  </div>
 
-  <div id="routines" class="routine-container spacing">
-    <slot name="routines"></slot>
+    <div id="routines" class="routine-container spacing">
+      <slot name="routines"></slot>
+    </div>
   </div>
-</div>
+</div>
\ No newline at end of file