v8.8

src/content/about.html

@@ -16,6 +16,10 @@
 
     <h1 id="changelog">Changelog</h1>
     <dl>
+      <dt>8.8</dt>
+      <dd>Added Show hidden feature</dd>
+      <dd>Updated code to process duplicate hostname:port (#33, #76)</dd>
+
       <dt>8.7</dt>
       <dd>Added Auto Backup feature</dd>
       <dd>Added FoxyProxy Basic detection (disabled for now)</dd>
@@ -53,7 +57,7 @@ <h1 id="changelog">Changelog</h1>
       <dd>Added PAC view feature</dd>
       <dd>Fixed an issue with empty Global Exclude</dd>
       <dd>Fixed an issue with upgrade sync data on Firefox (#53)</dd>
-      <dd>Updated hostname check to allow "file:" for Unix domain socket (#47)</dd>
+      <dd>Updated hostname check to allow "file:" for Unix Domain Socket (#47)</dd>
       <dd>Updated PAC check to allow "file:" (#49)</dd>
       <dd>Updated user interface to disable inapplicable options in proxies</dd>
 

src/content/app.js

@@ -85,7 +85,13 @@ export class App {
     return url;
   }
 
-  static findProxy() {
+  static findProxy({pref, value, pac = false}) {
+    const arr = pref.data.filter(i => value === i.pac || [i.hostname, i.port, i.username, i.password].join(':'));
+    // not found [] or found only one
+    if (!arr[1]) { return arr[0]; }
+
+    // found more than one
+
 /*
     // action
     const item = pref.data.find(i => pref.mode === (i.type === 'pac' ? i.pac : `${i.hostname}:${i.port}`));

src/content/help.html

@@ -371,6 +371,8 @@ <h2>Light/Dark Theme</h2>
     <h2 class="experimental">Firefox on Android</h2>
     <p>Support is experimental and based on user feedback.</p>
 
+    <h2>Show Hidden Elements</h2>
+    <p>Some elements on the Toolbar Popup and Options page are disabled or hidden in FoxyProxy Basic and/or on Chrome. You can toggle to view/enable them by clicking the FoxyProxy icon (on the top of the page).</p>
 
     <h1 id="how-to-use">How to Use</h1>
 
@@ -687,6 +689,17 @@ <h2 id="save">Save</h2>
 
 
     <h1 id="proxies">Proxies</h1>
+    <div class="note">
+      <p>FoxyProxy identifies proxies by their "hostname:post" or PAC URL.</p>
+      <p>In case more than one proxy with the same "hostname:post" is needed, one or more letters can be added to the port to separate them, and FoxyProxy will remove the letters later.</p>
+<pre>
+127.0.0.1:9050
+127.0.0.1:9050a
+127.0.0.1:9050b
+127.0.0.1:9050c
+</pre>
+      <p class="warning">For Unix Domain Sockets, where port is ignored, only numbers should be used.</p>
+    </div>
 
     <h2>Proxy</h2>
 

src/content/on-request.js

@@ -140,7 +140,7 @@ export class OnRequest {
     const {type, hostname: host, port, username, password, proxyDNS} = proxy;
     if (type === 'direct') { return {type: 'direct'}; }
 
-    const response = {type, host, port};
+    const response = {type, host, port: parseInt(port)};    // port 'number', prepare for augmented port
 
     // https://searchfox.org/mozilla-central/source/toolkit/components/extensions/ProxyChannelFilter.sys.mjs#49
     // API uses socks for socks5

src/content/options.css

@@ -400,6 +400,10 @@ details div.content {
   padding-left: 2em;
 }
 
+details.proxy .content * {
+  transition: opacity 0.5s;
+}
+
 details.proxy.off {
   display: none;
 }
@@ -571,26 +575,26 @@ details.proxy:not([data-type="socks5"]) :is([data-i18n="proxyDNS"], [data-id="pr
 }
 
 /* --- Chrome --- */
-details.proxy[data-type="socks5"][data-chrome] :is(
+.chrome details.proxy[data-type="socks5"] :is(
   [data-i18n="username"], [data-id="username"],
   [data-i18n="password"], .password) {
   opacity: 0.3;
   pointer-events: none;
   user-select: none;
 }
 
-details.proxy[data-chrome] :is([data-i18n="proxyDNS"], [data-id="proxyDNS"]) {
+.chrome :is([data-i18n="proxyDNS"], [data-id="proxyDNS"]) {
   opacity: 0.3;
   pointer-events: none;
   user-select: none;
 }
 
 /* --- Basic --- */
-div.proxy-div.basic :is(.pattern-head, .pattern-box) {
+.basic :is(.pattern-head, .pattern-box) {
   display: none;
 }
 
-/* ----- hide/show elements ----- */
+/* ----- /hide/show elements ----- */
 
 /* ----- Popup ----- */
 div.popup {

src/content/options.html

@@ -142,7 +142,7 @@
     <!-- /user options -->
 
     <!-- proxy -->
-    <section class="proxySection">
+    <section class="proxySection show-js">
 
       <fieldset class="proxySection">
 
@@ -619,7 +619,7 @@
         </thead>
         <tbody>
           <tr>
-            <td class="unavailable" colspan="10" data-i18n="notAvailable"></td>
+            <td class="unavailable" colspan="11" data-i18n="notAvailable"></td>
         </tr>
         </tbody>
       </table>

src/content/options.js

@@ -7,6 +7,7 @@ import {Color} from './color.js';
 import {Nav} from './nav.js';
 import {Spinner} from './spinner.js';
 import {Log} from './log.js';
+import './show.js';
 import './i18n.js';
 
 // ---------- Popup --------------------------------------
@@ -465,7 +466,9 @@ class Proxies {
     Log.mode = pref.mode;
 
     // --- hide elements for Basic
-    App.basic && this.proxyDiv.classList.add('basic');
+    // const showJS = document.querySelector('.show-js');
+    // App.basic && showJS.classList.add('basic');
+    // !App.firefox && showJS.classList.add('chrome');
 
     this.process();
   }
@@ -588,7 +591,6 @@ class Proxies {
 
     // hide/show elements
     pxy.dataset.type = item.type;
-    App.firefox || (pxy.dataset.chrome = true);
 
     const id = item.type === 'pac' ? item.pac : `${item.hostname}:${item.port}`;
     this.proxyCache[id] = item;                             // cache to find later

src/content/popup.css

@@ -155,4 +155,27 @@ div.host button:hover {
 
 div.host select {
   grid-column: span 2;
-}
+}
+
+/* ----- hide/show elements ----- */
+
+/* --- Chrome --- */
+section.chrome .firefox {
+  opacity: 0.3;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* ---managed --- */
+section.managed .local {
+  opacity: 0.3;
+  pointer-events: none;
+  user-select: none;
+}
+
+/* --- Basic --- */
+section.basic .pattern {
+  display: none;
+}
+
+/* ----- /hide/show elements ----- */

src/content/popup.html

@@ -9,11 +9,11 @@
   </head>
   <body>
     <article>
-      <section>
+      <section class="show-js">
         <h1 data-i18n="extensionName"><img src="../image/icon.svg" alt=""> </h1>
 
         <div class="list">
-          <label>
+          <label class="pattern">
             <span class="flag"><img src="../image/power.svg" alt=""></span>
             <span class="title" data-i18n="proxyByPatterns"></span>
             <input type="radio" name="server" value="pattern">

src/content/popup.js

@@ -1,5 +1,6 @@
 import {pref, App} from './app.js';
 import {Location} from './location.js';
+import './show.js';
 import './i18n.js';
 
 // ---------- User Preferences -----------------------------
@@ -16,10 +17,11 @@ class Popup {
     this.select = document.querySelector('select');
     this.proxyCache = {};                                   // used to find proxy
 
+    // this.showJS = document.querySelector('.show-js');
     // disable buttons on Chrome
-    !App.firefox && document.querySelectorAll('.firefox').forEach(i => i.disabled = true);
+    // !App.firefox && this.showJS.classList.add('chrome');
     // disable buttons on storage.managed
-    pref.managed && document.querySelectorAll('.local').forEach(i => i.disabled = true);
+    pref.managed && this.list.parentElement.classList.add('managed');
 
     // --- proxy filter
     const filter = document.querySelector('#filter');
@@ -33,8 +35,8 @@ class Popup {
     const labelTemplate = document.querySelector('template').content.firstElementChild;
     const docFrag = document.createDocumentFragment();
 
-    // check if there are patterns, hide elements for Basic
-    if (App.basic || !pref.data.some(i => i.active && i.include[0])) {
+    // check if there are patterns
+    if (!pref.data.some(i => i.active && i.include[0])) {
       this.list.children[0].style.display = 'none';         // hide option if there are no patterns
       pref.mode === 'pattern' && (pref.mode = 'disable');   // show as disable
     }

src/content/proxy.js

@@ -46,9 +46,11 @@ export class Proxy {
     }
   }
 
+  // https://searchfox.org/mozilla-central/source/toolkit/components/extensions/parent/ext-proxy.js#207
+  // throw new ExtensionError("proxy.settings is not supported on android.");
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1725981
+  // proxy.settings is not supported on Android
   static async getSettings() {
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1725981
-    // proxy.settings is not supported on Android
     if (App.android) { return {}; }
 
     const conf = await browser.proxy.settings.get({});
@@ -102,8 +104,6 @@ export class Proxy {
     // update OnRequest
     OnRequest.init(pref);
 
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1725981
-    // proxy.settings is not supported on Android
     if (App.android) { return; }
 
     // Incognito Access
@@ -184,7 +184,7 @@ export class Proxy {
       singleProxy: {
         scheme: pxy.type,
         host: pxy.hostname,
-        port: pxy.port*1                                    // must be number
+        port: parseInt(pxy.port)                            // must be number, prepare for augmented port
       },
       bypassList: pref.passthrough ? pref.passthrough.split(/[\s,;]+/) : []
     };
@@ -266,7 +266,7 @@ String.raw`function FindProxyForURL(url, host) {
       default:
         type = type.toUpperCase();
     }
-    return `${type} ${hostname}:${port}`;
+    return `${type} ${hostname}:${parseInt(port)}`;           // prepare for augmented port
   }
 
   // ---------- Quick Add/Exclude Host ---------------------

src/content/show.js

@@ -0,0 +1,26 @@
+import {App} from './app.js';
+
+// ---------- Show (Side Effect) -----------
+// eslint-disable-next-line no-unused-vars
+class Show {
+
+  static {
+    // --- hide elements for Basic
+    this.showJS = document.querySelector('.show-js');
+    this.add();
+
+    const elem = document.querySelector('img[src="../image/icon.svg"]');
+    elem?.addEventListener('click', () => this.added ? this.remove() : this.add());
+  }
+
+  static add() {
+    this.added = true;
+    App.basic && this.showJS?.classList.add('basic');
+    !App.firefox && this.showJS?.classList.add('chrome');
+  }
+
+  static remove() {
+    this.added = false;
+    this.showJS?.classList.remove('basic', 'chrome');
+  }
+}