Hide filename edit field when there is no image

Hide |filenameEdit_| line edit box when there is no image to be displayed.
This fixes an undesired grey line appearing as the bottom of this edit box.
Changing the "disabled" state doesn't change the style of this box,
"disabled" state is only used for read-only behaviour not style.

R=fukino@chromium.org

Bug: 796503
Change-Id: I6fc9a4eb218231781325ba7a5af992b12610b929
Reviewed-on: https://chromium-review.googlesource.com/c/1212263Reviewed-by: Noel Gordon <noel@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Alexander Nohe <nohe@chromium.org>
Cr-Commit-Position: refs/heads/master@{#596972}

chrome/browser/chromeos/file_manager/gallery_browsertest.cc

@@ -330,4 +330,9 @@ IN_PROC_BROWSER_TEST_F(GalleryBrowserTest, ActivateVideoFromThumbnailMode) {
   StartTest();
 }
 
+IN_PROC_BROWSER_TEST_F(GalleryBrowserTest, DeleteSingleOpenPhotoOnDownloads) {
+  set_test_case_name("deleteSingleOpenPhotoOnDownloads");
+  StartTest();
+}
+
 }  // namespace file_manager

ui/file_manager/gallery/js/gallery.js

@@ -814,6 +814,9 @@ Gallery.prototype.updateSelectionAndState_ = function() {
     selectedItem.touch();
     this.dataModel_.evictCache();
 
+    // Filename Edit field shows for anything selected.
+    this.filenameEdit_.hidden = false;
+
     // Update the title and the display name.
     if (numSelectedItems === 1) {
       document.title = this.selectedEntry_.name;
@@ -841,6 +844,7 @@ Gallery.prototype.updateSelectionAndState_ = function() {
     }
   } else {
     document.title = '';
+    this.filenameEdit_.hidden = true;
     this.filenameEdit_.disabled = true;
     this.filenameEdit_.value = '';
     this.resizeRenameField_();
@@ -1100,4 +1104,4 @@ if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', initializeGallery);
 } else {
   initializeGallery();
-}
+}
\ No newline at end of file

ui/file_manager/integration_tests/gallery/open_image_files.js

@@ -161,3 +161,29 @@ testcase.openMultipleImagesOnDrive = function() {
 testcase.openMultipleImagesAndChangeToSlideModeOnDownloads = function() {
   return openMultipleImagesAndChangeToSlideMode('local', 'downloads');
 };
+
+/**
+ * Runs a test to check whether the rename-input field is hidden after
+ * deleting the only selected image in the gallery.
+ * @return {Promise} Promise to be fulfilled with on success.
+ */
+testcase.deleteSingleOpenPhotoOnDownloads = function() {
+  const launchedPromise = launch('local', 'downloads', [ENTRIES.desktop]);
+  return launchedPromise.then(function(args) {
+    const appId = args.appId;
+    return gallery.waitForElement(appId, 'button.delete')
+        .then(function() {
+          // Click the delete button.
+          return gallery.waitAndClickElement(appId, 'button.delete');
+        })
+        .then(function(result) {
+          chrome.test.assertTrue(!!result);
+          // Wait and click delete button of confirmation dialog.
+          return gallery.waitAndClickElement(appId, '.cr-dialog-ok');
+        })
+        .then(function() {
+          // Check: The edit name field should hide.
+          return gallery.waitForElement(appId, '#rename-input[hidden]');
+        });
+  });
+};
\ No newline at end of file

ui/file_manager/integration_tests/gallery/thumbnail_mode.js

@@ -118,6 +118,9 @@ function deleteAllImagesInThumbnailMode(testVolumeName, volumeType, operation) {
     chrome.test.assertTrue(!!result);
     // Wait until error banner is shown.
     return gallery.waitForElement(appId, '.gallery[error] .error-banner');
+  }).then(function() {
+    // Check: The edit name field should hide.
+    return gallery.waitForElement(appId, '#rename-input[hidden]');
   });
 }
 
@@ -160,6 +163,9 @@ function emptySpaceClickUnselectsInThumbnailMode(testVolumeName, volumeType) {
   }).then(function(result) {
     // Confirm slideshow button is disabled.
     return gallery.waitForElement(appId, 'button.slideshow[disabled]');
+  }).then(function() {
+    // Check: The edit name field should hide.
+    return gallery.waitForElement(appId, '#rename-input[hidden]');
   }).then(function() {
     // Switch back to slide mode by clicking mode button.
     return gallery.waitAndClickElement(appId, 'button.mode:not([disabled])');