Files app: Add JS modules for foreground page

Add JS modules for //ui/file_manager/file_manager/foreground/js/u/ :
- breadcrumb.js
- breadcrumb_unittest.js
- gear_menu.js
- import_crostini_image_dialog.js
- install_linux_package_dialog.js
- install_linux_package_dialog_unittest.m.js

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

chrome/browser/chromeos/file_manager/file_manager_jstest.cc

@@ -29,7 +29,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, ActionsSubmenuTest) {
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, Breadcrumb) {
-  RunTestURL("foreground/js/ui/breadcrumb_unittest_gen.html");
+  RunTestURL("foreground/js/ui/breadcrumb_unittest.m_gen.html");
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, ContentMetadataProvider) {
@@ -169,7 +169,8 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, ImportHistoryTest) {
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, InstallLinuxPackageDialogTest) {
-  RunTestURL("foreground/js/ui/install_linux_package_dialog_unittest_gen.html");
+  RunTestURL(
+      "foreground/js/ui/install_linux_package_dialog_unittest.m_gen.html");
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, ListThumbnailLoader) {

ui/file_manager/BUILD.gn

@@ -64,7 +64,6 @@ group("unit_test_data") {
     "file_manager/foreground/js:js_test_gen_html",
     "file_manager/foreground/js:js_test_gen_html_modules",
     "file_manager/foreground/js/metadata:js_test_gen_html_modules",
-    "file_manager/foreground/js/ui:js_test_gen_html",
     "file_manager/foreground/js/ui:js_test_gen_html_modules",
     "gallery/js:js_test_gen_html",
     "gallery/js/image_editor:js_test_gen_html",

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

@@ -17,16 +17,16 @@ group("closure_compile") {
     ":closure_compile_jsmodules",
     ":closure_compile_module",
     ":js_test_gen_html_modules_type_check_auto",
-    ":js_test_gen_html_type_check_auto",
   ]
 }
 
 js_type_check("closure_compile_jsmodules") {
-  uses_js_modules = true
+  is_polymer3 = true
   deps = [
     ":a11y_announce.m",
     ":action_model_ui.m",
     ":actions_submenu.m",
+    ":breadcrumb.m",
     ":combobutton.m",
     ":commandbutton.m",
     ":default_task_dialog.m",
@@ -43,6 +43,9 @@ js_type_check("closure_compile_jsmodules") {
     ":files_alert_dialog.m",
     ":files_confirm_dialog.m",
     ":files_menu.m",
+    ":gear_menu.m",
+    ":import_crostini_image_dialog.m",
+    ":install_linux_package_dialog.m",
     ":list_container.m",
     ":multi_menu.m",
     ":multi_menu_button.m",
@@ -201,11 +204,19 @@ js_library("breadcrumb") {
   deps = [ "//ui/webui/resources/cr_elements/cr_action_menu:cr_action_menu" ]
 }
 
-js_unittest("breadcrumb_unittest") {
+js_library("breadcrumb.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/breadcrumb.m.js" ]
+
+  deps = [ "//ui/webui/resources/cr_elements/cr_action_menu:cr_action_menu.m" ]
+
+  extra_deps = [ ":modulize" ]
+}
+
+js_unittest("breadcrumb_unittest.m") {
   deps = [
-    ":breadcrumb",
-    "//ui/webui/resources/js:assert",
-    "//ui/webui/resources/js:webui_resource_test",
+    ":breadcrumb.m",
+    "//chrome/test/data/webui:chai_assert",
+    "//ui/webui/resources/js:assert.m",
   ]
 }
 
@@ -721,6 +732,18 @@ js_library("gear_menu") {
   deps = [ "//ui/file_manager/file_manager/common/js:util" ]
 }
 
+js_library("gear_menu.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/gear_menu.m.js" ]
+  deps = [
+    "//ui/file_manager/file_manager/common/js:util.m",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:load_time_data.m",
+    "//ui/webui/resources/js:util.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("install_linux_package_dialog") {
   deps = [
     ":file_manager_dialog_base",
@@ -728,11 +751,23 @@ js_library("install_linux_package_dialog") {
   ]
 }
 
-js_unittest("install_linux_package_dialog_unittest") {
+js_library("install_linux_package_dialog.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/install_linux_package_dialog.m.js" ]
   deps = [
-    ":install_linux_package_dialog",
-    "//ui/file_manager/base/js:test_error_reporting",
-    "//ui/webui/resources/js:webui_resource_test",
+    ":file_manager_dialog_base.m",
+    "//ui/file_manager/file_manager/common/js:util.m",
+    "//ui/webui/resources/js:assert.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
+js_unittest("install_linux_package_dialog_unittest.m") {
+  deps = [
+    ":install_linux_package_dialog.m",
+    "//chrome/test/data/webui:chai_assert",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:load_time_data.m",
   ]
 }
 
@@ -744,6 +779,16 @@ js_library("import_crostini_image_dialog") {
   ]
 }
 
+js_library("import_crostini_image_dialog.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/import_crostini_image_dialog.m.js" ]
+  deps = [
+    "//ui/file_manager/file_manager/common/js:util.m",
+    "//ui/webui/resources/js/cr/ui:dialogs.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("list_container") {
   deps = [
     ":file_grid",
@@ -946,15 +991,17 @@ js_library("suggest_apps_dialog.m") {
 js_test_gen_html("js_test_gen_html_modules") {
   deps = [
     ":actions_submenu_unittest.m",
+    ":breadcrumb_unittest.m",
     ":directory_tree_unittest.m",
     ":file_list_selection_model_unittest.m",
     ":file_manager_dialog_base_unittest.m",
     ":file_table_list_unittest.m",
     ":file_table_unittest.m",
     ":file_tap_handler_unittest.m",
+    ":install_linux_package_dialog_unittest.m",
     ":multi_menu_unittest.m",
   ]
-  js_module = true
+  is_polymer3 = true
 
   closure_flags =
       strict_error_checking_closure_args + [
@@ -966,13 +1013,6 @@ js_test_gen_html("js_test_gen_html_modules") {
       ]
 }
 
-js_test_gen_html("js_test_gen_html") {
-  deps = [
-    ":breadcrumb_unittest",
-    ":install_linux_package_dialog_unittest",
-  ]
-}
-
 js_modulizer("modulize") {
   input_files = [
     "a11y_announce.js",
@@ -999,6 +1039,10 @@ js_modulizer("modulize") {
     "progress_center_panel.js",
     "suggest_apps_dialog.js",
     "actions_submenu.js",
+    "breadcrumb.js",
+    "gear_menu.js",
+    "import_crostini_image_dialog.js",
+    "install_linux_package_dialog.js",
   ]
 
   namespace_rewrites = cr_namespace_rewrites

ui/file_manager/file_manager/foreground/js/ui/breadcrumb.js

@@ -180,7 +180,7 @@ const breadCrumbTemplate = `
 /**
  * Class BreadCrumb.
  */
-class BreadCrumb extends HTMLElement {
+/* #export */ class BreadCrumb extends HTMLElement {
   constructor() {
     /**
      * Create element content.
@@ -449,7 +449,8 @@ class BreadCrumb extends HTMLElement {
     }
 
     // Show drop-down below the elider button.
-    const menu = this.shadowRoot.querySelector('cr-action-menu');
+    const menu = /** @type {!CrActionMenuElement} */ (
+        this.shadowRoot.querySelector('cr-action-menu'));
     const top = elider.offsetTop + elider.offsetHeight + 8;
     !window.UNIT_TEST && menu.showAt(elider, {top: top});
 

ui/file_manager/file_manager/foreground/js/ui/breadcrumb_unittest.js → ui/file_manager/file_manager/foreground/js/ui/breadcrumb_unittest.m.js

@@ -2,7 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-'use strict';
+import {assert} from 'chrome://resources/js/assert.m.js';
+import {assertEquals, assertFalse, assertNotEquals, assertTrue} from 'chrome://test/chai_assert.js';
+
+import {BreadCrumb} from './breadcrumb.m.js';
 
 /** @const {boolean} */
 window.UNIT_TEST = true;
@@ -11,7 +14,7 @@ window.UNIT_TEST = true;
  * Creates new <bread-drumb> element for each test. Asserts it has no initial
  * path using the element.path getter.
  */
-function setUp() {
+export function setUp() {
   document.body.innerHTML = '<bread-crumb></bread-crumb>';
   const path = assert(document.querySelector('bread-crumb')).path;
   assertEquals('', path);
@@ -19,13 +22,13 @@ function setUp() {
 
 /**
  * Returns the <bread-crumb> element.
- * @return {!BreadCrumb|!Element}
+ * @return {!BreadCrumb}
  */
 function getBreadCrumb() {
   const element = assert(document.querySelector('bread-crumb'));
-  assertNotEqual('none', window.getComputedStyle(element).display);
+  assertNotEquals('none', window.getComputedStyle(element).display);
   assertFalse(element.hasAttribute('hidden'));
-  return element;
+  return /** @type {!BreadCrumb} */ (element);
 }
 
 /**
@@ -66,7 +69,7 @@ function getBreadCrumbEliderButton() {
   const elider = 'button[elider]';
   const button = getBreadCrumb().shadowRoot.querySelectorAll(elider);
   assert(button) && assert(button.length === 1, 'invalid elider button');
-  return button[0];
+  return /** @type {!HTMLButtonElement} */ (button[0]);
 }
 
 /**
@@ -189,7 +192,7 @@ function getBreadCrumbButtonState() {
 /**
  * Tests rendering an empty path.
  */
-function testBreadcrumbEmptyPath() {
+export function testBreadcrumbEmptyPath() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -211,7 +214,7 @@ function testBreadcrumbEmptyPath() {
 /**
  * Tests rendering a one element path.
  */
-function testBreadcrumbOnePartPath() {
+export function testBreadcrumbOnePartPath() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -233,7 +236,7 @@ function testBreadcrumbOnePartPath() {
 /**
  * Tests rendering a two element path.
  */
-function testBreadcrumbTwoPartPath() {
+export function testBreadcrumbTwoPartPath() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -255,7 +258,7 @@ function testBreadcrumbTwoPartPath() {
 /**
  * Tests rendering a three element path.
  */
-function testBreadcrumbThreePartPath() {
+export function testBreadcrumbThreePartPath() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -277,7 +280,7 @@ function testBreadcrumbThreePartPath() {
 /**
  * Tests rendering a four element path.
  */
-function testBreadcrumbFourPartPath() {
+export function testBreadcrumbFourPartPath() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -303,7 +306,7 @@ function testBreadcrumbFourPartPath() {
  * The drop-down menu button should contain the elided path parts and can have
  * display, but are invisible because the elider drop-down menu is closed.
  */
-function testBreadcrumbMoreThanFourElementPathsElide() {
+export function testBreadcrumbMoreThanFourElementPathsElide() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -337,7 +340,7 @@ function testBreadcrumbMoreThanFourElementPathsElide() {
  * The drop-down menu button should contain the elided path parts and can have
  * display, but are invisible because the elider drop-down menu is closed.
  */
-function testBreadcrumbRendersEscapedPathParts() {
+export function testBreadcrumbRendersEscapedPathParts() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -367,7 +370,7 @@ function testBreadcrumbRendersEscapedPathParts() {
  * Tests rendering a path of more than four parts. The elider button should be
  * visible and clicking it should 'open' and 'close' its drop-down menu.
  */
-function testBreadcrumbElidedPathEliderButtonClicksOpenDropDownMenu() {
+export function testBreadcrumbElidedPathEliderButtonClicksOpenDropDownMenu() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -419,7 +422,7 @@ function testBreadcrumbElidedPathEliderButtonClicksOpenDropDownMenu() {
  * Tests that clicking on the main buttons emits a signal that indicates which
  * part of the breadcrumb path was clicked.
  */
-async function testBreadcrumbMainButtonClicksEmitNumberSignal(done) {
+export async function testBreadcrumbMainButtonClicksEmitNumberSignal(done) {
   const element = getBreadCrumb();
 
   // Set path.
@@ -475,7 +478,7 @@ async function testBreadcrumbMainButtonClicksEmitNumberSignal(done) {
  * Tests that clicking on the menu buttons emits a signal that indicates which
  * part of the breadcrumb path was clicked.
  */
-async function testBreadcrumbMenuButtonClicksEmitNumberSignal(done) {
+export async function testBreadcrumbMenuButtonClicksEmitNumberSignal(done) {
   const element = getBreadCrumb();
 
   // Set path.
@@ -533,7 +536,7 @@ async function testBreadcrumbMenuButtonClicksEmitNumberSignal(done) {
  * Tests that setting the path emits a signal when the rendering of the new
  * path begins, and when it ends.
  */
-async function testBreadcrumbSetPathEmitsRenderSignals(done) {
+export async function testBreadcrumbSetPathEmitsRenderSignals(done) {
   const element = getBreadCrumb();
 
   // Set the BreadCrumb signals callback.
@@ -559,7 +562,7 @@ async function testBreadcrumbSetPathEmitsRenderSignals(done) {
  * Tests that opening the elider button drop-down menu emits a render signal
  * to indicate that the elided menu items were rendered.
  */
-async function testBreadcrumbEliderButtonOpenEmitsRenderSignal(done) {
+export async function testBreadcrumbEliderButtonOpenEmitsRenderSignal(done) {
   const element = getBreadCrumb();
 
   // Set path.
@@ -591,7 +594,7 @@ async function testBreadcrumbEliderButtonOpenEmitsRenderSignal(done) {
 /**
  * Tests that setting the path closes the the drop-down menu.
  */
-function testBreadcrumbSetPathClosesEliderButtonDropDownMenu() {
+export function testBreadcrumbSetPathClosesEliderButtonDropDownMenu() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -640,7 +643,7 @@ function testBreadcrumbSetPathClosesEliderButtonDropDownMenu() {
 /**
  * Tests that setting the path updates the <bread-crumb path> attribute.
  */
-function testBreadcrumbSetPathChangesElementPath() {
+export function testBreadcrumbSetPathChangesElementPath() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -656,7 +659,7 @@ function testBreadcrumbSetPathChangesElementPath() {
  * Tests that opening and closing the elider button drop-down menu adds and
  * removes <bread-crumb checked> attribute.
  */
-function testBreadcrumbEliderButtonOpenCloseChangesElementChecked() {
+export function testBreadcrumbEliderButtonOpenCloseChangesElementChecked() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -685,7 +688,7 @@ function testBreadcrumbEliderButtonOpenCloseChangesElementChecked() {
  * Tests that opening and closing the elider button drop-down menu adds and
  * removes global <html> element state.
  */
-function testBreadcrumbEliderButtonOpenCloseChangesGlobalState() {
+export function testBreadcrumbEliderButtonOpenCloseChangesGlobalState() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -719,7 +722,7 @@ function testBreadcrumbEliderButtonOpenCloseChangesGlobalState() {
  * Tests that wide text path components are rendered elided with ellipsis ...
  * an opportunity for adding a tooltip.
  */
-function testBreadcrumbPartPartsEllipsisElide() {
+export function testBreadcrumbPartPartsEllipsisElide() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -756,7 +759,7 @@ function testBreadcrumbPartPartsEllipsisElide() {
  * Tests that wide text path components in the drop-down menu are rendered
  * elided with ellipsis ... an opportunity for adding a tooltip.
  */
-function testBreadcrumbDropDownMenuPathPartsEllipsisElide() {
+export function testBreadcrumbDropDownMenuPathPartsEllipsisElide() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -796,7 +799,7 @@ function testBreadcrumbDropDownMenuPathPartsEllipsisElide() {
  * Tests that breadcrumb getToolTipButtons() service returns all buttons that
  * have a [has-tooltip] attribute.
  */
-function testBreadcrumbButtonHasToolTipAttribute() {
+export function testBreadcrumbButtonHasToolTipAttribute() {
   const element = getBreadCrumb();
 
   // Set path.
@@ -848,6 +851,6 @@ function testBreadcrumbButtonHasToolTipAttribute() {
   element.path = elider.getAttribute('aria-label');
   const ellipsis = element.getEllipsisButtons();
   assertEquals(getVisibleBreadCrumbMainButtons()[0], ellipsis[0]);
-  assertNotEqual(elider, ellipsis[0]);
+  assertNotEquals(elider, ellipsis[0]);
   assertEquals(1, ellipsis.length);
 }

ui/file_manager/file_manager/foreground/js/ui/gear_menu.js

@@ -2,7 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-class GearMenu {
+// #import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+// #import {str, util, strf} from '../../../common/js/util.m.js';
+// #import {assertInstanceof} from 'chrome://resources/js/assert.m.js';
+// #import {queryRequiredElement} from 'chrome://resources/js/util.m.js';
+
+/* #export */ class GearMenu {
   /**
    * @param {!HTMLElement} element
    */

ui/file_manager/file_manager/foreground/js/ui/import_crostini_image_dialog.js

@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {str, util} from '../../../common/js/util.m.js';
+// #import {ConfirmDialog} from 'chrome://resources/js/cr/ui/dialogs.m.js';
+
 /**
  * ImportCrostiniImageDialog is used as the handler for .tini files.
  */
@@ -9,7 +12,8 @@ cr.define('cr.filebrowser', () => {
   /**
    * Creates dialog in DOM.
    */
-  class ImportCrostiniImageDialog extends cr.ui.dialogs.ConfirmDialog {
+  /* #export */ class ImportCrostiniImageDialog extends
+      cr.ui.dialogs.ConfirmDialog {
     /**
      * @param {HTMLElement} parentNode Node to be parent for this dialog.
      */
@@ -35,5 +39,6 @@ cr.define('cr.filebrowser', () => {
     }
   }
 
+  // #cr_define_end
   return {ImportCrostiniImageDialog};
 });

ui/file_manager/file_manager/foreground/js/ui/install_linux_package_dialog.js

@@ -2,6 +2,10 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {str} from '../../../common/js/util.m.js';
+// #import {FileManagerDialogBase} from './file_manager_dialog_base.m.js';
+// #import {assert} from 'chrome://resources/js/assert.m.js';
+
 /**
  * InstallLinuxPackageDialog is used as the handler for .deb files.
  */
@@ -9,7 +13,7 @@ cr.define('cr.filebrowser', () => {
   /**
    * Creates dialog in DOM tree.
    */
-  class InstallLinuxPackageDialog extends FileManagerDialogBase {
+  /* #export */ class InstallLinuxPackageDialog extends FileManagerDialogBase {
     /**
      * @param {HTMLElement} parentNode Node to be parent for this dialog.
      */
@@ -196,5 +200,6 @@ cr.define('cr.filebrowser', () => {
     }
   }
 
+  // #cr_define_end
   return {InstallLinuxPackageDialog: InstallLinuxPackageDialog};
 });

ui/file_manager/file_manager/foreground/js/ui/install_linux_package_dialog_unittest.js → ui/file_manager/file_manager/foreground/js/ui/install_linux_package_dialog_unittest.m.js

@@ -2,7 +2,13 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-function testInstallButtonHiddenUntilInfoReady() {
+import {assertInstanceof} from 'chrome://resources/js/assert.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import {assertFalse, assertTrue} from 'chrome://test/chai_assert.js';
+
+import {InstallLinuxPackageDialog} from './install_linux_package_dialog.m.js';
+
+export function testInstallButtonHiddenUntilInfoReady() {
   // Polyfill chrome.app.window.current().
   /** @suppress {checkTypes,const} */
   chrome.app = {window: {current: () => null}};
@@ -20,7 +26,7 @@ function testInstallButtonHiddenUntilInfoReady() {
       assertInstanceof(document.createElement('div'), HTMLElement);
 
   const info = {name: 'n', version: 'v', info: 'i', summary: 's'};
-  const dialog = new cr.filebrowser.InstallLinuxPackageDialog(container);
+  const dialog = new InstallLinuxPackageDialog(container);
 
   // Show dialog and very that install button is disabled.
   dialog.showInstallLinuxPackageDialog(/** @type {!Entry} */ ({}));