978752 - Tab strip gradient is broken in customization mode on Windows XP in classic mode

Status: RESOLVED FIXED

(Firefox :: Toolbars and Customization, defect)

Description

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

Attachment: Glitch in tab strip

When using the classic theme on Windows XP, the gradient of the tab strip is broken in customization mode.

The gradient we are using to overlay the title bar should extend all the way to the edges of the window, so that the »native« XP gradient isn't visible.

Comment 1

[Mike Conley (:mconley) (:⚙️)]

Gijs and I discussed that if we can't find a better solution, we can always negative margin the pseudoelement into submission.

Comment 2

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

Attachment: Glitch in tab strip

Comment 3

[Stephen Horlander [:shorlander]]

Attachment: POC Screenshot

I think we should switch from the linear-gradient and instead re-purpose the glass fog.

This will give it a softer look and avoid dirty grey/black caused by transitioning to transparent. Also will fix this bug with the hard edge in Customize.

Here is what I had to get the look in the screenshot:

#TabsToolbar:not(:-moz-lwtheme)::after {
  /* Because we use placeholders for window controls etc. in the tabstrip,
   * and position those with ordinal attributes, and because our layout code
   * expects :before/:after nodes to come first/last in the frame list,
   * we have to reorder this element to come last, hence the
   * ordinal group value (see bug 853415). */
  -moz-box-ordinal-group: 1001;
  box-shadow: 0 0 50px 8px ActiveCaption;
  content: "";
  display: -moz-box;
  height: 0;
  margin: 0 50px; /* (30px + 30px) from box-shadow */
  position: absolute;
  pointer-events: none;
  top: 100%;
  width: -moz-available;
  z-index: 0;
}

Comment 4

[Mike Conley (:mconley) (:⚙️)]

shorlander++ - this is way, way, wayyyyy better.

Comment 7

[:Gijs (he/him)]

Stealing per discussion with Matt last week.

Comment 8

[:Gijs (he/him)]

So the annoying thing here is that we have to z-index all the things in the tabstoolbar apart from the ::after element in order to have them appear on top of the box shadow. That then causes other bugs (such as the tab overflow separator overlapping with the navbar). :-(

Comment 9

[:Gijs (he/him)]

Attachment: fix Windows Classic gradient for Australis,

I basically took Stephen's patch and used his rules only for win classic. I then removed the style for fullscreen mode (where we have a grey background in the tabstoolbar so it doesn't work to add a blue fade), added styling for .toolbarbutton-1 so we don't break add-ons, and updated some comments. I left out the margin-top adjustment, which seems to be unrelated. The original patch was here: http://cl.ly/code/2o1u1U042a14 .

Comment 10

[Mike Conley (:mconley) (:⚙️)]

Comment on attachment 8391151 [details] [diff] [review]
fix Windows Classic gradient for Australis,

This looks really good! We need to disable the fog for classic when tabs are not in the titlebar though.

Comment 11

[Mike Conley (:mconley) (:⚙️)]

Comment on attachment 8391151 [details] [diff] [review]
fix Windows Classic gradient for Australis,

Review of attachment 8391151 [details] [diff] [review]:
-----------------------------------------------------------------

::: browser/themes/windows/browser.css
@@ +143,5 @@
> +    box-shadow: 0 0 50px 8px ActiveCaption;
> +    content: "";
> +    display: -moz-box;
> +    height: 0;
> +    margin: 0 50px; /* (30px + 30px) from box-shadow */

Also, 30px + 30px != 50px...

Comment 12

[:Gijs (he/him)]

Attachment: fix Windows Classic gradient for Australis,

Now with [tabsintitlebar], but with a :not([selected=true] for the tabbrowser tab so that it continues getting a still higher z-index (otherwise the top of the navbar/bottom of the tabbar overlaps it)

Comment 13

[Mike Conley (:mconley) (:⚙️)]

Comment on attachment 8391235 [details] [diff] [review]
fix Windows Classic gradient for Australis,

Review of attachment 8391235 [details] [diff] [review]:
-----------------------------------------------------------------

Let's roll with this. \o/ Thanks Gijs!

Comment 14

[:Gijs (he/him)]

remote:   https://hg.mozilla.org/integration/fx-team/rev/a7e1aeb46c79

Comment 15

[Phil Ringnalda (:philor)]

https://hg.mozilla.org/mozilla-central/rev/a7e1aeb46c79

Comment 16

[:Gijs (he/him)]

Comment on attachment 8391235 [details] [diff] [review]
fix Windows Classic gradient for Australis,

[Approval Request Comment]
Bug caused by (feature/regressing bug #): Australis
User impact if declined: Tabs in titlebar looks bad on Windows classic themes
Testing completed (on m-c, etc.): on m-c
Risk to taking this patch (and alternatives if risky): low, might affect add-ons (but we did our best not to...)
String or IDL/UUID changes made by this patch: none

Comment 17

[Matthew N. [:MattN]]

https://hg.mozilla.org/releases/mozilla-aurora/rev/0405ceeff5ab