Bug 1768470 - If user has colorway theme enabled, the enabled colorway should be highlighted. r=dao

Differential Revision: https://phabricator.services.mozilla.com/D145999

browser/components/colorways/ColorwayClosetSelector.js

@@ -14,17 +14,37 @@ class ColorwaySelector extends HTMLFieldSetElement {
       BuiltInThemes: "resource:///modules/BuiltInThemes.jsm",
     });
     this.colorways;
+    this.selectedTheme;
   }
 
   getColorways = async () => {
+    this.AddonManager.addAddonListener(this);
+
     this.BuiltInThemes.ensureBuiltInThemes();
     let themes = await this.AddonManager.getAddonsByTypes(["theme"]);
     this.colorways = themes.filter(theme =>
       this.BuiltInThemes.isMonochromaticTheme(theme.id)
     );
+    this.selectedTheme = themes.find(theme => theme.isActive);
     return this.colorways;
   };
 
+  onEnabled(addon) {
+    if (addon.type == "theme") {
+      this.selectedTheme = addon;
+      this.refresh();
+    }
+  }
+
+  refresh() {
+    for (let input of this.children) {
+      if (input.value == this.selectedTheme.id) {
+        input.classList.add("active");
+      } else {
+        input.classList.remove("active");
+      }
+    }
+  }
   render() {
     for (const theme of this.colorways) {
       let input = document.createElement("input");
@@ -33,6 +53,9 @@ class ColorwaySelector extends HTMLFieldSetElement {
       input.value = theme.id;
       input.style.setProperty("--colorway-icon", `url(${theme.iconURL})`);
       this.appendChild(input);
+      if (theme.isActive) {
+        input.classList.add("active");
+      }
     }
   }
 

browser/components/colorways/colorwaycloset.css

@@ -69,9 +69,15 @@ input[type="radio"]::before {
   background-size: 24px;
   border-radius: 50%;
   content: "";
+  fill: #15141A;
   height: 24px;
-  width: 24px;
   margin: 4px 8px;
+  width: 24px;
+}
+
+input[type="radio"].active::before {
+  background-image: url(chrome://global/skin/icons/check.svg), var(--colorway-icon);
+  background-size: 14px, 24px;
 }
 
 input[type="radio"]:enabled:checked,