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: John Lee <johntlee@chromium.org>
Reviewed-by: David Roger <droger@chromium.org>
Reviewed-by: Thomas Tangl <tangltom@chromium.org>
Commit-Queue: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#705637}

chrome/browser/BUILD.gn

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

chrome/browser/browser_resources.grd

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

chrome/browser/resources/signin/BUILD.gn

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

chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation.html

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

chrome/browser/resources/signin/signin_error/signin_error.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">

chrome/browser/resources/signin/signin_shared_css.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>

chrome/browser/resources/signin/signin_shared_css.js

+/* 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');

chrome/browser/resources/signin/signin_shared_old_css.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;
+      }
+
+      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>

chrome/browser/resources/signin/sync_confirmation/BUILD.gn

@@ -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"
+}

chrome/browser/resources/signin/sync_confirmation/sync_confirmation.html

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

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

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

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

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

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

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

chrome/browser/resources/signin/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/sync_confirmation/sync_confirmation_browser_proxy.js

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

chrome/browser/resources/signin/sync_confirmation/sync_disabled_confirmation.html

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

chrome/browser/ui/webui/signin/signin_email_confirmation_ui.cc

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

chrome/browser/ui/webui/signin/signin_error_ui.cc

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

chrome/browser/ui/webui/signin/sync_confirmation_ui.cc

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

chrome/test/data/webui/signin/signin_browsertest.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']};
   }
 };
 

chrome/test/data/webui/signin/sync_confirmation_test.js

@@ -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);
     });
   });
 });

chrome/test/data/webui/signin/test_sync_confirmation_browser_proxy.js

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