[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: Scott Violet <sky@chromium.org>
Reviewed-by: Mihai Sardarescu <msarda@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Commit-Queue: Scott Chen <scottchen@chromium.org>
Cr-Commit-Position: refs/heads/master@{#521658}

chrome/app/generated_resources.grd

@@ -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

@@ -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

+# 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

-/* 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

@@ -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>
\ No newline at end of file

chrome/browser/resources/signin/dice_sync_confirmation/sync_confirmation.js

@@ -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,

chrome/browser/resources/signin/dice_sync_confirmation/sync_confirmation_app.html

+<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

+/* 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

+<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

+// 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

@@ -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

@@ -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

@@ -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,
+SigninViewControllerDelegateMac::CreateDialogWebContents(
+    Browser* browser,
     const std::string& url,
-                                                         int dialog_height) {
+    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

@@ -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,
+SigninViewControllerDelegateViews::CreateDialogWebView(
+    Browser* browser,
     const std::string& url,
-                                                       int dialog_height) {
+    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

@@ -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

@@ -21,31 +21,58 @@ 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->AddLocalizedString("syncConfirmationChromeSyncTitle",
                                IDS_SYNC_CONFIRMATION_CHROME_SYNC_TITLE);
     source->AddLocalizedString("syncConfirmationChromeSyncBody",
                                IDS_SYNC_CONFIRMATION_CHROME_SYNC_MESSAGE);
-  source->AddLocalizedString("syncConfirmationPersonalizeServicesTitle",
+    source->AddLocalizedString(
+        "syncConfirmationPersonalizeServicesTitle",
         IDS_SYNC_CONFIRMATION_PERSONALIZE_SERVICES_TITLE);
     source->AddLocalizedString("syncConfirmationPersonalizeServicesBody",
                                IDS_SYNC_CONFIRMATION_PERSONALIZE_SERVICES_BODY);
@@ -54,14 +81,16 @@ SyncConfirmationUI::SyncConfirmationUI(content::WebUI* web_ui)
     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;
+    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

@@ -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:*',