Files app: Generate JS module for directory_tree.js in foreground page

In //ui/file_manager/file_manager/foreground/js/:
- dialog_types.js
- directory_tree_naming_controller.js
- mock_navigation_list_model.js

in //ui/file_manager/file_manager/foreground/js/ui/:
- directory_tree.js
- directory_tree_unittest.m.js

Add "jscomp_off=duplicate" to the closure flags for unit tests. This
flag is present in the `default_closure_args` used for non unit tests,
and is required here for the proper compilation of
//ui/webui/resources/js/cr/ui/tree.m.js.
Without this flag, closure complains about rowElementDepthStyleHandler
being redefined after defining a getter and a setter for it.

Rename TreeItem in directory_tree.js to FilesTreeItem, to have the
necessary distinction between this class and the `TreeItem` defined
within the cr.ui namespace.

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

chrome/browser/chromeos/file_manager/file_manager_jstest.cc

@@ -50,7 +50,7 @@ IN_PROC_BROWSER_TEST_F(FileManagerJsTest, DirectoryContentsTest) {
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, DirectoryTreeTest) {
-  RunTestURL("foreground/js/ui/directory_tree_unittest_gen.html");
+  RunTestURL("foreground/js/ui/directory_tree_unittest.m_gen.html");
 }
 
 IN_PROC_BROWSER_TEST_F(FileManagerJsTest, DriveSyncHandlerTest) {

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

@@ -31,8 +31,10 @@ js_type_check("closure_compile_jsmodules") {
     ":android_app_list_model.m",
     ":constants.m",
     ":crossover_search_utils.m",
+    ":dialog_type.m",
     ":directory_contents.m",
     ":directory_model.m",
+    ":directory_tree_naming_controller.m",
     ":drop_effect_and_label.m",
     ":empty_folder_controller.m",
     ":fake_android_app_list_model.m",
@@ -41,6 +43,7 @@ js_type_check("closure_compile_jsmodules") {
     ":folder_shortcuts_data_model.m",
     ":mock_directory_model.m",
     ":mock_folder_shortcut_data_model.m",
+    ":mock_navigation_list_model.m",
     ":navigation_list_model.m",
     ":thumbnail_loader.m",
   ]
@@ -264,6 +267,17 @@ js_library("mock_navigation_list_model") {
   deps = [ ":navigation_list_model" ]
 }
 
+js_library("mock_navigation_list_model.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/mock_navigation_list_model.m.js" ]
+  deps = [
+    ":navigation_list_model.m",
+    "//ui/file_manager/externs:volume_manager.m",
+    "//ui/webui/resources/js/cr:event_target.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("mock_thumbnail_loader") {
   testonly = true
   deps = [ ":thumbnail_loader" ]
@@ -348,6 +362,14 @@ js_library("dialog_action_controller") {
 js_library("dialog_type") {
 }
 
+js_library("dialog_type.m") {
+  sources = [
+    "$root_gen_dir/ui/file_manager/file_manager/foreground/js/dialog_type.m.js",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("directory_contents") {
   deps = [
     ":constants",
@@ -450,6 +472,20 @@ js_library("directory_tree_naming_controller") {
   ]
 }
 
+js_library("directory_tree_naming_controller.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/directory_tree_naming_controller.m.js" ]
+  deps = [
+    ":directory_model.m",
+    "ui:directory_tree.m",
+    "//ui/file_manager/externs:volume_info.m",
+    "//ui/file_manager/file_manager/common/js:util.m",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js/cr/ui:dialogs.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("drop_effect_and_label") {
 }
 
@@ -1134,20 +1170,23 @@ js_test_gen_html("js_test_gen_html") {
 js_modulizer("modulize") {
   input_files = [
     "android_app_list_model.js",
-    "thumbnail_loader.js",
     "constants.js",
-    "directory_model.js",
+    "crossover_search_utils.js",
+    "dialog_type.js",
     "directory_contents.js",
+    "directory_model.js",
+    "directory_tree_naming_controller.js",
+    "drop_effect_and_label.js",
+    "empty_folder_controller.js",
+    "fake_android_app_list_model.js",
     "file_list_model.js",
     "file_watcher.js",
-    "crossover_search_utils.js",
-    "navigation_list_model.js",
     "folder_shortcuts_data_model.js",
     "mock_directory_model.js",
-    "fake_android_app_list_model.js",
     "mock_folder_shortcut_data_model.js",
-    "drop_effect_and_label.js",
-    "empty_folder_controller.js",
+    "mock_navigation_list_model.js",
+    "navigation_list_model.js",
+    "thumbnail_loader.js",
   ]
 
   namespace_rewrites = cr_namespace_rewrites

ui/file_manager/file_manager/foreground/js/dialog_type.js

@@ -2,6 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+/**
+ * @fileoverview
+ * @suppress {uselessCode} Temporary suppress because of the line exporting.
+ */
+
 /**
  * List of dialog types.
  *
@@ -60,3 +65,6 @@ DialogType.isFolderDialog = type => {
   return type == DialogType.SELECT_FOLDER ||
       type == DialogType.SELECT_UPLOAD_FOLDER;
 };
+
+// eslint-disable-next-line semi,no-extra-semi
+/* #export */ {DialogType};

ui/file_manager/file_manager/foreground/js/directory_tree_naming_controller.js

@@ -2,10 +2,17 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// #import {DirectoryTree, DirectoryItem} from './ui/directory_tree.m.js';
+// #import {VolumeInfo} from '../../../externs/volume_info.m.js';
+// #import {AlertDialog} from 'chrome://resources/js/cr/ui/dialogs.m.js';
+// #import {DirectoryModel} from './directory_model.m.js';
+// #import {util} from '../../common/js/util.m.js';
+// #import {assert} from 'chrome://resources/js/assert.m.js';
+
 /**
  * Naming controller for directory tree.
  */
-class DirectoryTreeNamingController {
+/* #export */ class DirectoryTreeNamingController {
   /**
    * @param {!DirectoryModel} directoryModel
    * @param {!DirectoryTree} directoryTree
@@ -147,7 +154,8 @@ class DirectoryTreeNamingController {
     if (this.isRemovableRoot_) {
       // Validate new name.
       util.validateExternalDriveName(
-              newName, assert(this.volumeInfo_).diskFileSystemType)
+              newName,
+              assert(this.volumeInfo_ && this.volumeInfo_.diskFileSystemType))
           .then(
               this.performExternalDriveRename_.bind(this, entry, newName),
               errorMessage => {

ui/file_manager/file_manager/foreground/js/mock_navigation_list_model.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.
 
+// clang-format off
+// #import {VolumeManager} from '../../../externs/volume_manager.m.js';
+// #import {NavigationModelVolumeItem, NavigationModelItem} from './navigation_list_model.m.js';
+// #import {NativeEventTarget as EventTarget} from 'chrome://resources/js/cr/event_target.m.js';
+// clang-format on
+
 /**
  * Container for a NavigationModelVolumeItem, allowing it to be reused for a
  * given volumeInfo.
@@ -25,7 +31,7 @@ class MockNavigationListItem {
  * Mock class for NavigationListModel.
  * Current implementation of mock class cannot handle shortcut list.
  */
-class MockNavigationListModel extends cr.EventTarget {
+/* #export */ class MockNavigationListModel extends cr.EventTarget {
   /**
    * @param {VolumeManager} volumeManager A volume manager.
    */

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

@@ -24,6 +24,7 @@ group("closure_compile") {
 js_type_check("closure_compile_jsmodules") {
   uses_js_modules = true
   deps = [
+    ":directory_tree.m",
     ":empty_folder.m",
     ":file_list_selection_model.m",
     ":files_alert_dialog.m",
@@ -199,16 +200,53 @@ js_library("directory_tree") {
   ]
 }
 
-js_unittest("directory_tree_unittest") {
+js_library("directory_tree.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/directory_tree.m.js" ]
   deps = [
-    ":directory_tree",
-    "//ui/file_manager/base/js:mock_chrome",
-    "//ui/file_manager/base/js:test_error_reporting",
-    "//ui/file_manager/file_manager/background/js:mock_volume_manager",
-    "//ui/file_manager/file_manager/foreground/js:fake_android_app_list_model",
-    "//ui/file_manager/file_manager/foreground/js:mock_directory_model",
-    "//ui/file_manager/file_manager/foreground/js:mock_folder_shortcut_data_model",
-    "//ui/file_manager/file_manager/foreground/js:mock_navigation_list_model",
+    "//ui/file_manager/base/js:volume_manager_types.m",
+    "//ui/file_manager/externs:files_app_entry_interfaces.m",
+    "//ui/file_manager/externs:volume_info.m",
+    "//ui/file_manager/externs:volume_manager.m",
+    "//ui/file_manager/externs/background:file_operation_manager.m",
+    "//ui/file_manager/file_manager/common/js:file_type.m",
+    "//ui/file_manager/file_manager/common/js:metrics.m",
+    "//ui/file_manager/file_manager/common/js:util.m",
+    "//ui/file_manager/file_manager/foreground/js:constants.m",
+    "//ui/file_manager/file_manager/foreground/js:directory_contents.m",
+    "//ui/file_manager/file_manager/foreground/js:directory_model.m",
+    "//ui/file_manager/file_manager/foreground/js:navigation_list_model.m",
+    "//ui/file_manager/file_manager/foreground/js/metadata:metadata_model.m",
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js/cr/ui:command.m",
+    "//ui/webui/resources/js/cr/ui:context_menu_handler.m",
+    "//ui/webui/resources/js/cr/ui:menu.m",
+    "//ui/webui/resources/js/cr/ui:tree.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
+js_unittest("directory_tree_unittest.m") {
+  deps = [
+    ":directory_tree.m",
+    "//chrome/test/data/webui:chai_assert",
+    "//ui/file_manager/base/js:mock_chrome.m",
+    "//ui/file_manager/base/js:test_error_reporting.m",
+    "//ui/file_manager/base/js:volume_manager_types.m",
+    "//ui/file_manager/externs/background:file_operation_manager.m",
+    "//ui/file_manager/file_manager/background/js:mock_volume_manager.m",
+    "//ui/file_manager/file_manager/common/js:files_app_entry_types.m",
+    "//ui/file_manager/file_manager/common/js:mock_entry.m",
+    "//ui/file_manager/file_manager/common/js:util.m",
+    "//ui/file_manager/file_manager/foreground/js:directory_model.m",
+    "//ui/file_manager/file_manager/foreground/js:fake_android_app_list_model.m",
+    "//ui/file_manager/file_manager/foreground/js:mock_directory_model.m",
+    "//ui/file_manager/file_manager/foreground/js:mock_folder_shortcut_data_model.m",
+    "//ui/file_manager/file_manager/foreground/js:mock_navigation_list_model.m",
+    "//ui/file_manager/file_manager/foreground/js:navigation_list_model.m",
+    "//ui/file_manager/file_manager/foreground/js/metadata:metadata_model.m",
+    "//ui/webui/resources/js:assert.m",
   ]
 }
 
@@ -572,14 +610,19 @@ js_library("suggest_apps_dialog") {
 }
 
 js_test_gen_html("js_test_gen_html_modules") {
-  deps = [ ":file_list_selection_model_unittest.m" ]
+  deps = [
+    ":directory_tree_unittest.m",
+    ":file_list_selection_model_unittest.m",
+  ]
   js_module = true
 
   closure_flags =
       strict_error_checking_closure_args + [
         "js_module_root=./gen/ui",
         "js_module_root=../../ui",
+        "jscomp_off=duplicate",
         "browser_resolver_prefix_replacements=\"chrome://test/=./\"",
+        "hide_warnings_for=third_party/",
       ]
 }
 
@@ -587,7 +630,6 @@ js_test_gen_html("js_test_gen_html") {
   deps = [
     ":actions_submenu_unittest",
     ":breadcrumb_unittest",
-    ":directory_tree_unittest",
     ":file_manager_dialog_base_unittest",
     ":file_table_list_unittest",
     ":file_table_unittest",
@@ -599,6 +641,7 @@ js_test_gen_html("js_test_gen_html") {
 
 js_modulizer("modulize") {
   input_files = [
+    "directory_tree.js",
     "empty_folder.js",
     "file_list_selection_model.js",
     "files_alert_dialog.js",

ui/file_manager/file_manager/foreground/js/ui/directory_tree.js

@@ -2,6 +2,28 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {FileOperationManager} from '../../../../externs/background/file_operation_manager.m.js';
+// #import {FileFilter} from '../directory_contents.m.js';
+// #import {MetadataModel} from '../metadata/metadata_model.m.js';
+// #import {VolumeManager} from '../../../../externs/volume_manager.m.js';
+// #import {DirectoryModel} from '../directory_model.m.js';
+// #import {VolumeInfo} from '../../../../externs/volume_info.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 {FilesAppDirEntry} from '../../../../externs/files_app_entry_interfaces.m.js';
+// #import {NavigationModelItemType, NavigationSection, NavigationModelFakeItem, NavigationModelVolumeItem, NavigationModelShortcutItem, NavigationModelAndroidAppItem, NavigationListModel, NavigationModelItem} from '../navigation_list_model.m.js';
+// #import {FileType} from '../../../common/js/file_type.m.js';
+// #import {contextMenuHandler} from 'chrome://resources/js/cr/ui/context_menu_handler.m.js';
+// #import {constants} from '../constants.m.js';
+// #import {TreeItem, Tree} from 'chrome://resources/js/cr/ui/tree.m.js';
+// #import {VolumeManagerCommon} from '../../../../base/js/volume_manager_types.m.js';
+// #import {assert, assertNotReached} from 'chrome://resources/js/assert.m.js';
+// #import {dispatchSimpleEvent, getPropertyDescriptor, PropertyKind} from 'chrome://resources/js/cr.m.js';
+// #import {metrics} from '../../../common/js/metrics.m.js';
+// #import {util, str} from '../../../common/js/util.m.js';
+// clang-format on
+
 // Namespace
 const directorytree = {};
 
@@ -178,7 +200,7 @@ directorytree.styleRowElementDepth = (item, depth) => {
 /**
  * A tree item has a tree row with a text label.
  */
-class TreeItem extends cr.ui.TreeItem {
+class FilesTreeItem extends cr.ui.TreeItem {
   /**
    * @param {string} label Label for this item.
    * @param {DirectoryTree} tree Tree that contains this item.
@@ -188,7 +210,7 @@ class TreeItem extends cr.ui.TreeItem {
 
     // Save the cr.ui.TreeItem label id before overwriting the prototype.
     const id = this.labelElement.id;
-    this.__proto__ = TreeItem.prototype;
+    this.__proto__ = FilesTreeItem.prototype;
 
     if (window.IN_TEST) {
       this.setAttribute('entry-label', label);
@@ -245,7 +267,7 @@ class TreeItem extends cr.ui.TreeItem {
  * An expandable directory in the tree. Each element represents one folder (sub
  * directory) or one volume (root directory).
  */
-class DirectoryItem extends TreeItem {
+/* #export */ class DirectoryItem extends FilesTreeItem {
   /**
    * @param {string} label Label for this item.
    * @param {DirectoryTree} tree Current tree, which contains this item.
@@ -820,7 +842,7 @@ class DirectoryItem extends TreeItem {
  * A subdirectory in the tree. Each element represents a directory that is not
  * a volume's root.
  */
-class SubDirectoryItem extends DirectoryItem {
+/* #export */ class SubDirectoryItem extends DirectoryItem {
   /**
    * @param {string} label Label for this item.
    * @param {DirectoryEntry} dirEntry DirectoryEntry of this item.
@@ -926,7 +948,7 @@ class SubDirectoryItem extends DirectoryItem {
 /**
  * A directory of entries. Each element represents an entry.
  */
-class EntryListItem extends DirectoryItem {
+/* #export */ class EntryListItem extends DirectoryItem {
   /**
    * @param {VolumeManagerCommon.RootType} rootType The root type to record.
    * @param {!NavigationModelFakeItem} modelItem NavigationModelItem of this
@@ -1182,18 +1204,22 @@ class VolumeItem extends DirectoryItem {
         util.iconSetToCSSBackgroundImageValue(volumeInfo.iconSet);
     if (backgroundImage !== 'none') {
       icon.setAttribute('style', 'background-image: ' + backgroundImage);
-    } else if (VolumeManagerCommon.shouldProvideIcons(volumeInfo.volumeType)) {
+    } else if (VolumeManagerCommon.shouldProvideIcons(
+                   assert(volumeInfo.volumeType))) {
       icon.setAttribute('use-generic-provided-icon', '');
     }
 
-    icon.setAttribute('volume-type-icon', volumeInfo.volumeType);
+    icon.setAttribute(
+        'volume-type-icon', /** @type {string} */ (volumeInfo.volumeType));
 
     if (volumeInfo.volumeType === VolumeManagerCommon.VolumeType.MEDIA_VIEW) {
       const subtype = VolumeManagerCommon.getMediaViewRootTypeFromVolumeId(
           volumeInfo.volumeId);
       icon.setAttribute('volume-subtype', subtype);
     } else {
-      icon.setAttribute('volume-subtype', volumeInfo.deviceType || '');
+      icon.setAttribute(
+          'volume-subtype',
+          /** @type {string} */ (volumeInfo.deviceType) || '');
     }
   }
 
@@ -1241,7 +1267,7 @@ class VolumeItem extends DirectoryItem {
  * A TreeItem which represents a Drive volume. Drive volume has fake entries
  * such as Shared Drives, Shared with me, and Offline in it.
  */
-class DriveVolumeItem extends VolumeItem {
+/* #export */ class DriveVolumeItem extends VolumeItem {
   /**
    * @param {!NavigationModelVolumeItem} modelItem NavigationModelItem of this
    *     volume.
@@ -1587,7 +1613,7 @@ class DriveVolumeItem extends VolumeItem {
  * A TreeItem which represents a shortcut for Drive folder.
  * Shortcut items are displayed as top-level children of DirectoryTree.
  */
-class ShortcutItem extends TreeItem {
+/* #export */ class ShortcutItem extends FilesTreeItem {
   /**
    * @param {!NavigationModelShortcutItem} modelItem NavigationModelItem of this
    *     volume.
@@ -1714,7 +1740,7 @@ class ShortcutItem extends TreeItem {
  * A TreeItem representing an Android picker app. These Android app items are
  * shown as top-level volume entries of the DirectoryTree.
  */
-class AndroidAppItem extends TreeItem {
+class AndroidAppItem extends FilesTreeItem {
   /**
    * @param {!NavigationModelAndroidAppItem} modelItem NavigationModelItem
    *     associated with this volume.
@@ -1790,7 +1816,7 @@ class AndroidAppItem extends TreeItem {
 /**
  * FakeItem is used by Recent and Linux files.
  */
-class FakeItem extends TreeItem {
+/* #export */ class FakeItem extends FilesTreeItem {
   /**
    * @param {!VolumeManagerCommon.RootType} rootType root type.
    * @param {!NavigationModelFakeItem} modelItem
@@ -1898,7 +1924,7 @@ class FakeItem extends TreeItem {
  * Tree of directories on the middle bar. This element is also the root of
  * items, in other words, this is the parent of the top-level items.
  */
-class DirectoryTree extends cr.ui.Tree {
+/* #export */ class DirectoryTree extends cr.ui.Tree {
   constructor() {
     super();
 
@@ -2455,9 +2481,23 @@ DirectoryTree.decorate =
       el.rowElementDepthStyleHandler = directorytree.styleRowElementDepth;
     };
 
-cr.defineProperty(DirectoryTree, 'contextMenuForSubitems', cr.PropertyKind.JS);
-cr.defineProperty(DirectoryTree, 'contextMenuForRootItems', cr.PropertyKind.JS);
-cr.defineProperty(DirectoryTree, 'disabledContextMenu', cr.PropertyKind.JS);
+/** @type {?cr.ui.Menu} */
+DirectoryTree.prototype.contextMenuForSubitems;
+Object.defineProperty(
+    DirectoryTree.prototype, 'contextMenuForSubitems',
+    cr.getPropertyDescriptor('contextMenuForSubitems', cr.PropertyKind.JS));
+
+/** @type {?cr.ui.Menu} */
+DirectoryTree.prototype.contextMenuForRootItems;
+Object.defineProperty(
+    DirectoryTree.prototype, 'contextMenuForRootItems',
+    cr.getPropertyDescriptor('contextMenuForRootItems', cr.PropertyKind.JS));
+
+/** @type {?cr.ui.Menu} */
+DirectoryTree.prototype.disabledContextMenu;
+Object.defineProperty(
+    DirectoryTree.prototype, 'disabledContextMenu',
+    cr.getPropertyDescriptor('disabledContextMenu', cr.PropertyKind.JS));
 
 /**
  * Creates a new DirectoryItem based on |modelItem|.