Add ability to toggle star rating

Extensions/combined/popup.css

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

Extensions/combined/popup.html

@@ -166,6 +166,12 @@ <h1 style="margin-bottom: 0.75rem" title="__MSG_extensionName__">
     >&nbsp;</span
     >
   </div>
+  <br />
+  <label class="switch" data-hover="Show like/dislike ratio with stars">
+    <input type="checkbox" id="star_rating" />
+    <span class="slider" />
+    <span class="switchLabel">Star rating</span>
+  </label>
 </fieldset>
 </body>
 <script src="popup.js"></script>

Extensions/combined/popup.js

@@ -8,6 +8,7 @@ const config = {
   numberDisplayFormat: "compactShort",
   numberDisplayRoundDown: true,
   numberDisplayReformatLikes: false, 
+  starRating: true,
   showAdvancedMessage:
     '<svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24px" viewBox="0 0 24 24" width="24px" fill="currentColor"><rect fill="none" height="24" width="24"/><path d="M19.5,12c0-0.23-0.01-0.45-0.03-0.68l1.86-1.41c0.4-0.3,0.51-0.86,0.26-1.3l-1.87-3.23c-0.25-0.44-0.79-0.62-1.25-0.42 l-2.15,0.91c-0.37-0.26-0.76-0.49-1.17-0.68l-0.29-2.31C14.8,2.38,14.37,2,13.87,2h-3.73C9.63,2,9.2,2.38,9.14,2.88L8.85,5.19 c-0.41,0.19-0.8,0.42-1.17,0.68L5.53,4.96c-0.46-0.2-1-0.02-1.25,0.42L2.41,8.62c-0.25,0.44-0.14,0.99,0.26,1.3l1.86,1.41 C4.51,11.55,4.5,11.77,4.5,12s0.01,0.45,0.03,0.68l-1.86,1.41c-0.4,0.3-0.51,0.86-0.26,1.3l1.87,3.23c0.25,0.44,0.79,0.62,1.25,0.42 l2.15-0.91c0.37,0.26,0.76,0.49,1.17,0.68l0.29,2.31C9.2,21.62,9.63,22,10.13,22h3.73c0.5,0,0.93-0.38,0.99-0.88l0.29-2.31 c0.41-0.19,0.8-0.42,1.17-0.68l2.15,0.91c0.46,0.2,1,0.02,1.25-0.42l1.87-3.23c0.25-0.44,0.14-0.99-0.26-1.3l-1.86-1.41 C19.49,12.45,19.5,12.23,19.5,12z M12.04,15.5c-1.93,0-3.5-1.57-3.5-3.5s1.57-3.5,3.5-3.5s3.5,1.57,3.5,3.5S13.97,15.5,12.04,15.5z"/></svg>',
   hideAdvancedMessage:
@@ -90,6 +91,10 @@ document.getElementById("number_reformat_likes").addEventListener("click", (ev)
   chrome.storage.sync.set({ numberDisplayReformatLikes: ev.target.checked });
 });
 
+document.getElementById("star_rating").addEventListener("click", (ev) => {
+  chrome.storage.sync.set({ starRating: ev.target.checked });
+});
+
 /*   Advanced Toggle   */
 const advancedToggle = document.getElementById("advancedToggle");
 advancedToggle.addEventListener("click", () => {
@@ -120,6 +125,7 @@ function initConfig() {
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
   initializeNumberDisplayReformatLikes();
+  initializeStarRating();
 }
 
 function initializeVersionNumber() {
@@ -197,6 +203,12 @@ function initializeNumberDisplayFormat() {
   updateNumberDisplayFormatContent();
 }
 
+function initializeStarRating() {
+  chrome.storage.sync.get(["starRating"], (res) => {
+    handleStarRatingChangeEvent(res.starRating);
+  });
+}
+
 function updateNumberDisplayFormatContent(roundDown) {
   let testValue;
   if (roundDown) {
@@ -246,6 +258,9 @@ function storageChangeHandler(changes, area) {
   if (changes.numberDisplayReformatLikes !== undefined) {
     handleNumberDisplayReformatLikesChangeEvent(changes.numberDisplayReformatLikes.newValue);
   }
+  if (changes.starRating !== undefined) {
+    handleStarRatingChangeEvent(changes.starRating.newValue);
+  }
 }
 
 function handleDisableVoteSubmissionChangeEvent(value) {
@@ -298,6 +313,11 @@ function handleNumberDisplayReformatLikesChangeEvent(value) {
   document.getElementById("number_reformat_likes").checked = value;
 }
 
+function handleStarRatingChangeEvent(value) {
+  config.starRating = value;
+  document.getElementById("star_rating").checked = value;
+}
+
 function getNumberFormatter(optionSelect) {
   let formatterNotation;
   let formatterCompactDisplay;

Extensions/combined/src/state.js

@@ -24,6 +24,7 @@ let extConfig = {
   numberDisplayFormat: "compactShort",
   numberDisplayRoundDown: true,
   numberDisplayReformatLikes: false,
+  starRating: true,
 };
 
 let storedData = {
@@ -200,7 +201,9 @@ function processResponse(response, storedData) {
       getDislikeButton().style.color = getColorFromTheme(false);
     }
   }
-  createStarRating(response.rating, isMobile());
+  if (extConfig.starRating) {
+    createStarRating(response.rating, isMobile());
+  }
 }
 
 // Tells the user if the API is down
@@ -255,6 +258,7 @@ function initExtConfig() {
   initializeNumberDisplayFormat();
   initializeNumberDisplayRoundDown();
   initializeNumberDisplayReformatLikes();
+  initializeStarRating();
 }
 
 function initializeDisableVoteSubmission() {
@@ -327,6 +331,16 @@ function initializeNumberDisplayReformatLikes() {
   });
 }
 
+function initializeStarRating() {
+  getBrowser().storage.sync.get(["starRating"], (res) => {
+    if (res.starRating === undefined) {
+      getBrowser().storage.sync.set({ starRating: true });
+    } else {
+      extConfig.starRating = res.starRating;
+    }
+  });
+}
+
 export {
   isMobile,
   isShorts,