From: Bartosz Dziewoński Date: Mon, 18 Aug 2014 12:53:23 +0000 (+0200) Subject: Generate 'Enlarge' image in CSS rather than HTML (Linker) X-Git-Tag: 1.31.0-rc.0~14368^2 X-Git-Url: https://git.cyclocoop.org/%7B%24www_url%7Dadmin/compta/banques/%7B%7B%20url_for%28%27admin_users%27%29%20%7D%7D?a=commitdiff_plain;h=4f056b4e15d34c8cbcab8032f62e3aea3de793d8;p=lhc%2Fweb%2Fwiklou.git 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 --- 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 0000000000..00a9cee11b Binary files /dev/null and b/skins/common/images/magnify-clip-ltr.png differ diff --git a/skins/common/oldshared.css b/skins/common/oldshared.css index d72996ea5a..ecd846eacb 100644 --- a/skins/common/oldshared.css +++ b/skins/common/oldshared.css @@ -110,10 +110,27 @@ 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; + /* @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; } /* @noflip */ diff --git a/tests/parser/parserTests.txt b/tests/parser/parserTests.txt index 3a315e10d2..08637c6b0b 100644 --- a/tests/parser/parserTests.txt +++ b/tests/parser/parserTests.txt @@ -10853,7 +10853,7 @@ thumbsize=220 [[Link2]] ]] !! html/php -
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