Merge d636fa584a into 1b85642677

.eslintrc.js

@@ -11,10 +11,12 @@ module.exports = {
   "globals": {
     "CustomizableUI": true,
     "CustomizableWidgets": true,
-    "SessionStore": true
+    "SessionStore": true,
+    "Services": true
   },
   "plugins": [
-    "promise"
+    "promise",
+    "unsafe-property-assignment"
   ],
   "root": true,
   "rules": {
@@ -27,6 +29,8 @@ module.exports = {
     "promise/no-promise-in-callback": "warn",
     "promise/no-return-wrap": "error",
     "promise/param-names": "error",
+    "unsafe-property-assignment/no-key-assignment": ["error"],
+    "unsafe-property-assignment/enforce-tagged-template-protection": ["error"],
 
     "eqeqeq": "error",
     "indent": ["error", 2],

.travis.yml

@@ -1,3 +1,7 @@
 language: node_js
 node_js:
     - "6.1"
+
+notifications:
+    irc:
+        - "ircs://irc.mozilla.org:6697/#testpilot-containers-bots"

README.md

@@ -1,6 +1,6 @@
 # Containers: Test Pilot Experiment
 
-Soon to be [![Available on Test Pilot](https://img.shields.io/badge/available_on-Test_Pilot-0996F8.svg)](https://testpilot.firefox.com/)
+[![Available on Test Pilot](https://img.shields.io/badge/available_on-Test_Pilot-0996F8.svg)](https://testpilot.firefox.com/experiments/containers)
 
 [Embedded Web Extension](https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Embedded_WebExtensions) to experiment with [Containers](https://blog.mozilla.org/tanvi/2016/06/16/contextual-identities-on-the-web/) in [Firefox Test Pilot](https://testpilot.firefox.com/) to learn:
 

index.js

@@ -30,6 +30,7 @@ const IDENTITY_ICONS = [
   { name: "briefcase", image: "chrome://browser/skin/usercontext/work.svg" },
   { name: "dollar", image: "chrome://browser/skin/usercontext/banking.svg" },
   { name: "cart", image: "chrome://browser/skin/usercontext/shopping.svg" },
+  // All of these do not exist in gecko
   { name: "gift", image: "gift" },
   { name: "vacation", image: "vacation" },
   { name: "food", image: "food" },
@@ -37,7 +38,7 @@ const IDENTITY_ICONS = [
   { name: "pet", image: "pet" },
   { name: "tree", image: "tree" },
   { name: "chill", image: "chill" },
-  { name: "circle", image: "circle" }, // this doesn't exist in m-b
+  { name: "circle", image: "circle" },
 ];
 
 const PREFS = [
@@ -51,10 +52,12 @@ const { attachTo, detachFrom } = require("sdk/content/mod");
 const { Cu } = require("chrome");
 const { ContextualIdentityService } = require("resource://gre/modules/ContextualIdentityService.jsm");
 const { getFavicon } = require("sdk/places/favicon");
+const { LightweightThemeManager } = Cu.import("resource://gre/modules/LightweightThemeManager.jsm", {});
 const Metrics = require("./testpilot-metrics");
 const { modelFor } = require("sdk/model/core");
 const prefService = require("sdk/preferences/service");
 const self = require("sdk/self");
+const { Services }  = require("resource://gre/modules/Services.jsm");
 const ss = require("sdk/simple-storage");
 const { Style } = require("sdk/stylesheet/style");
 const tabs = require("sdk/tabs");
@@ -68,6 +71,7 @@ const windowUtils = require("sdk/window/utils");
 Cu.import("resource:///modules/CustomizableUI.jsm");
 Cu.import("resource:///modules/CustomizableWidgets.jsm");
 Cu.import("resource:///modules/sessionstore/SessionStore.jsm");
+Cu.import("resource://gre/modules/Services.jsm");
 
 // ----------------------------------------------------------------------------
 // ContextualIdentityProxy
@@ -113,6 +117,7 @@ const ContainerService = {
   _identitiesState: {},
   _windowMap: new Map(),
   _containerWasEnabled: false,
+  _onThemeChangedCallback: null,
 
   init(installation) {
     // If we are just been installed, we must store some information for the
@@ -194,6 +199,7 @@ const ContainerService = {
       "updateIdentity",
       "getPreference",
       "sendTelemetryPayload",
+      "getTheme",
       "checkIncompatibleAddons"
     ];
 
@@ -252,6 +258,8 @@ const ContainerService = {
           sendReply(this[message.method](message));
         }
       });
+
+      this.registerThemeConnection(api);
     }).catch(() => {
       throw new Error("WebExtension startup failed. Unable to continue.");
     });
@@ -290,6 +298,51 @@ const ContainerService = {
       };
     }
     // End-Of-Hack
+
+    Services.obs.addObserver(this, "lightweight-theme-changed", false);
+  },
+
+  registerThemeConnection(api) {
+    // This is only used for theme notifications
+    api.browser.runtime.onConnect.addListener((port) => {
+      this.onThemeChanged((theme, topic) => {
+        port.postMessage({
+          type: topic,
+          theme
+        });
+      });
+    });
+  },
+
+  triggerThemeChanged(theme, topic) {
+    if (this._onThemeChangedCallback) {
+      this._onThemeChangedCallback(theme, topic);
+    }
+  },
+
+  observe(subject, topic) {
+    if (topic === "lightweight-theme-changed") {
+      this.getTheme().then((theme) => {
+        this.triggerThemeChanged(theme, topic);
+      }).catch(() => {
+        throw new Error("Unable to get theme");
+      });
+    }
+  },
+
+  getTheme() {
+    const defaultTheme = "firefox-compact-light@mozilla.org";
+    return new Promise(function (resolve) {
+      let theme = defaultTheme;
+      if (LightweightThemeManager.currentTheme && LightweightThemeManager.currentTheme.id) {
+        theme = LightweightThemeManager.currentTheme.id;
+      }
+      resolve(theme);
+    });
+  },
+
+  onThemeChanged(callback) {
+    this._onThemeChangedCallback = callback;
   },
 
   // utility methods
@@ -1076,6 +1129,10 @@ const ContainerService = {
     ContextualIdentityProxy.getIdentities().forEach(identity => {
       if (!preInstalledIdentities.includes(identity.userContextId)) {
         ContextualIdentityProxy.remove(identity.userContextId);
+      } else {
+        // Let's cleanup all the cookies for this container.
+        Services.obs.notifyObservers(null, "clear-origin-attributes-data",
+                                     JSON.stringify({ userContextId: identity.userContextId }));
       }
     });
 

package.json

@@ -2,7 +2,7 @@
   "name": "testpilot-containers",
   "title": "Containers Experiment",
   "description": "Containers works by isolating cookie jars using separate origin-attributes defined visually by colored ‘Container Tabs’. This add-on is a modified version of the containers feature for Firefox Test Pilot.",
-  "version": "1.0.4",
+  "version": "1.1.1",
   "author": "Andrea Marchesini, Luke Crouch and Jonathan Kingston",
   "bugs": {
     "url": "https://github.com/mozilla/testpilot-containers/issues"
@@ -11,8 +11,9 @@
   "devDependencies": {
     "addons-linter": "^0.15.14",
     "deploy-txp": "^1.0.7",
-    "eslint": "^3.12.2",
+    "eslint": "^3.17.1",
     "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-unsafe-property-assign": "^1.0.2",
     "htmllint-cli": "^0.0.5",
     "jpm": "^1.2.2",
     "npm-run-all": "^4.0.0",

webextension/background.js

@@ -1,3 +1,50 @@
+
+const themeManager = {
+  existingTheme: null,
+  init() {
+    this.check();
+
+    const port = browser.runtime.connect();
+    port.onMessage.addListener(m => {
+      if (m.type === "lightweight-theme-changed") {
+        this.update(m.theme);
+      }
+    });
+  },
+  setPopupIcon(theme) {
+    let icons = {
+      16: "img/container-site-d-24.png",
+      32: "img/container-site-d-48.png"
+    };
+    if (theme === "firefox-compact-dark@mozilla.org") {
+      icons = {
+        16: "img/container-site-w-24.png",
+        32: "img/container-site-w-48.png"
+      };
+    }
+    browser.browserAction.setIcon({
+      path: icons
+    });
+  },
+  check() {
+    browser.runtime.sendMessage({
+      method: "getTheme"
+    }).then((theme) => {
+      this.update(theme);
+    }).catch(() => {
+      throw new Error("Unable to get theme");
+    });
+  },
+  update(theme) {
+    if (this.existingTheme !== theme) {
+      this.setPopupIcon(theme);
+      this.existingTheme = theme;
+    }
+  }
+};
+
+themeManager.init();
+
 browser.runtime.sendMessage({
   method: "getPreference",
   pref: "browser.privatebrowsing.autostart"

webextension/js/popup.js

@@ -18,6 +18,42 @@ const P_CONTAINER_INFO   = "containerInfo";
 const P_CONTAINER_EDIT   = "containerEdit";
 const P_CONTAINER_DELETE = "containerDelete";
 
+/**
+ * Escapes any occurances of &, ", < or > with XML entities.
+ *
+ * @param {string} str
+ *        The string to escape.
+ * @return {string} The escaped string.
+ */
+function escapeXML(str) {
+  const replacements = {"&": "&amp;", "\"": "&quot;", "'": "&apos;", "<": "&lt;", ">": "&gt;"};
+  return String(str).replace(/[&"''<>]/g, m => replacements[m]);
+}
+
+/**
+ * A tagged template function which escapes any XML metacharacters in
+ * interpolated values.
+ *
+ * @param {Array<string>} strings
+ *        An array of literal strings extracted from the templates.
+ * @param {Array} values
+ *        An array of interpolated values extracted from the template.
+ * @returns {string}
+ *        The result of the escaped values interpolated with the literal
+ *        strings.
+ */
+function escaped(strings, ...values) {
+  const result = [];
+
+  for (const [i, string] of strings.entries()) {
+    result.push(string);
+    if (i < values.length)
+      result.push(escapeXML(values[i]));
+  }
+
+  return result.join("");
+}
+
 // This object controls all the panels, identities and many other things.
 const Logic = {
   _identities: [],
@@ -32,7 +68,8 @@ const Logic = {
 
     // Routing to the correct panel.
     .then(() => {
-      if (localStorage.getItem("onboarded3")) {
+      // If localStorage is disabled, we don't show the onboarding.
+      if (!localStorage || localStorage.getItem("onboarded3")) {
         this.showPanel(P_CONTAINERS_LIST);
       } else if (localStorage.getItem("onboarded2")) {
         this.showPanel(P_ONBOARDING_3);
@@ -234,7 +271,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       tr.classList.add("container-panel-row");
       context.classList.add("userContext-wrapper", "open-newtab", "clickable");
       manage.classList.add("show-tabs", "pop-button");
-      context.innerHTML = `
+      context.innerHTML = escaped`
         <div class="userContext-icon-wrapper open-newtab">
           <div class="userContext-icon"
             data-identity-icon="${identity.image}"
@@ -377,7 +414,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       const tr = document.createElement("tr");
       fragment.appendChild(tr);
       tr.classList.add("container-info-tab-row");
-      tr.innerHTML = `
+      tr.innerHTML = escaped`
         <td><img class="icon" src="${tab.favicon}" /></td>
         <td class="container-info-tab-title">${tab.title}</td>`;
 
@@ -421,7 +458,7 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
       const tr = document.createElement("tr");
       fragment.appendChild(tr);
       tr.classList.add("container-panel-row");
-      tr.innerHTML = `
+      tr.innerHTML = escaped`
         <td class="userContext-wrapper">
           <div class="userContext-icon-wrapper">
             <div class="userContext-icon"
@@ -481,46 +518,54 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
       Logic.showPreviousPanel();
     });
 
-    document.querySelector("#edit-container-ok-link").addEventListener("click", () => {
+    this._editForm = document.getElementById("edit-container-panel-form");
-      const identity = Logic.currentIdentity();
+    const editLink = document.querySelector("#edit-container-ok-link");
-      const formValues = new FormData(document.getElementById("edit-container-panel-form"));
+    editLink.addEventListener("click", this._submitForm.bind(this));
-      browser.runtime.sendMessage({
+    editLink.addEventListener("submit", this._submitForm.bind(this));
-        method: identity.userContextId ? "updateIdentity" : "createIdentity",
+    this._editForm.addEventListener("submit", this._submitForm.bind(this));
-        userContextId: identity.userContextId || 0,
+  },
-        name: document.getElementById("edit-container-panel-name-input").value || Logic.generateIdentityName(),
+
-        icon: formValues.get("container-icon") || DEFAULT_ICON,
+  _submitForm() {
-        color: formValues.get("container-color") || DEFAULT_COLOR,
+    const identity = Logic.currentIdentity();
-      }).then(() => {
+    const formValues = new FormData(this._editForm);
-        return Logic.refreshIdentities();
+    browser.runtime.sendMessage({
-      }).then(() => {
+      method: identity.userContextId ? "updateIdentity" : "createIdentity",
-        Logic.showPreviousPanel();
+      userContextId: identity.userContextId || 0,
-      }).catch(() => {
+      name: document.getElementById("edit-container-panel-name-input").value || Logic.generateIdentityName(),
-        Logic.showPanel(P_CONTAINERS_LIST);
+      icon: formValues.get("container-icon") || DEFAULT_ICON,
-      });
+      color: formValues.get("container-color") || DEFAULT_COLOR,
+    }).then(() => {
+      return Logic.refreshIdentities();
+    }).then(() => {
+      Logic.showPreviousPanel();
+    }).catch(() => {
+      Logic.showPanel(P_CONTAINERS_LIST);
     });
   },
 
   initializeRadioButtons() {
     const colorRadioTemplate = (containerColor) => {
-      return `<input type="radio" value="${containerColor}" name="container-color" id="edit-container-panel-choose-color-${containerColor}" />
+      return escaped`<input type="radio" value="${containerColor}" name="container-color" id="edit-container-panel-choose-color-${containerColor}" />
      <label for="edit-container-panel-choose-color-${containerColor}" class="usercontext-icon choose-color-icon" data-identity-icon="circle" data-identity-color="${containerColor}">`;
     };
     const colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple" ];
     const colorRadioFieldset = document.getElementById("edit-container-panel-choose-color");
     colors.forEach((containerColor) => {
       const templateInstance = document.createElement("span");
+      // eslint-disable-next-line unsafe-property-assignment/enforce-tagged-template-protection
       templateInstance.innerHTML = colorRadioTemplate(containerColor);
       colorRadioFieldset.appendChild(templateInstance);
     });
 
     const iconRadioTemplate = (containerIcon) => {
-      return `<input type="radio" value="${containerIcon}" name="container-icon" id="edit-container-panel-choose-icon-${containerIcon}" />
+      return escaped`<input type="radio" value="${containerIcon}" name="container-icon" id="edit-container-panel-choose-icon-${containerIcon}" />
      <label for="edit-container-panel-choose-icon-${containerIcon}" class="usercontext-icon choose-color-icon" data-identity-color="grey" data-identity-icon="${containerIcon}">`;
     };
     const icons = ["fingerprint", "briefcase", "dollar", "cart", "vacation", "gift", "food", "fruit", "pet", "tree", "chill", "circle"];
     const iconRadioFieldset = document.getElementById("edit-container-panel-choose-icon");
     icons.forEach((containerIcon) => {
       const templateInstance = document.createElement("span");
+      // eslint-disable-next-line unsafe-property-assignment/enforce-tagged-template-protection
       templateInstance.innerHTML = iconRadioTemplate(containerIcon);
       iconRadioFieldset.appendChild(templateInstance);
     });

webextension/manifest.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Containers Experiment",
-  "version": "1.0.4",
+  "version": "1.1.1",
 
   "description": "Containers works by isolating cookie jars using separate origin-attributes defined visually by colored ‘Container Tabs’. This add-on is a modified version of the containers feature for Firefox Test Pilot.",
   "icons": {