Hide feedback panels for file picker

Feedback panels were visible on all active File Manager windows.

Disable display of the panels if the File Picker is active
which is deduced by using the 'type' of the main window body
and using the existing CSS rule for visibility when the main
body type is 'full-page' only.

Also moves the panel location in the DOM to be contained by the
dialog main panel in all cases so that positioning for layout
will be relative to the dialog-main <div> rather than
the 'dialog-container'.

No-try: true
Bug: 988193
Tests: browser_tests --gtest_filter="*PanelsDisabled".
Change-Id: I5d152ab8a0d2cd7bf299c706223505da97ca7a27
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1723572Reviewed-by: Alex Danilo <adanilo@chromium.org>
Reviewed-by: Noel Gordon <noel@chromium.org>
Commit-Queue: Alex Danilo <adanilo@chromium.org>
Cr-Commit-Position: refs/heads/master@{#683080}

chrome/browser/chromeos/file_manager/file_manager_browsertest.cc

@@ -838,6 +838,7 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
             .WithBrowser()
             .InIncognito()
             .EnableMyFilesVolume(),
+        TestCase("openFileDialogPanelsDisabled").WithBrowser(),
         TestCase("saveFileDialogDownloads").WithBrowser(),
         TestCase("saveFileDialogDownloads").WithBrowser().EnableMyFilesVolume(),
         TestCase("saveFileDialogDownloads").WithBrowser().InGuestMode(),
@@ -853,6 +854,7 @@ WRAPPED_INSTANTIATE_TEST_SUITE_P(
         TestCase("saveFileDialogDownloadsNewFolderButton")
             .WithBrowser()
             .EnableMyFilesVolume(),
+        TestCase("saveFileDialogPanelsDisabled").WithBrowser(),
         TestCase("openFileDialogCancelDownloads").WithBrowser(),
         TestCase("openFileDialogCancelDownloads")
             .WithBrowser()

ui/file_manager/file_manager/main.html

@@ -544,15 +544,15 @@
             <button id="format-button" command="#format"></button>
           </div>
         </div>
+        <div class="files-feedback-panels" visibleif="full-page">
+          <xf-display-panel id="completed-panel">
+          </xf-display-panel>
+          <div class="files-vertical-padder-8"></div>
+          <xf-display-panel id="progress-panel">
+          </xf-display-panel>
+        </div>
       </div>
     </div>
-    <div class="files-feedback-panels">
-      <xf-display-panel id="completed-panel">
-      </xf-display-panel>
-      <div class="files-vertical-padder-8"></div>
-      <xf-display-panel id="progress-panel">
-      </xf-display-panel>
-    </div>
     <div class="dialog-footer progressable" tabindex="-1"
          visibleif="saveas-file open-file open-multi-file folder upload-folder">
       <div class="left">

ui/file_manager/integration_tests/file_manager/file_dialog.js

@@ -221,6 +221,25 @@ async function openFileDialogSendEscapeKey(volume, name) {
       await openAndWaitForClosingDialog(type, volume, entrySet, closer));
 }
 
+/**
+ * Tests for display:none status of feedback panels in Files app.
+ *
+ * @param {string} type Type of dialog to open.
+ */
+async function checkFeedbackDisplayHidden(type) {
+  // Open dialog of the specified 'type'.
+  chrome.fileSystem.chooseEntry({type: type}, (entry) => {});
+  const appId = await remoteCall.waitForWindow('dialog#');
+
+  // Wait to finish initial load.
+  await remoteCall.waitFor('isFileManagerLoaded', appId, true);
+  // Check the display style of the feedback panels container.
+  const element = await remoteCall.waitForElementStyles(
+      appId, ['.files-feedback-panels'], ['display']);
+  // Check that CSS display style is 'none'.
+  chrome.test.assertTrue(element.styles['display'] === 'none');
+}
+
 /**
  * Test file present in Downloads.
  * @{!string}
@@ -276,6 +295,20 @@ testcase.openFileDialogEscapeDownloads = () => {
   return openFileDialogSendEscapeKey('downloads', TEST_LOCAL_FILE);
 };
 
+/**
+ * Tests the feedback panels are hidden when using an open file dialog.
+ */
+testcase.openFileDialogPanelsDisabled = () => {
+  return checkFeedbackDisplayHidden('openFile');
+};
+
+/**
+ * Tests the feedback panels are hidden when using a save file dialog.
+ */
+testcase.saveFileDialogPanelsDisabled = () => {
+  return checkFeedbackDisplayHidden('saveFile');
+};
+
 /**
  * Test file present in Drive only.
  * @{!string}