Page MenuHomePhabricator

mediawiki.notification: Notification area should remain visible when scrolled down
Closed, ResolvedPublic

Description

Original bug title:
mediawiki.notification should show the notification bubble relative to the screen, not to the document

Current behaviour:
Calling mw.notify("abc") in JavaScript creates a message-bubble somewhere below the first <h1> heading (the title) and the bubble disappears after about 5s.

Why this is an issue:
But if you have scrolled-down the page, the notification disappears without being read.

Where is this an issue:
For example, when marking large new pages as patrolled, the patrol link is at the bottom of the page and the message whether patrolling succeeded is not visible to the user. Or at custom gadgets/user scripts.

Expected behaviour:
Bubble shown, no matter of the current scroll position.

Possible implementation:
Fixed position.


Version: 1.22.0
Severity: enhancement

Details

Reference
bz50870

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 22 2014, 1:52 AM
bzimport set Reference to bz50870.

Change 72322 had a related patch set uploaded by Matmarex:
mediawiki.notification: Show the notifications relative to the screen

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

Heh, I though they behave in this way. Seems like an obvious enhancement.

Argh, I forgot that position:fixed is always relative to the entire document, >not to any positioned ancestor.

This is only true if you set top,left,right or bottom, AFAIK. Look at [[:commons:Special:Permalink/99667607]] (the grey DIV 2 inner is fixed)

See also http://stackoverflow.com/questions/8712047/positionfixed-when-left-top-right-bottom-arent-specified-desired-results-in

If one still wants to use something fancier (and one will have to for safari, unfortunately), one may use jQuery:
offset ( http://api.jquery.com/offset/ ) -- "Get the current coordinates of the first element in the set of matched elements, relative to the document."
This way one can get the position of mw.util.$content and add 1em. Here is an example implementation (one has to execute the positioning code every time the message is shown or one has to catch window.resize events).

var $content = mw.util.$content,

$container = $('<div>').appendTo($content)
$n = $('<div>').text('Message here').css({
 'float': 'right', // Set this in CSS so Janus can flip!
 'margin':  '1em'
}).appendTo($container),
o = $content.offset();

$container.css({

position: 'fixed',
width: $content.width()

}).offset(o);

Feel free to improve (padding of mw.util.$content is not respected) and note that styles are also touched in skin files like skins/vector/screen.css ( https://git.wikimedia.org/blob/mediawiki%2Fcore.git/9cbd77868a92022170348504fb5444e4e1f302fa/skins%2Fvector%2Fscreen.css#L807 )

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

Change 73948 had a related patch set uploaded by Helder.wiki:
Use fixed position for notifications

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

Change 73948 abandoned by Krinkle:
Use fixed position for notifications

Reason:
Dupe of Icb7cd68f484 (which has existed longer)

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

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

Change 72322 merged by jenkins-bot:
mediawiki.notification: Make notification area sticky to window

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

Fixed in the above patch, which we will deploy tomorrow as a cherry-pick given the need to fix this urgently for VisualEditor.

Change 75611 had a related patch set uploaded by Catrope:
mediawiki.notification: Make notification area sticky to window

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

Change 75614 had a related patch set uploaded by Catrope:
mediawiki.notification: Make notification area sticky to window

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

Change 75611 merged by Catrope:
mediawiki.notification: Make notification area sticky to window

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

Change 75614 merged by Catrope:
mediawiki.notification: Make notification area sticky to window

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

above change deployed recently doesn't work for me; breaks UI:

  • notification doesn't scroll with
  • blocks user bar and other tabs in the top right corner
  • css style changed

experienced in firefox 22 as well in chrome

@Se4598, thanks for the report, I7444bf55 should fix this. Sorry!

Change 75662 had a related patch set uploaded by Matmarex:
mw.notification: Fix incorrect initial offset

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

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