mediawiki.legacy.common: don't embed legacy images
authorOri Livneh <ori@wikimedia.org>
Sat, 15 Aug 2015 03:53:23 +0000 (20:53 -0700)
committerOri Livneh <ori@wikimedia.org>
Sat, 15 Aug 2015 19:11:09 +0000 (12:11 -0700)
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

resources/src/mediawiki.legacy/shared.css

index ca883e6..248ea19 100644 (file)
@@ -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);
 }