Commit 1db0f5d7 authored by Roman Sorokin's avatar Roman Sorokin Committed by Chromium LUCI CQ

CrOS OOBE: Migrate Welcome screen to MultiStepBehavior

Also modified MultiStepBehavior in a way that it hides current step
before hide the whole screen. And shows the current step back when
screen is show again.

Bug: 1155468
Change-Id: Iae4d920774360c5379b0adb5c32a70747c728cfd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2571100
Commit-Queue: Roman Sorokin [CET] <rsorokin@chromium.org>
Reviewed-by: default avatarDenis Kuznetsov [CET] <antrim@chromium.org>
Cr-Commit-Position: refs/heads/master@{#834682}
parent 260fa207
...@@ -90,9 +90,16 @@ var MultiStepBehavior = { ...@@ -90,9 +90,16 @@ var MultiStepBehavior = {
// Only set uiStep to defaultUIStep if it is not set yet. // Only set uiStep to defaultUIStep if it is not set yet.
if (!this.uiStep) { if (!this.uiStep) {
this.setUIStep(this.defaultUIStep()); this.setUIStep(this.defaultUIStep());
} else {
this.showUIStep_(this.uiStep);
} }
}, },
onBeforeHide() {
if (this.uiStep)
this.hideUIStep_(this.uiStep);
},
/** /**
* Returns default event target element. * Returns default event target element.
* @type {Object} * @type {Object}
...@@ -105,13 +112,14 @@ var MultiStepBehavior = { ...@@ -105,13 +112,14 @@ var MultiStepBehavior = {
if (this.uiStep) { if (this.uiStep) {
if (this.uiStep == step) if (this.uiStep == step)
return; return;
for (let element of this.stepElements_[this.uiStep] || []) { this.hideUIStep_(this.uiStep);
cr.ui.login.invokePolymerMethod(element, 'onBeforeHide');
element.hidden = true;
}
} }
this.uiStep = step; this.uiStep = step;
for (let element of this.stepElements_[this.uiStep] || []) { this.showUIStep_(this.uiStep);
},
showUIStep_(step) {
for (let element of this.stepElements_[step] || []) {
cr.ui.login.invokePolymerMethod(element, 'onBeforeShow'); cr.ui.login.invokePolymerMethod(element, 'onBeforeShow');
element.hidden = false; element.hidden = false;
// Trigger show() if element is an oobe-dialog // Trigger show() if element is an oobe-dialog
...@@ -121,6 +129,13 @@ var MultiStepBehavior = { ...@@ -121,6 +129,13 @@ var MultiStepBehavior = {
} }
}, },
hideUIStep_(step) {
for (let element of this.stepElements_[step] || []) {
cr.ui.login.invokePolymerMethod(element, 'onBeforeHide');
element.hidden = true;
}
},
/* /*
* Fills stepElements_ map by looking up child elements with for-step * Fills stepElements_ map by looking up child elements with for-step
* attribute * attribute
...@@ -148,6 +163,7 @@ var MultiStepBehavior = { ...@@ -148,6 +163,7 @@ var MultiStepBehavior = {
* @typedef {{ * @typedef {{
* setUIStep: function(string), * setUIStep: function(string),
* onBeforeShow: function(), * onBeforeShow: function(),
* onBeforeHide: function(),
* }} * }}
*/ */
MultiStepBehavior.Proto; MultiStepBehavior.Proto;
...@@ -61,7 +61,7 @@ ...@@ -61,7 +61,7 @@
<template> <template>
<style include="oobe-dialog-host"></style> <style include="oobe-dialog-host"></style>
<link rel="stylesheet" href="oobe_welcome.css"> <link rel="stylesheet" href="oobe_welcome.css">
<oobe-welcome-dialog id="welcomeScreen" role="dialog" <oobe-welcome-dialog id="welcomeScreen" role="dialog" for-step="greeting"
aria-label$="[[i18nDynamic(locale, 'welcomeScreenGreeting')]]" aria-label$="[[i18nDynamic(locale, 'welcomeScreenGreeting')]]"
current-language="[[currentLanguage]]" current-language="[[currentLanguage]]"
on-language-button-clicked="onWelcomeSelectLanguageButtonClicked_" on-language-button-clicked="onWelcomeSelectLanguageButtonClicked_"
...@@ -76,8 +76,8 @@ ...@@ -76,8 +76,8 @@
"[[isTimezoneButtonVisible_(highlightStrength)]]" "[[isTimezoneButtonVisible_(highlightStrength)]]"
debugging-link-visible="[[debuggingLinkVisible_]]"> debugging-link-visible="[[debuggingLinkVisible_]]">
</oobe-welcome-dialog> </oobe-welcome-dialog>
<oobe-dialog id="languageScreen" role="dialog" hidden has-buttons <oobe-dialog id="languageScreen" role="dialog" for-step="language"
title-key="languageSectionTitle" has-buttons title-key="languageSectionTitle"
aria-label$="[[i18nDynamic(locale, 'languageSectionTitle')]]"> aria-label$="[[i18nDynamic(locale, 'languageSectionTitle')]]">
<hd-iron-icon slot="oobe-icon" <hd-iron-icon slot="oobe-icon"
icon1x="oobe-welcome-32:language" icon2x="oobe-welcome-64:language"> icon1x="oobe-welcome-32:language" icon2x="oobe-welcome-64:language">
...@@ -115,8 +115,8 @@ ...@@ -115,8 +115,8 @@
inverse on-click="closeLanguageSection_"></oobe-text-button> inverse on-click="closeLanguageSection_"></oobe-text-button>
</div> </div>
</oobe-dialog> </oobe-dialog>
<oobe-dialog id="accessibilityScreen" role="dialog" hidden has-buttons <oobe-dialog id="accessibilityScreen" role="dialog" for-step="accessibility"
title-key="accessibilitySectionTitle" has-buttons title-key="accessibilitySectionTitle"
subtitle-key="accessibilitySectionHint" subtitle-key="accessibilitySectionHint"
aria-label$="[[i18nDynamic(locale, 'accessibilitySectionTitle')]]"> aria-label$="[[i18nDynamic(locale, 'accessibilitySectionTitle')]]">
<hd-iron-icon slot="oobe-icon" <hd-iron-icon slot="oobe-icon"
...@@ -231,8 +231,8 @@ ...@@ -231,8 +231,8 @@
on-click="closeAccessibilitySection_"></oobe-text-button> on-click="closeAccessibilitySection_"></oobe-text-button>
</div> </div>
</oobe-dialog> </oobe-dialog>
<oobe-dialog id="timezoneScreen" role="dialog" hidden has-buttons <oobe-dialog id="timezoneScreen" role="dialog" for-step="timezone"
title-key="timezoneSectionTitle" has-buttons title-key="timezoneSectionTitle"
aria-label$="[[i18nDynamic(locale, 'timezoneSectionTitle')]]"> aria-label$="[[i18nDynamic(locale, 'timezoneSectionTitle')]]">
<hd-iron-icon slot="oobe-icon" <hd-iron-icon slot="oobe-icon"
icon1x="oobe-welcome-32:timezone" icon2x="oobe-welcome-64:timezone"> icon1x="oobe-welcome-32:timezone" icon2x="oobe-welcome-64:timezone">
...@@ -256,7 +256,8 @@ ...@@ -256,7 +256,8 @@
inverse on-click="closeTimezoneSection_"></oobe-text-button> inverse on-click="closeTimezoneSection_"></oobe-text-button>
</div> </div>
</oobe-dialog> </oobe-dialog>
<oobe-dialog id="oobeAdvancedOptionsScreen" role="dialog" hidden has-buttons <oobe-dialog id="oobeAdvancedOptionsScreen" role="dialog"
for-step="advanced-options" has-buttons
title-key="advancedOptionsSectionTitle" title-key="advancedOptionsSectionTitle"
aria-label$="[[i18nDynamic(locale, 'advancedOptionsSectionTitle')]]"> aria-label$="[[i18nDynamic(locale, 'advancedOptionsSectionTitle')]]">
<hd-iron-icon slot="oobe-icon" <hd-iron-icon slot="oobe-icon"
......
...@@ -6,6 +6,10 @@ ...@@ -6,6 +6,10 @@
* @fileoverview Polymer element for displaying material design OOBE. * @fileoverview Polymer element for displaying material design OOBE.
*/ */
'use strict';
(function() {
/** @const {string} */ /** @const {string} */
const DEFAULT_CHROMEVOX_HINT_LOCALE = 'en-US'; const DEFAULT_CHROMEVOX_HINT_LOCALE = 'en-US';
...@@ -17,10 +21,27 @@ const DEFAULT_CHROMEVOX_HINT_LOCALE = 'en-US'; ...@@ -17,10 +21,27 @@ const DEFAULT_CHROMEVOX_HINT_LOCALE = 'en-US';
const DEFAULT_CHROMEVOX_HINT_VOICE_EXTENSION_ID = const DEFAULT_CHROMEVOX_HINT_VOICE_EXTENSION_ID =
'gjjabgpgjpampikjhjpfhneeoapjbjaf'; 'gjjabgpgjpampikjhjpfhneeoapjbjaf';
/**
* UI mode for the dialog.
* @enum {string}
*/
const UIState = {
GREETING: 'greeting',
LANGUAGE: 'language',
ACCESSIBILITY: 'accessibility',
TIMEZONE: 'timezone',
ADVANCED_OPTIONS: 'advanced-options',
};
Polymer({ Polymer({
is: 'oobe-welcome-element', is: 'oobe-welcome-element',
behaviors: [OobeI18nBehavior, OobeDialogHostBehavior, LoginScreenBehavior], behaviors: [
OobeI18nBehavior,
OobeDialogHostBehavior,
LoginScreenBehavior,
MultiStepBehavior,
],
properties: { properties: {
/** /**
...@@ -127,6 +148,12 @@ Polymer({ ...@@ -127,6 +148,12 @@ Polymer({
*/ */
configuration_applied_: false, configuration_applied_: false,
defaultUIStep() {
return UIState.GREETING;
},
UI_STEPS: UIState,
/** @override */ /** @override */
ready() { ready() {
this.initializeLoginScreen('WelcomeScreen', { this.initializeLoginScreen('WelcomeScreen', {
...@@ -144,13 +171,6 @@ Polymer({ ...@@ -144,13 +171,6 @@ Polymer({
this.debuggingLinkVisible_ = this.debuggingLinkVisible_ =
data && 'isDeveloperMode' in data && data['isDeveloperMode']; data && 'isDeveloperMode' in data && data['isDeveloperMode'];
cr.ui.login.invokePolymerMethod(this.$.welcomeScreen, 'onBeforeShow');
let activeScreen = this.getActiveScreen_();
activeScreen.hidden = false;
if (activeScreen.show)
activeScreen.show();
window.setTimeout(this.applyOobeConfiguration_.bind(this), 0); window.setTimeout(this.applyOobeConfiguration_.bind(this), 0);
}, },
...@@ -158,7 +178,6 @@ Polymer({ ...@@ -158,7 +178,6 @@ Polymer({
* Event handler that is invoked just before the screen is hidden. * Event handler that is invoked just before the screen is hidden.
*/ */
onBeforeHide() { onBeforeHide() {
this.hideAllScreens_();
this.cleanupChromeVoxHint_(); this.cleanupChromeVoxHint_();
}, },
...@@ -251,59 +270,6 @@ Polymer({ ...@@ -251,59 +270,6 @@ Polymer({
this.$.welcomeScreen.onWindowResize(); this.$.welcomeScreen.onWindowResize();
}, },
/**
* Hides all screens to help switching from one screen to another.
* @private
*/
hideAllScreens_() {
this.$.welcomeScreen.hidden = true;
var screens = Polymer.dom(this.root).querySelectorAll('oobe-dialog');
for (var i = 0; i < screens.length; ++i) {
screens[i].hidden = true;
}
},
/**
* Shows given screen.
* @param id String Screen ID.
* @private
*/
showScreen_(id) {
this.hideAllScreens_();
var screen = this.$[id];
assert(screen);
screen.hidden = false;
if (screen.show)
screen.show();
},
/**
* Returns active screen object.
* @private
*/
getActiveScreen_() {
var screens = Polymer.dom(this.root).querySelectorAll('oobe-dialog');
for (var i = 0; i < screens.length; ++i) {
if (!screens[i].hidden)
return screens[i];
}
return this.$.welcomeScreen;
},
focus() {
this.getActiveScreen_().focus();
},
/**
* Handles "visible" event.
* @private
*/
onAnimationFinish_() {
this.focus();
},
/** /**
* Returns true if timezone button should be visible. * Returns true if timezone button should be visible.
* @private * @private
...@@ -337,7 +303,7 @@ Polymer({ ...@@ -337,7 +303,7 @@ Polymer({
*/ */
onWelcomeLaunchAdvancedOptions_() { onWelcomeLaunchAdvancedOptions_() {
this.cancelChromeVoxHint_(); this.cancelChromeVoxHint_();
this.showScreen_('oobeAdvancedOptionsScreen'); this.setUIStep(UIState.ADVANCED_OPTIONS);
}, },
/** /**
...@@ -347,7 +313,7 @@ Polymer({ ...@@ -347,7 +313,7 @@ Polymer({
*/ */
onWelcomeSelectLanguageButtonClicked_() { onWelcomeSelectLanguageButtonClicked_() {
this.cancelChromeVoxHint_(); this.cancelChromeVoxHint_();
this.showScreen_('languageScreen'); this.setUIStep(UIState.LANGUAGE);
}, },
/** /**
...@@ -357,7 +323,7 @@ Polymer({ ...@@ -357,7 +323,7 @@ Polymer({
*/ */
onWelcomeAccessibilityButtonClicked_() { onWelcomeAccessibilityButtonClicked_() {
this.cancelChromeVoxHint_(); this.cancelChromeVoxHint_();
this.showScreen_('accessibilityScreen'); this.setUIStep(UIState.ACCESSIBILITY);
}, },
/** /**
...@@ -367,7 +333,7 @@ Polymer({ ...@@ -367,7 +333,7 @@ Polymer({
*/ */
onWelcomeTimezoneButtonClicked_() { onWelcomeTimezoneButtonClicked_() {
this.cancelChromeVoxHint_(); this.cancelChromeVoxHint_();
this.showScreen_('timezoneScreen'); this.setUIStep(UIState.TIMEZONE);
}, },
/** /**
...@@ -532,7 +498,7 @@ Polymer({ ...@@ -532,7 +498,7 @@ Polymer({
* @private * @private
*/ */
closeLanguageSection_() { closeLanguageSection_() {
this.showScreen_('welcomeScreen'); this.setUIStep(UIState.GREETING);
}, },
/** ******************** Accessibility section ******************* */ /** ******************** Accessibility section ******************* */
...@@ -543,7 +509,7 @@ Polymer({ ...@@ -543,7 +509,7 @@ Polymer({
* @private * @private
*/ */
closeAccessibilitySection_() { closeAccessibilitySection_() {
this.showScreen_('welcomeScreen'); this.setUIStep(UIState.GREETING);
}, },
/** /**
...@@ -572,7 +538,7 @@ Polymer({ ...@@ -572,7 +538,7 @@ Polymer({
* @private * @private
*/ */
closeTimezoneSection_() { closeTimezoneSection_() {
this.showScreen_('welcomeScreen'); this.setUIStep(UIState.GREETING);
}, },
/** /**
...@@ -597,7 +563,7 @@ Polymer({ ...@@ -597,7 +563,7 @@ Polymer({
* @private * @private
*/ */
closeAdvancedOptionsSection_() { closeAdvancedOptionsSection_() {
this.showScreen_('welcomeScreen'); this.setUIStep(UIState.GREETING);
}, },
/** /**
...@@ -766,3 +732,4 @@ Polymer({ ...@@ -766,3 +732,4 @@ Polymer({
this.voicesChangedListenerMaybeGiveChromeVoxHint_ = null; this.voicesChangedListenerMaybeGiveChromeVoxHint_ = null;
} }
}); });
})();
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment