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
This commit is contained in:
jdlrobson 2015-08-21 16:59:02 -07:00
parent 0373da7eb3
commit c845586dc7
6 changed files with 150 additions and 141 deletions

View file

@ -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 );

View file

@ -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' )
),
),

View file

@ -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.

View file

@ -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;

View file

@ -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;
}

View file

@ -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;
}