Merge branch 'develop' into improved-translations

14 files changed, 607 insertions, 124 deletions

diff --git a/Extensions/UserScript/Return Youtube Dislike.user.js b/Extensions/UserScript/Return Youtube Dislike.user.js
index 476561b..453c56e 100644
--- a/Extensions/UserScript/Return Youtube Dislike.user.js
+++ b/Extensions/UserScript/Return Youtube Dislike.user.js
@@ -33,6 +33,7 @@ const extConfig = {
   colorTheme: "classic", // [classic*, accessible, neon] Color theme (red/green, blue/yellow, pink/cyan)
   numberDisplayFormat: "compactShort", // [compactShort*, compactLong, standard] Number format (For non-English locale users, you may be able to improve appearance with a different option. Please file a feature request if your locale is not covered)
   numberDisplayRoundDown: true, // [true*, false] Round down numbers (Show rounded down numbers)
+  tooltipPercentageMode: "none", // [none*, dash_like, dash_dislike, both, only_like, only_dislike] Mode of showing percentage in like/dislike bar tooltip.
   numberDisplayReformatLikes: false, // [true, false*] Re-format like numbers (Make likes and dislikes format consistent)
 // END USER OPTIONS
 };
@@ -203,10 +204,10 @@ function getLikeCountFromButton() {
   if (isShorts()) {
     //Youtube Shorts don't work with this query. It's not nessecary; we can skip it and still see the results.
     //It should be possible to fix this function, but it's not critical to showing the dislike count.
-    return 0;
+    return false;
   }
   let likesStr = getLikeButton()
-    .querySelector("button")
+    .querySelector("yt-formatted-string#text")
     .getAttribute("aria-label")
     .replace(/\D/g, "");
   return likesStr.length > 0 ? parseInt(likesStr) : false;
@@ -262,6 +263,32 @@ function createRateBar(likes, dislikes) {
   const widthPercent =
     likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
 
+  var likePercentage = parseFloat(widthPercent.toFixed(1));
+  const dislikePercentage = (100 - likePercentage).toLocaleString();
+  likePercentage = likePercentage.toLocaleString();
+
+  var tooltipInnerHTML;
+  switch (extConfig.tooltipPercentageMode) {
+    case "dash_like":
+      tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}  -  ${likePercentage}%`
+    break;
+    case "dash_dislike":
+      tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}  -  ${dislikePercentage}%`
+    break;
+    case "both":
+      tooltipInnerHTML = `${likePercentage}% / ${dislikePercentage}%`
+      break;
+    case "only_like":
+      tooltipInnerHTML = `${likePercentage}%`
+      break;
+    case "only_dislike":
+      tooltipInnerHTML = `${dislikePercentage}%`
+      break;
+    default:
+      tooltipInnerHTML = `${likes.toLocaleString()} / ${dislikes.toLocaleString()}`
+  }
+
+
   if (!rateBar && !isMobile) {
     let colorLikeStyle = "";
     let colorDislikeStyle = "";
@@ -269,7 +296,7 @@ function createRateBar(likes, dislikes) {
       colorLikeStyle = "; background-color: " + getColorFromTheme(true);
       colorDislikeStyle = "; background-color: " + getColorFromTheme(false);
     }
-    
+
     document.getElementById("menu-container").insertAdjacentHTML(
       "beforeend",
       `
@@ -286,7 +313,7 @@ function createRateBar(likes, dislikes) {
            </div>
         </div>
         <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1">
-           <!--css-build:shady-->${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}
+           <!--css-build:shady-->${tooltipInnerHTML}
         </tp-yt-paper-tooltip>
         </div>
 `
@@ -300,8 +327,8 @@ function createRateBar(likes, dislikes) {
 
     document.querySelector(
       "#ryd-dislike-tooltip > #tooltip"
-    ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
-    
+    ).innerHTML = tooltipInnerHTML;
+
     if (extConfig.coloredBar) {
       document.getElementById("return-youtube-dislike-bar-container").style.backgroundColor =
         getColorFromTheme(false);
@@ -372,6 +399,12 @@ function likeClicked() {
       createRateBar(likesvalue, dislikesvalue);
       previousState = 1;
     }
+    if (extConfig.numberDisplayReformatLikes === true) {
+      const nativeLikes = getLikeCountFromButton();
+      if (nativeLikes !== false) {
+        setLikes(numberFormat(nativeLikes));
+      }
+    }
   }
 }
 
@@ -393,6 +426,12 @@ function dislikeClicked() {
       setDislikes(numberFormat(dislikesvalue));
       createRateBar(likesvalue, dislikesvalue);
       previousState = 2;
+      if (extConfig.numberDisplayReformatLikes === true) {
+        const nativeLikes = getLikeCountFromButton();
+        if (nativeLikes !== false) {
+          setLikes(numberFormat(nativeLikes));
+        }
+      }
     }
   }
 }
@@ -434,32 +473,38 @@ function roundDown(num) {
 }
 
 function numberFormat(numberState) {
-  let userLocales;
-  try {
-    userLocales = new URL(
-      Array.from(document.querySelectorAll("head > link[rel='search']"))
-        ?.find((n) => n?.getAttribute("href")?.includes("?locale="))
-        ?.getAttribute("href")
-    )?.searchParams?.get("locale");
-  } catch {
-    userLocales = document.documentElement.lang;
-  }
-
   let numberDisplay;
   if (extConfig.numberDisplayRoundDown === false) {
     numberDisplay = numberState;
   } else {
     numberDisplay = roundDown(numberState);
   }
-  return getNumberFormatter(extConfig.numberDisplayFormat, userLocales).format(
+  return getNumberFormatter(extConfig.numberDisplayFormat).format(
     numberDisplay
   );
 }
 
-function getNumberFormatter(optionSelect, userLocales) {
+function getNumberFormatter(optionSelect) {
+  let userLocales;
+  if (document.documentElement.lang) {
+    userLocales = document.documentElement.lang;
+  } else if (navigator.language) {
+    userLocales = navigator.language;
+  } else {
+    try {
+      userLocales = new URL(
+        Array.from(document.querySelectorAll("head > link[rel='search']"))
+          ?.find((n) => n?.getAttribute("href")?.includes("?locale="))
+          ?.getAttribute("href")
+      )?.searchParams?.get("locale");
+    } catch {
+      cLog('Cannot find browser locale. Use en as default for number formatting.');
+      userLocales = 'en';
+    }
+  }
+
   let formatterNotation;
   let formatterCompactDisplay;
-
   switch (optionSelect) {
     case "compactLong":
       formatterNotation = "compact";
@@ -476,7 +521,7 @@ function getNumberFormatter(optionSelect, userLocales) {
   }
 
   const formatter = Intl.NumberFormat(
-    document.documentElement.lang || userLocales || navigator.language,
+    userLocales,
     {
       notation: formatterNotation,
       compactDisplay: formatterCompactDisplay,
@@ -516,7 +561,7 @@ function getColorFromTheme(voteIsLike) {
 function setEventListeners(evt) {
   let jsInitChecktimer;
 
-  function checkForJS_Finish(check) {
+  function checkForJS_Finish() {
     console.log();
     if (isShorts() || (getButtons()?.offsetParent && isVideoLoaded())) {
       const buttons = getButtons();
diff --git a/Extensions/combined/_locales/en/messages.json b/Extensions/combined/_locales/en/messages.json
index 8dfa32b..a5ba9c0 100644
--- a/Extensions/combined/_locales/en/messages.json
+++ b/Extensions/combined/_locales/en/messages.json
@@ -23,6 +23,9 @@
   "linkHelp": {
     "message": "Help"
   },
+  "linkChangelog": {
+    "message": "Change Log"
+  },
   "legendSettings": {
     "message": "Settings"
   },
@@ -30,16 +33,55 @@
     "message": "Disable like/dislike submission"
   },
   "textLikesDisabled": {
-    "message": "disabled by owner"
+    "message": "Disabled by Owner"
   },
   "textSettingsHover": {
     "message": "Stops counting your likes and dislikes."
   },
+  "textRoundingNumbers": {
+    "message": "Round down like/dislike stats (default YouTube behavior)"
+  },
+  "textRoundingNumbersHover": {
+    "message": "Show rounded down stats."
+  },
+  "textConsistentFormat": {
+    "message": "Make likes and dislikes format consistent"
+  },
+  "textConsistentFormatHover": {
+    "message": "Re-format like numbers."
+  },
+  "textNumberFormat": {
+    "message": "Number format:"
+  },
+  "textColorizeRatioBar": {
+    "message": "Colorize ratio bar"
+  },
+  "textColorizeRatioBarHover": {
+    "message": "Use custom colors for ratio bar."
+  },
+  "textColorizeThumbs": {
+    "message": "Colorize thumbs"
+  },
+  "textColorizeThumbsHover": {
+    "message": "Use custom colors for thumb icons."
+  },
+  "textColorTheme": {
+    "message": "Color theme:"
+  },
+  "textColorTheme1": {
+    "message": "Classic"
+  },
+  "textColorTheme2": {
+    "message": "Accessible"
+  },
+  "textColorTheme3": {
+    "message": "Neon"
+  },
   "textTempUnavailable": {
-    "message": "temporarily unavailable"
+    "message": "Temporarily Unavailable"
   },
   "textUpdate": {
-    "message": "update to"
+    "message": "Update to"
   },
   "version30installed": {
     "message": "Version 3.0.0.1 installed"
diff --git a/Extensions/combined/_locales/es/messages.json b/Extensions/combined/_locales/es/messages.json
index 5e0d55c..121c0ee 100644
--- a/Extensions/combined/_locales/es/messages.json
+++ b/Extensions/combined/_locales/es/messages.json
@@ -1,15 +1,15 @@
 {
   "extensionName": {
-    "message": "Regresar los Dislikes de YouTube"
+    "message": "Return YouTube Dislike"
   },
   "extensionNameBeta": {
     "message": "Return YouTube Dislike Beta"
   },
   "extensionDesc": {
-    "message": "Regresa la posibilidad de ver los dislikes"
+    "message": "Recupera la característica de los «dislikes» («No me gusta»)"
   },
   "textDeveloper": {
-    "message": "por Dmitry Selivanov y la Comunidad"
+    "message": "por Dmitry Selivanov y la comunidad"
   },
   "linkWebsite": {
     "message": "Página web"
@@ -23,14 +23,62 @@
   "linkHelp": {
     "message": "Ayuda"
   },
+  "linkChangelog": {
+    "message": "Historial de cambios"
+  },
   "legendSettings": {
     "message": "Ajustes"
   },
   "textSettings": {
-    "message": "Desactivar los dislikes"
+    "message": "Desactivar envío de votos"
+  },
+  "textLikesDisabled": {
+    "message": "desactivado por el propietario"
   },
   "textSettingsHover": {
-    "message": "Dejar de contar los dislikes."
+    "message": "Deja de contar tus «Me gusta» y «No me gusta»."
+  },
+  "textRoundingNumbers": {
+    "message": "Redondear cifras (comportamiento original de YouTube)"
+  },
+  "textRoundingNumbersHover": {
+    "message": "Muestra las estadísticas redondeadas."
+  },
+  "textConsistentFormat": {
+    "message": "Unificar formato de votos"
+  },
+  "textConsistentFormatHover": {
+    "message": "Cambia el formato de las cifras de «Me gusta» y «No me gusta»."
+  },
+  "textNumberFormat": {
+    "message": "Formato de cifras:"
+  },
+  "textColorizeRatioBar": {
+    "message": "Cambiar color de barra de votos"
+  },
+  "textColorizeRatioBarHover": {
+    "message": "Utiliza colores personalizados para la barra de votos."
+  },
+  "textColorizeThumbs": {
+    "message": "Cambiar color de iconos de pulgares"
+  },
+  "textColorizeThumbsHover": {
+    "message": "Utiliza colores personalizados para los iconos de los pulgares."
+  },
+  "textColorTheme": {
+    "message": "Esquema de colores:"
+  },
+  "textColorTheme1": {
+    "message": "Clásico"
+  },
+  "textColorTheme2": {
+    "message": "Accesible"
+  },
+  "textColorTheme3": {
+    "message": "Neón"
+  },
+  "textTempUnavailable": {
+    "message": "no disponible temporalmente"
   },
   "textUpdate": {
     "message": "actualizar a"
diff --git a/Extensions/combined/_locales/pt_BR/messages.json b/Extensions/combined/_locales/pt_BR/messages.json
index 26f40f3..fa6c75a 100644
--- a/Extensions/combined/_locales/pt_BR/messages.json
+++ b/Extensions/combined/_locales/pt_BR/messages.json
@@ -1,21 +1,21 @@
 {
   "extensionName": {
-    "message": "Devolver Dislikes do YouTube"
+    "message": "Voltar Dislikes do YouTube"
   },
   "extensionNameBeta": {
-    "message": "Return YouTube Dislike Beta"
+    "message": "Voltar Dislikes do YouTube Beta"
   },
   "extensionDesc": {
-    "message": "A capacidade de ver os retornos de não gostos"
+    "message": "Voltar os Deslikes do YouTube"
   },
   "textDeveloper": {
-    "message": "por Dmitry Selivanov e a Comunidade"
+    "message": "por Dmitry Selivanov e Comunidade"
   },
   "linkWebsite": {
     "message": "Website"
   },
   "linkFAQ": {
-    "message": "FAQ"
+    "message": "Perguntas Frequentes"
   },
   "linkDonate": {
     "message": "Doe"
@@ -24,15 +24,39 @@
     "message": "Ajuda"
   },
   "legendSettings": {
-    "message": "Ajustes"
+    "message": "Configurações"
   },
   "textSettings": {
-    "message": "Desaproveitar as aversões"
+    "message": "Desativar envio de Curtidas/Não Curtidas"
+  },
+  "textLikesDisabled": {
+    "message": "Desativado pelo proprietário"
   },
   "textSettingsHover": {
-    "message": "Pare de contar as antipatias."
+    "message": "Parar de contar suas curtidas e não curtidas."
+  },
+  "textTempUnavailable": {
+    "message": "Temporariamente indisponível"
   },
   "textUpdate": {
-    "message": "atualização para"
+    "message": "Atualizar para"
+  },
+  "version30installed": {
+    "message": "Versão 3.0.0.1 instalada"
+  },
+  "whatsnew": {
+    "message": "O que há de novo?"
+  },
+  "shortsSupport": {
+    "message": "Suporte para Shorts"
+  },
+  "customColors": {
+    "message": "Cores personalizadas para barra de não curtidas e botões"
+  },
+  "customNumberFormats": {
+    "message": "Formato de números personalizados"
+  },
+  "considerDonating": {
+    "message": "A única coisa que mantém a extensão funcionando são suas doações, considere apoiar o projeto."
   }
-}
+}
\ No newline at end of file
diff --git a/Extensions/combined/_locales/tr/messages.json b/Extensions/combined/_locales/tr/messages.json
index 9f4b7ba..d2b2f89 100644
--- a/Extensions/combined/_locales/tr/messages.json
+++ b/Extensions/combined/_locales/tr/messages.json
@@ -45,7 +45,7 @@
     "message": "Sürüm 3.0.0.1 yüklendi"
   },
   "whatsnew": {
-    "message": "Yenilikler:"
+    "message": "Yeni Ne Var"
   },
   "shortsSupport": {
     "message": "YouTube Shorts Desteği"
@@ -60,4 +60,3 @@
     "message": "Uzantının var olmasını sağlayan tek şey bağışlarınızdır, lütfen projeyi desteklemeyi düşünün."
   }
 }
-  
\ No newline at end of file
diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css
index dfe94cb..2ff8516 100644
--- a/Extensions/combined/popup.css
+++ b/Extensions/combined/popup.css
@@ -15,7 +15,8 @@ html,
 body {
   background-color: var(--background);
   color: var(--white);
-  min-width: 300px;
+  min-width: 310px;
+  min-height: 350px;
   padding: 0.5em;
   font-family: "Roboto", Arial, Helvetica, sans-serif;
   font-size: 14px;
@@ -68,9 +69,12 @@ button:hover {
   border-radius: 0.25rem;
 }
 
-.switch:before {
+
+.switch::before, .label-with-hover-tip::before {
   content: attr(data-hover);
   visibility: hidden;
+  opacity: 0;
+  transition: visibility 0.1s linear, opacity 0.1s linear;
   width: 250px;
   background-color: var(--secondary);
   border-radius: 0.5rem;
@@ -82,8 +86,27 @@ button:hover {
   top: 160%;
 }
 
-.switch:hover:before {
+
+.switch:hover::before, .label-with-hover-tip:hover::before {
   visibility: visible;
+  opacity: 1;
+}
+
+.fade-in {
+	opacity: 1;
+	animation-name: fadeInOpacity;
+	animation-iteration-count: 1;
+	animation-timing-function: ease-in;
+	animation-duration: 2s;
+}
+
+@keyframes fadeInOpacity {
+	0% {
+		opacity: 0;
+	}
+	100% {
+		opacity: 1;
+	}
 }
 
 #advancedToggle {
@@ -123,6 +146,32 @@ button:hover {
   border: 2px solid var(--secondary);
   border-radius: 0.5rem;
   padding: 1rem;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+::-webkit-scrollbar {
+  width: 1rem;
+}
+
+::-webkit-scrollbar-track {
+  background: #111; /* color of the tracking area */
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #333; /* color of the scroll thumb */
+  border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+  border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-top: 0.25rem solid #111; /* creates padding around scroll thumb */
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background-color: #f22; /* color of the scroll thumb */
+  border-radius: 1rem 0 0 1rem; /* roundness of the scroll thumb */
+  border-bottom: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-left: 0.25rem solid #111; /* creates padding around scroll thumb */
+  border-top: 0.25rem solid #111; /* creates padding around scroll thumb */
 }
 
 #advancedLegend {
@@ -142,6 +191,14 @@ button:hover {
   margin-bottom: 1rem;
 }
 
+.label-with-hover-tip {
+  position: relative;
+  display: inline-block;
+  width: 80px;
+  height: 17px;
+  margin-bottom: 1rem;
+}
+
 .switch:last-of-type {
   margin-bottom: 0;
 }
@@ -162,7 +219,7 @@ button:hover {
   border-radius: 34px;
 }
 
-.slider:before {
+.slider::before {
   position: absolute;
   content: "";
   height: 13px;
@@ -178,7 +235,7 @@ input:checked + .slider {
   background: var(--accent);
 }
 
-input:checked + .slider:before {
+input:checked + .slider::before {
   transform: translateX(13px);
   background: var(--primary);
 }
diff --git a/Extensions/combined/popup.html b/Extensions/combined/popup.html
index 38b5c0d..8318901 100644
--- a/Extensions/combined/popup.html
+++ b/Extensions/combined/popup.html
@@ -44,7 +44,7 @@
     </button>
     <br>
     <button style="margin-top: 0.3em" id="link_changelog" title="__MSG_linkChangelog__">
-      Change Log
+      __MSG_linkChangelog__
     </button>
   
     <br/>
@@ -94,7 +94,7 @@
     __MSG_legendSettings__
   </legend>
 
-  <label class="switch" data-hover="__MSG_textSettingsHover__">
+  <label class="switch" data-hover="Stop counting your likes and dislikes">
     <input type="checkbox" id="disable_vote_submission"/>
     <span class="slider" />
     <span class="switchLabel" title="__MSG_textSettings__">
@@ -139,11 +139,9 @@
   <div class="custom-select">
     <label for="color_theme">__MSG_colorTheme__</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>
+      <option value="classic" id="color_theme_classic">"__MSG_textColorTheme1__"</option>
+      <option value="accessible" id="color_theme_accessible">"__MSG_textColorTheme2__"</option>
+      <option value="neon" id="color_theme_neon">"__MSG_textColorTheme3__"</option>
     </select>
     <span
       id="color_theme_example_like"
@@ -164,6 +162,22 @@
           "
     >&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">190&nbsp;/&nbsp;10&nbsp;&nbsp;-&nbsp;&nbsp;95%</option>
+      <option value="dash_dislike" id="tooltip_percentage_mode_dash_dislike">190&nbsp;/&nbsp;10&nbsp;&nbsp;-&nbsp;&nbsp;5%</option>
+      <option value="both" id="tooltip_percentage_mode_both">95%&nbsp;/&nbsp;5%</option>
+      <option value="only_like" id="tooltip_percentage_mode_only_like">95%</option>
+      <option value="only_dislike" id="tooltip_percentage_mode_only_dislike">5%</option>
+    </select>
+  </div>
 </fieldset>
 </body>
 <script src="popup.js"></script>
diff --git a/Extensions/combined/popup.js b/Extensions/combined/popup.js
index 2fb0db7..30741dd 100644
--- a/Extensions/combined/popup.js
+++ b/Extensions/combined/popup.js
@@ -1,3 +1,5 @@
+import { cLog } from "./src/utils";
+
 /*   Config   */
 const config = {
   advanced: false,
@@ -7,7 +9,9 @@ const config = {
   colorTheme: "classic",
   numberDisplayFormat: "compactShort",
   numberDisplayRoundDown: true,
-  numberDisplayReformatLikes: false, 
+  showTooltipPercentage: false,
+  tooltipPercentageMode: "dash_like",
+  numberDisplayReformatLikes: false,
   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:
@@ -86,6 +90,14 @@ 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 });
+});
+
 document.getElementById("number_reformat_likes").addEventListener("click", (ev) => {
   chrome.storage.sync.set({ numberDisplayReformatLikes: ev.target.checked });
 });
@@ -99,14 +111,13 @@ advancedToggle.addEventListener("click", () => {
     adv.style.pointerEvents = "none";
     adv.style.opacity = "0";
     advancedToggle.innerHTML = config.showAdvancedMessage;
-    config.advanced = false;
   } else {
     adv.style.transform = "scale(1)";
     adv.style.pointerEvents = "auto";
     adv.style.opacity = "1";
     advancedToggle.innerHTML = config.hideAdvancedMessage;
-    config.advanced = true;
   }
+  config.advanced = !config.advanced;
 });
 
 initConfig();
@@ -119,6 +130,8 @@ function initConfig() {
   initializeColorTheme();
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
+  initializeTooltipPercentage();
+  initializeTooltipPercentageMode();
   initializeNumberDisplayReformatLikes();
 }
 
@@ -190,6 +203,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);
@@ -243,6 +268,9 @@ function storageChangeHandler(changes, area) {
   if (changes.numberDisplayFormat !== undefined) {
     handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
   }
+  if (changes.showTooltipPercentage !== undefined) {
+    handleShowTooltipPercentageChangeEvent(changes.showTooltipPercentage.newValue);
+  }
   if (changes.numberDisplayReformatLikes !== undefined) {
     handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue);
   }
@@ -293,6 +321,22 @@ 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;
+};
+
 function handleNumberDisplayReformatLikesChangeEvent(value) {
   config.numberDisplayReformatLikes = value;
   document.getElementById("number_reformat_likes").checked = value;
diff --git a/Extensions/combined/ryd.background.js b/Extensions/combined/ryd.background.js
index 75f22ae..b6b6b67 100644
--- a/Extensions/combined/ryd.background.js
+++ b/Extensions/combined/ryd.background.js
@@ -77,6 +77,8 @@ api.runtime.onInstalled.addListener((details) => {
   if (
     // No need to show changelog if its was a browser update (and not extension update)
     details.reason === "browser_update" ||
+    // Chromium (e.g., Google Chrome Cannary) uses this name instead of the one above for some reason
+    details.reason === "chrome_update" ||
     // No need to show changelog if developer just reloaded the extension
     details.reason === "update"
   )
@@ -277,6 +279,12 @@ function storageChangeHandler(changes, area) {
       changes.numberDisplayReformatLikes.newValue
     );
   }
+  if (changes.showTooltipPercentage !== undefined) {
+    handleShowTooltipPercentageChangeEvent(changes.showTooltipPercentage.newValue);
+  }
+  if (changes.numberDisplayReformatLikes !== undefined) {
+    handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue);
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
@@ -292,6 +300,17 @@ function handleNumberDisplayFormatChangeEvent(value) {
   extConfig.numberDisplayFormat = value;
 }
 
+function handleShowTooltipPercentageChangeEvent(value) {
+  extConfig.showTooltipPercentage = value;
+};
+
+function handleTooltipPercentageModeChangeEvent(value) {
+  if (!value) {
+    value = "dash_like";
+  }
+  extConfig.tooltipPercentageMode = value;
+};
+
 function handleNumberDisplayRoundDownChangeEvent(value) {
   extConfig.numberDisplayRoundDown = value;
 }
@@ -333,6 +352,8 @@ function initExtConfig() {
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
   initializeNumberDisplayReformatLikes();
+  initializeTooltipPercentage();
+  initializeTooltipPercentageMode();
 }
 
 function initializeDisableVoteSubmission() {
@@ -396,6 +417,26 @@ function initializeNumberDisplayFormat() {
   });
 }
 
+function initializeTooltipPercentage() {
+  api.storage.sync.get(["showTooltipPercentage"], (res) => {
+    if (res.showTooltipPercentage === undefined) {
+      api.storage.sync.set({ showTooltipPercentage: false });
+    } else {
+      extConfig.showTooltipPercentage = res.showTooltipPercentage;
+    }
+  });
+}
+
+function initializeTooltipPercentageMode() {
+  api.storage.sync.get(["tooltipPercentageMode"], (res) => {
+    if (res.tooltipPercentageMode === undefined) {
+      api.storage.sync.set({ tooltipPercentageMode: "dash_like" });
+    } else {
+      extConfig.tooltipPercentageMode = res.tooltipPercentageMode;
+    }
+  });
+}
+
 function initializeNumberDisplayReformatLikes() {
   api.storage.sync.get(["numberDisplayReformatLikes"], (res) => {
     if (res.numberDisplayReformatLikes === undefined) {
diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js
index c56ab57..6267ce6 100644
--- a/Extensions/combined/src/bar.js
+++ b/Extensions/combined/src/bar.js
@@ -1,5 +1,5 @@
 import { getButtons } from "./buttons";
-import { extConfig, isMobile, isLikesDisabled } from "./state";
+import { extConfig, isMobile, isLikesDisabled, isShorts } from "./state";
 import { cLog, getColorFromTheme } from "./utils";
 
 function createRateBar(likes, dislikes) {
@@ -14,49 +14,78 @@ function createRateBar(likes, dislikes) {
     const widthPercent =
       likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
 
-    if (!rateBar && !isMobile()) {
-      let colorLikeStyle = "";
-      let colorDislikeStyle = "";
-      if (extConfig.coloredBar) {
-        colorLikeStyle = "; background-color: " + getColorFromTheme(true);
-        colorDislikeStyle = "; background-color: " + getColorFromTheme(false);
-      }
+    var likePercentage = parseFloat(widthPercent.toFixed(1));
+    const dislikePercentage = (100 - likePercentage).toLocaleString();
+    likePercentage = likePercentage.toLocaleString();
 
-      (
-        document.getElementById("menu-container") ||
-        document.querySelector("ytm-slim-video-action-bar-renderer")
-      ).insertAdjacentHTML(
-        "beforeend",
-        `
-            <div class="ryd-tooltip" style="width: ${widthPx}px">
-            <div class="ryd-tooltip-bar-container">
-               <div
-                  id="ryd-bar-container"
-                  style="width: 100%; height: 2px;${colorDislikeStyle}"
-                  >
-                  <div
-                     id="ryd-bar"
-                     style="width: ${widthPercent}%; height: 100%${colorLikeStyle}"
-                     ></div>
-               </div>
-            </div>
-            <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1">
-               <!--css-build:shady-->${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}
-            </tp-yt-paper-tooltip>
-            </div>
-    `
-      );
+    if (extConfig.showTooltipPercentage) {
+      var tooltipInnerHTML;
+      switch (extConfig.tooltipPercentageMode) {        
+        case "dash_dislike":
+          tooltipInnerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}&nbsp;&nbsp;-&nbsp;&nbsp;${dislikePercentage}%`
+        break;
+        case "both":
+          tooltipInnerHTML = `${likePercentage}%&nbsp;/&nbsp;${dislikePercentage}%`
+          break;
+        case "only_like":
+          tooltipInnerHTML = `${likePercentage}%`
+          break;
+        case "only_dislike":
+          tooltipInnerHTML = `${dislikePercentage}%`
+          break;
+        default: // dash_like
+          tooltipInnerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}&nbsp;&nbsp;-&nbsp;&nbsp;${likePercentage}%`
+      }
     } else {
-      document.getElementById("ryd-bar-container").style.width = widthPx + "px";
-      document.getElementById("ryd-bar").style.width = widthPercent + "%";
-      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);
+      tooltipInnerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`
+    }
+    
+    
+    if (!isShorts()) {
+      if (!rateBar && !isMobile()) {
+        let colorLikeStyle = "";
+        let colorDislikeStyle = "";
+        if (extConfig.coloredBar) {
+          colorLikeStyle = "; background-color: " + getColorFromTheme(true);
+          colorDislikeStyle = "; background-color: " + getColorFromTheme(false);
+        }
+
+        (
+          document.getElementById("menu-container") ||
+          document.querySelector("ytm-slim-video-action-bar-renderer")
+        ).insertAdjacentHTML(
+          "beforeend",
+          `
+              <div class="ryd-tooltip" style="width: ${widthPx}px">
+              <div class="ryd-tooltip-bar-container">
+                <div
+                    id="ryd-bar-container"
+                    style="width: 100%; height: 2px;${colorDislikeStyle}"
+                    >
+                    <div
+                      id="ryd-bar"
+                      style="width: ${widthPercent}%; height: 100%${colorLikeStyle}"
+                      ></div>
+                </div>
+              </div>
+              <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1">
+                <!--css-build:shady-->${tooltipInnerHTML}
+              </tp-yt-paper-tooltip>
+              </div>
+      `
+        );
+      } else {
+        document.getElementById("ryd-bar-container").style.width = widthPx + "px";
+        document.getElementById("ryd-bar").style.width = widthPercent + "%";
+        document.querySelector(
+          "#ryd-dislike-tooltip > #tooltip"
+        ).innerHTML = tooltipInnerHTML;
+        if (extConfig.coloredBar) {
+          document.getElementById("ryd-bar-container").style.backgroundColor =
+            getColorFromTheme(false);
+          document.getElementById("ryd-bar").style.backgroundColor =
+            getColorFromTheme(true);
+        }
       }
     }
   } else {
diff --git a/Extensions/combined/src/events.js b/Extensions/combined/src/events.js
index 99c7d14..019f166 100644
--- a/Extensions/combined/src/events.js
+++ b/Extensions/combined/src/events.js
@@ -8,6 +8,7 @@ import {
   extConfig,
   storedData,
   setLikes,
+  getLikeCountFromButton,
 } from "./state";
 import { createRateBar } from "./bar";
 
@@ -41,6 +42,12 @@ function likeClicked() {
       createRateBar(storedData.likes, storedData.dislikes);
       storedData.previousState = NEUTRAL_STATE;
     }
+    if (extConfig.numberDisplayReformatLikes === true) {
+      const nativeLikes = getLikeCountFromButton();
+      if (nativeLikes !== false) {
+        setLikes(numberFormat(nativeLikes));
+      }
+    }
   }
 }
 
@@ -65,6 +72,12 @@ function dislikeClicked() {
       setDislikes(numberFormat(storedData.dislikes));
       createRateBar(storedData.likes, storedData.dislikes);
       storedData.previousState = DISLIKED_STATE;
+      if (extConfig.numberDisplayReformatLikes === true) {
+        const nativeLikes = getLikeCountFromButton();
+        if (nativeLikes !== false) {
+          setLikes(numberFormat(nativeLikes));
+        }
+      }
     }
   }
 }
diff --git a/Extensions/combined/src/starRating.js b/Extensions/combined/src/starRating.js
new file mode 100644
index 0000000..5d98814
--- /dev/null
+++ b/Extensions/combined/src/starRating.js
@@ -0,0 +1,101 @@
+import { cLog } from "./utils";

+

+function createStarRating(rating, isMobile) {

+    let starRating = document.createElement('label');

+

+    let starSlider = document.createElement("input");

+    starSlider.setAttribute("class", "rating");

+    starSlider.setAttribute("max", "5");

+    starSlider.setAttribute("readonly", "");

+    starSlider.setAttribute("style", `--fill:rgb(255, 215, 0);--value:${rating.toString()};};background-color: transparent;`);

+    starSlider.setAttribute("type", "range");

+    

+    starRating.appendChild(starSlider);

+    

+    let YTLikeButton;

+

+    if (isMobile){

+      YTLikeButton = document.querySelector('#app > div.page-container > ytm-watch > ytm-single-column-watch-next-results-renderer > ytm-slim-video-metadata-section-renderer > ytm-slim-video-action-bar-renderer > div > ytm-slim-metadata-toggle-button-renderer:nth-child(1)');

+    } else {

+      YTLikeButton = document.querySelector('#top-level-buttons-computed > ytd-toggle-button-renderer:nth-child(1)');

+    }

+    

+    YTLikeButton.insertAdjacentElement('afterend', starRating);

+

+    try {

+      let YTBar = document.querySelector('#ryd-bar-container');

+      YTBar.setAttribute("style", "width: 190%; height: 2px;");

+    }

+    catch(err) {

+      cLog("RateBar Not Present");

+    }

+

+

+

+    let style = `<style>

+

+.rating {

+    --dir: right;

+    --fill: gold;

+    --fillbg: rgba(100, 100, 100, 0.15);

+    --star: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 17.25l-6.188 3.75 1.641-7.031-5.438-4.734 7.172-0.609 2.813-6.609 2.813 6.609 7.172 0.609-5.438 4.734 1.641 7.031z"/></svg>');

+    --stars: 5;

+    --starSize: 2.8rem;

+    --symbol: var(--star);

+    --value: 1;

+    --w: calc(var(--stars) * var(--starSize));

+    --x: calc(100% * (var(--value) / var(--stars)));

+    block-size: var(--starSize);

+    inline-size: var(--w);

+    position: relative;

+    touch-action: manipulation;

+    -webkit-appearance: none;

+}

+

+[dir="rtl"] .rating {

+    --dir: left;

+}

+

+.rating::-moz-range-track {

+    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));

+    block-size: 100%;

+    mask: repeat left center/var(--starSize) var(--symbol);

+}

+

+.rating::-webkit-slider-runnable-track {

+    background: linear-gradient(to var(--dir), var(--fill) 0 var(--x), var(--fillbg) 0 var(--x));

+    block-size: 100%;

+    mask: repeat left center/var(--starSize) var(--symbol);

+    -webkit-mask: repeat left center/var(--starSize) var(--symbol);

+}

+

+.rating::-moz-range-thumb {

+    height: var(--starSize);

+    opacity: 0;

+    width: var(--starSize);

+}

+

+.rating::-webkit-slider-thumb {

+    height: var(--starSize);

+    opacity: 0;

+    width: var(--starSize);

+    -webkit-appearance: none;

+}

+

+.rating,

+.rating-label {

+    display: block;

+    font-family: ui-sans-serif, system-ui, sans-serif;

+}

+

+.rating-label {

+    margin-block-end: 1rem;

+}

+

+</style>`;

+

+document.head.insertAdjacentHTML("beforeend", style);

+

+  }

+

+  export { createStarRating };

diff --git a/Extensions/combined/src/state.js b/Extensions/combined/src/state.js
index df9d561..52f68d4 100644
--- a/Extensions/combined/src/state.js
+++ b/Extensions/combined/src/state.js
@@ -8,6 +8,7 @@ import {
   getColorFromTheme,
 } from "./utils";
 import { localize } from "./utils";
+import { createStarRating } from "./starRating";
 
 //TODO: Do not duplicate here and in ryd.background.js
 const apiUrl = "https://returnyoutubedislikeapi.com";
@@ -22,6 +23,8 @@ let extConfig = {
   colorTheme: "classic",
   numberDisplayFormat: "compactShort",
   numberDisplayRoundDown: true,
+  showTooltipPercentage: false,
+  tooltipPercentageMode: "dash_like",
   numberDisplayReformatLikes: false,
 };
 
@@ -150,10 +153,10 @@ function getLikeCountFromButton() {
   if (isShorts()) {
     //Youtube Shorts don't work with this query. It's not nessecary; we can skip it and still see the results.
     //It should be possible to fix this function, but it's not critical to showing the dislike count.
-    return 0;
+    return false;
   }
   let likesStr = getLikeButton()
-    .querySelector("button")
+    .querySelector("yt-formatted-string#text")
     .getAttribute("aria-label")
     .replace(/\D/g, "");
   return likesStr.length > 0 ? parseInt(likesStr) : false;
@@ -199,6 +202,7 @@ function processResponse(response, storedData) {
       getDislikeButton().style.color = getColorFromTheme(false);
     }
   }
+  createStarRating(response.rating, isMobile());
 }
 
 // Tells the user if the API is down
@@ -252,6 +256,8 @@ function initExtConfig() {
   initializeColorTheme();
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
+  initializeTooltipPercentage();
+  initializeTooltipPercentageMode();
   initializeNumberDisplayReformatLikes();
 }
 
@@ -315,6 +321,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;
+    }
+  });
+}
+
 function initializeNumberDisplayReformatLikes() {
   getBrowser().storage.sync.get(["numberDisplayReformatLikes"], (res) => {
     if (res.numberDisplayReformatLikes === undefined) {
diff --git a/Extensions/combined/src/utils.js b/Extensions/combined/src/utils.js
index a3fe790..53a84d0 100644
--- a/Extensions/combined/src/utils.js
+++ b/Extensions/combined/src/utils.js
@@ -9,15 +9,6 @@ function roundDown(num) {
 }
 
 function numberFormat(numberState) {
-  let userLocales;
-  try {
-    userLocales = new URL(
-      Array.from(document.querySelectorAll("head > link[rel='search']"))
-        ?.find((n) => n?.getAttribute("href")?.includes("?locale="))
-        ?.getAttribute("href")
-    )?.searchParams?.get("locale");
-  } catch {}
-
   let numberDisplay;
   if (extConfig.numberDisplayRoundDown === false) {
     numberDisplay = numberState;
@@ -29,22 +20,27 @@ function numberFormat(numberState) {
   );
 }
 
-function localize(localeString) {
-  return chrome.i18n.getMessage(localeString);
-}
-
 function getNumberFormatter(optionSelect) {
-  let formatterNotation;
-  let formatterCompactDisplay;
   let userLocales;
-  try {
-    userLocales = new URL(
-      Array.from(document.querySelectorAll("head > link[rel='search']"))
-      ?.find((n) => n?.getAttribute("href")?.includes("?locale="))
-      ?.getAttribute("href")
-    )?.searchParams?.get("locale");
-  } catch {}
+  if (document.documentElement.lang) {
+    userLocales = document.documentElement.lang;
+  } else if (navigator.language) {
+    userLocales = navigator.language;
+  } else {
+    try {
+      userLocales = new URL(
+        Array.from(document.querySelectorAll("head > link[rel='search']"))
+          ?.find((n) => n?.getAttribute("href")?.includes("?locale="))
+          ?.getAttribute("href")
+      )?.searchParams?.get("locale");
+    } catch {
+      cLog('Cannot find browser locale. Use en as default for number formatting.');
+      userLocales = 'en';
+    }
+  }
 
+  let formatterNotation;
+  let formatterCompactDisplay;
   switch (optionSelect) {
     case "compactLong":
       formatterNotation = "compact";
@@ -61,7 +57,7 @@ function getNumberFormatter(optionSelect) {
   }
 
   const formatter = Intl.NumberFormat(
-    document.documentElement.lang || userLocales || navigator.language,
+    userLocales,
     {
       notation: formatterNotation,
       compactDisplay: formatterCompactDisplay,
@@ -70,6 +66,10 @@ function getNumberFormatter(optionSelect) {
   return formatter;
 }
 
+function localize(localeString) {
+  return chrome.i18n.getMessage(localeString);
+}
+
 function getBrowser() {
   if (typeof chrome !== "undefined" && typeof chrome.runtime !== "undefined") {
     return chrome;