[breadcrumb] Avoid wheel event leakage from the drop-down menu

Wheel events over the drop-down menu (a <dialog>) can cause directory tree to show vertical scrollbars even though the user cannot possibly interact with the directory tree (they are in a <dialog> element). Do not draw directory tree scrollbars in this case - if the drop-down is open, post that state to the <html> element so CSS can detect, and block tree overflow behavior. Bug: 1035691 Change-Id: Id40017a1b4ff576e4b16efc22e661e3169710e9f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2098169Reviewed-by: Alex Danilo <adanilo@chromium.org> Reviewed-by: Noel Gordon <noel@chromium.org> Commit-Queue: Noel Gordon <noel@chromium.org> Cr-Commit-Position: refs/heads/master@{#749573}

[breadcrumb] Avoid wheel event leakage from the drop-down menu
Wheel events over the drop-down menu (a <dialog>) can cause directory tree to show vertical scrollbars even though the user cannot possibly interact with the directory tree (they are in a <dialog> element). Do not draw directory tree scrollbars in this case - if the drop-down is open, post that state to the <html> element so CSS can detect, and block tree overflow behavior. Bug: 1035691 Change-Id: Id40017a1b4ff576e4b16efc22e661e3169710e9f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2098169Reviewed-by: Alex Danilo <adanilo@chromium.org> Reviewed-by: Noel Gordon <noel@chromium.org> Commit-Queue: Noel Gordon <noel@chromium.org> Cr-Commit-Position: refs/heads/master@{#749573}
44f7f578 · Noel Gordon · Commit Bot · c875ff2c · 44f7f578 · 44f7f578
Commit 44f7f578 authored Mar 12, 2020 by Noel Gordon Committed by Commit Bot Mar 12, 2020
2 changed files
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css
+++ b/ui/file_manager/file_manager/foreground/css/file_manager.css
@@ -137,7 +137,8 @@ body.files-ng .dialog-navigation-list {
  top: 0;
 }

-html.col-resize #directory-tree {
+html.col-resize #directory-tree,
+html.breadcrumb-elider-expanded #directory-tree {
  overflow-y: hidden;
 }


--- a/ui/file_manager/file_manager/foreground/js/ui/breadcrumb.js
+++ b/ui/file_manager/file_manager/foreground/js/ui/breadcrumb.js
@@ -408,9 +408,12 @@ class BreadCrumb extends HTMLElement {
    dialog.style['overflow'] = 'hidden auto';
    dialog.style['max-height'] = '40vh';

-    // Update state and emit rendered signal.
+    // Update global <html> and |this| element state.
+    document.documentElement.classList.add('breadcrumb-elider-expanded');
    elider.setAttribute('aria-expanded', 'true');
    this.setAttribute('checked', '');
+
+    // Emit rendered signal.
    this.signal_('path-rendered');
  }

@@ -420,9 +423,13 @@ class BreadCrumb extends HTMLElement {
   * @private
   */
  closeMenu_() {
+    // Update global <html> and |this| element state.
+    document.documentElement.classList.remove('breadcrumb-elider-expanded');
    const elider = this.shadowRoot.querySelector('button[elider]');
    elider.setAttribute('aria-expanded', 'false');
    this.removeAttribute('checked');
+
+    // Close the drop-down <dialog> if needed.
    const menu = this.shadowRoot.querySelector('cr-action-menu');
    if (menu.getDialog().hasAttribute('open')) {
      menu.close();