Files.app: Update filetype icons.

- Update filetype icons.
- Use PNG images as icons in directory tree, instead of SVG images.

BUG=402344,455158
TEST=manually checked.

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

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

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

@@ -179,12 +179,12 @@ div.splitter {
 
 #directory-tree .tree-row > .expand-icon {
   flex: none;
-  height: 37px;
+  height: 36px;
   left: 3px;
-  margin: -12px -4px -13px;
+  margin: -12px -2px;
   right: 3px;
   top: 0;
-  width: 37px;
+  width: 36px;
 }
 
 #directory-tree .tree-row > .volume-icon {

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

@@ -18,24 +18,29 @@ tree {
 }
 
 .tree-row > .expand-icon {
+  -webkit-transform: rotate(-90deg);
+  -webkit-transition: all 150ms;
+  background-image: -webkit-image-set(
+      url(../images/files/ui/expand_more.png) 1x,
+      url(../images/files/ui/2x/expand_more.png) 2x);
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  vertical-align: top;
   position: relative;
 }
 
-.tree-row > .expand-icon > core-icon {
-  -webkit-transform: rotate(-90deg);
-  -webkit-transition: all 150ms;
-  height: 16px;
-  left: 10px;
-  position: absolute;
-  top: 10px;
-  width: 16px;
+.tree-row[selected] > .expand-icon {
+  background-image: -webkit-image-set(
+      url(../images/files/ui/expand_more_active.png) 1x,
+      url(../images/files/ui/2x/expand_more_active.png) 2x);
 }
 
-html[dir=rtl] .tree-row > .expand-icon > core-icon {
+html[dir=rtl] .tree-row > .expand-icon {
   -webkit-transform: rotate(90deg);
 }
 
-.tree-item[expanded] > .tree-row > .expand-icon > core-icon {
+.tree-item[expanded] > .tree-row > .expand-icon {
   -webkit-transform: rotate(0);
 }
 

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

@@ -41,10 +41,8 @@ Object.freeze(DirectoryItemTreeBaseMethods);
 var TREE_ITEM_INNTER_HTML =
     '<div class="tree-row">' +
     ' <paper-ripple fit class="recenteringTouch"></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="expand-icon"></span>' +
+    ' <span class="icon"></span>' +
     ' <span class="label entry-name"></span>' +
     '</div>' +
     '<div class="tree-children"></div>';
@@ -354,7 +352,7 @@ function SubDirectoryItem(label, dirEntry, parentDirItem, tree) {
   if (location && location.rootType && location.isRootEntry) {
     icon.setAttribute('volume-type-icon', location.rootType);
   } else {
-    icon.icon = 'folder';
+    icon.setAttribute('file-type-icon', 'folder');
     item.updateSharedStatusIcon();
   }
 
@@ -397,14 +395,11 @@ SubDirectoryItem.prototype.setContextMenu = function(menu) {
  * @override
  */
 SubDirectoryItem.prototype.updateSharedStatusIcon = function() {
-  var iconElement = this.querySelector('.icon');
+  var icon = this.querySelector('.icon');
   this.parentTree_.fileSystemMetadata.notifyEntriesChanged([this.dirEntry_]);
   this.parentTree_.fileSystemMetadata.get([this.dirEntry_], ['shared']).then(
       function(metadata) {
-        if (metadata[0].shared)
-          iconElement.icon = 'folder-shared';
-        else
-          iconElement.icon = 'folder';
+        icon.classList.toggle('shared', metadata[0] && metadata[0].shared);
       });
 };