New issue
Advanced search Search tips
Note: Color blocks (like or ) mean that a user may not be available. Tooltip shows the reason.

Issue 629808 link

Starred by 4 users

Issue metadata

Status: Fixed
Owner:
Not on Chrome
Closed: Jan 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug-Regression



Sign in to add a comment

Regression: Unnecessary focus moves outside overlay drawer on pressing tab key.

Reported by jshan...@etouch.net, Jul 20 2016

Issue description

Chrome Version: 54.0.2802.0 Revision fc6aaca4ed6ff4f050e6f5c7fb19af85da8db574-refs/heads/master@{#406441}(32/64 bit)
OS: Windows(7,8,10), Linux (Ubuntu 14.04 LTS),Mac(10.10.5,10.11.4)

Steps:
1. Launch Chrome and navigate to chrome://history.
2. Click on menu button to open overlay drawer, press tab key and observe.

Actual: Unnecessary focus moves outside overlay drawer on pressing tab key.

Expected: Focus should move within overlay drawer on pressing tab key.

This is a regression issue broken in M-54, below is bisect info.

Good build: 54.0.2799.0
Bad build: 54.0.2800.0

Narrow bisect:
https://chromium.googlesource.com/chromium/src/+log/0db21f9f2bc7bee9c40c64c5ad192297d32a567c..009cf62ee240d54d1f840d3075697ea8c8974164?pretty=fuller&n=100

Suspecting: r406055 ?

Please help to re-assign if your change is not the cause for this issue.
 
Actual_video.mp4
426 KB View Download
Expected_video.mp4
170 KB View Download
Labels: ReleaseBlock-Stable
Adding release block label, please undo if not the case.
Just to update still seeing this issue on MAC 10.11.5, Ubuntu 14.04 for chrome version 54.0.2808.0. 

@msramek: Issue is marked with a blocker label. Request you to please take a look into it.

Thanks.!
Status: Started (was: Assigned)
I have it in my queue and will have a look today.
Can confirm that this was caused by my CL.

When the footer about other forms of history is displayed, the link in it is a tabstop and Tab correctly cycles between the four tabstops in the sidebar.

When the footer is not displayed, it somehow causes Tab to reach outside of the sidebar. Removing the link from the footer does fix this. But of course, we need the link there and we need it to be a tabstop for accessibility reasons.

This actually looks to me like a bug in renderer, but I'll see if there's some CSS to get around it.
Cc: msramek@chromium.org
Labels: Proj-MaterialDesign-WebUI
Owner: tsergeant@chromium.org
This is a problem with the focus trapping implementation in <app-drawer> [1]. It only calculates focusable elements once, so it gets confused by things showing and hiding.

I'm about to break this even more in [2], so I'm happy to take over this bug to find a solution.

[1] https://github.com/PolymerElements/app-layout/blob/master/app-drawer/app-drawer.html#L574
[2] https://codereview.chromium.org/2165903003/
Appreciated! I don't have any ideas yet anyway.
tsergeant@ : The recent canary 54.0.2820.0 does not produce any overlay upon clicking on History on the left pane of Chrome://history page.Could you please update the expected behavior in this page. 
629808_Aug_5.mp4
192 KB View Download
The overlay drawer still appears when the window is less than 1024px wide, so this can still be reproduced.
FvVJkyCa1rL.png
56.4 KB View Download
Labels: -Pri-1 -ReleaseBlock-Stable Pri-2
Bumping down to P2 since this is only reproducible on thin screens. We still want to try and fix this for release if possible.
Labels: -hasbisect -M-54 hasbisect-per-revision M-57
Rebisected using hasbisect-per-revision script, getting the same CL and review URl as in comment #0.

Change Log: 
https://chromium.googlesource.com/chromium/src/+log/40bb88335c64b80aea9326ef3cf6220dcd90c1bc..1089ca591550d0ca24befe3023b369a5ed2944da

Review URL:
https://codereview.chromium.org/2088093004

Thanks...!!
Yup, I'm looking into this for M57. MD Settings is working on a solution for their drawer (https://codereview.chromium.org/2465433002/) which I'll try to adapt for History.
Project Member

Comment 12 by bugdroid1@chromium.org, Jan 13 2017

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

commit f13062d9f24f77c0262ec3ad3734c63c65c1bbe6
Author: tsergeant <tsergeant@chromium.org>
Date: Fri Jan 13 01:55:47 2017

MD WebUI: Move settings' dialog-drawer element into a shared cr-element

This adds a new cr-element, 'cr-drawer', which implements a sidebar
drawer. Moving the drawer to cr_elements allows it to be used by History,
removing the need for the app-drawer element.

BUG= 629808 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2628123002
Cr-Commit-Position: refs/heads/master@{#443455}

[modify] https://crrev.com/f13062d9f24f77c0262ec3ad3734c63c65c1bbe6/chrome/browser/resources/settings/controls/compiled_resources2.gyp
[modify] https://crrev.com/f13062d9f24f77c0262ec3ad3734c63c65c1bbe6/chrome/browser/resources/settings/settings_resources.grd
[modify] https://crrev.com/f13062d9f24f77c0262ec3ad3734c63c65c1bbe6/chrome/browser/resources/settings/settings_ui/compiled_resources2.gyp
[modify] https://crrev.com/f13062d9f24f77c0262ec3ad3734c63c65c1bbe6/chrome/browser/resources/settings/settings_ui/settings_ui.html
[add] https://crrev.com/f13062d9f24f77c0262ec3ad3734c63c65c1bbe6/chrome/test/data/webui/cr_elements/cr_drawer_tests.js
[modify] https://crrev.com/f13062d9f24f77c0262ec3ad3734c63c65c1bbe6/chrome/test/data/webui/cr_elements/cr_elements_browsertest.js
[modify] https://crrev.com/f13062d9f24f77c0262ec3ad3734c63c65c1bbe6/ui/webui/resources/cr_elements/compiled_resources2.gyp
[add] https://crrev.com/f13062d9f24f77c0262ec3ad3734c63c65c1bbe6/ui/webui/resources/cr_elements/cr_drawer/compiled_resources2.gyp
[rename] https://crrev.com/f13062d9f24f77c0262ec3ad3734c63c65c1bbe6/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.html
[rename] https://crrev.com/f13062d9f24f77c0262ec3ad3734c63c65c1bbe6/ui/webui/resources/cr_elements/cr_drawer/cr_drawer.js
[modify] https://crrev.com/f13062d9f24f77c0262ec3ad3734c63c65c1bbe6/ui/webui/resources/cr_elements_resources.grdp

Labels: Needs-Feedback
Tested this issue on Win-10, Ubuntu 14.04 and Mac 10.12.2 using chrome version #57.0.2984.0 as per comment #0.

Observed that issue still exist as unnecessary focus moved outside overlay drawer on pressing tab key.

Attaching screen cast for reference.

tsergeant@ - Could you please have a look into this issue.

Thanks...!!
629808.mp4
1.4 MB View Download
Project Member

Comment 14 by bugdroid1@chromium.org, Jan 18 2017

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

commit e316eda37d7a3b330320fcad850dd62902123dd4
Author: tsergeant <tsergeant@chromium.org>
Date: Wed Jan 18 03:07:18 2017

MD History: Replace app-drawer with cr-drawer

This replaces the sidebar drawer in MD History with the shared cr-drawer
element. cr-drawer has several benefits over app-drawer:

* Styling is now directly shared with MD Settings
* Focus is now correctly trapped within the drawer when it is open
* cr-drawer is significantly smaller, saving 8kb of bundled page size
  (before gzip). Binary size will decrease further when we remove
  app-drawer in a follow-up CL.

BUG= 629808 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2627383002
Cr-Commit-Position: refs/heads/master@{#444257}

[modify] https://crrev.com/e316eda37d7a3b330320fcad850dd62902123dd4/chrome/browser/resources/md_history/app.crisper.js
[modify] https://crrev.com/e316eda37d7a3b330320fcad850dd62902123dd4/chrome/browser/resources/md_history/app.html
[modify] https://crrev.com/e316eda37d7a3b330320fcad850dd62902123dd4/chrome/browser/resources/md_history/app.js
[modify] https://crrev.com/e316eda37d7a3b330320fcad850dd62902123dd4/chrome/browser/resources/md_history/app.vulcanized.html
[modify] https://crrev.com/e316eda37d7a3b330320fcad850dd62902123dd4/chrome/browser/resources/md_history/compiled_resources2.gyp
[modify] https://crrev.com/e316eda37d7a3b330320fcad850dd62902123dd4/chrome/browser/resources/md_history/lazy_load.crisper.js
[modify] https://crrev.com/e316eda37d7a3b330320fcad850dd62902123dd4/chrome/browser/resources/md_history/lazy_load.html
[modify] https://crrev.com/e316eda37d7a3b330320fcad850dd62902123dd4/chrome/browser/resources/md_history/lazy_load.vulcanized.html
[modify] https://crrev.com/e316eda37d7a3b330320fcad850dd62902123dd4/chrome/browser/resources/md_history/side_bar.html
[modify] https://crrev.com/e316eda37d7a3b330320fcad850dd62902123dd4/chrome/browser/resources/md_history/side_bar.js
[modify] https://crrev.com/e316eda37d7a3b330320fcad850dd62902123dd4/chrome/test/data/webui/md_history/history_drawer_test.js

Labels: -Needs-Feedback
Status: Fixed (was: Started)
Project Member

Comment 16 by bugdroid1@chromium.org, Jan 19 2017

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

commit 44ed361a0e940d4cff7b5a91ecf1fb4ac96b38f7
Author: tsergeant <tsergeant@chromium.org>
Date: Thu Jan 19 22:16:08 2017

Polymer: Remove unused app-layout element

BUG= 629808 
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2633633002
Cr-Commit-Position: refs/heads/master@{#444858}

[modify] https://crrev.com/44ed361a0e940d4cff7b5a91ecf1fb4ac96b38f7/chrome/browser/resources/md_history/compiled_resources2.gyp
[modify] https://crrev.com/44ed361a0e940d4cff7b5a91ecf1fb4ac96b38f7/third_party/polymer/v1_0/bower.json
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-box/app-box-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-box/app-box.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-box/compiled_resources2.gyp
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/app-drawer-layout.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer-layout/compiled_resources2.gyp
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer/app-drawer-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer/app-drawer.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-drawer/compiled_resources2.gyp
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-header-layout/app-header-layout-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-header-layout/app-header-layout.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-header-layout/compiled_resources2.gyp
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-header/app-header.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-header/compiled_resources2.gyp
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-layout.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/app-scroll-effects-behavior-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/app-scroll-effects-behavior.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/app-scroll-effects.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/compiled_resources2.gyp
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/blend-background-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/blend-background.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/compiled_resources2.gyp
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/fade-background-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/fade-background.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/material-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/material.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/parallax-background-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/parallax-background.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/resize-snapped-title-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/resize-snapped-title.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/resize-title-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/resize-title.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/waterfall-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scroll-effects/effects/waterfall.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scrollpos-control/app-scrollpos-control-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scrollpos-control/app-scrollpos-control.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-scrollpos-control/compiled_resources2.gyp
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-toolbar/app-toolbar-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-toolbar/app-toolbar.html
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/app-toolbar/compiled_resources2.gyp
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/bower.json
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/compiled_resources2.gyp
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/helpers/compiled_resources2.gyp
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/helpers/helpers-extracted.js
[delete] https://crrev.com/44f12b27985c6465c564b4841f0cd05833cdb5c4/third_party/polymer/v1_0/components-chromium/app-layout/helpers/helpers.html
[modify] https://crrev.com/44ed361a0e940d4cff7b5a91ecf1fb4ac96b38f7/third_party/polymer/v1_0/components_summary.txt
[modify] https://crrev.com/44ed361a0e940d4cff7b5a91ecf1fb4ac96b38f7/ui/webui/resources/polymer_resources.grdp

Sign in to add a comment