My approach to reviewing PRs

As I’ve written in How I review a full stack Pull Request, when I’m reviewing a large PR I like to review the changes one section at a time. For the projects I work with, there are typically top-level /src and /test folders, each of which contains multiple subfolders with one project in each. For a while I’ve wanted to collapse the Azure DevOps pull request view to that 2nd level (the project folders) to make it easier to review them one at a time, and recently I finally got round to making it happen.

Automating the collapse

I’ve written the following bookmarklet which collapses the file tree to the second level of folders. It’s a bit hacky and I daresay it’s not very robust, but it works enough that it adds value to me.

javascript:(function() {
    const sub = setInterval(() => {
        const items = document.querySelectorAll('tr.bolt-tree-row[aria-level="2"][aria-expanded="true"] .bolt-tree-expand-button');
        if (items.length === 0) {
            clearTimeout(sub);
            return;
        }

        items.forEach(el => el.click());
    }, 20);
})();

How to use the bookmarklet

To use a bookmarklet you must create a browser bookmark and provide the code as the URL. The exact details might vary by browser, but in google chrome you can do this as follows:

• Right click on your bookmark toolbar and click Add Page.

• Provide a name, which is what you will see in the bookmark toolbar.

• Paste the above script into the URL.

When you are viewing the PR in Azure DevOps, you simply click the bookmarklet in your bookmark bar, and the PR tree should collapse. I tested this script on the assumption of being at the top of the scrollable project structure and it’s untested if you’re not at the top. Because the script is a bit hacky, it’s quite possible that it won’t work perfectly every time, but you can keep clicking it without doing any harm.