Github-toggle-expanders: handle PR comments

[cmalard]

To toggle all outdated blocks within a single review : Shift+Click
To toggle all outdated blocks on the page : Ctrl+Shift+Click

I had to refactor to match the closest parent.
As a consequence, there is no longer the need to support #commits_bucket to fix #8

[Mottie]

Hmm, since you didn't respond, and I had a "little" free time, I started working on this myself. I ended up separating out the review buttons from the ellipses. I also made it so that using Ctrl+Shift+Click would toggle all of the outdated blocks.

I haven't had a chance to test your changes, but let me know if this works for you?

// ==UserScript==
// @name        GitHub Toggle Expanders
// @version     1.1.0
// @description A userscript that toggles all expanders when one expander is shift-clicked
// @license     MIT
// @author      Rob Garrison
// @namespace   https://github.com/Mottie
// @include     https://github.com/*
// @run-at      document-idle
// @icon        https://github.com/fluidicon.png
// @updateURL   https://raw.githubusercontent.com/Mottie/GitHub-userscripts/master/github-toggle-expanders.user.js
// @downloadURL https://raw.githubusercontent.com/Mottie/GitHub-userscripts/master/github-toggle-expanders.user.js
// ==/UserScript==
(() => {
	"use strict";

	function toggleEllipses(el) {
		const state = closest(".commits-list-item, .js-details-container", el)
			.classList.contains("open"),
			// target buttons inside commits_bucket - fixes #8
			selectors = `
				.commits-listing .commits-list-item,
				#commits_bucket .js-details-container,
				.release-timeline-tags .js-details-container`;
		Array.from(document.querySelectorAll(selectors)).forEach(el => {
			el.classList.toggle("open", state);
		});
	}

	// Pull request review blocks (outdated)
	function toggleReviews(event) {
		const target = event.target,
			buttonType = target.classList.contains("show-outdated-button") ?
				"show" :
				"hide",
			// programmically clicking on a "show" button that has content already
			// shown would hide the content, so we need to check the state
			wrapperState = buttonType === "show" ? ":not(.open)" : ".open",
			container = event.ctrlKey ?
				// If ctrl key pressed, toggle ALL outdated blocks
				document :
				// Only the current review block
				closest(".discussion-item-body", target),
			selector = `.js-details-container${wrapperState} .${buttonType}` +
				`-outdated-button`;
		if (container) {
			Array.from(container.querySelectorAll(selector)).forEach(el => {
				if (el !== target) {
					el.click();
				}
			});
		}
	}

	function closest(selector, el) {
		while (el && el.nodeType === 1) {
			if (el.matches(selector)) {
				return el;
			}
			el = el.parentNode;
		}
		return null;
	}

	document.body.addEventListener("click", event => {
		const target = event.target;
		if (target && event.getModifierState("Shift")) {
			if (target.matches(".ellipsis-expander")) {
				// give GitHub time to add the class
				setTimeout(() => {
					toggleEllipses(target);
				}, 100);
			} else if (target.matches(".outdated-comment-label")) {
				setTimeout(() => {
					toggleReviews(event);
				}, 100);
			}
		}
	});

})();

[cmalard]

Hey @Mottie,
Told you I was fixing it so it was pretty clear for me that I was working on it (plus, I put a 👍 on your message but you probably didn't notice). Never mind, at least it advances 😉

It seems to me that your changes are more complex for the same result.
I added a commit for Ctrl+Shift+Click.
What do you think ?

[Mottie]

You're right, I did overly complicate the script. I'll go with what you have here...

But, I was just testing the code and I found that using Ctrl+Shift+Click to open all sections also opens the title change form for the PR (#partial-discussion-header) since it is also inside of the .container. We should use #discussion_bucket or .discussion-timeline instead of .container.

Also, please bump the version number to 1.1.0.

Thanks!

[cmalard]

Well spotted 👍

I used .container, .js-discussion

• .container acts as a default selector in case .js-discussion doesn't exists
• .js-discussion instead of .discussion-timeline to exclude .discussion-timeline-actions wich could potentially contain some .js-details-container and to be as close as possible to the list

Done 🍻

[Mottie]

Awesome! Thanks so much!