Make FilesApp tree scrollable with flex changes.
CL:1599691 changes the behavior of min/max-content in the block
formatting direction. The result of that change is that the
vertical scrolling of the directory tree in File Manager
was disabled.
This CL moves the scrolled area to the parent of the flex
container, restoring vertical scroll. Add TODO to update the
unit test with a vertical scroll case.
Bug: 966807
Tests: Manually tested, fixed unit test for new container.
Change-Id: Icb1628ff1b605bf4d2aa47d74677f198a2f430a2
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1630086
Reviewed-by: Noel Gordon <noel@chromium.org>
Reviewed-by: Luciano Pacheco <lucmult@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#663498}
diff --git a/ui/file_manager/file_manager/foreground/css/file_manager.css b/ui/file_manager/file_manager/foreground/css/file_manager.css
index fffc262..31e8869 100644
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css
+++ b/ui/file_manager/file_manager/foreground/css/file_manager.css
@@ -91,7 +91,7 @@
flex-direction: column;
max-width: 40%;
min-width: 105px;
- overflow: hidden;
+ overflow: auto;
position: relative;
width: 240px;
}
@@ -100,9 +100,6 @@
display: flex;
flex: 1 1 auto;
margin-top: 8px;
- overflow-x: auto;
- overflow-y: auto;
- position: relative;
}
.dialog-navigation-list-footer {
@@ -127,9 +124,7 @@
bottom: 0;
flex: none;
left: 0;
- min-height: max-content;
min-width: 100%;
- overflow: hidden;
}
#directory-tree .tree-row {
diff --git a/ui/file_manager/integration_tests/file_manager/navigation_list.js b/ui/file_manager/integration_tests/file_manager/navigation_list.js
index 5cfe271..d66cc6f 100644
--- a/ui/file_manager/integration_tests/file_manager/navigation_list.js
+++ b/ui/file_manager/integration_tests/file_manager/navigation_list.js
@@ -6,6 +6,7 @@
(() => {
/**
* Tests that the directory tree area can be horizontally scrolled.
+ * TODO(crbug.com/966807) add a vertical scroll case.
*/
testcase.navigationScrollsWhenClipped = async () => {
// Open FilesApp with the Downloads folder visible.
@@ -14,7 +15,7 @@
await expandRoot(appId, TREEITEM_DOWNLOADS);
// Get the navigationList width property and make sure it has non-zero size.
- const navigationList = '.dialog-navigation-list-contents';
+ const navigationList = '.dialog-navigation-list';
let list =
await remoteCall.waitForElementStyles(appId, navigationList, ['width']);
const originalWidth = Number(list.styles['width'].match(/[0-9]*/));
