738490 - [Australis] Background tabs: remove borders & background and draw separators

Status: RESOLVED DUPLICATE of bug 738491

(Firefox :: Theme, defect)

Description

[(parental leave 10/24-mid-February) Jared Wein [:jaws] (please needinfo? me)]

To reduce user error in determining the active tab at a glance, background tabs should blend in with the Aero glass.

To maintain good readability of the tab text, this patch should wait until bug 737934 is fixed.

Comment 1

[Girish Sharma [:Optimizer]]

Does this bug only deal with the transparency of the background tabs, or also the curves and styling of favicon and close button ?

Comment 2

[(parental leave 10/24-mid-February) Jared Wein [:jaws] (please needinfo? me)]

(In reply to Girish Sharma from comment #1)
> Does this bug only deal with the transparency of the background tabs, or
> also the curves and styling of favicon and close button ?

This bug only deals with the transparency of the background tabs. The curves are handled in bug 738491 and the bug for the close button hasn't been filed yet.

Comment 3

[Frank Yan (:fryn)]

Joshua M., you mentioned that you would like to work on this. :)

There are a few requirements for this:

Since the background tabs will no longer have a real border, they should be visually separated by a gradient separator.
Using a PNG for this is better than using CSS gradients for graphics performance reasons.
Here's the image that Stephen uses in his mockup:
https://people.mozilla.com/~shorlander/files/australis-designSpecs/images-win7/tabSeparator.png

Since when we land direct manipulation via drag-and-drop and animations for tab moving and detaching, we'll need the separators (which act as borders) to move with the tabs, the gradient separator should be probably be split into two and placed on both sides of each tab. In other words, each tab should have the following:
1px-wide dark gradient - 1px-wide light gradient - favicon, label, etc. - 1px-wide light gradient - 1px-wide dark gradient
So one 2px-wide PNG for the left side and one 2px-wide PNG for the right side.
These should be positioned such that the dark pixels overlap on top of each other.
Unfortunately, compositing two transparent-to-opaque gradients results into a more opaque gradient, so we will have to account for that.

The separators should not be displayed when next to a tab in the hover state or next to the active tab. This is going to be complicated since our [beforeselected] and [afterselected] attributes don't actually work as expected when there are multiple tab groups, thanks to our Panorama implementation breaking them. Also, overflow mode with app tabs complicates things further. Therefore, I'm pretty sure that this is going to require some JS.

Dão, do you have any ideas for simplifying the problem or the solution?

Comment 4

[(parental leave 10/24-mid-February) Jared Wein [:jaws] (please needinfo? me)]

Sorry for the misleading bug title, but this is actually for all Windows platforms.

Comment 5

[(parental leave 10/24-mid-February) Jared Wein [:jaws] (please needinfo? me)]

Attachment: Patch from bug 737934

Comment 7

[Joshua M [:soapy]]

Attachment: WIP patch