userscrtipt code
```js
// ==UserScript==
// @name Github Notifications Dropdown
// @namespace joeytwiddle
// @copyright 2014-2016, Paul "Joey" Clark (http://neuralyte.org/~joey)
// @version 0.9.7
// @description When clicking the notifications icon, displays notifications in a dropdown pane, without leaving the current page. (Now also makes files in diff views collapsable.)
// @include https://github.com/*
// @require https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @grant none
// ==/UserScript==
// bug: If the notifications list is longer than the page, scroll down to the bottom and then try to click on the white space below the Github document's content. The event does not fire there!
// When using @grant none then we should also avoid messing with the page's jQuery (or lack of jQuery).
this.$ = this.jQuery = jQuery.noConflict(true);
// Contributors: joeytwiddle, SkyzohKeyx, Marti
var mainNotificationsPath = "/notifications";
var notificationButtonLink = $(".header a.notification-indicator[href]");
var notificationButtonContainer = notificationButtonLink.closest(".header-nav-item");
var closeClickTargets = $("body, .header a.notification-indicator[href]");
var notificationsDropdown = null;
var tabArrow = null;
function listenForNotificationClick(){
notificationButtonContainer.on("click", onNotificationButtonClicked);
}
function onNotificationButtonClicked(evt){
// Act normally (do nothing) if a modifier key is pressed, or if it was a right or middle click.
if (evt.ctrlKey || evt.shiftKey || evt.metaKey || evt.which !== 1) {
return;
}
evt.preventDefault();
notificationButtonContainer.off("click", onNotificationButtonClicked);
var targetPage = notificationButtonLink.attr('href');
fetchNotifications(targetPage);
}
function fetchNotifications(targetPage){
notificationButtonContainer.css({
"opacity": "0.3",
"outline": "none"
});
$.ajax({
url: targetPage,
dataType: "html"
}).then(receiveNotificationsPage.bind(null,targetPage)).fail(receiveNotificationsPage);
}
function receiveNotificationsPage(targetPage, data, textStatus, jqXHR){
notificationButtonContainer.css("opacity", "");
notificationsDropdown = $("
").addClass("notifications-dropdown");
var title = "Notifications";
var extra = null;
if (targetPage != mainNotificationsPath) {
title += " for " + targetPage.replace(/^\/+|\/notifications$/g,'');
}
var titleElem = $('
I don't know if you will add css for addons/userscripts but if yes, i'd love to see
https://openuserjs.org/scripts/joeytwiddle/Github_Notifications_Dropdown
in dark :)