[quickview] Add a delete-button

Add a delete-button, implemented with a <cr-button>, in-between the
open-button and metadata-info-button.

Change tab-index tests to support the delete-button.

Bug: 803259
Change-Id: Ifee06c3acdb346c5b54b7a4895926cc2406f44c6
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2043334Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Commit-Queue: Rachel Sugrono <rsugrono@google.com>
Cr-Commit-Position: refs/heads/master@{#739308}

chrome/browser/chromeos/file_manager/file_manager_string_util.cc

@@ -715,6 +715,8 @@ std::unique_ptr<base::DictionaryValue> GetFileManagerStrings() {
              IDS_FILE_BROWSER_QUICK_VIEW_NO_PREVIEW_AVAILABLE);
   SET_STRING("QUICK_VIEW_OPEN_IN_NEW_BUTTON_LABEL",
              IDS_FILE_BROWSER_QUICK_VIEW_OPEN_IN_NEW_BUTTON_LABEL);
+  SET_STRING("QUICK_VIEW_DELETE_BUTTON_LABEL",
+             IDS_FILE_BROWSER_QUICK_VIEW_DELETE_BUTTON_LABEL);
   SET_STRING("QUICK_VIEW_TOGGLE_METADATA_BOX_BUTTON_LABEL",
              IDS_FILE_BROWSER_QUICK_VIEW_TOGGLE_METADATA_BOX_BUTTON_LABEL);
   SET_STRING("READ_ONLY_LABEL", IDS_FILE_BROWSER_READ_ONLY_LABEL);

ui/chromeos/file_manager_strings.grdp

@@ -249,6 +249,9 @@
   <message name="IDS_FILE_BROWSER_QUICK_VIEW_OPEN_IN_NEW_BUTTON_LABEL" desc="Label for button to open a file with external app.">
     Open
   </message>
+  <message name="IDS_FILE_BROWSER_QUICK_VIEW_DELETE_BUTTON_LABEL" desc="Label for button to delete a file in QuickView.">
+    Delete
+  </message>
   <message name="IDS_FILE_BROWSER_QUICK_VIEW_TOGGLE_METADATA_BOX_BUTTON_LABEL" desc="Label for button to toggle show/hide status of metadata box.">
     File info
   </message>

ui/file_manager/file_manager/foreground/elements/files_quick_view.css

@@ -164,6 +164,13 @@ files-icon-button {
   text-transform: uppercase;
 }
 
+#delete-button > .icon {
+  -webkit-mask-image: url(../images/files/ui/delete.svg);
+  background-color: currentColor;
+  height: 16px;
+  width: 16px;
+}
+
 iron-icon {
   height: 16px;
   width: 16px;

ui/file_manager/file_manager/foreground/elements/files_quick_view.html

@@ -28,6 +28,9 @@
            <cr-button id="open-button" on-click="onOpenInNewButtonTap" hidden$="[[!shouldShowOpenButton_(hasTask, isModal)]]" aria-label="$i18n{QUICK_VIEW_OPEN_IN_NEW_BUTTON_LABEL}">
              <span>$i18n{QUICK_VIEW_OPEN_IN_NEW_BUTTON_LABEL}</span>
            </cr-button>
+           <cr-button id="delete-button" on-click="onDeleteButtonTap" hidden$="[[!shouldShowDeleteButton_(canDelete, isModal)]]" aria-label="$i18n{QUICK_VIEW_DELETE_BUTTON_LABEL}" has-tooltip>
+            <span class="icon"></span>
+         </cr-button>
            <files-icon-button toggles id="metadata-button" on-tap="onMetadataButtonTap_" active="{{metadataBoxActive}}" aria-label="$i18n{QUICK_VIEW_TOGGLE_METADATA_BOX_BUTTON_LABEL}" tabindex="0" has-tooltip>
            </files-icon-button>
         </div>

ui/file_manager/integration_tests/file_manager/quick_view.js

@@ -1838,6 +1838,7 @@
     const tabQueries = [
       {'query': ['#quick-view', '[aria-label="Back"]:focus']},
       {'query': ['#quick-view', '[aria-label="Open"]:focus']},
+      {'query': ['#quick-view', '[aria-label="Delete"]:focus']},
       {'query': ['#quick-view', '[aria-label="File info"]:focus']},
       {'query': ['#quick-view', '[aria-label="Back"]:focus']},
     ];
@@ -1874,6 +1875,7 @@
     const tabQueries = [
       {'query': ['#quick-view', '[aria-label="Back"]:focus']},
       {'query': ['#quick-view', '[aria-label="Open"]:focus']},
+      {'query': ['#quick-view', '[aria-label="Delete"]:focus']},
       {'query': ['#quick-view', '[aria-label="File info"]:focus']},
       {'query': ['#quick-view']},  // Tab past the content panel.
       {'query': ['#quick-view', '[aria-label="Back"]:focus']},
@@ -1918,6 +1920,7 @@
     const tabQueries = [
       {'query': ['#quick-view', '[aria-label="Back"]:focus']},
       {'query': ['#quick-view', '[aria-label="Open"]:focus']},
+      {'query': ['#quick-view', '[aria-label="Delete"]:focus']},
       {'query': ['#quick-view', '[aria-label="File info"]:focus']},
     ];
 
@@ -1973,6 +1976,7 @@
     const tabQueries = [
       {'query': ['#quick-view', '[aria-label="Back"]:focus']},
       {'query': ['#quick-view', '[aria-label="Open"]:focus']},
+      {'query': ['#quick-view', '[aria-label="Delete"]:focus']},
       {'query': ['#quick-view', '[aria-label="File info"]:focus']},
     ];