fixed the unresponsive white part to change colors with browser theme
This commit is contained in:
silvererudite
parent
7f05d7186e
commit
e46f35f770
4 changed files with 57 additions and 34 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,33 +12,24 @@ 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 paras= document.getElementsByTagName('p');
|
||||
for (var i = 0; i < paras.length; i++) {
|
||||
paras[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;
|
||||
}
|
||||
}
|
||||
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()
|
||||
|
|
|
|||
|
|
@ -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}">
|
||||
|
|
@ -650,11 +650,22 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
|
|||
<div class="container-name truncate-text"></div>`;
|
||||
context.querySelector(".container-name").textContent = identity.name;
|
||||
manage.innerHTML = "<img src='/img/container-arrow.svg' class='show-tabs pop-button-image-small' />";
|
||||
|
||||
|
||||
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}"
|
||||
|
|
@ -890,6 +903,24 @@ Logic.registerPanel(P_CONTAINERS_EDIT, {
|
|||
tr.querySelector(".container-name").textContent = identity.name;
|
||||
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 => {
|
||||
|
|
@ -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);
|
||||
|
|
@ -1154,4 +1186,5 @@ window.addEventListener("resize", function () {
|
|||
root.style.setProperty("--overflow-size", difference + "px");
|
||||
root.style.setProperty("--icon-fit", "12");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<title>Multi-Account Containers</title>
|
||||
<link rel="stylesheet" href="css/popup.css">
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue