v8.8

src/content/about.html

@@ -14,12 +14,12 @@
 
   <article class="about">
 
-    <h1 id="changelog">Changelog</h1>
+    <h2 id="changelog">Changelog</h2>
     <dl>
       <dt>8.8</dt>
       <dd>Added Show hidden feature</dd>
+      <dd>Fixed an issue with sync (#99)</dd>
       <dd>Updated code to process duplicate hostname:port (#33, #76)</dd>
-      <dd>Updated sync process (#99)</dd>
       <dd>Updated user interface to hide patterns on FoxyProxy Basic</dd>
 
       <dt>8.7</dt>
@@ -106,7 +106,7 @@ <h1 id="changelog">Changelog</h1>
       <dd>Updated User Interface</dd>
     </dl>
 
-    <h1 id="credits">Credits</h1>
+    <h2 id="credits">Credits</h2>
     <dl>
 
       <dt>Developer</dt>

src/content/app.js

@@ -31,6 +31,7 @@ export class App {
 
   // ---------- User Preferences ---------------------------
   static defaultPref = JSON.stringify(pref);
+  // not syncing mode & sync (to have a choice), data (will be broken into parts)
   static syncProperties = Object.keys(pref).filter(i => !['mode', 'sync', 'data'].includes(i));
 
   static getDefaultPref() {

src/content/help.html

@@ -453,9 +453,12 @@ <h2 id="options">Options</h2>
     <p>Some options are not available in Chrome, but have been left for when sharing preferences between Chrome & Firefox.</p>
 
     <h3 id="enable-storage-sync">Enable Storage Sync</h3>
-    <p>Enable to sync storage if it is under 100KB. If the storage is over 100KB, there will be a notification and the
-      Sync will be turned off automatically to avoid repeated errors.</p>
-      <p class="note">Storage Sync is disabled on managed storage.</p>
+    <p>Enable to sync storage if it is under 100KB. If the storage is over 100KB, there will be a notification and the Sync will be turned off automatically to avoid repeated errors.</p>
+    <ul>
+      <li>Sync is disabled on managed storage</li>
+      <li>At the moment, Firefox does not support sync to Firefox on Android</li>
+      <li>Mode & Sync option is not synced to give users choice on different machines</li>
+    </ul>
 
 
     <blockquote>
@@ -488,7 +491,7 @@ <h5>Storage quotas for sync data</h5>
     </div>
 
     <h3 id="auto-backup">Auto Backup</h3>
-    <p>Automatically backup settings to the browser configured Downloads folder on save</p>
+    <p>Automatically backup settings to the browser configured downloads folder on save</p>
 
 
     <h3 id="limit-webrtc">Limit WebRTC <span>(requires "privacy" permission)</span></h3>
@@ -533,9 +536,6 @@ <h3 id="keyboard-shortcut">Keyboard Shortcut <span>(not available on Android)</s
     <h3 id="global-exclude">Global Exclude</h3>
     <p>List of hosts that should not be proxied</p>
 
-    <!-- <p>List of hostnames or IP addresses that will not be proxied.</p>
-    <p>A comma-separated list of hosts which should not be proxied.</p> -->
-
     <ul>
       <li>Connections to <code>localhost</code>, <code>127.0.0.1/8</code>, and <code>::1</code> are never proxied (by the browser)</li>
       <li>The passthrough implementation is slightly different in Chrome and Firefox</li>
@@ -544,8 +544,6 @@ <h3 id="global-exclude">Global Exclude</h3>
       <li>Supported formats are listed under passthrough in each section</li>
       <li>Scheme is supported by FoxyProxy and Chrome, but not Firefox (PAC URL)</li>
       <!-- <li>In Firefox, "*" is supported only at the beginning of domain filters (*.mozilla.org)</li> -->
-      <!-- <li>At the moment, CIDR in passthrough is not supported by FoxyProxy</li> -->
-
       <li>CIDR only applies to URLs that are IP literals and does not block hostnames that resolve to the IP address range (<code>10.0.0.0/8</code> is not "no proxy for intranet hostnames")</li>
       <li>Only IPv4 CIDR is implemented by FoxyProxy</li>
       <li>The literal string <code>&lt;local&gt;</code> matches simple hostnames (no dots)</li>
@@ -698,20 +696,19 @@ <h3 id="save">Save</h3>
 
 
     <h2 id="proxies">Proxies</h2>
-    <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. <i>(v8.8)</i></p>
+
+    <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. <i>(v8.8)</i></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>
 
-      <p>Another solution is to prepend hostnames where possible e.g. <code>&lt;sometext&gt;.localhost</code> since they all resolve to <code>127.0.0.1</code> internally.</p>
+    <p>Another solution is to prepend hostnames where possible e.g. <code>&lt;sometext&gt;.localhost</code> since they all resolve to <code>127.0.0.1</code> internally.</p>
 
-      <p class="warning">For Unix Domain Sockets, where port is ignored, only numbers should be used.</p>
-    </div>
 
     <h3>Proxy</h3>
 
@@ -731,12 +728,12 @@ <h3>Individual Proxy</h3>
     <p class="warning">If FoxyProxy is to set to use an Individual Proxy/PAC, editing proxy's hostname, port, or PAC URL, may result in a mismatch until it is set again.</p>
 
     <dl>
-      <dt>⎘ Duplicate Proxy</dt>
-      <dd>Click to duplicate proxy and its patterns</dd>
-
       <dt>Toggle Button</dt>
       <dd>Toggle proxy active or inactive</dd>
-      <dd>Inactive proxies do not show in toolbar popup select</dd>
+      <dd>Inactive proxies do not show in the toolbar popup select</dd>
+
+      <dt>⎘ Duplicate Proxy</dt>
+      <dd>Click to duplicate proxy and its patterns</dd>
 
       <dt>Delete</dt>
       <dd>Delete the proxy and its patterns</dd>

src/content/iframe.css

@@ -23,36 +23,46 @@ article {
   background-color: var(--bg);
 }
 
-h1, h2 {
-  font-weight: normal;
-}
 
-h1 {
+/* ----- h1-h5 ----- */
+h2 {
   color: var(--header);
   font-size: 2.2em;
   border-bottom: 1px solid var(--border);
+  font-weight: normal;
 }
 
-h2 {
+h2:first-of-type {
+  margin-top: 0;
+}
+
+h3 {
   color: var(--nav-hover);
   font-size: 1.5em;
+  font-weight: normal;
 }
 
-:not(h1) + h2 {
+h4 {
+  font-size: 1.2em;
+}
+
+h5 {
+  font-size: 1em;
+}
+
+:not(h2) + h3 {
   margin-top: 1.5em;
 }
 
-:is(h1, h2, h3, h4) span {
+:is(h1, h2, h3, h4, h5) span {
   color: var(--dim);
   font-size: 0.8em;
   font-style: italic;
   font-weight: normal;
   margin-left: 0.5em;
 }
+/* ----- /h1-h5 ----- */
 
-/* h3 {
-  font-size: 1.2em;
-} */
 
 p {
   margin-top: 0.5em;
@@ -288,24 +298,25 @@ td.code {
 }
 
 /* ----- Translate ----- */
-div.translate {
+.translate {
   display: grid;
   grid-auto-flow: column;
   justify-content: end;
   align-items: center;
   gap: 0.5em;
+  padding: 1em 1em 0;
+  background-color: var(--bg);
 }
 
-div.translate select {
+.translate select {
   width: auto;
 }
 
-div.translate input[type="submit"] {
+.translate input[type="submit"] {
   color: inherit;
   background-color: var(--alt-bg);
   border: 1px solid var(--border);
   border-radius: 0.3em;
   padding: 0.2em 0.5em;
 }
-
 /* ----- /Translate ----- */