Update visual style of directory tree.

Main changes are:
- Layout change.
- Selected tree item's color is not inverted now.
- Use core-icon's preset icons for for subfolders.
- Add touch feedback.

BUG=402344
TEST=run browser_tests

Review URL: https://codereview.chromium.org/884653002

Cr-Commit-Position: refs/heads/master@{#313474}

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

@@ -141,12 +141,13 @@ a:focus {
   min-width: 100px;
   overflow: hidden;
   position: relative;
-  width: 190px;
+  width: 272px;
 }
 
 .dialog-navigation-list-contents {
   display: flex;
   flex: 1 1 auto;
+  margin-top: 8px;
   position: relative;
 }
 
@@ -182,6 +183,7 @@ div.splitter {
 
 #directory-tree .tree-row {
   align-items: center;
+  color: rgb(90, 90, 90);
   cursor: pointer;
   display: flex;
   line-height: 29px;
@@ -197,56 +199,36 @@ div.splitter {
   flex: none;
   height: 37px;
   left: 3px;
-  margin: -12px -10px -13px -13px;
+  margin: -12px -4px -13px;
   right: 3px;
   top: 0;
   width: 37px;
 }
 
-#directory-tree:focus .tree-row[selected] > .expand-icon {
-  background-image: -webkit-canvas(tree-triangle-inverted);
-}
-
 #directory-tree .tree-row > .volume-icon {
-  background-position: center 3px;
-  background-repeat: no-repeat;
   flex: none;
-  height: 24px;
-  width: 24px;
+  height: 16px;
+  width: 16px;
 }
 
 #directory-tree .tree-row > .label {
   display: block;
   flex: auto;
-  margin: 0 3px;
+  margin: 0 6px;
   overflow-x: hidden;
   text-overflow: ellipsis;
 }
 
+#directory-tree .tree-row > paper-ripple {
+  color: rgb(27, 168, 243);
+}
+
 #directory-tree .tree-item.accepts > .tree-row,
 #directory-tree .tree-row[lead][selected],
 #directory-tree .tree-row[lead],
 #directory-tree .tree-row[selected],
-#directory-tree .tree-row[anchor],
-#directory-tree .tree-row:active {
-  background-color: rgb(225, 225, 225);
-}
-
-#directory-tree:focus .tree-item.accepts > .tree-row,
-#directory-tree:focus .tree-row[lead][selected],
-#directory-tree:focus .tree-row[lead],
-#directory-tree:focus .tree-row[selected],
-#directory-tree:focus .tree-row[anchor] {
-  background-color: rgb(193, 209, 232);
-}
-
-#directory-tree:focus .tree-item.accepts > .tree-row,
-#directory-tree:focus .tree-row[lead][selected],
-#directory-tree:focus .tree-row[lead],
-#directory-tree:focus .tree-row[selected],
-#directory-tree:focus .tree-row[anchor] {
-  background-color: rgb(66, 129, 244);
-  color: white;
+#directory-tree .tree-row[anchor] {
+  color: rgb(27, 168, 243);
 }
 
 /* Make top-level items thicker and Drive volume's expand-icon invisible */
@@ -272,9 +254,6 @@ div.splitter {
 }
 
 #directory-tree:focus .tree-row[selected] > div.root-eject {
-  background: -webkit-image-set(
-      url(../images/files/ui/eject_white.png) 1x,
-      url(../images/files/ui/2x/eject_white.png) 2x) no-repeat center;
   opacity: 1;
 }
 
@@ -824,6 +803,7 @@ body[type='full-page'] .detail-name .detail-icon {
 
 @-webkit-keyframes acceptsBlink {
   0% {
+    color: rgb(90, 90, 90);
     background-color: transparent;
   }
 }

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

@@ -17,37 +17,37 @@ tree {
   white-space: nowrap;
 }
 
-.expand-icon {
+.tree-row > .expand-icon {
+  position: relative;
+}
+
+.tree-row > .expand-icon > core-icon {
   -webkit-transform: rotate(-90deg);
   -webkit-transition: all 150ms;
-  background-image: -webkit-canvas(tree-triangle);
-  background-position: 50% 50%;
-  background-repeat: no-repeat;
-  background-size: 8px 5px;
-  display: inline-block;
   height: 16px;
-  position: relative;
-  vertical-align: top;
+  left: 10px;
+  position: absolute;
+  top: 10px;
+  width: 16px;
 }
 
-html[dir=rtl] .expand-icon {
+html[dir=rtl] .tree-row > .expand-icon > core-icon {
   -webkit-transform: rotate(90deg);
 }
 
-.tree-item[expanded] > .tree-row > .expand-icon {
+.tree-item[expanded] > .tree-row > .expand-icon > core-icon {
   -webkit-transform: rotate(0);
-  background-image: -webkit-canvas(tree-triangle);
 }
 
-.tree-row .expand-icon {
+.tree-row > .expand-icon {
   visibility: hidden;
 }
 
-.tree-row[may-have-children] .expand-icon {
+.tree-row[may-have-children] > .expand-icon {
   visibility: visible;
 }
 
-.tree-row[has-children=false] .expand-icon {
+.tree-row[has-children=false] > .expand-icon {
   visibility: hidden;
 }
 

ui/file_manager/file_manager/foreground/js/compiled_resources.gyp

@@ -116,7 +116,6 @@
           './ui/search_box.js',
           './ui/share_dialog.js',
           './ui/suggest_apps_dialog.js',
-          './ui/tree.css.js',
           './main_window_component.js',
           './volume_manager_wrapper.js',
           './metadata/byte_reader.js',

ui/file_manager/file_manager/foreground/js/main_scripts.js

@@ -132,7 +132,6 @@
 //<include src="ui/search_box.js">
 //<include src="ui/share_dialog.js">
 //<include src="ui/suggest_apps_dialog.js">
-//<include src="ui/tree.css.js">
 //<include src="main_window_component.js">
 //<include src="volume_manager_wrapper.js">
 

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

@@ -40,8 +40,11 @@ Object.freeze(DirectoryItemTreeBaseMethods);
 
 var TREE_ITEM_INNTER_HTML =
     '<div class="tree-row">' +
-    ' <span class="expand-icon"></span>' +
-    ' <span class="icon"></span>' +
+    ' <paper-ripple fit></paper-ripple>' +
+    ' <span class="expand-icon">' +
+    '  <core-icon icon="expand-more" class="expand-icon"></core-icon>' +
+    ' </span>' +
+    ' <core-icon class="icon"></core-icon>' +
     ' <span class="label entry-name"></span>' +
     '</div>' +
     '<div class="tree-children"></div>';
@@ -351,7 +354,7 @@ function SubDirectoryItem(label, dirEntry, parentDirItem, tree) {
   if (location && location.rootType && location.isRootEntry) {
     icon.setAttribute('volume-type-icon', location.rootType);
   } else {
-    icon.setAttribute('file-type-icon', 'folder');
+    icon.icon = 'folder';
     item.updateSharedStatusIcon();
   }
 
@@ -399,7 +402,10 @@ SubDirectoryItem.prototype.updateSharedStatusIcon = function() {
       [this.dirEntry_],
       'external',
       function(metadata) {
-        icon.classList.toggle('shared', metadata[0] && metadata[0].shared);
+        if (metadata[0] && metadata[0].shared)
+          icon.icon = 'folder-shared';
+        else
+          icon.icon = 'folder';
       });
 };
 

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

-// Copyright 2013 The Chromium Authors. All rights reserved.
-// Use of this source code is governed by a BSD-style license that can be
-// found in the LICENSE file.
-
-/**
- * Custom version of chrome://resources/css/tree.css.js, adding support for
- * inverted arrow icons.
- */
-(function() {
-  'use strict';
-
-  /**
-   * @type {number}
-   * @const
-   */
-  var WIDTH = 14;
-
-  /**
-   * @type {number}
-   * @const
-   */
-  var HEIGHT = WIDTH / 2 + 2;
-
-  /**
-   * @type {number}
-   * @const
-   */
-  var MARGIN = 1;
-
-  /**
-   * @param {string} name CSS canvas identifier.
-   * @param {string} backgroundColor Background color.
-   * @param {string} strokeColor Outline color.
-   */
-  function prepareTriangle(name, backgroundColor, strokeColor) {
-    var ctx = document.getCSSCanvasContext('2d',
-                                           name,
-                                           WIDTH + MARGIN * 2,
-                                           HEIGHT + MARGIN * 2);
-
-    ctx.fillStyle = backgroundColor;
-    ctx.strokeStyle = strokeColor;
-    ctx.translate(MARGIN, MARGIN);
-
-    ctx.beginPath();
-    ctx.moveTo(0, 0);
-    ctx.lineTo(0, 2);
-    ctx.lineTo(WIDTH / 2, HEIGHT);
-    ctx.lineTo(WIDTH, 2);
-    ctx.lineTo(WIDTH, 0);
-    ctx.closePath();
-    ctx.fill();
-    ctx.stroke();
-  }
-
-  prepareTriangle(
-      'tree-triangle', 'rgba(122, 122, 122, 0.6)', 'rgba(0, 0, 0, 0)');
-  prepareTriangle('tree-triangle-inverted', '#ffffff', '#ffffff');
-})();

ui/file_manager/file_manager/main.html

@@ -152,7 +152,6 @@
       <script src="foreground/js/ui/search_box.js"></script>
       <script src="foreground/js/ui/share_dialog.js"></script>
       <script src="foreground/js/ui/suggest_apps_dialog.js"></script>
-      <script src="foreground/js/ui/tree.css.js"></script>
       <script src="foreground/js/main_window_component.js"></script>
       <script src="foreground/js/volume_manager_wrapper.js"></script>