Added basic features for the new voting UI

_locales/en/messages.json

@@ -55,13 +55,13 @@
     "message": "Seconds"
   },
   "Hide": {
-    "message": "Don't Show This Again"
+    "message": "Never Show"
   },
   "hitGoBack": {
     "message": "Hit go back to get to where you came from."
   },
   "goBack": {
-    "message": "Go back"
+    "message": "Unskip"
   },
   "confirmMSG": {
     "message": "\n\nTo edit or delete individual values, click the info button or open the extension popup by clicking the extension icon in the top right corner."

content.css

@@ -42,15 +42,15 @@
 
 .sponsorSkipObject {
 	font-family: 'Source Sans Pro', sans-serif;
+	
+	margin-left: 2px;
+	margin-right: 2px;
 }
 
 .sponsorSkipLogo {
-	height: 64px;
+	height: 18px;
-	position: absolute;
+
-	top: 0;
+	float: left;
-	bottom: 0;
-	margin: auto;
-	margin-left: 10px;
 }
 
 @keyframes fadeIn {
@@ -58,17 +58,24 @@
 	  to { opacity: 1; }
 }
 
+.sponsorBlockSpacer {
+	border-color: #999999;
+	background-color: #999999;
+}
+
 .sponsorSkipNotice {
-    min-height: 165px;
+    min-width: 300px;
-    min-width: 400px;
+    background-color: rgba(0, 0, 0, 0.8);
-    background-color: rgba(255, 217, 217, 0.8);
     position: absolute;
-	border: 3px solid rgba(0, 0, 0, 0.8);
 	right: 0;
-	bottom: 90px;
+	bottom: 100px;
-	zoom: 85%;
+	right: 10px;
+
+	border-radius: 10px;
 
 	animation: fadeIn 0.5s;
+
+	border-spacing: 7px 7px;
 }
 
 /* if two are very close to eachother */
@@ -78,13 +85,43 @@
   	transition: bottom 0.2s;
 }
 
+.sponsorSkipNoticeUnskipSection {
+	float: left;
+
+	border-left: 1px solid #eeeeee;
+}
+
+.sponsorSkipNoticeRightSection {
+    right: 0;
+	position: absolute;
+
+	float: right;
+}
+
+.sponsorSkipNoticeCloseButton {
+	margin-left: 0px;
+	margin-right: 0px;
+	padding: 0px;
+}
+
+.sponsorSkipNoticeButton {
+	background: none;
+	color: #ffffff;
+	border: none;
+	display: inline-block;
+
+	cursor: pointer;
+
+	margin-left: 10px;
+	margin-right: 10px;
+}
+
 .sponsorSkipMessage {
-    font-size: 18px;
+	font-size: 14px;
-    color: #000000;
-    text-align: center;
-    margin-top: 10px;
 	font-weight: bold;
-	margin-top: 4px;
+	color: #ffffff;
+	
+	display: inline-block;
 }
 
 .sponsorSkipInfo {
@@ -119,9 +156,11 @@
 }
 
 .voteButton {
-	height: 32px;
+	height: 18px;
-	margin-right: 15px;
 	cursor: pointer;
+	
+	margin-left: 10px;
+	margin-right: 10px;
 }
 .voteButton:hover {
 	filter: brightness(80%);

content.js

@@ -870,27 +870,67 @@ 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");
+
+  let logoColumn = document.createElement("td");
+
   let logoElement = document.createElement("img");
   logoElement.id = "sponsorSkipLogo" + UUID;
-  logoElement.className = "sponsorSkipLogo";
+  logoElement.className = "sponsorSkipLogo sponsorSkipObject";
-  logoElement.src = chrome.extension.getURL("icons/LogoSponsorBlocker256px.png");
+  logoElement.src = chrome.extension.getURL("icons/IconSponsorBlocker256px.png");
 
-  let noticeMessage = document.createElement("div");
+  let noticeMessage = document.createElement("span");
   noticeMessage.id = "sponsorSkipMessage" + UUID;
   noticeMessage.classList.add("sponsorSkipMessage");
   noticeMessage.classList.add("sponsorSkipObject");
-  noticeMessage.innerText = "Hey, you just skipped a sponsor!";
+  noticeMessage.innerText = "SponsorBlock - Sponsor Skipped";
 
-  let noticeInfo = document.createElement("p");
+  //create the first column
-  noticeInfo.id = "sponsorSkipInfo" + UUID;
+  logoColumn.appendChild(logoElement);
-  noticeInfo.classList.add("sponsorSkipInfo");
+  logoColumn.appendChild(noticeMessage);
-  noticeInfo.classList.add("sponsorSkipObject");
+
-  noticeInfo.innerText = "This message will disapear in 7 seconds";
+  //add the x button
+  let closeButtonContainer = document.createElement("td");
+  closeButtonContainer.className = "sponsorSkipNoticeRightSection"
+
+  let hideButton = document.createElement("button");
+  hideButton.innerText = "X";
+  hideButton.className = "sponsorSkipNoticeButton sponsorSkipNoticeCloseButton";
+  hideButton.addEventListener("click", () => closeSkipNotice(UUID));
+
+  closeButtonContainer.appendChild(hideButton);
+
+  //add all objects to first row
+  firstRow.appendChild(logoColumn);
+  firstRow.appendChild(closeButtonContainer);
+
+  let spacer = document.createElement("hr");
+  spacer.className = "sponsorBlockSpacer";
+
+  //the row that will contain the buttons
+  let secondRow = document.createElement("tr");
   
   //thumbs up and down buttons
-  let voteButtonsContainer = document.createElement("div");
+  let voteButtonsContainer = document.createElement("td");
   voteButtonsContainer.id = "sponsorTimesVoteButtonsContainer" + UUID;
-  voteButtonsContainer.setAttribute("align", "center");
 
   let upvoteButton = document.createElement("img");
   upvoteButton.id = "sponsorTimesUpvoteButtonsContainer" + UUID;
@@ -908,35 +948,64 @@ function openSkipNotice(UUID){
   voteButtonsContainer.appendChild(upvoteButton);
   voteButtonsContainer.appendChild(downvoteButton);
 
-  let buttonContainer = document.createElement("div");
+  //add unskip button
-  buttonContainer.setAttribute("align", "center");
+  let unskipContainer = document.createElement("td");
+  unskipContainer.className = "sponsorSkipNoticeUnskipSection";
 
-  let goBackButton = document.createElement("button");
+  let unskipButton = document.createElement("button");
-  goBackButton.innerText = chrome.i18n.getMessage("goBack");
+  unskipButton.innerText = chrome.i18n.getMessage("goBack");
-  goBackButton.className = "sponsorSkipButton";
+  unskipButton.className = "sponsorSkipNoticeButton";
-  goBackButton.addEventListener("click", () => goBackToPreviousTime(UUID));
+  unskipButton.addEventListener("click", () => goBackToPreviousTime(UUID));
 
-  let hideButton = document.createElement("button");
+  unskipContainer.appendChild(unskipButton);
-  hideButton.innerText = chrome.i18n.getMessage("Dismiss");
+
-  hideButton.className = "sponsorSkipButton";
+  //add don't show again button
-  hideButton.addEventListener("click", () => closeSkipNotice(UUID));
+  let dontshowContainer = document.createElement("td");
+  dontshowContainer.className = "sponsorSkipNoticeRightSection";
 
   let dontShowAgainButton = document.createElement("button");
   dontShowAgainButton.innerText = chrome.i18n.getMessage("Hide");
-  dontShowAgainButton.className = "sponsorSkipDontShowButton";
+  dontShowAgainButton.className = "sponsorSkipNoticeButton sponsorSkipNoticeCloseButton";
   dontShowAgainButton.addEventListener("click", dontShowNoticeAgain);
 
-  buttonContainer.appendChild(goBackButton);
+  dontshowContainer.appendChild(dontShowAgainButton);
-  buttonContainer.appendChild(hideButton);
-  buttonContainer.appendChild(document.createElement("br"));
-  buttonContainer.appendChild(document.createElement("br"));
-  buttonContainer.appendChild(dontShowAgainButton);
 
-  noticeElement.appendChild(logoElement);
+  //add to row
-  noticeElement.appendChild(noticeMessage);
+  secondRow.appendChild(voteButtonsContainer);
-  noticeElement.appendChild(noticeInfo);
+  secondRow.appendChild(unskipContainer);
-  noticeElement.appendChild(voteButtonsContainer);
+  secondRow.appendChild(dontshowContainer);
-  noticeElement.appendChild(buttonContainer);
+
+  // 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);
 
   let referenceNode = document.getElementById("movie_player");
   if (referenceNode == null) {