Page MenuHomePhabricator

[AOI] Prototype for RevisionSlider
Closed, ResolvedPublic

Description

Inspired by T114172: User test the slider prototype for RevisionJumper [AOI]

Let's do a quick prototype of a slider that appears on diff pages, showing the 50 most recent revisions.

Goal:
When the user is trying to find particular edits within the last 50 revisions, the slider will help the user navigate through diff pages without having to go back and forth between the diff and history pages. This will save time and page loads.

On the diff page, when the two revisions that you're viewing are both within the 50 most recent revisions:
A horizontal slider appears above the two revision columns.
The slider has 50 notches to represent the most recent 50 revisions.
There are two "knobs" on the slider, representing the revisions that you're currently comparing.

There is a small popup label that appears above each knob. The label displays the user name and the timestamp of the corresponding revision.
(I think this will probably be seen on hover over the knob -- if both labels are open all the time, then they'll run into each other when the knobs are too close. But it's an open question, if you can think of something smart.)

When the user moves one of the knobs, the label changes, showing the name and timestamp of that position on that slider.
The diff itself does not change when the user moves the knobs.

There is a button at the right end of the slider that says "Go". When the user clicks that button, the page reloads, showing the diff of the two revisions represented by the knobs.

If the user loads a diff that is outside of the most recent 50, then the slider doesn't appear.

Event Timeline

DannyH created this task.Oct 1 2015, 12:36 AM
DannyH raised the priority of this task from to Normal.
DannyH updated the task description. (Show Details)
DannyH moved this task to Ready on the Community-Tech-Sprint board.
DannyH added a subscriber: DannyH.
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptOct 1 2015, 12:36 AM
DannyH moved this task from Untriaged to Epic backlog on the Community-Tech board.
Qgil added a subscriber: Qgil.
kaldari added a subscriber: kaldari.Oct 6 2015, 9:24 PM

According to Danny, the prototype will just use developer art based on the wireframe, and then if we decide to develop the prototype further, we can have the design team take a pass at it. Note that jquery.ui.slider is already available as a ResourceLoader module in core if we want to use that.

kaldari renamed this task from Prototype for RevisionSlider to [AOI] Prototype for RevisionSlider.Oct 6 2015, 9:24 PM
kaldari moved this task from Epic backlog to To be estimated/discussed on the Community-Tech board.
kaldari edited projects, added Community-Tech-Sprint; removed Design.

Note that jquery.ui.slider is already available as a ResourceLoader module in core if we want to use that.

T49145: Formally deprecate jQuery UI after we've stopped using jQuery UI in extensions and core (replacing it with OOUI).

Note that jquery.ui.slider is already available as a ResourceLoader module in core if we want to use that.

T49145: Formally deprecate jQuery UI after we've stopped using jQuery UI in extensions and core (replacing it with OOUI).

@Ricordisamoa, thanks for pointing this out, but the Slider we need for the prototype is not yet available in OOJS UI, I think.
https://www.mediawiki.org/wiki/Wikimedia_Foundation_Design/Agora_Control_Library#Sliders is empty.

Niharika claimed this task.Oct 7 2015, 1:46 PM
Niharika moved this task from Ready to In Development on the Community-Tech-Sprint board.
Niharika edited a custom field.Oct 7 2015, 5:10 PM

Need to escape the special chars in the edit summaries so it doesn't break the HTML.

See https://test.wikipedia.org/w/index.php?title=Main_Page&diff=198767&oldid=177782.

You can probably use mw.html.escape() for that, just make sure you declare the module dependency in the gadget definition.

Also the slider doesn't load when the diff is showing 2 revisions that are adjacent, i.e. two nodes that are right next to each other.

I would suggest moving the CSS for this gadget out of the JS page and into a CSS page, for example, MediaWiki:Gadget-revisionslider.css. Gadget definitions can include both JS and CSS pages.

The styling for the tooltips should match the styling of the revision data on the diff page. See Danny's email for a specific example.

I would suggest moving the CSS for this gadget out of the JS page and into a CSS page, for example, MediaWiki:Gadget-revisionslider.css. Gadget definitions can include both JS and CSS pages.

This, for some reason, does not work. The CSS doesn't load at all. Is it possible that the CSS is trying to load before the js script executes?

The styling for the tooltips should match the styling of the revision data on the diff page. See Danny's email for a specific example.

Done.

Need to escape the special chars in the edit summaries so it doesn't break the HTML.

Done.

Also the slider doesn't load when the diff is showing 2 revisions that are adjacent, i.e. two nodes that are right next to each other.

Done. This was tricky.

Right now, if you click on Older edit or Newer edit, things break in an interesting way. It seems to put both knobs on the same edit, and then if you move one of the knobs it gives you a mon-diff on one side. See the screenshot below.

I think the ideal behavior is:

  • Let's say the slider is an alphabet. The left knob is on F, the right knob is on M.
  • I click older edit, and the left knob moves back one rev. Now the left is on E, the right stays on M.
  • I click newer edit, and the right knob moves forward one rev. Now left is on E, right is on N.

That bug is probably due to the diff=next and diff=prev query string values that are used in those cases. I'm not sure if Niharika's script is taking those into account, as they are different than the typical value for diff, which is normally a rev id.

This comment was removed by DannyH.

Moving this back to "In Development" for the Older edit/Newer edit bug described above.

Right now, if you click on Older edit or Newer edit, things break in an interesting way. It seems to put both knobs on the same edit, and then if you move one of the knobs it gives you a mon-diff on one side. See the screenshot below.
I think the ideal behavior is:

  • Let's say the slider is an alphabet. The left knob is on F, the right knob is on M.
  • I click older edit, and the left knob moves back one rev. Now the left is on E, the right stays on M.
  • I click newer edit, and the right knob moves forward one rev. Now left is on E, right is on N.

The "Older edit" and "Newer edit" links work in a way that the editors are very used to. They move both the left and right revisions back together, to show diffs between consecutive revisions. I could hack the links via the gadget and change the way they work (should be simple enough), but I don't think it's a good idea. If at all we don't like the way the links work, we could remove them because they are redundant anyways because of the slider. Thoughts? @DannyH, @kaldari
I have, for now, fixed the 'Older edit' link to work as expected (no overlapping handles).

In T114335#1721898, @NiharikaKohli wrote:

I would suggest moving the CSS for this gadget out of the JS page and into a CSS page, for example, MediaWiki:Gadget-revisionslider.css. Gadget definitions can include both JS and CSS pages.

This, for some reason, does not work. The CSS doesn't load at all. Is it possible that the CSS is trying to load before the js script executes?

I was wrong about this. CSS seems to be working fine now.

@NiharikaKohli: I would advise against changing the way the next and previous links work. I think we just need to make sure that when the slider loads after clicking on one of those links, the handles are in the right place, which may be tricky since we don't have the rev ID from the query string.

@kaldari, what's your definition of the handles being on the right place? What is the right place?

It looks like the current behavior on test.wiki is correct.

One thing that's weird though is that it's stripping out the zeroes from the timestamps, so 07:05 becomes 7:5.

Oh, you're right. I wasn't thinking about how that would affect the normal behavior. Yes, this is good. If people want to see the previous edit, they'll move the handle.

One thing that's weird though is that it's stripping out the zeroes from the timestamps, so 07:05 becomes 7:5.

I'm aware. I'll have to look more into formatting dates in Javascript to fix that.

In T114335#1725684, @NiharikaKohli wrote:

One thing that's weird though is that it's stripping out the zeroes from the timestamps, so 07:05 becomes 7:5.

I'm aware. I'll have to look more into formatting dates in Javascript to fix that.

Fixed.

I'm ready to call this done. Anything else on your end @DannyH?

DannyH added a comment.EditedOct 14 2015, 7:24 PM

There is one more piece, a little styling fix for the tooltips.

  • Take the words "Revision as of" out of the tooltop, so the top line is just the time/date
  • Add a space between the user name and the edit summary

Example:

12:00, 14 Oct 2015
Username

edit summary

And then this ticket's done, I promise.

There is one more piece, a little styling fix for the tooltips.

  • Take the words "Revision as of" out of the tooltop, so the top line is just the time/date
  • Add a space between the user name and the edit summary

Example:
12:00, 14 Oct 2015
Username
edit summary

Done!

kaldari closed this task as Resolved.Oct 24 2015, 12:44 AM
kaldari moved this task from In Development to Q1 2018-19 on the Community-Tech-Sprint board.
DannyH edited a custom field.
DannyH moved this task from To be estimated/discussed to Archive on the Community-Tech board.