Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[CrOS Cellular] Add UI for powerwash dialog eSIM warning.
Add UI to <os-settings-powerwash-dialog> that displays a warning if the user has installed eSIM profiles and shows a list of the profiles. Contains a 'Continue' button that does not contain any business logic, which will be added in a follow-up CL. This is a follow-up CL from crrev.com/c/2875853. Screenshot: https://screenshot.googleplex.com/hJRAxFY5Cw9ebbY.png Mocks: https://carbon.googleplex.com/cros-ux/pages/lte-setup/settings-approach#366c05a9-5037-4406-ad43-ee889e29cece Bug: 1196511 Change-Id: I6f481bb3f111fdebf73d7eae49509026c0e15ffb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2877774 Commit-Queue: Gordon Seto <gordonseto@google.com> Reviewed-by: Regan Hsu <hsuregan@chromium.org> Cr-Commit-Position: refs/heads/master@{#880602}
- Loading branch information
Gordon Seto
authored and
Chromium LUCI CQ
committed
May 7, 2021
1 parent
aa20bd2
commit 00116dc
Showing
17 changed files
with
290 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
1 change: 1 addition & 0 deletions
1
chrome/app/os_settings_strings_grdp/IDS_SETTINGS_FACTORY_CONTINUE_BUTTON_LABEL.png.sha1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| 058df431bbd66f8555111b31273a30386c05910c |
1 change: 1 addition & 0 deletions
1
chrome/app/os_settings_strings_grdp/IDS_SETTINGS_FACTORY_RESET_ESIM_LIST_ITEM_TITLE.png.sha1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| 058df431bbd66f8555111b31273a30386c05910c |
1 change: 1 addition & 0 deletions
1
chrome/app/os_settings_strings_grdp/IDS_SETTINGS_FACTORY_RESET_ESIM_LIST_TITLE.png.sha1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| 058df431bbd66f8555111b31273a30386c05910c |
1 change: 1 addition & 0 deletions
1
chrome/app/os_settings_strings_grdp/IDS_SETTINGS_FACTORY_RESET_ESIM_WARNING.png.sha1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| 058df431bbd66f8555111b31273a30386c05910c |
1 change: 1 addition & 0 deletions
1
.../os_settings_strings_grdp/IDS_SETTINGS_FACTORY_RESET_ESIM_WARNING_CHECKBOX_LABEL.png.sha1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| 058df431bbd66f8555111b31273a30386c05910c |
1 change: 1 addition & 0 deletions
1
chrome/app/os_settings_strings_grdp/IDS_SETTINGS_FACTORY_RESET_ESIM_WARNING_TITLE.png.sha1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| 058df431bbd66f8555111b31273a30386c05910c |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
100 changes: 86 additions & 14 deletions
100
chrome/browser/resources/settings/chromeos/os_reset_page/os_powerwash_dialog.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,27 +1,99 @@ | ||
| <style include="settings-shared"></style> | ||
| <style include="settings-shared"> | ||
| :host { | ||
| --cr-dialog-width: 400px; | ||
| } | ||
|
|
||
| :host cr-checkbox { | ||
| --cr-checkbox-label-color: var(--cr-secondary-text-color); | ||
| --cr-checkbox-label-padding-start: 12px; | ||
| --cr-checkbox-unchecked-box-color: #888888; | ||
| } | ||
|
|
||
| iron-list { | ||
| background-color: #E8EAED61; | ||
| border-radius: 4px; | ||
| margin-top: 8px; | ||
| padding-bottom: 8px; | ||
| } | ||
|
|
||
| os-settings-powerwash-dialog-esim-item { | ||
| height: 32px; | ||
| padding-inline-end: 16px; | ||
| padding-inline-start: 16px; | ||
| } | ||
|
|
||
| #profilesListContainer { | ||
| margin-bottom: 8px; | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| #profilesListTitle { | ||
| font-size: calc(14 / 13 * 100%); | ||
| } | ||
|
|
||
| #checkboxLabel { | ||
| margin-top: 16px; | ||
| } | ||
| </style> | ||
| <cr-dialog id="dialog" close-text="$i18n{close}" | ||
| ignore-enter-key> | ||
| <div slot="title">$i18n{powerwashDialogTitle}</div> | ||
| <div slot="body"> | ||
| <!-- TODO(crbug.com/1196511): UI still in progress. --> | ||
| <template is="dom-if" | ||
| if="[[shouldShowESimWarning_(installedESimProfiles)]]"> | ||
|
|
||
| </template> | ||
| <template is="dom-if" | ||
| if="[[!shouldShowESimWarning_(installedESimProfiles)]]"> | ||
| <template is="dom-if" if="[[shouldShowESimWarning_]]"> | ||
| <div slot="title">$i18n{powerwashDialogESimWarningTitle}</div> | ||
| <div slot="body"> | ||
| <!-- TODO(crbug.com/1196511): Add link to mobile settings. --> | ||
| <settings-localized-link | ||
| localized-string="$i18n{powerwashDialogESimWarning}" | ||
| link-url="#"> | ||
| </settings-localized-link> | ||
| <div id="profilesListContainer"> | ||
| <div id="profilesListTitle"> | ||
| $i18n{powerwashDialogESimListTitle} | ||
| </div> | ||
| <iron-list items="[[installedESimProfiles]]" | ||
| scroll-target="profilesListContainer" | ||
| role="listbox"> | ||
| <template> | ||
| <os-settings-powerwash-dialog-esim-item | ||
| profile="[[item]]" | ||
| tabindex="0" | ||
| role="option"> | ||
| </os-powerwash-dialog-esim-item> | ||
| </template> | ||
| </iron-list> | ||
| </div> | ||
| <cr-checkbox> | ||
| <div id="checkboxLabel"> | ||
| $i18n{powerwashDialogESimWarningCheckbox} | ||
| </div> | ||
| </cr-checkbox> | ||
| </div> | ||
| </template> | ||
| <template is="dom-if" if="[[!shouldShowESimWarning_]]"> | ||
| <div slot="title">$i18n{powerwashDialogTitle}</div> | ||
| <div slot="body"> | ||
| <div id="powerwashContainer"> | ||
| <settings-localized-link | ||
| localized-string="$i18n{powerwashDialogExplanation}" | ||
| link-url="$i18nRaw{powerwashLearnMoreUrl}"> | ||
| </settings-localized-link> | ||
| </div> | ||
| </template> | ||
| </div> | ||
| </div> | ||
| </template> | ||
| <div slot="button-container"> | ||
| <cr-button class="cancel-button" on-click="onCancelTap_" | ||
| id="cancel">$i18n{cancel}</cr-button> | ||
| <cr-button class="action-button" id="powerwash" | ||
| on-click="onRestartTap_">$i18n{powerwashDialogButton}</cr-button> | ||
| <template is="dom-if" if="[[!shouldShowESimWarning_]]"> | ||
| <cr-button class="action-button" id="powerwash" | ||
| on-click="onRestartTap_"> | ||
| $i18n{powerwashDialogButton} | ||
| </cr-button> | ||
| </template> | ||
| <template is="dom-if" if="[[shouldShowESimWarning_]]"> | ||
| <!-- TODO(crbug.com/1196511): Add continue button logic. --> | ||
| <cr-button class="action-button" id="continue" | ||
| hidden="[[!shouldShowESimWarning_]]"> | ||
| $i18n{powerwashContinue} | ||
| </cr-button> | ||
| </template> | ||
| </div> | ||
| </cr-dialog> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
13 changes: 13 additions & 0 deletions
13
chrome/browser/resources/settings/chromeos/os_reset_page/os_powerwash_dialog_esim_item.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <style include="settings-shared"> | ||
| div { | ||
| color: var(--cr-primary-text-color); | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
| /* This id is in the string returned from getItemInnerHtml_() */ | ||
| #providerName { | ||
| color: var(--google-grey-600); | ||
| } | ||
| </style> | ||
| <div inner-h-t-m-l="[[getItemInnerHtml_(profileProperties_)]]"> | ||
| </div> |
99 changes: 99 additions & 0 deletions
99
chrome/browser/resources/settings/chromeos/os_reset_page/os_powerwash_dialog_esim_item.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| // Copyright 2021 The Chromium Authors. All rights reserved. | ||
| // Use of this source code is governed by a BSD-style license that can be | ||
| // found in the LICENSE file. | ||
|
|
||
| /** | ||
| * @fileoverview | ||
| * 'os-settings-powerwash-dialog-esim-item' is an item showing details of an | ||
| * installed eSIM profile shown in a list in the device reset dialog. | ||
| */ | ||
| import '../../settings_shared_css.js'; | ||
|
|
||
| import {I18nBehavior} from '//resources/js/i18n_behavior.m.js'; | ||
| import {html, Polymer} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js'; | ||
|
|
||
| Polymer({ | ||
| _template: html`{__html_template__}`, | ||
| is: 'os-settings-powerwash-dialog-esim-item', | ||
|
|
||
| behaviors: [ | ||
| I18nBehavior, | ||
| ], | ||
|
|
||
| properties: { | ||
| /** @type {?chromeos.cellularSetup.mojom.ESimProfileRemote} */ | ||
| profile: { | ||
| type: Object, | ||
| value: null, | ||
| observer: 'onProfileChanged_', | ||
| }, | ||
|
|
||
| /** | ||
| * @type {?chromeos.cellularSetup.mojom.ESimProfileProperties} | ||
| * @private | ||
| */ | ||
| profileProperties_: { | ||
| type: Object, | ||
| value: null, | ||
| }, | ||
| }, | ||
|
|
||
| /** @private */ | ||
| onProfileChanged_() { | ||
| if (!this.profile) { | ||
| this.profileProperties_ = null; | ||
| return; | ||
| } | ||
| this.profile.getProperties().then(response => { | ||
| this.profileProperties_ = response.properties; | ||
| }); | ||
| }, | ||
|
|
||
| /** | ||
| * @return {string} | ||
| * @private | ||
| */ | ||
| getItemInnerHtml_() { | ||
| if (!this.profileProperties_) { | ||
| return ''; | ||
| } | ||
| const profileName = this.getProfileName_(this.profileProperties_); | ||
| const providerName = this.escapeHtml_( | ||
| String.fromCharCode(...this.profileProperties_.serviceProvider.data)); | ||
| if (!providerName) { | ||
| return profileName; | ||
| } | ||
| return this.i18nAdvanced( | ||
| 'powerwashDialogESimListItemTitle', | ||
| {attrs: ['id'], substitutions: [profileName, providerName]}); | ||
| }, | ||
|
|
||
| /** | ||
| * @param {chromeos.cellularSetup.mojom.ESimProfileProperties} | ||
| * profileProperties | ||
| * @return {string} | ||
| * @private | ||
| */ | ||
| getProfileName_(profileProperties) { | ||
| if (!profileProperties.nickname.data || | ||
| !profileProperties.nickname.data.length) { | ||
| return this.escapeHtml_( | ||
| String.fromCharCode(...profileProperties.name.data)); | ||
| } | ||
| return this.escapeHtml_( | ||
| String.fromCharCode(...profileProperties.nickname.data)); | ||
| }, | ||
|
|
||
| /** | ||
| * @param {string} string | ||
| * @return {string} | ||
| * @private | ||
| */ | ||
| escapeHtml_(string) { | ||
| return string.replace(/&/g, '&') | ||
| .replace(/</g, '<') | ||
| .replace(/>/g, '>') | ||
| .replace(/"/g, '"') | ||
| .replace(/'/g, '''); | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.