fixed the unresponsive white part to change colors with browser theme

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

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 {

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) {
@ -22,7 +21,7 @@ function getStyle(themeInfo) {
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');
@ -30,16 +29,7 @@ function getStyle(themeInfo) {
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()

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 => {
@ -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,6 +874,7 @@ 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);
@ -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");
}
});