Make spinner appear immediately when clicking edit

Moved the spinner code from ViewPageTarget to ViewPageTarget.init to make it appear immediately on clicking edit.
Bonus: also fixes the URL to add the parameter vesection when clicking a section edit link.

Bug: 65453
Change-Id: Ica33de675203cc0f0594b8362731c4e98a644313

modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.css

@@ -22,12 +22,6 @@
 	cursor: default;
 }
 
-.ve-init-mw-viewPageTarget-loading {
-	width: 128px;
-	height: 15px;
-	float: right;
-}
-
 /* Toolbar */
 
 .ve-init-mw-viewPageTarget-toolbar-utilites,
@@ -101,10 +95,3 @@
 .ve-ui-mwHelpPopupTool-version-link {
 	unicode-bidi: embed;
 }
-
-/* Images */
-
-.ve-init-mw-viewPageTarget-loading {
-	/* @embed */
-	background-image: url(images/loading-ltr.gif);
-}

modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.init.css

@@ -8,6 +8,14 @@
 /*csslint known-properties:false */
 /* Bug: https://github.com/stubbornella/csslint/issues/436 */
 
+/* Visual Editor */
+
+.mw-viewPageTarget-loading {
+	width: 128px;
+	height: 15px;
+	float: right;
+}
+
 /* Section edit links */
 
 .mw-editsection {
@@ -31,3 +39,10 @@
 	background-image: none !important;
 	display: inline !important;
 }
+
+/* Images */
+
+.mw-viewPageTarget-loading {
+	/* @embed */
+	background-image: url(images/loading-ltr.gif);
+}

modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.init.js

@@ -339,12 +339,21 @@
 				return;
 			}
 
+			var $spinner = $( '<div class="mw-viewPageTarget-loading"></div>' );
+			$( '#firstHeading' ).prepend( $spinner );
+
+			if ( window.history.pushState && uri.query.veaction !== 'edit' ) {
+				//Set veaction to edit
+				uri = veEditUri;
+				window.history.pushState( { tag: 'visualeditor' }, document.title, uri );
+			}
+
 			e.preventDefault();
 
 			getTarget().done( function ( target ) {
 				ve.track( 'Edit', { action: 'edit-link-click' } );
 				target.activate();
-			} );
+			} ).always( function () { $spinner.remove(); } );
 		},
 
 		onEditSectionLinkClick: function ( e ) {
@@ -352,13 +361,19 @@
 				return;
 			}
 
+			var $spinner = $( '<div class="mw-viewPageTarget-loading"></div>' );
+			$( '#firstHeading' ).prepend( $spinner );
+			if ( window.history.pushState && uri.query.veaction !== 'edit' ) {
+				window.history.pushState( { tag: 'visualeditor' }, document.title, this.href );
+			}
+
 			e.preventDefault();
 
 			getTarget().done( function ( target ) {
 				ve.track( 'Edit', { action: 'section-edit-link-click' } );
 				target.saveEditSection( $( e.target ).closest( 'h1, h2, h3, h4, h5, h6' ).get( 0 ) );
 				target.activate();
-			} );
+			} ).always( function () { $spinner.remove(); } );
 		}
 	};
 
@@ -436,8 +451,11 @@
 	$( function () {
 		if ( init.isAvailable ) {
 			if ( isViewPage && uri.query.veaction === 'edit' ) {
+				var $spinner = $( '<div class="mw-viewPageTarget-loading"></div>' );
+				$( '#firstHeading' ).prepend( $spinner );
+
 				getTarget().done( function ( target ) {
-					target.activate();
+					target.activate().always( function () { $spinner.remove(); } );
 				} );
 			}
 		}

modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.js

@@ -18,7 +18,8 @@
 ve.init.mw.ViewPageTarget = function VeInitMwViewPageTarget() {
 	var prefName,
 		prefValue,
-		currentUri = new mw.Uri(),
+		//A workaround, as default URI does not get updated after pushState (bug 72334)
+		currentUri = new mw.Uri( document.location.href ),
 		conf = mw.config.get( 'wgVisualEditorConfig' );
 
 	// Parent constructor
@@ -29,7 +30,6 @@ ve.init.mw.ViewPageTarget = function VeInitMwViewPageTarget() {
 	);
 
 	// Properties
-	this.$spinner = $( '<div class="ve-init-mw-viewPageTarget-loading"></div>' );
 	this.toolbarSaveButton = null;
 	this.saveDialog = null;
 	this.onBeforeUnloadFallback = null;
@@ -248,17 +248,18 @@ ve.init.mw.ViewPageTarget.prototype.setupLocalNoticeMessages = function () {
  * Switch to edit mode.
  *
  * @method
+ * @return {jQuery.Promise}
  */
 ve.init.mw.ViewPageTarget.prototype.activate = function () {
 	if ( !this.active && !this.activating ) {
 		this.activating = true;
+		this.activatingDeferred = $.Deferred();
 
 		this.originalEditondbclick = mw.user.options.get( 'editondblclick' );
 		mw.user.options.set( 'editondblclick', 0 );
 
 		// User interface changes
 		this.transformPage();
-		this.showSpinner();
 		this.hideReadOnlyContent();
 		this.mutePageContent();
 		this.mutePageTitle();
@@ -268,6 +269,7 @@ ve.init.mw.ViewPageTarget.prototype.activate = function () {
 
 		this.load( [ 'site', 'user' ] );
 	}
+	return this.activatingDeferred.promise();
 };
 
 /**
@@ -309,7 +311,6 @@ ve.init.mw.ViewPageTarget.prototype.cancel = function () {
 		this.elementsThatHadOurAccessKey.attr( 'accesskey', ve.msg( 'accesskey-save' ) );
 	}
 	this.restorePage();
-	this.hideSpinner();
 	this.showReadOnlyContent();
 
 	mw.user.options.set( 'editondblclick', this.originalEditondbclick );
@@ -345,6 +346,7 @@ ve.init.mw.ViewPageTarget.prototype.cancel = function () {
 		this.initialEditSummary = new mw.Uri().query.summary;
 
 		this.deactivating = false;
+		this.activatingDeferred.reject();
 
 		mw.hook( 've.deactivationComplete' ).fire( this.edited );
 	}.bind( this ) );
@@ -412,7 +414,6 @@ ve.init.mw.ViewPageTarget.prototype.onSurfaceReady = function () {
 	this.transformPageTitle();
 	this.changeDocumentTitle();
 	this.hidePageContent();
-	this.hideSpinner();
 
 	this.surface.getView().focus();
 
@@ -422,6 +423,7 @@ ve.init.mw.ViewPageTarget.prototype.onSurfaceReady = function () {
 	this.restoreEditSection();
 	this.setupBeforeUnloadHandler();
 	this.maybeShowDialogs();
+	this.activatingDeferred.resolve();
 	mw.hook( 've.activationComplete' ).fire();
 };
 
@@ -1248,24 +1250,6 @@ ve.init.mw.ViewPageTarget.prototype.restoreScrollPosition = function () {
 	}
 };
 
-/**
- * Show the loading spinner.
- *
- * @method
- */
-ve.init.mw.ViewPageTarget.prototype.showSpinner = function () {
-	$( '#firstHeading' ).prepend( this.$spinner );
-};
-
-/**
- * Hide the loading spinner.
- *
- * @method
- */
-ve.init.mw.ViewPageTarget.prototype.hideSpinner = function () {
-	this.$spinner.detach();
-};
-
 /**
  * Show the page content.
  *
@@ -1444,7 +1428,7 @@ ve.init.mw.ViewPageTarget.prototype.transformPage = function () {
 	// Push veaction=edit url in history (if not already. If we got here by a veaction=edit
 	// permalink then it will be there already and the constructor called #activate)
 	if ( !this.actFromPopState && window.history.pushState && this.currentUri.query.veaction !== 'edit' ) {
-		// Set the veaction query parameter
+		// Set the current URL
 		uri = this.currentUri;
 		uri.query.veaction = 'edit';