Add focus mode

src/css/popup.css

@@ -583,6 +583,10 @@ span ~ .panel-header-text {
   padding-inline-start: 4px;
 }
 
+.container-panel-row .container-name.hidden-tabs {
+  opacity: var(--inactive-opacity);
+}
+
 .edit-containers-panel .userContext-wrapper {
   max-inline-size: calc(var(--overflow-size) + 203px);
 }

src/img/container-focus.svg

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+  viewBox="0 0 12 12" style="enable-background:new 0 0 12 12;" xml:space="preserve">
+  <style type="text/css">
+    .st0{fill:#858585;}
+  </style>
+  <path class="st0" d="M5.517.291v2.037c-1.638.2-2.988 1.55-3.188 3.188H.29v.968h2.04c.199 1.637 1.55 2.988 3.187 3.188v2.037h.968v-2.04c1.636-.2 2.988-1.548 3.188-3.185h2.037v-.968H9.673a3.713 3.713 0 0 0-3.188-3.188V.291zm.298.299h.37v1.96l.138.013c1.613.127 2.988 1.503 3.115 3.115l.01.138h1.961v.368H9.45l-.01.138c-.12 1.6-1.516 2.996-3.116 3.116l-.138.01v1.962h-.37V9.447l-.138-.01c-1.6-.119-2.994-1.515-3.114-3.115l-.01-.138H.592v-.368h1.963l.01-.138c.119-1.6 1.513-2.996 3.113-3.115l.138-.01zm0 2.328l-.164.018c-1.402.14-2.573 1.313-2.714 2.714l-.018.166h2.896zm.37 0v2.898H9.08l-.016-.166C8.925 4.248 7.75 3.077 6.35 2.936zm-.668.396v2.202H3.315a2.747 2.747 0 0 1 2.202-2.202zm.968 0a2.75 2.75 0 0 1 2.202 2.202H6.485zM2.92 6.184l.018.166c.14 1.402 1.313 2.573 2.714 2.714l.164.018V6.184zm3.266 0v2.898l.164-.018c1.402-.14 2.575-1.313 2.716-2.714l.016-.166zm-2.87.3h2.202v2.202a2.747 2.747 0 0 1-2.202-2.202zm3.17 0h2.202a2.75 2.75 0 0 1-2.202 2.202zm-.151-4.07V.44h-.668v1.972c-1.679.125-3.128 1.574-3.253 3.253H.441v.668h1.972c.125 1.679 1.574 3.128 3.253 3.253v1.972h.668V9.587c1.679-.125 3.128-1.574 3.253-3.253h1.972v-.668H9.587c-.134-1.689-1.563-3.12-3.253-3.253zm2.581 3.252H6.334V3.085c1.327.133 2.448 1.254 2.581 2.581zM5.666 3.085v2.581H3.085c.133-1.327 1.254-2.448 2.581-2.581zM3.085 6.334h2.581v2.581c-1.327-.133-2.448-1.254-2.581-2.581zm3.249 2.581V6.334h2.581c-.133 1.327-1.254 2.448-2.581 2.581z" />
+</svg>

src/js/popup.js

@@ -666,11 +666,15 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       const hasTabs = (identity.hasHiddenTabs || identity.hasOpenTabs);
       const tr = document.createElement("tr");
       const context = document.createElement("td");
+      const focus = document.createElement("td");
       const manage = document.createElement("td");
+      const openIdentities = Logic.identities().filter(i => i.hasOpenTabs);
+      const focusingOn = openIdentities.length === 1 ? openIdentities[0] : null;
 
       tr.classList.add("container-panel-row");
 
       context.classList.add("userContext-wrapper", "open-newtab", "clickable", "firstTabindex");
+      focus.classList.add("focus-container", "pop-button");
       manage.classList.add("show-tabs", "pop-button");
       manage.setAttribute("title", `View ${identity.name} container`);
       context.setAttribute("tabindex", "0");
@@ -683,7 +687,10 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
           </div>
         </div>
         <div class="container-name truncate-text"></div>`;
-      context.querySelector(".container-name").textContent = identity.name;
+      const containerName = context.querySelector(".container-name");
+      containerName.textContent = identity.name;
+      focus.title = escaped`Focus on ${identity.name} container`;
+      focus.innerHTML = "<img src='/img/container-focus.svg' class='focus-container pop-button-image-small' />";
       manage.innerHTML = "<img src='/img/container-arrow.svg' class='show-tabs pop-button-image-small' />";
 
       fragment.appendChild(tr);
@@ -691,13 +698,32 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
       tr.appendChild(context);
 
       if (hasTabs) {
+        if (focusingOn !== identity) {
+          tr.appendChild(focus);
+        }
         tr.appendChild(manage);
+
+        if (identity.hasHiddenTabs) {
+          containerName.classList.add("hidden-tabs");
+          containerName.textContent +=  escaped` (${identity.numberOfHiddenTabs})`;
+        } else {
+          containerName.textContent +=  escaped` (${identity.numberOfOpenTabs})`;
+        }
       }
 
       Logic.addEnterHandler(tr, async (e) => {
-        if (e.target.matches(".open-newtab")
+        if (e.target.matches(".focus-container")) {
-          || e.target.parentNode.matches(".open-newtab")
+          Logic.identities().forEach(otherIdentity => {
-          || e.type === "keydown") {
+            browser.runtime.sendMessage({
+              method: otherIdentity === identity ? "showTabs" : "hideTabs",
+              windowId: browser.windows.WINDOW_ID_CURRENT,
+              cookieStoreId: otherIdentity.cookieStoreId
+            });
+          });
+          window.close();
+        } else if (e.target.matches(".open-newtab")
+            || e.target.parentNode.matches(".open-newtab")
+            || e.type === "keydown") {
           try {
             browser.tabs.create({
               cookieStoreId: identity.cookieStoreId