From bed0a23c788ee42b36e0fffccac49290a3d0d906 Mon Sep 17 00:00:00 2001 From: baku Date: Sun, 22 Jan 2017 18:44:26 +0100 Subject: [PATCH] Refresh of container icon+name into the awesome bar --- index.js | 117 +++++++++++++++++++++++++++------------ webextension/js/popup.js | 16 +++++- 2 files changed, 96 insertions(+), 37 deletions(-) diff --git a/index.js b/index.js index bc4f941..01a4afc 100644 --- a/index.js +++ b/index.js @@ -28,6 +28,7 @@ const IDENTITY_ICONS = [ const { attachTo } = require("sdk/content/mod"); const { ContextualIdentityService } = require("resource://gre/modules/ContextualIdentityService.jsm"); const { getFavicon } = require("sdk/places/favicon"); +const { modelFor } = require("sdk/model/core"); const self = require("sdk/self"); const { Style } = require("sdk/stylesheet/style"); const tabs = require("sdk/tabs"); @@ -110,16 +111,17 @@ const ContainerService = { this._hideAllPanels(); }); - tabs.on("activate", () => { + tabs.on("activate", tab => { this._hideAllPanels(); + this._restyleTab(tab).catch(() => {}); }); // Modify CSS and other stuff for each window. - this.configureWindows(); + this.configureWindows().catch(() => {}); windows.browserWindows.on("open", window => { - this.configureWindow(viewFor(window)); + this.configureWindow(viewFor(window)).catch(() => {}); }); windows.browserWindows.on("close", window => { @@ -469,9 +471,11 @@ const ContainerService = { openTabs: 0 }; - this._refreshNeeded(); - - return Promise.resolve(this._convert(identity)); + this._refreshNeeded().then(() => { + return this._convert(identity); + }).catch(() => { + return this._convert(identity); + }); }, updateIdentity(args) { @@ -493,8 +497,11 @@ const ContainerService = { identity.name, icon, color); - this._refreshNeeded(); - return Promise.resolve(updated); + this._refreshNeeded().then(() => { + return updated; + }).catch(() => { + return updated; + }); }, removeIdentity(args) { @@ -508,16 +515,21 @@ const ContainerService = { const removed = ContextualIdentityService.remove(args.userContextId); - this._refreshNeeded(); - return Promise.resolve(removed); + this._refreshNeeded().then(() => { + return removed; + }).catch(() => { + return removed; + }); }, // Styling the window configureWindows() { + const promises = []; for (let window of windows.browserWindows) { // eslint-disable-line prefer-const - this.configureWindow(viewFor(window)); + promises.push(this.configureWindow(viewFor(window))); } + return Promise.all(promises); }, configureWindow(window) { @@ -526,7 +538,7 @@ const ContainerService = { this._windowMap[id] = new ContainerWindow(window); } - this._windowMap[id].configure(); + return this._windowMap[id].configure(); }, closeWindow(window) { @@ -535,8 +547,7 @@ const ContainerService = { }, _refreshNeeded() { - // FIXME: color/name propagation - this.configureWindows(); + return this.configureWindows(); }, _hideAllPanels() { @@ -544,6 +555,30 @@ const ContainerService = { this._windowMap[id].hidePanel(); } }, + + _restyleTab(tab) { + if (!tab) { + return Promise.resolve(null); + } + + const userContextId = ContainerService._getUserContextIdFromTab(tab); + return ContainerService.getIdentity({userContextId}).then(identity => { + if (!identity) { + return; + } + + const hbox = viewFor(tab.window).document.getElementById("userContext-icons"); + hbox.setAttribute("data-identity-color", identity.color); + + const label = viewFor(tab.window).document.getElementById("userContext-label"); + label.setAttribute("value", identity.name); + label.style.color = ContainerService._fromNameToColor(identity.color); + + const indicator = viewFor(tab.window).document.getElementById("userContext-indicator"); + indicator.setAttribute("data-identity-icon", identity.image); + indicator.style.listStyleImage = ""; + }); + }, }; // ---------------------------------------------------------------------------- @@ -566,6 +601,13 @@ ContainerWindow.prototype = { }, configure() { + return Promise.all([ + this._configurePlusButtonMenu(), + this._configureActiveTab(), + ]); + }, + + _configurePlusButtonMenu() { const tabsElement = this._window.document.getElementById("tabbrowser-tabs"); const button = this._window.document.getAnonymousElementByAttribute(tabsElement, "anonid", "tabs-newtab-button"); @@ -585,7 +627,28 @@ ContainerWindow.prototype = { this._repositionPopup(); - ContainerService.queryIdentities().then(identities => { + button.addEventListener("click", () => { + this._panelElement.hidden = false; + }); + + button.addEventListener("mouseover", () => { + this._repositionPopup(); + this._panelElement.hidden = false; + }); + + button.addEventListener("mouseout", () => { + this._createTimeout(); + }); + + this._panelElement.addEventListener("mouseout", (e) => { + if (e.target !== this._panelElement) { + this._createTimeout(); + return; + } + this._repositionPopup(); + }); + + return ContainerService.queryIdentities().then(identities => { identities.forEach(identity => { const menuItemElement = this._window.document.createElementNS(XUL_NS, "menuitem"); this._panelElement.appendChild(menuItemElement); @@ -619,27 +682,11 @@ ContainerWindow.prototype = { }).catch(() => { this.hidePanel(); }); + }, - button.addEventListener("click", () => { - this._panelElement.hidden = false; - }); - - button.addEventListener("mouseover", () => { - this._repositionPopup(); - this._panelElement.hidden = false; - }); - - button.addEventListener("mouseout", () => { - this._createTimeout(); - }); - - this._panelElement.addEventListener("mouseout", (e) => { - if (e.target !== this._panelElement) { - this._createTimeout(); - return; - } - this._repositionPopup(); - }); + _configureActiveTab() { + const tab = modelFor(this._window).tabs.activeTab; + return ContainerService._restyleTab(tab); }, // This function puts the popup in the correct place. diff --git a/webextension/js/popup.js b/webextension/js/popup.js index ad952a6..1d588b5 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -420,8 +420,8 @@ Logic.registerPanel(P_CONTAINER_EDIT, { method: identity.userContextId ? "updateIdentity" : "createIdentity", userContextId: identity.userContextId || 0, name: document.getElementById("edit-container-panel-name-input").value || Logic.generateIdentityName(), - icon: identity.image || "fingerprint", - color: identity.color || "green", + icon: this._randomIcon(), + color: this._randomColor(), }).then(() => { return Logic.refreshIdentities(); }).then(() => { @@ -441,6 +441,18 @@ Logic.registerPanel(P_CONTAINER_EDIT, { return Promise.resolve(null); }, + + // These 2 methods are for debugging only. We should remove them when we + // finish the UI. + _randomIcon() { + const images = ["fingerprint", "briefcase", "dollar", "cart", "cirlce"]; + return images[Math.floor(Math.random() * images.length)]; + }, + + _randomColor() { + const colors = ["blue", "turquoise", "green", "yellow", "orange", "red", "pink", "purple" ]; + return colors[Math.floor(Math.random() * colors.length)]; + }, }); // P_CONTAINER_DELETE: Delete a container.