Page MenuHomePhabricator

Replace core Message Box styles with Codex equivalents
Closed, ResolvedPublic

Description

Can we replace the existing mw.ui Message Box styles with a new "CSS-only" version of the Message component?

This task is a spin-off from T321351: [EPIC] Add CSS-only components:

The big benefit of this work would presumably be icons and buttons in the web team, but I'd like to see the CSS mixin approach applied to cdx-message before approaching this use case to confirm its viable - https://github.com/wikimedia/mediawiki/blob/master/resources/src/mediawiki.skinning/messageBoxes.less is our current legacy CSS for that (which is supposed to be synced with Codex) and the HTML is generated in https://github.com/wikimedia/mediawiki/blob/b8abc26010416ecc4b7d5576ecc50c37c3eb0519/includes/Html.php#L744
Is this something we can try first ?

Event Timeline

@Jdlrobson One of the shortcomings in your comment from my understanding is, that the core MessageBox styles are also in use by the Installer. We need to have the styles in this file. A mediawiki.UI replacement wouldn't suffice here.

Volker_E renamed this task from Replace mw-ui MessageBox styles with Codex equivalents to Replace core Message Box styles with Codex equivalents.Jan 10 2023, 1:20 AM
ldelench_wmf moved this task from Inbox to Needs Refinement on the Design-System-Team board.
ldelench_wmf subscribed.

Adjusted priority based on priority of the parent epic, T321351. Feel free to edit!

ldelench_wmf lowered the priority of this task from High to Low.Feb 13 2023, 5:27 PM

Change 893061 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/core@master] [POC] Use Codex styles on message box component

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

Jdlrobson changed the task status from Stalled to Open.Apr 27 2023, 8:48 PM

https://gerrit.wikimedia.org/r/c/mediawiki/core/+/893061 is the minimal work that allows skins to adopt Codex for rendering message boxes. The existing styles are retained (and synced with Codex). In future when we have Codex styles loaded on page load we can deprecate this stylesheet and remove it.

Change 913003 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/Wikibase@master] Test should be reslient to upstream changes

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

Change 913003 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Make test resilient to errorBox markup changes

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

Change 913240 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/Wikibase@master] Account for HTML encoding

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

Change 913242 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/TemplateData@master] Temporary disable parser test

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

Change 913240 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Account for HTML encoding

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

Change 913242 merged by jenkins-bot:

[mediawiki/extensions/TemplateData@master] Temporary disable parser test

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

Change 893061 merged by jenkins-bot:

[mediawiki/core@master] Use Codex markup on message box component

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

Jdlrobson claimed this task.

Thanks for the help with this one! Next step would be to determine how to ship the Codex styles for all skins using Codex: T340582

This, I think, broke a little bit (or, in some skins, a lot) how the blocked notices now look:

image.png (296×1 px, 39 KB)

image.png (363×1 px, 49 KB)

(in Timeless)

@Jdlrobson: notice the misalignment with the icon.

[Apparently Russian Wikipedia also had local styles to get these messages in particular to be red in colour, but Codex styles have higher specificity.]

Thanks for the ping. Looking into it.

This, I think, broke a little bit (or, in some skins, a lot) how the blocked notices now look:

Could you provide a link? I don't have permissions to view blocked people. This URL looks fine to me: https://ru.wikipedia.org/w/index.php?title=%D0%90%D0%BB%D1%8C%D0%B4%D0%B3%D0%B8%D1%81%D0%BB&action=edit&oldid=123593652&useskin=timeless

[Apparently Russian Wikipedia also had local styles to get these messages in particular to be red in colour, but Codex styles have higher specificity.]

@stjn could you point me to where these styles are? I'm not seeing any overrides.

  1. https://ru.wikipedia.org/wiki/Служебная:Вклад/Drbug
  2. https://ru.wikipedia.org/wiki/MediaWiki:Common.css#L-870 (for the record, I'm not really a big fan of overriding defaults this way)

Thanks for linking to that page, fixed another bug at https://ru.wikipedia.org/?diff=131359549

Interesting. Looks like .vector-body p is applying here when it should probably only be applying to content. I've opened T340797.

https://ru.wikipedia.org/wiki/MediaWiki:Common.css#L-870 (for the record, I'm not really a big fan of overriding defaults this way)

I'm not sure what to suggest here, but it doesn't seem like a good idea to override message box styles as it breaks consistency across projects and possibly undermines the message itself. Is there any recent discussion re-assessing these? It would be nice to understand why the overrides are felt important and whether the goals for this could be achieved by other means.

This style block is ancient (2008) and ru.wp likely inherits their version from en.wp. Other projects (Meta and MediaWiki wiki offhand) also have it. It's one of those things that honestly if we're playing around with message boxes that someone should ask a community beforehand.... You can see the immediate response to that change also at en.wp https://en.wikipedia.org/wiki/WP:VPT#Categorisation_error_due_to_error_in_user_warning_template

Anyway, at least for the block message .mw-warning-with-logexcerpt, orange is considered to be insufficient to communicate to other users on the contributions page that the person they are reviewing is blocked and/or locked.

image.png (310×1 px, 41 KB)

I think the message may also appear in the context of MediaWiki communicating to the user that they have been blocked, which would double yellow/orange as "insufficient" for me. This specific message also came up last year or the year before when you standardized message box styling, which I think you were involved in discussing the specific case.

This is also used for notifying administrators they are editing a protected page.

image.png (170×1 px, 21 KB)

But our CSS there correctly overrides the default colors. I do not understand why the contribs page is special cased with a class:not(class) class.

Separately, we use the orange suggested in the context of partial blocks, which is where the consternation above is directed -- they have no quick way to evaluate that a block is full or partial. I am fairly certain that Volker has pushed back on what color the message should be because of this context, IMO incorrectly. It is perfectly reasonable to want to distinguish between full and partial blocks, and something lesser than yellow for partial blocks would be sending the wrong message.

.mw-lag-warn-high could probably use the default without any significant loss of intent. It's not critical to anyone.

As a guess, .mw-cascadeprotectedwarning is probably red to ensure that someone editing a page without en.wp's typical lock icon gets a second dose of "you're editing a protected page dummy". That's suggested separately by the red background we have in MediaWiki:group-sysop.css though I think when editing the content? I'm not sure.

#mw-protect-cascadeon for the same reason I assume. I think in this case it's intended to be consistent with the log message, which is the red caused by -logexcerpt above.

image.png (244×1 px, 32 KB)

Users that have opined about the change in Russian Wikipedia (mostly administrators) are more or less arguing that it is easier to notice a red notice than a yellow one (including because of the intensity of both colours). I think this isn’t as big as they make it out to be and it’s a matter of habit (it’s not like there are other notices that appear in Special:Contributions), but that is basically how people are arguing for the red notice.

What is more problematic is trying to differentiate the ‘recently deleted’ notice in https://ru.wikipedia.org/w/index.php?title=Категория:User_mul&action=edit which also got impacted by this change. And also, I don’t think all of these messages should have the same icons either. We had to remove block icons based on OOjs UI because of this change, and I think new design should implement the icons itself. (Protected pages should have a lock icon, blocked notice should have a block icon, etc.)

@Izno @stjn could you create a new ticket - this sounds like something that should be considered for the main software particularly given styles are being shipped for all users. Perhaps these should be treated as different components with different styling. If two large wikis are finding this useful/essential perhaps others will... but overriding styles in such a significant way doesn't seem very sustainable to me.

Can someone explain the difference here:
https://en.wikipedia.org/w/index.php?title=Nissan_Qashqai&action=edit&safemode=1
https://ru.wikipedia.org/w/index.php?title=Nissan_Qashqai_(первое_поколение)&action=edit&safemode=1
?

I’ve tried making anoneditwarning more prominent as a follow-up to T212848: Make edit notices more visible in Visual Editor, but it features an icon in Russian Wikipedia and does not have one in English.

Meta styles apparently work fine despite much difference to them:
https://meta.wikimedia.org/wiki/Special:Contributions/Sir_James_Wilson_Vincent_Savile

And their notices do not feature an icon. Why is that different?

@stjn - it depends if codex is being loaded. If mw.loader.getState('@wikimedia/codex') === 'ready' than the icon appears, if it doesn't get loaded, it doesn't. We're trying to work out how to package these styles in T340582. For now, however really Codex shouldn't be loaded on page load - it should be loaded on a user interaction.

Looks like some kind of gadget might be loading it in for you? Do you see the icon without safe mode? https://meta.wikimedia.org/wiki/Special:Contributions/Sir_James_Wilson_Vincent_Savile?debug=true&safemode=1

if you can work out what gadget is pulling down Codex I can help get that fixed.

Do not see on Meta, do see in Russian Wikipedia with safemode (on the same URL with domain replaced). So maybe not a gadget. Might be caused by recent changes in T191156: Convert FlaggedRevisions to Codex? But also, mw.loader.getState('@wikimedia/codex') is just registered.