changes.diff

diff --git a/src/mobile.notifications.overlay/NotificationsOverlay.js b/src/mobile.notifications.overlay/NotificationsOverlay.js
index 06de6c4b2..b893a5e53 100644
--- a/src/mobile.notifications.overlay/NotificationsOverlay.js
+++ b/src/mobile.notifications.overlay/NotificationsOverlay.js
@@ -2,28 +2,26 @@ var Overlay = require( '../mobile.startup/Overlay' ),
 	util = require( '../mobile.startup/util' ),
 	View = require( '../mobile.startup/View' ),
 	promisedView = require( '../mobile.startup/promisedView' ),
-	mfExtend = require( '../mobile.startup/mfExtend' ),
 	Anchor = require( '../mobile.startup/Anchor' );
 
 /**
- * Overlay for notifications
- * @class NotificationsOverlay
- * @extend Overlay
- * @uses mw.Api
+ * List of notifications
  *
- * @param {Object} params Configuration options
+ * @param {mw.echo} echo class
+ * @param {OO.ui.ButtonWidget} markAllReadButton - a button that will be associated with the
+ *  read status of the notifications list.
+ * @param {Function} onCountChange - receives one parameter - a capped (0-99 or 99+) count.
+ * @param {Function} onNotificationListRendered - callback rendered when the
+ *   notifications list has rendered
+ * @return {View}
  */
-NotificationsOverlay = function ( params ) {
+function notificationsList( echo, markAllReadButton, onCountChange, onNotificationListRendered ) {
 	var wrapperWidget,
 		maxNotificationCount = mw.config.get( 'wgEchoMaxNotificationCount' ),
-		echoApi = new mw.echo.api.EchoApi(),
-		unreadCounter = new mw.echo.dm.UnreadNotificationCounter( echoApi, 'all', maxNotificationCount ),
-		markAllReadButton = new OO.ui.ButtonWidget( {
-			icon: 'checkAll',
-			title: mw.msg( 'echo-mark-all-as-read' )
-		} ),
-		modelManager = new mw.echo.dm.ModelManager( unreadCounter, { type: [ 'message', 'alert' ] } ),
-		controller = new mw.echo.Controller(
+		echoApi = new echo.api.EchoApi(),
+		unreadCounter = new echo.dm.UnreadNotificationCounter( echoApi, 'all', maxNotificationCount ),
+		modelManager = new echo.dm.ModelManager( unreadCounter, { type: [ 'message', 'alert' ] } ),
+		controller = new echo.Controller(
 			echoApi,
 			modelManager,
 			{
@@ -38,44 +36,11 @@ NotificationsOverlay = function ( params ) {
 		// Create a container which will be revealed when "more options" (...)
 		// is clicked on a notification. Hidden by default.
 		$moreOptions = util.parseHTML( '<div>' )
-			.addClass( 'notifications-overlay-overlay position-fixed' ),
-		options = util.extend( {}, {
-			heading: '<strong>' + mw.message( 'notifications' ).escaped() + '</strong>',
-			footerAnchor: new Anchor( {
-				href: mw.util.getUrl( 'Special:Notifications' ),
-				progressive: true,
-				additionalClassNames: 'footer-link notifications-archive-link',
-				label: mw.msg( 'echo-overlay-link' )
-			} ).options,
-			headerActions: [
-				View.make(
-					{ class: 'notifications-overlay-header-markAllRead' },
-					[ markAllReadButton.$element ]
-				)
-			],
-			isBorderBox: false,
-			className: 'overlay notifications-overlay navigation-drawer'
-		}, params ),
-		// Anchor tag that corresponds to a notifications badge
-		badge = options.badge,
-		onCountChange = function ( cappedCount ) {
-			badge.setCount( cappedCount );
-		},
-		onNotificationListRendered = function () {
-			badge.markAsSeen();
-		};
-
-	Overlay.call( this, options );
-
-	// On error use the url as a fallback
-	if ( options.error ) {
-		options.onError();
-		return;
-	}
+			.addClass( 'notifications-overlay-overlay position-fixed' );
 
-	mw.echo.config.maxPrioritizedActions = 1;
+	echo.config.maxPrioritizedActions = 1;
 
-	wrapperWidget = new mw.echo.ui.NotificationsWrapper( controller, modelManager, {
+	wrapperWidget = new echo.ui.NotificationsWrapper( controller, modelManager, {
 		$overlay: $moreOptions
 	} );
 
@@ -117,8 +82,49 @@ NotificationsOverlay = function ( params ) {
 	);
 };
 
-// The third parameter is essential. If not defined, per mfExtend,
-// prototype will not be copied across.
-mfExtend( NotificationsOverlay, Overlay, {} );
+/**
+ * Make a notification overlay
+ *
+ * @param {mw.echo} echo class
+ * @param {Function} onCountChange - receives one parameter - a capped (0-99 or 99+) count.
+ * @param {Function} onNotificationListRendered - callback rendered when the
+ *   notifications list has rendered
+ * @return {Overlay}
+ */
+function notificationsOverlay( echo, onCountChange, onNotificationListRendered ) {
+	var markAllReadButton,
+		oouiPromise = mw.loader.using( 'mobile.notifications.overlay' ).then( function () {
+			markAllReadButton = new OO.ui.ButtonWidget( {
+				icon: 'checkAll',
+				title: mw.msg( 'echo-mark-all-as-read' )
+			} );
+			return View.make(
+				{ class: 'notifications-overlay-header-markAllRead' },
+				[ markAllReadButton.$element ]
+			);
+		} ),
+		markAllReadButtonView = promisedView( oouiPromise );
+
+	return Overlay.make(
+		{
+			heading: '<strong>' + mw.message( 'notifications' ).escaped() + '</strong>',
+			footerAnchor: new Anchor( {
+				href: mw.util.getUrl( 'Special:Notifications' ),
+				progressive: true,
+				additionalClassNames: 'footer-link notifications-archive-link',
+				label: mw.msg( 'echo-overlay-link' )
+			} ).options,
+			headerActions: [ markAllReadButtonView ],
+			isBorderBox: false,
+			className: 'overlay notifications-overlay navigation-drawer'
+		},
+		promisedView(
+			oouiPromise.then( function () {
+				var list = mw.mobileFrontend.require( 'mobile.notifications.overlay' ).list;
+				return list( echo, markAllReadButton, onCountChange, onNotificationListRendered );
+			} )
+		)
+	);
+}
 
-module.exports = NotificationsOverlay;
+module.exports = notificationsList;