Diagnostics: Add optional info icon and tooltip to data points

Screenshots: Icon - http://shortn/_hG1JGQd12t Tooltip - http://shortn/_tJkYTmOMQG Bug: 1125150 Test: browser_tests --gtest_filter=DiagnosticsApp* Change-Id: I5f73cc236774f043bbe5cf7f37735b3ecf9adef2 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2542846 Commit-Queue: Michael Checo <michaelcheco@google.com> Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org> Cr-Commit-Position: refs/heads/master@{#830390}
marcosholgado · Nov 24, 2020 · 9143523 · 9143523
1 parent 068a70b
commit 9143523
Show file tree

Hide file tree

Showing 15 changed files with 99 additions and 12 deletions.
diff --git a/chrome/test/data/webui/chromeos/diagnostics/BUILD.gn b/chrome/test/data/webui/chromeos/diagnostics/BUILD.gn
@@ -42,6 +42,7 @@ js_library("battery_status_card_test") {
     "//chromeos/components/diagnostics_ui/resources:battery_status_card",
     "//chromeos/components/diagnostics_ui/resources:diagnostics_types",
     "//chromeos/components/diagnostics_ui/resources:fake_data",
+    "//ui/webui/resources/js:load_time_data.m",
   ]
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }
@@ -53,6 +54,7 @@ js_library("cpu_card_test") {
     "//chromeos/components/diagnostics_ui/resources:cpu_card",
     "//chromeos/components/diagnostics_ui/resources:diagnostics_types",
     "//chromeos/components/diagnostics_ui/resources:routine_section",
+    "//ui/webui/resources/js:load_time_data.m",
   ]
   externs_list = [ "$externs_path/mocha-2.5.js" ]
 }

diff --git a/chrome/test/data/webui/chromeos/diagnostics/battery_status_card_test.js b/chrome/test/data/webui/chromeos/diagnostics/battery_status_card_test.js
@@ -9,6 +9,7 @@ import {fakeBatteryChargeStatus, fakeBatteryHealth, fakeBatteryInfo} from 'chrom
 import {FakeSystemDataProvider} from 'chrome://diagnostics/fake_system_data_provider.js';
 import {getSystemDataProvider, setSystemDataProviderForTesting} from 'chrome://diagnostics/mojo_interface_provider.js';
 import {mojoString16ToString} from 'chrome://diagnostics/mojo_utils.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 import {flushTasks, isChildVisible} from '../../test_util.m.js';
@@ -102,14 +103,22 @@ export function batteryStatusCardTestSuite() {
           dx_utils.assertTextContains(
               dataPoints[0].value,
               `${fakeBatteryHealth[0].batteryWearPercentage}`);
+          dx_utils.assertTextContains(
+              dataPoints[0].tooltipText,
+              loadTimeData.getString('batteryHealthTooltipText'));
           assertEquals(fakeBatteryHealth[0].cycleCount, dataPoints[1].value);
+          dx_utils.assertTextContains(
+              dataPoints[1].tooltipText,
+              loadTimeData.getString('cycleCountTooltipText'));
           dx_utils.assertTextContains(
               dataPoints[2].value,
               `${fakeBatteryChargeStatus[0].currentNowMilliamps}`);
+          dx_utils.assertTextContains(
+              dataPoints[2].tooltipText,
+              loadTimeData.getString('currentNowTooltipText'));
           dx_utils.assertElementContainsText(
               batteryStatusElement.$$('#batteryStatusChipInfo'),
               `${fakeBatteryHealth[0].chargeFullDesignMilliampHours}`);
-
           const barChart =
               dx_utils.getPercentBarChartElement(batteryStatusElement);
           assertEquals(

diff --git a/chrome/test/data/webui/chromeos/diagnostics/cpu_card_test.js b/chrome/test/data/webui/chromeos/diagnostics/cpu_card_test.js
@@ -8,6 +8,7 @@ import {CpuUsage, RoutineName, SystemDataProviderInterface, SystemInfo} from 'ch
 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';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
 
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
 import {flushTasks, isChildVisible} from '../../test_util.m.js';
@@ -97,6 +98,9 @@ export function cpuCardTestSuite() {
           `${
               fakeCpuUsage[0].percentUsageUser +
               fakeCpuUsage[0].percentUsageSystem}`);
+      dx_utils.assertTextContains(
+          dataPoints[0].tooltipText,
+          loadTimeData.getStringF('cpuUsageTooltipText', 4));
       dx_utils.assertTextContains(
           dataPoints[1].value, `${fakeCpuUsage[0].averageCpuTempCelsius}`);
       // TODO(michaelcheco): Replace with value for CPU speed.

diff --git a/chrome/test/data/webui/chromeos/diagnostics/data_point_test.js b/chrome/test/data/webui/chromeos/diagnostics/data_point_test.js
@@ -3,9 +3,10 @@
 // found in the LICENSE file.
 
 import 'chrome://diagnostics/data_point.js';
-
 import {assertEquals, assertFalse, assertTrue} from '../../chai_assert.js';
-import {flushTasks} from '../../test_util.m.js';
+import {flushTasks, isVisible} from '../../test_util.m.js';
+
+import * as dx_utils from './diagnostics_test_utils.js';
 
 export function dataPointTestSuite() {
   /** @type {?DataPointElement} */
@@ -25,8 +26,9 @@ export function dataPointTestSuite() {
   /**
    * @param {string} header
    * @param {string} value
+   * @param {string=} tooltipText
    */
-  function initializeDataPoint(header, value) {
+  function initializeDataPoint(header, value, tooltipText = '') {
     assertFalse(!!dataPointElement);
 
     // Add the data point to the DOM.
@@ -35,17 +37,34 @@ export function dataPointTestSuite() {
     assertTrue(!!dataPointElement);
     dataPointElement.header = header;
     dataPointElement.value = value;
+    dataPointElement.tooltipText = tooltipText;
     document.body.appendChild(dataPointElement);
 
     return flushTasks();
   }
 
   test('InitializeDataPoint', () => {
+    const header = 'Test header';
+    const value = 'Test value';
+    const tooltipText = 'Test tooltip';
+    return initializeDataPoint(header, value, tooltipText).then(() => {
+      dx_utils.assertElementContainsText(
+          dataPointElement.$$('.header > span'), header);
+      dx_utils.assertElementContainsText(dataPointElement.$$('.value'), value);
+      assertTrue(isVisible(
+          /**@type {!HTMLElement} */ (dataPointElement.$$('#infoIcon'))));
+      dx_utils.assertElementContainsText(
+          dataPointElement.$$('paper-tooltip'), tooltipText);
+    });
+  });
+
+  test('InitializeDataPointWithoutTooltip', () => {
     const header = 'Test header';
     const value = 'Test value';
     return initializeDataPoint(header, value).then(() => {
-      assertEquals(header, dataPointElement.$$('.header').textContent.trim());
-      assertEquals(value, dataPointElement.$$('.value').textContent.trim());
+      // Icon should be hidden when tooltip text is not provided.
+      assertFalse(isVisible(
+          /**@type {!HTMLElement} */ (dataPointElement.$$('#infoIcon'))));
     });
   });
 }
diff --git a/chromeos/chromeos_strings.grd b/chromeos/chromeos_strings.grd
@@ -669,6 +669,18 @@ Try tapping the mic to ask me anything.
       <message name="IDS_DIAGNOSTICS_DEVICE_INFO_TEXT" desc="The text that displays the device's name and milestone version." translateable="true">
         (<ph name="BOARD_NAME">$1<ex>Atlas</ex></ph>, version <ph name="MILESTONE_VERSION">$2<ex>88</ex></ph>)
       </message>
+      <message name="IDS_DIAGNOSTICS_BATTERY_HEALTH_TOOLTIP_TEXT" desc="The tooltip that states that battery capacity declines with usage." translateable="true">
+        Batteries capacity declines with usage
+      </message>
+      <message name="IDS_DIAGNOSTICS_CYCLE_COUNT_TOOLTIP_TEXT" desc="The tooltip that states that a battery is considered consumed once it reaches its cycle count limit." translateable="true">
+        The battery is considered consumed once it reaches the limit
+      </message>
+      <message name="IDS_DIAGNOSTICS_CURRENT_NOW_TOOLTIP_TEXT" desc="The tooltip that states the current rate at which a user's device is charging or discharging." translateable="true">
+        The rate at which the device is currently charging or discharging
+      </message>
+      <message name="IDS_DIAGNOSTICS_CPU_USAGE_TOOLTIP_TEXT" desc="The tooltip for CPU usage." translateable="true">
+        This measures the CPU usage, and is an aggregation of all cores
+      </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.">

diff --git a/chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_BATTERY_HEALTH_TOOLTIP_TEXT.png.sha1 b/chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_BATTERY_HEALTH_TOOLTIP_TEXT.png.sha1
@@ -0,0 +1 @@
+5bf8d3ccc96e6aa72e5f778900e1e6614fd65f89
diff --git a/chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_CPU_USAGE_TOOLTIP_TEXT.png.sha1 b/chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_CPU_USAGE_TOOLTIP_TEXT.png.sha1
@@ -0,0 +1 @@
+69bd525a2d92a2aaa05b509a16c986e6af3fec5e
diff --git a/chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_CURRENT_NOW_TOOLTIP_TEXT.png.sha1 b/chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_CURRENT_NOW_TOOLTIP_TEXT.png.sha1
@@ -0,0 +1 @@
+97385214bc5a2626fb840781f965e47b4753368f
diff --git a/chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_CYCLE_COUNT_TOOLTIP_TEXT.png.sha1 b/chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_CYCLE_COUNT_TOOLTIP_TEXT.png.sha1
@@ -0,0 +1 @@
+d422ae5dda85b755dad9345a132e29b0e1f7f66b
diff --git a/chromeos/components/diagnostics_ui/diagnostics_ui.cc b/chromeos/components/diagnostics_ui/diagnostics_ui.cc
@@ -37,6 +37,7 @@ void AddDiagnosticsStrings(content::WebUIDataSource* html_source) {
       {"batteryChipText", IDS_DIAGNOSTICS_BATTERY_CHIP_TEXT},
       {"batteryHealthLabel", IDS_DIAGNOSTICS_BATTERY_HEALTH_LABEL},
       {"batteryHealthText", IDS_DIAGNOSTICS_BATTERY_HEALTH_TEXT},
+      {"batteryHealthTooltipText", IDS_DIAGNOSTICS_BATTERY_HEALTH_TOOLTIP_TEXT},
       {"batteryTitle", IDS_DIAGNOSTICS_BATTERY_TITLE},
       {"chargeFullDesign", IDS_DIAGNOSTICS_DESIGNED_FULL_CHARGE_LABEL},
       {"chargeFullNow", IDS_DIAGNOSTICS_NOW_FULL_CHARGE_LABEL},
@@ -48,11 +49,14 @@ void AddDiagnosticsStrings(content::WebUIDataSource* html_source) {
       {"cpuTitle", IDS_DIAGNOSTICS_CPU_TITLE},
       {"cpuUsageLabel", IDS_DIAGNOSTICS_CPU_USAGE_LABEL},
       {"cpuUsageText", IDS_DIAGNOSTICS_CPU_USAGE_TEXT},
+      {"cpuUsageTooltipText", IDS_DIAGNOSTICS_CPU_USAGE_TOOLTIP_TEXT},
       {"cpuUsageSystem", IDS_DIAGNOSTICS_CPU_USAGE_SYSTEM_LABEL},
       {"cpuUsageUser", IDS_DIAGNOSTICS_CPU_USAGE_USER_LABEL},
       {"currentNowLabel", IDS_DIAGNOSTICS_CURRENT_NOW_LABEL},
       {"currentNowText", IDS_DIAGNOSTICS_CURRENT_NOW_TEXT},
+      {"currentNowTooltipText", IDS_DIAGNOSTICS_CURRENT_NOW_TOOLTIP_TEXT},
       {"cycleCount", IDS_DIAGNOSTICS_CYCLE_COUNT_LABEL},
+      {"cycleCountTooltipText", IDS_DIAGNOSTICS_CYCLE_COUNT_TOOLTIP_TEXT},
       {"deviceInfo", IDS_DIAGNOSTICS_DEVICE_INFO_TEXT},
       {"diagnosticsTitle", IDS_DIAGNOSTICS_TITLE},
       {"learnMore", IDS_DIANOSTICS_LEARN_MORE_LABEL},

diff --git a/chromeos/components/diagnostics_ui/resources/battery_status_card.html b/chromeos/components/diagnostics_ui/resources/battery_status_card.html
@@ -13,15 +13,18 @@
   </percent-bar-chart>
   <data-point slot="body" id="batteryHealth"
     header="[[i18n('batteryHealthLabel')]]"
-    value="[[getBatteryHealth_(batteryHealth_.batteryWearPercentage)]]">
+    value="[[getBatteryHealth_(batteryHealth_.batteryWearPercentage)]]"
+    tooltip-text="[[i18n('batteryHealthTooltipText')]]">
   </data-point>
   <div slot="body" class="divider"></div>
   <data-point slot="body" id="cycleCount" header="[[i18n('cycleCount')]]"
-    value="[[batteryHealth_.cycleCount]]">
+    value="[[batteryHealth_.cycleCount]]"
+    tooltip-text="[[i18n('cycleCountTooltipText')]]">
   </data-point>
   <div slot="body" class="divider"></div>
   <data-point slot="body" id="currentNow" header="[[i18n('currentNowLabel')]]"
-    value="[[getCurrentNow_(batteryChargeStatus_.currentNowMilliamps)]]">
+    value="[[getCurrentNow_(batteryChargeStatus_.currentNowMilliamps)]]"
+    tooltip-text="[[i18n('currentNowTooltipText')]]">
   </data-point>
 
   <routine-section slot="routines" routines="[[routines_]]"

diff --git a/chromeos/components/diagnostics_ui/resources/cpu_card.html b/chromeos/components/diagnostics_ui/resources/cpu_card.html
@@ -13,7 +13,8 @@
   <data-point slot="body" id="cpuUsageUser"
     header="[[i18n('cpuUsageLabel')]]"
     value="[[getCurrentlyUsing_(cpuUsage_.percentUsageSystem,
-        cpuUsage_.percentUsageUser)]]">
+        cpuUsage_.percentUsageUser)]]"
+    tooltip-text="[[getCpuUsageTooltipText_()]]">
   </data-point>
   <div slot="body" class="divider"></div>
   <data-point slot="body" id="cpuTemp" header="[[i18n('cpuTempLabel')]]"

diff --git a/chromeos/components/diagnostics_ui/resources/cpu_card.js b/chromeos/components/diagnostics_ui/resources/cpu_card.js
@@ -135,4 +135,10 @@ Polymer({
     return loadTimeData.getStringF(
         'cpuTempText', this.cpuUsage_.averageCpuTempCelsius);
   },
+
+  /** @protected */
+  getCpuUsageTooltipText_() {
+    // TODO(michaelcheco): Update when number of cores is added to the api.
+    return loadTimeData.getString('cpuUsageTooltipText');
+  },
 });
diff --git a/chromeos/components/diagnostics_ui/resources/data_point.html b/chromeos/components/diagnostics_ui/resources/data_point.html
@@ -11,11 +11,24 @@
     color: var(--diagnostics-overview-text-color);
   }
 
+  #infoIcon {
+    fill:  var(--google-grey-600);
+    height: 18px;
+    left: 4px;
+    width: 18px;
+  }
+
   .value {
     @apply --diagnostics-data-point-subtitle-font;
   }
 </style>
 <div class="data-point">
-  <div class="header">[[header]]</div>
+  <div class="header">
+    <span>[[header]]</span>
+    <iron-icon slot="icon" icon="cr:info-outline" id="infoIcon"
+      hidden$="[[!tooltipText]]">
+    </iron-icon>
+    <paper-tooltip for="infoIcon">[[tooltipText]]</paper-tooltip>
+  </div>
   <div class="value">[[value]]</div>
 </div>
diff --git a/chromeos/components/diagnostics_ui/resources/data_point.js b/chromeos/components/diagnostics_ui/resources/data_point.js
@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import 'chrome://resources/cr_elements/icons.m.js';
+import 'chrome://resources/polymer/v3_0/iron-icon/iron-icon.js';
+import 'chrome://resources/polymer/v3_0/paper-tooltip/paper-tooltip.js';
 import './diagnostics_fonts_css.js';
 import './diagnostics_shared_css.js';
 
@@ -10,7 +13,8 @@ import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bun
 /**
  * @fileoverview
  * 'data-point' shows a single piece of information related to a component. It
- *  consists of a header and value.
+ *  consists of a header, value, and tooltip that provides context about the
+ *  item.
  */
 Polymer({
   is: 'data-point',
@@ -28,5 +32,11 @@ Polymer({
       type: String,
       value: '',
     },
+
+    /** @type {string} */
+    tooltipText: {
+      type: String,
+      value: '',
+    },
   },
 });