Settings: Port appearance_page/* to Polymer 3

- Autogenerate Polymer 3 versions for files in appearance_page/*
- Update closure compiler and polymer_modulizer/js_modulizer targets for
  these files
- Autogenerate tests for the Polymer 3 files.

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

chrome/browser/resources/settings/BUILD.gn

@@ -214,6 +214,7 @@ js_library("search_settings") {
 group("closure_compile_module") {
   deps = [
     ":closure_compile_local_module",
+    "appearance_page:closure_compile_module",
     "controls:closure_compile_module",
     "on_startup_page:closure_compile_module",
     "prefs:closure_compile_module",

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

@@ -3,6 +3,9 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//tools/polymer/polymer.gni")
+import("//ui/webui/resources/tools/js_modulizer.gni")
+import("../settings.gni")
 
 js_type_check("closure_compile") {
   deps = [
@@ -77,22 +80,27 @@ js_library("home_url_input") {
   externs_list = [ "$externs_path/settings_private.js" ]
 }
 
-# TODO(crbug.com/1026426): Fix and enable.
-#js_type_check("closure_compile_module") {
-#  is_polymer3 = true
-#  deps = [
-#    ":appearance_browser_proxy.m",
-#    ":appearance_fonts_page.m",
-#    ":appearance_page.m",
-#    ":fonts_browser_proxy.m",
-#    ":home_url_input.m",
-#  ]
-#}
+js_type_check("closure_compile_module") {
+  is_polymer3 = true
+  deps = [
+    ":appearance_browser_proxy.m",
+    ":appearance_fonts_page.m",
+    ":appearance_page.m",
+    ":fonts_browser_proxy.m",
+    ":home_url_input.m",
+  ]
+}
 
 js_library("appearance_browser_proxy.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.m.js" ]
   deps = [
-    # TODO: Fill those in.
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js:load_time_data.m",
+  ]
+  externs_list = [
+    "$externs_path/chrome_send.js",
+    "$externs_path/management.js",
+    "$externs_path/settings_private.js",
   ]
   extra_deps = [ ":modulize" ]
 }
@@ -100,39 +108,59 @@ js_library("appearance_browser_proxy.m") {
 js_library("appearance_fonts_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.m.js" ]
   deps = [
-    # TODO: Fill those in.
+    ":fonts_browser_proxy.m",
+    "../controls:settings_dropdown_menu.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/cr_slider:cr_slider.m",
+    "//ui/webui/resources/js:i18n_behavior.m",
+    "//ui/webui/resources/js:web_ui_listener_behavior.m",
   ]
+  externs_list = [ "$externs_path/chrome_send.js" ]
   extra_deps = [ ":appearance_fonts_page_module" ]
 }
 
 js_library("appearance_page.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/appearance_page/appearance_page.m.js" ]
   deps = [
-    # TODO: Fill those in.
+    ":appearance_browser_proxy.m",
+    "..:page_visibility.m",
+    "..:route.m",
+    "..:router.m",
+    "../controls:settings_dropdown_menu.m",
+    "../settings_page:settings_animated_pages.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/js:i18n_behavior.m",
+    "//ui/webui/resources/js:load_time_data.m",
+  ]
+  externs_list = [
+    "$externs_path/settings_private.js",
+    "$externs_path/chrome_send.js",
   ]
   extra_deps = [ ":appearance_page_module" ]
 }
 
 js_library("fonts_browser_proxy.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/appearance_page/fonts_browser_proxy.m.js" ]
-  deps = [
-    # TODO: Fill those in.
-  ]
+  deps = [ "//ui/webui/resources/js:cr.m" ]
   extra_deps = [ ":modulize" ]
 }
 
 js_library("home_url_input.m") {
   sources = [ "$root_gen_dir/chrome/browser/resources/settings/appearance_page/home_url_input.m.js" ]
   deps = [
-    # TODO: Fill those in.
+    ":appearance_browser_proxy.m",
+    "../controls:pref_control_behavior.m",
+    "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
+    "//ui/webui/resources/cr_elements/policy:cr_policy_indicator_behavior.m",
+    "//ui/webui/resources/cr_elements/policy:cr_policy_pref_behavior.m",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:load_time_data.m",
   ]
   extra_deps = [ ":home_url_input_module" ]
 }
 
-import("//tools/polymer/polymer.gni")
-
 group("polymer3_elements") {
-  deps = [
+  public_deps = [
     ":appearance_fonts_page_module",
     ":appearance_page_module",
     ":home_url_input_module",
@@ -144,25 +172,44 @@ polymer_modulizer("appearance_fonts_page") {
   js_file = "appearance_fonts_page.js"
   html_file = "appearance_fonts_page.html"
   html_type = "dom-module"
+  auto_imports = settings_auto_imports + [
+                   "ui/webui/resources/cr_elements/cr_slider/cr_slider.html|SliderTick",
+                   "chrome/browser/resources/settings/appearance_page/fonts_browser_proxy.html|FontsBrowserProxy, FontsBrowserProxyImpl, FontsData",
+                   "chrome/browser/resources/settings/controls/settings_dropdown_menu.html|DropdownMenuOptionList",
+                 ]
+  namespace_rewrites = settings_namespace_rewrites
 }
 
 polymer_modulizer("appearance_page") {
   js_file = "appearance_page.js"
   html_file = "appearance_page.html"
   html_type = "dom-module"
+  auto_imports = settings_auto_imports + [
+                   "ui/webui/resources/html/assert.html|assert",
+                   "chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.html|AppearanceBrowserProxy, AppearanceBrowserProxyImpl",
+                   "chrome/browser/resources/settings/controls/settings_dropdown_menu.html|DropdownMenuOptionList",
+                   "chrome/browser/resources/settings/page_visibility.html|AppearancePageVisibility",
+                   "chrome/browser/resources/settings/route.html|routes",
+                   "chrome/browser/resources/settings/router.html|Route, Router",
+                 ]
+  namespace_rewrites = settings_namespace_rewrites
 }
 
 polymer_modulizer("home_url_input") {
   js_file = "home_url_input.js"
   html_file = "home_url_input.html"
   html_type = "dom-module"
+  namespace_rewrites = settings_namespace_rewrites
+  auto_imports = settings_auto_imports + [
+                   "ui/webui/resources/html/assert.html|assert",
+                   "chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.html|AppearanceBrowserProxy, AppearanceBrowserProxyImpl",
+                 ]
 }
 
-import("//ui/webui/resources/tools/js_modulizer.gni")
-
 js_modulizer("modulize") {
   input_files = [
     "appearance_browser_proxy.js",
     "fonts_browser_proxy.js",
   ]
+  namespace_rewrites = settings_namespace_rewrites
 }

chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.js

@@ -2,9 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {addSingletonGetter, sendWithPromise} from 'chrome://resources/js/cr.m.js';
+// #import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+// clang-format on
+
 cr.define('settings', function() {
   /** @interface */
-  class AppearanceBrowserProxy {
+  /* #export */ class AppearanceBrowserProxy {
     /** @return {!Promise<number>} */
     getDefaultZoom() {}
 
@@ -34,7 +39,7 @@ cr.define('settings', function() {
   /**
    * @implements {settings.AppearanceBrowserProxy}
    */
-  class AppearanceBrowserProxyImpl {
+  /* #export */ class AppearanceBrowserProxyImpl {
     /** @override */
     getDefaultZoom() {
       return new Promise(function(resolve) {

chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html

 <link rel="import" href="chrome://resources/html/polymer.html">
 
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
+<link rel="import" href="chrome://resources/cr_elements/cr_slider/cr_slider.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="fonts_browser_proxy.html">

chrome/browser/resources/settings/appearance_page/appearance_fonts_page.js

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 (function() {
-'use strict';
 
 /** @type {!Array<number>} */
 const FONT_SIZE_RANGE = [

chrome/browser/resources/settings/appearance_page/appearance_page.html

@@ -2,6 +2,7 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
+<link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/md_select_css.html">
 <link rel="import" href="appearance_browser_proxy.html">
@@ -10,6 +11,8 @@
 <link rel="import" href="../controls/settings_dropdown_menu.html">
 <link rel="import" href="../controls/settings_radio_group.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
+<link rel="import" href="../i18n_setup.html">
+<link rel="import" href="../page_visibility.html">
 <link rel="import" href="../route.html">
 <link rel="import" href="../router.html">
 <link rel="import" href="../settings_page/settings_animated_pages.html">

chrome/browser/resources/settings/appearance_page/appearance_page.js

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 (function() {
-'use strict';
 
 /**
  * This is the absolute difference maintained between standard and
@@ -157,7 +156,8 @@ Polymer({
 
   /** @private */
   onCustomizeFontsTap_() {
-    settings.Router.getInstance().navigateTo(settings.routes.FONTS);
+    settings.Router.getInstance().navigateTo(
+        /** @type {!settings.Route} */ (settings.routes.FONTS));
   },
 
   /** @private */

chrome/browser/resources/settings/appearance_page/fonts_browser_proxy.js

@@ -2,6 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {addSingletonGetter, sendWithPromise} from 'chrome://resources/js/cr.m.js';
+// clang-format on
+
 /**
  * @typedef {{
  *   fontList: !Array<{
@@ -11,11 +15,11 @@
  *   extensionUrl: string
  * }}
  */
-let FontsData;
+/* #export */ let FontsData;
 
 cr.define('settings', function() {
   /** @interface */
-  class FontsBrowserProxy {
+  /* #export */ class FontsBrowserProxy {
     /**
      * @return {!Promise<!FontsData>} Fonts and the advanced font settings
      *     extension URL.
@@ -30,7 +34,7 @@ cr.define('settings', function() {
   /**
    * @implements {settings.FontsBrowserProxy}
    */
-  class FontsBrowserProxyImpl {
+  /* #export */ class FontsBrowserProxyImpl {
     /** @override */
     fetchFontsData() {
       return cr.sendWithPromise('fetchFontsData');

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

@@ -15,7 +15,7 @@ let DropdownMenuOption;
 /**
  * @typedef {!Array<!DropdownMenuOption>}
  */
-let DropdownMenuOptionList;
+/* #export */ let DropdownMenuOptionList;
 
 /**
  * 'settings-dropdown-menu' is a control for displaying options

chrome/browser/resources/settings/page_visibility.js

@@ -31,7 +31,7 @@ let PageVisibility;
  *   setTheme: boolean,
  * }}
  */
-let AppearancePageVisibility;
+/* #export */ let AppearancePageVisibility;
 
 /**
  * @typedef {{

chrome/browser/resources/settings/settings.gni

@@ -6,9 +6,11 @@
 # targets in Settings.
 settings_namespace_rewrites = [
   "cr_slider.SliderTick|SliderTick",
+  "settings.AppearanceBrowserProxy|AppearanceBrowserProxy",
   "settings.DefaultBrowserBrowserProxy|DefaultBrowserBrowserProxy",
   "settings.EDIT_STARTUP_URL_EVENT|EDIT_STARTUP_URL_EVENT",
   "settings.ExtensionControlBrowserProxy|ExtensionControlBrowserProxy",
+  "settings.FontsBrowserProxy|FontsBrowserProxy",
   "settings.GlobalScrollTargetBehavior|GlobalScrollTargetBehavior",
   "settings.MinimumRoutes|MinimumRoutes",
   "settings.OnStartupBrowserProxy|OnStartupBrowserProxy",

chrome/browser/resources/settings/settings.js

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import './appearance_page/appearance_page.m.js';
+import './appearance_page/appearance_fonts_page.m.js';
 import './controls/controlled_button.m.js';
 import './controls/controlled_radio_button.m.js';
 import './controls/extension_controlled_indicator.m.js';
@@ -29,7 +31,9 @@ import './default_browser_page/default_browser_page.m.js';
 export {DefaultBrowserBrowserProxyImpl} from './default_browser_page/default_browser_browser_proxy.m.js';
 // </if>
 
+export {AppearanceBrowserProxy, AppearanceBrowserProxyImpl} from './appearance_page/appearance_browser_proxy.m.js';
 export {ExtensionControlBrowserProxyImpl} from './extension_control_browser_proxy.m.js';
+export {FontsBrowserProxy, FontsBrowserProxyImpl} from './appearance_page/fonts_browser_proxy.m.js';
 export {OnStartupBrowserProxy, OnStartupBrowserProxyImpl} from './on_startup_page/on_startup_browser_proxy.m.js';
 export {EDIT_STARTUP_URL_EVENT} from './on_startup_page/startup_url_entry.m.js';
 export {StartupUrlsPageBrowserProxy, StartupUrlsPageBrowserProxyImpl} from './on_startup_page/startup_urls_page_browser_proxy.m.js';

chrome/browser/resources/settings/settings_resources_v3.grdp

 <?xml version="1.0" encoding="utf-8"?>
 <grit-part>
   <!-- Polymer 3.0 Elements -->
+  <include name="IDR_SETTINGS_APPEARANCE_PAGE_APPEARANCE_BROWSER_PROXY_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/appearance_page/appearance_browser_proxy.m.js"
+           use_base_dir="false"
+           preprocess="true"
+           type="BINDATA" />
+  <include name="IDR_SETTINGS_APPEARANCE_PAGE_APPEARANCE_FONTS_PAGE_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/appearance_page/appearance_fonts_page.m.js"
+           use_base_dir="false"
+           type="BINDATA" />
+  <include name="IDR_SETTINGS_APPEARANCE_PAGE_APPEARANCE_PAGE_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/appearance_page/appearance_page.m.js"
+           use_base_dir="false"
+           preprocess="true"
+           type="BINDATA" />
+  <include name="IDR_SETTINGS_APPEARANCE_PAGE_FONTS_BROWSER_PROXY_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/appearance_page/fonts_browser_proxy.m.js"
+           use_base_dir="false"
+           type="BINDATA" />
+  <include name="IDR_SETTINGS_APPEARANCE_PAGE_HOME_URL_INPUT_M_JS"
+           file="${root_gen_dir}/chrome/browser/resources/settings/appearance_page/home_url_input.m.js"
+           use_base_dir="false"
+           type="BINDATA" />
   <include name="IDR_SETTINGS_CONTROLS_CONTROLLED_BUTTON_M_JS"
            file="${root_gen_dir}/chrome/browser/resources/settings/controls/controlled_button.m.js"
            use_base_dir="false"

chrome/test/data/webui/BUILD.gn

@@ -209,6 +209,8 @@ js2gtest("browser_tests_js_webui") {
     "$root_gen_dir/chrome/test/data/webui/mock_controller.m.js",
     "$root_gen_dir/chrome/test/data/webui/mock_timer.m.js",
     "$root_gen_dir/chrome/test/data/webui/resources/list_property_update_behavior_tests.m.js",
+    "$root_gen_dir/chrome/test/data/webui/settings/appearance_page_test.m.js",
+    "$root_gen_dir/chrome/test/data/webui/settings/appearance_fonts_page_test.m.js",
     "$root_gen_dir/chrome/test/data/webui/settings/checkbox_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/settings/controlled_button_tests.m.js",
     "$root_gen_dir/chrome/test/data/webui/settings/controlled_radio_button_tests.m.js",

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

@@ -8,6 +8,8 @@ import("../namespace_rewrites.gni")
 
 js_modulizer("modulize") {
   input_files = [
+    "appearance_page_test.js",
+    "appearance_fonts_page_test.js",
     "checkbox_tests.js",
     "controlled_button_tests.js",
     "controlled_radio_button_tests.js",

chrome/test/data/webui/settings/appearance_fonts_page_test.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 {FontsBrowserProxy, FontsBrowserProxyImpl} from 'chrome://settings/settings.js';
+// #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {TestBrowserProxy} from 'chrome://test/test_browser_proxy.m.js';
+// clang-format on
+
 /** @implements {settings.FontsBrowserProxy} */
 class TestFontsBrowserProxy extends TestBrowserProxy {
   constructor() {
@@ -63,7 +69,7 @@ suite('AppearanceFontHandler', function() {
     cr.webUIListenerCallback('advanced-font-settings-installed', [true]);
     Polymer.dom.flush();
     const button = fontsPage.$$('#advancedButton');
-    assert(!!button);
+    assertTrue(!!button);
     button.click();
     return fontsBrowserProxy.whenCalled('openAdvancedFontSettings');
   });

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

@@ -2,6 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {AppearanceBrowserProxy, AppearanceBrowserProxyImpl} from 'chrome://settings/settings.js';
+// #import {flush} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+// #import {isLinux, isChromeOS} from 'chrome://resources/js/cr.m.js';
+// #import {TestBrowserProxy} from 'chrome://test/test_browser_proxy.m.js';
+// clang-format on
+
 /** @implements {settings.AppearanceBrowserProxy} */
 class TestAppearanceBrowserProxy extends TestBrowserProxy {
   constructor() {

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

@@ -221,3 +221,28 @@ var CrSettingsStartupUrlsPageV3Test = class extends CrSettingsV3BrowserTest {
 TEST_F('CrSettingsStartupUrlsPageV3Test', 'All', function() {
   mocha.run();
 });
+
+// eslint-disable-next-line no-var
+var CrSettingsAppearancePageV3Test = class extends CrSettingsV3BrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://settings/test_loader.html?module=settings/appearance_page_test.m.js';
+  }
+};
+
+TEST_F('CrSettingsAppearancePageV3Test', 'All', function() {
+  mocha.run();
+});
+
+// eslint-disable-next-line no-var
+var CrSettingsAppearanceFontsPageV3Test =
+    class extends CrSettingsV3BrowserTest {
+  /** @override */
+  get browsePreload() {
+    return 'chrome://settings/test_loader.html?module=settings/appearance_fonts_page_test.m.js';
+  }
+};
+
+TEST_F('CrSettingsAppearanceFontsPageV3Test', 'All', function() {
+  mocha.run();
+});