[File SWA]: Creates a script loader for JS code

The purpose of script loader is to enable loading scripts at runtime.
The secondary purpose is to centralize code for creating script tags.

Bug: 1113981
Change-Id: I8780d8315964ba14e2d24854d9da1e81a8d2e862
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2547744
Commit-Queue: Bo Majewski <majewski@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#829124}

chromeos/components/file_manager/file_manager_ui.cc

@@ -32,6 +32,8 @@ FileManagerUI::FileManagerUI(content::WebUI* web_ui,
                           IDR_FILE_MANAGER_SWA_MOJO_LITE_JS);
   source->AddResourcePath("browser_proxy.js",
                           IDR_FILE_MANAGER_SWA_BROWSER_PROXY_JS);
+  source->AddResourcePath("script_loader.js",
+                          IDR_FILE_MANAGER_SWA_SCRIPT_LOADER_JS);
 
   // Sets up legacy_main_script.js to be the same as Files App
   //   ui/file_manager/file_manager/foreground/js/main_scripts.js

chromeos/components/file_manager/resources/BUILD.gn

@@ -8,6 +8,7 @@ js_library("main_js") {
   sources = [
     "browser_proxy.js",
     "main.js",
+    "script_loader.js",
   ]
   deps = [
     "//chromeos/components/file_manager/mojom:mojom_js_library_for_compile",

chromeos/components/file_manager/resources/file_manager_resources.grd

@@ -15,6 +15,7 @@
       <if expr="is_official_build == false">
         <!-- Privileged app host contents. -->
         <include name="IDR_FILE_MANAGER_SWA_BROWSER_PROXY_JS" file="browser_proxy.js" type="BINDATA" />
+        <include name="IDR_FILE_MANAGER_SWA_SCRIPT_LOADER_JS" file="script_loader.js" type="BINDATA" />
         <include name="IDR_FILE_MANAGER_SWA_MAIN_HTML" file="${root_gen_dir}/chromeos/components/file_manager/resources/main.html" flattenhtml="true" use_base_dir="false" type="BINDATA" />
         <include name="IDR_FILE_MANAGER_SWA_MAIN_JS" file="main.js" type="BINDATA" />
         <include name="IDR_FILE_MANAGER_SWA_ICON_192" file="images/icon192.png" type="BINDATA" />

chromeos/components/file_manager/resources/main.js

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import {BrowserProxy} from './browser_proxy.js'
+import {ScriptLoader} from './script_loader.js'
 
 /**
  * Represents file manager application. Starting point for the application
@@ -13,17 +14,9 @@ class FileManagerApp {
     console.info('File manager app created ...');
   }
 
-  /**
-   * Lazily loads File App legacy code.
-   */
-  loadLegacyCode() {
-    const legacyLoader = document.createElement('script');
-    legacyLoader.src = 'legacy_main_scripts.js';
-    document.body.appendChild(legacyLoader);
-  }
-
-  run() {
-    this.loadLegacyCode();
+  async run() {
+    await new ScriptLoader('legacy_main_scripts.js').load();
+    console.debug('Legacy code loaded');
   }
 }
 

chromeos/components/file_manager/resources/script_loader.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.
+
+/**
+ * @fileoverview Script loader allows loading scripts at the desired time.
+ */
+
+/**
+ * @typedef {
+ *   {type: (string|undefined), defer: (boolean|undefined)}
+ * }
+ */
+export let ScriptParams;
+
+
+/**
+ * Used to load scripts at a runtime. Typical use:
+ *
+ * await new ScriptLoader('its_time.js').load();
+ *
+ * Optional parameters may be also specified:
+ *
+ * await new ScriptLoader('its_time.js', {type: 'module'}).load();
+ */
+export class ScriptLoader {
+  /**
+   * Creates a loader that loads the script specified by |src| once the load
+   * method is called. Optional |params| can specify other script attributes.
+   * @param {string} src
+   * @param {!ScriptParams} params
+   */
+  constructor(src, params = {}) {
+    /** @private {string} */
+    this.src_ = src;
+
+    /** @private {string|undefined} */
+    this.type_ = params.type;
+
+    /** @private {boolean|undefined} */
+    this.defer_ = params.defer;
+  }
+
+  /**
+   * @return {!Promise<string>}
+   */
+  async load() {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      if (this.type_ !== undefined) {
+        script.type = this.type_;
+      }
+      if (this.defer_ !== undefined) {
+        script.defer = this.defer_;
+      }
+      script.onload = () => resolve(this.src_);
+      script.onerror = (error) => reject(error);
+      script.src = this.src_;
+      document.body.append(script);
+    });
+  }
+}