Use JS modules for the NTP module

Uses JS modules for the NTP module and updates
closure so it can resolve chrome://kaleidoscope.

Change-Id: I985b20a7faca215bd5194a4a21c790d5a4ff0262
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2435441Reviewed-by: calamity <calamity@chromium.org>
Reviewed-by: Tommy Steimel <steimel@chromium.org>
Commit-Queue: Becca Hughes <beccahughes@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811807}

chrome/browser/media/kaleidoscope/kaleidoscope_resources.grd

@@ -8,7 +8,7 @@
   </outputs>
   <release seq="1">
     <includes>
-    <!-- TODO: Add resources. -->
+      <include name="IDR_KALEIDOSCOPE_NTP_MODULE_JS" file="resources/module.js" type="BINDATA"  />
     </includes>
   </release>
 </grit>

chrome/browser/media/kaleidoscope/kaleidoscope_ui.cc

@@ -10,6 +10,7 @@
 #include "base/memory/ref_counted_memory.h"
 #include "chrome/browser/buildflags.h"
 #include "chrome/browser/media/kaleidoscope/constants.h"
+#include "chrome/browser/media/kaleidoscope/grit/kaleidoscope_resources.h"
 #include "chrome/browser/media/kaleidoscope/kaleidoscope_data_provider_impl.h"
 #include "chrome/browser/media/kaleidoscope/kaleidoscope_metrics_recorder.h"
 #include "chrome/browser/media/kaleidoscope/kaleidoscope_switches.h"
@@ -23,10 +24,6 @@
 #include "services/network/public/mojom/content_security_policy.mojom.h"
 #include "ui/base/resource/resource_bundle.h"
 
-#if BUILDFLAG(ENABLE_KALEIDOSCOPE)
-#include "chrome/browser/media/kaleidoscope/grit/kaleidoscope_resources.h"
-#endif  // BUILDFLAG(ENABLE_KALEIDOSCOPE)
-
 namespace {
 
 // Wraps the strings in JS so they can be accessed by the code. The strings are
@@ -264,13 +261,14 @@ content::WebUIDataSource* KaleidoscopeUI::CreateWebUIDataSource() {
   html_source->AddResourcePath(
       "chrome/browser/media/feeds/media_feeds_store.mojom-lite.js",
       IDR_MEDIA_FEEDS_STORE_MOJOM_LITE_JS);
-  html_source->AddResourcePath("module.js", IDR_KALEIDOSCOPE_NTP_MODULE_JS);
   html_source->AddResourcePath("content.js", IDR_KALEIDOSCOPE_CONTENT_JS);
   html_source->AddResourcePath("shared.css", IDR_KALEIDOSCOPE_SHARED_CSS);
 
   html_source->SetDefaultResource(IDR_KALEIDOSCOPE_HTML);
 #endif  // BUILDFLAG(ENABLE_KALEIDOSCOPE)
 
+  html_source->AddResourcePath("module.js", IDR_KALEIDOSCOPE_NTP_MODULE_JS);
+
   return html_source;
 }
 

chrome/browser/media/kaleidoscope/resources/module.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.
+
+export async function loadKaleidoscopeModule() {
+  return {
+    element: document.createElement('div'),
+    title: loadTimeData.getString('modulesKaleidoscopeTitle'),
+  };
+}

chrome/browser/resources/new_tab_page/modules/kaleidoscope/module.js

@@ -5,62 +5,16 @@
 import 'chrome://resources/mojo/mojo/public/mojom/base/unguessable_token.mojom-lite.js';
 import 'chrome://resources/mojo/url/mojom/origin.mojom-lite.js';
 
+import {loadKaleidoscopeModule} from 'chrome://kaleidoscope/module.js';
 import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
-import {ModuleDescriptor} from '../module_descriptor.js';
-
-/**
- * @typedef {{
- *   url: (string),
- *   module: (?boolean)
- * }}
- */
-const Resource = {};
-
-/**
- * TODO(beccahughes): use import for these.
- * @type {Array<Resource>}
- */
-const KALEIDOSCOPE_RESOURCES = [
-  {url: 'chrome://kaleidoscope/geometry.mojom-lite.js'},
-  {
-    url:
-        'chrome://kaleidoscope/chrome/browser/media/feeds/media_feeds_store.mojom-lite.js'
-  },
-  {url: 'chrome://kaleidoscope/kaleidoscope.mojom-lite.js'},
-  {url: 'chrome://kaleidoscope/content.js'},
-  {url: 'chrome://kaleidoscope/resources/_locales/strings.js'},
-  {url: 'chrome://kaleidoscope/module.js', module: true},
-];
-
-/**
- * Loads a script resource and returns a promise that will resolve when the
- * loading is complete.
- * @param {Resource} resource
- * @returns {Promise}
- */
-function loadResource(resource) {
-  return new Promise((resolve) => {
-    const script = document.createElement('script');
 
-    if (resource.module) {
-      script.type = 'module';
-    }
-
-    script.src = resource.url;
-    script.addEventListener('load', resolve, {once: true});
-    document.body.appendChild(script);
-  });
-}
+import {ModuleDescriptor} from '../module_descriptor.js';
 
 /** @type {!ModuleDescriptor} */
 export const kaleidoscopeDescriptor = new ModuleDescriptor(
     /*id=*/ 'kaleidoscope',
     /*heightPx=*/ 330,
     async () => {
-      // Load all the Kaleidoscope resources into the NTP and return the module
-      // once the loading is complete.
-      await Promise.all(KALEIDOSCOPE_RESOURCES.map((r) => loadResource(r)));
-
-      return window.loadKaleidoscopeModule();
+      return loadKaleidoscopeModule();
     },
 );

third_party/closure_compiler/closure_args.gni

@@ -50,6 +50,8 @@ js_modules_args = [
   "browser_resolver_prefix_replacements=\"chrome://resources/=./\"",
   "browser_resolver_prefix_replacements=\"//resources/=./\"",
 
+  "browser_resolver_prefix_replacements=\"chrome://kaleidoscope/=../../chrome/browser/media/kaleidoscope/internal/resources\"",
+
   # Turn off primarily because cr.define() should not be used in any JS Modules
   # based code, and secondarily because of b/133333578.
   "chrome_pass=false",