Page MenuHomePhabricator

MediaWiki has "content" styles applying only inside .mw-body, making them not reusable
Closed, ResolvedPublic1 Estimated Story Points

Description

MediaWiki has some "content" styles that only apply inside .mw-body. However, skins often have layout styles on .mw-body (e.g. Vector), making it impossible to just add class="mw-body" anywhere (e.g. Vector adds margin-left and a blue border).

These need to be changed to either apply everywhere, if that's okay (essentially, replacing .mw-body foo with just foo), or changed to apply to a more narrow selector that can be added in random places (e.g. .mw-body-content).

Vector's styles for external links, headings, table of contents, etc. suffer from the same problem.

What this means in practice: if you want to have a heading styled like normal headings in Vector, or an external link styled with the usual icons, and your content is not inside <div class="mw-body"> (e.g. it's inside a OOjs UI dialog), you can't.

Previous attempts at resolving this (abandoned): https://gerrit.wikimedia.org/r/#/c/158803/ https://gerrit.wikimedia.org/r/#/c/158854/

mediawiki/core
resources/src/mediawiki.legacy/commonPrint.css:
  106: .mw-body {
  119: #column-content .mw-body {
  172: .mw-body a.external.text:after,
  173: .mw-body a.external.autonumber:after {
  180: .mw-body a.external.text[href^='//']:after,
  181: .mw-body a.external.autonumber[href^='//']:after {

resources/src/mediawiki.legacy/oldshared.css:
  466: html > body.rtl .mw-body ul#filetoc {

resources/src/mediawiki.skinning/content.externallinks.css:
   12: .mw-body a.external,
   22: .mw-body a.external[href^="mailto:"],
   30: .mw-body a.external[href^="ftp://"],
   38: .mw-body a.external[href^="irc://"],
   39: .mw-body a.external[href^="ircs://"],
   47: .mw-body a.external[href$=".ogg"], .mw-body a.external[href$=".OGG"],
   48: .mw-body a.external[href$=".mid"], .mw-body a.external[href$=".MID"],
   49: .mw-body a.external[href$=".midi"], .mw-body a.external[href$=".MIDI"],
   50: .mw-body a.external[href$=".mp3"], .mw-body a.external[href$=".MP3"],
   51: .mw-body a.external[href$=".wav"], .mw-body a.external[href$=".WAV"],
   52: .mw-body a.external[href$=".wma"], .mw-body a.external[href$=".WMA"],
   60: .mw-body a.external[href$=".ogm"], .mw-body a.external[href$=".OGM"],
   61: .mw-body a.external[href$=".avi"], .mw-body a.external[href$=".AVI"],
   62: .mw-body a.external[href$=".mpeg"], .mw-body a.external[href$=".MPEG"],
   63: .mw-body a.external[href$=".mpg"], .mw-body a.external[href$=".MPG"],
   71: .mw-body a.external[href$=".pdf"], .mw-body a.external[href$=".PDF"],
   72: .mw-body a.external[href*=".pdf#"], .mw-body a.external[href*=".PDF#"],
   73: .mw-body a.external[href*=".pdf?"], .mw-body a.external[href*=".PDF?"],
   82: .mw-body a.extiw,
   83: .mw-body a.extiw:active {
   88: .mw-body a.external {

resources/src/mediawiki.skinning/elements.css:
   53: .mw-body a.extiw,
   54: .mw-body a.extiw:active {
   58: .mw-body a.extiw:visited {
   62: .mw-body a.extiw:active {
   67: .mw-body a.external {
   71: .mw-body a.external:visited {
   75: .mw-body a.external:active {
   79: .mw-body a.external.free {

resources/src/mediawiki.special/mediawiki.special.search.styles.css:
   20: /* needs extra specificity to override `.mw-body p` selector */
   21: .mw-body .mw-search-nonefound {
mediawiki/skins/Vector
screen-hd.less:
    5: .mw-body {

components/common.less:
   30: .mw-body {

components/externalLinks.less:
    3: .mw-body {

Event Timeline

Change 341073 had a related patch set uploaded (by esanders):
[mediawiki/core] Change mw-body ancestor selector to mw-body-content

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

Not sure why @Krinkle decided to abandon the second patch. The only remaining issue was add mw-body-content to siteNotice. If there other content-containing elements that can sneak in between mw-body and mw-body-content we can fix those when they come up, but any regression would be fairly minor as this mostly just affects external link styling.

Change 341095 had a related patch set uploaded (by esanders):
[mediawiki/skins/MonoBook] Add mw-body-content to siteNotice

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

Change 341060 had a related patch set uploaded (by esanders):
[mediawiki/skins/Vector] Change mw-body ancestor selector to mw-body-content and add to siteNotice

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

Change 341196 had a related patch set uploaded (by esanders):
[mediawiki/core] Add mw-body-content to indicators

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

Change 341196 merged by jenkins-bot:
[mediawiki/core] Add mw-body-content to indicators

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

Change 341095 merged by jenkins-bot:
[mediawiki/skins/MonoBook] Add mw-body-content to siteNotice

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

Change 341060 merged by jenkins-bot:
[mediawiki/skins/Vector] Change mw-body ancestor selector to mw-body-content and add to siteNotice

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

Change 341203 had a related patch set uploaded (by matmarex; owner: esanders):
[mediawiki/skins/Vector] Move heading, paragraph and editsection styles into mw-body-content

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

Change 341203 merged by jenkins-bot:
[mediawiki/skins/Vector] Move heading, paragraph and editsection styles into mw-body-content

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

Change 341073 merged by jenkins-bot:
[mediawiki/core] Change mw-body ancestor selector to mw-body-content

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

matmarex assigned this task to Esanders.
matmarex removed a project: Patch-For-Review.
Jdforrester-WMF added a project: VisualEditor.
Jdforrester-WMF set the point value for this task to 1.

There are some uses of .mw-body onwiki, in MediaWiki:Common.css

For example on enwiki,

.mw-body sub,
.mw-body sup,
span.reference /* for Parsoid */ {
    font-size: 80%;
}

Should those be migrated as well?

This comment was removed by ssastry.

There are some uses of .mw-body onwiki, in MediaWiki:Common.css

Should those be migrated as well?

Yes, content will always be wrapped in mw-body-content, but not necessarily in mw-body e.g. in global overlays.