Files app: Generate JS module for <xf-*>

Generate the JS modules for the following elements:
* <xf-button>
* <xf-circular-progress>
* <xf-display-panel>
* <xf-panel-item>

And their test: files_xf_elements.unittest.m.js.

Bug: 1133186
Change-Id: I22c71f6a6e648c4a1b027ef1766eb4df060f9f93
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2576299
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@{#834640}

chrome/browser/chromeos/file_manager/file_manager_jstest.cc

@@ -99,7 +99,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesAppEntryTypes) {
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesDisplayPanel) {
-  RunTestURL("foreground/elements/files_xf_elements_unittest_gen.html");
+  RunTestURL("foreground/elements/files_xf_elements_unittest.m_gen.html");
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FilesMessage) {

ui/file_manager/BUILD.gn

@@ -62,7 +62,6 @@ group("unit_test_data") {
     "file_manager/background/js:js_test_gen_html_modules",
     "file_manager/common/js:js_test_gen_html",
     "file_manager/common/js:js_test_gen_html_modules",
-    "file_manager/foreground/elements:js_test_gen_html",
     "file_manager/foreground/elements:js_test_gen_html_modules",
     "file_manager/foreground/js:js_test_gen_html",
     "file_manager/foreground/js:js_test_gen_html_modules",

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

@@ -26,7 +26,6 @@ group("closure_compile") {
     ":closure_compile_internal",
     ":closure_compile_jsmodules",
     ":js_test_gen_html_modules_type_check_auto",
-    ":js_test_gen_html_type_check_auto",
   ]
 }
 
@@ -69,6 +68,10 @@ js_type_check("closure_compile_jsmodules") {
     ":files_toast.m",
     ":files_toggle_ripple.m",
     ":files_tooltip.m",
+    ":xf_button.m",
+    ":xf_circular_progress.m",
+    ":xf_display_panel.m",
+    ":xf_panel_item.m",
   ]
 }
 
@@ -417,17 +420,16 @@ js_unittest("files_toast_unittest.m") {
   ]
 }
 
-js_unittest("files_xf_elements_unittest") {
+js_unittest("files_xf_elements_unittest.m") {
   deps = [
-    ":xf_display_panel",
-    "//ui/webui/resources/js:assert",
-    "//ui/webui/resources/js:webui_resource_test",
+    ":xf_display_panel.m",
+    "//chrome/test/data/webui:chai_assert",
+    "//ui/file_manager/file_manager/common/js:util.m",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:load_time_data.m",
   ]
-}
 
-js_test_gen_html("js_test_gen_html") {
-  deps = [ ":files_xf_elements_unittest" ]
-  html_import = true
+  externs_list = [ "$externs_path/file_manager_private.js" ]
 }
 
 js_library("xf_button") {
@@ -437,9 +439,26 @@ js_library("xf_button") {
   ]
 }
 
+js_library("xf_button.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/elements/xf_button.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",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("xf_circular_progress") {
 }
 
+js_library("xf_circular_progress.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/elements/xf_circular_progress.m.js" ]
+
+  deps = [ "//ui/webui/resources/js:assert.m" ]
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("xf_display_panel") {
   deps = [
     ":xf_panel_item",
@@ -447,11 +466,25 @@ js_library("xf_display_panel") {
   ]
 }
 
+js_library("xf_display_panel.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/elements/xf_display_panel.m.js" ]
+  deps = [
+    ":xf_panel_item.m",
+    "//ui/file_manager/file_manager/common/js:util.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_modulizer("modulize") {
   input_files = [
     "files_message.js",
     "files_spinner.js",
     "files_password_dialog.js",
+    "xf_button.js",
+    "xf_circular_progress.js",
+    "xf_panel_item.js",
+    "xf_display_panel.js",
   ]
 }
 
@@ -462,6 +495,7 @@ js_test_gen_html("js_test_gen_html_modules") {
     ":files_password_dialog_unittest.m",
     ":files_toast_unittest.m",
     ":files_tooltip_unittest.m",
+    ":files_xf_elements_unittest.m",
   ]
 
   closure_flags =
@@ -479,3 +513,15 @@ js_library("xf_panel_item") {
     ":xf_circular_progress",
   ]
 }
+
+js_library("xf_panel_item.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/elements/xf_panel_item.m.js" ]
+  deps = [
+    ":xf_button.m",
+    ":xf_circular_progress.m",
+    "//ui/file_manager/file_manager/common/js:util.m",
+    "//ui/webui/resources/js:assert.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}

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

@@ -2,17 +2,15 @@
 // 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, constantProperty}
- */
-chrome.fileManagerPrivate = {
-  FormatFileSystemType: {
-    VFAT: 'vfat',
-    EXFAT: 'exfat',
-    NTFS: 'ntfs',
-  },
-};
+// clang-format off
+import {assert} from 'chrome://resources/js/assert.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import {assertEquals, assertFalse, assertTrue} from 'chrome://test/chai_assert.js';
+
+import {util} from '../../common/js/util.m.js';
+
+import {DisplayPanel} from './xf_display_panel.m.js';
+// clang-format on
 
 /** @type {!DisplayPanel|!Element} */
 let displayPanel;
@@ -20,7 +18,7 @@ let displayPanel;
 /**
  * Adds a xf-display-panel element to the test page.
  */
-function setUp() {
+export function setUp() {
   document.body.innerHTML +=
       '<xf-display-panel id="test-xf-display-panel"></xf-display-panel>';
   displayPanel = assert(document.querySelector('#test-xf-display-panel'));
@@ -28,12 +26,12 @@ function setUp() {
   const enableFilesTransferDetails = true;
 
   // Mock LoadTimeData strings for transfer details feature.
-  window.loadTimeData.data = {
+  loadTimeData.data = {
     FILES_TRANSFER_DETAILS_ENABLED: enableFilesTransferDetails
   };
 
-  window.loadTimeData.getString = id => {
-    return window.loadTimeData.data_[id] || id;
+  loadTimeData.getString = id => {
+    return loadTimeData.data_[id] || id;
   };
 
   /** @return {boolean} */
@@ -42,7 +40,7 @@ function setUp() {
   };
 }
 
-function tearDown() {
+export function tearDown() {
   displayPanel.removeAllPanelItems();
 }
 
@@ -50,7 +48,7 @@ function tearDown() {
  * Tests that adding and removing panels to <xf-display-panel> updates the
  * aria-hidden attribute.
  */
-function testDisplayPanelAriaHidden() {
+export function testDisplayPanelAriaHidden() {
   // Starts without any panel so should be hidden;
   assertEquals(displayPanel.getAttribute('aria-hidden'), 'true');
 
@@ -77,7 +75,7 @@ function testDisplayPanelAriaHidden() {
   assertEquals(displayPanel.getAttribute('aria-hidden'), 'true');
 }
 
-async function testDisplayPanelAttachPanel(done) {
+export async function testDisplayPanelAttachPanel(done) {
   // Get the host display panel container element.
   /** @type {!DisplayPanel|!Element} */
   const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
@@ -115,7 +113,7 @@ async function testDisplayPanelAttachPanel(done) {
   done();
 }
 
-async function testDisplayPanelChangingPanelTypes(done) {
+export async function testDisplayPanelChangingPanelTypes(done) {
   // Get the host display panel container element.
   /** @type {!DisplayPanel|!Element} */
   const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
@@ -210,7 +208,7 @@ async function testDisplayPanelChangingPanelTypes(done) {
   done();
 }
 
-function testFilesDisplayPanelErrorText() {
+export function testFilesDisplayPanelErrorText() {
   // Get the host display panel container element.
   /** @type {!DisplayPanel|!Element} */
   const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
@@ -249,7 +247,7 @@ util.strf = (end, option) => {
   return option + end;
 };
 
-function testFilesDisplayPanelErrorMarker() {
+export function testFilesDisplayPanelErrorMarker() {
   // Get the host display panel container element.
   /** @type {!DisplayPanel|!Element} */
   const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
@@ -286,7 +284,7 @@ function testFilesDisplayPanelErrorMarker() {
       'Summary panel error marker property is wrong, should be "hidden"');
 }
 
-function testFilesDisplayPanelMixedSummary() {
+export function testFilesDisplayPanelMixedSummary() {
   // Get the host display panel container element.
   /** @type {!DisplayPanel|!Element} */
   const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
@@ -346,7 +344,7 @@ function testFilesDisplayPanelMixedSummary() {
   assertEquals('success', summaryPanelItem.status);
 }
 
-function testFilesDisplayPanelMixedProgress() {
+export function testFilesDisplayPanelMixedProgress() {
   // Get the host display panel container element.
   /** @type {!DisplayPanel|!Element} */
   const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
@@ -381,7 +379,7 @@ function testFilesDisplayPanelMixedProgress() {
   assertEquals('3', summaryPanelItem.progress);
 }
 
-function testFilesDisplayPanelCircularProgress() {
+export function testFilesDisplayPanelCircularProgress() {
   // Get the host display panel container element.
   /** @type {!DisplayPanel|!Element} */
   const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
@@ -401,7 +399,7 @@ function testFilesDisplayPanelCircularProgress() {
   assertEquals('4', strokeWidthContainerGroup.getAttribute('stroke-width'));
 }
 
-async function testFilesDisplayPanelSummaryPanel(done) {
+export async function testFilesDisplayPanelSummaryPanel(done) {
   // Get the host display panel container element.
   /** @type {!DisplayPanel|!Element} */
   const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
@@ -462,7 +460,7 @@ async function testFilesDisplayPanelSummaryPanel(done) {
   done();
 }
 
-function testFilesDisplayPanelTransferDetails() {
+export function testFilesDisplayPanelTransferDetails() {
   // Get the host display panel container element.
   /** @type {!DisplayPanel|!Element} */
   const displayPanel = assert(document.querySelector('#test-xf-display-panel'));
@@ -475,7 +473,7 @@ function testFilesDisplayPanelTransferDetails() {
   assertEquals('detailed-panel', progressPanel.getAttribute('detailed-panel'));
 }
 
-async function testFilesDisplayPanelTransferDetailsSummary(done) {
+export async function testFilesDisplayPanelTransferDetailsSummary(done) {
   // Get the host display panel container element.
   /** @type {!DisplayPanel|!Element} */
   const displayPanel = assert(document.querySelector('#test-xf-display-panel'));

ui/file_manager/file_manager/foreground/elements/xf_button.js

@@ -5,7 +5,7 @@
 /**
  * A button used inside PanelItem with varying display characteristics.
  */
-class PanelButton extends HTMLElement {
+/* #export */ class PanelButton extends HTMLElement {
   constructor() {
     super();
     this.createElement_();

ui/file_manager/file_manager/foreground/elements/xf_circular_progress.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';
+
 /**
  * Definition of a circular progress indicator custom element.
  * The element supports two attributes for control - 'radius' and 'progress'.
@@ -11,7 +13,7 @@
  *   element.setAttribute('progress', '50'); to set progress to half complete
  * or alternately, set the 'element.progress' JS property for the same result.
  */
-class CircularProgress extends HTMLElement {
+/* #export */ class CircularProgress extends HTMLElement {
   constructor() {
     super();
     const host = document.createElement('template');

ui/file_manager/file_manager/foreground/elements/xf_display_panel.js

@@ -2,11 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {PanelItem} from './xf_panel_item.m.js';
+// #import {util} from '../../common/js/util.m.js';
+
 /**
  * A panel to display a collection of PanelItem.
  * @extends HTMLElement
  */
-class DisplayPanel extends HTMLElement {
+/* #export */ class DisplayPanel extends HTMLElement {
   constructor() {
     super();
     this.createElement_();

ui/file_manager/file_manager/foreground/elements/xf_panel_item.js

@@ -2,11 +2,17 @@
 // 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';
+// #import {util} from '../../common/js/util.m.js';
+// #import {DisplayPanel} from './xf_display_panel.m.js';
+// #import './xf_button.m.js';
+// #import './xf_circular_progress.m.js';
+
 /**
  * A panel to display the status or progress of a file operation.
  * @extends HTMLElement
  */
-class PanelItem extends HTMLElement {
+/* #export */ class PanelItem extends HTMLElement {
   constructor() {
     super();
     const host = document.createElement('template');