Skip to content

Commit

Permalink
[OOBE][CheckingDownloadingUpdate] - Polymer3 Check-In
Browse files Browse the repository at this point in the history 
Check-In a modularized version of the Checking Downloading Update
component.

BUG=b:255640532

Change-Id: Iced9b0e971d63dbf7373f334a2ee2c50f9b72ab3
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3999548
Commit-Queue: Bohdan Tyshchenko <bohdanty@google.com>
Reviewed-by: Renato Silva <rrsilva@google.com>
Cr-Commit-Position: refs/heads/main@{#1067514}
  • Loading branch information
@bohdanty
bohdanty authored and Chromium LUCI CQ committed Nov 4, 2022
1 parent a745d5f commit e67a6df
Show file tree
Hide file tree
Showing 5 changed files with 147 additions and 148 deletions.
3 changes: 1 addition & 2 deletions chrome/browser/resources/chromeos/login/BUILD.gn
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,6 @@ preprocess_if_expr("preprocess_unconditional_autogenerated_modules") {
"screens/common/signin_fatal_error.m.js",
"screens/common/smart_privacy_protection.m.js",
"screens/common/sync_consent.m.js",
"screens/login/checking_downloading_update.m.js",
"screens/oobe/enterprise_enrollment.m.js",
"screens/oobe/packaged_license.m.js",
"screens/oobe/quick_start.m.js",
Expand Down Expand Up @@ -293,6 +292,7 @@ preprocess_if_expr("preprocess_gen_js_files") {
"screens/common/user_creation.js",
"screens/common/wrong_hwid.js",
"screens/login/active_directory_password_change.js",
"screens/login/checking_downloading_update.js",
"screens/login/cryptohome_recovery.js",
"screens/login/encryption_migration.js",
"screens/login/gaia_password_changed.js",
Expand Down Expand Up @@ -321,7 +321,6 @@ group("polymer3_elements") {
"components:polymer3_elements",
"debug:modulize",
"screens/common:polymer3_elements",
"screens/login:polymer3_elements",
"screens/oobe:polymer3_elements",
"test_api:modulize",
]
Expand Down
24 changes: 6 additions & 18 deletions chrome/browser/resources/chromeos/login/screens/login/BUILD.gn
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,12 @@ import("//tools/polymer/html_to_js.gni")
import("//tools/polymer/polymer.gni")
import("../../oobe_auto_imports.gni")

group("polymer3_elements") {
public_deps = [ ":checking_downloading_update_module" ]
}

js_type_check("closure_compile") {
is_polymer3 = true
closure_flags = default_closure_args
deps = [
":active_directory_password_change",
":checking_downloading_update.m",
":checking_downloading_update",
":cryptohome_recovery",
":encryption_migration",
":gaia_password_changed",
Expand Down Expand Up @@ -142,7 +138,7 @@ js_library("offline_login") {
js_library("update_required_card") {
sources = [ "$root_gen_dir/chrome/browser/resources/chromeos/login/screens/login/update_required_card.js" ]
deps = [
":checking_downloading_update.m",
":checking_downloading_update",
"../../components/behaviors:login_screen_behavior.m",
"../../components/behaviors:multi_step_behavior.m",
"../../components/behaviors:oobe_i18n_behavior",
Expand All @@ -155,8 +151,8 @@ js_library("update_required_card") {
externs_list = [ "$externs_path/tts.js" ]
}

js_library("checking_downloading_update.m") {
sources = [ "$root_gen_dir/chrome/browser/resources/chromeos/login/screens/login/checking_downloading_update.m.js" ]
js_library("checking_downloading_update") {
sources = [ "$root_gen_dir/chrome/browser/resources/chromeos/login/screens/login/checking_downloading_update.js" ]
deps = [
"../../components/behaviors:oobe_dialog_host_behavior.m",
"../../components/behaviors:oobe_i18n_behavior",
Expand All @@ -165,22 +161,14 @@ js_library("checking_downloading_update.m") {
"../../components/dialogs:oobe_adaptive_dialog.m",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
]
extra_deps = [ ":checking_downloading_update_module" ]
extra_deps = [ ":web_components" ]
externs_list = [ "$externs_path/tts.js" ]
}

polymer_modulizer("checking_downloading_update") {
js_file = "checking_downloading_update.js"
html_file = "checking_downloading_update.html"
html_type = "dom-module"
auto_imports = oobe_auto_imports
migrated_imports = oobe_migrated_imports
namespace_rewrites = oobe_namespace_rewrites
}

html_to_js("web_components") {
js_files = [
"active_directory_password_change.js",
"checking_downloading_update.js",
"cryptohome_recovery.js",
"encryption_migration.js",
"gaia_password_changed.js",
Expand Down
211 changes: 90 additions & 121 deletions chrome/browser/resources/chromeos/login/screens/login/checking_downloading_update.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,129 +3,98 @@
Use of this source code is governed by a BSD-style license that can be
found in the LICENSE file.
-->
<style include="oobe-dialog-host-styles">
.progress-message {
color: var(--oobe-subheader-text-color);
margin-top: 8px;
}

<link rel="import" href="chrome://resources/html/polymer.html">
.update-illustration {
height: 264px;
width: 264px;
}

<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-progress/paper-progress.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
#checkingAnimation {
height: 300px;
width: 334px;
}
</style>
<oobe-adaptive-dialog
hidden="[[!checkingForUpdate]]"
aria-live="polite"
id="checking-for-updates-dialog"
footer-shrinkable
>
<iron-icon slot="icon" icon="oobe-32:googleg"></iron-icon>
<h1 slot="title">[[i18nDynamic(locale, 'checkingForUpdates')]]</h1>
<div slot="subtitle" class="update-subtitle" id="checkingForUpdatesMsg">
[[i18nDynamic(locale, checkingForUpdatesKey)]]
</div>
<div
slot="subtitle"
class="update-subtitle"
hidden="[[!cancelAllowed]]"
id="checkingForUpdateCancelHint"
>
[[i18nDynamic(locale, 'cancelUpdateHint')]]
</div>
<paper-progress
slot="progress"
id="checking-progress"
indeterminate="[[checkingForUpdate]]"
>
</paper-progress>
<div slot="content" class="flex layout vertical center-justified center">
<oobe-cr-lottie
id="checkingAnimation"
animation-url="animations/checking_for_update.json"
>
</oobe-cr-lottie>
</div>
</oobe-adaptive-dialog>

<link rel="import" href="../../components/oobe_icons.html">
<link rel="import" href="../../components/behaviors/oobe_dialog_host_behavior.html">
<link rel="import" href="../../components/behaviors/oobe_i18n_behavior.html">
<link rel="import" href="../../components/common_styles/common_styles.html">
<link rel="import" href="../../components/common_styles/oobe_dialog_host_styles.html">
<link rel="import" href="../../components/dialogs/oobe_adaptive_dialog.html">

<!--
UI for checking and downloading updates as part of the update process.
'indeterminate' paper-progress will recalculate styles on every frame
when OOBE is loaded (even when another screen is open).
So we make it 'indeterminate' only when the checking for updates dialog is
shown, and make set to false when dialog is hidden.
Example:
<checking-downloading-update> </checking-downloading-update>
Attributes:
'checkingForUpdate' - Whether the screen is currently checking for updates.
Shows the checking for updates dialog and hides the
downloading dialog.
'progressValue' - Progress bar percent value.
'estimatedTimeLeft' - Time left in seconds for the update to complete
download.
'hasEstimate' - True if estimated time left is to be shown.
'defaultProgressMessage' - Message showing either estimated time left or
default update status.
'updateCompleted' - True if update is completed and probably manual action
is required.
'cancelAllowed' - True if update cancellation is allowed.
'checkingForUpdatesKey' - ID of localized string shown while checking for
updates.
'downloadingUpdatesKey' - ID of localized string shown while update is being
downloaded.
'cancelHintKey' - ID of the localized string for update cancellation
message.
-->

<dom-module id="checking-downloading-update">
<template>
<style include="oobe-dialog-host-styles">
.progress-message {
color: var(--oobe-subheader-text-color);
margin-top: 8px;
}

.update-illustration {
height: 264px;
width: 264px;
}

#checkingAnimation {
height: 300px;
width: 334px;
}
</style>
<oobe-adaptive-dialog hidden="[[!checkingForUpdate]]"
aria-live="polite" id="checking-for-updates-dialog" footer-shrinkable>
<iron-icon slot="icon" icon="oobe-32:googleg"></iron-icon>
<h1 slot="title">
[[i18nDynamic(locale, 'checkingForUpdates')]]
</h1>
<div slot="subtitle" class="update-subtitle" id="checkingForUpdatesMsg">
[[i18nDynamic(locale, checkingForUpdatesKey)]]
</div>
<div slot="subtitle" class="update-subtitle" hidden="[[!cancelAllowed]]"
id="checkingForUpdateCancelHint">
[[i18nDynamic(locale, 'cancelUpdateHint')]]
</div>
<paper-progress slot="progress" id="checking-progress"
indeterminate="[[checkingForUpdate]]">
</paper-progress>
<div slot="content" class="flex layout vertical center-justified center">
<oobe-cr-lottie id="checkingAnimation"
animation-url="animations/checking_for_update.json">
</oobe-cr-lottie>
</div>
</oobe-adaptive-dialog>

<oobe-adaptive-dialog footer-shrinkable id="updating-dialog"
hidden="[[isCheckingOrUpdateCompleted_(checkingForUpdate,
<oobe-adaptive-dialog
footer-shrinkable
id="updating-dialog"
hidden="[[isCheckingOrUpdateCompleted_(checkingForUpdate,
updateCompleted)]]"
aria-live="polite">
<iron-icon slot="icon" icon="oobe-32:googleg"></iron-icon>
<h1 slot="title">
[[i18nDynamic(locale, 'updatingTitle')]]
</h1>
<div slot="subtitle">
<div>[[i18nDynamic(locale, downloadingUpdatesKey)]]</div>
<div hidden="[[!cancelAllowed]]">
[[i18nDynamic(locale, 'cancelUpdateHint')]]
</div>
<div id="progress-message" class="progress-message">
[[progressMessage_]]
</div>
</div>
<paper-progress id="updating-progress" slot="progress" min="0" max="100"
value="[[progressValue]]">
</paper-progress>
<div slot="content" class="flex layout vertical">
<div class="flex layout vertical center-justified center">
<img class="update-illustration oobe-illustration"
src="/images/updating.svg">
</div>
</div>
</oobe-adaptive-dialog>

<oobe-adaptive-dialog footer-shrinkable id="update-complete-dialog"
hidden="[[!updateCompleted]]" aria-live="polite">
<iron-icon slot="icon" icon="oobe-32:googleg"></iron-icon>
<h1 slot="title">
[[i18nDynamic(locale, 'updateCompeletedMsg')]]
</h1>
</oobe-adaptive-dialog>
aria-live="polite"
>
<iron-icon slot="icon" icon="oobe-32:googleg"></iron-icon>
<h1 slot="title">[[i18nDynamic(locale, 'updatingTitle')]]</h1>
<div slot="subtitle">
<div>[[i18nDynamic(locale, downloadingUpdatesKey)]]</div>
<div hidden="[[!cancelAllowed]]">
[[i18nDynamic(locale, 'cancelUpdateHint')]]
</div>
<div id="progress-message" class="progress-message">
[[progressMessage_]]
</div>
</div>
<paper-progress
id="updating-progress"
slot="progress"
min="0"
max="100"
value="[[progressValue]]"
>
</paper-progress>
<div slot="content" class="flex layout vertical">
<div class="flex layout vertical center-justified center">
<img
class="update-illustration oobe-illustration"
src="/images/updating.svg"
>
</div>
</div>
</oobe-adaptive-dialog>

</template>
<script src="checking_downloading_update.js"></script>
</dom-module>
<oobe-adaptive-dialog
footer-shrinkable
id="update-complete-dialog"
hidden="[[!updateCompleted]]"
aria-live="polite"
>
<iron-icon slot="icon" icon="oobe-32:googleg"></iron-icon>
<h1 slot="title">[[i18nDynamic(locale, 'updateCompeletedMsg')]]</h1>
</oobe-adaptive-dialog>
55 changes: 49 additions & 6 deletions chrome/browser/resources/chromeos/login/screens/login/checking_downloading_update.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,71 @@

/**
* @fileoverview Polymer element for displaying material design Update screen.
*
* UI for checking and downloading updates as part of the update process.
* 'indeterminate' paper-progress will recalculate styles on every frame
* when OOBE is loaded (even when another screen is open).
* So we make it 'indeterminate' only when the checking for updates dialog is
* shown, and make set to false when dialog is hidden.
*
* Example:
* <checking-downloading-update> </checking-downloading-update>
*
* Attributes:
* 'checkingForUpdate' - Whether the screen is currently checking for updates.
* Shows the checking for updates dialog and hides the
* downloading dialog.
* 'progressValue' - Progress bar percent value.
* 'estimatedTimeLeft' - Time left in seconds for the update to complete
* download.
* 'hasEstimate' - True if estimated time left is to be shown.
* 'defaultProgressMessage' - Message showing either estimated time left or
* default update status.
* 'updateCompleted' - True if update is completed and probably manual action
* is required.
* 'cancelAllowed' - True if update cancellation is allowed.
* 'checkingForUpdatesKey' - ID of localized string shown while checking for
* updates.
* 'downloadingUpdatesKey' - ID of localized string shown while update is being
* downloaded.
* 'cancelHintKey' - ID of the localized string for update cancellation
* message.
*/

/* #js_imports_placeholder */
import '//resources/polymer/v3_0/iron-icon/iron-icon.js';
import '//resources/polymer/v3_0/paper-progress/paper-progress.js';
import '//resources/polymer/v3_0/paper-styles/color.js';
import '../../components/oobe_icons.m.js';
import '../../components/common_styles/common_styles.m.js';
import '../../components/common_styles/oobe_dialog_host_styles.m.js';
import '../../components/dialogs/oobe_adaptive_dialog.m.js';

import {loadTimeData} from '//resources/js/load_time_data.m.js';
import {html, mixinBehaviors, PolymerElement} from '//resources/polymer/v3_0/polymer/polymer_bundled.min.js';

import {OobeDialogHostBehavior} from '../../components/behaviors/oobe_dialog_host_behavior.m.js';
import {OobeI18nBehavior, OobeI18nBehaviorInterface} from '../../components/behaviors/oobe_i18n_behavior.m.js';


/**
* @constructor
* @extends {PolymerElement}
* @implements {OobeI18nBehaviorInterface}
*/
const CheckingDownloadingUpdateBase = Polymer.mixinBehaviors(
[OobeI18nBehavior, OobeDialogHostBehavior], Polymer.Element);
const CheckingDownloadingUpdateBase =
mixinBehaviors([OobeI18nBehavior, OobeDialogHostBehavior], PolymerElement);

/**
* @polymer
*/
/* #export */ class CheckingDownloadingUpdate extends
CheckingDownloadingUpdateBase {
export class CheckingDownloadingUpdate extends CheckingDownloadingUpdateBase {
static get is() {
return 'checking-downloading-update';
}

/* #html_template_placeholder */
static get template() {
return html`{__html_template__}`;
}

static get properties() {
return {
Expand Down
2 changes: 1 addition & 1 deletion chrome/browser/resources/chromeos/login/screens/login/update_required_card.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import {MultiStepBehavior, MultiStepBehaviorInterface} from '../../components/be
import {OobeI18nBehavior, OobeI18nBehaviorInterface} from '../../components/behaviors/oobe_i18n_behavior.m.js';
import {OOBE_UI_STATE} from '../../components/display_manager_types.m.js';

import {CheckingDownloadingUpdate} from './checking_downloading_update.m.js';
import {CheckingDownloadingUpdate} from './checking_downloading_update.js';


/**
Expand Down

0 comments on commit e67a6df

Please sign in to comment.