bitbucket-diff-improvements.tampermonkey.js

// ==UserScript==
// @name         Bitbucket Diff Improvements
// @version      1.0
// @description  Adds features to Bitbucket Diff view:
//                * Visual emphasis to more heavily changed files in the diff summary
//                * Expand/collapse file diffs, auto-collapse package-lock.json
//                * Back to top fixed link
// @author       Aaron Beall
// @match        https://bitbucket.org/*
// ==/UserScript==


{
    const render = () => {
        if (document.querySelector("#commit-files-summary")) {
            const median = all => all.slice().sort()[Math.floor(all.length / 2)];
            const mean = all => all.reduce((total, current) => total + current) / all.length;
            const allLinesAdded = Array.from(document.querySelectorAll("#commit-files-summary .file .lines-added")).map(node => parseInt(node.textContent));
            const allLinesRemoved = Array.from(document.querySelectorAll("#commit-files-summary .file .lines-removed")).map(node => -parseInt(node.textContent));
            const averageLinesAdded = mean(allLinesAdded);
            const averageLinesRemoved = mean(allLinesRemoved);
            const items = Array.from(document.querySelectorAll("#commit-files-summary .file"));
            items.forEach((item, i) => {
                const linesAdded = allLinesAdded[i];
                const linesRemoved = allLinesRemoved[i];
                const linesAddedElem = item.querySelector(".lines-added");
                if (linesAdded >= averageLinesAdded) linesAddedElem.style.cssText = `color: white; font-weight: bold; background: green`;
                else if (linesAdded > 0) linesAddedElem.style.opacity = .2 + .8 * (linesAdded / averageLinesAdded);
                else linesAddedElem.style.cssText = `color: gray; background: gray; opacity: .05`;
                const linesRemovedElem = item.querySelector(".lines-removed");
                if (linesRemoved >= averageLinesRemoved) linesRemovedElem.style.cssText = `color: white; font-weight: bold; background: red`;
                else if (linesRemoved > 0) linesRemovedElem.style.opacity = .2 + .8 * (linesRemoved / averageLinesRemoved);
                else linesRemovedElem.style.cssText = `color: gray; background: gray; opacity: .05`;

                if (item.classList.contains("file-added")) {
                    item.querySelector(".diff-summary-lozenge").style.cssText = `background: green; color: white; border: none`;
                    item.querySelector("a").style.cssText = `color: green`;
                }
                if (item.classList.contains("file-removed")) {
                    item.querySelector(".diff-summary-lozenge").style.cssText = `background: red; color: white; border: none`;
                    item.querySelector("a").style.cssText = `color: red; text-decoration: line-through`;
                }
                // if (item.classList.contains("file-modified")) item.querySelector(".diff-summary-lozenge").style.cssText = `background: cornflowerblue; color: white; border: none`;

            });

            const diffs = Array.from(document.querySelectorAll(".bb-udiff"));
            diffs.forEach(diff => {
                const arrow = document.createElement("div");
                arrow.style.cssText = `float: left; padding: 14px; font-size: 18px; border: none; background: none;`;
                const header = diff.querySelector(".heading .primary");
                header.insertAdjacentElement("afterbegin", arrow);
                header.style.cursor = "pointer";
                header.onclick = e => {
                    hidden = !hidden;
                    render();
                };
                const hideLink = document.createElement("a");
                hideLink.textContent = "✓ Hide and review next file";
                hideLink.style.cssText = `padding: 5px 10px; margin: 15px 0;`;
                hideLink.onclick = header.onclick;
                hideLink.href = `#${diff.id}`;
                diff.appendChild(hideLink);

                let hidden = diff.querySelector(".filename").textContent.includes("package-lock.json");
                const render = () => {
                    diff.querySelector(".diff-content-container").style.display = hidden ? "none" : "block";
                    arrow.textContent = hidden ? "→" : "↓";
                    hideLink.style.display = hidden ? "none" : "block";
                }

                render();
            });

            const linkToTop = document.createElement("a");
            linkToTop.textContent = "↑ Files changed";
            linkToTop.href = "#commit-files-summary";
            linkToTop.style.cssText = `position: fixed; bottom: 10px; right: 10px; padding: 10px; background: rgb(7, 71, 166); color: white; border: gray; border-radius: 2px; z-index: 999999;`;
            document.body.appendChild(linkToTop);
        } else {
            requestIdleCallback(render);
        }
    }
    requestIdleCallback(render);
}

screenshot.md