1400218 - The border line for address bar should be Blue-50 #0a84ff

Status: NEW

(Firefox :: Theme, defect, P5)

Description

[ovidiu boca[:Ovidiu]]

Tested on Mac OS X 10.10, Windows 7 with the latest Nightly 57.0a1(2017-09-14).

Step to reproduce:

1. Go to about:home, the "Search the web" section is focused.(Please take a look at the blue color of the border line )
2. Focus the URL bar. (See the border line)

Expected result:

The blue color should be the same.

Actual result:

There are 2 types of blue. 


Note: I'm not sure if this behavior is desired or not.

Comment 1

[Mark Banner (:standard8)]

I believe the colours here are Activity Stream's responsibility.

Comment 2

[Ed Lee :Mardak]

Pretty sure it's by design to have that particular blue.

Comment 3

[Aaron Benson]

Both selected states look a little off to me .. and on macOS it's using the theme and using a grey highlight if I have my mac set to "graphite". We should be overriding that color, too.

Here's the original spec (see towards the bottom): https://mozilla.invisionapp.com/share/PYC5LJJXG#/229940647_Toolbars

Lets make the awesomebar and new tab in-content search follow this. 

Ed, we can also just do a 1px border color highlight. No need to color in the "go arrow" section as well.

Comment 4

[Ed Lee :Mardak]

Are the photon colors not quite exact? http://design.firefox.com/photon/visual/color.html#blue

The border color says it should be hsl(210,100%,52%) but that's #0a85ff whereas Blue-50 is #0a84ff.

The box shadow of hsl(240,4%,5%) is indeed Grey-90 #0c0c0d.

For the blue, should it be the hsl or Blue-50?

Comment 5

[Aaron Benson]

Good catch, maybe just an old color or typo. When in doubt go with the Design System website .. Blue-50 (#0a84ff).

Comment 6

[Ed Lee :Mardak]

Suspiciously, in the original "Follow Photon Guidelines" spec from amylee, we used Blue-50 #0a84ff for activity stream input:
https://github.com/mozilla/activity-stream/pull/3235/files#diff-56be1056120f3e241637d9d62098662cR20

Then in a later color adjustment issue from aaron, we switched to Blue-60 #0060df:
https://github.com/mozilla/activity-stream/pull/3287/files#diff-56be1056120f3e241637d9d62098662cR20

I wonder if the "original spec" is similarly outdated now, and the location bar should actually be Blue-60 that Activity Stream is using?
original spec: https://mozilla.invisionapp.com/share/PYC5LJJXG#/229940647_Toolbars

Comment 7

[Aaron Benson]

That was my mistake. Blue-60 is used for primary buttons because it's darker and passes accessibility guidelines but we use Blue-50 for input borders.

Comment 8

[Ed Lee :Mardak]

Attachment: blue-50 border, blue-60 button

(In reply to Aaron Benson from comment #7)
> Blue-60 is used for primary buttons because it's darker and passes accessibility
> guidelines but we use Blue-50 for input borders.
So.. Activity Stream's search input box includes a primary search button. I would assume we don't want the search button to be Blue-60 while the border is Blue-50?

Comment 9

[Ed Lee :Mardak]

Activity Stream will update its blue in https://github.com/mozilla/activity-stream/issues/3583. This bug will be for fixing the address bar.

For the address bar, I'm guessing this means ignoring the OS's focus color to always show Blue-50?

Comment 10

[Aaron Benson]

Attachment: Screen Shot 2017-09-23 at 9.49.30 AM.png

Ed, lets not color in that arrow/button. A 2px border like this will help match the awesomebar better.

Comment 11

[Dão Gottwald [:dao]]

(In reply to Ed Lee :Mardak (PTO July 7-22) from comment #9)
> For the address bar, I'm guessing this means ignoring the OS's focus color
> to always show Blue-50?

Pretty sure we don't want this e.g. on Ubuntu or with other random Gtk themes, on Mac with Mojave's various accent colors (bug 1470323), and on Windows with a high contrast theme enabled.