Closed Bug 1505336 Opened 1 year ago Closed 1 year ago

Make it possible to click targets behind notifications


(Tree Management :: Treeherder: Frontend, enhancement)

Not set


(Not tracked)



(Reporter: ato, Assigned: camd)



(2 files)

Notifications in Treeherder are displayed in the top left hand
corner.  These appear for example as the result of re-triggering
jobs.  When notifications are present it is impossible to click any
links behind it, and you must wait until they disappear.

This is an annoyance and not so much a bug rather than a feature
request: Could we make it so that when you hover your mouse above
the notifications, they become slightly transparent and changes the
z-index so you can click targets behind them?
Cameron, thoughts?

Also should we move these notifications top-right of the window (did they used to be top-right?)?
Flags: needinfo?(cdawson)
IIRC, they've always been top-left.  Though my memory could be wrong.  :)

A couple things that would be easy to fix this:

1. Make the 'X' close button always present, like they are for "sticky" notifications
2. Make 'esc' clear all showing notifications
3. Make the display time shorter
4. Move them top-right

You can always look at the notification history with the "bell" dropdown on the navbar, so clearing them faster or accidentally hitting 'esc' won't really harm you.

I think I'm in favor starting with 1 and 2, myself.  Though moving them top-right is fine by me, too.  :)

What do you think, Andreas?
Flags: needinfo?(cdawson) → needinfo?(ato)
1 and 2 solves my original bug report, but I would personally favour
fewer knobs and levers which is why I proposed making it possible
to click through them.

In any case I don’t want to be nit-picking on the actual solution.
Of the options above I favour 1 since it involves fewer clicks, as
I often do many re-triggers.  One obvious concern is that it’s not
very discoverable but that might not batter.
Flags: needinfo?(ato)
I tried playing with the ``z-index`` to address this with the original idea.  But the list of notifications is an unstyled list (<ul>)  I'll admit that I'm not a z-index zen master, but when I tried to use ``:hover`` to change the z-index on the ``#notification-box``, it would flicker like crazy as you moved the mouse.  And if I did so on each ``#notification-box > li``, then it would change the z-index (and opacity) just fine, but wouldn't let you "click-though" because the z-index on the ``#notification-box`` was still too high.  I played around with several iterations, but didn't have any luck solving it this way.  Pull-requests welcome!  :)

So this solution is to just have ``esc`` clear all notifications, sticky or otherwise.

This issue brought up a few thoughts around notifications.  Things like:

1. If we have a Notification History, do we really need sticky notifications?
2. Should we shorten the visible life of the on-screen notifications?

My first thought is "no" to both, so remove sticky notifications, but leave the time on-screen the same.  But curious about other opinions.
Implementing the escape button solution seems like the lowest amount
of effort.
Assignee: nobody → cdawson
This is not yet deployed to production, but should be so very soon.  Please let me know if this is not adequate and we want to work toward a better solution.  Hoping this at least helps a bit.  :)
Closed: 1 year ago
Resolution: --- → FIXED
This is now deployed in production.
You need to log in before you can comment on or make changes to this bug.