882151 - Windows 7: Color difference between the bottom of the selected tab and the navbar

Status: RESOLVED WORKSFORME

(Firefox :: Theme, defect)

Description

[Scoobidiver (away)]

Attachment: Tab shade

The tab shade is slightly darker than the UI shade and has also a kind of grid on the borders.

Comment 1

[Justin Dolske [:Dolske]]

Still an issue? I know this was an OSX problem too a while back, but has since been fixed.

Comment 2

[Scoobidiver (away)]

(In reply to Justin Dolske [:Dolske] from comment #1)
> Still an issue? I know this was an OSX problem too a while back, but has
> since been fixed.
Yes. The same in UX 2013-07-08.

Comment 3

[:Gijs (he/him)]

I can barely if at all see this, even on the screenshot, so let's call this P5. It seems the alpha value of the grainy texture on the tabs is 0.01, so that doesn't sound like it should be the problem here.

The top of the navbar is rgba(253,253,253,0.45) over the fixed background color of rgb(219,234,249). The background on the middle of the tabs looks like this:

background-image: 
  url("chrome://browser/skin/tabbrowser/tab-active-middle.png"),
  linear-gradient(
    transparent,
    transparent 2px,
    rgba(254, 254, 254, 0.72) 2px,
    rgba(254, 254, 254, 0.72) 2px,
    rgba(250, 250, 250, 0.88) 3px,
    rgba(250, 250, 250, 0.88) 3px,
    rgba(254, 254, 254, 0.72) 4px,
    rgba(254, 254, 254, 0.72) 4px,
    rgba(253, 253, 253, 0.45)
  ),
  linear-gradient(
    transparent,
    transparent 2px,
    rgb(219, 234, 249) 2px,
    rgb(219, 234, 249)
  );

I guess my only other suspicion would be that the top gradient might need another colorstop to ensure that it's really gotten to rgba(253,253,253,0.45) before the bottom, and that we're not cutting it off if the tabs are below the navbar (which I think they shouldn't be?). Matt, does this all sound sensible to you?

Comment 4

[Dão Gottwald [:dao]]

(In reply to :Gijs Kruitbosch from comment #3)
> I can barely if at all see this, even on the screenshot,

Ditto. The high compression makes the screenshot kind of useless.

Comment 5

[Matthew N. [:MattN]]

Attachment: Screenshot after deleting tab-active-middle.png from the background-image

(In reply to :Gijs Kruitbosch from comment #3)
> I guess my only other suspicion would be that the top gradient might need
> another colorstop to ensure that it's really gotten to
> rgba(253,253,253,0.45) before the bottom, and that we're not cutting it off
> if the tabs are below the navbar (which I think they shouldn't be?). Matt,
> does this all sound sensible to you?

The tabs are on top so I doubt that is the issue. Some more ideas:
A) The texture in tab-active-middle.png and/or tab-stroke-*.png doesn't match the navbar.
** IIRC there is a texture on OS X's toolbars (Toolbar-background-noise.png) but not on Window's (in the spec and in UX) so it could just be the subtle texture making the difference.
** I'm noticing now that there are differences between the middle and start texture. The former uses an alpha of 4/255 whereas the latter uses 3/255.
B)  The background-clip of the nav-bar's border may not be taken into account
** In my testing this doesn't seem to be the case for .tab-background-middle. I didn't verify for the start and end.
C) I thought that the selected tab overlap onto the nav-bar led to an off-by-one error but I confirmed that the top 1px and bottom 1px of the gradients lined up.

I think A is the problem since deleting the image (first item) from the background-image property of .tab-background-middle makes it better but I kinda still see another minor colour difference but I think that's just the gradient. We can probably just get shorlander to remove the texture from the image on Windows (or add the texture to the toolbars).

I agree that this is probably P5 because I had to zoom quite a bit to notice this.

Comment 6

[Matthew N. [:MattN]]

If this is in fact idea A, then this also affects XP and possibly Linux.

Comment 7

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

Attachment: Tab shade (with luminosity adjusted)

Comment 8

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

This is really hard to see with the naked eye, even on a zoomed in screenshot.