Only load gallery styling rules when galleries are on the page

* Double load styling rules in legacy modules so we have time for
cached pages to catch up
** Double loading styles is acceptable for 30 days. There is no better way.
* Load gallery css when gallery tag invoked.

To test:
* Visit a page with a gallery tag and purge it, note styles are present.
* Visit a page without a gallery tag and purge it, note styles are not present

Bug: T98878
Change-Id: Ib1aef04dc4fece78e6615386ecaef6a9f368f49e

diff --git a/includes/parser/Parser.php b/includes/parser/Parser.php
index 2eec08b..0f30701 100644 (file)
--- a/includes/parser/Parser.php
+++ b/includes/parser/Parser.php
@@ -5326,6 +5326,7 @@ class Parser {
                $ig->setParser( $this );
                $ig->setHideBadImages();
                $ig->setAttributes( Sanitizer::validateTagAttributes( $params, 'table' ) );
+               $this->getOutput()->addModuleStyles( 'mediawiki.page.gallery.styles' );
 
                if ( isset( $params['showfilename'] ) ) {
                        $ig->setShowFilename( true );

diff --git a/resources/Resources.php b/resources/Resources.php
index d575c8d..bba1830 100644 (file)
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -1416,9 +1416,18 @@ return array(
        'mediawiki.page.gallery' => array(
                'scripts' => 'resources/src/mediawiki.page/mediawiki.page.gallery.js',
                'dependencies' => array(
+                       'mediawiki.page.gallery.styles',
                        'jquery.throttle-debounce',
                )
        ),
+       'mediawiki.page.gallery.styles' => array(
+               'styles' => array(
+                       'resources/src/mediawiki.page/mediawiki.page.gallery.print.css' => array( 'media' => 'print' ),
+                       'resources/src/mediawiki.page/mediawiki.page.gallery.css',
+               ),
+               'position' => 'top',
+               'targets' => array( 'desktop', 'mobile' ),
+       ),
        'mediawiki.page.ready' => array(
                'scripts' => 'resources/src/mediawiki.page/mediawiki.page.ready.js',
                'dependencies' => array(
@@ -1700,6 +1709,8 @@ return array(
        'mediawiki.legacy.commonPrint' => array(
                'position' => 'top',
                'styles' => array(
+                       // @todo: Remove mediawiki.page.gallery when cache has cleared
+                       'resources/src/mediawiki.page/mediawiki.page.gallery.print.css' => array( 'media' => 'print' ),
                        'resources/src/mediawiki.legacy/commonPrint.css' => array( 'media' => 'print' )
                ),
                'group' => 'print',
@@ -1713,6 +1724,8 @@ return array(
        'mediawiki.legacy.shared' => array(
                'position' => 'top',
                'styles' => array(
+                       // @todo: Remove when mediawiki.page.gallery in cached html.
+                       'resources/src/mediawiki.page/mediawiki.page.gallery.css',
                        'resources/src/mediawiki.legacy/shared.css' => array( 'media' => 'screen' )
                ),
        ),

diff --git a/resources/src/mediawiki.legacy/commonPrint.css b/resources/src/mediawiki.legacy/commonPrint.css
index e35b1cf..2291572 100644 (file)
--- a/resources/src/mediawiki.legacy/commonPrint.css
+++ b/resources/src/mediawiki.legacy/commonPrint.css
@@ -284,45 +284,6 @@ img.thumbborder {
        border: 1px solid #dddddd;
 }
 
-/**
- * Galleries (see shared.css for more info)
- */
-li.gallerybox {
-       vertical-align: top;
-       display: inline-block;
-}
-
-ul.gallery, li.gallerybox {
-       zoom: 1;
-       *display: inline;
-}
-
-ul.gallery {
-       margin: 2px;
-       padding: 2px;
-       display: block;
-}
-
-li.gallerycaption {
-       font-weight: bold;
-       text-align: center;
-       display: block;
-       word-wrap: break-word;
-}
-
-li.gallerybox div.thumb {
-       text-align: center;
-       border: 1px solid #ccc;
-       margin: 2px;
-}
-
-div.gallerytext {
-       overflow: hidden;
-       font-size: 94%;
-       padding: 2px 4px;
-       word-wrap: break-word;
-}
-
 /**
  * Table rendering
  * As on shared.css but with white background.

diff --git a/resources/src/mediawiki.legacy/shared.css b/resources/src/mediawiki.legacy/shared.css
index 7e171cf..63da066 100644 (file)
--- a/resources/src/mediawiki.legacy/shared.css
+++ b/resources/src/mediawiki.legacy/shared.css
@@ -787,108 +787,6 @@ table.mw_metadata ul.metadata-langlist {
        margin-left: 0;
 }
 
-/* Galleries */
-/* These display attributes look nonsensical, but are needed to support IE and FF2 */
-/* Don't forget to update commonPrint.css */
-li.gallerybox {
-       vertical-align: top;
-       display: -moz-inline-box;
-       display: inline-block;
-}
-
-ul.gallery,
-li.gallerybox {
-       zoom: 1;
-       *display: inline;
-}
-
-ul.gallery {
-       margin: 2px;
-       padding: 2px;
-       display: block;
-}
-
-li.gallerycaption {
-       font-weight: bold;
-       text-align: center;
-       display: block;
-       word-wrap: break-word;
-}
-
-li.gallerybox div.thumb {
-       text-align: center;
-       border: 1px solid #ccc;
-       background-color: #f9f9f9;
-       margin: 2px;
-}
-
-li.gallerybox div.thumb img {
-       display: block;
-       margin: 0 auto;
-}
-
-div.gallerytext {
-       overflow: hidden;
-       font-size: 94%;
-       padding: 2px 4px;
-       word-wrap: break-word;
-}
-
-/* new gallery stuff */
-ul.mw-gallery-nolines li.gallerybox div.thumb {
-       background-color: transparent;
-       border: none;
-}
-
-ul.mw-gallery-nolines li.gallerybox div.gallerytext {
-       text-align: center;
-}
-
-/* height constrained gallery */
-
-ul.mw-gallery-packed li.gallerybox div.thumb,
-ul.mw-gallery-packed-overlay li.gallerybox div.thumb,
-ul.mw-gallery-packed-hover li.gallerybox div.thumb {
-       background-color: transparent;
-       border: none;
-}
-
-ul.mw-gallery-packed li.gallerybox div.thumb img,
-ul.mw-gallery-packed-overlay li.gallerybox div.thumb img,
-ul.mw-gallery-packed-hover li.gallerybox div.thumb img {
-       margin: 0 auto;
-}
-
-ul.mw-gallery-packed-hover li.gallerybox,
-ul.mw-gallery-packed-overlay li.gallerybox {
-       position: relative;
-}
-
-ul.mw-gallery-packed-hover div.gallerytextwrapper {
-       overflow: hidden;
-       height: 0;
-}
-
-ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper,
-ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper,
-ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper {
-       position: absolute;
-       background: white;
-       background: rgba(255, 255, 255, 0.8);
-       padding: 5px 10px;
-       bottom: 0;
-       left: 0; /* Needed for IE */
-       height: auto;
-       font-weight: bold;
-       margin: 2px; /* correspond to style on div.thumb */
-}
-
-ul.mw-gallery-packed-hover,
-ul.mw-gallery-packed-overlay,
-ul.mw-gallery-packed {
-       text-align: center;
-}
-
 .mw-ajax-loader {
        background-image: url(images/ajax-loader.gif);
        background-position: center center;

diff --git a/resources/src/mediawiki.page/mediawiki.page.gallery.css b/resources/src/mediawiki.page/mediawiki.page.gallery.css
new file mode 100644 (file)
index 0000000..2e4daea
--- /dev/null
+++ b/resources/src/mediawiki.page/mediawiki.page.gallery.css
@@ -0,0 +1,101 @@
+/* Galleries */
+/* These display attributes look nonsensical, but are needed to support IE and FF2 */
+/* Don't forget to update commonPrint.css */
+li.gallerybox {
+       vertical-align: top;
+       display: -moz-inline-box;
+       display: inline-block;
+}
+
+ul.gallery,
+li.gallerybox {
+       zoom: 1;
+       *display: inline;
+}
+
+ul.gallery {
+       margin: 2px;
+       padding: 2px;
+       display: block;
+}
+
+li.gallerycaption {
+       font-weight: bold;
+       text-align: center;
+       display: block;
+       word-wrap: break-word;
+}
+
+li.gallerybox div.thumb {
+       text-align: center;
+       border: 1px solid #ccc;
+       background-color: #f9f9f9;
+       margin: 2px;
+}
+
+li.gallerybox div.thumb img {
+       display: block;
+       margin: 0 auto;
+}
+
+div.gallerytext {
+       overflow: hidden;
+       font-size: 94%;
+       padding: 2px 4px;
+       word-wrap: break-word;
+}
+
+/* new gallery stuff */
+ul.mw-gallery-nolines li.gallerybox div.thumb {
+       background-color: transparent;
+       border: none;
+}
+
+ul.mw-gallery-nolines li.gallerybox div.gallerytext {
+       text-align: center;
+}
+
+/* height constrained gallery */
+
+ul.mw-gallery-packed li.gallerybox div.thumb,
+ul.mw-gallery-packed-overlay li.gallerybox div.thumb,
+ul.mw-gallery-packed-hover li.gallerybox div.thumb {
+       background-color: transparent;
+       border: none;
+}
+
+ul.mw-gallery-packed li.gallerybox div.thumb img,
+ul.mw-gallery-packed-overlay li.gallerybox div.thumb img,
+ul.mw-gallery-packed-hover li.gallerybox div.thumb img {
+       margin: 0 auto;
+}
+
+ul.mw-gallery-packed-hover li.gallerybox,
+ul.mw-gallery-packed-overlay li.gallerybox {
+       position: relative;
+}
+
+ul.mw-gallery-packed-hover div.gallerytextwrapper {
+       overflow: hidden;
+       height: 0;
+}
+
+ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper,
+ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper,
+ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper {
+       position: absolute;
+       background: white;
+       background: rgba(255, 255, 255, 0.8);
+       padding: 5px 10px;
+       bottom: 0;
+       left: 0; /* Needed for IE */
+       height: auto;
+       font-weight: bold;
+       margin: 2px; /* correspond to style on div.thumb */
+}
+
+ul.mw-gallery-packed-hover,
+ul.mw-gallery-packed-overlay,
+ul.mw-gallery-packed {
+       text-align: center;
+}

diff --git a/resources/src/mediawiki.page/mediawiki.page.gallery.print.css b/resources/src/mediawiki.page/mediawiki.page.gallery.print.css
new file mode 100644 (file)
index 0000000..0c14865
--- /dev/null
+++ b/resources/src/mediawiki.page/mediawiki.page.gallery.print.css
@@ -0,0 +1,35 @@
+li.gallerybox {
+       vertical-align: top;
+       display: inline-block;
+}
+
+ul.gallery, li.gallerybox {
+       zoom: 1;
+       *display: inline;
+}
+
+ul.gallery {
+       margin: 2px;
+       padding: 2px;
+       display: block;
+}
+
+li.gallerycaption {
+       font-weight: bold;
+       text-align: center;
+       display: block;
+       word-wrap: break-word;
+}
+
+li.gallerybox div.thumb {
+       text-align: center;
+       border: 1px solid #ccc;
+       margin: 2px;
+}
+
+div.gallerytext {
+       overflow: hidden;
+       font-size: 94%;
+       padding: 2px 4px;
+       word-wrap: break-word;
+}