rowan/multi-account-containers
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Adding in container icons to menu

Browse source
This commit is contained in:
Jonathan Kingston 2016-12-21 15:55:57 +00:00
parent e534da7c88
commit 5c738a7adc
4 changed files with 115 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
webextension/img/filters.svg Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0"?>
<!-- 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>
<filter id="iconPressed" color-interpolation-filters="sRGB">
<!-- Multiply all components with 0.55. -->
<feComponentTransfer>
<feFuncR type="linear" slope=".55"/>
<feFuncG type="linear" slope=".55"/>
<feFuncB type="linear" slope=".55"/>
</feComponentTransfer>
</filter>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 689 B

8
webextension/js/popup.js
View file

@ -1,5 +1,11 @@
browser.contextualIdentities.query({}).then((identites) => {
identites.forEach((identity) => {
document.querySelector('.identities-list').innerHTML += `<li><a href="#">${identity.icon} ${identity.name}</a></li>`;
document.querySelector('.identities-list').innerHTML += `<li><a href="#">
<div
class="userContext-indicator"
data-identity-icon="${identity.icon}"
data-identity-color="${identity.color}"></div>
${identity.name}
</a></li>`;
});
});

1
webextension/popup.html
View file

@ -2,6 +2,7 @@
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Containers browserAction Popup</title>
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<h1>Containers!</h1>

89
webextension/style/style.css Normal file
View file

@ -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;
}