From e46f35f7701834fd87922078f1ff0983c52ce547 Mon Sep 17 00:00:00 2001 From: silvererudite Date: Thu, 17 Oct 2019 20:23:23 +0600 Subject: [PATCH] fixed the unresponsive white part to change colors with browser theme --- src/css/popup.css | 2 +- src/js/check-theme.js | 40 +++++++++++++++----------------------- src/js/popup.js | 45 +++++++++++++++++++++++++++++++++++++------ src/popup.html | 4 ++-- 4 files changed, 57 insertions(+), 34 deletions(-) diff --git a/src/css/popup.css b/src/css/popup.css index 5f45f10..9469bb3 100644 --- a/src/css/popup.css +++ b/src/css/popup.css @@ -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 { diff --git a/src/js/check-theme.js b/src/js/check-theme.js index 7f59170..878c02d 100644 --- a/src/js/check-theme.js +++ b/src/js/check-theme.js @@ -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() diff --git a/src/js/popup.js b/src/js/popup.js index 80986a2..6ac44e7 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -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` -
+
@@ -650,11 +650,22 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
`; context.querySelector(".container-name").textContent = identity.name; manage.innerHTML = ""; - + 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` - +
{ @@ -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"); } -}); \ No newline at end of file +}); + diff --git a/src/popup.html b/src/popup.html index af21535..df73794 100644 --- a/src/popup.html +++ b/src/popup.html @@ -3,7 +3,7 @@ Multi-Account Containers - + @@ -214,6 +214,6 @@ - +