Adding container assignment exemption on confirm prompt. Fixes #500

.stylelintrc

@@ -11,7 +11,7 @@
     "declaration-block-no-duplicate-properties": true,
     "order/declaration-block-properties-alphabetical-order": true,
     "property-blacklist": [
-      "/height/",
+      "/(min[-]|max[-])height/",
       "/width/",
       "/top/",
       "/bottom/",

webextension/background.js

@@ -70,6 +70,18 @@ const assignManager = {
     }
   },
 
+  // We return here so the confirm page can load the tab when exempted
+  async _exemptTab(m) {
+    const pageUrl = m.pageUrl;
+    // If we have existing data and for some reason it hasn't been deleted etc lets update it
+    const siteSettings = await this.storageArea.get(pageUrl);
+    if (siteSettings) {
+      siteSettings.exempted.push(m.tabId);
+      await this.storageArea.set(pageUrl, siteSettings);
+    }
+    return true;
+  },
+
   init() {
     browser.contextMenus.onClicked.addListener((info, tab) => {
       const userContextId = this.getUserContextIdFromCookieStore(tab);
@@ -81,7 +93,8 @@ const assignManager = {
           actionName = "added";
           storageAction = this.storageArea.set(info.pageUrl, {
             userContextId,
-            neverAsk: false
+            neverAsk: false,
+            exempted: []
           });
         } else {
           actionName = "removed";
@@ -117,11 +130,12 @@ const assignManager = {
         const userContextId = this.getUserContextIdFromCookieStore(tab);
         if (!siteSettings
             || userContextId === siteSettings.userContextId
-            || tab.incognito) {
+            || tab.incognito
+            || siteSettings.exempted.includes(tab.id)) {
           return {};
         }
 
-        this.reloadPageInContainer(options.url, siteSettings.userContextId, tab.index + 1, siteSettings.neverAsk);
+        this.reloadPageInContainer(options.url, userContextId, siteSettings.userContextId, tab.index + 1, siteSettings.neverAsk);
         this.calculateContextMenu(tab);
 
         /* Removal of existing tabs:
@@ -209,11 +223,12 @@ const assignManager = {
     }
   },
 
-  reloadPageInContainer(url, userContextId, index, neverAsk = false) {
+  reloadPageInContainer(url, currentUserContextId, userContextId, index, neverAsk = false) {
+    const cookieStoreId = backgroundLogic.cookieStoreId(userContextId);
     const loadPage = browser.extension.getURL("confirm-page.html");
     // If the user has explicitly checked "Never Ask Again" on the warning page we will send them straight there
     if (neverAsk) {
-      browser.tabs.create({url, cookieStoreId: backgroundLogic.cookieStoreId(userContextId), index});
+      browser.tabs.create({url, cookieStoreId, index});
       backgroundLogic.sendTelemetryPayload({
         event: "auto-reload-page-in-container",
         userContextId: userContextId,
@@ -223,8 +238,17 @@ const assignManager = {
         event: "prompt-to-reload-page-in-container",
         userContextId: userContextId,
       });
-      const confirmUrl = `${loadPage}?url=${url}`;
-      browser.tabs.create({url: confirmUrl, cookieStoreId: backgroundLogic.cookieStoreId(userContextId), index}).then(() => {
+      let confirmUrl = `${loadPage}?url=${encodeURIComponent(url)}&cookieStoreId=${cookieStoreId}`;
+      let currentCookieStoreId;
+      if (currentUserContextId) {
+        currentCookieStoreId = backgroundLogic.cookieStoreId(currentUserContextId);
+        confirmUrl += `&currentCookieStoreId=${currentCookieStoreId}`;
+      }
+      browser.tabs.create({
+        url: confirmUrl,
+        cookieStoreId: currentCookieStoreId,
+        index
+      }).then(() => {
         // We don't want to sync this URL ever nor clutter the users history
         browser.history.deleteUrl({url: confirmUrl});
       }).catch((e) => {
@@ -354,7 +378,7 @@ const messageHandler = {
   LAST_CREATED_TAB_TIMER: 2000,
 
   init() {
-    // Handles messages from webextension/js/popup.js
+    // Handles messages from webextension code
     browser.runtime.onMessage.addListener((m) => {
       let response;
 
@@ -372,11 +396,14 @@ const messageHandler = {
       case "neverAsk":
         assignManager._neverAsk(m);
         break;
+      case "exemptContainerAssignment":
+        response = assignManager._exemptTab(m);
+        break;
       }
       return response;
     });
 
-    // Handles messages from index.js
+    // Handles messages from sdk code
     const port = browser.runtime.connect();
     port.onMessage.addListener(m => {
       switch (m.type) {

webextension/confirm-page.html

@@ -8,22 +8,21 @@
 <body>
   <main>
     <div class="title">
-      <h1 class="title-text">Should we open this in your container?</h1>
+      <h1 class="title-text">Open this site in your assigned container?</h1>
     </div>
     <form id="redirect-form">
       <p>
-        Looks like you requested:
+        You asked <dfn id="browser-name" title="Thanks for trying out Containers. Sorry we may have got your browser name wrong. #FxNightly" >Firefox</dfn> to always open <dfn class="container-name"></dfn> for this site:<br />
       </p>
       <div id="redirect-url"></div>
-      <p>
-        You asked <dfn id="browser-name" title="Thanks for trying out Containers. Sorry we may have got your browser name wrong. #FxNightly" >Firefox</dfn> to always open <dfn id="redirect-site"></dfn> in <dfn>this</dfn> type of container. Would you like to proceed?<br />
-      </p>
+      <p>Would you still like to open in this current container?</p>
       <br />
       <br />
       <input id="never-ask" type="checkbox" /><label for="never-ask">Remember my decision for this site</label>
       <br />
       <div class="button-container">
-        <button id="confirm" class="button primary" autofocus>Take me there</button>
+        <button id="deny" class="button">Open in <dfn id="current-container-name">Current</dfn> Container</button>
+        <button id="confirm" class="button primary" autofocus>Open in <dfn class="container-name"></dfn> Container</button>
       </div>
     </form>
   </main>

webextension/css/confirm-page.css

@@ -4,11 +4,21 @@
 }
 
 main {
-  background: url(/img/onboarding-1.png) no-repeat;
+  background: url(/img/onboarding-4.png) no-repeat;
   background-position: -10px -15px;
-  background-size: 285px;
-  margin-inline-start: -285px;
-  padding-inline-start: 285px;
+  background-size: 300px;
+  margin-inline-start: -350px;
+  padding-inline-start: 350px;
+}
+
+.container-name {
+  font-weight: bold;
+}
+
+button .container-name,
+#current-container-name {
+  font-weight: bold;
+  text-transform: capitalize;
 }
 
 @media only screen and (max-width: 1300px) {
@@ -36,6 +46,28 @@ html {
   word-break: break-all;
 }
 
+#redirect-url {
+  background: #efefef;
+  border-radius: 2px;
+  line-height: 1.5;
+  padding-block-end: 0.5rem;
+  padding-block-start: 0.5rem;
+  padding-inline-end: 0.5rem;
+  padding-inline-start: 0.5rem;
+}
+
+#redirect-url img {
+  block-size: 16px;
+  inline-size: 16px;
+  margin-inline-end: 6px;
+  offset-block-start: 3px;
+  position: relative;
+}
+
 dfn {
   font-style: normal;
 }
+
+.button-container > button {
+  min-inline-size: 240px;
+}

webextension/js/confirm-page.js

@@ -1,10 +1,46 @@
-const redirectUrl = new URL(window.location).searchParams.get("url");
-document.getElementById("redirect-url").textContent = redirectUrl;
-const redirectSite = new URL(redirectUrl).hostname;
-document.getElementById("redirect-site").textContent = redirectSite;
+async function load() {
+  const searchParams = new URL(window.location).searchParams;
+  const redirectUrl = decodeURIComponent(searchParams.get("url"));
+  const cookieStoreId = searchParams.get("cookieStoreId");
+  const currentCookieStoreId = searchParams.get("currentCookieStoreId");
+  const redirectUrlElement = document.getElementById("redirect-url");
+  redirectUrlElement.textContent = redirectUrl;
+  createFavicon(redirectUrl, redirectUrlElement);
+
+  const container = await browser.contextualIdentities.get(cookieStoreId);
+  [...document.querySelectorAll(".container-name")].forEach((containerNameElement) => {
+    containerNameElement.textContent = container.name;
+  });
+
+  // If default container, button will default to normal HTML content
+  if (currentCookieStoreId) {
+    const currentContainer = await browser.contextualIdentities.get(currentCookieStoreId);
+    document.getElementById("current-container-name").textContent = currentContainer.name;
+  }
 
   document.getElementById("redirect-form").addEventListener("submit", (e) => {
     e.preventDefault();
+    const buttonTarget = e.explicitOriginalTarget;
+    switch (buttonTarget.id) {
+    case "confirm":
+      confirmSubmit(redirectUrl, cookieStoreId);
+      break;
+    case "deny":
+      denySubmit(redirectUrl);
+      break;
+    }
+  });
+}
+
+function createFavicon(pageUrl, redirectUrlElement) {
+  const origin = new URL(pageUrl).origin;
+  const imageElement = document.createElement("img");
+  imageElement.src = `${origin}/favicon.ico`;
+
+  redirectUrlElement.prepend(imageElement);
+}
+
+function confirmSubmit(redirectUrl, cookieStoreId) {
   const neverAsk = document.getElementById("never-ask").checked;
   // Sending neverAsk message to background to store for next time we see this process
   if (neverAsk) {
@@ -12,20 +48,38 @@ document.getElementById("redirect-form").addEventListener("submit", (e) => {
       method: "neverAsk",
       neverAsk: true,
       pageUrl: redirectUrl
-    }).then(() => {
-      redirect();
-    }).catch(() => {
-      // Can't really do much here user will have to click it again
     });
   }
   browser.runtime.sendMessage({
     method: "sendTelemetryPayload",
     event: "click-to-reload-page-in-container",
   });
-  redirect();
-});
+  openInContainer(redirectUrl, cookieStoreId);
+}
 
-function redirect() {
-  const redirectUrl = document.getElementById("redirect-url").textContent;
+async function denySubmit(redirectUrl) {
+  const tab = await browser.tabs.query({active: true});
+  await browser.runtime.sendMessage({
+    method: "exemptContainerAssignment",
+    tabId: tab[0].id,
+    pageUrl: redirectUrl
+  });
   document.location.replace(redirectUrl);
 }
+
+load();
+
+async function openInContainer(redirectUrl, cookieStoreId) {
+  const tabs = await browser.tabs.query({active: true});
+  browser.runtime.sendMessage({
+    method: "sendTelemetryPayload",
+    event: "click-to-reload-page-in-same-container",
+  });
+  await browser.tabs.create({
+    cookieStoreId,
+    url: redirectUrl
+  });
+  if (tabs.length > 0) {
+    browser.tabs.remove(tabs[0].id);
+  }
+}