Files app: Grid view add titles for folders and files

For Grid View, add titles "Folders" and "Files" for the respective
sections.

Add test to check that the title is available.

Add translations and their screenshots.

Test: browser_tests --gtest_filter="*showGridViewTitles*"
Bug: 992822
Change-Id: Ic71d31891e2d8575920fa815b0a9df5e49bc5ddb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2087231
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#747085}

chrome/browser/chromeos/file_manager/file_manager_browsertest.cc

@@ -780,6 +780,7 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
                       TestCase("showGridViewDrive"),
                       TestCase("showGridViewButtonSwitches"),
                       TestCase("showGridViewKeyboardSelectionA11y"),
+                      TestCase("showGridViewTitles").FilesNg(),
                       TestCase("showGridViewMouseSelectionA11y")));
 
 WRAPPED_INSTANTIATE_TEST_SUITE_P(

chrome/browser/chromeos/file_manager/file_manager_string_util.cc

@@ -884,6 +884,9 @@ std::unique_ptr<base::DictionaryValue> GetFileManagerStrings() {
   SET_STRING("OPEN_A11Y_PLURAL", IDS_FILE_BROWSER_OPEN_A11Y_PLURAL);
   SET_STRING("A11Y_VOLUME_EJECT", IDS_FILE_BROWSER_A11Y_VOLUME_EJECT);
   SET_STRING("FILEMANAGER_APP_NAME", IDS_FILEMANAGER_APP_NAME);
+  SET_STRING("GRID_VIEW_FOLDERS_TITLE",
+             IDS_FILE_BROWSER_GRID_VIEW_FOLDERS_TITLE);
+  SET_STRING("GRID_VIEW_FILES_TITLE", IDS_FILE_BROWSER_GRID_VIEW_FILES_TITLE);
 #undef SET_STRING
 
   dict->SetString(

ui/chromeos/file_manager_strings.grdp

@@ -1399,6 +1399,12 @@
   <message name="IDS_FILE_BROWSER_A11Y_VOLUME_EJECT" desc="Text to be used by screen reader to indicate users that the eject volume action has finished.">
     <ph name="VOLUME_NAME">$1<ex>file_name.rar</ex></ph> has been ejected.
   </message>
+  <message name="IDS_FILE_BROWSER_GRID_VIEW_FOLDERS_TITLE" desc="Title displayed in Grid View above the folders.">
+    Folders
+  </message>
+  <message name="IDS_FILE_BROWSER_GRID_VIEW_FILES_TITLE" desc="Title dislayed in Grid View above the files.">
+    Files
+  </message>
 
 <!-- Common for Audio player and Media player -->
   <message name="IDS_MEDIA_PLAYER_PLAY_BUTTON_LABEL" desc="Label for the Play button of media players (audio player / video player).">

ui/chromeos/file_manager_strings_grdp/IDS_FILE_BROWSER_GRID_VIEW_FILES_TITLE.png.sha1

+59d4495cee10279e961292882a46b725afa639b6
\ No newline at end of file

ui/chromeos/file_manager_strings_grdp/IDS_FILE_BROWSER_GRID_VIEW_FOLDERS_TITLE.png.sha1

+59d4495cee10279e961292882a46b725afa639b6
\ No newline at end of file

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

@@ -1633,7 +1633,18 @@ html[dir='rtl'] .banner-close {
 body.files-ng .thumbnail-grid {
   padding-inline-end: 20px;
   padding-inline-start: 16px;
+}
+
+body.files-ng grid .grid-title {
+  color: var(--google-grey-700);
+  font-family: 'Roboto Medium';
+  padding-inline-start: 16px;
   padding-top: 20px;
+  width: 100%;
+}
+
+body.files-ng grid .grid-title.files {
+  padding-top: calc(20px + 16px);
 }
 
 body[type='full-page'] .thumbnail-frame > .img-container {
@@ -1897,6 +1908,10 @@ body.files-ng #list-container .thumbnail-grid .thumbnail-item[lead].directory
   height: 5px;
 }
 
+body.files-ng .thumbnail-grid > .spacer {
+  height: 0;
+}
+
 body:not(.check-select) .thumbnail-grid.image-dominant
     .can-hide-filename.thumbnail-loaded:not([selected]) .thumbnail-bottom {
   display: none;

ui/file_manager/file_manager/foreground/js/ui/file_grid.js

@@ -243,6 +243,7 @@ class FileGrid extends cr.ui.Grid {
 
     const afterFiller = this.afterFiller_;
     const columns = this.columns;
+    let previousTitle = '';
 
     for (let item = this.beforeFiller_.nextSibling; item !== afterFiller;) {
       const next = item.nextSibling;
@@ -255,6 +256,25 @@ class FileGrid extends cr.ui.Grid {
       const index = item.listIndex;
       const nextIndex = index + 1;
 
+      if (util.isFilesNg()) {
+        const entry = this.dataModel.item(index);
+        if (entry.isDirectory && previousTitle !== 'dir') {
+          // For first Directory we add a title div before the element.
+          const title = document.createElement('div');
+          title.innerText = str('GRID_VIEW_FOLDERS_TITLE');
+          title.classList.add('grid-title', 'folders');
+          this.insertBefore(title, item);
+          previousTitle = 'dir';
+        } else if (!entry.isDirectory && previousTitle !== 'file') {
+          // For first File we add a title div before the element.
+          const title = document.createElement('div');
+          title.innerText = str('GRID_VIEW_FILES_TITLE');
+          title.classList.add('grid-title', 'files');
+          this.insertBefore(title, item);
+          previousTitle = 'file';
+        }
+      }
+
       // Invisible pinned item could be outside of the
       // [beginIndex, endIndex). Ignore it.
       if (index >= beginIndex && nextIndex < endIndex &&

ui/file_manager/integration_tests/file_manager/grid_view.js

@@ -102,3 +102,17 @@ testcase.showGridViewMouseSelectionA11y = async () => {
   const isGridView = true;
   return testcase.fileListMouseSelectionA11y(isGridView);
 };
+
+/**
+ * Tests that Grid View shows "Folders" and "Files" titles before folders and
+ * files respectively.
+ */
+testcase.showGridViewTitles = async () => {
+  const appId = await showGridView(RootPath.DOWNLOADS, BASIC_LOCAL_ENTRY_SET);
+
+  const titles = await remoteCall.callRemoteTestUtil(
+      'queryAllElements', appId, ['.thumbnail-grid .grid-title']);
+  chrome.test.assertEq(2, titles.length, 'Grid view should show 2 titles');
+  const titleTexts = titles.map((title) => title.text).sort();
+  chrome.test.checkDeepEq(['Files', 'Folders'], titleTexts);
+};