Use figure and figcaption HTML5 elements when possible
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	• Mattflaschen-WMF
	Jun 4 2013, 3:17 AM

Referenced Files

	F3046104: 10-prod-gallery.png
	Dec 4 2015, 2:09 AM

	F3046122: 23-patch-preview.png
	Dec 4 2015, 2:09 AM

	F3046118: 23-patch-gallery.png
	Dec 4 2015, 2:09 AM

	F3046108: 10-prod-preview.png
	Dec 4 2015, 2:09 AM

	F3046116: 23-prod-gallery.png
	Dec 4 2015, 2:09 AM

	F3046110: 10-patch-preview.png
	Dec 4 2015, 2:09 AM

	F3046106: 10-patch-gallery.png
	Dec 4 2015, 2:09 AM

	F3046120: 23-prod-preview.png
	Dec 4 2015, 2:09 AM

Subscribers

View All 19 Subscribers

Description

Since MediaWiki allows images that are clearly separated out, we should see if we can use <figure> and <figcaption>. These tags are intended for "some flow content, optionally with a caption, that is self-contained and is typically referenced as a single unit from the main flow of the document."

This would particularly make sense for thumb and frame where a caption is already shown. However, figure can also be used without figcaption, which should simplify implementation.

The main concern is backwards-compatibility with browsers that don't know about these tags. They're new to HTML5 (which is now always on in MediaWiki), but

Older IE will not be able to style these elements from CSS
Older IE will not be able to select these elements from JavaScript. This can be worked around by calling createElement(tagName) once for each of the relevant tag names.

For issue number 2, I think jQuery's internal createSafeFragment already takes care of old IE. So only the styling issue remains.

Details

Reference: bz49097

Subject	Repo	Branch	Lines +/-
Emit media structure as piloted in Parsoid	mediawiki/core	master	+4 K -70
[WIP] Always ship content.media.less when content-media feature is requested	mediawiki/core	master	+25 -37
RELEASE-NOTES-1.37: Add note about $wgParserEnableLegacyMediaDOM	mediawiki/core	REL1_37	+9 -2
Add $wgParserEnableLegacyMediaDOM to REL1-37 release notes	mediawiki/core	master	+9 -2
Enable legacy media dom on metawiki	operations/mediawiki-config	master	+12 -1
Add a separate config for content.media.less	mediawiki/core	wmf/1.38.0-wmf.2	+15 -2
Add a separate config for content.media.less	mediawiki/core	wmf/1.38.0-wmf.3	+15 -2
Add a separate config for content.media.less	mediawiki/core	master	+15 -2
Disable legacy media dom on a few more wikis	operations/mediawiki-config	master	+3 -3
resourceloader: Call getStyleFiles from FileModule::getFileHashes	mediawiki/core	REL1_35	+3 -13
resourceloader: Call getStyleFiles from FileModule::getFileHashes	mediawiki/core	REL1_36	+3 -13
resourceloader: Call getStyleFiles from FileModule::getFileHashes	mediawiki/core	master	+3 -13
Disable legacy media dom on a few more wikis	operations/mediawiki-config	master	+2 -0
Enable Parsoid inspired media structure on test wikis	operations/mediawiki-config	master	+6 -0
Add <figure> to the never suppressing group in BlockLevelPass	mediawiki/core	master	+1 -1
Share Parsoid's media styling with content	mediawiki/core	master	+235 -212
Update tests for $wgParserOutputLegacyMediaDOM	mediawiki/core	master	+0 -0
Add a feature flag to use the new media structure	mediawiki/core	master	+7 -0
Use figure and figcaption HTML5 elements for media	mediawiki/core	master	+134 -141
Allow <figure-inline> attributes through Sanitizer	mediawiki/core	master	+1 -0
Stop specifying element for thumbinner class	mediawiki/extensions/VectorBeta	master	+1 -1

Related Objects
Search...

Status	Subtype	Assigned	Task
Resolved		Arlolra	T51097 Use figure and figcaption HTML5 elements when possible
Resolved		Arlolra	T118517 [RFC] Use <figure> for media
Open		None	T155375 Extract thumbframe etc from parser into EmbeddedContentRenderer
Open		None	T147768 Add a frame and caption text to <graph>
Declined		None	T174766 Update graph ext to Vega 2.6.5
Open	Feature	None	T151703 <mapframe> with "text" and "frameless" parameters should not show frame
Open		None	T38755 gallery should not use ul/li
Open		ABreault-WMF	T268250 Decide on a structure for galleries
Resolved	BUG REPORT	Arlolra	T292498 Global user pages broken by introduction of <figure> on Meta
Resolved		Arlolra	T314318 Disable wgParserEnableLegacyMediaDOM on all wikis
Resolved		Arlolra	T287965 Skins not loading content-media feature misaligned?
Resolved		Arlolra	T318300 Media alignment broken with MinervaNeue since disabling wgParserEnableLegacyMediaDOM
Resolved		Arlolra	T287963 Put the class media option on the wrapper or media element?
Resolved		Arlolra	T271114 Update site specific js/css for new media structure
Open		ABreault-WMF	T297984 Media html read view considerations
Open		ABreault-WMF	T270150 Selectors in content.media.less need improvement in terms of performance and stability
Resolved		Arlolra	T297447 Audit template(styles), gadgets, and user scripts for new media structure
Resolved	BUG REPORT	Arlolra	T318727 Recent update caused image title to appear in text extracts
Resolved	BUG REPORT	Arlolra	T321440 MMV doesn't recognize captions of the new <figure> thumbnails
Resolved	BUG REPORT	Arlolra	T329364 Description link no longer displayed when $wgParserEnableLegacyMediaDOM set to false

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

ReleaseTaggerBot added a project: MW-1.37-notes (1.37.0-wmf.12; 2021-06-28).Jun 24 2021, 8:00 PM

Change 507512 merged by jenkins-bot:

[mediawiki/core@master] Emit media structure as piloted in Parsoid

https://gerrit.wikimedia.org/r/507512

Change 701612 had a related patch set uploaded (by Arlolra; author: Arlolra):

[operations/mediawiki-config@master] Disable legacy media structure on test wikis

https://gerrit.wikimedia.org/r/701612

Change 701612 merged by jenkins-bot:

[operations/mediawiki-config@master] Enable Parsoid inspired media structure on test wikis

https://gerrit.wikimedia.org/r/701612

Mentioned in SAL (#wikimedia-operations) [2021-06-28T23:05:39Z] <urbanecm@deploy1002> Synchronized wmf-config/InitialiseSettings.php: 5ec855d14b31a9392274c2bfe2e21e2ad44986bc: Enable Parsoid inspired media structure on test wikis (T51097) (duration: 00m 59s)

With the train going out to group 0 today, we can look at two wikis which should be configured differently based on T51097#7182465,

I verified that this is indeed running on testwiki. For example, after an ?action=purge on https://test.wikipedia.org/wiki/Rusa_test_page_2 I see,

<figure class="mw-halign-right" typeof="mw:Image/Thumb"><a href="/wiki/File:Onion_diagram.svg"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Onion_diagram.svg/300px-Onion_diagram.svg.png" decoding="async" width="300" height="197" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Onion_diagram.svg/450px-Onion_diagram.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Onion_diagram.svg/600px-Onion_diagram.svg.png 2x" data-file-width="875" data-file-height="575"></a><figcaption>In this example onion, we test image placement.</figcaption></figure>

However, on mediawikiwiki, after similarly purging we get on https://www.mediawiki.org/wiki/Parsoid

<div class="thumb tright"><div class="thumbinner" style="width:514px;"><a href="/wiki/File:Parsoid_HTML-RDFa_content_model.svg" class="image"><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/2/2e/Parsoid_HTML-RDFa_content_model.svg/512px-Parsoid_HTML-RDFa_content_model.svg.png" decoding="async" width="512" height="362" class="thumbimage" data-file-width="512" data-file-height="362"></a>  <div class="thumbcaption">Artist's impression of the Parsoid HTML5 + RDFa wiki runtime</div></div></div>

Arlolra edited projects, added Parsoid-Media-Structure; removed Parsoid.Jul 13 2021, 5:14 PM

I've noticed an important different between the two formats and it relates to where the emitted class is located. Before this class was applied directly to the img object, but now it seems this is on the wrapping class. While this is probably a rare use case, it's an important change and I know at least some image headers on mediawiki.org etc which likely will have to be adapted to take this into account.

[[File:Onion diagram.svg|thumb|right|300px|In this example onion, we test image placement.|class=djtest]]

<figure class="mw-halign-right djtest" typeof="mw:Image/Thumb"><a href="/wiki/File:Onion_diagram.svg" title=""><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Onion_diagram.svg/300px-Onion_diagram.svg.png" decoding="async" width="300" height="197" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Onion_diagram.svg/450px-Onion_diagram.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Onion_diagram.svg/600px-Onion_diagram.svg.png 2x" data-file-width="875" data-file-height="575"></a><figcaption>In this example onion, we test image placement.</figcaption></figure>

<div class="thumb tright"><div class="thumbinner" style="width:302px;"><a href="/wiki/File:Onion_diagram.svg" class="image" title=""><img alt="" src="//upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Onion_diagram.svg/300px-Onion_diagram.svg.png" decoding="async" width="300" height="197" class="djtest thumbimage" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Onion_diagram.svg/450px-Onion_diagram.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/e/e1/Onion_diagram.svg/600px-Onion_diagram.svg.png 2x" data-file-width="875" data-file-height="575"></a>  <div class="thumbcaption"><div class="magnify"><a href="/wiki/File:Onion_diagram.svg" class="internal" title="Enlarge"></a></div>In this example onion, we test image placement.</div></div></div>

Also the following features broken alignment:

As well and most importantly and I think a blocker: printing in Vector is not aligning correctly.

And I see a CSS reflow for videos on test.wikipedia.org. This is specifically with the videojs player, which is active on test.wp.org, not sure about the old Kaltura player.
https://test.wikipedia.org/wiki/User:TheDJ/sandbox

Arlolra mentioned this in T287963: Put the class media option on the wrapper or media element?.Aug 3 2021, 3:17 PM

Arlolra mentioned this in T272186: Update extensions to handle the new media structure.

@TheDJ thanks for filing those issue. I've created or updated tasks where they can be discussed individually.

Change 714635 had a related patch set uploaded (by Arlolra; author: Arlolra):

[operations/mediawiki-config@master] Disable legacy media dom on a few more wikis

https://gerrit.wikimedia.org/r/714635

Change 714635 merged by jenkins-bot:

[operations/mediawiki-config@master] Disable legacy media dom on a few more wikis

https://gerrit.wikimedia.org/r/714635

Mentioned in SAL (#wikimedia-operations) [2021-08-25T18:16:22Z] <urbanecm@deploy1002> Synchronized wmf-config/InitialiseSettings.php: e6df0803e4eaca91bd725bcd376b260b97917de3: Disable legacy media dom on a few more wikis (T51097) (duration: 01m 05s)

ok... now thumbframes on mediawiki.org are loading late.. seems like the parsoid CSS module is not added with addModuleStyles() to ensure its loaded before the page rendering starts ?

See the image on https://www.mediawiki.org/wiki/MediaWiki jump from center to right as the page loads.
Similar on https://www.mediawiki.org/wiki/Wikimedia_Hackathon_2021

@TheDJ Thanks for reporting

It looks like the issue is with the cached stylesheet

https://www.mediawiki.org/w/load.php?lang=en&modules=ext.discussionTools.init.styles%7Cext.echo.styles.badge%7Cext.uls.pt%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cmediawiki.ui.button%2Cicon%7Coojs-ui.styles.icons-alerts%7Cskins.vector.icons%2Cstyles&only=styles&skin=vector

If I add ?debug=true to it, I get results for "mw:Image"

The jump is probably because until the cache is purged, the styles don't kick in until VE or whathaveyou's styles are fetched by JS.

Let me see about busting the cache

I also see all the VE JS being loaded (with debug=true).. that's not normal....

I could be wildly off base about caching ... suffice it to say, I'm looking into it

When I load https://www.mediawiki.org/wiki/MediaWiki with JS disabled the image says on the left, which confirms @TheDJ's theory that the correct CSS is being loaded by JS (addModules) rather than properly with addModuleStyles. However, I couldn't reproduce this on https://test.wikipedia.org/wiki/Image?useskin=vector&useskinversion=1 - not sure what's different really.

As to why it's happening...I have no idea. My guess is that this is another regression from the skin refactoring, T287410: ResourceLoaderSkinModule: Skins should not use the legacy styling feature which recently touched stuff like https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector/+/a50b1db7931610a038197b74ba798fe307e9055e

Also for some reason Timeless has the "content-media" feature set to false, so it's just fully broken there AFAICT.

Correcting my previous comment, VisualEditor will load the styles via JS if you have it enabled, so you actually need to turn that off, and then you'll find that the photo no longer jumps and stays on the (wrong) left side, even with JS enabled. So the real problem is that the skin is not loading these styles.

OK, I think this is related to caching (yes, @Arlolra was right). Specifically, the styles for this are loaded in an override of ResourceLoaderSkinModule::getStyleFiles():

				if ( $feature === 'content-media' && !$this->getConfig()->get( 'ParserEnableLegacyMediaDOM' ) ) {
					$featureFilePaths['screen'][] = new ResourceLoaderFilePath(
						'resources/src/mediawiki.skinning/content.media.less',
						$defaultLocalBasePath,
						$defaultRemoteBasePath
					);
				}

However, this new file path is not seen by ResourceLoaderModule::getDefinitionSummary() because it checks $this->styles. When $wgParserEnableLegacyMediaDOM was flipped, there was no cache invalidation since according to RL, the module and all its files were the same.

Quick fix: Add value of $wgParserEnableLegacyMediaDOM to ResourceLoaderSkinModule::getDefinitionSummary()

I only did a quick skim, but it wasn't clear to me how the other feature changes experienced cache invalidation. Maybe a more detailed audit is necessary.

Restricted Application added a project: Performance-Team. · View Herald TranscriptAug 25 2021, 8:56 PM

Change 714841 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/core@master] Alter the skin definition summary based on wgParserEnableLegacyMediaDOM

https://gerrit.wikimedia.org/r/714841

(Replied via a comment on Gerrit)

Krinkle moved this task from Inbox to External on the MediaWiki-ResourceLoader board.Aug 28 2021, 1:02 AM

greg removed a project: Performance-Team.Aug 30 2021, 6:49 PM

ExE-Boss added a subtask: T38755: gallery should not use ul/li.Sep 2 2021, 10:41 AM

ExE-Boss subscribed.

Krinkle mentioned this in T290273: SkinModule is missing cache invalidation for feature files.Sep 2 2021, 5:50 PM

Change 714841 merged by jenkins-bot:

[mediawiki/core@master] resourceloader: Call getStyleFiles from FileModule::getFileHashes

https://gerrit.wikimedia.org/r/714841

MBinder_WMF added a project: Parsoid-Read-Views-Deprecated-Project (Phase 0 - Parsoid-Media-Structure).Sep 3 2021, 9:30 PM

MBinder_WMF edited projects, added Parsoid; removed Parsoid-Read-Views-Deprecated-Project (Phase 0 - Parsoid-Media-Structure).Sep 3 2021, 9:37 PM

MBinder_WMF added a project: Parsoid-Read-Views (Phase 0 - Parsoid-Media-Structure).Sep 3 2021, 9:58 PM

Change 719179 had a related patch set uploaded (by Krinkle; author: Arlolra):

[mediawiki/core@REL1_36] resourceloader: Call getStyleFiles from FileModule::getFileHashes

https://gerrit.wikimedia.org/r/719179

Change 719180 had a related patch set uploaded (by Krinkle; author: Arlolra):

[mediawiki/core@REL1_35] resourceloader: Call getStyleFiles from FileModule::getFileHashes

https://gerrit.wikimedia.org/r/719180

Change 719180 merged by jenkins-bot:

[mediawiki/core@REL1_35] resourceloader: Call getStyleFiles from FileModule::getFileHashes

https://gerrit.wikimedia.org/r/719180

Change 719179 merged by jenkins-bot:

[mediawiki/core@REL1_36] resourceloader: Call getStyleFiles from FileModule::getFileHashes

https://gerrit.wikimedia.org/r/719179

Shouldn't these changes have rolled out by now ? If so, why is the thumbnail on MediaWiki.org still jumping around after load ? (Ah, because I use Timeless and there is T287965: Skins not loading content-media feature misaligned? )

Change 724861 had a related patch set uploaded (by Arlolra; author: Arlolra):

[operations/mediawiki-config@master] Disable legacy media dom on a few more wikis

https://gerrit.wikimedia.org/r/724861

Change 724861 merged by jenkins-bot:

[operations/mediawiki-config@master] Disable legacy media dom on a few more wikis

https://gerrit.wikimedia.org/r/724861

Mentioned in SAL (#wikimedia-operations) [2021-09-30T18:20:53Z] <thcipriani@deploy1002> Synchronized wmf-config/InitialiseSettings.php: Config: [[gerrit:724861|Disable legacy media dom on a few more wikis (T51097)]] (duration: 01m 08s)

Change 725160 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/core@master] Add $wgParserEnableLegacyMediaDOM to REL1-37 release notes

https://gerrit.wikimedia.org/r/725160

Deployment to Meta broke global user pages appearing on wikis that still use the legacy <div>-based output, see T292498. Without any countermeasures, I’m pretty sure the same will happen on file description pages if Commons switches before other wikis.

Without any countermeasures, I’m pretty sure the same will happen on file description pages if Commons switches before other wikis

Thanks. If you can think of any other situation where there is similar cross wiki inclusion, please let me know

Change 726643 had a related patch set uploaded (by Arlolra; author: Arlolra):

[operations/mediawiki-config@master] [WIP] Enable legacy media dom on metawiki

https://gerrit.wikimedia.org/r/726643

Change 726645 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/core@master] [WIP] Always ship content.media.less when content-media feature is requested

https://gerrit.wikimedia.org/r/726645

I generally agree with the direction of the patch, if we can load the styles regardless of what the config flag is, we should.

However, the situation for Commons is more tricky, because it's arbitrary MediaWiki installations requesting those pages...ideally we'd backport the styles for 1.35/1.36 if they're not there already. How bad will it look if those styles aren't there?

Change 726697 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/core@master] Add a separate config for content.media.less

https://gerrit.wikimedia.org/r/726697

Change 726707 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/core@wmf/1.38.0-wmf.2] Add a separate config for content.media.less

https://gerrit.wikimedia.org/r/726707

Change 726709 had a related patch set uploaded (by Arlolra; author: Arlolra):

[mediawiki/core@wmf/1.38.0-wmf.3] Add a separate config for content.media.less

https://gerrit.wikimedia.org/r/726709

Change 726697 merged by jenkins-bot:

[mediawiki/core@master] Add a separate config for content.media.less

https://gerrit.wikimedia.org/r/726697

ReleaseTaggerBot added a project: MW-1.38-notes (1.38.0-wmf.4; 2021-10-12).Oct 6 2021, 12:00 AM

Change 726709 merged by jenkins-bot:

[mediawiki/core@wmf/1.38.0-wmf.3] Add a separate config for content.media.less

https://gerrit.wikimedia.org/r/726709

Change 726707 merged by jenkins-bot:

[mediawiki/core@wmf/1.38.0-wmf.2] Add a separate config for content.media.less

https://gerrit.wikimedia.org/r/726707

Change 726643 merged by jenkins-bot:

[operations/mediawiki-config@master] Enable legacy media dom on metawiki

https://gerrit.wikimedia.org/r/726643

ReleaseTaggerBot edited projects, added MW-1.38-notes (1.38.0-wmf.3; 2021-10-05); removed MW-1.38-notes (1.38.0-wmf.4; 2021-10-12).Oct 6 2021, 1:00 AM

Arlolra closed subtask T292498: Global user pages broken by introduction of <figure> on Meta as Resolved.Oct 6 2021, 1:23 AM

In T51097#7402571, @Arlolra wrote:

If you can think of any other situation where there is similar cross wiki inclusion, please let me know

Probably MediaWiki-extensions-DoubleWiki as well (used on Wikisources and a few other wikis). The transcluded pages often depend on their own wiki’s sitewide CSS and are thus already broken, breaking them a bit more doesn’t worsen the situation a lot…

In T51097#7402844, @Legoktm wrote:

How bad will it look if those styles aren't there?

Hopefully not that bad, at least in average. Images on Commons file description pages are usually inline (often transcluded in table cells), which don’t require much CSS. If you want to make sure, the necessary styles can be copied to (or @imported from) MediaWiki:Filepage.css, which should be loaded on third-party wikis as well.

matmarex mentioned this in T292657: file "link=" syntax broken at some wikis.Oct 6 2021, 5:23 PM

In T51097#7406103, @Tacsipacsi wrote:

In T51097#7402844, @Legoktm wrote:

How bad will it look if those styles aren't there?

Hopefully not that bad, at least in average. Images on Commons file description pages are usually inline (often transcluded in table cells), which don’t require much CSS. If you want to make sure, the necessary styles can be copied to (or @imported from) MediaWiki:Filepage.css, which should be loaded on third-party wikis as well.

That was the same conclusion that Arlo and I came to. I suggested that we make sure to backport the correct styles for the 1.35/1.36/1.37 branches, but not wait for a release before flipping the switch on Commons. If it turns out to be much worse than expected, we can ask Reedy to put out a MW maintenance release outside the normal cycle for this change.

Change 730735 had a related patch set uploaded (by C. Scott Ananian; author: Arlolra):

[mediawiki/core@REL1_37] Add $wgParserEnableLegacyMediaDOM to REL1-37 release notes

https://gerrit.wikimedia.org/r/730735

Change 725160 merged by jenkins-bot:

[mediawiki/core@master] Add $wgParserEnableLegacyMediaDOM to REL1-37 release notes

https://gerrit.wikimedia.org/r/725160

ReleaseTaggerBot edited projects, added MW-1.38-notes (1.38.0-wmf.5; 2021-10-19); removed MW-1.38-notes (1.38.0-wmf.3; 2021-10-05).Oct 14 2021, 9:00 PM

Change 730735 merged by C. Scott Ananian:

[mediawiki/core@REL1_37] RELEASE-NOTES-1.37: Add note about $wgParserEnableLegacyMediaDOM

https://gerrit.wikimedia.org/r/730735

ReleaseTaggerBot edited projects, added MW-1.37-notes; removed MW-1.37-notes (1.37.0-wmf.12; 2021-06-28).Oct 15 2021, 7:00 PM

Change 726645 abandoned by Arlolra: