Merge "Avoid FOUCs more flexibly"

This commit is contained in:
jenkins-bot 2024-02-23 19:34:37 +00:00 committed by Gerrit Code Review
commit 8565e167d7
3 changed files with 27 additions and 18 deletions

View file

@ -91,6 +91,10 @@ class Hooks implements
$output->addJsConfigVars( 'wgCodeEditorCurrentLanguage', $lang );
// Needed because ACE adds a blob: url web-worker.
$output->getCSP()->addScriptSrc( 'blob:' );
if ( $this->userOptionsLookup->getOption( $output->getUser(), 'usecodeeditor' ) ) {
$output->addBodyClasses( 'codeeditor-loading' );
}
} elseif ( !ExtensionRegistry::getInstance()->isLoaded( 'WikiEditor' ) ) {
throw new ErrorPageError( 'codeeditor-error-title', 'codeeditor-error-message' );
}

View file

@ -435,6 +435,8 @@
context.fn.setupStatusBar();
document.body.classList.remove( 'codeeditor-loading' );
// Let modules know we're ready to start working with the content
context.fn.trigger( 'ready' );
}

View file

@ -77,30 +77,33 @@
/* 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;
}
> .codeeditor-loading {
.mw-editform {
/* Copied from ext.wikiEditor.styles to avoid FOUC while loading (T73015) */
> #wpTextbox1 { /* stylelint-disable-line selector-max-id */
/* 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 */
}
.wikiEditor-ui-text {
background: #f0f0f0;
/* Try to style textarea like the Ace 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;
}
}
}
}