Files app: Add JS modules for foreground page

Add JS modules for //ui/file_manager/file_manager/foreground/js/ :
- task_history.js
- quick_view_model.js
- metadata_update_controller.js
- last_modified_controller.js

Add JS modules for //ui/file_manager/file_manager/foreground/js/ui/ :
- actions_submenu.js
- actions_submenu_unittest.m.js

Remove tearDown() from actions_submmenu_unittest because now the setUp()
always replace the whole DOM content, so the DOM reset in tearDown()
isn't necessary anymore.

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

chrome/browser/chromeos/file_manager/file_manager_jstest.cc

@@ -25,7 +25,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, ActionsModelTest) {
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, ActionsSubmenuTest) {
-  RunTestURL("foreground/js/ui/actions_submenu_unittest_gen.html");
+  RunTestURL("foreground/js/ui/actions_submenu_unittest.m_gen.html");
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, Breadcrumb) {

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

@@ -47,8 +47,10 @@ js_type_check("closure_compile_jsmodules") {
     ":file_watcher.m",
     ":folder_shortcuts_data_model.m",
     ":holding_space_util.m",
+    ":last_modified_controller.m",
     ":launch_param.m",
     ":list_thumbnail_loader.m",
+    ":metadata_update_controller.m",
     ":mock_directory_model.m",
     ":mock_folder_shortcut_data_model.m",
     ":mock_navigation_list_model.m",
@@ -57,7 +59,9 @@ js_type_check("closure_compile_jsmodules") {
     ":navigation_uma.m",
     ":path_component.m",
     ":providers_model.m",
+    ":quick_view_model.m",
     ":spinner_controller.m",
+    ":task_history.m",
     ":thumbnail_loader.m",
     ":web_store_utils.m",
   ]
@@ -1000,6 +1004,17 @@ js_library("last_modified_controller") {
   ]
 }
 
+js_library("last_modified_controller.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/last_modified_controller.m.js" ]
+  deps = [
+    ":directory_model.m",
+    "ui:file_table.m",
+    "//ui/file_manager/file_manager/common/js:util.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("launch_param") {
   deps = [
     ":dialog_type",
@@ -1104,6 +1119,19 @@ js_library("metadata_update_controller") {
   ]
 }
 
+js_library("metadata_update_controller.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/metadata_update_controller.m.js" ]
+  deps = [
+    ":directory_model.m",
+    "metadata:metadata_model.m",
+    "ui:file_metadata_formatter.m",
+    "ui:list_container.m",
+    "//ui/file_manager/file_manager/common/js:util.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("metrics_start") {
   deps = [ "//ui/file_manager/file_manager/common/js:metrics" ]
 }
@@ -1242,6 +1270,16 @@ js_library("quick_view_model") {
   ]
 }
 
+js_library("quick_view_model.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/quick_view_model.m.js" ]
+  deps = [
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js/cr:event_target.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("quick_view_uma") {
   deps = [
     ":dialog_type",
@@ -1332,6 +1370,16 @@ js_library("task_history") {
   deps = [ "//ui/webui/resources/js/cr:event_target" ]
 }
 
+js_library("task_history.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/task_history.m.js" ]
+  deps = [
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js/cr:event_target.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 # TODO(tapted): Move this into //ui/file_manager/base.
 js_library("thumbnail_loader") {
   visibility += [ "//ui/file_manager/gallery/*" ]
@@ -1447,25 +1495,29 @@ js_modulizer("modulize") {
     "file_list_model.js",
     "file_selection.js",
     "file_transfer_controller.js",
+    "file_type_filters_controller.js",
     "file_watcher.js",
     "folder_shortcuts_data_model.js",
     "holding_space_util.js",
+    "last_modified_controller.js",
     "launch_param.js",
     "list_thumbnail_loader.js",
+    "metadata_update_controller.js",
+    "metrics_start.js",
+    "mock_actions_model.js",
     "mock_directory_model.js",
     "mock_folder_shortcut_data_model.js",
     "mock_navigation_list_model.js",
     "mock_thumbnail_loader.js",
     "navigation_list_model.js",
+    "navigation_uma.js",
     "path_component.js",
     "providers_model.js",
+    "quick_view_model.js",
+    "spinner_controller.js",
+    "task_history.js",
     "thumbnail_loader.js",
     "web_store_utils.js",
-    "file_type_filters_controller.js",
-    "navigation_uma.js",
-    "metrics_start.js",
-    "mock_actions_model.js",
-    "spinner_controller.js",
   ]
 
   namespace_rewrites =

ui/file_manager/file_manager/foreground/js/last_modified_controller.js

@@ -2,10 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {DirectoryModel} from './directory_model.m.js';
+// #import {FileTable} from './ui/file_table.m.js';
+// #import {util} from '../../common/js/util.m.js';
+
 /**
  * Controls last modified column in the file table.
  */
-class LastModifiedController {
+/* #export */ class LastModifiedController {
   /**
    * @param {!FileTable} fileTable File table UI.
    * @param {!DirectoryModel} directoryModel Directory model.

ui/file_manager/file_manager/foreground/js/metadata_update_controller.js

@@ -2,10 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {FileMetadataFormatter} from './ui/file_metadata_formatter.m.js';
+// #import {MetadataModel} from './metadata/metadata_model.m.js';
+// #import {DirectoryModel} from './directory_model.m.js';
+// #import {ListContainer} from './ui/list_container.m.js';
+// #import {util} from '../../common/js/util.m.js';
+
 /**
  * Controller for list contents update.
  */
-class MetadataUpdateController {
+/* #export */ class MetadataUpdateController {
   /**
    * @param {!ListContainer} listContainer
    * @param {!DirectoryModel} directoryModel

ui/file_manager/file_manager/foreground/js/quick_view_model.js

@@ -2,10 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {NativeEventTarget as EventTarget} from 'chrome://resources/js/cr/event_target.m.js';
+// #import {dispatchSimpleEvent} from 'chrome://resources/js/cr.m.js';
+// clang-format on
+
 /**
  * Quick view model that doesn't fit into properties of quick view element.
  */
-class QuickViewModel extends cr.EventTarget {
+/* #export */ class QuickViewModel extends cr.EventTarget {
   constructor() {
     super();
 

ui/file_manager/file_manager/foreground/js/task_history.js

@@ -2,11 +2,16 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {NativeEventTarget as EventTarget} from 'chrome://resources/js/cr/event_target.m.js';
+// #import {dispatchSimpleEvent} from 'chrome://resources/js/cr.m.js';
+// clang-format on
+
 /**
  * TaskHistory object keeps track of the histry of task executions.
  * This is responsible for keeping the history in persistent storage, too.
  */
-class TaskHistory extends cr.EventTarget {
+/* #export */ class TaskHistory extends cr.EventTarget {
   constructor() {
     super();
 

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

@@ -26,6 +26,7 @@ js_type_check("closure_compile_jsmodules") {
   deps = [
     ":a11y_announce.m",
     ":action_model_ui.m",
+    ":actions_submenu.m",
     ":combobutton.m",
     ":commandbutton.m",
     ":default_task_dialog.m",
@@ -159,11 +160,28 @@ js_library("actions_submenu") {
   ]
 }
 
-js_unittest("actions_submenu_unittest") {
+js_library("actions_submenu.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/actions_submenu.m.js" ]
   deps = [
-    ":actions_submenu",
-    "//ui/file_manager/file_manager/foreground/js:mock_actions_model",
-    "//ui/webui/resources/js:webui_resource_test",
+    "//ui/file_manager/file_manager/common/js:util.m",
+    "//ui/file_manager/file_manager/foreground/js:actions_model.m",
+    "//ui/webui/resources/js:util.m",
+    "//ui/webui/resources/js/cr/ui:command.m",
+    "//ui/webui/resources/js/cr/ui:menu.m",
+    "//ui/webui/resources/js/cr/ui:menu_item.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
+js_unittest("actions_submenu_unittest.m") {
+  deps = [
+    ":actions_submenu.m",
+    "//chrome/test/data/webui:chai_assert",
+    "//ui/file_manager/file_manager/common/js:util.m",
+    "//ui/file_manager/file_manager/foreground/js:mock_actions_model.m",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js/cr/ui:menu.m",
   ]
 }
 
@@ -927,6 +945,7 @@ js_library("suggest_apps_dialog.m") {
 
 js_test_gen_html("js_test_gen_html_modules") {
   deps = [
+    ":actions_submenu_unittest.m",
     ":directory_tree_unittest.m",
     ":file_list_selection_model_unittest.m",
     ":file_manager_dialog_base_unittest.m",
@@ -949,7 +968,6 @@ js_test_gen_html("js_test_gen_html_modules") {
 
 js_test_gen_html("js_test_gen_html") {
   deps = [
-    ":actions_submenu_unittest",
     ":breadcrumb_unittest",
     ":install_linux_package_dialog_unittest",
   ]
@@ -980,6 +998,7 @@ js_modulizer("modulize") {
     "multi_menu_button.js",
     "progress_center_panel.js",
     "suggest_apps_dialog.js",
+    "actions_submenu.js",
   ]
 
   namespace_rewrites = cr_namespace_rewrites

ui/file_manager/file_manager/foreground/js/ui/actions_submenu.js

@@ -2,7 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-class ActionsSubmenu {
+// #import {MenuItem} from 'chrome://resources/js/cr/ui/menu_item.m.js';
+// #import {Menu} from 'chrome://resources/js/cr/ui/menu.m.js';
+// #import {Command} from 'chrome://resources/js/cr/ui/command.m.js';
+// #import {util} from '../../../common/js/util.m.js';
+// #import {ActionsModel} from '../actions_model.m.js';
+// #import {queryRequiredElement} from 'chrome://resources/js/util.m.js';
+
+/* #export */ class ActionsSubmenu {
   /** @param {!cr.ui.Menu} menu */
   constructor(menu) {
     /**

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

 // Copyright 2015 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.
-'use strict';
+
+import {assertInstanceof} from 'chrome://resources/js/assert.m.js';
+import {Menu} from 'chrome://resources/js/cr/ui/menu.m.js';
+import {assertEquals, assertFalse, assertTrue} from 'chrome://test/chai_assert.js';
+
+import {util} from '../../../common/js/util.m.js';
+import {MockActionModel, MockActionsModel} from '../mock_actions_model.m.js';
+
+import {ActionsSubmenu} from './actions_submenu.m.js';
 
 let menu = null;
 let submenu = null;
 let separator = null;
 
-document.write(`
-    <command id="share" label="Share"></command>
-    <command id="manage-in-drive" label="Manage in Drive"></command>
-    <command id="toggle-pinned" label="Toggle pinned"></command>
-    <command id="unpin-folder" label="Remove folder shortcut">
-    </command>
-
-    <cr-menu id="menu">
-    <hr id="actions-separator" hidden>
-    </cr-menu>`);
-
 function queryRequiredElement(selectors, opt_context) {
   const element = (opt_context || document).querySelector(selectors);
   return assertInstanceof(
       element, HTMLElement, 'Missing required element: ' + selectors);
 }
 
-function setUp() {
-  menu = util.queryDecoratedElement('#menu', cr.ui.Menu);
+export function setUp() {
+  document.body.innerHTML = `
+      <command id="share" label="Share"></command>
+      <command id="manage-in-drive" label="Manage in Drive"></command>
+      <command id="toggle-pinned" label="Toggle pinned"></command>
+      <command id="unpin-folder" label="Remove folder shortcut">
+      </command>
+
+      <cr-menu id="menu">
+      <hr id="actions-separator" hidden>
+      </cr-menu>`;
+  menu = util.queryDecoratedElement('#menu', Menu);
   separator = queryRequiredElement('#actions-separator', menu);
   submenu = new ActionsSubmenu(menu);
 }
 
-function tearDown() {
-  const items = document.querySelectorAll('#menu cr-menu-item');
-  for (let i = 0; i < items.length; i++) {
-    items[i].parentNode.removeChild(items[i]);
-  }
-  separator.hidden = true;
-}
-
-function testSeparator() {
+export function testSeparator() {
   assertTrue(separator.hidden);
 
   submenu.setActionsModel(
@@ -49,7 +48,7 @@ function testSeparator() {
   assertTrue(separator.hidden);
 }
 
-function testNullModel() {
+export function testNullModel() {
   submenu.setActionsModel(
       new MockActionsModel({id: new MockActionModel('title', null)}));
   let item = menu.querySelector('cr-menu-item');
@@ -60,7 +59,7 @@ function testNullModel() {
   assertFalse(!!item);
 }
 
-function testCustomActionRendering() {
+export function testCustomActionRendering() {
   submenu.setActionsModel(
       new MockActionsModel({id: new MockActionModel('title', null)}));
   const item = menu.querySelector('cr-menu-item');
@@ -69,7 +68,7 @@ function testCustomActionRendering() {
   assertEquals(null, item.command);
 }
 
-function testCommandActionRendering() {
+export function testCommandActionRendering() {
   submenu.setActionsModel(new MockActionsModel(
       {SHARE: new MockActionModel('share with me!', null)}));
   const item = menu.querySelector('cr-menu-item');