915521 - Use a solid background-color with padding for tab-background-middle instead of a linear-gradient with transparency

Status: RESOLVED FIXED

(Firefox :: Theme, defect)

Description

[Matthew N. [:MattN]]

Attachment: v.1 Use padding with background-clip:content-box

Supposedly the gradient below is expensive and I never liked using a gradient for the solid background in the first place. According to the CSS 3 Background and Borders spec for background-color[1], "The background color is clipped according to the ‘background-clip’ value associated with the bottom-most background image." We can use this to avoid the gradient.

%define fgTabBackgroundMiddle linear-gradient(transparent 0px, transparent 2px, -moz-dialog 2px, -moz-dialog)

Compare talos on the WIP for Windows-only didn't show much change. Perhaps it will help non-Windows or there was a bug in the WIP.

compare-talos on v.1: http://compare-talos.mattn.ca/?oldRevs=631237eca83a&newRev=44a12140e649&submit=true

[1] http://www.w3.org/TR/css3-background/#the-background-color

Comment 1

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

Hrm. Yeah, I was expecting more of a win here.

For reference, here's the original try push that tested this:

https://tbpl.mozilla.org/?tree=Try&rev=71846875686c

And, specifically, here's the patch:

https://hg.mozilla.org/try/rev/71846875686c

Looking at my Try push, it looks like I applied that patch not on tip, but on the patch that first landed those curvy tabs. :/ So that at least explains the discrepancy.

Comment 2

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

Comment on attachment 803510 [details] [diff] [review]
v.1 Use padding with background-clip:content-box

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

Cancelling review request until I find out about the TODO.

::: browser/themes/shared/tabs.inc.css
@@ +178,5 @@
>    background-repeat: no-repeat;
>  }
>  
>  .tab-background-middle[selected=true] {
> +  background-clip: padding-box, padding-box, content-box; /* TODO check for other overrides to update clip there */

So how about this TODO?

@@ +187,3 @@
>    background-repeat: repeat-x;
>    background-size: auto 100%;
> +  /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the background-color doesn't extend above the top border. */

Nit - please put this comment on two lines.

@@ +191,5 @@
>  }
>  
>  /* Selected tab lightweight theme styles */
>  .tab-background-middle[selected=true]:-moz-lwtheme {
> +  background-color: transparent;

Should this be @fgTabBackgroundColor@?

Comment 3

[Matthew N. [:MattN]]

(In reply to Mike Conley (:mconley) from comment #2)
> Comment on attachment 803510 [details] [diff] [review]
> v.1 Use padding with background-clip:content-box
> 
> Cancelling review request until I find out about the TODO.
> 
> ::: browser/themes/shared/tabs.inc.css
> @@ +178,5 @@
> >    background-repeat: no-repeat;
> >  }
> >  
> >  .tab-background-middle[selected=true] {
> > +  background-clip: padding-box, padding-box, content-box; /* TODO check for other overrides to update clip there */
> 
> So how about this TODO?

Oops, I already checked this on all platforms.
> 
> @@ +187,3 @@
> >    background-repeat: repeat-x;
> >    background-size: auto 100%;
> > +  /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the background-color doesn't extend above the top border. */
> 
> Nit - please put this comment on two lines.

ok

> @@ +191,5 @@
> >  }
> >  
> >  /* Selected tab lightweight theme styles */
> >  .tab-background-middle[selected=true]:-moz-lwtheme {
> > +  background-color: transparent;
> 
> Should this be @fgTabBackgroundColor@?

No, since this is for LWT. I don't think it will be visible unless the LWT has transparency.  This is the same value as prior to the patch.

Comment 4

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

Comment on attachment 803510 [details] [diff] [review]
v.1 Use padding with background-clip:content-box

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

Just chop out the TODO and split that comment over two lines, and you're good to land. Thanks Matt!

Comment 5

[Matthew N. [:MattN]]

Thanks!
https://hg.mozilla.org/projects/ux/rev/14a05f3555df

Comment 6

[:Gijs (he/him)]

https://hg.mozilla.org/mozilla-central/rev/14a05f3555df