Files app: Generate JS modules for foreground page

Generate JS modules for file in
//ui/file_manager/file_manager/foreground/js/ui, files:
- multi_menu.js
- mult_menu_button.js
- munit_menu_unittest.m.js

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

chrome/browser/chromeos/file_manager/file_manager_jstest.cc

@@ -209,7 +209,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, MountMetricsTest) {
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, MultiMenu) {
-  RunTestURL("foreground/js/ui/multi_menu_unittest_gen.html");
+  RunTestURL("foreground/js/ui/multi_menu_unittest.m_gen.html");
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, MultiMetadataProvider) {

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

@@ -28,6 +28,8 @@ js_type_check("closure_compile_jsmodules") {
     ":empty_folder.m",
     ":file_list_selection_model.m",
     ":files_alert_dialog.m",
+    ":multi_menu.m",
+    ":multi_menu_button.m",
     "table:table.m",
     "table:table_column.m",
     "table:table_column_model.m",
@@ -534,6 +536,20 @@ js_library("multi_menu") {
   externs_list = [ "$externs_path/pending.js" ]
 }
 
+js_library("multi_menu.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/multi_menu.m.js" ]
+
+  deps = [
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:event_tracker.m",
+    "//ui/webui/resources/js/cr:ui.m",
+    "//ui/webui/resources/js/cr/ui:menu.m",
+    "//ui/webui/resources/js/cr/ui:menu_item.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("multi_menu_button") {
   deps = [
     # TODO(files-ng): remove util dep when the files-ng flag is removed.
@@ -547,13 +563,32 @@ js_library("multi_menu_button") {
   externs_list = [ "$externs_path/pending.js" ]
 }
 
-js_unittest("multi_menu_unittest") {
+js_library("multi_menu_button.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/multi_menu_button.m.js" ]
   deps = [
-    ":multi_menu",
-    ":multi_menu_button",
-    "//ui/file_manager/base/js:test_error_reporting",
-    "//ui/file_manager/file_manager/common/js:util",
-    "//ui/webui/resources/js:webui_resource_test",
+    ":multi_menu.m",
+    "//ui/file_manager/file_manager/common/js:util.m",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:event_tracker.m",
+    "//ui/webui/resources/js/cr:ui.m",
+    "//ui/webui/resources/js/cr/ui:menu.m",
+    "//ui/webui/resources/js/cr/ui:menu_button.m",
+    "//ui/webui/resources/js/cr/ui:menu_item.m",
+    "//ui/webui/resources/js/cr/ui:position_util.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
+js_unittest("multi_menu_unittest.m") {
+  deps = [
+    ":multi_menu_button.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/cr:ui.m",
+    "//ui/webui/resources/js/cr/ui:command.m",
+    "//ui/webui/resources/js/cr/ui:menu.m",
   ]
 }
 
@@ -619,6 +654,7 @@ js_test_gen_html("js_test_gen_html_modules") {
   deps = [
     ":directory_tree_unittest.m",
     ":file_list_selection_model_unittest.m",
+    ":multi_menu_unittest.m",
   ]
   js_module = true
 
@@ -641,7 +677,6 @@ js_test_gen_html("js_test_gen_html") {
     ":file_table_unittest",
     ":file_tap_handler_unittest",
     ":install_linux_package_dialog_unittest",
-    ":multi_menu_unittest",
   ]
 }
 
@@ -651,7 +686,10 @@ js_modulizer("modulize") {
     "empty_folder.js",
     "file_list_selection_model.js",
     "files_alert_dialog.js",
+    "multi_menu.js",
+    "multi_menu_button.js",
   ]
 
   namespace_rewrites = cr_namespace_rewrites
+  namespace_rewrites += [ "cr.ui.MultiMenu|MultiMenu" ]
 }

ui/file_manager/file_manager/foreground/js/ui/multi_menu.js

@@ -2,6 +2,12 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {MenuItem} from 'chrome://resources/js/cr/ui/menu_item.m.js';
+// #import {EventTracker} from 'chrome://resources/js/event_tracker.m.js';
+// #import {assertInstanceof} from 'chrome://resources/js/assert.m.js';
+// #import {Menu} from 'chrome://resources/js/cr/ui/menu.m.js';
+// #import {decorate} from 'chrome://resources/js/cr/ui.m.js';
+
 cr.define('cr.ui', () => {
   /**
    * Creates a menu that supports sub-menus.
@@ -14,7 +20,7 @@ cr.define('cr.ui', () => {
    * @extends {cr.ui.Menu}
    * @implements {EventListener}
    */
-  class MultiMenu {
+  /* #export */ class MultiMenu {
     constructor() {
       /**
        * Whether a sub-menu is positioned on the left of its parent.
@@ -207,9 +213,7 @@ cr.define('cr.ui', () => {
     positionSubMenu_(item, subMenu) {
       const style = subMenu.style;
 
-      if (util.isFilesNg()) {
-        style.marginTop = '0';  // crbug.com/1066727
-      }
+      style.marginTop = '0';  // crbug.com/1066727
 
       // The sub-menu needs to sit aligned to the top and side of
       // the menu-item passed in. It also needs to fit inside the viewport
@@ -299,7 +303,7 @@ cr.define('cr.ui', () => {
      * @private
      */
     findMenuItem(node) {
-      const MenuItem = cr.ui.MenuItem;
+      /* #ignore */ const MenuItem = cr.ui.MenuItem;
       while (node && node.parentNode !== this && !(node instanceof MenuItem)) {
         node = node.parentNode;
       }
@@ -453,5 +457,6 @@ cr.define('cr.ui', () => {
   }
 
   // Export
+  // #cr_define_end
   return {MultiMenu};
 });

ui/file_manager/file_manager/foreground/js/ui/multi_menu_button.js

@@ -2,16 +2,27 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {assert} from 'chrome://resources/js/assert.m.js';
+// #import {Menu} from 'chrome://resources/js/cr/ui/menu.m.js';
+// #import {AnchorType, positionPopupAroundElement} from 'chrome://resources/js/cr/ui/position_util.m.js';
+// #import {util} from '../../../common/js/util.m.js';
+// #import {HideType} from 'chrome://resources/js/cr/ui/menu_button.m.js';
+// #import {MenuItem} from 'chrome://resources/js/cr/ui/menu_item.m.js';
+// #import {MultiMenu} from './multi_menu.m.js';
+// #import {decorate} from 'chrome://resources/js/cr/ui.m.js';
+// #import {EventTracker} from 'chrome://resources/js/event_tracker.m.js';
+// clang-format on
+
 cr.define('cr.ui', () => {
-  /** @const */
-  const HideType = cr.ui.HideType;
+  /* #ignore */ /** @const */ const HideType = cr.ui.HideType;
 
   /**
    * A button that displays a MultiMenu (menu with sub-menus).
    * @extends {HTMLButtonElement}
    * @implements {EventListener}
    */
-  class MultiMenuButton {
+  /* #export */ class MultiMenuButton {
     constructor() {
       /**
        * Property that hosts sub-menus for filling with overflow items.
@@ -445,5 +456,6 @@ cr.define('cr.ui', () => {
   MultiMenuButton.prototype.__proto__ = HTMLButtonElement.prototype;
 
   // Export
+  // #cr_define_end
   return {MultiMenuButton};
 });

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

@@ -2,25 +2,45 @@
 // 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 {decorate} from 'chrome://resources/js/cr/ui.m.js';
+import {Command} from 'chrome://resources/js/cr/ui/command.m.js';
+import {Menu} from 'chrome://resources/js/cr/ui/menu.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import {assertEquals, assertFalse, assertTrue} from 'chrome://test/chai_assert.js';
 
-/** @type {cr.ui.MultiMenuButton} */
+import {util} from '../../../common/js/util.m.js';
+
+import {MultiMenuButton} from './multi_menu_button.m.js';
+
+/** @type {MultiMenuButton} */
 let menubutton;
 
-/** @type {cr.ui.Menu} */
+/** @type {Menu} */
 let topMenu;
 
-/** @type {cr.ui.Menu} */
+/** @type {Menu} */
 let subMenu;
 
-/** @type {cr.ui.Menu} */
+/** @type {Menu} */
 let secondSubMenu;
 
+/** @type {number} */
+let initialWindowHeight;
+
 // Set up test components.
-function setUp() {
+export function setUp() {
   // Internals of WebUI reference this property when processing
   // keyboard events, so we need to prepare it to stop asserts.
   loadTimeData.data = {'SHORTCUT_ENTER': 'Enter'};
+
+  // Multiple tests rely on the window height, reset between tests to avoid
+  // interference.
+  if (!initialWindowHeight) {
+    initialWindowHeight = window.innerHeight;
+  }
+  window.innerHeight = initialWindowHeight;
+
   // Install cr.ui <command> elements and <cr-menu>s on the page.
   document.body.innerHTML = [
     '<style>',
@@ -63,12 +83,11 @@ function setUp() {
   ].join('');
 
   // Initialize cr.ui.Command with the <command>s.
-  cr.ui.decorate('command', cr.ui.Command);
-  menubutton =
-      util.queryDecoratedElement('#test-menu-button', cr.ui.MultiMenuButton);
-  topMenu = util.queryDecoratedElement('#menu', cr.ui.Menu);
-  subMenu = util.queryDecoratedElement('#sub-menu', cr.ui.Menu);
-  secondSubMenu = util.queryDecoratedElement('#second-sub-menu', cr.ui.Menu);
+  decorate('command', Command);
+  menubutton = util.queryDecoratedElement('#test-menu-button', MultiMenuButton);
+  topMenu = util.queryDecoratedElement('#menu', Menu);
+  subMenu = util.queryDecoratedElement('#sub-menu', Menu);
+  secondSubMenu = util.queryDecoratedElement('#second-sub-menu', Menu);
 }
 
 /**
@@ -137,7 +156,7 @@ function sendKeyDown(targetQuery, key) {
  * Tests that making the top level menu visible doesn't
  * cause the sub-menu to become visible.
  */
-function testShowMenuDoesntShowSubMenu() {
+export function testShowMenuDoesntShowSubMenu() {
   menubutton.showMenu(true);
   // Check the top level menu is not hidden.
   assertFalse(topMenu.hasAttribute('hidden'));
@@ -149,7 +168,7 @@ function testShowMenuDoesntShowSubMenu() {
  * Tests that a 'mouseover' event on top of normal menu-items
  * doesn't cause the sub-menu to become visible.
  */
-function testMouseOverNormalItemsDoesntShowSubMenu() {
+export function testMouseOverNormalItemsDoesntShowSubMenu() {
   menubutton.showMenu(true);
   sendMouseOver('#default-task');
   assertTrue(subMenu.hasAttribute('hidden'));
@@ -161,7 +180,7 @@ function testMouseOverNormalItemsDoesntShowSubMenu() {
  * Tests that 'mouseover' on a menu-item with 'show-submenu' command
  * causes the sub-menu to become visible.
  */
-function testMouseOverHostMenuShowsSubMenu() {
+export function testMouseOverHostMenuShowsSubMenu() {
   menubutton.showMenu(true);
   sendMouseOver('#host-sub-menu');
   assertFalse(subMenu.hasAttribute('hidden'));
@@ -171,7 +190,7 @@ function testMouseOverHostMenuShowsSubMenu() {
  * Tests that 'mouseout' with the mouse over the top level
  * menu causes the sub-menu to hide.
  */
-function testMouseoutFromHostMenuItemToHostMenu() {
+export function testMouseoutFromHostMenuItemToHostMenu() {
   menubutton.showMenu(true);
   sendMouseOver('#host-sub-menu');
   assertFalse(subMenu.hasAttribute('hidden'));
@@ -186,7 +205,7 @@ function testMouseoutFromHostMenuItemToHostMenu() {
  * Tests that 'mouseout' with the mouse over the sub-menu
  * doesn't hide the sub-menu.
  */
-function testMouseoutFromHostMenuToSubMenu() {
+export function testMouseoutFromHostMenuToSubMenu() {
   menubutton.showMenu(true);
   sendMouseOver('#host-sub-menu');
   assertFalse(subMenu.hasAttribute('hidden'));
@@ -200,7 +219,7 @@ function testMouseoutFromHostMenuToSubMenu() {
  * Tests that selecting a menu-item with a 'show-submenu' command
  * doesn't cause the sub-menu to become visible.
  */
-function testSelectHostMenuItem() {
+export function testSelectHostMenuItem() {
   menubutton.showMenu(true);
   topMenu.selectedIndex = 2;
   const hostItem = document.querySelector('#host-sub-menu');
@@ -216,7 +235,7 @@ function testSelectHostMenuItem() {
  * (Note: in an application, this would happen from a command
  * being executed rather than a direct showSubMenu() call.)
  */
-function testSelectHostMenuItemAndCallShowSubMenu() {
+export function testSelectHostMenuItemAndCallShowSubMenu() {
   testSelectHostMenuItem();
   menubutton.menu.showSubMenu();
   assertFalse(subMenu.hasAttribute('hidden'));
@@ -226,7 +245,7 @@ function testSelectHostMenuItemAndCallShowSubMenu() {
  * Tests that a mouse click outside of a menu and sub-menu causes
  * both menus to hide.
  */
-function testClickOutsideVisibleMenuAndSubMenu() {
+export function testClickOutsideVisibleMenuAndSubMenu() {
   testSelectHostMenuItemAndCallShowSubMenu();
   const event = new MouseEvent('mousedown', {
     bubbles: true,
@@ -245,7 +264,7 @@ function testClickOutsideVisibleMenuAndSubMenu() {
  * Tests that shrinking the window height will limit
  * the height of the sub-menu.
  */
-function testShrinkWindowSizesSubMenu() {
+export function testShrinkWindowSizesSubMenu() {
   testSelectHostMenuItemAndCallShowSubMenu();
   const subMenuPosition = subMenu.getBoundingClientRect();
   // Reduce window innerHeight so sub-menu won't fit.
@@ -264,7 +283,7 @@ function testShrinkWindowSizesSubMenu() {
  * Tests that growing the window height will increase
  * the height of the sub-menu.
  */
-function testGrowWindowSizesSubMenu() {
+export function testGrowWindowSizesSubMenu() {
   // Remember the full size of the sub-menu
   testSelectHostMenuItemAndCallShowSubMenu();
   const subMenuPosition = subMenu.getBoundingClientRect();
@@ -303,7 +322,7 @@ function prepareForKeyboardNavigation() {
 /**
  * Tests that arrow navigates from main menu to sub-menu.
  */
-function testNavigateFromMenuToSubMenu() {
+export function testNavigateFromMenuToSubMenu() {
   prepareForKeyboardNavigation();
   // Check that the hosting menu-item is not selected.
   const hostItem = document.querySelector('#host-sub-menu');
@@ -317,7 +336,7 @@ function testNavigateFromMenuToSubMenu() {
  * Tests that arrow left moves back to the top level menu
  * only when the selected sub-menu item is the first one.
  */
-function testNavigateFromSubMenuToParentMenu() {
+export function testNavigateFromSubMenuToParentMenu() {
   testNavigateFromMenuToSubMenu();
   // Use the arrow key to go to the next sub-menu item.
   sendKeyDown('#test-menu-button', 'ArrowDown');
@@ -346,7 +365,7 @@ function testNavigateFromSubMenuToParentMenu() {
  * Tests that arrow up on the top level menu hides the
  * sub menu when the sub-menu is visible.
  */
-function testTopMenuArrowUpDismissesSubMenu() {
+export function testTopMenuArrowUpDismissesSubMenu() {
   prepareForKeyboardNavigation();
   // Check that the hosting menu-item is not selected.
   const hostItem = document.querySelector('#host-sub-menu');
@@ -365,7 +384,7 @@ function testTopMenuArrowUpDismissesSubMenu() {
  * Tests that the top level menu is resized when the parent
  * window is too small to fit in without clipping.
  */
-function testShrinkWindowSizesTopMenu() {
+export function testShrinkWindowSizesTopMenu() {
   menubutton.showMenu(true);
   const menuPosition = topMenu.getBoundingClientRect();
   // Reduce window innerHeight so the menu won't fit.
@@ -380,7 +399,7 @@ function testShrinkWindowSizesTopMenu() {
 /**
  * Tests that mousedown the menu button grabs focus.
  */
-function testFocusMenuButtonWithMouse() {
+export function testFocusMenuButtonWithMouse() {
   // Set focus on a div element.
   //* @type {HTMLElement} */
   const divElement = document.querySelector('#focus-div');
@@ -424,7 +443,7 @@ function testFocusMenuButtonWithMouse() {
 /**
  * Tests that opening a sub menu hides any showing sub menu.
  */
-function testShowSubMenuHidesExisting() {
+export function testShowSubMenuHidesExisting() {
   testMouseOverHostMenuShowsSubMenu();
   sendMouseOver('#host-second-sub-menu');
   // Check the previously shown sub menu is hidden.