Merge pull request #699 from Anarios/develop

Many PRs merget, prettier applied globally.

22 files changed, 1249 insertions, 429 deletions

diff --git a/Extensions/UserScript/Return Youtube Dislike.user.js b/Extensions/UserScript/Return Youtube Dislike.user.js
index 476561b..253344c 100644
--- a/Extensions/UserScript/Return Youtube Dislike.user.js
+++ b/Extensions/UserScript/Return Youtube Dislike.user.js
@@ -24,8 +24,8 @@
 // ==/UserScript==
 
 const extConfig = {
-// BEGIN USER OPTIONS
-// You may change the following variables to allowed values listed in the corresponding brackets (* means default). Keep the style and keywords intact. 
+  // BEGIN USER OPTIONS
+  // You may change the following variables to allowed values listed in the corresponding brackets (* means default). Keep the style and keywords intact.
   showUpdatePopup: false, // [true, false*] Show a popup tab after extension update (See what's new)
   disableVoteSubmission: false, // [true, false*] Disable like/dislike submission (Stops counting your likes and dislikes)
   coloredThumbs: false, // [true, false*] Colorize thumbs (Use custom colors for thumb icons)
@@ -33,8 +33,9 @@ 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
+  // END USER OPTIONS
 };
 
 const LIKED_STATE = "LIKED_STATE";
@@ -100,29 +101,37 @@ function getDislikeButton() {
 let mutationObserver = new Object();
 
 if (isShorts() && mutationObserver.exists !== true) {
-  cLog('initializing mutation observer')
+  cLog("initializing mutation observer");
   mutationObserver.options = {
     childList: false,
     attributes: true,
-    subtree: false
+    subtree: false,
   };
   mutationObserver.exists = true;
-  mutationObserver.observer = new MutationObserver( function(mutationList, observer) {
-    mutationList.forEach( (mutation) => {
-      if (mutation.type === 'attributes' && 
-        mutation.target.nodeName === 'TP-YT-PAPER-BUTTON' && 
-        mutation.target.id === 'button') {
-        cLog('Short thumb button status changed');
-        if (mutation.target.getAttribute('aria-pressed') === 'true') {
+  mutationObserver.observer = new MutationObserver(function (
+    mutationList,
+    observer
+  ) {
+    mutationList.forEach((mutation) => {
+      if (
+        mutation.type === "attributes" &&
+        mutation.target.nodeName === "TP-YT-PAPER-BUTTON" &&
+        mutation.target.id === "button"
+      ) {
+        cLog("Short thumb button status changed");
+        if (mutation.target.getAttribute("aria-pressed") === "true") {
           mutation.target.style.color =
-            (mutation.target.parentElement.parentElement.id === 'like-button') ? 
-            getColorFromTheme(true) : getColorFromTheme(false);
+            mutation.target.parentElement.parentElement.id === "like-button"
+              ? getColorFromTheme(true)
+              : getColorFromTheme(false);
         } else {
-          mutation.target.style.color = 'unset';
+          mutation.target.style.color = "unset";
         }
         return;
       }
-      cLog('unexpected mutation observer event: ' + mutation.target + mutation.type);
+      cLog(
+        "unexpected mutation observer event: " + mutation.target + mutation.type
+      );
     });
   });
 }
@@ -203,10 +212,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 +271,31 @@ 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 +303,7 @@ function createRateBar(likes, dislikes) {
       colorLikeStyle = "; background-color: " + getColorFromTheme(true);
       colorDislikeStyle = "; background-color: " + getColorFromTheme(false);
     }
-    
+
     document.getElementById("menu-container").insertAdjacentHTML(
       "beforeend",
       `
@@ -286,7 +320,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>
 `
@@ -298,15 +332,16 @@ function createRateBar(likes, dislikes) {
     document.getElementById("return-youtube-dislike-bar").style.width =
       widthPercent + "%";
 
-    document.querySelector(
-      "#ryd-dislike-tooltip > #tooltip"
-    ).innerHTML = `${likes.toLocaleString()}&nbsp;/&nbsp;${dislikes.toLocaleString()}`;
-    
+    document.querySelector("#ryd-dislike-tooltip > #tooltip").innerHTML =
+      tooltipInnerHTML;
+
     if (extConfig.coloredBar) {
-      document.getElementById("return-youtube-dislike-bar-container").style.backgroundColor =
-        getColorFromTheme(false);
-      document.getElementById("return-youtube-dislike-bar").style.backgroundColor =
-        getColorFromTheme(true);
+      document.getElementById(
+        "return-youtube-dislike-bar-container"
+      ).style.backgroundColor = getColorFromTheme(false);
+      document.getElementById(
+        "return-youtube-dislike-bar"
+      ).style.backgroundColor = getColorFromTheme(true);
     }
   }
 }
@@ -333,17 +368,28 @@ function setState() {
         }
         createRateBar(likes, dislikes);
         if (extConfig.coloredThumbs === true) {
-          if (isShorts()) { // for shorts, leave deactived buttons in default color
-            let shortLikeButton = getLikeButton().querySelector('tp-yt-paper-button#button');
-            let shortDislikeButton = getDislikeButton().querySelector('tp-yt-paper-button#button');
-            if (shortLikeButton.getAttribute('aria-pressed') === 'true') {
+          if (isShorts()) {
+            // for shorts, leave deactived buttons in default color
+            let shortLikeButton = getLikeButton().querySelector(
+              "tp-yt-paper-button#button"
+            );
+            let shortDislikeButton = getDislikeButton().querySelector(
+              "tp-yt-paper-button#button"
+            );
+            if (shortLikeButton.getAttribute("aria-pressed") === "true") {
               shortLikeButton.style.color = getColorFromTheme(true);
             }
-            if (shortDislikeButton.getAttribute('aria-pressed') === 'true') {
+            if (shortDislikeButton.getAttribute("aria-pressed") === "true") {
               shortDislikeButton.style.color = getColorFromTheme(false);
             }
-            mutationObserver.observer.observe(shortLikeButton, mutationObserver.options);
-            mutationObserver.observer.observe(shortDislikeButton, mutationObserver.options);
+            mutationObserver.observer.observe(
+              shortLikeButton,
+              mutationObserver.options
+            );
+            mutationObserver.observer.observe(
+              shortDislikeButton,
+              mutationObserver.options
+            );
           } else {
             getLikeButton().style.color = getColorFromTheme(true);
             getDislikeButton().style.color = getColorFromTheme(false);
@@ -372,6 +418,12 @@ function likeClicked() {
       createRateBar(likesvalue, dislikesvalue);
       previousState = 1;
     }
+    if (extConfig.numberDisplayReformatLikes === true) {
+      const nativeLikes = getLikeCountFromButton();
+      if (nativeLikes !== false) {
+        setLikes(numberFormat(nativeLikes));
+      }
+    }
   }
 }
 
@@ -393,6 +445,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 +492,40 @@ 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";
@@ -475,13 +541,10 @@ function getNumberFormatter(optionSelect, userLocales) {
       formatterCompactDisplay = "short";
   }
 
-  const formatter = Intl.NumberFormat(
-    document.documentElement.lang || userLocales || navigator.language,
-    {
-      notation: formatterNotation,
-      compactDisplay: formatterCompactDisplay,
-    }
-  );
+  const formatter = Intl.NumberFormat(userLocales, {
+    notation: formatterNotation,
+    compactDisplay: formatterCompactDisplay,
+  });
   return formatter;
 }
 
@@ -516,7 +579,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/cs/messages.json b/Extensions/combined/_locales/cs/messages.json
new file mode 100644
index 0000000..f80e3ac
--- /dev/null
+++ b/Extensions/combined/_locales/cs/messages.json
@@ -0,0 +1,62 @@
+{
+  "extensionName": {
+    "message": "Return YouTube Dislike"
+  },
+  "extensionNameBeta": {
+    "message": "Return YouTube Dislike Beta"
+  },
+  "extensionDesc": {
+    "message": "Navrátí možnost zobrazení počtu disliků"
+  },
+  "textDeveloper": {
+    "message": "vytvořil Dmitry Selivanov & komunita"
+  },
+  "linkWebsite": {
+    "message": "Web"
+  },
+  "linkFAQ": {
+    "message": "FAQ"
+  },
+  "linkDonate": {
+    "message": "Přispějte"
+  },
+  "linkHelp": {
+    "message": "Nápověda"
+  },
+  "legendSettings": {
+    "message": "Nastavení"
+  },
+  "textSettings": {
+    "message": "Zakázat odesílání like/dislike"
+  },
+  "textLikesDisabled": {
+    "message": "zakázáno majitelem"
+  },
+  "textSettingsHover": {
+    "message": "Zastaví počítání vašich liků a disliků."
+  },
+  "textTempUnavailable": {
+    "message": "dočasně nedostupné"
+  },
+  "textUpdate": {
+    "message": "aktualizovat na"
+  },
+  "version30installed": {
+    "message": "Verze 3.0.0.1 nainstalována"
+  },
+  "whatsnew": {
+    "message": "Co je nového"
+  },
+  "shortsSupport": {
+    "message": "Podpora YouTube Shorts"
+  },
+  "customColors": {
+    "message": "Vlastní barvy pro lištu disliků a tlačítka"
+  },
+  "customNumberFormats": {
+    "message": "Vlastní formáty čísel"
+  },
+  "considerDonating": {
+    "message": "Jediná věc, díky které rozšíření funguje, jsou vaše příspěvky. Zvažte prosím podpoření projektu."
+  }
+}
diff --git a/Extensions/combined/_locales/de/messages.json b/Extensions/combined/_locales/de/messages.json
index 9250528..9b0a7ba 100644
--- a/Extensions/combined/_locales/de/messages.json
+++ b/Extensions/combined/_locales/de/messages.json
@@ -2,7 +2,6 @@
   "extensionName": {
     "message": "Return YouTube Dislike"
   },
-
   "extensionNameBeta": {
     "message": "Return YouTube Dislike Beta"
   },
@@ -50,5 +49,38 @@
   },
   "customNumberFormats": {
     "message": "Benutzerdefinierte Zahlenformate"
+  },
+  "considerDonating": {
+    "message": "Das Einzige, was die Erweiterung am Laufen hält, sind Ihre Spenden, bitte erwägen Sie, das Projekt zu unterstützen."
+  },
+  "roundNumbers": {
+    "message": "Zeige abgerundete Zahlen"
+  },
+  "roundNumbersHover": {
+    "message": "Zahlen abrunden (Standardverhalten von YouTube)."
+  },
+  "reformatLikes": {
+    "message": "Wie Zahlen neu formatieren"
+  },
+  "reformatLikesHover": {
+    "message": "Machen Sie das Format der Vorlieben und Abneigungen konsistent."
+  },
+  "numberFormat": {
+    "message": "Zahlenformat:"
+  },
+  "colorizeRatio": {
+    "message": "Verhältnisbalken einfärben"
+  },
+  "colorizeRatioHover": {
+    "message": "Benutzerdefinierte Farben für die Verhältnisleiste verwenden."
+  },
+  "colorizeThumbs": {
+    "message": "Buttons einfärben"
+  },
+  "colorizeThumbsHover": {
+    "message": "Benutzerdefinierte Farben für die Schaltflächensymbole verwenden."
+  },
+  "colorTheme": {
+    "message": "Farbschema:"
   }
 }
diff --git a/Extensions/combined/_locales/en/messages.json b/Extensions/combined/_locales/en/messages.json
index 99deba7..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": "temp n/a"
+    "message": "Temporarily Unavailable"
   },
   "textUpdate": {
-    "message": "update to"
+    "message": "Update to"
   },
   "version30installed": {
     "message": "Version 3.0.0.1 installed"
@@ -58,5 +100,35 @@
   },
   "considerDonating": {
     "message": "The only thing that keeps the extension running is your donations, please consider supporting the project."
+  },
+  "roundNumbers": {
+    "message": "Show rounded down numbers"
+  },
+  "roundNumbersHover": {
+    "message": "Round down numbers (default YouTube behavior)."
+  },
+  "reformatLikes": {
+    "message": "Re-format like numbers"
+  },
+  "reformatLikesHover": {
+    "message": "Make likes and dislikes format consistent."
+  },
+  "numberFormat": {
+    "message": "Number format:"
+  },
+  "colorizeRatio": {
+    "message": "Colorize ratio bar"
+  },
+  "colorizeRatioHover": {
+    "message": "Use custom colors for the ratio bar."
+  },
+  "colorizeThumbs": {
+    "message": "Colorize thumbs"
+  },
+  "colorizeThumbsHover": {
+    "message": "Use custom colors for the thumb icons."
+  },
+  "colorTheme": {
+    "message": "Color theme:"
   }
 }
diff --git a/Extensions/combined/_locales/es/messages.json b/Extensions/combined/_locales/es/messages.json
index efb95da..3d1ffc4 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,16 +23,112 @@
   "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"
+  },
+  "version30installed": {
+    "message": "Versión 3.0.0.1 instalada"
+  },
+  "whatsnew": {
+    "message": "Novedades"
+  },
+  "shortsSupport": {
+    "message": "Soporte de YouTube Shorts"
+  },
+  "customColors": {
+    "message": "Colores personalizados para la barra y los botones que no me gustan"
+  },
+  "customNumberFormats": {
+    "message": "Formatos de números personalizados"
+  },
+  "considerDonating": {
+    "message": "Lo único que mantiene la extensión en funcionamiento son sus donaciones, considere apoyar el proyecto."
+  },
+  "roundNumbers": {
+    "message": "Mostrar números redondeados hacia abajo"
+  },
+  "roundNumbersHover": {
+    "message": "Redondear números hacia abajo (comportamiento predeterminado de YouTube)."
+  },
+  "reformatLikes": {
+    "message": "Reformatear como números"
+  },
+  "reformatLikesHover": {
+    "message": "Haz que el formato de like y dislike sea consistente."
+  },
+  "numberFormat": {
+    "message": "Formato de número:"
+  },
+  "colorizeRatio": {
+    "message": "Colorear barra de relación"
+  },
+  "colorizeRatioHover": {
+    "message": "Usar colores personalizados para la barra de proporción."
+  },
+  "colorizeThumbs": {
+    "message": "Colorear los botones likes y dislike"
+  },
+  "colorizeThumbsHover": {
+    "message": "Usar colores personalizados para los íconos de los botones."
+  },
+  "colorTheme": {
+    "message": "Combinación de colores:"
   }
 }
diff --git a/Extensions/combined/_locales/fr/messages.json b/Extensions/combined/_locales/fr/messages.json
index 46105d0..95d6193 100644
--- a/Extensions/combined/_locales/fr/messages.json
+++ b/Extensions/combined/_locales/fr/messages.json
@@ -40,5 +40,53 @@
   },
   "textUpdate": {
     "message": "mettre à jour vers"
+  },
+  "version30installed": {
+    "message": "Version 3.0.0.1 installée"
+  },
+  "whatsnew": {
+    "message": "Quoi de neuf"
+  },
+  "shortsSupport": {
+    "message": "Prise en charge des YouTube Shorts"
+  },
+  "customColors": {
+    "message": "Couleurs personnalisées pour la barre du dislike et les boutons"
+  },
+  "customNumberFormats": {
+    "message": "Formats numériques personnalisés"
+  },
+  "considerDonating": {
+    "message": "La seule chose qui permet à l'extension de fonctionner est vos dons, veuillez envisager de soutenir le projet."
+  },
+  "roundNumbers": {
+    "message": "Afficher les nombres arrondis"
+  },
+  "roundNumbersHover": {
+    "message": "Arrondir les nombres à la baisse (comportement par défaut de YouTube)."
+  },
+  "reformatLikes": {
+    "message": "Formater le nombre de likes"
+  },
+  "reformatLikesHover": {
+    "message": "Rend la valeur des statistiques plus cohérente."
+  },
+  "numberFormat": {
+    "message": "Format numérique:"
+  },
+  "colorizeRatio": {
+    "message": "Coloriser la barre de ratio"
+  },
+  "colorizeRatioHover": {
+    "message": "Utilisez des couleurs personnalisées pour la barre de ratio."
+  },
+  "colorizeThumbs": {
+    "message": "Mettre en couleur les boutons like et dislike"
+  },
+  "colorizeThumbsHover": {
+    "message": "Utiliser des couleurs personnalisées pour les boutons like et dislike."
+  },
+  "colorTheme": {
+    "message": "Schéma de couleur:"
   }
 }
diff --git a/Extensions/combined/_locales/gr/messages.json b/Extensions/combined/_locales/gr/messages.json
index dc548e6..269504c 100644
--- a/Extensions/combined/_locales/gr/messages.json
+++ b/Extensions/combined/_locales/gr/messages.json
@@ -49,5 +49,38 @@
   },
   "customNumberFormats": {
     "message": "Προσαρμοζόμενη μορφή αριθμών."
+  },
+  "considerDonating": {
+    "message": "Το μόνο πράγμα που διατηρεί την επέκταση σε λειτουργία είναι οι δωρεές σας, σκεφτείτε να υποστηρίξετε το έργο."
+  },
+  "roundNumbers": {
+    "message": "Εμφάνιση στρογγυλεμένων αριθμών"
+  },
+  "roundNumbersHover": {
+    "message": "Στρογγυλοποιήστε την τιμή μέτρησης (αυτή είναι η προεπιλεγμένη επιλογή του YouTube)."
+  },
+  "reformatLikes": {
+    "message": "Μορφοποίηση του αριθμού των likes"
+  },
+  "reformatLikesHover": {
+    "message": "Κάνει την αξία των στατιστικών πιο συνεπή."
+  },
+  "numberFormat": {
+    "message": "Αριθμητική μορφή"
+  },
+  "colorizeRatio": {
+    "message": "Χρωματίστε τη γραμμή dislikes"
+  },
+  "colorizeRatioHover": {
+    "message": "Χρωματίστε τη γραμμή dislikes με προσαρμοσμένα χρώματα."
+  },
+  "colorizeThumbs": {
+    "message": "Χρωματίστε τα κουμπιά"
+  },
+  "colorizeThumbsHover": {
+    "message": "Χρωματίστε τα κουμπιά likes και dislikes με προσαρμοσμένα χρώματα."
+  },
+  "colorTheme": {
+    "message": "Χρωματικός συνδυασμός:"
   }
 }
diff --git a/Extensions/combined/_locales/it/messages.json b/Extensions/combined/_locales/it/messages.json
index dbcca07..adf6dcb 100644
--- a/Extensions/combined/_locales/it/messages.json
+++ b/Extensions/combined/_locales/it/messages.json
@@ -9,7 +9,7 @@
     "message": "Ripristina la possibilità di vedere i dislikes"
   },
   "textDeveloper": {
-    "message": "di Dmitry Selivanov e la Community"
+    "message": "grazie a Dmitry Selivanov e alla Comunità"
   },
   "linkWebsite": {
     "message": "Sito web"
@@ -27,10 +27,10 @@
     "message": "Impostazioni"
   },
   "textSettings": {
-    "message": "Disabilita l'invio di like/dislike"
+    "message": "Disabilita l'invio dei like e dei dislike"
   },
   "textSettingsHover": {
-    "message": "Interrompe il conteggio dei tuoi likes e dislikes."
+    "message": "Interrompe il conteggio dei tuoi likes e dislikes da parte dell'estensione."
   },
   "textUpdate": {
     "message": "aggiorna a"
@@ -39,7 +39,7 @@
     "message": "Versione 3.0.0.1 installata"
   },
   "whatsnew": {
-    "message": "Cosa c'è di nuovo"
+    "message": "Quali sono le novità"
   },
   "shortsSupport": {
     "message": "Supporto per YouTube Shorts"
@@ -49,5 +49,38 @@
   },
   "customNumberFormats": {
     "message": "Formati numerici personalizzati"
+  },
+  "considerDonating": {
+    "message": "Le uniche cosa che tengono in piedi il progetto sono le vostre donazioni. Per favore, considera di effettuare una donazione per supportarci. Grazie."
+  },
+  "roundNumbers": {
+    "message": "Mostra i numeri arrotondati"
+  },
+  "roundNumbersHover": {
+    "message": "Arrotonda il valore del conteggio (questa è l'opzione predefinita di YouTube)."
+  },
+  "reformatLikes": {
+    "message": "Formatta il numero di like"
+  },
+  "reformatLikesHover": {
+    "message": "Rende il valore delle statistiche più consistente."
+  },
+  "numberFormat": {
+    "message": "Formato numerico"
+  },
+  "colorizeRatio": {
+    "message": "Colora la barra dei dislike"
+  },
+  "colorizeRatioHover": {
+    "message": "Colora la barra dei dislike con colori personalizzati."
+  },
+  "colorizeThumbs": {
+    "message": "Colora i pulsanti"
+  },
+  "colorizeThumbsHover": {
+    "message": "Colora i pulsanti dei like e dei dislike con colori personalizzati."
+  },
+  "colorTheme": {
+    "message": "Schema colori:"
   }
 }
diff --git a/Extensions/combined/_locales/ja/messages.json b/Extensions/combined/_locales/ja/messages.json
index baf7d7f..6a587cc 100644
--- a/Extensions/combined/_locales/ja/messages.json
+++ b/Extensions/combined/_locales/ja/messages.json
@@ -57,6 +57,36 @@
     "message": "評価数の表示形式のカスタマイズ"
   },
   "considerDonating": {
-    "message": "この拡張機能を存続させることができるのは、皆様からの寄付だけです。"
+    "message": "この拡張機能を存続させることができるのは,皆様からの寄付だけです。"
+  },
+  "roundNumbers": {
+    "message": "四捨五入された数値を表示"
+  },
+  "roundNumbersHover": {
+    "message": "カウント値を四捨五入します（これはYouTubeのデフォルトオプションです）。"
+  },
+  "reformatLikes": {
+    "message": "いいねの数をフォーマットする"
+  },
+  "reformatLikesHover": {
+    "message": "統計値の一貫性を高めます。"
+  },
+  "numberFormat": {
+    "message": "数値形式"
+  },
+  "colorizeRatio": {
+    "message": "嫌いなバーに色を付ける"
+  },
+  "colorizeRatioHover": {
+    "message": "嫌いなバーをカスタムカラーで色付けします。"
+  },
+  "colorizeThumbs": {
+    "message": "ボタンに色を付ける"
+  },
+  "colorizeThumbsHover": {
+    "message": "カスタムカラーのボタンの色が好きで嫌いです。"
+  },
+  "colorTheme": {
+    "message": "配色："
   }
 }
diff --git a/Extensions/combined/_locales/pt_BR/messages.json b/Extensions/combined/_locales/pt_BR/messages.json
index 26f40f3..fac12a2 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."
   }
 }
diff --git a/Extensions/combined/_locales/ru/messages.json b/Extensions/combined/_locales/ru/messages.json
index 6af9141..c275bf9 100644
--- a/Extensions/combined/_locales/ru/messages.json
+++ b/Extensions/combined/_locales/ru/messages.json
@@ -52,5 +52,35 @@
   },
   "considerDonating": {
     "message": "Единственный источник доходов позволяющий расширению продолжать работу - ваши пожертвования. Пожалуйста, поддержите нас и помогите нам развиваться."
+  },
+  "roundNumbers": {
+    "message": "Показывать округленные числа"
+  },
+  "roundNumbersHover": {
+    "message": "Округлить значение счетчика (это параметр YouTube по умолчанию)."
+  },
+  "reformatLikes": {
+    "message": "Форматировать количество лайков"
+  },
+  "reformatLikesHover": {
+    "message": "Делает значение статистики более последовательным."
+  },
+  "numberFormat": {
+    "message": "Числовой формат"
+  },
+  "colorizeRatio": {
+    "message": "Раскрасьте полосу неприязни"
+  },
+  "colorizeRatioHover": {
+    "message": "Раскрасьте полосу неприязни собственными цветами."
+  },
+  "colorizeThumbs": {
+    "message": "Раскрасьте кнопки"
+  },
+  "colorizeThumbsHover": {
+    "message": "Раскрасьте кнопки нравится и не нравится с помощью пользовательских цветов."
+  },
+  "colorTheme": {
+    "message": "Цветовая схема:"
   }
 }
diff --git a/Extensions/combined/content-style.css b/Extensions/combined/content-style.css
index e2e5fa2..d8da7db 100644
--- a/Extensions/combined/content-style.css
+++ b/Extensions/combined/content-style.css
@@ -41,6 +41,6 @@
   height: 2px;
   position: absolute;
   padding-top: 6px;
-  padding-bottom: 28px;
+  padding-bottom: 12px;
   top: -6px;
 }
diff --git a/Extensions/combined/manifest-chrome.json b/Extensions/combined/manifest-chrome.json
index 82ea6ea..d881a75 100644
--- a/Extensions/combined/manifest-chrome.json
+++ b/Extensions/combined/manifest-chrome.json
@@ -12,9 +12,7 @@
     "128": "icons/icon128.png"
   },
   "host_permissions": ["*://*.youtube.com/*"],
-  "permissions": [
-    "storage"
-  ],
+  "permissions": ["storage"],
   "action": {
     "default_popup": "popup.html"
   },
diff --git a/Extensions/combined/popup.css b/Extensions/combined/popup.css
index dfe94cb..a5cdb7b 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 7d39246..aa2e508 100644
--- a/Extensions/combined/popup.html
+++ b/Extensions/combined/popup.html
@@ -1,172 +1,223 @@
 <!DOCTYPE html>
 <html>
-<head>
-  <meta content="text/html; charset=utf-8"/>
-  <title title="__MSG_extensionName__">__MSG_extensionName__</title>
-  <link rel="stylesheet" href="popup.css"/>
-  <link rel="preconnect" href="https://fonts.googleapis.com"/>
-  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
-  <link
-    href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
-    rel="stylesheet"
-  />
-</head>
-<body>
-  <center>
-    <svg width="48" viewBox="0 0 24 24">
-      <path
-        d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"
-        fill="red"
-      />
-      <path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff"/>
-    </svg>
-    <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__">
-      __MSG_extensionName__
-    </h1>
-    <p style="color: var(--lightGrey)" title="__MSG_textDeveloper__">
-      __MSG_textDeveloper__
-    </p>
-  
-    <button id="link_website" title="__MSG_linkWebsite__">
-      __MSG_linkWebsite__
-    </button>
-    <button style="margin-top: 0.3em; background: #ff0000" id="link_donate" title="__MSG_linkDonate__">
-      __MSG_linkDonate__
-    </button>
-    <button id="link_discord">Discord</button>
-    <br/>
-    <button style="margin-top: 0.3rem" id="link_faq" title="__MSG_linkFAQ__">
-      __MSG_linkFAQ__
-    </button>
-    <button id="link_github">GitHub</button>
-    <button style="margin-top: 0.3em" id="link_help" title="__MSG_linkHelp__">
-      __MSG_linkHelp__
-    </button>
-    <br>
-    <button style="margin-top: 0.3em" id="link_changelog" title="__MSG_linkChangelog__">
-      Change Log
-    </button>
-  
-    <br/>
-    <br/>
-    <p style="display: none">API Status: <b id="status"></b></p>
-    <img
-      id="server-status"
-      style="display: none; width: 0.75rem; height: 0.75rem"
-      src="./icons/server.svg"
-      alt=""
+  <head>
+    <meta content="text/html; charset=utf-8" />
+    <title title="__MSG_extensionName__">__MSG_extensionName__</title>
+    <link rel="stylesheet" href="popup.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap"
+      rel="stylesheet"
     />
-  
-    <br/>
-    <br/>
-  </center>
+  </head>
+  <body>
+    <center>
+      <svg width="48" viewBox="0 0 24 24">
+        <path
+          d="M14.9 3H6c-.9 0-1.6.5-1.9 1.2l-3 7c-.1.3-.1.5-.1.7v2c0 1.1.9 2 2 2h6.3l-.9 4.5c-.1.5 0 1 .4 1.4l1.1 1.1 6.5-6.6c.4-.4.6-.9.6-1.4V5c-.1-1.1-1-2-2.1-2zm7.4 12.8h-2.9c-.4 0-.7-.3-.7-.7V3.9c0-.4.3-.7.7-.7h2.9c.4 0 .7.3.7.7V15c0 .4-.3.8-.7.8z"
+          fill="red"
+        />
+        <path d="m8 12.5 5.1-2.9L8 6.7v5.8z" fill="#fff" />
+      </svg>
+      <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__">
+        __MSG_extensionName__
+      </h1>
+      <p style="color: var(--lightGrey)" title="__MSG_textDeveloper__">
+        __MSG_textDeveloper__
+      </p>
 
-<!-- top-right -->
-<button id="advancedToggle">
-  <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>
-</button>
+      <button id="link_website" title="__MSG_linkWebsite__">
+        __MSG_linkWebsite__
+      </button>
+      <button
+        style="margin-top: 0.3em; background: #ff0000"
+        id="link_donate"
+        title="__MSG_linkDonate__"
+      >
+        __MSG_linkDonate__
+      </button>
+      <button id="link_discord">Discord</button>
+      <br />
+      <button style="margin-top: 0.3rem" id="link_faq" title="__MSG_linkFAQ__">
+        __MSG_linkFAQ__
+      </button>
+      <button id="link_github">GitHub</button>
+      <button style="margin-top: 0.3em" id="link_help" title="__MSG_linkHelp__">
+        __MSG_linkHelp__
+      </button>
+      <br />
+      <button
+        style="margin-top: 0.3em"
+        id="link_changelog"
+        title="__MSG_linkChangelog__"
+      >
+        __MSG_linkChangelog__
+      </button>
+
+      <br />
+      <br />
+      <p style="display: none">API Status: <b id="status"></b></p>
+      <img
+        id="server-status"
+        style="display: none; width: 0.75rem; height: 0.75rem"
+        src="./icons/server.svg"
+        alt=""
+      />
+
+      <br />
+      <br />
+    </center>
+
+    <!-- top-right -->
+    <button id="advancedToggle">
+      <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>
+    </button>
 
-<!-- bottom-right -->
-<div id="ext">
-  <a
-    href="https://returnyoutubedislike.com/install"
-    target="_blank"
-    id="ext-update"
-  ></a>
-  <span id="ext-version"></span>
-</div>
+    <!-- bottom-right -->
+    <div id="ext">
+      <a
+        href="https://returnyoutubedislike.com/install"
+        target="_blank"
+        id="ext-update"
+      ></a>
+      <span id="ext-version"></span>
+    </div>
 
-<!-- dialog box -->
-<fieldset id="advancedSettings">
-  <legend id="advancedLegend" title="__MSG_legendSettings__">
-    __MSG_legendSettings__
-  </legend>
+    <!-- dialog box -->
+    <fieldset id="advancedSettings">
+      <legend id="advancedLegend" title="__MSG_legendSettings__">
+        __MSG_legendSettings__
+      </legend>
 
-  <label class="switch" data-hover="__MSG_textSettingsHover__">
-    <input type="checkbox" id="disable_vote_submission"/>
-    <span class="slider"/>
-    <span class="switchLabel" title="__MSG_textSettings__"
-    >__MSG_textSettings__</span
-    >
-  </label>
-  <br/>
-  <label class="switch" data-hover="Round down numbers (default YouTube behavior)">
-    <input type="checkbox" id="number_round_down"/>
-    <span class="slider"/>
-    <span class="switchLabel">Show rounded down numbers</span>
-  </label>
-  <br/>
-  <label class="switch" data-hover="Make likes and dislikes format consistent">
-    <input type="checkbox" id="number_reformat_likes"/>
-    <span class="slider"/>
-    <span class="switchLabel">Re-format like numbers</span>
-  </label>
-  <br/>
-  <div class="custom-select">
-    <label for="number_format">Number format:</label>
-    <select name="number_format" id="number_format">
-      <option value="compactShort" id="number_format_compactShort"></option>
-      <option value="compactLong" id="number_format_compactLong"></option>
-      <option value="standard" id="number_format_standard"></option>
-    </select>
-  </div>
-  <br/>
-  <div class="custom-select">
-    <label class="switch" data-hover="Use custom colors for ratio bar.">
-      <input type="checkbox" id="colored_bar"/>
-      <span class="slider"/>
-      <span class="switchLabel">Colorize ratio bar</span>
-    </label>
-  </div>
-  <label class="switch" data-hover="Use custom colors for thumb icons.">
-    <input type="checkbox" id="colored_thumbs"/>
-    <span class="slider"/>
-    <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="
+      <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__">
+          __MSG_textSettings__
+        </span>
+      </label>
+      <br />
+      <label class="switch" data-hover="__MSG_roundNumbersHover__">
+        <input type="checkbox" id="number_round_down" />
+        <span class="slider" />
+        <span class="switchLabel">__MSG_roundNumbers__</span>
+      </label>
+      <br />
+      <label class="switch" data-hover="__MSG_reformatLikesHover__">
+        <input type="checkbox" id="number_reformat_likes" />
+        <span class="slider" />
+        <span class="switchLabel">__MSG_reformatLikes__</span>
+      </label>
+      <br />
+      <div class="custom-select">
+        <label for="number_format">__MSG_numberFormat__</label>
+        <select name="number_format" id="number_format">
+          <option value="compactShort" id="number_format_compactShort"></option>
+          <option value="compactLong" id="number_format_compactLong"></option>
+          <option value="standard" id="number_format_standard"></option>
+        </select>
+      </div>
+      <br />
+      <div class="custom-select">
+        <label class="switch" data-hover="__MSG_colorizeRatioHover__">
+          <input type="checkbox" id="colored_bar" />
+          <span class="slider" />
+          <span class="switchLabel">__MSG_colorizeRatio__</span>
+        </label>
+      </div>
+      <label class="switch" data-hover="__MSG_colorizeThumbsHover__">
+        <input type="checkbox" id="colored_thumbs" />
+        <span class="slider" />
+        <span class="switchLabel">__MSG_colorizeThumbs__</span>
+      </label>
+      <br />
+      <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">
+            "__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"
+          style="
             display: inline-block;
             vertical-align: text-top;
             width: 1em;
             height: 1em;
           "
-    >&nbsp;</span
-    >
-    <span
-      id="color_theme_example_dislike"
-      style="
+          >&nbsp;</span
+        >
+        <span
+          id="color_theme_example_dislike"
+          style="
             display: inline-block;
             vertical-align: text-top;
             width: 1em;
             height: 1em;
           "
-    >&nbsp;</span
-    >
-  </div>
-</fieldset>
-</body>
-<script src="popup.js"></script>
+          >&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>
 </html>
diff --git a/Extensions/combined/popup.js b/Extensions/combined/popup.js
index 2fb0db7..cf72829 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:
@@ -20,7 +24,7 @@ const config = {
     donate: "https://returnyoutubedislike.com/donate",
     faq: "https://returnyoutubedislike.com/faq",
     help: "https://returnyoutubedislike.com/help",
-    changelog: "/changelog/3/changelog_3.0.html"
+    changelog: "/changelog/3/changelog_3.0.html",
   },
 };
 
@@ -86,9 +90,23 @@ document.getElementById("number_format").addEventListener("change", (ev) => {
   chrome.storage.sync.set({ numberDisplayFormat: ev.target.value });
 });
 
-document.getElementById("number_reformat_likes").addEventListener("click", (ev) => {
-  chrome.storage.sync.set({ numberDisplayReformatLikes: ev.target.checked });
-});
+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 });
+  });
 
 /*   Advanced Toggle   */
 const advancedToggle = document.getElementById("advancedToggle");
@@ -99,14 +117,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 +136,8 @@ function initConfig() {
   initializeColorTheme();
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
+  initializeTooltipPercentage();
+  initializeTooltipPercentageMode();
   initializeNumberDisplayReformatLikes();
 }
 
@@ -133,7 +152,7 @@ function initializeVersionNumber() {
     .then((json) => {
       if (compareVersions(json.version, version)) {
         document.getElementById("ext-update").innerHTML =
-        chrome.i18n.getMessage("textUpdate") + " v" + json.version;
+          chrome.i18n.getMessage("textUpdate") + " v" + json.version;
         document.getElementById("ext-update").style.padding = ".25rem .5rem";
       }
     });
@@ -190,6 +209,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,8 +274,15 @@ 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);
+    handleNumberDisplayReformatLikesChangeEvent(
+      changes.numberDisplayReformatLikes.newValue
+    );
   }
 }
 
@@ -293,6 +331,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..c416da9 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,16 @@ 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 +304,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 +356,8 @@ function initExtConfig() {
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
   initializeNumberDisplayReformatLikes();
+  initializeTooltipPercentage();
+  initializeTooltipPercentageMode();
 }
 
 function initializeDisableVoteSubmission() {
@@ -396,6 +421,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..55f21ed 100644
--- a/Extensions/combined/src/bar.js
+++ b/Extensions/combined/src/bar.js
@@ -1,5 +1,11 @@
 import { getButtons } from "./buttons";
-import { extConfig, isMobile, isLikesDisabled } from "./state";
+import {
+  extConfig,
+  isMobile,
+  isLikesDisabled,
+  isNewDesign,
+  isShorts,
+} from "./state";
 import { cLog, getColorFromTheme } from "./utils";
 
 function createRateBar(likes, dislikes) {
@@ -14,55 +20,94 @@ 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(
+            isNewDesign() ? "actions-inner" : "menu-container"
+          ) || document.querySelector("ytm-slim-video-action-bar-renderer")
+        ).insertAdjacentHTML(
+          "beforeend",
+          `
+              <div class="ryd-tooltip" style="width: ${widthPx}px${
+            isNewDesign() ? "; margin-bottom: -2px" : ""
+          }">
+              <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>
+      `
+        );
+
+        // Add border between info and comments
+        if (isNewDesign()) {
+          let descriptionAndActionsElement = document.getElementById("top-row");
+          descriptionAndActionsElement.style.borderBottom =
+            "1px solid var(--yt-spec-10-percent-layer)";
+          descriptionAndActionsElement.style.paddingBottom = "10px";
+        }
+      } 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 {
     cLog("removing bar");
     let ratebar = document.getElementById("ryd-bar-container");
-    if(ratebar) {
+    if (ratebar) {
       ratebar.parentNode.removeChild(ratebar);
     }
   }
diff --git a/Extensions/combined/src/events.js b/Extensions/combined/src/events.js
index 99c7d14..9b0e78a 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));
+        }
+      }
     }
   }
 }
@@ -105,7 +118,9 @@ function storageChangeHandler(changes, area) {
     handleNumberDisplayFormatChangeEvent(changes.numberDisplayFormat.newValue);
   }
   if (changes.numberDisplayReformatLikes !== undefined) {
-    handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue);
+    handleNumberDisplayReformatLikesChangeEvent(
+      changes.numberDisplayReformatLikes.newValue
+    );
   }
 }
 
diff --git a/Extensions/combined/src/starRating.js b/Extensions/combined/src/starRating.js
index 5d98814..65cf18b 100644
--- a/Extensions/combined/src/starRating.js
+++ b/Extensions/combined/src/starRating.js
@@ -1,101 +1,104 @@
-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 };

+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 7160903..ec2125a 100644
--- a/Extensions/combined/src/state.js
+++ b/Extensions/combined/src/state.js
@@ -23,6 +23,8 @@ let extConfig = {
   colorTheme: "classic",
   numberDisplayFormat: "compactShort",
   numberDisplayRoundDown: true,
+  showTooltipPercentage: false,
+  tooltipPercentageMode: "dash_like",
   numberDisplayReformatLikes: false,
 };
 
@@ -40,6 +42,10 @@ function isShorts() {
   return location.pathname.startsWith("/shorts");
 }
 
+function isNewDesign() {
+  return document.getElementById("comment-teaser") !== null;
+}
+
 let mutationObserver = new Object();
 
 if (isShorts() && mutationObserver.exists !== true) {
@@ -151,10 +157,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;
@@ -200,7 +206,8 @@ function processResponse(response, storedData) {
       getDislikeButton().style.color = getColorFromTheme(false);
     }
   }
-  createStarRating(response.rating, isMobile());
+  //Temporary disabling this - it breaks all places where getButtons()[1] is used
+  // createStarRating(response.rating, isMobile());
 }
 
 // Tells the user if the API is down
@@ -254,6 +261,8 @@ function initExtConfig() {
   initializeColorTheme();
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
+  initializeTooltipPercentage();
+  initializeTooltipPercentageMode();
   initializeNumberDisplayReformatLikes();
 }
 
@@ -317,6 +326,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) {
@@ -332,6 +361,7 @@ export {
   isShorts,
   isVideoDisliked,
   isVideoLiked,
+  isNewDesign,
   getState,
   setState,
   setInitialState,
diff --git a/Extensions/combined/src/utils.js b/Extensions/combined/src/utils.js
index a3fe790..05dafbf 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,29 @@ 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";
@@ -60,16 +58,17 @@ function getNumberFormatter(optionSelect) {
       formatterCompactDisplay = "short";
   }
 
-  const formatter = Intl.NumberFormat(
-    document.documentElement.lang || userLocales || navigator.language,
-    {
-      notation: formatterNotation,
-      compactDisplay: formatterCompactDisplay,
-    }
-  );
+  const formatter = Intl.NumberFormat(userLocales, {
+    notation: formatterNotation,
+    compactDisplay: formatterCompactDisplay,
+  });
   return formatter;
 }
 
+function localize(localeString) {
+  return chrome.i18n.getMessage(localeString);
+}
+
 function getBrowser() {
   if (typeof chrome !== "undefined" && typeof chrome.runtime !== "undefined") {
     return chrome;