diagnostics: add throttling information

http://screen/8wHgGmLWLSoJjrS

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: If3c7f35e4594557d04c9c343c92a25d029850b1f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2643944Reviewed-by: Bailey Berro <baileyberro@chromium.org>
Commit-Queue: Joon Ahn <joonbug@chromium.org>
Cr-Commit-Position: refs/heads/master@{#846320}

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

@@ -111,6 +111,10 @@ export function cpuCardTestSuite() {
       dx_utils.assertTextContains(
           dataPoints[2].value,
           `${convertkhzToGhz(cpuElement.cpuMaxClockSpeedKhz_)}`);
+      dx_utils.assertTextContains(
+          dataPoints[2].tooltipText,
+          loadTimeData.getString('cpuThrottleTooltipText'));
+
       dx_utils.assertElementContainsText(
           cpuElement.$$('#cpuChipInfo'), `${fakeSystemInfo.cpuModelName}`);
       dx_utils.assertElementContainsText(
@@ -130,4 +134,16 @@ export function cpuCardTestSuite() {
       assertTrue(isChildVisible(diagnosticsCard, '.data-points'));
     });
   });
+
+  test('CpuCardUpdates', () => {
+    return initializeCpuCard(fakeCpuUsage, fakeSystemInfo)
+        .then(() => {
+          provider.triggerCpuUsageObserver();
+          return flushTasks();
+        })
+        .then(() => {
+          const dataPoints = dx_utils.getDataPointElements(cpuElement);
+          assertEquals(dataPoints[2].tooltipText, '');
+        });
+  });
 }

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

@@ -27,8 +27,10 @@ export function dataPointTestSuite() {
    * @param {string} header
    * @param {string} value
    * @param {string=} tooltipText
+   * @param {boolean=} warningState
    */
-  function initializeDataPoint(header, value, tooltipText = '') {
+  function initializeDataPoint(
+      header, value, tooltipText = '', warningState = false) {
     assertFalse(!!dataPointElement);
 
     // Add the data point to the DOM.
@@ -38,6 +40,7 @@ export function dataPointTestSuite() {
     dataPointElement.header = header;
     dataPointElement.value = value;
     dataPointElement.tooltipText = tooltipText;
+    dataPointElement.warningState = warningState;
     document.body.appendChild(dataPointElement);
 
     return flushTasks();
@@ -67,4 +70,13 @@ export function dataPointTestSuite() {
           /**@type {!HTMLElement} */ (dataPointElement.$$('#infoIcon'))));
     });
   });
+
+  test('InitializeDataPointWithWarningState', () => {
+    const header = 'Test header';
+    const value = 'Test value';
+    return initializeDataPoint(header, value, '', true).then(() => {
+      dx_utils.assertElementContainsText(
+          dataPointElement.$$('.text-red'), value);
+    });
+  });
 }

chromeos/chromeos_strings.grd

@@ -698,6 +698,9 @@ Try tapping the mic to ask me anything.
       <message name="IDS_DIAGNOSTICS_CPU_USAGE_TOOLTIP_TEXT" desc="The tooltip for CPU usage.">
         This is an aggregation of all cores
       </message>
+      <message name="IDS_DIAGNOSTICS_CPU_THROTTLE_TOOLTIP_TEXT" desc="The tooltip for CPU throttling.">
+        CPU speed is currently limited to preserve battery or reduce temperature
+      </message>
       <message name="IDS_DIANOSTICS_ROUTINE_NAME_TEXT" desc="The text that informs the user which test is currently running.">
         Running <ph name="TEST_NAME">$1<ex>Charging rate</ex></ph> test...
       </message>

chromeos/chromeos_strings_grd/IDS_DIAGNOSTICS_CPU_THROTTLE_TOOLTIP_TEXT.png.sha1

+6719fe59dfec86ef7dae37b260e731cfccdb72c2
\ No newline at end of file

chromeos/components/diagnostics_ui/diagnostics_ui.cc

@@ -55,6 +55,7 @@ void AddDiagnosticsStrings(content::WebUIDataSource* html_source) {
       {"cpuTempLabel", IDS_DIAGNOSTICS_CPU_TEMPERATURE_LABEL},
       {"cpuTempText", IDS_DIAGNOSTICS_CPU_TEMPERATURE_TEXT},
       {"cpuTitle", IDS_DIAGNOSTICS_CPU_TITLE},
+      {"cpuThrottleTooltipText", IDS_DIAGNOSTICS_CPU_THROTTLE_TOOLTIP_TEXT},
       {"cpuUsageLabel", IDS_DIAGNOSTICS_CPU_USAGE_LABEL},
       {"cpuUsageText", IDS_DIAGNOSTICS_CPU_USAGE_TEXT},
       {"cpuUsageTooltipText", IDS_DIAGNOSTICS_CPU_USAGE_TOOLTIP_TEXT},

chromeos/components/diagnostics_ui/resources/cpu_card.html

@@ -23,6 +23,8 @@
   <div slot="body" class="divider"></div>
   <data-point slot="body" id="cpuSpeed" class="data-point-margin-end"
     header="[[i18n('cpuSpeedLabel')]]"
+    tooltip-text="[[getCpuThrottleTooltipText_(cpuBeingThrottled_)]]"
+    warning-state="[[cpuBeingThrottled_]]"
     value="[[getCpuSpeed_(cpuUsage_.scalingCurrentFrequencyKhz)]]">
   </data-point>
   <routine-section slot="routines" routines="[[routines_]]"

chromeos/components/diagnostics_ui/resources/cpu_card.js

@@ -75,6 +75,12 @@ Polymer({
     /** @type {number} */
     cpuMaxClockSpeedKhz_: {
       type: Number,
+    },
+
+    /** @type {boolean} */
+    cpuBeingThrottled_: {
+      type: Boolean,
+      computed: 'isCpuBeingThrottled_(cpuUsage_.scalingCurrentFrequencyKhz)',
     }
   },
 
@@ -150,6 +156,19 @@ Polymer({
     return loadTimeData.getString('cpuUsageTooltipText');
   },
 
+  /** @protected */
+  getCpuThrottleTooltipText_() {
+    return this.cpuBeingThrottled_ ?
+        loadTimeData.getString('cpuThrottleTooltipText') :
+        '';
+  },
+
+  /** @protected */
+  isCpuBeingThrottled_() {
+    return this.cpuUsage_ &&
+        (this.cpuUsage_.scalingCurrentFrequencyKhz < this.cpuMaxClockSpeedKhz_);
+  },
+
   /**
    * @param {number} num
    * @return {string}

chromeos/components/diagnostics_ui/resources/data_point.html

@@ -24,6 +24,10 @@
     @apply --diagnostics-data-point-subtitle-font;
     color: var(--diagnostics-data-point-subtitle-color);
   }
+
+  .text-red {
+    color: var(--google-red-600);
+  }
 </style>
 <div class="data-point">
   <div class="header">
@@ -33,5 +37,5 @@
     </iron-icon>
     <paper-tooltip for="infoIcon">[[tooltipText]]</paper-tooltip>
   </div>
-  <div class="value">[[value]]</div>
+  <div class$="[[getValueClass_(warningState)]]">[[value]]</div>
 </div>
\ No newline at end of file

chromeos/components/diagnostics_ui/resources/data_point.js

@@ -38,5 +38,16 @@ Polymer({
       type: String,
       value: '',
     },
+
+    /** @type {boolean} */
+    warningState: {
+      type: Boolean,
+      value: false,
+    }
+  },
+
+  /** @protected */
+  getValueClass_() {
+    return this.warningState ? 'value text-red' : 'value';
   },
 });

chromeos/components/diagnostics_ui/resources/fake_data.js

@@ -88,7 +88,7 @@ export const fakeCpuUsage = [
     averageCpuTempCelsius: 106,
     percentUsageSystem: 30,
     percentUsageUser: 40,
-    scalingCurrentFrequencyKhz: 900,
+    scalingCurrentFrequencyKhz: 1000,
   },
   {
     averageCpuTempCelsius: 107,