Jforrester has uploaded a new change for review. ( 
https://gerrit.wikimedia.org/r/393969 )

Change subject: Drop `-webkit-linear-gradient` image CSS fallback
......................................................................

Drop `-webkit-linear-gradient` image CSS fallback

This reduces the payload of CSS slightly (and in the few cases where these
were not just present but @embed'ed, significantly), at a cost of giving
those user agents which don't support the un-prefixed rule the icons as
PNGs rather than SVGs (i.e. Chrome < 25, Safari < 6.1, Android < 4.4).

We made this change for MediaWiki back in November 2015 in T118815. This
repo is not alone in not having noticed. :-) Ideally this repo would use
LESS and re-use the LESS macro in MediaWiki, but that's for the future.

Change-Id: I1469bce3dd6c6eed0d291a0cb8a19eceeaff4c10
---
M resources/css/ext.translate.editor.css
M resources/css/ext.translate.groupselector.css
M resources/css/ext.translate.loader.css
M resources/css/ext.translate.navitoggle.css
M resources/css/ext.translate.pagemode.css
M resources/css/ext.translate.proofread.css
M resources/css/ext.translate.special.aggregategroups.css
M resources/css/ext.translate.special.managetranslatorsandbox.css
M resources/css/ext.translate.special.pagemigration.css
M resources/css/ext.translate.special.translate.css
M resources/css/ext.translate.workflowselector.css
M resources/js/ext.translate.groupselector.js
12 files changed, 1 insertion(+), 38 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/Translate 
refs/changes/69/393969/1

diff --git a/resources/css/ext.translate.editor.css 
b/resources/css/ext.translate.editor.css
index e2aeb0f..982499c 100644
--- a/resources/css/ext.translate.editor.css
+++ b/resources/css/ext.translate.editor.css
@@ -8,7 +8,6 @@
 
 .grid .tux-message-editor .close {
        background: url( ../images/close.png ) no-repeat center center;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/close.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/close.svg );
        padding: 16px;
@@ -25,14 +24,12 @@
 
 .tux-message-editor .editor-contract {
        background: url( ../images/contract-ltr.png ) no-repeat center center;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/contract-ltr.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/contract-ltr.svg );
 }
 
 .tux-message-editor .editor-expand {
        background: url( ../images/expand-ltr.png ) no-repeat center center;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/expand-ltr.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/expand-ltr.svg );
 }
@@ -230,7 +227,6 @@
 
 .message-desc-edit {
        background: url( ../images/action-edit.png ) left center no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/action-edit.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/action-edit.svg );
        background-size: 18px 18px;
@@ -319,14 +315,12 @@
 
 .tux-warning-message.validation {
        background-image: url( ../images/label-flag.png );
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/label-flag.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/label-flag.svg );
 }
 
 .tux-warning-message.diff {
        background-image: url( ../images/label-clock.png );
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/label-clock.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/label-clock.svg );
 }
@@ -395,7 +389,6 @@
 
 .tux-editor-insert-buttons .tux-editor-paste-original-button {
        background: #fbfbfb url( ../images/paste.png ) left center no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/paste.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/paste.svg );
        background-size: 16px 16px;
@@ -434,7 +427,6 @@
 
 .tux-message-tools-menu li.selected {
        background: url( ../images/label-tick.png ) right no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/label-tick.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/label-tick.svg );
        color: #222;
diff --git a/resources/css/ext.translate.groupselector.css 
b/resources/css/ext.translate.groupselector.css
index 11d60d1..95b039e 100644
--- a/resources/css/ext.translate.groupselector.css
+++ b/resources/css/ext.translate.groupselector.css
@@ -65,7 +65,6 @@
 
 .tux-groupselector__filter__search__icon {
        background: url( ../images/search.png ) no-repeat scroll right center 
transparent;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/search.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/search.svg );
        background-size: 25px;
@@ -133,7 +132,6 @@
 
 .tux-grouplist__item__icon {
        background: url( ../images/project.png ) no-repeat scroll right center 
transparent;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/project.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/project.svg );
        /* Keep this in sync with js! */
diff --git a/resources/css/ext.translate.loader.css 
b/resources/css/ext.translate.loader.css
index 3d68c8c..2c6c561 100644
--- a/resources/css/ext.translate.loader.css
+++ b/resources/css/ext.translate.loader.css
@@ -21,7 +21,6 @@
 .tux-loading-indicator {
        float: left;
        background: transparent url( ../images/loading.gif ) right bottom 
no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/loading.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/loading.svg );
        background-size: 100%;
diff --git a/resources/css/ext.translate.navitoggle.css 
b/resources/css/ext.translate.navitoggle.css
index 5592dbb..3ade807 100644
--- a/resources/css/ext.translate.navitoggle.css
+++ b/resources/css/ext.translate.navitoggle.css
@@ -15,14 +15,12 @@
 
 .tux-navitoggle {
        background: url( ../images/expand-rtl.png ) no-repeat scroll right 
center transparent;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/expand-rtl.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/expand-rtl.svg );
 }
 
 .tux-navi-collapsed .tux-navitoggle {
        background: url( ../images/expand-ltr.png ) no-repeat scroll right 
center transparent;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/expand-ltr.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/expand-ltr.svg );
 }
diff --git a/resources/css/ext.translate.pagemode.css 
b/resources/css/ext.translate.pagemode.css
index fa0982e..b9f6027 100644
--- a/resources/css/ext.translate.pagemode.css
+++ b/resources/css/ext.translate.pagemode.css
@@ -74,21 +74,18 @@
 
 .tux-pagemode-status.fuzzy {
        background: url( ../images/outdated-ltr.png ) left center no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/outdated-ltr.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/outdated-ltr.svg );
 }
 
 .tux-pagemode-status.untranslated {
        background: url( ../images/translate-ltr.png ) left center no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/translate-ltr.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/translate-ltr.svg );
 }
 
 .tux-pagemode-action {
        background: url( ../images/check-sprite-ltr.png ) right top no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/check-sprite-ltr.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/check-sprite-ltr.svg );
        height: 31px;
@@ -101,7 +98,6 @@
 
 .tux-pagemode-edit {
        background-image: url( ../images/edit-mark.png );
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/edit-mark.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/edit-mark.svg );
        background-repeat: no-repeat;
diff --git a/resources/css/ext.translate.proofread.css 
b/resources/css/ext.translate.proofread.css
index bf4bb36..f947561 100644
--- a/resources/css/ext.translate.proofread.css
+++ b/resources/css/ext.translate.proofread.css
@@ -85,7 +85,6 @@
        width: 18px;
        height: 18px; /* Icon height + 3px */
        background: url( ../images/user-small.png ) top right no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/user-small.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/user-small.svg );
 }
@@ -96,7 +95,6 @@
 
 .tux-proofread-status.fuzzy {
        background: url( ../images/outdated-ltr.png ) left center no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/outdated-ltr.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/outdated-ltr.svg );
        height: 40px;
@@ -104,7 +102,6 @@
 
 .tux-proofread-status.untranslated {
        background: url( ../images/translate-ltr.png ) left center no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/translate-ltr.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/translate-ltr.svg );
        height: 40px;
@@ -114,7 +111,6 @@
        background-position: right top;
        background-repeat: no-repeat;
        background-image: url( ../images/check-sprite-ltr.png );
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/check-sprite-ltr.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/check-sprite-ltr.svg );
        /* There is 1px white row between each icon */
@@ -146,7 +142,6 @@
 
 .tux-proofread-edit {
        background-image: url( ../images/edit-mark.png );
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/edit-mark.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/edit-mark.svg );
        background-repeat: no-repeat;
@@ -181,7 +176,6 @@
        content: '';
        display: inline-block;
        background: url( ../images/check-small.png ) left bottom no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/check-small.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/check-small.svg );
        height: 12px;
diff --git a/resources/css/ext.translate.special.aggregategroups.css 
b/resources/css/ext.translate.special.aggregategroups.css
index 5355d4a..1075835 100644
--- a/resources/css/ext.translate.special.aggregategroups.css
+++ b/resources/css/ext.translate.special.aggregategroups.css
@@ -2,8 +2,6 @@
 span.tp-aggregate-remove-button {
        background: url( ../images/remove.png ) no-repeat scroll left center 
transparent;
        /* @embed */
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/remove.svg );
-       /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/remove.svg );
        padding: 10px;
        cursor: pointer;
@@ -11,8 +9,6 @@
 
 span.tp-aggregate-edit-ag-button {
        background: url( ../images/action-edit.png ) no-repeat scroll left 
center transparent;
-       /* @embed */
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/action-edit.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/action-edit.svg );
        background-size: 18px 18px;
@@ -22,8 +18,6 @@
 
 a.tpt-add-new-group {
        background: url( ../images/add.png ) no-repeat scroll left center 
transparent;
-       /* @embed */
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/add.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/add.svg );
        padding-left: 20px;
diff --git a/resources/css/ext.translate.special.managetranslatorsandbox.css 
b/resources/css/ext.translate.special.managetranslatorsandbox.css
index 39e9538..2cd6838 100644
--- a/resources/css/ext.translate.special.managetranslatorsandbox.css
+++ b/resources/css/ext.translate.special.managetranslatorsandbox.css
@@ -22,7 +22,6 @@
 
 .grid .search.pane {
        background: url( ../images/search.png ) no-repeat scroll left top 
transparent;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/search.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/search.svg );
        background-size: 25px;
diff --git a/resources/css/ext.translate.special.pagemigration.css 
b/resources/css/ext.translate.special.pagemigration.css
index 14411a4..bc5cec3 100644
--- a/resources/css/ext.translate.special.pagemigration.css
+++ b/resources/css/ext.translate.special.pagemigration.css
@@ -44,19 +44,16 @@
 
 .mw-tpm-sp-action--delete {
        background: url( ../images/trash_darkgray.png ) transparent no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/trash_darkgray.svg );
        background-image: linear-gradient( transparent, transparent ), url( 
../images/trash_darkgray.svg );
 }
 
 .mw-tpm-sp-action--swap {
        background: url( ../images/switch.png ) transparent no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/switch.svg );
        background-image: linear-gradient( transparent, transparent ), url( 
../images/switch.svg );
 }
 
 .mw-tpm-sp-action--add {
        background: url( ../images/plus_darkgray.png ) transparent no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/plus_darkgray.svg );
        background-image: linear-gradient( transparent, transparent ), url( 
../images/plus_darkgray.svg );
 }
 
diff --git a/resources/css/ext.translate.special.translate.css 
b/resources/css/ext.translate.special.translate.css
index 8f84173..8de825b 100644
--- a/resources/css/ext.translate.special.translate.css
+++ b/resources/css/ext.translate.special.translate.css
@@ -206,7 +206,6 @@
 
 .tux-message-filter-wrapper {
        background: url( ../images/search.png ) no-repeat scroll left center 
transparent;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/search.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/search.svg );
        background-size: 25px;
diff --git a/resources/css/ext.translate.workflowselector.css 
b/resources/css/ext.translate.workflowselector.css
index b26f0b1..93a5577 100644
--- a/resources/css/ext.translate.workflowselector.css
+++ b/resources/css/ext.translate.workflowselector.css
@@ -47,7 +47,6 @@
 
 .tux-workflow-status-selector li.selected {
        background: url( ../images/label-tick.png ) right no-repeat;
-       background-image: -webkit-linear-gradient( transparent, transparent ), 
url( ../images/label-tick.svg );
        /* @embed */
        background-image: linear-gradient( transparent, transparent ), url( 
../images/label-tick.svg );
        color: #222;
diff --git a/resources/js/ext.translate.groupselector.js 
b/resources/js/ext.translate.groupselector.js
index e387382..6c47a9c 100644
--- a/resources/js/ext.translate.groupselector.js
+++ b/resources/js/ext.translate.groupselector.js
@@ -537,9 +537,7 @@
                        }
 
                        if ( messagegroup.icon && messagegroup.icon.vector ) {
-                               style +=
-                                       'background-image: 
-webkit-linear-gradient(transparent, transparent), url(--);' +
-                                       'background-image: 
linear-gradient(transparent, transparent), url(--);';
+                               style += 'background-image: 
linear-gradient(transparent, transparent), url(--);';
                                style = style.replace( /--/g, 
messagegroup.icon.vector );
                        }
 

-- 
To view, visit https://gerrit.wikimedia.org/r/393969
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: I1469bce3dd6c6eed0d291a0cb8a19eceeaff4c10
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/Translate
Gerrit-Branch: master
Gerrit-Owner: Jforrester <jforres...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to