for #5: define styles in popup for containers

webextension/css/popup.css

@@ -28,26 +28,6 @@ table.unstriped tbody tr {
   background-color: #fefefe;
 }
 
-[data-identity-icon="fingerprint"] {
-  --identity-icon: url('/img/usercontext.svg#fingerprint');
-  --identity-icon-color: #00a7e0;
-}
-
-[data-identity-icon="briefcase"] {
-  --identity-icon: url('/img/usercontext.svg#briefcase');
-  --identity-icon-color: #ff9216;
-}
-
-[data-identity-icon="dollar"] {
-  --identity-icon: url('/img/usercontext.svg#dollar');
-  --identity-icon-color: #7dc14c;
-}
-
-[data-identity-icon="cart"] {
-  --identity-icon: url('/img/usercontext.svg#cart');
-  --identity-icon-color: #ee5195;
-}
-
 .userContext-icon {
   background-image: var(--identity-icon);
   background-position: center center;

webextension/js/popup.js

@@ -1,15 +1,33 @@
 browser.contextualIdentities.query({}).then(identites=> {
+  let customContainerStyles = '';
+  const identitiesListElement = document.querySelector('.identities-list');
+
   identites.forEach(identity=> {
-    console.log('identity: ', identity);
     const identityRow = `
     <tr>
-      <td><div class="userContext-icon" data-identity-icon="${identity.icon}" data-identity-icon-color="${identity.color}"></div></td>
+      <td><div class="userContext-icon" data-identity-name="${identity.name}"></div></td>
       <td>${identity.name}</td>
       <td>&gt;</td>
     </tr>`;
 
-    document.querySelector('.identities-list').innerHTML += identityRow;
+    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', ()=> {