Merge pull request #321 from mozilla/two-point-oh-pannels

Add "in-fbc" panel.

src/_locales/en/messages.json

@@ -3,6 +3,19 @@
         "message": "Facebook Container isolates your Facebook activity from the rest of your web activity in order to prevent Facebook from tracking you outside of the Facebook website via third party cookies.",
         "description": "Description of the extension. DO NOT TRANSLATE \"Facebook Container\"."
     },
+    "in-fbc-subhead": {
+      "message": "$URL$ is in the Facebook Container.",
+      "description": "This is shown at the top of the panel pop-up when the user is on a Facebook website, which has been automatically opened into Facebook Container. DO NOT TRANSLATE \"Facebook Container\".",
+      "placeholders": {
+          "url": {
+              "content": "$1",
+              "example": "www.facebook.com"
+          }
+      }
+    },
+    "in-fbc-p1": {
+      "message": "Facebook can now track you on this site. To remove this site from Facebook Container, select Sites Allowed in Facebook Container and remove it from the list."
+    },
     "on-facebook-subhead": {
         "message": "On Facebook and Sites in the Facebook Container Boundary",
         "description": "This is shown at the top of the panel pop-up when the user is on a Facebook website, which has been automatically opened into Facebook Container. DO NOT TRANSLATE \"Facebook Container\"."

src/background.js

@@ -424,6 +424,8 @@ async function updateBrowserActionIcon (tab) {
     return;
   }
 
+  const hasBeenAddedToFacebookContainer = await isAddedToFacebookContainer(url);
+
   if (isFacebookURL(url)) {
     // TODO: change panel logic from browser.storage to browser.runtime.onMessage
     // so the panel.js can "ask" background.js which panel it should show
@@ -437,6 +439,8 @@ async function updateBrowserActionIcon (tab) {
       });
       browser.browserAction.setBadgeText({tabId: tab.id, text: " "});
     }
+  } else if (hasBeenAddedToFacebookContainer) {
+    browser.storage.local.set({"CURRENT_PANEL": "in-fbc"});
   } else { 
     const tabState = tabStates[tab.id];
     const panelToShow = (tabState && tabState.trackersDetected) ? "trackers-detected" : "no-trackers";

src/content_script.js

@@ -19,7 +19,7 @@ const LOGIN_PATTERN_DETECTION_SELECTORS = [
   "[data-destination*='facebook']",
   "[data-partner*='facebook']", // AliExpress
   ".join-linkedin-form + .third-party-btn-container button.fb-btn", // LinkedIn
-  "[action*='oauth_connect?from=facebook_login&service=facebook']" // Airbnb
+  "[action*='facebook_login']" // Airbnb
 ];
 
 // TODO: Disarm click events on detected elements
@@ -380,21 +380,32 @@ window.addEventListener("click", function(e){
       closePrompt();
     }
   } else {
-    contentScriptInit(true, "window.addEventListener.click");
+    contentScriptInit(true);
   }
 });
 
+/*
+function removeBadges() {
+  for (let itemClass of facebookDetectedElementsArr) {
+    // positionFacebookBadge(item);
+    const target = document.querySelector("." + itemClass);
+    target.classList.remove("fbc-has-badge");
+    target.classList.remove(itemClass);
+    const badge = document.querySelector(".js-" + itemClass);
+    badge.parentNode.removeChild(badge);
+  }
+}
+*/
+
 let checkForTrackers = true;
 
 browser.runtime.onMessage.addListener(message => {
-  // console.log("browser.runtime.onMessage");
-  // console.log(message["msg"]);
   if ( message["msg"] == "allowed-facebook-subresources" || message["msg"] == "facebook-domain" ) {
+    // Flags function to not add badges to page
     checkForTrackers = false;
   } else {
-    checkForTrackers = true;
     setTimeout(() => {
-      contentScriptInit(true, "browser.runtime.onMessage");
+      contentScriptInit(true, message["msg"]);
     }, 10);
   }
 
@@ -404,31 +415,49 @@ browser.runtime.onMessage.addListener(message => {
 // let callCount = 0;
 let contentScriptDelay = 999;
 
-function contentScriptInit(resetSwitch) {
+function contentScriptInit(resetSwitch, msg) {
   // Second arg is for debugging to see which contentScriptInit fires
   // Call count tracks number of times contentScriptInit has been called
   // callCount = callCount + 1;
   // console.log(call, callCount);
+  // console.log(source, ": ", checkForTrackers);
+  // console.log(msg);
+
   if (resetSwitch) {
     contentScriptDelay = 999;
     contentScriptSetTimeout();
   }
 
-  detectFacebookOnPage();
-  screenUpdate();
+  // Resource call is not in FBC/FB Domain and is a FB resource
+  if (checkForTrackers && msg !== "other-domain") {
+    detectFacebookOnPage();
+    screenUpdate();
+  }
+}
+
+async function checkIfURLShouldBeBlocked() {
+  const siteList = await browser.runtime.sendMessage("what-sites-are-added");
+
+  if (siteList.includes(window.location.host)) {
+    checkForTrackers = false;
+  } else {
+    contentScriptInit(false);
+  }
+
 }
 
+window.onload = checkIfURLShouldBeBlocked();
+
 
-document.addEventListener("DOMContentLoaded", contentScriptInit(false, "DOMContentLoaded"));
-window.onload = contentScriptInit(false, "window.onload");
+// document.addEventListener("DOMContentLoaded", contentScriptInit(false, "DOMContentLoaded"));
+// window.onload = contentScriptInit(false, "window.onload");
+// contentScriptSetTimeout();
 
 function contentScriptSetTimeout() {
   contentScriptDelay = Math.ceil(contentScriptDelay * 2);
-  contentScriptInit(false, "setInterval");
+  contentScriptInit(false);
   if ( contentScriptDelay > 999999 ) {
     return false;
   }
   setTimeout(contentScriptSetTimeout, contentScriptDelay);
 }
-
-contentScriptSetTimeout();

src/panel.css

@@ -258,6 +258,7 @@ a:hover {
   transition: var(--transition);
 }
 
+.in-fbc-subhead::before,
 .trackers-detected-subhead::before {
   background-image: url("/img/fenced-badge.svg");
   background-position: center center;
@@ -267,12 +268,10 @@ a:hover {
   margin-right: 3px;
 }
 
-.on-facebook-img {
+.img.in-fbc {
   background-image: url("/img/[email protected]");
-  height: 170px;
-  background-repeat: no-repeat;
-  display: block;
   background-position: bottom center;
+  height: 170px;
 }
 
 .img.trackers-detected {
@@ -296,6 +295,7 @@ a:hover {
 
 .img,
 .on-facebook-subbhead::before,
+.in-fbc-subhead::before,
 .highlight-on-hover::after,
 .Facebook-text::after,
 .trackers-detected-subhead::before,

src/panel.js

@@ -261,7 +261,7 @@ document.addEventListener("DOMContentLoaded", async () => {
 
 
 // Build non-onboarding panel
-const buildPanel = (panelId) => {
+const buildPanel = async(panelId) => {
   const { page, fragment } = setUpPanel(panelId);
   addHeader(fragment);
 
@@ -279,7 +279,7 @@ const buildPanel = (panelId) => {
     addParagraph(contentWrapper, `${panelId}-p2`);
   }
 
-  if (panelId === "trackers-detected") {
+  if (["trackers-detected", "in-fbc"].includes(panelId)) {
     addLearnMoreLink(contentWrapper);
     const imgDiv = addDiv(contentWrapper, panelId);
     imgDiv.classList.add("img");