Changed popup to only use report button instead of upvote and downvote + improved popup.

_locales/en/messages.json

@@ -58,7 +58,7 @@
     "message": "Never Show"
   },
   "hitGoBack": {
-    "message": "Hit go back to get to where you came from."
+    "message": "Hit unskip to get to where you came from."
   },
   "goBack": {
     "message": "Unskip"
@@ -89,7 +89,7 @@
     "message": "This probably isn't a YouTube tab, or you clicked too early. \n If you know this is a YouTube tab,\n close this popup and open it again."
   },
   "Voted": {
-    "message": "Thanks for voting!"
+    "message": "Voted!"
   },
   "voteFail": {
     "message": "You have already voted this way before."

content.css

@@ -61,13 +61,15 @@
 .sponsorBlockSpacer {
 	background-color: rgb(100, 100, 100);
 	border-color: rgb(100, 100, 100);
+
+	margin-left: 5px;
 }
 
 .sponsorSkipNotice {
-    min-width: 270px;
+    min-width: 280px;
     background-color: rgba(28, 28, 28, 0.9);
     position: absolute;
-	right: 0;
+	right: 5px;
 	bottom: 100px;
 	right: 10px;
 
@@ -75,7 +77,9 @@
 
 	animation: fadeIn 0.5s;
 
-	border-spacing: 10px 10px;
+	border-spacing: 5px 10px;
+	padding-left: 5px;
+	padding-right: 5px;
 }
 
 .sponsorSkipNoticeTimeLeft {
@@ -90,7 +94,7 @@
 
 /* if two are very close to eachother */
 .secondSkipNotice {
-	bottom: 280px;
+	bottom: 250px;
 
   	transition: bottom 0.2s;
 }
@@ -106,6 +110,8 @@
 	position: absolute;
 
 	float: right;
+
+	margin-right: 5px;
 }
 
 .sponsorSkipNoticeRightButton {
@@ -126,7 +132,6 @@
 
 	cursor: pointer;
 
-	margin-left: 10px;
 	margin-right: 10px;
 }
 
@@ -162,18 +167,19 @@
 	margin-top: 0px;
 }
 
+.sponsorTimesVoteButtonMessage {
+	float: left;
+}
+
 .sponsorTimesInfoMessage {
-	font-size: 15px;
+	font-size: 13.3333px;
-	font-weight: bold;
+    color: rgb(235, 235, 235);
-    color: #000000;
 	text-align: center;
 }
 
 .voteButton {
 	height: 18px;
 	cursor: pointer;
-	
-	margin-right: 10px;
 }
 .voteButton:hover {
 	filter: brightness(80%);

content.js

@@ -870,25 +870,9 @@ function openSkipNotice(UUID){
   noticeElement.classList.add("sponsorSkipNotice");
   noticeElement.style.zIndex = 50 + amountOfPreviousNotices;
 
-  // let logoElement = document.createElement("img");
-  // logoElement.id = "sponsorSkipLogo" + UUID;
-  // logoElement.className = "sponsorSkipLogo";
-  // logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
-
-  // let noticeMessage = document.createElement("div");
-  // noticeMessage.id = "sponsorSkipMessage" + UUID;
-  // noticeMessage.classList.add("sponsorSkipMessage");
-  // noticeMessage.classList.add("sponsorSkipObject");
-  // noticeMessage.innerText = "Hey, you just skipped a sponsor!";
-  
-  // let noticeInfo = document.createElement("p");
-  // noticeInfo.id = "sponsorSkipInfo" + UUID;
-  // noticeInfo.classList.add("sponsorSkipInfo");
-  // noticeInfo.classList.add("sponsorSkipObject");
-  // noticeInfo.innerText = "This message will disapear in 7 seconds";
-
   //the row that will contain the info
   let firstRow = document.createElement("tr");
+  firstRow.id = "sponsorSkipNoticeFirstRow" + UUID;
 
   let logoColumn = document.createElement("td");
 
@@ -913,7 +897,7 @@ function openSkipNotice(UUID){
   closeButtonContainer.style.top = "11px";
 
   let timeLeft = document.createElement("span");
-  timeLeft.innerText = "closing in 7s";
+  timeLeft.innerText = "closes in 7s";
   timeLeft.className = "sponsorSkipObject sponsorSkipNoticeTimeLeft";
 
   let hideButton = document.createElement("img");
@@ -929,29 +913,24 @@ function openSkipNotice(UUID){
   firstRow.appendChild(closeButtonContainer);
 
   let spacer = document.createElement("hr");
+  spacer.id = "sponsorSkipNoticeSpacer" + UUID;
   spacer.className = "sponsorBlockSpacer";
 
   //the row that will contain the buttons
   let secondRow = document.createElement("tr");
+  secondRow.id = "sponsorSkipNoticeSecondRow" + UUID;
   
   //thumbs up and down buttons
   let voteButtonsContainer = document.createElement("td");
   voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
 
-  let upvoteButton = document.createElement("img");
-  upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
-  upvoteButton.className = "sponsorSkipObject voteButton";
-  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 = "sponsorSkipObject voteButton";
-  downvoteButton.src = chrome.extension.getURL("icons/downvote.png");
+  downvoteButton.src = chrome.extension.getURL("icons/report.png");
   downvoteButton.addEventListener("click", () => vote(0, UUID));
 
   //add thumbs up and down buttons to the container
-  voteButtonsContainer.appendChild(upvoteButton);
   voteButtonsContainer.appendChild(downvoteButton);
 
   //add unskip button
@@ -968,7 +947,6 @@ function openSkipNotice(UUID){
   //add don't show again button
   let dontshowContainer = document.createElement("td");
   dontshowContainer.className = "sponsorSkipNoticeRightSection";
-  dontshowContainer.style.bottom = "14px";
 
   let dontShowAgainButton = document.createElement("button");
   dontShowAgainButton.innerText = chrome.i18n.getMessage("Hide");
@@ -982,34 +960,6 @@ function openSkipNotice(UUID){
   secondRow.appendChild(unskipContainer);
   secondRow.appendChild(dontshowContainer);
 
-  // let buttonContainer = document.createElement("div");
-  // buttonContainer.setAttribute("align", "center");
-
-  // let goBackButton = document.createElement("button");
-  // goBackButton.innerText = chrome.i18n.getMessage("goBack");
-  // goBackButton.className = "sponsorSkipButton";
-  // goBackButton.addEventListener("click", () => goBackToPreviousTime(UUID));
-
-  // let hideButton = document.createElement("button");
-  // hideButton.innerText = chrome.i18n.getMessage("Dismiss");
-  // hideButton.className = "sponsorSkipButton";
-  // hideButton.addEventListener("click", () => closeSkipNotice(UUID));
-
-  // let dontShowAgainButton = document.createElement("button");
-  // dontShowAgainButton.innerText = chrome.i18n.getMessage("Hide");
-  // dontShowAgainButton.className = "sponsorSkipDontShowButton";
-  // dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
-
-  // buttonContainer.appendChild(goBackButton);
-  // buttonContainer.appendChild(hideButton);
-  // buttonContainer.appendChild(document.createElement("br"));
-  // buttonContainer.appendChild(document.createElement("br"));
-  // buttonContainer.appendChild(dontShowAgainButton);
-
-  // noticeElement.appendChild(logoElement);
-  // noticeElement.appendChild(noticeMessage);
-  // noticeElement.appendChild(noticeInfo);
-
   noticeElement.appendChild(firstRow);
   noticeElement.appendChild(spacer);
   noticeElement.appendChild(secondRow);
@@ -1033,36 +983,8 @@ function openSkipNotice(UUID){
 }
 
 function afterDownvote(UUID) {
-  //change text to say thanks for voting
+  addVoteButtonInfo(chrome.i18n.getMessage("Voted"), UUID);
-  //remove buttons
+  addNoticeInfoMessage(chrome.i18n.getMessage("hitGoBack"), UUID);
-  let upvoteButton = document.getElementById("sponsorTimesUpvoteButtonsContainer" + UUID);
-  let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID);
-  if (upvoteButton != null) {
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(upvoteButton);
-  }
-  if (downvoteButton != null) {
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(downvoteButton);
-  }
-
-  let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
-  if (previousInfoMessage != null) {
-    //remove it
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(previousInfoMessage);
-  }
-
-  //add thanks for voting text
-  let thanksForVotingText = document.createElement("p");
-  thanksForVotingText.id = "sponsorTimesThanksForVotingText";
-  thanksForVotingText.innerText = chrome.i18n.getMessage("Voted");
-
-  //add extra info for voting
-  let thanksForVotingInfoText = document.createElement("p");
-  thanksForVotingInfoText.id = "sponsorTimesThanksForVotingInfoText";
-  thanksForVotingInfoText.innerText = chrome.i18n.getMessage("hitGoBack");
-
-  //add element to div
-  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText);
-  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingInfoText);
 
   //remove this sponsor from the sponsors looked up
   //find which one it is
@@ -1081,41 +1003,71 @@ function afterDownvote(UUID) {
 
       //update the preview
       previewBar.set(sponsorTimesLeft, [], v.duration);
+
+      break;
     }
   }
 }
 
-function addLoadingInfo(message, UUID) {
+function addNoticeInfoMessage(message, UUID) {
-  //change text to say thanks for message
-  //remove buttons
-  let upvoteButton = document.getElementById("sponsorTimesUpvoteButtonsContainer" + UUID);
-  let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID);
-  if (upvoteButton != null) {
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(upvoteButton);
-  }
-  if (downvoteButton != null) {
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(downvoteButton);
-  }
-
   let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
   if (previousInfoMessage != null) {
     //remove it
-    document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).removeChild(previousInfoMessage);
+    document.getElementById("sponsorSkipNotice" + UUID).removeChild(previousInfoMessage);
   }
 
-  //add thanks for voting text
+  //add info
   let thanksForVotingText = document.createElement("p");
   thanksForVotingText.id = "sponsorTimesInfoMessage" + UUID;
   thanksForVotingText.className = "sponsorTimesInfoMessage";
   thanksForVotingText.innerText = message;
 
   //add element to div
-  document.getElementById("sponsorTimesVoteButtonsContainer" + UUID).appendChild(thanksForVotingText);
+  document.getElementById("sponsorSkipNotice" + UUID).insertBefore(thanksForVotingText, document.getElementById("sponsorSkipNoticeSpacer" + UUID));
+}
+
+function resetNoticeInfoMessage(UUID) {
+  let previousInfoMessage = document.getElementById("sponsorTimesInfoMessage" + UUID);
+  if (previousInfoMessage != null) {
+    //remove it
+    document.getElementById("sponsorSkipNotice" + UUID).removeChild(previousInfoMessage);
+  }
+}
+
+function addVoteButtonInfo(message, UUID) {
+  resetVoteButtonInfo(UUID);
+
+  //hide vote button
+  let downvoteButton = document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID);
+  if (downvoteButton != null) {
+    document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID).style.display = "none";
+  }
+
+  //add info
+  let thanksForVotingText = document.createElement("td");
+  thanksForVotingText.id = "sponsorTimesVoteButtonInfoMessage" + UUID;
+  thanksForVotingText.className = "sponsorTimesInfoMessage sponsorTimesVoteButtonMessage";
+  thanksForVotingText.innerText = message;
+
+  //add element to div
+  document.getElementById("sponsorSkipNoticeSecondRow" + UUID).prepend(thanksForVotingText);
+}
+
+function resetVoteButtonInfo(UUID) {
+  let previousInfoMessage = document.getElementById("sponsorTimesVoteButtonInfoMessage" + UUID);
+  if (previousInfoMessage != null) {
+    //remove it
+    document.getElementById("sponsorSkipNoticeSecondRow" + UUID).removeChild(previousInfoMessage);
+  }
+
+  //show button again
+  document.getElementById("sponsorTimesDownvoteButtonsContainer" + UUID).style.removeProperty("display");
 }
 
 function vote(type, UUID) {
   //add loading info
-  addLoadingInfo("Loading...", UUID)
+  addVoteButtonInfo("Loading...", UUID)
+  resetNoticeInfoMessage(UUID);
 
   chrome.runtime.sendMessage({
     message: "submitVote",
@@ -1128,18 +1080,19 @@ function vote(type, UUID) {
         //success
         if (type == 0) {
           afterDownvote(UUID);
-        } else if (type == 1) {
-          closeSkipNotice(UUID);
         }
       } else if (response.successType == 0) {
         //failure: duplicate vote
-        addLoadingInfo(chrome.i18n.getMessage("voteFAIL"), UUID)
+        addNoticeInfoMessage(chrome.i18n.getMessage("voteFAIL"), UUID)
+        resetVoteButtonInfo(UUID);
       } else if (response.successType == -1) {
         if (response.statusCode == 502) {
-          addLoadingInfo(chrome.i18n.getMessage("serverDown"), UUID)
+          addNoticeInfoMessage(chrome.i18n.getMessage("serverDown"), UUID)
+          resetVoteButtonInfo(UUID);
         } else {
           //failure: unknown error
-          addLoadingInfo(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID);
+          addNoticeInfoMessage(chrome.i18n.getMessage("connectionError") + response.statusCode, UUID);
+          resetVoteButtonInfo(UUID);
         }
       }
     }

manifest.json

@@ -33,6 +33,7 @@
     "icons/PlayerUploadFailedIconSponsorBlocker256px.png",
     "icons/upvote.png",
     "icons/downvote.png",
+    "icons/report.png",
     "icons/close.png",
     "icons/PlayerInfoIconSponsorBlocker256px.png",
     "icons/PlayerDeleteIconSponsorBlocker256px.png",

popup.js

@@ -1051,7 +1051,7 @@ function runThePopup() {
   
   //this is not a YouTube video page
   function displayNoVideo() {
-    document.getElementById("loadingIndicator").innerHTML = chrome.i18n.getMessage("noVideoID");
+    document.getElementById("loadingIndicator").innerText = chrome.i18n.getMessage("noVideoID");
   }
   
   function reportAnIssue() {