☰

GitHub Toggle Diff Comments

A userscript that toggles diff/PR and commit comments

目前为 2023-07-01 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name        GitHub Toggle Diff Comments
  3. // @version     0.3.3
  4. // @description A userscript that toggles diff/PR and commit comments
  5. // @license     MIT
  6. // @author      Rob Garrison
  7. // @namespace   https://github.com/Mottie
  8. // @match       https://github.com/*
  9. // @run-at      document-idle
  10. // @grant       GM.addStyle
  11. // @grant       GM_addStyle
  12. // @require     https://greasemonkey.github.io/gm4-polyfill/gm4-polyfill.js?updated=20180103
  13. // @require     https://greasyfork.org/scripts/28721-mutations/code/mutations.js?version=1108163
  14. // @require     https://greasyfork.org/scripts/398877-utils-js/code/utilsjs.js?version=1079637
  15. // @icon        https://github.githubassets.com/pinned-octocat.svg
  16. // @supportURL  https://github.com/Mottie/GitHub-userscripts/issues
  17. // ==/UserScript==
  18. /* global GM $ $$ on debounce make */
  19. (() => {
  20. 	"use strict";
  21.  
  22. 	const selectors = {
  23. 		// PR has notes (added to <div id="diff-00" class="file ...">)
  24. 		headerHasNotes: ".has-inline-notes:not(.hide-file-notes-toggle)",
  25. 		// show comments wrapper for each file
  26. 		headerComment: ".has-inline-notes .file-actions > .d-flex",
  27. 		// show comments checkbox
  28. 		headerCheckbox: "js-toggle-file-notes",
  29. 		// button active
  30. 		activeClass: "ghtc-active",
  31. 		// td wrapper
  32. 		tdWrapper: "js-quote-selection-container",
  33. 		// first div inside td wrapper
  34. 		tdDiv: "js-resolvable-timeline-thread-container",
  35. 		// has row comments
  36. 		rowComment: "tr.inline-comments",
  37. 		// button class names
  38. 		button: "btn btn-sm BtnGroup-item ghtc-toggle tooltipped tooltipped-s"
  39. 	};
  40.  
  41. 	const actions = {
  42. 		// Show or hide all comments on the page
  43. 		toggleAllShowComments: {
  44. 			check: (event, el) => {
  45. 				const button = el.matches(`button.${selectors.headerCheckbox}`);
  46. 				return el.id === "ghtc-show-toggle-all" || event.shiftKey && button;
  47. 			},
  48. 			exec: el => {
  49. 				const state = getState(el);
  50. 				$$(`#ghtc-show-toggle-all, button.${selectors.headerCheckbox}`).forEach(
  51. 					el => el.classList.toggle(selectors.activeClass, state)
  52. 				);
  53. 				// Use built-in "Show comments" checkbox
  54. 				$$(`#files input.${selectors.headerCheckbox}`).forEach(el => {
  55. 					el.checked = state;
  56. 					el.dispatchEvent(new Event("change", {bubbles: true}));
  57. 				});
  58. 			}
  59. 		},
  60. 		// Show or hide all comments in a file
  61. 		toggleFileShowComments: {
  62. 			check: (_, el) => {
  63. 				return el.matches(`button.${selectors.headerCheckbox}`);
  64. 			},
  65. 			exec: el => {
  66. 				const state = getState(el);
  67. 				const box = $(`input.${selectors.headerCheckbox}`, el.closest(".d-flex"));
  68. 				if (box) {
  69. 					box.checked = state;
  70. 					box.dispatchEvent(new Event("change", {bubbles: true}));
  71. 				}
  72. 			}
  73. 		},
  74. 		// Collapse or expand all comments on the page
  75. 		collapsePageComments: {
  76. 			check: (event, el) => {
  77. 				const toggleAll = el.id === "ghtc-collapse-toggle-all";
  78. 				const toggle = el.classList.contains("ghtc-collapse-toggle-file");
  79. 				return toggleAll || (event.shiftKey && toggle);
  80. 			},
  81. 			exec: el => {
  82. 				const state = getState(el);
  83. 				$("#ghtc-collapse-toggle-all").classList.toggle(selectors.activeClass, state);
  84. 				toggleMultipleComments(el.closest("#files_bucket"), state);
  85. 				$$(".ghtc-collapse-toggle-file").forEach(el => {
  86. 					el.classList.toggle(selectors.activeClass, state);
  87. 				});
  88. 			}
  89. 		},
  90. 		// Collapse or expand all comments within a file
  91. 		collapseFileComments: {
  92. 			check: (event, el) => {
  93. 				const toggle = el.classList.contains("ghtc-collapse-toggle-file");
  94. 				const container = el.classList.contains(selectors.tdDiv);
  95. 				return toggle || (event.shiftKey && container);
  96. 			},
  97. 			exec: el => {
  98. 				const state = getState(el);
  99. 				toggleMultipleComments(el.closest(".file"), state);
  100. 			}
  101. 		},
  102. 		// Collapse or expand single comment
  103. 		collapseComment: {
  104. 			check: (_, el) => el.classList.contains(selectors.tdDiv),
  105. 			exec: el => el.closest("tr").classList.toggle("ghtc-collapsed"),
  106. 		}
  107. 	};
  108.  
  109. 	const icons = {
  110. 		"show": `<svg xmlns="http://www.w3.org/2000/svg" class="octicon ghtc-primary ghtc-comment-hide" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><g fill="#777"><path d="M6 9h1L6 8 5 7v1c0 .6.5 1 1 1z"/><path d="M9 11H4.5L3 12.5V11H1V5h2L2 4H1a1 1 0 0 0-1 1v6c0 .6.5 1 1 1h1v3l3-3h4c.3 0 .6-.1.7-.3l-.7-.8v.1zM15 1H6a1 1 0 0 0-1 1v.3l1 1V2h9v6h-2v1.5L11.5 8h-.8l3.3 3.2V9h1c.6 0 1-.5 1-1V2c0-.6-.4-1-1-1z"/></g><path d="M.4.9L13.7 14h1.7L2 .9z"/></svg>
  111. 		<svg xmlns="http://www.w3.org/2000/svg" class="octicon ghtc-secondary ghtc-comment-show" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path fill-rule="evenodd" d="M15 1H6c-.55 0-1 .45-1 1v2H1c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h1v3l3-3h4c.55 0 1-.45 1-1V9h1l3 3V9h1c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zM9 11H4.5L3 12.5V11H1V5h4v3c0 .55.45 1 1 1h3v2zm6-3h-2v1.5L11.5 8H6V2h9v6z"></path></svg>`,
  112. 		"collapse": `<svg xmlns="http://www.w3.org/2000/svg" class="octicon ghtc-primary ghtc-collapse" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><g fill="#777"><path d="M4.2 12.8L5.6 11H4.5L3 12.5V11H1V5h4v3c0 .6.5 1 1 1h1.2L8 8H6V5.4L5 4H1a1 1 0 0 0-1 1v6c0 .6.5 1 1 1h1v3l2.2-2.2zM6 2.2V2h.6V1H6a1 1 0 0 0-1 1v.2h1zM15 1h-4.6v1H15v6h-2v1.5L11.5 8H9.1l.9 1.2V9h1l3 3V9h1c.6 0 1-.5 1-1V2c0-.6-.4-1-1-1z"/></g><path d="M11.5 3h-2V1h-2v2h-2l3 4zM5.5 13h2v2h2v-2h2l-3-4z"/></svg><svg xmlns="http://www.w3.org/2000/svg" class="octicon ghtc-secondary ghtc-expand" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><g fill="#777"><path d="M6 5.8H5V8c0 .6.5 1 1 1h.8V8H6V5.8z"/><path d="M4.6 11h-.1L3 12.5V11H1V5h3.3L6 2.9V2h.7l.8-1H6a1 1 0 0 0-1 1v2H1a1 1 0 0 0-1 1v6c0 .6.5 1 1 1h1v3l3-3h.3l-.7-1zM15 1h-5l.7 1H15v6h-2v1.5L11.5 8h-1v1h.5l.8.8h1.8l-.8 1L14 12V9h1c.6 0 1-.5 1-1V2c0-.6-.4-1-1-1z"/></g><path d="M11.7 11h-2V9h-2v2h-2l3 4zM11.7 5h-2v2h-2V5h-2l3-4z"/></svg>`
  113. 	};
  114.  
  115. 	// Using small black triangles because Windows doesn't
  116. 	// replace them with ugly emoji images
  117. 	GM.addStyle(`
  118. 		td.${selectors.tdWrapper} {
  119. 			position: relative;
  120. 		}
  121. 		td .${selectors.tdDiv} {
  122. 			cursor: pointer;
  123. 		}
  124. 		.js-resolvable-thread-contents {
  125. 			cursor: default;
  126. 		}
  127. 		td .${selectors.tdDiv}:before {
  128. 			content: "\\25be";
  129. 			font-size: 40px;
  130. 			position: absolute;
  131. 			right: 10px;
  132. 			top: -10px;
  133. 			pointer-events: none;
  134. 		}
  135. 		.ghtc-collapsed .${selectors.tdDiv}:before {
  136. 			content: "\\25c2";
  137. 			top: -20px;
  138. 		}
  139. 		.ghtc-collapsed .${selectors.tdDiv} {
  140. 			padding: 10px;
  141. 			border: 0;
  142. 			min-height: 26px;
  143. 		}
  144. 		.ghtc-collapsed .${selectors.tdDiv}:last-child {
  145. 			margin-bottom: 16px;
  146. 		}
  147. 		.ghtc-toggle .ghtc-secondary,
  148. 		.ghtc-toggle.${selectors.activeClass} .ghtc-primary,
  149. 		.ghtc-toggle input ~ .ghtc-secondary,
  150. 		.ghtc-toggle input:checked ~ .ghtc-primary,
  151. 		.ghtc-collapsed .${selectors.tdDiv} > *,
  152. 		.ghtc-collapsed .last-${selectors.tdDiv},
  153. 		.ghtc-collapsed .inline-comment-form-container:not(.open) {
  154. 			display: none;
  155. 		}
  156. 		.diff-table .ghtc-collapsed td.line-comments {
  157. 			padding: 0;
  158. 			cursor: pointer;
  159. 		}
  160. 		.pr-toolbar .pr-review-tools.float-right .diffbar-item + .diffbar-item {
  161. 			margin-left: 10px;
  162. 		}
  163. 		.ghtc-toggle {
  164. 			height: 28px;
  165. 		}
  166. 		.ghtc-toggle svg {
  167. 			display: inline-block;
  168. 			max-height: 16px;
  169. 			pointer-events: none;
  170. 			vertical-align: baseline !important;
  171. 		}
  172. 		.ghtc-toggle.${selectors.activeClass} .ghtc-secondary,
  173. 		.ghtc-toggle input:checked ~ .ghtc-secondary {
  174. 			display: block;
  175. 		}`
  176. 	);
  177.  
  178. 	function toggleMultipleComments(wrapper, state) {
  179. 		$(".ghtc-collapse-toggle-file", wrapper).classList.toggle(
  180. 			selectors.activeClass, state
  181. 		);
  182. 		$$(selectors.rowComment, wrapper).forEach(el => {
  183. 			el.classList.toggle("ghtc-collapsed", state);
  184. 		});
  185. 	}
  186.  
  187. 	function getState(el) {
  188. 		el.classList.toggle(selectors.activeClass);
  189. 		return el.classList.contains(selectors.activeClass);
  190. 	}
  191.  
  192. 	function addListeners() {
  193. 		const mainContent = $(".repository-content");
  194. 		if (mainContent && !mainContent.classList.contains("ghtc-listeners")) {
  195. 			mainContent.classList.add("ghtc-listeners");
  196. 			on(mainContent, "change", debounce(event => {
  197. 				const el = event.target;
  198. 				if (el && el.classList.contains(selectors.headerCheckbox)) {
  199. 					const button = $(selectors.headerCheckbox, el.closest(".d-flex"));
  200. 					if (button) {
  201. 						button.classList.toggle(selectors.activeClass, el.checked);
  202. 					}
  203. 				}
  204. 			}));
  205. 			on(mainContent, "click", debounce(event => {
  206. 				const el = event.target;
  207. 				if (el) {
  208. 					Object.keys(actions).some(action => {
  209. 						if (actions[action].check(event, el)) {
  210. 							event.stopPropagation();
  211. 							event.preventDefault();
  212. 							actions[action].exec(el);
  213. 							return true;
  214. 						}
  215. 						return false;
  216. 					});
  217. 				}
  218. 			}));
  219. 		}
  220. 	}
  221.  
  222. 	function addButtons() {
  223. 		$$(selectors.headerComment).forEach(wrapper => {
  224. 			if (!wrapper.classList.contains("ghtc-show-comments")) {
  225. 				wrapper.classList.add("ghtc-show-comments", "BtnGroup");
  226. 				// Add a "Show Comments" button outside the dropdown
  227. 				const show = make({
  228. 					el: "button",
  229. 					className: `${selectors.button} ${selectors.headerCheckbox} ${selectors.activeClass}`,
  230. 					html: icons.show,
  231. 					attrs: {
  232. 						"aria-label": "Show or hide all comments in this file"
  233. 					}
  234. 				});
  235. 				wrapper.prepend(show);
  236. 				// Add collapse all file comments button before label
  237. 				const collapse = make({
  238. 					el: "button",
  239. 					className: `${selectors.button} ghtc-collapse-toggle-file`,
  240. 					html: icons.collapse,
  241. 					attrs: {
  242. 						type: "button",
  243. 						"aria-label": "Expand or collapse all comments in this file"
  244. 					},
  245. 				});
  246. 				wrapper.prepend(collapse);
  247. 			}
  248. 		});
  249. 		// Add collapse all comments on the page - test adding global toggle on
  250. 		// https://github.com/openstyles/stylus/pull/150/files (edit.js)
  251. 		if (!$("#ghtc-collapse-toggle-all")) {
  252. 			// insert before Unified/Split button group
  253. 			const diffmode = $(".pr-review-tools .diffbar-item, #toc .toc-diff-stats");
  254. 			const wrapper = make({
  255. 				className: "BtnGroup " +
  256. 					// PR: diffbar-item; commit: toc-diff-stats
  257. 					(diffmode.classList.contains("diffbar-item")
  258. 						? "diffbar-item"
  259. 						: "float-right pr-2"
  260. 					)
  261. 			}, [
  262. 				// collapse/expand all comments
  263. 				make({
  264. 					html: icons.collapse,
  265. 					className: selectors.button,
  266. 					attrs: {
  267. 						id: "ghtc-collapse-toggle-all",
  268. 						type: "button",
  269. 						"aria-label": "Expand or collapse all comments"
  270. 					}
  271. 				}),
  272. 				// show/hide all comments
  273. 				make({
  274. 					className: `${selectors.button} ${selectors.activeClass}`,
  275. 					html: icons.show,
  276. 					attrs: {
  277. 						id: "ghtc-show-toggle-all",
  278. 						type: "button",
  279. 						"aria-label": "Show or hide all comments"
  280. 					}
  281. 				})
  282. 			]);
  283. 			diffmode.parentNode.insertBefore(wrapper, diffmode);
  284. 		}
  285. 	}
  286.  
  287. 	function init() {
  288. 		if ($("#files") && $(selectors.headerHasNotes)) {
  289. 			addListeners();
  290. 			addButtons();
  291. 		}
  292. 	}
  293.  
  294. 	on(document, "ghmo:container", init);
  295. 	on(document, "ghmo:diff", init);
  296. 	init();
  297.  
  298. })();