mirror of
https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor
synced 2024-12-11 14:06:19 +00:00
7dae6496b3
We don't have a FOUC on the appearing of the 'edit' link. That one is handled quite intelligently: * Via the stylesheet that is also loaded in noscript mode, its (hidden) appearance is already predetermined. So as soon as those elements are seen by the browser they style correctly for users without JavaScript (display: none). * This same stylesheet also hides it for users with JavaScript but where VE is not available (e.g. due to browser support). While ve-not-available is added very early on (before document ready), it could in theory cause a short FOUC, but that's okay. We simply don't know that VE isn't supported until then. We optimise for the common case (JavaScript enabled, VE available), while still ensuring that it is always hidden in noscript, and is hidden as soon as possible when VE turns out not to be available. For some reason, one small detail (the little bit of whitespace added inside the brackets), was left out of this and was implemented by adding the class 'mw-editsection-expanded' to them from a document ready handler. * First step, get rid of the script that adds this class and use ve-available instead. That means they're styled correctly much earlier (we add the class to <html> before document ready). This can still cause a brief FOUC, though in most cases they're correct from the start. * Step two, make brackets expand by default for script users, and let ve-not-available reset it. This way, like with edit tabs, a FOUC will never happen for ve-available. And even for ve-not-available, a FOUC is rare since we add it before document ready via <html> look-ahead styling. There was still a brief reflow jump because of negative margins between two paint events. One was undoing the other at a later time. These negative margins are a remnant of when we were doing animations (follows-up I4b9c47fd65a70). They were added to reduce reflows and content shift, but were now actually causing them. Removed "padding-right" from mw-editsection, and negative margin from the brackets. Also: * Don't add inline 'style="direction: ltr;"' on every single editsection throughout the DOM. This was the only operation we were doing unconditionally. While I doubt the need of it in general, we can at least allow MediaWiki to do it right, and only add the override if needed. This saves quite a few DOM operations. Change-Id: I7a729edc2cd4a66ebc0ad6935ffd02cb9b948bff
34 lines
738 B
CSS
34 lines
738 B
CSS
/*!
|
|
* VisualEditor MediaWiki ViewPageTarget init styles.
|
|
*
|
|
* @copyright 2011-2014 VisualEditor Team and others; see AUTHORS.txt
|
|
* @license The MIT License (MIT); see LICENSE.txt
|
|
*/
|
|
|
|
/*csslint known-properties:false */
|
|
/* Bug: https://github.com/stubbornella/csslint/issues/436 */
|
|
|
|
/* Section edit links */
|
|
|
|
.mw-editsection {
|
|
white-space: nowrap;
|
|
/* bidi isolation: */
|
|
unicode-bidi: -moz-isolate;
|
|
unicode-bidi: -webkit-isolate;
|
|
unicode-bidi: isolate;
|
|
}
|
|
|
|
.mw-editsection-divider {
|
|
color: #555;
|
|
}
|
|
|
|
.ve-tabmessage-appendix {
|
|
font-size: 0.7em;
|
|
vertical-align: top;
|
|
line-height: 1.43em;
|
|
padding-left: 0.5em;
|
|
/* Use !important to override div.vectorTabs span */
|
|
background-image: none !important;
|
|
display: inline !important;
|
|
}
|