Merge branch 'ux-fiddles' into shield-study

webextension/js/confirm-page.js

@@ -5,7 +5,7 @@ async function load() {
   const currentCookieStoreId = searchParams.get("currentCookieStoreId");
   const redirectUrlElement = document.getElementById("redirect-url");
   redirectUrlElement.textContent = redirectUrl;
-  createFavicon(redirectUrl, redirectUrlElement);
+  appendFavicon(redirectUrl, redirectUrlElement);
 
   const container = await browser.contextualIdentities.get(cookieStoreId);
   [...document.querySelectorAll(".container-name")].forEach((containerNameElement) => {
@@ -32,12 +32,11 @@ async function load() {
   });
 }
 
-function createFavicon(pageUrl, redirectUrlElement) {
+function appendFavicon(pageUrl, redirectUrlElement) {
   const origin = new URL(pageUrl).origin;
-  const imageElement = document.createElement("img");
-  imageElement.src = `${origin}/favicon.ico`;
+  const favIconElement = Utils.createFavIconElement(`${origin}/favicon.ico`);
 
-  redirectUrlElement.prepend(imageElement);
+  redirectUrlElement.prepend(favIconElement);
 }
 
 function confirmSubmit(redirectUrl, cookieStoreId) {

webextension/js/content-script.js

@@ -0,0 +1,53 @@
+async function delayAnimation(delay = 350) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delay);
+  });
+}
+
+async function doAnimation(element, property, value) {
+  return new Promise((resolve) => {
+    const handler = () => {
+      resolve();
+      element.removeEventListener("transitionend", handler);
+    };
+    element.addEventListener("transitionend", handler);
+    window.requestAnimationFrame(() => {
+      element.style[property] = value;
+    });
+  });
+}
+/*
+async function awaitEvent(eventName) {
+  return new Promise((resolve) => {
+    const handler = () => {
+      resolve();
+      divElement.removeEventListener(eventName, handler);
+    };
+    divElement.addEventListener(eventName, handler);
+  });
+}
+*/
+
+async function addMessage(message) {
+  const divElement = document.createElement("div");
+  divElement.classList.add("container-notification");
+  // For the eager eyed, this is an experiment. It is however likely that a website will know it is "contained" anyway
+  divElement.innerText = message.text;
+
+  const imageElement = document.createElement("img");
+  imageElement.src = browser.extension.getURL("/img/container-site-d-24.png");
+  divElement.prepend(imageElement);
+
+  document.body.appendChild(divElement);
+
+  await delayAnimation(100);
+  await doAnimation(divElement, "transform", "translateY(0)");
+  await delayAnimation(2000);
+  await doAnimation(divElement, "transform", "translateY(-100%)");
+
+  divElement.remove();
+}
+
+browser.runtime.onMessage.addListener((message) => {
+  addMessage(message);
+});

webextension/js/popup.js

@@ -18,7 +18,6 @@ const P_CONTAINERS_EDIT  = "containersEdit";
 const P_CONTAINER_INFO   = "containerInfo";
 const P_CONTAINER_EDIT   = "containerEdit";
 const P_CONTAINER_DELETE = "containerDelete";
-const DEFAULT_FAVICON = "moz-icon://goat?size=16";
 
 /**
  * Escapes any occurances of &, ", <, > or / with XML entities.
@@ -462,29 +461,14 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       const siteSettings = await Logic.getAssignment(currentTab);
       this.setupAssignmentCheckbox(siteSettings);
       const currentPage = document.getElementById("current-page");
-      const favIconUrl = currentTab.favIconUrl || "";
-      currentPage.innerHTML = escaped`
-        <img class="offpage" src="${favIconUrl}" /> ${currentTab.title}
-      `;
-
-      const imageElement = currentPage.querySelector("img");
-      const loadListener = (e) => {
-        e.target.classList.remove("offpage");
-        e.target.removeEventListener("load", loadListener);
-        e.target.removeEventListener("error", errorListener);
-      };
-      const errorListener = (e) => {
-        e.target.src = DEFAULT_FAVICON;
-      };
-      imageElement.addEventListener("error", errorListener);
-      imageElement.addEventListener("load", loadListener);
+      currentPage.innerHTML = escaped`<span class="page-title truncate-text">${currentTab.title}</span>`;
+      const favIconElement = Utils.createFavIconElement(currentTab.favIconUrl || "");
+      currentPage.prepend(favIconElement);
 
       const currentContainer = document.getElementById("current-container");
       currentContainer.innerText = identity.name;
 
-      const currentContainerIcon = document.getElementById("current-container-icon");
-      currentContainerIcon.setAttribute("data-identity-icon", identity.icon);
-      currentContainerIcon.setAttribute("data-identity-color", identity.color);
+      currentContainer.setAttribute("data-identity-color", identity.color);
     }
   },
 
@@ -546,15 +530,21 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       });
     });
 
-    const list = document.querySelector(".identities-list");
+    const list = document.querySelector(".identities-list tbody");
 
     list.innerHTML = "";
     list.appendChild(fragment);
     /* Not sure why extensions require a focus for the doorhanger,
        however it allows us to have a tabindex before the first selected item
      */
-    document.addEventListener("focus", () => {
+    const focusHandler = () => {
       list.querySelector("tr").focus();
+      document.removeEventListener("focus", focusHandler);
+    };
+    document.addEventListener("focus", focusHandler);
+    /* If the user mousedown's first then remove the focus handler */
+    document.addEventListener("mousedown", () => {
+      document.removeEventListener("focus", focusHandler);
     });
 
     return Promise.resolve();
@@ -661,8 +651,9 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       fragment.appendChild(tr);
       tr.classList.add("container-info-tab-row");
       tr.innerHTML = escaped`
-        <td><img class="icon" src="${tab.favicon}" /></td>
+        <td></td>
         <td class="container-info-tab-title truncate-text">${tab.title}</td>`;
+      tr.querySelector("td").appendChild(Utils.createFavIconElement(tab.favicon));
 
       // On click, we activate this tab. But only if this tab is active.
       if (tab.active) {

webextension/js/utils.js

@@ -0,0 +1,23 @@
+const DEFAULT_FAVICON = "moz-icon://goat?size=16";
+
+// TODO use export here instead of globals
+window.Utils = {
+
+  createFavIconElement(url) {
+    const imageElement = document.createElement("img");
+    imageElement.classList.add("icon", "offpage");
+    imageElement.src = url;
+    const loadListener = (e) => {
+      e.target.classList.remove("offpage");
+      e.target.removeEventListener("load", loadListener);
+      e.target.removeEventListener("error", errorListener);
+    };
+    const errorListener = (e) => {
+      e.target.src = DEFAULT_FAVICON;
+    };
+    imageElement.addEventListener("error", errorListener);
+    imageElement.addEventListener("load", loadListener);
+    return imageElement;
+  }
+
+};