FilesApp progress center: allow scrolling of items

Bug: 627371
Change-Id: I55e322bd36ff7eeb5699f9e2bd9842c01938d1da
Reviewed-on: https://chromium-review.googlesource.com/c/1349131Reviewed-by: Stuart Langley <slangley@chromium.org>
Commit-Queue: Joel Hockey <joelhockey@chromium.org>
Cr-Commit-Position: refs/heads/master@{#610532}

chrome/browser/chromeos/file_manager/file_manager_uitest.cc

@@ -73,6 +73,10 @@ IN_PROC_BROWSER_TEST_F(FileManagerUITest, CrostiniTasks) {
   RunTest("crostiniTasks");
 }
 
+IN_PROC_BROWSER_TEST_F(FileManagerUITest, ProgressCenter) {
+  RunTest("progressCenter");
+}
+
 IN_PROC_BROWSER_TEST_F(FileManagerUITest, UMA) {
   RunTest("uma");
 }

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

@@ -104,8 +104,9 @@ a:focus {
 
 .dialog-navigation-list-footer {
   display: flex;
-  flex: none;
+  flex: 0 1 auto;
   flex-direction: column;
+  overflow: auto;
 }
 
 /* A vertical splitter between the roots list and the file list. It is actually
@@ -2080,7 +2081,6 @@ list.autocomplete-suggestions > [lead] {
 #progress-center {
   background-color: transparent;
   border-top: 1px solid rgb(214, 214, 214);
-  overflow: hidden;
   position: relative;
   transition: background-color 300ms linear,
               border 300ms linear;

ui/file_manager/file_manager/test/BUILD.gn

@@ -25,6 +25,7 @@ action("create_test_main") {
     "crostini_share.js",
     "crostini_tasks.js",
     "js/strings.js",
+    "progress_center.js",
     "uma.js",
   ]
   args = [ "--output=" + rebase_path(output, root_build_dir) ]
@@ -40,6 +41,7 @@ js_type_check("closure_compile") {
     ":crostini_mount",
     ":crostini_share",
     ":crostini_tasks",
+    ":progress_center",
     ":uma",
   ]
 }
@@ -53,13 +55,14 @@ js_library("closure_compile_externs") {
     "js/externs.js",
     "$externs_path/command_line_private.js",
     "$externs_path/metrics_private.js",
-    "../../externs/app_window_common.js",
-    "../../externs/background/file_browser_background.js",
-    "../../externs/background/crostini.js",
-    "../../externs/entry_location.js",
-    "../../externs/volume_info.js",
-    "../../externs/volume_info_list.js",
-    "../../externs/volume_manager.js",
+    "//ui/file_manager/externs/app_window_common.js",
+    "//ui/file_manager/externs/background/file_browser_background.js",
+    "//ui/file_manager/externs/background/progress_center.js",
+    "//ui/file_manager/externs/background/crostini.js",
+    "//ui/file_manager/externs/entry_location.js",
+    "//ui/file_manager/externs/volume_info.js",
+    "//ui/file_manager/externs/volume_info_list.js",
+    "//ui/file_manager/externs/volume_manager.js",
     "//third_party/analytics/externs.js",
   ]
 }
@@ -92,6 +95,14 @@ js_library("crostini_tasks") {
   ]
 }
 
+js_library("progress_center") {
+  deps = [
+    "js:test_util",
+    "//ui/file_manager/file_manager/common/js:progress_center_common",
+    "//ui/webui/resources/js:webui_resource_test",
+  ]
+}
+
 js_library("uma") {
   deps = [
     "js:test_util",

ui/file_manager/file_manager/test/js/externs.js

@@ -11,16 +11,34 @@ ChromeEvent.prototype.dispatchEvent = (var_args) => {};
 
 /** @constructor */
 function FileManager() {
-  /** @type {Crostini} */
+  /** @type {!Crostini} */
   this.crostini;
+
+  /**
+   * Declare as FileBrowserBackground rather than FileBrowserBackgroundFull to
+   * simplify deps.  Individual fields such as progressCenter below can be
+   * defined as needed.
+   * @type {!FileBrowserBackground}}
+   */
+  this.fileBrowserBackground_;
 }
 FileManager.prototype.setupCrostini_ = () => {};
 
 /** @type {string} */
 let FILE_MANAGER_ROOT;
 
-/** @type {FileManager} */
+/** @type {!FileManager} */
 let fileManager;
 
-/** @type {FileBrowserBackground} */
+/**
+ * Declare ProgressCenterPanel here rather than deal with its deps.  It is
+ * referenced in //ui/file_manager/externs/background/progress_center.js
+ * @constructor
+ */
+function ProgressCenterPanel() {}
+
+/** @type {!ProgressCenter} */
+fileManager.fileBrowserBackground_.progressCenter;
+
+/** @type {!FileBrowserBackground} */
 window.background;

ui/file_manager/file_manager/test/progress_center.js

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+const progressCenter = {};
+
+/**
+ * @param {string} id
+ * @param {string} message
+ * @return {!ProgressCenterItem}
+ */
+progressCenter.createItem = function(id, message) {
+  let item = new ProgressCenterItem();
+  item.id = id;
+  item.message = message;
+  return item;
+};
+
+progressCenter.testScrollWhenManyMessages = (done) => {
+  const visibleClosed = '#progress-center:not([hidden]):not(.opened)';
+  const visibleOpen = '#progress-center:not([hidden]).opened';
+  const openIcon = '#progress-center-close-view .open';
+  const navListFooter = '.dialog-navigation-list-footer';
+
+  const items = [];
+  const center = fileManager.fileBrowserBackground_.progressCenter;
+  // Load a single file.
+  test.setupAndWaitUntilReady()
+      .then(() => {
+        // Add lots of messages.
+        for (let i = 0; i < 100; i++) {
+          const item = progressCenter.createItem('id' + i, 'msg ' + i);
+          items.push(item);
+          center.updateItem(item);
+        }
+        // Wait for notification expand icon.
+        return test.waitForElement(visibleClosed);
+      })
+      .then(result => {
+        // Click open icon, ensure progress center is open.
+        assertTrue(test.fakeMouseClick(openIcon));
+        return test.waitForElement(visibleOpen);
+      })
+      .then(result => {
+        // Ensure progress center is scrollable.
+        const footer = document.querySelector(navListFooter);
+        assertTrue(footer.scrollHeight > footer.clientHeight);
+
+        // Clear items.
+        items.forEach((item) => {
+          item.state = ProgressItemState.COMPLETED;
+          center.updateItem(item);
+        });
+        done();
+      });
+};