From 9111107de87cca176aeb89afd5fc56a07f070750 Mon Sep 17 00:00:00 2001
From: Ed Sanders <esanders@wikimedia.org>
Date: Sat, 14 Oct 2023 12:11:23 +0100
Subject: [PATCH] CodeEditor: Avoid movement while loading

Bug: T73015
Change-Id: I0ce663ebad4bb9ab9f435aeba65c545ee21e0680
---
 extension.json                 |  8 +++++++-
 includes/Hooks.php             |  1 +
 modules/jquery.codeEditor.less | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/extension.json b/extension.json
index 580fcddc..83e73a60 100644
--- a/extension.json
+++ b/extension.json
@@ -49,13 +49,19 @@
 			],
 			"group": "ext.wikiEditor"
 		},
+		"ext.codeEditor.styles": {
+			"targets": [
+				"desktop",
+				"mobile"
+			],
+			"styles": "jquery.codeEditor.less"
+		},
 		"jquery.codeEditor": {
 			"targets": [
 				"desktop",
 				"mobile"
 			],
 			"scripts": "jquery.codeEditor.js",
-			"styles": "jquery.codeEditor.less",
 			"dependencies": [
 				"ext.wikiEditor",
 				"ext.codeEditor.ace",
diff --git a/includes/Hooks.php b/includes/Hooks.php
index aac031ae..f3b1a5d0 100644
--- a/includes/Hooks.php
+++ b/includes/Hooks.php
@@ -87,6 +87,7 @@ class Hooks implements
 		$lang = $this->getPageLanguage( $title, $model, $format );
 		if ( $lang && $this->userOptionsLookup->getOption( $output->getUser(), 'usebetatoolbar' ) ) {
 			$output->addModules( 'ext.codeEditor' );
+			$output->addModuleStyles( 'ext.codeEditor.styles' );
 			$output->addJsConfigVars( 'wgCodeEditorCurrentLanguage', $lang );
 			// Needed because ACE adds a blob: url web-worker.
 			$output->getCSP()->addScriptSrc( 'blob:' );
diff --git a/modules/jquery.codeEditor.less b/modules/jquery.codeEditor.less
index 4b298867..d37b731a 100644
--- a/modules/jquery.codeEditor.less
+++ b/modules/jquery.codeEditor.less
@@ -74,3 +74,36 @@
 		display: none;
 	}
 }
+
+.client-js {
+	.mw-editform {
+		/* Disable margin collapse, e.g. with messages boxes */
+		padding: 0.05px;
+
+		/* Copied from ext.wikiEditor.styles to avoid FOUC while loading (T73015) */
+		> #wpTextbox1 { /* stylelint-disable-line selector-max-id */
+			/* Toolbar height + padding + bottom border = 26 + 2*3 + 1 */
+			margin-top: 33px;
+			/* Unless there are <10 lines of code, the gutter will be 2 characters wide on the first page */
+			padding-left: 53px !important; /* stylelint-disable-line declaration-no-important */
+			margin-left: 0 !important; /* stylelint-disable-line declaration-no-important */
+			width: 100% !important; /* stylelint-disable-line declaration-no-important */
+		}
+
+		/* Try to style textarea like the CodeMirror editor to avoid movement when switching */
+		#wpTextbox1 { /* stylelint-disable-line selector-max-id */
+			/* Reserve space for CodeEditor status bar */
+			padding-bottom: 22px;
+			margin-left: 49px;
+			width: calc( 100% - 49px );
+			padding-left: 4px;
+			padding-top: 0;
+			line-height: 20px;
+			white-space: pre;
+		}
+
+		.wikiEditor-ui-text {
+			background: #f0f0f0;
+		}
+	}
+}