From 5c738a7adc52578732a5f4f4a428ec901e29bab3 Mon Sep 17 00:00:00 2001 From: Jonathan Kingston Date: Wed, 21 Dec 2016 15:55:57 +0000 Subject: [PATCH] Adding in container icons to menu --- webextension/img/filters.svg | 18 ++++++++ webextension/js/popup.js | 8 +++- webextension/popup.html | 1 + webextension/style/style.css | 89 ++++++++++++++++++++++++++++++++++++ 4 files changed, 115 insertions(+), 1 deletion(-) create mode 100644 webextension/img/filters.svg create mode 100644 webextension/style/style.css diff --git a/webextension/img/filters.svg b/webextension/img/filters.svg new file mode 100644 index 0000000..4dc4ccb --- /dev/null +++ b/webextension/img/filters.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + diff --git a/webextension/js/popup.js b/webextension/js/popup.js index f22da15..1043a8b 100644 --- a/webextension/js/popup.js +++ b/webextension/js/popup.js @@ -1,5 +1,11 @@ browser.contextualIdentities.query({}).then((identites) => { identites.forEach((identity) => { - document.querySelector('.identities-list').innerHTML += `
  • ${identity.icon} ${identity.name}
    • `; + document.querySelector('.identities-list').innerHTML += `
  • +
    + ${identity.name} +
    • `; }); }); diff --git a/webextension/popup.html b/webextension/popup.html index 4ffe15b..b90cc52 100644 --- a/webextension/popup.html +++ b/webextension/popup.html @@ -2,6 +2,7 @@ Containers browserAction Popup +

    Containers!

    diff --git a/webextension/style/style.css b/webextension/style/style.css new file mode 100644 index 0000000..85162a6 --- /dev/null +++ b/webextension/style/style.css @@ -0,0 +1,89 @@ +[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"); +} + +.userContext-indicator { + width: 16px; + height: 16px; + margin-right: 1rem; + background-image: var(--identity-icon); + filter: url(chrome://global/skin/filters.svg#fill); + filter: url(../img/filters.svg#fill); + fill: var(--identity-icon-color); + background-size: contain; + background-repeat: no-repeat; + background-position: center center; +} + +.identities-list { + padding: 0; + margin: 0; +} + +.identities-list li { + display: flex; + padding: 0.5em; + background: #f4f4f4; + border-bottom: 1px solid #d5d5d5; +} +.identities-list li a { + display: flex; + color: #000; + text-decoration: none; +}