Files app: Add JS module for foreground page

Add JS modules for files in //ui/file_manager/file_manager/js/ui/ :

- progress_center_panel.js
- commandbutton.js
- default_task_dialog.js
- combobutton.js

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

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

@@ -26,6 +26,9 @@ js_type_check("closure_compile_jsmodules") {
   deps = [
     ":a11y_announce.m",
     ":action_model_ui.m",
+    ":combobutton.m",
+    ":commandbutton.m",
+    ":default_task_dialog.m",
     ":directory_tree.m",
     ":drag_selector.m",
     ":empty_folder.m",
@@ -42,6 +45,7 @@ js_type_check("closure_compile_jsmodules") {
     ":list_container.m",
     ":multi_menu.m",
     ":multi_menu_button.m",
+    ":progress_center_panel.m",
     ":suggest_apps_dialog.m",
     "table:table.m",
     "table:table_column.m",
@@ -197,6 +201,21 @@ js_library("combobutton") {
   externs_list = [ "//ui/file_manager/externs/paper_elements.js" ]
 }
 
+js_library("combobutton.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/combobutton.m.js" ]
+  deps = [
+    ":files_menu.m",
+    ":multi_menu_button.m",
+    "//ui/file_manager/file_manager/common/js:util.m",
+    "//ui/webui/resources/js/cr:ui.m",
+    "//ui/webui/resources/js/cr/ui:menu_item.m",
+  ]
+
+  externs_list = [ "//ui/file_manager/externs/paper_elements.js" ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("commandbutton") {
   deps = [
     "//ui/webui/resources/js:assert",
@@ -205,6 +224,18 @@ js_library("commandbutton") {
   ]
 }
 
+js_library("commandbutton.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/commandbutton.m.js" ]
+  deps = [
+    "//ui/webui/resources/js:assert.m",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js/cr:ui.m",
+    "//ui/webui/resources/js/cr/ui:command.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("default_task_dialog") {
   deps = [
     ":file_manager_dialog_base",
@@ -214,6 +245,19 @@ js_library("default_task_dialog") {
   ]
 }
 
+js_library("default_task_dialog.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/default_task_dialog.m.js" ]
+
+  deps = [
+    ":file_manager_dialog_base.m",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js/cr/ui:array_data_model.m",
+    "//ui/webui/resources/js/cr/ui:list.m",
+    "//ui/webui/resources/js/cr/ui:list_single_selection_model.m",
+  ]
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("dialog_footer") {
   deps = [
     "//ui/file_manager/file_manager/common/js:file_type",
@@ -800,6 +844,18 @@ js_library("progress_center_panel") {
   externs_list = [ "//ui/file_manager/externs/progress_center_panel.js" ]
 }
 
+js_library("progress_center_panel.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/progress_center_panel.m.js" ]
+  deps = [
+    "//ui/file_manager/externs:progress_center_panel.m",
+    "//ui/file_manager/file_manager/common/js:progress_center_common.m",
+    "//ui/file_manager/file_manager/common/js:util.m",
+    "//ui/webui/resources/js:assert.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("providers_menu") {
   deps = [
     ":directory_tree",
@@ -901,7 +957,11 @@ js_test_gen_html("js_test_gen_html") {
 
 js_modulizer("modulize") {
   input_files = [
+    "a11y_announce.js",
     "action_model_ui.js",
+    "combobutton.js",
+    "commandbutton.js",
+    "default_task_dialog.js",
     "directory_tree.js",
     "drag_selector.js",
     "empty_folder.js",
@@ -918,14 +978,15 @@ js_modulizer("modulize") {
     "list_container.js",
     "multi_menu.js",
     "multi_menu_button.js",
+    "progress_center_panel.js",
     "suggest_apps_dialog.js",
-    "a11y_announce.js",
   ]
 
   namespace_rewrites = cr_namespace_rewrites
   namespace_rewrites += [
-    "cr.ui.MultiMenu|MultiMenu",
+    "cr.ui.ComboButton|ComboButton",
     "cr.ui.FilesMenuItem|FilesMenuItem",
+    "cr.ui.MultiMenu|MultiMenu",
     "cr.ui.table.Table|Table",
   ]
 }

ui/file_manager/file_manager/foreground/js/ui/combobutton.js

@@ -2,6 +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 {MenuItem} from 'chrome://resources/js/cr/ui/menu_item.m.js';
+// #import {util} from '../../../common/js/util.m.js';
+// #import {FilesMenuItem} from './files_menu.m.js';
+// #import {decorate} from 'chrome://resources/js/cr/ui.m.js';
+// #import {MultiMenuButton} from './multi_menu_button.m.js';
+// #import {getPropertyDescriptor, PropertyKind} from 'chrome://resources/js/cr.m.js';
+// clang-format on
+
 /**
  * @fileoverview This implements a combobutton control.
  */
@@ -9,7 +18,7 @@ cr.define('cr.ui', () => {
   /**
    * Creates a new combo button element.
    */
-  class ComboButton extends cr.ui.MultiMenuButton {
+  /* #export */ class ComboButton extends cr.ui.MultiMenuButton {
     constructor() {
       super();
 
@@ -21,6 +30,15 @@ cr.define('cr.ui', () => {
 
       /** @private {?Element} */
       this.actionNode_ = null;
+
+      /** @private {?Element} */
+      this.filesToggleRipple_ = null;
+
+      /** @private {boolean} */
+      this.disabled = false;
+
+      /** @private {boolean} */
+      this.multiple = false;
     }
 
     /**
@@ -177,9 +195,8 @@ cr.define('cr.ui', () => {
         ripplesLayer.setAttribute('hidden', '');
       }
 
-      /** @private {!FilesToggleRippleElement} */
-      this.filesToggleRipple_ = /** @type {!FilesToggleRippleElement} */
-          (this.ownerDocument.createElement('files-toggle-ripple'));
+      this.filesToggleRipple_ =
+          this.ownerDocument.createElement('files-toggle-ripple');
       ripplesLayer.appendChild(this.filesToggleRipple_);
 
       /** @private {!PaperRipple} */
@@ -260,9 +277,7 @@ cr.define('cr.ui', () => {
     }
   }
 
-  cr.defineProperty(ComboButton, 'disabled', cr.PropertyKind.BOOL_ATTR);
-  cr.defineProperty(ComboButton, 'multiple', cr.PropertyKind.BOOL_ATTR);
-
+  // #cr_define_end
   return {
     ComboButton: ComboButton,
   };

ui/file_manager/file_manager/foreground/js/ui/commandbutton.js

@@ -6,11 +6,18 @@
  * @fileoverview This implements a common button control, bound to command.
  */
 
+// clang-format off
+// #import {Command} from 'chrome://resources/js/cr/ui/command.m.js';
+// #import {decorate} from 'chrome://resources/js/cr/ui.m.js';
+// #import {getPropertyDescriptor, PropertyKind} from 'chrome://resources/js/cr.m.js';
+// #import {assert} from 'chrome://resources/js/assert.m.js';
+// clang-format on
+
 /**
  * Creates a new button element.
  * @extends {HTMLButtonElement}
  */
-class CommandButton {
+/* #export */ class CommandButton {
   constructor() {
     /**
      * Associated command.
@@ -160,16 +167,16 @@ class CommandButton {
   }
 }
 
-CommandButton.prototype.__proto__ = HTMLButtonElement.prototype;
-
 /**
  * Whether the button is disabled or not.
  * @type {boolean}
  */
-cr.defineProperty(CommandButton, 'disabled', cr.PropertyKind.BOOL_ATTR);
+CommandButton.prototype.disabled;
 
 /**
  * Whether the button is hidden or not.
  * @type {boolean}
  */
-cr.defineProperty(CommandButton, 'hidden', cr.PropertyKind.BOOL_ATTR);
+CommandButton.prototype.hidden;
+
+CommandButton.prototype.__proto__ = HTMLButtonElement.prototype;

ui/file_manager/file_manager/foreground/js/ui/default_task_dialog.js

@@ -2,6 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {ArrayDataModel} from 'chrome://resources/js/cr/ui/array_data_model.m.js';
+// #import {ListSingleSelectionModel} from 'chrome://resources/js/cr/ui/list_single_selection_model.m.js';
+// #import {List} from 'chrome://resources/js/cr/ui/list.m.js';
+// #import {FileManagerDialogBase} from './file_manager_dialog_base.m.js';
+// #import {getPropertyDescriptor, PropertyKind} from 'chrome://resources/js/cr.m.js';
+// clang-format on
+
 /**
  * DefaultTaskDialog contains a message, a list box, an ok button, and a
  * cancel button.
@@ -11,7 +19,7 @@ cr.define('cr.filebrowser', () => {
   /**
    * Creates dialog in DOM tree.
    */
-  class DefaultTaskDialog extends FileManagerDialogBase {
+  /* #export */ class DefaultTaskDialog extends FileManagerDialogBase {
     /**
      * @param {HTMLElement} parentNode Node to be parent for this dialog.
      */
@@ -98,8 +106,12 @@ cr.define('cr.filebrowser', () => {
       // A11y - make it focusable and readable.
       result.setAttribute('tabindex', '-1');
 
-      cr.defineProperty(result, 'lead', cr.PropertyKind.BOOL_ATTR);
-      cr.defineProperty(result, 'selected', cr.PropertyKind.BOOL_ATTR);
+      Object.defineProperty(
+          result, 'lead',
+          cr.getPropertyDescriptor('lead', cr.PropertyKind.BOOL_ATTR));
+      Object.defineProperty(
+          result, 'selected',
+          cr.getPropertyDescriptor('selected', cr.PropertyKind.BOOL_ATTR));
 
       return result;
     }
@@ -189,5 +201,6 @@ cr.define('cr.filebrowser', () => {
     }
   }
 
+  // #cr_define_end
   return {DefaultTaskDialog: DefaultTaskDialog};
 });

ui/file_manager/file_manager/foreground/js/ui/progress_center_panel.js

@@ -2,11 +2,18 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+// clang-format off
+// #import {ProgressCenterPanelInterface} from '../../../../externs/progress_center_panel.m.js';
+// #import {assertNotReached} from 'chrome://resources/js/assert.m.js';
+// #import {strf, str} from '../../../common/js/util.m.js';
+// #import {ProgressItemType, ProgressItemState, ProgressCenterItem} from '../../../common/js/progress_center_common.m.js';
+// clang-format on
+
 /**
  * Progress center panel.
  * @implements {ProgressCenterPanelInterface}
  */
-class ProgressCenterPanel {
+/* #export */ class ProgressCenterPanel {
   constructor() {
     /**
      * Reference to the feedback panel host.