better layout and ability to hide and show status messages

cpcolella · Feb 12, 2021 · 6ff078b · 6ff078b
1 parent 5007dd1
commit 6ff078b
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 12 deletions.
diff --git a/css/popup.css b/css/popup.css
@@ -5,6 +5,13 @@ body {
     display: grid;
 }
 
+.button-group {
+	margin: 0;
+	padding: 0;
+    display: grid;
+    grid-template: none / auto auto;
+}
+
 button.button {
     margin: 5px;
     padding: 10px 20px;

diff --git a/js/popup.js b/js/popup.js
@@ -1,8 +1,11 @@
-let expandButton = document.getElementById('expandButton');
-let hideResolvedButton = document.getElementById('hideResolvedButton');
-let showResolvedButton = document.getElementById('showResolvedButton');
-let hideCommitsButton = document.getElementById('hideCommitsButton');
-let showCommitsButton = document.getElementById('showCommitsButton');
+let expandButton = document.getElementById("expandButton");
+let hideResolvedButton = document.getElementById("hideResolvedButton");
+let showResolvedButton = document.getElementById("showResolvedButton");
+let hideCommitsButton = document.getElementById("hideCommitsButton");
+let showCommitsButton = document.getElementById("showCommitsButton");
+let hideStatusesButton = document.getElementById("hideStatusesButton");
+let showStatusesButton = document.getElementById("showStatusesButton");
+
 let refreshButton = document.getElementById('refreshButton');
 
 expandButton.onclick = function(element)
@@ -30,6 +33,16 @@ showCommitsButton.onclick = function (event)
     util.showCommits();
 };
 
+hideStatusesButton.onclick = function (event)
+{
+    util.hideStatuses();
+};
+
+showStatusesButton.onclick = function (event)
+{
+    util.showStatuses();
+};
+
 refreshButton.onclick = function (event)
 {
     refresh(event);

diff --git a/js/util.js b/js/util.js
@@ -66,6 +66,22 @@ var util = {
             chrome.tabs.executeScript(tabs[0].id, { code: codeText });
         });
     },
+    hideStatuses: function() {
+        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+            let codeText = `var elements = document.querySelectorAll(".js-timeline-item  .TimelineItem[data-team-hovercards-enabled]:not([data-url]), .js-timeline-item > div > div[id|=pullrequestreview] > .TimelineItem:not([data-url]), .js-timeline-item > .TimelineItem:not([data-url]) > span.TimelineItem-badge.bg-blue.text-white")
+                elements.forEach(function(element) { element.closest(".js-timeline-item").setAttribute("style", "display: none !important;"); });`;
+
+            chrome.tabs.executeScript(tabs[0].id, { code: codeText });
+        });
+    },
+    showStatuses: function() {
+        chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
+            let codeText = `var elements = document.querySelectorAll(".js-timeline-item  .TimelineItem[data-team-hovercards-enabled]:not([data-url]), .js-timeline-item > div > div[id|=pullrequestreview] > .TimelineItem:not([data-url]), .js-timeline-item > .TimelineItem:not([data-url]) > span.TimelineItem-badge.bg-blue.text-white")
+                elements.forEach(function(element) { element.closest(".js-timeline-item").removeAttribute("style"); });`;
+
+            chrome.tabs.executeScript(tabs[0].id, { code: codeText });
+        });
+    },
     checkUrl: function(url) {
         var pattern = "^https?:\\/\\/github.com\\/[^\\/]+\\/[^\\/]+\\/pull\\/(\\d+)";
         var regex = new RegExp(pattern);

diff --git a/popup.html b/popup.html
@@ -7,15 +7,31 @@
 
     <body>
         <p style="white-space: nowrap;">Pull Request Helper</p>
-        <hr class="dotted"/>
-        <button id="expandButton" class="button">Expand All</button>
-        <hr class="solid"/>
-        <button id="hideResolvedButton" class="button">Hide Resolved</button>
-        <button id="showResolvedButton" class="button">Show Resolved</button>
         <hr class="solid"/>
-        <button id="hideCommitsButton" class="button">Hide Commits</button>
-        <button id="showCommitsButton" class="button">Show Commits</button>
+
+        <button id="expandButton" class="button">Expand All</button>
+
+        <hr class="dotted"/>
+
+		<div class="button-group">
+			<button id="hideResolvedButton" class="button">Hide Resolved</button>
+			<button id="showResolvedButton" class="button">Show Resolved</button>
+		</div>
+
+        <hr class="dotted"/>
+
+		<div class="button-group">
+			<button id="hideCommitsButton" class="button">Hide Commits</button>
+			<button id="showCommitsButton" class="button">Show Commits</button>
+		</div>
+
         <hr class="dotted"/>
+
+		<div class="button-group">
+			<button id="hideStatusesButton" class="button">Hide Statuses</button>
+			<button id="showStatusesButton" class="button">Show Statuses</button>
+		</div>
+
         <button id="refreshButton"><img src="images/refresh.svg"></img></button>
         <script src="js/popup.js"></script>
     </body>