Implement feature #211

Extensions/combined/popup.css

@@ -15,7 +15,8 @@ html,
 body {
   background-color: var(--background);
   color: var(--white);
-  min-width: 300px;
+  min-width: 305px;
+  min-height: 305px;
   padding: 0.5em;
   font-family: "Roboto", Arial, Helvetica, sans-serif;
   font-size: 14px;

Extensions/combined/popup.html

@@ -160,6 +160,34 @@
     >&nbsp;</span
     >
   </div>
+  <br/>
+  <label class="switch" data-hover="Display percentage in like/dislike bar tooltip.">
+    <input type="checkbox" id="show_tooltip_percentage"/>
+    <span class="slider"/>
+    <span class="switchLabel">Percentage in like/dislike bar tooltip.</span>
+  </label>
+  <div class="custom-select">
+    <label for="tooltip_percentage_mode" data-hover="Use custom percentage display on hover.">Percent mode:</label>
+    <select name="tooltip_percentage_mode" id="tooltip_percentage_mode">
+      <option value="dash_like" id="tooltip_percentage_mode_dash_like">Dash like</option>
+      <option value="dash_dislike" id="tooltip_percentage_mode_dash_dislike">Dash dislike</option>
+      <option value="both" id="tooltip_percentage_mode_both">Both</option>
+      <option value="only_like" id="tooltip_percentage_mode_only_like">Only like</option>
+      <option value="only_dislike" id="tooltip_percentage_mode_only_dislike">Only dislike</option>      
+    </select>
+    <span
+      id="percentage_mode_example"
+      style="
+            /*padding-left: 4px;*/
+            display: inline-block;
+            vertical-align: text-top;
+            vertical-align: middle;
+            font-size: 12px;
+          "
+    >
+    190&nbsp;/&nbsp;10&nbsp;&nbsp;-&nbsp;&nbsp;95%
+    </span>
+  </div>
 </fieldset>
 </body>
 <script src="popup.js"></script>

Extensions/combined/popup.js

@@ -1,3 +1,5 @@
+import { cLog } from "./src/utils";
+
 /*   Config   */
 const config = {
   advanced: false,
@@ -7,6 +9,8 @@ const config = {
   colorTheme: "classic",
   numberDisplayFormat: "compactShort",
   numberDisplayRoundDown: true,
+  showTooltipPercentage: false,
+  tooltipPercentageMode: "dash_like",
   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>',
   hideAdvancedMessage:
@@ -83,6 +87,15 @@ document.getElementById("number_format").addEventListener("change", (ev) => {
   chrome.storage.sync.set({ numberDisplayFormat: ev.target.value });
 });
 
+document.getElementById("show_tooltip_percentage").addEventListener("click", (ev) => {
+  chrome.storage.sync.set({ showTooltipPercentage: ev.target.checked });
+});
+
+document.getElementById("tooltip_percentage_mode").addEventListener("change", (ev) => {
+  chrome.storage.sync.set({ tooltipPercentageMode: ev.target.value });
+  updateTooltipPercentageModePreviewContent(ev.target.value);
+});
+
 /*   Advanced Toggle   */
 const advancedToggle = document.getElementById("advancedToggle");
 advancedToggle.addEventListener("click", () => {
@@ -112,6 +125,8 @@ function initConfig() {
   initializeColorTheme();
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
+  initializeTooltipPercentage();
+  initializeTooltipPercentageMode();
 }
 
 function initializeVersionNumber() {
@@ -182,6 +197,18 @@ function initializeNumberDisplayRoundDown() {
   });
 }
 
+function initializeTooltipPercentage(){
+  chrome.storage.sync.get(["showTooltipPercentage"], (res) => {
+    handleShowTooltipPercentageChangeEvent(res.showTooltipPercentage);
+  });
+};
+
+function initializeTooltipPercentageMode() {
+  chrome.storage.sync.get(["tooltipPercentageMode"], (res) => {
+    handleTooltipPercentageModeChangeEvent(res.tooltipPercentageMode);
+  });
+};
+
 function initializeNumberDisplayFormat() {
   chrome.storage.sync.get(["numberDisplayFormat"], (res) => {
     handleNumberDisplayFormatChangeEvent(res.numberDisplayFormat);
@@ -229,6 +256,9 @@ function storageChangeHandler(changes, area) {
   if (changes.numberDisplayFormat !== undefined) {
     handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
   }
+  if (changes.showTooltipPercentage !== undefined) {
+    handleShowTooltipPercentageChangeEvent(changes.showTooltipPercentage.newValue);
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
@@ -276,6 +306,42 @@ function handleNumberDisplayFormatChangeEvent(value) {
     .querySelector('option[value="' + value + '"]').selected = true;
 }
 
+function handleShowTooltipPercentageChangeEvent(value) {
+  config.showTooltipPercentage = value;
+  document.getElementById("show_tooltip_percentage").checked = value;
+};
+
+function handleTooltipPercentageModeChangeEvent(value) {
+  if (!value) {
+    value = "dash_like";
+  }
+  config.tooltipPercentageMode = value;
+
+  document
+    .getElementById("tooltip_percentage_mode")
+    .querySelector('option[value="' + value + '"]').selected = true;
+    updateTooltipPercentageModePreviewContent(value);
+};
+
+function updateTooltipPercentageModePreviewContent(modeName) {
+  switch (modeName) {
+    case "dash_dislike":
+      document.getElementById("percentage_mode_example").innerHTML = "190&nbsp;/&nbsp;10&nbsp;&nbsp;-&nbsp;&nbsp;5%";
+      break;
+    case "both":
+      document.getElementById("percentage_mode_example").innerHTML = "95%&nbsp;/&nbsp;5%";
+      break;
+    case "only_like":
+      document.getElementById("percentage_mode_example").innerHTML = "95%";
+      break;
+    case "only_dislike":
+      document.getElementById("percentage_mode_example").innerHTML = "5%";
+      break;
+    default:
+      document.getElementById("percentage_mode_example").innerHTML = "190&nbsp;/&nbsp;10&nbsp;&nbsp;-&nbsp;&nbsp;95%";
+  };
+}
+
 function getNumberFormatter(optionSelect) {
   let formatterNotation;
   let formatterCompactDisplay;

Extensions/combined/src/bar.js

@@ -13,7 +13,7 @@ function createRateBar(likes, dislikes) {
     const widthPercent =
       likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
 
-    var likePercentage = Math.round(widthPercent.toFixed(1));
+    var likePercentage = parseFloat(widthPercent.toFixed(1));
     const dislikePercentage = (100 - likePercentage).toLocaleString();
     likePercentage = likePercentage.toLocaleString();
     const tooltipPercentageDisplayModes = {
@@ -25,7 +25,10 @@ function createRateBar(likes, dislikes) {
       "only_dislike": `${dislikePercentage}%`
     };
 
-    const tooltipOption = "both";
+    var tooltipOption = "classic";
+    if (extConfig.showTooltipPercentage) {
+      tooltipOption = extConfig.tooltipPercentageMode;
+    };
     
     
     if (!rateBar && !isMobile()) {

Extensions/combined/src/state.js

@@ -24,6 +24,8 @@ let extConfig = {
   colorTheme: "classic",
   numberDisplayFormat: "compactShort",
   numberDisplayRoundDown: true,
+  showTooltipPercentage: false,
+  tooltipPercentageMode: "dash_like",
 };
 
 let storedData = {
@@ -171,6 +173,8 @@ function initExtConfig() {
   initializeColorTheme();
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
+  initializeTooltipPercentage();
+  initializeTooltipPercentageMode();
 }
 
 function initializeDisableVoteSubmission() {
@@ -233,6 +237,26 @@ function initializeNumberDisplayFormat() {
   });
 }
 
+function initializeTooltipPercentage() {
+  getBrowser().storage.sync.get(["showTooltipPercentage"], (res) => {
+    if (res.showTooltipPercentage === undefined) {
+      getBrowser().storage.sync.set({ showTooltipPercentage: false });
+    } else {
+      extConfig.showTooltipPercentage = res.showTooltipPercentage;
+    }
+  });
+}
+
+function initializeTooltipPercentageMode() {
+  getBrowser().storage.sync.get(["tooltipPercentageMode"], (res) => {
+    if (res.tooltipPercentageMode === undefined) {
+      getBrowser().storage.sync.set({ tooltipPercentageMode: "dash_like" });
+    } else {
+      extConfig.tooltipPercentageMode = res.tooltipPercentageMode;
+    }
+  });
+}
+
 export {
   isMobile,
   isShorts,