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

fixed the unresponsive white part to change colors with browser theme

Browse source
This commit is contained in:
silvererudite 2019-10-17 20:23:23 +06:00
parent 7f05d7186e
commit e46f35f770
4 changed files with 57 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/css/popup.css
View file

@ -601,7 +601,7 @@ span ~ .panel-header-text {
.container-panel-row:hover .clickable.userContext-wrapper,
.container-panel-row:focus .clickable.userContext-wrapper {
background: #f2f2f2;
background-color: #f2f2f2;
}
.userContext-icon-wrapper {

46
src/js/check-theme.js
View file

@ -1,8 +1,7 @@
/* eslint-disable linebreak-style */
/* eslint-disable no-redeclare */
/* eslint-disable quotes */
/* eslint-disable no-var */
/* eslint-disable indent */
/* eslint-disable quotes */
function getStyle(themeInfo) {
@ -13,34 +12,25 @@ function getStyle(themeInfo) {
document.getElementById('current-tab').style.color=themeInfo.colors.tab_background_text;
const headers = document.getElementsByTagName('h3');
for (var i = 0; i < headers.length; i++) {
headers[i].style.color =themeInfo.colors.tab_background_text;
const headers = document.getElementsByTagName('h3');
for (var i = 0; i < headers.length; i++) {
headers[i].style.color =themeInfo.colors.tab_background_text;
}
const paras= document.getElementsByTagName('p');
for (var i = 0; i < paras.length; i++) {
paras[i].style.color =themeInfo.colors.tab_background_text;
}
document.getElementById('sort-containers-link').style.color=themeInfo.colors.tab_background_text;
var legends1= document.getElementsByTagName('legend');
for (var i = 0; i < legends1.length; i++) {
legends1[i].style.color =themeInfo.colors.tab_background_text;
}
}
const paras= document.getElementsByTagName('p');
for (var i = 0; i < paras.length; i++) {
paras[i].style.color =themeInfo.colors.tab_background_text;
}
}
document.getElementById('sort-containers-link').style.color=themeInfo.colors.tab_background_text;
var legends1= document.getElementsByTagName('legend');
for (var i = 0; i < legends1.length; i++) {
legends1[i].style.color =themeInfo.colors.tab_background_text;
}
//this part of the code is for changing the popup's rows showing conatinerslist (it doesn't work)
// var tabl= document.getElementsByClassName('container-info-list');
// for (var i = 0; i < tabl.length; i++) {
// tabl[i].style.backgroundColor =themeInfo.colors.toolbar;
// }
//or
//document.getElementById('container-info-table').style.color=themeInfo.colors.toolbar;
}
async function getCurrentThemeInfo()
{

39
src/js/popup.js
View file

@ -1,3 +1,4 @@
/* eslint-disable linebreak-style */
/* 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/. */
@ -624,7 +625,6 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
// This method is called when the panel is shown.
async prepare() {
const fragment = document.createDocumentFragment();
this.prepareCurrentTabHeader();
Logic.identities().forEach(identity => {
@ -641,7 +641,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
context.setAttribute("tabindex", "0");
context.title = escaped`Create ${identity.name} tab`;
context.innerHTML = escaped`
<div class="userContext-icon-wrapper open-newtab">
<div class="userContext-icon-wrapper open-newtab">
<div class="usercontext-icon"
data-identity-icon="${identity.icon}"
data-identity-color="${identity.color}">
@ -654,6 +654,17 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
fragment.appendChild(tr);
tr.appendChild(context);
function style(themeInfo){
context.style.backgroundColor=themeInfo.colors.toolbar;
context.style.color=themeInfo.colors.tab_background_text;
}
async function getTheme() {
const themeInfo = await browser.theme.getCurrent();
style(themeInfo);
}
getTheme();
if (hasTabs) {
tr.appendChild(manage);
@ -674,6 +685,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
} else if (hasTabs) {
Logic.showPanel(P_CONTAINER_INFO, identity);
}
});
});
@ -862,12 +874,13 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
// This method is called when the panel is shown.
prepare() {
const fragment = document.createDocumentFragment();
Logic.identities().forEach(identity => {
const tr = document.createElement("tr");
fragment.appendChild(tr);
tr.classList.add("container-panel-row");
tr.innerHTML = escaped`
<td class="userContext-wrapper">
<td class="userContext-wrapper">
<div class="userContext-icon-wrapper">
<div class="usercontext-icon"
data-identity-icon="${identity.icon}"
@ -891,6 +904,24 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
tr.querySelector(".edit-container").setAttribute("title", `Edit ${identity.name} container`);
tr.querySelector(".remove-container").setAttribute("title", `Remove ${identity.name} container`);
function style(themeInfo){
const tabl= document.getElementsByClassName("userContext-wrapper");
// eslint-disable-next-line no-var
for (var i = 0; i < tabl.length; i++) {
tabl[i].style.backgroundColor=themeInfo.colors.toolbar;
tabl[i].style.color=themeInfo.colors.tab_background_text;
}
}
async function getTheme()
{
const themeInfo = await browser.theme.getCurrent();
style(themeInfo);
}
getTheme();
Logic.addEnterHandler(tr, e => {
if (e.target.matches(".edit-container-icon") || e.target.parentNode.matches(".edit-container-icon")) {
@ -1001,6 +1032,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
Logic.addEnterHandler(deleteButton, async () => {
const userContextId = Logic.currentUserContextId();
// Lets show the message to the current tab
// eslint-disable-next-line no-warning-comments
// TODO remove then when firefox supports arrow fn async
const currentTab = await Logic.currentTab();
Logic.setOrRemoveAssignment(currentTab.id, assumedUrl, userContextId, true);
@ -1155,3 +1187,4 @@ window.addEventListener("resize", function () {
root.style.setProperty("--icon-fit", "12");
}
});

2
src/popup.html
View file

@ -214,6 +214,6 @@
<script src="js/utils.js"></script>
<script src="js/popup.js"></script>
<script src="js/check-theme.js"></script>
<script src="js/check-theme.js"></script>
</body>
</html>