[directorytree] Add custom files-ng tree row style handler

cr.ui.Tree has a default row style handler that applies inline style to
rows to indent them (depth * 20px) using CSS padding-inline-start.

files-ng requires (depth * 22px) of indent. Add a custom cr.ui.Tree row
style handler for the files-ng case. Apply the indent style to the

   .tree-row > .file-row

element. Also style its minWidth to be 12px after the row .item-icon to
account for the rounded CSS border style of .tree-row > .file-row [1].

Per the current row design: 6px padding + 20px more-icon + 2px gap then
20px item-icon + then the 12px I mentioned: totals 60px.

[1] if the directory tree is narrowed, the .file-row's round border can
be drawn over the .item-icon (or over any element to its left depending
on the tree width) if the .file-row has no minWidth style.

Bug: 992819
Change-Id: I9ec261846ccb7a7e09d907dfbf23b089279f3110
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1946057Reviewed-by: Alex Danilo <adanilo@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#721299}

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

@@ -176,14 +176,27 @@ directorytree.createRowElementContentFilesNG = (id, label) => {
 /**
  * An optional rowElement depth (indent) style handler where undefined uses the
  * default 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;
 
+/**
+ * Custom tree row style handler: called when the item's |rowElement| should be
+ * styled to indent |depth| in the tree for FILES_NG_ENABLED case.
+ * @param {!cr.ui.TreeItem} item cr.ui.TreeItem.
+ * @param {number} depth Indent depth (>=0).
+ */
+directorytree.styleRowElementDepthFilesNG = (item, depth) => {
+  const fileRowElement = item.rowElement.firstElementChild;
+
+  const indent = depth * 22;
+  let style = 'padding-inline-start: ' + indent + 'px';
+  const width = indent + 60;
+  style += '; min-width: ' + width + 'px;';
+
+  fileRowElement.setAttribute('style', style);
+};
+
 /**
  * The iron-icon-set prefix for tree rows that have an .align-right-icon class
  * element added to the row (eject icon, AndroidAppItem launch icon).