cssnr · smashedr · Dec 18, 2023 · Dec 16, 2023 · Dec 16, 2023 · Dec 18, 2023
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -7,7 +7,10 @@
   },
   "extends": "eslint:recommended",
   "parserOptions": {
-    "ecmaVersion": "latest"
+    "ecmaVersion": "latest",
+    "sourceType": "module"
   },
-  "rules": {}
+  "rules": {
+    "no-undef": "off"
+  }
 }
diff --git a/manifest.json b/manifest.json
@@ -3,7 +3,7 @@
   "description": "SMWC.world Web Extension and Browser Addon to Easily Patch and Play SMW ROMs.",
   "homepage_url": "https://smwc.world",
   "author": "Shane",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "manifest_version": 3,
   "commands": {
     "_execute_action": {

diff --git a/src/css/main.css b/src/css/main.css
@@ -0,0 +1,7 @@
+/* CSS for global */
+
+svg {
+    height: 1em;
+    width: 1em;
+    margin-bottom: 0.15em;
+}
diff --git a/src/css/options.css b/src/css/options.css
@@ -0,0 +1,5 @@
+/* CSS for options.html */
+
+.card {
+    min-width: 380px;
+}
diff --git a/src/css/popup.css b/src/css/popup.css
@@ -1,5 +1,7 @@
+/* CSS for popup.html */
+
 body {
-    width: 320px;
+    width: 340px;
 }
 
 input::placeholder,

diff --git a/src/html/options.html b/src/html/options.html
@@ -4,6 +4,8 @@
     <title>SMWC Web Extension</title>
     <link rel="icon" href="../images/logo16.png" sizes="any">
     <link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../css/main.css">
+    <link rel="stylesheet" type="text/css" href="../css/options.css">
     <script type="text/javascript" src="../js/theme.js"></script>
 </head>
 <body>
@@ -23,18 +25,31 @@ <h1 class="align-middle">SMWC Web Extension</h1>
         <caption class="visually-hidden">Keyboard Shortcuts</caption>
         <thead class="visually-hidden"><tr><th>Description</th><th>Shortcut</th></tr></thead>
         <tbody>
-            <tr><td>Show Popup Action</td><td class="text-end"><kbd id="mainKey">Unknown</kbd></td></tr>
+            <tr>
+                <td>Show Popup Action <svg class="ms-1"><use xlink:href="#bi-keyboard" /></svg></td>
+                <td class="text-end" title="Keyboard Shortcut"><kbd id="mainKey">Unknown</kbd></td>
+            </tr>
         </tbody>
     </table>
     <hr>
     <form id="options-form">
         <div class="form-check form-switch">
             <input class="form-check-input options" type="checkbox" role="switch" id="contextMenu">
-            <label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">Enable Right Click Menu</label>
+            <label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">
+                Enable Right Click Menu
+                <span data-bs-toggle="tooltip" data-bs-title="Show Context Menu on Right Click.">
+                    <svg class="ms-1"><use xlink:href="#bi-info-circle-fill" /></svg>
+                </span>
+            </label>
         </div>
-        <div class="form-check form-switch mb-3">
+        <div class="form-check form-switch">
             <input class="form-check-input options" type="checkbox" role="switch" id="showUpdate">
-            <label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">Show Release Notes on Update</label>
+            <label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">
+                Show Release Notes on Update
+                <span data-bs-toggle="tooltip" data-bs-title="Show Release Notes on Version Update.">
+                    <svg class="ms-1"><use xlink:href="#bi-info-circle-fill" /></svg>
+                </span>
+            </label>
         </div>
     </form>
 
@@ -76,10 +91,10 @@ <h1 class="align-middle">SMWC Web Extension</h1>
     <div class="text-center">
         <a class="link-body-emphasis text-decoration-none d-inline-block" target="_blank" rel="noopener"
            href="https://github.com/cssnr/smwc-web-extension#readme">Get Help</a>
-        |
+        <svg><use xlink:href="#bi-dot" /></svg>
         <a class="link-body-emphasis text-decoration-none d-inline-block" target="_blank" rel="noopener"
            href="https://github.com/cssnr/smwc-web-extension/discussions/categories/feature-requests">Request Feature</a>
-        |
+        <svg><use xlink:href="#bi-dot" /></svg>
         <a class="link-body-emphasis text-decoration-none d-inline-block" target="_blank" rel="noopener"
            href="https://github.com/cssnr/smwc-web-extension/issues">Open Issue</a>
     </div>
@@ -89,6 +104,19 @@ <h1 class="align-middle">SMWC Web Extension</h1>
 </div> <!-- row -->
 </div> <!-- container -->
 
+<div class="d-none">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-dot" viewBox="0 0 16 16">
+        <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3"/>
+    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-info-circle-fill" viewBox="0 0 16 16">
+        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-keyboard" viewBox="0 0 16 16">
+        <path d="M14 5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1zM2 4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2z"/>
+        <path d="M13 10.25a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm0-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-5 0A.25.25 0 0 1 8.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 8 8.75zm2 0a.25.25 0 0 1 .25-.25h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5a.25.25 0 0 1-.25-.25zm1 2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-5-2A.25.25 0 0 1 6.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 6 8.75zm-2 0A.25.25 0 0 1 4.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 4 8.75zm-2 0A.25.25 0 0 1 2.25 8h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 2 8.75zm11-2a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-2 0a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm-2 0A.25.25 0 0 1 9.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 9 6.75zm-2 0A.25.25 0 0 1 7.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 7 6.75zm-2 0A.25.25 0 0 1 5.25 6h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5A.25.25 0 0 1 5 6.75zm-3 0A.25.25 0 0 1 2.25 6h1.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-1.5A.25.25 0 0 1 2 6.75zm0 4a.25.25 0 0 1 .25-.25h.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-.5a.25.25 0 0 1-.25-.25zm2 0a.25.25 0 0 1 .25-.25h5.5a.25.25 0 0 1 .25.25v.5a.25.25 0 0 1-.25.25h-5.5a.25.25 0 0 1-.25-.25z"/>
+    </svg>
+</div>
+
 <script type="text/javascript" src="../dist/jquery/jquery.min.js"></script>
 <script type="text/javascript" src="../dist/bootstrap/bootstrap.bundle.min.js"></script>
 <script type="module" src="../js/options.js"></script>

diff --git a/src/html/popup.html b/src/html/popup.html
@@ -4,6 +4,7 @@
     <title>SMWC Web Extension</title>
     <link rel="icon" href="../images/logo16.png" sizes="any">
     <link rel="stylesheet" type="text/css" href="../dist/bootstrap/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="../css/main.css">
     <link rel="stylesheet" type="text/css" href="../css/popup.css">
     <script type="text/javascript" src="../js/theme.js"></script>
 </head>
@@ -12,12 +13,11 @@
 <div class="container-fluid p-3">
     <div class="d-grid gap-2 d-md-flex justify-content-md-end">
         <div class="btn-group btn-group-sm" role="group" aria-label="SMWC.world">
-            <a role="button" class="btn btn-outline-info" data-href="https://smwc.world/patcher/">Patcher</a>
-            <a role="button" class="btn btn-outline-info" data-href="https://smwc.world/play/">Player</a>
+            <a role="button" class="btn btn-outline-info" href="https://smwc.world/patcher/">Patcher</a>
+            <a role="button" class="btn btn-outline-info" href="https://smwc.world/play/">Player</a>
         </div>
-        <a class="btn btn-success btn-sm w-100" role="button" data-href="https://www.smwcentral.net/?p=section&s=smwhacks">
-            SMW Central Rom Hacks
-        </a>
+        <a class="btn btn-success btn-sm w-100" role="button" href="https://www.smwcentral.net/?p=section&s=smwhacks">
+            SMW Central Rom Hacks</a>
         <form id="patch-form">
             <label for="patch-input" class="visually-hidden">Patch URL</label>
             <div class="input-group">
@@ -40,29 +40,45 @@
             </div>
         </div>
     </div>
-    <div id="popup-alert" class="alert alert-warning mt-2 visually-hidden" role="alert"></div>
+    <div id="popup-alert" class="alert alert-warning mt-2 d-none" role="alert"></div>
     <hr class="my-2">
     <form id="options-form" class="mb-2">
         <div class="form-check form-switch">
             <input class="form-check-input" type="checkbox" role="switch" id="contextMenu">
-            <label class="form-check-label" for="contextMenu">Enable Right Click Menu</label>
+            <label class="form-check-label" for="contextMenu" aria-describedby="contextMenuHelp">
+                Enable Right Click Menu
+                <span data-bs-toggle="tooltip" data-bs-title="Show Context Menu on Right Click.">
+                    <svg class="ms-1"><use xlink:href="#bi-info-circle-fill" /></svg>
+                </span>
+            </label>
         </div>
         <div class="form-check form-switch">
             <input class="form-check-input" type="checkbox" role="switch" id="showUpdate">
-            <label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">Show Release Notes on Update</label>
+            <label class="form-check-label" for="showUpdate" aria-describedby="showUpdateHelp">
+                Show Release Notes on Update
+                <span data-bs-toggle="tooltip" data-bs-title="Show Release Notes on Version Update.">
+                    <svg class="ms-1"><use xlink:href="#bi-info-circle-fill" /></svg>
+                </span>
+            </label>
         </div>
     </form>
-    <a class="btn btn-outline-primary btn-sm w-100" role="button" data-href="options">
+    <a class="btn btn-outline-primary btn-sm w-100" role="button" href="../html/options.html">
         Open Options
     </a>
     <hr>
     <div class="justify-content-center align-items-center d-flex text-center small">
         <img src="../images/logo16.png" alt="SMWC Web Extension" class="me-1">
         <a class="link-offset-2 link-underline link-underline-opacity-0 link-underline-opacity-75-hover mx-2" type="button" rel="noopener"
-           data-href="homepage">SMWC Web Extension</a> v<span id="version"></span>
+           id="homepage_url" href="">SMWC Web Extension</a> v<span id="version"></span>
     </div>
 </div>
 
+<div class="d-none">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" id="bi-info-circle-fill" viewBox="0 0 16 16">
+        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
+    </svg>
+</div>
+
 <script type="text/javascript" src="../dist/jquery/jquery.min.js"></script>
 <script type="text/javascript" src="../dist/bootstrap/bootstrap.bundle.min.js"></script>
 <script type="module" src="../js/popup.js"></script>

diff --git a/src/js/options.js b/src/js/options.js
@@ -9,6 +9,9 @@ chrome.storage.onChanged.addListener(onChanged)
 document
     .querySelectorAll('#options-form input')
     .forEach((el) => el.addEventListener('change', saveOptions))
+document
+    .querySelectorAll('[data-bs-toggle="tooltip"]')
+    .forEach((el) => new bootstrap.Tooltip(el))
 
 // document.getElementById('advanced').addEventListener('submit', saveAdvanced)
 

diff --git a/src/js/popup.js b/src/js/popup.js
@@ -5,14 +5,17 @@ import { patchRom, saveOptions, updateOptions } from './exports.js'
 document.addEventListener('DOMContentLoaded', initPopup)
 
 document
-    .querySelectorAll('[data-href]')
+    .querySelectorAll('a[href]')
     .forEach((el) => el.addEventListener('click', popupLinks))
 document
     .querySelectorAll('#options-form input')
     .forEach((el) => el.addEventListener('change', saveOptions))
 document
     .getElementsByName('searchType')
     .forEach((el) => el.addEventListener('change', updateSearchType))
+document
+    .querySelectorAll('[data-bs-toggle="tooltip"]')
+    .forEach((el) => new bootstrap.Tooltip(el))
 
 document.getElementById('patch-form').addEventListener('submit', patchForm)
 
@@ -23,8 +26,12 @@ document.getElementById('patch-form').addEventListener('submit', patchForm)
 async function initPopup() {
     console.log('initPopup')
     document.getElementById('patch-input').focus()
+
     document.getElementById('version').textContent =
         chrome.runtime.getManifest().version
+    document.getElementById('homepage_url').href =
+        chrome.runtime.getManifest().homepage_url
+
     const { options, popup } = await chrome.storage.sync.get([
         'options',
         'popup',
@@ -44,21 +51,17 @@ async function popupLinks(event) {
     console.log('popupLinks:', event)
     event.preventDefault()
     const anchor = event.target.closest('a')
+    console.log(`anchor.href: ${anchor.href}`)
     let url
-    if (anchor?.dataset?.href.startsWith('http')) {
-        url = anchor.dataset.href
-    } else if (anchor?.dataset?.href === 'homepage') {
-        url = chrome.runtime.getManifest().homepage_url
-    } else if (anchor?.dataset?.href === 'options') {
+    if (anchor.href.endsWith('html/options.html')) {
         chrome.runtime.openOptionsPage()
         return window.close()
-    } else if (anchor?.dataset?.href) {
-        url = chrome.runtime.getURL(anchor.dataset.href)
+    } else if (anchor.href.startsWith('http')) {
+        url = anchor.href
+    } else {
+        url = chrome.runtime.getURL(anchor.href)
     }
     console.log('url:', url)
-    if (!url) {
-        return console.error('No dataset.href for anchor:', anchor)
-    }
     await chrome.tabs.create({ active: true, url })
     return window.close()
 }
@@ -112,7 +115,7 @@ function showAlert(message) {
     console.log('showAlert:', message)
     const alert = document.getElementById('popup-alert')
     alert.textContent = message
-    alert.classList.remove('visually-hidden')
+    alert.classList.remove('d-none')
     $('#popup-alert')
         .fadeTo(5000, 500)
         .slideUp(500, function () {

diff --git a/src/js/service-worker.js b/src/js/service-worker.js
@@ -126,6 +126,7 @@ function onChanged(changes, namespace) {
  */
 function createContextMenus() {
     console.log('createContextMenus')
+    chrome.contextMenus.removeAll()
     const ctx = ['link']
     const contexts = [
         [ctx, 'rom_patch', 'normal', 'Patch ROM'],