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:
egardner | |
Jan 9 2023, 8:38 PM |
F37123686: image.png | |
Jun 30 2023, 5:34 AM |
F37123687: image.png | |
Jun 30 2023, 5:34 AM |
F37123683: image.png | |
Jun 30 2023, 5:33 AM |
F37123350: image.png | |
Jun 29 2023, 7:17 PM |
F37123348: image.png | |
Jun 29 2023, 7:17 PM |
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:
Status | Subtype | Assigned | Task | ||
---|---|---|---|---|---|
Resolved | None | T330468 [EPIC] Enable use of CSS-only Codex components in MediaWiki | |||
Resolved | Jdlrobson | T326587 Replace core Message Box styles with Codex equivalents | |||
Resolved | AnneT | T325105 [Epic] Add CSS-only versions of most Codex Vue components | |||
Resolved | AnneT | T325772 Add CSS-only (or non-client-side-JS) icon | |||
Duplicate | None | T325751 Redesign the Codex demo to organize the CSS-only components in a separate section | |||
Resolved | Jdlrobson | T329567 [REQUEST] Web/Design Systems technical consultation - Feb 2023 | |||
Resolved | AnneT | T329776 [REQUEST] Web team review of CSS-only Button and Icon components |
@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.
Why not? The WebInstaller uses ResourceLoader so would also benefit from the change. https://gerrit.wikimedia.org/g/mediawiki/core/+/c9fea125c78bfc017d6b549c5d6089498b0a5018/includes/installer/WebInstallerOutput.php#145
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/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
Change 913003 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Make test resilient to errorBox markup changes
Change 913240 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):
[mediawiki/extensions/Wikibase@master] Account for HTML encoding
Change 913242 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):
[mediawiki/extensions/TemplateData@master] Temporary disable parser test
Change 913240 merged by jenkins-bot:
[mediawiki/extensions/Wikibase@master] Account for HTML encoding
Change 913242 merged by jenkins-bot:
[mediawiki/extensions/TemplateData@master] Temporary disable parser test
Change 893061 merged by jenkins-bot:
[mediawiki/core@master] Use Codex markup on message box component
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:
@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.]
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.
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.
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.
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.
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.