Diagnostics: Styling for top section of card to be closer to mocks

 - Add placeholder icon
 - Adjust sizing of percent_bar_chart/realtime_cpu chart
 - Will be updated to adhere to the spec in the future.
 - A follow-up CL will update the labels for the percent_bar_chart
   and the realtime_cpu chart

Screenshot: http://shortn/_4EPGfnWJW6

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

chromeos/components/diagnostics_ui/resources/battery_status_card.html

@@ -5,6 +5,8 @@
   <div id="batteryStatusChipInfo" slot="chip">
     [[getDesignedFullCharge_(batteryHealth_.chargeFullDesignMilliampHours)]]
   </div>
+  <!-- TODO(michaelcheco): Replace placeholder icon. -->
+  <iron-icon slot="icon" icon="cr:add"></iron-icon>
   <percent-bar-chart slot="left-panel" header="[[i18n('remainingCharge')]]"
     value="[[batteryChargeStatus_.chargeNowMilliampHours]]"
     max="[[batteryHealth_.chargeFullNowMilliampHours]]">

chromeos/components/diagnostics_ui/resources/battery_status_card.js

@@ -2,6 +2,8 @@
 // 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 './data_point.js';
 import './diagnostics_card.js';
 import './diagnostics_shared_css.js';

chromeos/components/diagnostics_ui/resources/cpu_card.html

@@ -3,6 +3,8 @@
 <diagnostics-card>
   <div id="cardTitle" slot="title">[[i18n('cpuTitle')]]</div>
   <div id="cpuChipInfo" slot="chip">[[cpuChipInfo_]]</div>
+  <!-- TODO(michaelcheco): Replace placeholder icon. -->
+  <iron-icon slot="icon" icon="cr:add"></iron-icon>
   <!-- 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

@@ -2,6 +2,8 @@
 // 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 './data_point.js';
 import './diagnostics_card.js';
 import './diagnostics_shared_css.js';

chromeos/components/diagnostics_ui/resources/diagnostics_card.html

@@ -5,6 +5,18 @@
     color: var(--diagnostics-overview-text-color);
     padding: 4px 8px;
   }
+  ::slotted([slot=icon]) {
+    background-color: rgba(var(--google-blue-refresh-500-rgb), .12);
+    border-radius: 50%;
+    color: var(--google-blue-600);
+    left: 5px;
+    padding: 2px;
+    position: relative;
+  }
+
+  ::slotted([slot=left-panel]) {
+    flex: 1;
+  }
 
   .card-container {
     display: flex;
@@ -33,18 +45,23 @@
     padding-bottom: 8px;
   }
 
+  .icon {
+    width: 10%;
+  }
+
   .routine-container {
     @apply --diagnostics-default-font;
   }
 
   .spacing {
-    margin: 12px 0px;
+    margin: 14px 0px;
     padding-inline-end: 15px;
     padding-inline-start: 15px;
   }
 
   .top-section {
     border-bottom: 1px solid var(--diagnostics-border-color);
+    display: flex;
     margin-bottom: 6px;
     margin-top: 12px;
     padding-bottom: 12px;
@@ -59,6 +76,9 @@
   </div>
   <div class="card-wrapper">
     <div class="top-section">
+      <div class="icon">
+        <slot name="icon"></slot>
+      </div>
       <slot name="left-panel"></slot>
     </div>
     <div id="body" class="data-points" hidden$="[[hideDataPoints]]">

chromeos/components/diagnostics_ui/resources/memory_card.html

@@ -3,6 +3,7 @@
 
 <diagnostics-card hide-data-points="true">
   <div id="cardTitle" slot="title">[[i18n('memoryTitle')]]</div>
+  <iron-icon slot="icon" icon="cr:add"></iron-icon>
   <percent-bar-chart slot="left-panel" header="[[i18n('usedMemory')]]"
     value="[[getTotalUsedMemory_(memoryUsage_)]]"
     max="[[memoryUsage_.totalMemoryKib]]">

chromeos/components/diagnostics_ui/resources/memory_card.js

@@ -2,6 +2,8 @@
 // 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 './data_point.js';
 import './diagnostics_card.js';
 import './diagnostics_shared_css.js';

chromeos/components/diagnostics_ui/resources/percent_bar_chart.html

@@ -15,7 +15,7 @@
   paper-progress {
     border-radius: 5px;
     display: inline-block;
-    width: 300px;
+    width: 85%;
     --paper-progress-active-color: var(--google-blue-500);
     --paper-progress-container-color: var(--google-blue-100);
     --paper-progress-height: 8px;

chromeos/components/diagnostics_ui/resources/realtime_cpu_chart.js

@@ -73,7 +73,7 @@ Polymer({
     /** @private {number} */
     width_: {
       type: Number,
-      value: 350,
+      value: 550,
     },
 
     /** @private {number} */