Add detail icon for pinned files in Drive

Bug: 1115025
Change-Id: If5d1c23f2a267b6e6b674e2f2d0105e0d2e3164f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2360057Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Austin Tankiang <austinct@chromium.org>
Cr-Commit-Position: refs/heads/master@{#804825}

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

@@ -2554,7 +2554,10 @@ input.rename {
   text-align: inherit;
 }
 
-.table-row-cell .filename-label,
+.table-row-cell .filename-label {
+  flex: initial;
+}
+
 .table-row-cell input.rename {
   flex: auto;
 }
@@ -3286,6 +3289,20 @@ body.files-ng #list-container li .detail-thumbnail {
   width: 32px;
 }
 
+.detail-pinned {
+  display: none;
+}
+
+body.files-ng #list-container li.pinned:not([renaming]) .detail-pinned {
+  -webkit-mask-image: url(../images/files/ui/offline.svg);
+  -webkit-mask-position: center;
+  -webkit-mask-repeat: no-repeat;
+  background-color: currentColor;
+  display: flex;
+  height: 40px;
+  width: 40px;
+}
+
 #new-folder-button {
   flex: none;
 }

ui/file_manager/file_manager/foreground/images/files/ui/offline.svg

+<svg width="20" height="20" fill="none" xmlns="http://www.w3.org/2000/svg"><g fill="#5F6368"><path d="M11.91 6.244a.833.833 0 111.18 1.179l-3.334 3.333a.833.833 0 01-1.179 0L6.911 9.089a.833.833 0 011.178-1.178l1.078 1.077 2.744-2.744zM6.75 12a.75.75 0 000 1.5h6.5a.75.75 0 000-1.5h-6.5z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-2 0a6 6 0 11-12 0 6 6 0 0112 0z"/></g></svg>
\ No newline at end of file

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

@@ -843,6 +843,9 @@ class FileTable extends cr.ui.Table {
     label.className = 'detail-name';
     label.appendChild(
         filelist.renderFileNameLabel(this.ownerDocument, entry, locationInfo));
+    if (locationInfo.isDriveBased) {
+      label.appendChild(filelist.renderPinned(this.ownerDocument));
+    }
     return label;
   }
 
@@ -1081,7 +1084,7 @@ class FileTable extends cr.ui.Table {
                 [entry],
                 [
                   'availableOffline', 'customIconUrl', 'shared',
-                  'isMachineRoot', 'isExternalMedia', 'hosted'
+                  'isMachineRoot', 'isExternalMedia', 'hosted', 'pinned'
                 ])[0],
             util.isTeamDriveRoot(entry));
       });
@@ -1106,7 +1109,7 @@ class FileTable extends cr.ui.Table {
     const dateId = item.id + '-date';
     filelist.decorateListItem(item, entry, assert(this.metadataModel_));
     item.setAttribute('file-name', entry.name);
-    item.querySelector('.entry-name').setAttribute('id', nameId);
+    item.querySelector('.detail-name').setAttribute('id', nameId);
     item.querySelector('.size').setAttribute('id', sizeId);
     item.querySelector('.date').setAttribute('id', dateId);
     item.setAttribute('aria-labelledby', nameId);

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

@@ -144,7 +144,7 @@ filelist.decorateListItem = (li, entry, metadataModel) => {
   // not on an external backend, externalProps is not available.
   const externalProps = metadataModel.getCache([entry], [
     'hosted', 'availableOffline', 'customIconUrl', 'shared', 'isMachineRoot',
-    'isExternalMedia'
+    'isExternalMedia', 'pinned'
   ])[0];
   filelist.updateListItemExternalProps(
       li, externalProps, util.isTeamDriveRoot(entry));
@@ -212,6 +212,17 @@ filelist.renderFileNameLabel = (doc, entry, locationInfo) => {
   return box;
 };
 
+/**
+ * Renders the Drive pinned marker in the detail table.
+ * @return {!HTMLDivElement} Created element.
+ */
+filelist.renderPinned = (doc) => {
+  const icon = /** @type {!HTMLDivElement} */ (doc.createElement('div'));
+  icon.className = 'detail-pinned';
+  icon.setAttribute('aria-label', str('OFFLINE_COLUMN_LABEL'));
+  return icon;
+};
+
 /**
  * Updates grid item or table row for the externalProps.
  * @param {cr.ui.ListItem} li List item.
@@ -219,22 +230,13 @@ filelist.renderFileNameLabel = (doc, entry, locationInfo) => {
  */
 filelist.updateListItemExternalProps = (li, externalProps, isTeamDriveRoot) => {
   if (li.classList.contains('file')) {
-    if (externalProps.availableOffline === false) {
-      li.classList.add('dim-offline');
-    } else {
-      li.classList.remove('dim-offline');
-    }
-    // TODO(mtomasz): Consider adding some vidual indication for files which
-    // are not cached on LTE. Currently we show them as normal files.
-    // crbug.com/246611.
-
-    if (externalProps.hosted === true) {
-      li.classList.add('dim-hosted');
-    } else {
-      li.classList.remove('dim-hosted');
-    }
+    li.classList.toggle(
+        'dim-offline', externalProps.availableOffline === false);
+    li.classList.toggle('dim-hosted', !!externalProps.hosted);
   }
 
+  li.classList.toggle('pinned', !!externalProps.pinned);
+
   const iconDiv = li.querySelector('.detail-icon');
   if (!iconDiv) {
     return;

ui/file_manager/integration_tests/file_manager/drive_specific.js

@@ -227,14 +227,16 @@ testcase.drivePinMultiple = async () => {
       '#file-context-menu:not([hidden]) ' +
           '[command="#toggle-pinned"]:not([checked])');
 
-  // Wait the toggle pinned async action to finish, so the next call to display
-  // context menu is after the action has finished.
+  // Wait for the toggle pinned async action to finish, so the next call to
+  // display context menu is after the action has finished.
   await remoteCall.waitForElement(appId, '#file-context-menu[hidden]');
 
-  // Wait the pinned action to finish, it's flagged in the file list by
-  // removing CSS class "dim-offline".
+  // Wait for the pinned action to finish, it's flagged in the file list by
+  // removing CSS class "dim-offline" and adding class "pinned".
   await remoteCall.waitForElementLost(
       appId, '#file-list .dim-offline[file-name="world.ogv"]');
+  await remoteCall.waitForElement(
+      appId, '#file-list .pinned[file-name="world.ogv"] .detail-pinned');
 
   // Select world.ogv by itself.
   await remoteCall.waitAndClickElement(
@@ -272,16 +274,16 @@ testcase.drivePinFileMobileNetwork = async () => {
   chrome.test.assertTrue(await remoteCall.callRemoteTestUtil(
       'fakeMouseRightClick', appId, ['.table-row[selected]']));
 
-  // Wait menu to appear and click on toggle pinned.
+  // Wait for the menu to appear and click on toggle pinned.
   await remoteCall.waitForElement(appId, '#file-context-menu:not([hidden])');
   await remoteCall.waitAndClickElement(
       appId, '[command="#toggle-pinned"]:not([hidden]):not([disabled])');
 
-  // Wait the toggle pinned async action to finish, so the next call to display
-  // context menu is after the action has finished.
+  // Wait for the toggle pinned async action to finish, so the next call to
+  // display context menu is after the action has finished.
   await remoteCall.waitForElement(appId, '#file-context-menu[hidden]');
 
-  // Wait the pinned action to finish, it's flagged in the file list by
+  // Wait for the pinned action to finish, it's flagged in the file list by
   // removing CSS class "dim-offline".
   await remoteCall.waitForElementLost(
       appId, '#file-list .dim-offline[file-name="hello.txt"]');
@@ -293,6 +295,8 @@ testcase.drivePinFileMobileNetwork = async () => {
 
   // Check: File is pinned.
   await remoteCall.waitForElement(appId, '[command="#toggle-pinned"][checked]');
+  await remoteCall.waitForElement(
+      appId, '#file-list .pinned[file-name="hello.txt"] .detail-pinned');
   await repeatUntil(async () => {
     const idSet =
         await remoteCall.callRemoteTestUtil('getNotificationIDs', null, []);