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

for #5: define styles in popup for containers

Browse source
This commit is contained in:
groovecoder 2016-12-21 11:44:12 -06:00
parent 11bcc7a379
commit 080b00e031
2 changed files with 21 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
webextension/css/popup.css
View file

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

24
webextension/js/popup.js
View file

@ -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', ()=> {