Diagnostics: Conform to responsiveness spec

Screenshot: http://shortn/_fvSN9f0N5B

Spec: https://carbon.googleplex.com/cros-ux/pages/diagnostics/mvp

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I7cc40e2e25f10c700ffb92bbaefc52a5ec63be62
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2567930
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: Zentaro Kavanagh <zentaro@chromium.org>
Reviewed-by: Jesse Schettler <jschettler@chromium.org>
Reviewed-by: Joon Ahn <joonbug@chromium.org>
Cr-Commit-Position: refs/heads/master@{#833516}

chromeos/components/diagnostics_ui/resources/diagnostics_app.html

 <style include="cr-shared-style diagnostics-shared diagnostics-fonts">
+  .card-width {
+    width: 100%;
+  }
+
   .diagonstics-cards-container {
     align-items: center;
     display: flex;
     flex-direction: column;
+    padding-inline: var(--container-padding);
+    width: var(--content-container-width);
   }
 
   #diagnosticsContainer {
-    --cr-centered-card-max-width: 820px;
+    align-items: center;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    height: inherit;
+    position: relative;
   }
 
   #header {
-   @apply --diagnostics-header-font;
+    @apply --diagnostics-header-font;
+    align-self: flex-start;
     margin-bottom: 10px;
   }
 
@@ -31,23 +43,29 @@
     padding: 5px;
   }
 </style>
-<div id="diagnosticsContainer"class="cr-centered-card-container">
+<div id="diagnosticsContainer">
   <div id="header">[[i18n('diagnosticsTitle')]]</div>
   <div class="overview-container">
     <overview-card id="overviewCard"></overview-card>
   </div>
   <div class="diagonstics-cards-container">
     <template is="dom-if" if="[[showBatteryStatusCard_]]" restamp>
-      <battery-status-card id="batteryStatusCard"
-        is-test-running="{{isTestRunning}}">
-      </battery-status-card>
+      <div class="card-width">
+        <battery-status-card id="batteryStatusCard"
+          is-test-running="{{isTestRunning}}">
+        </battery-status-card>
+      </div>
     </template>
-    <cpu-card id="cpuCard"
-      is-test-running="{{isTestRunning}}">
-    </cpu-card>
-    <memory-card id="memoryCard"
-      is-test-running="{{isTestRunning}}">
-    </memory-card>
+    <div class="card-width">
+      <cpu-card id="cpuCard"
+        is-test-running="{{isTestRunning}}">
+      </cpu-card>
+    </div>
+    <div class="card-width">
+      <memory-card id="memoryCard"
+        is-test-running="{{isTestRunning}}">
+      </memory-card>
+    </div>
   </div>
   <div class="session-log-container">
     <cr-button class="session-log-button">

chromeos/components/diagnostics_ui/resources/diagnostics_card.html

@@ -22,7 +22,6 @@
     display: flex;
     flex-direction: column;
     margin-top: 12px;
-    width: 650px;
   }
 
   .card-header {

chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.html

@@ -19,6 +19,46 @@
       padding-inline-start: 20px;
       position: relative;
       top: 12%;
-  }
+    }
+
+    @media (min-width:600px) {
+      :host {
+        --container-padding: 24px;
+        --content-container-width: 552px;
+        --chart-width: 452px;
+        }
+    }
+
+    @media (min-width:768px) {
+      :host {
+        --container-padding: 64px;
+        --content-container-width: 640px;
+        --chart-width: 540px;
+        }
+    }
+
+    @media (min-width:960px) {
+      :host {
+        --container-padding: 160px;
+        --content-container-width: 640px;
+        --chart-width: 540px;
+      }
+    }
+
+    @media (min-width:1280px) {
+      :host {
+        --container-padding: 160px;
+        --content-container-width: 680px;
+        --chart-width: 580px;
+      }
+    }
+
+    @media (min-width:1440px) {
+      :host {
+        --container-padding: 360px;
+        --content-container-width: 720px;
+        --chart-width: 620px;
+      }
+    }
   </style>
 </template>

chromeos/components/diagnostics_ui/resources/realtime_cpu_chart.js

@@ -138,6 +138,8 @@ Polymer({
     }
   },
 
+  observers: ['setScaling_(graphWidth_)'],
+
   /** @override */
   created() {
     // Initialize the data array with data outside the chart boundary.
@@ -150,6 +152,19 @@ Polymer({
   ready() {
     this.setScaling_();
     this.initializeChart_();
+    window.addEventListener('resize', (e) => this.updateChartWidth_());
+
+    // Set the initial chart width.
+    this.updateChartWidth_();
+  },
+
+  /** @private */
+  updateChartWidth_() {
+    // TODO(michaelcheco): Enforce 600px as the minimum window size.
+
+    // parseFloat() is used to convert the string returned by
+    // getComputedStyleValue() into a number ("642px" --> 642).
+    this.width_ = parseFloat(this.getComputedStyleValue('--chart-width'));
   },
 
   /**