823673 - Remove -moz-prefixed gradients usage from comm-central

Status: RESOLVED FIXED

(MailNews Core :: Backend, defect)

Comment 1

[Richard Marti (:Paenglab)]

Attachment: Unprefix it

I also unprefixed the four -moz-repeating-linear-gradient in c-c.

Fallen for calendar/ changes, Neil for suite/ and Mike for mail/

Comment 2

[Masatoshi Kimura [:emk]]

Comment on attachment 695255 [details] [diff] [review]
Unprefix it

>--- a/mail/test/resources/mozmill/mozmill/extension/content/editor/bespin/BespinEmbedded.css
>+++ b/mail/test/resources/mozmill/mozmill/extension/content/editor/bespin/BespinEmbedded.css
>@@ -13,27 +13,27 @@
>-    background-image: -moz-linear-gradient(top left, #333333, #333333 50%, transparent 50%, transparent);
>+    background-image: linear-gradient(to right, #333333, #333333 50%, transparent 50%, transparent);

  linear-gradient(to bottom right

Strictly speaking, it is still not exactly the same as |-moz-linear-gradient(top left,|. But there is no exact replacement and |to bottom right| would be closer than |to right|.

>--- a/mail/themes/qute/mail/quickFilterBar-aero.css
>+++ b/mail/themes/qute/mail/quickFilterBar-aero.css
>@@ -46,17 +46,17 @@
>-    background: -moz-repeating-linear-gradient(top left -45deg, #fff0f4,
>+    background: repeating-linear-gradient(-45deg, #fff0f4,

  repeating-linear-gradient(135deg,

<unpreficed-degree> = 90deg - <preficed-degree>.

>--- a/suite/themes/modern/mozapps/plugins/pluginProblem.css
>+++ b/suite/themes/modern/mozapps/plugins/pluginProblem.css
>@@ -6,21 +6,21 @@
>-  background-image: -moz-repeating-linear-gradient(-45deg,
>+  background-image: repeating-linear-gradient(-45deg,

Same here.

Comment 3

[Richard Marti (:Paenglab)]

Attachment: gradient comparison

(In reply to Masatoshi Kimura [:emk] from comment #2)
> Comment on attachment 695255 [details] [diff] [review]
> Unprefix it
> 
> >--- a/mail/test/resources/mozmill/mozmill/extension/content/editor/bespin/BespinEmbedded.css
> >+++ b/mail/test/resources/mozmill/mozmill/extension/content/editor/bespin/BespinEmbedded.css
> >@@ -13,27 +13,27 @@
> >-    background-image: -moz-linear-gradient(top left, #333333, #333333 50%, transparent 50%, transparent);
> >+    background-image: linear-gradient(to right, #333333, #333333 50%, transparent 50%, transparent);
> 
>   linear-gradient(to bottom right
> 
> Strictly speaking, it is still not exactly the same as
> |-moz-linear-gradient(top left,|. But there is no exact replacement and |to
> bottom right| would be closer than |to right|.

You're right. I tested it on a wide rectangle and it was almost no difference to the "to right". In my comparison you can see it's now using the horizontal side first and then the vertical side. I'll change it and hope it doesn't break the mozmill test.

> >--- a/mail/themes/qute/mail/quickFilterBar-aero.css
> >+++ b/mail/themes/qute/mail/quickFilterBar-aero.css
> >@@ -46,17 +46,17 @@
> >-    background: -moz-repeating-linear-gradient(top left -45deg, #fff0f4,
> >+    background: repeating-linear-gradient(-45deg, #fff0f4,
> 
>   repeating-linear-gradient(135deg,

The negative value is also valid and I leave it also for a easier review.

Comment 4

[Richard Marti (:Paenglab)]

Attachment: Unprefix it v2

Only changed the two "to right" to "to right bottom" on BespinEmbedded.css

Comment 5

[Masatoshi Kimura [:emk]]

(In reply to Richard Marti [:Paenglab] from comment #3)
> > >--- a/mail/themes/qute/mail/quickFilterBar-aero.css
> > >+++ b/mail/themes/qute/mail/quickFilterBar-aero.css
> > >@@ -46,17 +46,17 @@
> > >-    background: -moz-repeating-linear-gradient(top left -45deg, #fff0f4,
> > >+    background: repeating-linear-gradient(-45deg, #fff0f4,
> > 
> >   repeating-linear-gradient(135deg,
> 
> The negative value is also valid and I leave it also for a easier review.

I don't say the negative value is invalid. I'm saying the unprefixed -45deg has a *different* meaning from the prefixed -45deg.
The unprefixed 0deg means "to top", and rotates clockwise.
The prefixed 0deg means "to right", and rotates anti-clockwise.
So the unprefixed -45deg 180-degree turns from the prefixed one (please calculate).

Comment 6

[Richard Marti (:Paenglab)]

Correct, but here are stripes drawn which makes no big difference if they start white or red.

Comment 7

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

Comment on attachment 695620 [details] [diff] [review]
Unprefix it v2

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

The stuff under mail/ looks good to me. Thanks Richard!

::: mail/themes/gnomestripe/mail/messageHeader.css
@@ +18,5 @@
>  
>  /* :::::  message in a tab ::::: */
>  #displayDeck[collapsed="true"] + splitter + #messagepaneboxwrapper 
>  .main-header-area {
> +  background-image: linear-gradient(rgba(255, 255, 255, 0.3), 

nit: trailing ws

::: mail/themes/qute/mail/addrbook/abContactsPanel-aero.css
@@ +17,1 @@
>                          rgba(255, 255, 255, 0));

Nit: fix the alignment here while you're at it.

Comment 8

[Richard Marti (:Paenglab)]

Attachment: Unprefix it v3

Fixed Mike's comments.

Adding again Fallen to r?

Comment 10

[Philipp Kewisch [:Fallen] [:📆][:🧩]]

Comment on attachment 696126 [details] [diff] [review]
Unprefix it v3

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

r=philipp for calendar.

::: calendar/base/themes/common/calendar-views.css
@@ -8,5 @@
>  }
>  
>  .calendar-category-box-gradient {
>      width: 7px;
> -    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.38), transparent) !important;

Kind of off-topic, but I noticed sometimes we use background-image and sometimes we use background. I know background is the generalization, but I seem to recall using background-image once and it not working.

How is it with the unprefixed spec? Does it matter?

Comment 11

[Richard Marti (:Paenglab)]

(In reply to Philipp Kewisch [:Fallen] from comment #10)

> 
> Kind of off-topic, but I noticed sometimes we use background-image and
> sometimes we use background. I know background is the generalization, but I
> seem to recall using background-image once and it not working.

Background sets all background properties like background-color, background-image etc. in one step. The not defined properties are set to default values, like background-color to transparent or background-image to none. When you use only background-image then only this property is set and all other previous set properties are unchanged. Then it could be for example a previous set background-position puts the image off screen. Also the layering is important, the background-color is always behind the background-image and if the image has no transparency then the background-color isn't visible.

> How is it with the unprefixed spec? Does it matter?

The unprefixed spec is in this matter unchanged.

Comment 12

[Ryan VanderMeulen [:RyanVM]]

https://hg.mozilla.org/comm-central/rev/303de741359a