[Regression] mediawiki.notification: Notification area remains visible when empty and steals pointer events
Closed, ResolvedPublic
Actions

Assigned To

Authored By

	Rillke
	Aug 8 2013, 7:31 PM

Description

Screenshot FF, vector skin, mediawiki,ca-action

[Regression]: mw-notification-area makes vector-hover-dropdown closing

How to reproduce:

Be an admin at Commons or have otherwise at least 3 entries in your ca-action dropdown.
Fire mw.notify('foo') in your js-console
Scroll to top
Click the message ('foo') to "hide" it
Hover the ca-action arrow.
Try to click "protect" (see screenshot)

As soon as your cursor is over the mw-notification-area (made visible in other screenshot), the dropdown closes.

Expected behaviour: Can move/protect page. Dropdown does not close out of the blue.

Version: 1.22.0
Severity: normal

Attached:

Details

Reference: bz52659

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		• Catrope	T72602 VisualEditor: Save page button is not fully clickable
		Resolved		matmarex	T54659 [Regression] mediawiki.notification: Notification area remains visible when empty and steals pointer events

Event Timeline

• bzimport raised the priority of this task from to High.Nov 22 2014, 2:01 AM

• bzimport added projects: MW-1.23.0-release, MediaWiki-JavaScript.

• bzimport set Reference to bz52659.

Rillke created this task.Aug 8 2013, 7:31 PM

Created attachment 13078
Screenshot FF, vector skin, mediawiki, mw-notify

I suppose this regression was introduced by fixing https://bugzilla.wikimedia.org/show_bug.cgi?id=50870

When I test locally (codebase about 4 weeks old), the menu/dropdown does not close unexpectedly.

Attached:

mw_notify_regression.png (550×571 px, 24 KB)

The culprit is this line:
padding: 1em 1em 0 0;
in mediawiki.notification.css. It causes .mw-notification-area to have a non-zero height and thus cover other elements, like the dropdown.

There are two obvious ways to fix it which don't work:

Change the padding to margin. This causes the notifications to "jump" slightly when scrolling, as detailed in commit message of https://gerrit.wikimedia.org/r/#/c/75614/

Add .mw-notification-area:empty { display: none; }. This doesn't work on IE<9 and other old browsers. [http://caniuse.com/#feat=css-sel3]

Unless somebody has a better idea, we should probably implement toggling 'display' in JavaScript.

Bug 55457 has been marked as a duplicate of this bug. ***

From bug 55457 comment 0:

1. Trigger a notification

2. Click on the notification to dismiss it

3. The notification area (<div id="mw-notification-area">) is now empty, but

still obscures a narrow strip in the top right corner:

> $('#mw-notification-area').outerHeight()

> $('#mw-notification-area').outerWidth()

269

> $('#mw-notification-area').position()

Object {top: 89.59375, left: 1251.203125}

> $('#mw-notification-area').css('z-index')

"10000"

This is a problem because the div steals events and mouse interaction from the

UI elements below it. For instance, in VisualEditor:

1. Open a page in VE

2. Type '

3. Click the warning to dismiss it

4. Reveal #mw-notification-area in the inspector and observe how it's on top

of part of the save button

5. Very carefully move the mouse over the save button, and you'll notice a

small (12px tall) area where mouse pointer is a normal pointer instead of a

hand. Clicking in this area does not press the save button.

So I was right that VE is *pushed* by the Wikimedia Foundation: https://bugzilla.wikimedia.org/show_activity.cgi?id=52659

(In reply to comment #5)

So I was right that VE is *pushed* by the Wikimedia Foundation:
https://bugzilla.wikimedia.org/show_activity.cgi?id=52659

I'm confused. What are you saying?

(In reply to comment #2)

Unless somebody has a better idea, we should probably implement toggling
'display' in JavaScript.

If the ca-action dropdown is the only exposed UI problem, perhaps the ca-action dropdown buttons could have a higher z-index, as a temporary fix at least?

(In reply to comment #5)

So I was right that VE is *pushed* by the Wikimedia Foundation:
https://bugzilla.wikimedia.org/show_activity.cgi?id=52659

It certainly is. While this regression outside of VisualEditor codebase is regrettable, and hopefully will be fixed soon, the VE team have pushed lots of great JS into core, and fixed bugs like bug 38081 which will benefit Wikimedia Commons.

I have bumped the importance up (but not wedded to it) as it is a regression caused by VE and affecting non-VE environments, and was reported two months ago, and the code change causing it was deployed in July.

In addition to impacting sysops with three ca-actions, it also affects non-sysops on every wiki, although not as pronounced. Non sysops only have the the 'Move' button in the ca-action dropdown of Vector, and it is partially inaccessible. If the user slowly moves their mouse cursor down into the dropdown, they can click the move icon if the click on the first few pixels above the word 'Move' - if they continue going down so that their mouse cursor hovers over the word 'Move', the drop down disappears.

jforrester: Should this really be highest priority (set in comment 7), or be kept as high (as you did in comment 4)?

jforrester: Should this really be highest priority (set in comment 7), or be
kept as high (as you did in comment 4)?

I am resetting this to high priority only as per the maintainer judgement in comment 4.

Ugh, I guess no one will do this if I don't.

Change 109124 had a related patch set uploaded by Bartosz Dziewoński:
mediawiki.notification: Hide #mw-notification-area when it's empty

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

Thanks, Bartosz.

Rephrasing bug title as it was cut-off.

Change 109124 merged by jenkins-bot:
mediawiki.notification: Hide #mw-notification-area when it's empty

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

Change 158659 had a related patch set uploaded by Catrope:
Followup 6c5b246: also hide #mw-notification-area upon creation

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

Bug 55457 has been marked as a duplicate of this bug. ***

Change 158659 merged by jenkins-bot:
mediawiki.notification: Also hide #mw-notification-area upon creation