Files app: Generate JS module for <files-message> and <files-spinner>

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

chrome/browser/chromeos/file_manager/file_manager_jstest.cc

@@ -103,7 +103,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesDisplayPanel) {
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesMessage) {
-  RunTestURL("foreground/elements/files_message_unittest_gen.html");
+  RunTestURL("foreground/elements/files_message_unittest.m_gen.html");
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesPasswordDialog) {

ui/file_manager/file_manager/foreground/elements/BUILD.gn

@@ -6,6 +6,7 @@ import("//third_party/closure_compiler/compile_js.gni")
 import("//third_party/closure_compiler/js_unit_tests.gni")
 import("//tools/polymer/polymer.gni")
 import("//ui/file_manager/base/gn/js_test_gen_html.gni")
+import("//ui/webui/resources/tools/js_modulizer.gni")
 
 visibility = [ "//ui/file_manager/file_manager/foreground/*" ]
 
@@ -57,11 +58,13 @@ js_type_check("closure_compile_jsmodules") {
   deps = [
     ":files_format_dialog.m",
     ":files_icon_button.m",
+    ":files_message.m",
     ":files_metadata_box.m",
     ":files_metadata_entry.m",
     ":files_quick_view.m",
     ":files_ripple.m",
     ":files_safe_media.m",
+    ":files_spinner.m",
     ":files_toast.m",
     ":files_toggle_ripple.m",
     ":files_tooltip.m",
@@ -154,13 +157,25 @@ js_library("files_message") {
   ]
 }
 
-js_unittest("files_message_unittest") {
+js_unittest("files_message_unittest.m") {
   deps = [
-    ":files_message",
-    "//ui/webui/resources/js:webui_resource_test",
+    ":files_message.m",
+    "//chrome/test/data/webui:chai_assert",
+    "//ui/webui/resources/js:assert.m",
   ]
 }
 
+js_library("files_message.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/elements/files_message.m.js" ]
+  deps = [
+    "//ui/webui/resources/cr_elements/cr_button:cr_button.m",
+    "//ui/webui/resources/cr_elements/cr_icon_button:cr_icon_button.m",
+    "//ui/webui/resources/js:assert.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("files_metadata_box") {
   externs_list = [ "$externs_path/pending_polymer.js" ]
 }
@@ -298,6 +313,12 @@ js_library("files_safe_media_webview_content") {
 js_library("files_spinner") {
 }
 
+js_library("files_spinner.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/elements/files_spinner.m.js" ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 # TODO(tapted): Move this to //ui/file_manager/base.
 js_library("files_toast") {
   visibility += [ "//ui/file_manager/gallery/*" ]
@@ -391,7 +412,6 @@ js_unittest("files_xf_elements_unittest") {
 
 js_test_gen_html("js_test_gen_html") {
   deps = [
-    ":files_message_unittest",
     ":files_password_dialog_unittest",
     ":files_xf_elements_unittest",
   ]
@@ -415,9 +435,17 @@ js_library("xf_display_panel") {
   ]
 }
 
+js_modulizer("modulize") {
+  input_files = [
+    "files_message.js",
+    "files_spinner.js",
+  ]
+}
+
 js_test_gen_html("js_test_gen_html_modules") {
   is_polymer3 = true
   deps = [
+    ":files_message_unittest.m",
     ":files_toast_unittest.m",
     ":files_tooltip_unittest.m",
   ]

ui/file_manager/file_manager/foreground/elements/files_message.js

@@ -2,6 +2,8 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {assert} from 'chrome://resources/js/assert.m.js';
+
 /**
  * FilesMessage template.
  * @const @type {string}
@@ -72,7 +74,7 @@ const filesMessageTemplate = `
 /**
  * FilesMessage.
  */
-class FilesMessage extends HTMLElement {
+/* #export */ class FilesMessage extends HTMLElement {
   constructor() {
     /**
      * Create element content.

ui/file_manager/file_manager/foreground/elements/files_message_unittest.js → ui/file_manager/file_manager/foreground/elements/files_message_unittest.m.js

@@ -2,22 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-/**
- * TODO(lucmult): Remove this when converting to JS modules.
- * @suppress {checkTypes}
- */
-chrome.fileManagerPrivate = {
-  FormatFileSystemType: {
-    VFAT: 'vfat',
-    EXFAT: 'exfat',
-    NTFS: 'ntfs',
-  },
-};
+// clang-format off
+import {assert} from 'chrome://resources/js/assert.m.js';
+import {assertEquals, assertFalse, assertNotEquals, assertTrue} from 'chrome://test/chai_assert.js';
+
+import {FilesMessage} from './files_message.m.js';
+// clang-format on
 
 /**
  * Adds a FilesMessage element to the page, initially hidden.
  */
-function setUpPage() {
+export function setUpPage() {
   document.body.innerHTML +=
       '<files-message id="test-files-message" hidden></files-message>';
 }
@@ -43,7 +38,7 @@ function setFilesMessageContent() {
 
   // <files-message> [hidden] controls visual display.
   assertEquals('none', window.getComputedStyle(message).display);
-  assertNotEqual(null, message.getAttribute('hidden'));
+  assertNotEquals(null, message.getAttribute('hidden'));
   assertTrue(message.hidden);
 
   // <files-message> extends HTMLElement and so the setContent() method
@@ -53,7 +48,7 @@ function setFilesMessageContent() {
   });
 
   // <files-message> element should be visually displayed.
-  assertNotEqual('none', window.getComputedStyle(message).display);
+  assertNotEquals('none', window.getComputedStyle(message).display);
   assertEquals(null, message.getAttribute('hidden'));
   assertFalse(message.hidden);
 
@@ -65,7 +60,7 @@ function setFilesMessageContent() {
  * setting its content via the element's property setters, and hiding its
  * sub-elements.
  */
-async function testFilesMessage(done) {
+export async function testFilesMessage(done) {
   // Setup and return the <files-message> element.
   /** @type {!FilesMessage|!Element} */
   const message = setFilesMessageContent();
@@ -83,11 +78,11 @@ async function testFilesMessage(done) {
   const close = assert(message.shadowRoot.querySelector('#close'));
 
   // The sub-elements should be displayed.
-  assertNotEqual('none', window.getComputedStyle(icon).display);
-  assertNotEqual('none', window.getComputedStyle(text).display);
-  assertNotEqual('none', window.getComputedStyle(dismiss).display);
-  assertNotEqual('none', window.getComputedStyle(action).display);
-  assertNotEqual('none', window.getComputedStyle(close).display);
+  assertNotEquals('none', window.getComputedStyle(icon).display);
+  assertNotEquals('none', window.getComputedStyle(text).display);
+  assertNotEquals('none', window.getComputedStyle(dismiss).display);
+  assertNotEquals('none', window.getComputedStyle(action).display);
+  assertNotEquals('none', window.getComputedStyle(close).display);
 
   // To work with screen readers, the icon & text element containing
   // parent element should have aria role 'alert'.
@@ -118,7 +113,7 @@ async function testFilesMessage(done) {
 
   // Clicking the main element does not emit a visual signal.
   signal = 'main-element-not-clickable';
-  assertNotEqual(null, message.onclick);
+  assertNotEquals(null, message.onclick);
   message.click();
   assertEquals('main-element-not-clickable', signal);
 
@@ -175,7 +170,7 @@ async function testFilesMessage(done) {
   message.close = {label: 'aria close label'};
   assertEquals('aria close label', close.getAttribute('aria-label'));
   assertEquals('cr:close', close.getAttribute('iron-icon'));
-  assertNotEqual(null, close.onclick);
+  assertNotEquals(null, close.onclick);
   signal = null;
   close.click();
   assertEquals('cr:close', signal);
@@ -218,7 +213,7 @@ async function testFilesMessage(done) {
   // Setting null text should display empty text.
   message.message = null;
   assertEquals('', text.getAttribute('aria-label'));
-  assertNotEqual('none', window.getComputedStyle(text).display);
+  assertNotEquals('none', window.getComputedStyle(text).display);
 
   done();
 }

ui/file_manager/file_manager/foreground/elements/files_spinner.js

@@ -63,7 +63,7 @@ const filesSpinnerTemplate = `
 /**
  * FilesSpinner.
  */
-class FilesSpinner extends HTMLElement {
+/* #export */ class FilesSpinner extends HTMLElement {
   constructor() {
     super().attachShadow({mode: 'open'}).innerHTML = filesSpinnerTemplate;
   }