Adding in tab restyling on tab change

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;

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);