WMDE Technical Wishes/RevisionSlider

The RevisionSlider helps navigating through revisions

The RevisionSlider adds a slider view to the diff page. All revisions are shown as bars on a line. The RevisionSlider helps editors navigate through revisions without having to go back and forth between the diff and history pages. Hovering over the bars shows details (such as the edit summaries and authors), and dragging and dropping the knobs selects the revisions to be compared.

The goals of the RevisionSlider are to save time and page loads, as well as to make it easier to navigate through edit summaries from the diff page.

Background

Wish #16 on the German Technical Wishes Survey was to easily navigate through all edit summaries when comparing revisions on the diff page.

Inspired by DerHexer's revisionjumper gadget, the Community Tech team built a RevisionSlider prototype in the beginning of 2016. During the Wikimedia hackathon 2016 in Jerusalem, the prototype was picked up by the WMDE's Technical Wishes team and brought home to Berlin to fulfill the wish from the wishlist.

Development

Community Tech development

An overview of the work of the Community Tech team can be found here. They also asked for a first feedback on the prototype from the international community, which was positive in general.

WMDE's Technical Wishes team development

RevisionSlider prototype 0.1, after the hackathon 2016

The RevisionSlider, as built by the WMDE's Technical Wishes team, as it was on May 31st 2016

Screenshot Revision slider in the latest version, May 2017

Kick-Off at the Wikimedia Hackathon 2016

WMDE's Technical Wishes team started working on the RevisionSlider during the Wikimedia Hackathon in 2016. They added to the feature that the bars that are representing revisions are colored depending on the section that is highlighted.

Building a Mediawiki extension

Between May 2016 and the release as a default feature on German, Arabic and Hebrew Wikipedia in November 2016 the Technical Wishes team has been working on the following tasks:

The RevisionSlider Mediawiki extension has been set up
The first version to be released as a beta feature has been defined and scaled down into many different tasks
The coding work for the first version has been done
The extension successfully passed security review and all recommendations after the security review got adressed
The functionality got optimized for the usage in Left-to-Right and Right-to-Left languages (see also: mw:Extension:RevisionSlider/Developing a RTL-accessible feature in MediaWiki - what we've learned while creating the RevisionSlider
With in house user testing, the usability of the RevisionSlider got further improved
All critical bugs could be fixed and suggestions for improvements got adressed or identified as new feature options for a possible version 2.0

An overview on all technical details and tasks can be found on the workboard on Phabricator.

Test phase and gathering feedback

The RevisionSlider has been available for testing as a Beta feature on all Beta Wikipedias by June 15, on German Wikipedia, Hebrew Wikipedia and Arabic Wikipedia by July 22 (T140232, T140551, T140545), on Polish Wikipedia by August 4 (T141974) and on all wikis by September 13 (T143421).
Many users from different Wikis have tested RevisionSlider and helped improving the feature by reporting bugs and suggesting improvements.
mw:Extension talk:RevisionSlider turned out to be the main feedback page for the RevisionSlider.

RevisionSlider as a default feature

As of November 15, RevisionSlider is enabled as a default feature for all users on MW.org
As of November 22, RevisionSlider is enabled as a default feature for all users on German, Hebrew and Arabic Wikipedia
At the same time, RevisionSlider still is available as a beta feature on all other wikis
As of May 17, RevisionSlider is enabled as a default feature on all wikis

A more user-friendly user-interface ("UI")

While testing the old User Interface with different users the team noticed that it took most users quite a while to understand how the slider works. This is why the team was working on making the way of moving between the revisions more intuitive. The slightly different interface got very positive feedback and therefore got deployed on May 11, 2017. The new user interface was the last task the team aimed to finish before RevisionSlider could leave the beta status on all wikis.

Maintenance and further improvements

Please see the Workboard on Phabricator for detailed infos on current/upcoming tasks.

Usage

	When on a diff page, the slider is collapsed by default and only a narrow bar labelled "Browse history" is visible at the top of the page. Click on that bar to expand the RevisionSlider.
	Once expanded, the RevisionSlider fetches data about the revisions and allows you to navigate and compare revisions on the diff page.
	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.
	To select the revisions you want to compare, use the yellow and blue knobs. The blue knob controls the newer revision, the yellow knob maps to the older revision. There are several ways to do this: You can drag and drop the knob to the desired position on the slider. You can click on the desired position on the slider line. To select the newer revision, click on the blue line, and for selecting the older revision, click on the yellow line. To indicate which revision you’re about to select, a preview of a blue or yellow knob appears and the bar turns blue or yellow. You can click into the bar above the middle line (to select the newer revision) or below the line (to select the older revision). This also gives you a preview of the knob on the middle line. If you move the blue knob to a position left of the yellow knob, the yellow knob is automatically moved along, and vice versa if you move the yellow knob to a position right of the blue knob.
	Use the backward and forward arrows to move through revision history and show older and newer revisions.

Improved clicking behavior

Since the RevisionSlider left its beta status, the team received several ideas on how to improve its clicking behavior. Based on this feedback, they worked on a solution to make the feature more intuitive. The following changes have been made:

In the example the cursor is positioned in the second bar from the left, above the middle line. The bar appears blue above the slider line and a preview of the blue knob is visible. Furthermore, it can be seen that the yellow knob is being automatically moved along next to the blue one.

Clicking above and below the slider lines is possible

So far, in order to select a revision you had to click on the blue or yellow slider line or drag the sliders on the line. Now, a revision can also be selected by clicking above and below these lines. For example, in order to determine the newer revision, you can position the cursor above the slider line. The bar where the cursor is at then turns blue above the line, and a preview of the blue knob appears on the slider line. With this preview, it is clearly indicated which revision will be selected when you click. Accordingly, the older revision can be selected by positioning the cursor below the slider line. In this case, the bar below the middle line and the preview of the knob turn yellow. (phab:T172092)

Knobs can be moved more easily

So far, it wasn't possible to move the yellow knob on the slider line past the blue one and vice versa. For example, if you wanted to move the yellow knob past the blue one, you had to first move the blue knob and then the yellow one. With the new update, you can now move a knob directly to the desired position and the other knob automatically gets moved along next to it. (phab:T173566)

These changes are expected to be available on the August 31.

Opting Out

If you are not using the RevisionSlider at all and also don't want to see the collapsed RevisionSlider bar at the top of the diff page, you can opt-out by checking Don't show the RevisionSlider in your preferences under Appearance → Diffs.

Deployment Roadmap

July 22, 2016: Deployment as a beta feature on German, Arabic, Hebrew Wikipedia
August 4, 2016: Deployment as a beta feature on Polish Wikipedia
September 13, 2016: Deployment as a beta feature on all Wikis
November 15, 2016: Deployment as a default feature for all users on Mediawiki.org
November 22, 2016: Deployment as a default feature for all users on deWP, arWP, heWP
May 11, 2017: Deployment of the slightly different user interface to all wikis
May 17, 2017: Deployment as a default feature on all wikis

Feedback

Feedback is very welcome! So far most people have used mw:Extension talk:RevisionSlider to get in touch.