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

Issue 706297 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Jul 2017
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows
Pri: 1
Type: Bug-Regression



Sign in to add a comment

Regression: Focus on radio button is seen chopped from left side after pressing 'Tab' key on popup bubble.

Reported by db...@etouch.net, Mar 29 2017

Issue description

Chrome Version: 58.0.3029.41 (Official Build)3d67f52b399689c5087b12bf6014dfb18fc11e42-refs/branch-heads/3029@{#465} 32/64-bit.
OS: Windows(7,8,10)

Pre-condition: Enable 'Material Design in the rest of the browser's native UI' flag

What steps will reproduce the problem?
1. Launch chrome and navigate to http://www.popuptest.com/popuptest1.html
2. Click on blocked popup icon present in omnibox, press Tab key upto focus reaches to radio buton
3. observe focus on radio button.

Actual: Focus on radio button is seen chopped from left side after pressing Tab key.

Expected: Focus on radio button should not seen chopped from left side.

This is regression issue, broken in 'M 57' and below is manual bisect:

Good build:57.0.2977.0
Bad build:57.0.2978.0

Note: Issue is not seen on Mac Os.
 
scrrenshot.png
45.6 KB View Download
Cc: msrchandra@chromium.org rbasuvula@chromium.org
Labels: hasbisect-per-revision OS-Linux
Owner: kylixrd@chromium.org
Status: Assigned (was: Unconfirmed)
Using the per-revision bisect providing the bisect results,
Good build:57.0.2977.0 (Revision:442447).
Bad build:57.0.2978.0 (Revision:442756).

You are probably looking for a change made after 442682 (known good), but no later than 442683 (first known bad).

CHANGE-LOG URL:
---------------
https://chromium.googlesource.com/chromium/src/+log/e5410705426f111d9ea78d121b70cb87ddf38187..44ec2a4fd5e1c052077575f84b5b5cbdb703cef6

From the CL above, assigning the issue to the concern owner

@kylixrd: Could you please look into the issue, pardon me if it has nothing to do with your changes and if possible please assign it to concern owner.

Review-Url:https://codereview.chromium.org/2571613002
Note :Able to reproduce the issue in Win 10.0,Ubuntu 14.04 & Not in Mac 10.12.3 and Able to reproduce in latest Canary #59.0.3054.0
Cc: pkasting@chromium.org
The issue here seems to be related to the RadioButton (and the Checkbox) being left-aligned according to the MD specs. The focus highlight is being clipped.

The RadioButton control handles the painting of the focus ring itself instead of using the FocusRing class. IOW, it's painting directly onto it's own canvas which is clipped.

This is probably an issue with the design of how the RadioButton and Checkbox are designed.
BlockedPopups.png
20.4 KB View Download
I'm kinda surprised changing the alignment here changed this.  I'd have expected this to get clipped by the button bounds either way, at least on Linux (I thought you could paint outside your own bounds on Win but not Linux).  And in both cases it looks to me like we have plenty of room in the parent view, if that was the issue.

It seems like if the focus ring goes around the radio circle itself, and not the whole button + text, that the radio button will have to be responsible for custom-drawing this.  That may mean we need to reserve enough space for the full focus ring at all times.  In turn that could either make these look as if they're "too far right", or else force us to position them "more left" to compensate.

The spec suggests that focus rings on these as well as other elements are drawn outside the bounds of what the positioning rules are based on.  I'm not sure if we have some magic way of doing this for things like buttons already.  It might be easier to do in the "v2 spec" world where elements have their own inherent margins, because we can internally reduce the margin by the extra space needed here.  I don't want to build something in the "v1" world to try and inset back from the spacing everywhere, that seems like a huge hassle.  I'd rather ship with things looking like they're indented by 2 DIP.

Maybe, though, there's some way of drawing the focus ring in some overlay or something that doesn't "count" as being part of the view bounds and isn't clipped by it?  I'm not really sure.
This is an issue with how the RadioButton and Checkbox handle their own focus-ring painting. An idea I have is to provide a delegation mechanism whereby the FocusRing class can optionally allow the focused control to paint. The RadioButton and Checkbox can then still do the painting of the focus ring, but it would paint on the FocusRing's canvas.

This is how things work with most controls, for instance, look at the focus ring on the "Done" button in the left image. Using --draw-view-bounds-rects, you can see that the focus ring is another control laid over the button whose size provides space for the said ring.
Using the FocusRing class and delegating the painting to the Checkbox and Radiobutton works. The focus ring is no longer clipped because it's painting on the FocusRing canvas is sized larger and is placed over the image.
RadioButtonFocusRing.png
15.5 KB View Download
Status: Fixed (was: Assigned)

Comment 8 by db...@etouch.net, Jul 18 2017

Labels: TE-Verified-M61 TE-Verified-61.0.3159.5
Just to update:

Above issue is fixed on latest dev build 61.0.3159.5

Thank you.

Comment 9 by db...@etouch.net, Jul 18 2017

Issue_Actual.mov
3.1 MB Download

Sign in to add a comment