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

Issue 643292 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Sep 2016
Cc:
EstimatedDays: ----
NextAction: ----
OS: Linux
Pri: 2
Type: Bug



Sign in to add a comment

Desktop Capture Picker Window Show Selected Source More Clearly

Project Member Reported by qiangchen@chromium.org, Sep 1 2016

Issue description

The indication for the selected tab on Chrome Tab is not clear enough. The title is changed to bold and an outline is added.
It's important to give a very clear indication for the selected tab for security and user experience reasons.
I suggest to give the selected item a clear background color.

 
To explain it clearly: Look at the snapshot for Linux:
1. We use bold title and an "orange" image border to represent selection
2. We use a light dark background color to represent mouse hovering.
WindowCaptureLinux.png
85.3 KB View Download
Actually, we did not hard code the selection border color or the hovering bg color. They are pulled from theme.

More specifically, 
the selection border color is kColorId_FocusedMenuItemBackgroundColor, 
and the hovering bg color is kColorId_HoverMenuItemBackgroundColor.
But the setting does not work well with Windows.
1. The selection border color is light gray.
2. The hovering bg color is white, and thus invisible.


WindowCaptureWin.PNG
54.0 KB View Download
Cc: msw@chromium.org niklase@chromium.org
msw@: Do you have any idea about how to work this around?

Comment 5 by msw@chromium.org, Sep 7 2016

Look at ui/views/controls/tree/ and ui/views/controls/table.
TableView and TreeView show selected items with background colors like:
  ui::NativeTheme::kColorId_TableSelectionBackgroundFocused
  ui::NativeTheme::kColorId_TreeSelectionBackgroundUnfocused
I suggest re-using *all* colors from one of these controls (replace all current colors).

Also, maybe don't change the colors for hovering? (tree and table don't do this)
Or, if you really want a hover color, perhaps blend selected and normal or similar?
Thanks. I found the Color setting for TableView works for both OS.
Project Member

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

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

commit 4b2cc3e651652b3bab2ed52c33488ebad57731e4
Author: qiangchen <qiangchen@chromium.org>
Date: Mon Sep 12 17:21:41 2016

Desktop Capture Picker: More Clear Selection

We set border color for source item to indicate it is selected.
But the color is just light grey on Windows and ChromeOS, and thus
hardly visible.

We changed to use kColorId_FocusedBorderColor, which looks good
on all platforms.

BUG= 643292 

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

[modify] https://crrev.com/4b2cc3e651652b3bab2ed52c33488ebad57731e4/chrome/browser/ui/views/desktop_capture/desktop_media_picker_views.cc
[modify] https://crrev.com/4b2cc3e651652b3bab2ed52c33488ebad57731e4/chrome/browser/ui/views/desktop_capture/desktop_media_source_view.cc
[modify] https://crrev.com/4b2cc3e651652b3bab2ed52c33488ebad57731e4/chrome/browser/ui/views/desktop_capture/desktop_media_source_view.h

Status: Fixed (was: Assigned)
Run Desktop Capture Picker Window on Windows and ChromeOS.

The selection border should be blue.
Labels: Merge-Request-54

Comment 10 by dimu@chromium.org, Sep 13 2016

Labels: -Merge-Request-54 Merge-Approved-54 Hotlist-Merge-Approved
Your change meets the bar and is auto-approved for M54 (branch: 2840)
Project Member

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

Labels: -merge-approved-54 merge-merged-2840
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/c43f5d39d135bb0ce1d18eb41d8770b8eadb8c71

commit c43f5d39d135bb0ce1d18eb41d8770b8eadb8c71
Author: qiangchen <qiangchen@chromium.org>
Date: Tue Sep 13 21:01:18 2016

Desktop Capture Picker: More Clear Selection

We set border color for source item to indicate it is selected.
But the color is just light grey on Windows and ChromeOS, and thus
hardly visible.

We changed to use kColorId_FocusedBorderColor, which looks good
on all platforms.

BUG= 643292 

TBR=msw@chromium.org
NOPRESUBMIT=true
NOTRY=true

Review-Url: https://codereview.chromium.org/2323913002
Cr-Commit-Position: refs/heads/master@{#417964}
(cherry picked from commit 4b2cc3e651652b3bab2ed52c33488ebad57731e4)

Review-Url: https://codereview.chromium.org/2335373002
Cr-Commit-Position: refs/branch-heads/2840@{#340}
Cr-Branched-From: 1ae106dbab4bddd85132d5b75c670794311f4c57-refs/heads/master@{#414607}

[modify] https://crrev.com/c43f5d39d135bb0ce1d18eb41d8770b8eadb8c71/chrome/browser/ui/views/desktop_capture/desktop_media_picker_views.cc
[modify] https://crrev.com/c43f5d39d135bb0ce1d18eb41d8770b8eadb8c71/chrome/browser/ui/views/desktop_capture/desktop_media_source_view.cc
[modify] https://crrev.com/c43f5d39d135bb0ce1d18eb41d8770b8eadb8c71/chrome/browser/ui/views/desktop_capture/desktop_media_source_view.h

Cc: ashej...@chromium.org
Labels: TE-Verified-M54 TE-Verified-54.0.2840.27 OS-Linux
Retested the above issue on Ubuntu 14.04 with chrome version '54.0.2840.27' and border color gets displayed as orange when the item is selected in Desktop capture picker. Hence marking the same as TE-Verified-54.0.2840.27.

Attach is the screenshot for the same.

Thank you!

Screenshot from 2016-09-14 17:59:50.png
284 KB View Download
Project Member

Comment 13 by bugdroid1@chromium.org, Oct 27 2016

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

commit c43f5d39d135bb0ce1d18eb41d8770b8eadb8c71
Author: qiangchen <qiangchen@chromium.org>
Date: Tue Sep 13 21:01:18 2016

Desktop Capture Picker: More Clear Selection

We set border color for source item to indicate it is selected.
But the color is just light grey on Windows and ChromeOS, and thus
hardly visible.

We changed to use kColorId_FocusedBorderColor, which looks good
on all platforms.

BUG= 643292 

TBR=msw@chromium.org
NOPRESUBMIT=true
NOTRY=true

Review-Url: https://codereview.chromium.org/2323913002
Cr-Commit-Position: refs/heads/master@{#417964}
(cherry picked from commit 4b2cc3e651652b3bab2ed52c33488ebad57731e4)

Review-Url: https://codereview.chromium.org/2335373002
Cr-Commit-Position: refs/branch-heads/2840@{#340}
Cr-Branched-From: 1ae106dbab4bddd85132d5b75c670794311f4c57-refs/heads/master@{#414607}

[modify] https://crrev.com/c43f5d39d135bb0ce1d18eb41d8770b8eadb8c71/chrome/browser/ui/views/desktop_capture/desktop_media_picker_views.cc
[modify] https://crrev.com/c43f5d39d135bb0ce1d18eb41d8770b8eadb8c71/chrome/browser/ui/views/desktop_capture/desktop_media_source_view.cc
[modify] https://crrev.com/c43f5d39d135bb0ce1d18eb41d8770b8eadb8c71/chrome/browser/ui/views/desktop_capture/desktop_media_source_view.h

Sign in to add a comment