Reimplements error system

popup.js

@@ -1,68 +1,106 @@
 
-// References
-var SB = {};
+//make this a function to allow this to run on the content page
+function runThePopup() {
 
-SB.sponsorStart = document.getElementById("sponsorStart");
-SB.clearTimes = document.getElementById("clearTimes");
-SB.submitTimes = document.getElementById("submitTimes");
-SB.showNoticeAgain = document.getElementById("showNoticeAgain");
-SB.hideVideoPlayerControls = document.getElementById("hideVideoPlayerControls");
-SB.showVideoPlayerControls = document.getElementById("showVideoPlayerControls");
-SB.hideInfoButtonPlayerControls = document.getElementById("hideInfoButtonPlayerControls");
-SB.showInfoButtonPlayerControls = document.getElementById("showInfoButtonPlayerControls");
-SB.hideDeleteButtonPlayerControls = document.getElementById("hideDeleteButtonPlayerControls");
-SB.showDeleteButtonPlayerControls = document.getElementById("showDeleteButtonPlayerControls");
-SB.disableSponsorViewTracking = document.getElementById("disableSponsorViewTracking");
-SB.enableSponsorViewTracking = document.getElementById("enableSponsorViewTracking");
-SB.optionsButton = document.getElementById("optionsButton");
-SB.reportAnIssue = document.getElementById("reportAnIssue");
-// sponsorTimesContributions
-SB.sponsorTimesContributionsContainer = document.getElementById("sponsorTimesContributionsContainer");
-SB.sponsorTimesContributionsDisplay = document.getElementById("sponsorTimesContributionsDisplay");
-SB.sponsorTimesContributionsDisplayEndWord = document.getElementById("sponsorTimesContributionsDisplayEndWord");
-// sponsorTimesViewsDisplay
-SB.sponsorTimesViewsContainer = document.getElementById("sponsorTimesViewsDisplayContainer");
-SB.sponsorTimesViewsDisplay = document.getElementById("sponsorTimesViewsDisplayDisplay");
-SB.sponsorTimesViewsDisplayEndWord = document.getElementById("sponsorTimesViewsDisplayDisplayEndWord");
-// discordButtons
-SB.discordButtonContainer = document.getElementById("discordButtonContainer");
-SB.hideDiscordButton = document.getElementById("hideDiscordButton");
-// submitTimesInfoMessage
-SB.submitTimesInfoMessageContainer = document.getElementById("submitTimesInfoMessage");
-SB.submitTimesInfoMessage = document.getElementById("submitTimesInfoMessage");
+  //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);
+      }
   
-//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);
+      //add a dummy query method
+      chrome.tabs.query = function(config, callback) {
+          callback([{
+              url: document.URL,
+              id: -1
+          }]);
+      }
   
+      inPopup = false;
+  }
   
-//if true, the button now selects the end time
-var startTimeChosen = false;
+  var SB = {};
 
-//the start and end time pairs (2d)
-var sponsorTimes = [];
+  ["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",
+  // submitTimesInfoMessage
+  "submitTimesInfoMessageContainer",
+  "submitTimesInfoMessage"
+  // More
+  "submissionSection",
+  "mainControls",
+  "loadingIndicator",
+  "videoFound",
+  "sponsorMessageTimes",
+  "downloadedSponsorMessageTimes",
+  ].forEach(id => SB[id] = document.getElementById(id));
 
-//current video ID of this tab
-var currentVideoID = null;
+  //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);
   
-//is this a YouTube tab?
-var isYouTubeTab = false;
+  //setup error message languages
+  var EN_US = new Map();
 
-//see if discord link can be shown
-chrome.storage.sync.get(["hideDiscordLink"], function(result) {
+  EN_US.set(400, 'Server said this request was invalid"')
+     .set(429, 'You have submitted too many sponsor times for this one video, are you sure there are this many?')
+     .set(409, 'This has already been submitted before')
+     .set(502, 'It seems the server is down. Contact the dev to inform them.')
+     .set('Unknown', 'There was an error submitting your sponsor times, please try again later.');
+
+  //if true, the button now selects the end time
+  let startTimeChosen = false;
+  
+  //the start and end time pairs (2d)
+  let sponsorTimes = [];
+  
+  //current video ID of this tab
+  let currentVideoID = null;
+  
+  //is this a YouTube tab?
+  let isYouTubeTab = false;
+  
+  //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) {
@@ -79,51 +117,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."
@@ -156,15 +194,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);
   
@@ -189,7 +228,7 @@ function loadTabData(tabs) {
         displaySponsorTimes();
   
         //show submission section
-      document.getElementById("submissionSection").style.display = "unset";
+        SB.submissionSection.style.display = "unset";
   
         showSubmitTimesIfNecessary();
       }
@@ -201,9 +240,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();
@@ -213,31 +252,31 @@ 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
-    document.getElementById("mainControls").style.display = "unset"
-    document.getElementById("loadingIndicator").innerHTML = "";
+      SB.mainControls.style.display = "unset"
+      SB.loadingIndicator.innerHTML = "";
 
       if (request.found) {
-      document.getElementById("videoFound").innerHTML = "This video's sponsors are in the database!"
+        SB.videoFound.innerHTML = "This video's sponsors are in the database!"
 
         displayDownloadedSponsorTimes(request);
       } else {
-      document.getElementById("videoFound").innerHTML = "No sponsors found"
+        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,
@@ -249,9 +288,9 @@ function sendSponsorStartMessage() {
           startSponsorCallback
         );
       });
-}
+  }
   
-function startSponsorCallback(response) {
+  function startSponsorCallback(response) {
     let sponsorTimesIndex = sponsorTimes.length - (startTimeChosen ? 1 : 0);
   
     if (sponsorTimes[sponsorTimesIndex] == undefined) {
@@ -269,36 +308,33 @@ function startSponsorCallback(response) {
     displaySponsorTimes();
   
     //show submission section
-  document.getElementById("submissionSection").style.display = "unset";
+    SB.submissionSection.style.display = "unset";
   
     showSubmitTimesIfNecessary();
-}
-
-//display the video times from the array
-function displaySponsorTimes() {
-  //set it to the message
-  let sponsorMessageTimes = document.getElementById("sponsorMessageTimes");
+  }
   
+  //display the video times from the array
+  function displaySponsorTimes() {
     //remove all children
-  while (sponsorMessageTimes.firstChild) {
-    sponsorMessageTimes.removeChild(sponsorMessageTimes.firstChild);
+    while (SB.sponsorMessageTimes.firstChild) {
+      SB.sponsorMessageTimes.removeChild(SB.sponsorMessageTimes.firstChild);
     }
 
     //add sponsor times
-  sponsorMessageTimes.appendChild(getSponsorTimesMessageDiv(sponsorTimes));
-}
+    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
-    document.getElementById("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");
@@ -313,13 +349,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));
   
@@ -344,10 +380,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++) {
@@ -366,11 +402,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";
@@ -378,13 +414,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));
   
@@ -394,7 +430,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++) {
@@ -423,44 +459,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 = ":";
@@ -485,17 +524,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);
   
@@ -510,10 +548,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({
@@ -556,9 +596,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({
@@ -585,22 +625,14 @@ function clearTimes() {
     document.getElementById("submissionSection").style.display = "none";
   
     resetStartTimeChosen();
-}
+  }
   
-var EN_US = new Map();
+  function getErrorMessage(lang, statusCode) {
+    if(lang.has(statusCode)) return lang.get(statusCode);
+    return lang.get('Unknown').concat(" Error code: ") + statusCode;
+  } 
 
-EN_US.set(400, 'Server said this request was invalid"')
-    .set(429, 'You have submitted too many sponsor times for this one video, are you sure there are this many?')
-    .set(409, 'This has already been submitted before')
-    .set(502, 'It seems the server is down. Contact the dev to inform them.')
-    .set('Unknown', 'There was an error submitting your sponsor times, please try again later.');
-
-function ErrorParser (Lang, statusCode) {
-  if(Lang.has(statusCode)) return Lang.get(statusCode);
-  return Lang.get('Unknown').concat(" Error code: ") + statusCode;
-}
-
-function submitTimes() {
+  function submitTimes() {
     //make info message say loading
     SB.submitTimesInfoMessage.innerText = "Loading...";
     SB.submitTimesInfoMessageContainer.style.display = "unset";
@@ -614,17 +646,22 @@ function submitTimes() {
           if (response.statusCode == 200) {
             //hide loading message
             SB.submitTimesInfoMessageContainer.style.display = "none";
+
             clearTimes();
           } else {
-          ErrorParser(EN_US, response.statusCode);
+            let errorMessage = getErrorMessage(EN_US, response.statusCode);
+
+            document.getElementById("submitTimesInfoMessage").innerText = errorMessage;
+            document.getElementById("submitTimesInfoMessageContainer").style.display = "unset";
+
             SB.submitTimesInfoMessageContainer.style.display = "unset";
           }
         }
       });
     }
-}
+  }
   
-function showNoticeAgain() {
+  function showNoticeAgain() {
     chrome.storage.sync.set({"dontShowNoticeAgain": false});
   
     chrome.tabs.query({
@@ -637,9 +674,9 @@ function showNoticeAgain() {
     });
   
     SB.showNoticeAgain.style.display = "none";
-}
+  }
   
-function hideVideoPlayerControls() {
+  function hideVideoPlayerControls() {
     chrome.storage.sync.set({"hideVideoPlayerControls": true});
   
     chrome.tabs.query({
@@ -654,9 +691,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({
@@ -671,9 +708,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({
@@ -688,9 +725,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({
@@ -705,9 +742,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({
@@ -722,9 +759,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({
@@ -739,9 +776,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({
@@ -756,9 +793,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({
@@ -773,26 +810,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
@@ -801,26 +838,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) {
@@ -833,9 +870,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)
   
@@ -863,16 +900,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) {
@@ -883,17 +920,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) {
@@ -901,9 +938,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);
@@ -920,10 +957,22 @@ function sendRequestToServer(type, address, callback) {
   
     //submit this request
     xmlhttp.send();
-}
+  }
   
-function getYouTubeVideoID(url) { // Return video id or 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);
-  return (match && match[7].length == 11) ? match[7] : false;
+    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();
 }