Page MenuHomePhabricator

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

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

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 2:01 AM
bzimport set Reference to bz52659.
Rillke created this task.Aug 8 2013, 7:31 PM
Rillke added a comment.Aug 8 2013, 7:45 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:

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:

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()
12
> $('#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.
Rillke added a comment.Oct 8 2013, 6:31 PM

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

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

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