[directory-tree] Add custom cr.ui.Tree/TreeItem row style support

cr.ui.Tree assumes the rowElement of the TreeItem is one to indent via
style (padding-inline-start) to give the appearance of a tree.

The inner structure of TreeItem is known to the using app and it might
be that a child element the rowElement should be indented, and not the
rowElement itself, to give the appearance of a tree.

Allow cr.ui.Tree/TreeItem using apps to customise TreeItem's row style
using an optional rowElementDepthStyleHandler.

No change in behavior, no new tests.

Bug: 992819
Change-Id: Ifb5762ed97b265602df2e50e482045fd5d3f3151
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1859796Reviewed-by: calamity <calamity@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#706796}

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

@@ -6,11 +6,11 @@
 const directorytree = {};
 
 ////////////////////////////////////////////////////////////////////////////////
-// DirectoryTreeBase
+// DirectoryTreeBase methods
 
 /**
  * Implementation of methods for DirectoryTree and DirectoryItem. These classes
- * inherits cr.ui.Tree/TreeItem so we can't make them inherit this class.
+ * inherits cr.ui.Tree/cr.ui.TreeItem so we can't make them inherit this class.
  * Instead, we separate their implementations to this separate object and call
  * it with setting 'this' from DirectoryTree/Item.
  */
@@ -137,6 +137,17 @@ const TREE_ITEM_INNER_HTML = '<div class="tree-row">' +
 ////////////////////////////////////////////////////////////////////////////////
 // DirectoryItem
 
+/**
+ * An optional rowElement depth (indent) style handler where undefined uses the
+ * default cr.ui.Tree/cr.ui.TreeItem indent styling.
+ *
+ * TODO(crbug.com/992819): add an implementation for the FILES_NG_ENABLED case,
+ * where a rowElement child needs the indent, not the rowElement itself.
+ *
+ * @type {function(!cr.ui.TreeItem,number)|undefined}
+ */
+directorytree.styleRowElementDepth = undefined;
+
 /**
  * An expandable directory in the tree. Each element represents one folder (sub
  * directory) or one volume (root directory).
@@ -2241,6 +2252,10 @@ DirectoryTree.decorate =
     (el, directoryModel, volumeManager, metadataModel, fileOperationManager,
      fakeEntriesVisible) => {
       el.__proto__ = DirectoryTree.prototype;
+
+      // TODO(crbug.com/992819): add overrides for the FILES_NG_ENABLED case.
+      Object.freeze(directorytree);
+
       /** @type {DirectoryTree} */ (el).decorateDirectoryTree(
           directoryModel, volumeManager, metadataModel, fileOperationManager,
           fakeEntriesVisible);

ui/webui/resources/js/cr/ui/tree.js

@@ -13,6 +13,14 @@ cr.define('cr.ui', function() {
    */
   const INDENT = 20;
 
+  /**
+   * A custom rowElement depth (indent) style handler where undefined uses the
+   * default depth INDENT styling, see cr.ui.TreeItem.setDepth_().
+   *
+   * @type {function(!cr.ui.TreeItem,number)|undefined}
+   */
+  let customRowElementDepthStyleHandler = undefined;
+
   /**
    * Returns the computed style for an element.
    * @param {!Element} el The element to get the computed style for.
@@ -64,6 +72,25 @@ cr.define('cr.ui', function() {
       }
     },
 
+    /**
+     * Returns the tree item rowElement style handler.
+     *
+     * @return {function(!cr.ui.TreeItem,number)|undefined}
+     */
+    get rowElementDepthStyleHandler() {
+      return customRowElementDepthStyleHandler;
+    },
+
+    /**
+     * Sets a tree item rowElement style handler, which allows Tree users to
+     * customize the depth (indent) style of tree item rowElements.
+     *
+     * @param {function(!cr.ui.TreeItem,number)|undefined} handler
+     */
+    set rowElementDepthStyleHandler(handler) {
+      customRowElementDepthStyleHandler = handler;
+    },
+
     /**
      * Returns the tree item that are children of this tree.
      */
@@ -325,8 +352,13 @@ cr.define('cr.ui', function() {
      */
     setDepth_: function(depth) {
       if (depth != this.depth_) {
-        this.rowElement.style.paddingInlineStart =
-            Math.max(0, depth - 1) * INDENT + 'px';
+        const rowDepth = Math.max(0, depth - 1);
+        if (!customRowElementDepthStyleHandler) {
+          this.rowElement.style.paddingInlineStart = rowDepth * INDENT + 'px';
+        } else {
+          customRowElementDepthStyleHandler(this, rowDepth);
+        }
+
         this.depth_ = depth;
         const items = this.items;
         for (let i = 0, item; item = items[i]; i++) {