chore: add and refactor option descriptions

chore: code cleanup
igorlogius · Jun 12, 2024 · 856944f · 856944f
1 parent 8dcd94c
commit 856944f
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 22 deletions.
diff --git a/background.js b/background.js
@@ -106,7 +106,7 @@ browser.menus.create({
           createTempContainerTab(bm.url);
         } else {
           for (const c of await browser.bookmarks.getChildren(
-            clickdata.bookmarkId
+            clickdata.bookmarkId,
           )) {
             if (c.url) {
               createTempContainerTab(c.url, openAsActive);
@@ -149,7 +149,7 @@ async function onTabRemoved() {
 
   containerCleanupTimer = setTimeout(async () => {
     const containerWithTabs = new Set(
-      (await browser.tabs.query({})).map((t) => t.cookieStoreId)
+      (await browser.tabs.query({})).map((t) => t.cookieStoreId),
     );
 
     containers = await browser.contextualIdentities.query({});
@@ -231,7 +231,7 @@ async function onStorageChange() {
   historyCleanUpQueue = await getFromStorage(
     "object",
     "historyCleanUpQueue",
-    []
+    [],
   );
 }
 
@@ -293,7 +293,7 @@ async function onBeforeNavigate(details) {
   try {
     const tabInfo = await browser.tabs.get(details.tabId);
     const container = await browser.contextualIdentities.get(
-      tabInfo.cookieStoreId
+      tabInfo.cookieStoreId,
     );
     // in a container
     if (container.name.startsWith("Temp")) {
@@ -338,9 +338,8 @@ function cleanupHistory() {
 }
 
 async function handlePermissionChange() {
-  historyPermissionEnabled = await browser.permissions.contains(
-    historyPermission
-  );
+  historyPermissionEnabled =
+    await browser.permissions.contains(historyPermission);
   clearInterval(intId);
   if (historyPermissionEnabled) {
     intId = setInterval(cleanupHistory, deldelay);
@@ -367,7 +366,7 @@ async function handlePermissionChange() {
   browser.webNavigation.onBeforeNavigate.addListener(onBeforeNavigate);
   browser.webNavigation.onHistoryStateUpdated.addListener(onBeforeNavigate);
   browser.webNavigation.onReferenceFragmentUpdated.addListener(
-    onBeforeNavigate
+    onBeforeNavigate,
   );
   browser.webNavigation.onErrorOccurred.addListener(onBeforeNavigate);
   browser.tabs.onUpdated.addListener((tabId, changeInfo, tabInfo) => {

diff --git a/manifest.json b/manifest.json
@@ -36,5 +36,5 @@
     "tabs"
   ],
   "optional_permissions": ["bookmarks", "history"],
-  "version": "1.1.32"
+  "version": "1.1.33"
 }
diff --git a/options.html b/options.html
@@ -1,30 +1,62 @@
-<!DOCTYPE html>
+<!doctype html>
 <head>
   <meta charset="utf-8" />
   <style>
     body {
       background-color: lightgrey;
+      padding: 5px;
     }
     textarea {
       width: 100%;
       height: 15vh;
     }
+    fieldset {
+      padding: 10px;
+    }
+    #permissions {
+      width: 100%;
+    }
+
+    #permissions td {
+      border-bottom: 1px solid gray;
+    }
   </style>
 </head>
 <body>
   <fieldset>
     <h4>
-      Additional Features
-      <abbr title="Grant Permission, to enable feature">(?)</abbr>
+      <abbr title="see Permissions tab to enable">
+        Optional permissions for added functionality (?):
+      </abbr>
     </h4>
-    <ul>
-      <li>"Read and modify bookmarks", enables the bookmark context entry</li>
-      <li>"Access browsing history", enables automatic history deletion</li>
-    </ul>
+    <table id="permissions">
+      <tr>
+        <!--td>
+          <b>Optional Permission</b>
+        </td>
+        <td>
+          <b> Functionality </b>
+        </td-->
+      </tr>
+      <tr>
+        <td>
+          <i>1. "Read and modify bookmarks"</i>
+        </td>
+        <td>Adds the bookmark context entry</td>
+      </tr>
+      <tr>
+        <td>
+          <i>2. "Access browsing history" </i>
+        </td>
+        <td>Enables automatic history deletion</td>
+      </tr>
+    </table>
   </fieldset>
 
   <fieldset>
-    <b>Toolbar button:</b>
+    <abbr title="Choose what clicking the toolbar button does">
+      <b>Toolbar button action (?):</b>
+    </abbr>
     <select id="toolbarAction">
       <option value="reopen">Open current tab URL in a temp container</option>
       <option value="newtab">Open a new tab in a temp container</option>
@@ -33,8 +65,9 @@ <h4>
 
   <fieldset>
     <h4>
-      Container colors
-      <abbr title="Hold CTRL to select or deselect multiple colors">(?)</abbr>
+      <abbr title="Hold CTRL to select or deselect multiple colors">
+        Container colors (?):</abbr
+      >
     </h4>
     <select id="usecolors" multiple style="min-height: 13em; width: 100%">
       <option value="blue">blue</option>
@@ -60,11 +93,15 @@ <h4>
 
   <div id="mainForm" accept-charset="utf-8" style="display: none">
     <fieldset>
-      <b>Multi-Open shortcut argument:</b>
+      <abbr title="Specify the amounts of tabs that will be opened">
+        <b>Multi-Open shortcut parameter (?):</b>
+      </abbr>
       <input type="number" id="multiopen" value="3" min="0" max="10" />
     </fieldset>
     <fieldset>
-      <h4>Operation Mode</h4>
+      <abbr title="Choose between blacklist or whitelist mode">
+        <h4>Operation Mode (?):</h4>
+      </abbr>
       <fieldset>
         <select id="listmode" style="width: 100%; text-align: center">
           <option value="include">

diff --git a/options.js b/options.js
@@ -102,7 +102,7 @@ browser.storage.local
   let el = document.getElementById(id);
   el.addEventListener("input", () => {
     const selectedItems = Array.from(el.selectedOptions).map(
-      (option) => option.value
+      (option) => option.value,
     );
     let obj = {};
     if (el.hasAttribute("multiple")) {