add angular-round selector

popup.js

@@ -3,9 +3,12 @@
 
   const status = document.getElementById("status");
   const toggle = document.getElementById("toggle");
+  const fontStyleInputs = [...document.querySelectorAll('input[name="font-style"]')];
   let activeTabId = null;
   let currentEnabled = false;
+  let currentFontStyle = "round";
   let busy = false;
+  let fontStyleBusy = false;
 
   function render(enabled) {
     currentEnabled = enabled;
@@ -15,6 +18,20 @@
     status.textContent = enabled ? "Glagolitic is on for this tab." : "Cyrillic is unchanged in this tab.";
   }
 
+  function setFontStyleDisabled(disabled) {
+    for (const input of fontStyleInputs) {
+      input.disabled = disabled;
+    }
+  }
+
+  function renderFontStyle(style) {
+    currentFontStyle = style === "angular" ? "angular" : "round";
+    for (const input of fontStyleInputs) {
+      input.checked = input.value === currentFontStyle;
+    }
+    setFontStyleDisabled(false);
+  }
+
   function showUnavailable() {
     activeTabId = null;
     currentEnabled = false;
@@ -47,6 +64,7 @@
         return;
       }
       render(response.enabled === true);
+      renderFontStyle(response.fontStyle);
     } catch (error) {
       showUnavailable();
     } finally {
@@ -57,6 +75,32 @@
     }
   });
 
+  for (const input of fontStyleInputs) {
+    input.addEventListener("change", async () => {
+      if (!input.checked || fontStyleBusy || input.value === currentFontStyle) {
+        return;
+      }
+
+      const previousFontStyle = currentFontStyle;
+      fontStyleBusy = true;
+      setFontStyleDisabled(true);
+      try {
+        const response = await askBackground("glagolify:set-font-style", {
+          fontStyle: input.value
+        });
+        if (!response || !response.accepted) {
+          throw new Error("Font style was rejected");
+        }
+        renderFontStyle(response.fontStyle);
+      } catch (error) {
+        renderFontStyle(previousFontStyle);
+      } finally {
+        fontStyleBusy = false;
+        setFontStyleDisabled(false);
+      }
+    });
+  }
+
   async function initialize() {
     try {
       const tabs = await browser.tabs.query({ active: true, currentWindow: true });
@@ -69,6 +113,7 @@
       const response = await askBackground("glagolify:get-tab-state", {
         tabId: activeTabId
       });
+      renderFontStyle(response && response.fontStyle);
       if (!response || !response.available) {
         showUnavailable();
         return;