Commit 7511af02 authored by dpapad's avatar dpapad Committed by Commit Bot

Migrate chrome://sync-confirmation to Polymer3.

 - Only updating the DICE enabled codepath (sync_confirmation.html),
   and related tests.
 - Forking signin_shared_css.html so that the old (Polymer2) version
   of it can still be used by the pages that are not migrated yet.
 - Drive-by: Added type-checking target for
   sync_disabled_confirmation.js which was missing.

Bug: 965770
Test: Page still works, no more HTML imports warnings in DevTools.
Change-Id: I714e4d539316f21d7f45c8516c0c4175c267c149
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1848348Reviewed-by: default avatarJohn Lee <johntlee@chromium.org>
Reviewed-by: default avatarDavid Roger <droger@chromium.org>
Reviewed-by: default avatarThomas Tangl <tangltom@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#705637}
parent f8a1618f
......@@ -5320,6 +5320,10 @@ grit("resources") {
}
}
if (is_win || is_mac || is_desktop_linux) {
deps += [ "//chrome/browser/resources/signin:polymer3_elements" ]
}
if (is_win || is_mac || is_desktop_linux || is_chromeos) {
deps += [
"//chrome/browser/resources/discards:discards_resources_gen",
......
......@@ -9,7 +9,8 @@
<release seq="1">
<structures>
<if expr="is_win or is_macosx or desktop_linux">
<structure name="IDR_SIGNIN_SHARED_CSS_HTML" file="resources\signin\signin_shared_css.html" preprocess="true" allowexternalscript="true" type="chrome_html" />
<structure name="IDR_SIGNIN_SHARED_CSS_JS" file="${root_gen_dir}\chrome\browser\resources\signin\signin_shared_css.js" use_base_dir="false" preprocess="true" type="chrome_html" />
<structure name="IDR_SIGNIN_SHARED_OLD_CSS_HTML" file="resources\signin\signin_shared_old_css.html" preprocess="true" allowexternalscript="true" type="chrome_html" />
</if>
<if expr="not is_android">
<structure name="IDR_INCOGNITO_TAB_HTML" file="resources\ntp4\incognito_tab.html" flattenhtml="true" type="chrome_html" />
......@@ -329,10 +330,8 @@
<include name="IDR_SYNC_DISABLED_CONFIRMATION_JS" file="resources\signin\sync_confirmation\sync_disabled_confirmation.js" type="BINDATA" />
<include name="IDR_SYNC_CONFIRMATION_HTML" file="resources\signin\sync_confirmation\sync_confirmation.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
<include name="IDR_SYNC_CONFIRMATION_JS" file="resources\signin\sync_confirmation\sync_confirmation.js" type="BINDATA" />
<include name="IDR_SYNC_CONFIRMATION_BROWSER_PROXY_HTML" file="resources\signin\sync_confirmation\sync_confirmation_browser_proxy.html" type="BINDATA" />
<include name="IDR_SYNC_CONFIRMATION_BROWSER_PROXY_JS" file="resources\signin\sync_confirmation\sync_confirmation_browser_proxy.js" type="BINDATA" />
<include name="IDR_SYNC_CONFIRMATION_APP_HTML" file="resources\signin\sync_confirmation\sync_confirmation_app.html" type="BINDATA" flattenhtml="true" allowexternalscript="true" />
<include name="IDR_SYNC_CONFIRMATION_APP_JS" file="resources\signin\sync_confirmation\sync_confirmation_app.js" type="BINDATA" />
<include name="IDR_SYNC_CONFIRMATION_APP_JS" file="${root_gen_dir}\chrome\browser\resources\signin\sync_confirmation\sync_confirmation_app.js" use_base_dir="false" preprocess="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_ERROR_HTML" file="resources\signin\signin_error\signin_error.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
......
# 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.
import("//tools/polymer/polymer.gni")
group("polymer3_elements") {
deps = [
":signin_shared_css_module",
"sync_confirmation:polymer3_elements",
]
}
polymer_modulizer("signin_shared_css") {
html_file = "signin_shared_css.html"
js_file = "signin_shared_css.js"
html_type = "v3-ready"
}
......@@ -7,7 +7,7 @@
<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_css.html">
<link rel="import" href="signin_shared_old_css.html">
<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">
......
......@@ -5,7 +5,7 @@
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="signin_shared_css.html">
<link rel="import" href="signin_shared_old_css.html">
<link rel="stylesheet" href="chrome://resources/css/md_colors.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/cr_elements/shared_vars_css.html">
<!-- Common styles for signin-related tab modal dialogs. -->
<dom-module id="signin-dialog-shared">
<template>
<style>
a {
color: var(--cr-link-color);
text-decoration: none;
}
<template>
<style>
a {
color: var(--cr-link-color);
text-decoration: none;
}
body {
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
}
.container {
color: var(--cr-primary-text-color);
width: 448px;
}
.container {
color: var(--cr-primary-text-color);
width: 448px;
}
.top-title-bar {
align-items: center;
border-bottom: var(--cr-separator-line);
display: flex;
font-size: 16px;
height: 52px;
padding: 0 24px;
}
.top-title-bar {
align-items: center;
border-bottom: var(--cr-separator-line);
display: flex;
font-size: 16px;
height: 52px;
padding: 0 24px;
}
.action-container {
display: flex;
justify-content: flex-end;
padding: 16px;
}
.action-container {
display: flex;
justify-content: flex-end;
padding: 16px;
}
<if expr="is_macosx or is_linux">
.action-container {
flex-flow: row-reverse;
justify-content: flex-start;
}
.action-container {
flex-flow: row-reverse;
justify-content: flex-start;
}
</if>
</style>
</template>
</dom-module>
</style>
</template>
/* 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. */
import 'chrome://resources/cr_elements/shared_vars_css.m.js';
import 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
const styleElement = document.createElement('dom-module');
styleElement.setAttribute('assetpath', 'chrome://resources/');
styleElement.innerHTML = `{__html_template__}`;
styleElement.register('signin-dialog-shared');
<link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
<!-- Common styles for signin-related tab modal dialogs. -->
<dom-module id="signin-dialog-shared">
<template>
<style>
a {
color: var(--cr-link-color);
text-decoration: none;
}
body {
margin: 0;
padding: 0;
}
.container {
color: var(--cr-primary-text-color);
width: 448px;
}
.top-title-bar {
align-items: center;
border-bottom: var(--cr-separator-line);
display: flex;
font-size: 16px;
height: 52px;
padding: 0 24px;
}
.action-container {
display: flex;
justify-content: flex-end;
padding: 16px;
}
<if expr="is_macosx or is_linux">
.action-container {
flex-flow: row-reverse;
justify-content: flex-start;
}
</if>
</style>
</template>
</dom-module>
......@@ -3,8 +3,23 @@
# found in the LICENSE file.
import("//third_party/closure_compiler/compile_js.gni")
import("//tools/polymer/polymer.gni")
js_type_check("closure_compile") {
group("closure_compile") {
deps = [
":closure_compile_polymer2",
":closure_compile_polymer3",
]
}
js_type_check("closure_compile_polymer2") {
deps = [
":sync_disabled_confirmation",
]
}
js_type_check("closure_compile_polymer3") {
is_polymer3 = true
deps = [
":sync_confirmation",
":sync_confirmation_app",
......@@ -15,25 +30,46 @@ js_type_check("closure_compile") {
js_library("sync_confirmation") {
deps = [
":sync_confirmation_browser_proxy",
"//ui/webui/resources/js:cr",
"//ui/webui/resources/js:cr.m",
]
}
js_library("sync_confirmation_app") {
deps = [
":sync_confirmation_browser_proxy",
"//ui/webui/resources/js:cr",
"//ui/webui/resources/js:load_time_data",
"//ui/webui/resources/js:web_ui_listener_behavior",
"//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
"//ui/webui/resources/js:assert.m",
"//ui/webui/resources/js:load_time_data.m",
"//ui/webui/resources/js:web_ui_listener_behavior.m",
]
}
js_library("sync_confirmation_browser_proxy") {
deps = [
"//ui/webui/resources/js:cr",
"//ui/webui/resources/js:cr.m",
]
externs_list = [
"$externs_path/chrome_send.js",
"$externs_path/metrics_private.js",
]
}
js_library("sync_disabled_confirmation") {
deps = [
"//ui/webui/resources/js:assert",
"//ui/webui/resources/js:cr",
"//ui/webui/resources/js:util",
]
}
group("polymer3_elements") {
deps = [
":sync_confirmation_app_module",
]
}
polymer_modulizer("sync_confirmation_app") {
html_file = "sync_confirmation_app.html"
js_file = "sync_confirmation_app.js"
html_type = "v3-ready"
}
......@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="chrome://resources/css/md_colors.css">
<link rel="import" href="sync_confirmation_app.html"></link>
<script type="module" src="sync_confirmation_app.js"></script>
<style>
body {
margin: 0;
......@@ -21,7 +21,5 @@
<sync-confirmation-app></sync-confirmation-app>
</body>
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<link rel="import" href="chrome://resources/html/cr.html"></script>
<link rel="import" href="chrome://resources/html/util.html"></script>
<script src="sync_confirmation.js"></script>
<script type="module" src="sync_confirmation.js"></script>
</html>
......@@ -2,31 +2,27 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
cr.define('sync.confirmation', function() {
'use strict';
import {addWebUIListener} from 'chrome://resources/js/cr.m.js';
function initialize() {
cr.addWebUIListener('clear-focus', clearFocus);
const syncConfirmationBrowserProxy =
sync.confirmation.SyncConfirmationBrowserProxyImpl.getInstance();
// Prefer using |document.body.offsetHeight| instead of
// |document.body.scrollHeight| as it returns the correct height of the
// even when the page zoom in Chrome is different than 100%.
syncConfirmationBrowserProxy.initializedWithSize(
[document.body.offsetHeight]);
// The web dialog size has been initialized, so reset the body width to
// auto. This makes sure that the body only takes up the viewable width,
// e.g. when there is a scrollbar.
document.body.style.width = 'auto';
}
import {SyncConfirmationBrowserProxyImpl} from './sync_confirmation_browser_proxy.js';
function clearFocus() {
document.activeElement.blur();
}
function initialize() {
addWebUIListener('clear-focus', clearFocus);
const syncConfirmationBrowserProxy =
SyncConfirmationBrowserProxyImpl.getInstance();
// Prefer using |document.body.offsetHeight| instead of
// |document.body.scrollHeight| as it returns the correct height of the
// even when the page zoom in Chrome is different than 100%.
syncConfirmationBrowserProxy.initializedWithSize(
[document.body.offsetHeight]);
// The web dialog size has been initialized, so reset the body width to
// auto. This makes sure that the body only takes up the viewable width,
// e.g. when there is a scrollbar.
document.body.style.width = 'auto';
}
return {
initialize: initialize,
};
});
function clearFocus() {
document.activeElement.blur();
}
document.addEventListener('DOMContentLoaded', sync.confirmation.initialize);
document.addEventListener('DOMContentLoaded', initialize);
<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/html/cr.html">
<link rel="import" href="chrome://resources/html/load_time_data.html">
<link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="signin_shared_css.html">
<link rel="import" href="sync_confirmation_browser_proxy.html">
<script src="chrome://sync-confirmation/strings.js"></script>
<dom-module id="sync-confirmation-app">
<template>
<style include="signin-dialog-shared">
:host {
color: var(--cr-primary-text-color);
display: block;
}
cr-button {
padding-inline-end: 16px;
padding-inline-start: 16px;
}
.action-container {
bottom: 0;
box-sizing: border-box;
position: absolute;
width: 100%;
}
cr-button:not(.action-button) {
margin-inline-start: 8px;
}
<style include="signin-dialog-shared">
:host {
color: var(--cr-primary-text-color);
display: block;
}
cr-button {
padding-inline-end: 16px;
padding-inline-start: 16px;
}
.action-container {
bottom: 0;
box-sizing: border-box;
position: absolute;
width: 100%;
}
cr-button:not(.action-button) {
margin-inline-start: 8px;
}
<if expr="is_macosx or is_linux">
/* This works together with the button-flip in signin-dialog-shared. */
cr-button:not(.action-button) {
margin-inline-end: 8px;
margin-inline-start: 0;
}
/* This works together with the button-flip in signin-dialog-shared. */
cr-button:not(.action-button) {
margin-inline-end: 8px;
margin-inline-start: 0;
}
</if>
#illustration-container {
height: 168px;
margin-bottom: 32px;
position: relative;
width: 100%;
}
#illustration {
background: url(./images/sync_confirmation_illustration.svg);
background-size: 100% 100%;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
@media (prefers-color-scheme: dark) {
#illustration {
background-image:
url(./images/sync_confirmation_illustration_dark.svg);
}
}
#illustration-container > img {
border-radius: 50%;
height: 68px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 96px;
width: 68px;
}
.heading {
font-weight: normal;
margin-bottom: 32px;
padding: 0 24px;
text-align: center;
}
#content-container {
/* Saves space for button row. */
padding-bottom: 96px;
position: relative;
width: 100%;
}
.message-container {
line-height: 20px;
margin-bottom: 16px;
padding: 0 24px;
}
.secondary {
color: var(--cr-secondary-text-color);
}
@media (prefers-color-scheme: light) {
#grey-banner {
background: var(--paper-grey-50);
height: 128px;
top: 0;
width: 100%;
}
}
#footer {
margin-bottom: 0;
padding-top: 12px;
}
#settingsButton {
left: 16px;
position: absolute;
}
:host-context([dir='rtl']) #settingsButton {
left: auto;
right: 16px;
}
</style>
<!--
Use the 'consent-description' attribute to annotate all the UI elements
that are part of the text the user reads before consenting to the Sync
data collection . Similarly, use 'consent-confirmation' on UI elements on
which user clicks to indicate consent.
-->
<div id="illustration-container">
<div id="grey-banner"></div>
<div id="illustration"></div>
<img src="[[accountImageSrc_]]">
#illustration-container {
height: 168px;
margin-bottom: 32px;
position: relative;
width: 100%;
}
#illustration {
background: url(./images/sync_confirmation_illustration.svg);
background-size: 100% 100%;
height: 100%;
position: absolute;
top: 0;
width: 100%;
}
@media (prefers-color-scheme: dark) {
#illustration {
background-image:
url(./images/sync_confirmation_illustration_dark.svg);
}
}
#illustration-container > img {
border-radius: 50%;
height: 68px;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 96px;
width: 68px;
}
.heading {
font-weight: normal;
margin-bottom: 32px;
padding: 0 24px;
text-align: center;
}
#content-container {
/* Saves space for button row. */
padding-bottom: 96px;
position: relative;
width: 100%;
}
.message-container {
line-height: 20px;
margin-bottom: 16px;
padding: 0 24px;
}
.secondary {
color: var(--cr-secondary-text-color);
}
@media (prefers-color-scheme: light) {
#grey-banner {
background: var(--paper-grey-50);
height: 128px;
top: 0;
width: 100%;
}
}
#footer {
margin-bottom: 0;
padding-top: 12px;
}
#settingsButton {
left: 16px;
position: absolute;
}
:host-context([dir='rtl']) #settingsButton {
left: auto;
right: 16px;
}
</style>
<!--
Use the 'consent-description' attribute to annotate all the UI elements
that are part of the text the user reads before consenting to the Sync
data collection . Similarly, use 'consent-confirmation' on UI elements on
which user clicks to indicate consent.
-->
<div id="illustration-container">
<div id="grey-banner"></div>
<div id="illustration"></div>
<img src="[[accountImageSrc_]]">
</div>
<div id="content-container">
<h1 id="syncConfirmationHeading" class="heading" consent-description>
$i18n{syncConfirmationTitle}
</h1>
<div class="message-container">
<div consent-description>$i18n{syncConfirmationSyncInfoTitle}</div>
<div class="secondary" consent-description>
$i18n{syncConfirmationSyncInfoDesc}
</div>
<div id="content-container">
<h1 id="syncConfirmationHeading" class="heading" consent-description>
$i18n{syncConfirmationTitle}
</h1>
<div class="message-container">
<div consent-description>$i18n{syncConfirmationSyncInfoTitle}</div>
<div class="secondary" consent-description>
$i18n{syncConfirmationSyncInfoDesc}
</div>
</div>
<div id="footer" class="message-container secondary">
$i18n{syncConfirmationSettingsInfo}
</div>
<div class="action-container">
<cr-button class="action-button" id="confirmButton"
on-click="onConfirm_" consent-confirmation>
$i18n{syncConfirmationConfirmLabel}
</cr-button>
<cr-button on-click="onUndo_">
$i18n{syncConfirmationUndoLabel}
</cr-button>
<cr-button id="settingsButton" on-click="onGoToSettings_"
consent-confirmation>
$i18n{syncConfirmationSettingsLabel}
</cr-button>
</div>
</div>
</template>
<script src="sync_confirmation_app.js"></script>
</dom-module>
</div>
<div id="footer" class="message-container secondary">
$i18n{syncConfirmationSettingsInfo}
</div>
<div class="action-container">
<cr-button class="action-button" id="confirmButton"
on-click="onConfirm_" consent-confirmation>
$i18n{syncConfirmationConfirmLabel}
</cr-button>
<cr-button on-click="onUndo_">
$i18n{syncConfirmationUndoLabel}
</cr-button>
<cr-button id="settingsButton" on-click="onGoToSettings_"
consent-confirmation>
$i18n{syncConfirmationSettingsLabel}
</cr-button>
</div>
</div>
......@@ -2,9 +2,23 @@
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
import 'chrome://resources/cr_elements/cr_button/cr_button.m.js';
import 'chrome://resources/polymer/v3_0/paper-styles/color.js';
import './strings.m.js';
import './signin_shared_css.js';
import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js';
import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
import {WebUIListenerBehavior} from 'chrome://resources/js/web_ui_listener_behavior.m.js';
import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
import {SyncConfirmationBrowserProxy, SyncConfirmationBrowserProxyImpl} from './sync_confirmation_browser_proxy.js';
Polymer({
is: 'sync-confirmation-app',
_template: html`{__html_template__}`,
behaviors: [
WebUIListenerBehavior,
],
......@@ -19,7 +33,7 @@ Polymer({
},
},
/** @private {?sync.confirmation.SyncConfirmationBrowserProxy} */
/** @private {?SyncConfirmationBrowserProxy} */
syncConfirmationBrowserProxy_: null,
/** @private {?function(Event)} */
......@@ -28,7 +42,7 @@ Polymer({
/** @override */
attached: function() {
this.syncConfirmationBrowserProxy_ =
sync.confirmation.SyncConfirmationBrowserProxyImpl.getInstance();
SyncConfirmationBrowserProxyImpl.getInstance();
this.boundKeyDownHandler_ = this.onKeyDown_.bind(this);
// This needs to be bound to document instead of "this" because the dialog
// window opens initially, the focus level is only on document, so the key
......
<link rel="import" href="chrome://resources/html/cr.html">
<script src="sync_confirmation_browser_proxy.js"></script>
\ No newline at end of file
......@@ -6,75 +6,69 @@
* @fileoverview A helper object used by the sync confirmation dialog to
* interact with the browser.
*/
import {addSingletonGetter} from 'chrome://resources/js/cr.m.js';
cr.define('sync.confirmation', function() {
/** @interface */
class SyncConfirmationBrowserProxy {
/**
* Called when the user confirms the Sync Confirmation dialog.
* @param {!Array<string>} description Strings that the user was presented
* with in the UI.
* @param {string} confirmation Text of the element that the user
* clicked on.
*/
confirm(description, confirmation) {}
/** @interface */
export class SyncConfirmationBrowserProxy {
/**
* Called when the user confirms the Sync Confirmation dialog.
* @param {!Array<string>} description Strings that the user was presented
* with in the UI.
* @param {string} confirmation Text of the element that the user
* clicked on.
*/
confirm(description, confirmation) {}
/**
* Called when the user undoes the Sync confirmation.
*/
undo() {}
/**
* Called when the user undoes the Sync confirmation.
*/
undo() {}
/**
* Called when the user clicks on the Settings link in
* the Sync Confirmation dialog.
* @param {!Array<string>} description Strings that the user was presented
* with in the UI.
* @param {string} confirmation Text of the element that the user
* clicked on.
*/
goToSettings(description, confirmation) {}
/**
* Called when the user clicks on the Settings link in
* the Sync Confirmation dialog.
* @param {!Array<string>} description Strings that the user was presented
* with in the UI.
* @param {string} confirmation Text of the element that the user
* clicked on.
*/
goToSettings(description, confirmation) {}
/** @param {!Array<number>} height */
initializedWithSize(height) {}
/** @param {!Array<number>} height */
initializedWithSize(height) {}
/**
* Called when the WebUIListener for "account-image-changed" was added.
*/
requestAccountImage() {}
}
/** @implements {sync.confirmation.SyncConfirmationBrowserProxy} */
class SyncConfirmationBrowserProxyImpl {
/** @override */
confirm(description, confirmation) {
chrome.send('confirm', [description, confirmation]);
}
/**
* Called when the WebUIListener for "account-image-changed" was added.
*/
requestAccountImage() {}
}
/** @override */
undo() {
chrome.send('undo');
}
/** @implements {SyncConfirmationBrowserProxy} */
export class SyncConfirmationBrowserProxyImpl {
/** @override */
confirm(description, confirmation) {
chrome.send('confirm', [description, confirmation]);
}
/** @override */
goToSettings(description, confirmation) {
chrome.send('goToSettings', [description, confirmation]);
}
/** @override */
undo() {
chrome.send('undo');
}
/** @override */
initializedWithSize(height) {
chrome.send('initializedWithSize', height);
}
/** @override */
goToSettings(description, confirmation) {
chrome.send('goToSettings', [description, confirmation]);
}
/** @override */
requestAccountImage() {
chrome.send('accountImageRequest');
}
/** @override */
initializedWithSize(height) {
chrome.send('initializedWithSize', height);
}
cr.addSingletonGetter(SyncConfirmationBrowserProxyImpl);
/** @override */
requestAccountImage() {
chrome.send('accountImageRequest');
}
}
return {
SyncConfirmationBrowserProxy: SyncConfirmationBrowserProxy,
SyncConfirmationBrowserProxyImpl: SyncConfirmationBrowserProxyImpl,
};
});
addSingletonGetter(SyncConfirmationBrowserProxyImpl);
......@@ -11,7 +11,7 @@
<link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="signin_shared_css.html">
<link rel="import" href="signin_shared_old_css.html">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<custom-style>
<style include="signin-dialog-shared">
......
......@@ -27,7 +27,8 @@ SigninEmailConfirmationUI::SigninEmailConfirmationUI(content::WebUI* web_ui)
source->SetDefaultResource(IDR_SIGNIN_EMAIL_CONFIRMATION_HTML);
source->AddResourcePath("signin_email_confirmation.js",
IDR_SIGNIN_EMAIL_CONFIRMATION_JS);
source->AddResourcePath("signin_shared_css.html", IDR_SIGNIN_SHARED_CSS_HTML);
source->AddResourcePath("signin_shared_old_css.html",
IDR_SIGNIN_SHARED_OLD_CSS_HTML);
static constexpr LocalizedString kStrings[] = {
{"signinEmailConfirmationTitle", IDS_SIGNIN_EMAIL_CONFIRMATION_TITLE},
......
......@@ -69,7 +69,8 @@ void SigninErrorUI::Initialize(Browser* browser, bool is_system_profile) {
source->UseStringsJs();
source->SetDefaultResource(IDR_SIGNIN_ERROR_HTML);
source->AddResourcePath("signin_error.js", IDR_SIGNIN_ERROR_JS);
source->AddResourcePath("signin_shared_css.html", IDR_SIGNIN_SHARED_CSS_HTML);
source->AddResourcePath("signin_shared_old_css.html",
IDR_SIGNIN_SHARED_OLD_CSS_HTML);
source->AddBoolean("isSystemProfile", is_system_profile);
// Retrieve the last signin error message and email used.
......
......@@ -24,6 +24,7 @@
#include "content/public/browser/web_ui_data_source.h"
#include "ui/base/l10n/l10n_util.h"
#include "ui/base/webui/web_ui_util.h"
#include "ui/resources/grit/webui_resources.h"
SyncConfirmationUI::SyncConfirmationUI(content::WebUI* web_ui)
: SigninWebDialogUI(web_ui) {
......@@ -34,16 +35,18 @@ SyncConfirmationUI::SyncConfirmationUI(content::WebUI* web_ui)
content::WebUIDataSource* source =
content::WebUIDataSource::Create(chrome::kChromeUISyncConfirmationHost);
source->UseStringsJs();
source->AddResourcePath("signin_shared_css.html", IDR_SIGNIN_SHARED_CSS_HTML);
source->EnableReplaceI18nInJS();
if (is_sync_allowed) {
source->AddResourcePath("test_loader.js", IDR_WEBUI_JS_TEST_LOADER);
source->AddResourcePath("test_loader.html", IDR_WEBUI_HTML_TEST_LOADER);
source->OverrideContentSecurityPolicyScriptSrc(
"script-src chrome://resources chrome://test 'self';");
source->SetDefaultResource(IDR_SYNC_CONFIRMATION_HTML);
source->AddResourcePath("sync_confirmation_browser_proxy.html",
IDR_SYNC_CONFIRMATION_BROWSER_PROXY_HTML);
source->AddResourcePath("signin_shared_css.js", IDR_SIGNIN_SHARED_CSS_JS);
source->AddResourcePath("sync_confirmation_browser_proxy.js",
IDR_SYNC_CONFIRMATION_BROWSER_PROXY_JS);
source->AddResourcePath("sync_confirmation_app.html",
IDR_SYNC_CONFIRMATION_APP_HTML);
source->AddResourcePath("sync_confirmation_app.js",
IDR_SYNC_CONFIRMATION_APP_JS);
source->AddResourcePath("sync_confirmation.js", IDR_SYNC_CONFIRMATION_JS);
......@@ -81,6 +84,8 @@ SyncConfirmationUI::SyncConfirmationUI(content::WebUI* web_ui)
source->AddString("accountPictureUrl", custom_picture_url);
} else {
source->SetDefaultResource(IDR_SYNC_DISABLED_CONFIRMATION_HTML);
source->AddResourcePath("signin_shared_old_css.html",
IDR_SIGNIN_SHARED_OLD_CSS_HTML);
source->AddResourcePath("sync_disabled_confirmation.js",
IDR_SYNC_DISABLED_CONFIRMATION_JS);
......
......@@ -9,6 +9,7 @@ GEN_INCLUDE(['//chrome/test/data/webui/polymer_browser_test_base.js']);
GEN('#include "base/command_line.h"');
GEN('#include "build/branding_buildflags.h"');
GEN('#include "chrome/test/data/webui/signin_browsertest.h"');
GEN('#include "services/network/public/cpp/features.h"');
/**
* Test fixture for
......@@ -24,19 +25,12 @@ var SigninSyncConfirmationTest = class extends PolymerTest {
/** @override */
get browsePreload() {
return 'chrome://sync-confirmation/sync_confirmation_app.html';
return 'chrome://sync-confirmation/test_loader.html?module=signin/sync_confirmation_test.js';
}
/** @override */
get extraLibraries() {
return [
...super.extraLibraries,
'//chrome/test/data/webui/test_browser_proxy.js',
'//chrome/browser/resources/signin/sync_confirmation/' +
'sync_confirmation_browser_proxy.js',
'test_sync_confirmation_browser_proxy.js',
'sync_confirmation_test.js',
];
get featureList() {
return {enabled: ['network::features::kOutOfBlinkCors']};
}
};
......
......@@ -2,87 +2,88 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
cr.define('signin_sync_confirmation', function() {
import 'chrome://sync-confirmation/sync_confirmation_app.js';
suite('SigninSyncConfirmationTest', function() {
let app;
setup(function() {
PolymerTest.clearBody();
app = document.createElement('sync-confirmation-app');
let accountImageRequested = false;
registerMessageCallback('accountImageRequest', this, function() {
accountImageRequested = true;
});
document.body.append(app);
// Check that the account image is requested when the app element is
// attached to the document.
assertTrue(accountImageRequested);
});
import {SyncConfirmationBrowserProxyImpl} from 'chrome://sync-confirmation/sync_confirmation_browser_proxy.js';
import {TestSyncConfirmationBrowserProxy} from './test_sync_confirmation_browser_proxy.js';
// Tests that no DCHECKS are thrown during initialization of the UI.
test('LoadPage', function() {
assertEquals(
'Turn on sync?', app.$.syncConfirmationHeading.textContent.trim());
suite('SigninSyncConfirmationTest', function() {
let app;
setup(function() {
PolymerTest.clearBody();
app = document.createElement('sync-confirmation-app');
let accountImageRequested = false;
registerMessageCallback('accountImageRequest', this, function() {
accountImageRequested = true;
});
document.body.append(app);
// Check that the account image is requested when the app element is
// attached to the document.
assertTrue(accountImageRequested);
});
// This test suite verifies that the consent strings recorded in various
// scenarios are as expected. If the corresponding HTML file was updated
// without also updating the attributes referring to consent strings,
// this test will break.
suite('SigninSyncConfirmationConsentRecordingTest', function() {
let app;
let browserProxy;
// Tests that no DCHECKS are thrown during initialization of the UI.
test('LoadPage', function() {
assertEquals(
'Turn on sync?', app.$.syncConfirmationHeading.textContent.trim());
});
});
setup(function() {
// This test suite makes comparisons with strings in their default locale,
// which is en-US.
assertEquals(
'en-US', navigator.language,
'Cannot verify strings for the ' + navigator.language + 'locale.');
// This test suite verifies that the consent strings recorded in various
// scenarios are as expected. If the corresponding HTML file was updated
// without also updating the attributes referring to consent strings,
// this test will break.
suite('SigninSyncConfirmationConsentRecordingTest', function() {
let app;
let browserProxy;
browserProxy = new TestSyncConfirmationBrowserProxy();
sync.confirmation.SyncConfirmationBrowserProxyImpl.instance_ =
browserProxy;
setup(function() {
// This test suite makes comparisons with strings in their default locale,
// which is en-US.
assertEquals(
'en-US', navigator.language,
'Cannot verify strings for the ' + navigator.language + 'locale.');
PolymerTest.clearBody();
app = document.createElement('sync-confirmation-app');
document.body.append(app);
});
browserProxy = new TestSyncConfirmationBrowserProxy();
SyncConfirmationBrowserProxyImpl.instance_ = browserProxy;
const STANDARD_CONSENT_DESCRIPTION_TEXT = [
'Turn on sync?',
'Sync your bookmarks, passwords, history, and more on all your devices',
'Google may use your history to personalize Search, ads, and other ' +
'Google services',
];
PolymerTest.clearBody();
app = document.createElement('sync-confirmation-app');
document.body.append(app);
});
const STANDARD_CONSENT_DESCRIPTION_TEXT = [
'Turn on sync?',
'Sync your bookmarks, passwords, history, and more on all your devices',
'Google may use your history to personalize Search, ads, and other ' +
'Google services',
];
// Tests that the expected strings are recorded when clicking the Confirm
// button.
test('recordConsentOnConfirm', function() {
app.$$('#confirmButton').click();
return browserProxy.whenCalled('confirm').then(function(
[description, confirmation]) {
assertEquals(
JSON.stringify(STANDARD_CONSENT_DESCRIPTION_TEXT),
JSON.stringify(description));
assertEquals('Yes, I\'m in', confirmation);
});
// Tests that the expected strings are recorded when clicking the Confirm
// button.
test('recordConsentOnConfirm', function() {
app.$$('#confirmButton').click();
return browserProxy.whenCalled('confirm').then(function(
[description, confirmation]) {
assertEquals(
JSON.stringify(STANDARD_CONSENT_DESCRIPTION_TEXT),
JSON.stringify(description));
assertEquals('Yes, I\'m in', confirmation);
});
});
// Tests that the expected strings are recorded when clicking the Confirm
// button.
test('recordConsentOnSettingsLink', function() {
app.$$('#settingsButton').click();
return browserProxy.whenCalled('goToSettings').then(function([
description, confirmation
]) {
assertEquals(
JSON.stringify(STANDARD_CONSENT_DESCRIPTION_TEXT),
JSON.stringify(description));
assertEquals('Settings', confirmation);
});
// Tests that the expected strings are recorded when clicking the Confirm
// button.
test('recordConsentOnSettingsLink', function() {
app.$$('#settingsButton').click();
return browserProxy.whenCalled('goToSettings').then(function([
description, confirmation
]) {
assertEquals(
JSON.stringify(STANDARD_CONSENT_DESCRIPTION_TEXT),
JSON.stringify(description));
assertEquals('Settings', confirmation);
});
});
});
......@@ -2,8 +2,10 @@
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import {TestBrowserProxy} from 'chrome://test/test_browser_proxy.m.js';
/** @implements {settings.ProfileInfoBrowserProxy} */
class TestSyncConfirmationBrowserProxy extends TestBrowserProxy {
export class TestSyncConfirmationBrowserProxy extends TestBrowserProxy {
constructor() {
super([
'confirm',
......
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