ve.init.mw.ViewPageTarget: Actually animate the toolbar during setup

There was a slideDown() call, but this didn't do anything since
toolbars are visible and in the DOM by default.

As a temporary hack, hide it synchronously after creation and
then do the slideDown still.

This could ever so briefly cause a flash, though that didn't
happen in my testing.

This makes the experience smoother when we initialise the surface.
In particular the moment where we swap #bodyContent for our Surface
(which should look visually almost identical), before this change
it was still a bit of a flash since the Surface version has a
toolbar on top, and thus instead of swapping smoothly, we hide
content and show a similar piece of content that has an incompatible
offset from the top.

Bug: 64751
Change-Id: Id94974ba71fd887ce494d7b2b16ec62d43b18575

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

@@ -210,17 +210,29 @@ ve.init.mw.ViewPageTarget.prototype.verifyPopState = function ( popState ) {
  * @inheritdoc
  */
 ve.init.mw.ViewPageTarget.prototype.setUpToolbar = function () {
-	var $firstHeading = $( '#firstHeading' );
+	var $firstHeading;
 	// Parent method
 	ve.init.mw.Target.prototype.setUpToolbar.call( this );
 
+	// Keep it hidden so that we can slide it down smoothly (avoids sudden
+	// offset flash when original content is hidden, and replaced in-place with a
+	// similar-looking surface).
+	// FIXME: This is not ideal, the parent class creates it and appends
+	// to target (visibly), only for us to hide it again 0ms later.
+	// Though we can't hide it by default because it needs visible dimensions
+	// to compute stuff during setup.
+	this.toolbar.$bar.hide();
+
 	this.toolbar.enableFloatable();
 	this.toolbar.$element
 		.addClass( 've-init-mw-viewPageTarget-toolbar' );
+
 	// Move the toolbar to before #firstHeading if it exists
+	$firstHeading = $( '#firstHeading' );
 	if ( $firstHeading.length ) {
 		this.toolbar.$element.insertBefore( $firstHeading );
 	}
+
 	this.toolbar.$bar.slideDown( 'fast', ve.bind( function () {
 		// Check the surface wasn't torn down while the toolbar was animating
 		if ( this.surface ) {

modules/ve-mw/init/ve.init.mw.Target.js

@@ -1311,7 +1311,8 @@ ve.init.mw.Target.prototype.setUpSurface = function ( doc, callback ) {
 	setTimeout( function () {
 		// Build model
 		var dmDoc = ve.dm.converter.getModelFromDom(
-			doc, null,
+			doc,
+			null,
 			mw.config.get( 'wgVisualEditor' ).pageLanguageCode,
 			mw.config.get( 'wgVisualEditor' ).pageLanguageDir
 		);