From: Ori Livneh <ori@wikimedia.org>
Date: Sat, 15 Aug 2015 03:53:23 +0000 (-0700)
Subject: mediawiki.legacy.common: don't embed legacy images
X-Git-Tag: 1.31.0-rc.0~10408^2
X-Git-Url: http://git.cyclocoop.org/%24self?a=commitdiff_plain;h=8412e1a52e52cf9f33a9de5a80ffc0a35a62087d;p=lhc%2Fweb%2Fwiklou.git

mediawiki.legacy.common: don't embed legacy images

This drops the /* @embed */ directive for the images referenced by the
mediawiki.legacy.common stylesheet. The images themselves and the styles which
apply them remain. They will simply not be pre-loaded as data URIs within the
stylesheet, which is fantastic because mediawiki.legacy.common is top-loaded on
all pages and embedded images make up nearly half of its weight. With this
change, the gzipped size of mediawiki.legacy.common drops from 27.6k to 15.6k.

Affected classes:

* `.mw-icon-question`: Used for tooltips generated by Preferences::getOptionFromUser.
* `.mw-help-field-hint`: Not in use since I8e092e9d.
* `.mw-small-spinner`: Not in use since I2a2556a0.
* `.mw-ajax-loader`: Not in use.

Change-Id: I6c7e592a502ae14b9f81165f10a1d4240e592649
---

diff --git a/resources/src/mediawiki.legacy/shared.css b/resources/src/mediawiki.legacy/shared.css
index ca883e6bfc..248ea19fc1 100644
--- a/resources/src/mediawiki.legacy/shared.css
+++ b/resources/src/mediawiki.legacy/shared.css
@@ -2,6 +2,11 @@
  * CSS in this file is used by *all* skins (that have any CSS at all). Be
  * careful what you put in here, since what looks good in one skin may not in
  * another, but don't ignore the poor pre-Monobook users either.
+ *
+ * NOTE: The images which are referenced in this file are no longer in use in
+ * essential interface components. They should NOT be embedded, because that
+ * optimizes for the uncommon case at the cost of bloating the size of render-
+ * blocking CSS common to all pages.
  */
 
 /* GENERAL CLASSES FOR DIRECTIONALITY SUPPORT */
@@ -265,9 +270,7 @@ td.mw-label {
 	 * compatibility (browsers able to understand gradient syntax support also SVG).
 	 * http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique */
 	background-image: url(images/question.png);
-	/* @embed */
 	background-image: -webkit-linear-gradient(transparent, transparent), url(images/question.svg);
-	/* @embed */
 	background-image: linear-gradient(transparent, transparent), url(images/question.svg);
 	background-repeat: no-repeat;
 	background-size: 13px 13px;
@@ -881,7 +884,6 @@ ul.mw-gallery-packed {
 }
 
 .mw-ajax-loader {
-	/* @embed */
 	background-image: url(images/ajax-loader.gif);
 	background-position: center center;
 	background-repeat: no-repeat;
@@ -893,7 +895,6 @@ ul.mw-gallery-packed {
 .mw-small-spinner {
 	padding: 10px !important;
 	margin-right: 0.6em;
-	/* @embed */
 	background-image: url(images/spinner.gif);
 	background-position: center center;
 	background-repeat: no-repeat;
@@ -1033,7 +1034,6 @@ ol:lang(or) li {
 	margin-left: 2px;
 	margin-bottom: -8px;
 	padding: 0 0 0 15px;
-	/* @embed */
 	background-image: url(images/help-question.gif);
 	background-position: left center;
 	background-repeat: no-repeat;
@@ -1044,7 +1044,6 @@ ol:lang(or) li {
 }
 
 .mw-help-field-hint:hover {
-	/* @embed */
 	background-image: url(images/help-question-hover.gif);
 }