From 53363865cb722e124f40da9f1d01a499f9fd4732 Mon Sep 17 00:00:00 2001
From: groovecoder <luke.crouch@gmail.com>
Date: Tue, 20 Dec 2016 14:43:53 -0600
Subject: [PATCH] for #5: fill & color container icons

---
 webextension/css/popup.css   | 31 +++++++++++++++++++++++++++++++
 webextension/img/filters.svg |  9 +++++++++
 webextension/js/popup.js     |  2 +-
 3 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 webextension/img/filters.svg

diff --git a/webextension/css/popup.css b/webextension/css/popup.css
index 045ca64..5430043 100644
--- a/webextension/css/popup.css
+++ b/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;
 }
diff --git a/webextension/img/filters.svg b/webextension/img/filters.svg
new file mode 100644
index 0000000..1f377b9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/webextension/js/popup.js b/webextension/js/popup.js
index 0e60c6e..316c5c9 100644
--- a/webextension/js/popup.js
+++ b/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>`;