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

Issue 645693 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Oct 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 3
Type: Bug



Sign in to add a comment

The text in the row needs to be white color when an item is selected in the chooser on Mac

Project Member Reported by juncai@chromium.org, Sep 10 2016

Issue description

Changing the text color to be white when the row is selected makes the text more readable.
 

Comment 1 by juncai@chromium.org, Sep 13 2016

Some screenshots from Mac.
Mac_WebBluetooth_text_color_black_before_selected.png
139 KB View Download
Mac_WebBluetooth_text_color_white_after_selected.png
138 KB View Download

Comment 2 by juncai@chromium.org, Sep 13 2016

Status: Started (was: Assigned)

Comment 3 by juncai@chromium.org, Sep 13 2016

Should the green text "Paired" be changed to white color or any other color?

Comment 4 by ortuno@chromium.org, Sep 13 2016

Shouldn't the icons be grey rather than black? Most android icons are grey.

That green font looks weird. I would ask rolfe@ for the right color.

Comment 5 by juncai@chromium.org, Sep 13 2016

Yes, the icon needs to be changed also.

 issue 583452  comment 54, rolfe@ mentioned the text needs to turn white, so I tried it.

Comment 6 by juncai@chromium.org, Sep 13 2016

Cc: jyasskin@chromium.org rolfe@chromium.org ortuno@chromium.org bettes@chromium.org scheib@chromium.org

Comment 7 by juncai@chromium.org, Sep 13 2016

Here are some screenshots of using white/grey images when item is selected. On desktops, it seems that the white image look better.

rolfe@, bettes@, would like to get your opinion about which color to use for the "Paired" text. Thanks!
Mac_WebBluetooth_image_white_when_selected.png
122 KB View Download
Mac_WebBluetooth_image_grey_when_selected.png
123 KB View Download

Comment 8 by juncai@chromium.org, Sep 14 2016

I tried a green color which has: RGB(0x7C, 0xFC, 0x00) and it looks clear in a blue background. I uploaded the screenshot for that.
Mac_WebBluetooth_when_selected_Paired_text_green_signal_strength_image_white.png
126 KB View Download
Mac_WebBluetooth_when_selected_connected_image_white.png
123 KB View Download

Comment 9 by rolfe@chromium.org, Sep 15 2016

Thanks for the screenshots. You could use Google Green 300 per the go/chromespec
https://spec.googleplex.com/chrome/style/color.html

But I'd just make it white probably. bettes@ - feel any differently?
Here are the screenshots of using Google Green 300 and white for the "Paired" text when the row is selected.
Mac_WebBluetooth_Paired_text_using_Google_Green300.png
123 KB View Download
Mac_WebBluetooth_Paired_text_using_white.png
123 KB View Download
Project Member

Comment 11 by bugdroid1@chromium.org, Sep 28 2016

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

commit 188a5ae80ab8cca65c8c987a5bfb8a37e33a773e
Author: juncai <juncai@chromium.org>
Date: Wed Sep 28 19:36:29 2016

Update image and text color when row is selected in the chooser on Mac

This CL added code to change the image and text color in the chooser row
when it is selected so that it is more visible.

1. changed text from black to white when row is selected.
2. changed image from black to white when row is selected.
3. changed "Paired" text color to use gfx::kGoogleGreen300 when row is selected.

I uploaded screenshots to the issue page.

BUG= 645693 

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

[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/chrome/browser/chooser_controller/mock_chooser_controller.cc
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/chrome/browser/chooser_controller/mock_chooser_controller.h
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/chrome/browser/ui/cocoa/chooser_content_view_cocoa.h
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/chrome/browser/ui/cocoa/chooser_content_view_cocoa.mm
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/chrome/browser/ui/cocoa/extensions/chooser_dialog_cocoa_controller.mm
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/chrome/browser/ui/cocoa/extensions/chooser_dialog_cocoa_controller_unittest.mm
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/chrome/browser/ui/cocoa/website_settings/chooser_bubble_ui_cocoa.mm
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_0_bar_selected.png
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_1_bar.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_1_bar_selected.png
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_2_bar.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_2_bar_selected.png
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_3_bar.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_3_bar_selected.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_4_bar_selected.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_200_percent/common/signal_0_bar_selected.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_200_percent/common/signal_1_bar_selected.png
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_200_percent/common/signal_2_bar.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_200_percent/common/signal_2_bar_selected.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_200_percent/common/signal_3_bar_selected.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_200_percent/common/signal_4_bar_selected.png
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/ui_resources.grd

Project Member

Comment 12 by bugdroid1@chromium.org, Sep 28 2016

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

commit 188a5ae80ab8cca65c8c987a5bfb8a37e33a773e
Author: juncai <juncai@chromium.org>
Date: Wed Sep 28 19:36:29 2016

Update image and text color when row is selected in the chooser on Mac

This CL added code to change the image and text color in the chooser row
when it is selected so that it is more visible.

1. changed text from black to white when row is selected.
2. changed image from black to white when row is selected.
3. changed "Paired" text color to use gfx::kGoogleGreen300 when row is selected.

I uploaded screenshots to the issue page.

BUG= 645693 

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

[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/chrome/browser/chooser_controller/mock_chooser_controller.cc
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/chrome/browser/chooser_controller/mock_chooser_controller.h
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/chrome/browser/ui/cocoa/chooser_content_view_cocoa.h
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/chrome/browser/ui/cocoa/chooser_content_view_cocoa.mm
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/chrome/browser/ui/cocoa/extensions/chooser_dialog_cocoa_controller.mm
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/chrome/browser/ui/cocoa/extensions/chooser_dialog_cocoa_controller_unittest.mm
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/chrome/browser/ui/cocoa/website_settings/chooser_bubble_ui_cocoa.mm
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_0_bar_selected.png
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_1_bar.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_1_bar_selected.png
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_2_bar.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_2_bar_selected.png
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_3_bar.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_3_bar_selected.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_100_percent/common/signal_4_bar_selected.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_200_percent/common/signal_0_bar_selected.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_200_percent/common/signal_1_bar_selected.png
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_200_percent/common/signal_2_bar.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_200_percent/common/signal_2_bar_selected.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_200_percent/common/signal_3_bar_selected.png
[add] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/default_200_percent/common/signal_4_bar_selected.png
[modify] https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e/ui/resources/ui_resources.grd

Status: Fixed (was: Started)

Comment 14 Deleted

Project Member

Comment 15 by bugdroid1@chromium.org, Sep 29 2016

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

commit 310655348f28d0b2135ff8eff52ba1945782587c
Author: juncai <juncai@chromium.org>
Date: Thu Sep 29 05:14:10 2016

Update image and text color when row is selected in the chooser on Mac

This CL added code to change the image and text color in the chooser row
when it is selected so that it is more visible.

1. changed text from black to white when row is selected.
2. changed image from black to white when row is selected.
3. changed "Paired" text color to use gfx::kGoogleGreen300 when row is selected.

I uploaded screenshots to the issue page.

BUG= 645693 

Committed: https://crrev.com/188a5ae80ab8cca65c8c987a5bfb8a37e33a773e
Review-Url: https://codereview.chromium.org/2342723002
Cr-Original-Commit-Position: refs/heads/master@{#421606}
Cr-Commit-Position: refs/heads/master@{#421752}

[modify] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/chrome/browser/chooser_controller/mock_chooser_controller.cc
[modify] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/chrome/browser/chooser_controller/mock_chooser_controller.h
[modify] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/chrome/browser/ui/cocoa/chooser_content_view_cocoa.h
[modify] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/chrome/browser/ui/cocoa/chooser_content_view_cocoa.mm
[modify] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/chrome/browser/ui/cocoa/extensions/chooser_dialog_cocoa_controller.mm
[modify] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/chrome/browser/ui/cocoa/extensions/chooser_dialog_cocoa_controller_unittest.mm
[modify] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/chrome/browser/ui/cocoa/website_settings/chooser_bubble_ui_cocoa.mm
[add] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/default_100_percent/common/signal_0_bar_selected.png
[modify] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/default_100_percent/common/signal_1_bar.png
[add] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/default_100_percent/common/signal_1_bar_selected.png
[modify] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/default_100_percent/common/signal_2_bar.png
[add] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/default_100_percent/common/signal_2_bar_selected.png
[modify] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/default_100_percent/common/signal_3_bar.png
[add] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/default_100_percent/common/signal_3_bar_selected.png
[add] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/default_100_percent/common/signal_4_bar_selected.png
[add] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/default_200_percent/common/signal_0_bar_selected.png
[add] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/default_200_percent/common/signal_1_bar_selected.png
[modify] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/default_200_percent/common/signal_2_bar.png
[add] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/default_200_percent/common/signal_2_bar_selected.png
[add] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/default_200_percent/common/signal_3_bar_selected.png
[add] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/default_200_percent/common/signal_4_bar_selected.png
[modify] https://crrev.com/310655348f28d0b2135ff8eff52ba1945782587c/ui/resources/ui_resources.grd

I've noticed a UI glitch when selecting row, keep mouse click down and move over other rows. See screen recording attached.


white-highlight-issue.mov
4.8 MB Download
Status: Started (was: Fixed)
reopen for the above bug found by fbeaufort@.
Project Member

Comment 18 by bugdroid1@chromium.org, Oct 4 2016

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

commit 79e7fbecef8cae765f7ff396db054a3cc83c8daa
Author: juncai <juncai@chromium.org>
Date: Tue Oct 04 17:41:51 2016

Update chooser row view when mouse click down and move over rows

This CL adds code to update row view in the chooser when mouse button
is down and moves over rows.

BUG= 645693 

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

[modify] https://crrev.com/79e7fbecef8cae765f7ff396db054a3cc83c8daa/chrome/browser/ui/cocoa/extensions/chooser_dialog_cocoa_controller.mm
[modify] https://crrev.com/79e7fbecef8cae765f7ff396db054a3cc83c8daa/chrome/browser/ui/cocoa/website_settings/chooser_bubble_ui_cocoa.mm

Status: Fixed (was: Started)

Sign in to add a comment