Page MenuHomePhabricator

Update site specific js/css for new media structure
Closed, ResolvedPublic

Description

Some sites set site-specific JS/CSS in MediaWiki:Common.js / MediaWiki:Common.css which will need updates when output is changed.

Ex: https://ar.wikipedia.org/wiki/%D9%85%D9%8A%D8%AF%D9%8A%D8%A7%D9%88%D9%8A%D9%83%D9%8A:Common.css

Also see https://github.com/wikimedia/integration-visualdiff/blob/master/lib/parsoid.custom_styles.yaml for some mods around this.

This may need some upfront communication to update before rolling out on those wikis with custom mods.


Notifications were made with,
https://guc.toolforge.org/?by=date&user=Arlolra

Edits, where necessary, were made with,
https://guc.toolforge.org/?by=date&user=ABreault+%28WMF%29


From T271114#8350994,

A common styling that wikis have is a minimum width for a thumb.

/* Minimum thumb width */
.thumbinner {
	min-width: 100px;
}

A suggested edit to preserve that looks like,
https://it.wikipedia.org/w/index.php?title=MediaWiki%3ACommon.css&type=revision&diff=130152006&oldid=127986303

Though that doesn't exactly account for padding, as in the following, if you wanted pixel diff matching,
https://github.com/wikimedia/integration-visualdiff/blob/a65bef82fd9247d58b11a2e28eae7636ee32c67d/lib/parsoid.custom_styles.yaml#L475-L484

Two queries to surface wikis that would need updating are:

  • P38161 - mwgrep --title "Common.css" "Minimum thumb width"
  • P38162 - More generally, mwgrep --title "Common.css" "thumbinner"
  • Talk page notifications sent

From T271114#8351603,

A common template that wikis have implemented is for a series of images. The images are selected to be stepped through based on a class which is no longer emitted,

var $images = $( imageGroupUnits ).children( '.center' );

A suggested edit to preserve the functionality is,
https://it.wikipedia.org/w/index.php?title=MediaWiki%3ACommon.js&type=revision&diff=130157033&oldid=127743689

Similarly, a bit more work may be needed,
https://ca.wikipedia.org/w/index.php?title=MediaWiki%3ACommon.js&diff=31055727&oldid=24309161
https://ca.wikipedia.org/wiki/Especial:ComparePages?page1=MediaWiki%3ACommon.js&rev1=31055727&page2=Usuari%3AArlolra%2Fsandbox%2FMediaWiki%3ACommon.js&rev2=31058458&action=&unhide=

A query to surface wikis that would need updating is:

  • P38163 - mwgrep --title "Common.js" "ImageGroup"
  • Talk page notifications sent

From T271114#8541803,

A common styling that wikis have to make the background of a framed image white instead of gray,

div.thumb .thumbimage {
    background-color: #fff;
}

// or

div.thumb div a img {
    background-color:#f8f9fa;
}

A query to surface wikis that would need updating is:

  • P43436 - mwgrep --title "Common.css" "Only visible with transparent images"
  • Talk page notifications sent
    • The default styling shipped with MediaWiki has this in the media feature already, from T154077. It looks like cleanup happened on enwiki but it was left around on other wikis that may have copied it beforehand. The notifications should be to remove it as unnecessary.

Event Timeline

Arlolra triaged this task as Medium priority.
Arlolra moved this task from Needs Triage to Media Structure on the Parsoid board.

From @ssastry on irc,

one other thought i forgot to share this morning .. so, you could perhaps write a script to wget/curl Common.js & Common.css from all production wikis and grep for media selectors to at least catalog which wikis might be impacted by your changes .. so it is easier to get a sense of what will be impacted.

On IRC, @Legoktm said you can use mwgrep or https://global-search.toolforge.org/ that is supposed to do the same thing but from a web interface.

Looking at some of the early adopter wikis from T314318, these rules may need adjusting:

enwikivoyage - https://en.wikivoyage.org/wiki/MediaWiki:Common.css

.mw-kartographer-container.thumb:not(.mw-kartographer-full) .thumbinner > .mw-kartographer-map {

viwiki - https://vi.wikipedia.org/wiki/MediaWiki:Common.css

/* Nền album hình ảnh màu xám nhạt */
#content .gallerybox div.thumb {
    background-color: #F9F9F9;
}

/* Nền "bàn cờ" đằng sau những hình có vùng trong suốt vào các trang miêu tả hình */
.gallerybox .thumb img,
.filehistory a img,
#file img {
    background: #fff url(//upload.wikimedia.org/wikipedia/commons/5/5d/Checker-16x16.png) repeat;
    background-size: 16px auto;
}

/* Trừ trong bài viết, trang cá nhân, chủ đề, và các trang ngoại lệ */
.ns-0 .gallerybox .thumb img,
.ns-2 .gallerybox .thumb img,
.ns-100 .gallerybox .thumb img, 
.nochecker .gallerybox .thumb img {
    background: white;
}

itwiki - https://it.wikipedia.org/wiki/MediaWiki:Common.css

/* Larghezza minima thumb [[Special:diff/44094478]] */
.thumbinner {
	min-width: 100px;
}

itwiki - https://it.wikipedia.org/wiki/MediaWiki:Common.js

function updateImageGroup( currImg, $images, $countInfo, $prevLink, $nextLink ) {
	...
}

function initImageGroup() {
	...
}

.mw-kartographer-container.thumb:not(.mw-kartographer-full) .thumbinner > .mw-kartographer-map {

In T272186, we looked at extensions that needed updating for the new structure, but Kartographer wasn't one of them. It looks like it's doing something similar to what some templates do (see T297447#8242965) and tries to mimic the legacy media structure that the parser outputs, to reuse the styling,
https://github.com/wikimedia/mediawiki-extensions-Kartographer/blob/master/includes/Tag/MapFrame.php#L191
https://github.com/wikimedia/mediawiki-extensions-Kartographer/blob/master/styles/kartographer.less#L117-L158

That should continue to work, since we aren't yet removing those styles, but should eventually maybe be migrated the new styles and structure.

In T271114#8241081,

viwiki - https://vi.wikipedia.org/wiki/MediaWiki:Common.css

/* Nền album hình ảnh màu xám nhạt */
#content .gallerybox div.thumb {
background-color: #F9F9F9;
}
...

That doesn't need updating since the gallery output is still the same wrt the classes .gallerybox div.thumb. Those changes would be part of T268250

In T271114#8241081,

itwiki - https://it.wikipedia.org/wiki/MediaWiki:Common.js

function updateImageGroup( currImg, $images, $countInfo, $prevLink, $nextLink ) {
...
}

function initImageGroup() {
...
}

Seem related to it:Template:Galleria, which is used on at least 450 pages (going by what links here). The line var $images = $( imageGroupUnits ).children( '.center' ); is probably broken, in that Parsoid doesn't set that class but mw-halign-center instead.

Arlolra renamed this task from Update site specific css for new media structure to Update site specific js/css for new media structure.Oct 27 2022, 7:28 PM
Arlolra updated the task description. (Show Details)

Seem related to it:Template:Galleria, which is used on at least 450 pages (going by what links here). The line var $images = $( imageGroupUnits ).children( '.center' ); is probably broken, in that Parsoid doesn't set that class but mw-halign-center instead.

I've requested a change,
https://it.wikipedia.org/wiki/Discussioni_MediaWiki:Common.js#Prepare_for_T314318
https://it.wikipedia.org/wiki/Speciale:ComparaPagine?page1=MediaWiki%3ACommon.js&rev1=&page2=Utente%3AArlolra%2Fsandbox%2FMediaWiki%3ACommon.js&rev2=&action=&unhide=

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

[mediawiki/core@master] Align magnify clip when img is less than min-width

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

Change 885879 merged by jenkins-bot:

[mediawiki/core@master] Align magnify clip when img is less than min-width

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

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

[mediawiki/skins/Timeless@master] Align magnify clip when img is less than min-width

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

Change 886113 merged by jenkins-bot:

[mediawiki/skins/Timeless@master] Align magnify clip when img is less than min-width

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

Arlolra updated the task description. (Show Details)