Fixed #1810 - Split container item funcitonality

src/css/popup.css

@@ -703,12 +703,16 @@ h3.title {
   color: #fff;
 }
 
-.menu-text {
+.menu-item-name {
+  display: flex;
   inline-size: calc(100% - 40px);
-  line-height: 24px;
   max-inline-size: 260px;
 }
 
+.menu-text {
+  line-height: 24px;
+}
+
 .menu-icon {
   display: block;
   height: 16px;

src/js/popup.js

@@ -403,6 +403,12 @@ const Logic = {
       if(element){
         element.click();
       }
+
+      // If one Container is highlighted,
+      if (element.classList.contains("keyboard-right-arrow-override")) {
+        element.querySelector(".menu-right-float").click();
+      }
+
       break;
     }
     case 37:
@@ -639,12 +645,13 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
 
     Logic.identities().forEach(identity => {
       const tr = document.createElement("tr");
-      tr.classList.add("menu-item", "hover-highlight", "keyboard-nav");
+      tr.classList.add("menu-item", "hover-highlight", "keyboard-nav", "keyboard-right-arrow-override");
       tr.setAttribute("tabindex", "0");
       const td = document.createElement("td");
       const openTabs = identity.numberOfOpenTabs || "" ;
 
       td.innerHTML = Utils.escaped`
+        <div class="menu-item-name">
           <div class="menu-icon">
             <div class="usercontext-icon"
               data-identity-icon="${identity.icon}"
@@ -652,6 +659,7 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
             </div>
           </div>
           <span class="menu-text">${identity.name}</span>
+        </div>
         <span class="menu-right-float">
           <span class="container-count">${openTabs}</span>
           <span class="menu-arrow">
@@ -663,9 +671,37 @@ Logic.registerPanel(P_CONTAINERS_LIST, {
 
       tr.appendChild(td);
 
-      Utils.addEnterHandler(tr, () => {
+      const openInThisContainer = tr.querySelector(".menu-item-name");
+      Utils.addEnterHandler(openInThisContainer, () => {
+        try {
+          browser.tabs.create({
+            cookieStoreId: identity.cookieStoreId
+          });
+          window.close();
+        } catch (e) {
+          window.close();
+        }
+      });
+
+      Utils.addEnterOnlyHandler(tr, () => {
+        try {
+          browser.tabs.create({
+            cookieStoreId: identity.cookieStoreId
+          });
+          window.close();
+        } catch (e) {
+          window.close();
+        }
+      });
+
+      // Select only the ">" from the container list
+      const showPanelButton = tr.querySelector(".menu-right-float");
+
+      Utils.addEnterHandler(showPanelButton, () => {
         Logic.showPanel(P_CONTAINER_INFO, identity);
       });
+
+
     });
 
     const list = document.querySelector("#identities-list");

src/js/utils.js

@@ -75,6 +75,15 @@ const Utils = {
     });
   },
 
+  addEnterOnlyHandler(element, handler) {
+    element.addEventListener("keydown", (e) => {
+      if (e.keyCode === 13) {
+        e.preventDefault();
+        handler(e);
+      }
+    });
+  },  
+
   userContextId(cookieStoreId = "") {
     const userContextId = cookieStoreId.replace("firefox-container-", "");
     return (userContextId !== cookieStoreId) ? Number(userContextId) : false;

src/popup.html

@@ -171,13 +171,14 @@
       <table class="menu" id="identities-list">
         <tr class="menu-item hover-highlight">
           <td>
+            <div class="menu-item-name">
               <div class="menu-icon">
                 <div class="usercontext-icon"
                   data-identity-icon="pet"
-                data-identity-color="blue">
+                  data-identity-color="blue"></div>
-              </div>
               </div>
               <span class="menu-text">Default</span>
+            </div>
             <span class="menu-right-float">
               <span class="container-count">22</span>
               <span class="menu-arrow">