CodeEditor: Avoid movement while loading

Bug: T73015
Change-Id: I0ce663ebad4bb9ab9f435aeba65c545ee21e0680
This commit is contained in:
Ed Sanders 2023-10-14 12:11:23 +01:00 committed by Esanders
parent 0094c01f7f
commit 9111107de8
3 changed files with 41 additions and 1 deletions

View file

@ -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",

View file

@ -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:' );

View file

@ -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;
}
}
}