fixed info panel

src/css/popup.css

@@ -1029,13 +1029,15 @@ h3.title {
   cursor: pointer;
 }
 
-.menu-item:hover {
+.disabled-menu-item {
-  background: #1296F8;
+  font-style: italic;
-  color: #FFFFFF;
+  color: grey;
+  cursor: default;
 }
 
-.hover-highlight {
+.hover-highlight:hover {
-
+  background: #1296F8;
+  color: #FFFFFF;
 }
 
 .menu-text {

src/js/popup.js

@@ -2,8 +2,8 @@
  * 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/. */
 
-const CONTAINER_HIDE_SRC = "/img/container-hide.svg";
+const CONTAINER_HIDE_SRC = "/img/password-hide.svg";
-const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg";
+const CONTAINER_UNHIDE_SRC = "/img/password-hide.svg";
 
 const DEFAULT_COLOR = "blue";
 const DEFAULT_ICON = "circle";
@@ -172,20 +172,16 @@ const Logic = {
     return activeTabs.length;
   },
 
-  _disableMoveTabs(message) {
+  _disableMenuItem(message, elementToDisable = document.querySelector("#move-to-new-window")) {
-    // const moveTabsEl = document.querySelector("#container-info-movetabs");
+    elementToDisable.setAttribute("title", message);
-    const fragment = document.createDocumentFragment();
+    elementToDisable.classList.remove("hover-highlight");
-    const incompatEl = document.createElement("div");
+    elementToDisable.classList.add("disabled-menu-item");
+  },
 
-    // moveTabsEl.classList.remove("clickable");
+  _enableMenuItems(elementToDisable = document.querySelector("#move-to-new-window")) {
-    // moveTabsEl.setAttribute("title", message);
+    elementToDisable.removeAttribute("title");
-
+    elementToDisable.classList.add("hover-highlight");
-    fragment.appendChild(incompatEl);
+    elementToDisable.classList.remove("disabled-menu-item");
-    incompatEl.setAttribute("id", "container-info-movetabs-incompat");
-    incompatEl.textContent = message;
-    incompatEl.classList.add("container-info-tab-row");
-
-    // moveTabsEl.parentNode.insertBefore(fragment, moveTabsEl.nextSibling);
   },
 
   async refreshIdentities() {
@@ -624,6 +620,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
     Logic.identities().forEach(identity => {
       const tr = document.createElement("tr");
       tr.classList.add("menu-item");
+      tr.setAttribute("tabindex", "0");
       const td = document.createElement("td");
       const openTabs = identity.numberOfOpenTabs || "" ;
 
@@ -685,10 +682,11 @@ Logic.registerPanel(P_CONTAINER_INFO, {
   async initialize() {
     const closeContEl = document.querySelector("#close-container-info-panel");
     Utils.addEnterHandler(closeContEl, () => {
-      Logic.showPreviousPanel();
+      Logic.showPanel(P_CONTAINERS_LIST);
     });
 
     // Check if the user has incompatible add-ons installed
+    // Note: this is not implemented in messageHandler.js
     let incompatible = false;
     try {
       incompatible = await browser.runtime.sendMessage({
@@ -698,15 +696,25 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       throw new Error("Could not check for incompatible add-ons.");
     }
 
+    const moveTabsEl = document.querySelector("#move-to-new-window");
     const numTabs = await Logic.numTabs();
     if (incompatible) {
-      Logic._disableMoveTabs("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs.");
+      Logic._disableMenuItem("Moving container tabs is incompatible with Pulse, PageShot, and SnoozeTabs.");
       return;
     } else if (numTabs === 1) {
-      Logic._disableMoveTabs("Cannot move a tab from a single-tab window.");
+      Logic._disableMenuItem("Cannot move a tab from a single-tab window.");
       return;
     }
 
+    Utils.addEnterHandler(moveTabsEl, async () => {
+      await browser.runtime.sendMessage({
+        method: "moveTabsToWindow",
+        windowId: browser.windows.WINDOW_ID_CURRENT,
+        cookieStoreId: Logic.currentIdentity().cookieStoreId,
+      });
+      window.close();
+    });
+
     const manageContainer = document.querySelector("#manage-container-link");
     Utils.addEnterHandler(manageContainer, async () => {
       Logic.showPanel(P_CONTAINER_EDIT, Logic.currentIdentity());
@@ -730,6 +738,14 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       trHasTabs.style.display = !identity.hasHiddenTabs && !identity.hasOpenTabs ? "none" : "";
     }
 
+    if (identity.numberOfOpenTabs === 0) {
+      Logic._disableMenuItem("No tabs available for this container");
+    } else {
+      Logic._enableMenuItems();
+    }
+
+    this.intializeShowHide(identity);
+
     // Let's remove all the previous tabs.
     const table = document.getElementById("container-info-table");
     while (table.firstChild) {
@@ -745,6 +761,35 @@ Logic.registerPanel(P_CONTAINER_INFO, {
     return this.buildInfoTable(tabs);
   },
 
+  intializeShowHide(identity) {
+    const hideContEl = document.querySelector("#hideorshow-container");
+    if (identity.numberOfOpenTabs === 0 && !identity.hasHiddenTabs) {
+      return Logic._disableMenuItem("No tabs available for this container",  hideContEl);
+    } else {
+      Logic._enableMenuItems(hideContEl);
+    }
+
+    Utils.addEnterHandler(hideContEl, async () => {
+      try {
+        browser.runtime.sendMessage({
+          method: identity.hasHiddenTabs ? "showTabs" : "hideTabs",
+          windowId: browser.windows.WINDOW_ID_CURRENT,
+          cookieStoreId: Logic.currentCookieStoreId()
+        });
+        window.close();
+      } catch (e) {
+        window.close();
+      }
+    });
+
+    const hideShowIcon = document.getElementById("container-info-hideorshow-icon");
+    hideShowIcon.src = identity.hasHiddenTabs ? CONTAINER_UNHIDE_SRC : CONTAINER_HIDE_SRC;
+
+    const hideShowLabel = document.getElementById("container-info-hideorshow-label");
+    hideShowLabel.textContent = identity.hasHiddenTabs ? "Show this container" : "Hide this container";
+    return;
+  },
+
   buildInfoTable(tabs) {
     // For each one, let's create a new line.
     const fragment = document.createDocumentFragment();
@@ -805,10 +850,8 @@ Logic.registerPanel(P_CONTAINER_PICKER, {
   // This method is called when the object is registered.
   initialize() {
     const closeContEl = document.querySelector("#close-container-picker-panel");
-    closeContEl.setAttribute("tabindex", "0");
-    closeContEl.classList.add("firstTabindex");
     Utils.addEnterHandler(closeContEl, () => {
-      Logic.showPreviousPanel();
+      Logic.showPanel(P_CONTAINERS_LIST);
     });
   },
 

src/popup.html

@@ -119,10 +119,10 @@
     <h3 class="title">
       Multi-Account Containers
     </h3>
-    <a href="#" id="info-icon">i</a>
+    <a href="#" id="info-icon" tabindex="10">i</a>
     <hr>
     <table class="menu">
-      <tr class="menu-item" id="open-new-tab-in">
+      <tr class="menu-item hover-highlight" id="open-new-tab-in" tabindex="0">
         <td>
           <img class="menu-icon" alt="Open in New Tab" src="/img/tab-new-16.svg" />
           <span class="menu-text">Open New Tab in...</span>
@@ -131,7 +131,7 @@
             </span>
         </td>
       </tr>
-      <tr class="menu-item" id="reopen-site-in">
+      <tr class="menu-item hover-highlight" id="reopen-site-in" tabindex="0">
         <td>
           <img class="menu-icon" alt="Open in New Tab" src="/img/refresh-16.svg" />
           <span class="menu-text">Reopen This Site in...</span>
@@ -143,7 +143,7 @@
     </table>
     <hr>
     <table class="menu">
-      <tr class="menu-item" id="sort-containers-link">
+      <tr class="menu-item hover-highlight" id="sort-containers-link" tabindex="0">
         <td>
           <img class="menu-icon" alt="Open in New Tab" src="/img/sort-16_1.svg" />
           <span class="menu-text">Sort Tabs by Container</span>
@@ -151,7 +151,7 @@
             </span>
         </td>
       </tr>
-      <tr class="menu-item" id="always-open-in">
+      <tr class="menu-item hover-highlight" id="always-open-in" tabindex="0">
         <td>
           <img class="menu-icon" alt="Open in New Tab" src="/img/open-in-new-16.svg" />
           <span class="menu-text">Always Open This Site in...</span>
@@ -167,7 +167,7 @@
     </div>
     <div class="scrollable identities-list">
       <table class="menu" id="identities-list">
-        <tr class="menu-item">
+        <tr class="menu-item hover-highlight">
           <td>
             <div class="menu-icon">
               <div class="usercontext-icon"
@@ -186,7 +186,7 @@
         </tr>
       </table>
     </div>
-    <div class="bottom-btn" id="manage-containers-link">
+    <div class="bottom-btn" id="manage-containers-link" tabindex="0">
       Manage Containers
     </div> 
   </div>
@@ -199,15 +199,15 @@
     <button class="btn-return arrow-left" id="close-container-info-panel" tabindex="0"></button>
     <hr>
     <table class="menu">
-      <tr class="menu-item" id="hide-container">
+      <tr class="menu-item hover-highlight" id="hideorshow-container" tabindex="0">
         <td>
-          <img class="menu-icon" alt="Hide This Container" src="/img/tab-new-16.svg" />
+          <img id="container-info-hideorshow-icon" class="menu-icon" alt="Hide This Container" src="img/password-hide.svg" />
-          <span class="menu-text">Hide This Container</span>
+          <span id="container-info-hideorshow-label" class="menu-text">Hide This Container</span>
             <span class="menu-arrow">
             </span>
         </td>
       </tr>
-      <tr class="menu-item" id="move-to-new-window">
+      <tr class="menu-item hover-highlight" id="move-to-new-window" tabindex="0">
         <td>
           <img class="menu-icon" alt="Move Tabs to a New Window" src="/img/movetowindow-16.svg" />
           <span class="menu-text">Move Tabs to a New Window</span>
@@ -215,7 +215,7 @@
             </span>
         </td>
       </tr>
-      <tr class="menu-item" id="always-open">
+      <tr class="menu-item hover-highlight hover-highlight" id="always-open" tabindex="0">
         <td>
           <img class="menu-icon" alt="Always Open Site in Container" src="/img/open-in-new-16.svg" />
           <span class="menu-text" id="always-open-in-info-panel">Always Open Site in Container</span>
@@ -242,11 +242,11 @@
     <h3 class="title" id="picker-title">
       Multi-Account Containers
     </h3>
-    <button class="btn-return arrow-left" id="close-container-picker-panel"></button>
+    <button class="btn-return arrow-left" id="close-container-picker-panel" tabindex="0"></button>
     <hr>
     <div class="scrollable identities-list">
       <table class="menu" id="picker-identities-list">
-        <tr class="menu-item">
+        <tr class="menu-item hover-highlight">
           <td>
             <div class="menu-icon">
               <div class="usercontext-icon"