Skip to content

GitLab

T
tangled
Commit 44f7f578 authored by Noel Gordon's avatar Noel Gordon Committed by Commit Bot
Browse files
Options

[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: default avatarAlex Danilo <adanilo@chromium.org>
Reviewed-by: default avatarNoel Gordon <noel@chromium.org>
Commit-Queue: Noel Gordon <noel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#749573}
parent c875ff2c
Hide whitespace changes
Inline Side-by-side
Showing with 10 additions and 2 deletions
ui/file_manager/file_manager/foreground/css/file_manager.css
View file @ 44f7f578
...@@ -137,7 +137,8 @@ body.files-ng .dialog-navigation-list { ...@@ -137,7 +137,8 @@ body.files-ng .dialog-navigation-list {
top: 0; top: 0;
} }
html.col-resize #directory-tree { html.col-resize #directory-tree,
html.breadcrumb-elider-expanded #directory-tree {
overflow-y: hidden; overflow-y: hidden;
} }
......
ui/file_manager/file_manager/foreground/js/ui/breadcrumb.js
View file @ 44f7f578
...@@ -408,9 +408,12 @@ class BreadCrumb extends HTMLElement { ...@@ -408,9 +408,12 @@ class BreadCrumb extends HTMLElement {
dialog.style['overflow'] = 'hidden auto'; dialog.style['overflow'] = 'hidden auto';
dialog.style['max-height'] = '40vh'; 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'); elider.setAttribute('aria-expanded', 'true');
this.setAttribute('checked', ''); this.setAttribute('checked', '');
// Emit rendered signal.
this.signal_('path-rendered'); this.signal_('path-rendered');
} }
...@@ -420,9 +423,13 @@ class BreadCrumb extends HTMLElement { ...@@ -420,9 +423,13 @@ class BreadCrumb extends HTMLElement {
* @private * @private
*/ */
closeMenu_() { closeMenu_() {
// Update global <html> and |this| element state.
document.documentElement.classList.remove('breadcrumb-elider-expanded');
const elider = this.shadowRoot.querySelector('button[elider]'); const elider = this.shadowRoot.querySelector('button[elider]');
elider.setAttribute('aria-expanded', 'false'); elider.setAttribute('aria-expanded', 'false');
this.removeAttribute('checked'); this.removeAttribute('checked');
// Close the drop-down <dialog> if needed.
const menu = this.shadowRoot.querySelector('cr-action-menu'); const menu = this.shadowRoot.querySelector('cr-action-menu');
if (menu.getDialog().hasAttribute('open')) { if (menu.getDialog().hasAttribute('open')) {
menu.close(); menu.close();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment