Support for focusing and/or highlighting elements when opening the options page.

Author: hackademix

src/bg/main.js

@@ -338,7 +338,17 @@
       return this.policy;
     },
 
-
+    openOptionsPage({tab, focus, hilite}) {
+      let url = new URL(browser.runtime.getManifest().options_ui.page);
+      if (tab !== undefined) {
+        url.hash += `;tab-main-tabs=${tab}`;
+      }
+      let search = new URLSearchParams(url.search);
+      if (focus) search.set("focus", focus);
+      if (hilite) search.set("hilite", hilite);
+      url.search = search;
+      browser.tabs.create({url: url.toString() });
+    },
 
     async save(obj) {
       if (obj && obj.storage) {

src/ui/options.js

@@ -203,12 +203,26 @@ document.querySelector("#version").textContent = _("Version",
         UI.updateSettings({policy});
         newSiteInput.value = "";
         sitesUI.render(policy.sites);
-        sitesUI.highlight(site);
+        sitesUI.hilite(site);
         sitesUI.onChange();
       }
     }, true);
   }
 
+  window.setTimeout(() => {
+    // focus and/or hilite elements based on query string
+    let params = new URLSearchParams(location.search);
+    let el = key => {
+      let selector = params.get(key);
+      return selector && document.querySelector(selector);
+    }
+
+    let focusElement = el("focus");
+    if (focusElement) focusElement.focus();
+
+    let hiliteElement = el("hilite");
+    if (hiliteElement) UI.hilite(hiliteElement);
+  }, 1000);
 
   // UTILITY FUNCTIONS
 

src/ui/popup.js

@@ -107,7 +107,7 @@ addEventListener("unload", e => {
       let handlers = {
         "options": e => {
           if (UA.mobile) { // Fenix fails on openOptionsPage
-            browser.tabs.create({url: browser.runtime.getURL("/ui/options.html")});
+            browser.tabs.create({url: browser.runtime.getManifest().options_ui.page});
           } else {
             browser.runtime.openOptionsPage();
           }

src/ui/ui.js

@@ -185,6 +185,18 @@ var UI = (() => {
       return input;
     },
 
+    hilite(el) {
+      el.classList.add("hilite");
+      window.setTimeout(() => {
+          el.classList.remove("hilite");
+          el.classList.add("hilite-end");
+          el.scrollIntoView();
+          window.setTimeout(() => {
+            el.classList.remove("hilite-end");
+          }, 1000)
+      }, 50);
+    },
+
     createXSSChoiceManager(parent = "#xssChoices") {
       if (!UA.isMozilla) return;
       let choicesUI = document.querySelector(parent);
@@ -1115,20 +1127,12 @@ var UI = (() => {
       }
     }
 
-    highlight(key) {
+    hilite(key) {
       key = Sites.toExternal(key);
       for (let r of this.allSiteRows()) {
         if (key === r.siteMatch) {
-          r.classList.add("hilite");
+          UI.hilite(r);
           r.querySelector("input.preset:checked").focus();
-          window.setTimeout(() => {
-              r.classList.remove("hilite");
-              r.classList.add("hilite-end");
-              r.scrollIntoView();
-              window.setTimeout(() => {
-                r.classList.remove("hilite-end");
-              }, 1000)
-          }, 50);
           break;
         }
       }