Merge "Make the "show help" button a OOjs ButtonWidget"

extension.json

@@ -93,7 +93,9 @@
 			],
 			"dependencies": [
 				"jquery.ui.draggable",
+				"oojs-ui",
 				"ext.RevisionSlider.DiffPage",
+				"ext.RevisionSlider.HelpDialog",
 				"ext.RevisionSlider.Pointer"
 			],
 			"messages": [

i18n/en.json

@@ -20,7 +20,6 @@
     "revisionslider-loading-failed": "The RevisionSlider failed to load.",
     "revisionslider-arrow-tooltip-newer": "See newer revisions",
     "revisionslider-arrow-tooltip-older": "See older revisions",
-    "revisionslider-show-help": "?",
     "revisionslider-show-help-tooltip": "Show help text",
     "revisionslider-help-dialog-slide1": "The RevisionSlider helps you to navigate and compare revisions on the diff page. It is based on a [[m:WMDE_Technical_Wishes/RevisionSlider|community wish]] from the German-speaking community technical wishlist.",
     "revisionslider-help-dialog-slide2": "Each bar represents a page revision. Bars on the top show growth in size of the page, bars on the bottom show a reduction. In the image, revision 1 represents added content, while revision 2 represents removal of content.",

i18n/qqq.json

@@ -22,7 +22,6 @@
 	"revisionslider-loading-failed": "Message shown if the RevisionSlider fails to initially load.",
 	"revisionslider-arrow-tooltip-newer": "Text shown after hovering the button scrolling to newer revisions.",
 	"revisionslider-arrow-tooltip-older": "Text shown after hovering the button scrolling to older revisions.",
-	"revisionslider-show-help": "A symbol shown in the \"Show help\" button.",
 	"revisionslider-show-help-tooltip": "Text shown in a tooltip for the \"Show help\" button.",
 	"revisionslider-help-dialog-slide1": "Text shown on the first slide of the help dialog.",
 	"revisionslider-help-dialog-slide2": "Text shown on the second slide of the help dialog.",

modules/ext.RevisionSlider.SliderView.js

@@ -13,7 +13,7 @@
 	$.extend( SliderView.prototype, {
 		revisionWidth: 16,
 
-		containerMargin: 120,
+		containerMargin: 140,
 
 		/**
 		 * @type {jQuery}
@@ -70,6 +70,7 @@
 				$slider = $( '<div>' )
 					.addClass( 'mw-revslider-revision-slider' )
 					.css( { direction: $container.css( 'direction' ) } ),
+				helpButton,
 				self = this;
 
 			if ( $slider.css( 'direction' ) === 'rtl' ) {
@@ -79,6 +80,23 @@
 			this.pointerOlder = new mw.libs.revisionSlider.Pointer( 'mw-revslider-pointer-older' );
 			this.pointerNewer = new mw.libs.revisionSlider.Pointer( 'mw-revslider-pointer-newer' );
 
+			helpButton = new OO.ui.ButtonWidget( {
+				icon: 'help',
+				framed: false,
+				classes: [ 'mw-revslider-show-help' ]
+			} );
+			helpButton.$element
+				.click( function () {
+					mw.libs.revisionSlider.HelpDialog.show();
+				} )
+				.tipsy( {
+					gravity: $( 'body' ).hasClass( 'ltr' ) ? 'se' : 'sw',
+					offset: 15,
+					title: function () {
+						return mw.msg( 'revisionslider-show-help-tooltip' );
+					}
+				} );
+
 			pointerContainerStyle = { left: pointerContainerPosition + 'px', width: pointerContainerWidth + 'px' };
 			if ( $slider.css( 'direction' ) === 'rtl' ) {
 				// Due to properly limit dragging a pointer on the right side of the screen,
@@ -127,6 +145,7 @@
 								return mw.message( 'revisionslider-arrow-tooltip-newer' ).text();
 							}
 						} ),
+					helpButton.$element,
 					$( '<div>' ).css( { clear: 'both' } ),
 					$( '<div>' )
 						.addClass( 'mw-revslider-pointer-container' )

modules/ext.RevisionSlider.css

@@ -232,16 +232,7 @@
 
 .mw-revslider-show-help {
 	position: absolute;
-	right: -18px;
-	bottom: 7px;
-	color: #347bff;
-	border: 2px solid #347bff;
-	padding: 0;
-	background: #fff;
-	font-size: 15px;
-	line-height: 15px;
-	font-weight: bold;
-	cursor: pointer;
-	height: 25px;
-	width: 25px;
+	right: 0;
+	bottom: 0;
+	margin-right: 0;
 }

modules/ext.RevisionSlider.init.js

@@ -7,7 +7,7 @@
 
 	api.fetchRevisionData( mw.config.get( 'wgPageName' ), {
 		startId: mw.config.values.extRevisionSliderNewRev,
-		limit: mw.libs.revisionSlider.calculateRevisionsPerWindow( 120, 16 ),
+		limit: mw.libs.revisionSlider.calculateRevisionsPerWindow( 140, 16 ),
 
 		success: function ( data ) {
 			var revs,
@@ -32,22 +32,6 @@
 					( new mw.Api() ).saveOption( 'userjs-revslider-hidehelp', true );
 				}
 
-				$container.append(
-					$( '<button>' )
-						.click( function () {
-							mw.libs.revisionSlider.HelpDialog.show();
-						} )
-						.text( mw.message( 'revisionslider-show-help' ).text() )
-						.addClass( 'mw-revslider-show-help' )
-						.tipsy( {
-							gravity: $( 'body' ).hasClass( 'ltr' ) ? 'se' : 'sw',
-							offset: 15,
-							title: function () {
-								return mw.msg( 'revisionslider-show-help-tooltip' );
-							}
-						} )
-				);
-
 				$( '#mw-revslider-placeholder' ).remove();
 				mw.track( 'timing.MediaWiki.RevisionSlider.timing.init', mw.now() - startTime );
 			} catch ( err ) {