Merge "Adding dismiss functionality to special page"

Echo.i18n.php

@@ -14,21 +14,32 @@ $messages['en'] = array(
 	// Preferences
 	'prefs-echo' => 'Notifications',
 	'prefs-displaynotifications' => 'Display options',
-	'prefs-emailsubscriptions' => 'Notify me by e-mail when someone',
 	'prefs-emailfrequency' => 'When would you like to receive e-mail notifications?',
-	'echo-pref-email-edit-user-talk' => 'Posts on my talk page',
+	'prefs-echosubscriptions' => 'Notify me when someone…',
-	'echo-pref-email-article-linked' => 'Creates a link to a page I created',
+	'echo-pref-web' => 'Web',
-	'echo-pref-email-reverted' => 'Reverts my edit',
+	'echo-pref-email' => 'Email',
+	'echo-pref-subscription-edit-user-talk' => 'Posts on my talk page',
+	'echo-pref-subscription-article-linked' => 'Creates a link to a page I created',
+	'echo-pref-subscription-reverted' => 'Reverts my edit',
 	'echo-pref-email-frequency-never' => 'Do not send me any e-mail notifications',
 	'echo-pref-email-frequency-immediately' => 'Individual notifications as they come in',
 	'echo-pref-email-frequency-daily' => 'A daily summary of notifications',
 	'echo-pref-email-frequency-weekly' => 'A weekly summary of notifications',
 	'echo-pref-notify-hide-link' => 'Hide the link and badge for notifications in my toolbar',
 
+	// Dismiss interface
+	'echo-dismiss-button' => 'Dismiss',
+	'echo-dismiss-message' => 'Turn off all <b>$1</b> notifications',
+	'echo-dismiss-title-edit-user-talk' => 'Talk Page Post',
+	'echo-dismiss-title-article-linked' => 'Article Linked',
+	'echo-dismiss-title-reverted' => 'Edit Reverted',
+
 	// Errors
 	'echo-no-agent' => '[Nobody]',
 	'echo-no-title' => '[No page]',
 	'echo-error-no-formatter' => 'No formatting defined for notification',
+	'echo-error-preference' => '<b>Error:</b> Could not set $1.',
+	'echo-error-token' => "<b>Error</b> '''Error''' {{SITENAME}} $1.",
 
 	// Special:Notifications
 	'notifications' => 'Notifications',
@@ -150,22 +161,20 @@ $messages['qqq'] = array(
 	'prefs-echo' => 'Name of preferences section for Echo notifications.
 {{Identical|Notification}}',
 	'prefs-displaynotifications' => 'Header for the section of preferences that deals with how notifications are displayed',
-	'prefs-emailsubscriptions' => 'Header for the section of preferences that deals with which notifications the user receives emails for
+	'prefs-echosubscriptions' => 'Header for the section of preferences that deals with which notifications the user receives
-* {{msg-mw|Echo-pref-email-edit-user-talk}}
+* {{msg-mw|Echo-pref-subscription-edit-user-talk}}
-* {{msg-mw|Echo-pref-email-article-linked}}
+* {{msg-mw|Echo-pref-subscription-article-linked}}
-* {{msg-mw|Echo-pref-email-reverted}}
+* {{msg-mw|Echo-pref-subscription-reverted}}',
-"Page Triage" messages:
+	'echo-pref-web' => 'Label for list of notifications which are delivered on the web. In other words, on the wiki itself rather by email or another method.',
-* {{msg-mw|Echo-pref-email-pagetriage-mark-as-reviewed}}
+	'echo-pref-email' => 'Label for list of notifications which are delivered via email.',
-* {{msg-mw|Echo-pref-email-pagetriage-add-maintenance-tag}}
-* {{msg-mw|Echo-pref-email-pagetriage-add-deletion-tag}}',
 	'prefs-emailfrequency' => 'Header for the section of preferences that deals with how often notification emails are sent out
 * {{msg-mw|Echo-pref-email-frequency-never}}
 * {{msg-mw|Echo-pref-email-frequency-immediately}}
 * {{msg-mw|Echo-pref-email-frequency-daily}}
 * {{msg-mw|Echo-pref-email-frequency-weekly}}',
-	'echo-pref-email-edit-user-talk' => "Option for getting emails when someone posts on the user's talk page. This is the conclusion of the sentence begun by the header: {{msg-mw|prefs-emailsubscriptions}}.",
+	'echo-pref-subscription-edit-user-talk' => "Option for getting notifications when someone posts on the user's talk page. This is the conclusion of the sentence begun by the header: {{msg-mw|prefs-echosubscriptions}}.",
-	'echo-pref-email-article-linked' => 'Option for getting emails when someone creates a link to a page created by the user. This is the conclusion of the sentence begun by the header: {{msg-mw|prefs-emailsubscriptions}}.',
+	'echo-pref-subscription-article-linked' => 'Option for getting notifications when someone creates a link to a page created by the user. This is the conclusion of the sentence begun by the header: {{msg-mw|prefs-echosubscriptions}}.',
-	'echo-pref-email-reverted' => "Option for getting emails when someone reverts the user's edit. This is the conclusion of the sentence begun by the header: {{msg-mw|prefs-emailsubscriptions}}.",
+	'echo-pref-subscription-reverted' => "Option for getting notifications when someone reverts the user's edit. This is the conclusion of the sentence begun by the header: {{msg-mw|prefs-echosubscriptions}}.",
 	'echo-pref-email-frequency-never' => "Option for users who don't want to receive any email notifications
 
 See also:
@@ -176,10 +185,17 @@ See also:
 	'echo-pref-email-frequency-daily' => 'Option for users who want to receive a daily digest of email notifications',
 	'echo-pref-email-frequency-weekly' => 'Option for users who want to receive a weekly digest of email notifications',
 	'echo-pref-notify-hide-link' => "Label for a preference which disables the 'Notifications' link in the header and associated fly-out panel",
+	// Dismiss interface
+	'echo-dismiss-button' => 'Text for the button that dismisses a notification type. Keep this short.',
+	'echo-dismiss-message' => 'Message asking the user if they want to turn off all notifications of a certain type. $1 is the name of the type.',
+	// Errors
 	'echo-no-agent' => 'Shown in place of a username in a notification
 	if the notification has no specified user.',
 	'echo-no-title' => 'Shown in place of a page title in a notification if the notification has no specified page title.',
 	'echo-error-no-formatter' => "Error message displayed when no formatting has been defined for a notification. In other words, the extension doesn't know how to properly display the notification.",
+	'echo-error-preference' => 'Error message displayed when request to set user preference fails',
+	'echo-error-token' => 'Error message displayed when request to get user token fails',
+	// Special:Notifications
 	'notifications' => 'This message is the page title of the special page [[Special:Notifications]].
 {{Identical|Notification}}',
 	'tooltip-pt-notifications' => 'This is used for the title (mouseover text) of the notifications user tool.',

Echo.php

@@ -101,6 +101,15 @@ $wgResourceModules += array(
 	'ext.echo.base' => $echoResourceTemplate + array(
 		'styles' => 'base/ext.echo.base.css',
 		'scripts' => 'base/ext.echo.base.js',
+		'dependencies' => array(
+			'jquery.ui.button',
+		),
+		'messages' => array(
+			'cancel',
+			'echo-dismiss-button',
+			'echo-error-preference',
+			'echo-error-token',
+		),
 	),
 	'ext.echo.overlay' => $echoResourceTemplate + array(
 		'scripts' => array(
@@ -196,9 +205,9 @@ $wgEchoEmailFooterAddress = '';
 // The max notification count showed in badge
 $wgEchoMaxNotificationCount = 99;
 
-$wgEchoDefaultNotificationTypes = array( // Welcome events do not use subscription, and will only trigger notify, not email.
+$wgEchoDefaultNotificationTypes = array(
 	'all' => array(
-		'notify' => true,
+		'web' => true,
 		'email' => true,
 	)
 );
@@ -207,7 +216,7 @@ $wgEchoDefaultNotificationTypes = array( // Welcome events do not use subscripti
 // Each definition consists of a class name and a function name.
 // See also: EchoNotificationController class.
 $wgEchoNotifiers = array(
-	'notify' => array( 'EchoNotifier', 'notifyWithNotification' ), // web-based notification
+	'web' => array( 'EchoNotifier', 'notifyWithNotification' ), // web-based notification
 	'email' => array( 'EchoNotifier', 'notifyWithEmail' ),
 );
 
@@ -232,9 +241,13 @@ $wgEchoEnabledEvents = array(
 // The usergroups param specifies an array of usergroups eligible to recieve the
 // notification type. If no usergroups parameter exists, all groups are eligible.
 $wgEchoEventDetails = array(
+	'welcome' => array(
+		'nodismiss' => array( 'web', 'email' ),
+	),
 	'edit-user-talk' => array(
 		'category' => 'edit-user-talk',
-		'priority' => 1
+		'priority' => 1,
+		'nodismiss' => array( 'web' ),
 	),
 	'reverted' => array(
 		'category' => 'edit-revert',
@@ -248,6 +261,13 @@ $wgEchoEventDetails = array(
 
 // Definitions of the notification event types built into Echo
 $wgEchoNotificationFormatters = array(
+	'welcome' => array(
+		'type' => 'system',
+		'title-message' => 'notification-new-user',
+		'title-params' => array( 'agent' ),
+		'payload' => array( 'welcome' ),
+		'icon' => 'w',
+	),
 	'edit-user-talk' => array(
 		'type' => 'edit',
 		'title-message' => 'notification-edit-talk-page2',
@@ -278,13 +298,6 @@ $wgEchoNotificationFormatters = array(
 		'payload' => array( 'snippet' ),
 		'icon' => 'chat',
 	),
-	'welcome' => array(
-		'type' => 'welcome',
-		'title-message' => 'notification-new-user',
-		'title-params' => array( 'agent' ),
-		'payload' => array( 'welcome' ),
-		'icon' => 'w',
-	),
 	'reverted' => array(
 		'type' => 'edit',
 		'title-message' => 'notification-reverted2',
@@ -323,9 +336,10 @@ $wgDefaultUserOptions['echo-notify-link'] = 'true';
 // By default, send emails for each notification as they come in
 $wgDefaultUserOptions['echo-email-frequency'] = EchoHooks::EMAIL_IMMEDIATELY;
 
-// Set all of the events to email by default (won't affect events that don't email)
+// Set all of the events to notify by web and email by default (won't affect events that don't email)
 foreach ( $wgEchoEnabledEvents as $wgEchoEnabledEvent ) {
 	$wgDefaultUserOptions['echo-email-notifications' . $wgEchoEnabledEvent] = true;
+	$wgDefaultUserOptions['echo-web-notifications' . $wgEchoEnabledEvent] = true;
 }
 // unset default email for reverted, article-linked (change them to opt-in)
 $wgDefaultUserOptions['echo-email-notificationsreverted'] = false;

Hooks.php

@@ -203,7 +203,6 @@ class EchoHooks {
 				$weekly => self::EMAIL_WEEKLY_DIGEST
 			);
 		}
-
 		$preferences['echo-email-frequency'] = array(
 			'type' => 'select',
 			//'label-message' => 'echo-pref-email-frequency',
@@ -211,53 +210,6 @@ class EchoHooks {
 			'options' => $freqOptions
 		);
 
-		// Show email subscription options
-		$emailOptions = array();
-
-		// Bug 43446 - Sort events by priority
-		$eventsAndPriorities = array();
-
-		foreach ( EchoEvent::gatherValidEchoEvents() as $enabledEvent ) {
-			if ( isset( $wgEchoEventDetails[$enabledEvent] ) ) {
-				$eventsAndPriorities[$enabledEvent] = $wgEchoEventDetails[$enabledEvent]['priority'];
-			} else {
-				$eventsAndPriorities[$enabledEvent] = 10;
-			}
-		}
-
-		asort( $eventsAndPriorities );
-
-		foreach ( array_keys( $eventsAndPriorities ) as $enabledEvent ) {
-			// Welcome notifications don't have subscriptions
-			if ( $enabledEvent === 'welcome' ) {
-				continue;
-			}
-			// Make sure the user is eligible to recieve this type of notification
-			if ( !EchoNotificationController::getNotificationEligibility( $user, $enabledEvent ) ) {
-				continue;
-			}
-			// Make sure email notifications are possible for this event
-			if ( isset( $wgEchoDefaultNotificationTypes[$enabledEvent] ) ) {
-				if ( !$wgEchoDefaultNotificationTypes[$enabledEvent]['email'] ) {
-					continue;
-				}
-			} elseif ( !$wgEchoDefaultNotificationTypes['all']['email'] ) {
-				continue;
-			}
-			// If we're creating our own preference for email notification on user
-			// talk page edit, remove the existing preference from the User profile tab.
-			if ( $enabledEvent === 'edit-user-talk' ) {
-				unset( $preferences['enotifusertalkpages'] );
-			}
-			$eventMessage = wfMessage( 'echo-pref-email-' . $enabledEvent )->plain();
-			$emailOptions["$eventMessage"] = $enabledEvent;
-		}
-		$preferences['echo-email-notifications'] = array(
-			'type' => 'multiselect',
-			'section' => 'echo/emailsubscriptions',
-			'options' => $emailOptions,
-		);
-
 		// Display information about the user's currently set email address
 		$prefsTitle = SpecialPage::getTitleFor( 'Preferences', false, 'mw-prefsection-echo' );
 		$link = Linker::link(
@@ -281,9 +233,60 @@ class EchoHooks {
 			'type' => 'info',
 			'raw' => true,
 			'default' => $emailContent,
-			'section' => 'echo/emailsubscriptions'
+			'section' => 'echo/emailfrequency'
 		);
 
+		// Sort events by priority
+		$eventsAndPriorities = array();
+		foreach ( EchoEvent::gatherValidEchoEvents() as $enabledEvent ) {
+			if ( isset( $wgEchoEventDetails[$enabledEvent]['priority'] ) ) {
+				$eventsAndPriorities[$enabledEvent] = $wgEchoEventDetails[$enabledEvent]['priority'];
+			} else {
+				$eventsAndPriorities[$enabledEvent] = 10;
+			}
+		}
+		asort( $eventsAndPriorities );
+		$eventsAndPriorities = array_keys( $eventsAndPriorities );
+
+		// Show subscription options
+		$oldPrefs['email']['edit-user-talk'] = 'enotifusertalkpages';
+		$subTypes = array( 'web', 'email' );
+		foreach ( $subTypes as $subType ) {
+			$options = array();
+			foreach ( $eventsAndPriorities as $enabledEvent ) {
+				if ( isset( $wgEchoEventDetails[$enabledEvent]['nodismiss'] )
+					&& in_array( $subType, $wgEchoEventDetails[$enabledEvent]['nodismiss'] ) )
+				{
+					continue;
+				}
+				// Make sure notifications of this subtype are possible for this event
+				if ( isset( $wgEchoDefaultNotificationTypes[$enabledEvent] ) ) {
+					if ( !$wgEchoDefaultNotificationTypes[$enabledEvent][$subType] ) {
+						continue;
+					}
+				// Make sure this subtype is an available notification type
+				} elseif ( !$wgEchoDefaultNotificationTypes['all'][$subType] ) {
+					continue;
+				}
+				// Make sure the user is eligible to recieve this type of notification
+				if ( !EchoNotificationController::getNotificationEligibility( $user, $enabledEvent ) ) {
+					continue;
+				}
+				$eventMessage = wfMessage( 'echo-pref-subscription-' . $enabledEvent )->plain();
+				$options[$eventMessage] = $enabledEvent;
+				// overwrite other preferences, if necessary
+				if ( isset( $oldPrefs[$subType][$enabledEvent] ) ) {
+					unset( $preferences[$oldPrefs[$subType][$enabledEvent]] );
+				}
+			}
+			$preferences['echo-' . $subType . '-notifications'] = array(
+				'type' => 'multiselect',
+				'label-message' => 'echo-pref-' . $subType,
+				'section' => 'echo/echosubscriptions',
+				'options' => $options,
+			);
+		}
+
 		// Show fly-out display prefs
 		$preferences['echo-notify-hide-link'] = array(
 			'type' => 'toggle',

Notifier.php

@@ -3,7 +3,8 @@
 // @todo Fill in
 class EchoNotifier {
 	/**
-	 * Record an EchoNotification for an EchoEvent.
+	 * Record an EchoNotification for an EchoEvent
+	 * Currently used for web-based notifications.
 	 *
 	 * @param $user User to notify.
 	 * @param $event EchoEvent to notify about.

api/ApiEchoNotifications.php

@@ -61,14 +61,10 @@ class ApiEchoNotifications extends ApiQueryBase {
 
 		$output = array();
 
-		$res = $wgEchoBackend->loadNotifications( $user, $unread, $limit = 20, $timestamp = 0, $offset = 0 );
+		// TODO: Make 'web' based on a new API param?
+		$res = $wgEchoBackend->loadNotifications( $user, $unread, $limit, $timestamp, $offset, 'web' );
 
 		foreach ( $res as $row ) {
-			// Make sure the user is eligible to recieve this type of notification
-			if ( !EchoNotificationController::getNotificationEligibility( $user, $row->event_type ) ) {
-				continue;
-			}
-
 			$event = EchoEvent::newFromRow( $row );
 
 			// Use $row->notification_timestamp instead of $event->getTimestamp() for display

formatters/BasicFormatter.php

@@ -101,6 +101,8 @@ class EchoBasicFormatter extends EchoNotificationFormatter {
 	 * @return array|string
 	 */
 	public function format( $event, $user, $type ) {
+		global $wgEchoEventDetails;
+
 		if ( $this->outputFormat === 'email' ) {
 			return $this->formatEmail( $event, $user, $type );
 		}
@@ -122,6 +124,13 @@ class EchoBasicFormatter extends EchoNotificationFormatter {
 			' '
 		) . $output;
 
+		// Add the hidden dismiss interface if the notification is dismissable
+		if ( !isset( $wgEchoEventDetails[$event->type]['nodismiss'] )
+			|| !in_array( 'web', $wgEchoEventDetails[$event->type]['nodismiss'] ) )
+		{
+			$output .= $this->formatDismissInterface( $event, $user );
+		}
+
 		// Build the notification title
 		$title = $this->formatNotificationTitle( $event, $user )->parse();
 		$content = Xml::tags( 'div', array( 'class' => 'mw-echo-title' ), $title ) . "\n";
@@ -162,6 +171,18 @@ class EchoBasicFormatter extends EchoNotificationFormatter {
 		return $output;
 	}
 
+	protected function formatDismissInterface( $event, $user ) {
+		$dismissTitle = wfMessage( 'echo-dismiss-title-' . $event->type )
+			->inLanguage( $user->getOption( 'language' ) )
+			->escaped();
+		$dismiss = wfMessage( 'echo-dismiss-message', $dismissTitle )
+			->inLanguage( $user->getOption( 'language' ) )
+			->text();
+		$dismiss = Xml::tags( 'div', array( 'class' => 'mw-echo-dismiss-message' ), $dismiss ) . "\n";
+		$dismiss = Xml::tags( 'div', array( 'class' => 'mw-echo-dismiss', 'style' => 'display:none;' ), $dismiss ) . "\n";
+		return $dismiss;
+	}
+
 	protected function formatNotificationTitle( $event, $user ) {
 		if ( $this->outputFormat === 'flyout' ) {
 			return $this->formatFragment( $this->flyoutTitle, $event, $user );

formatters/NotificationFormatter.php

@@ -11,7 +11,7 @@ abstract class EchoNotificationFormatter {
 		'basic' => 'EchoBasicFormatter',
 		'edit' => 'EchoEditFormatter',
 		'comment' => 'EchoCommentFormatter',
-		'welcome' => 'EchoBasicFormatter',
+		'system' => 'EchoBasicFormatter',
 	);
 	protected $validOutputFormats = array( 'text', 'flyout', 'html', 'email' );
 	protected $outputFormat = 'text';

includes/DbEchoBackend.php

@@ -30,12 +30,29 @@ class MWDbEchoBackend extends MWEchoBackend {
 	 * @param $limit int The maximum number of notifications to return
 	 * @param $timestamp int The timestamp to start from
 	 * @param $offset int The notification event id to start from
+	 * @param $outputFormat string The output format of the notifications (web,
+	 *    email, etc.)
 	 * @return array
 	 */
-	public function loadNotifications( $user, $unread, $limit, $timestamp, $offset ) {
+	public function loadNotifications( $user, $unread, $limit, $timestamp, $offset, $outputFormat = 'web' ) {
+
+		$eventTypesToLoad = EchoEvent::gatherValidEchoEvents();
+		foreach ( $eventTypesToLoad as $key => $eventType ) {
+			// Make sure the user is eligible to recieve this type of notification
+			if ( !EchoNotificationController::getNotificationEligibility( $user, $eventType ) ) {
+				unset( $eventTypesToLoad[$key] );
+			}
+			if ( !$user->getOption( 'echo-' . $outputFormat . '-notifications' . $eventType ) ) {
+				unset( $eventTypesToLoad[$key] );
+			}
+		}
+		if ( !$eventTypesToLoad ) {
+			return array();
+		}
+
 		$conds = array(
 			'notification_user' => $user->getID(),
-			'event_type' => EchoEvent::gatherValidEchoEvents(),
+			'event_type' => $eventTypesToLoad,
 		);
 
 		if ( $unread ) {

model/Event.php

@@ -6,8 +6,8 @@
  * A user's subscriptions determine what Notifications they receive.
  */
 class EchoEvent {
+	public $type = null;
 	protected $id = null;
-	protected $type = null;
 	protected $variant = null;
 	/**
 	 * @var User

modules/base/ext.echo.base.css

@@ -25,9 +25,34 @@
 	color: #6D6D6D;
 	line-height: 90%;
 	margin: 0;
+	min-height: 40px;
 	background-color: white;
 	position: relative;
 	/* Force container to expand to height of floated contents */
 	overflow: hidden;
 	zoom: 1;
 }
+.mw-echo-close-box {
+	position: absolute;
+	right: 10px;
+	top: 10px;
+	width: 23px;
+	height: 23px;
+	z-index: 3;
+	/* @embed */
+	background-image: url(DismissOnRowHover.png);
+	background-repeat: no-repeat;
+}
+.mw-echo-close-box:hover {
+	/* @embed */
+	background-image: url(DismissOnHover.png);
+}
+.mw-echo-dismiss {
+	padding-left: 45px;
+	background-color: #EDEDEE;
+	position: absolute;
+	top: 0;
+	z-index: 1;
+}
+.mw-echo-dismiss-message {
+}

modules/special/ext.echo.special.js

@@ -8,9 +8,152 @@
 		'header': '',
 		'processing': false,
 		'moreData': '0',
+		'optionsToken': '',
 
 		/**
-		 * initialize the property in special notification page
+		 * Show the dismiss interface (Dismiss and Cancel buttons).
+		 */
+		'showDismissOption': function( closeBox ) {
+			var $notification = $( closeBox ).parent();
+			$( closeBox ).hide();
+			$notification.data( 'dismiss', true );
+			$notification.find( '.mw-echo-dismiss' ).show();
+		},
+
+		/**
+		 * Handle clicking the Dismiss button.
+		 * First we have to retrieve the options token.
+		 */
+		'dismiss': function( notification ) {
+			var eventType,
+				_this = this,
+				$notification = $( notification );
+			var tokenRequest = {
+				'action': 'tokens',
+				'type' : 'options',
+				'format': 'json'
+			};
+			if ( this.optionsToken ) {
+				this.finishDismiss( notification );
+			} else {
+				$.ajax( {
+					type: 'get',
+					url: mw.util.wikiScript( 'api' ),
+					data: tokenRequest,
+					dataType: 'json',
+					success: function( data ) {
+						if ( typeof data.tokens.optionstoken === 'undefined' ) {
+							alert( mw.msg( 'echo-error-token' ) );
+						} else {
+							_this.optionsToken = data.tokens.optionstoken;
+							_this.finishDismiss( notification );
+						}
+						/*
+						// TODO: Use something like this for the flyout to immediately
+						// hide the notifications without reloading the page. We reload
+						// the page in the archive interface since we're also dealing
+						// with date headers.
+						eventType = $notification.attr( 'data-notification-type' );
+						$( 'li[data-notification-type="' + eventType + '"]' ).hide();
+						*/
+					},
+					error: function() {
+						alert( mw.msg( 'echo-error-token' ) );
+					}
+				} );
+			}
+		},
+
+		/**
+		 * Change the user's preferences related to this notification type and
+		 * reload the page.
+		 */
+		'finishDismiss': function( notification ) {
+			var _this = this,
+				$notification = $( notification ),
+				eventType = $notification.attr( 'data-notification-type' ),
+				change = 'echo-web-notifications' + eventType + '=0',
+				prefRequest = {
+					'action': 'options',
+					'change': change,
+					'token': this.optionsToken,
+					'format': 'json'
+				};
+			$.ajax( {
+				type: 'post',
+				url: mw.util.wikiScript( 'api' ),
+				data: prefRequest,
+				dataType: 'json',
+				success: function( data ) {
+					window.location.reload();
+				},
+				error: function() {
+					alert( mw.msg( 'echo-error-preference' ) );
+				}
+			} );
+		},
+
+		'setUpDismissability' : function( notification ) {
+			var $dismissButton,
+				$cancelButton,
+				_this = this,
+				$notification = $( notification );
+
+			// Add dismiss box
+			var $closebox = $( '<div/>' )
+				.addClass( 'mw-echo-close-box' )
+				.css( 'display', 'none' )
+				.click( function() {
+					_this.showDismissOption( this );
+				} );
+			$notification.append( $closebox );
+
+			// Add dismiss and cancel buttons
+			$dismissButton = $( '<button/>' )
+				.text( mw.msg( 'echo-dismiss-button' ) )
+				.addClass( 'mw-echo-dismiss-button' )
+				.addClass( 'ui-button-blue' )
+				.button( {
+					icons: { primary: "ui-icon-closethick" }
+				} )
+				.click( function () {
+					_this.dismiss( $notification );
+				} );
+			$cancelButton = $( '<button/>' )
+				.text( mw.msg( 'cancel' ) )
+				.addClass( 'mw-echo-cancel-button' )
+				.addClass( 'ui-button-red' )
+				.button()
+				.click( function () {
+					$notification.data( 'dismiss', false );
+					$notification.find( '.mw-echo-dismiss' ).hide();
+					$closebox.show();
+				} );
+			$notification.find( '.mw-echo-dismiss' )
+				.height( $notification.height() )
+				.width( $notification.width() - 45 )
+				.css( 'padding-top', $notification.css( 'padding-top' ) )
+				.css( 'padding-bottom', $notification.css( 'padding-bottom' ) )
+				.append( $dismissButton )
+				.append( $cancelButton );
+
+			// Make each notification hot for dismissability
+			$notification.hover(
+				function() {
+					if ( !$( this ).data( 'dismiss' ) ) {
+						$( this ).find( '.mw-echo-close-box' ).show();
+					}
+				},
+				function() {
+					if ( !$( this ).data( 'dismiss' ) ) {
+						$( this ).find( '.mw-echo-close-box' ).hide();
+					}
+				}
+			);
+		},
+
+		/**
+		 * Initialize the property in special notification page.
 		 */
 		'initialize': function() {
 			var _this = this;
@@ -27,6 +170,14 @@
 			_this.offset = mw.config.get( 'wgEchoStartOffset' );
 			_this.header = mw.config.get( 'wgEchoDateHeader' );
 
+			// Set up each individual notification with a close box and dismiss
+			// interface if it is dismissable.
+			$( '.mw-echo-notification' ).each( function() {
+				if ( $( this ).find( '.mw-echo-dismiss' ).length ) {
+					_this.setUpDismissability( this );
+				}
+			} );
+
 			$( '<a/>' )
 				.attr( 'href', mw.config.get( 'wgEchoHelpPage' ) )
 				.attr( 'title', mw.msg( 'echo-more-info' ) )
@@ -39,7 +190,7 @@
 		},
 
 		/**
-		 * function for loading more notification records
+		 * Load more notification records.
 		 */
 		'loadMore': function() {
 			var api = new mw.Api(), notifications, data, container, $li, _this = this, unread = [];
@@ -72,6 +223,7 @@
 								.data( 'details', data )
 								.data( 'id', id )
 								.addClass( 'mw-echo-notification' )
+								.attr( 'data-notification-type', data.type )
 								.append( data['*'] )
 								.appendTo( container );
 
@@ -80,6 +232,10 @@
 								unread.push( id );
 							}
 
+							if ( $li.find( '.mw-echo-dismiss' ).length ) {
+								_this.setUpDismissability( $li );
+							}
+
 							// update the timestamp and offset to get data from
 							// this is used for next data retrieval
 							_this.timestamp = data.timestamp.unix;
@@ -101,7 +257,7 @@
 		},
 
 		/**
-		 * Mark notifications as read
+		 * Mark notifications as read.
 		 */
 		'markAsRead': function( unread ) {
 			var api = new mw.Api(), _this = this;

special/SpecialNotifications.php

@@ -40,8 +40,10 @@ class SpecialNotifications extends SpecialPage {
 			'title' => wfMessage( 'preferences' )->text()
 		) );
 
+		// Pull the notifications
 		$notif = ApiEchoNotifications::getNotifications( $user, false, 'html', self::$displayNum + 1, $timestamp, $offset );
 
+		// If there are no notifications, display a message saying so
 		if ( !$notif ) {
 			$out->addHTML( $html );
 			$out->addWikiMsg( 'echo-none' );
@@ -59,7 +61,7 @@ class SpecialNotifications extends SpecialPage {
 			$more = false;
 		}
 
-		// The date header title for each section
+		// Add the notifications to the page (interspersed with date headers)
 		$dateHeader = '';
 		$notices = '';
 		$unread = array();
@@ -79,7 +81,6 @@ class SpecialNotifications extends SpecialPage {
 			$nextOffset = $row['id'];
 			$notices .= Html::rawElement( 'li', array( 'class' => $class, 'data-notification-type' => $row['type'] ), $row['*'] );
 		}
-
 		$html .= Html::rawElement( 'ul', array( 'id' => 'mw-echo-special-container' ), $notices );
 
 		// Build the more link