| matmarex | |
| Jun 14 2023, 2:30 AM |
| F41459285: image.png | |
| Nov 6 2023, 6:08 PM |
| F41459283: image.png | |
| Nov 6 2023, 6:08 PM |
| F37102959: image.png | |
| Jun 14 2023, 2:30 AM |
| F37102955: image.png | |
| Jun 14 2023, 2:30 AM |
VE surface widgets have too much padding on Vector Zebra.
To reproduce:
Testing on https://en.wikipedia.org/w/index.php?title=The_Fighting_Temeraire&veaction=edit:
This is caused by the vector-body class on the widget. However, we can't remove it, as that would cause a regression of T287733 in Vector non-Zebra and Vector legacy.
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | ovasileva | T333180 [EPIC] A/B test Zebra #9 prototype | |||
| Resolved | jwang | T335379 Analyze page separation (Zebra #9) A/B test | |||
| Open | BUG REPORT | None | T342937 [minor] Main menu displays "In other languages" widget link | ||
| Declined | ovasileva | T341275 Deploy Zebra as default | |||
| Resolved | matmarex | T339058 Zebra: VE surface widgets have too much padding on Vector Zebra |
A quick fix would be to swap out .vector-body with #bodyContent in our Zebra styles.
The larger cause is due to a specificity increase in the styles associated with .vector-body due to the use of the .vector-feature-zebra-design-enabled class in the selector. Another possible contributing factor is that Web engineers were not aware of, or considerate of the fact that .vector-body is used a lot in alot of other places where you want a "content-like" styling, i.e. many places in VE
We only did that because it was directly requested by the Web team (T287733#7325676). We'd prefer to keep VE code independent of the skin, so if there's some other way to achieve the correct styling, that would be perfect.
I did warn in T287733#7437622 that "In this case 'vector-body' is an unstable element unique to Vector, that can change at any time."
Perhaps it's now time to think of a more stable JavaScript API to replace the CSS inside VisualEditor. If we had an mw.util function that guaranteed the right HTML across skins what might that look like?
I thought that the mw-body-content class standardized in 7cda5b0bf8eea3059c205b833af2dcace2398875 was supposed to be a stable API. VE already uses it for all other skins, so it would be ideal if it could be relied on for Vector as well.
mw-body-content is a standardized class, yes. So yes, it would be better if VisualEditor relied on that instead of .vector-body. My understanding is last time we tried that though and there were issues (T287733#7494444) but I'm not sure exactly what they were...
Note this quarter, web team will be changing the default font-size so it does seem worth doing this change now.
The problem was that typography rules such as font-size were applied to both .mw-body-content and .vector-body, and because they use relative units like em, the effect was cumulative. For a simplified example, if you define .mw-body-content, .vector-body { font-size: 0.5em; }, and write HTML like <div class="vector-body"><div class="mw-body-content">TEXT</div></div>, the effective font size will be 0.5em * 0.5em = 0.25em.
A few things have changed since we last spoke here. Given the work in T347199 we now have a standardized element for overlays. Could OOUI append its surface widgets to this element going forward?
require( 'mediawiki.page.ready' ) ).teleportTarget;
Could OOUI append its surface widgets to this element going forward?
Yep, I tried it, and it makes the surface widgets in dialogs behave reasonably even without adding vector-body to them! I'm surprised that the necessary styles were provided for the new teleport target, but not for the OOUI overlays – it seems like it would have worked just fine there, too… But anyway, moving the OOUI overlays inside the new teleport target seems like a good thing long-term, to reduce the maintenance needs and to achieve consistent styling between the old and new libraries. I'll file some tasks about it.
Change 970452 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):
[mediawiki/extensions/VisualEditor@master] Attach content to teleport target instead of <body>, remove Vector hacks
Change 970452 merged by jenkins-bot:
[mediawiki/extensions/VisualEditor@master] Attach content to teleport target instead of <body>, remove Vector hacks
I think this is not possible to test anywhere in production or beta now, so I'm suggesting skipping QA, but I tested locally with the current version of the redesign (which has changed a lot, the backgrounds and borders are gone) using $wgVectorZebraDesign = true;, and I don't see the problem any more:
| Non-Zebra | Zebra |
|---|---|
 |  |
thank you for following up on this @matmarex! and yes, the Zebra has lost its stripes.
We decided not to roll out the design changes after the AB test results came back, but the Zebra module is still a considerable CSS refactor under the hood. We'll be rolling out this refactor to some wikis soon, and it'll eventually be merged into the default style module, so it's good this problem is no longer an issue.