v2.72

erosman · Jul 18, 2023 · a1e4062 · a1e4062
1 parent 599da96
commit a1e4062
Show file tree

Hide file tree

Showing 15 changed files with 154 additions and 94 deletions.
diff --git a/content/api-message.js b/content/api-message.js
@@ -1,6 +1,6 @@
 import {App} from './app.js';
 
-// ---------- API Message Handler (Side Effect) ------------
+// ---------- API Message Handler --------------------------
 export class OnMessage {
 
   static {
@@ -102,11 +102,12 @@ export class OnMessage {
     }
   }
 
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1670278
+  // Enable extensions to send network requests (fetch) with a specific cookieStoreId (container tab context)
+  // if privacy.firstparty.isolate = true
+  // Error: First-Party Isolation is enabled, but the required 'firstPartyDomain' attribute was not set.
   static async addCookie(url, headers, storeId) {
     // add contextual cookies, only in container/incognito
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1670278
-    // if privacy.firstparty.isolate = true
-    // Error: First-Party Isolation is enabled, but the required 'firstPartyDomain' attribute was not set.
     const cookies = await browser.cookies.getAll({url, storeId});
     const str = cookies && cookies.map(item => `${item.name}=${item.value}`).join('; ');
     str && (headers['FM-Contextual-Cookie'] = str);

diff --git a/content/api.js b/content/api.js
@@ -79,7 +79,7 @@ browser.userScripts.onBeforeScript.addListener(script => {
   height: 100%;
   top: 0;
   left: 0;
-  background: rgba(0, 0, 0, 0.4);
+  background: #0008;
 }
 
 @keyframes center {
@@ -253,7 +253,7 @@ browser.userScripts.onBeforeScript.addListener(script => {
       }
 
       // check protocol
-      if (!['http:', 'https:'].includes(url.protocol)) {
+      if (!['http:', 'https:', 'blob:'].includes(url.protocol)) {
         API.log(`checkURL ${url} ➜ Unsupported Protocol ${url.protocol}`);
         return;
       }
@@ -268,6 +268,7 @@ browser.userScripts.onBeforeScript.addListener(script => {
         'access-control-request-method', 'connection', 'content-length', 'cookie2', 'date', 'dnt', 'expect',
         'keep-alive', 'te', 'trailer', 'transfer-encoding', 'upgrade', 'via'];
 
+      init.headers ||= {};                                  // check init.headers
       Object.keys(init.headers).forEach(item => {
         const LC = item.toLowerCase();
         if (LC.startsWith('proxy-') || LC.startsWith('sec-') || forbiddenHeader.includes(LC)) {
@@ -315,13 +316,13 @@ browser.userScripts.onBeforeScript.addListener(script => {
       In order to make callback functions visible
       ONLY for GM.xmlHttpRequest(GM_xmlhttpRequest)
     */
-    static callUserScriptCallback(object, name, ...args) {
+    static userScriptCallback(object, name, ...args) {
       try {
         const cb = object.wrappedJSObject[name];
         typeof cb === 'function' && cb(...args);
       }
       catch(error) {
-        API.log(`callUserScriptCallback ➜ ${error.message}`);
+        API.log(`userScriptCallback ➜ ${error.message}`);
       }
     }
   }
@@ -514,7 +515,7 @@ browser.userScripts.onBeforeScript.addListener(script => {
       // convert text responseXML to XML DocumentFragment
       response.responseXML &&
         (response.responseXML = document.createRange().createContextualFragment(response.responseXML.trim()));
-      API.callUserScriptCallback(init, type,
+      API.userScriptCallback(init, type,
          typeof response.response === 'string' ? script.export(response) : cloneInto(response, window));
     },
     // ---------- /other background functions --------------

diff --git a/content/default.css b/content/default.css
@@ -6,7 +6,7 @@ body.dark {
   --hover: #888;
   --btn-bg: #666;
   --border: #777;
-  --option-bg: #444;
+  --alt-bg: #444;
   --link: #0ef;
   --dim: #ccc;
 
@@ -27,7 +27,7 @@ body.dark {
     --hover: #eaeaea;
     --btn-bg: #f5f5f5;
     --border: #ddd;
-    --option-bg: #f5f5f5;
+    --alt-bg: #f5f5f5;
     --link: #08f;
     --dim: #777;
 
@@ -64,10 +64,12 @@ section {
 select,
 textarea,
 input[type="number"],
-input[type="text"] {
+input[type="text"],
+input[type="password"],
+input[type="url"] {
   width: 100%;
   color: inherit;
-  background: var(--option-bg);
+  background-color: var(--alt-bg);
   border: 1px solid var(--border);
   border-radius: 0.3em;
 }

diff --git a/content/help.css b/content/help.css
@@ -166,7 +166,7 @@ a[href^="https://developer.chrome.com/"]::before,
 a[href^="https://github.com/"]::before,
 a[href*=".github.io/"]::before {
   content: '';
-  background: url('../image/dino.svg') no-repeat center / contain;
+  background: url('../image/logo/dino.svg') no-repeat center / contain;
   display: inline-block;
   height: 0.9em;
   width: 0.9em;
@@ -178,25 +178,25 @@ a[href*=".github.io/"]::before {
 a[href^="https://blog.mozilla.org/"]::before,
 a[href^="https://developer.mozilla.org/"]::before,
 a[href^="https://www.mozilla.org/"]::before {
-  background-image: url('../image/moz.svg');
+  background-image: url('../image/logo/moz.svg');
   border-radius: 1em;
 }
 
 a[href^="https://bugzilla.mozilla.org/show_bug.cgi?id="]::before {
-  background-image: url('../image/bugzilla.png');
+  background-image: url('../image/logo/bugzilla.png');
 }
 
 a[href^="https://github.com/"]::before,
 a[href*=".github.io/"]::before {
-  background-image: url('../image/github.svg');
+  background-image: url('../image/logo/github.svg');
 }
 
 a[href^="https://codemirror.net/"]::before {
-  background-image: url('../image/codemirror.svg');
+  background-image: url('../image/logo/codemirror.svg');
 }
 
 a[href^="https://developer.chrome.com/"]::before {
-  background-image: url('../image/chrome.svg');
+  background-image: url('../image/logo/chrome.svg');
 }
 
 /* ----- Navigation ----- */
@@ -260,11 +260,11 @@ nav ul::after {
 }
 
 nav li {
-  padding: 0.2em 0.5em;
   white-space: nowrap;
   position: relative;
 }
 
+
 nav li.arrow::after {
   content: '›';
   position: absolute;
@@ -386,7 +386,6 @@ cite::before {
   content: '— source: ';
 }
 
-
 kbd {
   color: #333;
   padding: 0.1em 0.4em;

diff --git a/content/help.html b/content/help.html
@@ -753,7 +753,7 @@ <h3>Editor Area Buttons</h3>
 
           <dt>💿 Storage</dt>
           <dd>View/Edit userscript storage</dd>
-          <dd>Storage value must be a <b>valid JSON</b></dd>
+          <dd>Storage value must be a <b>valid JSON</b> or nothing (v2.66)</dd>
         </dl>
       </dd>
   </dl>
@@ -2109,7 +2109,7 @@ <h1 id="Script-API"><img src="../image/js.svg" alt=""> Script API</h1>
       <tr><th>&nbsp;</th><td colspan="5"></td></tr>
 
       <tr>
-        <th><img src="../image/osi.svg" alt=""> Open Source <a href="https://opensource.org/licenses" title="Open Source Licenses" target="_blank">ⓘ</a></th>
+        <th><img src="../image/logo/osi.svg" alt=""> Open Source <a href="https://opensource.org/licenses" title="Open Source Licenses" target="_blank">ⓘ</a></th>
         <td class="pass"></td>
         <td class="pass"></td>
         <td class="fail"><a href="https://github.com/Tampermonkey/tampermonkey" title="This repository contains the source of the Tampermonkey extension up to version 2.9. All newer versions are distributed under a proprietary license." target="_blank">Proprietary License</a> <a href="https://www.tampermonkey.net/eula.php" target="_blank">EULA</a></td>
@@ -2217,7 +2217,7 @@ <h1 id="Script-API"><img src="../image/js.svg" alt=""> Script API</h1>
       <tr><th>&nbsp;</th><td colspan="4"></td></tr>
 
       <tr>
-        <th><img src="../image/osi.svg" alt=""> Open Source</th>
+        <th><img src="../image/logo/osi.svg" alt=""> Open Source</th>
         <td class="pass"></td>
         <td class="pass"></td>
         <td class="fail"><a href="https://userstyles.org/terms-of-use" target="_blank">Proprietary License</a></td>

diff --git a/content/match.js b/content/match.js
@@ -14,19 +14,20 @@ export class Match {                                        // bg & popup
     }
 
     const urls = [...new Set(frames.map(this.cleanUrl).filter(this.supported))];
+    const tabUrl = this.cleanUrl(tab.url);
     const gExclude = pref.globalScriptExcludeMatches ? pref.globalScriptExcludeMatches.split(/\s+/) : [];
     const containerId = tab.cookieStoreId.substring(8);
 
     // --- background
     if (bg) {
-      return ids.filter(id => pref[id].enabled && this.get(pref[id], tab.url, urls, gExclude, containerId))
+      return ids.filter(id => pref[id].enabled && this.get(pref[id], tabUrl, urls, gExclude, containerId))
         .map(id => (pref[id].js ? '🔹 ' : '🔸 ') + id.substring(1));
     }
 
     // --- popup
     const Tab = [], Other = [];
     ids.sort(Intl.Collator().compare).forEach(item =>
-      (this.get(pref[item], tab.url, urls, gExclude, containerId) ? Tab : Other).push(item));
+      (this.get(pref[item], tabUrl, urls, gExclude, containerId) ? Tab : Other).push(item));
     return [Tab, Other, frames.length];
   }
 

diff --git a/content/nav.js b/content/nav.js
@@ -1,21 +1,23 @@
 // ---------- Navigation -----------------------------------
 export class Nav {
 
-  static process(Script) {
-    const pram = location.search.substring(1);
-    switch (pram) {
-      case 'help':
-        document.getElementById('nav1').checked = true;
-        break;
+  static {
+    document.querySelectorAll('label[for^="nav"]').forEach(i =>
+      this[i.dataset.i18n] = i.control);
+  }
 
-      case 'log':
-        document.getElementById('nav5').checked = true;
-        break;
+  static get(pram = location.search.substring(1)) {
+    if (!pram) { return; }
 
+    this[pram] ? this[pram].checked = true : this.process(pram);
+  }
+
+  static process(pram) {
+    switch (pram) {
       case 'newJS':
       case 'newCSS':
-        document.getElementById('nav4').checked = true;
-        Script.newScript(pram.substring(3).toLowerCase());
+        this['script'].checked = true;
+        document.querySelector(`button[data-i18n^="${pram}"]`)?.click();
         break;
 
       default:

diff --git a/content/options.css b/content/options.css
@@ -3,13 +3,6 @@
 @import 'progress-bar.css';
 @import 'cm.css';
 
-/* ----- Mobile ----- */
-@media screen and (max-width: 600px) {
-  nav label span {
-    display: none;
-  }
-}
-
 /* ----- Aside Scripts ----- */
 :root {
   --aside: 13.5rem;

diff --git a/content/options.html b/content/options.html
@@ -89,11 +89,11 @@
 
     <nav>
       <label for="sidebar" data-i18n="sidebar|title"><img src="../image/sidebars.svg" alt="" style="width: 1.2em;"></label>
-      <label for="nav3"><img src="../image/gear.svg" alt=""> <span data-i18n="options"></span></label>
-      <label for="nav4"><img src="../image/js.svg" alt=""> <span data-i18n="script"></span></label>
-      <label for="nav5">📄 <span data-i18n="log"></span></label>
-      <label for="nav1">🇭 <span data-i18n="help"></span></label>
-      <label for="nav2">🇮 <span data-i18n="about"></span></label>
+      <label for="nav3" data-i18n="options"><img src="../image/gear.svg" alt=""> </label>
+      <label for="nav4" data-i18n="script"><img src="../image/js.svg" alt=""> </label>
+      <label for="nav5" data-i18n="log">📄 </label>
+      <label for="nav1" data-i18n="help">🇭 </label>
+      <label for="nav2" data-i18n="about">🇮 </label>
 
       <label><a href="../locale-maker/locale-maker.html" target="_blank"><img src="../locale-maker/locale-maker.svg" alt="">
         <span>Locale Maker</span></a></label>
@@ -164,7 +164,7 @@
 height: 15em;
 }"></textarea>
 
-            <label><img src="../image/codemirror.svg" alt=""> CodeMirror</label>
+            <label><img src="../image/logo/codemirror.svg" alt=""> CodeMirror</label>
             <p class="description" data-i18n="cmOptionsDescription"></p>
             <textarea id="cmOptions" rows="6" spellcheck="false" autocomplete="off" placeholder="{
 &quot;indentWithTabs&quot;: false,

diff --git a/content/options.js b/content/options.js
@@ -233,7 +233,7 @@ class Script {
       });
     });
 
-    Script.process();
+    this.process();
   }
 
   static processButtons(e) {
@@ -539,7 +539,7 @@ class Script {
     document.querySelectorAll('aside li.on').forEach(item => item !== li && item.classList.remove('on'));
 
     // --- if showing another page
-    document.getElementById('nav4').checked = true;
+    Nav.get('script');
     this.cm?.save();                                        // save CodeMirror to textarea
     if(this.unsavedChanges()) {
       li.classList.remove('on');
@@ -1090,4 +1090,4 @@ ImportExport.init(pref, () => {
 // ---------- /Import/Export Preferences -------------------
 
 // ---------- Navigation -----------------------------------
-Nav.process(Script);
+Nav.get();
diff --git a/content/popup.css b/content/popup.css
@@ -350,7 +350,7 @@ button[data-i18n="undo"] {
 
 .scratchpad h2 img {
   width: 1.2em;
-  vertical-align: bottom;
+  align-self: center;
 }
 
 .scratchpad textarea {
@@ -360,9 +360,13 @@ button[data-i18n="undo"] {
   /* opacity: 0.7; */
 }
 
+#runJS {
+  grid-column: span 3;
+}
+
 img.bin {
   width: 1.2em;
-  cursor: pointer;
+  /* cursor: pointer; */
 }
 /* ----- /Scratchpad ----- */
 

diff --git a/content/popup.html b/content/popup.html
@@ -67,19 +67,21 @@ <h3><label for="main" data-i18n="back"><img src="../image/back.svg" alt=""> </la
         </div>
 
         <div class="scratchpad">
-          <h2><img src="../image/js.svg" alt=""> JavaScript <img class="bin scratchpadJS" src="../image/bin.svg" data-i18n="delete|title" alt=""></h2>
+          <h2><img src="../image/js.svg" alt=""> JavaScript</h2>
           <textarea id="js" rows="8" spellcheck="false"></textarea>
 
           <div class="buttons">
-            <button type="button" id="jsBtn" data-i18n="run">▷ </button>
+            <button type="button" id="runJS" data-i18n="run">▷ </button>
+            <button type="button" id="clearJS" class="bin" data-i18n="delete|title"><img src="../image/bin.svg" alt=""></button>
           </div>
 
-          <h2><img src="../image/css.svg" alt=""> CSS <img class="bin scratchpadCSS" src="../image/bin.svg" data-i18n="delete|title" alt=""></h2>
+          <h2><img src="../image/css.svg" alt=""> CSS</h2>
           <textarea id="css" rows="8" spellcheck="false"></textarea>
 
           <div class="buttons">
-            <button type="button" id="cssBtn" data-i18n="run">▷ </button>
+            <button type="button" id="runCSS" data-i18n="run">▷ </button>
             <button type="button" id="undo" data-i18n="undo">◁ </button>
+            <button type="button" id="clearCSS" class="bin" data-i18n="delete|title"><img src="../image/bin.svg" alt=""></button>
           </div>
         </div>