Merge pull request #1237 from AlecRust/refine-popup

Improve popup alert and fix Firefox issues

public/popup.css

@@ -15,6 +15,14 @@
   margin-bottom: 16px;
 }
 
+/*
+ * Disable popup max height when displayed in-page
+ */
+
+#sponsorBlockPopupContainer #sponsorBlockPopupHTML {
+  max-height: none;
+}
+
 /*
  * Disable fixed popup width when displayed in-page
  */
@@ -29,11 +37,14 @@
 
 #sponsorBlockPopupHTML {
   color-scheme: dark;
+  max-height: 600px;
+  overflow-y: auto;
 }
 
 #sponsorBlockPopupBody {
   margin: 0;
   width: 374px;
+  max-width: 100%; /* NOTE: Ensures content doesn't exceed restricted popup widths in Firefox */
   font-family: var(--sb-main-font-family);
   font-size: 14px;
   background-color: var(--sb-main-bg-color);
@@ -45,6 +56,11 @@
   text-align: center;
 }
 
+#sponsorblockPopup a,
+#sponsorblockPopup button {
+  cursor: pointer;
+}
+
 /*
  * Disable transition on all elements until the extension has loaded
  */
@@ -72,6 +88,19 @@
   opacity: 1;
 }
 
+/*
+ * Alert indicating that Beta server is enabled
+ */
+
+#sbBetaServerWarning {
+  padding: 8px;
+  font-size: 1em;
+  font-weight: 700;
+  color: var(--sb-main-fg-color);
+  background-color: var(--sb-red-bg-color);
+  cursor: pointer;
+}
+
 /*
  * Header logo
  */
@@ -98,7 +127,6 @@
   background: transparent;
   border: 0;
   border-radius: 50%;
-  cursor: pointer;
   display: flex;
   padding: 5px;
   margin: 5px auto;
@@ -182,9 +210,8 @@
 }
 
 .sbControlsMenu-item {
-  background-color: var(--sb-grey-bg-color);
+  background: transparent;
   border: 0;
-  padding: 0;
   cursor: pointer;
   user-select: none;
   padding: 10px 15px;
@@ -208,7 +235,6 @@
  */
 
 .toggleSwitchContainer {
-  cursor: pointer;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -295,11 +321,14 @@
  */
 
 #whitelistForceCheck {
-  font-weight: bold;
-  text-decoration: underline;
-  font-size: large;
-  cursor: pointer;
-  padding: 10px 0;
+  background-color: #fff3cd;
+  color: #664d03;
+  display: block;
+  padding: 10px 15px;
+}
+
+#whitelistForceCheck:hover {
+  background-color: #f2e4b7;
 }
 
 /*
@@ -307,11 +336,14 @@
  */
 
 #mainControls {
-  flex-flow: column;
-  align-items: center;
   margin-bottom: 12px;
 }
 
+.sponsorStartHint {
+  display: block;
+  padding: 0 10px 12px;
+}
+
 /*
  * Generic buttons used for "Segment Starts Now" and "Submit Times"
  */
@@ -323,7 +355,6 @@
   -webkit-border-radius: 28px;
   border-radius: 28px;
   display: inline-block;
-  cursor: pointer;
   color: var(--sb-main-fg-color);
   font-size: 16px;
   padding: 8px 37px;
@@ -372,7 +403,7 @@
 .sbYourWorkCols > div {
   display: flex;
   align-items: center;
-  width: 50%;
+  flex-basis: 50%;
   justify-content: center;
 }
 
@@ -381,11 +412,10 @@
  */
 
 #setUsernameButton,
-#submitUsername,
-#copyUserID {
+#copyUserID,
+#submitUsername {
   background: transparent;
   border: 0;
-  cursor: pointer;
   padding: 0;
   color: var(--sb-main-fg-color);
   width: fit-content;
@@ -472,7 +502,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   max-width: 130px;
-  margin-right: 8px;
+  margin: 0 8px 0 0;
 }
 
 /*
@@ -511,7 +541,6 @@
 
 #sbFooter a {
   color: var(--sb-main-fg-color);
-  cursor: pointer;
   text-decoration: none;
 }
 
@@ -524,33 +553,18 @@
   border: 1px solid #fff;
   border-radius: 5px;
   color: var(--sb-main-fg-color);
-  cursor: pointer;
   margin-bottom: 20px;
   padding: 5px;
 }
 
 /*
- * Generic spacing classes
+ * Generic utilities
  */
 
-.u-mZ {
+ #sponsorBlockPopupBody .u-mZ {
   margin: 0 !important;
 }
 
-/*
- * Generic hide utility classes
- */
-
 #sponsorBlockPopupBody .hidden {
   display: none !important;
 }
-
-#sbBetaServerWarning {
-  padding: 8px;
-  font-size: 1em;
-  font-weight: 700;
-  word-break: break-word;
-  color: var(--sb-main-fg-color);
-  background: var(--sb-red-bg-color);
-  cursor: pointer;
-}

public/popup.html

@@ -34,7 +34,7 @@
       </div>
 
       <div class="sbControlsMenu">
-        <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item" title="__MSG_forceChannelCheckPopup__">
+        <label id="whitelistButton" for="whitelistToggle" class="hidden sbControlsMenu-item">
           <input type="checkbox" style="display:none;" id="whitelistToggle">
           <svg viewBox="0 0 24 24" width="23" height="23" class="SBWhitelistIcon sbControlsMenu-itemIcon">
             <path d="M24 10H14V0h-4v10H0v4h10v10h4V14h10z" />
@@ -60,15 +60,15 @@
         </button>
       </div>
 
-      <p id="whitelistForceCheck" class="u-mZ hidden">
+      <a id="whitelistForceCheck" class="hidden">
         __MSG_forceChannelCheckPopup__
-      </p>
+      </a>
 
       <div id="mainControls" style="display: none">
         <p class="sbHeader">
           __MSG_recordTimesDescription__
         </p>
-        <sub style="margin-bottom: 12px;">__MSG_popupHint__</sub>
+        <sub class="sponsorStartHint">__MSG_popupHint__</sub>
         <div>
           <button id="sponsorStart" class="sbMediumButton">__MSG_sponsorStart__</button>
         </div>
@@ -84,7 +84,7 @@
           <div>
             <p class="u-mZ">__MSG_Username__:</p>
             <div id="setUsernameContainer">
-              <p id="usernameValue" class="u-mZ"></p>
+              <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>

src/popup.ts

@@ -306,7 +306,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
         //if request is undefined, then the page currently being browsed is not YouTube
         if (request != undefined) {
             //remove loading text
-            PageElements.mainControls.style.display = "flex";
+            PageElements.mainControls.style.display = "block";
             if (request.onMobileYouTube) PageElements.mainControls.classList.add("hidden");
             PageElements.whitelistButton.classList.remove("hidden");
             PageElements.loadingIndicator.style.display = "none";
@@ -693,6 +693,7 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                     PageElements.unwhitelistChannel.style.display = "unset";
                     document.querySelectorAll('.SBWhitelistIcon')[0].classList.add("rotated");
 
+                    //show 'consider force channel check' alert
                     if (!Config.config.forceChannelCheck) PageElements.whitelistForceCheck.classList.remove("hidden");
 
                     //save this
@@ -740,6 +741,9 @@ async function runThePopup(messageListener?: MessageListener): Promise<void> {
                     PageElements.unwhitelistChannel.style.display = "none";
                     document.querySelectorAll('.SBWhitelistIcon')[0].classList.remove("rotated");
 
+                    //hide 'consider force channel check' alert
+                    PageElements.whitelistForceCheck.classList.add("hidden");
+
                     //save this
                     Config.config.whitelistedChannels = whitelistedChannels;