feat: use persistent container color from Leapp session

manifest-chrome.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Leapp Multi-Console Extension",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Leapp Multi AWS Console Browser Extension",
   "icons": {
     "16": "icons/icon_16.png",

manifest-firefox.json

@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Leapp Multi-Console Extension",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Leapp Multi AWS Console Browser Extension",
   "icons": {
     "16": "icons/icon_16.png",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "leapp-browser-extension",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "author": {
     "name": "Noovolari",
     "email": "info@noovolari.com"

src/backend/models/leapp-session-info.ts

@@ -6,5 +6,6 @@ export interface LeappSessionInfo {
   sessionRegion: string;
   sessionRole: string;
   sessionType: LeappSessionType;
+  sessionColor?: string;
   createdAt: number;
 }

src/backend/services/tab-controller.service.ts

@@ -47,7 +47,12 @@ export class TabControllerService {
     if (this.state.isChrome) {
       this.newChromeSessionTab(leappPayload.url);
     } else {
-      this.newFirefoxSessionTab(leappPayload.url, `${leappPayload.sessionName} (${leappPayload.sessionRole})`, sessionId).then(() => {});
+      this.newFirefoxSessionTab(
+        leappPayload.url,
+        `${leappPayload.sessionName} (${leappPayload.sessionRole})`,
+        sessionId,
+        leappPayload.sessionColor
+      ).then(() => {});
     }
   }
 
@@ -68,21 +73,28 @@ export class TabControllerService {
     });
   }
 
-  private async newFirefoxSessionTab(url: string, containerName: string, sessionId: number) {
-    const colorIndex = this.state.sessionCounter % containerColors.length;
+  private async newFirefoxSessionTab(url: string, containerName: string, sessionId: number, preferredColor?: string) {
+    const fallbackColorIndex = this.state.sessionCounter % containerColors.length;
+    const color = preferredColor ?? containerColors[fallbackColorIndex];
     const container = await this.getBrowser()
       .contextualIdentities.query({
         name: containerName,
       })
-      .then(
-        (contexts) =>
-          contexts.pop() ||
-          this.getBrowser().contextualIdentities.create({
-            name: containerName,
-            color: containerColors[colorIndex],
-            icon: "circle",
-          })
-      );
+      .then(async (contexts) => {
+        const existing = contexts.pop();
+        if (existing) {
+          if (preferredColor && existing.color !== preferredColor) {
+            await this.getBrowser().contextualIdentities.update(existing.cookieStoreId, { color: preferredColor });
+            return this.getBrowser().contextualIdentities.get(existing.cookieStoreId);
+          }
+          return existing;
+        }
+        return this.getBrowser().contextualIdentities.create({
+          name: containerName,
+          color,
+          icon: "circle",
+        });
+      });
     this.state.setCookieStoreId(sessionId, container.cookieStoreId);
     await this.getBrowser().tabs.create({
       url,