Cleanup postEdit and match styles to mw.notification

* Remove HTML template
* Add mw-notification class and dependency
* Fix variable scoping issues so firing two notifications
  doesn't cause one to become stuck

Bug: T58313
Change-Id: I9a702d23a8a9b5cc098cbb413213d73813bec097

resources/Resources.php

@@ -1491,14 +1491,12 @@ return [
 		'targets' => [ 'desktop', 'mobile' ]
 	],
 	'mediawiki.action.view.postEdit' => [
-		'templates' => [
-			'postEdit.html' => 'resources/src/mediawiki.action/templates/postEdit.html',
-		],
 		'scripts' => 'resources/src/mediawiki.action/mediawiki.action.view.postEdit.js',
-		'styles' => 'resources/src/mediawiki.action/mediawiki.action.view.postEdit.css',
+		'styles' => 'resources/src/mediawiki.action/mediawiki.action.view.postEdit.less',
 		'dependencies' => [
 			'mediawiki.cookie',
-			'mediawiki.jqueryMsg'
+			'mediawiki.jqueryMsg',
+			'mediawiki.notification'
 		],
 		'messages' => [
 			'postedit-confirmation-created',

resources/src/mediawiki.action/mediawiki.action.view.postEdit.js

@@ -22,43 +22,48 @@
 	 * @member mw.hook
 	 */
 
-	var config = mw.config.get( [ 'wgAction', 'wgCurRevisionId' ] ),
+	var cookieVal,
+		config = mw.config.get( [ 'wgAction', 'wgCurRevisionId' ] ),
 		// This should match EditPage::POST_EDIT_COOKIE_KEY_PREFIX:
-		cookieKey = 'PostEditRevision' + config.wgCurRevisionId,
-		cookieVal, $div, id;
-
-	function removeConfirmation() {
-		$div.remove();
-		mw.hook( 'postEdit.afterRemoval' ).fire();
-	}
-
-	function fadeOutConfirmation() {
-		clearTimeout( id );
-		$div.find( '.postedit' ).addClass( 'postedit postedit-faded' );
-		setTimeout( removeConfirmation, 500 );
-
-		return false;
-	}
+		cookieKey = 'PostEditRevision' + config.wgCurRevisionId;
 
 	function showConfirmation( data ) {
+		var $container, $popup, $content, timeoutId;
+
+		function fadeOutConfirmation() {
+			$popup.addClass( 'postedit-faded' );
+			setTimeout( function () {
+				$container.remove();
+				mw.hook( 'postEdit.afterRemoval' ).fire();
+			}, 250 );
+		}
+
 		data = data || {};
+
 		if ( data.message === undefined ) {
 			data.message = $.parseHTML( mw.message( 'postedit-confirmation-saved', data.user || mw.user ).escaped() );
 		}
 
-		$div = mw.template.get( 'mediawiki.action.view.postEdit', 'postEdit.html' ).render();
-
+		$content = $( '<div>' ).addClass( 'postedit-icon postedit-icon-checkmark postedit-content' );
 		if ( typeof data.message === 'string' ) {
-			$div.find( '.postedit-content' ).text( data.message );
+			$content.text( data.message );
 		} else if ( typeof data.message === 'object' ) {
-			$div.find( '.postedit-content' ).append( data.message );
+			$content.append( data.message );
 		}
 
-		$div
-			.click( fadeOutConfirmation )
-			.prependTo( 'body' );
+		$popup = $( '<div>' ).addClass( 'postedit mw-notification' ).append(
+			$content,
+			$( '<a>' ).addClass( 'postedit-close' ).attr( 'href', '#' ).text( '×' )
+		).on( 'click', function ( e ) {
+			e.preventDefault();
+			clearTimeout( timeoutId );
+			fadeOutConfirmation();
+		} );
 
-		id = setTimeout( fadeOutConfirmation, 3000 );
+		$container = $( '<div>' ).addClass( 'postedit-container' ).append( $popup );
+		timeoutId = setTimeout( fadeOutConfirmation, 3000 );
+
+		$( 'body' ).prepend( $container );
 	}
 
 	mw.hook( 'postEdit' ).add( showConfirmation );

resources/src/mediawiki.action/mediawiki.action.view.postEdit.less

@@ -1,3 +1,5 @@
+@import 'mediawiki.mixins';
+
 .postedit-container {
 	margin: 0 auto;
 	position: fixed;
@@ -6,31 +8,26 @@
 	left: 50%;
 	z-index: 1000;
 	font-size: 13px;
-}
 
-.postedit-container:hover {
-	cursor: pointer;
+	&:hover {
+		cursor: pointer;
+	}
 }
 
 .postedit {
 	position: relative;
 	top: 0.6em;
 	left: -50%;
-	padding: 0.6em 3.6em 0.6em 1.1em;
-	line-height: 1.5625em;
-	color: #626465;
-	background-color: #f4f4f4;
-	border: 1px solid #dcd9d9;
-	text-shadow: 0 0.0625em 0 rgba( 255, 255, 255, 0.5 );
-	border-radius: 5px;
-	box-shadow: 0 2px 5px 0 #ccc;
-	-webkit-transition: all 0.25s ease-in-out;
-	-moz-transition: all 0.25s ease-in-out;
-	-ms-transition: all 0.25s ease-in-out;
-	-o-transition: all 0.25s ease-in-out;
-	transition: all 0.25s ease-in-out;
+	line-height: 1.35;
+	opacity: 1;
+	.transition( opacity 250ms );
+
+	&.mw-notification {
+		padding-right: 3em;
+	}
 }
 
+// TODO: Move to monobook skin
 .skin-monobook .postedit {
 	top: 6em !important; /* stylelint-disable-line declaration-no-important */
 }
@@ -65,12 +62,10 @@
 	text-shadow: 0 0.0625em 0 #fff;
 	text-decoration: none;
 	opacity: 0.2;
-	filter: alpha( opacity=20 );
-}
 
-.postedit-close:hover {
-	color: #000;
-	text-decoration: none;
-	opacity: 0.4;
-	filter: alpha( opacity=40 );
+	.postedit:hover & {
+		color: #000;
+		text-decoration: none;
+		opacity: 0.4;
+	}
 }

resources/src/mediawiki.action/templates/postEdit.html

@@ -1,6 +0,0 @@
-<div class="postedit-container">
-	<div class="postedit">
-		<div class="postedit-icon postedit-icon-checkmark postedit-content"></div>
-		<a href="#" class="postedit-close">&times;</a>
-	</div>
-</div>