Revert "Use JS modules for the NTP module"

This reverts commit 7927c8a6.

Reason for revert: suspecting that this patch caused consistent test failure on chromeos: https://ci.chromium.org/p/chrome/builders/ci/linux-chromeos-chrome/8852 

Original change's description:
> 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/+/2435441
> Reviewed-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}

TBR=calamity@chromium.org,beccahughes@chromium.org,steimel@chromium.org

Change-Id: I3d4fed8789ad99a9c289ed604b83d22a2c243dc4
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2438042Reviewed-by: Yi Gu <yigu@chromium.org>
Commit-Queue: Yi Gu <yigu@chromium.org>
Cr-Commit-Position: refs/heads/master@{#811884}

chrome/browser/media/kaleidoscope/kaleidoscope_resources.grd

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

chrome/browser/media/kaleidoscope/kaleidoscope_ui.cc

@@ -10,7 +10,6 @@
 #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"
@@ -24,6 +23,10 @@
 #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
@@ -261,14 +264,13 @@ 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,16 +5,62 @@
 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);
+  });
+}
+
 /** @type {!ModuleDescriptor} */
 export const kaleidoscopeDescriptor = new ModuleDescriptor(
     /*id=*/ 'kaleidoscope',
     /*heightPx=*/ 330,
     async () => {
-      return loadKaleidoscopeModule();
+      // 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();
     },
 );

third_party/closure_compiler/closure_args.gni

@@ -50,8 +50,6 @@ 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",