Disable JavaScript buttons while loading
Closed, DuplicatePublic
Actions

Assigned To

Authored By

	Fomafix
	Sep 14 2015, 5:32 AM

Description

Some buttons have a JavaScript function and a non-JavaScript function as fallback when JavaScript is disabled. The non-JavaScript function loads a new page. Examples: watch, patrol. When you click on the button while the page is loading and the JavaScript click handler is not yet attached the non-JavaScript function loads a new page. This is annoying and it should prevented.

A button can disabled for clients with active JavaScript by adding the CSS definition:

.client-js #ca-watch.icon a {
	pointer-events: none;
}

The JavaScript function must reset the pointer-events value when attaching the click handler.

Details

	Subject	Repo	Branch	Lines +/-
	Gray out JavaScript buttons while loading for JavaScript clients	mediawiki/core	master	+14 -3

Customize query in gerrit

Related Objects

Mentioned Here: T183720: QuickEvents: Launch declarative event-to-module binding

Event Timeline

Fomafix created this task.Sep 14 2015, 5:32 AM

Fomafix raised the priority of this task from to Low.

Fomafix updated the task description. (Show Details)

Fomafix added a project: JavaScript.

Fomafix subscribed.

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 14 2015, 5:32 AM

@Fomafix: Which codebase project is this about? MediaWiki-General? Associating welcome.

Fomafix added a project: MediaWiki-General.Sep 14 2015, 11:17 AM

Fomafix claimed this task.Sep 14 2015, 11:28 AM

Change 238121 had a related patch set uploaded (by Gerrit Patch Uploader):
Disable JavaScript buttons while loading for JavaScript clients via CSS

https://gerrit.wikimedia.org/r/238121

gerritbot added a project: Patch-For-Review.Sep 14 2015, 11:31 AM

pointer-events: none;

only prevents pointer clicks. Hotkeys are still possible.

The problem and ways of dealing with it drew some comments on gerrit (https://gerrit.wikimedia.org/r/#/c/238121/). I wonder if those are not better discussed here, since they are less about the code and more about the problem and the design. Three topics stand out for me:

Concerns about color and conveying information about not-yet-active elements (mainly @thiemowmde and @Fomafix)
Concerns about the "right" interactivity and interactions with keyboard shortucts (mainly @thiemowmde and @Fomafix)
"The general area of js-enhanced interfaces has been problematic." by @Krinkle

For 1) It might be really helpful if you could post some screenshots here (btw.: if you copy to clipboard and press ctrl+V here, they will just appear here)
For 2), I wonder if you could summarize the concerns, so we could involve some UX designers who might be able to tell us the standards for dealing with inactivity and keyboard shortcuts currently used.

Similarly, 3), which I just paste here:

The general area of js-enhanced interfaces has been problematic. Especially if it has a nojs fallback or if we render it server-side to avoid FOUC. Ive been thinking about a generic means to deal with these event handlers. Specifically one that doesn't require waiting until document-ready. Something declarative.
In any event, small steps at a time are a welcome approach. But I fear the current patch is not universally an improvement. It needs to better deal with failure, timeout and slow/hanging connectivity.

Krinkle closed this task as a duplicate of T183720: QuickEvents: Launch declarative event-to-module binding.Apr 30 2018, 11:15 PM

Change 238121 abandoned by Krinkle:
Gray out JavaScript buttons while loading for JavaScript clients

Reason:
Closing for now per inactivity, but please contribute to T183720 about this topic.