Page MenuHomePhabricator

Interaction Timeline V1: Inline diffs
Closed, ResolvedPublic3 Story Points

Description

Problem to solve

In the current Timeline, to scrutinize the contents of every edit, users must open the diffs in a new tab. This makes using the Timeline a multiple-tab tool, which may decrease productivity.


Acceptance criteria

  • When a user clicks on an edit box the diff container should open, which includes:
    • A fixed header
      • "Revision as of TIMESTAMP" linked to the revision, above each revision column
      • "by USERNAME" linked to the userpage, above each revision column
      • A close button in the top right corner. When clicked, the diff container should close.
    • A two-column wikitext diff with the same styling as it does on standard desktop Wikimedia diff pages (example)
      • Line numbers
      • Color coding and highlighting
      • + and - symbols
      • The diff should have a maximum height of 500 pixels and should scroll within if needed
  • Multiple diffs should be able to be opened on the same page.

Wireframe

Notes

There should probably be an onClick() handler on the revision card. When clicked, it will dispatch an action to go get the diff (if it doesn't already exist). The diff should probably be stored within the revision object. If this needs a loading indicator, you would probably have to add some sort of loading flag on each revision. It might not need a full-blown loading indicator, it could be something subtle... like the hover color sticks around or something like that.

API
Edit: https://test.wikipedia.org/w/api.php?action=compare&fromrev=338496&torelative=prev&formatversion=2
New Page: https://test.wikipedia.org/w/api.php?action=compare&fromrev=338495&torelative=prev&formatversion=2

Event Timeline

I made a (very rudimentary) wireframe to make sure I covered everything:

I like it! i think this a great one. But the collapse diff could be a X and in the diff box itself.

Maybe — but we probably wouldn't want it to scroll away. So maybe something like this:

I'm not 100% happy with those links at the top — they should only be there when necessary. Maybe we could tuck them at the end or hide them under a dropdown?

Well if someone is scrolling to read everything, then can scroll pass the links. We could also ask editors/admins what they prefer? Some ppl may want to see the information at the top even as they are reading....

Re-reading the previous feedback, no one has explicitly asked for those links yet. Let's start small and add on when requested:

I'm happy to dummy up another wireframe based on the latest Timeline design

TBolliger renamed this task from Interaction Timeline V1: In-line diffs to Interaction Timeline V1: Inline diffs.Dec 1 2017, 7:12 PM
TBolliger set the point value for this task to 3.Dec 1 2017, 7:19 PM
TBolliger updated the task description. (Show Details)Dec 4 2017, 6:29 PM

I made a newer wireframe:

I think the boarder of the diff box should be the same color (blue or green) to reinforce who made the edit. Thoughts?

dbarratt updated the task description. (Show Details)Dec 12 2017, 7:53 PM
dmaza claimed this task.Dec 19 2017, 12:18 AM
dmaza moved this task from Ready to In progress on the Anti-Harassment (AHT Sprint 11) board.
TBolliger reassigned this task from dmaza to dbarratt.Jan 17 2018, 9:18 PM
TBolliger added a subscriber: dmaza.
dbarratt updated the task description. (Show Details)Feb 6 2018, 6:05 PM

@TBolliger FYI I'm going to take a few artistic liberties, if you don't like it we can change it. :)

@TBolliger FYI I'm going to take a few artistic liberties, if you don't like it we can change it. :)

:) Looking forward to seeing what you create!

@TBolliger Should suppressed revisions be clickable at all? or should you able able to click them but it shows some sort of error?

I like the idea of not having them clickable at all, but there ought to be some sort of indicator that tells you the revision was suppressed. Should it just strike through the timestamp like it does on the history page?

Or maybe it's a combination of both?

I guess we could always go with what's on the diff page:

You cannot view this diff because one or both of the revisions has been suppressed.

I guess we could always go with what's on the diff page:

You cannot view this diff because one or both of the revisions has been suppressed.

Yes, this please.

If it doesn't open, then it might feel broken, even if there is some visual indication.

The same-colored border as the card it relates to looks really good! From this static screenshot everything looks good, but I'm going to have to test some real world cases to know.

My big concern — and maybe this is unavailable, given we're mixing two two-column UIs into a single UI — is that the left/right columns will be confusing. Hopefully the interactivity helps this make sense.