Page MenuHomePhabricator

Ensure `#content`, `#footer` and `.portal` code occurrences are element agnostic
Closed, ResolvedPublic5 Estimated Story Points

Description

For challenges like implementing new skins which are making use of HTML5 sectioning elements main, footer or nav and for interoperability between skins code should limited to only ids and classes and remove div mentions.

Proposal

Current .mw-body selector, 2020-03-23coreVectorMinervaNeueMonobookTimelessModernCologneBlue
div#content
#content or id equiv#mw_contentholder#article
.mw-body

Note, CologneBlue also features #content, but it's used on parent element of #article.mw-body
Note, MinervaNeue uses .mw-body > .content over #bodyContent

Related

T240489: [Epic] Determine the optimum Vector DOM structure for a11y and performance

Details

ProjectBranchLines +/-Subject
mediawiki/coremaster+1 -0
mediawiki/skins/Examplemaster+7 -3
mediawiki/skins/Vectormaster+15 -8
mediawiki/skins/MinervaNeuemaster+1 -1
mediawiki/skins/Timelessmaster+8 -7
mediawiki/skins/MonoBookmaster+3 -2
mediawiki/skins/Modernmaster+8 -8
mediawiki/extensions/Thememaster+5 -5
mediawiki/extensions/FundraisingEmailUnsubscribemaster+1 -1
mediawiki/extensions/Thememaster+62 -62
mediawiki/extensions/DonationInterfacemaster+9 -9
mediawiki/extensions/MobileFrontendmaster+1 -1
mediawiki/skins/Duskmaster+1 -1
mediawiki/skins/Metrolookmaster+4 -4
mediawiki/skins/Metrolookmaster+29 -29
mediawiki/extensions/ContributionTrackingmaster+3 -3
mediawiki/extensions/CategoryTreemaster+2 -2
operations/mediawiki-configmaster+9 -9
mediawiki/skins/Vectormaster+5 -5
mediawiki/skins/MonoBookmaster+3 -3
Show related patches Customize query in gerrit

Related Objects

StatusSubtypeAssignedTask
ResolvedGoalovasileva
OpenNone
Resolvedovasileva
ResolvedSpikeovasileva
ResolvedSpikephuedx
Resolvedovasileva
OpenSpikeNone
ResolvedVolker_E
ResolvedSpikeovasileva
Resolvedovasileva
ResolvedBUG REPORTmatmarex
Resolvedovasileva
ResolvedJdlrobson
Resolvedphuedx
Resolvednray
ResolvedMayakp.wiki
ResolvedMayakp.wiki
Stalledovasileva
OpenNone
ResolvedEdtadros
OpenNone
OpenNone

Event Timeline

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

Change 583129 merged by jenkins-bot:
[mediawiki/skins/Dusk@master] Remove unnecessary, overqualified element parts of combination selectors

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

Change 582878 merged by jenkins-bot:
[mediawiki/extensions/MobileFrontend@master] Replace #content with .mw-body

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

ovasileva triaged this task as Medium priority.Apr 2 2020, 5:58 PM
Jdlrobson set the point value for this task to 5.Apr 2 2020, 6:05 PM
Jdlrobson added a subscriber: Jdlrobson.

I believe this is blocked on fundraising and the maintainer of the 3rd party (?) Theme extension.

mepps added a subscriber: mepps.Apr 3 2020, 1:08 AM

@Jdlrobson @Volker_E I went ahead and reviewed the donation interface patch. The styling worked for me locally and it complied with what's been discussed in this task.

mepps added a comment.Apr 3 2020, 1:09 AM

In general, the best way to get a task on fr-tech's agenda is to add the Fundraising-Backlog task.

Change 581815 merged by jenkins-bot:
[mediawiki/extensions/DonationInterface@master] Remove unnecessary, overqualified element parts of id selectors

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

Change 583125 merged by jenkins-bot:
[mediawiki/extensions/Theme@master] Remove unnecessary, overqualified element parts of id selectors

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

Volker_E updated the task description. (Show Details)Apr 4 2020, 5:11 AM
Volker_E added a subscriber: Johan.

@Johan Are user notices for changes concerning user styles recommended?

Johan added a comment.Apr 4 2020, 7:59 PM

I think this merits mentioning.

Change 583132 merged by jenkins-bot:
[mediawiki/extensions/FundraisingEmailUnsubscribe@master] Remove unnecessary, overqualified element parts of class selectors

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

Volker_E updated the task description. (Show Details)Apr 7 2020, 4:26 AM

Change 587341 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/extensions/Theme@master] Remove unnecessary, overqualified element parts of class selectors

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

Change 587341 merged by jenkins-bot:
[mediawiki/extensions/Theme@master] Remove unnecessary, overqualified element parts of class selectors

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

Volker_E updated the task description. (Show Details)Apr 10 2020, 6:16 AM

@Johan Possibly something along the lines: “We've reduced over-qualified CSS selectors (div#content => .mw-body, div.portal => .portal & div#footer => #footer) across our skins in order to make our skins fit for use of HTML5 elements. Please review possibly affected similar rules in your gadgets and users styles and change them accordingly.
Please provide feedback if that seems reasonable or if you've got ideas for simplification.

Johan moved this task from To Triage to Announce in next Tech/News on the User-notice board.
Johan added a comment.Apr 16 2020, 3:47 PM

@Volker_E – still correct?

Over-qualified CSS selectors in Wikimedia skins have been changed. <code>div#content</code> is now <code>mw-body</code>. <code>div.portal</code> is now <code>.portal</code>. <code>div#footer</code> is now <code>#footer</code>. This is so the skins can use HTLM5 elements. You might need to change your gadgets or user styles.

@Johan “have been replaced”/“have been removed”. Is “you might need” strong and clear enough?

Johan added a comment.Apr 16 2020, 5:14 PM

@Volker_E OK, updated and re-worded ("If your gadgets or user styles used them you will have to update them").

Volker_E added a comment.EditedApr 16 2020, 5:28 PM

Sounds great now, thanks @Johan. Note will be announced Mon, 20 April 2020.

The CSS selector #footer also matches to the heading created by the wikitext

== footer ==

This add strange styling to the heading. This is bad.

Nirmos added a subscriber: Nirmos.Apr 21 2020, 7:47 AM
stjn added a subscriber: stjn.EditedApr 22 2020, 2:17 PM

The CSS selector #footer also matches to the heading created by the wikitext

== footer ==

This add strange styling to the heading. This is bad.

Ideally, no one should use that heading either way since having same identifiers on a page is not valid in HTML specification. (Not that doing styling with IDs is good either.)

Ideally, no one should use that heading either way since having same identifiers on a page is not valid in HTML specification. (Not that doing styling with IDs is good either.)

I don't think editors can be expected to be aware that there is a #footer element on wiki pages, thus sections shouldn't be titled "footer". However, ids are case-sensitive and section titles are typically capitalized, so a conflicting == footer == is very unlikely. That being said, a move to a .mw-footer selector would be appropriate.

Same here, I'm not very concerned with the possible side-effects given it would need a lowercase “footer” called header. But I'm in support of adding mw-footer to #footer carrying container in Wikimedia deployed skins. @Demian would you be interested in providing such patches?

@Demian would you be interested in providing such patches?

In a sense I already did in patch 589774 in chain after the Logo (T246170) is done. That could be done in a separate patch.
Questions are: 1) when to do that, 2) for both versions or only modern?

In order to be consistent for user scripts and styles it should be added to all Wikimedia deployed skins, at minimum for MinervaNeue and Vector, both legacy and latest.

Sounds good to me.

Change 592307 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Modern@master] [CSS] Replace #footer selector with .mw-footer

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

Change 592308 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/MonoBook@master] [CSS] Replace #footer selector with .mw-footer

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

Change 592309 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Timeless@master] [CSS] Replace #mw-footer,#mw-footer-container selector with .mw-footer,.mw-footer-container

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

Change 592310 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/MinervaNeue@master] [CSS] Add .mw-footer class to footer

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

Change 592311 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] [CSS] Replace #footer selector with .mw-footer

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

Change 592313 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Example@master] [CSS] Replace #footer selector with .mw-footer

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

for MinervaNeue

Minerva uses the tag selector footer, I saw no reason to change it to .mw-footer. I've just added the class to the element for consistency.

@Volker_E which skins (pages generated by them) are cached?
AFAIK only logged-out users receive cached pages, that's Vector by default. What about skins chosen by URLs?
?useskin=minerva, ?useskin=timeless, etc. are those requests cached?

stjn removed a subscriber: stjn.Apr 24 2020, 1:31 PM

AFAIAO those are cached too, yes. General caching documentation at Wikitech and MediaWiki.

AFAIAO those are cached too, yes. General caching documentation at Wikitech and MediaWiki.

@Volker_E only Minerva for anons and Vector for anons are cached on Wikimedia wikis so I'd only worry about caching for those 2 wikis. For 3rd parties, there will be caching implications for all skins, but that is not our concern - that should be the concern of the admin doing the upgrade. Thanks for the patches @Demian - will take a look on Monday unless Volker beats me to it. Hope this nugget of information helps!

This comment T243920#5857823 suggested to me that pages generated by non-default skins are not cached, so I've checked on enwiki: both the MainPage and a random page with any useskin param (tested: 5 skins + invalid) returns

server-timing: cache;desc="pass"
x-cache: cp3062 miss, cp3064 pass
x-cache-status: pass

or similar, so it seems memcache and diskcache ignore (pass) these requests.
The mobile site does the same.

To sum up: The Vector patch is prepared for outdated HTML, The Minerva (cached for the mobile site) patch changes nothing, the rest is not cached.

Volker_E added a comment.EditedApr 27 2020, 3:55 PM

One thing to consider would be if we should add mw-footer class to core's includes/skins/BaseTemplate.php as well on the id="footer-bottom" element…

Change 592307 merged by jenkins-bot:
[mediawiki/skins/Modern@master] Add .mw-footer CSS class & replace #footer selector with it

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

Change 592308 merged by jenkins-bot:
[mediawiki/skins/MonoBook@master] Add .mw-footer CSS class & replace #footer selector with it

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

Change 592309 merged by jenkins-bot:
[mediawiki/skins/Timeless@master] Add and use .mw-footer & .mw-footer-container CSS classes

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

Change 592310 merged by jenkins-bot:
[mediawiki/skins/MinervaNeue@master] Add .mw-footer CSS class to footer

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

Volker_E updated the task description. (Show Details)Apr 27 2020, 10:38 PM
Volker_E updated the task description. (Show Details)Apr 27 2020, 10:42 PM

Change 592311 merged by jenkins-bot:
[mediawiki/skins/Vector@master] Add .mw-footer CSS class & replace #footer selector with it

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

Change 592784 had a related patch set uploaded (by VolkerE; owner: VolkerE):
[mediawiki/core@master] Add .mw-footer CSS class

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

Volker_E updated the task description. (Show Details)Apr 28 2020, 2:55 AM

Change 592784 merged by jenkins-bot:
[mediawiki/core@master] Add .mw-footer CSS class

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

Change 592313 merged by jenkins-bot:
[mediawiki/skins/Example@master] Add .mw-footer CSS class & replace #footer selector with it

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

nray claimed this task.May 6 2020, 5:08 PM
nray closed this task as Resolved.May 6 2020, 9:53 PM

👍

nray reassigned this task from nray to Volker_E.May 6 2020, 9:53 PM
nray added a subscriber: nray.