Widget options in popup

src/_locales/en_US/messages.json

@@ -445,6 +445,14 @@
             }
         }
     },
+    "popup_info_replaced_widgets": {
+        "message": "Some widgets have been temporarily replaced",
+        "description": "Clickable status header text in the popup. Shown when a media widget like Spotify embed or Disqus comment section has been temporarily replaced by Privacy Badger with a click-to-activate placeholder."
+    },
+    "popup_info_widgets_description": {
+        "message": "Some embedded content on this page might be used to track you, so Privacy Badger has temporarily replaced them. You can click to activate them here or on the page itself.",
+        "description": "Clickable status header text in the popup. Shown when a media widget like Spotify embed or Disqus comment section has been temporarily replaced by Privacy Badger with a click-to-activate placeholder."
+    },
     "popup_instructions": {
         "message": "$COUNT$ potential $LINK_START$trackers$LINK_END$ blocked",
         "description": "Popup message shown when at least one tracker was blocked.",

src/js/contentscripts/socialwidgets.js

@@ -652,13 +652,21 @@ a:hover {
  */
 function replaceIndividualButton(widget) {
   let selector = widget.buttonSelectors.join(','),
-    elsToReplace = document.querySelectorAll(selector);
+    elsToReplace = document.querySelectorAll(selector),
+    replacedWidgetsForPopup = [];
 
   elsToReplace.forEach(function (el) {
     createReplacementElement(widget, el, function (replacementEl) {
       el.parentNode.replaceChild(replacementEl, el);
+      // populate the replacedWidgetsForPopup array with each replaced el info, then ship off to popup
+      replacedWidgetsForPopup.push(replacementEl);
     });
   });
+
+  chrome.runtime.sendMessage({
+    type: "sendReplacedWidgetsToPopup",
+    replacementElements: replacedWidgetsForPopup
+  });
 }
 
 /**

src/js/popup.js

@@ -220,12 +220,21 @@ function init() {
   // add event listeners for click-to-expand first party protections popup section
   $('#firstparty-protections-header').on('click', toggleFirstPartyInfoHandler);
 
+  // add event listeners for click-to-expand widgets section
+  $('#replaced-widgets-header').on('click', toggleWidgetsSectionHandler);
+
   // show firstparty protections message if current tab is in our content scripts
   if (POPUP_DATA.enabled && POPUP_DATA.isOnFirstParty) {
     $("#firstparty-protections-container").show();
     $('#expand-firstparty-popup').show();
   }
 
+  // show replaced widgets section if there's more than zero replaced widgets on page
+  if (POPUP_DATA.enabled && POPUP_DATA.replacedWidgets.length) {
+    $('#replaced-widgets-container').show();
+    $('#expand-widgets-popup').show();
+  }
+
   // improve on Firefox's built-in options opening logic
   if (typeof browser == "object" && typeof browser.runtime.getBrowserInfo == "function") {
     browser.runtime.getBrowserInfo().then(function (info) {
@@ -508,6 +517,21 @@ function toggleFirstPartyInfoHandler() {
   }
 }
 
+/**
+ * Click handler for showing/hiding the replaced widgets section
+ */
+function toggleWidgetsSectionHandler() {
+  if ($('#collapse-widgets-popup').is(":visible")) {
+    $("#collapse-widgets-popup").hide();
+    $("#expand-widgets-popup").show();
+    $("#instructions-widgets-description").slideUp();
+  } else {
+    $("#collapse-widgets-popup").show();
+    $("#expand-widgets-popup").hide();
+    $("#instructions-widgets-description").slideDown();
+  }
+}
+
 /**
  * Handler to undo user selection for a tracker
  */

src/js/webrequest.js

@@ -34,7 +34,8 @@ let constants = require("constants"),
 
 /************ Local Variables *****************/
 let tempAllowlist = {},
-  tempAllowedWidgets = {};
+  tempAllowedWidgets = {},
+  replacedWidgets = [];
 
 /***************** Blocking Listener Functions **************/
 
@@ -1060,6 +1061,12 @@ function dispatcher(request, sender, sendResponse) {
     break;
   }
 
+  case "sendReplacedWidgetsToPopup": {
+    // this new set of replaced widgets on a given page should completely replace what might already be on badger object
+    replacedWidgets = request.replacedWidgets;
+    break;
+  }
+
   case "getPopupData": {
     let tab_id = request.tabId;
 
@@ -1091,6 +1098,7 @@ function dispatcher(request, sender, sendResponse) {
       isOnFirstParty: utils.firstPartyProtectionsEnabled(tab_host),
       noTabData: false,
       origins,
+      replacedWidgets: replacedWidgets,
       settings: badger.getSettings().getItemClones(),
       showLearningPrompt: badger.getPrivateSettings().getItem("showLearningPrompt"),
       showWebRtcDeprecation: !!badger.getPrivateSettings().getItem("showWebRtcDeprecation"),

src/skin/popup.css

@@ -169,7 +169,7 @@ button {
 }
 
 /* body#main to avoid applying this to options page */
-body#main #blockedResourcesContainer, #special-browser-page, #disabled-site-message {
+body#main #blockedResourcesContainer, #special-browser-page, #disabled-site-message, #replaced-widgets-container {
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -303,7 +303,7 @@ body#main #pbInstructions a, #firstparty-protections-container a, #webrtc-deprec
 body#main #pbInstructions a:hover, #firstparty-protections-container a:hover, #webrtc-deprecation-div a:hover, #donate a:hover {
     color: #ec9329;
 }
-#instructions-firstparty-description {
+#instructions-firstparty-description, #instructions-widgets-description {
     font-size: 14px;
     background-color: #e8e9ea;
     color: #555;
@@ -476,6 +476,10 @@ div.overlay.active {
     margin: 10px 0;
     padding-bottom: 5px;
 }
+#replaced-widgets-container {
+    border-bottom: 1px solid #d3d3d3;
+    padding-bottom: 5px;
+}
 .basic-header {
     text-align: center;
     margin: 15px 0;
@@ -582,7 +586,7 @@ div.overlay.active {
         color: #fff;
     }
 
-    #firstparty-protections-container {
+    #firstparty-protections-container, #replaced-widgets-container {
         border-bottom: 1px solid #555;
     }
 
@@ -618,7 +622,7 @@ div.overlay.active {
         background-color: #3a3a3a;
      }
 
-    #instructions-firstparty-description {
+    #instructions-firstparty-description, #instructions-widgets-description {
         background-color: #3a3a3a;
         color: #ddd;
     }

src/skin/popup.html

@@ -144,6 +144,19 @@ <h2 id="title-name"><span class="i18n_name"></span></h2>
   <div id="instructions-firstparty-description" class="i18n_popup_info_firstparty_description" style="display:none"></div>
 </div>
 
+<div id="replaced-widgets-container" style="display:none">
+  <button class="toggle-header" id="replaced-widgets-header">
+    <div class="toggle-header-title">
+      <span class="i18n_popup_info_replaced_widgets popup_info"></span>
+    </div>
+    <span class="toggle-header-icon">
+      <span id="expand-widgets-popup" class="ui-icon ui-icon-caret-d" style="display:none"></span>
+      <span id="collapse-widgets-popup" class="ui-icon ui-icon-caret-u" style="display:none"></span>
+    </span>
+  </button>
+  <div id="instructions-widgets-description" class="i18n_popup_info_widgets_description" style="display:none"></div>
+</div>
+
 <div id="blockedResourcesContainer">
   <div id="pbInstructions">
     <button class="toggle-header" id="tracker-list-header" style="display:none">