Settings: Migrate settings_ui/* to Polymer 3

Bug: 1026426
Change-Id: I5df7de36e7c86a881e3db852f9a3702f09047b08
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2097249
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#749463}

chrome/browser/resources/settings/BUILD.gn

@@ -239,6 +239,7 @@ group("closure_compile_module") {
     "settings_main:closure_compile_module",
     "settings_menu:closure_compile_module",
     "settings_page:closure_compile_module",
+    "settings_ui:closure_compile_module",
   ]
   if (!is_chromeos) {
     deps += [

chrome/browser/resources/settings/global_scroll_target_behavior.js

@@ -98,11 +98,11 @@ cr.define('settings', function() {
    * This should only be called once.
    * @param {HTMLElement} scrollTarget
    */
-  function setGlobalScrollTarget(scrollTarget) {
+  /* #export */ function setGlobalScrollTarget(scrollTarget) {
     scrollTargetResolver.resolve(scrollTarget);
   }
 
-  function resetGlobalScrollTargetForTesting() {
+  /* #export */ function resetGlobalScrollTargetForTesting() {
     scrollTargetResolver = new PromiseResolver();
   }
 

chrome/browser/resources/settings/settings.js

@@ -36,6 +36,7 @@ import './settings_main/settings_main.m.js';
 import './settings_menu/settings_menu.m.js';
 import './settings_page/settings_subpage.m.js';
 import './settings_page/settings_animated_pages.m.js';
+import './settings_ui/settings_ui.m.js';
 
 // <if expr="_google_chrome and is_win">
 import './incompatible_applications_page/incompatible_applications_page.m.js';

chrome/browser/resources/settings/settings_resources_v3.grdp

@@ -452,6 +452,11 @@
            file="${root_gen_dir}/chrome/browser/resources/settings/settings_page/settings_subpage.m.js"
            use_base_dir="false"
            type="BINDATA" />
+  <include name="IDR_SETTINGS_SETTINGS_UI_SETTINGS_UI_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/settings_ui/settings_ui.m.js"
+           use_base_dir="false"
+           type="BINDATA"
+           preprocess="true" />
   <include name="IDR_SETTINGS_SETTINGS_ROUTES_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/settings_routes.m.js"
            use_base_dir="false"

chrome/browser/resources/settings/settings_ui/BUILD.gn

@@ -3,6 +3,8 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
+import("../settings.gni")
 
 js_type_check("closure_compile") {
   deps = [ ":settings_ui" ]
@@ -25,28 +27,54 @@ js_library("settings_ui") {
   ]
 }
 
-# TODO(crbug.com/1026426): Fix and enable.
-#js_type_check("closure_compile_module") {
-#  is_polymer3 = true
-#  deps = [ ":settings_ui.m" ]
-#}
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [ ":settings_ui.m" ]
+}
 
 js_library("settings_ui.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/settings_ui/settings_ui.m.js" ]
   deps = [
-    # TODO: Fill those in.
+    "..:global_scroll_target_behavior.m",
+    "..:page_visibility.m",
+    "..:route.m",
+    "..:router.m",
+    "../prefs:prefs.m",
+    "../settings_main:settings_main.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements:cr_container_shadow_behavior.m",
+    "//ui/webui/resources/cr_elements/cr_drawer:cr_drawer.m",
+    "//ui/webui/resources/cr_elements/cr_toolbar:cr_toolbar.m",
+    "//ui/webui/resources/cr_elements/cr_toolbar:cr_toolbar_search_field.m",
+    "//ui/webui/resources/cr_elements/policy:cr_policy_indicator_behavior.m",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:find_shortcut_behavior.m",
+    "//ui/webui/resources/js:util.m",
   ]
   extra_deps = [ ":settings_ui_module" ]
 }
 
-import("//tools/polymer/polymer.gni")
-
 group("polymer3_elements") {
-  deps = [ ":settings_ui_module" ]
+  public_deps = [ ":settings_ui_module" ]
 }
 
 polymer_modulizer("settings_ui") {
   js_file = "settings_ui.js"
   html_file = "settings_ui.html"
   html_type = "dom-module"
+  auto_imports = settings_auto_imports + [
+                   "chrome/browser/resources/settings/global_scroll_target_behavior.html|setGlobalScrollTarget,resetGlobalScrollTargetForTesting",
+                   "chrome/browser/resources/settings/page_visibility.html|PageVisibility,pageVisibility",
+                   "chrome/browser/resources/settings/route.html|routes",
+                   "chrome/browser/resources/settings/router.html|Route,Router,RouteObserverBehavior",
+                   "ui/webui/resources/html/assert.html|assert",
+                   "ui/webui/resources/html/cr.html|isChromeOS",
+                   "ui/webui/resources/html/util.html|listenOnce",
+                   "ui/webui/resources/cr_elements/cr_container_shadow_behavior.html|CrContainerShadowBehavior",
+                 ]
+  namespace_rewrites = settings_namespace_rewrites + [
+                         "settings.setGlobalScrollTarget|setGlobalScrollTarget",
+                         "settings.resetGlobalScrollTargetForTesting|resetGlobalScrollTargetForTesting",
+                       ]
 }

chrome/browser/resources/settings/settings_ui/settings_ui.html

@@ -6,6 +6,8 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
+<link rel="import" href="chrome://resources/html/assert.html">
+<link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/find_shortcut_behavior.html">
 <link rel="import" href="chrome://resources/html/util.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color.html">

chrome/browser/resources/settings/settings_ui/settings_ui.js

@@ -14,9 +14,10 @@ cr.define('settings', function() {
   /** Defined when the main Settings script runs. */
   let defaultResourceLoaded = true;  // eslint-disable-line prefer-const
 
-  assert(
-      !window.settings || !window.settings.defaultResourceLoaded,
-      'settings_ui.js run twice. You probably have an invalid import.');
+  /* #ignore */ assert(
+      /* #ignore */ !window.settings || !window.settings.defaultResourceLoaded,
+      /* #ignore */ 'settings_ui.js run twice. ' +
+          /* #ignore */ 'You probably have an invalid import.');
 
   Polymer({
     is: 'settings-ui',
@@ -97,7 +98,7 @@ cr.define('settings', function() {
         this.$.drawer.cancel();
       });
 
-      CrPolicyStrings = {
+      window.CrPolicyStrings = {
         controlledSettingExtension:
             loadTimeData.getString('controlledSettingExtension'),
         controlledSettingExtensionWithoutName:
@@ -143,7 +144,8 @@ cr.define('settings', function() {
 
       // Preload bold Roboto so it doesn't load and flicker the first time used.
       document.fonts.load('bold 12px Roboto');
-      settings.setGlobalScrollTarget(this.$.container);
+      settings.setGlobalScrollTarget(
+          /** @type {HTMLElement} */ (this.$.container));
 
       const scrollToTop = top => new Promise(resolve => {
         if (this.$.container.scrollTop === top) {

chrome/test/data/webui/BUILD.gn

@@ -48,6 +48,7 @@ js2gtest("interactive_ui_tests_js_webui") {
     "$root_gen_dir/chrome/test/data/webui/cr_focus_row_behavior_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/mock_controller.m.js",
     "$root_gen_dir/chrome/test/data/webui/settings/settings_animated_pages_test.m.js",
+    "$root_gen_dir/chrome/test/data/webui/settings/settings_ui_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/settings/test_util.m.js",
     "$root_gen_dir/chrome/test/data/webui/test_browser_proxy.m.js",
     "$root_gen_dir/chrome/test/data/webui/test_store.m.js",

chrome/test/data/webui/settings/BUILD.gn

@@ -49,6 +49,7 @@ js_modulizer("modulize") {
     "settings_subpage_test.js",
     "settings_textarea_tests.js",
     "settings_toggle_button_tests.js",
+    "settings_ui_tests.js",
     "site_favicon_test.js",
     "startup_urls_page_test.js",
     "sync_test_util.js",

chrome/test/data/webui/settings/cr_settings_v3_interactive_ui_tests.js

@@ -36,3 +36,15 @@ var CrSettingsAnimatedPagesV3Test =
 TEST_F('CrSettingsAnimatedPagesV3Test', 'All', function() {
   mocha.run();
 });
+
+// eslint-disable-next-line no-var
+var SettingsUIV3InteractiveTest = class extends CrSettingsV3InteractiveUITest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://settings/test_loader.html?module=settings/settings_ui_tests.m.js';
+  }
+};
+
+TEST_F('SettingsUIV3InteractiveTest', 'All', function() {
+  mocha.run();
+});

chrome/test/data/webui/settings/settings_ui_tests.js

@@ -2,6 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {CrSettingsPrefs, Router, routes} from 'chrome://settings/settings.js';
+// #import {eventToPromise} from 'chrome://test/test_util.m.js';
+// #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// clang-format on
+
 /** @fileoverview Suite of tests for the Settings layout. */
 suite('settings-ui', function() {
   let toolbar;