Adding in hardcoded colours to match native test pilot

webextension/css/popup.css

@@ -51,3 +51,63 @@ table.unstriped tbody tr {
 .edit-containers-text a {
   color: #0a0a0a;
 }
+
+[data-identity-color="blue"] {
+  --identity-tab-color: #0996f8;
+  --identity-icon-color: #00a7e0;
+}
+
+[data-identity-color="turquoise"] {
+  --identity-tab-color: #01bdad;
+  --identity-icon-color: #01bdad;
+}
+
+[data-identity-color="green"] {
+  --identity-tab-color: #57bd35;
+  --identity-icon-color:  #7dc14c;
+}
+
+[data-identity-color="yellow"] {
+  --identity-tab-color: #ffcb00;
+  --identity-icon-color: #ffcb00;
+}
+
+[data-identity-color="orange"] {
+  --identity-tab-color: #ff9216;
+  --identity-icon-color: #ff9216;
+}
+
+[data-identity-color="red"] {
+  --identity-tab-color: #d92215;
+  --identity-icon-color: #d92215;
+}
+
+[data-identity-color="pink"] {
+  --identity-tab-color: #ea385e;
+  --identity-icon-color: #ee5195;
+}
+
+[data-identity-color="purple"] {
+  --identity-tab-color: #7a2f7a;
+  --identity-icon-color: #7a2f7a;
+}
+
+[data-identity-icon="fingerprint"] {
+  --identity-icon: url("chrome://browser/content/usercontext.svg#fingerprint");
+}
+
+[data-identity-icon="briefcase"] {
+  --identity-icon: url("chrome://browser/content/usercontext.svg#briefcase");
+}
+
+[data-identity-icon="dollar"] {
+  --identity-icon: url("chrome://browser/content/usercontext.svg#dollar");
+}
+
+[data-identity-icon="cart"] {
+  --identity-icon: url("chrome://browser/content/usercontext.svg#cart");
+}
+
+[data-identity-icon="circle"] {
+  --identity-icon: url("chrome://browser/content/usercontext.svg#circle");
+}

webextension/js/popup.js

@@ -5,29 +5,16 @@ browser.contextualIdentities.query({}).then(identites=> {
   identites.forEach(identity=> {
     const identityRow = `
     <tr>
-      <td><div class="userContext-icon" data-identity-name="${identity.name}"></div></td>
+      <td><div class="userContext-icon"
+        data-identity-icon="${identity.icon}"
+        data-identity-color="${identity.color}"
+      ></div></td>
       <td>${identity.name}</td>
       <td>&gt;</td>
     </tr>`;
 
-    const customContainerStyle = `
-    [data-identity-name="${identity.name}"] {
-      --identity-icon: url('/img/usercontext.svg#${identity.icon}');
-      --identity-icon-color: ${identity.color};
-    }`;
-
-    customContainerStyles += customContainerStyle;
     identitiesListElement.innerHTML += identityRow;
   });
-
-  const customContainerStyleElement = document.createElement('style');
-
-  customContainerStyleElement.type = 'text/css';
-  customContainerStyleElement.appendChild(document.createTextNode(customContainerStyles));
-
-  const head = document.head;
-
-  head.appendChild(customContainerStyleElement);
 });
 
 document.querySelector('#edit-containers-link').addEventListener('click', ()=> {