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>
+<template>
   <style>
     a {
       color: var(--cr-link-color);
@@ -41,5 +38,4 @@
     }
 </if>
   </style>
-  </template>
-</dom-module>
+</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,13 +2,14 @@
  * 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);
+import {SyncConfirmationBrowserProxyImpl} from './sync_confirmation_browser_proxy.js';
+
+function initialize() {
+  addWebUIListener('clear-focus', clearFocus);
   const syncConfirmationBrowserProxy =
-        sync.confirmation.SyncConfirmationBrowserProxyImpl.getInstance();
+      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%.
@@ -18,15 +19,10 @@ cr.define('sync.confirmation', function() {
   // 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';
-  }
+}
 
-  function clearFocus() {
+function clearFocus() {
   document.activeElement.blur();
-  }
-
-  return {
-    initialize: initialize,
-  };
-});
+}
 
-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">
+<style include="signin-dialog-shared">
   :host {
     color: var(--cr-primary-text-color);
     display: block;
@@ -123,21 +109,21 @@
     left: auto;
     right: 16px;
   }
-    </style>
+</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="illustration-container">
   <div id="grey-banner"></div>
   <div id="illustration"></div>
   <img src="[[accountImageSrc_]]">
-    </div>
-    <div id="content-container">
+</div>
+<div id="content-container">
   <h1 id="syncConfirmationHeading" class="heading" consent-description>
     $i18n{syncConfirmationTitle}
   </h1>
@@ -163,7 +149,4 @@
       $i18n{syncConfirmationSettingsLabel}
     </cr-button>
   </div>
-    </div>
-  </template>
-  <script src="sync_confirmation_app.js"></script>
-</dom-module>
+</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,10 +6,10 @@
  * @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 {
+/** @interface */
+export class SyncConfirmationBrowserProxy {
   /**
    * Called when the user confirms the Sync Confirmation dialog.
    * @param {!Array<string>} description Strings that the user was presented
@@ -41,10 +41,10 @@ cr.define('sync.confirmation', function() {
    * Called when the WebUIListener for "account-image-changed" was added.
    */
   requestAccountImage() {}
-  }
+}
 
-  /** @implements {sync.confirmation.SyncConfirmationBrowserProxy} */
-  class SyncConfirmationBrowserProxyImpl {
+/** @implements {SyncConfirmationBrowserProxy} */
+export class SyncConfirmationBrowserProxyImpl {
   /** @override */
   confirm(description, confirmation) {
     chrome.send('confirm', [description, confirmation]);
@@ -69,12 +69,6 @@ cr.define('sync.confirmation', function() {
   requestAccountImage() {
     chrome.send('accountImageRequest');
   }
-  }
-
-  cr.addSingletonGetter(SyncConfirmationBrowserProxyImpl);
+}
 
-  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,9 +2,12 @@
 // 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() {
+import {SyncConfirmationBrowserProxyImpl} from 'chrome://sync-confirmation/sync_confirmation_browser_proxy.js';
+import {TestSyncConfirmationBrowserProxy} from './test_sync_confirmation_browser_proxy.js';
+
+suite('SigninSyncConfirmationTest', function() {
   let app;
   setup(function() {
     PolymerTest.clearBody();
@@ -24,13 +27,13 @@ cr.define('signin_sync_confirmation', function() {
     assertEquals(
         'Turn on sync?', app.$.syncConfirmationHeading.textContent.trim());
   });
-  });
+});
 
-  // 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() {
+// 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;
 
@@ -42,8 +45,7 @@ cr.define('signin_sync_confirmation', function() {
         'Cannot verify strings for the ' + navigator.language + 'locale.');
 
     browserProxy = new TestSyncConfirmationBrowserProxy();
-      sync.confirmation.SyncConfirmationBrowserProxyImpl.instance_ =
-          browserProxy;
+    SyncConfirmationBrowserProxyImpl.instance_ = browserProxy;
 
     PolymerTest.clearBody();
     app = document.createElement('sync-confirmation-app');
@@ -84,5 +86,4 @@ cr.define('signin_sync_confirmation', function() {
       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',