From 4f056b4e15d34c8cbcab8032f62e3aea3de793d8 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Bartosz=20Dziewo=C5=84ski?= Date: Mon, 18 Aug 2014 14:53:23 +0200 Subject: [PATCH] Generate 'Enlarge' image in CSS rather than HTML (Linker) There is an ungodly number of requests for magnify-clip.png, embedding it in CSS is probably good for performance. It also makes it a lot easier to change the icon, or provide a vector version (SVG or icon font). We need to be careful to keep new CSS compatible with old HTML (HTML is cached for up to 30 days in WMF environment), but luckily in this case this requires just one CSS rule. Follow-up to remove it: I7a920105. Bug: 69673 Change-Id: I849a2222fdf708573e54fa0658dbef4d9f2f665f --- includes/Linker.php | 8 +-- skins/common/commonContent.css | 36 +++++++++++- skins/common/images/magnify-clip-ltr.png | Bin 0 -> 204 bytes skins/common/oldshared.css | 23 +++++++- tests/parser/parserTests.txt | 72 +++++++++++------------ 5 files changed, 90 insertions(+), 49 deletions(-) create mode 100644 skins/common/images/magnify-clip-ltr.png diff --git a/includes/Linker.php b/includes/Linker.php index abc9404e90..3805c5f043 100644 --- a/includes/Linker.php +++ b/includes/Linker.php @@ -771,7 +771,6 @@ class Linker { public static function makeThumbLink2( Title $title, $file, $frameParams = array(), $handlerParams = array(), $time = false, $query = "" ) { - global $wgStylePath, $wgContLang; $exists = $file && $file->exists(); # Shortcuts @@ -880,12 +879,7 @@ class Linker { 'href' => $url, 'class' => 'internal', 'title' => wfMessage( 'thumbnail-more' )->text() ), - Html::element( 'img', array( - 'src' => $wgStylePath . '/common/images/magnify-clip' - . ( $wgContLang->isRTL() ? '-rtl' : '' ) . '.png', - 'width' => 15, - 'height' => 11, - 'alt' => "" ) ) ) ); + "" ) ); } } $s .= '
' . $zoomIcon . $fp['caption'] . "
"; diff --git a/skins/common/commonContent.css b/skins/common/commonContent.css index a030992bee..622afe6888 100644 --- a/skins/common/commonContent.css +++ b/skins/common/commonContent.css @@ -155,10 +155,28 @@ div.magnify { margin-left: 3px; } -div.magnify a, -div.magnify img { +div.magnify a { display: block; - border: none; + /* Hide the text… */ + text-indent: 15px; + white-space: nowrap; + overflow: hidden; + /* …and replace it with the image */ + width: 15px; + height: 11px; + /* Default styles when there's no .mw-content-ltr or .mw-content-rtl, overridden below */ + /* @embed */ + background: url(images/magnify-clip-ltr.png) center center no-repeat; + /* Don't annoy people who copy-paste everything too much */ + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; +} + +/* Temporary WMF deployment hack, to be removed before 1.24 release */ +div.magnify img { + display: none; } img.thumbborder { @@ -179,6 +197,12 @@ img.thumbborder { margin-right: 0; } +/* @noflip */ +.mw-content-ltr div.magnify a { + /* @embed */ + background-image: url(images/magnify-clip-ltr.png); +} + /* @noflip */ .mw-content-rtl .thumbcaption { text-align: right; @@ -191,6 +215,12 @@ img.thumbborder { margin-right: 3px; } +/* @noflip */ +.mw-content-rtl div.magnify a { + /* @embed */ + background-image: url(images/magnify-clip-rtl.png); +} + /* @noflip */ div.tright { margin: .5em 0 1.3em 1.4em; diff --git a/skins/common/images/magnify-clip-ltr.png b/skins/common/images/magnify-clip-ltr.png new file mode 100644 index 0000000000000000000000000000000000000000..00a9cee11bf3679ab57db06705c0cc0603fbbedd GIT binary patch literal 204 zcmeAS@N?(olHy`uVBq!ia0vp^{6Ngj0VEh&bvhb=6jMo%UogY}=!r^OLA)eycNd2L z?fqx=19_YU9+AZi3|t>Tn9*sC$qb+%dx@v7EBjRzCLuw=@2R%kKp}rm7sn8e>&ZX< z|Np;pZ^4Hi#uMxFW-_tftUmZB`~SiP?FRpE-rIZC`}@1Ue2?FsWs?;7DtGQZqv53M vO^$|h?Ae*#EnM~g|NMtH!wi1#J!NKC>C|F-zkgXj&}arvS3j3^P6
Caption Link1 [[]] Link2
+
Caption Link1 [[]] Link2
!! html/parsoid
Caption Link1 @@ -10889,7 +10889,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|thumb|{{echo|137px}}|This is a caption]] !! html/php -
This is a caption
+
This is a caption
!! html/parsoid
This is a caption
@@ -10900,7 +10900,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|{{echo|thumb}}|{{echo|137px}}|This is a caption]] !! html/php -
This is a caption
+
This is a caption
!! html/parsoid
This is a caption
@@ -10943,7 +10943,7 @@ thumbsize=220

123Foobar.jpg456

123
Foobar.jpg
456 -123
Foobar.jpg
456 +123
Foobar.jpg
456 !! html/php+tidy

123Foobar.jpg456

@@ -10953,7 +10953,7 @@ thumbsize=220
Foobar.jpg
-
+
@@ -10995,7 +10995,7 @@ thumbsize=220 [[File:Foobar.jpg|middle|text-top|caption]] !! html/php -
caption
+
caption

caption

!! html/parsoid @@ -11156,7 +11156,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|thumb|link=http://example.com/|Title]] !! html/php -
Title
+
Title
!! html/parsoid
Title
@@ -11169,7 +11169,7 @@ thumbsize=220 !! wikitext [[File:Foobar.jpg|thumb=Thumb.png|Title]] !! html/php -
Title
+
Title
!! html/parsoid
Title
@@ -11183,7 +11183,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|thumb=Thumb.png|link=Main_Page|Title]] !! html/php -
Title
+
Title
!! html/parsoid
Title
@@ -11197,7 +11197,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|thumb=Thumb.png|link=http://example.com|Title]] !! html/php -
Title
+
Title
!! html/parsoid
Title
@@ -11211,7 +11211,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|thumb=Thumb.png|link=|Title]] !! html/php -
Title
+
Title
!! html/parsoid
Title
@@ -11225,7 +11225,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|thumb=Thumb.png|link=Main_Page|alt=alttext|Title]] !! html/php -
alttext
Title
+
alttext
Title
!! html/parsoid
alttext
Title
@@ -11326,9 +11326,9 @@ parsoid=wt2html,wt2wt,html2html [[File:Foobar.jpg|thumb|frameless|caption]] [[File:Foobar.jpg|thumb|frame|caption]] !! html/php -
caption
-
caption
-
caption
+
caption
+
caption
+
caption
!! html/parsoid
caption
caption
caption
@@ -11386,7 +11386,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|thumb|50px]] !! html/php -
Foobar.jpg
+
Foobar.jpg
!! html/parsoid
@@ -11401,8 +11401,8 @@ parsoid=wt2html,wt2wt,html2html [[File:Foobar.svg|thumb|2000px]] !! html/php -
Foobar.jpg
-
Foobar.svg
+
Foobar.jpg
+
Foobar.svg
!! html/parsoid
@@ -11501,7 +11501,7 @@ thumbsize=220 !! wikitext [[File:Foobar.jpg|thumb|http://example.com]] !! html/php -
http://example.com
+
http://example.com
!! html/parsoid
http://example.com
@@ -11515,7 +11515,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|thumb|http://example.com|alt=Alteration]] !! html/php -
Alteration
http://example.com
+
Alteration
http://example.com
!! html/parsoid
Alteration
http://example.com
@@ -11527,7 +11527,7 @@ SVG thumbnails with no language set !! wikitext [[File:Foobar.svg|thumb|caption]] !! html/php -
caption
+
caption
!! html/parsoid
caption
@@ -11540,7 +11540,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.svg|thumb|caption|lang=de]] !! html/php -
caption
+
caption
!! html/parsoid
caption
@@ -11553,7 +11553,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.svg|thumb|caption|lang=invalid.language.code]] !! html/php -
lang=invalid.language.code
+
lang=invalid.language.code
!! html/parsoid
lang=invalid.language.code
@@ -11564,7 +11564,7 @@ BUG 1887: A ISBN with a thumbnail !! wikitext [[File:Foobar.jpg|thumb|ISBN 1235467890]] !! html/php -
ISBN 1235467890
+
ISBN 1235467890
!! html/parsoid
ISBN 1235467890
@@ -11575,7 +11575,7 @@ BUG 1887: A RFC with a thumbnail !! wikitext [[File:Foobar.jpg|thumb|This is RFC 12354]] !! html/php -
This is RFC 12354
+
This is RFC 12354
!! html/parsoid
This is RFC 12354
@@ -11586,7 +11586,7 @@ BUG 1887: A mailto link with a thumbnail !! wikitext [[File:Foobar.jpg|thumb|Please mailto:nobody@example.com]] !! html/php -
Please mailto:nobody@example.com
+
Please mailto:nobody@example.com
!! html/parsoid
Please mailto:nobody@example.com
@@ -11677,7 +11677,7 @@ Image caption containing another image !! wikitext [[File:Foobar.jpg|thumb|This is a caption with another [[File:Thumb.png|image]] inside it!]] !! html/php -
This is a caption with another image inside it!
+
This is a caption with another image inside it!
!! html/parsoid
This is a caption with another inside it!
@@ -11701,7 +11701,7 @@ Image: caption containing leading space !! wikitext [[File:Foobar.jpg|thumb| bar]] !! html/php -
bar
+
bar
!! html/parsoid
bar
@@ -11720,7 +11720,7 @@ parsoid=wt2html,wt2wt,html2html |} and some more text.]] !! html/php -
This is an example image thumbnail caption with a table
Foo Bar
Foo1 Bar1
and some more text.
+
This is an example image thumbnail caption with a table
Foo Bar
Foo1 Bar1
and some more text.
!! html/parsoid
This is an example image thumbnail caption with a table @@ -11737,7 +11737,7 @@ Bug 3090: External links other than http: in image captions !! wikitext [[File:Foobar.jpg|thumb|200x200px|This caption has [irc://example.net irc] and [https://example.com Secure] ext links in it.]] !! html/php -
This caption has irc and Secure ext links in it.
+
This caption has irc and Secure ext links in it.
!! html/parsoid
This caption has irc and Secure ext links in it.
@@ -11779,7 +11779,7 @@ language=es !! wikitext [[Archivo:Foobar.jpg|miniatura|izquierda|enlace=foo|caption]] !! html/php -
caption
+
caption
!! html/parsoid
caption
@@ -11812,9 +11812,9 @@ parsoid=wt2html,wt2wt,html2html [[File:Foobar.jpg|bogus1|thumb|bogus2|left|bogus3|caption]] !! html/php -
caption
-
caption
-
caption
+
caption
+
caption
+
caption
!! html/parsoid
caption
caption
caption
@@ -16281,7 +16281,7 @@ Images with the "|" character in the comment !! wikitext [[File:Foobar.jpg|thumb|An [http://test/?param1=|left|¶m2=|x external] URL]] !! html/php -
An external URL
+
An external URL
!! html/parsoid
An external URL
@@ -17529,7 +17529,7 @@ Free external link invading image caption !! wikitext [[Image:Foobar.jpg|thumb|http://x|hello]] !! html -
hello
+
hello
!! end -- 2.20.1