Add CTX Options

cssnr · Aug 21, 2024 · e61b263 · e61b263
1 parent 6e7ccdc
commit e61b263
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 72 deletions.
diff --git a/manifest.json b/manifest.json
@@ -23,7 +23,7 @@
       "suggested_key": {
         "default": "Alt+Shift+A"
       },
-      "description": "Show Main Popup Action"
+      "description": "Show Popup Action"
     },
     "openOptions": {
       "suggested_key": {
@@ -36,6 +36,12 @@
     },
     "clearAllSiteCache": {
       "description": "Clear All Site Cache"
+    },
+    "clearBrowserCache": {
+      "description": "Clear Browser Cache"
+    },
+    "clearAllBrowserCache": {
+      "description": "Clear All Browser Cache"
     }
   },
   "action": {

diff --git a/src/html/options.html b/src/html/options.html
@@ -13,9 +13,9 @@
 </head>
 <body>
 
-<div class="container-fluid py-3 px-1 px-sm-3 ">
+<div class="container-fluid py-3 px-1 px-sm-3">
 <div class="card w-100 mx-auto">
-<div class="card-body">
+<div class="card-body px-1 px-sm-3">
     <div class="d-flex flex-row justify-content-center">
         <img src="../images/logo48.png" class="me-2" height="48" width="48" alt="Cache Cleaner" title="Cache Cleaner">
         <div>
@@ -24,24 +24,30 @@
         </div>
     </div>
 
-    <table id="keyboard-shortcuts" class="table table-sm table-borderless table-hover">
-        <caption class="visually-hidden">Keyboard Shortcuts</caption>
-        <thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
-        <tbody></tbody>
-        <tfoot class="d-none">
-        <tr>
-            <td class="bg-transparent"><i class="fa-regular fa-keyboard me-1"></i> <span class="description"></span></td>
-            <td class="bg-transparent text-end" title="Keyboard Shortcut"><kbd>Unknown</kbd></td>
-        </tr>
-        </tfoot>
-    </table>
-
-    <div class="mb-2">
-        Manage Keyboard Shortcuts:
-        <a class="body-link d-inline-block d-none firefox" href="https://support.mozilla.org/en-US/kb/manage-extension-shortcuts-firefox" target="_blank" rel="noopener">
-            https://mzl.la/3Qwp5QQ<i class="fa-solid fa-up-right-from-square fa-xs ms-1 text-info"></i></a>
-        <a id="chrome-shortcuts" class="d-inline-block d-none chrome" role="button">chrome://extensions/shortcuts</a>
-    </div>
+    <div id="keyboard-shortcuts" class="d-none">
+        <div class="d-flex flex-row align-items-center justify-content-center">
+            <hr class="w-100 my-0">
+            <span class="text-nowrap mx-2">Keyboard Shortcuts</span>
+            <hr class="w-100 my-0">
+        </div>
+        <table class="table table-sm table-borderless table-hover">
+            <caption class="visually-hidden">Keyboard Shortcuts</caption>
+            <thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
+            <tbody></tbody>
+            <tfoot class="d-none">
+            <tr>
+                <td class="bg-transparent"><i class="fa-regular fa-keyboard me-1"></i> <span class="description"></span></td>
+                <td class="bg-transparent text-end" title="Keyboard Shortcut"><kbd>Unknown</kbd></td>
+            </tr>
+            </tfoot>
+        </table>
+        <div class="mb-2">
+            Manage Keyboard Shortcuts:
+            <a class="body-link d-inline-block d-none firefox" href="https://support.mozilla.org/en-US/kb/manage-extension-shortcuts-firefox" target="_blank" rel="noopener">
+                https://mzl.la/3Qwp5QQ<i class="fa-solid fa-up-right-from-square fa-xs ms-1 text-info"></i></a>
+            <a id="chrome-shortcuts" class="d-inline-block d-none chrome" role="button">chrome://extensions/shortcuts</a>
+        </div>
+    </div> <!-- keyboard-shortcuts -->
 
     <form id="options-form" class="options">
 
@@ -269,21 +275,70 @@
         <div class="form-check form-switch d-flex align-items-center">
             <input class="form-check-input" type="checkbox" role="switch" id="showConfirmation">
             <label class="form-check-label ps-2 me-2" for="showConfirmation" aria-describedby="showConfirmationHelp">
-                Confirmation for Browser Cache
+                Confirm for Browser Cache
             </label>
-            <span data-bs-toggle="tooltip" data-bs-title="Show Confirmation for All Sites and Browser Cache.">
+            <span data-bs-toggle="tooltip" data-bs-title="Show Confirmation for Browser Cache.">
                 <i class="fa-solid fa-circle-info"></i>
             </span>
         </div>
+
         <div class="form-check form-switch d-flex align-items-center">
-            <input class="form-check-input" type="checkbox" role="switch" id="contextMenu">
-            <label class="form-check-label ps-2 me-2" for="contextMenu" aria-describedby="contextMenuHelp">
+            <input class="form-check-input" type="checkbox" role="switch" id="ctx-enable" data-related="ctxMenuItems">
+            <label class="form-check-label ps-2 me-2" for="ctx-enable" aria-describedby="ctx-enableHelp">
                 Enable Right Click Menu
             </label>
             <span data-bs-toggle="tooltip" data-bs-title="Show Context Menu on Right Click.">
                 <i class="fa-solid fa-circle-info"></i>
             </span>
         </div>
+        <div id="ctxMenuItems" class="ms-4" style="display: none;">
+            <div class="form-check form-switch d-flex align-items-center">
+                <input class="form-check-input" type="checkbox" role="switch" id="ctx-site">
+                <label class="form-check-label ps-2 me-2" for="ctx-site" aria-describedby="ctx-siteHelp">
+                    Clear Site Cache
+                </label>
+                <span data-bs-toggle="tooltip" data-bs-title="Clear Site Cache.">
+                    <i class="fa-solid fa-circle-info"></i>
+                </span>
+            </div>
+            <div class="form-check form-switch d-flex align-items-center">
+                <input class="form-check-input" type="checkbox" role="switch" id="ctx-siteAll">
+                <label class="form-check-label ps-2 me-2" for="ctx-siteAll" aria-describedby="ctx-siteAllHelp">
+                    Clear All Site Cache
+                </label>
+                <span data-bs-toggle="tooltip" data-bs-title="Clear All Site Cache.">
+                    <i class="fa-solid fa-circle-info"></i>
+                </span>
+            </div>
+            <div class="form-check form-switch d-flex align-items-center">
+                <input class="form-check-input" type="checkbox" role="switch" id="ctx-browser">
+                <label class="form-check-label ps-2 me-2" for="ctx-browser" aria-describedby="ctx-browserHelp">
+                    Clear Browser Cache
+                </label>
+                <span data-bs-toggle="tooltip" data-bs-title="Clear Browser Cache.">
+                    <i class="fa-solid fa-circle-info"></i>
+                </span>
+            </div>
+            <div class="form-check form-switch d-flex align-items-center">
+                <input class="form-check-input" type="checkbox" role="switch" id="ctx-browserAll">
+                <label class="form-check-label ps-2 me-2" for="ctx-browserAll" aria-describedby="ctx-browserAllHelp">
+                    Clear All Browser Cache
+                </label>
+                <span data-bs-toggle="tooltip" data-bs-title="Clear All Browser Cache.">
+                    <i class="fa-solid fa-circle-info"></i>
+                </span>
+            </div>
+            <div class="form-check form-switch d-flex align-items-center">
+                <input class="form-check-input" type="checkbox" role="switch" id="ctx-options">
+                <label class="form-check-label ps-2 me-2" for="ctx-options" aria-describedby="ctx-optionsHelp">
+                    Open Options
+                </label>
+                <span data-bs-toggle="tooltip" data-bs-title="Open Options.">
+                    <i class="fa-solid fa-circle-info"></i>
+                </span>
+            </div>
+        </div> <!-- ctxMenuItems -->
+
         <div class="form-check form-switch d-flex align-items-center">
             <input class="form-check-input" type="checkbox" role="switch" id="showUpdate">
             <label class="form-check-label ps-2 me-2" for="showUpdate" aria-describedby="showUpdateHelp">

diff --git a/src/html/popup.html b/src/html/popup.html
@@ -185,9 +185,9 @@
             <div class="form-check form-switch d-flex align-items-center">
                 <input class="form-check-input" type="checkbox" role="switch" id="showConfirmation">
                 <label class="form-check-label ps-2 me-2" for="showConfirmation" aria-describedby="showConfirmationHelp">
-                    Confirmation for Browser Cache
+                    Confirm for Browser Cache
                 </label>
-                <span data-bs-toggle="tooltip" data-bs-title="Show Confirmation for All Sites and Browser Cache.">
+                <span data-bs-toggle="tooltip" data-bs-title="Show Confirmation for Browser Cache.">
                 <i class="fa-solid fa-circle-info"></i>
             </span>
             </div>

diff --git a/src/js/options.js b/src/js/options.js
@@ -38,7 +38,14 @@ async function initOptions() {
     console.debug('initOptions')
 
     updateManifest()
-    setShortcuts().then()
+    setShortcuts([
+        'clearSiteCache',
+        'clearAllSiteCache',
+        'clearBrowserCache',
+        'clearAllBrowserCache',
+        '_execute_action',
+        'openOptions',
+    ]).then()
     processBrowser().then()
 
     const { options, hosts } = await chrome.storage.sync.get([
@@ -73,39 +80,33 @@ async function onChanged(changes, namespace) {
 /**
  * Set Keyboard Shortcuts
  * @function setShortcuts
- * @param {String} selector
- * @param {Boolean} action
+ * @param {Array} names
+ * @param {String} [selector]
  * @return {Promise<void>}
  */
-async function setShortcuts(selector = '#keyboard-shortcuts', action = false) {
+async function setShortcuts(names, selector = '#keyboard-shortcuts') {
     if (!chrome.commands) {
         return console.debug('Skipping: chrome.commands')
     }
-    const table = document.querySelector(selector)
+    const parent = document.querySelector(selector)
+    parent.classList.remove('d-none')
+    const table = parent.querySelector('table')
     const tbody = table.querySelector('tbody')
     const source = table.querySelector('tfoot > tr').cloneNode(true)
     const commands = await chrome.commands.getAll()
-    for (const command of commands) {
-        console.debug('command:', command)
+    for (const name of names) {
+        const command = commands.find((x) => x.name === name)
+        // console.debug('command:', command)
         const row = source.cloneNode(true)
-        // TODO: Chrome does not parse the description for _execute_action in manifest.json
         let description = command.description
+        // Note: Chrome does not parse the description for _execute_action in manifest.json
         if (!description && command.name === '_execute_action') {
-            description = 'Show Popup'
+            description = 'Show Popup Action'
         }
         row.querySelector('.description').textContent = description
         row.querySelector('kbd').textContent = command.shortcut || 'Not Set'
         tbody.appendChild(row)
     }
-    if (action) {
-        console.debug('Requires Firefox 116+ and Chrome 91+')
-        // const userSettings = await chrome.action.getUserSettings()
-        // const row = source.cloneNode(true)
-        // row.querySelector('i').className = 'fa-solid fa-puzzle-piece me-1'
-        // row.querySelector('.description').textContent = 'Toolbar Icon Pinned'
-        // row.querySelector('kbd').textContent = userSettings ? 'Yes' : 'No'
-        // tbody.appendChild(row)
-    }
 }
 
 /**