Merge pull request #451 from cyrildtm/ColorizedButtonsAndBar-New

colorize buttons and ratio bar

Extensions/combined/popup.html

@@ -78,6 +78,9 @@
         <span class="switchLabel" title="__MSG_textSettings__">__MSG_textSettings__</span>
       </label>
       <br />
+      <label class="switch" data-hover="Use custom colors in new pages.">
+        <input type="checkbox" id="colored_bar" />
+      </label>
       <label class="switch">
         <input type="checkbox" id="number_round_down" />
         <span class="slider" />
@@ -97,15 +100,27 @@
       <label class="switch">
         <input type="checkbox" id="color_ratio" />
         <span class="slider" />
-        <span class="switchLabel">Colored Ratio Bar</span>
+        <span class="switchLabel">Colorize ratio bar</span>
       </label>
       <br />
-      <label class="switch">
-        <input type="checkbox" id="color_thumbs" />
+      <label class="switch" data-hover="Use custom colors in new pages.">
+        <input type="checkbox" id="colored_thumbs" />
         <span class="slider" />
-        <span class="switchLabel">Colored Thumbs</span>
+        <span class="switchLabel">Colorize thumbs</span>
       </label>
       <br />
+      <div class="custom-select">
+        <label for="color_theme">Color theme:</label>
+        <select name="color_theme" id="color_theme">
+          <option value="classic" id="color_theme_classic">Classic</option>
+          <option value="accessible" id="color_theme_accessible">Accessible</option>
+          <option value="neon" id="color_theme_neon">Neon</option>
+        </select>
+        <span id="color_theme_example_like" style="display: inline-block; vertical-align: text-top; width: 1em; height: 1em;">&nbsp;</span>
+        <span id="color_theme_example_dislike"  style="display: inline-block; vertical-align: text-top; width: 1em; height: 1em;">&nbsp;</span>
+      </div>
+      
+      <!-- <br />
       <label class="switch">
         <input type="checkbox" id="star_ratio" />
         <span class="slider" />

Extensions/combined/popup.js

@@ -2,6 +2,9 @@
 const config = {
   advanced: false,
   disableVoteSubmission: false,
+  coloredThumbs: false,
+  coloredBar: false,
+  colorTheme: "classic",
   numberDisplayFormat: 'compactShort',
   numberDisplayRoundDown: true,
   showAdvancedMessage: '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>',
@@ -59,6 +62,21 @@ document
   .addEventListener("click", (ev) => {
     chrome.storage.sync.set({ disableVoteSubmission: ev.target.checked });
   });
+document
+  .getElementById("colored_thumbs")
+  .addEventListener("click", (ev) => {
+    chrome.storage.sync.set({ coloredThumbs: ev.target.checked });
+  });
+document
+  .getElementById("colored_bar")
+  .addEventListener("click", (ev) => {
+    chrome.storage.sync.set({ coloredBar: ev.target.checked });
+  });
+document
+  .getElementById("color_theme")
+  .addEventListener("click", (ev) => {
+    chrome.storage.sync.set({ colorTheme: ev.target.value });
+  });
 
 document.getElementById("number_round_down").addEventListener("click", (ev) => {
   chrome.storage.sync.set({ numberDisplayRoundDown: ev.target.checked });
@@ -93,6 +111,9 @@ initConfig();
 function initConfig() {
   initializeDisableVoteSubmission();
   initializeVersionNumber();
+  initializeColoredThumbs();
+  initializeColoredBar();
+  initializeColorTheme();
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
 }
@@ -121,6 +142,24 @@ function initializeDisableVoteSubmission() {
   });
 }
 
+
+function initializeColoredThumbs() {
+  chrome.storage.sync.get(["coloredThumbs"], (res) => {
+    handleColoredThumbsChangeEvent(res.coloredThumbs);
+  });
+}
+
+function initializeColoredBar() {
+  chrome.storage.sync.get(["coloredBar"], (res) => {
+    handleColoredBarChangeEvent(res.coloredBar);
+  });
+}
+
+function initializeColorTheme() {
+  chrome.storage.sync.get(["colorTheme"], (res) => {
+    handleColorThemeChangeEvent(res.colorTheme);
+  });
+  
 function initializeNumberDisplayRoundDown() {
   chrome.storage.sync.get(["numberDisplayRoundDown"], (res) => {
     handleNumberDisplayRoundDownChangeEvent(res.numberDisplayRoundDown);
@@ -157,6 +196,20 @@ function storageChangeHandler(changes, area) {
       changes.disableVoteSubmission.newValue
     );
   }
+  if (changes.coloredThumbs !== undefined) {
+    handleColoredThumbsChangeEvent(
+      changes.coloredThumbs.newValue
+    );
+  }
+  if (changes.coloredBar !== undefined) {
+    handleColoredBarChangeEvent(
+      changes.coloredBar.newValue
+    );
+  }
+  if (changes.colorTheme !== undefined) {
+    handleColorThemeChangeEvent(
+      changes.colorTheme.newValue
+    );
   if (changes.numberDisplayRoundDown !== undefined) {
     handleNumberDisplayRoundDownChangeEvent(
       changes.numberDisplayRoundDown.newValue
@@ -172,6 +225,28 @@ function handleDisableVoteSubmissionChangeEvent(value) {
   document.getElementById("disable_vote_submission").checked = value;
 }
 
+
+function handleColoredThumbsChangeEvent(value) {
+  config.coloredThumbs = value;
+  document.getElementById("colored_thumbs").checked = value;
+}
+
+function handleColoredBarChangeEvent(value) {
+  config.coloredBar = value;
+  document.getElementById("colored_bar").checked = value;
+}
+
+function handleColorThemeChangeEvent(value) {
+  config.colorTheme = value;
+  document
+    .getElementById("color_theme")
+    .querySelector('option[value="' + value + '"]').selected = true;
+  updateColorThemePreviewContent(value);
+}
+
+function updateColorThemePreviewContent(themeName) {
+  document.getElementById("color_theme_example_like").style.backgroundColor = getColorFromTheme(themeName, true);
+  document.getElementById("color_theme_example_dislike").style.backgroundColor = getColorFromTheme(themeName, false);
 function handleNumberDisplayRoundDownChangeEvent(value) {
   config.numberDisplayRoundDown = value;
   document.getElementById("number_round_down").checked = value;
@@ -232,6 +307,37 @@ function getNumberFormatter(optionSelect) {
   }
 })();
 
+
+function getColorFromTheme(colorTheme, voteIsLike) {
+  let colorString;
+  switch(colorTheme) {
+    case 'accessible':
+      if (voteIsLike === true) {
+        colorString = 'dodgerblue';
+      } else {
+        colorString = 'gold';
+      }
+      break;
+    case 'neon':
+      if (voteIsLike === true) {
+        colorString = 'aqua';
+      } else {
+        colorString = 'magenta';
+      }
+      break;
+    case 'classic':
+    default:
+      if (voteIsLike === true) {
+        colorString = 'lime';
+      } else {
+        colorString = 'red';
+      }
+  }
+  return colorString;
+}
+
+
+
 /* popup-script.js
 document.querySelector('#login')
 .addEventListener('click', function () {

Extensions/combined/ryd.background.js

@@ -6,6 +6,9 @@ let api;
 /** stores extension's global config */
 let extConfig = {
   disableVoteSubmission: false,
+  coloredThumbs: false,
+  coloredBar: false,
+  colorTheme: "classic", // classic, accessible, neon
   // coloredThumbs: false,
   // coloredBar: false,
   numberDisplayFormat: 'compactShort', // compactShort, compactLong, standard
@@ -237,6 +240,14 @@ function storageChangeHandler(changes, area) {
   if (changes.disableVoteSubmission !== undefined) {
     handleDisableVoteSubmissionChangeEvent(changes.disableVoteSubmission.newValue);
   }
+  if (changes.coloredThumbs !== undefined) {
+    handleColoredThumbsChangeEvent(changes.coloredThumbs.newValue);
+  }
+  if (changes.coloredBar !== undefined) {
+    handleColoredBarChangeEvent(changes.coloredBar.newValue);
+  }
+  if (changes.colorTheme !== undefined) {
+    handleColorThemeChangeEvent(changes.colorTheme.newValue);
   if (changes.numberDisplayRoundDown !== undefined) {
     handleNumberDisplayRoundDownChangeEvent(
       changes.numberDisplayRoundDown.newValue
@@ -270,10 +281,25 @@ function changeIcon(iconName) {
   else console.log('changing icon is not supported');
 }
 
+function handleColoredThumbsChangeEvent(value) {
+  extConfig.coloredThumbs = value;
+}
+
+function handleColoredBarChangeEvent(value) {
+  extConfig.coloredBar = value;
+}
+
+function handleColorThemeChangeEvent(value) {
+  extConfig.colorTheme = value;
+}
+
 api.storage.onChanged.addListener(storageChangeHandler);
 
 function initExtConfig() {
   initializeDisableVoteSubmission();
+  initializeColoredThumbs();
+  initializeColoredBar();
+  initializeColorTheme();
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
 }
@@ -290,6 +316,16 @@ function initializeDisableVoteSubmission() {
   });
 }
 
+
+function initializeColoredThumbs() {
+  api.storage.sync.get(['coloredThumbs'], (res) => {
+    if (res.coloredThumbs === undefined) {
+      api.storage.sync.set({coloredThumbs: false});
+    }
+    else {
+      extConfig.coloredThumbs = res.coloredThumbs;
+    }
+    
 function initializeNumberDisplayRoundDown() {
   api.storage.sync.get(['numberDisplayRoundDown'], (res) => {
     if (res.numberDisplayRoundDown === undefined) {
@@ -300,6 +336,26 @@ function initializeNumberDisplayRoundDown() {
   });
 }
 
+
+function initializeColoredBar() {
+  api.storage.sync.get(['coloredBar'], (res) => {
+    if (res.coloredBar === undefined) {
+      api.storage.sync.set({coloredBar: false});
+    }
+    else {
+      extConfig.coloredBar = res.coloredBar;
+    }
+  });
+}
+
+function initializeColorTheme() {
+  api.storage.sync.get(['colorTheme'], (res) => {
+    if (res.colorTheme === undefined) {
+      api.storage.sync.set({colorTheme: false});
+    }
+    else {
+      extConfig.colorTheme = res.colorTheme;
+    }
 function initializeNumberDisplayFormat() {
   api.storage.sync.get(['numberDisplayFormat'], (res) => {
     if (res.numberDisplayFormat === undefined) {

Extensions/combined/src/bar.js

@@ -1,7 +1,11 @@
 import { getButtons } from "./buttons";
+import { likesDisabledState, extConfig } from "./state";
+import {
+  cLog,
+  getColorFromTheme,
+} from "./utils";
 import { isMobile, likesDisabledState } from "./state";
 import { cLog } from "./utils";
-
 function createRateBar(likes, dislikes) {
   if (!likesDisabledState) {
     let rateBar = document.getElementById("ryd-bar-container");
@@ -14,6 +18,15 @@ function createRateBar(likes, dislikes) {
     const widthPercent =
       likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
 
+
+    if (!rateBar) {
+      let colorLikeStyle = '';
+      let colorDislikeStyle = '';
+      if (extConfig.coloredBar) {
+        colorLikeStyle = '; background-color: ' + getColorFromTheme(true);
+        colorDislikeStyle = '; background-color: ' + getColorFromTheme(false);
+      }
+
     if (!rateBar && !isMobile()) {
       (
         document.getElementById("menu-container") ||
@@ -25,11 +38,11 @@ function createRateBar(likes, dislikes) {
             <div class="ryd-tooltip-bar-container">
                <div
                   id="ryd-bar-container"
-                  style="width: 100%; height: 2px;"
+                  style="width: 100%; height: 2px;${colorDislikeStyle}"
                   >
                   <div
                      id="ryd-bar"
-                     style="width: ${widthPercent}%; height: 100%"
+                     style="width: ${widthPercent}%; height: 100%${colorLikeStyle}"
                      ></div>
                </div>
             </div>
@@ -45,6 +58,10 @@ function createRateBar(likes, dislikes) {
       document.querySelector(
         "#ryd-dislike-tooltip > #tooltip"
       ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
+      if (extConfig.coloredBar) {
+        document.getElementById("ryd-bar-container").style.backgroundColor = getColorFromTheme(false);
+        document.getElementById("ryd-bar").style.backgroundColor = getColorFromTheme(true);
+      }
     }
   } else {
     cLog("removing bar");

Extensions/combined/src/events.js

@@ -111,7 +111,20 @@ function storageChangeHandler(changes, area) {
     handleDisableVoteSubmissionChangeEvent(
       changes.disableVoteSubmission.newValue
     );
+  if (changes.coloredThumbs !== undefined) {
+    handleColoredThumbsChangeEvent(
+      changes.coloredThumbs.newValue
+    );
+  }
+  if (changes.coloredBar !== undefined) {
+    handleColoredBarChangeEvent(
+      changes.coloredBar.newValue
+    );
   }
+  if (changes.colorTheme !== undefined) {
+    handleColorThemeChangeEvent(
+      changes.colorTheme.newValue
+    );
   if (changes.numberDisplayRoundDown !== undefined) {
     handleNumberDisplayRoundDownChangeEvent(
       changes.numberDisplayRoundDown.newValue
@@ -126,6 +139,19 @@ function handleDisableVoteSubmissionChangeEvent(value) {
   extConfig.disableVoteSubmission = value;
 }
 
+
+function handleColoredThumbsChangeEvent(value) {
+  extConfig.coloredThumbs = value;
+}
+
+function handleColoredBarChangeEvent(value) {
+  extConfig.coloredBar = value;
+}
+
+function handleColorThemeChangeEvent(value) {
+  extConfig.colorTheme = value;
+}
+    
 function handleNumberDisplayFormatChangeEvent(value) {
   extConfig.numberDisplayFormat = value;
 }

Extensions/combined/src/state.js

@@ -1,6 +1,12 @@
 import { getLikeButton, getDislikeButton, getButtons } from "./buttons";
 import { createRateBar } from "./bar";
-import { getBrowser, getVideoId, cLog, numberFormat } from "./utils";
+import { 
+  getBrowser,
+  getVideoId,
+  cLog,
+  numberFormat,
+  getColorFromTheme,
+} from "./utils";
 import { sendVideoIds } from "./events";
 
 //TODO: Do not duplicate here and in ryd.background.js
@@ -13,6 +19,9 @@ const DISLIKES_DISABLED_TEXT = "DISLIKES DISABLED";
 
 let extConfig = {
   disableVoteSubmission: false,
+  coloredThumbs: false,
+  coloredBar: false,
+  colorTheme: "classic",
   numberDisplayFormat: 'compactShort',
   numberDisplayRoundDown: true,
 };
@@ -109,6 +118,10 @@ function processResponse(response, storedData) {
   storedData.dislikes = parseInt(response.dislikes);
   storedData.likes = getLikeCountFromButton() || parseInt(response.likes);
   createRateBar(storedData.likes, storedData.dislikes);
+  if (extConfig.coloredThumbs === true) {
+    getLikeButton().style.color = getColorFromTheme(true);
+    getDislikeButton().style.color = getColorFromTheme(false);
+  }
 }
 
 async function setState(storedData) {
@@ -153,6 +166,9 @@ function setInitialState() {
 
 function initExtConfig() {
   initializeDisableVoteSubmission();
+  initializeColoredThumbs();
+  initializeColoredBar();
+  initializeColorTheme();
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
 }
@@ -167,6 +183,26 @@ function initializeDisableVoteSubmission() {
   });
 }
 
+
+function initializeColoredThumbs() {
+  getBrowser().storage.sync.get(['coloredThumbs'], (res) => {
+    if (res.coloredThumbs === undefined) {
+      getBrowser().storage.sync.set({coloredThumbs: false});
+    }
+    else {
+      extConfig.coloredThumbs = res.coloredThumbs;
+    }
+  });
+}
+
+function initializeColoredBar() {
+  getBrowser().storage.sync.get(['coloredBar'], (res) => {
+    if (res.coloredBar === undefined) {
+      getBrowser().storage.sync.set({coloredBar: false});
+    }
+    else {
+      extConfig.coloredBar = res.coloredBar;
+    }
 function initializeNumberDisplayRoundDown() {
   getBrowser().storage.sync.get(["numberDisplayRoundDown"], (res) => {
     if (res.numberDisplayRoundDown === undefined) {
@@ -177,6 +213,16 @@ function initializeNumberDisplayRoundDown() {
   });
 }
 
+
+function initializeColorTheme() {
+  getBrowser().storage.sync.get(['colorTheme'], (res) => {
+    if (res.colorTheme === undefined) {
+      getBrowser().storage.sync.set({colorTheme: false});
+    }
+    else {
+      extConfig.colorTheme = res.colorTheme;
+    }
+  }
 function initializeNumberDisplayFormat() {
   getBrowser().storage.sync.get(['numberDisplayFormat'], (res) => {
     if (res.numberDisplayFormat === undefined) {

Extensions/combined/src/utils.js

@@ -115,4 +115,41 @@ function cLog(message, writer) {
   }
 }
 
+
+function getColorFromTheme(voteIsLike) {
+  let colorString;
+  switch(extConfig.colorTheme) {
+    case 'accessible':
+      if (voteIsLike === true) {
+        colorString = 'dodgerblue';
+      } else {
+        colorString = 'gold';
+      }
+      break;
+    case 'neon':
+      if (voteIsLike === true) {
+        colorString = 'aqua';
+      } else {
+        colorString = 'magenta';
+      }
+      break;
+    case 'classic':
+    default:
+      if (voteIsLike === true) {
+        colorString = 'lime';
+      } else {
+        colorString = 'red';
+      }
+  }
+  return colorString;
+}
+
+export {
+  numberFormat,
+  getBrowser,
+  getVideoId,
+  isVideoLoaded,
+  cLog,
+  getColorFromTheme,
+}
 export { numberFormat, getBrowser, getVideoId, isInViewport, isVideoLoaded, cLog }