plus menu implemented

index.js

@@ -1,12 +1,16 @@
-/* global require */
+const XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
-const {ContextualIdentityService} = require('resource://gre/modules/ContextualIdentityService.jsm');
-const { Cc, Ci, Cu, Cr } = require('chrome');
 
+/* global require */
+
+const { Cc, Ci, Cu, Cr } = require('chrome');
+const {ContextualIdentityService} = require('resource://gre/modules/ContextualIdentityService.jsm');
+const self = require('sdk/self');
 const tabs = require('sdk/tabs');
-const webExtension = require('sdk/webextension');
+const tabsUtils = require('sdk/tabs/utils');
 const { viewFor } = require("sdk/view/core");
-var windowUtils = require('sdk/window/utils');
+const webExtension = require('sdk/webextension');
-var tabsUtils = require('sdk/tabs/utils');
+const windows = require("sdk/windows");
+const windowUtils = require('sdk/window/utils');
 
 let ContainerService =
 {
@@ -73,6 +77,16 @@ let ContainerService =
       }
     });
 
+    // Modify CSS and other stuff for each window.
+
+    for (let window of windows.browserWindows) {
+      this.configureWindow(viewFor(window));
+    }
+
+    windows.browserWindows.on("open", window => {
+      this.configureWindow(viewFor(window));
+    });
+
     // WebExtension startup
 
     webExtension.startup().then(api => {
@@ -87,10 +101,46 @@ let ContainerService =
   // utility methods
 
   _convert(identity) {
+    // In FF 50-51, the icon is the full path, in 52 and following
+    // releases, we have IDs to be used with a svg file. In this function
+    // we map URLs to svg IDs.
+    let image, color;
+
+    if (identity.icon == "fingerprint" ||
+        identity.icon == "chrome://browser/skin/usercontext/personal.svg") {
+      image = "fingerprint";
+    } else if (identity.icon == "briefcase" ||
+             identity.icon == "chrome://browser/skin/usercontext/work.svg") {
+      image = "briefcase";
+    } else if (identity.icon == "dollar" ||
+             identity.icon == "chrome://browser/skin/usercontext/banking.svg") {
+      image = "dollar";
+    } else if (identity.icon == "cart" ||
+             identity.icon == "chrome://browser/skin/usercontext/shopping.svg") {
+      image = "cart";
+    } else {
+      image = "circle";
+    }
+
+    if (identity.color == "#00a7e0") {
+      color = "blue";
+    } else if (identity.color == "#f89c24") {
+      color = "orange";
+    } else if (identity.color == "#7dc14c") {
+      color = "green";
+    } else if (identity.color == "#ee5195") {
+      color = "pink";
+    } else if (["blue", "turquoise", "green", "yellow", "orange", "red",
+                "pink", "purple"].indexOf(identity.color) != -1) {
+      color = identity.color;
+    } else {
+      color = "";
+    }
+
     return {
       name: ContextualIdentityService.getUserContextLabel(identity.userContextId),
-      icon: identity.icon,
+      image,
-      color: identity.color,
+      color,
       userContextId: identity.userContextId,
       hasHiddenTabs: !!this._identitiesState[identity.userContextId].hiddenTabUrls.length,
       hasOpenTabs: !!this._identitiesState[identity.userContextId].openTabs,
@@ -131,8 +181,10 @@ let ContainerService =
 
   sortTabs(args) {
     return new Promise((resolve, reject) => {
-      let windows = windowUtils.windows('navigator:browser', {includePrivate:false});
+      for (let window of windows.browserWindows) {
-      for (let window of windows) {
+        // From model to XUL window.
+        window = viewFor(window);
+
         let tabs = tabsUtils.getTabs(window);
 
         let pos = 0;
@@ -208,6 +260,42 @@ let ContainerService =
     let identity = ContextualIdentityService.getIdentityFromId(args.userContextId);
     return Promise.resolve(identity ? this._convert(identity) : null);
   },
+
+  // Styling the window
+
+  configureWindow(window) {
+    var tabsElement = window.document.getElementById('tabbrowser-tabs');
+    var button = window.document.getAnonymousElementByAttribute(tabsElement, 'anonid', 'tabs-newtab-button')
+
+    while (button.firstChild) {
+      button.removeChild(button.firstChild);
+    }
+
+    button.setAttribute('type', 'menu');
+    let popup = window.document.createElementNS(XUL_NS, 'menupopup');
+
+    popup.setAttribute('anonid', 'newtab-popup');
+    popup.className = 'new-tab-popup';
+    popup.setAttribute('position', 'after_end');
+
+    ContextualIdentityService.getIdentities().forEach(identity => {
+      identity = this._convert(identity);
+
+      var menuItem = window.document.createElementNS(XUL_NS, 'menuitem');
+      menuItem.setAttribute('class', 'menuitem-iconic');
+      menuItem.setAttribute('label', identity.name);
+      menuItem.setAttribute('image', self.data.url('usercontext.svg') + '#' + identity.image);
+
+      menuItem.addEventListener('command', (event) => {
+        this.openTab({userContextId: identity.userContextId});
+        event.stopPropagation();
+      });
+
+      popup.appendChild(menuItem);
+    });
+
+    button.appendChild(popup);
+  },
 };
 
 ContainerService.init();

webextension/js/popup.js

@@ -26,45 +26,6 @@ function showOrHideContainerTabs(userContextId, hasHiddenTabs) {
   });
 }
 
-// In FF 50-51, the icon is the full path, in 52 and following releases, we
-// have IDs to be used with a svg file. In this function we map URLs to svg IDs.
-function getIconAndColorForIdentity(identity) {
-  let image, color;
-
-  if (identity.icon == "fingerprint" ||
-      identity.icon == "chrome://browser/skin/usercontext/personal.svg") {
-    image = "fingerprint";
-  } else if (identity.icon == "briefcase" ||
-           identity.icon == "chrome://browser/skin/usercontext/work.svg") {
-    image = "briefcase";
-  } else if (identity.icon == "dollar" ||
-           identity.icon == "chrome://browser/skin/usercontext/banking.svg") {
-    image = "dollar";
-  } else if (identity.icon == "cart" ||
-           identity.icon == "chrome://browser/skin/usercontext/shopping.svg") {
-    image = "cart";
-  } else {
-    image = "circle";
-  }
-
-  if (identity.color == "#00a7e0") {
-    color = "blue";
-  } else if (identity.color == "#f89c24") {
-    color = "orange";
-  } else if (identity.color == "#7dc14c") {
-    color = "green";
-  } else if (identity.color == "#ee5195") {
-    color = "pink";
-  } else if (["blue", "turquoise", "green", "yellow", "orange", "red",
-              "pink", "purple"].indexOf(identity.color) != -1) {
-    color = identity.color;
-  } else {
-    color = "";
-  }
-
-  return { image, color };
-}
-
 if (localStorage.getItem('onboarded2')) {
   for (const element of document.querySelectorAll('.onboarding')) {
     element.classList.add('hide');
@@ -102,14 +63,12 @@ browser.runtime.sendMessage({method: 'queryIdentities'}).then(identities=> {
       hideOrShowIconSrc = CONTAINER_UNHIDE_SRC;
     }
 
-    let {image, color} = getIconAndColorForIdentity(identity);
-
     const identityRow = `
     <tr data-identity-cookie-store-id="${identity.userContextId}" >
       <td>
         <div class="userContext-icon"
-          data-identity-icon="${image}"
+          data-identity-icon="${identity.image}"
-          data-identity-color="${color}">
+          data-identity-color="${identity.color}">
         </div>
       </td>
       <td>${identity.name}</td>