Add annotation labels to the slider

Bug: T133270
Change-Id: Ibfc16196d35305a56c63d6c23a174712442f31a8

extension.json

@@ -80,6 +80,11 @@
 			"dependencies": [
 				"ext.RevisionSlider.DiffPage",
 				"ext.RevisionSlider.Pointer"
+			],
+			"messages": [
+				"revisionslider-annotations-newer",
+				"revisionslider-annotations-older",
+				"revisionslider-annotations-diffsize"
 			]
 		},
 		"ext.RevisionSlider.DiffPage": {

i18n/en.json

@@ -12,5 +12,8 @@
     "revisionslider-loading-placeholder": "The revision slider is loading.",
     "revisionslider-loading-failed": "The revision slider failed to load.",
     "revisionslider-loading-out-of-range": "The revision slider failed to load as the requested revisions are not in the top 500 versions of the page.",
-    "revisionslider-loading-noscript": "As you have JavaScript disabled the revision slider will not be able to load."
+    "revisionslider-loading-noscript": "As you have JavaScript disabled the revision slider will not be able to load.",
+    "revisionslider-annotations-newer": "newer",
+    "revisionslider-annotations-older": "older",
+    "revisionslider-annotations-diffsize": "diff size"
 }

i18n/qqq.json

@@ -12,5 +12,8 @@
 	"revisionslider-loading-placeholder": "Message shown while the RevisionSlider is still loading on a diff page. Once loaded the message is removed.",
 	"revisionslider-loading-failed": "Message shown if the RevisionSlider fails to initially load.",
 	"revisionslider-loading-out-of-range": "Message shown if the RevisionSlider fails to initially load due to revisions being requested that are not in the most recent 500 revisions.",
-	"revisionslider-loading-noscript": "Message shown while the RevisionSlider is trying to load but when JavaScript is disabled and thus it will not be successful."
+	"revisionslider-loading-noscript": "Message shown while the RevisionSlider is trying to load but when JavaScript is disabled and thus it will not be successful.",
+	"revisionslider-annotations-newer": "Label shown to indicate the direction to newer revisions.",
+	"revisionslider-annotations-older": "Label shown to indicate direction to older revisions.",
+	"revisionslider-annotations-diffsize": "Label shown vertically to indicate meaning of revision bar heights."
 }

modules/ext.RevisionSlider.SliderView.js

@@ -42,6 +42,7 @@
 					width: ( containerWidth + this.containerMargin ) + 'px'
 				} )
 				.append( $( '<a class="arrow left-arrow oo-ui-icon-caretLast" data-dir="-1"></a>' ) )
+				.append( $( '<div class="revisions-diffsize">' + mw.message( 'revisionslider-annotations-diffsize' ).text() + '</div>' ) )
 				.append( $( '<div class="revisions-container" />' )
 					.css( {
 						width: containerWidth + 'px'
@@ -99,12 +100,19 @@
 
 			this.$element = $slider;
 			$container.html( $slider );
+			$slider.after( this.makeAnnotations() );
 
 			this.slide( Math.floor( this.pointerTwo.getPosition() / this.slider.getRevisionsPerWindow() ), 0 );
 			diffPage.pushState( mw.config.values.extRevisionSliderOldRev, mw.config.values.extRevisionSliderNewRev, this );
 			diffPage.initOnPopState( this );
 		},
 
+		makeAnnotations: function () {
+			return $( '<div class="revisions-annotations"/>' )
+				.append( '<span class="revisions-older">← ' + mw.message( 'revisionslider-annotations-older' ).text() + '</span>' )
+				.append( '<span class="revisions-newer">' + mw.message( 'revisionslider-annotations-newer' ).text() + ' →</span>' );
+		},
+
 		initializePointers: function ( $revisions ) {
 			var oldRevElement = $revisions.find( 'div.revision[data-revid=\'' + mw.config.values.extRevisionSliderOldRev + '\']' ),
 				newRevElement = $revisions.find( 'div.revision[data-revid=\'' + mw.config.values.extRevisionSliderNewRev + '\']' );

modules/ext.RevisionSlider.css

@@ -104,6 +104,48 @@
     background-repeat: no-repeat;
 }
 
+
+.revisions-annotations {
+    color: #bcbcbc;
+    font-size: 88%;
+    margin: 0 60px;
+}
+.revisions-older {
+    float:left;
+}
+.revisions-newer {
+    float:right;
+}
+.revisions-diffsize {
+    color: #bcbcbc;
+    font-size: 88%;
+
+    width: 140px;
+    height: 20px;
+    border-bottom: solid 1px #bcbcbc;
+
+    position: absolute;
+    top: 60px;
+    left: -30px;
+
+    /* see http://stackoverflow.com/a/1080812/4782503 */
+    -webkit-transform: rotate(-90deg);
+    -moz-transform: rotate(-90deg);
+    -ms-transform: rotate(-90deg);
+    -o-transform: rotate(-90deg);
+    transform: rotate(-90deg);
+
+    /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
+    -webkit-transform-origin: 50% 50%;
+    -moz-transform-origin: 50% 50%;
+    -ms-transform-origin: 50% 50%;
+    -o-transform-origin: 50% 50%;
+    transform-origin: 50% 50%;
+
+    /* Should be unset in IE9+ I think. */
+    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
+}
+
 #revision-slider-darkness {
     background-color: white;
     filter:alpha(opacity=50); /* IE */