New issue
Advanced search Search tips

Issue 835376 link

Starred by 4 users

Issue metadata

Status: Fixed
Owner:
Closed: May 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

[Mac] Checkbox focus ring has unwanted white area between ring and checkbox border

Project Member Reported by shrike@chromium.org, Apr 20 2018

Issue description

Chrome Version: 66.0.3359.117
OS: macOS 10.12

What steps will reproduce the problem?
(1) Go to chrome://extensions
(2) Click the Remove button on one of your extensions
(3) Tab around in the dialog that appears until the checkbox has keyboard focus

What is the expected result?
The checkbox's focus ring should be a solid blue outline around the checkbox border

What happens instead?
There is a thin strip of white between the focus ring and the checkbox's border.

 
Screen Shot 2018-04-20 at 10.55.29 AM.png
7.8 KB View Download
Cc: ellyjo...@chromium.org
Labels: -Pri-3 MacViews-Controls Proj-MacViews Pri-2
Status: Available (was: Untriaged)
Cc: -ellyjo...@chromium.org
Owner: ellyjo...@chromium.org
Status: Assigned (was: Available)
Assigning based off of triage rules.
Labels: Target-69 M-69
Cc: bettes@chromium.org
Labels: Proj-HarmonyDialogs OS-Linux OS-Windows
This was correct after r497836, but I think it regressed in r500911. Affects all platforms.
#6: Yep, I agree with that reading. I have a CL in progress that reworks how focus rings are drawn so that Views can supply an arbitraryish SkPath for their focus ring to be drawn around; I'll fix this in the process of fixing that I think.
Status: Started (was: Assigned)
Before & after on Mac - the after doesn't look perfect yet but it looks a lot closer. These are for <https://chromium-review.googlesource.com/#/c/chromium/src/+/1050185>.
before3.png
4.8 KB View Download
after4.png
4.9 KB View Download
Linux before & after screenshots - looking identical.
before.png
1.4 KB View Download
after.png
1.4 KB View Download
Mac before & after for RadioButton (the other affected control - identical look) and MdTextButton (a sample unaffected control - identical look).
before4.png
5.7 KB View Download
after5.png
5.7 KB View Download
before1.png
7.1 KB View Download
after1.png
7.1 KB View Download
Project Member

Comment 11 by bugdroid1@chromium.org, May 21 2018

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

commit 824d232c3d3630d9486a33f3cbc9be6077654c40
Author: Elly Fong-Jones <ellyjones@chromium.org>
Date: Mon May 21 16:04:51 2018

views: introduce focus ring paths

This change adds support for Mac-style "focus ring paths" to Views, which
means that a given View can (via FocusRing::Delegate) supply an arbitrary path for its focus ring to
be drawn around when it has a focus ring. This removes the need for Checkbox
and RadioButton to have their own focus ring implementations. It will also
be necessary as the MD refresh work adds more circular/oval controls in
top chrome.

This work leads into a longer-term effort to make FocusRing not be a View;
see https://crbug.com/840796 for details about that.

Bug:  836946 , 835376 
Change-Id: I433dc370e5fbc2ff30b53b070d84255199b6ec29
Reviewed-on: https://chromium-review.googlesource.com/1050185
Commit-Queue: Elly Fong-Jones <ellyjones@chromium.org>
Reviewed-by: Scott Violet <sky@chromium.org>
Cr-Commit-Position: refs/heads/master@{#560278}
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/chrome/browser/ui/views/bookmarks/bookmark_bar_view.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/chrome/browser/ui/views/frame/app_menu_button.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/chrome/browser/ui/views/location_bar/location_bar_view.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/chrome/browser/ui/views/location_bar/location_bar_view.h
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/chrome/browser/ui/views/page_action/page_action_icon_view.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/chrome/browser/ui/views/page_action/page_action_icon_view.h
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/chrome/browser/ui/views/toolbar/toolbar_action_view.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/chrome/browser/ui/views/toolbar/toolbar_button.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/button/button.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/button/button.h
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/button/checkbox.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/button/checkbox.h
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/button/md_text_button.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/button/md_text_button.h
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/button/radio_button.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/button/radio_button.h
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/combobox/combobox.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/combobox/combobox.h
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/focus_ring.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/focus_ring.h
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/scroll_view.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/scroll_view.h
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/textfield/textfield.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/controls/textfield/textfield.h
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/examples/button_sticker_sheet.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/view.cc
[modify] https://crrev.com/824d232c3d3630d9486a33f3cbc9be6077654c40/ui/views/view_observer.h

Cc: phanindra.mandapaka@chromium.org
Able to reproduce the issue on chrome version 66.03359.117(build without fix)

Verified the fix on Mac 10.13.3 Chrome version #68.0.3437.2 as per the comment #0.

Attaching screencast for reference.

Observed that ""there is no white area between ring and checkbox border.""
Note: Issue is still seen on #68.0.3437.2 using Linux and Windows hence not adding verified labels.

Thanks...!
835376.mp4
1.8 MB View Download
Status: Fixed (was: Started)
Labels: TE-Verified-M69 TE-Verified-69.0.3493.0
Able to reproduce the issue on chrome version 66.0.3359.117 (build withtout fix) as per the comment #0.
Verified the fix on Mac 10.12.6 using Chrome version # 69.0.3493.0.
Attaching screen-cast for reference.
Observed that "Solid blue outline on the check box's focus ring" 
The fix is working as expected, adding Verified labels

Thanks...!
835376.mp4
975 KB View Download

Sign in to add a comment