wikimedia/mediawiki-extensions-CodeEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/CodeEditor synced 2024-11-23 14:56:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Avoid FOUCs more flexibly

Browse source 
Style the textbox to mimic when CodeEditor is enabled only if
"usecodeeditor" is set, and only before CodeEditor is loaded (I0ce663e
added a gutter even when CodeEditor was turned off, which no one asked
for).

.wikiEditor-ui-text is added client-side, so there's no point in styling
it.

Bug: T351487
Change-Id: I3918e1c120805ca007e8e7eb7e29304ddbb6af56
This commit is contained in:
Nardog 2024-02-11 01:20:41 +00:00
parent 6b5da58aec
commit 1e646acfdb
3 changed files with 27 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
includes/Hooks.php
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' );
}

2
modules/jquery.codeEditor.js
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' );
}

39
modules/jquery.codeEditor.less
View file

@ -82,30 +82,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;
}
}
}
}