From 42511cb66734ad70cc462df944568b4f6d13f6be Mon Sep 17 00:00:00 2001
From: Nikita Krupin <krupin.nikita0110@gmail.com>
Date: Mon, 2 May 2022 22:26:51 -0400
Subject: [PATCH] popup.html code cleanup & simplification

---
 public/popup.css  |  9 ++---
 public/popup.html | 91 ++++++++++++++++++++++++-----------------------
 src/popup.ts      |  8 ++---
 3 files changed, 53 insertions(+), 55 deletions(-)

diff --git a/public/popup.css b/public/popup.css
index 563f963c..f4d15c9b 100644
--- a/public/popup.css
+++ b/public/popup.css
@@ -496,7 +496,6 @@
 }
 
 #usernameElement {
-  z-index: 2;
   padding: 8px;
 }
 
@@ -550,7 +549,7 @@
  * Left align "Username" and "Submissions" labels
  */
 
-#usernameElement > div > span,
+#usernameElement > span,
 #sponsorTimesContributionsContainer {
   text-align: start;
 }
@@ -590,13 +589,11 @@
  * Improve alignment of username and submissions
  */
 
-#usernameElement > div,
-#sponsorTimesContributionsContainer > div {
+#usernameElement,
+#sponsorTimesContributionsContainer {
   display: flex;
   flex-direction: column;
   justify-content: start;
-  /* flex-flow: column nowrap; */
-  /* align-items: flex-start; */
 }
 
 /*
diff --git a/public/popup.html b/public/popup.html
index c444a16d..1bc5e1d1 100644
--- a/public/popup.html
+++ b/public/popup.html
@@ -15,7 +15,6 @@
         __MSG_betaServerWarning__
       </div>
 
-      
       <header class="sbPopupLogo">
         <img src="icons/IconSponsorBlocker256px.png" alt="SponsorBlock" width="40" height="40" id="sponsorBlockPopupLogo">
         <p class="u-mZ" style="margin: auto;">SponsorBlock</p>
@@ -29,11 +28,13 @@
         <button id="refreshSegmentsButton" title="__MSG_refreshSegments__">
           <img src="/icons/refresh.svg" alt="Refresh icon" id="refreshSegments" />
         </button>
+        <!-- Video Segments -->
         <div id="issueReporterContainer">
           <div id="issueReporterTimeButtons"></div>
         </div>
       </div>
       
+      <!-- Toggle Box -->
       <div class="sbControlsMenu">
         <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
           <input type="checkbox" style="display:none;" id="whitelistToggle">
@@ -55,6 +56,7 @@
           <span id="disableSkipping">__MSG_disableSkipping__</span>
           <span id="enableSkipping" style="display: none">__MSG_enableSkipping__</span>
         </label>
+        <!-- Settings link, re-positioned to top-right -->
         <button id="optionsButton" data-hover="__MSG_Options__" title="__MSG_OptionsInfo__">
           <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"  fill="currentColor"><path d="M24 13.6v-3.2c-1.7-.6-2.7-.8-3.2-2h0c-.5-1.3.1-2.1.8-3.7l-2.3-2.3c-1.6.7-2.4 1.4-3.7.8h0c-1.3-.5-1.4-1.6-2-3.2h-3.2c-.6 1.6-.7 2.7-2 3.2h0c-1.3.5-2.1-.1-3.7-.8L2.4 4.7c.7 1.6 1.4 2.4.8 3.7s-1.6 1.4-3.2 2v3.2c1.6.6 2.7.7 3.2 2 .5 1.3-.1 2.2-.8 3.7l2.3 2.3c1.6-.7 2.4-1.4 3.7-.8h0c1.3.5 1.4 1.6 2 3.2h3.2c.6-1.6.8-2.7 2-3.2h0c1.3-.5 2.1.1 3.7.9l2.3-2.3c-.7-1.6-1.4-2.4-.8-3.7s1.6-1.4 3.2-2zM12 16a4 4 0 1 1 0-8 4 4 0 1 1 0 8z"/></svg>
         </button>
@@ -64,6 +66,7 @@
         __MSG_forceChannelCheckPopup__
       </a>
 
+      <!-- Submit box -->
       <div id="mainControls" style="display: none">
         <p class="sbHeader">
           __MSG_recordTimesDescription__
@@ -76,69 +79,67 @@
         <span id="submissionHint" style="display: none;">__MSG_submissionEditHint__</span>
       </div>
 
-      <!-- Your Work -->
+      <!-- Your Work dropdown -->
       <details class="sbYourWorkCols">
-        <summary class="recordingSubtitle sbHeader" style="padding: 8px 16px; cursor: pointer;">&nbsp;&nbsp;__MSG_yourWork__</summary>
+        <summary class="sbHeader" style="padding: 8px 16px; cursor: pointer;">&nbsp;&nbsp;__MSG_yourWork__</summary>
         <div>
           <!-- Username -->
           <div id="usernameElement">
-            <div>
-              <span class="u-mZ grey-text">__MSG_Username__:
-                <!-- loading/errors -->
-                <span id="setUsernameStatusContainer" style="display: none">
-                  <span id="setUsernameStatus" class="u-mZ white-text"></span>
-                </span>
-              </span>
-              <div id="setUsernameContainer">
-                <p id="usernameValue"></p>
-                <button id="setUsernameButton" title="__MSG_setUsername__">
-                  <img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
-                </button>
-                <button id="copyUserID" title="__MSG_copyPublicID__">
-                  <img src="/icons/clipboard.svg" alt="__MSG_copyPublicID__" width="16" height="16" id="sbPopupIconCopyUserID">
-                </button>
-              </div>
-              <div id="setUsername" style="display: none">
-                <input id="usernameInput" placeholder="Username">
-                <button id="submitUsername">
-                  <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
-                </button>
-              </div>
+            <span class="u-mZ grey-text">__MSG_Username__:
+              <!-- loading/errors -->
+              <span id="setUsernameStatus" class="u-mZ white-text" style="display: none"></span>
+            </span>
+            <div id="setUsernameContainer">
+              <p id="usernameValue"></p>
+              <button id="setUsernameButton" title="__MSG_setUsername__">
+                <img src="/icons/pencil.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconEdit">
+              </button>
+              <button id="copyUserID" title="__MSG_copyPublicID__">
+                <img src="/icons/clipboard.svg" alt="__MSG_copyPublicID__" width="16" height="16" id="sbPopupIconCopyUserID">
+              </button>
+            </div>
+            <div id="setUsername" style="display: none">
+              <input id="usernameInput" placeholder="Username">
+              <button id="submitUsername">
+                <img src="/icons/check.svg" alt="__MSG_setUsername__" width="16" height="16" id="sbPopupIconCheck">
+              </button>
             </div>
           </div>
           <!-- Submissions -->
           <div id="sponsorTimesContributionsContainer" class="hidden">
-            <div>
-              <p class="u-mZ grey-text">__MSG_Submissions__:</p>
-              <span id="sponsorTimesContributionsDisplay">
-                0
-              </span>
-            </div>
+            <p class="u-mZ grey-text">__MSG_Submissions__:</p>
+            <span id="sponsorTimesContributionsDisplay">0</span>
           </div>
         </div>
       </details>
 
       <p id="sponsorTimesViewsContainer" style="display: none" class="u-mZ">
         __MSG_savedPeopleFrom__
-        <b><span id="sponsorTimesViewsDisplay">
-            0
-          </span></b>
+        <b>
+          <span id="sponsorTimesViewsDisplay">0</span>
+        </b>
         <span id="sponsorTimesViewsDisplayEndWord">__MSG_Segments__</span>
-        <br>
-        (<b><span id="sponsorTimesOthersTimeSavedDisplay">0</span>
-          <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span></b>
-        <span>__MSG_youHaveSavedTimeEnd__</span>).
+        <br />
+        (
+        <b>
+          <span id="sponsorTimesOthersTimeSavedDisplay">0</span>
+          <span id="sponsorTimesOthersTimeSavedEndWord">__MSG_minsLower__</span>
+        </b>
+        <span>__MSG_youHaveSavedTimeEnd__</span>
+        ).
       </p>
       <p id="sponsorTimesSkipsDoneContainer" style="display: none" class="u-mZ">
         __MSG_youHaveSkipped__
-        <b><span id="sponsorTimesSkipsDoneDisplay">
-            0
-          </span></b>
+        <b>
+          <span id="sponsorTimesSkipsDoneDisplay">0</span>
+        </b>
         <span id="sponsorTimesSkipsDoneEndWord">__MSG_Segments__</span>
-        (<b><span id="sponsorTimeSavedDisplay">
-            0
-          </span>
-          <span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span></b>).
+        (
+          <b>
+            <span id="sponsorTimeSavedDisplay">0</span>
+            <span id="sponsorTimeSavedEndWord">__MSG_minsLower__</span>
+          </b>
+        ).
       </p>
 
       <footer id="sbFooter">
diff --git a/src/popup.ts b/src/popup.ts
index 5e14df8a..7b5a815e 100644
--- a/src/popup.ts
+++ b/src/popup.ts
@@ -92,7 +92,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         // Username
         "setUsernameContainer",
         "setUsernameButton",
-        "setUsernameStatusContainer",
+        "setUsernameStatus",
         "setUsernameStatus",
         "setUsername",
         "usernameInput",
@@ -599,7 +599,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         PageElements.setUsername.style.display = "flex";
         PageElements.setUsername.classList.add("SBExpanded");
 
-        PageElements.setUsernameStatusContainer.style.display = "none";
+        PageElements.setUsernameStatus.style.display = "none";
 
         PageElements.sponsorTimesContributionsContainer.classList.add("hidden");
     }
@@ -607,7 +607,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
     //submit the new username
     function submitUsername() {
         //add loading indicator
-        PageElements.setUsernameStatusContainer.style.display = "unset";
+        PageElements.setUsernameStatus.style.display = "unset";
         PageElements.setUsernameStatus.innerText = chrome.i18n.getMessage("Loading");
 
         utils.sendRequestToServer("POST", "/api/setUsername?userID=" + Config.config.userID + "&username=" + PageElements.usernameInput.value, function (response) {
@@ -620,7 +620,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                 PageElements.setUsername.classList.remove("SBExpanded");
                 PageElements.usernameValue.innerText = PageElements.usernameInput.value;
 
-                PageElements.setUsernameStatusContainer.style.display = "none";
+                PageElements.setUsernameStatus.style.display = "none";
 
                 PageElements.sponsorTimesContributionsContainer.classList.remove("hidden");
             } else {