for #5: fill & color container icons

webextension/css/popup.css

@@ -28,6 +28,37 @@ 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;
+  background-repeat: no-repeat;
+  background-size: contain;
+  filter: url('/img/filters.svg#fill');
+  fill: var(--identity-icon-color);
+  width: 32px;
+  height: 32px;
+}
+
 .edit-identities {
   background: #DCDBDC;
 }

webextension/img/filters.svg

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg">
+  <filter id="fill">
+    <feComposite in="FillPaint" in2="SourceGraphic" operator="in"/>
+  </filter>
+</svg>

webextension/js/popup.js

@@ -6,7 +6,7 @@ browser.runtime.sendMessage('get-identities').then(reply=> {
       const identityName = identity.l10nID.match(/userContext(\w*)\.label/)[IDENTITY_L10NID_MATCH_INDEX];
       const identityRow = `
       <tr>
-        <td><img class="${identity.icon}-icon" src="/img/usercontext.svg#${identity.icon}"></td>
+        <td><div class="userContext-icon" data-identity-icon="${identity.icon}"></div></td>
         <td>${identityName}</td>
         <td>&gt;</td>
       </tr>`;