Skip to content

GitLab

T
tangled
Commit 3da6c170 authored by dpapad's avatar dpapad Committed by Commit Bot
Browse files
Options

Extract signin-email-confirmation to its own CustomElement. 

This is in preparation of migrating to Polymer3.

Bug: 1012533
Change-Id: Iab0d6d25a5c5df4ba5c19deccb98ad3ee968a982
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1881842
Auto-Submit: Demetrios Papadopoulos <dpapad@chromium.org>
Reviewed-by: default avatarRebekah Potter <rbpotter@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#710151}
parent 6ad725ce
Hide whitespace changes
Inline Side-by-side
Showing with 161 additions and 99 deletions
chrome/browser/browser_resources.grd
View file @ 3da6c170
...@@ -335,7 +335,8 @@ ...@@ -335,7 +335,8 @@
<include name="IDR_SYNC_CONFIRMATION_IMAGES_SYNC_CONFIRMATION_ILLUSTRATION_SVG" file="resources\signin\sync_confirmation\images\sync_confirmation_illustration.svg" type="BINDATA" compress="gzip" /> <include name="IDR_SYNC_CONFIRMATION_IMAGES_SYNC_CONFIRMATION_ILLUSTRATION_SVG" file="resources\signin\sync_confirmation\images\sync_confirmation_illustration.svg" type="BINDATA" compress="gzip" />
<include name="IDR_SYNC_CONFIRMATION_IMAGES_SYNC_CONFIRMATION_ILLUSTRATION_DARK_SVG" file="resources\signin\sync_confirmation\images\sync_confirmation_illustration_dark.svg" type="BINDATA" compress="gzip" /> <include name="IDR_SYNC_CONFIRMATION_IMAGES_SYNC_CONFIRMATION_ILLUSTRATION_DARK_SVG" file="resources\signin\sync_confirmation\images\sync_confirmation_illustration_dark.svg" type="BINDATA" compress="gzip" />
<include name="IDR_SIGNIN_EMAIL_CONFIRMATION_HTML" file="resources\signin\signin_email_confirmation\signin_email_confirmation.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" /> <include name="IDR_SIGNIN_EMAIL_CONFIRMATION_HTML" file="resources\signin\signin_email_confirmation\signin_email_confirmation.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
<include name="IDR_SIGNIN_EMAIL_CONFIRMATION_JS" file="resources\signin\signin_email_confirmation\signin_email_confirmation.js" type="BINDATA" /> <include name="IDR_SIGNIN_EMAIL_CONFIRMATION_APP_HTML" file="resources\signin\signin_email_confirmation\signin_email_confirmation_app.html" preprocess="true" type="BINDATA" />
<include name="IDR_SIGNIN_EMAIL_CONFIRMATION_APP_JS" file="resources\signin\signin_email_confirmation\signin_email_confirmation_app.js" type="BINDATA" />
<include name="IDR_SIGNIN_ERROR_HTML" file="resources\signin\signin_error\signin_error.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" /> <include name="IDR_SIGNIN_ERROR_HTML" file="resources\signin\signin_error\signin_error.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
<include name="IDR_SIGNIN_ERROR_JS" file="resources\signin\signin_error\signin_error.js" type="BINDATA" /> <include name="IDR_SIGNIN_ERROR_JS" file="resources\signin\signin_error\signin_error.js" type="BINDATA" />
</if> </if>
......
chrome/browser/resources/signin/signin_email_confirmation/BUILD.gn
View file @ 3da6c170
...@@ -6,11 +6,11 @@ import("//third_party/closure_compiler/compile_js.gni") ...@@ -6,11 +6,11 @@ import("//third_party/closure_compiler/compile_js.gni")
js_type_check("closure_compile") { js_type_check("closure_compile") {
deps = [ deps = [
":signin_email_confirmation", ":signin_email_confirmation_app",
] ]
} }
js_library("signin_email_confirmation") { js_library("signin_email_confirmation_app") {
deps = [ deps = [
"//ui/webui/resources/js:cr", "//ui/webui/resources/js:cr",
"//ui/webui/resources/js:load_time_data", "//ui/webui/resources/js:load_time_data",
......
chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation.html
View file @ 3da6c170
...@@ -2,103 +2,18 @@ ...@@ -2,103 +2,18 @@
<html dir="$i18n{textdirection}" lang="$i18n{language}"> <html dir="$i18n{textdirection}" lang="$i18n{language}">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="signin_shared_old_css.html">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/load_time_data.html"> <link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/html/util.html"> <script src="strings.js"></script>
<custom-style> <link rel="import" href="signin_email_confirmation_app.html">
<style include="signin-dialog-shared"> <style>
.container { body {
/* The sign-in confirmation dialog uses a width that is larger than margin: 0;
* the other sign-in dialogs to fit cases when the user has an email padding: 0;
* name that is very large. */ }
width: 512px; </style>
}
.details {
line-height: 20px;
margin-inline-start: -8px;
padding: 8px 24px 0;
}
.radio-button-title-container {
font-weight: 500;
line-height: 20px;
}
.radio-button-subtitle-container {
line-height: 20px;
}
.top-title-bar {
color: #333;
height: auto;
/* The signin email confirmation dialog needs to support cases when the
* title extends multiple lines. In that case, the height of the title
* bar is equal to padding + height of the text (which is equal to
* 2*16px + nb_lines * 22px). */
line-height: 22px;
padding: 16px 24px;
}
#closeButton {
margin-inline-start: 8px;
}
<if expr="is_macosx or is_linux">
#closeButton {
margin-inline-end: 8px;
margin-inline-start: 0;
}
</if>
</style>
</custom-style>
</head> </head>
<body> <body>
<div class="container"> <signin-email-confirmation-app></signin-email-confirmation-app>
<div class="top-title-bar" id='dialogTitle'>
$i18n{signinEmailConfirmationTitle}
</div>
<div class="details">
<cr-radio-group selected="createNewUser">
<cr-radio-button id="createNewUserRadioButton"
name="createNewUser">
<div class="radio-button-title-container">
$i18n{signinEmailConfirmationCreateProfileButtonTitle}
</div>
<div class="radio-button-subtitle-container"
id="createNewUserRadioButtonSubtitle">
$i18n{signinEmailConfirmationCreateProfileButtonSubtitle}
</div>
</cr-radio-button>
<cr-radio-button id="startSyncRadioButton" name="startSync">
<div class="radio-button-title-container">
$i18n{signinEmailConfirmationStartSyncButtonTitle}
</div>
<div class="radio-button-subtitle-container"
id="startSyncRadioButtonSubtitle">
$i18n{signinEmailConfirmationStartSyncButtonSubtitle}
</div>
</cr-radio-button>
</cr-radio-group>
</div>
<div class="action-container">
<cr-button class="action-button" id="confirmButton">
$i18n{signinEmailConfirmationConfirmLabel}
</cr-button>
<cr-button id="closeButton">
$i18n{signinEmailConfirmationCloseLabel}
</cr-button>
</div>
</div>
</body> </body>
<script src="signin_email_confirmation.js"></script>
<script src="chrome://signin-email-confirmation/strings.js"></script>
</html> </html>
chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation_app.html 0 → 100644
View file @ 3da6c170
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_radio_group/cr_radio_group.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="signin_shared_old_css.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/html/util.html">
<dom-module id="signin-email-confirmation-app">
<template>
<style include="signin-dialog-shared">
.container {
/* The sign-in confirmation dialog uses a width that is larger than
* the other sign-in dialogs to fit cases when the user has an email
* name that is very large. */
width: 512px;
}
.details {
line-height: 20px;
margin-inline-start: -8px;
padding: 8px 24px 0;
}
.radio-button-title-container {
font-weight: 500;
line-height: 20px;
}
.radio-button-subtitle-container {
line-height: 20px;
}
.top-title-bar {
color: #333;
height: auto;
/* The signin email confirmation dialog needs to support cases when the
* title extends multiple lines. In that case, the height of the title
* bar is equal to padding + height of the text (which is equal to
* 2*16px + nb_lines * 22px). */
line-height: 22px;
padding: 16px 24px;
}
#closeButton {
margin-inline-start: 8px;
}
<if expr="is_macosx or is_linux">
#closeButton {
margin-inline-end: 8px;
margin-inline-start: 0;
}
</if>
</style>
<div class="container">
<div class="top-title-bar" id='dialogTitle'>
$i18n{signinEmailConfirmationTitle}
</div>
<div class="details">
<cr-radio-group selected="createNewUser">
<cr-radio-button id="createNewUserRadioButton"
name="createNewUser">
<div class="radio-button-title-container">
$i18n{signinEmailConfirmationCreateProfileButtonTitle}
</div>
<div class="radio-button-subtitle-container"
id="createNewUserRadioButtonSubtitle">
$i18n{signinEmailConfirmationCreateProfileButtonSubtitle}
</div>
</cr-radio-button>
<cr-radio-button id="startSyncRadioButton" name="startSync">
<div class="radio-button-title-container">
$i18n{signinEmailConfirmationStartSyncButtonTitle}
</div>
<div class="radio-button-subtitle-container"
id="startSyncRadioButtonSubtitle">
$i18n{signinEmailConfirmationStartSyncButtonSubtitle}
</div>
</cr-radio-button>
</cr-radio-group>
</div>
<div class="action-container">
<cr-button class="action-button" id="confirmButton"
on-click="onConfirm_">
$i18n{signinEmailConfirmationConfirmLabel}
</cr-button>
<cr-button id="closeButton" on-click="onCancel_">
$i18n{signinEmailConfirmationCloseLabel}
</cr-button>
</div>
</div>
</template>
<script src="signin_email_confirmation_app.js"></script>
</dom-module>
chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation.js → chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation_app.js
View file @ 3da6c170
/* Copyright 2016 The Chromium Authors. All rights reserved. // Copyright 2019 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be // Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */ // found in the LICENSE file.
cr.define('signin.emailConfirmation', function() { Polymer({
'use strict'; is: 'signin-email-confirmation-app',
function initialize() { /** @override */
ready: function() {
const args = /** @type {{lastEmail: string, newEmail: string}} */ const args = /** @type {{lastEmail: string, newEmail: string}} */
(JSON.parse(chrome.getVariableValue('dialogArguments'))); (JSON.parse(chrome.getVariableValue('dialogArguments')));
const {lastEmail, newEmail} = args; const {lastEmail, newEmail} = args;
$('dialogTitle').textContent = this.$.dialogTitle.textContent =
loadTimeData.getStringF('signinEmailConfirmationTitle', lastEmail); loadTimeData.getStringF('signinEmailConfirmationTitle', lastEmail);
$('createNewUserRadioButtonSubtitle').textContent = loadTimeData.getStringF( this.$.createNewUserRadioButtonSubtitle.textContent =
'signinEmailConfirmationCreateProfileButtonSubtitle', newEmail); loadTimeData.getStringF(
$('startSyncRadioButtonSubtitle').textContent = loadTimeData.getStringF( 'signinEmailConfirmationCreateProfileButtonSubtitle', newEmail);
this.$.startSyncRadioButtonSubtitle.textContent = loadTimeData.getStringF(
'signinEmailConfirmationStartSyncButtonSubtitle', newEmail); 'signinEmailConfirmationStartSyncButtonSubtitle', newEmail);
document.addEventListener('keydown', onKeyDown); document.addEventListener('keydown', this.onKeyDown_.bind(this));
$('confirmButton').addEventListener('click', onConfirm); },
$('closeButton').addEventListener('click', onCancel);
}
function onKeyDown(e) { onKeyDown_: function(e) {
// If the currently focused element isn't something that performs an action // If the currently focused element isn't something that performs an action
// on "enter" being pressed and the user hits "enter", perform the default // on "enter" being pressed and the user hits "enter", perform the default
// action of the dialog, which is "OK". // action of the dialog, which is "OK".
if (e.key == 'Enter' && if (e.key == 'Enter' &&
!/^(A|CR-BUTTON)$/.test(document.activeElement.tagName)) { !/^(A|CR-BUTTON)$/.test(getDeepActiveElement().tagName)) {
$('confirmButton').click(); this.$.confirmButton.click();
e.preventDefault(); e.preventDefault();
} }
} },
function onConfirm(e) { /** @private */
const action = document.querySelector('cr-radio-group').selected; onConfirm_: function() {
const action = this.$$('cr-radio-group').selected;
chrome.send('dialogClose', [JSON.stringify({'action': action})]); chrome.send('dialogClose', [JSON.stringify({'action': action})]);
} },
function onCancel(e) { /** @private */
onCancel_: function() {
chrome.send('dialogClose', [JSON.stringify({'action': 'cancel'})]); chrome.send('dialogClose', [JSON.stringify({'action': 'cancel'})]);
} },
return {
initialize: initialize,
};
}); });
document.addEventListener(
'DOMContentLoaded', signin.emailConfirmation.initialize);
chrome/browser/ui/webui/signin/signin_email_confirmation_ui.cc
View file @ 3da6c170
...@@ -25,8 +25,10 @@ SigninEmailConfirmationUI::SigninEmailConfirmationUI(content::WebUI* web_ui) ...@@ -25,8 +25,10 @@ SigninEmailConfirmationUI::SigninEmailConfirmationUI(content::WebUI* web_ui)
chrome::kChromeUISigninEmailConfirmationHost); chrome::kChromeUISigninEmailConfirmationHost);
source->UseStringsJs(); source->UseStringsJs();
source->SetDefaultResource(IDR_SIGNIN_EMAIL_CONFIRMATION_HTML); source->SetDefaultResource(IDR_SIGNIN_EMAIL_CONFIRMATION_HTML);
source->AddResourcePath("signin_email_confirmation.js", source->AddResourcePath("signin_email_confirmation_app.html",
IDR_SIGNIN_EMAIL_CONFIRMATION_JS); IDR_SIGNIN_EMAIL_CONFIRMATION_APP_HTML);
source->AddResourcePath("signin_email_confirmation_app.js",
IDR_SIGNIN_EMAIL_CONFIRMATION_APP_JS);
source->AddResourcePath("signin_shared_old_css.html", source->AddResourcePath("signin_shared_old_css.html",
IDR_SIGNIN_SHARED_OLD_CSS_HTML); IDR_SIGNIN_SHARED_OLD_CSS_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