diff options
| author | Allan Sandfeld Jensen <allan.jensen@qt.io> | 2021-09-03 13:32:17 +0200 |
|---|---|---|
| committer | Allan Sandfeld Jensen <allan.jensen@qt.io> | 2021-10-01 14:31:55 +0200 |
| commit | 21ba0c5d4bf8fba15dddd97cd693bad2358b77fd (patch) | |
| tree | 91be119f694044dfc1ff9fdc054459e925de9df0 /chromium/ui/webui/resources/cr_components/chromeos | |
| parent | 03c549e0392f92c02536d3f86d5e1d8dfa3435ac (diff) | |
| download | qtwebengine-chromium-21ba0c5d4bf8fba15dddd97cd693bad2358b77fd.tar.gz | |
BASELINE: Update Chromium to 92.0.4515.166
Change-Id: I42a050486714e9e54fc271f2a8939223a02ae364
Diffstat (limited to 'chromium/ui/webui/resources/cr_components/chromeos')
47 files changed, 1314 insertions, 638 deletions
diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/BUILD.gn b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/BUILD.gn index 81306fb4ba5..677200e0b51 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/BUILD.gn +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/BUILD.gn @@ -13,9 +13,10 @@ js_type_check("closure_compile_module") { is_polymer3 = true deps = [ ":activation_code_page.m", + ":activation_verification_page.m", ":base_page.m", ":button_bar.m", - ":cellular_eid_popup.m", + ":cellular_eid_dialog.m", ":cellular_setup.m", ":cellular_setup_delegate.m", ":cellular_types.m", @@ -54,6 +55,17 @@ js_library("final_page.m") { extra_deps = [ ":final_page_module" ] } +js_library("activation_verification_page.m") { + sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_verification_page.m.js" ] + deps = [ + ":base_page.m", + "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled", + "//ui/webui/resources/cr_elements/cr_lottie:cr_lottie.m", + "//ui/webui/resources/js:i18n_behavior.m", + ] + extra_deps = [ ":activation_verification_page_module" ] +} + js_library("activation_code_page.m") { sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.m.js" ] deps = [ @@ -129,6 +141,7 @@ js_library("setup_loading_page.m") { deps = [ ":base_page.m", ":cellular_setup_delegate.m", + "//ui/webui/resources/cr_elements/cr_lottie:cr_lottie.m", "//ui/webui/resources/js:assert.m", ] extra_deps = [ ":setup_loading_page_module" ] @@ -201,6 +214,7 @@ js_library("esim_flow_ui.m") { sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.m.js" ] deps = [ ":activation_code_page.m", + ":activation_verification_page.m", ":cellular_setup_delegate.m", ":cellular_types.m", ":confirmation_code_page.m", @@ -221,10 +235,10 @@ js_library("esim_flow_ui.m") { externs_list = [ "$externs_path/metrics_private.js" ] } -js_library("cellular_eid_popup.m") { - sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_popup.m.js" ] +js_library("cellular_eid_dialog.m") { + sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_dialog.m.js" ] deps = [ "//ui/webui/resources/js:i18n_behavior.m" ] - extra_deps = [ ":cellular_eid_popup_module" ] + extra_deps = [ ":cellular_eid_dialog_module" ] } js_library("cellular_setup.m") { @@ -245,9 +259,10 @@ js_library("cellular_setup.m") { group("polymer3_elements") { public_deps = [ ":activation_code_page_module", + ":activation_verification_page_module", ":base_page_module", ":button_bar_module", - ":cellular_eid_popup_module", + ":cellular_eid_dialog_module", ":cellular_setup_icons_module", ":cellular_setup_module", ":confirmation_code_page_module", @@ -278,6 +293,14 @@ polymer_modulizer("final_page") { auto_imports = cr_components_chromeos_auto_imports } +polymer_modulizer("activation_verification_page") { + js_file = "activation_verification_page.js" + html_file = "activation_verification_page.html" + html_type = "dom-module" + namespace_rewrites = cr_components_chromeos_namespace_rewrites + auto_imports = cr_components_chromeos_auto_imports +} + polymer_modulizer("activation_code_page") { js_file = "activation_code_page.js" html_file = "activation_code_page.html" @@ -350,9 +373,9 @@ polymer_modulizer("esim_flow_ui") { auto_imports = cr_components_chromeos_auto_imports } -polymer_modulizer("cellular_eid_popup") { - js_file = "cellular_eid_popup.js" - html_file = "cellular_eid_popup.html" +polymer_modulizer("cellular_eid_dialog") { + js_file = "cellular_eid_dialog.js" + html_file = "cellular_eid_dialog.html" html_type = "dom-module" namespace_rewrites = cr_components_chromeos_namespace_rewrites auto_imports = cr_components_chromeos_auto_imports diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.html index 11c8c0b61ad..c84c66833c8 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.html @@ -13,12 +13,26 @@ <dom-module id="activation-code-page"> <template> <style include="iron-positioning"> - [slot='page-body'] { - height: 300px; - margin-top: -20px; + :host([expanded_]) #pageBody { + height: 340px; + transition-duration: 200ms; + } + :host(:not([expanded_])) #pageBody { + height: 282px; + transition-duration: 150ms; + } + + :host([expanded_]) #esimQrCodeDetection { + height: 190px; + transition-duration: 200ms; + } + :host(:not([expanded_])) #esimQrCodeDetection { + height: 140px; + transition-duration: 150ms; } - :host { - --activation-page-qr-code-detection-height: 155px; + + :host(:not([expanded_])) #esimQrCodeDetection:focus-within { + background-color: var(--google-grey-refresh-300); } :host cr-button { @@ -28,13 +42,19 @@ #esimQrCodeDetection { background-color: var(--google-grey-refresh-100); border-radius: 4px; - height: var(--activation-page-qr-code-detection-height); margin: 20px 0 20px 0; overflow: hidden; position: relative; } - cr-button { + paper-spinner-lite { + height: 20px; + margin-inline-end: 6px; + margin-top: 6px; + width: 20px; + } + + cr-button:not(:focus) { border: none; box-shadow: none; } @@ -47,6 +67,15 @@ background-color: transparent; } + cr-button[disabled] > iron-icon { + --iron-icon-fill-color: var(--google-grey-600); + } + + .animate { + transition-property: height; + transition-timing-function: cubic-bezier(0.00, 0.00, 0.20, 1.00); + } + .center { left: 50%; position: absolute; @@ -91,6 +120,20 @@ --iron-icon-fill-color: #1A73E8; } + .hidden { + visibility: hidden; + } + + .visually-hidden { + clip: rect(0 0 0 0); + clip-path: inset(50%); + height: 1px; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; + } + #scanSucessHeader { --iron-icon-fill-color: #1E8E3E; margin-bottom: 8px; @@ -101,6 +144,11 @@ font-size: medium; } + #scanSuccessMessage::selection { + background-color: rgb(172, 206, 247); + color: green; + } + #scanFailureHeader { margin-bottom: 4px; } @@ -132,17 +180,9 @@ --iron-icon-fill-color: #5F6368; } - paper-spinner-lite { - height: 20px; - position: absolute; - right: 16px; - top: 24px; - width: 20px; - } - #loadingMessage { bottom: 0; - color: var(--google-grey-refresh-500); + color: var(--google-grey-600); font-size: var(--cr-form-field-label-font-size); letter-spacing: .4px; line-height: var(--cr-form-field-label-line-height); @@ -150,18 +190,29 @@ } #video { - height: var(--activation-page-qr-code-detection-height); + height: inherit; transform: rotateY(180deg); } + + #pageBody { + margin-top: -20px; + } + + #startScanningButton { + max-width: 470px; + min-width: 345px; + text-align: center; + width: auto; + } </style> <base-page> - <div slot="page-body"> - <span id="scanQrCodeDescription"> - [[getDescription_(showNoProfilesMessage, cameraCount_ )]] + <div slot="page-body" id="pageBody" class="animate"> + <span aria-live="polite"> + [[getDescription_(cameraCount_, qrCodeDetector_)]] </span> <template is="dom-if" if="[[isScanningAvailable_(cameraCount_, qrCodeDetector_.*)]]" restamp> - <div id="esimQrCodeDetection"> + <div id="esimQrCodeDetection" class="animate"> <cr-button id="switchCameraButton" on-click="onSwitchCameraButtonPressed_" hidden$="[[isUiElementHidden_(UiElement.SWITCH_CAMERA, state_, cameraCount_)]]" @@ -172,12 +223,16 @@ <video id="video" autoplay muted hidden$="[[isUiElementHidden_(UiElement.VIDEO, state_)]]"> </video> - <div class="center" id="startScanningContainer" class="blue-icon" + <template is="dom-if" if="[[qrCodeCameraA11yString_]]" restamp> + <div class="visually-hidden" aria-live="polite"> + [[qrCodeCameraA11yString_]] + </div> + </template> + <div class="center blue-icon" id="startScanningContainer" hidden$="[[isUiElementHidden_(UiElement.START_SCANNING, state_)]]"> <cr-button class="label" id="startScanningButton" on-click="startScanning_" - aria-describedby="scanQrCodeDescription" disabled="[[isUiElementDisabled_(UiElement.START_SCANNING, state_, showBusy)]]"> <iron-icon class="button-image" icon="cellular-setup:camera"></iron-icon> [[i18n('useCamera')]] @@ -202,12 +257,15 @@ [[i18n('scanQrCodeInvalid')]] </span> </div> - <cr-button id="useCameraAgainButton" class="blue-icon" - on-click="startScanning_" - disabled="[[isUiElementDisabled_(UiElement.SCAN_SUCCESS, state_, showBusy)]]"> - <iron-icon class="button-image" icon="cellular-setup:camera"></iron-icon> - [[i18n('qrCodeUseCameraAgain')]] - </cr-button> + <template is="dom-if" restamp + if="[[!isUiElementHidden_(UiElement.SCAN_INSTALL_FAILURE, state_)]]"> + <cr-button id="useCameraAgainButton" class="blue-icon" + on-click="startScanning_"> + <iron-icon class="button-image" icon="cellular-setup:camera"> + </iron-icon> + [[i18n('qrCodeUseCameraAgain')]] + </cr-button> + </template> </div> <div id="scanFailureContainer" hidden$="[[isUiElementHidden_(UiElement.SCAN_FAILURE, state_)]]"> @@ -231,16 +289,19 @@ <div id="activationCodeContainer" class$="[[computeActivationCodeClass_( cameraCount_, qrCodeDetector_.*)]]"> <cr-input id="activationCode" - label="[[i18n('activationCode')]]" - value="{{activationCode}}" - disabled="[[showBusy]]" - on-keydown="onKeyDown_" - invalid="[[shouldActivationCodeInputBeInvalid_(state_)]]" - error-message="[[i18n('scanQrCodeInvalid')]]"> + label="[[i18n('activationCode')]]" + value="{{activationCode}}" + disabled="[[showBusy]]" + on-keydown="onKeyDown_" + invalid="[[shouldActivationCodeInputBeInvalid_(state_)]]" + error-message="[[i18n('scanQrCodeInvalid')]]"> + <template is="dom-if" if="[[showBusy]]"> + <div slot="suffix"> + <paper-spinner-lite active> + </paper-spinner-lite> + </div> + </template> </cr-input> - <paper-spinner-lite active - hidden$="[[!showBusy]]"> - </paper-spinner-lite> <div id="loadingMessage" hidden$="[[!showBusy]]"> [[i18n('scanQrCodeLoading')]] </div> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.js b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.js index c6dc62de01b..22e6c60b3dc 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_code_page.js @@ -81,10 +81,6 @@ Polymer({ value: UiElement, }, - showNoProfilesMessage: { - type: Boolean, - }, - /** * @type {!PageState} * @private @@ -111,6 +107,26 @@ Polymer({ type: Object, value: null, }, + + /** + * If true, video is expanded. + */ + expanded_: { + type: Boolean, + value: false, + reflectToAttribute: true, + }, + + /** + * A11y string used to announce the current status of qr code camera + * detection. Used when device web cam is turned on and ready to scan, + * and also used after scan has been completed. + * @private + */ + qrCodeCameraA11yString_: { + type: String, + value: '', + } }, /** @@ -180,7 +196,7 @@ Polymer({ detached() { this.stopStream_(this.stream_); if (this.qrCodeDetectorTimer_) { - clearTimeout(this.qrCodeDetectorTimer_); + this.clearQrCodeDetectorTimer_(); } this.mediaDevices_.removeEventListener( 'devicechange', this.updateCameraCount_.bind(this)); @@ -246,6 +262,13 @@ Polymer({ }, /** + * @returns {?number} + */ + getQrCodeDetectorTimerForTest() { + return this.qrCodeDetectorTimer_; + }, + + /** * @return {string} * @private */ @@ -285,7 +308,7 @@ Polymer({ startScanning_() { const oldStream = this.stream_; if (this.qrCodeDetectorTimer_) { - clearTimeout(this.qrCodeDetectorTimer_); + this.clearQrCodeDetectorTimer_(); } const useUserFacingCamera = @@ -337,7 +360,7 @@ Polymer({ const frame = await capturer.grabFrame(); const activationCode = await this.detectActivationCode_(frame); if (activationCode) { - clearTimeout(this.qrCodeDetectorTimer_); + this.clearQrCodeDetectorTimer_(); this.activationCode = activationCode; this.stopStream_(this.stream_); this.state_ = PageState.SCANNING_SUCCESS; @@ -375,6 +398,12 @@ Polymer({ this.fire('activation-code-updated', {activationCode: activationCode}); }, + /** @private */ + clearQrCodeDetectorTimer_() { + clearTimeout(this.qrCodeDetectorTimer_); + this.qrCodeDetectorTimer_ = null; + }, + /** * @param {string} activationCode * @return {string|null} The validated activation code or null if it's @@ -417,17 +446,38 @@ Polymer({ /** @private */ onStateChanged_() { + this.qrCodeCameraA11yString_ = ''; if (this.state_ !== PageState.MANUAL_ENTRY_INSTALL_FAILURE && this.state_ !== PageState.SCANNING_INSTALL_FAILURE) { this.showError = false; } if (this.state_ === PageState.MANUAL_ENTRY) { + // Clear |qrCodeDetectorTimer_| before closing video stream, prevents + // image capturer from going into an inactive state and throwing errors + // when |grabFrame()| is called. + this.clearQrCodeDetectorTimer_(); + // Wait for the video element to be hidden by isUiElementHidden() before // stopping the stream or the user will see a flash. Polymer.RenderStatus.afterNextRender(this, () => { this.stopStream_(this.stream_); }); } + + if (this.state_ === PageState.SCANNING_USER_FACING || + this.state_ === PageState.SCANNING_ENVIRONMENT_FACING) { + this.qrCodeCameraA11yString_ = this.i18n('qrCodeA11YCameraOn'); + this.expanded_ = true; + return; + } + + // Focus on the next button after scanning is successful. + if (this.state_ === PageState.SCANNING_SUCCESS) { + this.qrCodeCameraA11yString_ = this.i18n('qrCodeA11YCameraScanSuccess'); + this.fire('focus-default-button'); + } + + this.expanded_ = false; }, /** @@ -437,9 +487,16 @@ Polymer({ onKeyDown_(e) { if (e.key === 'Enter') { this.fire('forward-navigation-requested'); - } else { - this.state_ = PageState.MANUAL_ENTRY; } + + // Prevents barcode detector video from closing if user tabs through + // window. We should only close barcode detector window if user + // types in activation code input. + if (e.key === 'Tab') { + return; + } + + this.state_ = PageState.MANUAL_ENTRY; e.stopPropagation(); }, @@ -504,8 +561,7 @@ Polymer({ if (!this.isScanningAvailable_()) { return this.i18n('scanQRCodeEnterActivationCode'); } - return this.showNoProfilesMessage ? this.i18n('scanQRCodeNoProfiles') : - this.i18n('scanQRCode'); + return this.i18n('scanQRCode'); }, /** @@ -515,5 +571,5 @@ Polymer({ */ shouldActivationCodeInputBeInvalid_(state) { return state === PageState.MANUAL_ENTRY_INSTALL_FAILURE; - } + }, }); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_verification_page.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_verification_page.html new file mode 100644 index 00000000000..6bdfa3101fb --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_verification_page.html @@ -0,0 +1,40 @@ +<link rel="import" href="../../../html/polymer.html"> + +<link rel="import" href="base_page.html"> +<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html"> +<link rel="import" href="../../../html/i18n_behavior.html"> +<link rel="import" href="chrome://resources/cr_elements/cr_lottie/cr_lottie.html"> + +<dom-module id="activation-verification-page"> + <template> + <style> + #pageBody { + height: 282px; + margin-top: -20px; + overflow: hidden; + } + + #animationContainer { + display: flex; + height: 216px; + margin-bottom: 30px; + margin-top: 24px; + } + + cr-lottie { + margin: auto; + } + </style> + + <base-page> + <div slot="page-body" id="pageBody" class="layout vertical center-center"> + <span>[[i18n('verifyingActivationCode')]]</span> + <div id="animationContainer"> + <cr-lottie id="spinner" animation-url="spinner.json" autoplay> + </cr-lottie> + </div> + </div> + </base-page> + </template> + <script src="activation_verification_page.js"></script> +</dom-module> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_verification_page.js b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_verification_page.js new file mode 100644 index 00000000000..5868da108e2 --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/activation_verification_page.js @@ -0,0 +1,13 @@ +// Copyright 2019 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. + +/** + * This page is displayed when the activation code is being verified, and + * an ESim profile is being installed. + */ +Polymer({ + is: 'activation-verification-page', + + behaviors: [I18nBehavior], +}); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/base_page.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/base_page.html index 2f8fc2a6930..854094f228c 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/base_page.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/base_page.html @@ -8,6 +8,12 @@ <dom-module id="base-page"> <template> <style include="iron-positioning"> + :host { + display: flex; + flex-direction: column; + height: 100%; + } + #title { color: var(--google-grey-900); font-weight: normal; @@ -15,13 +21,13 @@ } #message { + height: var(--base-page-message-height, auto); margin-bottom: 20px; } :host ::slotted([slot='page-body']) { display: block; - height: 256px; - width: 100%; + flex: 1 1 auto; } #message iron-icon { @@ -31,7 +37,7 @@ <template is="dom-if" if="[[isTitleShown_(title)]]" restamp> <h3 id="title">[[getTitle_(title)]]</h3> </template> - <div id="message"> + <div id="message" aria-live="polite" aria-atomic="true"> <iron-icon icon$="cellular-setup:[[messageIcon]]" hidden$="[[!isMessageIconShown_(messageIcon)]]"> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/button_bar.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/button_bar.html index 65323d312d2..da3132b49d0 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/button_bar.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/button_bar.html @@ -15,7 +15,11 @@ :host { display: flex; justify-content: flex-end; - padding: 10px 0; + padding: 10px 0 20px 0; + } + + #forward:focus { + box-shadow: 0 0 0 2px var(--focus-shadow-color); } #flex { diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_dialog.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_dialog.html new file mode 100644 index 00000000000..95d7cedf562 --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_dialog.html @@ -0,0 +1,71 @@ +<link rel="import" href="chrome://resources/html/polymer.html"> + +<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html"> +<link rel="import" href="chrome://resources/html/i18n_behavior.html"> +<link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html"> +<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> +<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> + +<dom-module id="cellular-eid-dialog"> + <template> + <style include="cr-shared-style iron-flex"> + :host { + --cr-dialog-body-padding-horizontal: 24px; + --cr-dialog-button-container-padding-bottom: 20px; + --cr-dialog-button-container-padding-horizontal: 24px; + --cr-dialog-width: 320px; + --cr-dialog-title-slot-padding-bottom: 12px; + --cr-dialog-title-slot-padding-end: 24px; + --cr-dialog-title-slot-padding-start: 24px; + --cr-dialog-title-font-size: calc(16 / 13 * 100%); + } + + .cellular-network-list-header { + border-top: var(--cr-separator-line); + padding: 16px 0 8px 0; + } + + .cellular-network-content { + margin: 8px 0 8px 32px; + } + + .cellular-not-setup { + color: var(--google-grey-700); + font-size: smaller; + margin-bottom: 16px; + } + + #qrCodeCanvas { + display: block; + margin: 20px auto 16px auto; + max-width: calc(var(--cr-dialog-width) - + var(--cr-dialog-title-slot-padding-start) - + var(--cr-dialog-title-slot-padding-end)); + } + + #eid { + margin-top: 16px; + } + </style> + <cr-dialog id="eidDialog" show-on-attach> + <div slot="title">[[i18n('eidPopupTitle')]]</div> + <div slot="body" aria-label="[[getA11yLabel_(eid_)]]"> + <div id="eidDescription" aria-hidden="true"> + [[i18n('eidPopupDescription')]] + </div> + <div id="eid" aria-hidden="true">[[eid_]]</div> + <canvas id="qrCodeCanvas" + width="[[canvasSize_]]" + height="[[canvasSize_]]"> + </canvas> + </div> + <div slot="button-container"> + <cr-button id="done" class="action-button" + on-click="onDonePressed_"> + [[i18n('done')]] + </cr-button> + </div> + </cr-dialog> + </template> + <script src="cellular_eid_dialog.js"></script> +</dom-module>
\ No newline at end of file diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_popup.js b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_dialog.js index 983d4bbe040..f6a23de61f3 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_popup.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_dialog.js @@ -8,13 +8,11 @@ // The size of each tile in pixels. const QR_CODE_TILE_SIZE = 5; -// Amount of padding around the QR code in pixels. -const QR_CODE_PADDING = 4 * QR_CODE_TILE_SIZE; // Styling for filled tiles in the QR code. const QR_CODE_FILL_STYLE = '#000000'; Polymer({ - is: 'cellular-eid-popup', + is: 'cellular-eid-dialog', behaviors: [ I18nBehavior, @@ -22,7 +20,7 @@ Polymer({ properties: { /** - * The euicc object whose EID and QRCode should be shown in the popup. + * The euicc object whose EID and QRCode should be shown in the dialog. */ euicc: Object, @@ -45,16 +43,14 @@ Polymer({ } this.euicc.getEidQRCode().then(this.updateQRCode_.bind(this)); this.euicc.getProperties().then(this.updateEid_.bind(this)); - }, - - /** @override */ - focus() { - this.$$('.dialog').focus(); + requestAnimationFrame(() => { + this.$.done.focus(); + }); }, /**@private */ - onCloseTap_() { - this.fire('close-eid-popup'); + onDonePressed_() { + this.$.eidDialog.close(); }, /** @@ -65,8 +61,7 @@ Polymer({ if (!response || !response.qrCode) { return; } - this.canvasSize_ = - response.qrCode.size * QR_CODE_TILE_SIZE + 2 * QR_CODE_PADDING; + this.canvasSize_ = response.qrCode.size * QR_CODE_TILE_SIZE; Polymer.dom.flush(); const context = this.getCanvasContext_(); context.clearRect(0, 0, this.canvasSize_, this.canvasSize_); @@ -76,8 +71,7 @@ Polymer({ for (let y = 0; y < response.qrCode.size; y++) { if (response.qrCode.data[index]) { context.fillRect( - x * QR_CODE_TILE_SIZE + QR_CODE_PADDING, - y * QR_CODE_TILE_SIZE + QR_CODE_PADDING, QR_CODE_TILE_SIZE, + x * QR_CODE_TILE_SIZE, y * QR_CODE_TILE_SIZE, QR_CODE_TILE_SIZE, QR_CODE_TILE_SIZE); } index++; @@ -113,5 +107,14 @@ Polymer({ */ setCanvasContextForTest(canvasContext) { this.canvasContext_ = canvasContext; - } + }, + + /** + * @param {string} eid + * @return {string} + * @private + */ + getA11yLabel_(eid) { + return this.i18n('eidPopupA11yLabel', eid); + }, }); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_popup.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_popup.html deleted file mode 100644 index b045ae54b57..00000000000 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_eid_popup.html +++ /dev/null @@ -1,96 +0,0 @@ -<link rel="import" href="chrome://resources/html/polymer.html"> - -<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html"> -<link rel="import" href="chrome://resources/html/i18n_behavior.html"> -<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html"> -<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html"> - -<dom-module id="cellular-eid-popup"> - <template> - <style include="cr-shared-style iron-flex"> - :host { - background-color: white; - border-radius: 4px; - box-shadow: 0 2px 5px rgba(0,0,0,0.18); - margin: 34px 0 0 12px; - position: absolute; - width: 275px; - z-index: 1; - } - - .cellular-network-list-header { - border-top: var(--cr-separator-line); - padding: 16px 0 8px 0; - } - - .body { - margin-top: 6px; - } - - .cellular-network-content { - margin: 8px 0 8px 32px; - } - - .cellular-not-setup { - color: var(--google-grey-700); - font-size: smaller; - margin-bottom: 16px; - } - - .header { - display: flex; - justify-content: space-between; - } - - .title { - align-self: center; - } - - #container { - padding: 8px 16px; - } - - #closeBtn { - align-self: center; - cursor: pointer; - } - - #qrCodeCanvas { - width: 100%; - } - - #eid { - margin-top: 15px; - } - </style> - <div id="container" - class="dialog" - tabindex="1" - aria-labelledby="eidTitle" - aria-describedby="eidDescription"> - <div class="header"> - <div id="eidTitle" class="title" arian-hidden="true"> - [[i18n('eidPopupTitle')]] - </div> - <cr-icon-button - id="eidPopupCloseIcon" - iron-icon="cr:close" - title="[[i18n('closeEidPopupButtonLabel')]]" - aria-label="[[i18n('closeEidPopupButtonLabel')]]" - on-click="onCloseTap_"> - </cr-icon-button> - </div> - <div class="body"> - <div id="eidDescription" arian-hidden="true"> - [[i18n('eidPopupDescription')]] - </div> - <div id="eid">[[eid_]]</div> - <canvas id="qrCodeCanvas" - width="[[canvasSize_]]" - height="[[canvasSize_]]"> - </canvas> - </div> - </div> - </template> - <script src="cellular_eid_popup.js"></script> -</dom-module>
\ No newline at end of file diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup.html index 830547c73b0..464d0994d64 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup.html @@ -31,6 +31,7 @@ button-state="{{buttonState_}}" delegate="[[delegate]]" id="esim-flow-ui" + header="{{flowHeader}}" forward-button-label="{{forwardButtonLabel_}}"> </esim-flow-ui> </template> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup.js b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup.js index 3968c19e336..e2c7b944dda 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup.js @@ -15,9 +15,24 @@ Polymer({ /** @type {!cellular_setup.CellularSetupDelegate} */ delegate: Object, + /** + * Title of the flow, shown at the top of the dialog. No title shown if the + * string is empty. + */ flowTitle: { type: String, notify: true, + value: '', + }, + + /** + * Header for the flow, shown below the title. No header shown if the string + * is empty. + */ + flowHeader: { + type: String, + notify: true, + value: '', }, /** diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup_icons.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup_icons.html index c68f68cdbb1..23e112bc3aa 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup_icons.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup_icons.html @@ -13,6 +13,7 @@ <g id="switch-camera" viewBox="0 0 20 20"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 9V7H4.802A5.996 5.996 0 0 1 10 4a6 6 0 0 1 5.917 5h2.021c-.491-3.945-3.853-7-7.93-7a7.992 7.992 0 0 0-6.009 2.712L4 3H2v6h5zm5.938 2v2h2.198a5.996 5.996 0 0 1-5.198 3 6 6 0 0 1-5.917-5H2c.492 3.945 3.853 7 7.93 7a7.992 7.992 0 0 0 6.009-2.712V17h2v-6h-5zM10 12a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></g> <g id="try-again" viewBox="0 0 20 20"><path path fill-rule="evenodd" clip-rule="evenodd" d="M10 3C6.136 3 3 6.136 3 10C3 13.864 6.136 17 10 17C12.1865 17 14.1399 15.9959 15.4239 14.4239L13.9984 12.9984C13.0852 14.2129 11.6325 15 10 15C7.24375 15 5 12.7563 5 10C5 7.24375 7.24375 5 10 5C11.6318 5 13.0839 5.78641 13.9972 7H11V9H17V3H15V5.10253C13.7292 3.80529 11.9581 3 10 3Z"></g> <g id="warning" viewBox="0 0 20 20"><path d="M9 12H11V8H9V12Z"></path><path d="M11 15H9V13H11V15Z"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M9.13177 2.50386C9.51566 1.83205 10.4844 1.83205 10.8683 2.50386L18.8683 16.5039C19.2492 17.1705 18.7678 18 18 18H2.00001C1.23219 18 0.750823 17.1705 1.13177 16.5039L9.13177 2.50386ZM10 5.01556L3.72321 16H16.2768L10 5.01556Z"></g> + <g id="info" viewBox="0 0 24 24"><path d="M11 17h2v-6h-2v6zm1-15C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zM11 9h2V7h-2v2z"></path></g> </defs> </svg> </iron-iconset-svg>
\ No newline at end of file diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/confirmation_code_page.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/confirmation_code_page.html index c814032de0e..5cd1eda37e4 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/confirmation_code_page.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/confirmation_code_page.html @@ -9,6 +9,7 @@ <template> <style include="iron-flex iron-positioning"> [slot='page-body'] { + height: 282px; margin-top: -20px; } @@ -45,7 +46,7 @@ #loadingMessage { bottom: 0; - color: var(--google-grey-refresh-500); + color: var(--google-grey-600); font-size: var(--cr-form-field-label-font-size); letter-spacing: .4px; line-height: var(--cr-form-field-label-line-height); @@ -54,7 +55,9 @@ </style> <base-page> <div slot="page-body"> - <div id="description">[[i18n('confirmationCodeMessage')]]</div> + <div aria-live="polite"> + [[i18n('confirmationCodeMessage')]] + </div> <div id="outerDiv" class="layout horizontal center"> <div class="container"> <div id="details" hidden$="[[!shouldShowProfileDetails_(profile)]]"> @@ -68,7 +71,6 @@ <cr-input id="confirmationCode" label="[[i18n('confirmationCodeInput')]]" value="{{confirmationCode}}" - aria-describedby="description" error-message="[[i18n('confirmationCodeError')]]" invalid="[[showError]]" disabled="[[showBusy]]" diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.html index 9f077302b5d..21614dde755 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.html @@ -12,6 +12,7 @@ <link rel="import" href="cellular_setup_delegate.html"> <link rel="import" href="setup_loading_page.html"> <link rel="import" href="activation_code_page.html"> +<link rel="import" href="activation_verification_page.html"> <link rel="import" href="final_page.html"> <link rel="import" href="profile_discovery_list_page.html"> <link rel="import" href="confirmation_code_page.html"> @@ -29,9 +30,7 @@ <iron-pages attr-for-selected="id" selected="[[selectedESimPageName_]]"> <setup-loading-page id="profileLoadingPage" - delegate="[[delegate]]" - loading-message="[[i18n('eSimProfileDetectMessage')]]" - state="[[getLoadingPageState_(hasHadActivePSimNetwork_)]]"> + loading-message="[[getLoadingMessage_(hasHadActiveCellularNetwork_)]]"> </setup-loading-page> <profile-discovery-list-page id="profileDiscoveryPage" pending-profiles="[[pendingProfiles_]]" @@ -40,10 +39,12 @@ </profile-discovery-list-page> <activation-code-page id="activationCodePage" activation-code="{{activationCode_}}" - show-no-profiles-message="[[getShowNoProfilesMessage_(pendingProfiles_)]]" show-error="{{showError_}}" show-busy="[[shouldShowSubpageBusy_(state_)]]"> </activation-code-page> + <setup-loading-page id="activationVerificationPage" + loading-message="[[i18n('verifyingActivationCode')]]"> + </setup-loading-page> <confirmation-code-page id="confirmationCodePage" confirmation-code="{{confirmationCode_}}" profile="[[selectedProfile_]]" @@ -51,11 +52,11 @@ show-busy="[[shouldShowSubpageBusy_(state_)]]"> </confirmation-code-page> <final-page - id="finalPage" - delegate="[[delegate]]" - show-error="[[showError_]]" - message="[[i18n('eSimFinalPageMessage')]]" - error-message="[[i18n('eSimFinalPageErrorMessage')]]"> + id="finalPage" + delegate="[[delegate]]" + show-error="[[showError_]]" + message="[[i18n('eSimFinalPageMessage')]]" + error-message="[[i18n('eSimFinalPageErrorMessage')]]"> </final-page> </iron-pages> </template> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.js b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.js index 4b33637f8f7..891470fbecf 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_flow_ui.js @@ -8,6 +8,7 @@ cr.define('cellular_setup', function() { PROFILE_LOADING: 'profileLoadingPage', PROFILE_DISCOVERY: 'profileDiscoveryPage', ACTIVATION_CODE: 'activationCodePage', + ACTIVATION_VERIFCATION: 'activationVerificationPage', CONFIRMATION_CODE: 'confirmationCodePage', FINAL: 'finalPage', }; @@ -69,6 +70,16 @@ cr.define('cellular_setup', function() { /** @type {!cellular_setup.CellularSetupDelegate} */ delegate: Object, + /** + * Header shown at the top of the flow. No header shown if the string is + * empty. + */ + header: { + type: String, + notify: true, + computed: 'computeHeader_(selectedESimPageName_, showError_)', + }, + forwardButtonLabel: { type: String, notify: true, @@ -133,7 +144,7 @@ cr.define('cellular_setup', function() { }, /** @private */ - hasHadActivePSimNetwork_: { + hasHadActiveCellularNetwork_: { type: Boolean, value: false, }, @@ -354,9 +365,11 @@ cr.define('cellular_setup', function() { break; case ESimUiState.ACTIVATION_CODE_ENTRY: case ESimUiState.ACTIVATION_CODE_ENTRY_READY: - case ESimUiState.ACTIVATION_CODE_ENTRY_INSTALLING: this.selectedESimPageName_ = ESimPageName.ACTIVATION_CODE; break; + case ESimUiState.ACTIVATION_CODE_ENTRY_INSTALLING: + this.selectedESimPageName_ = ESimPageName.ACTIVATION_VERIFCATION; + break; case ESimUiState.CONFIRMATION_CODE_ENTRY: case ESimUiState.CONFIRMATION_CODE_ENTRY_READY: case ESimUiState.CONFIRMATION_CODE_ENTRY_INSTALLING: @@ -433,6 +446,10 @@ cr.define('cellular_setup', function() { this.delegate.shouldShowCancelButton() ? cellularSetup.ButtonState.ENABLED : cellularSetup.ButtonState.HIDDEN; + const cancelButtonStateIfDisabled = + this.delegate.shouldShowCancelButton() ? + cellularSetup.ButtonState.DISABLED : + cellularSetup.ButtonState.HIDDEN; switch (this.state_) { case ESimUiState.PROFILE_SEARCH: this.forwardButtonLabel = this.i18n('next'); @@ -454,7 +471,7 @@ cr.define('cellular_setup', function() { break; case ESimUiState.ACTIVATION_CODE_ENTRY_INSTALLING: buttonState = this.generateButtonStateForActivationPage_( - /*enableForwardBtn*/ false, cancelButtonStateIfEnabled, + /*enableForwardBtn*/ false, cancelButtonStateIfDisabled, /*isInstalling*/ true); break; case ESimUiState.CONFIRMATION_CODE_ENTRY: @@ -469,7 +486,7 @@ cr.define('cellular_setup', function() { break; case ESimUiState.CONFIRMATION_CODE_ENTRY_INSTALLING: buttonState = this.generateButtonStateForConfirmationPage_( - /*enableForwardBtn*/ false, cancelButtonStateIfEnabled, + /*enableForwardBtn*/ false, cancelButtonStateIfDisabled, /*isInstalling*/ true); break; case ESimUiState.PROFILE_SELECTION: @@ -485,7 +502,7 @@ cr.define('cellular_setup', function() { case ESimUiState.PROFILE_SELECTION_INSTALLING: buttonState = { backward: cellularSetup.ButtonState.HIDDEN, - cancel: cancelButtonStateIfEnabled, + cancel: cancelButtonStateIfDisabled, forward: cellularSetup.ButtonState.DISABLED, }; break; @@ -635,19 +652,14 @@ cr.define('cellular_setup', function() { } }, - /** @private */ - getShowNoProfilesMessage_() { - return !(this.pendingProfiles_ && this.pendingProfiles_.length > 0); - }, - /** NetworkListenerBehavior override */ onNetworkStateListChanged() { - hasActivePSimNetwork().then((hasActive) => { - // If hasHadActivePSimNetwork_ has been set to true, don't set to false - // again as we should show the cellular disconnect warning for the + hasActiveCellularNetwork().then((hasActive) => { + // If hasHadActiveCellularNetwork_ has been set to true, don't set to + // false again as we should show the cellular disconnect warning for the // duration of the flow's lifecycle. if (hasActive) { - this.hasHadActivePSimNetwork_ = hasActive; + this.hasHadActiveCellularNetwork_ = hasActive; } }); }, @@ -659,14 +671,24 @@ cr.define('cellular_setup', function() { this.state_ === ESimUiState.PROFILE_SELECTION_INSTALLING; }, + /** @private */ + getLoadingMessage_() { + return this.hasHadActiveCellularNetwork_ ? + this.i18n('eSimProfileDetectDuringActiveCellularConnectionMessage') : + this.i18n('eSimProfileDetectMessage'); + }, + /** - * @param {boolean} hasActivePSimNetwork + * @return {string} * @private */ - getLoadingPageState_(hasActivePSimNetwork) { - return hasActivePSimNetwork ? - LoadingPageState.CELLULAR_DISCONNECT_WARNING : - LoadingPageState.LOADING; + computeHeader_() { + if (this.selectedESimPageName_ === ESimPageName.FINAL && + !this.showError_) { + return this.i18n('eSimFinalPageSuccessHeader'); + } + + return ''; }, }); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_manager_utils.js b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_manager_utils.js index 4f5613aedad..85941bc472b 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_manager_utils.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/esim_manager_utils.js @@ -15,20 +15,41 @@ cr.define('cellular_setup', function() { */ /* #export */ function getPendingESimProfiles(euicc) { return euicc.getProfileList().then(response => { - return filterForPendingProfiles_(response.profiles); + return filterByProfileProperties_(response.profiles, properties => { + return properties.state === + chromeos.cellularSetup.mojom.ProfileState.kPending; + }); }); } /** + * Fetches the EUICC's eSIM profiles with status not 'Pending'. + * @param {!chromeos.cellularSetup.mojom.EuiccRemote} euicc + * @return {!Promise<!Array<!chromeos.cellularSetup.mojom.ESimProfileRemote>>} + */ + /* #export */ function getNonPendingESimProfiles(euicc) { + return euicc.getProfileList().then(response => { + return filterByProfileProperties_(response.profiles, properties => { + return properties.state !== + chromeos.cellularSetup.mojom.ProfileState.kPending; + }); + }); + } + + /** + * Filters each profile in profiles by callback, which is given the profile's + * properties as an argument and returns true or false. Does not guarantee + * that profiles retains the same order. * @private * @param {!Array<!chromeos.cellularSetup.mojom.ESimProfileRemote>} profiles + * @param {function(chromeos.cellularSetup.mojom.ESimProfileProperties)} + * callback * @return {!Promise<Array<!chromeos.cellularSetup.mojom.ESimProfileRemote>>} */ - function filterForPendingProfiles_(profiles) { + function filterByProfileProperties_(profiles, callback) { const profilePromises = profiles.map(profile => { return profile.getProperties().then(response => { - if (response.properties.state !== - chromeos.cellularSetup.mojom.ProfileState.kPending) { + if (!callback(response.properties)) { return null; } return profile; @@ -42,6 +63,19 @@ cr.define('cellular_setup', function() { } /** + * @return {!Promise<number>} + */ + /* #export */ function getNumESimProfiles() { + return getEuicc() + .then(euicc => { + return euicc.getProfileList(); + }) + .then(response => { + return response.profiles.length; + }); + } + + /** * Returns the Euicc that should be used for eSim operations or null * if there is none available. * @return {!Promise<?chromeos.cellularSetup.mojom.EuiccRemote>} @@ -62,12 +96,14 @@ cr.define('cellular_setup', function() { } /** - * Returns the eSIM profile with iccid in the first EUICC and null if none - * found. * @param {string} iccid - * @return {!Promise<?chromeos.cellularSetup.mojom.ESimProfileRemote>} + * @return {!Promise<?{ + * profileRemote: chromeos.cellularSetup.mojom.ESimProfileRemote, + * profileProperties: chromeos.cellularSetup.mojom.ESimProfileProperties + * }>} Returns a eSIM profile remote and profile properties for given + * |iccid|. */ - /* #export */ async function getESimProfile(iccid) { + async function getESimProfileDetails(iccid) { if (!iccid) { return null; } @@ -80,19 +116,54 @@ cr.define('cellular_setup', function() { const esimProfilesRemotes = await euicc.getProfileList(); for (const profileRemote of esimProfilesRemotes.profiles) { - const profileProperties = await profileRemote.getProperties(); + const profilePropertiesResponse = await profileRemote.getProperties(); + if (!profilePropertiesResponse || !profilePropertiesResponse.properties) { + return null; + } - if (profileProperties.properties.iccid === iccid) { - return profileRemote; + const profileProperties = profilePropertiesResponse.properties; + if (profileProperties.iccid === iccid) { + return {profileRemote, profileProperties}; } } return null; } + /** + * Returns the eSIM profile with iccid in the first EUICC or null if none + * is found. + * @param {string} iccid + * @return {!Promise<?chromeos.cellularSetup.mojom.ESimProfileRemote>} + */ + /* #export */ async function getESimProfile(iccid) { + const details = await getESimProfileDetails(iccid); + if (!details) { + return null; + } + return details.profileRemote; + } + + /** + * Returns properties for eSIM profile with iccid in the first EUICC or null + * if none is found. + * @param {string} iccid + * @return {!Promise<?chromeos.cellularSetup.mojom.ESimProfileProperties>} + */ + /* #export */ async function getESimProfileProperties(iccid) { + const details = await getESimProfileDetails(iccid); + if (!details) { + return null; + } + return details.profileProperties; + } + // #cr_define_end return { getEuicc, getESimProfile, + getESimProfileProperties, getPendingESimProfiles, + getNonPendingESimProfiles, + getNumESimProfiles, }; }); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/final_page.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/final_page.html index 262113316ef..97cbedd7db9 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/final_page.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/final_page.html @@ -14,6 +14,7 @@ background-position: center center; background-repeat: no-repeat; background-size: contain; + height: 242px; } .error[slot='page-body'] { diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.html index 057152092b6..809db7dc92b 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.html @@ -22,13 +22,18 @@ flex: 1 1 auto; flex-direction: column; } + + iron-pages { + height: 400px; + } </style> <iron-pages attr-for-selected="id" selected="[[selectedPSimPageName_]]" selected-item="{{selectedPage_}}"> <setup-loading-page id="simDetectPage" - delegate="[[delegate]]" state="[[getLoadingPageState_(state_)]]" - loading-message="[[i18n('establishNetworkConnectionMessage')]]"> + loading-title="[[getLoadingTitle_(state_)]]" + loading-message="[[getLoadingMessage_(state_)]]" + is-sim-detect-error="[[isSimDetectError_(state_)]]"> </setup-loading-page> <provisioning-page id="provisioningPage" delegate="[[delegate]]" show-error="{{showError_}}" diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.js b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.js index 295ad42fef7..860748a72e9 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/psim_flow_ui.js @@ -304,6 +304,7 @@ cr.define('cellularSetup', function() { this.state_ = PSimUIState.STARTING_ACTIVATION; this.startActivationAttempts_ = 0; this.updateButtonBarState_(); + this.fire('focus-default-button'); }, navigateForward() { @@ -575,17 +576,28 @@ cr.define('cellularSetup', function() { PSimUIState.ACTIVATION_FAILURE; }, - /** - * @return {LoadingPageState} - * @private - */ - getLoadingPageState_() { + /** @return {string} */ + getLoadingMessage_() { if (this.state_ === PSimUIState.TIMEOUT_START_ACTIVATION) { - return LoadingPageState.SIM_DETECT_ERROR; + return this.i18n('simDetectPageErrorMessage'); } else if (this.state_ === PSimUIState.FINAL_TIMEOUT_START_ACTIVATION) { - return LoadingPageState.FINAL_SIM_DETECT_ERROR; + return this.i18n('simDetectPageFinalErrorMessage'); } - return LoadingPageState.LOADING; + return this.i18n('establishNetworkConnectionMessage'); + }, + + /** @return {boolean} */ + isSimDetectError_() { + return this.state_ === PSimUIState.TIMEOUT_START_ACTIVATION || + this.state_ === PSimUIState.FINAL_TIMEOUT_START_ACTIVATION; + }, + + /** @return {string} */ + getLoadingTitle_() { + if (this.delegate.shouldShowPageTitle() && this.isSimDetectError_()) { + return this.i18n('simDetectPageErrorTitle'); + } + return ''; }, }); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/setup_loading_page.html b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/setup_loading_page.html index 3b03de44d5b..e09c8b0a788 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/setup_loading_page.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/setup_loading_page.html @@ -6,15 +6,17 @@ <link rel="import" href="../../../cr_elements/hidden_style_css.html"> <link rel="import" href="chrome://resources/html/assert.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html"> -<link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html"> +<link rel="import" href="chrome://resources/cr_elements/cr_lottie/cr_lottie.html"> <dom-module id="setup-loading-page"> <template> <style include="iron-flex cr-hidden-style"> - paper-spinner-lite { - height: 32px; - margin-bottom: 8px; - width: 32px; + #animationContainer { + align-items: flex-end; + display: flex; + height: 216px; + justify-content: center; + margin-bottom: 54px; } #simDetectError { @@ -26,20 +28,28 @@ width: 100%; } - #networkConnectionMessage { - text-align: center; + #pageBody { + height: 222px; + } + + cr-lottie { + height: 85%; + } + + base-page { + --base-page-message-height: 40px; } </style> - <base-page title="[[getTitle_(state)]]" - message="[[getMessage_(state)]]" - message-icon="[[getMessageIcon_(state)]]"> - <div slot="page-body" class="layout vertical center-center"> - <paper-spinner-lite active hidden$="[[shouldShowSimDetectError_(state)]]"> - </paper-spinner-lite> - <div id="networkConnectionMessage" hidden$="[[shouldShowSimDetectError_(state)]]"> - [[loadingMessage]] + <base-page title="[[loadingTitle]]" message="[[loadingMessage]]"> + <div slot="page-body" id="pageBody" class="layout vertical center-center"> + <template is="dom-if" if="[[!isSimDetectError]]" restamp> + <div id="animationContainer"> + <cr-lottie id="spinner" animation-url="spinner.json" autoplay> + </cr-lottie> + </div> + </template> + <div id="simDetectError" hidden$="[[!isSimDetectError]]"> </div> - <div id="simDetectError" hidden$="[[!shouldShowSimDetectError_(state)]]"></div> </div> </base-page> </template> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/setup_loading_page.js b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/setup_loading_page.js index 4656295e61d..c2c7772cd05 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/setup_loading_page.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/cellular_setup/setup_loading_page.js @@ -2,19 +2,9 @@ // Use of this source code is governed by a BSD-style license that can be // found in the LICENSE file. -/** @enum {number} */ -/* #export */ const LoadingPageState = { - LOADING: 1, - SIM_DETECT_ERROR: 2, - FINAL_SIM_DETECT_ERROR: 3, - CELLULAR_DISCONNECT_WARNING: 4, -}; - /** - * Loading subpage in Cellular Setup flow. This element contains image - * asset and description to indicate that a SIM detection or eSIM profiles - * loading is in progress. It can show a 'detecting sim' error or a 'cellular - * disconnection' warning depending on its state. + * Loading subpage in Cellular Setup flow that shows an in progress operation or + * an error. This element contains error image asset and loading animation. */ Polymer({ is: 'setup-loading-page', @@ -22,15 +12,6 @@ Polymer({ behaviors: [I18nBehavior], properties: { - /** @type {!cellular_setup.CellularSetupDelegate} */ - delegate: Object, - - /** @type {!LoadingPageState} */ - state: { - type: Object, - value: LoadingPageState.LOADING, - }, - /** * Message displayed with spinner when in LOADING state. */ @@ -38,58 +19,22 @@ Polymer({ type: String, value: '', }, - }, - - /** - * @param {LoadingPageState} state - * @return {?string} - * @private - */ - getTitle_(state) { - if (this.delegate.shouldShowPageTitle() && - state === LoadingPageState.SIM_DETECT_ERROR) { - return this.i18n('simDetectPageErrorTitle'); - } - return null; - }, - - /** - * @param {LoadingPageState} state - * @return {string} - * @private - */ - getMessage_(state) { - switch (state) { - case LoadingPageState.SIM_DETECT_ERROR: - return this.i18n('simDetectPageErrorMessage'); - case LoadingPageState.FINAL_SIM_DETECT_ERROR: - return this.i18n('simDetectPageFinalErrorMessage'); - case LoadingPageState.CELLULAR_DISCONNECT_WARNING: - return this.i18n('eSimConnectionWarning'); - case LoadingPageState.LOADING: - return ''; - default: - assertNotReached(); - } - }, - /** - * @param {LoadingPageState} state - * @return {string} - * @private - */ - getMessageIcon_(state) { - return state === LoadingPageState.CELLULAR_DISCONNECT_WARNING ? 'warning' : - ''; - }, + /** + * Title for page if needed. + * @type {?string} + */ + loadingTitle: { + type: Object, + value: '', + }, - /** - * @param {LoadingPageState} state - * @return {boolean} - * @private - */ - shouldShowSimDetectError_(state) { - return state === LoadingPageState.SIM_DETECT_ERROR || - state === LoadingPageState.FINAL_SIM_DETECT_ERROR; + /** + * Displays a sim detect error graphic if true. + */ + isSimDetectError: { + type: Boolean, + value: false, + }, }, }); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/BUILD.gn b/chromium/ui/webui/resources/cr_components/chromeos/network/BUILD.gn index 975267ff4f6..61ff21cddb5 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/BUILD.gn +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/BUILD.gn @@ -72,6 +72,7 @@ js_library("network_apnlist") { "//ui/webui/resources/js:i18n_behavior", "//ui/webui/resources/js:load_time_data", ] + externs_list = [ "$externs_path/metrics_private.js" ] } js_library("network_choose_mobile") { @@ -195,6 +196,7 @@ js_library("network_siminfo") { ":mojo_interface_provider", ":onc_mojo", ":sim_lock_dialogs", + "//ui/webui/resources/cr_elements/cr_button:cr_button", "//ui/webui/resources/js:i18n_behavior", "//ui/webui/resources/js/cr/ui:focus_without_ink", ] @@ -356,6 +358,7 @@ js_library("network_apnlist.m") { "//ui/webui/resources/js:load_time_data.m", ] extra_deps = [ ":network_apnlist_module" ] + externs_list = [ "$externs_path/metrics_private.js" ] } js_library("network_choose_mobile.m") { diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_locked.svg b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_locked.svg new file mode 100644 index 00000000000..9ed810090fa --- /dev/null +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_locked.svg @@ -0,0 +1,3 @@ +<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> +<path fill-rule="evenodd" clip-rule="evenodd" d="M14.1876 9.58912C14.4644 9.58912 14.7358 9.6125 15 9.65744V3.82508C15 3.09148 14.1249 2.7241 13.6131 3.24283L2.23957 15.5943C1.72779 16.113 2.09026 17 2.81403 17H9.96527C9.55054 16.2733 9.31317 15.4296 9.31317 14.5297C9.31317 11.8011 11.4955 9.58912 14.1876 9.58912ZM16 16V14H13V16H16ZM13 13C12.4477 13 12 13.4477 12 14V16C12 16.5523 12.4477 17 13 17H16C16.5523 17 17 16.5523 17 16V14C17 13.4477 16.5523 13 16 13V12.5C16 11.6716 15.3284 11 14.5 11C13.6716 11 13 11.6716 13 12.5V13ZM14 13H15V12.5C15 12.2239 14.7761 12 14.5 12C14.2239 12 14 12.2239 14 12.5V13Z"/> +</svg> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_utils.js b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_utils.js index 27ab8f4fe33..ce089662586 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_utils.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/cellular_utils.js @@ -8,10 +8,11 @@ // clang-format on /** - * Checks if the device has a currently active pSIM network. + * Checks if the device has a cellular network with connectionState not + * kNotConnected. * @return {!Promise<boolean>} */ -/* #export */ function hasActivePSimNetwork() { +/* #export */ function hasActiveCellularNetwork() { const mojom = chromeos.networkConfig.mojom; const networkConfig = network_config.MojoInterfaceProviderImpl.getInstance() .getMojoServiceRemote(); @@ -22,35 +23,14 @@ limit: mojom.NO_LIMIT, }) .then((response) => { - // Filter out non-connected networks and check the remaining if they are - // pSIM. - return Promise.all(response.result - .filter(network => { - return network.connectionState !== - mojom.ConnectionStateType.kNotConnected; - }) - .map(networkIsPSim_)); - }) - .then((networkIsPSimResults) => { - return networkIsPSimResults.some((isPSimNetwork) => isPSimNetwork); + return response.result.some(network => { + return network.connectionState !== + mojom.ConnectionStateType.kNotConnected; + }); }); } /** - * Returns whether a network is a pSIM network or not. - * @private - * @param {!chromeos.networkConfig.mojom.NetworkStateProperties} network - * @return {!Promise<boolean>} - */ -function networkIsPSim_(network) { - const networkConfig = network_config.MojoInterfaceProviderImpl.getInstance() - .getMojoServiceRemote(); - return networkConfig.getManagedProperties(network.guid).then((response) => { - return !response.result.typeProperties.cellular.eid; - }); -} - -/** * Returns number of phyical SIM and eSIM slots on the current device * @param {!chromeos.networkConfig.mojom.DeviceStateProperties|undefined} * deviceState diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_apnlist.html b/chromium/ui/webui/resources/cr_components/chromeos/network/network_apnlist.html index 3ba9ea1eef9..26acaae2c03 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_apnlist.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_apnlist.html @@ -16,7 +16,6 @@ <style include="network-shared md-select"> :host { --cr-property-box-width: 200px; - padding-bottom: 16px; } cr-button { diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_apnlist.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_apnlist.js index 6e82d5aff8d..00711c271a5 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_apnlist.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_apnlist.js @@ -10,6 +10,9 @@ const kDefaultAccessPointName = 'NONE'; const kOtherAccessPointName = 'Other'; +const USE_ATTACH_APN_ON_SAVE_METRIC_NAME = + 'Network.Cellular.Apn.UseAttachApnOnSave'; + Polymer({ is: 'network-apnlist', @@ -313,16 +316,19 @@ Polymer({ /** * Event triggered when the Other APN 'Save' button is tapped. - * @param {!Event} event * @private */ - onSaveOtherTap_(event) { - this.sendApnChange_(this.selectedApn_); + onSaveOtherTap_() { + if (this.sendApnChange_(this.selectedApn_) && this.isAttachApnAllowed_) { + chrome.metricsPrivate.recordBoolean( + USE_ATTACH_APN_ON_SAVE_METRIC_NAME, this.isAttachApnToggleEnabled_); + } }, /** - * Send the apn-change event. + * Attempts to send the apn-change event. Returns true if it succeeds. * @param {string} name The APN name property. + * @return {boolean} * @private */ sendApnChange_(name) { @@ -331,7 +337,7 @@ Polymer({ if (!this.otherApn_.accessPointName || this.otherApn_.accessPointName === kDefaultAccessPointName) { // No valid APN set, do nothing. - return; + return false; } apn = { accessPointName: this.otherApn_.accessPointName, @@ -345,10 +351,11 @@ Polymer({ if (apn === undefined) { // Potential edge case if an update is received before this is invoked. console.error('Selected APN not in list'); - return; + return false; } } this.fire('apn-change', apn); + return true; }, /** diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.js index 63e32766bcc..8ce3f503813 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_config.js @@ -445,6 +445,7 @@ Polymer({ response.success, response.errorMessage, connect); }); } + this.fire('properties-set'); }, /** @private */ diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_icon.html b/chromium/ui/webui/resources/cr_components/chromeos/network/network_icon.html index e25a5c4001d..0649dc017f5 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_icon.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_icon.html @@ -3,6 +3,7 @@ <link rel="import" href="../../chromeos/network/network_icons.html"> <link rel="import" href="../../../cr_elements/hidden_style_css.html"> <link rel="import" href="../../../html/i18n_behavior.html"> +<link rel="import" href="chrome://resources/html/load_time_data.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> <link rel="import" href="onc_mojo.html"> @@ -32,6 +33,11 @@ width: 20px; } + :host-context([dir='rtl']) #technology { + left: auto; + right: 4px; + } + /* Lower-right corner */ #secure { --iron-icon-fill-color: #5a5a5a; @@ -42,6 +48,11 @@ width: 8px; } + :host-context([dir='rtl']) #secure { + left: auto; + right: 0; + } + /* Images */ #icon.ethernet { background: url(chrome://resources/cr_components/chromeos/network/ethernet.svg); @@ -135,6 +146,10 @@ background: url(chrome://resources/cr_components/chromeos/network/cellular_off.svg); } + #icon.cellular-locked { + background: url(chrome://resources/cr_components/chromeos/network/cellular_locked.svg); + } + #icon.cellular-connecting { animation: cellular-levels 750ms infinite; animation-direction: alternate; diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_icon.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_icon.js index e2a74ac7726..92b8fd800a6 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_icon.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_icon.js @@ -61,6 +61,14 @@ Polymer({ reflectToAttribute: true, computed: 'computeAriaLabel_(locale, networkState)' }, + + /** @private */ + isUpdatedCellularUiEnabled_: { + type: Boolean, + value() { + return loadTimeData.getBoolean('updatedCellularActivationUi'); + } + }, }, /** @@ -91,6 +99,13 @@ Polymer({ } const prefix = OncMojo.networkTypeIsMobile(type) ? 'cellular-' : 'wifi-'; + + if (this.networkState.type === mojom.NetworkType.kCellular && + this.networkState.typeState.cellular.simLocked && + this.isUpdatedCellularUiEnabled_) { + return prefix + 'locked'; + } + if (!this.isListItem && !this.networkState.guid) { const device = this.deviceState; if (!device || device.deviceState === mojom.DeviceStateType.kEnabled || diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_ip_config.html b/chromium/ui/webui/resources/cr_components/chromeos/network/network_ip_config.html index bb16a2bf14b..24c9225c0ec 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_ip_config.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_ip_config.html @@ -15,21 +15,23 @@ margin-inline-start: var(--settings-control-label-spacing); } </style> - <div class="property-box"> - <div id="autoIPConfigLabel" class="start"> - [[i18n('networkIPConfigAuto')]] + <template is="dom-if" if="[[shouldShowAutoIpConfigToggle_]]" restamp> + <div id="autoConfig" class="property-box"> + <div id="autoIPConfigLabel" class="start"> + [[i18n('networkIPConfigAuto')]] + </div> + <cr-policy-indicator indicator-type="[[getPolicyIndicatorType( + managedProperties.ipAddressConfigType)]]"> + </cr-policy-indicator> + <cr-toggle id="autoConfigIpToggle" checked="{{automatic_}}" + disabled="[[!canChangeIPConfigType_(managedProperties, disabled)]]" + on-change="onAutomaticChange_" + aria-labelledby="autoIPConfigLabel"> + </cr-toggle> </div> - <cr-policy-indicator indicator-type="[[getPolicyIndicatorType( - managedProperties.ipAddressConfigType)]]"> - </cr-policy-indicator> - <cr-toggle id="autoConfigIpToggle" checked="{{automatic_}}" - disabled="[[!canChangeIPConfigType_(managedProperties, disabled)]]" - on-change="onAutomaticChange_" - aria-labelledby="autoIPConfigLabel"> - </cr-toggle> - </div> + </template> <template is="dom-if" if="[[hasIpConfigFields_(ipConfig_)]]"> - <div class="property-box single-column indented stretch"> + <div class$="[[getFieldsClassList_(shouldShowAutoIpConfigToggle_)]]"> <network-property-list-mojo fields="[[ipConfigFields_]]" all-fields-read-only="[[automatic_]]" property-dict="[[ipConfig_]]" diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_ip_config.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_ip_config.js index 646365ae876..d82ac7b3918 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_ip_config.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_ip_config.js @@ -140,6 +140,24 @@ Polymer({ }, readOnly: true }, + + /** + * True if automatically-configured IP address toggle should be visible. + * @private + */ + shouldShowAutoIpConfigToggle_: { + type: Boolean, + value: true, + computed: 'computeShouldShowAutoIpConfigToggle_(managedProperties)', + }, + + /** @private */ + isUpdatedCellularUiEnabled_: { + type: Boolean, + value() { + return loadTimeData.getBoolean('updatedCellularActivationUi'); + } + }, }, /** @@ -384,4 +402,29 @@ Polymer({ {} }); }, + + /** + * @return {boolean} + * @private + */ + computeShouldShowAutoIpConfigToggle_() { + if (this.managedProperties.type === + chromeos.networkConfig.mojom.NetworkType.kCellular && + this.isUpdatedCellularUiEnabled_) { + return false; + } + return true; + }, + + /** + * @return {string} + * @private + */ + getFieldsClassList_() { + let classes = 'property-box single-column stretch'; + if (this.shouldShowAutoIpConfigToggle_) { + classes += ' indented'; + } + return classes; + } }); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_list_item.html b/chromium/ui/webui/resources/cr_components/chromeos/network/network_list_item.html index fb6f3eb47c8..06ab36603a3 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_list_item.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_list_item.html @@ -29,18 +29,9 @@ } #divOuter { + height: var(--cr-network-row-height, 48px); overflow: auto; - padding-bottom: 0; padding-inline-end: var(--cr-icon-ripple-padding); - padding-top: 0; - } - - .div-outer-with-standard-height { - height: var(--cr-network-item-with-standard-height, 48px); - } - - .div-outer-with-subtitle-height { - height: var(--cr-network-item-with-subtitle-height, 60px); } :host([disabled_]) { @@ -60,13 +51,16 @@ opacity: var(--network-list-item-disabled-opacity); } - :host(:not([is-e-sim-pending-profile_])) #divIcon { + :host(:not([is-e-sim-pending-profile_]) + :not([is-e-sim-installing-profile_])) #divIcon { height: 24px; width: 24px; } - :host([is-e-sim-pending-profile_]) #divIcon { + :host([is-e-sim-pending-profile_]) #divIcon, + :host([is-e-sim-installing-profile_]) #divIcon { height: 20px; + padding-inline-end: 20px; width: 20px; } @@ -129,8 +123,7 @@ <div id="wrapper" focus-row-container class="layout horizontal center flex"> <div id="divOuter" - class$="layout horizontal center flex - [[getContainerClassName_(networkState.*, subtitle_)]]" + class="layout horizontal center flex" actionable focus-row-control selectable @@ -152,13 +145,8 @@ <iron-icon id="divIcon" icon="[[item.polymerIcon]]"></iron-icon> </template> <div id="divText" class="layout horizontal flex"> - <div id="networkName" aria-hidden="true"> - [[getItemName_(item)]] - </div> - <div id="subtitle" - hidden$="[[!isSubtitleVisible_(subtitle_)]]" - aria-hidden="true"> - [[getSubtitle(subtitle_)]] + <div id="itemTitle" aria-hidden="true"> + [[itemTitle_]] </div> <div id="networkStateText" class$="[[getNetworkStateTextClass_(networkState.*, @@ -177,7 +165,9 @@ </cr-policy-indicator> </template> <!-- This can only be shown if isUpdatedCellularUiEnabled_ is enabled. --> - <template is="dom-if" if="[[isPSimPendingActivationNetwork_]]" restamp> + <template is="dom-if" + if="[[shouldShowActivateButton_(isPSimPendingActivationNetwork_, + showButtons)]]" restamp> <cr-button id="activateButton" aria-label$="[[getActivateBtnA11yLabel_(item)]]" on-click="onActivateButtonClick_" @@ -191,12 +181,12 @@ <paper-spinner-lite id="activatingPSimSpinner" active> </paper-spinner-lite> [[i18n('networkListItemActivating')]] - <div class="separator"></div> + <div class="separator" hidden$="[[!showButtons]]"></div> </template> <template is="dom-if" if="[[isSubpageButtonVisible_(networkState, showButtons, disabled_, networkState.typeState.cellular.simLocked, - isPSimPendingActivationNetwork_)]]" restamp> + isPSimPendingActivationNetwork_, isPSimActivatingNetwork_)]]" restamp> <div> <cr-icon-button class="subpage-arrow" id="subpageButton" @@ -209,7 +199,7 @@ </div> </template> <template is="dom-if" if="[[shouldShowUnlockButton_(networkState, - networkState.typeState.cellular.simLocked)]]" restamp> + networkState.typeState.cellular.simLocked, showButtons)]]" restamp> <cr-button id="unlockButton" aria-label$="[[getUnlockBtnA11yLabel_(item)]]" on-click="onUnlockButtonClick_" @@ -217,13 +207,8 @@ [[i18n('networkListItemUnlock')]] </cr-button> </template> - <template is="dom-if" if="[[isCellularUnlockDialogOpen_]]" restamp> - <sim-lock-dialogs - is-dialog-open="{{isCellularUnlockDialogOpen_}}" - device-state="[[deviceState]]"> - </sim-lock-dialogs> - </template> - <template is="dom-if" if="[[isESimPendingProfile_]]" restamp> + <template is="dom-if" if="[[shouldShowInstallButton_( + isESimPendingProfile_, showButtons)]]" restamp> <cr-button id="installButton" aria-label$="[[getInstallBtnA11yLabel_(item)]]" on-click="onInstallButtonClick_" @@ -232,13 +217,19 @@ [[i18n('networkListItemDownload')]] </cr-button> </template> - <template is="dom-if" if="[[isESimInstallingProfile_(item, item.customItemType)]]" restamp> + <template is="dom-if" if="[[isESimInstallingProfile_]]" restamp> <paper-spinner-lite id="installingESimSpinner" active> </paper-spinner-lite> [[i18n('networkListItemAddingProfile')]] </template> </div> </div> + <template is="dom-if" if="[[isCellularUnlockDialogOpen_]]" restamp> + <sim-lock-dialogs + is-dialog-open="{{isCellularUnlockDialogOpen_}}" + device-state="[[deviceState]]"> + </sim-lock-dialogs> + </template> </template> <script src="network_list_item.js"></script> </dom-module> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_list_item.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_list_item.js index c09cea23c31..8b32d486e9d 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_list_item.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_list_item.js @@ -67,7 +67,8 @@ Polymer({ rowLabel: { type: String, notify: true, - computed: 'getRowLabel_(item, networkState, subtitle_)', + computed: + 'getRowLabel_(item, networkState, subtitle_, isPSimPendingActivationNetwork_)', }, buttonLabel: { @@ -111,6 +112,15 @@ Polymer({ managedProperties_: Object, /** + * Title containing the item's name and subtitle. + * @private {string} + */ + itemTitle_: { + type: String, + value: '', + }, + + /** * Subtitle for item. * @private {string} */ @@ -174,6 +184,18 @@ Polymer({ computed: 'computeIsESimPendingProfile_(item, item.customItemType)', }, + /** + * Whether the network item is a cellular one and is of an esim + * installing profile. + * @private + */ + isESimInstallingProfile_: { + type: Boolean, + reflectToAttribute: true, + value: false, + computed: 'computeIsESimInstallingProfile_(item, item.customItemType)', + }, + /**@private {boolean} */ isCellularUnlockDialogOpen_: { type: Boolean, @@ -201,14 +223,17 @@ Polymer({ }, /** @private */ - itemChanged_() { + async itemChanged_() { if (this.item && !this.item.hasOwnProperty('customItemType')) { this.networkState = /** @type {!OncMojo.NetworkStateProperties} */ (this.item); } else { this.networkState = undefined; } - this.setSubtitle_(); + // The order each property is set here matters. We don't use observers to + // set each property or else the ordering is indeterminate. + await this.setSubtitle_(); + this.setItemTitle_(); }, /** @private */ @@ -227,6 +252,10 @@ Polymer({ return; } + // Clear subtitle to ensure that stale values are not displayed when this + // component is recycled for a case without subtitles. + this.subtitle_ = ''; + // Show service provider subtext only when networkState is an eSIM cellular // network. if (!this.networkState || @@ -236,20 +265,24 @@ Polymer({ return; } - const eSimProfileRemote = await cellular_setup.getESimProfile( + const properties = await cellular_setup.getESimProfileProperties( this.networkState.typeState.cellular.iccid); - if (!eSimProfileRemote) { + if (!properties) { return; } - const propertiesResponse = await eSimProfileRemote.getProperties(); - if (!propertiesResponse || !propertiesResponse.properties) { + // The parent list component could recycle the same component to show + // different networks. So networkState could have changed while the async + // operations above were in progress. Skip updating subtitle if network + // state does not match the fetched eSIM profile. + if (!this.networkState || !this.networkState.typeState.cellular || + this.networkState.typeState.cellular.iccid !== properties.iccid) { return; } // Service provider from mojo API is a string16 value represented as an // array of characters. Convert to string for display. - this.subtitle_ = propertiesResponse.properties.serviceProvider.data + this.subtitle_ = properties.serviceProvider.data .map((charCode) => String.fromCharCode(charCode)) .join(''); }, @@ -261,9 +294,10 @@ Polymer({ return; } - // Temporarily place fetching managedProperties behind this flag so OOBE - // tests pass. TODO(crbug.com/1196507) Remove this check. - if (this.isUpdatedCellularUiEnabled_) { + // network-list-item supports dummy networkStates that may have an empty + // guid, such as those set by network-select. Only fetch managedProperties_ + // if the network's guid is defined. + if (this.networkState.guid) { this.networkConfig_.getManagedProperties(this.networkState.guid) .then((response) => { this.managedProperties_ = response.result; @@ -280,6 +314,17 @@ Polymer({ this.fire('network-connect-changed', this.networkState); }, + /** @private */ + setItemTitle_() { + const itemName = this.getItemName_(); + const subtitle = this.getSubtitle(); + if (!subtitle) { + this.itemTitle_ = itemName; + return; + } + this.itemTitle_ = this.i18n('networkListItemTitle', itemName, subtitle); + }, + /** * This gets called for network items and custom items. * @return {string} @@ -373,6 +418,12 @@ Polymer({ this.getItemName_(), this.item.typeState.cellular.signalStrength); } if (status) { + if (this.isPSimPendingActivationNetwork_) { + return this.i18n( + 'networkListItemLabelCellularUnactivatedWithConnectionStatus', + index, total, this.getItemName_(), status, + this.item.typeState.cellular.signalStrength); + } if (this.subtitle_) { return this.i18n( 'networkListItemLabelCellularWithConnectionStatusAndProviderName', @@ -385,6 +436,12 @@ Polymer({ this.item.typeState.cellular.signalStrength); } + if (this.isPSimPendingActivationNetwork_) { + return this.i18n( + 'networkListItemLabelCellularUnactivated', index, total, + this.getItemName_(), this.item.typeState.cellular.signalStrength); + } + if (this.subtitle_) { return this.i18n( 'networkListItemLabelCellularWithProviderName', index, total, @@ -475,7 +532,7 @@ Polymer({ return this.i18n( 'networkListItemLabelESimPendingProfile', index, total, this.getItemName_()); - } else if (this.isESimInstallingProfile_()) { + } else if (this.isESimInstallingProfile_) { if (this.subtitle_) { return this.i18n( 'networkListItemLabelESimPendingProfileWithProviderNameInstalling', @@ -499,17 +556,6 @@ Polymer({ }, /** - * @return {string} - * @private - */ - getContainerClassName_() { - if (this.isStateTextVisible_() && this.isSubtitleVisible_()) { - return 'div-outer-with-subtitle-height'; - } - return 'div-outer-with-standard-height'; - }, - - /** * This only gets called for network items once networkState is set. * @return {string} * @private @@ -521,19 +567,17 @@ Polymer({ } if (this.networkState.type === mojom.NetworkType.kCellular) { - if (this.networkState.typeState.cellular.simLocked && - !this.isUpdatedCellularUiEnabled_) { - return this.i18n('networkListItemSimCardLocked'); - } - if (this.networkState.typeState.cellular.simLocked && - this.isUpdatedCellularUiEnabled_) { - return this.i18n('networkListItemUpdatedCellularSimCardLocked'); + if (this.networkState.typeState.cellular.simLocked) { + return this.isUpdatedCellularUiEnabled_ ? + this.i18n('networkListItemUpdatedCellularSimCardLocked') : + this.i18n('networkListItemSimCardLocked'); } - - if (this.shouldShowNotAvailableText_()) { + if (!this.isUpdatedCellularUiEnabled_ && + this.shouldShowNotAvailableText_()) { return this.i18n('networkListItemNotAvailable'); } - if (this.isCellularNetworkScanning_()) { + if (!this.isUpdatedCellularUiEnabled_ && + this.isCellularNetworkScanning_()) { return this.i18n('networkListItemScanning'); } if (this.isPSimUnavailableNetwork_) { @@ -580,25 +624,19 @@ Polymer({ }, /** - * @return {boolean} - * @private - */ - isSubtitleVisible_() { - return !!this.subtitle_; - }, - - /** * @param {!OncMojo.NetworkStateProperties|undefined} networkState * @param {boolean} showButtons * @return {boolean} * @private */ isSubpageButtonVisible_(networkState, showButtons, disabled_) { + if (!this.showButtons) { + return false; + } if (this.isPSimPendingActivationNetwork_ || this.isPSimActivatingNetwork_) { return true; } - return !!networkState && showButtons && !disabled_ && - !this.shouldShowUnlockButton_(); + return !!networkState && !disabled_ && !this.shouldShowUnlockButton_(); }, /** @@ -649,15 +687,17 @@ Polymer({ this.networkState, this.showButtons, this.disabled_) && this.$$('#subpageButton') === this.shadowRoot.activeElement) { this.fireShowDetails_(event); - } else if (this.isESimPendingProfile_) { + } else if (this.shouldShowInstallButton_()) { this.onInstallButtonClick_(event); } else if (this.shouldShowUnlockButton_()) { this.onUnlockButtonClick_(); } else if (this.item && this.item.hasOwnProperty('customItemName')) { this.fire('custom-item-selected', this.item); + } else if (this.shouldShowActivateButton_()) { + this.fireShowDetails_(event); } else if ( - this.isPSimPendingActivationNetwork_ || - this.isPSimUnavailableNetwork_ || this.isPSimActivatingNetwork_) { + this.showButtons && + (this.isPSimUnavailableNetwork_ || this.isPSimActivatingNetwork_)) { this.fireShowDetails_(event); } else { this.fire('selected', this.item); @@ -741,7 +781,7 @@ Polymer({ * @return {boolean} * @private */ - isESimInstallingProfile_() { + computeIsESimInstallingProfile_() { return !!this.item && this.item.hasOwnProperty('customItemType') && this.item.customItemType === NetworkList.CustomItemType.ESIM_INSTALLING_PROFILE; @@ -795,6 +835,17 @@ Polymer({ }, /** + * @return {boolean} + * @private + */ + shouldShowActivateButton_() { + if (!this.showButtons) { + return false; + } + return this.isPSimPendingActivationNetwork_; + }, + + /** * @return {string} * @private */ @@ -878,6 +929,9 @@ Polymer({ * @private */ shouldShowUnlockButton_() { + if (!this.showButtons) { + return false; + } if (!this.networkState || !this.networkState.typeState.cellular || !this.isUpdatedCellularUiEnabled_) { return false; @@ -894,6 +948,17 @@ Polymer({ }, /** + * @return {boolean} + * @private + */ + shouldShowInstallButton_() { + if (!this.showButtons) { + return false; + } + return this.isESimPendingProfile_; + }, + + /** * @return {string} * @private */ diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.html b/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.html index 61f1bb1dd3a..2b06e2ffe3e 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.html @@ -13,6 +13,15 @@ <dom-module id="network-password-input"> <template> <style include="network-shared"> + :host { + display: block; + } + + :host([allow-error-message]) #input { + --cr-input-error-display: block; + margin-bottom: 0; + } + #container { align-items: center; display: flex; @@ -38,20 +47,26 @@ type="[[getInputType_(showPassword)]]" on-mousedown="onMousedown_" on-touchstart="onMousedown_" - on-keydown="onKeydown_"> + on-keydown="onKeydown_" + invalid="[[invalid]]" + error-message="[[errorMessage]]"> + <template is="dom-if" if="[[!showPolicyIndicator_]]" restamp> + <div slot="suffix"> + <cr-icon-button id="icon" + class$="[[getIconClass_(showPassword)]]" + aria-describedby="passwordVisibilityTooltip" + on-click="onShowPasswordTap_" + on-touchend="onShowPasswordTap_"> + </cr-icon-button> + <paper-tooltip id="passwordVisibilityTooltip" + for="icon" + position="left" + fit-to-visible-bounds role="tooltip"> + [[getShowPasswordTitle_(showPassword)]] + </paper-tooltip> + </div> + </template> </cr-input> - <template is="dom-if" if="[[!showPolicyIndicator_]]" restamp> - <cr-icon-button id="icon" slot="suffix" - class$="[[getIconClass_(showPassword)]]" - aria-describedby="passwordVisibilityTooltip" - on-click="onShowPasswordTap_" - on-touchend="onShowPasswordTap_"> - </cr-icon-button> - <paper-tooltip id="passwordVisibilityTooltip" for="icon" position="left" - fit-to-visible-bounds role="tooltip"> - [[getShowPasswordTitle_(showPassword)]] - </paper-tooltip> - </template> <template is="dom-if" if="[[showPolicyIndicator_]]" restamp> <cr-policy-network-indicator-mojo property="[[property]]" tooltip-position="left"> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.js index a0e28e58858..71f0c96947b 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_password_input.js @@ -36,6 +36,28 @@ Polymer({ value: false, }, + invalid: { + type: Boolean, + value: false, + }, + + /** + * Whether an errorMessage can be shown beneath the input. + */ + allowErrorMessage: { + type: Boolean, + value: false, + }, + + /** + * Error message shown beneath input (only shown if allowErrorMessage is + * true). + */ + errorMessage: { + type: String, + value: '', + }, + showPolicyIndicator_: { type: Boolean, value: false, diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_property_list_mojo.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_property_list_mojo.js index 888491ac07a..3bc0d011186 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_property_list_mojo.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_property_list_mojo.js @@ -229,6 +229,10 @@ Polymer({ result += 'VPN'; } else if (subKey === 'wifi') { result += 'WiFi'; + } else if (subKey === 'iccid') { + result += 'ICCID'; + } else if (subKey === 'imei') { + result += 'IMEI'; } else { result += subKey.charAt(0).toUpperCase() + subKey.slice(1); } diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_select.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_select.js index 1e6757de278..e11459065c8 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_select.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_select.js @@ -86,12 +86,6 @@ Polymer({ type: Boolean, value: false, }, - - /** - * The cellular DeviceState, or undefined if there is no Cellular device. - * @private {!OncMojo.DeviceStateProperties|undefined} deviceState - */ - cellularDeviceState_: Object, }, /** @type {!OncMojo.NetworkStateProperties|undefined} */ @@ -262,12 +256,6 @@ Polymer({ * @private */ onGetNetworkStateList_(deviceStates, networkStates) { - this.cellularDeviceState_ = deviceStates.find(function(device) { - return device.type === mojom.NetworkType.kCellular; - }); - if (this.cellularDeviceState_) { - this.ensureCellularNetwork_(networkStates); - } this.networkStateList_ = networkStates; this.fire('network-list-changed', networkStates); @@ -289,37 +277,6 @@ Polymer({ }, /** - * Modifies |networkStates| to include a cellular network if one is required - * but does not exist. - * @param {!Array<!OncMojo.NetworkStateProperties>} networkStates - * @private - */ - ensureCellularNetwork_(networkStates) { - if (networkStates.find(function(network) { - return network.type === mojom.NetworkType.kCellular; - })) { - return; - } - const deviceState = this.cellularDeviceState_.deviceState; - if (deviceState === mojom.DeviceStateType.kDisabled || - deviceState === mojom.DeviceStateType.kProhibited) { - return; // No Cellular network - } - - // Note: the default connectionState is kNotConnected. - // TODO(khorimoto): Maybe set an 'initializing' CellularState property if - // the device state is initializing, see TODO in network_list_item.js. - - // Insert the Cellular network after the Ethernet network if it exists. - const idx = (networkStates.length > 0 && - networkStates[0].type === mojom.NetworkType.kEthernet) ? - 1 : - 0; - networkStates.splice( - idx, 0, OncMojo.getDefaultNetworkState(mojom.NetworkType.kCellular)); - }, - - /** * Event triggered when a network-list-item is selected. * @param {!{target: HTMLElement, detail: !OncMojo.NetworkStateProperties}} e * @private diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.html b/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.html index 73d81f6e113..255b6d8f708 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.html @@ -26,6 +26,10 @@ margin-inline-end: 10px; } + cr-toggle { + margin-inline-start: var(--cr-button-edge-spacing); + } + .error { color: red; font-weight: 500; @@ -39,63 +43,71 @@ margin-inline-start: var(--cr-section-padding); } - cr-toggle { - margin-inline-start: var(--cr-button-edge-spacing); + .pin-required-subtext { + color: var(--google-grey-700); } </style> <!-- SIM missing UI --> - <div id="simMissing" class="property-box two-line" - hidden$="[[!showSimMissing_(deviceState)]]"> - <div class="start layout horizontal center"> - <iron-icon icon="cr:sim-card-alert"></iron-icon> - <div class="error">[[i18n('networkSimCardMissing')]]</div> + <template is="dom-if" if="[[eq_(State.SIM_MISSING, state_)]]" restamp> + <div id="simMissing" class="property-box two-line"> + <div class="start layout horizontal center"> + <iron-icon id="simMissingIcon" icon="cr:sim-card-alert"></iron-icon> + <div class="error">[[i18n('networkSimCardMissing')]]</div> + </div> </div> - </div> + </template> <!-- SIM locked --> - <div id="simLocked" class="property-box two-line" - hidden$="[[!showSimLocked_(deviceState, isActiveSim_)]]"> - <div class="start layout horizontal center" - hidden="[[isUpdatedCellularUiEnabled_]]"> - <iron-icon icon="cr:sim-lock"></iron-icon> - <div class="error">[[i18n('networkSimCardLocked')]]</div> + <template is="dom-if" if="[[eq_(State.SIM_LOCKED, state_)]]" restamp> + <div id="simLocked" class="property-box two-line"> + <div class="start layout horizontal center" + hidden="[[isUpdatedCellularUiEnabled_]]"> + <iron-icon icon="cr:sim-lock"></iron-icon> + <div class="error">[[i18n('networkSimCardLocked')]]</div> + </div> + <div class="separator" hidden="[[isUpdatedCellularUiEnabled_]]"></div> + <cr-button id="unlockPinButton" + on-click="onUnlockPinTap_" + disabled="[[disabled]]"> + [[i18n('networkSimUnlock')]] + </cr-button> </div> - <div class="separator" hidden="[[isUpdatedCellularUiEnabled_]]"></div> - <cr-button id="unlockPinButton" - on-click="onUnlockPinTap_" - disabled="[[disabled]]"> - [[i18n('networkSimUnlock')]] - </cr-button> - </div> + </template> <!-- SIM unlocked --> - <div class="property-box two-line" - hidden$="[[!showSimUnlocked_(deviceState)]]"> - <div id="simLockToggleLabel" class="start"> - [[i18n('networkSimLockEnable')]] + <template is="dom-if" if="[[eq_(State.SIM_UNLOCKED, state_)]]" restamp> + <div class="property-box two-line"> + <div class="flex layout vertical" aria-hidden="true"> + <div id="pinRequiredLabel"> + [[i18n('networkSimLockEnable')]] + </div> + <div id="pinRequiredSublabel" class="pin-required-subtext"> + [[i18n('networkSimLockEnableSublabel')]] + </div> + </div> + <cr-button id="changePinButton" on-click="onChangePinTap_" + hidden$="[[!showChangePinButton_(deviceState, isActiveSim_)]]" + disabled="[[disabled]]"> + [[i18n('networkSimChangePin')]] + </cr-button> + <template is="dom-if" if="[[!isActiveSim_]]" restamp> + <iron-icon id="help-icon" tabindex="0" icon="cr:help-outline" + aria-labelledby="pinRequiredLabel pinRequiredSublabel inActiveSimLockTooltip"> + </iron-icon> + <paper-tooltip id="inActiveSimLockTooltip" for="help-icon" position="bottom" + aria-hidden="true" fit-to-visible-bounds> + [[i18n('networkSimLockedTooltip')]] + </paper-tooltip> + <div class="separator"></div> + </template> + <cr-toggle id="simLockButton" + disabled="[[isSimLockButtonDisabled_(disabled, isActiveSim_)]]" + on-change="onSimLockEnabledChange_" checked="{{lockEnabled_}}" + aria-labelledby="pinRequiredLabel pinRequiredSublabel"> + </cr-toggle> </div> - <cr-button id="changePinButton" on-click="onChangePinTap_" - hidden$="[[!showChangePinButton_(deviceState, isActiveSim_)]]" - disabled="[[disabled]]"> - [[i18n('networkSimChangePin')]] - </cr-button> - <template is="dom-if" if="[[!isActiveSim_]]" restamp> - <iron-icon id="help-icon" tabindex="0" icon="cr:help-outline" - aria-labelledby="simLockToggleLabel inActiveSimLockTooltip"> - </iron-icon> - <paper-tooltip id="inActiveSimLockTooltip" for="help-icon" position="bottom" - aria-hidden="true" fit-to-visible-bounds> - [[i18n('networkSimLockedTooltip')]] - </paper-tooltip> - <div class="separator"></div> - </template> - <cr-toggle id="simLockButton" - disabled="[[isSimLockButtonDisabled_(disabled, isActiveSim_)]]" - on-change="onSimLockEnabledChange_" checked="{{lockEnabled_}}" - aria-labelledby="simLockToggleLabel"> - </cr-toggle> - </div> + </template> <template is="dom-if" if="[[isDialogOpen_]]" restamp> <sim-lock-dialogs diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.js b/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.js index 5d2cff912df..570b5e32a82 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/network_siminfo.js @@ -10,6 +10,22 @@ const TOGGLE_DEBOUNCE_MS = 500; +/** + * State of the element. <network-siminfo> shows 1 of 3 modes: + * SIM_MISSING: Shows a UI explaining that no SIM card is present. Note that + * this UI is only shown if the isUpdatedCellularUiEnabled_ flag is off. + * SIM_LOCKED: Shows an alert that the SIM is locked and provides an "Unlock" + * button which allows the user to unlock the SIM. + * SIM_UNLOCKED: Provides an option to lock the SIM if desired. If SIM-lock is + * on, this UI also allows the user to update the PIN used. + * @enum {number} + */ +const State = { + SIM_MISSING: 0, + SIM_LOCKED: 1, + SIM_UNLOCKED: 2 +}; + Polymer({ is: 'network-siminfo', @@ -34,6 +50,12 @@ Polymer({ value: false, }, + /** Used to reference the State enum in HTML. */ + State: { + type: Object, + value: State, + }, + /** * Reflects deviceState.simLockStatus.lockEnabled for the * toggle button. @@ -77,6 +99,14 @@ Polymer({ return loadTimeData.getBoolean('updatedCellularActivationUi'); } }, + + /** @private {!State} */ + state_: { + type: Number, + value: State.SIM_UNLOCKED, + computed: 'computeState_(networkState, deviceState, deviceState.*, ' + + 'isUpdatedCellularUiEnabled_, isActiveSim_)', + }, }, /** @private {boolean|undefined} */ @@ -90,6 +120,13 @@ Polymer({ return /** @type {?CrToggleElement} */ (this.$$('#simLockButton')); }, + /** + * @return {?CrButtonElement} + */ + getUnlockButton() { + return /** @type {?CrButtonElement} */ (this.$$('#unlockPinButton')); + }, + /** @private */ onDialogOpenChanged_() { if (this.isDialogOpen_) { @@ -97,6 +134,29 @@ Polymer({ } this.delayUpdateLockEnabled_(); + this.updateFocus_(); + }, + + /** + * Sets default focus when dialog is closed. + * @private + */ + updateFocus_() { + const state = this.computeState_(); + // State.SIM_MISSING state is not needed here because it does not have a + // click event to open the sim lock dialogs + switch (state) { + case State.SIM_LOCKED: + if (this.$$('#unlockPinButton')) { + this.$$('#unlockPinButton').focus(); + } + break; + case State.SIM_UNLOCKED: + if (this.$$('#simLockButton')) { + this.$$('#simLockButton').focus(); + } + break; + } }, /** @private */ @@ -109,7 +169,7 @@ Polymer({ return; } - const lockEnabled = simLockStatus.lockEnabled; + const lockEnabled = this.isActiveSim_ && simLockStatus.lockEnabled; if (lockEnabled !== this.lockEnabled_) { this.setLockEnabled_ = lockEnabled; this.updateLockEnabled_(); @@ -182,38 +242,6 @@ Polymer({ }, /** - * @return {boolean} - * @private - */ - showSimMissing_() { - return !!this.deviceState && !this.deviceState.simLockStatus; - }, - - /** - * @return {boolean} - * @private - */ - showSimLocked_() { - const simLockStatus = this.deviceState && this.deviceState.simLockStatus; - if (!simLockStatus) { - return false; - } - return !!simLockStatus.lockType && this.isActiveSim_; - }, - - /** - * @return {boolean} - * @private - */ - showSimUnlocked_() { - const simLockStatus = this.deviceState && this.deviceState.simLockStatus; - if (!simLockStatus) { - return false; - } - return !simLockStatus.lockType; - }, - - /** * @param {boolean} showChangePin * @private */ @@ -263,5 +291,41 @@ Polymer({ isSimLockButtonDisabled_() { return this.disabled || !this.isActiveSim_; }, + + /** + * @return {!State} + * @private + */ + computeState_() { + const simLockStatus = this.deviceState && this.deviceState.simLockStatus; + + // No SIM lock status corresponds to a missing SIM. Note that this state is + // only returned if the updated UI flag is *off*, since we show a + // "Mobile data" subpage in place of this warning UI when the flag is on. + if (!this.isUpdatedCellularUiEnabled_ && !simLockStatus) { + return State.SIM_MISSING; + } + + // If a lock is set and the network in question is the active SIM, show the + // "locked SIM" UI. Note that we can only detect the locked state of the + // active SIM, so it is possible that we fall through to the SIM_UNLOCKED + // case below even for a locked SIM if that SIM is not the active one. + if (this.isActiveSim_ && simLockStatus && !!simLockStatus.lockType) { + return State.SIM_LOCKED; + } + + // Note that if this is not the active SIM, we cannot read to lock state, so + // we default to showing the "unlocked" UI unless we know otherwise. + return State.SIM_UNLOCKED; + }, + + /** + * @param {!State} state1 + * @param {!State} state2 + * @return {boolean} Whether state1 is the same as state2. + */ + eq_(state1, state2) { + return state1 === state2; + }, }); })(); diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/onc_mojo.js b/chromium/ui/webui/resources/cr_components/chromeos/network/onc_mojo.js index 270642f769a..d4e2f457e83 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/onc_mojo.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/onc_mojo.js @@ -218,7 +218,8 @@ } /** - * @param {?chromeos.networkConfig.mojom.DeviceStateProperties} device + * @param {?chromeos.networkConfig.mojom.DeviceStateProperties|undefined} + * device * @return {boolean} */ static deviceIsInhibited(device) { diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/sim_lock_dialogs.html b/chromium/ui/webui/resources/cr_components/chromeos/network/sim_lock_dialogs.html index cad4531df7c..c02c275d836 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/sim_lock_dialogs.html +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/sim_lock_dialogs.html @@ -3,6 +3,7 @@ <link rel="import" href="../../../cr_elements/cr_button/cr_button.html"> <link rel="import" href="../../../cr_elements/cr_dialog/cr_dialog.html"> <link rel="import" href="../../../cr_elements/icons.html"> +<link rel="import" href="../../../cr_elements/shared_style_css.html"> <link rel="import" href="../../../html/i18n_behavior.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html"> <link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html"> @@ -20,26 +21,72 @@ font-weight: 500; margin-bottom: 10px; } + + #enter-pin-description { + margin-bottom: 16px; + } + + .pinEntrySubtext { + font-size: var(--cr-form-field-label-font-size); + font-weight: 400; + margin-top: -10px; + } + + :host([has-error-text_]) .pinEntrySubtext { + color: red; + } + + #changePinOld { + margin-top: 24px; + } + + #unlockPin { + margin-top: 24px; + } + + #puk-warning-container { + display: flex; + margin-bottom: 24px; + margin-top: 20px; + } + + #puk-warning-icon { + --iron-icon-fill-color: var(--google-red-600); + --iron-icon-height: 24px; + --iron-icon-width: 24px; + margin-inline-end: 4px; + } + + :host([has-error-text_]) #puk-warning-container { + color: var(--google-red-600); + } </style> <!-- Enter PIN dialog --> - <cr-dialog id="enterPinDialog" close-text="[[i18n('close')]]"> + <cr-dialog id="enterPinDialog" + on-cancel="onCancel_" + close-text="[[i18n('close')]]"> <div slot="title">[[i18n('networkSimEnterPinTitle')]]</div> <div slot="body"> + <div id="enter-pin-description" aria-hidden="true"> + [[i18n('networkSimEnterPinDescription')]] + </div> <network-password-input id="enterPin" value="{{pin_}}" - label="[[i18n('networkSimEnterPin')]]" on-enter="sendEnterPin_" - disabled="[[inProgress_]]"> + disabled="[[inProgress_]]" + invalid="[[hasErrorText_]]" + aria-labeledby="pinEntrySubtext"> </network-password-input> - <div class="dialog-error"> - [[getErrorMsg_(error_, deviceState)]] + <div class="pinEntrySubtext" aria-live="assertive"> + [[getPinEntrySubtext_(error_, deviceState)]] </div> </div> <div slot="button-container"> - <cr-button class="cancel-button" on-click="onCancelClick_"> + <cr-button class="cancel-button" on-click="onCancel_"> [[i18n('cancel')]] </cr-button> <cr-button class="action-button" + aria-describedby="enter-pin-description" on-click="sendEnterPin_" disabled="[[!enterPinEnabled_]]"> [[i18n('networkSimEnter')]] @@ -48,31 +95,37 @@ </cr-dialog> <!-- Change PIN dialog --> - <cr-dialog id="changePinDialog" close-text="[[i18n('close')]]"> + <cr-dialog id="changePinDialog" + on-cancel="onCancel_" + close-text="[[i18n('close')]]"> <div slot="title">[[i18n('networkSimChangePinTitle')]]</div> <div slot="body"> <network-password-input id="changePinOld" value="{{pin_}}" label="[[i18n('networkSimEnterOldPin')]]" - disabled="[[inProgress_]]"> + disabled="[[inProgress_]]" + invalid="[[isOldPinInvalid_(error_, deviceState)]]" + error-message="[[getOldPinErrorMessage_(error_, deviceState)]]" + allow-error-message> </network-password-input> <network-password-input id="changePinNew1" value="{{pin_new1_}}" label="[[i18n('networkSimEnterNewPin')]]" - disabled="[[inProgress_]]"> + disabled="[[inProgress_]]" + allow-error-message> </network-password-input> <network-password-input id="changePinNew2" value="{{pin_new2_}}" label="[[i18n('networkSimReEnterNewPin')]]" on-enter="sendChangePin_" - disabled="[[inProgress_]]"> + disabled="[[inProgress_]]" + invalid="[[isSecondNewPinInvalid_(error_, deviceState)]]" + error-message="[[getSecondNewPinErrorMessage_(error_, deviceState)]]" + allow-error-message> </network-password-input> - <div class="dialog-error"> - [[getErrorMsg_(error_, deviceState)]] - </div> </div> <div slot="button-container"> - <cr-button class="cancel-button" on-click="onCancelClick_"> + <cr-button class="cancel-button" on-click="onCancel_"> [[i18n('cancel')]] </cr-button> <cr-button class="action-button" @@ -84,21 +137,22 @@ </cr-dialog> <!-- Unlock PIN dialog --> - <cr-dialog id="unlockPinDialog" close-text="[[i18n('close')]]"> + <cr-dialog id="unlockPinDialog" + on-cancel="onCancel_" + close-text="[[i18n('close')]]"> <div slot="title">[[i18n('networkSimLockedTitle')]]</div> <div slot="body"> <network-password-input id="unlockPin" value="{{pin_}}" - label="[[i18n('networkSimEnterPin')]]" on-enter="sendUnlockPin_" disabled="[[inProgress_]]"> </network-password-input> - <div class="dialog-error"> - [[getErrorMsg_(error_, deviceState)]] + <div class="pinEntrySubtext" aria-live="assertive"> + [[getPinEntrySubtext_(error_, deviceState)]] </div> </div> <div slot="button-container"> - <cr-button class="cancel-button" on-click="onCancelClick_"> + <cr-button class="cancel-button" on-click="onCancel_"> [[i18n('cancel')]] </cr-button> <cr-button class="action-button" @@ -110,42 +164,55 @@ </cr-dialog> <!-- Unlock PUK dialog --> - <cr-dialog id="unlockPukDialog" close-text="[[i18n('close')]]"> + <cr-dialog id="unlockPukDialog" + on-cancel="onCancel_" + close-text="[[i18n('close')]]"> <div slot="title">[[i18n('networkSimLockedTitle')]]</div> <div slot="body"> - <div> + <div id="puk-subtitle"> [[i18n('networkSimPukDialogSubtitle')]] </div> + <div id="puk-warning-container"> + <template is="dom-if" if="[[hasErrorText_]]"> + <iron-icon id="puk-warning-icon" icon="cellular-setup:warning"> + </iron-icon> + </template> + <div aria-live="assertive"> + [[getPukWarningMessage_(error_, deviceState)]] + </div> + </div> <network-password-input id="unlockPuk" value="{{puk_}}" label="[[i18n('networkSimEnterPuk')]]" - disabled="[[inProgress_]]"> + disabled="[[inProgress_]]" + invalid="[[isPukInvalid_(error_, deviceState)]]" + error-message="[[getPukErrorMessage_(error_, deviceState)]]" + allow-error-message> </network-password-input> - <div class="dialog-error"> - [[getErrorMsg_(error_, deviceState)]] - </div> <network-password-input id="unlockPin1" value="{{pin_new1_}}" label="[[i18n('networkSimEnterNewPin')]]" - disabled="[[inProgress_]]"> + disabled="[[inProgress_]]" + allow-error-message> </network-password-input> <network-password-input id="unlockPin2" value="{{pin_new2_}}" label="[[i18n('networkSimReEnterNewPin')]]" on-enter="sendUnlockPuk_" - disabled="[[inProgress_]]"> + disabled="[[inProgress_]]" + invalid="[[isSecondNewPinInvalid_(error_, deviceState)]]" + error-message="[[getSecondNewPinErrorMessage_(error_, deviceState)]]" + allow-error-message> </network-password-input> - <div class="dialog-error"> - [[i18n('networkSimLockedWarning')]] - </div> </div> <div slot="button-container"> - <cr-button class="cancel-button" on-click="onCancelClick_"> + <cr-button class="cancel-button" on-click="onCancel_"> [[i18n('cancel')]] </cr-button> <cr-button class="action-button" on-click="sendUnlockPuk_" - disabled="[[!enterPukEnabled_]]"> + disabled="[[!enterPukEnabled_]]" + aria-describedby="puk-subtitle"> [[i18n('networkSimUnlock')]] </cr-button> </div> diff --git a/chromium/ui/webui/resources/cr_components/chromeos/network/sim_lock_dialogs.js b/chromium/ui/webui/resources/cr_components/chromeos/network/sim_lock_dialogs.js index 9c844be6edb..e8859592e98 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/network/sim_lock_dialogs.js +++ b/chromium/ui/webui/resources/cr_components/chromeos/network/sim_lock_dialogs.js @@ -73,6 +73,22 @@ Polymer({ observer: 'updateSubmitButtonEnabled_', }, + /** @private */ + hasErrorText_: { + type: Boolean, + computed: 'computeHasErrorText_(error_, deviceState)', + reflectToAttribute: true, + }, + + /** + * Error, if defined, that error_ should be set as the next time deviceState + * updates. + * @private {ErrorType|undefined} + */ + pendingError_: { + type: Object, + }, + /** * Used to enable enter button in |enterPin| dialog. * @private @@ -164,6 +180,12 @@ Polymer({ if (!oldDeviceState || !newDeviceState) { return; } + if (this.pendingError_) { + // If pendingError_ is defined, we were waiting for the next deviceState + // change to set error_ to the same value as pendingError_. + this.error_ = this.pendingError_; + this.pendingError_ = undefined; + } this.updateDialogVisibility_(); }, @@ -357,7 +379,10 @@ Polymer({ this.networkConfig_.setCellularSimState(cellularSimState).then(response => { this.inProgress_ = false; if (!response.success) { - this.error_ = ErrorType.INCORRECT_PIN; + // deviceState is not updated with the new cellularSimState when the + // response returns, set pendingError_ as the value error_ should be set + // as on the next deviceState change. + this.pendingError_ = ErrorType.INCORRECT_PIN; this.focusDialogInput_(); } else { this.error_ = ErrorType.NONE; @@ -391,10 +416,17 @@ Polymer({ }, /** + * Used by test to simulate dialog cancel click. + */ + closeDialogsForTest() { + this.closeDialogs_(); + }, + + /** * @param {!Event} event * @private */ - onCancelClick_(event) { + onCancel_(event) { event.stopPropagation(); this.closeDialogs_(); }, @@ -433,7 +465,10 @@ Polymer({ this.networkConfig_.setCellularSimState(cellularSimState).then(response => { this.inProgress_ = false; if (!response.success) { - this.error_ = + // deviceState is not updated with the new cellularSimState when the + // response returns, set pendingError_ as the value error_ should be set + // as on the next deviceState change. + this.pendingError_ = opt_puk ? ErrorType.INCORRECT_PUK : ErrorType.INCORRECT_PIN; this.focusDialogInput_(); } else { @@ -448,7 +483,11 @@ Polymer({ if (this.$.enterPinDialog.open) { this.$.enterPin.focus(); } else if (this.$.changePinDialog.open) { - this.$.changePinOld.focus(); + if (this.isSecondNewPinInvalid_()) { + this.$.changePinNew2.focus(); + } else { + this.$.changePinOld.focus(); + } } else if (this.$.unlockPinDialog.open) { this.$.unlockPin.focus(); } else if (this.$.unlockPukDialog.open) { @@ -498,7 +537,10 @@ Polymer({ return true; }, - /** @private */ + /** + * @return {string} + * @private + */ getErrorMsg_() { if (this.error_ === ErrorType.NONE) { return ''; @@ -524,14 +566,128 @@ Polymer({ assertNotReached(); } - const retriesLeft = (this.deviceState && this.deviceState.simLockStatus) ? - this.deviceState.simLockStatus.retriesLeft : - 0; - if (retriesLeft !== 1) { + // Invalid PIN errors show a separate string based on whether there is 1 + // retry left or not. + const retriesLeft = this.getNumRetriesLeft_(); + if (retriesLeft !== 1 && + (this.error_ === ErrorType.INCORRECT_PIN || + this.error_ === ErrorType.INVALID_PIN)) { errorStringId += 'Plural'; } + return this.i18n(errorStringId, retriesLeft); }, + /** + * @return {number} + * @private + */ + getNumRetriesLeft_() { + if (!this.deviceState || !this.deviceState.simLockStatus) { + return 0; + } + + return this.deviceState.simLockStatus.retriesLeft; + }, + + /** + * @return {boolean} + * @private + */ + computeHasErrorText_() { + return !!this.getErrorMsg_(); + }, + + /** + * @return {string} + * @private + */ + getPinEntrySubtext_() { + const errorMessage = this.getErrorMsg_(); + if (errorMessage) { + return errorMessage; + } + + return this.i18n('networkSimEnterPinSubtext'); + }, + + /** + * @return {boolean} + * @private + */ + isOldPinInvalid_() { + return this.error_ === ErrorType.INCORRECT_PIN || + this.error_ === ErrorType.INVALID_PIN; + }, + + /** + * @return {string} + * @private + */ + getOldPinErrorMessage_() { + if (this.isOldPinInvalid_()) { + return this.getErrorMsg_(); + } + + return ''; + }, + + /** + * @return {boolean} + * @private + */ + isSecondNewPinInvalid_() { + return this.error_ === ErrorType.MISMATCHED_PIN; + }, + + /** + * @return {string} + * @private + */ + getSecondNewPinErrorMessage_() { + if (this.isSecondNewPinInvalid_()) { + return this.getErrorMsg_(); + } + + return ''; + }, + + /** + * @return {boolean} + * @private + */ + isPukInvalid_() { + return this.error_ === ErrorType.INCORRECT_PUK || + this.error_ === ErrorType.INVALID_PUK; + }, + + /** + * @return {string} + * @private + */ + getPukErrorMessage_() { + if (this.isPukInvalid_()) { + return this.getErrorMsg_(); + } + + return ''; + }, + + /** + * @return {string} + * @private + */ + getPukWarningMessage_() { + if (this.isPukInvalid_()) { + const retriesLeft = this.getNumRetriesLeft_(); + if (retriesLeft === 1) { + return this.i18n('networkSimPukDialogWarningWithFailure', retriesLeft); + } + + return this.i18n('networkSimPukDialogWarningWithFailures', retriesLeft); + } + + return this.i18n('networkSimPukDialogWarningNoFailures'); + }, }); })();
\ No newline at end of file diff --git a/chromium/ui/webui/resources/cr_components/chromeos/os_cr_components.gni b/chromium/ui/webui/resources/cr_components/chromeos/os_cr_components.gni index 4b0c3289811..09b92ec7004 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/os_cr_components.gni +++ b/chromium/ui/webui/resources/cr_components/chromeos/os_cr_components.gni @@ -21,8 +21,11 @@ cr_components_chromeos_namespace_rewrites = [ "cellular_setup.setESimManagerRemoteForTesting|setESimManagerRemoteForTesting", "cellular_setup.observeESimManager|observeESimManager", "cellular_setup.getPendingESimProfiles|getPendingESimProfiles", + "cellular_setup.getNonPendingESimProfiles|getNonPendingESimProfiles", + "cellular_setup.getNumESimProfiles|getNumESimProfiles", "cellular_setup.getEuicc|getEuicc", "cellular_setup.getESimProfile|getESimProfile", + "cellular_setup.getESimProfileProperties|getESimProfileProperties", "cellular_setup.CellularSetupDelegate|CellularSetupDelegate", "multidevice_setup.BrowserProxy|BrowserProxy", "multidevice_setup.BrowserProxyImpl|BrowserProxyImpl", @@ -44,15 +47,14 @@ cr_components_chromeos_auto_imports = [ "ui/webui/resources/cr_components/chromeos/cellular_setup/cellular_setup_delegate.html|CellularSetupDelegate", "ui/webui/resources/cr_components/chromeos/cellular_setup/subflow_behavior.html|SubflowBehavior", "ui/webui/resources/cr_components/chromeos/cellular_setup/mojo_interface_provider.html|setCellularSetupRemoteForTesting,getCellularSetupRemote,setESimManagerRemoteForTesting,getESimManagerRemote,observeESimManager", - "ui/webui/resources/cr_components/chromeos/cellular_setup/esim_manager_utils.html|getPendingESimProfiles,getEuicc,getESimProfile", + "ui/webui/resources/cr_components/chromeos/cellular_setup/esim_manager_utils.html|getPendingESimProfiles,getNonPendingESimProfiles,getNumESimProfiles,getEuicc,getESimProfile,getESimProfileProperties", "ui/webui/resources/cr_components/chromeos/cellular_setup/esim_manager_listener_behavior.html|ESimManagerListenerBehavior", - "ui/webui/resources/cr_components/chromeos/cellular_setup/setup_loading_page.html|LoadingPageState", "ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup_browser_proxy.html|BrowserProxy,BrowserProxyImpl", "ui/webui/resources/cr_components/chromeos/multidevice_setup/mojo_api.html|MojoInterfaceProvider,MojoInterfaceProviderImpl", "ui/webui/resources/cr_components/chromeos/multidevice_setup/multidevice_setup_delegate.html|MultiDeviceSetupDelegate", "ui/webui/resources/cr_components/chromeos/multidevice_setup/ui_page_container_behavior.html|UiPageContainerBehavior", "ui/webui/resources/cr_components/chromeos/network/cr_policy_network_behavior_mojo.html|CrPolicyNetworkBehaviorMojo", - "ui/webui/resources/cr_components/chromeos/network/cellular_utils.html|getSimSlotCount,hasActivePSimNetwork,isConnectedToNonCellularNetwork,isActiveSim", + "ui/webui/resources/cr_components/chromeos/network/cellular_utils.html|getSimSlotCount,hasActiveCellularNetwork,isConnectedToNonCellularNetwork,isActiveSim", "ui/webui/resources/cr_components/chromeos/network/onc_mojo.html|OncMojo", "ui/webui/resources/cr_components/chromeos/network/network_config_element_behavior.html|NetworkConfigElementBehavior", "ui/webui/resources/cr_components/chromeos/network/network_listener_behavior.html|NetworkListenerBehavior", diff --git a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/BUILD.gn b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/BUILD.gn index 2307509d23e..ffb8d5041d7 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/BUILD.gn +++ b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/BUILD.gn @@ -24,10 +24,7 @@ js_library("pin_keyboard") { } js_library("lock_screen_constants") { - deps = [ - "//ui/webui/resources/cr_elements/cr_profile_avatar_selector:cr_profile_avatar_selector", - "//ui/webui/resources/js:cr", - ] + deps = [ "//ui/webui/resources/js:cr" ] } js_library("setup_pin_keyboard") { @@ -54,7 +51,6 @@ js_library("lock_screen_constants.m") { sources = [ "$root_gen_dir/ui/webui/resources/cr_components/chromeos/quick_unlock/lock_screen_constants.m.js" ] deps = [ "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled", - "//ui/webui/resources/cr_elements/cr_profile_avatar_selector:cr_profile_avatar_selector.m", "//ui/webui/resources/js:cr.m", ] extra_deps = [ ":modulize" ] diff --git a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/DIR_METADATA b/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/DIR_METADATA deleted file mode 100644 index b39cd583495..00000000000 --- a/chromium/ui/webui/resources/cr_components/chromeos/quick_unlock/DIR_METADATA +++ /dev/null @@ -1,11 +0,0 @@ -# Metadata information for this directory. -# -# For more information on DIR_METADATA files, see: -# https://source.chromium.org/chromium/infra/infra/+/HEAD:go/src/infra/tools/dirmd/README.md -# -# For the schema of this file, see Metadata message: -# https://source.chromium.org/chromium/infra/infra/+/HEAD:go/src/infra/tools/dirmd/proto/dir_metadata.proto - -monorail { - component: "OS>Systems>Settings" -}
\ No newline at end of file diff --git a/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/OWNERS b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/OWNERS index 704b95c8e4b..5189b388693 100644 --- a/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/OWNERS +++ b/chromium/ui/webui/resources/cr_components/chromeos/smb_shares/OWNERS @@ -1 +1 @@ -khorimoto@chromium.org
\ No newline at end of file +khorimoto@chromium.org |
