Files app: Add JS module for foreground page

JS modules for //ui/file_manager/file_manager/foreground/js/:
- file_type_filters_controller.js
- file_type_filters_controller_unittest.m.js
- navigation_uma.js
- metrics_start.js
- mock_actions_model.js
- spinner_controller.js
- spinner_controller_unittest.m.js

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

chrome/browser/chromeos/file_manager/file_manager_jstest.cc

@@ -145,7 +145,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FileTransferController) {
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FileTypeFiltersController) {
-  RunTestURL("foreground/js/file_type_filters_controller_unittest_gen.html");
+  RunTestURL("foreground/js/file_type_filters_controller_unittest.m_gen.html");
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, FileType) {
@@ -226,7 +226,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, ProvidersModel) {
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, SpinnerController) {
-  RunTestURL("foreground/js/spinner_controller_unittest_gen.html");
+  RunTestURL("foreground/js/spinner_controller_unittest.m_gen.html");
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, TaskController) {

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

@@ -39,14 +39,19 @@ js_type_check("closure_compile_jsmodules") {
     ":empty_folder_controller.m",
     ":fake_android_app_list_model.m",
     ":file_list_model.m",
+    ":file_type_filters_controller.m",
     ":file_watcher.m",
     ":folder_shortcuts_data_model.m",
     ":launch_param.m",
+    ":metrics_start.m",
+    ":mock_actions_model.m",
     ":mock_directory_model.m",
     ":mock_folder_shortcut_data_model.m",
     ":mock_navigation_list_model.m",
     ":navigation_list_model.m",
+    ":navigation_uma.m",
     ":providers_model.m",
+    ":spinner_controller.m",
     ":thumbnail_loader.m",
     ":web_store_utils.m",
   ]
@@ -188,6 +193,16 @@ js_library("mock_actions_model") {
   ]
 }
 
+js_library("mock_actions_model.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/mock_actions_model.m.js" ]
+  deps = [
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js/cr:event_target.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("fake_file_selection_handler") {
   testonly = true
   deps = [
@@ -466,6 +481,17 @@ js_library("navigation_uma") {
   ]
 }
 
+js_library("navigation_uma.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/navigation_uma.m.js" ]
+  deps = [
+    "//ui/file_manager/base/js:volume_manager_types.m",
+    "//ui/file_manager/externs:volume_manager.m",
+    "//ui/file_manager/file_manager/common/js:metrics.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("directory_tree_naming_controller") {
   deps = [
     ":directory_model",
@@ -711,10 +737,28 @@ js_library("file_type_filters_controller") {
   ]
 }
 
-js_unittest("file_type_filters_controller_unittest") {
+js_library("file_type_filters_controller.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/file_type_filters_controller.m.js" ]
   deps = [
-    ":file_type_filters_controller",
-    "//ui/webui/resources/js:webui_resource_test",
+    ":directory_model.m",
+    "//ui/file_manager/externs:files_app_entry_interfaces.m",
+    "//ui/file_manager/file_manager/common/js:util.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
+js_unittest("file_type_filters_controller_unittest.m") {
+  deps = [
+    ":directory_model.m",
+    ":file_type_filters_controller.m",
+    "//chrome/test/data/webui:chai_assert",
+    "//ui/file_manager/base/js:mock_chrome",
+    "//ui/file_manager/base/js:volume_manager_types.m",
+    "//ui/file_manager/externs:files_app_entry_interfaces.m",
+    "//ui/file_manager/file_manager/common/js:files_app_entry_types.m",
+    "//ui/webui/resources/js:load_time_data.m",
+    "//ui/webui/resources/js/cr:event_target.m",
   ]
 }
 
@@ -905,6 +949,13 @@ js_library("metrics_start") {
   deps = [ "//ui/file_manager/file_manager/common/js:metrics" ]
 }
 
+js_library("metrics_start.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/metrics_start.m.js" ]
+  deps = [ "//ui/file_manager/file_manager/common/js:metrics.m" ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("naming_controller") {
   deps = [
     ":directory_contents",
@@ -1066,12 +1117,18 @@ js_library("sort_menu_controller") {
 js_library("spinner_controller") {
 }
 
-js_unittest("spinner_controller_unittest") {
+js_library("spinner_controller.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/spinner_controller.m.js" ]
+
+  extra_deps = [ ":modulize" ]
+}
+
+js_unittest("spinner_controller_unittest.m") {
   deps = [
-    ":spinner_controller",
-    "//ui/file_manager/base/js:test_error_reporting",
-    "//ui/webui/resources/js:assert",
-    "//ui/webui/resources/js:util",
+    ":spinner_controller.m",
+    "//chrome/test/data/webui:chai_assert",
+    "//ui/file_manager/base/js:test_error_reporting.m",
+    "//ui/webui/resources/js:assert.m",
   ]
 }
 
@@ -1172,8 +1229,10 @@ js_test_gen_html("js_test_gen_html_modules") {
   deps = [
     ":directory_contents_unittest.m",
     ":file_list_model_unittest.m",
+    ":file_type_filters_controller_unittest.m",
     ":navigation_list_model_unittest.m",
     ":providers_model_unittest.m",
+    ":spinner_controller_unittest.m",
     ":thumbnail_loader_unittest.m",
   ]
   js_module = true
@@ -1193,10 +1252,8 @@ js_test_gen_html("js_test_gen_html") {
     ":file_manager_commands_unittest",
     ":file_tasks_unittest",
     ":file_transfer_controller_unittest",
-    ":file_type_filters_controller_unittest",
     ":import_controller_unittest",
     ":list_thumbnail_loader_unittest",
-    ":spinner_controller_unittest",
     ":task_controller_unittest",
   ]
   mocks = [ "$externs_path/file_manager_private.js" ]
@@ -1225,6 +1282,11 @@ js_modulizer("modulize") {
     "providers_model.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 = cr_namespace_rewrites

ui/file_manager/file_manager/foreground/js/file_type_filters_controller.js

@@ -2,11 +2,15 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {FakeEntry} from '../../../externs/files_app_entry_interfaces.m.js';
+// #import {DirectoryModel} from './directory_model.m.js';
+// #import {str, util} from '../../common/js/util.m.js';
+
 /**
  * This class controls wires file-type filter UI and the filter settings in
  * Recents view.
  */
-class FileTypeFiltersController {
+/* #export */ class FileTypeFiltersController {
   /**
    * @param {!HTMLElement} fileTypeFilterContainer
    * @param {!DirectoryModel} directoryModel

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

@@ -2,6 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import {NativeEventTarget as EventTarget} from 'chrome://resources/js/cr/event_target.m.js';
+import {loadTimeData} from 'chrome://resources/js/load_time_data.m.js';
+import {assertEquals, assertFalse, assertTrue} from 'chrome://test/chai_assert.js';
+
+import {installMockChrome} from '../../../base/js/mock_chrome.m.js';
+import {VolumeManagerCommon} from '../../../base/js/volume_manager_types.m.js';
+import {FakeEntry} from '../../../externs/files_app_entry_interfaces.m.js';
+import {EntryList, FakeEntryImpl} from '../../common/js/files_app_entry_types.m.js';
+
+import {DirectoryModel} from './directory_model.m.js';
+import {FileTypeFiltersController} from './file_type_filters_controller.m.js';
+
 /**
  * @type {!HTMLElement}
  */
@@ -27,15 +39,36 @@ let myFilesEntry;
  */
 let fileTypeFiltersController;
 
-function setUp() {
+export function setUp() {
   // Mock loadTimeData strings.
-  window.loadTimeData.data = {
+  loadTimeData.data = {
     MEDIA_VIEW_AUDIO_ROOT_LABEL: 'Audio',
     MEDIA_VIEW_IMAGES_ROOT_LABEL: 'Images',
     MEDIA_VIEW_VIDEOS_ROOT_LABEL: 'Videos',
   };
 
-  class MockDirectoryModel extends cr.EventTarget {
+  /**
+   * Mock chrome APIs.
+   * @type {!Object}
+   */
+  const mockChrome = {
+    fileManagerPrivate: {
+      SourceRestriction: {
+        ANY_SOURCE: 'any_source',
+        NATIVE_SOURCE: 'native_source',
+      },
+      RecentFileType: {
+        ALL: 'all',
+        AUDIO: 'audio',
+        IMAGE: 'image',
+        VIDEO: 'video',
+      },
+    },
+  };
+
+  installMockChrome(mockChrome);
+
+  class MockDirectoryModel extends EventTarget {
     constructor() {
       super();
 
@@ -83,7 +116,7 @@ function setUp() {
  * Tests that creating FileTypeFiltersController generates three buttons in the
  * given container element.
  */
-function testCreatedButtonLabels() {
+export function testCreatedButtonLabels() {
   const buttons = container.children;
   assertEquals(buttons.length, 3);
 
@@ -95,7 +128,7 @@ function testCreatedButtonLabels() {
 /**
  * Tests that initial states of all buttons inside container are inactive.
  */
-function testButtonInitialActiveState() {
+export function testButtonInitialActiveState() {
   const buttons = container.children;
   assertEquals(buttons.length, 3);
 
@@ -107,7 +140,7 @@ function testButtonInitialActiveState() {
 /**
  * Tests that click events toggle button state (inactive -> active -> inactive).
  */
-function testButtonToggleState() {
+export function testButtonToggleState() {
   const buttons = container.children;
   assertEquals(buttons.length, 3);
 
@@ -123,7 +156,7 @@ function testButtonToggleState() {
  * If button_1 is clicked then button_0 is active, button_0 becomes inactive and
  * button_1 becomes active.
  */
-function testOnlyOneButtonCanActive() {
+export function testOnlyOneButtonCanActive() {
   const buttons = container.children;
   assertEquals(buttons.length, 3);
 
@@ -148,7 +181,7 @@ function testOnlyOneButtonCanActive() {
  * Tests that container element is visible only when the current directory is
  * Recents view.
  */
-function testContainerIsShownOnlyInRecents() {
+export function testContainerIsShownOnlyInRecents() {
   container.hidden = true;
   directoryModel.changeDirectoryEntry(recentEntry);
   assertFalse(container.hidden);
@@ -160,7 +193,7 @@ function testContainerIsShownOnlyInRecents() {
  * Tests that button's active state is reset to inactive when the user leaves
  * Recents view.
  */
-function testActiveButtonIsResetOnLeavingRecents() {
+export function testActiveButtonIsResetOnLeavingRecents() {
   const buttons = container.children;
   assertEquals(buttons.length, 3);
 
@@ -182,7 +215,7 @@ function testActiveButtonIsResetOnLeavingRecents() {
  * recentFileType property, and DirectoryModel.rescan() is called after the
  * Recent entry's property is modified.
  */
-function testAppliedFilters() {
+export function testAppliedFilters() {
   const buttons = container.children;
   assertEquals(buttons.length, 3);
 

ui/file_manager/file_manager/foreground/js/metrics_start.js

@@ -8,5 +8,7 @@
  * define the metrics namespace).
  */
 
+// #import {metrics} from '../../../common/js/metrics.m.js';
+
 metrics.startInterval('Load.Total');
 metrics.startInterval('Load.Script');

ui/file_manager/file_manager/foreground/js/mock_actions_model.js

@@ -2,12 +2,19 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-class MockActionModel {
+// 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
+
+/* #export */ class MockActionModel extends cr.EventTarget {
   /**
    * @param {string} title
    * @param {Array<!Entry>} entries
    */
   constructor(title, entries) {
+    super();
+
     this.title = title;
     this.entries = entries;
     this.actionsModel = null;
@@ -20,11 +27,11 @@ class MockActionModel {
   onCanExecute() {}
 
   onExecute() {
-    cr.dispatchSimpleEvent('invalidated', this.actionsModel);
+    cr.dispatchSimpleEvent(this, 'invalidated', true);
   }
 }
 
-class MockActionsModel extends cr.EventTarget {
+/* #export */ class MockActionsModel extends cr.EventTarget {
   constructor(actions) {
     super();
 

ui/file_manager/file_manager/foreground/js/navigation_uma.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.
 
+// clang-format off
+// #import {VolumeManagerCommon} from '../../../base/js/volume_manager_types.m.js';
+// #import {VolumeManager} from '../../../externs/volume_manager.m.js';
+// #import {metrics} from '../../../common/js/metrics.m.js';
+// clang-format on
+
 /**
  * UMA exporter for navigation in the Files app.
  *
  */
-class NavigationUma {
+/* #export */ class NavigationUma {
   /**
    * @param {!VolumeManager} volumeManager
    *

ui/file_manager/file_manager/foreground/js/spinner_controller.js

@@ -7,7 +7,7 @@
  * is called 3 times, the hide callback has to be called 3 times to make the
  * spinner invisible.
  */
-class SpinnerController {
+/* #export */ class SpinnerController {
   /** @param {!Element} element */
   constructor(element) {
     /**

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

@@ -2,6 +2,13 @@
 // 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 {assertFalse, assertTrue} from 'chrome://test/chai_assert.js';
+
+import {reportPromise} from '../../../base/js/test_error_reporting.m.js';
+
+import {SpinnerController} from './spinner_controller.m.js';
+
 /**
  * @type {Element}
  */
@@ -22,7 +29,7 @@ function waitForMutation(target) {
   });
 }
 
-function setUp() {
+export function setUp() {
   spinner = document.createElement('div');
   spinner.id = 'spinner';
   spinner.textContent = 'LOADING...';
@@ -33,7 +40,7 @@ function setUp() {
   controller.setBlinkDurationForTesting(100);
 }
 
-function testBlink(callback) {
+export function testBlink(callback) {
   assertTrue(spinner.hidden);
   controller.blink();
 
@@ -49,7 +56,7 @@ function testBlink(callback) {
       callback);
 }
 
-function testShow(callback) {
+export function testShow(callback) {
   assertTrue(spinner.hidden);
   const hideCallback = controller.show();
 
@@ -73,7 +80,7 @@ function testShow(callback) {
       callback);
 }
 
-function testShowDuringBlink(callback) {
+export function testShowDuringBlink(callback) {
   assertTrue(spinner.hidden);
   controller.blink();
   const hideCallback = controller.show();
@@ -103,7 +110,7 @@ function testShowDuringBlink(callback) {
       callback);
 }
 
-function testStackedShows(callback) {
+export function testStackedShows(callback) {
   assertTrue(spinner.hidden);
 
   const hideCallbacks = [];