Tree CSS: add files-ng cu.ui.tree CSS rules

Our tree.css comes from the cr.ui.tree source and modified to the taste
of files app. Add mode tastiness in form of files-ng. Again, rules like

   .tree-row > .file-row > blah ...

are specific to files-ng (there is an echo in this room).

Bug: 992819
Change-Id: I5da539e81005cbb412004461dc5f6ef00a4f5251
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1942589Reviewed-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@{#720120}

ui/file_manager/file_manager/foreground/css/tree.css

@@ -36,26 +36,48 @@ tree {
       url(../images/files/ui/2x/expand_more_active.png) 2x);
 }
 
-html[dir=rtl] .tree-row > .expand-icon {
+/* All .tree-row > .file-row > ... rules are files-ng specific. */
+.tree-row > .file-row > .expand-icon {
+  -webkit-mask-image: url(../images/files/ui/sort_desc.svg);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  background-color: currentColor;
+  position: relative;
+  transform: rotate(-90deg);
+  transition: all 150ms;
+  vertical-align: top;
+}
+
+html[dir=rtl] .tree-row > .expand-icon,
+html[dir=rtl] .tree-row > .file-row > .expand-icon {
   transform: rotate(90deg);
 }
 
-.tree-item[expanded] > .tree-row > .expand-icon {
+.tree-item[expanded] > .tree-row > .expand-icon,
+.tree-item[expanded] > .tree-row > .file-row > .expand-icon {
   transform: rotate(0);
 }
 
-.tree-row > .expand-icon {
+.tree-row > .expand-icon,
+.tree-row > .file-row > .expand-icon {
   visibility: hidden;
 }
 
-.tree-row[may-have-children] > .expand-icon {
+.tree-row[may-have-children] > .expand-icon,
+.tree-row[may-have-children] > .file-row > .expand-icon {
   visibility: visible;
 }
 
-.tree-row[has-children=false] > .expand-icon {
+.tree-row[has-children=false] > .expand-icon,
+.tree-row[has-children=false] > .file-row > .expand-icon {
   visibility: hidden;
 }
 
+.tree-row > .file-row > .item-icon[use-generic-provided-icon] {
+  -webkit-mask-image: url(../images/files/ui/filetype_placeholder_generic.svg);
+  filter: none !important;
+}
+
 .tree-row[selected] {
   z-index: 2;
 }
@@ -68,7 +90,9 @@ html[dir=rtl] .tree-row > .expand-icon {
   display: none;
 }
 
-.tree-item > .tree-row > * {
+/* Not used in files-ng: restrict by #directory-tree:not([files-ng]) to block
+   the trailing > * matching the files-ng .tree-row > .file-row structure. */
+#directory-tree:not([files-ng]) .tree-item > .tree-row > * {
   display: inline-block;
 }
 
@@ -82,7 +106,8 @@ html[dir=rtl] .tree-row > .expand-icon {
   white-space: pre;
 }
 
-.tree-rename > .tree-row > .tree-label {
+.tree-rename > .tree-row > .tree-label,
+.tree-rename > .tree-row > .file-row > .tree-label {
   -webkit-user-modify: read-write-plaintext-only;
   user-select: auto;
 }