Widen Code Container (GitHub)

Adds a button to allow you to widen the container when viewing unified diffs

  1. // ==UserScript==
  2. // @name Widen Code Container (GitHub)
  3. // @namespace https://github.com/chriskim06/userscripts
  4. // @description Adds a button to allow you to widen the container when viewing unified diffs
  5. // @match https://github.com/*/*/commit/*
  6. // @match https://github.com/*/*/pull/*/files*
  7. // @version 1.4.4
  8. // ==/UserScript==
  9.  
  10. (function() {
  11.  
  12. // Create button to widen container and add it next to an element
  13. function addButton(id, float) {
  14. var s = document.querySelector('#' + id + ' .refined-github-toggle-whitespace');
  15. if (s) {
  16. var btn = document.createElement('div');
  17. btn.setAttribute('class', (float) ? 'diffbar-item float-right' : 'diffbar-item');
  18. var ln = document.createElement('a');
  19. ln.setAttribute('id', 'code-widen-button');
  20. ln.setAttribute('class', 'btn btn-sm btn-outline BtnGroup-item tooltipped tooltipped-s');
  21. ln.setAttribute('aria-label', 'Widen the code container');
  22. ln.innerText = 'Widen';
  23. btn.appendChild(ln);
  24. s.parentNode.insertBefore(btn, s.nextElementSibling);
  25. }
  26. }
  27.  
  28. // Add the widen button on pull request and commit pages if its not there
  29. if (!document.querySelector('#code-widen-button') && document.querySelector('meta[name="diff-view"]').content === 'unified') {
  30. if (location.href.match(/^https:\/\/github\.com\/.+\/.+\/pull\/[\d]+\/files/)) {
  31. addButton('files_bucket', false);
  32. } else if (location.href.match(/^https:\/\/github\.com\/.+\/.+\/commit/)) {
  33. addButton('toc', true);
  34. }
  35.  
  36. // Add listener on newly added button if it exists
  37. var widenBtn = document.querySelector('#code-widen-button');
  38. if (widenBtn) {
  39. widenBtn.addEventListener('click', function(e) {
  40. e.preventDefault();
  41. var container = document.querySelector('.container.new-discussion-timeline.experiment-repo-nav');
  42. var wide = Math.floor(window.innerWidth * 0.95);
  43. var wasNormal = container.offsetWidth < wide;
  44. container.style.width = ((wasNormal) ? wide : Math.floor(window.innerWidth * 0.68)) + 'px';
  45. this.setAttribute('aria-label', (wasNormal) ? 'Return to normal width' : 'Widen the code container');
  46. this.innerText = (wasNormal) ? 'Normal' : 'Widen';
  47. });
  48. }
  49. }
  50.  
  51. })();
  52.