Settings: Migrate most of settings_idle_load to Polymer 3

For now, ignoring importHref() line. Once lazy loading is added for
Polymer 3 settings, this will be updated to be replaced by dynamic
import() instead.

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

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

@@ -54,7 +54,6 @@ polymer_modulizer("basic_page") {
   html_type = "dom-module"
   ignore_imports = [
     "chrome/browser/resources/settings/autofill_page/autofill_page.html",
-    "chrome/browser/resources/settings/controls/settings_idle_load.html",
     "chrome/browser/resources/settings/people_page/people_page.html",
     "chrome/browser/resources/settings/privacy_page/privacy_page.html",
     "chrome/browser/resources/settings/safety_check_page/safety_check_page.html",

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

@@ -136,6 +136,7 @@ js_type_check("closure_compile_module") {
     ":settings_boolean_control_behavior.m",
     ":settings_checkbox.m",
     ":settings_dropdown_menu.m",
+    ":settings_idle_load.m",
     ":settings_radio_group.m",
     ":settings_slider.m",
     ":settings_textarea.m",
@@ -232,6 +233,15 @@ js_library("settings_dropdown_menu.m") {
   extra_deps = [ ":settings_dropdown_menu_module" ]
 }
 
+js_library("settings_idle_load.m") {
+  sources = [ "$root_gen_dir/chrome/browser/resources/settings/controls/settings_idle_load.m.js" ]
+  deps = [
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:assert.m",
+  ]
+  extra_deps = [ ":settings_idle_load_module" ]
+}
+
 js_library("settings_radio_group.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/controls/settings_radio_group.m.js" ]
   deps = [
@@ -283,6 +293,7 @@ group("polymer3_elements") {
     ":password_prompt_dialog_module",
     ":settings_checkbox_module",
     ":settings_dropdown_menu_module",
+    ":settings_idle_load_module",
     ":settings_radio_group_module",
     ":settings_slider_module",
     ":settings_textarea_module",
@@ -344,6 +355,17 @@ polymer_modulizer("settings_dropdown_menu") {
   namespace_rewrites = settings_namespace_rewrites
 }
 
+polymer_modulizer("settings_idle_load") {
+  js_file = "settings_idle_load.js"
+  html_file = "settings_idle_load.html"
+  html_type = "dom-module"
+  auto_imports = [
+    "ui/webui/resources/html/assert.html|assert",
+    "ui/webui/resources/html/polymer.html|Polymer,html,templatize,TemplateInstanceBase",
+  ]
+  namespace_rewrites = [ "Polymer.Templatize.templatize|templatize" ]
+}
+
 polymer_modulizer("settings_radio_group") {
   js_file = "settings_radio_group.js"
   html_file = "settings_radio_group.html"

chrome/browser/resources/settings/controls/settings_idle_load.js

@@ -22,7 +22,7 @@ Polymer({
   /** @private {?Element} */
   child_: null,
 
-  /** @private {?Element} */
+  /** @private {?Element|?TemplateInstanceBase} */
   instance_: null,
 
   /** @private {number} */
@@ -51,7 +51,7 @@ Polymer({
     }
 
     this.loading_ = new Promise((resolve, reject) => {
-      this.importHref(this.url, () => {
+      /* #ignore */ this.importHref(this.url, () => {
         const template =
             /** @type {!HTMLTemplateElement} */ (this.getContentChildren()[0]);
         const TemplateClass = Polymer.Templatize.templatize(template, this, {
@@ -68,7 +68,7 @@ Polymer({
         resolve(this.child_);
 
         this.fire('lazy-loaded');
-      }, reject, true);
+     /* #ignore */ }, reject, true);
     });
 
     return this.loading_;

chrome/browser/resources/settings/settings.js

@@ -13,6 +13,7 @@ import './controls/controlled_radio_button.m.js';
 import './controls/extension_controlled_indicator.m.js';
 import './controls/settings_checkbox.m.js';
 import './controls/settings_dropdown_menu.m.js';
+import './controls/settings_idle_load.m.js';
 import './controls/settings_slider.m.js';
 import './controls/settings_textarea.m.js';
 import './controls/settings_toggle_button.m.js';

chrome/browser/resources/settings/settings_resources_v3.grdp

@@ -115,6 +115,10 @@
            file="${root_gen_dir}/chrome/browser/resources/settings/controls/settings_dropdown_menu.m.js"
            use_base_dir="false"
            type="BINDATA" />
+  <include name="IDR_SETTINGS_CONTROLS_SETTINGS_IDLE_LOAD_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/controls/settings_idle_load.m.js"
+           use_base_dir="false"
+           type="BINDATA" />
   <include name="IDR_SETTINGS_CONTROLS_PREF_CONTROL_BEHAVIOR_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/controls/pref_control_behavior.m.js"
            use_base_dir="false"

chrome/test/data/webui/BUILD.gn

@@ -102,6 +102,7 @@ js2gtest("browser_tests_js_webui") {
     "settings/cr_settings_v3_browsertest.js",
     "settings/help_page_browsertest.js",
     "settings/settings_idle_load_browsertest.js",
+    "settings/settings_idle_load_v3_browsertest.js",
     "text_defaults_browsertest.js",
     "webui_resource_async_browsertest.js",
   ]
@@ -226,6 +227,7 @@ js2gtest("browser_tests_js_webui") {
     "$root_gen_dir/chrome/test/data/webui/settings/fake_input_method_private.m.js",
     "$root_gen_dir/chrome/test/data/webui/settings/fake_language_settings_private.m.js",
     "$root_gen_dir/chrome/test/data/webui/settings/fake_settings_private.m.js",
+    "$root_gen_dir/chrome/test/data/webui/settings/idle_load_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/settings/languages_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/settings/languages_page_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/settings/on_startup_page_tests.m.js",

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

@@ -24,6 +24,7 @@ js_modulizer("modulize") {
     "fake_input_method_private.js",
     "fake_language_settings_private.js",
     "fake_settings_private.js",
+    "idle_load_tests.js",
     "languages_page_tests.js",
     "languages_tests.js",
     "on_startup_page_tests.js",

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

+// Copyright 2020 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.
+
+// #clang-format off
+// #import 'chrome://settings/settings.js';
+// #clang-format on
+
+suite('Settings idle load tests', function() {
+  setup(function() {
+    document.body.innerHTML = `
+      <settings-idle-load id="idleTemplate"
+          url="chrome://resources/html/polymer.html">
+        <template>
+          <div></div>
+        </template>
+      </settings-idle-load>
+    `;
+    // The div should not be initially accessible.
+    assertFalse(!!document.body.querySelector('div'));
+  });
+
+  test('stamps after get()', function() {
+    // Calling get() will force stamping without waiting for idle time.
+    return document.getElementById('idleTemplate').get().then(function(inner) {
+      assertEquals('DIV', inner.nodeName);
+      assertEquals(inner, document.body.querySelector('div'));
+    });
+  });
+
+  test('stamps after idle', function(done) {
+    requestIdleCallback(function() {
+      // After JS calls idle-callbacks, this should be accessible.
+      assertTrue(!!document.body.querySelector('div'));
+      done();
+    });
+  });
+});

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

@@ -21,6 +21,7 @@ SettingsIdleLoadBrowserTest.prototype = {
   extraLibraries: [
     '//third_party/mocha/mocha.js',
     '../mocha_adapter.js',
+    'idle_load_tests.js',
   ],
 
   /** @override */
@@ -28,40 +29,6 @@ SettingsIdleLoadBrowserTest.prototype = {
 };
 
 TEST_F('SettingsIdleLoadBrowserTest', 'All', function() {
-  // Register mocha tests.
-  suite('Settings idle load tests', function() {
-    setup(function() {
-      document.body.innerHTML = `
-        <settings-idle-load id="idleTemplate"
-            url="chrome://resources/html/polymer.html">
-          <template>
-            <div></div>
-          </template>
-        </settings-idle-load>
-      `;
-      // The div should not be initially accesible.
-      assertFalse(!!document.body.querySelector('div'));
-    });
-
-    test('stamps after get()', function() {
-      // Calling get() will force stamping without waiting for idle time.
-      return document.getElementById('idleTemplate')
-          .get()
-          .then(function(inner) {
-            assertEquals('DIV', inner.nodeName);
-            assertEquals(inner, document.body.querySelector('div'));
-          });
-    });
-
-    test('stamps after idle', function(done) {
-      requestIdleCallback(function() {
-        // After JS calls idle-callbacks, this should be accesible.
-        assertTrue(!!document.body.querySelector('div'));
-        done();
-      });
-    });
-  });
-
   // Run all registered tests.
   mocha.run();
 });

chrome/test/data/webui/settings/settings_idle_load_v3_browsertest.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.
+
+GEN('#include "services/network/public/cpp/features.h"');
+
+/**
+ * @constructor
+ * @extends testing.Test
+ */
+function SettingsIdleLoadV3BrowserTest() {}
+
+SettingsIdleLoadV3BrowserTest.prototype = {
+  __proto__: testing.Test.prototype,
+
+  /** @override */
+  browsePreload:
+      'chrome://settings/test_loader.html?module=settings/idle_load_tests.m.js',
+
+  /** @override */
+  extraLibraries: [
+    '//third_party/mocha/mocha.js',
+    '../mocha_adapter.js',
+  ],
+
+  /** @override */
+  isAsync: true,
+
+  /** @override */
+  featureList: {enabled: ['network::features::kOutOfBlinkCors']},
+};
+
+TEST_F('SettingsIdleLoadV3BrowserTest', 'All', function() {
+  // Run all registered tests.
+  mocha.run();
+});