Diagnostics: Use left-panel slot in memory/battery cards

Screenshots:
- Diagnostics App (before) http://shortn/_9PftSxKEqe
- Diagnostics App (after) http://shortn/_PIhlqmECzl

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

chromeos/components/diagnostics_ui/resources/battery_status_card.html

@@ -3,6 +3,11 @@
 
 <diagnostics-card>
   <div id="cardTitle" slot="title">[[i18n('batteryTitle')]]</div>
+  <!-- TODO(joonbug): Localize once strings are confirmed -->
+  <percent-bar-chart slot="left-panel" title="Remaining charge"
+    value="[[batteryChargeStatus_.charge_now_milliamp_hours]]"
+    max="[[batteryChargeStatus_.charge_full_now_milliamp_hours]]">
+  </percent-bar-chart>
   <data-point slot="body" id="currentNow"
     value="[[batteryChargeStatus_.current_now_milliamps]]">
   </data-point>
@@ -24,9 +29,4 @@
   <data-point slot="body" id="cycleCount"
     value="[[batteryHealth_.cycle_count]]">
   </data-point>
-  <!-- TODO(joonbug): Localize once strings are confirmed -->
-  <percent-bar-chart slot="body" title="Remaining charge"
-    value="[[batteryChargeStatus_.charge_now_milliamp_hours]]"
-    max="[[batteryChargeStatus_.charge_full_now_milliamp_hours]]">
-  </percent-bar-chart>
 </diagnostics-card>

chromeos/components/diagnostics_ui/resources/memory_card.html

@@ -3,15 +3,15 @@
 
 <diagnostics-card>
   <div id="cardTitle" slot="title">[[i18n('memoryTitle')]]</div>
+  <!-- TODO(joonbug): Localize once strings are confirmed -->
+  <percent-bar-chart slot="left-panel" title="Used memory"
+    value="[[getTotalUsedMemory_(memoryUsage_)]]"
+    max="[[memoryUsage_.total_memory_kib]]">
+  </percent-bar-chart>
   <data-point slot="body" id="memoryTotal"
     value="[[memoryUsage_.total_memory_kib]]">
   </data-point>
   <data-point slot="body" id="memoryAvailable"
     value="[[memoryUsage_.available_memory_kib]]">
   </data-point>
-  <!-- TODO(joonbug): Localize once strings are confirmed -->
-  <percent-bar-chart slot="body" title="Used memory"
-    value="[[getTotalUsedMemory_(memoryUsage_)]]"
-    max="[[memoryUsage_.total_memory_kib]]">
-  </percent-bar-chart>
 </diagnostics-card>