Adding the feedback report for info - https://listnr.corp.google.com/report/84909157777

I thought I filed an issue about the layout issue of Google Drive promo banner, but I couldn't find it.
Let's use this issue and fix the layout.

FYI, I filed  Issue 627776  before but it was closed WontFix.

<files-triage>

My ideas to improve this are:
- In the Drive banner, the text lines should be readable and the button should be accessible by the visual agent. Make the text lines wrapped and have the banner scrollable to keep the current banner size.
- The balance between directory tree and file list views should be controlled when the window is resized.

The suggsted apps dialog also needs to be resizeable. (It opens when opening an unknown file type.)

Deleted: suggeste_apps_narrow_window.png 36.1 KB

	suggeste_apps_narrow_window.png 36.1 KB View Download

Re comment #9, Weifang, can we up the priority a bit? The experience is broken.

This contains several parts of the UI. Which part is more important (and others not)?
- Drive welcome banner
- automatic resizing of directory list
- suggested apps dialog

I think Drive welcome and Suggested apps dialogs are more important, because these have no workaround than spreading the window width.

Let's fix these two broken parts.
- Drive welcome banner
- Suggest app dialog

Joel, could you take a look how we can make them look better?

Changed drive-welcome-wrapper to be variable height and allow vertical scrolling.

Omri, Weifang, Yamaguchi, does this look OK?

Deleted: drive-banner-width.webm 1.3 MB

	drive-banner-width.webm 1.3 MB View Download

It looks basically good to me, except that there is a solid scrollbar instead of the overlay scrollbar.
Had you turned off the #overlay-scrollbars or any other flags for overlay scrollbars when you filmed the screencast?

Ignore the scrollbar.  I filmed this using FileManager running in a standard browser outside of chromeos (see code I am doing in crosreview.com/936921).  The scrollbar looks fine in the real FileManager.

I think this looks good. The one area that we might want to adjust is the ratio of the height of the banner as the window shrinks if possible?

+sgabriel - Could you take a look at the video in Comment 17 and provide UI feedback on the resizing implementation?

Sorry i cannot put together a precise spec but the idea would be to remove the illustration once the text overlaps it. It would then also be good to reduce the size of the Drive icon on the left (say to 48*48) so that there's more space for the text.
Regarding the text itself, not much we can do to avoid it to stack when using small heights. 

How about if we go ahead and submit the current change, and then leave the further suggestions as a lower priority task?

At least for now the banner is functional at a smaller width - you can click the 'check eligibility' button, and you can close the banner.

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/99ce3024704f4edcf3ca9341c4869f26f4229870

commit 99ce3024704f4edcf3ca9341c4869f26f4229870
Author: Joel Hockey <joelhockey@chromium.org>
Date: Tue Mar 06 21:15:40 2018

Show drive banner better with small width

Bug:  801311 
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ibf86a107fe86e95f49b15e54668223ecf0b5df10
Reviewed-on: https://chromium-review.googlesource.com/948163
Commit-Queue: Joel Hockey <joelhockey@chromium.org>
Reviewed-by: Tatsuhisa Yamaguchi <yamaguchi@chromium.org>
Cr-Commit-Position: refs/heads/master@{#541193}
[modify] https://crrev.com/99ce3024704f4edcf3ca9341c4869f26f4229870/ui/file_manager/file_manager/foreground/css/drive_welcome.css

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/7405a7e075246b77cf664e7b1f9ca5ed896c27c5

commit 7405a7e075246b77cf664e7b1f9ca5ed896c27c5
Author: Joel Hockey <joelhockey@chromium.org>
Date: Wed Mar 07 07:05:05 2018

Run Select App to Open File dialog

Bug:  801311 
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ie7dc5fc9703b2709bfb5f84c02800bb91434756d
Reviewed-on: https://chromium-review.googlesource.com/952726
Commit-Queue: Joel Hockey <joelhockey@chromium.org>
Reviewed-by: Sasha Morrissey <sashab@chromium.org>
Cr-Commit-Position: refs/heads/master@{#541374}
[modify] https://crrev.com/7405a7e075246b77cf664e7b1f9ca5ed896c27c5/ui/file_manager/file_manager/test/js/chrome_api_test_impl.js
[modify] https://crrev.com/7405a7e075246b77cf664e7b1f9ca5ed896c27c5/ui/file_manager/file_manager/test/js/chrome_file_manager.js
[modify] https://crrev.com/7405a7e075246b77cf664e7b1f9ca5ed896c27c5/ui/file_manager/file_manager/test/js/strings.js

Suggest app dialog updated to scroll when window is small

Deleted: Downloads.webm 902 KB

	Downloads.webm 902 KB View Download

sgabriel@ / omrilio@,

The fix that I have done for now is to add scrolling at the bottom and side of the screen when the window is smaller than the dialog.  See video above in #c26.

If we need any different UI treatment, we can follow up later.

This is another screencast in the desktop mode to make it clear where the scrollbar will be shown.

Deleted: suggested-app-dialog-scroll.mp4 352 KB

	suggested-app-dialog-scroll.mp4 352 KB View Download

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/3cb318f9f8946d6549644d3cf56fa04cd2875737

commit 3cb318f9f8946d6549644d3cf56fa04cd2875737
Author: Joel Hockey <joelhockey@chromium.org>
Date: Mon Mar 12 03:21:40 2018

Suggest app dialog: add scroll support for small windows

Add scrolling to outer container and set inner container
to use margin: auto inside flex box.

Bug:  801311 
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: I4fcedad71bdf65efde6353c95f1cae03dd11bf62
Reviewed-on: https://chromium-review.googlesource.com/954523
Reviewed-by: Tatsuhisa Yamaguchi <yamaguchi@chromium.org>
Commit-Queue: Joel Hockey <joelhockey@chromium.org>
Cr-Commit-Position: refs/heads/master@{#542419}
[modify] https://crrev.com/3cb318f9f8946d6549644d3cf56fa04cd2875737/ui/file_manager/file_manager/foreground/css/common.css

Marking as fixed.  sgabriel@ / omrilio@ please follow up if needed.