Refactor segment expanding to use <details>

2 files changed, 29 insertions, 31 deletions

diff --git a/public/popup.css b/public/popup.css
index 9ab4100e..641d19c6 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -79,18 +79,26 @@
 }
 
 /*
- * Individual segments (<button> elements)
+ * <details> wrapper around each segment
  */
 
-.segmentTimeButton {
-  background: transparent;
-  border: 0;
+.votingButtons[open] {
+  padding-bottom: 5px;
+}
+
+.votingButtons:hover {
+  background-color: var(--sb-grey-bg-color);
+}
+
+/*
+ * Individual segments summaries (clickable <summary>)
+ */
+
+.segmentSummary {
   cursor: pointer;
-  color: var(--sb-main-fg-color);
   font-weight: bold;
   padding: 7px;
-  outline: none;
-  width: 100%;
+  list-style: none;
   white-space: nowrap;
 }
 
@@ -501,7 +509,3 @@
 #sponsorBlockPopupBody .hidden {
   display: none !important;
 }
-
-.voteButtonsContainer--hide {
-  display: none;
-}
diff --git a/src/popup.ts b/src/popup.ts
index a6b1ff44..df47d817 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -238,7 +238,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
             PageElements.sbConsiderDonateLink.addEventListener("click", () => {
                 Config.config.donateClicked = Config.config.donateClicked + 1;
             });
-            
+
             PageElements.sbCloseDonate.addEventListener("click", () => {
                 PageElements.sponsorTimesDonateContainer.style.display = "none";
                 Config.config.showPopupDonationCount = 100;
@@ -393,8 +393,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 const UUID = segmentTimes[i].UUID;
                 const locked = segmentTimes[i].locked;
 
-                const sponsorTimeButton = document.createElement("button");
-                sponsorTimeButton.className = "segmentTimeButton popupElement";
+                const segmentSummary = document.createElement("summary");
+                segmentSummary.className = "segmentSummary";
 
                 const categoryColorCircle = document.createElement("span");
                 categoryColorCircle.id = "sponsorTimesCategoryColorCircle" + UUID;
@@ -418,26 +418,25 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 if (segmentTimes[i].actionType === ActionType.Full) {
                     segmentTimeFromToNode.innerText = chrome.i18n.getMessage("full");
                 } else {
-                    segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) + 
+                    segmentTimeFromToNode.innerText = utils.getFormattedTime(segmentTimes[i].segment[0], true) +
                             (segmentTimes[i].actionType !== ActionType.Poi
-                                ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true) 
+                                ? " " + chrome.i18n.getMessage("to") + " " + utils.getFormattedTime(segmentTimes[i].segment[1], true)
                                 : "");
                 }
-                
+
                 segmentTimeFromToNode.style.margin = "5px";
 
-                sponsorTimeButton.appendChild(categoryColorCircle);
-                sponsorTimeButton.appendChild(textNode);
-                sponsorTimeButton.appendChild(segmentTimeFromToNode);
+                segmentSummary.appendChild(categoryColorCircle);
+                segmentSummary.appendChild(textNode);
+                segmentSummary.appendChild(segmentTimeFromToNode);
 
-                const votingButtons = document.createElement("div");
+                const votingButtons = document.createElement("details");
                 votingButtons.classList.add("votingButtons");
 
                 //thumbs up and down buttons
                 const voteButtonsContainer = document.createElement("div");
                 voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
                 voteButtonsContainer.setAttribute("align", "center");
-                voteButtonsContainer.classList.add('voteButtonsContainer--hide');
 
                 const upvoteButton = document.createElement("img");
                 upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
@@ -500,16 +499,11 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 voteButtonsContainer.appendChild(upvoteButton);
                 voteButtonsContainer.appendChild(downvoteButton);
                 voteButtonsContainer.appendChild(uuidButton);
-                if (segmentTimes[i].actionType === ActionType.Skip 
+                if (segmentTimes[i].actionType === ActionType.Skip
                         && [SponsorHideType.Visible, SponsorHideType.Hidden].includes(segmentTimes[i].hidden)) {
                     voteButtonsContainer.appendChild(hideButton);
                 }
 
-                //add click listener to open up vote panel
-                sponsorTimeButton.addEventListener("click", function () {
-                    voteButtonsContainer.classList.toggle("voteButtonsContainer--hide");
-                });
-
                 // Will contain request status
                 const voteStatusContainer = document.createElement("div");
                 voteStatusContainer.id = "sponsorTimesVoteStatusContainer" + UUID;
@@ -521,7 +515,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 thanksForVotingText.classList.add("sponsorTimesThanksForVotingText");
                 voteStatusContainer.appendChild(thanksForVotingText);
 
-                votingButtons.append(sponsorTimeButton);
+                votingButtons.append(segmentSummary);
                 votingButtons.append(voteButtonsContainer);
                 votingButtons.append(voteStatusContainer);
 
@@ -796,8 +790,8 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     /**
      * Converts time in minutes to 2d 5h 25.1
      * If less than 1 hour, just returns minutes
-     * 
-     * @param {float} minutes 
+     *
+     * @param {float} minutes
      * @returns {string}
      */
     function getFormattedHours(minutes) {