Files app: JS modules for //ui/file_manager/f/f/js/ui/table/*

Add JS module for //ui/file_manager/file_manager/foreground/js/ui/table:
- table.js
- table_column.js
- table_column_model.js
- table_header.js
- table_list.js
- table_splitter.js

NOTE: TableColumn.width property changed to be inline instead of
Object.defineProperty() because the old cr.defineProperty() allowed to
overwrite only the getter however using Object.defineProperty() doesn't
allow it.

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

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

@@ -28,6 +28,12 @@ js_type_check("closure_compile_jsmodules") {
     ":empty_folder.m",
     ":file_list_selection_model.m",
     ":files_alert_dialog.m",
+    "table:table.m",
+    "table:table_column.m",
+    "table:table_column_model.m",
+    "table:table_header.m",
+    "table:table_list.m",
+    "table:table_splitter.m",
   ]
 }
 

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

@@ -3,6 +3,8 @@
 # found in the LICENSE file.
 
 import("//third_party/closure_compiler/compile_js.gni")
+import("//ui/webui/resources/js/cr.gni")
+import("//ui/webui/resources/tools/js_modulizer.gni")
 
 js_library("table_column") {
   deps = [
@@ -11,6 +13,16 @@ js_library("table_column") {
   ]
 }
 
+js_library("table_column.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/table/table_column.m.js" ]
+  deps = [
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js/cr:event_target.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("table") {
   deps = [
     ":table_column_model",
@@ -21,6 +33,23 @@ js_library("table") {
   ]
 }
 
+js_library("table.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/table/table.m.js" ]
+  deps = [
+    ":table_column.m",
+    ":table_column_model.m",
+    ":table_header.m",
+    ":table_list.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_item.m",
+    "//ui/webui/resources/js/cr/ui:list_single_selection_model.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("table_column_model") {
   deps = [
     ":table_column",
@@ -28,6 +57,17 @@ js_library("table_column_model") {
   ]
 }
 
+js_library("table_column_model.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/table/table_column_model.m.js" ]
+  deps = [
+    ":table_column.m",
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js/cr:event_target.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("table_header") {
   deps = [
     ":table_splitter",
@@ -35,6 +75,16 @@ js_library("table_header") {
   ]
 }
 
+js_library("table_header.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/table/table_header.m.js" ]
+  deps = [
+    ":table_splitter.m",
+    "//ui/webui/resources/js:cr.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("table_list") {
   deps = [
     ":table_column_model",
@@ -43,6 +93,17 @@ js_library("table_list") {
   ]
 }
 
+js_library("table_list.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/table/table_list.m.js" ]
+  deps = [
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js/cr/ui:list.m",
+    "//ui/webui/resources/js/cr/ui:list_item.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
 js_library("table_splitter") {
   deps = [
     ":table_column_model",
@@ -50,3 +111,27 @@ js_library("table_splitter") {
     "//ui/webui/resources/js/cr/ui:splitter",
   ]
 }
+
+js_library("table_splitter.m") {
+  sources = [ "$root_gen_dir/ui/file_manager/file_manager/foreground/js/ui/table/table_splitter.m.js" ]
+  deps = [
+    "//ui/webui/resources/js:cr.m",
+    "//ui/webui/resources/js/cr:event_target.m",
+    "//ui/webui/resources/js/cr/ui:splitter.m",
+  ]
+
+  extra_deps = [ ":modulize" ]
+}
+
+js_modulizer("modulize") {
+  input_files = [
+    "table.js",
+    "table_column.js",
+    "table_column_model.js",
+    "table_header.js",
+    "table_list.js",
+    "table_splitter.js",
+  ]
+
+  namespace_rewrites = cr_namespace_rewrites + [ "cr.ui.table.Table|Table" ]
+}

ui/file_manager/file_manager/foreground/js/ui/table/table.js

@@ -6,12 +6,24 @@
  * @fileoverview This implements a table control.
  */
 
+// clang-format off
+// #import {getPropertyDescriptor, PropertyKind, dispatchSimpleEvent} from 'chrome://resources/js/cr.m.js';
+// #import {ArrayDataModel} from 'chrome://resources/js/cr/ui/array_data_model.m.js';
+// #import {List} from 'chrome://resources/js/cr/ui/list.m.js';
+// #import {ListItem} from 'chrome://resources/js/cr/ui/list_item.m.js';
+// #import {ListSelectionModel} from 'chrome://resources/js/cr/ui/list_selection_model.m.js';
+// #import {ListSingleSelectionModel} from 'chrome://resources/js/cr/ui/list_single_selection_model.m.js';
+// #import {TableColumnModel} from './table_column_model.m.js';
+// #import {TableList} from './table_list.m.js';
+// #import {TableHeader} from './table_header.m.js';
+// clang-format on
+
 cr.define('cr.ui', function() {
   /**
    * Creates a new table element.
    * @extends {HTMLDivElement}
    */
-  class Table {
+  /* #export */ class Table {
     constructor() {
       /** @private {cr.ui.table.TableColumnModel} */
       this.columnModel_;
@@ -421,8 +433,13 @@ cr.define('cr.ui', function() {
    * because table contents can contain controls that can be focused, and for
    * some purposes (e.g., styling), the table can still be conceptually focused
    * at that point even though it doesn't actually have the page focus.
+   * @type {boolean}
    */
-  cr.defineProperty(Table, 'hasElementFocus', cr.PropertyKind.BOOL_ATTR);
+  Table.prototype.hasElementFocus;
+  Object.defineProperty(
+      Table.prototype, 'hasElementFocus',
+      cr.getPropertyDescriptor('hasElementFocus', cr.PropertyKind.BOOL_ATTR));
 
+  // #cr_define_end
   return {Table: Table};
 });

ui/file_manager/file_manager/foreground/js/ui/table/table_column.js

@@ -6,11 +6,16 @@
  * @fileoverview This is a table column representation
  */
 
+// clang-format off
+// #import {NativeEventTarget as EventTarget} from 'chrome://resources/js/cr/event_target.m.js';
+// #import {getPropertyDescriptor, dispatchPropertyChange} from 'chrome://resources/js/cr.m.js';
+// clang-format on
+
 cr.define('cr.ui.table', function() {
   /**
    * A table column that wraps column ids and settings.
    */
-  class TableColumn extends cr.EventTarget {
+  /* #export */ class TableColumn extends cr.EventTarget {
     /**
      * @param {string} id
      * @param {string} name
@@ -76,6 +81,14 @@ cr.define('cr.ui.table', function() {
       return this.visible_ ? this.width_ : 0;
     }
 
+    set width(value) {
+      const oldValue = this.width;
+      if (value !== oldValue) {
+        this.width_ = value;
+        cr.dispatchPropertyChange(this, 'width', value, oldValue);
+      }
+    }
+
     /**
      * The width of the column, disregarding visibility.  For hidden columns,
      * this would be the width of the column if it were to be made visible.
@@ -90,49 +103,61 @@ cr.define('cr.ui.table', function() {
    * The column id.
    * @type {string}
    */
-  cr.defineProperty(TableColumn, 'id');
+  TableColumn.prototype.id;
+  Object.defineProperty(
+      TableColumn.prototype, 'id', cr.getPropertyDescriptor('id'));
 
   /**
    * The column name
    * @type {string}
    */
-  cr.defineProperty(TableColumn, 'name');
-
-  /**
-   * The column width.
-   * @type {number}
-   */
-  cr.defineProperty(TableColumn, 'width');
+  TableColumn.prototype.name;
+  Object.defineProperty(
+      TableColumn.prototype, 'name', cr.getPropertyDescriptor('name'));
 
   /**
    * The column visibility.
    * @type {boolean}
    */
-  cr.defineProperty(TableColumn, 'visible');
+  TableColumn.prototype.visible;
+  Object.defineProperty(
+      TableColumn.prototype, 'visible', cr.getPropertyDescriptor('visible'));
 
   /**
    * True if the column is aligned to end.
    * @type {boolean}
    */
-  cr.defineProperty(TableColumn, 'endAlign');
+  TableColumn.prototype.endAlign;
+  Object.defineProperty(
+      TableColumn.prototype, 'endAlign', cr.getPropertyDescriptor('endAlign'));
 
   /**
    * The column render function.
    * @type {function(*, string, Element): HTMLElement}
    */
-  cr.defineProperty(TableColumn, 'renderFunction');
+  TableColumn.prototype.renderFunction;
+  Object.defineProperty(
+      TableColumn.prototype, 'renderFunction',
+      cr.getPropertyDescriptor('renderFunction'));
 
   /**
    * The column header render function.
    * @type {function(Element):Node}
    */
-  cr.defineProperty(TableColumn, 'headerRenderFunction');
+  TableColumn.prototype.headerRenderFunction;
+  Object.defineProperty(
+      TableColumn.prototype, 'headerRenderFunction',
+      cr.getPropertyDescriptor('headerRenderFunction'));
 
   /**
    * Default sorting order for the column ('asc' or 'desc').
    * @type {string}
    */
-  cr.defineProperty(TableColumn, 'defaultOrder');
+  TableColumn.prototype.defaultOrder;
+  Object.defineProperty(
+      TableColumn.prototype, 'defaultOrder',
+      cr.getPropertyDescriptor('defaultOrder'));
 
+  // #cr_define_end
   return {TableColumn: TableColumn};
 });

ui/file_manager/file_manager/foreground/js/ui/table/table_column_model.js

@@ -5,6 +5,13 @@
 /**
  * @fileoverview This is a table column model
  */
+
+// clang-format off
+// #import {NativeEventTarget as EventTarget} from 'chrome://resources/js/cr/event_target.m.js';
+// #import {TableColumn} from './table_column.m.js';
+// #import {dispatchSimpleEvent} from 'chrome://resources/js/cr.m.js';
+// clang-format on
+
 cr.define('cr.ui.table', function() {
   /** @type {number} */
   const MIMIMAL_WIDTH = 10;
@@ -13,7 +20,7 @@ cr.define('cr.ui.table', function() {
    * A table column model that wraps table columns array
    * This implementation supports widths in percents.
    */
-  class TableColumnModel extends cr.EventTarget {
+  /* #export */ class TableColumnModel extends cr.EventTarget {
     /**
      * @param {!Array<cr.ui.table.TableColumn>} tableColumns Array of table
      *     columns.
@@ -229,5 +236,6 @@ cr.define('cr.ui.table', function() {
     }
   }
 
+  // #cr_define_end
   return {TableColumnModel: TableColumnModel};
 });

ui/file_manager/file_manager/foreground/js/ui/table/table_header.js

@@ -6,12 +6,16 @@
  * @fileoverview This implements a table header.
  */
 
+// #import {getPropertyDescriptor} from 'chrome://resources/js/cr.m.js';
+// #import {TableSplitter} from './table_splitter.m.js';
+// #import {Table} from './table.m.js';
+
 cr.define('cr.ui.table', function() {
   /**
    * Creates a new table header.
    * @extends {HTMLDivElement}
    */
-  class TableHeader {
+  /* #export */ class TableHeader {
     constructor() {
       /** @private {cr.ui.Table} */
       this.table_ = null;
@@ -261,7 +265,9 @@ cr.define('cr.ui.table', function() {
    * The table associated with the header.
    * @type {Element}
    */
-  cr.defineProperty(TableHeader, 'table');
+  TableHeader.prototype.table;
+  Object.defineProperty(
+      TableHeader.prototype, 'table', cr.getPropertyDescriptor('table'));
 
   /**
    * Rectangular area around the splitters sensitive to touch events
@@ -269,5 +275,6 @@ cr.define('cr.ui.table', function() {
    */
   TableHeader.TOUCH_DRAG_AREA_WIDTH = 30;
 
+  // #cr_define_end
   return {TableHeader: TableHeader};
 });

ui/file_manager/file_manager/foreground/js/ui/table/table_list.js

@@ -6,13 +6,18 @@
  * @fileoverview This extends cr.ui.List for use in the table.
  */
 
+// #import {List} from 'chrome://resources/js/cr/ui/list.m.js';
+// #import {ListItem} from 'chrome://resources/js/cr/ui/list_item.m.js';
+// #import {Table} from './table.m.js';
+// #import {getPropertyDescriptor} from 'chrome://resources/js/cr.m.js';
+
 cr.define('cr.ui.table', function() {
-  /** @const */ const List = cr.ui.List;
+  /* #ignore */ /** @const */ const List = cr.ui.List;
 
   /**
    * Creates a new table list element.
    */
-  class TableList extends cr.ui.List {
+  /* #export */ class TableList extends cr.ui.List {
     /**
      * @param {Object=} opt_propertyBag Optional properties.
      */
@@ -30,7 +35,10 @@ cr.define('cr.ui.table', function() {
     }
 
     static decorate(el) {
-      cr.ui.List.decorate(el);
+      if (cr.ui.List.decorate) {
+        cr.ui.List.decorate(el);
+      }
+
       el.__proto__ = TableList.prototype;
       el.className = 'list';
     }
@@ -202,8 +210,11 @@ cr.define('cr.ui.table', function() {
    * The table associated with the list.
    * @type {Element}
    */
-  cr.defineProperty(TableList, 'table');
+  TableList.prototype.table;
+  Object.defineProperty(
+      TableList.prototype, 'table', cr.getPropertyDescriptor('table'));
 
+  // #cr_define_end
   return {
     TableList: TableList,
   };

ui/file_manager/file_manager/foreground/js/ui/table/table_splitter.js

@@ -10,10 +10,16 @@
  * It is column model responsibility to resize other columns accordingly.
  */
 
+// clang-format off
+// #import {Splitter} from 'chrome://resources/js/cr/ui/splitter.m.js';
+// #import {Table} from './table.m.js';
+// #import {getPropertyDescriptor, dispatchSimpleEvent} from 'chrome://resources/js/cr.m.js';
+// clang-format on
+
 /**
  * Creates a new table splitter element.
  */
-class TableSplitter extends cr.ui.Splitter {
+/* #export */ class TableSplitter extends cr.ui.Splitter {
   /**
    * @param {Object=} opt_propertyBag Optional properties.
    */
@@ -44,14 +50,12 @@ class TableSplitter extends cr.ui.Splitter {
   decorate() {
     super.decorate();
 
-    if (util.isFilesNg()) {
-      const icon = document.createElement('cr-icon-button');
-      icon.setAttribute('iron-icon', 'files32:small-dragger');
-      icon.setAttribute('tabindex', '-1');
-      icon.setAttribute('aria-hidden', 'true');
-      icon.classList.add('splitter-icon');
-      this.appendChild(icon);
-    }
+    const icon = document.createElement('cr-icon-button');
+    icon.setAttribute('iron-icon', 'files32:small-dragger');
+    icon.setAttribute('tabindex', '-1');
+    icon.setAttribute('aria-hidden', 'true');
+    icon.classList.add('splitter-icon');
+    this.appendChild(icon);
 
     this.classList.add('table-header-splitter');
   }
@@ -76,8 +80,10 @@ class TableSplitter extends cr.ui.Splitter {
    * @override
    */
   handleSplitterDragMove(deltaX) {
-    this.table_.columnModel.setWidthAndKeepTotal(
-        this.columnIndex, this.columnWidth_ + deltaX, true);
+    if (this.table_.columnModel.setWidthAndKeepTotal) {
+      this.table_.columnModel.setWidthAndKeepTotal(
+          this.columnIndex, this.columnWidth_ + deltaX, true);
+    }
   }
 
   /**
@@ -95,10 +101,15 @@ class TableSplitter extends cr.ui.Splitter {
  * The column index.
  * @type {number}
  */
-cr.defineProperty(TableSplitter, 'columnIndex');
+TableSplitter.prototype.columnIndex;
+Object.defineProperty(
+    TableSplitter.prototype, 'columnIndex',
+    cr.getPropertyDescriptor('columnIndex'));
 
 /**
  * The table associated with the splitter.
  * @type {Element}
  */
-cr.defineProperty(TableSplitter, 'table');
+TableSplitter.prototype.table;
+Object.defineProperty(
+    TableSplitter.prototype, 'table', cr.getPropertyDescriptor('table'));