Page MenuHomePhabricator

Top bar (#header-wrapper) menus in Refreshed should be usable without JavaScript
Closed, ResolvedPublic


So some things require JavaScript. That's okay. Basic navigation in our default skin should, however, not be one of those things. Not only is the wiki network menu (#site-info) and the wiki-specific content navigation unusable, but more importantly, the login/sign up links are not easily accessible. Obviously we can't dump everything into MediaWiki:Sidebar either.

@Isarra Do you have some good ideas on how to implement this? GreyStuff and Timeless both seem to work just fine without JS, as they should.

Event Timeline

Basically you need this:

.page-item-has-children:hover .header-menu {
	visibility: visible;

	&.faded {
		opacity: 1;

And then do something to make that not happen when js is enabled (probably just wrap it in the client-nojs class).

Change 287998 had a related patch set uploaded (by Jack Phoenix):
Top bar (#header-wrapper) menus should be usable without JavaScript

.client-nojs #user-info:hover .header-menu,
.client-nojs .page-item-has-children:hover .header-menu {
	visibility: visible;
.client-nojs #user-info:hover .header-menu.faded,
.client-nojs .page-item-has-children:hover .header-menu.faded {
	opacity: 1;

Add a thing for the user menu and without less, I guess this?

MacFan4000 set Security to Software security bug.May 11 2016, 12:16 AM
MacFan4000 added a project: acl*security.
MacFan4000 changed the visibility from "Public (No Login Required)" to "Custom Policy".
MacFan4000 subscribed.

@LegoFan4000 why did you mark this security?

Because volker kept removing a project that did not need to be removed.

How does that make it security-sensitive?

Anomie changed the visibility from "Custom Policy" to "Public (No Login Required)".
Anomie changed Security from Software security bug to None.
Anomie subscribed.

It doesn't. @LegoFan4000, don't misuse the security bug feature.

Hi @LegoFan4000 thanks for your contribution. The Accessibility tag collects the tasks that have impact on people with disabilites. Non-JavaScript support does not fall under this category. Please support developers by letting them focus on their field of expertise.

MacFan4000 changed the task status from Open to Stalled.Jul 11 2016, 4:54 PM
MacFan4000 triaged this task as Medium priority.

The proposed CSS from earlier would trigger the dropdowns on hover, as opposed to on click.

Here are two alternatives that trigger on click:


@SamanthaNguyen @ashley Personally I wouldn't mind it if the dropdowns opened on hover, would you? Of course this would cause issues on mobile. How should we go forward?

Hover actuation of the dropdown menus wouldn't be bad on mobile especially with smooth transitions. I actually tried this a long time ago but the primary reason we never implemented it that way was because of mobile support. However since Refreshed 3.x the way mobile menus are handled was meant to be improved so perhaps this idea is worth revisiting.

Yeah imo that'd be a good thing to look into. Maybe if we implement hover dropdowns we could use the checkbox hack as well to cover our bases for mobile?

@SamanthaNguyen @ashley Personally I wouldn't mind it if the dropdowns opened on hover, would you? Of course this would cause issues on mobile. How should we go forward?

Nope, I wouldn't mind it. That being said, of course we don't want to break the mobile view, given that mobile is a significant portion of the user base these days (some sites even have more mobile users than "desktop" users!).

As always, patches are welcome. :-) My proposed patch (which doesn't apply cleanly anymore) fixes parts of this bug but since it didn't fix the issue fully, it wasn't merged. If we can get this issue fixed by refactoring the menus, all the better!

Dropdowns and the mobile sidebar work without JS in the refreshed4-beta branch, so closing.

Change 287998 abandoned by Jack Phoenix:
Top bar (#header-wrapper) menus should be usable without JavaScript

This doesn't appear to be needed since 62f0088a51d531a257efa4912f68b11a4a102b6e either, yay!