1180213 - [UX][Eng] Adjustments to identity block for pixel perfection

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P1)

Description

[:Paolo Amadini]

Once the changes to the identity block in bug 1175689, bug 1180207, and bug 1180207 have all been implemented, most likely there will be small adjustments needed.

This bug is filed to track and provide an early estimate of the effort required, assuming most of the work is in place. The actual modifications will depend on the feedback from UX and QA for different platforms.

Some relevant platform and platform theme combinations:

- Windows XP - Classic theme
- Windows XP - Default theme
- Windows 7 - Default theme
- Windows 7 - High Contrast White theme
- Windows 7 - High Contrast Black theme
- Windows 8
- Windows 10 (?)
- Mac OS X 10.9 - Standard DPI
- Mac OS X 10.9 - HiDPI
- Mac OS X 10.10 - Standard DPI
- Mac OS X 10.10 - HiDPI
- Linux

There are then the product theme variants for each:

- Light theme
- Dark theme (Developer Edition)

The following also applies specifically to the upper browser area:

- Without lightweight theme
- With lightweight theme

There are various states of the identity block:

- Disabled (no interaction with icons, no site label)
- Insecure and HTTPS DV (no site label)
- HTTPS EV (with site label)
- Internal product page (with site label, different color)

They can be displayed with other elements on the left:

- With notification icons area
- Without notification icons area

Each of the above can be displayed in different modes:

- With navigation, forward button invisible
- With navigation, forward button visible and enabled
- With navigation, forward button visible and disabled
- Without navigation (popup window)

We often use different CSS rules for the following cases:

- Left to Right
- Right to Left

Comment 1

[:Paolo Amadini]

The second item should be bug 1180202.

Comment 2

[:Paolo Amadini]

Correction to the product theme variants:

- Standard light theme
- Developer Edition light theme
- Developer Edition dark theme

Comment 3

[:Paolo Amadini]

I'll add notes to this bug for now, we can then look into splitting it as necessary.

One possible things to change / simplify is the color of the separator between the identity block and the page address. Now we display a green lock icon in more cases. We're also considering making the "https" text green in more cases. The current green separator is very subtle and has an opacity of .2 instead of .5. We also have a different color for internal pages.

We have to decide whether we need the separator to match the text color on the left, the text color on the right, or maybe the border color of the location bar or simply the identity block background (white then grey on hover).

Comment 4

[:Paolo Amadini]

Bug 1181582 highlighted an issue with changing the vertical margin of the identity block based on the focus state on OS X: the separator actually changes its height and this has become more visible without the gradient.

We may actually look into fixing this as part of bug 1184060.

Comment 5

[Dão Gottwald [:dao]]

(In reply to :Paolo Amadini from comment #3)
> One possible things to change / simplify is the color of the separator
> between the identity block and the page address. Now we display a green lock
> icon in more cases. We're also considering making the "https" text green in
> more cases. The current green separator is very subtle and has an opacity of
> .2 instead of .5. We also have a different color for internal pages.
> 
> We have to decide whether we need the separator to match the text color on
> the left, the text color on the right, or maybe the border color of the
> location bar or simply the identity block background (white then grey on
> hover).

It seems like the colored border, which is technically a background-image, is just a leftover from when this was used visually as a background image. I think it makes most sense to just use the same gray for all cases. I was going to file a bug on this after bug 1185362.

Comment 6

[:Paolo Amadini]

(In reply to Dão Gottwald [:dao] from comment #5)
> It seems like the colored border, which is technically a background-image,
> is just a leftover from when this was used visually as a background image. I
> think it makes most sense to just use the same gray for all cases. I was
> going to file a bug on this after bug 1185362.

That makes sense, if it's likely a leftover we might just go ahead and do that. We might also look into using just a border as it's a solid line now, or a border image if possible.

Comment 7

[:Paolo Amadini]

To clarify the status of this bug, we did most of the work in the dependencies and there might be just a few adjustments left. We have to include these in the first version we release, but we can easily uplift to Aurora if necessary.

Comment 8

[:Paolo Amadini]

It's been suggested that we use a transition for the background color ("transition: background-color 0.15s ease;"). However, we'd also have to figure out how to transition the height of the separator between the identity block and the URL bar.

Comment 9

[:Paolo Amadini]

I filed bug 1196313 for the background color transition, which is the last known improvement we would like to make to the identity block. When that bug is resolved, this one can be marked as resolved as well.

See the description in comment 0 for some of the test cases that can be when verifying this bug.

Comment 10

[Marco Mucci [:MarcoM]]

(In reply to :Paolo Amadini from comment #9)
> I filed bug 1196313 for the background color transition, which is the last
> known improvement we would like to make to the identity block. When that bug
> is resolved, this one can be marked as resolved as well.
> 
> See the description in comment 0 for some of the test cases that can be when
> verifying this bug.

Fixed by Bug 1196313

Comment 11

[Paul Silaghi, QA [:pauly]]

(In reply to Marco Mucci [:MarcoM] from comment #10)
> Fixed by Bug 1196313
So, I guess this is fixed on FF 42, right ?

Comment 12

[Marco Mucci [:MarcoM]]

(In reply to Paul Silaghi, QA [:pauly] from comment #11)
> (In reply to Marco Mucci [:MarcoM] from comment #10)
> > Fixed by Bug 1196313
> So, I guess this is fixed on FF 42, right ?

Comment 13

[:Paolo Amadini]

(In reply to Paul Silaghi, QA [:pauly] from comment #11)
> So, I guess this is fixed on FF 42, right ?

Correct, the QA required here is to try different combinations of factors from comment 0 and verify that nothing looks out of place in the site identity block in the address bar.

Comment 14

[Paul Silaghi, QA [:pauly]]

I've tested this across platforms: Win XP, Win 7, Win 8.1, Ubuntu 14.04, OS X 10.10 standard/HiDPI.
Possible issues:
1. Win 7 high contrast themes, default theme in FF -> Mozilla EV is highlighted without hover: http://imgur.com/WY4vyfM
2. Win XP high contrast white theme -> about:home - text exceeds the panel: http://imgur.com/NRA0TPe

Comment 15

[:Paolo Amadini]

(In reply to Paul Silaghi, QA [:pauly] from comment #14)
> I've tested this across platforms: Win XP, Win 7, Win 8.1, Ubuntu 14.04, OS
> X 10.10 standard/HiDPI.

Thanks! Glad that everything worked well. Did you test lightweight themes, RTL, and popup windows as well?

> 1. Win 7 high contrast themes, default theme in FF -> Mozilla EV is
> highlighted without hover: http://imgur.com/WY4vyfM

This is known. We must use white as the background because of how we style the notification icon separator to the left of the identity block.

> 2. Win XP high contrast white theme -> about:home - text exceeds the panel:
> http://imgur.com/NRA0TPe

I've seen this in bug 1202681, I think it's the same issue.

Comment 16

[Petruta Horea [:phorea]]

(In reply to :Paolo Amadini from comment #15)
> (In reply to Paul Silaghi, QA [:pauly] from comment #14)
> > I've tested this across platforms: Win XP, Win 7, Win 8.1, Ubuntu 14.04, OS
> > X 10.10 standard/HiDPI.
> 
> Thanks! Glad that everything worked well. Did you test lightweight themes,
> RTL, and popup windows as well?
 
Yes, all scenarios were covered.

> > 1. Win 7 high contrast themes, default theme in FF -> Mozilla EV is
> > highlighted without hover: http://imgur.com/WY4vyfM
> 
> This is known. We must use white as the background because of how we style
> the notification icon separator to the left of the identity block.
> 
> > 2. Win XP high contrast white theme -> about:home - text exceeds the panel:
> > http://imgur.com/NRA0TPe
> 
> I've seen this in bug 1202681, I think it's the same issue.

We can test again, after the fix for bug 1202681 lands. For now marking 42 as verified.