WMDE-leszek has uploaded a new change for review.
https://gerrit.wikimedia.org/r/304016
Change subject: DNM Do not load RevisionSlider initially, add a button to
show/hide it
......................................................................
DNM Do not load RevisionSlider initially, add a button to show/hide it
Instead of loading RevisionSlider only add a little button
to expand RevisionSlider on top of the diff page.
This makes RevisionSlider only steal a bit of space over the
diff, and only inserts quite a big slider to users that want
to have it visible for the particular diff.
API calls are only made once RevisionSlider has been expanded.
This is re-submit of b0f229d75f905a9570497dc095b410f20f4b53ae
that was reverted in I26427faaa00b38c2aa1377a66224c9062dcca302
Bug: T141871
Change-Id: I879de5774b2cce7b908e73cbbe869fd48d6afa23
---
M RevisionSlider.hooks.php
M i18n/en.json
M i18n/qqq.json
M modules/ext.RevisionSlider.SliderView.js
M modules/ext.RevisionSlider.css
M modules/ext.RevisionSlider.init.js
M tests/browser/features/betafeature.feature
A tests/browser/features/expand.feature
M tests/browser/features/help.feature
M tests/browser/features/history.feature
M tests/browser/features/pointers.feature
M tests/browser/features/support/pages/diff_page.rb
M tests/browser/features/support/step_definitions/common_steps.rb
M tests/browser/features/timeline.feature
M tests/browser/features/tooltips.feature
15 files changed, 185 insertions(+), 53 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/RevisionSlider
refs/changes/16/304016/1
diff --git a/RevisionSlider.hooks.php b/RevisionSlider.hooks.php
index 1938191..09f3328 100644
--- a/RevisionSlider.hooks.php
+++ b/RevisionSlider.hooks.php
@@ -48,20 +48,55 @@
$out->addJsConfigVars( 'extRevisionSliderOldRev',
$oldRev->getId() );
$out->addJsConfigVars( 'extRevisionSliderNewRev',
$newRev->getId() );
$out->addJsConfigVars( 'extRevisionSliderTimeOffset', intval(
$timeOffset ) );
+ $out->enableOOUI();
+
+ // FIXME: this really not nice to inject those elements to
ButtonWidget like that
+ // but this is only done to have inline styles set for those
elements, so they are
+ // rendered as intended before RL loads all CSS styles (avoid
jumping after CSS is loaded).
+ // Some better solution and more future-proof (what if
ButtonWidget switches to use other tags?)
+ // should be used if possible.
+ $button = new OOUI\Tag( 'a' );
+ $label = new OOUI\Tag( 'span' );
+ $icon = new OOUI\Tag( 'span' );
+ $button->setAttributes( [ 'style' => 'width: 100%;' ] );
+ $label->setAttributes( [ 'style' => 'line-height: 1.875em;' ] );
+ $icon->setAttributes( [ 'style' => 'float: right;' ] );
+
+ $toggleButton = new OOUI\ButtonWidget( [
+ 'label' => ( new Message( 'revisionslider-toggle-label'
) )->text(),
+ 'icon' => 'expand',
+ 'button' => $button,
+ 'labelElement' => $label,
+ 'iconElement' => $icon,
+ 'id' => 'mw-revslider-slider-toggle',
+ 'classes' => [ 'mw-revslider-toggle-button' ],
+ 'infusable' => true,
+ 'framed' => false,
+ ] );
+ $toggleButton->setAttributes( [ 'style' => 'width: 100%;
text-align: center;' ] );
+
$out->addHTML(
Html::rawElement(
'div',
[
'id' => 'mw-revslider-container',
- 'style' => 'min-height: 150px;',
+ 'style' => 'border: 1px solid #cccccc;'
],
- Html::element(
- 'p',
+ $toggleButton .
+ Html::rawElement(
+ 'div',
[
- 'id' =>
'mw-revslider-placeholder',
- 'style' => 'text-align: center',
+ 'id' =>
'mw-revslider-slider-wrapper',
+ 'style' => 'min-height: 142px;
display: none; border-top: 1px solid #cccccc;',
],
- ( new Message(
'revisionslider-loading-placeholder' ) )->text()
+ Html::element(
+ 'p',
+ [
+ 'id' =>
'mw-revslider-placeholder',
+ 'style' => 'text-align:
center',
+ ],
+ ( new Message(
'revisionslider-loading-placeholder' ) )->text()
+ )
)
)
);
diff --git a/i18n/en.json b/i18n/en.json
index 264bb85..bbb59f6 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -8,6 +8,7 @@
"revisionslider-desc": "Shows a slider allowing selecting and comparing of
revisions on a diff page",
"revisionslider-beta-feature-message": "RevisionSlider",
"revisionslider-beta-feature-description": "Show a revision slider when
comparing two revisions of a page.",
+ "revisionslider-toggle-label": "RevisionSlider",
"revisionslider-page-size": "$1 {{PLURAL:$2|byte|bytes}}",
"revisionslider-change-size": "$1 {{PLURAL:$3|byte|bytes}}",
"revisionslider-label-date": "Date",
diff --git a/i18n/qqq.json b/i18n/qqq.json
index 783d9b5..390731a 100644
--- a/i18n/qqq.json
+++ b/i18n/qqq.json
@@ -10,6 +10,7 @@
"revisionslider-desc":
"{{desc|name=RevisionSlider|url=https://www.mediawiki.org/wiki/Extension:RevisionSlider}}";,
"revisionslider-beta-feature-message": "Label for the RevisionSlider
Beta Feature.",
"revisionslider-beta-feature-description": "Description for the
RevisionSlider Beta Feature, describing the feature that will be enabled.",
+ "revisionslider-toggle-label": "Label of the button toggling the
visibility of RevisionSlider",
"revisionslider-page-size": "Page size after the
revision.\n\nParameters:\n$1 - number of bytes formatted for output (with
mw.language.converNumber)\n$2 - number of bytes, could be used with
PLURAL\n{{Identical|Byte}}",
"revisionslider-change-size": "Change size, ie. number of bytes added
or removed in the revision.\n\nParameters:\n$1 - change size formatted for
output (colour-coded HTML element, including plus or minus sign)\n$2 - change
size (in bytes), can be negative\n$3 - change size (in bytes) without a
sign\n{{Identical|Byte}}",
"revisionslider-label-date": "Label for the creation date of the
revision.\n{{Identical|Date}}",
diff --git a/modules/ext.RevisionSlider.SliderView.js
b/modules/ext.RevisionSlider.SliderView.js
index 641ebf6..da69960 100644
--- a/modules/ext.RevisionSlider.SliderView.js
+++ b/modules/ext.RevisionSlider.SliderView.js
@@ -13,7 +13,7 @@
$.extend( SliderView.prototype, {
revisionWidth: 16,
- containerMargin: 140,
+ containerMargin: 160,
/**
* @type {jQuery}
diff --git a/modules/ext.RevisionSlider.css b/modules/ext.RevisionSlider.css
index cba7509..6c5f2f9 100644
--- a/modules/ext.RevisionSlider.css
+++ b/modules/ext.RevisionSlider.css
@@ -7,6 +7,27 @@
position: relative;
}
+#mw-revslider-slider-wrapper {
+ padding: 10px;
+}
+
+.mw-revslider-toggle-button {
+ width: 100%;
+ text-align: center;
+}
+
+.mw-revslider-toggle-button .oo-ui-buttonElement-button {
+ width: 100%;
+}
+
+.mw-revslider-toggle-button .oo-ui-labelElement-label {
+ line-height: 1.875em;
+}
+
+.mw-revslider-toggle-button .oo-ui-iconElement-icon {
+ float: right;
+}
+
.mw-revslider-revision {
position: relative;
margin-top: 70px;
diff --git a/modules/ext.RevisionSlider.init.js
b/modules/ext.RevisionSlider.init.js
index 03f7228..8803d48 100644
--- a/modules/ext.RevisionSlider.init.js
+++ b/modules/ext.RevisionSlider.init.js
@@ -1,53 +1,79 @@
( function ( mw, $ ) {
- var startTime = mw.now(),
- api = new mw.libs.revisionSlider.Api( mw.util.wikiScript( 'api'
) );
+ var expanded = false,
+ initialized = false,
+ /*jshint -W024 */
+ toggleButton = OO.ui.ButtonWidget.static.infuse(
'mw-revslider-slider-toggle' ),
+ /*jshint +W024 */
+ initialize = function () {
+ var startTime = mw.now(),
+ api = new mw.libs.revisionSlider.Api(
mw.util.wikiScript( 'api' ) );
- mw.track( 'counter.MediaWiki.RevisionSlider.event.init' );
- mw.libs.revisionSlider.userOffset =
mw.user.options.values.timecorrection ?
mw.user.options.values.timecorrection.split( '|' )[ 1 ] :
mw.config.values.extRevisionSliderTimeOffset;
+ mw.track( 'counter.MediaWiki.RevisionSlider.event.init'
);
+ mw.libs.revisionSlider.userOffset =
mw.user.options.values.timecorrection ?
mw.user.options.values.timecorrection.split( '|' )[ 1 ] :
mw.config.values.extRevisionSliderTimeOffset;
- api.fetchRevisionData( mw.config.get( 'wgPageName' ), {
- startId: mw.config.values.extRevisionSliderNewRev,
- limit: mw.libs.revisionSlider.calculateRevisionsPerWindow( 140,
16 ),
+ api.fetchRevisionData( mw.config.get( 'wgPageName' ), {
+ startId:
mw.config.values.extRevisionSliderNewRev,
+ limit:
mw.libs.revisionSlider.calculateRevisionsPerWindow( 160, 16 ),
- success: function ( data ) {
- var revs,
- revisionList,
- $container,
- slider;
+ success: function ( data ) {
+ var revs,
+ revisionList,
+ $container,
+ slider;
- mw.track(
'timing.MediaWiki.RevisionSlider.timing.initFetchRevisionData', mw.now() -
startTime );
+ mw.track(
'timing.MediaWiki.RevisionSlider.timing.initFetchRevisionData', mw.now() -
startTime );
- try {
- revs = data.revisions;
- revs.reverse();
+ try {
+ revs = data.revisions;
+ revs.reverse();
- revisionList = new
mw.libs.revisionSlider.RevisionList( mw.libs.revisionSlider.makeRevisions( revs
) );
+ revisionList = new
mw.libs.revisionSlider.RevisionList( mw.libs.revisionSlider.makeRevisions( revs
) );
- $container = $( '#mw-revslider-container' );
- slider = new mw.libs.revisionSlider.Slider(
revisionList );
- slider.getView().render( $container );
+ $container = $(
'#mw-revslider-slider-wrapper' );
+ slider = new
mw.libs.revisionSlider.Slider( revisionList );
+ slider.getView().render(
$container );
- if ( !mw.user.options.get(
'userjs-revslider-hidehelp' ) ) {
-
mw.libs.revisionSlider.HelpDialog.show();
- ( new mw.Api() ).saveOption(
'userjs-revslider-hidehelp', true );
+ if ( !mw.user.options.get(
'userjs-revslider-hidehelp' ) ) {
+
mw.libs.revisionSlider.HelpDialog.show();
+ ( new mw.Api()
).saveOption( 'userjs-revslider-hidehelp', true );
+ }
+
+ $( '#mw-revslider-placeholder'
).remove();
+ mw.track(
'timing.MediaWiki.RevisionSlider.timing.init', mw.now() - startTime );
+ } catch ( err ) {
+ $( '#mw-revslider-placeholder' )
+ .text( mw.message(
'revisionslider-loading-failed' ).text() );
+ console.log( err );
+ mw.track(
'counter.MediaWiki.RevisionSlider.error.init' );
+ }
+
+ initialized = true;
+ },
+ error: function ( err ) {
+ $( '#mw-revslider-placeholder' )
+ .text( mw.message(
'revisionslider-loading-failed' ).text() );
+ console.log( err );
+ mw.track(
'counter.MediaWiki.RevisionSlider.error.init' );
}
+ } );
+ };
- $( '#mw-revslider-placeholder' ).remove();
- mw.track(
'timing.MediaWiki.RevisionSlider.timing.init', mw.now() - startTime );
- } catch ( err ) {
- $( '#mw-revslider-placeholder' )
- .text( mw.message(
'revisionslider-loading-failed' ).text() );
- console.log( err );
- mw.track(
'counter.MediaWiki.RevisionSlider.error.init' );
+ mw.track( 'counter.MediaWiki.RevisionSlider.event.load' );
+
+ toggleButton.connect( this, {
+ click: function () {
+ expanded = !expanded;
+ toggleButton.setIcon( expanded ? 'collapse' : 'expand'
);
+ $( '#mw-revslider-slider-wrapper' ).toggle();
+ if ( expanded ) {
+ mw.track(
'counter.MediaWiki.RevisionSlider.event.expand' );
+ } else {
+ mw.track(
'counter.MediaWiki.RevisionSlider.event.collapse' );
}
-
- },
- error: function ( err ) {
- $( '#mw-revslider-placeholder' )
- .text( mw.message(
'revisionslider-loading-failed' ).text() );
- console.log( err );
- mw.track( 'counter.MediaWiki.RevisionSlider.error.init'
);
+ if ( initialized ) {
+ return;
+ }
+ initialize();
}
} );
-
}( mediaWiki, jQuery ) );
diff --git a/tests/browser/features/betafeature.feature
b/tests/browser/features/betafeature.feature
index 1a026af..cee6bf5 100644
--- a/tests/browser/features/betafeature.feature
+++ b/tests/browser/features/betafeature.feature
@@ -7,10 +7,9 @@
Scenario: RevisionSlider is not loaded when feature disabled
Given RevisionSlider is disabled as a beta feature
And I am on the diff page
- Then There should not be a RevisionSlider placeholder
+ Then There should not be a RevisionSlider expand button
Scenario: RevisionSlider is loaded when feature enabled
Given RevisionSlider is enabled as a beta feature
And I am on the diff page
- And The RevisionSlider has loaded
- Then There should be a RevisionSlider container
\ No newline at end of file
+ Then There should be a RevisionSlider expand button
\ No newline at end of file
diff --git a/tests/browser/features/expand.feature
b/tests/browser/features/expand.feature
new file mode 100644
index 0000000..c04185c
--- /dev/null
+++ b/tests/browser/features/expand.feature
@@ -0,0 +1,28 @@
+@chrome @en.wikipedia.beta.wmflabs.org @firefox @integration
+Feature: RevisionSlider expand
+ Background:
+ Given I am logged in
+ And I have reset my preferences
+ And RevisionSlider is enabled as a beta feature
+ And a page with 2 revision(s) exists
+
+ Scenario: RevisionSlider is collapsed initially
+ Given I am on the diff page
+ Then There should be a RevisionSlider expand button
+ And RevisionSlider wrapper should be hidden
+
+ Scenario: RevisionSlider loads after expanding
+ Given I am on the diff page
+ And I click on the expand button
+ Then RevisionSlider wrapper should be visible
+ And The RevisionSlider has loaded
+
+ Scenario: RevisionSlider hides after collapsing
+ Given I am on the diff page
+ And I click on the expand button
+ Then RevisionSlider wrapper should be visible
+ And The RevisionSlider has loaded
+ And I have closed the help dialog at the start
+ And The help dialog is hidden
+ Given I click on the expand button
+ Then RevisionSlider wrapper should be hidden
diff --git a/tests/browser/features/help.feature
b/tests/browser/features/help.feature
index f3a275b..ba5a0f5 100644
--- a/tests/browser/features/help.feature
+++ b/tests/browser/features/help.feature
@@ -6,12 +6,14 @@
And I have reset my preferences
And RevisionSlider is enabled as a beta feature
And I am on the diff page
+ And I click on the expand button
Scenario: RevisionSlider tutorial is present on first load only
Given The RevisionSlider has loaded
Then The help dialog should be visible
When I have closed the help dialog at the start
And I refresh the page
+ And I click on the expand button
And The RevisionSlider has loaded
Then The help dialog should not be present
@@ -23,5 +25,6 @@
And I have moved to the next step
And I have closed the help dialog at the end
And I refresh the page
+ And I click on the expand button
And The RevisionSlider has loaded
Then The help dialog should not be present
\ No newline at end of file
diff --git a/tests/browser/features/history.feature
b/tests/browser/features/history.feature
index 772fcd3..1ff0110 100644
--- a/tests/browser/features/history.feature
+++ b/tests/browser/features/history.feature
@@ -6,6 +6,7 @@
And RevisionSlider is enabled as a beta feature
And a page with 4 revision(s) exists
And I am on the diff page
+ And I click on the expand button
And The RevisionSlider has loaded
And I have closed the help dialog at the start
And The help dialog is hidden
diff --git a/tests/browser/features/pointers.feature
b/tests/browser/features/pointers.feature
index 581b495..35db425 100644
--- a/tests/browser/features/pointers.feature
+++ b/tests/browser/features/pointers.feature
@@ -6,6 +6,7 @@
And RevisionSlider is enabled as a beta feature
And a page with 5 revision(s) exists
And I am on the diff page
+ And I click on the expand button
And The RevisionSlider has loaded
And I have closed the help dialog at the start
And The help dialog is hidden
diff --git a/tests/browser/features/support/pages/diff_page.rb
b/tests/browser/features/support/pages/diff_page.rb
index 785175e..51b93d4 100644
--- a/tests/browser/features/support/pages/diff_page.rb
+++ b/tests/browser/features/support/pages/diff_page.rb
@@ -2,7 +2,8 @@
include PageObject
p(:revisionslider_placeholder, id: 'mw-revslider-placeholder')
- div(:revisionslider_container, id: 'mw-revslider-container')
+ div(:revisionslider_wrapper, id: 'mw-revslider-slider-wrapper')
+ div(:revisionslider_toggle_button, id: 'mw-revslider-slider-toggle')
div(:revisionslider_darkness, id: 'mw-revslider-darkness')
div(:revisionslider_help_dialog, id: 'revisionslider-help-dialog')
diff --git a/tests/browser/features/support/step_definitions/common_steps.rb
b/tests/browser/features/support/step_definitions/common_steps.rb
index 8b6ea53..7594c58 100644
--- a/tests/browser/features/support/step_definitions/common_steps.rb
+++ b/tests/browser/features/support/step_definitions/common_steps.rb
@@ -42,10 +42,22 @@
visit(SpecialPreferencesPage).disable_revisionslider
end
-Then(/^There should be a RevisionSlider container/) do
- expect{ on(DiffPage).revisionslider_container }.not_to raise_error
+Then(/^There should be a RevisionSlider expand button/) do
+ expect{ on(DiffPage).revisionslider_toggle_button }.not_to raise_error
end
-Then(/^There should not be a RevisionSlider placeholder$/) do
- expect{ on(DiffPage).revisionslider_placeholder }.to raise_error
+Then(/^There should not be a RevisionSlider expand button/) do
+ expect{ on(DiffPage).revisionslider_toggle_button }.to raise_error
+end
+
+Then(/^RevisionSlider wrapper should be hidden/) do
+ on(DiffPage).revisionslider_wrapper_element.visible?.should be_falsey
+end
+
+Then(/^RevisionSlider wrapper should be visible/) do
+ on(DiffPage).revisionslider_wrapper_element.visible?.should be_truthy
+end
+
+Given(/^I click on the expand button/) do
+ on(DiffPage).revisionslider_toggle_button_element.click
end
\ No newline at end of file
diff --git a/tests/browser/features/timeline.feature
b/tests/browser/features/timeline.feature
index f43b4e6..aa50cb3 100644
--- a/tests/browser/features/timeline.feature
+++ b/tests/browser/features/timeline.feature
@@ -8,6 +8,7 @@
Scenario: RevisionSlider timeline arrows to be disabled with 3 revisions
Given a page with 3 revision(s) exists
And I am on the diff page
+ And I click on the expand button
And The RevisionSlider has loaded
And I have closed the help dialog at the start
Then The backward arrow should be disabled
@@ -17,6 +18,7 @@
Given a page with 30 revision(s) exists
And The window size is 800 by 600
And I am on the diff page
+ And I click on the expand button
And The RevisionSlider has loaded
And I have closed the help dialog at the start
And The help dialog is hidden
diff --git a/tests/browser/features/tooltips.feature
b/tests/browser/features/tooltips.feature
index 494a827..bf14d71 100644
--- a/tests/browser/features/tooltips.feature
+++ b/tests/browser/features/tooltips.feature
@@ -6,6 +6,7 @@
And RevisionSlider is enabled as a beta feature
And a page with 4 revision(s) exists
And I am on the diff page
+ And I click on the expand button
And The RevisionSlider has loaded
And I have closed the help dialog at the start
--
To view, visit https://gerrit.wikimedia.org/r/304016
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I879de5774b2cce7b908e73cbbe869fd48d6afa23
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/RevisionSlider
Gerrit-Branch: master
Gerrit-Owner: WMDE-leszek <leszek.mani...@wikimedia.de>
_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
