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,19 +645,21 @@ 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-icon">
-          <div class="usercontext-icon"
-            data-identity-icon="${identity.icon}"
-            data-identity-color="${identity.color}">
+      td.innerHTML = Utils.escaped`
+        <div class="menu-item-name">
+          <div class="menu-icon">
+            <div class="usercontext-icon"
+              data-identity-icon="${identity.icon}"
+              data-identity-color="${identity.color}">
+            </div>
           </div>
+          <span class="menu-text">${identity.name}</span>
         </div>
-        <span class="menu-text">${identity.name}</span>
         <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-icon">
-              <div class="usercontext-icon"
-                data-identity-icon="pet"
-                data-identity-color="blue">
+            <div class="menu-item-name">
+              <div class="menu-icon">
+                <div class="usercontext-icon"
+                  data-identity-icon="pet"
+                  data-identity-color="blue"></div>
               </div>
+              <span class="menu-text">Default</span>
             </div>
-            <span class="menu-text">Default</span>
             <span class="menu-right-float">
               <span class="container-count">22</span>
               <span class="menu-arrow">