Files app: Add JS module for foreground secondary surfaces

Add JS modules for //ui/file_manager/file_manger/foreground/js/ :
- element_importer.js
- deferred_elements.m.js This replaces the elements_bundle.html.

Bug: 1133186
Change-Id: I372fbb5afe8bdd22483d0fcccda3b2dd240f447a
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2631812
Commit-Queue: Jeremie Boulic <jboulic@chromium.org>
Reviewed-by: Jeremie Boulic <jboulic@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#843972}

ui/file_manager/file_manager/foreground/js/BUILD.gn

@@ -35,11 +35,13 @@ js_type_check("closure_compile_jsmodules") {
     ":constants.m",
     ":crossover_search_utils.m",
     ":crostini_controller.m",
+    ":deferred_elements.m",
     ":dialog_type.m",
     ":directory_contents.m",
     ":directory_model.m",
     ":directory_tree_naming_controller.m",
     ":drop_effect_and_label.m",
+    ":elements_importer.m",
     ":empty_folder_controller.m",
     ":fake_android_app_list_model.m",
     ":fake_file_selection_handler.m",
@@ -652,6 +654,27 @@ js_library("drop_effect_and_label.m") {
 js_library("elements_importer") {
 }
 
+js_library("elements_importer.m") {
+  deps = [ ":deferred_elements.m" ]
+}
+
+js_library("deferred_elements.m") {
+  deps = [
+    "//ui/file_manager/file_manager/foreground/elements:files_format_dialog.m",
+    "//ui/file_manager/file_manager/foreground/elements:files_message.m",
+    "//ui/file_manager/file_manager/foreground/elements:files_password_dialog.m",
+    "//ui/file_manager/file_manager/foreground/elements:files_ripple.m",
+    "//ui/file_manager/file_manager/foreground/elements:files_spinner.m",
+    "//ui/file_manager/file_manager/foreground/elements:files_toast.m",
+    "//ui/file_manager/file_manager/foreground/elements:files_toggle_ripple.m",
+    "//ui/file_manager/file_manager/foreground/elements:files_tooltip.m",
+    "//ui/file_manager/file_manager/foreground/elements:xf_button.m",
+    "//ui/file_manager/file_manager/foreground/elements:xf_circular_progress.m",
+    "//ui/file_manager/file_manager/foreground/elements:xf_display_panel.m",
+    "//ui/file_manager/file_manager/foreground/elements:xf_panel_item.m",
+  ]
+}
+
 js_library("empty_folder_controller") {
   deps = [
     ":directory_model",

ui/file_manager/file_manager/foreground/js/deferred_elements.m.js

+// Copyright 2021 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 Elements not used in the first painting of the app.
+ */
+
+import '../elements/files_format_dialog.m.js';
+import '../elements/files_message.m.js';
+import '../elements/files_password_dialog.m.js';
+import '../elements/files_ripple.m.js';
+import '../elements/files_spinner.m.js';
+import '../elements/files_toast.m.js';
+import '../elements/files_toggle_ripple.m.js';
+import '../elements/files_tooltip.m.js';
+// TODO(lucmult): Figure out if icons.html is needed here.
+// import '../elements/icons.m.js';
+import '../elements/xf_button.m.js';
+import '../elements/xf_circular_progress.m.js';
+import '../elements/xf_display_panel.m.js';
+import '../elements/xf_panel_item.m.js';

ui/file_manager/file_manager/foreground/js/elements_importer.m.js

+// Copyright 2021 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.
+
+/** @return {!Promise<void>} */
+export function importElements() {
+  const startTime = Date.now();
+  return new Promise((resolve, reject) => {
+    const script = document.createElement('script');
+    script.type = 'module';
+    script.src = './foreground/js/deferred_elements.m.js';
+
+    script.onload = () => {
+      console.log('Elements imported.');
+      chrome.metricsPrivate.recordTime(
+          'FileBrowser.Load.ImportElements', Date.now() - startTime);
+      resolve();
+    };
+    script.onerror = (error) => {
+      console.error(error);
+      reject(error);
+    };
+
+    document.head.appendChild(script);
+  });
+}