These are bookmarklets (ie: browser bookmarks with Javascript in them) to perform functions to help make your GitHub PR review life easier.

bookmarklets.md

Bookmarklets to use with GitHub!

By Gabriel Staples

TODO:

1. Look into this one: https://gist.github.com/juanca/669c59f15a17e20022b8bd78b12889e6.

References:

1. https://gist.github.com/peterflynn/ace5dd3d7a8ec645cd42
2. https://gist.github.com/juanca/5fd799c5b094e3e4f8b709cd101d7403

Instructions:

Create these bookmarks in your browser with the following Name and URL fields. For the URL field, just copy and paste the code block exactly as written, line breaks and all, including the javascript: line at the top! Line breaks, whitespace, and multi-line C-style comments (ex: /* comment */) are all permitted (tested in Chrome at least) when copy-pasting into the URL field to create a bookmarklet. Once you've created a browser bookmark with this code in it, then put it in your bookmarks bar at the top of your browser, and click on them when needed to run the specified Javascript program to perform the prescribed function.

1. When viewing the "Files changed" tab during a GitHub PR review, some files with many changes may be collapsed. GitHub shows a "Load diff" link for these files, and says in small font underneath this link: "Large diffs are not rendered by default.". This makes it impossible to use Ctrl + F to search the page for certain code or text within those files, and it can be tedious to manually scroll down and click the "Load diff" link one-at-a-time for each of those files. So, click your "Load all diffs" bookmarklet below to quickly show (load) the diffs for all files.

   Name: "Load all diffs"

   URL:

   javascript:
   
   /*
   Load all diffs by expanding all files in the "Files changed" tab during a GitHub PR 
   review.
   Source: https://gist.github.com/juanca/5fd799c5b094e3e4f8b709cd101d7403
   */
   
   document.querySelectorAll('.load-diff-button').forEach(node => node.click())

2. Expand/open all outdated comments: when viewing the "Conversation" tab in a GitHub PR, frequently, many comments are hidden (collapsed) and marked as "Outdated". Click this "Show Outdated" bookmarklet to quickly expand and show every single one of those "Outdated" comments! This allows you to search the page for them, see them, and respond to them more easily.

   Source: https://gist.github.com/peterflynn/ace5dd3d7a8ec645cd42#gistcomment-3432765

   Name: "Show Outdated"

   URL:

   javascript:
   
   /*
   Quickly show (expand) all "Outdated" comments when looking at the "Conversation" tab during
   a GitHub PR review.
   */
   
   function expandAllOutdatedComments() 
   { 
       document.querySelectorAll(".js-resolvable-timeline-thread-container").forEach(
           function(node) 
           {
               node.open = true;
           }
       )
   }
   
   /* Program entry point */
   expandAllOutdatedComments();

3. Hide outdated comments. The opposite of the option just above.

   Name: "Hide Outdated"

   URL:

   javascript:
   
   /*
   Quickly hide (collapse) all "Outdated" comments when looking at the "Conversation" tab during
   a GitHub PR review.
   */
   
   function hideAllOutdatedComments() 
   { 
       document.querySelectorAll(".js-resolvable-timeline-thread-container").forEach(
           function(node) 
           {
               node.open = false;
           }
       )
   }
   
   /* Program entry point */
   hideAllOutdatedComments();  

---

Other Bookmarklets

Change video playback speed

References:

1. Stack Overflow: How to change the playing speed of videos in HTML5?

Right-click in browser --> Inspect --> in the Javascript "Console", type the following. This speeds up the playbax to 2.0x, for instance:

$('video').playbackRate = 2.0

Bookmarklets:

Name: 0.5x
URL:

javascript:

document.querySelector('video').playbackRate = 0.5;

Name: 1.0x
URL:

javascript:

document.querySelector('video').playbackRate = 1.0;

Name: 1.5x
URL:

javascript:

document.querySelector('video').playbackRate = 1.5;

Name: 2.0x
URL:

javascript:

document.querySelector('video').playbackRate = 2.0;

See also: https://gist.github.com/peterflynn/ace5dd3d7a8ec645cd42

Thanks @ElectricRCAircraftGuy for keeping this going. I would love a bookmarklet for loading all conversations, possible as a part of Show Outdated, or as a separate bookmarklet.

@bachand, the problem is, I don't know what I'm doing yet with this stuff. :) I know very very little about Javascript, and don't yet understand how to tell what the options are for functions to call and variable names to use, or where a documented API might live, or how web stuff really works yet. If you can find out how to do what you seek to do, by pointing to some other answer where someone else has pointed it out, I can add it to my list for sure though. Just post the link here.

Makes sense @ElectricRCAircraftGuy. Will let you know if I figure it out 👌

Hey everyone -- thanks for introducing me to this. If anyone uses GitHub's tasks lists, you might find this bookmarklet useful.

My workflow is to go through PR comments and leave myself checkboxes for todo items.

• like this

Then to use the bookmarklet below to jump from one to the next. It will scroll into view whichever task list item is below your current scroll position.

javascript: Array.from(document.querySelectorAll('.task-list-item-checkbox'))
  .reduce((accumulator, el) => {
    const rect = el.getBoundingClientRect();

    if (rect.height === 0 || rect.y < document.documentElement.scrollTop) {
      return accumulator;
    }

    accumulator.push({
      el,
      y: rect.y
    });

    accumulator.sort((a, b) => (a.y < b.y ? -1 : 1));

    return accumulator;
  }, [])
  .sort((a, b) => (a.y < b.y ? -1 : 1))[0]
  .el.scrollIntoView({ behavior: 'smooth', block: 'center' });

@bachand, you can try the following:
javascript:
document.querySelectorAll('.ajax-pagination-btn').forEach(node => node.click())