Discoverable option to force site-leaking UI in PBM/Incognito.

src/_locales/en/messages.json

@@ -225,6 +225,9 @@
   "Import_accesskey": {
     "message": "I"
   },
+  "OptIncognitoPerm": {
+    "message": "Enable setting permanent permissions in incognito/private tabs.\nBEWARE: doing this can leak site information!"
+  },
   "KeepLocked": {
     "message": "Keep this element locked (recommended)"
   },

src/ui/options.css

@@ -56,19 +56,6 @@ body {
   white-space: nowrap;
 }
 
-.opt-group {
-  display: flex;
-  flex-flow: row wrap;
-  justify-content: flex-start;
-  border-bottom: 1px solid rgba(255, 255, 255, .5);
-  padding: .5em 0;
-}
-
-.opt-group:last-child {
-  border-bottom: none;
-  margin-bottom: .5em;
-}
-
 section form, section fieldset {
   margin: .5em 0;
 }
@@ -77,9 +64,7 @@ fieldset:disabled {
   opacity: .5;
 }
 
-.opt-group > span {
-  margin: 0 .5em;
-}
+
 
 .sect-sites form {
   display: flex;
@@ -146,22 +131,10 @@ button.add {
   appearance: none;
 }
 
-.opt-group {
-  padding: 0.5em 0;
-}
-
 #xssFaq {
   padding: 0.5em 1em;
 }
 
-#tb-options {
-  display: none;
-}
-
-.tor #tb-options {
-  display: initial;
-}
-
 #clearclick-options {
   display: none;
 }

src/ui/options.html

@@ -109,8 +109,8 @@
   <span id="xss-opt">
     <input type="checkbox" id="opt-xss"><label for="opt-xss" id="lbl-xss">__MSG_OptFilterXGet__</label>
     <span id="xssFaq">(<a href="https://noscript.net/faq#xss" title="https://noscript.net/faq#xss">__MSG_XssFaq__</a>)</span>
+    <button id="btn-delete-xss-choices" disabled>__MSG_XSS_clearUserChoices__</button>
   </span>
-  <button id="btn-delete-xss-choices" disabled>__MSG_XSS_clearUserChoices__</button>
   </div>
   <div id="clearclick-options" class="opt-group">
   <input type="checkbox" id="opt-clearclick"><label for="opt-clearclick" id="lbl-clearclick">ClearClick</label>
@@ -119,7 +119,8 @@
   <div id="tb-options" class="opt-group">
     <span id="overrideTorBrowserPolicy-opt">
       <input type="checkbox" id="opt-overrideTorBrowserPolicy">
-        <label for="opt-overrideTorBrowserPolicy" id="lbl-opt-overrideTorBrowserPolicy">__MSG_OptOverrideTorBrowserPolicy__</label>
+        <label for="opt-overrideTorBrowserPolicy" id="lbl-opt-overrideTorBrowserPolicy"
+        ><span class="tor">__MSG_OptOverrideTorBrowserPolicy__</span><span class="not-tor">__MSG_OptIncognitoPerm__</span></label>
     </span>
   </div>
 

src/ui/popup.css

@@ -246,3 +246,19 @@ body {
 .error {
   background-image: url("/img/error64.png");
 }
+
+#incognito-ui-chooser, html.incognito #message:not(.hidden) ~ #incognito-ui-chooser {
+  display: none;
+}
+html.incognito #incognito-ui-chooser {
+  display: initial;
+}
+
+#incognito-ui-chooser label {
+  white-space: pre-wrap;
+}
+
+#incognito-ui-chooser input:checked + label {
+  background: #fff;
+  color: #800;
+}

src/ui/popup.html

@@ -38,6 +38,13 @@
   <label for="opt-highContrast" id="lbl-highContrast">__MSG_HighContrast__</label>
   </span>
 </div>
+<div id="incognito-ui-chooser" class="opt-group">
+  <span id="overrideTorBrowserPolicy-opt">
+    <input type="checkbox" id="opt-overrideTorBrowserPolicy">
+      <label for="opt-overrideTorBrowserPolicy" id="lbl-opt-overrideTorBrowserPolicy"
+      ><span class="tor">__MSG_OptOverrideTorBrowserPolicy__</span><span class="not-tor">__MSG_OptIncognitoPerm__</span></label>
+  </span>
+</div>
 <div id="content"></div>
 <div id="sites"></div>
 <div id="buttons">

src/ui/popup.js

@@ -245,7 +245,14 @@ addEventListener("unload", e => {
     initSitesUI();
     UI.onSettings = initSitesUI;
 
-
+    if (UI.incognito) {
+      UI.wireOption("overrideTorBrowserPolicy", "sync", toggle => {
+          if (UI.forceIncognito !== !toggle) {
+            UI.forceIncognito = !toggle;
+            sitesUI.render();
+          }
+      });
+    }
 
     function initSitesUI() {
       pendingReload(false);
@@ -308,6 +315,7 @@ addEventListener("unload", e => {
       sitesUI.mainDomain = tld.getDomain(sitesUI.mainUrl.hostname);
 
       sitesUI.render(sites);
+      sitesUI.focus();
     }
 
     function reload() {

src/ui/ui.css

@@ -6,16 +6,42 @@ body {
   min-width: 600px;
 }
 
-.mobile > body {
+html.mobile > body {
   font-family: Inter, sans-serif;
   font-size: 4mm;
   min-width: auto;
 }
 
-.mobile .desktop {
+html.mobile .desktop {
   display: none !important;
 }
 
+html:not(.tor) .tor, html.tor .not-tor {
+  display: none;
+}
+html.tor .tor, html:not(.tor) .not-tor {
+  display: initial;
+}
+
+.opt-group {
+  display: flex;
+  flex-flow: row wrap;
+  border-bottom: 1px solid rgba(255, 255, 255, .5);
+  padding: .5em 0;
+}
+
+.opt-group:last-child {
+  border-bottom: none;
+  margin-bottom: .5em;
+}
+
+.opt-group > span {
+  margin: 0 .5em;
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+}
+
 @media (max-width: 100mm) {
   body {
     background-size: 4em !important;

src/ui/ui.js

@@ -14,7 +14,9 @@ var UI = (() => {
 
     async init(tab) {
       UI.tabId = tab ? tab.id : -1;
-      UI.incognito = tab && tab.incognito;
+      document.documentElement.classList.toggle("incognito",
+        UI.incognito = tab && tab.incognito
+      );
       let scripts = [
         "/ui/ui.css",
         "/lib/Messages.js",
@@ -656,7 +658,6 @@ var UI = (() => {
         this.sites = sites;
       }
       this.sort(sorter);
-      window.setTimeout(() => this.focus(), 50);
     }
 
     focus() {