Merged into master

popup.js

@@ -1,72 +1,95 @@
 
-var SB = {};
+//make this a function to allow this to run on the content page
+function runThePopup() {
 
-["sponsorStart",
-"clearTimes",
-"submitTimes",
-"showNoticeAgain",
-"hideVideoPlayerControls",
-"showVideoPlayerControls",
-"hideInfoButtonPlayerControls",
-"showInfoButtonPlayerControls",
-"hideDeleteButtonPlayerControls",
-"showDeleteButtonPlayerControls",
-"disableSponsorViewTracking",
-"enableSponsorViewTracking",
-"optionsButton",
-"reportAnIssue",
-// sponsorTimesContributions
-"sponsorTimesContributionsContainer",
-"sponsorTimesContributionsDisplay",
-"sponsorTimesContributionsDisplayEndWord",
-// sponsorTimesViewsDisplay
-"sponsorTimesViewsContainer",
-"sponsorTimesViewsDisplay",
-"sponsorTimesViewsDisplayEndWord",
-// discordButtons
-"discordButtonContainer",
-"hideDiscordButton",
-// More
+  //is it in the popup or content script
+  var inPopup = true;
+  if (chrome.tabs == undefined) {
+      //this is on the content script, use direct communication
+      chrome.tabs = {};
+      chrome.tabs.sendMessage = function(id, request, callback) {
+          messageListener(request, null, callback);
+      }
+  
+      //add a dummy query method
+      chrome.tabs.query = function(config, callback) {
+          callback([{
+              url: document.URL,
+              id: -1
+          }]);
+      }
+  
+      inPopup = false;
+  }
+  
+  var SB = {};
+
+  ["sponsorStart",
+  "clearTimes",
+  "submitTimes",
+  "showNoticeAgain",
+  "hideVideoPlayerControls",
+  "showVideoPlayerControls",
+  "hideInfoButtonPlayerControls",
+  "showInfoButtonPlayerControls",
+  "hideDeleteButtonPlayerControls",
+  "showDeleteButtonPlayerControls",
+  "disableSponsorViewTracking",
+  "enableSponsorViewTracking",
+  "optionsButton",
+  "reportAnIssue",
+  // sponsorTimesContributions
+  "sponsorTimesContributionsContainer",
+  "sponsorTimesContributionsDisplay",
+  "sponsorTimesContributionsDisplayEndWord",
+  // sponsorTimesViewsDisplay
+  "sponsorTimesViewsContainer",
+  "sponsorTimesViewsDisplay",
+  "sponsorTimesViewsDisplayEndWord",
+  // discordButtons
+  "discordButtonContainer",
+  "hideDiscordButton",
+  // More
   "submissionSection",
   "mainControls",
   "loadingIndicator",
   "videoFound",
   "sponsorMessageTimes",
   "downloadedSponsorMessageTimes",
-].forEach(id => SB[id] = document.getElementById(id));
+  ].forEach(id => SB[id] = document.getElementById(id));
 
-//setup click listeners
-SB.sponsorStart.addEventListener("click", sendSponsorStartMessage);
-SB.clearTimes.addEventListener("click", clearTimes);
-SB.submitTimes.addEventListener("click", submitTimes);
-SB.showNoticeAgain.addEventListener("click", showNoticeAgain);
-SB.hideVideoPlayerControls.addEventListener("click", hideVideoPlayerControls);
-SB.showVideoPlayerControls.addEventListener("click", showVideoPlayerControls);
-SB.hideInfoButtonPlayerControls.addEventListener("click", hideInfoButtonPlayerControls);
-SB.showInfoButtonPlayerControls.addEventListener("click", showInfoButtonPlayerControls);
-SB.hideDeleteButtonPlayerControls.addEventListener("click", hideDeleteButtonPlayerControls);
-SB.showDeleteButtonPlayerControls.addEventListener("click", showDeleteButtonPlayerControls);
-SB.disableSponsorViewTracking.addEventListener("click", disableSponsorViewTracking);
-SB.enableSponsorViewTracking.addEventListener("click", enableSponsorViewTracking);
-SB.optionsButton.addEventListener("click", openOptions);
-SB.reportAnIssue.addEventListener("click", reportAnIssue);
-SB.hideDiscordButton.addEventListener("click", hideDiscordButton);
+  //setup click listeners
+  SB.sponsorStart.addEventListener("click", sendSponsorStartMessage);
+  SB.clearTimes.addEventListener("click", clearTimes);
+  SB.submitTimes.addEventListener("click", submitTimes);
+  SB.showNoticeAgain.addEventListener("click", showNoticeAgain);
+  SB.hideVideoPlayerControls.addEventListener("click", hideVideoPlayerControls);
+  SB.showVideoPlayerControls.addEventListener("click", showVideoPlayerControls);
+  SB.hideInfoButtonPlayerControls.addEventListener("click", hideInfoButtonPlayerControls);
+  SB.showInfoButtonPlayerControls.addEventListener("click", showInfoButtonPlayerControls);
+  SB.hideDeleteButtonPlayerControls.addEventListener("click", hideDeleteButtonPlayerControls);
+  SB.showDeleteButtonPlayerControls.addEventListener("click", showDeleteButtonPlayerControls);
+  SB.disableSponsorViewTracking.addEventListener("click", disableSponsorViewTracking);
+  SB.enableSponsorViewTracking.addEventListener("click", enableSponsorViewTracking);
+  SB.optionsButton.addEventListener("click", openOptions);
+  SB.reportAnIssue.addEventListener("click", reportAnIssue);
+  SB.hideDiscordButton.addEventListener("click", hideDiscordButton);
   
   
-//if true, the button now selects the end time
-var startTimeChosen = false;
+  //if true, the button now selects the end time
+  let startTimeChosen = false;
   
-//the start and end time pairs (2d)
-var sponsorTimes = [];
+  //the start and end time pairs (2d)
+  let sponsorTimes = [];
   
-//current video ID of this tab
-var currentVideoID = null;
+  //current video ID of this tab
+  let currentVideoID = null;
   
-//is this a YouTube tab?
-var isYouTubeTab = false;
+  //is this a YouTube tab?
+  let isYouTubeTab = false;
   
-//see if discord link can be shown
-chrome.storage.sync.get(["hideDiscordLink"], function(result) {
+  //see if discord link can be shown
+  chrome.storage.sync.get(["hideDiscordLink"], function(result) {
     let hideDiscordLink = result.hideDiscordLink;
     if (hideDiscordLink == undefined || !hideDiscordLink) {
       chrome.storage.sync.get(["hideDiscordLaunches"], function(result) {
@@ -83,51 +106,51 @@ chrome.storage.sync.get(["hideDiscordLink"], function(result) {
         }
       });
     }
-});
+  });
   
-//if the don't show notice again variable is true, an option to 
-//  disable should be available
-chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
+  //if the don't show notice again letiable is true, an option to 
+  //  disable should be available
+  chrome.storage.sync.get(["dontShowNoticeAgain"], function(result) {
     let dontShowNoticeAgain = result.dontShowNoticeAgain;
     if (dontShowNoticeAgain != undefined && dontShowNoticeAgain) {
       SB.showNoticeAgain.style.display = "unset";
     }
-});
+  });
   
-//show proper video player controls options
-chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
+  //show proper video player controls options
+  chrome.storage.sync.get(["hideVideoPlayerControls"], function(result) {
     let hideVideoPlayerControls = result.hideVideoPlayerControls;
     if (hideVideoPlayerControls != undefined && hideVideoPlayerControls) {
       SB.hideVideoPlayerControls.style.display = "none";
       SB.showVideoPlayerControls.style.display = "unset";
     }
-});
-chrome.storage.sync.get(["hideInfoButtonPlayerControls"], function(result) {
+  });
+  chrome.storage.sync.get(["hideInfoButtonPlayerControls"], function(result) {
     let hideInfoButtonPlayerControls = result.hideInfoButtonPlayerControls;
     if (hideInfoButtonPlayerControls != undefined && hideInfoButtonPlayerControls) {
       SB.hideInfoButtonPlayerControls.style.display = "none";
       SB.showInfoButtonPlayerControls.style.display = "unset";
     }
-});
-chrome.storage.sync.get(["hideDeleteButtonPlayerControls"], function(result) {
+  });
+  chrome.storage.sync.get(["hideDeleteButtonPlayerControls"], function(result) {
     let hideDeleteButtonPlayerControls = result.hideDeleteButtonPlayerControls;
     if (hideDeleteButtonPlayerControls != undefined && hideDeleteButtonPlayerControls) {
       SB.hideDeleteButtonPlayerControls.style.display = "none";
       SB.showDeleteButtonPlayerControls.style.display = "unset";
     }
-});
+  });
   
-//show proper tracking option
-chrome.storage.sync.get(["trackViewCount"], function(result) {
+  //show proper tracking option
+  chrome.storage.sync.get(["trackViewCount"], function(result) {
     let trackViewCount = result.trackViewCount;
     if (trackViewCount != undefined && !trackViewCount) {
       SB.disableSponsorViewTracking.style.display = "none";
       SB.enableSponsorViewTracking.style.display = "unset";
     }
-});
+  });
   
-//get the amount of times this user has contributed and display it to thank them
-chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
+  //get the amount of times this user has contributed and display it to thank them
+  chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
     if (result.sponsorTimesContributed != undefined) {
       if (result.sponsorTimesContributed > 1) {
         SB.sponsorTimesContributionsDisplayEndWord.innerText = "sponsors."
@@ -160,15 +183,16 @@ chrome.storage.sync.get(["sponsorTimesContributed"], function(result) {
         }
       });
     }
-});
+  });
   
   
-chrome.tabs.query({
+  chrome.tabs.query({
       active: true,
       currentWindow: true
-}, loadTabData);
+  }, loadTabData);
   
-function loadTabData(tabs) {
+  
+  function loadTabData(tabs) {
     //set current videoID
     currentVideoID = getYouTubeVideoID(tabs[0].url);
   
@@ -205,9 +229,9 @@ function loadTabData(tabs) {
       {message: 'isInfoFound'},
       infoFound
     );
-}
+  }
   
-function infoFound(request) {
+  function infoFound(request) {
     if(chrome.runtime.lastError) {
       //This page doesn't have the injected content script, or at least not yet
       displayNoVideo();
@@ -217,7 +241,7 @@ function infoFound(request) {
     //if request is undefined, then the page currently being browsed is not YouTube
     if (request != undefined) {
       //this must be a YouTube video
-    //set variable
+      //set letiable
       isYouTubeTab = true;
   
       //remove loading text
@@ -232,16 +256,16 @@ function infoFound(request) {
         SB.videoFound.innerHTML = "No sponsors found"
       }
     }
-}
+  }
   
-function setVideoID(request) {
+  function setVideoID(request) {
     //if request is undefined, then the page currently being browsed is not YouTube
     if (request != undefined) {
       videoID = request.videoID;
     }
-}
+  }
   
-function sendSponsorStartMessage() {
+  function sendSponsorStartMessage() {
       //the content script will get the message if a YouTube page is open
       chrome.tabs.query({
         active: true,
@@ -253,9 +277,9 @@ function sendSponsorStartMessage() {
           startSponsorCallback
         );
       });
-}
+  }
   
-function startSponsorCallback(response) {
+  function startSponsorCallback(response) {
     let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0);
   
     if (sponsorTimes[sponsorTimesIndex] == undefined) {
@@ -276,11 +300,10 @@ function startSponsorCallback(response) {
     SB.submissionSection.style.display = "unset";
   
     showSubmitTimesIfNecessary();
-}
-
-//display the video times from the array
-function displaySponsorTimes() {
+  }
   
+  //display the video times from the array
+  function displaySponsorTimes() {
     //remove all children
     while (SB.sponsorMessageTimes.firstChild) {
       SB.sponsorMessageTimes.removeChild(SB.sponsorMessageTimes.firstChild);
@@ -288,19 +311,19 @@ function displaySponsorTimes() {
 
     //add sponsor times
     SB.sponsorMessageTimes.appendChild(getSponsorTimesMessageDiv(sponsorTimes));
-}
+  }
   
-//display the video times from the array at the top, in a different section
-function displayDownloadedSponsorTimes(request) {
+  //display the video times from the array at the top, in a different section
+  function displayDownloadedSponsorTimes(request) {
     if (request.sponsorTimes != undefined) {
       //set it to the message
-    SB.downloadedSponsorMessageTimes.innerHTML = getSponsorTimesMessage(request.sponsorTimes);
+      SB.downloadedSponsorMessageTimes.innerText = getSponsorTimesMessage(request.sponsorTimes);
 
       //add them as buttons to the issue reporting container
       let container = document.getElementById("issueReporterTimeButtons");
       for (let i = 0; i < request.sponsorTimes.length; i++) {
         let sponsorTimeButton = document.createElement("button");
-      sponsorTimeButton.className = "warningButton";
+        sponsorTimeButton.className = "warningButton popupElement";
         sponsorTimeButton.innerText = getFormattedTime(request.sponsorTimes[i][0]) + " to " + getFormattedTime(request.sponsorTimes[i][1]);
         
         let votingButtons = document.createElement("div");
@@ -315,13 +338,13 @@ function displayDownloadedSponsorTimes(request) {
   
         let upvoteButton = document.createElement("img");
         upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
-      upvoteButton.className = "voteButton";
+        upvoteButton.className = "voteButton popupElement";
         upvoteButton.src = chrome.extension.getURL("icons/upvote.png");
         upvoteButton.addEventListener("click", () => vote(1, UUID));
   
         let downvoteButton = document.createElement("img");
         downvoteButton.id = "sponsorTimesDownvoteButtonsContainer" + UUID;
-      downvoteButton.className = "voteButton";
+        downvoteButton.className = "voteButton popupElement";
         downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
         downvoteButton.addEventListener("click", () => vote(0, UUID));
   
@@ -346,10 +369,10 @@ function displayDownloadedSponsorTimes(request) {
         }
       }
     }
-}
+  }
   
-//get the message that visually displays the video times
-function getSponsorTimesMessage(sponsorTimes) {
+  //get the message that visually displays the video times
+  function getSponsorTimesMessage(sponsorTimes) {
     let sponsorTimesMessage = "";
   
     for (let i = 0; i < sponsorTimes.length; i++) {
@@ -368,11 +391,11 @@ function getSponsorTimesMessage(sponsorTimes) {
     }
   
     return sponsorTimesMessage;
-}
+  }
   
-//get the message that visually displays the video times
-//this version is a div that contains each with delete buttons
-function getSponsorTimesMessageDiv(sponsorTimes) {
+  //get the message that visually displays the video times
+  //this version is a div that contains each with delete buttons
+  function getSponsorTimesMessageDiv(sponsorTimes) {
     // let sponsorTimesMessage = "";
     let sponsorTimesContainer = document.createElement("div");
     sponsorTimesContainer.id = "sponsorTimesContainer";
@@ -380,13 +403,13 @@ function getSponsorTimesMessageDiv(sponsorTimes) {
     for (let i = 0; i < sponsorTimes.length; i++) {
       let currentSponsorTimeContainer = document.createElement("div");
       currentSponsorTimeContainer.id = "sponsorTimeContainer" + i;
-    currentSponsorTimeContainer.className = "sponsorTime";
+      currentSponsorTimeContainer.className = "sponsorTime popupElement";
       let currentSponsorTimeMessage = "";
   
       let deleteButton = document.createElement("span");
       deleteButton.id = "sponsorTimeDeleteButton" + i;
       deleteButton.innerText = "Delete";
-    deleteButton.className = "mediumLink";
+      deleteButton.className = "mediumLink popupElement";
       let index = i;
       deleteButton.addEventListener("click", () => deleteSponsorTime(index));
   
@@ -396,7 +419,7 @@ function getSponsorTimesMessageDiv(sponsorTimes) {
       let editButton = document.createElement("span");
       editButton.id = "sponsorTimeEditButton" + i;
       editButton.innerText = "Edit";
-    editButton.className = "mediumLink";
+      editButton.className = "mediumLink popupElement";
       editButton.addEventListener("click", () => editSponsorTime(index));
   
       for (let s = 0; s < sponsorTimes[i].length; s++) {
@@ -425,44 +448,47 @@ function getSponsorTimesMessageDiv(sponsorTimes) {
     }
   
     return sponsorTimesContainer;
-}
+  }
   
-function editSponsorTime(index) {
+  function editSponsorTime(index) {
     if (document.getElementById("startTimeMinutes" + index) != null) {
       //already open
       return;
     }
 
+    //hide submit button
+    document.getElementById("submitTimesContainer").style.display = "none";
+  
     let sponsorTimeContainer = document.getElementById("sponsorTimeContainer" + index);
   
     //get sponsor time minutes and seconds boxes
     let startTimeMinutes = document.createElement("input");
     startTimeMinutes.id = "startTimeMinutes" + index;
-  startTimeMinutes.className = "sponsorTime";
+    startTimeMinutes.className = "sponsorTime popupElement";
     startTimeMinutes.type = "text";
     startTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][0]);
-  startTimeMinutes.style.width = "45";
+    startTimeMinutes.style.width = "45px";
     
     let startTimeSeconds = document.createElement("input");
     startTimeSeconds.id = "startTimeSeconds" + index;
-  startTimeSeconds.className = "sponsorTime";
+    startTimeSeconds.className = "sponsorTime popupElement";
     startTimeSeconds.type = "text";
     startTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][0]);
-  startTimeSeconds.style.width = "60";
+    startTimeSeconds.style.width = "60px";
   
     let endTimeMinutes = document.createElement("input");
     endTimeMinutes.id = "endTimeMinutes" + index;
-  endTimeMinutes.className = "sponsorTime";
+    endTimeMinutes.className = "sponsorTime popupElement";
     endTimeMinutes.type = "text";
     endTimeMinutes.value = getTimeInMinutes(sponsorTimes[index][1]);
-  endTimeMinutes.style.width = "45";
+    endTimeMinutes.style.width = "45px";
     
     let endTimeSeconds = document.createElement("input");
     endTimeSeconds.id = "endTimeSeconds" + index;
-  endTimeSeconds.className = "sponsorTime";
+    endTimeSeconds.className = "sponsorTime popupElement";
     endTimeSeconds.type = "text";
     endTimeSeconds.value = getTimeInFormattedSeconds(sponsorTimes[index][1]);
-  endTimeSeconds.style.width = "60";
+    endTimeSeconds.style.width = "60px";
   
     let colonText = document.createElement("span");
     colonText.innerText = ":";
@@ -487,17 +513,16 @@ function editSponsorTime(index) {
     let saveButton = document.createElement("span");
     saveButton.id = "sponsorTimeSaveButton" + index;
     saveButton.innerText = "Save";
-  saveButton.className = "mediumLink";
+    saveButton.className = "mediumLink popupElement";
     saveButton.addEventListener("click", () => saveSponsorTimeEdit(index));
   
     let editButton = document.getElementById("sponsorTimeEditButton" + index);
     let sponsorTimesContainer = document.getElementById("sponsorTimesContainer");
   
-  sponsorTimesContainer.removeChild(editButton);
-  sponsorTimesContainer.appendChild(saveButton);
-}
+    sponsorTimesContainer.replaceChild(saveButton, editButton);
+  }
   
-function saveSponsorTimeEdit(index) {
+  function saveSponsorTimeEdit(index) {
     let startTimeMinutes = document.getElementById("startTimeMinutes" + index);
     let startTimeSeconds = document.getElementById("startTimeSeconds" + index);
   
@@ -512,10 +537,12 @@ function saveSponsorTimeEdit(index) {
     chrome.storage.sync.set({[sponsorTimeKey]: sponsorTimes});
   
     displaySponsorTimes();
-}
 
-//deletes the sponsor time submitted at an index
-function deleteSponsorTime(index) {
+    showSubmitTimesIfNecessary();
+  }
+  
+  //deletes the sponsor time submitted at an index
+  function deleteSponsorTime(index) {
     //if it is not a complete sponsor time
     if (sponsorTimes[index].length < 2) {
       chrome.tabs.query({
@@ -558,9 +585,9 @@ function deleteSponsorTime(index) {
       //hide submission section
       document.getElementById("submissionSection").style.display = "none";
     }
-}
+  }
   
-function clearTimes() {
+  function clearTimes() {
     //send new sponsor time state to tab
     if (sponsorTimes.length > 0) {
       chrome.tabs.query({
@@ -587,9 +614,9 @@ function clearTimes() {
     document.getElementById("submissionSection").style.display = "none";
   
     resetStartTimeChosen();
-}
+  }
   
-function submitTimes() {
+  function submitTimes() {
     //make info message say loading
     document.getElementById("submitTimesInfoMessage").innerText = "Loading...";
     document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
@@ -624,9 +651,9 @@ function submitTimes() {
         }
       });
     }
-}
+  }
   
-function showNoticeAgain() {
+  function showNoticeAgain() {
     chrome.storage.sync.set({"dontShowNoticeAgain": false});
   
     chrome.tabs.query({
@@ -639,9 +666,9 @@ function showNoticeAgain() {
     });
   
     SB.showNoticeAgain.style.display = "none";
-}
+  }
   
-function hideVideoPlayerControls() {
+  function hideVideoPlayerControls() {
     chrome.storage.sync.set({"hideVideoPlayerControls": true});
   
     chrome.tabs.query({
@@ -656,9 +683,9 @@ function hideVideoPlayerControls() {
   
     SB.hideVideoPlayerControls.style.display = "none";
     SB.showVideoPlayerControls.style.display = "unset";
-}
+  }
   
-function showVideoPlayerControls() {
+  function showVideoPlayerControls() {
     chrome.storage.sync.set({"hideVideoPlayerControls": false});
   
     chrome.tabs.query({
@@ -673,9 +700,9 @@ function showVideoPlayerControls() {
   
     SB.hideVideoPlayerControls.style.display = "unset";
     SB.showVideoPlayerControls.style.display = "none";
-}
+  }
   
-function hideInfoButtonPlayerControls() {
+  function hideInfoButtonPlayerControls() {
     chrome.storage.sync.set({"hideInfoButtonPlayerControls": true});
   
     chrome.tabs.query({
@@ -690,9 +717,9 @@ function hideInfoButtonPlayerControls() {
   
     SB.hideInfoButtonPlayerControls.style.display = "none";
     SB.showInfoButtonPlayerControls.style.display = "unset";
-}
+  }
   
-function showInfoButtonPlayerControls() {
+  function showInfoButtonPlayerControls() {
     chrome.storage.sync.set({"hideInfoButtonPlayerControls": false});
   
     chrome.tabs.query({
@@ -707,9 +734,9 @@ function showInfoButtonPlayerControls() {
   
     SB.hideInfoButtonPlayerControls.style.display = "unset";
     SB.showInfoButtonPlayerControls.style.display = "none";
-}
+  }
   
-function hideDeleteButtonPlayerControls() {
+  function hideDeleteButtonPlayerControls() {
     chrome.storage.sync.set({"hideDeleteButtonPlayerControls": true});
   
     chrome.tabs.query({
@@ -724,9 +751,9 @@ function hideDeleteButtonPlayerControls() {
   
     SB.hideDeleteButtonPlayerControls.style.display = "none";
     SB.showDeleteButtonPlayerControls.style.display = "unset";
-}
+  }
   
-function showDeleteButtonPlayerControls() {
+  function showDeleteButtonPlayerControls() {
     chrome.storage.sync.set({"hideDeleteButtonPlayerControls": false});
   
     chrome.tabs.query({
@@ -741,9 +768,9 @@ function showDeleteButtonPlayerControls() {
   
     SB.hideDeleteButtonPlayerControls.style.display = "unset";
     SB.showDeleteButtonPlayerControls.style.display = "none";
-}
+  }
   
-function disableSponsorViewTracking() {
+  function disableSponsorViewTracking() {
     chrome.storage.sync.set({"trackViewCount": false});
   
     chrome.tabs.query({
@@ -758,9 +785,9 @@ function disableSponsorViewTracking() {
   
     SB.disableSponsorViewTracking.style.display = "none";
     SB.enableSponsorViewTracking.style.display = "unset";
-}
+  }
   
-function enableSponsorViewTracking() {
+  function enableSponsorViewTracking() {
     chrome.storage.sync.set({"trackViewCount": true});
   
     chrome.tabs.query({
@@ -775,26 +802,26 @@ function enableSponsorViewTracking() {
   
     SB.enableSponsorViewTracking.style.display = "none";
     SB.disableSponsorViewTracking.style.display = "unset";
-}
+  }
   
-function updateStartTimeChosen() {
-  //update startTimeChosen variable
+  function updateStartTimeChosen() {
+    //update startTimeChosen letiable
     if (!startTimeChosen) {
       startTimeChosen = true;
     SB.sponsorStart.innerHTML = "Sponsorship Ends Now";
     } else {
       resetStartTimeChosen();
     }
-}
+  }
   
-//set it to false
-function resetStartTimeChosen() {
+  //set it to false
+  function resetStartTimeChosen() {
     startTimeChosen = false;
     SB.sponsorStart.innerHTML = "Sponsorship Starts Now";
-}
+  }
   
-//hides and shows the submit times button when needed
-function showSubmitTimesIfNecessary() {
+  //hides and shows the submit times button when needed
+  function showSubmitTimesIfNecessary() {
     //check if an end time has been specified for the latest sponsor time
     if (sponsorTimes.length > 0 && sponsorTimes[sponsorTimes.length - 1].length > 1) {
       //show submit times button
@@ -803,26 +830,26 @@ function showSubmitTimesIfNecessary() {
       //hide submit times button
       document.getElementById("submitTimesContainer").style.display = "none";
     }
-}
+  }
   
-//make the options div visisble
-function openOptions() {
+  //make the options div visisble
+  function openOptions() {
     document.getElementById("optionsButtonContainer").style.display = "none";
     document.getElementById("options").style.display = "unset";
-}
+  }
   
-//this is not a YouTube video page
-function displayNoVideo() {
+  //this is not a YouTube video page
+  function displayNoVideo() {
     document.getElementById("loadingIndicator").innerHTML = "This probably isn't a YouTube tab, or you clicked too early. " +
         "If you know this is a YouTube tab, close this popup and open it again.";
-}
+  }
   
-function reportAnIssue() {
+  function reportAnIssue() {
     document.getElementById("issueReporterContainer").style.display = "unset";
     SB.reportAnIssue.style.display = "none";
-}
+  }
   
-function addVoteMessage(message, UUID) {
+  function addVoteMessage(message, UUID) {
     let container = document.getElementById("sponsorTimesVoteButtonsContainer" + UUID);
     //remove all children
     while (container.firstChild) {
@@ -835,9 +862,9 @@ function addVoteMessage(message, UUID) {
     thanksForVotingText.style.marginBottom = "0px";
   
     container.appendChild(thanksForVotingText);
-}
+  }
   
-function vote(type, UUID) {
+  function vote(type, UUID) {
     //add loading info
     addVoteMessage("Loading...", UUID)
   
@@ -865,16 +892,16 @@ function vote(type, UUID) {
         }
       }
     });
-}
+  }
   
-function hideDiscordButton() {
+  function hideDiscordButton() {
     chrome.storage.sync.set({"hideDiscordLink": false});
   
     SB.discordButtonContainer.style.display = "none";
-}
+  }
   
-//converts time in seconds to minutes:seconds
-function getFormattedTime(seconds) {
+  //converts time in seconds to minutes:seconds
+  function getFormattedTime(seconds) {
     let minutes = Math.floor(seconds / 60);
     let secondsDisplay = Math.round(seconds - minutes * 60);
     if (secondsDisplay < 10) {
@@ -885,17 +912,17 @@ function getFormattedTime(seconds) {
     let formatted = minutes+ ":" + secondsDisplay;
   
     return formatted;
-}
+  }
   
-//converts time in seconds to minutes
-function getTimeInMinutes(seconds) {
+  //converts time in seconds to minutes
+  function getTimeInMinutes(seconds) {
     let minutes = Math.floor(seconds / 60);
   
     return minutes;
-}
+  }
   
-//converts time in seconds to seconds past the last minute
-function getTimeInFormattedSeconds(seconds) {
+  //converts time in seconds to seconds past the last minute
+  function getTimeInFormattedSeconds(seconds) {
     let secondsFormatted = (seconds % 60).toFixed(3);
   
     if (secondsFormatted < 10) {
@@ -903,9 +930,9 @@ function getTimeInFormattedSeconds(seconds) {
     }
   
     return secondsFormatted;
-}
+  }
   
-function sendRequestToServer(type, address, callback) {
+  function sendRequestToServer(type, address, callback) {
     let xmlhttp = new XMLHttpRequest();
   
     xmlhttp.open(type, serverAddress + address, true);
@@ -922,11 +949,23 @@ function sendRequestToServer(type, address, callback) {
   
     //submit this request
     xmlhttp.send();
-}
+  }
   
-function getYouTubeVideoID(url) { // Returns with video id else returns false
+  function getYouTubeVideoID(url) { // Returns with video id else returns false
     var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
     var match = url.match(regExp);
     var id = new URL(url).searchParams.get("v");
     return (match && match[7].length == 11) ? id : false;
+  }
+  
+//end of function
 }
+
+if (chrome.tabs != undefined) {
+  //add the width restriction (because Firefox)
+  document.getElementById("sponorBlockStyleSheet").sheet.insertRule('.popupBody { width: 300 }', 0);
+
+  //this means it is actually opened in the popup
+  runThePopup();
+}
+