Introduce icons for computers grand root, computes and external devices.

This CL introduces the new icons for the Computers grand root and the
computers located under it. It re-uses the USB icon for "USB and
External Devices".

Plumb through the required metadata so we can work out if an entry
is a machine root or a external media root, so we can show the
different icons. Add a test for this.

TODO: Get the USB icon to correctly show in the left hand directory
tree. I thought this CL was big enough without including that followup
fix.

Bug: 884020
Change-Id: I95151444b65f1c0fd680b761fcaa6190105d8fbf
Reviewed-on: https://chromium-review.googlesource.com/c/1338581Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Stuart Langley <slangley@chromium.org>
Cr-Commit-Position: refs/heads/master@{#609154}

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

@@ -299,29 +299,29 @@ tree .tree-item[selected] > .tree-row >
 
 [volume-type-icon='computers_grand_root'] {
   background-image: -webkit-image-set(
-      url(../images/volumes/my_files.png) 1x,
-      url(../images/volumes/2x/my_files.png) 2x);
+      url(../images/volumes/devices.png) 1x,
+      url(../images/volumes/2x/devices.png) 2x);
 }
 
 .tree-row[selected] [volume-type-icon='computers_grand_root'] {
   background-image: -webkit-image-set(
-      url(../images/volumes/my_files_active.png) 1x,
-      url(../images/volumes/2x/my_files_active.png) 2x);
+      url(../images/volumes/devices_active.png) 1x,
+      url(../images/volumes/2x/devices_active.png) 2x);
 }
 
 [volume-type-icon='computer'],
 .computers-root[file-type-icon='folder'] {
   background-image: -webkit-image-set(
-      url(../images/volumes/hard_drive.png) 1x,
-      url(../images/volumes/2x/hard_drive.png) 2x);
+      url(../images/volumes/computer.png) 1x,
+      url(../images/volumes/2x/computer.png) 2x);
 }
 
 .tree-row[selected] [volume-type-icon='computer'],
 tree .tree-item[selected] > .tree-row >
 .computers-root[file-type-icon='folder'] {
   background-image: -webkit-image-set(
-      url(../images/volumes/hard_drive_active.png) 1x,
-      url(../images/volumes/2x/hard_drive_active.png) 2x);
+      url(../images/volumes/computer_active.png) 1x,
+      url(../images/volumes/2x/computer_active.png) 2x);
 }
 
 [volume-type-icon='drive_offline'] {
@@ -360,12 +360,15 @@ tree .tree-item[selected] > .tree-row >
       url(../images/volumes/2x/recent_active.png) 2x);
 }
 
+.external-media-root[file-type-icon='folder'],
 [volume-type-icon='removable'] {
   background-image: -webkit-image-set(
       url(../images/volumes/usb.png) 1x,
       url(../images/volumes/2x/usb.png) 2x);
 }
 
+tree .tree-item[selected] > .tree-row >
+.external-media-root[file-type-icon='folder'],
 .tree-row[selected] [volume-type-icon='removable'] {
   background-image: -webkit-image-set(
       url(../images/volumes/usb_active.png) 1x,

ui/file_manager/file_manager/foreground/js/metadata/external_metadata_provider.js

@@ -41,7 +41,10 @@ ExternalMetadataProvider.PROPERTY_NAMES = [
   'canDelete',
   'canRename',
   'canAddChildren',
-  'canShare'
+  'canShare',
+  'isMachineRoot',
+  'isExternalMedia',
+  'isArbitrarySyncFolder',
 ];
 
 ExternalMetadataProvider.prototype.__proto__ = MetadataProvider.prototype;
@@ -138,6 +141,13 @@ ExternalMetadataProvider.prototype.convertResults_ =
       item.canAddChildren = prop.canAddChildren;
     if (prop.canShare !== undefined || nameMap['canShare'])
       item.canShare = prop.canShare;
+    if (prop.isMachineRoot !== undefined || nameMap['isMachineRoot'])
+      item.isMachineRoot = prop.isMachineRoot;
+    if (prop.isExternalMedia !== undefined || nameMap['isExternalMedia'])
+      item.isExternalMedia = prop.isExternalMedia;
+    if (prop.isArbitrarySyncFolder !== undefined ||
+        nameMap['isArbitrarySyncFolder'])
+      item.isArbitrarySyncFolder = prop.isArbitrarySyncFolder;
     results.push(item);
   }
   return results;

ui/file_manager/file_manager/foreground/js/metadata/external_metadata_provider_unittest.js

@@ -23,13 +23,22 @@ function testExternalMetadataProviderBasic(callback) {
         assertEquals(2, names.length);
         assertEquals('modificationTime', names[0]);
         assertEquals('size', names[1]);
-        callback([{
-          modificationTime: new Date(2015, 0, 1).getTime(),
-          size: 1024
-        }, {
-          modificationTime: new Date(2015, 1, 2).getTime(),
-          size: 2048
-        }]);
+        callback([
+          {
+            modificationTime: new Date(2015, 0, 1).getTime(),
+            size: 1024,
+            isMachineRoot: true,
+            isExternalMedia: true,
+            isArbitrarySyncFolder: true,
+          },
+          {
+            modificationTime: new Date(2015, 1, 2).getTime(),
+            size: 2048,
+            isMachineRoot: false,
+            isExternalMedia: false,
+            isArbitrarySyncFolder: false,
+          }
+        ]);
       }
     },
     runtime: {lastError: null}
@@ -44,9 +53,15 @@ function testExternalMetadataProviderBasic(callback) {
         new Date(2015, 0, 1).toString(),
         results[0].modificationTime.toString());
     assertEquals(1024, results[0].size);
+    assertEquals(true, results[0].isMachineRoot);
+    assertEquals(true, results[0].isExternalMedia);
+    assertEquals(true, results[0].isArbitrarySyncFolder);
     assertEquals(
         new Date(2015, 1, 2).toString(),
         results[1].modificationTime.toString());
     assertEquals(2048, results[1].size);
+    assertEquals(false, results[1].isMachineRoot);
+    assertEquals(false, results[1].isExternalMedia);
+    assertEquals(false, results[1].isArbitrarySyncFolder);
   }), callback);
 }

ui/file_manager/file_manager/foreground/js/ui/file_table.js

@@ -960,8 +960,12 @@ FileTable.prototype.updateListItemsMetadata = function(type, entries) {
       filelist.updateListItemExternalProps(
           listItem,
           this.metadataModel_.getCache(
-              [entry], ['availableOffline', 'customIconUrl', 'shared'])[0],
-          util.isTeamDriveRoot(entry), util.isComputersRoot(entry));
+              [entry],
+              [
+                'availableOffline', 'customIconUrl', 'shared', 'isMachineRoot',
+                'isExternalMedia'
+              ])[0],
+          util.isTeamDriveRoot(entry));
     });
   } else if (type === 'import-history') {
     forEachCell('.table-row-cell > .status', function(item, entry, unused) {

ui/file_manager/file_manager/foreground/js/ui/file_table_list.js

@@ -132,11 +132,12 @@ filelist.decorateListItem = function(li, entry, metadataModel) {
   // The metadata may not yet be ready. In that case, the list item will be
   // updated when the metadata is ready via updateListItemsMetadata. For files
   // not on an external backend, externalProps is not available.
-  var externalProps = metadataModel.getCache(
-      [entry], ['hosted', 'availableOffline', 'customIconUrl', 'shared'])[0];
+  var externalProps = metadataModel.getCache([entry], [
+    'hosted', 'availableOffline', 'customIconUrl', 'shared', 'isMachineRoot',
+    'isExternalMedia'
+  ])[0];
   filelist.updateListItemExternalProps(
-      li, externalProps, util.isTeamDriveRoot(entry),
-      util.isComputersRoot(entry));
+      li, externalProps, util.isTeamDriveRoot(entry));
 
   // Overriding the default role 'list' to 'listbox' for better
   // accessibility on ChromeOS.
@@ -201,10 +202,9 @@ filelist.renderFileNameLabel = function(doc, entry) {
  * Updates grid item or table row for the externalProps.
  * @param {cr.ui.ListItem} li List item.
  * @param {Object} externalProps Metadata.
- * @param {boolean} isTeamDriveRoot Whether the item is a team drive root entry.
  */
 filelist.updateListItemExternalProps = function(
-    li, externalProps, isTeamDriveRoot, isComputersRoot) {
+    li, externalProps, isTeamDriveRoot) {
   if (li.classList.contains('file')) {
     if (externalProps.availableOffline === false)
       li.classList.add('dim-offline');
@@ -227,7 +227,9 @@ filelist.updateListItemExternalProps = function(
   if (li.classList.contains('directory')) {
     iconDiv.classList.toggle('shared', !!externalProps.shared);
     iconDiv.classList.toggle('team-drive-root', !!isTeamDriveRoot);
-    iconDiv.classList.toggle('computers-root', !!isComputersRoot);
+    iconDiv.classList.toggle('computers-root', !!externalProps.isMachineRoot);
+    iconDiv.classList.toggle(
+        'external-media-root', !!externalProps.isExternalMedia);
   }
 };