fixed the unresponsive white part to change colors with browser theme

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 {

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');
+    const headers = document.getElementsByTagName('h3');
-  for (var i = 0; i < headers.length; i++) {
+    for (var i = 0; i < headers.length; i++) {
-  headers[i].style.color =themeInfo.colors.tab_background_text;
+      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');
+    const paras= document.getElementsByTagName('p');
-  for (var i = 0; i < legends1.length; i++) {
+    for (var i = 0; i < paras.length; i++) {
-    legends1[i].style.color =themeInfo.colors.tab_background_text;
+      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() 

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`
-        <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");
   }
-});
+});
+

src/popup.html

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