Merge pull request #566 from mozilla/422-add-custom-sites

Add Custom Sites to the Facebook Container

package.json

@@ -1,6 +1,6 @@
 {
   "name": "contain-facebook",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "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. ",
   "main": "background.js",
   "scripts": {

src/_locales/en/messages.json

@@ -78,21 +78,33 @@
       "message": "These sites need to access your Facebook identity (or know who you are) in order to work. This also means that Facebook can track everything you do on these sites.",
       "description": "This is the second paragraph of the second onboarding panel. Please do not translate \"Facebook Container\""
     },
-    "onboarding3-subhead": {
-      "message": "How do I know Facebook Container is working?",
-      "description": "This is the subhead for the third onboarding panel."
+    "onboarding4-subhead": {
+      "message": "Outside of Facebook",
+      "description": "This is the subhead for the fourth onboarding panel."
     },
-    "onboarding3-p1": {
-      "message": "Buttons that let you like or share things to Facebook or let you log in to websites using your Facebook account contain trackers. Facebook Container will block these trackers and display the fence icon to show you where trackers were removed.",
-      "description": "This is the first paragraph of the third onboarding panel."
+    "onboarding4-p1": {
+      "message": "Even when you’re not on Facebook, Facebook can track you online. Buttons that let you post things to Facebook or log in to websites using your Facebook account contain trackers. Facebook Container will block these trackers and display the fence icon to show you where trackers were removed.",
+      "description": "This is the first paragraph of the fourth onboarding panel."
     },
-    "onboarding3-img": {
+    "onboarding4-img": {
       "message": "This image demonstrates how the Facebook Containers fence icon will appear in-page beside a Facebook Like button.",
-      "description": "This is alternative text for the image shown in the third onboarding panel."
+      "description": "This is alternative text for the image shown in the fourth onboarding panel."
     },
-    "onboarding3-p2": {
-      "message": "However, if you click on any of these buttons Facebook will be able to track you.",
-      "description": "This is the second paragraph on the third onboarding panel."
+    "onboarding5-subhead": {
+      "message": "Logging in With Facebook on Other Sites",
+      "description": "This is the subhead for the fifth onboarding panel."
+    },
+    "onboarding5-p1": {
+      "message": "To use your Facebook login on other sites, you’ll need to move them inside the boundary. Click the fence icon and select ‘Allow Site in Facebook Container’ on the bottom.",
+      "description": "This is the first paragraph of the fifth onboarding panel."
+    },
+    "onboarding5-img": {
+      "message": "This image demonstrates how the button to add a site to the Facebook Container will appear in the panel.",
+      "description": "This is alternative text for the image shown in the fifth onboarding panel."
+    },
+    "onboarding5-p2": {
+      "message": "This lets you log in with Facebook, but allows Facebook to track your activity on that site.",
+      "description": "This is the second paragraph on the fifth onboarding panel."
     },
     "btn-allow": {
       "message": "Allow",

src/manifest.json

@@ -1,10 +1,10 @@
 {
     "manifest_version": 2,
     "name": "Facebook Container",
-    "version": "2.0.3",
+    "version": "2.1.0",
 
     "incognito": "not_allowed",
-    
+
     "default_locale": "en",
 
     "description": "__MSG_extensionDescription__",

src/panel.css

@@ -75,7 +75,7 @@ h2 { /* panel sub-head for all panels */
 
 h2,
 .bold {
-  font-weight: 500;
+  font-weight: 700;
 }
 
 h3 {
@@ -164,6 +164,48 @@ a:hover {
   transform: scale(1.3);
 }
 
+.highlight-on-hover.add-site-to-container::after {
+  width: 16px;
+  background-image: url("/img/site-add-icon.svg");
+}
+
+.highlight-on-hover.remove-site-from-container::after {
+  width: 16px;
+  background-image: url("/img/site-remove-icon.svg");
+}
+
+.highlight-on-hover.remove-site-from-container.disabled-button {
+  cursor: not-allowed;
+  position: relative;
+  z-index: 0;
+}
+
+.highlight-on-hover.remove-site-from-container.disabled-button::after, .highlight-on-hover.remove-site-from-container.disabled-button span {
+  opacity: 0.4;
+}
+
+#button-remove-site-tooltip {
+  display: none;
+  padding: 5px 10px 10px;
+  width: 250px;
+  max-width: 250px;
+  z-index: 9999;
+  position: absolute;
+  left: 1rem;
+  bottom: 2em;
+  color: black;
+  font-size: 13px;
+  line-height: 17px;
+  background-color: var(--grey20);
+  border: 1px solid #BEBEBF;
+  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
+  font-family: "SF Pro Text", 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
+}
+
+.highlight-on-hover.remove-site-from-container.disabled-button:hover #button-remove-site-tooltip {
+  display: block;
+}
+
 .highlight-on-hover span {
   pointer-events: none;
 }
@@ -299,13 +341,20 @@ a:hover {
   background-position: left, center;
 }
 
-.img.onboarding3 {
+.img.onboarding4 {
   background-image: url("/img/image-example@2x.png");
   height: 145px;
   margin: 1rem auto 1.5rem auto;
   background-position: center center;
 }
 
+.img.onboarding5 {
+  background-image: url("/img/image-addsite@2x.png");
+  height: 179px;
+  margin: 1rem auto 1.5rem auto;
+  background-position: center center;
+}
+
 .img {
   display: block;
   min-height: 100px;
@@ -327,7 +376,7 @@ a:hover {
 /* This eliminates (The-Powers-That-Be-Willing) a strange little white gap between
    the bottom edge of the 'bottom-btns' and the bottom edge of the panel. */
 
-.onboarding3 .bottom-btn {
+.onboarding5 .bottom-btn {
   height: 3.41rem;
 }
 

src/panel.js

@@ -21,6 +21,9 @@ const setUpPanel = (panelId) => {
   const fragment = document.createDocumentFragment();
   fragment["id"] = panelId;
 
+  // Clear Panel Notification Dot
+  browser.browserAction.setBadgeText({text: ""});
+
   return { page, fragment };
 };
 
@@ -100,13 +103,41 @@ const addFullWidthButton = (fragment, listenerClass) => {
   return button;
 };
 
+const addTooltip = (wrapper, stringId) => {
+  const div = document.createElement("div");
+  div["id"] = stringId;
+  setClassAndAppend(wrapper, div);
+};
+
 
 const addSpan = (wrapper, stringId) => {
   const span = document.createElement("span");
   span["id"] = stringId;
   setClassAndAppend(wrapper, span);
 };
 
+const getActiveHostname = async() => {
+  const tabsQueryResult = await browser.tabs.query({currentWindow: true, active: true});
+  const currentActiveTab = tabsQueryResult[0];
+  const currentActiveURL = new URL(currentActiveTab.url);
+  const thisHostname = currentActiveURL.hostname;
+  return thisHostname;
+};
+
+const isSiteInContainer = async(panelId) => {
+
+  if (panelId === "on-facebook") {
+    // Site is on default FBC domain. Show the "remove site" button, in a disabled state.
+    return true;
+  }
+
+  const addedSitesList = await browser.runtime.sendMessage("what-sites-are-added");
+  const activeTabHostname = await getActiveHostname();
+
+  if (addedSitesList.includes(activeTabHostname)) {
+    return true;
+  }
+};
 
 const addLearnHowFBCWorksButton = async (fragment) => {
   let button = addFullWidthButton (fragment, "open-onboarding");
@@ -116,6 +147,40 @@ const addLearnHowFBCWorksButton = async (fragment) => {
   addSpan(button, "sites-added-subhead");
 };
 
+const addCustomSiteButton = async (fragment, panelId) => {
+  const shouldShowRemoveSiteButton = await isSiteInContainer(panelId);
+  let button;
+  if (shouldShowRemoveSiteButton) {
+    button = addFullWidthButton(fragment, "remove-site-from-container");
+    addSpan(button, "button-remove-site");
+    addTooltip(button, "button-remove-site-tooltip");
+    return;
+  }
+  button = addFullWidthButton(fragment, "add-site-to-container");
+  addSpan(button, "button-allow-site");
+};
+
+const setCustomSiteButtonEvent = async (panelId) => {
+  const shouldShowRemoveSiteButton = await isSiteInContainer(panelId);
+
+  if (panelId === "on-facebook") {
+    const removeSiteFromContainerLink = document.querySelector(".remove-site-from-container");
+    removeSiteFromContainerLink.classList.add("disabled-button");
+    return;
+  }
+
+  if (shouldShowRemoveSiteButton) {
+    const removeSiteFromContainerLink = document.querySelector(".remove-site-from-container");
+    removeSiteFromContainerLink.addEventListener(
+      "click", async () => removeSiteFromContainer()
+    );
+    return;
+  }
+
+  const addSiteToContainerLink = document.querySelector(".add-site-to-container");
+  addSiteToContainerLink.addEventListener("click", async () => addSiteToContainer());
+
+};
 
 // adds bottom navigation buttons to onboarding panels
 const setNavButtons = (wrapper, button1Id, button2Id, panelId) => {
@@ -188,14 +253,19 @@ const handleOnboardingClicks = async(e, res) => {
   }
 
   if (buttonId === "btn-back") {
+    if (res === 4) {
+      // This accounts for the skipped Panel #3
+      buildOnboardingPanel(2);
+      return;
+    }
     buildOnboardingPanel(res - 1);
   }
 
   // go back to origin panel
   if (el.classList.contains("btn-return")) {
     let currentPanel = await browser.storage.local.get("CURRENT_PANEL");
     currentPanel = currentPanel["CURRENT_PANEL"];
-    buildPanel(currentPanel);
+    await buildPanel(currentPanel);
   }
 };
 
@@ -287,26 +357,40 @@ const buildPanel = async(panelId) => {
     imgDiv.classList.add("img");
   }
 
+  await addLearnHowFBCWorksButton(fragment);
+
   if (panelId === "no-trackers") {
     addLearnMoreLink(contentWrapper);
+    await addCustomSiteButton(fragment, panelId);
   }
 
-  addLearnHowFBCWorksButton(fragment);
+  await addCustomSiteButton(fragment, panelId);
+
   getLocalizedStrings();
   appendFragmentAndSetHeight(page, fragment);
   page.id = panelId;
 
   const onboardingLinks = document.querySelectorAll(".open-onboarding");
   const allowedSitesLink = document.querySelector(".open-allowed-sites");
+
   allowedSitesLink.addEventListener("click", () => buildAllowedSitesPanel("sites-allowed"));
 
+  await setCustomSiteButtonEvent(panelId);
+
   onboardingLinks.forEach(link => {
     link.addEventListener("click", () => buildOnboardingPanel(1));
   });
 };
 
-
 const buildOnboardingPanel = async (panelId) => {
+
+  if (panelId === 3) {
+    // This panel has been depricated, but due to the pagination logic and localization
+    // string ID naming conventions, this number is preserved and skipped over.
+    panelId++;
+  }
+
+
   const stringId = `onboarding${panelId}`;
   const { page, fragment } = setUpPanel(stringId);
 
@@ -326,13 +410,21 @@ const buildOnboardingPanel = async (panelId) => {
     setNavButtons(fragment, "btn-back", "btn-next", stringId);
   }
 
-  if (panelId === 3) {
+  if (panelId === 4) {
+    const imgDiv = addDiv(contentWrapper, stringId);
+    imgDiv.classList.add("img");
+    setNavButtons(fragment, "btn-back", "btn-next", stringId);
+  }
+
+  if (panelId === 5) {
     const imgDiv = addDiv(contentWrapper, stringId);
     imgDiv.classList.add("img");
     setNavButtons(fragment, "btn-back", "btn-done", stringId);
   }
 
-  addParagraph(contentWrapper, `${stringId}-p2`);
+  if (panelId !== 4) {
+    addParagraph(contentWrapper, `${stringId}-p2`);
+  }
 
   getLocalizedStrings();
 
@@ -435,6 +527,21 @@ const buildAllowedSitesPanel = async(panelId) => {
   getLocalizedStrings();
 };
 
+const removeSiteFromContainer = async () => {
+  const activeHostname = await getActiveHostname();
+  await browser.runtime.sendMessage( {removeDomain: activeHostname} );
+  browser.tabs.reload();
+  window.close();
+};
+
+const addSiteToContainer = async () => {
+  const activeHostname = await getActiveHostname();
+  const fbcStorage = await browser.storage.local.get();
+  fbcStorage.domainsAddedToFacebookContainer.push(activeHostname);
+  await browser.storage.local.set({"domainsAddedToFacebookContainer": fbcStorage.domainsAddedToFacebookContainer});
+  browser.tabs.reload();
+  window.close();
+};
 
 const buildRemoveSitePanel = (siteName) => {
   const panelId = "remove-site";
@@ -454,8 +561,10 @@ const buildRemoveSitePanel = (siteName) => {
   blueRemoveButton.id = "remove";
   blueRemoveButton.addEventListener("click", async() => {
     await browser.runtime.sendMessage( {removeDomain: siteName} );
+    browser.tabs.reload();
     window.close();
   });
+
   fragment.appendChild(blueRemoveButton);
 
   getLocalizedStrings();