Skip to content

GitLab

T
tangled
Commit 812775b6 authored by Scott Chen's avatar Scott Chen Committed by Commit Bot
Browse files
Options

[signin] Change sync confirmation dialog looks. 

This CL changes the layout and text that is used in sync-confirmation
dialog for the DICE profiles.

Screenshot of the UI after the changes: https://imgur.com/a/DxMd6

Bug: 782155
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ia04733f23a0b249789cd5dc965358a62514553b5
Reviewed-on: https://chromium-review.googlesource.com/768876Reviewed-by: default avatarScott Violet <sky@chromium.org>
Reviewed-by: default avatarMihai Sardarescu <msarda@chromium.org>
Reviewed-by: default avatarDemetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521658}
parent 5a92b4e1
Hide whitespace changes
Inline Side-by-side
Showing with 447 additions and 503 deletions
chrome/app/generated_resources.grd
View file @ 812775b6
......@@ -7818,6 +7818,9 @@ I don't think this site should be blocked!
<message name="IDS_SYNC_CONFIRMATION_TITLE" desc="Title of the sync confirmation dialog in the tab modal signin flow">
You've signed in and turned on Sync
</message>
<message name="IDS_SYNC_CONFIRMATION_DICE_TITLE" desc="Title of the sync confirmation dialog in the tab modal signin flow">
Get even more from Chrome
</message>
<!-- "Chrome sync" is the Google Cloud Based service used for sync. Thus this string resource is set to "Chrome sync" even for Chromium builds. -->
<message name="IDS_SYNC_CONFIRMATION_CHROME_SYNC_TITLE" desc="Title of the chrome sync section of the sync confirmation dialog in the tab modal signin flow" formatter_data="android_java">
......@@ -7826,24 +7829,45 @@ I don't think this site should be blocked!
<message name="IDS_SYNC_CONFIRMATION_CHROME_SYNC_MESSAGE" desc="Body of the chrome sync section of the sync confirmation dialog in the tab modal signin flow" formatter_data="android_java">
Your bookmarks, history, passwords, and other settings will be synced to your Google Account so you can use them on all your devices
</message>
<message name="IDS_SYNC_CONFIRMATION_DICE_CHROME_SYNC_MESSAGE" desc="Body of the chrome sync section of the sync confirmation dialog in the tab modal signin flow">
Sync your bookmarks, passwords, and history on all your devices
</message>
<message name="IDS_SYNC_CONFIRMATION_PERSONALIZE_SERVICES_TITLE" desc="Title of the personalize services section of the sync confirmation dialog in the tab modal signin flow" formatter_data="android_java">
Personalize Google services
</message>
<message name="IDS_SYNC_CONFIRMATION_PERSONALIZE_SERVICES_BODY" desc="Body of the personalize services section of the sync confirmation dialog in the tab modal signin flow" formatter_data="android_java">
Google may use your browsing history to personalize Search, ads, and other Google services
</message>
<message name="IDS_SYNC_CONFIRMATION_DICE_PERSONALIZE_SERVICES_BODY" desc="Body of the personalize services section of the sync confirmation dialog in the tab modal signin flow">
Get more personalized experiences, such as better content suggestions and smarter Translate
</message>
<message name="IDS_SYNC_CONFIRMATION_PERSONALIZE_SERVICES_BODY_CHILD_ACCOUNT" desc="Body of the personalize services section of the sync confirmation dialog in the tab modal signin flow for child accounts" formatter_data="android_java">
Google may use your browsing history to personalize Search and other Google services
</message>
<message name="IDS_SYNC_CONFIRMATION_DICE_GOOGLE_SERVICES_BODY" desc="Body of the google services section of the sync confirmation dialog in the tab modal signin flow">
Bring powerful Google services like spell check and tap to search to Chrome
</message>
<message name="IDS_SYNC_CONFIRMATION_SYNC_SETTINGS_LINK_BODY" desc="Label of the section containing the link to go to the sync setting page.">
Want to manage sync and personalization before they’re turned on? Visit <ph name="BEGIN_LINK">&lt;a id="settingsLink" href="chrome://settings"&gt;</ph>Settings<ph name="END_LINK">&lt;/a&gt;<ex>&lt;/a&gt;</ex></ph>.
</message>
<message name="IDS_SYNC_CONFIRMATION_DICE_SYNC_SETTINGS_LINK_BODY" desc="Label of the section containing the link to go to the sync setting page.">
You can customize what information Google collects in <ph name="BEGIN_LINK">&lt;a id="settingsLink" href="chrome://settings"&gt;</ph>Settings<ph name="END_LINK">&lt;/a&gt;<ex>&lt;/a&gt;</ex></ph> anytime.
</message>
<message name="IDS_SYNC_CONFIRMATION_DICE_SYNC_SETTINGS_DESCRIPTION" desc="Body of the personalize services section of the sync confirmation dialog in the tab modal signin flow for child accounts">
Google may use your browsing activity, content on some sites you visit, and other browser interactions to personalize Chrome and other Google services like Translate, Search, and ads.
</message>
<message name="IDS_SYNC_CONFIRMATION_CONFIRM_BUTTON_LABEL" desc="Label of the confirmation button in the sync confirmation dialog of the tab modal signin flow">
Ok, got it
</message>
<message name="IDS_SYNC_CONFIRMATION_DICE_CONFIRM_BUTTON_LABEL" desc="Label of the confirmation button in the sync confirmation dialog of the tab modal signin flow">
Yes, I'm in
</message>
<message name="IDS_SYNC_CONFIRMATION_UNDO_BUTTON_LABEL" desc="Label of the undo button in the sync confirmation dialog of the tab modal signin flow">
Undo
</message>
<message name="IDS_SYNC_CONFIRMATION_DICE_UNDO_BUTTON_LABEL" desc="Label of the undo button in the sync confirmation dialog of the tab modal signin flow">
No thanks
</message>
<!--- Sync Confirmation section of the tab modal signin flow when sync is disabled by policy -->
<message name="IDS_SYNC_DISABLED_CONFIRMATION_CHROME_SYNC_TITLE" desc="Title of the chrome sync section of the sync confirmation dialog in the tab modal signin flow when sync is disabled by policy">
......
chrome/browser/browser_resources.grd
View file @ 812775b6
......@@ -421,9 +421,12 @@
<include name="IDR_SYNC_CONFIRMATION_CSS" file="resources\signin\sync_confirmation\sync_confirmation.css" 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_DICE_SYNC_CONFIRMATION_CSS" file="resources\signin\dice_sync_confirmation\sync_confirmation.css" type="BINDATA" />
<include name="IDR_DICE_SYNC_CONFIRMATION_HTML" file="resources\signin\dice_sync_confirmation\sync_confirmation.html" flattenhtml="true" allowexternalscript="true" type="BINDATA" />
<include name="IDR_DICE_SYNC_CONFIRMATION_JS" file="resources\signin\dice_sync_confirmation\sync_confirmation.js" type="BINDATA" />
<include name="IDR_DICE_SYNC_CONFIRMATION_BROWSER_PROXY_HTML" file="resources\signin\dice_sync_confirmation\sync_confirmation_browser_proxy.html" type="BINDATA" />
<include name="IDR_DICE_SYNC_CONFIRMATION_BROWSER_PROXY_JS" file="resources\signin\dice_sync_confirmation\sync_confirmation_browser_proxy.js" type="BINDATA" />
<include name="IDR_DICE_SYNC_CONFIRMATION_APP_HTML" file="resources\signin\dice_sync_confirmation\sync_confirmation_app.html" type="BINDATA" flattenhtml="true" allowexternalscript="true" />
<include name="IDR_DICE_SYNC_CONFIRMATION_APP_JS" file="resources\signin\dice_sync_confirmation\sync_confirmation_app.js" 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" />
......
chrome/browser/resources/signin/dice_sync_confirmation/compiled_resources2.gyp 0 → 100644
View file @ 812775b6
# Copyright 2017 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.
{
'targets': [
{
'target_name': 'sync_confirmation',
'dependencies': [
'<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
'sync_confirmation_browser_proxy',
],
'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
},
{
'target_name': 'sync_confirmation_app',
'dependencies': [
'<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
'sync_confirmation_browser_proxy',
],
'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
},
{
'target_name': 'sync_confirmation_browser_proxy',
'dependencies': [
'<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
'<(EXTERNS_GYP):chrome_send',
],
'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
},
],
}
\ No newline at end of file
chrome/browser/resources/signin/dice_sync_confirmation/sync_confirmation.css deleted 100644 → 0
View file @ 5a92b4e1
/* Copyright 2017 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. */
.picture img {
border-radius: 50%;
max-height: 100%;
max-width: 100%;
}
.details {
padding: 0 24px;
}
#picture-container {
align-items: center;
display: flex;
justify-content: center;
padding-bottom: 32px;
padding-top: 24px;
}
.picture {
-webkit-margin-start: 84px;
height: 96px;
position: relative;
width: 96px;
}
#profile-picture,
.checkmark-circle {
position: absolute;
}
.message-container {
display: flex;
margin-bottom: 16px;
}
.message-container:last-child {
margin-bottom: 32px;
}
.message-container .logo {
-webkit-margin-end: 20px;
background-size: cover;
flex-shrink: 0;
height: 20px;
position: relative;
top: -2px;
width: 20px;
}
#chrome-logo {
background-image: url(../../../../../ui/webui/resources/images/200-logo_chrome.png);
}
#googleg-logo {
background-image: url(../../../../../ui/webui/resources/images/200-logo_googleg.png);
}
.message-container .title {
font-weight: 500;
margin-bottom: 4px;
}
.message-container .body {
color: #646464;
}
.message-container .text {
line-height: 20px;
}
.message-container #activityControlsCheckbox {
-webkit-margin-start: 40px;
}
#undoButton {
-webkit-margin-start: 8px;
}
#syncDisabledDetails {
line-height: 20px;
margin-bottom: 8px;
margin-top: 16px;
padding: 0 24px;
}
#illustration {
height: 96px;
margin: 0 auto;
position: relative;
width: 264px;
}
#checkmark-circle {
background: rgb(66, 133, 244);
border: 2px solid #fff;
border-radius: 50%;
bottom: 0;
height: 24px;
position: absolute;
right: 0;
transform: scale(0);
width: 24px;
}
.loaded #checkmark-circle {
animation: scale-circle 300ms cubic-bezier(0, 0, 0.2, 1) forwards;
}
@keyframes scale-circle {
from { transform: scale(0); }
to { transform: scale(1); }
}
#checkmark-check {
left: 5px;
position: absolute;
top: 7px;
}
.loaded #checkmark-path {
animation: draw-path 300ms cubic-bezier(0, 0, 0.2, 1) 100ms forwards;
}
@keyframes draw-path {
from { stroke-dashoffset: 16; }
to { stroke-dashoffset: 0; }
}
#icons {
height: 96px;
position: absolute;
width: 264px;
}
#icons > div {
animation-delay: 200ms;
animation-duration: 1.4s;
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.25, 0.45, 0.4, 0.7);
background-size: cover;
opacity: 0;
position: absolute;
}
#icon-bookmarks {
background: url(../../../../../ui/webui/resources/images/icon_bookmarks.svg);
height: 36px;
left: 58px;
top: 0;
width: 36px;
}
#icon-extensions {
background: url(../../../../../ui/webui/resources/images/icon_extensions.svg);
height: 24px;
left: 30px;
top: 30px;
width: 24px;
}
#icon-passwords {
background: url(../../../../../ui/webui/resources/images/icon_passwords.svg);
height: 30px;
left: 38px;
top: 66px;
width: 40px;
}
#icon-history {
background: url(../../../../../ui/webui/resources/images/icon_history.svg);
height: 36px;
left: 190px;
top: 6px;
width: 36px;
}
#icon-tabs {
background: url(../../../../../ui/webui/resources/images/icon_tabs.svg);
height: 24px;
left: 222px;
top: 44px;
width: 24px;
}
#icon-themes {
background: url(../../../../../ui/webui/resources/images/icon_themes.svg);
height: 30px;
left: 184px;
top: 62px;
width: 32px;
}
#icon-circle-open {
border: 2px solid #000;
border-radius: 50%;
height: 8px;
left: 6px;
top: 56px;
width: 8px;
}
.icon-circle {
background: #000;
border-radius: 50%;
height: 4px;
width: 4px;
}
#icon-circle-1 {
left: 64px;
top: 50px;
}
#icon-circle-2 {
left: 178px;
top: 18px;
}
#icon-circle-3 {
left: 194px;
top: 50px;
}
#icon-circle-4 {
left: 258px;
top: 36px;
}
.loaded .fade-top-left {
animation-name: fade-in-icon-top-left;
}
.loaded .fade-top-right {
animation-name: fade-in-icon-top-right;
}
.loaded .fade-middle-left {
animation-name: fade-in-icon-middle-left;
}
.loaded .fade-middle-right {
animation-name: fade-in-icon-middle-right;
}
.loaded .fade-bottom-left {
animation-name: fade-in-icon-bottom-left;
}
.loaded .fade-bottom-right {
animation-name: fade-in-icon-bottom-right;
}
@keyframes fade-in-icon-top-left {
from {
opacity: 0;
transform: translate(0, 0);
}
to {
opacity: 0.1;
transform: translate(-4px, -4px);
}
}
@keyframes fade-in-icon-top-right {
from {
opacity: 0;
transform: translate(0, 0);
}
to {
opacity: 0.1;
transform: translate(4px, -4px);
}
}
@keyframes fade-in-icon-middle-left {
from {
opacity: 0;
transform: translate(0, 0);
}
to {
opacity: 0.1;
transform: translate(-4px, 0);
}
}
@keyframes fade-in-icon-middle-right {
from {
opacity: 0;
transform: translate(0, 0);
}
to {
opacity: 0.1;
transform: translate(4px, 0);
}
}
@keyframes fade-in-icon-bottom-left {
from {
opacity: 0;
transform: translate(0, 0);
}
to {
opacity: 0.1;
transform: translate(-4px, 4px);
}
}
@keyframes fade-in-icon-bottom-right {
from {
opacity: 0;
transform: translate(0, 0);
}
to {
opacity: 0.1;
transform: translate(4px, 4px);
}
}
chrome/browser/resources/signin/dice_sync_confirmation/sync_confirmation.html
View file @ 812775b6
......@@ -2,101 +2,19 @@
<html dir="$i18n{textdirection}" lang="$i18n{language}">
<head>
<meta charset="utf-8">
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">
<link rel="import" href="signin_shared_css.html">
<link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
<link rel="stylesheet" href="sync_confirmation.css"></link>
<style is="custom-style" include="signin-dialog-shared">
<if expr="is_macosx or is_linux">
#undoButton {
-webkit-margin-end: 8px;
-webkit-margin-start: 0;
<link rel="import" href="sync_confirmation_app.html"></link>
<style>
body {
margin: 0;
padding: 0;
}
</if>
</style>
</head>
<body>
<div class="container">
<div class="top-title-bar">$i18n{syncConfirmationTitle}</div>
<div class="details" id="syncConfirmationDetails">
<div id="picture-container">
<div id="illustration">
<div id="icons">
<div id="icon-bookmarks" class="fade-top-left"></div>
<div id="icon-extensions" class="fade-top-left"></div>
<div id="icon-passwords" class="fade-bottom-left"></div>
<div id="icon-history" class="fade-top-right"></div>
<div id="icon-tabs" class="fade-middle-right"></div>
<div id="icon-themes" class="fade-bottom-right"></div>
<div id="icon-circle-open" class="fade-middle-left"></div>
<div id="icon-circle-1" class="icon-circle fade-middle-left">
</div>
<div id="icon-circle-2" class="icon-circle fade-top-right"></div>
<div id="icon-circle-3" class="icon-circle fade-middle-right">
</div>
<div id="icon-circle-4" class="icon-circle fade-top-right"></div>
</div>
<div class="picture">
<img id="profile-picture">
<div id="checkmark-circle">
<svg id="checkmark-check" width="13" height="10"
viewBox="0 0 13 10">
<path id="checkmark-path" d="M1 5l3.5 3.5L12 1" stroke="#FFF"
stroke-width="2" stroke-dasharray="16"
stroke-dashoffset="16" fill="none"></path>
</svg>
</div>
</div>
</div>
</div>
<div class="message-container">
<!--
"Chrome sync" is the Google Cloud Based services used for sync. Thus
this section uses the Chrome logo even for Chromium builds.
-->
<div id="chrome-logo" class="logo"></div>
<div>
<div class="title">$i18n{syncConfirmationChromeSyncTitle}</div>
<div class="body text">$i18n{syncConfirmationChromeSyncBody}</div>
</div>
</div>
<div class="message-container">
<!--
This section uses the Google logo even for Chromium builds as the
user can personalize their Google services from this screen.
-->
<div id="googleg-logo" class="logo"></div>
<div>
<div class="title">
$i18n{syncConfirmationPersonalizeServicesTitle}
</div>
<div class="body text">
$i18n{syncConfirmationPersonalizeServicesBody}
</div>
</div>
</div>
<div class="message-container">
<div class="body">$i18nRaw{syncConfirmationSyncSettingsLinkBody}</div>
</div>
</div>
<div class="details" id="syncDisabledDetails">
<div class="body text">$i18n{syncDisabledConfirmationDetails}</div>
</div>
<div class="action-container">
<paper-button class="primary-action" id="confirmButton">
$i18n{syncConfirmationConfirmLabel}
</paper-button>
<paper-button class="secondary-action" id="undoButton">
$i18n{syncConfirmationUndoLabel}
</paper-button>
</div>
</div>
<sync-confirmation-app></sync-confirmation-app>
</body>
<script src="chrome://resources/js/cr.js"></script>
<script src="chrome://resources/js/load_time_data.js"></script>
<script src="chrome://resources/js/util.js"></script>
<script src="sync_confirmation.js"></script>
<script src="chrome://sync-confirmation/strings.js"></script>
</html>
</html>
\ No newline at end of file
chrome/browser/resources/signin/dice_sync_confirmation/sync_confirmation.js
View file @ 812775b6
......@@ -5,62 +5,25 @@
cr.define('sync.confirmation', function() {
'use strict';
function onConfirm(e) {
chrome.send('confirm');
}
function onUndo(e) {
chrome.send('undo');
}
function onGoToSettings(e) {
chrome.send('goToSettings');
}
function initialize() {
document.addEventListener('keydown', onKeyDown);
$('confirmButton').addEventListener('click', onConfirm);
$('undoButton').addEventListener('click', onUndo);
if (loadTimeData.getBoolean('isSyncAllowed')) {
$('settingsLink').addEventListener('click', onGoToSettings);
$('profile-picture').addEventListener('load', onPictureLoaded);
$('syncDisabledDetails').hidden = true;
} else {
$('syncConfirmationDetails').hidden = true;
}
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%.
chrome.send('initializedWithSize', [document.body.offsetHeight]);
syncConfirmationBrowserProxy.initializedWithSize(
[document.body.offsetHeight]);
}
function clearFocus() {
document.activeElement.blur();
}
function setUserImageURL(url) {
if (loadTimeData.getBoolean('isSyncAllowed')) {
$('profile-picture').src = url;
}
}
function onPictureLoaded(e) {
if (loadTimeData.getBoolean('isSyncAllowed')) {
$('picture-container').classList.add('loaded');
}
}
function onKeyDown(e) {
// If the currently focused element isn't something that performs an action
// on "enter" being pressed and the user hits "enter", perform the default
// action of the dialog, which is "OK, Got It".
if (e.key == 'Enter' &&
!/^(A|PAPER-(BUTTON|CHECKBOX))$/.test(document.activeElement.tagName)) {
$('confirmButton').click();
e.preventDefault();
}
}
// The C++ handler calls out to this Javascript function, so it needs to
// exist in the namespace. However, this version of the sync confirmation
// doesn't use a user image, so we do not need to actually implement this.
// TODO(scottchen): make the C++ handler not call this at all.
function setUserImageURL() {}
return {
clearFocus: clearFocus,
......@@ -69,4 +32,4 @@ cr.define('sync.confirmation', function() {
};
});
document.addEventListener('DOMContentLoaded', sync.confirmation.initialize);
document.addEventListener('DOMContentLoaded', sync.confirmation.initialize);
\ No newline at end of file
chrome/browser/resources/signin/dice_sync_confirmation/sync_confirmation_app.html 0 → 100644
View file @ 812775b6
<link rel="import" href="chrome://resources/html/polymer.html">
<link rel="import" href="chrome://resources/html/cr.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icon.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/iron-icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/image-icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/notification-icons.html">
<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.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">
<dom-module id="sync-confirmation-app">
<template>
<style include="signin-dialog-shared">
:host {
display: block;
width: 512px;
}
paper-button {
padding-left: 16px;
padding-right: 16px;
}
#undoButton {
-webkit-margin-start: 16px;
}
<if expr="is_macosx or is_linux">
/* This works together with the button-flip in signin-dialog-shared. */
#undoButton {
-webkit-margin-end: 16px;
-webkit-margin-start: 0;
}
</if>
#illustration-container {
/* TODO(scottchen): should be taller once illustration is made. */
height: 20px;
width: 100%;
}
#heading {
border-bottom: 1px solid var(--paper-grey-50);
color: var(--paper-grey-800);
font-weight: normal;
margin-bottom: 40px;
padding-bottom: 5px;
text-align: center;
}
.message-container {
color: var(--paper-grey-800);
display: flex;
line-height: 20px;
margin-bottom: 16px;
padding: 0 24px;
}
.footer::before {
border-top: 1px solid var(--paper-grey-300);
content: '';
display: block;
height: 1;
margin: 24px 0 24px 56px;
}
.footer .message-container {
color: var(--paper-grey-600);
}
.logo {
-webkit-margin-end: 16px;
background-size: cover;
flex-shrink: 0;
height: 16px;
margin-top: 2px;
position: relative;
width: 16px;
}
#personalize-logo {
fill: var(--google-blue-700);
/* Need the following rules to adjust for white spacing in the svg. */
-webkit-margin-end: 14px;
height: 18px;
width: 18px;
}
#sync-logo-container {
align-items: center;
background: green;
border-radius: 50%;
display: flex;
}
#sync-logo-container iron-icon {
fill: white;
height: 12px;
margin: auto;
width: 12px;
}
#googleg-logo {
background-image: -webkit-image-set(url(./images/ic_google.png) 1x,
url(./images/ic_google_2x.png) 2x);
}
</style>
<div id="illustration-container"></div>
<h1 id="heading">$i18n{syncConfirmationTitle}</h1>
<div class="message-container">
<!-- Container needed to contain the icon in a green circle. -->
<div id="sync-logo-container" class="logo">
<iron-icon icon="notification:sync" class="logo">
</iron-icon>
</div>
<div>$i18n{syncConfirmationChromeSyncBody}</div>
</div>
<div class="message-container">
<iron-icon icon="image:assistant" id="personalize-logo" class="logo">
</iron-icon>
<div>$i18n{syncConfirmationPersonalizeServicesBody}</div>
</div>
<div class="message-container">
<div id="googleg-logo" class="logo"></div>
<div>$i18n{syncConfirmationGoogleServicesBody}</div>
</div>
<div class="footer">
<div class="message-container">
<iron-icon icon="icons:settings" class="logo"></iron-icon>
<div>$i18nRaw{syncConfirmationSyncSettingsLinkBody}</div>
</div>
<div class="message-container">
<div class="logo"><!-- Spacer to line up with other texts --></div>
<div>$i18n{syncConfirmationSyncSettingsDescription}</div>
</div>
</div>
<div class="action-container">
<paper-button class="primary-action" id="confirmButton" on-tap="onConfirm_">
$i18n{syncConfirmationConfirmLabel}
</paper-button>
<paper-button class="secondary-action" id="undoButton" on-tap="onUndo_">
$i18n{syncConfirmationUndoLabel}
</paper-button>
</div>
</template>
<script src="sync_confirmation_app.js"></script>
</dom-module>
chrome/browser/resources/signin/dice_sync_confirmation/sync_confirmation_app.js 0 → 100644
View file @ 812775b6
/* Copyright 2017 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. */
Polymer({
is: 'sync-confirmation-app',
listeners: {
// This is necessary since the settingsLink element is inserted by i18nRaw.
'settingsLink.tap': 'onGoToSettings_'
},
/** @private {?sync.confirmation.SyncConfirmationBrowserProxy} */
syncConfirmationBrowserProxy_: null,
/** @private {?function(Event)} */
boundKeyDownHandler_: null,
/** @override */
attached: function() {
this.syncConfirmationBrowserProxy_ =
sync.confirmation.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
// event is not captured by "this".
document.addEventListener('keydown', this.boundKeyDownHandler_);
},
/** @override */
detached: function() {
document.removeEventListener('keydown', this.boundKeyDownHandler_);
},
/** @private */
onConfirm_: function() {
this.syncConfirmationBrowserProxy_.confirm();
},
/** @private */
onUndo_: function() {
this.syncConfirmationBrowserProxy_.undo();
},
/** @private */
onGoToSettings_: function() {
this.syncConfirmationBrowserProxy_.goToSettings();
},
/** @private */
onKeyDown_: function(e) {
if (e.key == 'Enter' && !/^(A|PAPER-BUTTON)$/.test(e.path[0].tagName)) {
this.onConfirm_();
e.preventDefault();
}
},
});
chrome/browser/resources/signin/dice_sync_confirmation/sync_confirmation_browser_proxy.html 0 → 100644
View file @ 812775b6
<link rel="import" href="chrome://resources/html/cr.html">
<script src="sync_confirmation_browser_proxy.js"></script>
\ No newline at end of file
chrome/browser/resources/signin/dice_sync_confirmation/sync_confirmation_browser_proxy.js 0 → 100644
View file @ 812775b6
// Copyright 2017 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.
/**
* @fileoverview A helper object used by the sync confirmation dialog to
* interact with the browser.
*/
cr.define('sync.confirmation', function() {
/** @interface */
class SyncConfirmationBrowserProxy {
confirm() {}
undo() {}
goToSettings() {}
/** @param {!Array<number>} height */
initializedWithSize(height) {}
}
/** @implements {sync.confirmation.SyncConfirmationBrowserProxy} */
class SyncConfirmationBrowserProxyImpl {
/** @override */
confirm() {
chrome.send('confirm');
}
/** @override */
undo() {
chrome.send('undo');
}
/** @override */
goToSettings() {
chrome.send('goToSettings');
}
/** @override */
initializedWithSize(height) {
chrome.send('initializedWithSize', height);
}
}
cr.addSingletonGetter(SyncConfirmationBrowserProxyImpl);
return {
SyncConfirmationBrowserProxy: SyncConfirmationBrowserProxy,
SyncConfirmationBrowserProxyImpl: SyncConfirmationBrowserProxyImpl,
};
});
\ No newline at end of file
chrome/browser/resources/signin/sync_confirmation/sync_confirmation.js
View file @ 812775b6
......@@ -62,6 +62,10 @@ cr.define('sync.confirmation', function() {
}
}
// TODO(scottchen): clearFocus and setUserImageURL are called directly by the
// C++ handler. C++ handlers should not be calling JS functions by name
// anymore. They should be firing events with FireWebuiListener and have the
// page itself decide whether to listen or not listen to the event.
return {
clearFocus: clearFocus,
initialize: initialize,
......
chrome/browser/ui/cocoa/profiles/signin_view_controller_delegate_mac.h
View file @ 812775b6
......@@ -83,7 +83,8 @@ class SigninViewControllerDelegateMac : public ConstrainedWindowMacDelegate,
static std::unique_ptr<content::WebContents> CreateDialogWebContents(
Browser* browser,
const std::string& url,
int dialog_height);
int dialog_height,
base::Optional<int> dialog_width);
// The constrained window opened by this delegate to display signin flow
// content.
......
chrome/browser/ui/cocoa/profiles/signin_view_controller_delegate_mac.mm
View file @ 812775b6
......@@ -17,6 +17,7 @@
#include "chrome/browser/ui/tabs/tab_strip_model.h"
#include "chrome/browser/ui/webui/signin/sync_confirmation_ui.h"
#include "chrome/common/url_constants.h"
#include "components/signin/core/browser/profile_management_switches.h"
#include "content/public/browser/native_web_keyboard_event.h"
#include "content/public/browser/render_widget_host_view.h"
#include "content/public/browser/web_contents.h"
......@@ -26,6 +27,9 @@ namespace {
// Width of the different dialogs that make up the signin flow.
const int kModalDialogWidth = 448;
// Width of the confirmation dialog with DICE.
const int kModalDialogWidthForDice = 512;
// Height of the tab-modal dialog displaying the password-separated signin
// flow. It matches the dimensions of the server content the dialog displays.
const CGFloat kFixedGaiaViewHeight = 612;
......@@ -43,6 +47,15 @@ CGFloat GetSyncConfirmationDialogPreferredHeight(Profile* profile) {
: kSigninErrorDialogHeight;
}
int GetSyncConfirmationDialogPreferredWidth(Profile* profile) {
// With DICE profiles, we show a different sync confirmation dialog which
// uses a different width.
return signin::IsDiceEnabledForProfile(profile->GetPrefs()) &&
profile->IsSyncAllowed()
? kModalDialogWidthForDice
: kModalDialogWidth;
}
} // namespace
SigninViewControllerDelegateMac::SigninViewControllerDelegateMac(
......@@ -105,7 +118,8 @@ SigninViewControllerDelegateMac::CreateSyncConfirmationWebContents(
Browser* browser) {
return CreateDialogWebContents(
browser, chrome::kChromeUISyncConfirmationURL,
GetSyncConfirmationDialogPreferredHeight(browser->profile()));
GetSyncConfirmationDialogPreferredHeight(browser->profile()),
GetSyncConfirmationDialogPreferredWidth(browser->profile()));
}
// static
......@@ -113,14 +127,17 @@ std::unique_ptr<content::WebContents>
SigninViewControllerDelegateMac::CreateSigninErrorWebContents(
Browser* browser) {
return CreateDialogWebContents(browser, chrome::kChromeUISigninErrorURL,
kSigninErrorDialogHeight);
kSigninErrorDialogHeight, base::nullopt);
}
// static
std::unique_ptr<content::WebContents>
SigninViewControllerDelegateMac::CreateDialogWebContents(Browser* browser,
const std::string& url,
int dialog_height) {
SigninViewControllerDelegateMac::CreateDialogWebContents(
Browser* browser,
const std::string& url,
int dialog_height,
base::Optional<int> opt_width) {
int dialog_width = opt_width.value_or(kModalDialogWidth);
std::unique_ptr<content::WebContents> web_contents(
content::WebContents::Create(
content::WebContents::CreateParams(browser->profile())));
......@@ -133,7 +150,7 @@ SigninViewControllerDelegateMac::CreateDialogWebContents(Browser* browser,
web_dialog_ui->InitializeMessageHandlerWithBrowser(browser);
NSView* webview = web_contents->GetNativeView();
[webview setFrameSize:NSMakeSize(kModalDialogWidth, dialog_height)];
[webview setFrameSize:NSMakeSize(dialog_width, dialog_height)];
return web_contents;
}
......@@ -158,7 +175,7 @@ void SigninViewControllerDelegateMac::PerformClose() {
void SigninViewControllerDelegateMac::ResizeNativeView(int height) {
if (!window_) {
window_frame_.size = NSMakeSize(kModalDialogWidth, height);
window_frame_.size = NSMakeSize(window_frame_.size.width, height);
DisplayModal();
}
}
......@@ -238,7 +255,8 @@ SigninViewControllerDelegate::CreateSyncConfirmationDelegate(
SigninViewControllerDelegateMac::CreateSyncConfirmationWebContents(
browser),
browser,
NSMakeRect(0, 0, kModalDialogWidth,
NSMakeRect(0, 0,
GetSyncConfirmationDialogPreferredWidth(browser->profile()),
GetSyncConfirmationDialogPreferredHeight(browser->profile())),
ui::MODAL_TYPE_WINDOW, true /* wait_for_size */);
}
......
chrome/browser/ui/views/profiles/signin_view_controller_delegate_views.cc
View file @ 812775b6
......@@ -14,6 +14,7 @@
#include "chrome/browser/ui/webui/signin/sync_confirmation_ui.h"
#include "chrome/common/url_constants.h"
#include "components/constrained_window/constrained_window_views.h"
#include "components/signin/core/browser/profile_management_switches.h"
#include "components/web_modal/web_contents_modal_dialog_host.h"
#include "content/public/browser/render_widget_host_view.h"
#include "content/public/browser/web_contents.h"
......@@ -24,6 +25,7 @@ namespace {
const int kFixedGaiaViewHeight = 612;
const int kModalDialogWidth = 448;
const int kModalDialogWidthForDice = 512;
const int kSyncConfirmationDialogHeight = 487;
const int kSigninErrorDialogHeight = 164;
......@@ -34,6 +36,15 @@ int GetSyncConfirmationDialogPreferredHeight(Profile* profile) {
: kSigninErrorDialogHeight;
}
int GetSyncConfirmationDialogPreferredWidth(Profile* profile) {
// With DICE profiles, we show a different sync confirmation dialog which
// uses a different width.
return signin::IsDiceEnabledForProfile(profile->GetPrefs()) &&
profile->IsSyncAllowed()
? kModalDialogWidthForDice
: kModalDialogWidth;
}
} // namespace
SigninViewControllerDelegateViews::SigninViewControllerDelegateViews(
......@@ -98,8 +109,8 @@ void SigninViewControllerDelegateViews::ResizeNativeView(int height) {
->GetWebContentsModalDialogHost()
->GetMaximumDialogSize()
.height();
content_view_->SetPreferredSize(
gfx::Size(kModalDialogWidth, std::min(height, max_height)));
content_view_->SetPreferredSize(gfx::Size(
content_view_->GetPreferredSize().width(), std::min(height, max_height)));
if (!modal_signin_widget_) {
// The modal wasn't displayed yet so just show it with the already resized
......@@ -175,20 +186,23 @@ SigninViewControllerDelegateViews::CreateSyncConfirmationWebView(
Browser* browser) {
return CreateDialogWebView(
browser, chrome::kChromeUISyncConfirmationURL,
GetSyncConfirmationDialogPreferredHeight(browser->profile()));
GetSyncConfirmationDialogPreferredHeight(browser->profile()),
GetSyncConfirmationDialogPreferredWidth(browser->profile()));
}
std::unique_ptr<views::WebView>
SigninViewControllerDelegateViews::CreateSigninErrorWebView(Browser* browser) {
return CreateDialogWebView(browser, chrome::kChromeUISigninErrorURL,
kSigninErrorDialogHeight);
kSigninErrorDialogHeight, base::nullopt);
}
// static
std::unique_ptr<views::WebView>
SigninViewControllerDelegateViews::CreateDialogWebView(Browser* browser,
const std::string& url,
int dialog_height) {
SigninViewControllerDelegateViews::CreateDialogWebView(
Browser* browser,
const std::string& url,
int dialog_height,
base::Optional<int> opt_width) {
int dialog_width = opt_width.value_or(kModalDialogWidth);
views::WebView* web_view = new views::WebView(browser->profile());
web_view->LoadInitialURL(GURL(url));
......@@ -201,7 +215,7 @@ SigninViewControllerDelegateViews::CreateDialogWebView(Browser* browser,
->GetMaximumDialogSize()
.height();
web_view->SetPreferredSize(
gfx::Size(kModalDialogWidth, std::min(dialog_height, max_height)));
gfx::Size(dialog_width, std::min(dialog_height, max_height)));
return std::unique_ptr<views::WebView>(web_view);
}
......
chrome/browser/ui/views/profiles/signin_view_controller_delegate_views.h
View file @ 812775b6
......@@ -78,7 +78,8 @@ class SigninViewControllerDelegateViews : public views::DialogDelegateView,
static std::unique_ptr<views::WebView> CreateDialogWebView(
Browser* browser,
const std::string& url,
int dialog_height);
int dialog_height,
base::Optional<int> dialog_width);
views::WebView* content_view_;
views::Widget* modal_signin_widget_; // Not owned.
......
chrome/browser/ui/webui/signin/sync_confirmation_ui.cc
View file @ 812775b6
......@@ -21,47 +21,76 @@ SyncConfirmationUI::SyncConfirmationUI(content::WebUI* web_ui)
: SigninWebDialogUI(web_ui) {
Profile* profile = Profile::FromWebUI(web_ui);
bool is_sync_allowed = profile->IsSyncAllowed();
bool is_dice_enabled = signin::IsDiceEnabledForProfile(profile->GetPrefs());
content::WebUIDataSource* source =
content::WebUIDataSource::Create(chrome::kChromeUISyncConfirmationHost);
source->SetJsonPath("strings.js");
if (signin::IsDiceEnabledForProfile(profile->GetPrefs())) {
source->AddResourcePath("signin_shared_css.html", IDR_SIGNIN_SHARED_CSS_HTML);
int title_ids, confirm_button_ids, undo_button_ids;
if (is_dice_enabled && is_sync_allowed) {
source->SetDefaultResource(IDR_DICE_SYNC_CONFIRMATION_HTML);
source->AddResourcePath("sync_confirmation.css",
IDR_DICE_SYNC_CONFIRMATION_CSS);
source->AddResourcePath("sync_confirmation_browser_proxy.html",
IDR_DICE_SYNC_CONFIRMATION_BROWSER_PROXY_HTML);
source->AddResourcePath("sync_confirmation_browser_proxy.js",
IDR_DICE_SYNC_CONFIRMATION_BROWSER_PROXY_JS);
source->AddResourcePath("sync_confirmation_app.html",
IDR_DICE_SYNC_CONFIRMATION_APP_HTML);
source->AddResourcePath("sync_confirmation_app.js",
IDR_DICE_SYNC_CONFIRMATION_APP_JS);
source->AddResourcePath("sync_confirmation.js",
IDR_DICE_SYNC_CONFIRMATION_JS);
source->AddLocalizedString("syncConfirmationChromeSyncBody",
IDS_SYNC_CONFIRMATION_DICE_CHROME_SYNC_MESSAGE);
source->AddLocalizedString(
"syncConfirmationPersonalizeServicesBody",
IDS_SYNC_CONFIRMATION_DICE_PERSONALIZE_SERVICES_BODY);
source->AddLocalizedString("syncConfirmationGoogleServicesBody",
IDS_SYNC_CONFIRMATION_DICE_GOOGLE_SERVICES_BODY);
source->AddLocalizedString(
"syncConfirmationSyncSettingsLinkBody",
IDS_SYNC_CONFIRMATION_DICE_SYNC_SETTINGS_LINK_BODY);
source->AddLocalizedString(
"syncConfirmationSyncSettingsDescription",
IDS_SYNC_CONFIRMATION_DICE_SYNC_SETTINGS_DESCRIPTION);
title_ids = IDS_SYNC_CONFIRMATION_DICE_TITLE;
confirm_button_ids = IDS_SYNC_CONFIRMATION_DICE_CONFIRM_BUTTON_LABEL;
undo_button_ids = IDS_SYNC_CONFIRMATION_DICE_UNDO_BUTTON_LABEL;
} else {
source->SetDefaultResource(IDR_SYNC_CONFIRMATION_HTML);
source->AddResourcePath("sync_confirmation.css", IDR_SYNC_CONFIRMATION_CSS);
source->AddResourcePath("sync_confirmation.js", IDR_SYNC_CONFIRMATION_JS);
}
source->AddResourcePath("signin_shared_css.html", IDR_SIGNIN_SHARED_CSS_HTML);
source->AddBoolean("isSyncAllowed", is_sync_allowed);
source->AddBoolean("isSyncAllowed", is_sync_allowed);
source->AddLocalizedString("syncConfirmationChromeSyncTitle",
IDS_SYNC_CONFIRMATION_CHROME_SYNC_TITLE);
source->AddLocalizedString("syncConfirmationChromeSyncBody",
IDS_SYNC_CONFIRMATION_CHROME_SYNC_MESSAGE);
source->AddLocalizedString("syncConfirmationPersonalizeServicesTitle",
IDS_SYNC_CONFIRMATION_PERSONALIZE_SERVICES_TITLE);
source->AddLocalizedString("syncConfirmationPersonalizeServicesBody",
IDS_SYNC_CONFIRMATION_PERSONALIZE_SERVICES_BODY);
source->AddLocalizedString("syncConfirmationSyncSettingsLinkBody",
IDS_SYNC_CONFIRMATION_SYNC_SETTINGS_LINK_BODY);
source->AddLocalizedString("syncDisabledConfirmationDetails",
IDS_SYNC_DISABLED_CONFIRMATION_DETAILS);
source->AddLocalizedString("syncConfirmationChromeSyncTitle",
IDS_SYNC_CONFIRMATION_CHROME_SYNC_TITLE);
source->AddLocalizedString("syncConfirmationChromeSyncBody",
IDS_SYNC_CONFIRMATION_CHROME_SYNC_MESSAGE);
source->AddLocalizedString(
"syncConfirmationPersonalizeServicesTitle",
IDS_SYNC_CONFIRMATION_PERSONALIZE_SERVICES_TITLE);
source->AddLocalizedString("syncConfirmationPersonalizeServicesBody",
IDS_SYNC_CONFIRMATION_PERSONALIZE_SERVICES_BODY);
source->AddLocalizedString("syncConfirmationSyncSettingsLinkBody",
IDS_SYNC_CONFIRMATION_SYNC_SETTINGS_LINK_BODY);
source->AddLocalizedString("syncDisabledConfirmationDetails",
IDS_SYNC_DISABLED_CONFIRMATION_DETAILS);
int title_ids = IDS_SYNC_CONFIRMATION_TITLE;
int confirm_button_ids = IDS_SYNC_CONFIRMATION_CONFIRM_BUTTON_LABEL;
int undo_button_ids = IDS_SYNC_CONFIRMATION_UNDO_BUTTON_LABEL;
if (!is_sync_allowed) {
title_ids = IDS_SYNC_DISABLED_CONFIRMATION_CHROME_SYNC_TITLE;
confirm_button_ids = IDS_SYNC_DISABLED_CONFIRMATION_CONFIRM_BUTTON_LABEL;
undo_button_ids = IDS_SYNC_DISABLED_CONFIRMATION_UNDO_BUTTON_LABEL;
title_ids = IDS_SYNC_CONFIRMATION_TITLE;
confirm_button_ids = IDS_SYNC_CONFIRMATION_CONFIRM_BUTTON_LABEL;
undo_button_ids = IDS_SYNC_CONFIRMATION_UNDO_BUTTON_LABEL;
if (!is_sync_allowed) {
title_ids = IDS_SYNC_DISABLED_CONFIRMATION_CHROME_SYNC_TITLE;
confirm_button_ids = IDS_SYNC_DISABLED_CONFIRMATION_CONFIRM_BUTTON_LABEL;
undo_button_ids = IDS_SYNC_DISABLED_CONFIRMATION_UNDO_BUTTON_LABEL;
}
}
source->AddLocalizedString("syncConfirmationTitle", title_ids);
source->AddLocalizedString("syncConfirmationConfirmLabel",
confirm_button_ids);
......
third_party/closure_compiler/compiled_resources2.gyp
View file @ 812775b6
......@@ -38,6 +38,7 @@
'<(DEPTH)/chrome/browser/resources/print_preview/compiled_resources2.gyp:*',
'<(DEPTH)/chrome/browser/resources/print_preview/new/compiled_resources2.gyp:*',
'<(DEPTH)/chrome/browser/resources/settings/compiled_resources2.gyp:*',
'<(DEPTH)/chrome/browser/resources/signin/dice_sync_confirmation/compiled_resources2.gyp:*',
'<(DEPTH)/chrome/browser/resources/webapks/compiled_resources2.gyp:*',
'<(DEPTH)/chrome/browser/resources/welcome/dice_welcome/compiled_resources2.gyp:*',
'<(DEPTH)/ui/file_manager/compiled_resources2.gyp:*',
......
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