From d497e6003f6a1b7ddcfc5032784d74333a1edc5f Mon Sep 17 00:00:00 2001
From: Jonathan Kingston <jonathan@jooped.co.uk>
Date: Tue, 24 Jan 2017 16:51:40 +0000
Subject: [PATCH] Adding in tab restyling on tab change

---
 data/usercontext.css |  4 ----
 index.js             | 26 ++++++++++++++++++++++++--
 2 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/data/usercontext.css b/data/usercontext.css
index 929f66f..208ce59 100644
--- a/data/usercontext.css
+++ b/data/usercontext.css
@@ -1,4 +1,3 @@
-[usercontextid="1"],
 [data-identity-color="blue"] {
   --identity-tab-color: #37adff;
   --identity-icon-color: #37adff;
@@ -9,7 +8,6 @@
   --identity-icon-color: #00c79a;
 }
 
-[usercontextid="3"],
 [data-identity-color="green"] {
   --identity-tab-color: #51cd00;
   --identity-icon-color:  #51cd00;
@@ -20,7 +18,6 @@
   --identity-icon-color: #ffcb00;
 }
 
-[usercontextid="2"],
 [data-identity-color="orange"] {
   --identity-tab-color: #ff9f00;
   --identity-icon-color: #ff9f00;
@@ -31,7 +28,6 @@
   --identity-icon-color: #ff613d;
 }
 
-[usercontextid="4"],
 [data-identity-color="pink"] {
   --identity-tab-color: #ff4bda;
   --identity-icon-color: #ff4bda;
diff --git a/index.js b/index.js
index f350885..10a2bef 100644
--- a/index.js
+++ b/index.js
@@ -22,7 +22,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" },
-  { name: "cirlce", image: "" }, // this doesn't exist in m-b
+  { name: "circle", image: "" }, // this doesn't exist in m-b
 ];
 
 const { attachTo } = require("sdk/content/mod");
@@ -101,6 +101,7 @@ const ContainerService = {
         ++this._identitiesState[userContextId].openTabs;
       }
       this._hideAllPanels();
+      this._restyleTab(tab);
     });
 
     tabs.on("close", tab => {
@@ -579,6 +580,19 @@ const ContainerService = {
       indicator.style.listStyleImage = "";
     });
   },
+
+  _restyleTab(tab) {
+    if (!tab) {
+      return Promise.resolve(null);
+    }
+    const userContextId = ContainerService._getUserContextIdFromTab(tab);
+    return ContainerService.getIdentity({userContextId}).then(identity => {
+      if (!identity) {
+        return;
+      }
+      viewFor(tab).setAttribute("data-identity-color", identity.color);
+    });
+  },
 };
 
 // ----------------------------------------------------------------------------
@@ -606,7 +620,7 @@ ContainerWindow.prototype = {
       this._configureActiveTab(),
       this._configureFileMenu(),
       this._configureContextMenu(),
-      // TODO: this should change the decoration of the tab.
+      this._configureTabStyle(),
     ]);
   },
 
@@ -687,6 +701,14 @@ ContainerWindow.prototype = {
     });
   },
 
+  _configureTabStyle() {
+    const promises = [];
+    for (let tab of modelFor(this._window).tabs) { // eslint-disable-line prefer-const
+      promises.push(ContainerService._restyleTab(tab));
+    }
+    return Promise.all(promises);
+  },
+
   _configureActiveTab() {
     const tab = modelFor(this._window).tabs.activeTab;
     return ContainerService._restyleActiveTab(tab);