Prevent style jumping in WikiEditor

Add a new styles module. This module makes sure that the textarea is
already properly styled (jumping lineheight bug) before we start the
JS. Also hide the toolbar before it's styles have finished loading, so
you don't see it being constructed on the fly. Move inline styling for
the old toolbar into this stylesheet as well.

Bug: 47708
Change-Id: I40bec0a24dbd295db301e7faefb93d8991981acb

WikiEditor.hooks.php

@@ -29,6 +29,9 @@ class WikiEditorHooks {
 			'modules' => array(
 				'ext.wikiEditor.toolbar',
 			),
+			'stylemodules' => array(
+				'ext.wikiEditor.toolbar.styles',
+			),
 		),
 		'dialogs' => array(
 			'preferences' => array(
@@ -160,7 +163,13 @@ class WikiEditorHooks {
 
 		// Add modules for enabled features
 		foreach ( self::$features as $name => $feature ) {
-			if ( isset( $feature['modules'] ) && self::isEnabled( $name ) ) {
+			if ( !self::isEnabled( $name ) ) {
+				continue;
+			}
+			if ( isset( $feature['stylemodules'] ) ) {
+				$wgOut->addModuleStyles( $feature['stylemodules'] );
+			}
+			if ( isset( $feature['modules'] ) ) {
 				$wgOut->addModules( $feature['modules'] );
 			}
 		}
@@ -179,8 +188,7 @@ class WikiEditorHooks {
 		if ( self::isEnabled( 'toolbar' ) ) {
 			$toolbar = Html::rawElement(
 				'div', array(
-					'class' => 'wikiEditor-oldToolbar',
-					'style' => 'display:none;'
+					'class' => 'wikiEditor-oldToolbar'
 				),
 				$toolbar
 			);

WikiEditor.php

@@ -425,6 +425,9 @@ $wgResourceModules += array(
 			'jquery.wikiEditor.toolbar.config',
 		)
 	),
+	'ext.wikiEditor.toolbar.styles' => $wikiEditorTpl + array(
+		'styles' => 'ext.wikiEditor.toolbar.styles.css',
+	),
 	'ext.wikiEditor.toolbar.hideSig' => $wikiEditorTpl + array(
 		'scripts' => 'ext.wikiEditor.toolbar.hideSig.js',
 	),

modules/ext.wikiEditor.css

@@ -2,23 +2,6 @@
  * CSS for WikiEditor
  */
 
-form#editform {
-	margin: 0;
-	padding: 0;
-}
-
-#wpSummary,
-#wpSummaryLabel {
-	margin-bottom: 1em;
-}
-
-.wikiEditor-ui textarea#wpTextbox1 {
-	border: none;
-	padding: 0;
-	line-height: 1.5em;
-	resize: vertical;
-}
-
 /* Hide vanilla MediaWiki's "Editing help" link, as we provide it in the toolbar */
 .editButtons .editHelp,
 .editButtons .mw-editButtons-pipe-separator {

modules/ext.wikiEditor.toolbar.styles.css

@@ -0,0 +1,26 @@
+/**
+ * CSS for WikiEditor
+ */
+
+form#editform {
+	margin: 0;
+	padding: 0;
+}
+
+#wpSummary,
+#wpSummaryLabel {
+	margin-bottom: 1em;
+}
+
+#wpTextbox1 {
+	padding: 0;
+	line-height: 1.5em;
+	resize: vertical;
+}
+
+/* Hide the old toolbar until the wikiEditor toolbar is deemed not supported,
+ * hide the WikiEditor toolbar until it's css has loaded */
+.wikiEditor-oldToolbar,
+.wikiEditor-ui-toolbar {
+	display: none;
+}

modules/jquery.wikiEditor.toolbar.css

@@ -4,6 +4,7 @@
 
 .wikiEditor-ui-toolbar {
 	position: relative;
+	display: block;
 }
 /* Expandable Sections */
 .wikiEditor-ui-toolbar .sections {