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

Lazy load most of the JS

Browse source 
With the parent of this commit (current master)
Loading the RevisionSlider JS without it expanded increases
the request size by roughly 767KB on first request and 242KB
on subsequent requests.
The large size of the first request is mainly down the to
dependancies of the slider.

This lazy loading patch means the RevisionSlider JS
only causes an increase of 184 KB per request.

If the user has the bar expand by default the main JS will
be loaded straight away (and the lazy JS will not be).

This patch also means that when only the bar is loaded the
pin button to set auto expand will not be shown.
This will be added once the RevsionSlider is loaded.

Bug: T151668
Change-Id: I054a82e9ea2aa89326464632e744497239f7adba
This commit is contained in:
addshore 2016-11-23 18:43:31 +00:00 committed by WMDE-Fisch
parent 33f84d0783
commit 2cf768f7b7
7 changed files with 102 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
RevisionSlider.hooks.php
View file

@ -57,7 +57,13 @@ class RevisionSliderHooks {
$autoExpand = $user->getBoolOption( 'userjs-revslider-autoexpand' );
$out = RequestContext::getMain()->getOutput();
$out->addModules( 'ext.RevisionSlider.init' );
if ( $autoExpand ) {
$out->addModules( 'ext.RevisionSlider.init' );
$stats->increment( 'RevisionSlider.event.load' );
} else {
$out->addModules( 'ext.RevisionSlider.lazy' );
$stats->increment( 'RevisionSlider.event.lazyload' );
}
$out->addModuleStyles( 'ext.RevisionSlider.noscript' );
$out->addJsConfigVars( 'extRevisionSliderOldRev', $oldRev->getId() );
$out->addJsConfigVars( 'extRevisionSliderNewRev', $newRev->getId() );
@ -69,7 +75,9 @@ class RevisionSliderHooks {
// rendered as intended before RL loads all CSS styles (avoid jumping after CSS is loaded).
// Some better and more future-proof solution (what if ButtonWidget switches to use other tags?)
// should be used if possible.
$button = ( new OOUI\Tag( 'a' ) )->setAttributes( [ 'style' => 'width: 100%;' ] );
$button = ( new OOUI\Tag( 'a' ) )->setAttributes(
[ 'style' => 'width: 100%; padding: 0.06em 0 0.06em 0;' ]
);
$label = ( new OOUI\Tag( 'span' ) )->setAttributes( [ 'style' => 'line-height: 1.875em;' ] );
$icon = ( new OOUI\Tag( 'span' ) )->setAttributes( [ 'style' => 'float: right;' ] );

14
extension.json
View file

@ -26,6 +26,18 @@
"RevisionSliderHooks": "RevisionSlider.hooks.php"
},
"ResourceModules": {
"ext.RevisionSlider.lazy": {
"scripts": [
"modules/ext.RevisionSlider.lazy.js"
],
"styles": [
"modules/ext.RevisionSlider.lazy.css"
],
"dependencies": [
"ext.RevisionSlider.Settings"
],
"position": "top"
},
"ext.RevisionSlider.init": {
"scripts": [
"modules/ext.RevisionSlider.init.js"
@ -34,6 +46,7 @@
"modules/ext.RevisionSlider.css"
],
"dependencies": [
"oojs-ui",
"mediawiki.jqueryMsg",
"ext.RevisionSlider.Settings",
"ext.RevisionSlider.Slider",
@ -71,6 +84,7 @@
"modules/ext.RevisionSlider.Settings.js"
],
"dependencies": [
"mediawiki.user",
"mediawiki.storage",
"mediawiki.cookie"
]

3
modules/ext.RevisionSlider.css
View file

@ -19,8 +19,7 @@
.mw-revslider-toggle-button .oo-ui-buttonElement-button {
width: 100%;
padding-top: 0.06em;
padding-bottom: 0.06em;
padding: 0.06em 0 0.06em 0;
}
.mw-revslider-toggle-button .oo-ui-labelElement-label {

36
modules/ext.RevisionSlider.init.js
View file

@ -2,10 +2,9 @@
var settings = new mw.libs.revisionSlider.Settings(),
autoExpand = settings.shouldAutoExpand(),
expanded = autoExpand,
initialized = false,
autoExpandButton,
toggleButton = OO.ui.ButtonWidget.static.infuse( $( '.mw-revslider-toggle-button' ) ),
initialize = function () {
initialize = function() {
var startTime = mw.now(),
api = new mw.libs.revisionSlider.Api( mw.util.wikiScript( 'api' ) );
@ -52,8 +51,6 @@
mw.log.error( err );
mw.track( 'counter.MediaWiki.RevisionSlider.error.init' );
}
initialized = true;
}, function ( err ) {
$( '.mw-revslider-placeholder' )
.text( mw.message( 'revisionslider-loading-failed' ).text() );
@ -62,15 +59,16 @@
} );
},
expandAndIntitialize = function () {
expand = function () {
toggleButton.setIcon( 'collapse' ).setTitle( mw.message( 'revisionslider-toggle-title-collapse' ).text() );
$( '.mw-revslider-slider-wrapper' ).show();
expanded = true;
if ( !initialized ) {
initialize();
}
};
},
mw.track( 'counter.MediaWiki.RevisionSlider.event.load' );
collapse = function () {
toggleButton.setIcon( 'expand' ).setTitle( mw.message( 'revisionslider-toggle-title-expand' ).text() );
$( '.mw-revslider-slider-wrapper' ).hide();
};
autoExpandButton = new OO.ui.ToggleButtonWidget( {
icon: 'pin',
@ -88,8 +86,7 @@
settings.setAutoExpand( autoExpand );
if ( autoExpand ) {
autoExpandButton.setTitle( mw.message( 'revisionslider-turn-off-auto-expand-title' ).text() );
expandAndIntitialize();
toggleButton.setIcon( 'collapse' ).setTitle( mw.message( 'revisionslider-toggle-title-collapse' ).text() );
expand();
mw.track( 'counter.MediaWiki.RevisionSlider.event.autoexpand_on' );
} else {
autoExpandButton.setTitle( mw.message( 'revisionslider-turn-on-auto-expand-title' ).text() );
@ -100,25 +97,22 @@
$( '.mw-revslider-container' ).append( autoExpandButton.$element );
if ( autoExpand ) {
expandAndIntitialize();
toggleButton.setIcon( 'collapse' ).setTitle( mw.message( 'revisionslider-toggle-title-collapse' ).text() );
}
toggleButton.connect( this, {
click: function () {
expanded = !expanded;
if ( expanded ) {
expandAndIntitialize();
toggleButton.setIcon( 'collapse' ).setTitle( mw.message( 'revisionslider-toggle-title-collapse' ).text() );
expand();
mw.track( 'counter.MediaWiki.RevisionSlider.event.expand' );
mw.hook( 'revslider.expand' ).fire();
} else {
$( '.mw-revslider-slider-wrapper' ).hide();
toggleButton.setIcon( 'expand' ).setTitle( mw.message( 'revisionslider-toggle-title-expand' ).text() );
collapse();
mw.track( 'counter.MediaWiki.RevisionSlider.event.collapse' );
mw.hook( 'revslider.collapse' ).fire();
}
}
} );
expand();
initialize();
}( mediaWiki, jQuery ) );

33
modules/ext.RevisionSlider.lazy.css Normal file
View file

@ -0,0 +1,33 @@
/* This CSS is duplicated in ext.RevisionSlider.css */
@media print {
.mw-revslider-container {
display: none;
}
}
.mw-revslider-container {
/* This will flip with CSSJanus in case */
/* the interface is in RTL */
direction: ltr;
position: relative;
z-index: 8;
}
.mw-revslider-toggle-button {
width: 100%;
text-align: center;
}
.mw-revslider-toggle-button .oo-ui-buttonElement-button {
width: 100%;
padding: 0.06em 0 0.06em 0;
}
.mw-revslider-toggle-button .oo-ui-labelElement-label {
line-height: 1.875em;
}
.mw-revslider-toggle-button .oo-ui-iconElement-icon {
float: right;
}

15
modules/ext.RevisionSlider.lazy.js Normal file
View file

@ -0,0 +1,15 @@
( function ( mw, $ ) {
var settings = new mw.libs.revisionSlider.Settings(),
autoExpand = settings.shouldAutoExpand();
if ( autoExpand ) {
mw.loader.load( 'ext.RevisionSlider.init' );
} else {
$( '.mw-revslider-toggle-button' ).click(
function () {
mw.loader.load( 'ext.RevisionSlider.init' );
}
);
}
}( mediaWiki, jQuery ) );

30
tests/browser/features/autoexpand.feature
View file

@ -8,23 +8,16 @@ Feature: RevisionSlider auto expand
Scenario: Revision slider does not automatically expand by default
Given I am on the diff page
Then The auto expand button should be visible
And The auto expand button should be off
And There should be a RevisionSlider expand button
Then There should be a RevisionSlider expand button
And RevisionSlider wrapper should be hidden
Scenario: Revision slider expands automatically when clicking auto expand
Given I am on the diff page
When I click on the auto expand button
And I wait for the setting to be saved
Then The auto expand button should be visible
And The auto expand button should be on
And RevisionSlider wrapper should be visible
And The RevisionSlider has loaded
Scenario: Revision slider expands automatically when auto expand is on
Given I am on the diff page
When I click on the auto expand button
When I click on the expand button
And RevisionSlider wrapper should be visible
And The RevisionSlider has loaded
And I have dismissed the help dialog
And I click on the auto expand button
And I wait for the setting to be saved
And I refresh the page
Then The auto expand button should be visible
@ -34,12 +27,17 @@ Feature: RevisionSlider auto expand
Scenario: Revision slider does not expand automatically when auto expand is off
Given I am on the diff page
When I click on the auto expand button
And I wait for the setting to be saved
When I click on the expand button
And RevisionSlider wrapper should be visible
And The RevisionSlider has loaded
And I have dismissed the help dialog
And I click on the auto expand button
And I wait for the setting to be saved
And I click on the auto expand button
And I wait for the setting to be saved
And I refresh the page
And I click on the expand button
And RevisionSlider wrapper should be visible
And The RevisionSlider has loaded
Then The auto expand button should be visible
And The auto expand button should be off
And RevisionSlider wrapper should be hidden