Submit sponsor section in popup WIP

public/popup.css

@@ -134,7 +134,7 @@ div.logoText>p, .recordingSubtitle {
   justify-content: center;
 }
 
-#mainControls, #sponsorTimesSkipsDoneContainer, .toggleSwitchContainer {
+#whitelistButton, #sponsorTimesSkipsDoneContainer, .toggleSwitchContainer {
   margin-bottom: 2px !important;
 }
 
@@ -173,7 +173,7 @@ div.logoText>p, .recordingSubtitle {
   font-size: 19px;
 }
 
-#mainControls > label > svg {
+#whitelistButton > label > svg {
   min-width: 16px;
   min-height: 16px;
   margin-top: auto;
@@ -209,12 +209,12 @@ label>svg, button#optionsButton>img, .logoText>img, #usernameValue {
   margin-right: 8px;
 }
 
-#mainControls>label, #additionalButtons>button, div#setUsernameContainer {
+#whitelistButton>label, #additionalButtons>button, div#setUsernameContainer {
   display: flex;
   flex-flow: row nowrap;
 }
 
-#mainControls>label, #additionalButtons>button, div#setUsernameContainer>button {
+#whitelistButton>label, #additionalButtons>button, div#setUsernameContainer>button {
   cursor: pointer;
 }
 

public/popup.html

@@ -20,6 +20,23 @@
         <p id="videoFound"></p>
       </div>
       <p id="downloadedSponsorMessageTimes"></p>
+
+      <div id="mainControls" style="display: none">
+        <p class="popupElement"> 
+          __MSG_recordTimesDescription__
+        </p>
+        <div>
+          <button id="sponsorStart" class="greenButton popupElement">__MSG_sponsorStart__</button>
+        </div>
+        <sub class="popupElement">__MSG_popupHint__</sub>
+        <div id="submissionSection"  class="popupElement" style="display: none">
+          <b>Sponsor Editing has been moved and will appear after you click submit</b>
+          <div id="submitTimesContainer" class="popupElement" style="display: none">
+            <button id="submitTimes" class="smallButton popupElement">__MSG_submitTimesButton__</button>
+          </div>
+        </div>
+      </div>
+
     </div>
     <div class="sidebyside">
       <div id="disableExtension">
@@ -36,7 +53,7 @@
       </div>
       <div id="additionalButtons">
         <!-- grayedOut until loading complete -->
-        <div id="mainControls" class="grayedOut bottomSpace" title="__MSG_forceChannelCheckPopup__">
+        <div id="whitelistButton" class="grayedOut bottomSpace" title="__MSG_forceChannelCheckPopup__">
           <input type="checkbox" style="display:none;" id="whitelistToggle">
           <label for="whitelistToggle" class="whitelistToggleText">
             <svg viewBox="0 0 24 24" width="16" height="16">

src/popup.ts

@@ -47,7 +47,7 @@ async function runThePopup(messageListener?: MessageListener) {
 
     var PageElements: any = {};
 
-    [//"sponsorStart",
+    ["sponsorStart",
     // Top toggles
     "whitelistChannel",
     "unwhitelistChannel",
@@ -60,7 +60,7 @@ async function runThePopup(messageListener?: MessageListener) {
     //"showNoticeAgain",
     "optionsButton",
     // More controls
-    //"submitTimes",
+    "submitTimes",
     //"reportAnIssue",
     // sponsorTimesContributions
     "sponsorTimesContributionsContainer",
@@ -101,6 +101,7 @@ async function runThePopup(messageListener?: MessageListener) {
     "videoFound",
     "sponsorMessageTimes",
     "downloadedSponsorMessageTimes",
+    "whitelistButton",
     ].forEach(id => PageElements[id] = document.getElementById(id));
 
     //setup click listeners
@@ -179,11 +180,11 @@ async function runThePopup(messageListener?: MessageListener) {
 
     //get the amount of times this user has contributed and display it to thank them
     if (Config.config.sponsorTimesContributed != undefined) {
-        if (Config.config.sponsorTimesContributed !== 1) {
+        /*if (Config.config.sponsorTimesContributed !== 1) {
             PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Segments");
         } else {
             PageElements.sponsorTimesContributionsDisplayEndWord.innerText = chrome.i18n.getMessage("Segment");
-        }
+        }*/
         PageElements.sponsorTimesContributionsDisplay.innerText = Config.config.sponsorTimesContributed;
         PageElements.sponsorTimesContributionsContainer.style.display = "flex";
 
@@ -309,7 +310,8 @@ async function runThePopup(messageListener?: MessageListener) {
         //if request is undefined, then the page currently being browsed is not YouTube
         if (request != undefined) {
             //remove loading text
-            PageElements.mainControls.classList.remove("grayedOut");
+            PageElements.mainControls.style.display = "unset";
+            PageElements.whitelistButton.classList.remove("grayedOut");
             PageElements.loadingIndicator.style.display = "none";
 
             if (request.found) {