NoScript Options/Appearance/Show synthetic placeholders for invisible capability probes (issue #369).

Author: hackademix

src/_locales/en/messages.json

@@ -155,6 +155,9 @@
   "ShowFullAddresses": {
     "message": "List full addresses in the permissions popup (https://www.noscript.net)"
   },
+  "ShowProbePlaceholders": {
+    "message": "Show synthetic placeholders for invisible capability probes"
+  },
   "SectionGeneral": {
     "message": "General"
   },

src/bg/Defaults.js

@@ -28,6 +28,7 @@ var Defaults = {
         showCtxMenuItem: true,
         showCountBadge: true,
         showFullAddresses: false,
+        showProbePlaceholders: true,
         amnesticUpdates: false,
       },
       sync: {

src/bg/main.js

@@ -230,9 +230,13 @@
       });
     },
     async getTheme(msg, {tab, frameId}) {
+      let code = await Themes.getContentCSS();
+      if (!ns.local.showProbePlaceholders) {
+        code += `\n.__NoScript_Offscreen_PlaceHolders__ {display: none }`;
+      }
       try {
         browser.tabs.insertCSS(tab.id, {
-          code: await Themes.getContentCSS(),
+          code,
           frameId,
           runAt: "document_start",
           matchAboutBlank: true,

src/ui/options.html

@@ -108,6 +108,12 @@ <h3 class="flextabs__tab appearance_tab"><button class="flextabs__toggle">__MSG_
     <label for="opt-showFullAddresses" id="lbl-showFullAddresses">__MSG_ShowFullAddresses__</label>
     </span>
   </div>
+  <div class="opt-group">
+    <span id="showProbePlaceholders-opt">
+    <input type="checkbox" id="opt-showProbePlaceholders">
+    <label for="opt-showProbePlaceholders" id="lbl-showProbePlaceholders">__MSG_showProbePlaceholders__</label>
+    </span>
+  </div>
   <section id="sect-themes">
   <fieldset id="themes">
     <legend>__MSG_settingsThemeLabel__</legend>

src/ui/options.js

@@ -154,6 +154,7 @@ document.querySelector("#version").textContent = _("Version",
   opt("showCountBadge", "local");
   opt("showCtxMenuItem", "local");
   opt("showFullAddresses", "local");
+  opt("showProbePlaceholders", "local");
 
   UI.wireChoice("theme", o => Themes.setup(o && o.value) );
   opt("vintageTheme", async o => await (o ? Themes.setVintage(o.checked) : Themes.isVintage()));