From: Gilles Dubuc Date: Thu, 20 Dec 2018 10:02:39 +0000 (+0100) Subject: Make thumbnail image decoding async X-Git-Tag: 1.34.0-rc.0~3199^2 X-Git-Url: http://git.cyclocoop.org/%28?a=commitdiff_plain;h=4a79eefc78e6c9c782bf946b8be01803734f0635;p=lhc%2Fweb%2Fwiklou.git Make thumbnail image decoding async This is a browser hint indicating that decoding of the image can be done asynchronously (instead of synchronously during the image's onload event). Marking decoding as async enables the browser to display any other non-image content that might be waiting to be rendered, without waiting for the image to be decoding. This should allow text to appear sooner in some situations, where the browser would have otherwise waited to bundle its rendering with an image. The final result (non-image + image content being displayed) will happen at the same time as before. Given how text-heavy wiki context usually is, it makes sense to allow users to see the text sooner in some situations, so they can start reading. https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding https://html.spec.whatwg.org/multipage/images.html#decoding-images Bug: T212124 Change-Id: I3d738eba016bad486194f032a47ac6312f61c34e --- diff --git a/includes/media/MediaTransformOutput.php b/includes/media/MediaTransformOutput.php index e3e734372d..12048a9012 100644 --- a/includes/media/MediaTransformOutput.php +++ b/includes/media/MediaTransformOutput.php @@ -367,6 +367,7 @@ class ThumbnailImage extends MediaTransformOutput { $attribs = [ 'alt' => $alt, 'src' => $this->url, + 'decoding' => 'async', ]; if ( !empty( $options['custom-url-link'] ) ) { diff --git a/tests/parser/parserTests.txt b/tests/parser/parserTests.txt index 3fd61588bb..a7ae000ae4 100644 --- a/tests/parser/parserTests.txt +++ b/tests/parser/parserTests.txt @@ -14595,7 +14595,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[Image:foobar.jpg]] !! html/php -

Foobar.jpg +

Foobar.jpg

!! html/parsoid

@@ -14616,7 +14616,7 @@ Simple image (using File: namespace, now canonical) !! wikitext [[File:Foobar.jpg]] !! html/php -

Foobar.jpg +

Foobar.jpg

!! html/parsoid

@@ -14627,7 +14627,7 @@ Right-aligned image !! wikitext [[File:Foobar.jpg|right]] !! html/php -
Foobar.jpg
+
Foobar.jpg
!! html/parsoid
@@ -14638,7 +14638,7 @@ Image with caption !! wikitext [[File:Foobar.jpg|right|Caption text]] !! html/php -
Caption text
+
Caption text
!! html/parsoid
Caption text
@@ -14649,7 +14649,7 @@ Image with caption, T55312 #1 !! wikitext [[File:Foobar.jpg|right|Caption page stuff]] !! html/php -
Caption page stuff
+
Caption page stuff
!! html/parsoid
Caption page stuff
@@ -14660,7 +14660,7 @@ Image with caption, T55312 #2 !! wikitext [[File:Foobar.jpg|right|Caption page=]] !! html/php -
Caption page=
+
Caption page=
!! html/parsoid
Caption page=
@@ -14671,7 +14671,7 @@ Image with caption, T55312 #3 !! wikitext [[File:Foobar.jpg|right|Caption page=stuff]] !! html/php -
Caption page=stuff
+
Caption page=stuff
!! html/parsoid
Caption page=stuff
@@ -14683,8 +14683,8 @@ Image caption with pipe entity [[File:Foobar.jpg|thumb|one | two]] [[File:Foobar.jpg|thumb|one ''two'' | three]] !! html/php -
one | two
-
one two | three
+
one | two
+
one two | three
!! html/parsoid
one | two
@@ -14701,7 +14701,7 @@ thumbsize=220 [[Link2]] ]] !! html/php -
Caption Link1 [[]] Link2
+
Caption Link1 [[]] Link2
!! html/parsoid
Caption Link1 @@ -14715,7 +14715,7 @@ Titles in unlinked images (T23454) !! wikitext [[File:Foobar.jpg|link=|stuff]] !! html/php -

stuff +

stuff

!! html/parsoid

@@ -14735,7 +14735,7 @@ Image with link trail !! wikitext Linktrails should not work for images: [[File:Foobar.jpg]]s !! html/php -

Linktrails should not work for images: Foobar.jpgs +

Linktrails should not work for images: Foobar.jpgs

!! html/parsoid

Linktrails should not work for images: s

@@ -14748,7 +14748,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|right||Caption text]] !! html/php -
Caption text
+
Caption text
!! html/parsoid
Caption text
@@ -14759,7 +14759,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
@@ -14770,7 +14770,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
@@ -14781,7 +14781,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|{{echo|50px}}]] !! html/php -

Foobar.jpg +

Foobar.jpg

!! html/parsoid

@@ -14794,7 +14794,7 @@ Image with multiple attributes from the same template !! wikitext [[File:Foobar.jpg|{{image_attribs}}]] !! html/php -
Caption text
+
Caption text
!! html/parsoid
Caption text
@@ -14809,16 +14809,16 @@ thumbsize=220 123[[File:Foobar.jpg|right]]456 123[[File:Foobar.jpg|thumb]]456 !! html/php -

123Foobar.jpg456 +

123Foobar.jpg456

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

123Foobar.jpg456 +

123Foobar.jpg456

-123

Foobar.jpg

456 -123

Foobar.jpg

456 +123

Foobar.jpg

456 +123

Foobar.jpg

456

!! html/parsoid

123456

@@ -14831,7 +14831,7 @@ Image with multiple captions -- only last one is accepted !! wikitext [[File:Foobar.jpg|right|Caption1 - ignored|[[Caption2]] - ignored|Caption3 - accepted]] !! html/php -
Caption3 - accepted
+
Caption3 - accepted
!! html/parsoid
Caption3 - accepted
@@ -14842,7 +14842,7 @@ Image with multiple widths -- use last !! wikitext [[File:Foobar.jpg|200px|300px|caption]] !! html/php -

caption +

caption

!! html/parsoid

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

caption +

caption
+

caption

!! html/parsoid
caption
@@ -14872,9 +14872,9 @@ Image with width attribute at different positions [[File:Foobar.jpg|right|200px|Caption]] [[File:Foobar.jpg|right|Caption|200px]] !! html/php -
Caption
-
Caption
-
Caption
+
Caption
+
Caption
+
Caption
!! html/parsoid
Caption
@@ -14891,8 +14891,8 @@ parsoid=wt2html,wt2wt,html2html [[File:Foobar.jpg|20pxpx]] [[File:Foobar.jpg|200x20pxpx]] !! html/php -

Foobar.jpg -Foobar.jpg +

Foobar.jpg +Foobar.jpg

!! html/parsoid

@@ -14903,7 +14903,7 @@ Image with link parameter, wiki target !! wikitext [[File:Foobar.jpg|link=Main Page]] !! html/php -

Foobar.jpg +

Foobar.jpg

!! html/parsoid

@@ -14915,7 +14915,7 @@ Image with link parameter, URL target !! wikitext [[File:Foobar.jpg|link=http://example.com/]] !! html/php -

Foobar.jpg +

Foobar.jpg

!! html/parsoid

@@ -14927,7 +14927,7 @@ Image with link parameter, protocol-less URL target !! wikitext [[File:Foobar.jpg|link=//example.com/]] !! html/php -

Foobar.jpg +

Foobar.jpg

!! html/parsoid

@@ -14956,7 +14956,7 @@ Image with link parameter, wgExternalLinkTarget !! config wgExternalLinkTarget='foobar' !! html/php -

Foobar.jpg +

Foobar.jpg

!! end @@ -14967,7 +14967,7 @@ Image with link parameter, wgNoFollowLinks set to false !! config wgNoFollowLinks=false !! html/php -

Foobar.jpg +

Foobar.jpg

!! end @@ -14978,7 +14978,7 @@ Image with link parameter, wgNoFollowDomainExceptions !! config wgNoFollowDomainExceptions='example.com' !! html/php -

Foobar.jpg +

Foobar.jpg

!! end @@ -14990,7 +14990,7 @@ Image with link parameter, wgExternalLinkTarget, unnamed parameter !! config wgExternalLinkTarget='foobar' !! html/php -

Title +

Title

!! end @@ -14999,7 +14999,7 @@ Image with empty link parameter !! wikitext [[File:Foobar.jpg|link=]] !! html/php -

Foobar.jpg +

Foobar.jpg

!! html/parsoid

@@ -15010,7 +15010,7 @@ Image with link parameter (wiki target) and unnamed parameter !! wikitext [[File:Foobar.jpg|link=Main_Page|Title]] !! html/php -

Title +

Title

!! html/parsoid

@@ -15021,7 +15021,7 @@ Image with link parameter (URL target) and unnamed parameter !! wikitext [[File:Foobar.jpg|link=http://example.com/|Title]] !! html/php -

Title +

Title

!! html/parsoid

@@ -15035,7 +15035,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|thumb|link=http://example.com/|Title]] !! html/php -
Title
+
Title
!! html/parsoid
Title
@@ -15048,7 +15048,7 @@ thumbsize=220 !! wikitext [[File:Foobar.jpg|thumbnail=Thumb.png|Title]] !! html/php -
Title
+
Title
!! html/parsoid
Title
@@ -15062,7 +15062,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|thumb=Thumb.png|link=Main_Page|Title]] !! html/php -
Title
+
Title
!! html/parsoid
Title
@@ -15076,7 +15076,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|thumb=Thumb.png|link=http://example.com|Title]] !! html/php -
Title
+
Title
!! html/parsoid
Title
@@ -15090,7 +15090,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|thumb=Thumb.png|link=|Title]] !! html/php -
Title
+
Title
!! html/parsoid
Title
@@ -15104,7 +15104,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
@@ -15117,7 +15117,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[File:Foobar.jpg|frame|left|This is a test image [[Main Page]]]] !! html/php -
This is a test image Main Page
+
This is a test image Main Page
!! html/parsoid
This is a test image Main Page
@@ -15130,7 +15130,7 @@ parsoid=wt2html,wt2wt,html2html !! wikitext [[Image:Foobar.jpg|frame|left|This is a test image [[Main Page]]|alt=Altitude]] !! html/php -
Altitude
This is a test image Main Page
+
Altitude
This is a test image Main Page
!! html/parsoid
Altitude
This is a test image Main Page
@@ -15143,8 +15143,8 @@ Image with wiki markup in implicit alt [[Image:Foobar.jpg|alt=testing '''bold''' in alt]] !! html/php -

testing bold in alt -

testing bold in alt +

testing bold in alt +

testing bold in alt

!! html/parsoid

@@ -15157,7 +15157,7 @@ Alt image option should handle most kinds of wikitext without barfing !! wikitext [[Image:Foobar.jpg|thumb|This is the image caption|alt=This is a [[link]] and a {{echo|''bold template''}}.]] !! html/php -
This is a link and a bold template.
This is the image caption
+
This is a link and a bold template.
This is the image caption
!! html/parsoid
This is a link and a bold template.
This is the image caption
@@ -15177,11 +15177,11 @@ parsoid = { File:Foobar.jpg|alt=& !! html/php+tidy -

& +

&