Migrate customize_themes to Mojo JS modules

All dependents are also (minimally) updated to support this change.

The module-supporting bindings.js is also modified here so that its
import has no destructive side effects on the global object state. This
allows bindings.js and mojo_bindings_lite.js to be imported by the same
page to mix usage of module-based and non-module-based JS bindings,
which is temporarily needed here by chrome://new-tab-page/

Bug: 1004256
Change-Id: I7e74ca222e099cc8143e5476a9cdcd62b40a8afd
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2521907
Commit-Queue: Ken Rockot <rockot@google.com>
Commit-Queue: Brian Salomon <bsalomon@google.com>
Auto-Submit: Ken Rockot <rockot@google.com>
Reviewed-by: Brian Salomon <bsalomon@google.com>
Reviewed-by: dpapad <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#827337}

chrome/browser/resources/new_tab_page/BUILD.gn

@@ -11,7 +11,7 @@ import("//ui/webui/webui_features.gni")
 
 js_type_check("closure_compile") {
   is_polymer3 = true
-  closure_flags = default_closure_args + [ "browser_resolver_prefix_replacements=\"chrome://kaleidoscope/=../../chrome/browser/media/kaleidoscope/internal/resources\"" ]
+  closure_flags = default_closure_args + mojom_js_args + [ "browser_resolver_prefix_replacements=\"chrome://kaleidoscope/=../../chrome/browser/media/kaleidoscope/internal/resources\"" ]
 
   deps = [
     ":app",
@@ -81,6 +81,7 @@ js_library("app") {
     ":promo_browser_command_proxy",
     "modules:module_wrapper",
     "modules:modules",
+    "//skia/public/mojom:mojom_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_toast:cr_toast.m",
     "//ui/webui/resources/js:event_tracker.m",
@@ -350,6 +351,7 @@ if (optimize_webui) {
     ]
     excludes = [
       "chrome://resources/js/cr.m.js",
+      "chrome://resources/mojo/mojo/public/js/bindings.js",
       "chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js",
       "chrome://resources/mojo/mojo/public/mojom/base/big_buffer.mojom-lite.js",
       "chrome://resources/mojo/mojo/public/mojom/base/string16.mojom-lite.js",
@@ -357,6 +359,7 @@ if (optimize_webui) {
       "chrome://resources/mojo/mojo/public/mojom/base/time.mojom-lite.js",
       "chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js",
       "chrome://resources/mojo/skia/public/mojom/skcolor.mojom-lite.js",
+      "chrome://resources/mojo/skia/public/mojom/skcolor.mojom-webui.js",
       "chrome://resources/mojo/url/mojom/origin.mojom-lite.js",
       "chrome://resources/mojo/url/mojom/url.mojom-lite.js",
       "new_tab_page.mojom-lite.js",

chrome/browser/resources/new_tab_page/app.js

@@ -18,6 +18,7 @@ import {hexColorToSkColor, skColorToRgba} from 'chrome://resources/js/color_util
 import {FocusOutlineManager} from 'chrome://resources/js/cr/ui/focus_outline_manager.m.js';
 import {EventTracker} from 'chrome://resources/js/event_tracker.m.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import {SkColor} from 'chrome://resources/mojo/skia/public/mojom/skcolor.mojom-webui.js';
 import {html, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {BackgroundManager} from './background_manager.js';
@@ -166,7 +167,7 @@ class AppElement extends PolymerElement {
         type: Boolean,
       },
 
-      /** @private {skia.mojom.SkColor} */
+      /** @private {SkColor} */
       backgroundColor_: {
         computed: 'computeBackgroundColor_(showBackgroundImage_, theme_)',
         type: Object,
@@ -588,7 +589,7 @@ class AppElement extends PolymerElement {
   }
 
   /**
-   * @param {skia.mojom.SkColor} skColor
+   * @param {SkColor} skColor
    * @return {string}
    * @private
    */
@@ -700,7 +701,7 @@ class AppElement extends PolymerElement {
   }
 
   /**
-   * @return {skia.mojom.SkColor}
+   * @return {SkColor}
    * @private
    */
   computeBackgroundColor_() {
@@ -711,7 +712,7 @@ class AppElement extends PolymerElement {
   }
 
   /**
-   * @return {skia.mojom.SkColor}
+   * @return {SkColor}
    * @private
    */
   computeLogoColor_() {

chrome/browser/resources/settings/BUILD.gn

@@ -42,8 +42,8 @@ if (optimize_webui) {
     ]
     excludes = [
       "chrome://resources/js/cr.m.js",
-      "chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js",
-      "chrome://resources/mojo/skia/public/mojom/skcolor.mojom-lite.js",
+      "chrome://resources/mojo/mojo/public/js/bindings.js",
+      "chrome://resources/mojo/skia/public/mojom/skcolor.mojom-webui.js",
     ]
   }
 }

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

@@ -99,7 +99,7 @@ js_library("sync_encryption_options") {
 
 js_type_check("closure_compile_module") {
   is_polymer3 = true
-  closure_flags = settings_closure_flags
+  closure_flags = settings_closure_flags + mojom_js_args
   deps = [
     ":account_manager_browser_proxy.m",
     ":people_page",

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

@@ -7,6 +7,7 @@ import("//tools/polymer/html_to_js.gni")
 
 js_type_check("closure_compile") {
   is_polymer3 = true
+  closure_flags = default_closure_args + mojom_js_args
   deps = [
     ":profile_customization_app",
     ":profile_customization_browser_proxy",

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

@@ -38,8 +38,8 @@ if (optimize_webui) {
     ]
     excludes = [
       "chrome://resources/js/cr.m.js",
-      "chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js",
-      "chrome://resources/mojo/skia/public/mojom/skcolor.mojom-lite.js",
+      "chrome://resources/mojo/mojo/public/js/bindings.js",
+      "chrome://resources/mojo/skia/public/mojom/skcolor.mojom-webui.js",
     ]
   }
 }
@@ -136,7 +136,7 @@ group("closure_compile") {
 js_type_check("profile_picker_files") {
   is_polymer3 = true
   closure_flags =
-      default_closure_args + [
+      default_closure_args + mojom_js_args + [
         "js_module_root=../../chrome/browser/resources/signin/profile_picker/",
         "js_module_root=./gen/chrome/browser/resources/signin/profile_picker/",
       ]

chrome/browser/resources/signin/profile_picker/profile_creation_flow/BUILD.gn

@@ -7,6 +7,7 @@ import("//tools/polymer/html_to_js.gni")
 
 js_type_check("closure_compile") {
   is_polymer3 = true
+  closure_flags = default_closure_args + mojom_js_args
   deps = [
     ":local_profile_customization",
     ":profile_type_choice",

chrome/browser/resources/signin/profile_picker/profile_creation_flow/local_profile_customization.js

@@ -8,10 +8,10 @@ import 'chrome://resources/cr_elements/cr_input/cr_input.m.js';
 import 'chrome://resources/cr_elements/cr_checkbox/cr_checkbox.m.js';
 import 'chrome://resources/cr_elements/shared_vars_css.m.js';
 import 'chrome://resources/cr_components/customize_themes/customize_themes.js';
-import 'chrome://resources/cr_components/customize_themes/customize_themes.mojom-lite.js';
 import './shared_css.js';
 import '../icons.js';
 
+import {Theme, ThemeType} from 'chrome://resources/cr_components/customize_themes/customize_themes.mojom-webui.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';
@@ -40,7 +40,7 @@ Polymer({
 
     /**
      * The currently selected theme in the color picker.
-     * @private {!customizeThemes.mojom.Theme}
+     * @private {!Theme}
      */
     selectedTheme_: {
       type: Object,
@@ -190,7 +190,7 @@ Polymer({
     }
 
     this.selectedTheme_ = {
-      type: customizeThemes.mojom.ThemeType.kChrome,
+      type: ThemeType.kChrome,
       info: {
         chromeThemeId: this.profileThemeInfo.colorId,
       },
@@ -204,19 +204,16 @@ Polymer({
   async onSelectedThemeChange_() {
     /** @type {UserThemeChoice} */
     let theme;
-    if (this.selectedTheme_.type ===
-        customizeThemes.mojom.ThemeType.kAutogenerated) {
+    if (this.selectedTheme_.type === ThemeType.kAutogenerated) {
       theme = {
         colorId: 0,
         color: this.selectedTheme_.info.autogeneratedThemeColors.frame.value
       };
-    } else if (
-        this.selectedTheme_.type === customizeThemes.mojom.ThemeType.kChrome) {
+    } else if (this.selectedTheme_.type === ThemeType.kChrome) {
       theme = {
         colorId: /** @type {number} */ (this.selectedTheme_.info.chromeThemeId),
       };
-    } else if (
-        this.selectedTheme_.type === customizeThemes.mojom.ThemeType.kDefault) {
+    } else if (this.selectedTheme_.type === ThemeType.kDefault) {
       theme = {
         colorId: -1,
       };

chrome/test/data/webui/BUILD.gn

@@ -354,7 +354,6 @@ if (include_js_tests) {
 
     sources = [
       "bluetooth_internals_browsertest.js",
-      "cr_components/cr_components_mojo_browsertest.js",
       "interventions_internals_browsertest.js",
       "media/media_engagement_browsertest.js",
       "media/media_feeds_webui_browsertest.js",
@@ -386,6 +385,7 @@ if (include_js_tests) {
   js2gtest("browser_tests_js_mojo_webui") {
     test_type = "mojo_webui"
     sources = [
+      "cr_components/cr_components_mojo_browsertest.js",
       "downloads/downloads_browsertest.js",
       "engagement/site_engagement_browsertest.js",
       "usb_internals_browsertest.js",

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

@@ -13,7 +13,7 @@ js_modulizer("modulize") {
 
 js_type_check("closure_compile") {
   is_polymer3 = true
-  closure_flags = default_closure_args + [
+  closure_flags = default_closure_args + mojom_js_args + [
                     "browser_resolver_prefix_replacements=\"chrome://settings/=../../chrome/browser/resources/settings/\"",
                     "browser_resolver_prefix_replacements=\"chrome://new-tab-page/=../../chrome/browser/resources/new_tab_page//\"",
                     "js_module_root=../../chrome/test/data/webui/",

chrome/test/data/webui/cr_components/customize_themes_test.js

@@ -3,9 +3,11 @@
 // found in the LICENSE file.
 
 import 'chrome://new-tab-page/strings.m.js';
+import '../mojo_webui_test_support.js';
 
 import {CustomizeThemesBrowserProxy, CustomizeThemesBrowserProxyImpl} from 'chrome://resources/cr_components/customize_themes/browser_proxy.js';
 import {CustomizeThemesElement} from 'chrome://resources/cr_components/customize_themes/customize_themes.js';
+import {ChromeTheme, CustomizeThemesClientCallbackRouter, CustomizeThemesHandlerInterface, ThemeType} from 'chrome://resources/cr_components/customize_themes/customize_themes.mojom-webui.js';
 import {ThemeIconElement} from 'chrome://resources/cr_components/customize_themes/theme_icon.js';
 
 import {assertEquals, assertTrue} from '../chai_assert.js';
@@ -24,7 +26,7 @@ function assertStyle(element, name, expected) {
   assertEquals(expected, actual);
 }
 
-/** @implements {customizeThemes.mojom.CustomizeThemesHandlerInterface} */
+/** @implements {CustomizeThemesHandlerInterface} */
 class TestCustomizeThemesHandler extends TestBrowserProxy {
   constructor() {
     super([
@@ -37,11 +39,11 @@ class TestCustomizeThemesHandler extends TestBrowserProxy {
       'revertThemeChanges',
     ]);
 
-    /** @private {!Array<customizeThemes.mojom.ChromeTheme>} */
+    /** @private {!Array<ChromeTheme>} */
     this.chromeThemes_ = [];
   }
 
-  /** @param {!Array<customizeThemes.mojom.ChromeTheme>} chromeThemes */
+  /** @param {!Array<ChromeTheme>} chromeThemes */
   setChromeThemes(chromeThemes) {
     this.chromeThemes_ = chromeThemes;
   }
@@ -91,9 +93,8 @@ class TestCustomizeThemesBrowserProxy extends TestBrowserProxy {
     /** @type {TestCustomizeThemesHandler} */
     this.testHandler = new TestCustomizeThemesHandler();
 
-    /** @private {customizeThemes.mojom.CustomizeThemesClientCallbackRouter} */
-    this.callbackRouter_ =
-        new customizeThemes.mojom.CustomizeThemesClientCallbackRouter();
+    /** @private {CustomizeThemesClientCallbackRouter} */
+    this.callbackRouter_ = new CustomizeThemesClientCallbackRouter();
   }
 
   /** @override */
@@ -125,7 +126,7 @@ suite('CrComponentsCustomizeThemesTest', () => {
   }
 
   /**
-   * @param {!Array<customizeThemes.mojom.ChromeTheme>} themes}
+   * @param {!Array<ChromeTheme>} themes}
    * @return {!CustomizeThemesElement}
    */
   function createCustomizeThemesElementWithThemes(themes) {
@@ -234,7 +235,7 @@ suite('CrComponentsCustomizeThemesTest', () => {
 
     // Act.
     customizeThemesElement.selectedTheme = {
-      type: customizeThemes.mojom.ThemeType.kAutogenerated,
+      type: ThemeType.kAutogenerated,
       info: {
         autogeneratedThemeColors: {
           frame: {value: 0xffff0000},
@@ -265,7 +266,7 @@ suite('CrComponentsCustomizeThemesTest', () => {
 
     // Act.
     customizeThemesElement.selectedTheme = {
-      type: customizeThemes.mojom.ThemeType.kDefault,
+      type: ThemeType.kDefault,
       info: {chromeThemeId: 0},
     };
     await flushTasks();
@@ -297,7 +298,7 @@ suite('CrComponentsCustomizeThemesTest', () => {
 
     // Act.
     customizeThemesElement.selectedTheme = {
-      type: customizeThemes.mojom.ThemeType.kChrome,
+      type: ThemeType.kChrome,
       info: {chromeThemeId: 0},
     };
     await flushTasks();
@@ -315,7 +316,7 @@ suite('CrComponentsCustomizeThemesTest', () => {
 
     // Act.
     customizeThemesElement.selectedTheme = {
-      type: customizeThemes.mojom.ThemeType.kThirdParty,
+      type: ThemeType.kThirdParty,
       info: {
         thirdPartyThemeInfo: {
           id: 'foo',
@@ -339,7 +340,7 @@ suite('CrComponentsCustomizeThemesTest', () => {
     // Arrange.
     const customizeThemesElement = createCustomizeThemesElement();
     customizeThemesElement.selectedTheme = {
-      type: customizeThemes.mojom.ThemeType.kThirdParty,
+      type: ThemeType.kThirdParty,
       info: {
         thirdPartyThemeInfo: {
           id: 'foo',
@@ -362,7 +363,7 @@ suite('CrComponentsCustomizeThemesTest', () => {
 
     // Act.
     customizeThemesElement.selectedTheme = {
-      type: customizeThemes.mojom.ThemeType.kDefault,
+      type: ThemeType.kDefault,
       info: {chromeThemeId: 0},
     };
 
@@ -377,7 +378,7 @@ suite('CrComponentsCustomizeThemesTest', () => {
     // Arrange.
     const customizeThemesElement = createCustomizeThemesElement();
     customizeThemesElement.selectedTheme = {
-      type: customizeThemes.mojom.ThemeType.kThirdParty,
+      type: ThemeType.kThirdParty,
       info: {
         thirdPartyThemeInfo: {
           id: 'foo',

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

@@ -6,7 +6,7 @@ import("//third_party/closure_compiler/compile_js.gni")
 
 js_type_check("closure_compile") {
   is_polymer3 = true
-  closure_flags = default_closure_args + [
+  closure_flags = default_closure_args + mojom_js_args + [
                     "browser_resolver_prefix_replacements=\"chrome://new-tab-page/=../../chrome/browser/resources/new_tab_page/\"",
                     "browser_resolver_prefix_replacements=\"chrome://kaleidoscope/=../../chrome/browser/media/kaleidoscope/internal/resources\"",
                   ]

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

@@ -6,7 +6,7 @@ import("//third_party/closure_compiler/compile_js.gni")
 
 js_type_check("closure_compile") {
   is_polymer3 = true
-  closure_flags = default_closure_args + [
+  closure_flags = default_closure_args + mojom_js_args + [
                     "browser_resolver_prefix_replacements=\"chrome://signin-dice-web-intercept/=../../chrome/browser/resources/signin/dice_web_signin_intercept/\"",
                     "browser_resolver_prefix_replacements=\"chrome://profile-customization/=../../chrome/browser/resources/signin/profile_customization/\"",
                     "browser_resolver_prefix_replacements=\"chrome://profile-picker/=../../chrome/browser/resources/signin/profile_picker/\"",

content/browser/webui/shared_resources_data_source.cc

@@ -100,6 +100,8 @@ const std::map<int, std::string> CreateSkiaResourceIdToAliasMap() {
        "mojo/skia/public/mojom/image_info.mojom-lite.js"},
       {IDR_SKIA_SKCOLOR_MOJOM_LITE_JS,
        "mojo/skia/public/mojom/skcolor.mojom-lite.js"},
+      {IDR_SKIA_SKCOLOR_MOJOM_WEBUI_JS,
+       "mojo/skia/public/mojom/skcolor.mojom-webui.js"},
   };
 }
 

mojo/public/js/BUILD.gn

@@ -100,7 +100,7 @@ js_library("bindings_lite_sources") {
 # below.
 concatenate_files("bindings_uncompiled_module") {
   inputs = [
-    "bindings_module_preamble.js.part",
+    "bindings_uncompiled_module_preamble.js.part",
     "bindings_lite.js",
     "$root_gen_dir/mojo/public/interfaces/bindings/interface_control_messages.mojom-lite.js",
     "interface_support.js",
@@ -128,6 +128,7 @@ if (enable_mojom_closure_compile || enable_js_type_check) {
 
   concatenate_files("bindings_compiled_module") {
     inputs = [
+      "bindings_module_preamble.js.part",
       "$target_gen_dir/mojo_bindings_lite.js",
       "bindings_module_export.js.part",
     ]

mojo/public/js/bindings_module_export.js.part

 const mojoTmp = self['mojo'];
-delete self['mojo'];
-export const mojo = mojoTmp;
+export {mojoTmp as mojo};
+if (preservedGlobalMojo) {
+  window.mojo = preservedGlobalMojo;
+}

mojo/public/js/bindings_module_preamble.js.part

-const mojo = {
-  internal: { interfaceSupport: {} },
-  interfaceControl: {}
-};
+const preservedGlobalMojo = window && window.mojo;

mojo/public/js/bindings_uncompiled_module_preamble.js.part

+const mojo = {
+  internal: { interfaceSupport: {} },
+  interfaceControl: {}
+};

skia/BUILD.gn

@@ -1002,5 +1002,8 @@ grit("skia_resources") {
     "skia_resources.pak",
   ]
 
-  deps = [ "public/mojom:mojom_js" ]
+  deps = [
+    "//skia/public/mojom:mojom_js",
+    "//skia/public/mojom:mojom_webui_js",
+  ]
 }

skia/public/mojom/BUILD.gn

@@ -110,4 +110,5 @@ mojom("mojom") {
 
   cpp_typemaps = shared_skia_cpp_typemaps
   blink_cpp_typemaps = shared_skia_cpp_typemaps
+  webui_module_path = "chrome://resources/mojo/skia/public/mojom/"
 }

skia/skia_resources.grd

@@ -24,6 +24,10 @@
           file="${root_gen_dir}/skia/public/mojom/skcolor.mojom-lite.js"
           use_base_dir="false"
           type="BINDATA" />
+      <include name="IDR_SKIA_SKCOLOR_MOJOM_WEBUI_JS"
+          file="${root_gen_dir}/mojom-webui/skia/public/mojom/skcolor.mojom-webui.js"
+          use_base_dir="false"
+          type="BINDATA" />
     </includes>
   </release>
-</grit>
+</grit>
\ No newline at end of file

third_party/closure_compiler/closure_args.gni

@@ -56,8 +56,12 @@ js_modules_args = [
 ]
 
 mojom_js_args = [
-  "js_module_root=gen/mojo/public/js/",
-  "js_module_root=gen/mojom-webui/",
+  "js_module_root=" +
+      rebase_path("$root_gen_dir/mojo/public/js", root_build_dir),
+  "js_module_root=" + rebase_path("$root_gen_dir/mojom-webui", root_build_dir),
+  "js_module_root=" +
+      rebase_path("$root_gen_dir/mojom-webui/ui/webui/resources",
+                  root_build_dir),
 
   # Mojom WebUI JS modules load bindings.js which may be compiled and stripped
   # of type annotations. Rewrite these references to the uncompiled equivalent

ui/webui/resources/cr_components/BUILD.gn

@@ -10,6 +10,7 @@ import("//ui/webui/webui_features.gni")
 preprocess_folder =
     "$root_gen_dir/ui/webui/resources/preprocessed/cr_components"
 preprocess_gen_manifest = "preprocessed_gen_manifest.json"
+preprocess_mojom_manifest = "preprocessed_mojom_manifest.json"
 preprocess_polymer2_manifest = "preprocessed_polymer2_manifest.json"
 preprocess_src_manifest = "preprocessed_src_manifest.json"
 
@@ -19,6 +20,7 @@ generate_grd("build_grdp") {
   deps = [ ":preprocess" ]
   manifest_files = [
     "$target_gen_dir/$preprocess_gen_manifest",
+    "$target_gen_dir/$preprocess_mojom_manifest",
     "$target_gen_dir/$preprocess_polymer2_manifest",
     "$target_gen_dir/$preprocess_src_manifest",
   ]
@@ -28,6 +30,7 @@ generate_grd("build_grdp") {
 group("preprocess") {
   public_deps = [
     ":preprocess_generated",
+    ":preprocess_mojom",
     ":preprocess_polymer2",
     ":preprocess_src",
   ]
@@ -48,6 +51,15 @@ preprocess_grit("preprocess_src") {
   }
 }
 
+preprocess_grit("preprocess_mojom") {
+  deps =
+      [ "//ui/webui/resources/cr_components/customize_themes:mojom_webui_js" ]
+  in_folder = "$root_gen_dir/mojom-webui/ui/webui/resources/cr_components"
+  out_folder = "$preprocess_folder"
+  out_manifest = "$target_gen_dir/$preprocess_mojom_manifest"
+  in_files = [ "customize_themes/customize_themes.mojom-webui.js" ]
+}
+
 preprocess_grit("preprocess_generated") {
   deps = [ ":polymer3_elements" ]
   in_folder = target_gen_dir
@@ -55,7 +67,6 @@ preprocess_grit("preprocess_generated") {
   out_manifest = "$target_gen_dir/$preprocess_gen_manifest"
   in_files = [
     "customize_themes/customize_themes.js",
-    "customize_themes/customize_themes.mojom-lite.js",
     "customize_themes/theme_icon.js",
     "managed_footnote/managed_footnote.m.js",
     "omnibox/cr_autocomplete_match_list.js",

ui/webui/resources/cr_components/customize_themes/BUILD.gn

@@ -8,7 +8,7 @@ import("//tools/polymer/html_to_js.gni")
 
 group("web_components") {
   public_deps = [
-    ":mojom_js",
+    ":mojom_webui_js",
     ":web_components_local",
   ]
 }
@@ -20,6 +20,8 @@ mojom("mojom") {
     "//mojo/public/mojom/base",
     "//skia/public/mojom",
   ]
+
+  webui_module_path = "chrome://resources/cr_components/customize_themes/"
 }
 
 html_to_js("web_components_local") {
@@ -31,6 +33,7 @@ html_to_js("web_components_local") {
 
 js_type_check("closure_compile") {
   is_polymer3 = true
+  closure_flags = default_closure_args + mojom_js_args
   deps = [
     ":browser_proxy",
     ":customize_themes",
@@ -41,9 +44,9 @@ js_type_check("closure_compile") {
 js_library("customize_themes") {
   deps = [
     ":browser_proxy",
-    ":mojom_js_library_for_compile",
+    ":mojom_webui_js",
     ":theme_icon",
-    "//skia/public/mojom:mojom_js_library_for_compile",
+    "//skia/public/mojom:mojom_webui_js",
     "//third_party/polymer/v3_0/components-chromium/polymer:polymer_bundled",
     "//ui/webui/resources/cr_elements/cr_grid",
     "//ui/webui/resources/js:i18n_behavior.m",
@@ -58,7 +61,7 @@ js_library("theme_icon") {
 
 js_library("browser_proxy") {
   deps = [
-    ":mojom_js_library_for_compile",
+    ":mojom_webui_js",
     "//ui/webui/resources/js:cr.m",
   ]
 }

ui/webui/resources/cr_components/customize_themes/browser_proxy.js

@@ -7,18 +7,16 @@
  * interact with the browser.
  */
 
-import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
-import 'chrome://resources/mojo/skia/public/mojom/skcolor.mojom-lite.js';
-import './customize_themes.mojom-lite.js';
-
 import {addSingletonGetter} from 'chrome://resources/js/cr.m.js';
 
+import {CustomizeThemesClientCallbackRouter, CustomizeThemesHandlerFactory, CustomizeThemesHandlerFactoryRemote, CustomizeThemesHandlerInterface, CustomizeThemesHandlerRemote} from './customize_themes.mojom-webui.js';
+
 /** @interface */
 export class CustomizeThemesBrowserProxy {
-  /** @return {customizeThemes.mojom.CustomizeThemesHandlerInterface} */
+  /** @return {CustomizeThemesHandlerInterface} */
   handler() {}
 
-  /** @return {customizeThemes.mojom.CustomizeThemesClientCallbackRouter} */
+  /** @return {CustomizeThemesClientCallbackRouter} */
   callbackRouter() {}
 
   /** @param {string} url */
@@ -28,16 +26,14 @@ export class CustomizeThemesBrowserProxy {
 /** @implements {CustomizeThemesBrowserProxy} */
 export class CustomizeThemesBrowserProxyImpl {
   constructor() {
-    /** @private {customizeThemes.mojom.CustomizeThemesHandlerRemote} */
-    this.handler_ = new customizeThemes.mojom.CustomizeThemesHandlerRemote();
+    /** @private {!CustomizeThemesHandlerRemote} */
+    this.handler_ = new CustomizeThemesHandlerRemote();
 
-    /** @private {customizeThemes.mojom.CustomizeThemesClientCallbackRouter} */
-    this.callbackRouter_ =
-        new customizeThemes.mojom.CustomizeThemesClientCallbackRouter();
+    /** @private {!CustomizeThemesClientCallbackRouter} */
+    this.callbackRouter_ = new CustomizeThemesClientCallbackRouter();
 
-    /** @type {customizeThemes.mojom.CustomizeThemesHandlerFactoryRemote} */
-    const factory =
-        customizeThemes.mojom.CustomizeThemesHandlerFactory.getRemote();
+    /** @type {!CustomizeThemesHandlerFactoryRemote} */
+    const factory = CustomizeThemesHandlerFactory.getRemote();
     factory.createCustomizeThemesHandler(
         this.callbackRouter_.$.bindNewPipeAndPassRemote(),
         this.handler_.$.bindNewPipeAndPassReceiver());

ui/webui/resources/cr_components/customize_themes/customize_themes.js

@@ -7,11 +7,9 @@ import '../../cr_elements/cr_icon_button/cr_icon_button.m.js';
 import '../../cr_elements/cr_icons_css.m.js';
 import '../../cr_elements/cr_grid/cr_grid.js';
 import '../../cr_elements/shared_vars_css.m.js';
-import 'chrome://resources/mojo/mojo/public/js/mojo_bindings_lite.js';
-import 'chrome://resources/mojo/skia/public/mojom/skcolor.mojom-lite.js';
-import './customize_themes.mojom-lite.js';
 import './theme_icon.js';
 
+import {SkColor} from 'chrome://resources/mojo/skia/public/mojom/skcolor.mojom-webui.js';
 import {html, mixinBehaviors, PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 import {assert} from '../../js/assert.m.js';
@@ -19,6 +17,7 @@ import {hexColorToSkColor, skColorToRgba} from '../../js/color_utils.js';
 import {I18nBehavior} from '../../js/i18n_behavior.m.js';
 
 import {CustomizeThemesBrowserProxyImpl} from './browser_proxy.js';
+import {ChromeTheme, CustomizeThemesClientCallbackRouter, CustomizeThemesHandlerRemote, Theme, ThemeType} from './customize_themes.mojom-webui.js';
 
 /**
  * Element that lets the user configure the autogenerated theme.
@@ -39,7 +38,7 @@ export class CustomizeThemesElement extends mixinBehaviors
     return {
       /**
        * An object describing the currently selected theme.
-       * @type {!customizeThemes.mojom.Theme}
+       * @type {!Theme}
        */
       selectedTheme: {
         type: Object,
@@ -58,17 +57,17 @@ export class CustomizeThemesElement extends mixinBehaviors
         value: false,
       },
 
-      /** @private {!Array<!customizeThemes.mojom.ChromeTheme>} */
+      /** @private {!Array<!ChromeTheme>} */
       chromeThemes_: Array,
     };
   }
 
   constructor() {
     super();
-    /** @private {customizeThemes.mojom.CustomizeThemesHandlerRemote} */
+    /** @private {CustomizeThemesHandlerRemote} */
     this.handler_ = CustomizeThemesBrowserProxyImpl.getInstance().handler();
 
-    /** @private {customizeThemes.mojom.CustomizeThemesClientCallbackRouter} */
+    /** @private {CustomizeThemesClientCallbackRouter} */
     this.callbackRouter_ =
         CustomizeThemesBrowserProxyImpl.getInstance().callbackRouter();
 
@@ -142,8 +141,7 @@ export class CustomizeThemesElement extends mixinBehaviors
 
   /** @private */
   onThemeChange_() {
-    if (this.selectedTheme.type !==
-        customizeThemes.mojom.ThemeType.kAutogenerated) {
+    if (this.selectedTheme.type !== ThemeType.kAutogenerated) {
       return;
     }
     const rgbaFrameColor =
@@ -188,14 +186,11 @@ export class CustomizeThemesElement extends mixinBehaviors
       return false;
     }
     if (id === 'autogenerated') {
-      return this.selectedTheme.type ===
-          customizeThemes.mojom.ThemeType.kAutogenerated;
+      return this.selectedTheme.type === ThemeType.kAutogenerated;
     } else if (id === 'default') {
-      return this.selectedTheme.type ===
-          customizeThemes.mojom.ThemeType.kDefault;
+      return this.selectedTheme.type === ThemeType.kDefault;
     } else {
-      return this.selectedTheme.type ===
-          customizeThemes.mojom.ThemeType.kChrome &&
+      return this.selectedTheme.type === ThemeType.kChrome &&
           id === this.selectedTheme.info.chromeThemeId;
     }
   }
@@ -205,12 +200,11 @@ export class CustomizeThemesElement extends mixinBehaviors
    * @private
    */
   isThirdPartyTheme_() {
-    return this.selectedTheme.type ===
-        customizeThemes.mojom.ThemeType.kThirdParty;
+    return this.selectedTheme.type === ThemeType.kThirdParty;
   }
 
   /**
-   * @param {skia.mojom.SkColor} skColor
+   * @param {SkColor} skColor
    * @return {string}
    * @private
    */

ui/webui/resources/js/color_utils.js

@@ -6,12 +6,12 @@
  * @fileoverview Helper functions for color manipulations.
  */
 
-import 'chrome://resources/mojo/skia/public/mojom/skcolor.mojom-lite.js';
+import {SkColor} from 'chrome://resources/mojo/skia/public/mojom/skcolor.mojom-webui.js';
 
 /**
  * Converts an SkColor object to a string in the form
  * "rgba(<red>, <green>, <blue>, <alpha>)".
- * @param {skia.mojom.SkColor} skColor The input color.
+ * @param {SkColor} skColor The input color.
  * @return {string} The rgba string.
  */
 export function skColorToRgba(skColor) {
@@ -25,7 +25,7 @@ export function skColorToRgba(skColor) {
 /**
  * Converts a string of the form "#rrggbb" to an SkColor object.
  * @param {string} hexColor The color string.
- * @return {!skia.mojom.SkColor} The SkColor object,
+ * @return {!SkColor} The SkColor object,
  */
 export function hexColorToSkColor(hexColor) {
   if (!/^#[0-9a-f]{6}$/.test(hexColor)) {