1172890 - [UX][Windows 10] Can't tell when window is unfocused if titlebar is off

Status: VERIFIED FIXED

(Firefox :: Theme, defect, P4)

Description

[:Gijs (he/him)]

As in summary. The titlebar color doesn't change for classic windows apps, only the foreground color of the text in it, but text in the tabs in the titlebar doesn't change color in Firefox.

Hopefully the new designs here will fix this?

Comment 1

[:Gijs (he/him)]

Seems like we should have some kind of design here... maybe we can dim the grey background, maybe we can dim the icons/urlbar/tab text... something. :-)

Comment 2

[Stephen Horlander [:shorlander]]

(In reply to :Gijs Kruitbosch from comment #1)
> Seems like we should have some kind of design here... maybe we can dim the
> grey background, maybe we can dim the icons/urlbar/tab text... something. :-)

I like dimming the icons. I am kind of waiting a little bit to see if MS does something beyond just de-emphasizing the border highlight.

Comment 3

[Jared Wein [:jaws] (please needinfo? me)]

Gijs, can you explain why you marked this bug as blocking bug 1173357?

Comment 4

[:Gijs (he/him)]

(In reply to (Limited avail. until June 16)  Jared Wein [:jaws] (please needinfo? me) from comment #3)
> Gijs, can you explain why you marked this bug as blocking bug 1173357?

Copy-paste fail, meant bug 1158143.

Comment 5

[Dão Gottwald [:dao]]

(In reply to Stephen Horlander [:shorlander] (Away until 7/20) from comment #2)
> I am kind of waiting a little bit to see if MS
> does something beyond just de-emphasizing the border highlight.

They still don't, right?

Comment 6

[Dão Gottwald [:dao]]

Downgrading the priority further since I think we're consistent with the general Windows 10 design.

Comment 7

[Stephen Horlander [:shorlander]]

Attachment: Firefox - Windows 10 - Inactive - 01

We could fade out the UI a little bit to make it more obvious it is in the background. Kind of subtle but would help.

Comment 8

[(Currently slow to respond) Philipp Sackl [:phlsa] (Firefox UX) please use needinfo]

Yeah, I agree that this would help!

Comment 9

[Justin Dolske [:Dolske]]

Bug 1196266 might be related here. At least I assumed a colored titlebar would change state in the background, but I just checked and it doesn't on Win10 RTM. Does the extended support for this in newer previews do anything different?

Comment 10

[Liz Henry (:lizzard) (relman/hg->git project)]

Looks like people are still finding the window/title bar status hard to interpret (since Firefox 40).  Stephen, do you want to take this bug and change the theme maybe for Firefox 49 or even 48?  I don't think we need to track it, but since it came up in another bug report it seems potentially good to fix.

Comment 11

[Stephen Horlander [:shorlander]]

(In reply to Liz Henry (:lizzard) (needinfo? me) from comment #10)
> Looks like people are still finding the window/title bar status hard to
> interpret (since Firefox 40).  Stephen, do you want to take this bug and
> change the theme maybe for Firefox 49 or even 48?  I don't think we need to
> track it, but since it came up in another bug report it seems potentially
> good to fix.

I don't have the time to make a patch for this, but if someone else does I think the design in comment 7 would be a good improvement.

Comment 13

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch

Comment 14

[Liz Henry (:lizzard) (relman/hg->git project)]

We could uplift as far as aurora too.

Comment 15

[Dão Gottwald [:dao]]

Comment on attachment 8749747 [details] [diff] [review]
Patch

>+          #navigator-toolbox .toolbarbutton-icon:-moz-window-inactive,
>+          #navigator-toolbox .dropmarker-icon:-moz-window-inactive {
>+            opacity: .5;
>+          }

This makes it pretty impossible to differentiate between enabled buttons and disabled ones.

Also, why restrict this to #navigator-toolbox?

Comment 16

[Jared Wein [:jaws] (please needinfo? me)]

Attachment: Bug 1172890 - Reduce the opacity of the tab label in inactive windows to make background windows more obvious that they are not the foreground window.

Review commit: https://reviewboard.mozilla.org/r/65388/diff/#index_header
See other reviews: https://reviewboard.mozilla.org/r/65388/

Comment 17

[Jared Wein [:jaws] (please needinfo? me)]

I set this rule on #navigator-toolbox so it will affect all of the browser chrome at the top of the window as well as to multiply any opacity rules that will be in effect for disabled buttons.

I also played with using `filter: blur(1px);` to give the background window a Gaussian blur which has a nice effect but it's not often seen on Windows.

Comment 18

[Dão Gottwald [:dao]]

Comment on attachment 8772639 [details]
Bug 1172890 - Reduce the opacity of the tab label in inactive windows to make background windows more obvious that they are not the foreground window.

Considering that Windows 10 by default does almost nothing here, and considering how Windows has handled this in the past, this effect seems too strong to me. It feels alien. IMHO we should just adjust the titlebar color.

Comment 19

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8772639 [details]
Bug 1172890 - Reduce the opacity of the tab label in inactive windows to make background windows more obvious that they are not the foreground window.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/65388/diff/1-2/

Comment 20

[Dão Gottwald [:dao]]

Comment on attachment 8772639 [details]
Bug 1172890 - Reduce the opacity of the tab label in inactive windows to make background windows more obvious that they are not the foreground window.

If we want to be consistent with Explorer, I think I'd prefer fading only the labels and not the icons. Fading all tab contents still feels a bit macOS-y to me. It's also somewhat inconsistent because e.g. the new tab button right next to the tabs isn't faded, which looks odd.

Secondly, :root is in theory cheaper than #main-window, because IDs aren't actually guaranteed to be unique, so ID selectors are treated just like class selectors under the hood.

You should also put :-moz-window-inactive in the end.

So, to sum it up:

:root[tabsintitlebar] .tab-label:-moz-window-inactive

Comment 21

[Dão Gottwald [:dao]]

(In reply to Dão Gottwald [:dao] from comment #20)
> Secondly, :root is in theory cheaper than #main-window, because IDs aren't
> actually guaranteed to be unique, so ID selectors are treated just like
> class selectors under the hood.

Also filed bug 1292878.

Comment 22

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8772639 [details]
Bug 1172890 - Reduce the opacity of the tab label in inactive windows to make background windows more obvious that they are not the foreground window.

Review request updated; see interdiff: https://reviewboard.mozilla.org/r/65388/diff/2-3/

Comment 23

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8772639 [details]
Bug 1172890 - Reduce the opacity of the tab label in inactive windows to make background windows more obvious that they are not the foreground window.

Not sure why mozreview changed this back to r?, especially since bug 1195661 exists.

Comment 24

[Jared Wein [:jaws] (please needinfo? me)]

https://hg.mozilla.org/integration/fx-team/rev/019bbc497f9ed565fda0de3479d2b6af015f5f83
Bug 1172890 - Reduce the opacity of the tab label in inactive windows to make background windows more obvious that they are not the foreground window. This matches closer to how Windows works, because when we draw our tabs in the titlebar then it makes sense to treat them similar to how titlebars of other apps work. For example, Windows Explorer has their titlebar content with less strength when in the background. r=dao

Comment 25

[Phil Ringnalda (:philor)]

https://hg.mozilla.org/mozilla-central/rev/019bbc497f9e

Comment 26

[Tanvir Rahman]

I have reproduced this bug with Nightly 41.0a1(2015-06-09) on Windows 10, 64 bit!

The Bug's fix is now verified on latest Nightly 51.0a1

Build ID 	20160811030201
User Agent 	Mozilla/5.0 (Windows NT 10.0; WOW64; rv:51.0) Gecko/20100101 Firefox/51.0

[bugday-20160810]

Comment 27

[Dão Gottwald [:dao]]

(In reply to Liz Henry (:lizzard) (needinfo? me) from comment #14)
> We could uplift as far as aurora too.

Jared, do we want to uplift this to aurora?

Comment 28

[Jared Wein [:jaws] (please needinfo? me)]

Comment on attachment 8772639 [details]
Bug 1172890 - Reduce the opacity of the tab label in inactive windows to make background windows more obvious that they are not the foreground window.

Approval Request Comment
[Feature/regressing bug #]: Windows 10 support
[User impact if declined]: hard to tell which Firefox window is in the foreground and which is in the background
[Describe test coverage new/current, TreeHerder]: simple CSS change, no automated tests
[Risks and why]: none
[String/UUID change made/needed]: none

Comment 29

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Comment on attachment 8772639 [details]
Bug 1172890 - Reduce the opacity of the tab label in inactive windows to make background windows more obvious that they are not the foreground window.

Fix for a regression on win10, CSS only, low risk, verified on Nightly, Aurora50+

Comment 30

[Wes Kocher (:KWierso) (Not reading bugmail; email directly if needed)]

https://hg.mozilla.org/releases/mozilla-aurora/rev/bef207d78f05