popup.html code cleanup & simplification

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; */
 }
 
 /*

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,18 +79,15 @@
         <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 id="setUsernameStatus" class="u-mZ white-text" style="display: none"></span>
             </span>
             <div id="setUsernameContainer">
               <p id="usernameValue"></p>
@@ -105,40 +105,41 @@
               </button>
             </div>
           </div>
-          </div>
           <!-- Submissions -->
           <div id="sponsorTimesContributionsContainer" class="hidden">
-            <div>
             <p class="u-mZ grey-text">__MSG_Submissions__:</p>
-              <span id="sponsorTimesContributionsDisplay">
-                0
-              </span>
-            </div>
+            <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">

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 {