Commit 972ec6fc authored by Michael Checo's avatar Michael Checo Committed by Commit Bot

Diagnostics: Move header outside card border and add "chip" slot

Screenshot: http://shortn/_5A4TAyrSyR

Bug: 1125150
Test: browser_tests --gtest_filter=DiagnosticsApp*
Change-Id: I3413faa94c5c451596f4f37dce2d906b55fa35b2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2527821
Commit-Queue: Michael Checo <michaelcheco@google.com>
Reviewed-by: default avatarZentaro Kavanagh <zentaro@chromium.org>
Cr-Commit-Position: refs/heads/master@{#827964}
parent 4a2429c6
......@@ -89,6 +89,9 @@ export function batteryStatusCardTestSuite() {
fakeBatteryChargeStatus[0].powerAdapterStatus,
dataPoints[5].value);
assertEquals(fakeBatteryHealth[0].cycleCount, dataPoints[6].value);
dx_utils.assertElementContainsText(
batteryStatusElement.$$('#batteryStatusChipInfo'),
fakeBatteryHealth[0].chargeFullDesignMilliampHours);
const barChart =
dx_utils.getPercentBarChartElement(batteryStatusElement);
......
......@@ -4,8 +4,8 @@
import 'chrome://diagnostics/cpu_card.js';
import {CpuUsage, RoutineName, SystemDataProviderInterface} from 'chrome://diagnostics/diagnostics_types.js';
import {fakeCpuUsage} from 'chrome://diagnostics/fake_data.js';
import {CpuUsage, RoutineName, SystemDataProviderInterface, SystemInfo} from 'chrome://diagnostics/diagnostics_types.js';
import {fakeCpuUsage, fakeSystemInfo} from 'chrome://diagnostics/fake_data.js';
import {FakeSystemDataProvider} from 'chrome://diagnostics/fake_system_data_provider.js';
import {getSystemDataProvider, setSystemDataProviderForTesting} from 'chrome://diagnostics/mojo_interface_provider.js';
......@@ -40,13 +40,15 @@ export function cpuCardTestSuite() {
/**
* @param {!Array<!CpuUsage>} cpuUsage
* @param {!SystemInfo} systemInfo
* @return {!Promise}
*/
function initializeCpuCard(cpuUsage) {
function initializeCpuCard(cpuUsage, systemInfo) {
assertFalse(!!cpuElement);
// Initialize the fake data.
provider.setFakeCpuUsage(cpuUsage);
provider.setFakeSystemInfo(systemInfo);
// Add the CPU card to the DOM.
cpuElement =
......@@ -88,12 +90,16 @@ export function cpuCardTestSuite() {
}
test('CpuCardPopulated', () => {
return initializeCpuCard(fakeCpuUsage).then(() => {
return initializeCpuCard(fakeCpuUsage, fakeSystemInfo).then(() => {
const dataPoints = dx_utils.getDataPointElements(cpuElement);
const currentlyUsingValue =
fakeCpuUsage[0].percentUsageUser + fakeCpuUsage[0].percentUsageSystem;
assertEquals(currentlyUsingValue, dataPoints[0].value);
assertEquals(fakeCpuUsage[0].averageCpuTempCelsius, dataPoints[1].value);
dx_utils.assertElementContainsText(
cpuElement.$$('#cpuChipInfo'), `${fakeSystemInfo.cpuModelName}`);
dx_utils.assertElementContainsText(
cpuElement.$$('#cpuChipInfo'), `${fakeSystemInfo.cpuThreadsCount}`);
const cpuChart = dx_utils.getRealtimeCpuChartElement(cpuElement);
assertEquals(fakeCpuUsage[0].percentUsageUser, cpuChart.user);
......
......@@ -639,6 +639,12 @@ Try tapping the mic to ask me anything.
<message name="IDS_DIAGNOSTICS_USED_MEMORY_LABEL" desc="The label for the progress bar that displays the amount of used memory on a users' device." translateable="false">
Used memory
</message>
<message name="IDS_DIAGNOSTICS_BATTERY_CHIP_TEXT" desc="The text for a battery's full charge capacity represented in milliamp hours." translateable="true">
<ph name="CHARGE_VALUE">$1<ex>6000</ex></ph>mAh Battery
</message>
<message name="IDS_DIAGNOSTICS_CPU_CHIP_TEXT" desc="The text that displays the CPU name and thread count." translateable="true">
<ph name="CPU_NAME">$1<ex>Intel(R) Celeron(R) N4020 CPU @ 1,10Ghz</ex></ph> (<ph name="THREAD_COUNT">$2<ex>8</ex></ph> threads)
</message>
<!-- Quick Answers -->
<message name="IDS_QUICK_ANSWERS_DEFINITION_TITLE_TEXT" desc="The title text format string used for Quick Answers definition result card. The first placeholder contains the source query text and the second placeholder contains the phonetics.">
......
1bdc445de506e3c5622acc9b2736edbc6861f678
\ No newline at end of file
afee0b7bbe90fb49e9eeb1ae88ec52af75729fbc
\ No newline at end of file
......@@ -33,10 +33,12 @@ constexpr char kGeneratedPath[] =
void AddDiagnosticsStrings(content::WebUIDataSource* html_source) {
static constexpr webui::LocalizedString kLocalizedStrings[] = {
{"adapterStatus", IDS_DIAGNOSTICS_POWER_LABEL},
{"batteryChipText", IDS_DIAGNOSTICS_BATTERY_CHIP_TEXT},
{"batteryTitle", IDS_DIAGNOSTICS_BATTERY_TITLE},
{"chargeFullDesign", IDS_DIAGNOSTICS_DESIGNED_FULL_CHARGE_LABEL},
{"chargeFullNow", IDS_DIAGNOSTICS_NOW_FULL_CHARGE_LABEL},
{"chargeNow", IDS_DIAGNOSTICS_CHARGE_NOW_LABEL},
{"cpuChipText", IDS_DIAGNOSTICS_CPU_CHIP_TEXT},
{"cpuTemp", IDS_DIAGNOSTICS_CPU_TEMPERATURE_LABEL},
{"cpuTitle", IDS_DIAGNOSTICS_CPU_TITLE},
{"cpuUsage", IDS_DIAGNOSTICS_CPU_USAGE_LABEL},
......
......@@ -42,6 +42,7 @@ js_library("battery_status_card") {
":mojo_utils",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
"//ui/webui/resources/js:i18n_behavior.m",
"//ui/webui/resources/js:load_time_data.m",
]
}
......@@ -51,6 +52,7 @@ js_library("cpu_card") {
":mojo_interface_provider",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
"//ui/webui/resources/js:i18n_behavior.m",
"//ui/webui/resources/js:load_time_data.m",
]
}
......
......@@ -3,6 +3,9 @@
<diagnostics-card>
<div id="cardTitle" slot="title">[[i18n('batteryTitle')]]</div>
<div id="batteryStatusChipInfo" slot="chip">
[[getDesignedFullCharge_(batteryHealth_.chargeFullDesignMilliampHours)]]
</div>
<percent-bar-chart slot="left-panel" header="[[i18n('remainingCharge')]]"
value="[[batteryChargeStatus_.chargeNowMilliampHours]]"
max="[[batteryHealth_.chargeFullNowMilliampHours]]">
......
......@@ -9,6 +9,7 @@ import './percent_bar_chart.js';
import './strings.m.js';
import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import {BatteryChargeStatus, BatteryHealth, BatteryInfo, SystemDataProviderInterface} from './diagnostics_types.js'
......@@ -150,4 +151,9 @@ Polymer({
this.batteryHealth_ = batteryHealth;
},
/** @protected */
getDesignedFullCharge_() {
return loadTimeData.getStringF(
'batteryChipText', this.batteryHealth_.chargeFullDesignMilliampHours);
},
});
......@@ -3,6 +3,7 @@
<diagnostics-card>
<div id="cardTitle" slot="title">[[i18n('cpuTitle')]]</div>
<div id="cpuChipInfo" slot="chip">[[cpuChipInfo_]]</div>
<!-- TODO(michaelcheco): Add i18n string for percent number format -->
<realtime-cpu-chart slot="left-panel" id="realtimeCpuChart"
user="[[cpuUsage_.percentUsageUser]]"
......
......@@ -10,8 +10,9 @@ import './routine_section.js';
import './strings.m.js';
import {I18nBehavior} from 'chrome://resources/js/i18n_behavior.m.js';
import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import {CpuUsage, RoutineName, SystemDataProviderInterface} from './diagnostics_types.js';
import {CpuUsage, RoutineName, SystemDataProviderInterface, SystemInfo} from './diagnostics_types.js';
import {getSystemDataProvider} from './mojo_interface_provider.js';
/**
......@@ -53,12 +54,19 @@ Polymer({
cpuUsage_: {
type: Object,
},
/** @private {string} */
cpuChipInfo_: {
type: String,
value: '',
},
},
/** @override */
created() {
this.systemDataProvider_ = getSystemDataProvider();
this.observeCpuUsage_();
this.fetchSystemInfo_();
},
/** @override */
......@@ -95,4 +103,21 @@ Polymer({
computeCurrentlyUsing_(percentUsageSystem, percentUsageUser) {
return percentUsageSystem + percentUsageUser;
},
/** @private */
fetchSystemInfo_() {
this.systemDataProvider_.getSystemInfo().then((result) => {
this.onSystemInfoReceived_(result.systemInfo);
});
},
/**
* @param {!SystemInfo} systemInfo
* @private
*/
onSystemInfoReceived_(systemInfo) {
// TODO(michaelcheco): Update when number of cores is added to the api.
this.cpuChipInfo_ = loadTimeData.getStringF(
'cpuChipText', systemInfo.cpuModelName, systemInfo.cpuThreadsCount);
},
});
<style include="diagnostics-shared diagnostics-fonts">
#card-wrapper {
border: 1px solid var(--diagnostics-border-color);
border-radius: 14px;
margin: 10px 0;
min-height: 150px;
::slotted([slot=chip]) {
background-color: var(--google-grey-100);
border-radius: 16px;
color: var(--diagnostics-overview-text-color);
padding: 4px 8px;
}
.body-container {
......@@ -19,6 +19,26 @@
grid-template-columns: 1fr 1fr;
}
.card-container {
display: flex;
flex-direction: column;
margin-top: 12px;
}
.card-header {
@apply --diagnostics-default-font;
display: flex;
justify-content: space-between;
min-height: 25px;
}
.card-wrapper {
border: 1px solid var(--diagnostics-border-color);
border-radius: 14px;
margin: 10px 0;
min-height: 150px;
}
.routine-container {
@apply --diagnostics-default-font;
}
......@@ -28,26 +48,24 @@
padding-inline-end: 15px;
padding-inline-start: 15px;
}
.title-container {
@apply --diagnostics-default-font;
}
</style>
<div id="card-wrapper">
<div id="title" class="title-container spacing">
<div class="card-container">
<div id="title" class="card-header">
<slot name="title"></slot>
<slot name="chip"></slot>
</div>
<div class="card-columns spacing">
<div>
<slot name="left-panel"></slot>
</div>
<div id="body" class="body-container">
<slot name="body"></slot>
<div class="card-wrapper">
<div class="card-columns spacing">
<div>
<slot name="left-panel"></slot>
</div>
<div id="body" class="body-container">
<slot name="body"></slot>
</div>
</div>
</div>
<div id="routines" class="routine-container spacing">
<slot name="routines"></slot>
<div id="routines" class="routine-container spacing">
<slot name="routines"></slot>
</div>
</div>
</div>
</div>
\ No newline at end of file
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment