New issue
Advanced search Search tips

Issue 832076 link

Starred by 1 user

Issue metadata

Status: Fixed
Owner:
Closed: Apr 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: iOS
Pri: 1
Type: Task
Q2



Sign in to add a comment

Have a way to differentiate the omnibox background and the "spotlighted" state of the button

Project Member Reported by gambard@chromium.org, Apr 12 2018

Issue description

When a popup menu is presented, a grey background is displayed below the button associated with it.
It is hard to differentiate between this background and the one behind the omnibox.
 
Simulator Screen Shot - iPhone 8 Plus - 2018-04-12 at 16.03.42.png
256 KB View Download
Components: Design
Labels: ui-update-ux-assets
This problem came up now the Search icon background has a lighter shade of grey compared to previous designs.  

As I understood, it causes two issues:

1. Wrongly implying the Overflow (and other active icon states) are connected to the Search icon. 

However:
- People just tapped the Overflow icon (or other icons that trigger popups) and noticed the state change, so I'm expecting they won't assume a connection to the search icon. 
- The icon pressed still has a darker shade of grey than the Search icon. 

Possible solution: If this is a real issue, I would consider to make the Search icon background slightly lighter/ nearly transparent when a popup is triggered. 


2. Making the Search icon look similar to the bookmark icon (and possibly other toggled states) once a page is bookmarked. 

Possible solution: Making the toggled states more explicit, e.g. turning the icons blue like on desktop. Not sure about the implications of this. Not sure if the issue is large enough for such a dramatic change. 

What do you think Pete and Mardini? 


I personally don't think this is an issue for the reasons outlined in your first point.

If we are worried, we should probably leave the search icon background unchanged but make the background colour for the selected state for the icons lighter. 

In all cases, I don't think users would see it because their finger will be on it, no?


I agree with your Martijn's possible solution to problem 1. I would even go as far as to say lets make it completely transparent, just to dispel any doubt. As for problem 2 it is a bit tricker. Martijn are working on solving this now so stay tuned.
Have we settled on a solution for this ?
Project Member

Comment 6 by bugdroid1@chromium.org, Apr 17 2018

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

commit 657689fc10f19dbe7e94a36cbe91b02789ac61d9
Author: Gauthier Ambard <gambard@chromium.org>
Date: Tue Apr 17 07:34:23 2018

Change the spotlight put on toolbar buttons

This CL changes the way the toolbar button associated with a popup menu
is spotlighted. It reduces the alpha of the buttons.
This is used to reduce the alpha of the background of the omnibox button
to prevent confusion between the spotlighted button and the omnibox
button.
It also changes the color of the spotlight in incognito, making it white
instead of dark.

Bug:  817752 ,  832076 
Cq-Include-Trybots: master.tryserver.chromium.mac:ios-simulator-cronet;master.tryserver.chromium.mac:ios-simulator-full-configs
Change-Id: Iee6797945df2e9ec65464ca0393789eb3b581e71
Reviewed-on: https://chromium-review.googlesource.com/1014124
Reviewed-by: Justin Cohen <justincohen@chromium.org>
Commit-Queue: Gauthier Ambard <gambard@chromium.org>
Cr-Commit-Position: refs/heads/master@{#551272}
[modify] https://crrev.com/657689fc10f19dbe7e94a36cbe91b02789ac61d9/ios/chrome/browser/ui/toolbar/buttons/toolbar_button.mm
[modify] https://crrev.com/657689fc10f19dbe7e94a36cbe91b02789ac61d9/ios/chrome/browser/ui/toolbar/buttons/toolbar_configuration.h
[modify] https://crrev.com/657689fc10f19dbe7e94a36cbe91b02789ac61d9/ios/chrome/browser/ui/toolbar/buttons/toolbar_configuration.mm
[modify] https://crrev.com/657689fc10f19dbe7e94a36cbe91b02789ac61d9/ios/chrome/browser/ui/toolbar/buttons/toolbar_constants.h
[modify] https://crrev.com/657689fc10f19dbe7e94a36cbe91b02789ac61d9/ios/chrome/browser/ui/toolbar/buttons/toolbar_constants.mm
[modify] https://crrev.com/657689fc10f19dbe7e94a36cbe91b02789ac61d9/ios/chrome/browser/ui/toolbar/buttons/toolbar_tools_menu_button.mm

Cc: martijnb@chromium.org
Labels: S-Visual-Polish small
Owner: gambard@chromium.org
Status: Fixed (was: Assigned)
I am dimming the background of the omnibox button when the popup menu is presented.
Here is two screenshots with the tools menu on/off.
Simulator Screen Shot - iPhone 8 Plus - 2018-04-17 at 09.40.40.png
660 KB View Download
Simulator Screen Shot - iPhone 8 Plus - 2018-04-17 at 09.40.37.png
589 KB View Download
NextAction: 2018-04-25
Beautiful 
Looks good to me, thanks! 
The NextAction date has arrived: 2018-04-25
NextAction: ----

Sign in to add a comment