Skip to content

GitLab

T
tangled
Commit 5d8d2efb authored by Scott Chen's avatar Scott Chen Committed by Commit Bot
Browse files
Options

NUX Onboarding: use actual nux modules in the onboarding flow. 

This CL actually makes use of the NUX modules in the onboarding welcome
page, instead of the placeholder pages. There will be follow-up CLs to style
them to mock.

Bug: 874151
Change-Id: Iac750fac5ec744e658770937adab69f0b81f8309
Reviewed-on: https://chromium-review.googlesource.com/c/1256010
Commit-Queue: Scott Chen <scottchen@chromium.org>
Reviewed-by: default avatarDemetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#600098}
parent 011df9a2
Show whitespace changes
Inline Side-by-side
Showing with 189 additions and 238 deletions
chrome/browser/browser_resources.grd
View file @ 5d8d2efb
......@@ -88,7 +88,7 @@
<structure name="IDR_NUX_SET_AS_DEFAULT_JS" file="resources\welcome\onboarding_welcome\set_as_default\nux_set_as_default.js" type="chrome_html" />
<structure name="IDR_NUX_SET_AS_DEFAULT_PROXY_HTML" file="resources\welcome\onboarding_welcome\set_as_default\nux_set_as_default_proxy.html" type="chrome_html" />
<structure name="IDR_NUX_SET_AS_DEFAULT_PROXY_JS" file="resources\welcome\onboarding_welcome\set_as_default\nux_set_as_default_proxy.js" type="chrome_html" />
<structure name="IDR_NUX_CHOOSER_SHARED_CSS" file="resources\welcome\onboarding_welcome\shared\chooser_shared_css.html" type="chrome_html" />
<structure name="IDR_WELCOME_ONBOARDING_WELCOME_SHARED_CHOOSER_SHARED_CSS" file="resources\welcome\onboarding_welcome\shared\chooser_shared_css.html" type="chrome_html" />
<structure name="IDR_WELCOME_ONBOARDING_WELCOME_SHARED_I18N_SETUP_HTML" file="resources\welcome\onboarding_welcome\shared\i18n_setup.html" type="chrome_html" />
</if>
<if expr="is_win">
......
chrome/browser/resources/welcome/onboarding_welcome/email/BUILD.gn
View file @ 5d8d2efb
......@@ -20,6 +20,7 @@ js_library("nux_email") {
js_library("email_chooser") {
deps = [
":nux_email_proxy",
"../:navigation_behavior",
"//third_party/polymer/v1_0/components-chromium/iron-a11y-announcer:iron-a11y-announcer-extracted",
"//ui/webui/resources/js:cr",
"//ui/webui/resources/js:i18n_behavior",
......
chrome/browser/resources/welcome/onboarding_welcome/email/email_chooser.html
View file @ 5d8d2efb
......@@ -8,7 +8,8 @@
<link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icon/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://welcome/shared/chooser_shared_css.html">
<link rel="import" href="../navigation_behavior.html">
<link rel="import" href="../shared/chooser_shared_css.html">
<link rel="import" href="../shared/i18n_setup.html">
<link rel="import" href="nux_email_proxy.html">
......
chrome/browser/resources/welcome/onboarding_welcome/email/email_chooser.js
View file @ 5d8d2efb
......@@ -70,7 +70,7 @@ Polymer({
if (this.selectedEmailProvider_) {
this.browserProxy_.recordProviderSelected(
this.selectedEmailProvider_.id);
this.selectedEmailProvider_.id, this.emailList_.length);
}
this.browserProxy_.recordFinalize();
......@@ -170,15 +170,18 @@ Polymer({
this.revertBookmark_();
this.browserProxy_.toggleBookmarkBar(this.bookmarkBarWasShown_);
this.browserProxy_.recordNoThanks();
window.location.replace('chrome://newtab');
welcome.navigateToNextStep();
},
/** @private */
onGetStartedClicked_: function() {
this.finalized_ = true;
this.browserProxy_.recordProviderSelected(this.selectedEmailProvider_.id);
this.browserProxy_.recordProviderSelected(
this.selectedEmailProvider_.id, this.emailList_.length);
this.browserProxy_.recordGetStarted();
window.location.replace(this.selectedEmailProvider_.url);
// TODO(scottchen): store the selected email provider URL somewhere to
// redirect to at the end.
welcome.navigateToNextStep();
},
/** @private */
......
chrome/browser/resources/welcome/onboarding_welcome/email/nux_email.html
View file @ 5d8d2efb
<!DOCTYPE html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<head>
<meta charset="utf-8">
<title>$i18n{headerText}</title>
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="email_chooser.html">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<style>
body {
margin: 0;
}
</style>
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="email_chooser.html">
<dom-module id="nux-email">
<dom-module id="nux-email">
<template>
<style>
:host {
align-items: center;
display: flex;
height: fit-content;
margin: auto;
min-height: 100vh;
width: fit-content;
}
.email-ask {
text-align: center;
}
......@@ -40,7 +21,7 @@
}
h1 {
color: #202124;
color: var(--google-grey-900);
font-size: 1.5rem;
font-weight: 500;
line-height: 2.5rem;
......@@ -48,7 +29,7 @@
}
h2 {
color: #202124;
color: var(--google-grey-900);
font-size: 1.125rem;
font-weight: unset;
line-height: 2rem;
......@@ -57,7 +38,7 @@
}
#emailChooser {
color: #202124;
color: var(--google-grey-900);
margin-bottom: 48px;
}
</style>
......@@ -69,9 +50,4 @@
</div>
</template>
<script src="nux_email.js"></script>
</dom-module>
</head>
<body>
<nux-email></nux-email>
</body>
</html>
\ No newline at end of file
</dom-module>
\ No newline at end of file
chrome/browser/resources/welcome/onboarding_welcome/email/nux_email_proxy.js
View file @ 5d8d2efb
......@@ -76,8 +76,9 @@ cr.define('nux', function() {
/**
* @param {number} providerId This should match one of the histogram enum
* value for NuxEmailProvidersSelections.
* @param {number} length
*/
recordProviderSelected(providerId) {}
recordProviderSelected(providerId, length) {}
recordNoThanks() {}
......@@ -145,10 +146,11 @@ cr.define('nux', function() {
}
/** @override */
recordProviderSelected(providerId) {
recordProviderSelected(providerId, length) {
// TODO(hcarmona): get enum's max from loadTimeData instead, since length
// might not be accurate once we start localizing.
chrome.metricsPrivate.recordEnumerationValue(
SELECTION_METRIC_NAME, providerId,
loadTimeData.getInteger('email_count'));
SELECTION_METRIC_NAME, providerId, length);
}
/** @override */
......
chrome/browser/resources/welcome/onboarding_welcome/google_apps/BUILD.gn
View file @ 5d8d2efb
......@@ -21,6 +21,7 @@ js_library("nux_google_apps") {
deps = [
":apps_chooser",
":nux_google_apps_proxy",
"../:navigation_behavior",
"../shared:nux_types",
]
}
......
chrome/browser/resources/welcome/onboarding_welcome/google_apps/nux_google_apps.html
View file @ 5d8d2efb
<!DOCTYPE html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<meta charset="utf-8">
<title>$i18n{headerText}</title>
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="../navigation_behavior.html">
<link rel="import" href="apps_chooser.html">
<link rel="import" href="nux_google_apps_proxy.html">
......@@ -75,8 +71,3 @@
</template>
<script src="nux_google_apps.js"></script>
</dom-module>
<nux-google-apps></nux-google-apps>
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
</html>
\ No newline at end of file
chrome/browser/resources/welcome/onboarding_welcome/google_apps/nux_google_apps.js
View file @ 5d8d2efb
......@@ -13,13 +13,13 @@ Polymer({
/** @private */
onNoThanksClicked_: function() {
chrome.send('rejectGoogleApps');
window.location.replace('chrome://newtab');
welcome.navigateToNextStep();
},
/** @private */
onGetStartedClicked_: function() {
let selectedApps = this.$.appChooser.getSelectedAppList();
nux.NuxGoogleAppsProxyImpl.getInstance().addGoogleApps(selectedApps);
window.location.replace('chrome://newtab');
welcome.navigateToNextStep();
},
});
chrome/browser/resources/welcome/onboarding_welcome/landing_view.js
View file @ 5d8d2efb
......@@ -5,8 +5,6 @@
Polymer({
is: 'landing-view',
behaviors: [welcome.NavigationBehavior],
/** @private */
onExistingUserClick_: function() {
welcome.WelcomeBrowserProxyImpl.getInstance().handleActivateSignIn(
......@@ -15,6 +13,6 @@ Polymer({
/** @private */
onNewUserClick_: function() {
this.navigateTo(welcome.Routes.NEW_USER, 1);
welcome.navigateTo(welcome.Routes.NEW_USER, 1);
}
});
chrome/browser/resources/welcome/onboarding_welcome/navigation_behavior.js
View file @ 5d8d2efb
......@@ -57,36 +57,15 @@ cr.define('welcome', function() {
const route = /** @type {!welcome.Routes} */ (history.state.route);
const step = history.state.step;
routeObservers.forEach((observer) => {
observer.onRouteChange(route, step);
(/** @type {{onRouteChange: Function}} */ (observer))
.onRouteChange(route, step);
});
}
// Notifies all elements when browser history is popped.
window.addEventListener('popstate', notifyObservers);
/** @polymerBehavior */
const NavigationBehavior = {
/** @override */
attached: function() {
assert(!routeObservers.has(this));
routeObservers.add(this);
// history state was set when page loaded, so when the element first
// attaches, call the route-change handler to initialize first.
this.onRouteChange(
/** @type {!welcome.Routes} */ (history.state.route),
history.state.step);
},
/** @override */
detached: function() {
assert(routeObservers.delete(this));
},
/** Elements can override onRouteChange to handle route changes. */
onRouteChange: function() {},
navigateToNextStep: function() {
function navigateToNextStep() {
history.pushState(
{
route: history.state.route,
......@@ -94,13 +73,13 @@ cr.define('welcome', function() {
},
'', `/${history.state.route}`);
notifyObservers();
},
}
/**
* @param {!welcome.Routes} route
* @param {number} step
*/
navigateTo: function(route, step) {
function navigateTo(route, step) {
assert([
Routes.LANDING,
Routes.NEW_USER,
......@@ -114,11 +93,35 @@ cr.define('welcome', function() {
},
'', '/' + (route === Routes.LANDING ? '' : route));
notifyObservers();
}
/** @polymerBehavior */
const NavigationBehavior = {
/** @override */
attached: function() {
assert(!routeObservers.has(this));
routeObservers.add(this);
// history state was set when page loaded, so when the element first
// attaches, call the route-change handler to initialize first.
this.onRouteChange(
/** @type {!welcome.Routes} */ (history.state.route),
history.state.step);
},
/** @override */
detached: function() {
assert(routeObservers.delete(this));
},
/** Elements can override onRouteChange to handle route changes. */
onRouteChange: function() {},
};
return {
NavigationBehavior: NavigationBehavior,
navigateTo: navigateTo,
navigateToNextStep: navigateToNextStep,
Routes: Routes,
};
});
\ No newline at end of file
chrome/browser/resources/welcome/onboarding_welcome/set_as_default/BUILD.gn
View file @ 5d8d2efb
......@@ -13,6 +13,7 @@ js_type_check("closure_compile") {
js_library("nux_set_as_default") {
deps = [
":nux_set_as_default_proxy",
"../:navigation_behavior",
"//ui/webui/resources/js:web_ui_listener_behavior",
]
}
......
chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.html
View file @ 5d8d2efb
<!DOCTYPE html>
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<head>
<meta charset="utf-8">
<title>$i18n{headerText}</title>
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="nux_set_as_default_proxy.html">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<style>
body {
margin: 0;
}
</style>
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/icons.html">
<link rel="import" href="chrome://resources/cr_elements/paper_button_style_css.html">
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="../navigation_behavior.html">
<link rel="import" href="nux_set_as_default_proxy.html">
<dom-module id="nux-set-as-default">
<dom-module id="nux-set-as-default">
<template>
<style include="paper-button-style">
:host {
align-items: center;
display: flex;
height: 100vh;
justify-content: space-around;
}
.container {
text-align: center;
width: 800px;
}
.logo {
margin-bottom: 16px;
/* TODO(scottchen): placeholder; replace when asset is available. */
width: 32px;
height: 32px;
display: inline-block;
background: red;
display: inline-block;
height: 32px;
margin-bottom: 16px;
width: 32px;
}
h1 {
color: #202124;
font-weight: 500;
color: var(--google-grey-900);
font-size: 1.5rem;
font-weight: 500;
line-height: 2.5rem;
margin: 0;
}
h2 {
color: #202124;
font-weight: unset;
color: var(--google-grey-900);
font-size: 1.25rem;
font-weight: unset;
line-height: 1.875rem;
margin: 0;
margin-top: 16px;
margin-bottom: 48px;
margin-top: 16px;
}
img {
/* TODO(scottchen): placeholder; replace when asset is available. */
width: 454px;
height: 186px;
display: inline-block;
background: red;
display: inline-block;
height: 186px;
width: 454px;
}
.button-bar {
display: flex;
margin-top: 64px;
justify-content: space-between;
margin-top: 64px;
}
</style>
<div class="container">
......@@ -89,9 +74,4 @@
</div>
</template>
<script src="nux_set_as_default.js"></script>
</dom-module>
</head>
<body>
<nux-set-as-default></nux-set-as-default>
</body>
</html>
\ No newline at end of file
</dom-module>
\ No newline at end of file
chrome/browser/resources/welcome/onboarding_welcome/set_as_default/nux_set_as_default.js
View file @ 5d8d2efb
......@@ -45,7 +45,6 @@ Polymer({
/** @private */
finished_: function() {
// TODO(scottchen): use navigation behavior to go to next step once this
// module is integrated with onboarding-welcome's welcome-app.
welcome.navigateToNextStep();
},
});
chrome/browser/resources/welcome/onboarding_welcome/welcome_app.html
View file @ 5d8d2efb
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_view_manager/cr_view_manager.html">
<link rel="import" href="navigation_behavior.html">
<link rel="import" href="apps/nux_google_apps.html">
<link rel="import" href="email/nux_email.html">
<link rel="import" href="landing_view.html">
<link rel="import" href="navigation_behavior.html">
<link rel="import" href="set_as_default/nux_set_as_default.html">
<dom-module id="welcome-app">
<template>
......@@ -17,14 +20,12 @@
min-height: 100vh;
}
[slot='view'] {
#viewManager > [slot='view'] {
/* Each view should be centered instead of taking full page. */
--cr-view-manager-view: {
bottom: initial;
top: initial;
right: initial;
left: initial;
};
right: initial;
top: initial;
}
</style>
<cr-view-manager id="viewManager">
......
chrome/browser/resources/welcome/onboarding_welcome/welcome_app.js
View file @ 5d8d2efb
......@@ -22,8 +22,8 @@ Polymer({
// TODO(scottchen): instead of dummy, get data from finch/load time data.
/** @private {NuxOnboardingModules} */
modules_: {
'new-user': ['h1', 'h1', 'h1'],
'returning-user': ['h3', 'h3'],
'new-user': ['nux-email', 'nux-google-apps', 'nux-set-as-default'],
'returning-user': ['nux-set-as-default'],
},
/**
......@@ -65,13 +65,6 @@ Polymer({
element.id = 'step-' + (index + 1);
element.setAttribute('slot', 'view');
this.$.viewManager.appendChild(element);
// TODO(scottchen): this is just to test routing works. Actual elements
// will have buttons that are responsible for navigation.
element.textContent = index + 1;
element.addEventListener('click', () => {
this.navigateToNextStep();
});
});
},
});
chrome/browser/ui/webui/welcome/welcome_ui.cc
View file @ 5d8d2efb
......@@ -95,8 +95,9 @@ WelcomeUI::WelcomeUI(content::WebUI* web_ui, const GURL& url)
IDR_WELCOME_ONBOARDING_WELCOME_WELCOME_BROWSER_PROXY_JS);
// Add resources shared by the NUX modules.
html_source->AddResourcePath("shared/chooser_shared_css.html",
IDR_NUX_CHOOSER_SHARED_CSS);
html_source->AddResourcePath(
"shared/chooser_shared_css.html",
IDR_WELCOME_ONBOARDING_WELCOME_SHARED_CHOOSER_SHARED_CSS);
html_source->AddResourcePath(
"shared/i18n_setup.html",
IDR_WELCOME_ONBOARDING_WELCOME_SHARED_I18N_SETUP_HTML);
......
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