I'm not in the A/B testing group apparently, and I can't seem to force the zebra design to show. I tried i.e. https://en.wikipedia.org/wiki/Galaxy?useskin=vector-2022&VectorZebraDesign=1 as mentioned in the Village Pump post, but everything looks the same to me and both MoreMenu and Twinkle are working fine.

I don't know if this helps, but I'm using Firefox 113.0.2 (64-bit) on Arch Linux with KDE.

@MusikAnimal I can help you reproduce this but it's definitely not looking fine :-).

I talked to @MusikAnimal (who can now replicate this) and we decided fixing this properly while the A/B test is running is too much work for little gain (A/B test concludes in 7 days). @MusikAnimal will add a hot fix to improve the styling.

We think it makes sense to prioritize T303488 and make that a blocker for the deployment of Zebra.

MoreMenu has been hotfixed. I can't do the same for Twinkle however, since I can't test the zebra design on enwiki. If someone can provide tested CSS, I can edit MediaWiki:Gadget-Twinkle.css directly. Something like this should work:

.vector-feature-zebra-design-enabled #p-twinkle .vector-menu-content-list {
    background: white;
    border: 1px solid #a2a9b1;
}
.vector-feature-zebra-design-enabled #p-twinkle .mw-list-item {
    padding: 8px;
}

I don't see zebra on enwiki or testwiki.

Is there a trick for forcing zebra in production? Something I can add to the URL?

@Novem_Linguae the only way to do this right now on English Wikipedia is to create a new account until you get it. There's nothing you can add to URL on en.wikipedia.org (only on mediawiki.org e.g. https://www.mediawiki.org/?useskin=vector-2022&VectorZebraDesign=1

@TheDJ it sounds like you might be bucketed? Could you verify @MusikAnimal 's code?
If not, @MusikAnimal I can help you get this on the beta cluster.

In T337893#8919397, @Jdlrobson wrote:

@Novem_Linguae the only way to do this right now on English Wikipedia is to create a new account until you get it. There's nothing you can add to URL on en.wikipedia.org (only on mediawiki.org e.g. https://www.mediawiki.org/?useskin=vector-2022&VectorZebraDesign=1

Thanks for the info. Maybe in the future we can make it easier to toggle A/B tests using URL parameters? Would make debugging something like this easier for developers. No need to respond, just giving an idea for next time :)

The implementation caused T338668 (I'm having fun pinging everywhere). I think it's missing a selector before .mw-list-item specific to moremenu?

In T337893#8924644, @Izno wrote:

The implementation caused T338668 (I'm having fun pinging everywhere). I think it's missing a selector before .mw-list-item specific to moremenu?

Yeah, I've just deployed a fix. While you're here, since you seem to have gotten the zebra design, would you mind testing the CSS at T337893#8916896? Open your JS console and write:

mw.util.addCSS(".vector-feature-zebra-design-enabled #p-twinkle .vector-menu-content-list {
    background: white;
    border: 1px solid #a2a9b1;
}
.vector-feature-zebra-design-enabled #p-twinkle .mw-list-item {
    padding: 8px;
}");

If Twinkle looks okay on your end, I will add that to Twinkle's CSS (as a hotfix -- It may not need to be upstreamed in git as we'll have a longer-term solution soon with T303488).

I think it might be a good idea to put all Twinkle hotfixes into git, so that things don't get out of sync. We can always add a better patch to git later.

If we don't add the hotfix to git, would that cause us not to be able to use the deploy script without overwriting the hotfix? That wouldn't be a good scenario. That would hold up other patches, I think.

I can take a look, yes. Ping me if I haven't by tonight.

In T337893#8924659, @MusikAnimal wrote:

would you mind testing the CSS at T337893#8916896?

Console complains at me

Uncaught SyntaxError: "" string literal contains an unescaped line break

But works with removed newlines.

@MusikAnimal We can reproduce the Twinkle issue on mediawiki.org by running:

mw.loader.load("https://en.wikipedia.org/w/load.php?modules=ext.gadget.morebits,Twinkle-pagestyles,Twinkle")

Yes, your CSS fix looks good to me.

In T337893#8924661, @Novem_Linguae wrote:

I think it might be a good idea to put all Twinkle hotfixes into git, so that things don't get out of sync. We can always add a better patch to git later.

If we don't add the hotfix to git, would that cause us not to be able to use the deploy script without overwriting the hotfix? That wouldn't be a good scenario. That would hold up other patches, I think.

We can always sync git with the hotfixed on-wiki version afterwards.

I came here via Twinkle Talk with a version of this bug, but it's not identical to the OP. My Page menu is clear, but the TW menu is naked like in the above screenshot (I have underscores too).

ETA: I applied the JS fix above (with removed newlines) and the TW menu looks good. By "your JS console" I assume you mean "Developer Tools/Console" in Edge.

Hotfix applied! Thanks to all for the help with testing. I'll leave upstreaming the hotfix to the Twinkle maintainers.

I guess we can resolve this for now? T303488 is the follow-up with a permanent solution.

I'm getting a similar new problem today on group0 wikis (although not Zebra related).
I.e. MoreMenu is auto-opening all submenus, but with a gap instead of overlaid, and with HTML Checkboxes (that don't do anything when selected).
Note: I wasn't sure whether to mention here or create a new task.

In T337893#8989241, @Quiddity wrote:

Note: I wasn't sure whether to mention here or create a new task.

MA left a comment on T319358 earlier.

I don't know whether to add this here, to T319358, or start another issue, but here goes:

This morning (7/5/23) on English WP, when I hover over Page or TW menus, they disappear as expected when I move away. But if I click on either, they stick on the page even if I click away, page down, whatever. I have to F5 the page (or of course load a different one) to make the menus disappear.

I don't know how much a screenshot could add to the above, but here it is.

In T337893#8989241, @Quiddity wrote:

I'm getting a similar new problem today on group0 wikis (although not Zebra related).
I.e. MoreMenu is auto-opening all submenus, but with a gap instead of overlaid, and with HTML Checkboxes (that don't do anything when selected).
Note: I wasn't sure whether to mention here or create a new task.

This should be fixed now.

My "can't click away" problem is still there, though. On a User page it's even more dramatic: it doesn't matter in which order I click these, the Page menu is inaccessible (F5 again is the cure). And User and Page don't drop down on a hover, so clicking them is the only way to access.

When I click on the thin strip of the Page menu here, its submenus still peek out from behind the TW menu.

The comments described from T337893#8989241 onwards are unrelated to this ticket. Please keep any related discussion on T319358 to avoid adding further confusion.