Page MenuHomePhabricator

Clean up party of Mediawiki:Common.css at Wikimania 2019
Open, Needs TriagePublic

Description

This ticket is made to track and coordinate the work done in Wikimania 2019 to clean up Mediawiki:Common.css of wikis by using TemplateStyles to improve performance of wikis.


How to guide for interface admins:

  • Look at Mediawiki:Common.css of your wiki, check CSS rules that are only there because of very small number of templates. For example .treeview in English Wikipedia is mostly for Template:Tree_list
  • Make a sub page of the template, like [[Template:Tree_list/styles.css]], protect if needed
  • Invoke the styles in template, for example, if you need it in template, This is an example. If you want to add it to the module, here's another example.
  • Remove it from Mediawiki:Common.css

Important points to consider:

  • This goes both ways and can cause performance regressions if you move templates that are basically used in most of page views.
    • Example of things that can be moved: Styles of dmbox (disambiguation pages), tree view, quote, imbox, cmbox, etc.
    • Example of things that should not be moved: Navbox, Reflist.
  • Make sure the class is only used in the fixed templates. Some times might copy and need the styles too.
  • This only works inside the content part of page, if you have things for header of the main page for example, this won't work :(
  • You might need to do a workaround if the template is used in edit notices. (T228604#5352013)
  • It won't inject the CSS if the template is not loaded, so things like .hlist has to stay.

Shopping list:
List of wiki's that need fixing and who is claiming it. Tick the box if it's claimed and the CSS has been cleaned up.

Event Timeline

Restricted Application added subscribers: Liuxinyu970226, Aklapper. · View Herald TranscriptJul 21 2019, 7:24 PM
Ladsgroup updated the task description. (Show Details)Jul 21 2019, 7:26 PM
Tgr added a subscriber: Tgr.Jul 21 2019, 7:28 PM
Multichill updated the task description. (Show Details)Jul 21 2019, 7:31 PM
Iniquity added a subscriber: Iniquity.EditedJul 21 2019, 7:32 PM

Do not forget that to use TemplateStyles in Editnotices (messages that display while editing) you need to add <div class="mw-parser-output"> wrapper :)

Ladsgroup updated the task description. (Show Details)Jul 21 2019, 8:02 PM
Base added a subscriber: Base.Jul 21 2019, 10:48 PM
Kenrick95 added a subscriber: Kenrick95.
Ladsgroup updated the task description. (Show Details)Jul 22 2019, 10:40 AM
Restricted Application added a subscriber: revi. · View Herald TranscriptJul 22 2019, 10:40 AM
Anomie moved this task from Up next to Non-code on the TemplateStyles board.Jul 22 2019, 2:03 PM
Izno added a subscriber: Izno.Jul 22 2019, 3:11 PM

Also add the styles to a module subpage if they are invoked from a module.

Izno added a comment.Jul 22 2019, 3:16 PM

As for performance gains/losses, that doesn't seem like a good criterion.
In general, I think we should work to get as much out as possible so that
it is obvious to (re)users where our CSS lives. The difficulty is in the
styles that are widespread and not necessarily confined to one template.

Bodhisattwa updated the task description. (Show Details)
TheDJ added a subscriber: TheDJ.Thu, Jul 25, 2:47 PM

Adding my caution to @Izno's ;)
Many of these classes have wide usage OUTSIDE of the templates they are historically associated with. Please make sure you don't break things accidentally.

This goes especially for infobox, navbox, navbar, NavFrame, plainlist, hlist etc.. (and a little bit for *mbox)

Krinkle updated the task description. (Show Details)Wed, Aug 14, 8:11 AM
Ladsgroup updated the task description. (Show Details)Wed, Aug 14, 9:35 AM
Ladsgroup added a subscriber: HakanIST.

I'm interested in cleaning up itwiki, although I'm not at Wikimania. Who and, especially, where should I ask for help to avoid clogging this task?

Laurentius updated the task description. (Show Details)Wed, Aug 14, 1:11 PM
Laurentius added a subscriber: Laurentius.
Ash_Crow updated the task description. (Show Details)Wed, Aug 14, 1:13 PM
Ash_Crow added a subscriber: Ash_Crow.
KuboF updated the task description. (Show Details)Wed, Aug 14, 1:13 PM
KuboF added a subscriber: KuboF.
Ash_Crow updated the task description. (Show Details)Wed, Aug 14, 1:14 PM
Od1n added a subscriber: Od1n.Wed, Aug 14, 2:46 PM

Do not forget that to use TemplateStyles in Editnotices (messages that display while editing) you need to add <div class="mw-parser-output"> wrapper :)

Sure thing this trick works, but I don't think we should propagate such ashaming workaround…

Removed treeview CSS from nl.wikipedia.org's MediaWiki:Common.css (move, migrate, remove)

Iniquity added a comment.EditedWed, Aug 14, 11:47 PM

Just as a recommendation, maybe someone finds it useful. We have developed a specific pattern for class names, so that it is immediately clear from the page code where and for what styles are indicated. When you naming classes in template styles, use a form ts- [prefix] - to avoid conflicts when two templates have the same selectors in styles. It is recommended that the [prefix] part matches the name of the template (native language or Latin), the subpage of which is the styles you create. If the name contains non-standard characters, replace them with underscore.

For example:

Sure thing this trick works, but I don't think we should propagate such ashaming workaround…

Sometimes there is no choice :)

Od1n removed a subscriber: Od1n.Wed, Aug 14, 11:49 PM
Krinkle added a comment.EditedThu, Aug 15, 8:21 AM

where should I ask for help to avoid clogging this task?

#wmhack on Freenode IRC, or Telegram.

Ladsgroup updated the task description. (Show Details)Thu, Aug 15, 9:59 AM

Removed (most) "Top_icon_raw" CSS from nl.wikipedia.org's MediaWiki:Common.css.

Template migrations (Coordinaten2, Coordinate, Coordinaten, Coordinaten hemel, Geen coordinaten, Etalage, Coord Woordenboek), and Common.css removal (diff). The remaining bit is for Spoken Wikipedia which is blocked on T230471.

Margott updated the task description. (Show Details)Thu, Aug 15, 10:32 AM
Margott added a subscriber: Margott.

I can do the Greek part along with @geraki

Perhelion added a subscriber: Perhelion.

I can do the Greek part along with @geraki

Cool, find me!