wikimedia/mediawiki-extensions-VisualEditor
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/extensions/VisualEditor synced 2024-11-28 16:20:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

mw.ViewPageTarget: Get rid of FOUC on edit section brackets

Browse source 
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
This commit is contained in:
Timo Tijhof 2014-05-07 02:08:53 +02:00
parent ad1d9d1b63
commit 7dae6496b3
3 changed files with 35 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.init.css
View file

@ -12,7 +12,6 @@
.mw-editsection {
white-space: nowrap;
padding-right: 0.25em;
/* bidi isolation: */
unicode-bidi: -moz-isolate;
unicode-bidi: -webkit-isolate;
@ -23,22 +22,6 @@
color: #555;
}
/* @noflip */
.mw-content-ltr .mw-editsection-expanded .mw-editsection-bracket:first-of-type,
.mw-content-rtl .mw-editsection-expanded .mw-editsection-bracket:not(:first-of-type) {
margin-left: -0.25em;
margin-right: 0.25em;
color: #555;
}
/* @noflip */
.mw-content-rtl .mw-editsection-expanded .mw-editsection-bracket:first-of-type,
.mw-content-ltr .mw-editsection-expanded .mw-editsection-bracket:not(:first-of-type) {
margin-right: -0.25em;
margin-left: 0.25em;
color: #555;
}
.ve-tabmessage-appendix {
font-size: 0.7em;
vertical-align: top;

27
modules/ve-mw/init/styles/ve.init.mw.ViewPageTarget.noscript.css
View file

@ -6,7 +6,9 @@
*/
/*csslint ids:false */
/* Hide VE edit tab and section edit things by default, and unhide them if VE is available. */
/* Hide VE edit tab and section edit things for noscript users.
* For script users they're always visible unless and until ve-not-available is added.
*/
.client-nojs #ca-ve-edit,
.client-nojs .mw-editsection-divider,
.client-nojs .mw-editsection-visualeditor,
@ -15,3 +17,26 @@
.ve-not-available .mw-editsection-visualeditor {
display: none;
}
/* For script users, expand brackets by default, unless and until ve-not-available is added */
/* @noflip */
.client-js .mw-content-ltr .mw-editsection-bracket:first-of-type,
.client-js .mw-content-rtl .mw-editsection-bracket:not(:first-of-type) {
margin-right: 0.25em;
color: #555;
}
/* @noflip */
.client-js .mw-content-rtl .mw-editsection-bracket:first-of-type,
.client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type) {
margin-left: 0.25em;
color: #555;
}
/* Must have the same, or higher, specificity (4x class/pseudo-class) as the rule above */
.client-js.ve-not-available .mw-content-ltr .mw-editsection-bracket,
.client-js.ve-not-available .mw-content-rtl .mw-editsection-bracket {
margin-left: 0;
margin-right: 0;
}

13
modules/ve-mw/init/targets/ve.init.mw.ViewPageTarget.init.js
View file

@ -258,10 +258,16 @@
},
setupSectionLinks: function () {
var $editsections = $( '#mw-content-text .mw-editsection' );
var $editsections = $( '#mw-content-text .mw-editsection' ),
bodyDir = $( 'body' ).css( 'direction' );
// Match direction of the user interface
// TODO: Why is this needed? It seems to work fine without.
if ( $editsections.css( 'direction' ) !== bodyDir ) {
// Avoid creating inline style attributes if the inherited value is already correct
$editsections.css( 'direction', bodyDir );
}
// match direction to the user interface
$editsections.css( 'direction', $( 'body' ).css( 'direction' ) );
// The "visibility" css construct ensures we always occupy the same space in the layout.
// This prevents the heading from changing its wrap when the user toggles editSourceLink.
if ( $editsections.find( '.mw-editsection-visualeditor' ).length === 0 ) {
@ -326,7 +332,6 @@
// init without refresh as that'd initialise for the wrong rev id (bug 50925)
// and would preserve the wrong DOM with a diff on top.
$editsections
.addClass( 'mw-editsection-expanded' )
.find( '.mw-editsection-visualeditor' )
.click( init.onEditSectionLinkClick )
;