The issue has been closed

Navigating comment/issue/PR edit history diffs with keyboard shortcuts #3965

darkred posted onGitHub

My suggestion is to add keyboard shortcuts in 'Comment edit history' diff windows, namely left and right arrows (←, → keys) in order to be able to directly navigate edit revisions in the order they were made.

This issue could be considered a follow-up of #1270

My reasoning:

Ever since the Comment edit history functionality was added in GitHub (May 2018), I thought it needed improvement. The feature is as quoted:

You can now view prior revisions of a comment by clicking on the “edited” dropdown in the comment’s header. Prior revisions are displayed as rendered prose diffs, and are visible to any user that can view the comment itself

i.e. as you view a revision diff, in order to to change to its previous/next one, you have to close the current diff window (via its X), and then select that specific change from the list of edits dropdown.

<details> <summary>Here is a screen capture:</summary>

</details>

What I suggest is, as you have a diff window open. e.g. then, by pressing ←, → keys, to directly navigate to the previous/next diff.

The reason I'm asking this, is to be able to view the diffs as a direct sequence in the order they were made, and so to easier find whether/how much an issue/PR/comment has deviated through the various edit revisions.

Something I've found that I believe it's useful: in each entry in the changes dropdown list (entries selector: details[open=""]> details-menu > ul > li > button) there's a data-edit-history-url attribute containing the URL of each diff content:

<button data-edit-history-url="/user_content_edits/___some_hash___">

While I agree that the current UI is pretty lacking, I don't think it's worth implementing all of this for comment edits. On the surface this feels like "a pretty easy feature" but I don't want to get into the rabbit hole.

posted by fregante about 4 years ago

If I may contribute in implementing this feature, I've made an effort, this userscript : https://gist.github.com/darkred/afbbe7b542493adae7523ec88f0b2efe

I got it as far as I could: unfortunately it doesn't retrieve the diff pages (https://github.com/user_content_edits/___some_hash___) , because this requires the use of v4 GraphQL API, (see userContentEdits), which I don't know how to use in a userscript .

<details> <summary>What my userscript effort does:</summary>

it waits for the changes entries dropdown list to appear
it retrieves the diff URLs from the entries and stores them in an array
it attaches "click" listener to each of the list entries,
when a diff window appears, it stores the entry index that was clicked
and it attaches "keydown" listeners for left/right arrow,
when such key is pressed, it supposedly requests the next/previous diff content page, and then replaces the diff window content (header+body) with the retrieved content .
</details>

posted by darkred about 4 years ago

A custom userscript would be better in this case. As for the implementation I suggest just capturing the ← → keys in the lightbox and just using .click() on the previous or next item + a currentOpenModalCloseButton.click(). GitHub will take care of loading and displaying the diffs; You just add the keyboard shortcuts.

posted by fregante about 4 years ago

Following your suggestion, the script works ok now. Much simpler approach. Thanks a lot!

posted by darkred about 4 years ago

Fund this Issue

$0.00

Funded

Pull requests

Navigating comment/issue/PR edit history diffs with keyboard shortcuts #3965

Company

Community

Support

Connect