From 324a228e8abfdf6527fa3ea401cb0050000e796e Mon Sep 17 00:00:00 2001
From: ablanathtanalba <daly@eff.org>
Date: Wed, 28 Jul 2021 14:37:56 -0700
Subject: [PATCH 1/5] added i18n messages for widgets section in popup

---
 src/_locales/en_US/messages.json | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/_locales/en_US/messages.json b/src/_locales/en_US/messages.json
index 93c4d9e083..d53efa94fa 100644
--- a/src/_locales/en_US/messages.json
+++ b/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.",

From 4ffad9df5f27fce81ce0a02e2a712829406abf7a Mon Sep 17 00:00:00 2001
From: ablanathtanalba <daly@eff.org>
Date: Wed, 28 Jul 2021 14:42:23 -0700
Subject: [PATCH 2/5] template for widgets section in popup using extant html
 and css

---
 src/skin/popup.css  | 10 +++++++---
 src/skin/popup.html | 13 +++++++++++++
 2 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/skin/popup.css b/src/skin/popup.css
index b811dd412e..0d00fe7b00 100644
--- a/src/skin/popup.css
+++ b/src/skin/popup.css
@@ -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;
     }
diff --git a/src/skin/popup.html b/src/skin/popup.html
index e70393baaa..0cd636c6fe 100644
--- a/src/skin/popup.html
+++ b/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">

From 2e459a3982fa268813e8104c7e0b4d896243474e Mon Sep 17 00:00:00 2001
From: ablanathtanalba <daly@eff.org>
Date: Wed, 28 Jul 2021 14:44:03 -0700
Subject: [PATCH 3/5] basic toggling visibility of widgets section in popup

---
 src/js/popup.js | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/src/js/popup.js b/src/js/popup.js
index 99e3d15d88..24894a6a50 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -220,6 +220,9 @@ 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();
@@ -508,6 +511,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
  */

From 1c04377fba1f172e45fecb1b9fcb32b146230a85 Mon Sep 17 00:00:00 2001
From: ablanathtanalba <daly@eff.org>
Date: Thu, 29 Jul 2021 10:14:58 -0700
Subject: [PATCH 4/5] template for passing replaced widgets from dom to popup

---
 src/js/contentscripts/socialwidgets.js | 10 +++++++++-
 src/js/webrequest.js                   | 10 +++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/js/contentscripts/socialwidgets.js b/src/js/contentscripts/socialwidgets.js
index 5af4b9ee02..7c3ded1e95 100644
--- a/src/js/contentscripts/socialwidgets.js
+++ b/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
+  });
 }
 
 /**
diff --git a/src/js/webrequest.js b/src/js/webrequest.js
index f9005367dd..a90c40d801 100644
--- a/src/js/webrequest.js
+++ b/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"),

From 5ec32ff4bdc48b3ff7d2d09f1ec3eb65db2d71d8 Mon Sep 17 00:00:00 2001
From: ablanathtanalba <daly@eff.org>
Date: Thu, 29 Jul 2021 10:15:37 -0700
Subject: [PATCH 5/5] show replaced widgets popup section only when data, fix
 alignment

---
 src/js/popup.js    | 6 ++++++
 src/skin/popup.css | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/js/popup.js b/src/js/popup.js
index 24894a6a50..95d7772fc3 100644
--- a/src/js/popup.js
+++ b/src/js/popup.js
@@ -229,6 +229,12 @@ function init() {
     $('#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) {
diff --git a/src/skin/popup.css b/src/skin/popup.css
index 0d00fe7b00..85a46b4a8f 100644
--- a/src/skin/popup.css
+++ b/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;