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}
diff --git a/chromeos/components/diagnostics_ui/resources/diagnostics_app.html b/chromeos/components/diagnostics_ui/resources/diagnostics_app.html
index 82b42260..41d3325 100644
--- a/chromeos/components/diagnostics_ui/resources/diagnostics_app.html
+++ b/chromeos/components/diagnostics_ui/resources/diagnostics_app.html
@@ -1,16 +1,28 @@
<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">
diff --git a/chromeos/components/diagnostics_ui/resources/diagnostics_card.html b/chromeos/components/diagnostics_ui/resources/diagnostics_card.html
index d585a3d..95e310f4 100644
--- a/chromeos/components/diagnostics_ui/resources/diagnostics_card.html
+++ b/chromeos/components/diagnostics_ui/resources/diagnostics_card.html
@@ -22,7 +22,6 @@
display: flex;
flex-direction: column;
margin-top: 12px;
- width: 650px;
}
.card-header {
diff --git a/chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.html b/chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.html
index ad288b0..5ec1273 100644
--- a/chromeos/components/diagnostics_ui/resources/diagnostics_shared_css.html
+++ b/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>
diff --git a/chromeos/components/diagnostics_ui/resources/realtime_cpu_chart.js b/chromeos/components/diagnostics_ui/resources/realtime_cpu_chart.js
index 249f9e70..99cdb77 100644
--- a/chromeos/components/diagnostics_ui/resources/realtime_cpu_chart.js
+++ b/chromeos/components/diagnostics_ui/resources/realtime_cpu_chart.js
@@ -138,6 +138,8 @@
}
},
+ observers: ['setScaling_(graphWidth_)'],
+
/** @override */
created() {
// Initialize the data array with data outside the chart boundary.
@@ -150,6 +152,19 @@
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'));
},
/**
