Do not load RevisionSlider initially, add button to load 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.

Bug: T141871
Change-Id: Ib312f6225b85b9ebdf4ac5d16e254a57d5cf6411

RevisionSlider.hooks.php

@@ -48,20 +48,55 @@ class RevisionSliderHooks {
 		$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()
+					)
 				)
 			)
 		);

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",

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}}",

modules/ext.RevisionSlider.SliderView.js

@@ -13,7 +13,7 @@
 	$.extend( SliderView.prototype, {
 		revisionWidth: 16,
 
-		containerMargin: 140,
+		containerMargin: 160,
 
 		/**
 		 * @type {jQuery}

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;

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 ) );

tests/browser/features/betafeature.feature

@@ -7,10 +7,9 @@ Feature: RevisionSlider betafeature
   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
+    Then There should be a RevisionSlider expand button

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

tests/browser/features/help.feature

@@ -6,12 +6,14 @@ Feature: RevisionSlider help
     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 @@ Feature: RevisionSlider help
     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

tests/browser/features/history.feature

@@ -6,6 +6,7 @@ Feature: RevisionSlider history
     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

tests/browser/features/pointers.feature

@@ -6,6 +6,7 @@ Feature: RevisionSlider pointers
     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

tests/browser/features/support/pages/diff_page.rb

@@ -2,7 +2,8 @@ class DiffPage
   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')

tests/browser/features/support/step_definitions/common_steps.rb

@@ -42,10 +42,22 @@ Then(/^RevisionSlider is disabled as a beta feature$/) do
   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

tests/browser/features/timeline.feature

@@ -8,6 +8,7 @@ Feature: RevisionSlider timeline
   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 @@ Feature: RevisionSlider timeline
     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

tests/browser/features/tooltips.feature

@@ -6,6 +6,7 @@ Feature: RevisionSlider tooltips
     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