GitHub Toggle Issue Comments

A userscript that toggles issues/pull request comments & messages

当前为 2016-06-13 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name GitHub Toggle Issue Comments
  3. // @version 1.0.11
  4. // @description A userscript that toggles issues/pull request comments & messages
  5. // @license https://creativecommons.org/licenses/by-sa/4.0/
  6. // @namespace http://github.com/Mottie
  7. // @include https://github.com/*
  8. // @run-at document-idle
  9. // @grant GM_addStyle
  10. // @grant GM_getValue
  11. // @grant GM_setValue
  12. // @author Rob Garrison
  13. // ==/UserScript==
  14. /* global GM_addStyle, GM_getValue, GM_setValue */
  15. /*jshint unused:true */
  16. (function() {
  17. "use strict";
  18.  
  19. GM_addStyle([
  20. ".ghic-button { float:right; }",
  21. ".ghic-button .btn:hover div.select-menu-modal-holder { display:block; top:auto; bottom:25px; right:0; }",
  22. ".ghic-right { float:right; }",
  23. // pre-wrap set for Firefox; see https://greasyfork.org/en/forum/discussion/9166/x
  24. ".ghic-menu label { display:block; padding:5px 15px; white-space:pre-wrap; }",
  25. ".ghic-button .select-menu-header, .ghic-participants { cursor:default; }",
  26. ".ghic-participants { border-top:1px solid #484848; padding:15px; }",
  27. ".ghic-avatar { display:inline-block; float:left; margin: 0 2px 2px 0; cursor:pointer; position:relative; }",
  28. ".ghic-avatar:last-child { margin-bottom:5px; }",
  29. ".ghic-avatar.comments-hidden svg { display:block; position:absolute; top:-2px; left:-2px; z-index:1; }",
  30. ".ghic-avatar.comments-hidden img { opacity:0.5; }",
  31. ".ghic-button .dropdown-item input:checked ~ svg,",
  32. ".ghic-button .dropdown-item input:checked ~ .ghic-count { display:inline-block; }",
  33. ".ghic-button .ghic-count { float:left; margin-right:5px; }",
  34. ".ghic-button .select-menu-modal { margin:0; }",
  35. ".ghic-button .ghic-participants { margin-bottom:20px; }",
  36. // for testing: ".ghic-hidden { opacity: 0.3; }",
  37. ".ghic-hidden, .ghic-hidden-participant, .ghic-avatar svg, .ghic-button .ghic-right > *,",
  38. ".ghic-hideReactions .comment-reactions { display:none; }",
  39. ].join(""));
  40.  
  41. var busy = false,
  42.  
  43. // ZenHub addon active (include ZenHub Enterprise)
  44. hasZenHub = document.querySelector(".zhio, zhe") ? true : false,
  45.  
  46. iconHidden = "<svg class='octicon' xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 9 9'><path fill='#777' d='M7.07 4.5c0-.47-.12-.9-.35-1.3L3.2 6.7c.4.25.84.37 1.3.37.35 0 .68-.07 1-.2.32-.14.6-.32.82-.55.23-.23.4-.5.55-.82.13-.32.2-.65.2-1zM2.3 5.8l3.5-3.52c-.4-.23-.83-.35-1.3-.35-.35 0-.68.07-1 .2-.3.14-.6.32-.82.55-.23.23-.4.5-.55.82-.13.32-.2.65-.2 1 0 .47.12.9.36 1.3zm6.06-1.3c0 .7-.17 1.34-.52 1.94-.34.6-.8 1.05-1.4 1.4-.6.34-1.24.52-1.94.52s-1.34-.18-1.94-.52c-.6-.35-1.05-.8-1.4-1.4C.82 5.84.64 5.2.64 4.5s.18-1.35.52-1.94.8-1.06 1.4-1.4S3.8.64 4.5.64s1.35.17 1.94.52 1.06.8 1.4 1.4c.35.6.52 1.24.52 1.94z'/></svg>",
  47. iconCheck = "<svg class='octicon octicon-check' height='16' viewBox='0 0 12 16' width='12'><path d='M12 5L4 13 0 9l1.5-1.5 2.5 2.5 6.5-6.5 1.5 1.5z'></path></svg>",
  48. plus1Icon = "<img src='https://assets-cdn.github.com/images/icons/emoji/unicode/1f44d.png' class='emoji' title=':+1:' alt=':+1:' height='20' width='20' align='absmiddle'>",
  49.  
  50. settings = {
  51. // https://github.com/Mottie/Keyboard/issues/448
  52. title: {
  53. isHidden: false,
  54. name: "ghic-title",
  55. selector: ".discussion-item-renamed",
  56. label: "Title Changes"
  57. },
  58. labels: {
  59. isHidden: false,
  60. name: "ghic-labels",
  61. selector: ".discussion-item-labeled, .discussion-item-unlabeled",
  62. label: "Label Changes"
  63. },
  64. state: {
  65. isHidden: false,
  66. name: "ghic-state",
  67. selector: ".discussion-item-reopened, .discussion-item-closed",
  68. label: "State Changes (close/reopen)"
  69. },
  70.  
  71. // https://github.com/jquery/jquery/issues/2986
  72. milestone: {
  73. isHidden: false,
  74. name: "ghic-milestone",
  75. selector: ".discussion-item-milestoned",
  76. label: "Milestone Changes"
  77. },
  78. refs: {
  79. isHidden: false,
  80. name: "ghic-refs",
  81. selector: ".discussion-item-ref, .discussion-item-head_ref_deleted",
  82. label: "References"
  83. },
  84. assigned: {
  85. isHidden: false,
  86. name: "ghic-assigned",
  87. selector: ".discussion-item-assigned",
  88. label: "Assignment Changes"
  89. },
  90.  
  91. // Pull Requests
  92. commits: {
  93. isHidden: false,
  94. name: "ghic-commits",
  95. selector: ".discussion-commits",
  96. label: "Commits"
  97. },
  98. // https://github.com/jquery/jquery/pull/3014
  99. diffOld: {
  100. isHidden: false,
  101. name: "ghic-diffOld",
  102. selector: ".outdated-diff-comment-container",
  103. label: "Diff (outdated) Comments"
  104. },
  105. diffNew: {
  106. isHidden: false,
  107. name: "ghic-diffNew",
  108. selector: "[id^=diff-for-comment-]:not(.outdated-diff-comment-container)",
  109. label: "Diff (current) Comments"
  110. },
  111. // https://github.com/jquery/jquery/pull/2949
  112. merged: {
  113. isHidden: false,
  114. name: "ghic-merged",
  115. selector: ".discussion-item-merged",
  116. label: "Merged"
  117. },
  118. integrate: {
  119. isHidden: false,
  120. name: "ghic-integrate",
  121. selector: ".discussion-item-integrations-callout",
  122. label: "Integrations"
  123. },
  124.  
  125. // extras (special treatment - no selector)
  126. plus1: {
  127. isHidden: false,
  128. name: "ghic-plus1",
  129. label: "Hide +1s"
  130. },
  131. reactions: {
  132. isHidden: false,
  133. name: "ghic-reactions",
  134. label: "Reactions"
  135. },
  136. // page with lots of users to hide:
  137. // https://github.com/isaacs/github/issues/215
  138.  
  139. // ZenHub pipeline change
  140. pipeline: {
  141. isHidden: false,
  142. name: "ghic-pipeline",
  143. selector: ".discussion-item.zh-discussion-item",
  144. label: "ZenHub Pipeline Changes"
  145. }
  146. },
  147.  
  148. closest = function(el, selector) {
  149. while (el && !el.matches(selector)) {
  150. el = el.parentNode;
  151. }
  152. return el && el.matches(selector) ? el : null;
  153. },
  154.  
  155. addClass = function(els, name) {
  156. var indx,
  157. len = els.length;
  158. for (indx = 0; indx < len; indx++) {
  159. els[indx].classList.add(name);
  160. }
  161. return len;
  162. },
  163.  
  164. removeClass = function(els, name) {
  165. var indx,
  166. len = els.length;
  167. for (indx = 0; indx < len; indx++) {
  168. els[indx].classList.remove(name);
  169. }
  170. },
  171.  
  172. addMenu = function() {
  173. busy = true;
  174. if (document.getElementById("discussion_bucket") && !document.querySelector(".ghic-button")) {
  175. // update "isHidden" values
  176. getSettings();
  177. var name,
  178. list = "",
  179. header = document.querySelector(".discussion-sidebar-item:last-child"),
  180. menu = document.createElement("div");
  181.  
  182. for (name in settings) {
  183. if (settings.hasOwnProperty(name) && !(name === "pipeline" && !hasZenHub)) {
  184. list += "<label class='dropdown-item'>" + settings[name].label +
  185. "<span class='ghic-right " + settings[name].name + "'>" +
  186. "<input type='checkbox'" + (settings[name].isHidden ? " checked" : "") + ">" +
  187. iconCheck + "<span class='ghic-count'> </span></span></label>";
  188. }
  189. }
  190.  
  191. menu.className = "ghic-button";
  192. menu.innerHTML = [
  193. "<span class='btn btn-sm' role='button' tabindex='0' aria-haspopup='true'>",
  194. "<span class='tooltipped tooltipped-w' aria-label='Toggle issue comments'>",
  195. "<svg class='octicon octicon-comment-discussion' height='16' width='16' role='img' viewBox='0 0 16 16'><path d='M15 2H6c-0.55 0-1 0.45-1 1v2H1c-0.55 0-1 0.45-1 1v6c0 0.55 0.45 1 1 1h1v3l3-3h4c0.55 0 1-0.45 1-1V10h1l3 3V10h1c0.55 0 1-0.45 1-1V3c0-0.55-0.45-1-1-1zM9 12H4.5l-1.5 1.5v-1.5H1V6h4v3c0 0.55 0.45 1 1 1h3v2z m6-3H13v1.5l-1.5-1.5H6V3h9v6z'></path></svg>",
  196. "</span>",
  197. "<div class='select-menu-modal-holder'>",
  198. "<div class='select-menu-modal' aria-hidden='true'>",
  199. "<div class='select-menu-header' tabindex='-1'>",
  200. "<span class='select-menu-title'>Toggle items</span>",
  201. "</div>",
  202. "<div class='select-menu-list ghic-menu' role='menu'>",
  203. list,
  204. "<div class='ghic-participants'></div>",
  205. "</div>",
  206. "</div>",
  207. "</div>",
  208. "</span>"
  209. ].join("");
  210. if (hasZenHub) {
  211. header.insertBefore(menu, header.childNodes[0]);
  212. } else {
  213. header.appendChild(menu);
  214. }
  215. addAvatars();
  216. }
  217. update();
  218. busy = false;
  219. },
  220.  
  221. addAvatars = function() {
  222. var indx = 0,
  223.  
  224. str = "<h3>Hide Comments from</h3>",
  225. unique = [],
  226. // get all avatars
  227. avatars = document.querySelectorAll(".timeline-comment-avatar"),
  228. len = avatars.length - 1, // last avatar is the new comment with the current user
  229.  
  230. loop = function(callback) {
  231. var el, name,
  232. max = 0;
  233. while (max < 50 && indx < len) {
  234. if (indx >= len) {
  235. return callback();
  236. }
  237. el = avatars[indx];
  238. name = (el.getAttribute("alt") || "").replace("@", "");
  239. if (unique.indexOf(name) < 0) {
  240. str += "<span class='ghic-avatar tooltipped tooltipped-n' aria-label='" + name + "'>" +
  241. iconHidden +
  242. "<img class='ghic-avatar avatar' width='24' height='24' src='" + el.src + "'/>" +
  243. "</span>";
  244. unique[unique.length] = name;
  245. max++;
  246. }
  247. indx++;
  248. }
  249. if (indx < len) {
  250. setTimeout(function() {
  251. loop(callback);
  252. }, 200);
  253. } else {
  254. callback();
  255. }
  256. };
  257. loop(function() {
  258. document.querySelector(".ghic-participants").innerHTML = str;
  259. });
  260. },
  261.  
  262. getSettings = function() {
  263. var name;
  264. for (name in settings) {
  265. if (settings.hasOwnProperty(name)) {
  266. settings[name].isHidden = GM_getValue(settings[name].name, false);
  267. }
  268. }
  269. },
  270.  
  271. saveSettings = function() {
  272. var name;
  273. for (name in settings) {
  274. if (settings.hasOwnProperty(name)) {
  275. GM_setValue(settings[name].name, settings[name].isHidden);
  276. }
  277. }
  278. },
  279.  
  280. getInputValues = function() {
  281. var name,
  282. menu = document.querySelector(".ghic-menu");
  283. for (name in settings) {
  284. if (settings.hasOwnProperty(name) && !(name === "pipeline" && !hasZenHub)) {
  285. settings[name].isHidden = menu.querySelector("." + settings[name].name + " input").checked;
  286. }
  287. }
  288. },
  289.  
  290. hideStuff = function(name, init) {
  291. if (settings[name].selector) {
  292. var count,
  293. results = document.querySelectorAll(settings[name].selector);
  294. if (settings[name].isHidden) {
  295. count = addClass(results, "ghic-hidden");
  296. document.querySelector(".ghic-menu ." + settings[name].name + " .ghic-count")
  297. .textContent = count ? "(" + count + ")" : " ";
  298. } else if (!init) {
  299. // no need to remove classes on initialization
  300. removeClass(results, "ghic-hidden");
  301. }
  302. } else if (name === "plus1") {
  303. hidePlus1(init);
  304. } else if (name === "reactions") {
  305. document.querySelector("body").classList[settings[name].isHidden ? "add" : "remove"]("ghic-hideReactions");
  306. }
  307. },
  308.  
  309. hidePlus1 = function(init) {
  310. if (init && !settings.plus1.isHidden) { return; }
  311. var max,
  312. indx = 0,
  313. count = 0,
  314. total = 0,
  315. // keep a list of post authors to prevent duplicate +1 counts
  316. authors = [],
  317. // used https://github.com/isaacs/github/issues/215 for matches here...
  318. // matches "+1!!!!", "++1", "+!", "+99!!!", "-1", "+ 100", "thumbs up"; ":+1:^21425235"
  319. // ignoring -1's...
  320. regexPlus = /([?!,.:^[\]()\'\"+-\d]|bump|thumbs|up)/gi,
  321. // other comments to hide - they are still counted towards the +1 counter (for now?)
  322. // seen "^^^" to bump posts; "bump plleeaaassee"; "eta?"; "pretty please"
  323. // "need this"; "right now"; "still nothing?"; "super helpful"; "for gods sake"
  324. regexHide = new RegExp("(" + [
  325. "@\\w+",
  326. "pretty",
  327. "pl+e+a+s+e+",
  328. "y+e+s+",
  329. "eta",
  330. "much",
  331. "need(ed)?",
  332. "fix",
  333. "this",
  334. "right",
  335. "now",
  336. "still",
  337. "nothing",
  338. "super",
  339. "helpful",
  340. "for\\sgods\\ssake"
  341. ].join("|") + ")", "gi"),
  342. // image title ":{anything}:", etc.
  343. regexEmoji = /:(.*):/,
  344.  
  345. comments = document.querySelectorAll(".js-discussion .timeline-comment-wrapper"),
  346. len = comments.length,
  347.  
  348. loop = function() {
  349. var wrapper, el, tmp, txt, img, hasLink, dupe;
  350. max = 0;
  351. while (max < 20 && indx < len) {
  352. if (indx >= len) {
  353. return;
  354. }
  355. wrapper = comments[indx];
  356. // save author list to prevent repeat +1s
  357. el = wrapper.querySelector(".timeline-comment-header .author");
  358. txt = (el ? el.textContent || "" : "").toLowerCase();
  359. dupe = true;
  360. if (txt && authors.indexOf(txt) < 0) {
  361. authors[authors.length] = txt;
  362. dupe = false;
  363. }
  364. el = wrapper.querySelector(".comment-body");
  365. // ignore quoted messages, but get all fragments
  366. tmp = el.querySelectorAll(".email-fragment");
  367. // some posts only contain a link to related issues; these should not be counted as a +1
  368. // see https://github.com/isaacs/github/issues/618#issuecomment-200869630
  369. hasLink = el.querySelectorAll(tmp.length ? ".email-fragment .issue-link" : ".issue-link").length;
  370. if (tmp.length) {
  371. // ignore quoted messages
  372. txt = getAllText(tmp);
  373. } else {
  374. txt = el.textContent.trim();
  375. }
  376. if (!txt) {
  377. img = el.querySelector("img");
  378. if (img) {
  379. txt = img.getAttribute("title") || img.getAttribute("alt");
  380. }
  381. }
  382. // remove fluff
  383. txt = txt.replace(regexEmoji, "").replace(regexPlus, "").replace(regexHide, "").trim();
  384. if (txt === "" || (txt.length < 4 && !hasLink)) {
  385. if (settings.plus1.isHidden) {
  386. wrapper.classList.add("ghic-hidden");
  387. total++;
  388. // one +1 per author
  389. if (!dupe) {
  390. count++;
  391. }
  392. } else if (!init) {
  393. wrapper.classList.remove("ghic-hidden");
  394. }
  395. max++;
  396. }
  397. indx++;
  398. }
  399. if (indx < len) {
  400. setTimeout(function() {
  401. loop();
  402. }, 200);
  403. } else {
  404. document.querySelector(".ghic-menu .ghic-plus1 .ghic-count")
  405. .textContent = total ? "(" + total + ")" : " ";
  406. addCountToReaction(count);
  407. }
  408. };
  409. loop();
  410. },
  411.  
  412. getAllText = function(el) {
  413. var txt = "",
  414. indx = el.length;
  415. // text order doesn't matter
  416. while (indx--) {
  417. txt += el[indx].textContent.trim();
  418. }
  419. return txt;
  420. },
  421.  
  422. addCountToReaction = function(count) {
  423. if (!count) {
  424. count = (document.querySelector(".ghic-menu .ghic-plus1 .ghic-count").textContent || "")
  425. .replace(/[()]/g, "")
  426. .trim();
  427. }
  428. var comment = document.querySelector(".timeline-comment"),
  429. tmp = comment.querySelector(".has-reactions button[value='+1 react'], .has-reactions button[value='+1 unreact']"),
  430. el = comment.querySelector(".ghic-count");
  431. if (el) {
  432. // the count may have been appended to the comment & now
  433. // there is a reaction, so remove any "ghic-count" elements
  434. el.parentNode.removeChild(el);
  435. }
  436. if (count) {
  437. if (tmp) {
  438. el = document.createElement("span");
  439. el.className = "ghic-count";
  440. el.textContent = count ? " + " + count + " (from hidden comments)" : "";
  441. tmp.appendChild(el);
  442. } else {
  443. el = document.createElement("p");
  444. el.className = "ghic-count";
  445. el.innerHTML = "<hr>" + plus1Icon + " " + count + " (from hidden comments)";
  446. comment.querySelector(".comment-body").appendChild(el);
  447. }
  448. }
  449. },
  450.  
  451. hideParticipant = function(el) {
  452. var els, indx, len, hide, name,
  453. results = [];
  454. if (el) {
  455. el.classList.toggle("comments-hidden");
  456. hide = el.classList.contains("comments-hidden");
  457. name = el.getAttribute("aria-label");
  458. els = document.querySelectorAll(".js-discussion .author");
  459. len = els.length;
  460. for (indx = 0; indx < len; indx++) {
  461. if (els[indx].textContent.trim() === name) {
  462. results[results.length] = closest(els[indx], ".timeline-comment-wrapper, .commit-comment, .discussion-item");
  463. }
  464. }
  465. // use a different participant class name to hide timeline events
  466. // or unselecting all users will show everything
  467. if (el.classList.contains("comments-hidden")) {
  468. addClass(results, "ghic-hidden-participant");
  469. } else {
  470. removeClass(results, "ghic-hidden-participant");
  471. }
  472. results = [];
  473. }
  474. },
  475.  
  476. regex = /(svg|path)/i,
  477.  
  478. update = function() {
  479. busy = true;
  480. if (document.querySelector("#discussion_bucket") && document.querySelector(".ghic-button")) {
  481. var keys = Object.keys(settings),
  482. indx = keys.length;
  483. while (indx--) {
  484. // true flag for init - no need to remove classes
  485. hideStuff(keys[indx], true);
  486. }
  487. }
  488. busy = false;
  489. },
  490.  
  491. checkItem = function(event) {
  492. busy = true;
  493. if (document.getElementById("discussion_bucket")) {
  494. var name,
  495. target = event.target,
  496. wrap = target && target.parentNode;
  497. if (target && wrap) {
  498. if (target.nodeName === "INPUT" && wrap.classList.contains("ghic-right")) {
  499. getInputValues();
  500. saveSettings();
  501. // extract ghic-{name}, because it matches the name in settings
  502. name = wrap.className.replace("ghic-right", "").trim();
  503. if (wrap.classList.contains(name)) {
  504. hideStuff(name.replace("ghic-", ""));
  505. }
  506. } else if (target.classList.contains("ghic-avatar")) {
  507. // make sure we're targeting the span wrapping the image
  508. hideParticipant(target.nodeName === "IMG" ? target.parentNode : target);
  509. } else if (regex.test(target.nodeName)) {
  510. // clicking on the SVG may target the svg or path inside
  511. hideParticipant(closest(target, ".ghic-avatar"));
  512. }
  513. }
  514. }
  515. busy = false;
  516. },
  517.  
  518. init = function() {
  519. busy = true;
  520. getSettings();
  521. addMenu();
  522. document.querySelector("body").addEventListener("input", checkItem);
  523. document.querySelector("body").addEventListener("click", checkItem);
  524. update();
  525. busy = false;
  526. },
  527.  
  528. // DOM targets - to detect GitHub dynamic ajax page loading
  529. targets = document.querySelectorAll([
  530. "#js-repo-pjax-container",
  531. "#js-pjax-container",
  532. ".js-discussion"
  533. ].join(","));
  534.  
  535. // update TOC when content changes
  536. Array.prototype.forEach.call(targets, function(target) {
  537. new MutationObserver(function(mutations) {
  538. mutations.forEach(function(mutation) {
  539. // preform checks before adding code wrap to minimize function calls
  540. if (!busy && mutation.target === target) {
  541. addMenu();
  542. }
  543. });
  544. }).observe(target, {
  545. childList: true,
  546. subtree: true
  547. });
  548. });
  549.  
  550. init();
  551.  
  552. })();