From c845586dc7a6b8d274a376433a42f7b5d4fd28ac Mon Sep 17 00:00:00 2001 From: jdlrobson Date: Fri, 21 Aug 2015 16:59:02 -0700 Subject: [PATCH] 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 --- includes/parser/Parser.php | 1 + resources/Resources.php | 13 +++ .../src/mediawiki.legacy/commonPrint.css | 39 ------- resources/src/mediawiki.legacy/shared.css | 102 ------------------ .../mediawiki.page/mediawiki.page.gallery.css | 101 +++++++++++++++++ .../mediawiki.page.gallery.print.css | 35 ++++++ 6 files changed, 150 insertions(+), 141 deletions(-) create mode 100644 resources/src/mediawiki.page/mediawiki.page.gallery.css create mode 100644 resources/src/mediawiki.page/mediawiki.page.gallery.print.css diff --git a/includes/parser/Parser.php b/includes/parser/Parser.php index 2eec08bf91..0f30701376 100644 --- 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 d575c8d6db..bba1830cbe 100644 --- 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 e35b1cfc03..22915727fa 100644 --- 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 7e171cffa3..63da066a42 100644 --- 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 index 0000000000..2e4daea061 --- /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 index 0000000000..0c14865e79 --- /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; +} -- 2.20.1