diagnostics: realtime cpu chart legend styling

Screen: http://screen/BhQEsVaDzMLxAEj
Spec: https://carbon.googleplex.com/cros-ux/pages/diagnostics/mvp#000933fc-29e1-4d4b-aa49-9d1b8fb16a24

Bug: 1125150
Test: browser_test --gtest_filter=Diagnostics*
Change-Id: Ic52a8249e29e17ce703a1acc91d1e8280db93073
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2572790Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Commit-Queue: Joon Ahn <joonbug@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833813}

chromeos/components/diagnostics_ui/resources/diagnostics_fonts_css.html

@@ -11,6 +11,7 @@
       --diagnostics-overview-font-size: 13px;
       --diagnostics-chart-label-font-size: 15px;
       --diagnostics-chart-tick-font-size: 12px;
+      --diagnostics-chart-legend-font-size: 12px;
 
       --diagnostics-default-font-weight: 500;
       --diagnostics-header-font-weight: 600;
@@ -59,6 +60,10 @@
           font-family: var(--diagnostics-header-font-family);
           font-size: var(--diagnostics-chart-tick-font-size);
       };
+      --diagnostics-chart-legend-font: {
+          font-family: var(--diagnostics-header-font-family);
+          font-size: var(--diagnostics-chart-legend-font-size);
+      };
     }
   </style>
 </template>
\ No newline at end of file

chromeos/components/diagnostics_ui/resources/realtime_cpu_chart.html

@@ -19,19 +19,6 @@
     visibility: hidden;
   }
 
-  #chart-legend {
-    text-align: center;
-  }
-
-  #chart-legend > div {
-    display: inline;
-    padding: 5px;
-  }
-
-  #chart-legend > div > span {
-    padding: 2px;
-  }
-
   #plotGroup {
     fill: none;
     stroke-width: 1.5px;
@@ -62,6 +49,48 @@
   .gradient-opacity {
     stop-opacity: 0;
   }
+
+  #chart-legend {
+    text-align: right;
+    @apply --diagnostics-chart-legend-font;
+    padding-right: 5px;
+  }
+
+  #chart-legend > .divider {
+    display: inline-block;
+    height: 24px;
+    position: relative;
+    top: 8px;
+  }
+
+  div.legend-group {
+    display: inline-block;
+    padding: 0 20px 8px 0;
+    text-align: left;
+  }
+
+  div.legend-group > span {
+    display: inline-block;
+    padding-left: 8px;
+    text-align: right;
+    width: 25px;
+  }
+
+  #legend-bar {
+    border-radius: 1px;
+    display: inline-block;
+    height: 2px;
+    margin: 0 16px 3px 0;
+    width: 10px;
+  }
+
+  #legend-bar.user {
+    background-color: var(--google-blue-600);
+  }
+
+  #legend-bar.system {
+    background-color: var(--google-yellow-600);
+  }
 </style>
 
 <svg id="chart" width$="[[width_]]" height$="[[height_]]">
@@ -90,11 +119,14 @@
   </g>
 </svg>
 <div id="chart-legend">
-  <div id="legend-user">
+  <div id="legend-user" class="legend-group">
+    <div id="legend-bar" class="user"></div>
     <label>[[i18n('cpuUsageUser')]]</label>
     <span>[[getPercentageLabel_(user)]]</span>
   </div>
-  <div id="legend-system">
+  <div class="divider"></div>
+  <div id="legend-system" class="legend-group">
+    <div id="legend-bar" class="system"></div>
     <label>[[i18n('cpuUsageSystem')]]</label>
     <span>[[getPercentageLabel_(system)]]</span>
   </div>

chromeos/components/diagnostics_ui/resources/realtime_cpu_chart.js

@@ -120,7 +120,7 @@ Polymer({
     /** @private {!Object} */
     padding_: {
       type: Object,
-      value: {top: 10, right: 20, bottom: 10, left: 50, tick: 10},
+      value: {top: 10, right: 5, bottom: 8, left: 50, tick: 10},
     },
 
     /** @private {number} */