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