From 66354186618bf88886ed107a7d5154642d64b3ef Mon Sep 17 00:00:00 2001
From: Kendall Werts <kmwerts@gmail.com>
Date: Tue, 8 Oct 2019 23:16:53 -0500
Subject: [PATCH] added checkbox for colors

---
 src/css/popup.css | 13 ++++++++++
 src/js/popup.js   | 62 ++++++++++++++++++++++++++++++++++++++++++-----
 src/manifest.json |  3 ++-
 src/popup.html    |  4 +++
 4 files changed, 75 insertions(+), 7 deletions(-)

diff --git a/src/css/popup.css b/src/css/popup.css
index 7171d86..d9d037f 100644
--- a/src/css/popup.css
+++ b/src/css/popup.css
@@ -876,6 +876,19 @@ span ~ .panel-header-text {
   flex: 0 0 calc(100% / var(--icon-fit));
 }
 
+#CUD-checkbox-label {
+  align-items: center;
+  block-size: 29px;
+  display: flex;
+  flex: 0 0 calc(100% / var(--icon-fit));
+  margin-block-end: 10px;
+  margin-block-start: -10px;
+}
+
+#CUD-colors-enabled {
+  margin-inline-end: 4px;
+}
+
 .radio-choice > .radio-container > label {
   background: none;
   block-size: 23px;
diff --git a/src/js/popup.js b/src/js/popup.js
index f83cce8..bf4c8a3 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -918,7 +918,9 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
 
   // This method is called when the object is registered.
   initialize() {
-    this.initializeRadioButtons();
+    this.initializeColorRadioButtons();
+    this.initializeIconRadioButtons();
+    this.initializeCUDcheck();
 
     Logic.addEnterHandler(document.querySelector("#edit-container-panel-back-arrow"), () => {
       const formValues = new FormData(this._editForm);
@@ -945,7 +947,11 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
       this._submitForm();
     });
 
-
+    const cudCheckbox = document.getElementById("CUD-colors-enabled");
+    //colorInitializer = this.initializeColorRadioButtons;
+    cudCheckbox.addEventListener("change", () => {
+      this.onCUDcheckbox();
+    });
   },
 
   async _submitForm() {
@@ -1013,28 +1019,46 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     }
   },
 
-  async findColorset() {
+  async CUDenabledExists() {
+    let CUDenabledExists;
+    // try/catch for older Firefox versions that do not have the CUDcolorEnabled setting.
+    try {
+      await browser.privacy.services.CUDcolorsEnabled.get({});
+      CUDenabledExists = true;
+    } catch(error) {
+      CUDenabledExists = false;
+    }
+    return CUDenabledExists;
+  },
+
+  async CUDenabled() {
     let CUDenabled;
     try {
-      CUDenabled = await browser.contextualIdentities.CUDcolors();
+      const getting = await browser.privacy.services.CUDcolorsEnabled.get({});
+      CUDenabled = getting.value;
     } catch(error) {
       CUDenabled = false;
     }
     return CUDenabled;
   },
 
-  async initializeRadioButtons() {
+  async initializeColorRadioButtons() {
     const colorRadioTemplate = (containerColor) => {
       return escaped`<input type="radio" value="${containerColor}" name="container-color" id="edit-container-panel-choose-color-${containerColor}" />
      <label for="edit-container-panel-choose-color-${containerColor}" class="usercontext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="${containerColor}">`;
     };
     let colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple" ];
-    const CUDenabled = await this.findColorset();
+    const CUDenabled = await this.CUDenabled();
     if (CUDenabled) {
       //"Color Universal Design" color set from: https://jfly.uni-koeln.de/color/#pallet
       colors = ["black", "CUDorange", "skyblue", "bluegreen", "CUDyellow", "CUDblue", "vermillion", "redpurple" ];
     }
     const colorRadioFieldset = document.getElementById("edit-container-panel-choose-color");
+    colorRadioFieldset.innerHTML = "";
+    const legend = document.createElement("legend");
+    legend.innerHTML = escaped`Choose a color`;
+    colorRadioFieldset.appendChild(legend);
+
     colors.forEach((containerColor) => {
       const templateInstance = document.createElement("div");
       templateInstance.classList.add("radio-container");
@@ -1042,7 +1066,9 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
       templateInstance.innerHTML = colorRadioTemplate(containerColor);
       colorRadioFieldset.appendChild(templateInstance);
     });
+  },
 
+  initializeIconRadioButtons() {
     const iconRadioTemplate = (containerIcon) => {
       return escaped`<input type="radio" value="${containerIcon}" name="container-icon" id="edit-container-panel-choose-icon-${containerIcon}" />
      <label for="edit-container-panel-choose-icon-${containerIcon}" class="usercontext-icon choose-color-icon" data-identity-color="grey" data-identity-icon="${containerIcon}">`;
@@ -1058,6 +1084,30 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     });
   },
 
+  async initializeCUDcheck() {   
+    const cudCheckbox = document.getElementById("CUD-colors-enabled");
+    if (await this.CUDenabledExists()) {
+      if (await this.CUDenabled()) {
+        cudCheckbox.checked = true;
+      } else {
+        cudCheckbox.checked = false;
+      }
+    } else {
+      const label = document.getElementById("CUD-checkbox-label");
+      label.remove();
+    }
+  },
+
+  onCUDcheckbox () {
+    const checkbox = document.getElementById("CUD-colors-enabled");
+    if(checkbox.checked) {
+      browser.privacy.services.CUDcolorsEnabled.set({value: true});
+    } else {
+      browser.privacy.services.CUDcolorsEnabled.set({value: false});
+    }
+    this.initializeColorRadioButtons();
+  },
+
   // This method is called when the panel is shown.
   async prepare() {
     const identity = Logic.currentIdentity();
diff --git a/src/manifest.json b/src/manifest.json
index 136cd82..0896722 100644
--- a/src/manifest.json
+++ b/src/manifest.json
@@ -30,7 +30,8 @@
     "storage",
     "tabs",
     "webRequestBlocking",
-    "webRequest"
+    "webRequest",
+    "privacy"
   ],
 
   "commands": {
diff --git a/src/popup.html b/src/popup.html
index 4cd8219..93933ed 100644
--- a/src/popup.html
+++ b/src/popup.html
@@ -180,6 +180,10 @@
           <fieldset id="edit-container-panel-choose-color" class="radio-choice">
             <legend>Choose a color</legend>
           </fieldset>
+          <label for="CUD-colors-enabled" id="CUD-checkbox-label">
+            <input type="checkbox" id="CUD-colors-enabled" />
+            <span>Colorblind accessible colors</span>
+          </label>
           <fieldset id="edit-container-panel-choose-icon" class="radio-choice">
             <legend>Choose an icon</legend>
           </fieldset>