Fix elements styling to follow the Proton Design System more closely

This includes fixes for the hover, active and focus states of all the
elements that didn't have one.

src/js/options.js

@@ -53,11 +53,20 @@ async function enableDisableReplaceTab() {
   await browser.storage.local.set({replaceTabEnabled: !!checkbox.checked});
 }
 
+async function changeTheme(event) {
+  const theme = event.currentTarget;
+  await browser.storage.local.set({currentTheme: theme.value});
+  await browser.storage.local.set({currentThemeId: theme.selectedIndex});
+}
+
 async function setupOptions() {
   const { syncEnabled } = await browser.storage.local.get("syncEnabled");
   const { replaceTabEnabled } = await browser.storage.local.get("replaceTabEnabled");
+  const { currentThemeId } = await browser.storage.local.get("currentThemeId");
+
   document.querySelector("#syncCheck").checked = !!syncEnabled;
   document.querySelector("#replaceTabCheck").checked = !!replaceTabEnabled;
+  document.querySelector("#changeTheme").selectedIndex = currentThemeId;
   setupContainerShortcutSelects();
 }
 
@@ -114,6 +123,8 @@ browser.permissions.onRemoved.addListener(resetPermissionsUi);
 document.addEventListener("DOMContentLoaded", setupOptions);
 document.querySelector("#syncCheck").addEventListener( "change", enableDisableSync);
 document.querySelector("#replaceTabCheck").addEventListener( "change", enableDisableReplaceTab);
+document.querySelector("#changeTheme").addEventListener( "change", changeTheme);
+
 maybeShowPermissionsWarningIcon();
 for (let i=0; i < NUMBER_OF_KEYBOARD_SHORTCUTS; i++) {
   document.querySelector("#open_container_"+i)

src/js/pageAction.js

@@ -32,6 +32,9 @@ async function init() {
   list.appendChild(fragment);
 
   MozillaVPN.handleContainerList(identities);
+
+  // Set the theme
+  Utils.applyTheme();
 }
 
 init();

src/js/popup.js

@@ -51,6 +51,7 @@ async function getExtensionInfo() {
   return extensionInfo;
 }
 
+
 // This object controls all the panels, identities and many other things.
 const Logic = {
   _identities: [],
@@ -65,6 +66,9 @@ const Logic = {
       method: "MozillaVPN_attemptPort"
     }),
 
+    // Set the theme
+    Utils.applyTheme();
+
     // Remove browserAction "upgraded" badge when opening panel
     this.clearBrowserActionBadge();
 
@@ -1492,7 +1496,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
             } else {
               MozillaVPN.handleMozillaCtaClick("mac-edit-container-panel-btn");
             }
-           
+
           });
 
           this.switch.addEventListener("click", async() => {

src/js/utils.js

@@ -169,6 +169,26 @@ const Utils = {
       false
     );
   },
+  /* Theme helper
+   *
+   * First, we look if there's a theme already set in the local storage. If
+   * there isn't one, we set the theme based on `prefers-color-scheme`.
+   * */
+  getTheme(currentTheme, window) {
+    if (typeof currentTheme !== "undefined" && currentTheme !== "auto") {
+      return currentTheme;
+    }
+    if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
+      return "dark";
+    }
+    return "light";
+  },
+  async applyTheme() {
+    const { currentTheme } = await browser.storage.local.get("currentTheme");
+    const popup = document.getElementsByTagName("html")[0];
+    const theme = Utils.getTheme(currentTheme, window);
+    popup.setAttribute("data-theme", theme);
+  }
 };
 
 window.Utils = Utils;

src/options.html

@@ -59,6 +59,24 @@
         <p><em data-i18n-message-id="replaceTabDescription"></em></p>
       </div>
 
+      <!--
+        TODO
+        - Add data-i18n
+      -->
+      <h3 data-i18n-message-id="theme"></h3>
+
+      <p><label class="keyboard-shortcut">
+          <span data-i18n-message-id="chooseTheme"></span>
+          <select id="changeTheme" name="changeTheme">
+            <option value="auto" selected data-i18n-message-id="themeAuto">
+            </option>
+            <option value="light" data-i18n-message-id="themeLight">
+            </option>
+            <option value="dark" data-i18n-message-id="themeDark">
+            </option>
+          </select>
+      </label></p>
+
       <h3 data-i18n-message-id="keyboardShortCuts"></h3>
       <p><em data-i18n-message-id="editWhichContainer"></em></p>
 

src/popup.html

@@ -1,4 +1,4 @@
-<html>
+<html data-theme="auto">
 <head>
   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   <title>Multi-Account Containers</title>
@@ -251,7 +251,7 @@
       </table>
     </div>
     <v-padding-hack-footer></v-padding-hack-footer>
-    <div class="bottom-btn keyboard-nav hover-highlight" id="manage-container-link" tabindex="0" data-i18n-message-id="manageThisContainer"></div>
+    <div class="bottom-btn keyboard-nav hover-highlight controller" id="manage-container-link" tabindex="0" data-i18n-message-id="manageThisContainer"></div>
   </div>
 
 
@@ -342,10 +342,11 @@
         </button>
       </div>
     </moz-vpn-container-ui>
-    <button id="advanced-proxy-settings-btn" class="proxy-section advanced-proxy-settings-btn controller">
+    <button id="advanced-proxy-settings-btn" class="proxy-section advanced-proxy-settings-btn">
       <span class="advanced-proxy-settings-btn-label" data-i18n-message-id="advancedProxySettings"></span>
       <span id="advanced-proxy-address"></span>
     </button>
+    <hr>
     <button class="delete-container delete-btn alert-text" id="delete-container-button" data-i18n-message-id="deleteThisContainer"></button>
 
     <!-- TODO get UX / CONTENT on how to message about unavailable proxies -->