Page MenuHomePhabricator

Tabs on New Vector skin intentionally do not open on hover
Closed, DeclinedPublicBUG REPORT

Description

Sorry for the uninformative title and feel free to change it. What I mean here is that the New Vector skin forces to user to click on the tabs on "mw-article-toolbar-container", while it is sufficient to hover over the tabs when you have the Legacy Vector skin. The new skin was deployed on March 8th and we noticed the issue earlier today. The tabs I am referring to are the ones on the far right, such as More or User & Page if you have MoreMenu enabled or TW if you have Twinkle enabled.

Another extension of the problem has to do with Twinkle. We currently have two separate versions of Twinkle. The default version is a legacy version that has been used since 2015, and there is a second up-to-date version used only by interface admins until we finish everything. Anyway, the legacy TW used by all users does not currently work with New Vector but does work with Legacy Vector. The MoreMenu tabs work if you do click on them, which is not the case for the legacy TW tab.

Steps to Reproduce: I am afraid you have to enable the gadgets MoreMenu and/or Twinkle to be able to reproduce the issue, since you would not have anything else to be embedded under Daha Fazla (More) otherwise -- unless you have your global gadgets and/or scripts. Go to Preferences > Gadgets and enable Twinkle -- which will be the legacy Twinkle -- and Pratik menü (localized name of MoreMenu). Then open a random page and click on Sayfa (Page), Kullanıcı (User), or TW.

Actual Results: You will see that you have to click on Sayfa (Page), Kullanıcı (User), or Daha fazla (More) in order for them to appear, while TW will not react at all.

Expected Results: The tabs with dropdown content usually do not require clicking, which is what I expect to see here. I would also very much like the TW tab of the legacy Twinkle to start working again, because the new version is not ready yet. :)

Event Timeline

"New Vector skin forces to user to click on the tabs on "mw-article-toolbar-container", while it is sufficient to hover over the tabs when you have the Legacy Vector skin."
Same on bnwiki.

MusikAnimal renamed this task from New Vector skin causes issues with tabs at trwiki to New Vector skin lacks hover state on dropdown menus.Mar 15 2021, 7:58 PM

https://github.com/wikimedia/Vector/commit/41d30615a24fdfe7da156d7f4be83b6b61428c17 is the responsible commit. Hover states were apparently intentionally kept in legacy Vector and intentionally removed from the new Vector. In my opinion the hover states should not be removed. Having to click is only a minor annoyance, but an annoyance nonetheless (but that's just my opinion :)

I would also very much like the TW tab of the legacy Twinkle to start working again, because the new version is not ready yet.

This is a separate issue that should be filed as a separate bug. I'm not sure the official version of Twinkle supports new Vector yet, so you might be on your own for the time being... but feel free to raise the issue at https://github.com/wikimedia-gadgets/twinkle/issues so that this is at least tracked.

This is by design.
@alexhollender and @Volker_E provided rationale in T275681#6882448

User styles/scripts can be added to restore this where wanted but I don't think this should be the default.

Jdlrobson renamed this task from New Vector skin lacks hover state on dropdown menus to Tabs on New Vector skin intentionally do not open on hover.May 26 2021, 4:21 PM

That's right, a menu should not be triggered by hover. Only by click. It's standard in basically all interface elements we provide and that was the exception to the rule, historically grown without design oversight. Expected by one user group, surprising to confusing by another.

For anyone looking to restore this behavior, this code in your common.css file works for me:

.vector-menu-checkbox:hover ~ .vector-menu-content, .vector-menu-content:hover {
	opacity: 1;
	visibility: visible;
	height: auto;
}

Might be worth a second look at this ticket. It has come up in offwiki discussion.

Interaction with other dropdown-style menus should be considered, since many editors have Twinkle, etc. installed.

With a hover system, it takes 0 clicks to close the Twinkle menu and open the More menu. With a non-hover system, it takes 2 clicks.

image.png (937×855 px, 87 KB)

Thanks for pointing this out out @Novem_Linguae — this is actually a bug. The TW menu should automatically close when you open the Tools/More menu (or any other menu, or click anywhere else on the page). @Jdlrobson what would the best approach to fixing this be?

Not automatically closing other menus is somewhat intentional - there may be benefit in opening multiple menus at a time (in fact some gadgets automatically do this for all menus) and closing them may be unexpected, in the same way that some people get annoyed when clicking on a link opens a new window rather than the existing window. I think the click behaviour is correct here.

The hover behaviour is also a bit of an anti-pattern but there are gadgets that restore that behaviour (more information on https://www.mediawiki.org/wiki/Reading/Web/Desktop_Improvements/Features/User_menu#Why_doesn't_the_user_menu_show_on_hover?)

The overlapping of the two menus doesn't look good however, so for that I've opened T328792