Now can reopen in default container. Added an 'OK' button to new container panel. Fixed some css

src/css/popup.css

@@ -91,6 +91,7 @@ table {
 }
 
 .scrollable {
+  flex: 1;
   inline-size: 100%;
   max-block-size: 400px;
   overflow: auto;
@@ -638,6 +639,14 @@ span ~ .panel-header-text {
   filter: url('/img/filters.svg#fill');
 }
 
+.mac-icon {
+  background-image: url('/img/multiaccountcontainer-16.svg');
+  background-position: center center;
+  background-repeat: no-repeat;
+  background-size: 16px 16px;
+  block-size: 100%;
+}
+
 .container-panel-row:hover .clickable .usercontext-icon,
 .container-panel-row:focus .clickable .usercontext-icon,
 .container-panel-row .clickable:focus .usercontext-icon {
@@ -1098,6 +1107,7 @@ hr {
 
 .edit-form {
   color: #737373;
+  flex: 1;
   padding-block-end: 0;
   padding-block-start: 0;
   padding-inline-end: 16px;
@@ -1130,14 +1140,14 @@ hr {
   background-color: #fff;
   border-block-start: solid 1px #e3e3e3;
   cursor: default;
+  display: flex;
   height: 65px;
   inline-size: 100%;
-  inset-block-end: 0;
+  justify-content: space-between;
   padding-block-end: 27px;
   padding-block-start: 9px;
   padding-inline-end: 18px;
   padding-inline-start: 17px;
-  position: fixed;
 }
 
 .delete-btn {
@@ -1151,10 +1161,6 @@ hr {
   text-align: center;
 }
 
-.menu-panel {
-  justify-content: flex-start;
-}
-
 .btn-return.arrow-left {
   background-color: rgba(255, 255, 255, 1);
   background-image: url("/img/arrow-icon-left.svg");
@@ -1245,3 +1251,8 @@ tr > td > .trash-button {
 tr:hover > td > .trash-button {
   display: block;
 }
+
+.new-container-icon {
+  font-size: 24px;
+  margin-block-start: -2px;
+}

src/js/background/backgroundLogic.js

@@ -329,6 +329,7 @@ const backgroundLogic = {
   },
 
   cookieStoreId(userContextId) {
+    if(userContextId === 0) return "firefox-default";
     return `firefox-container-${userContextId}`;
   }
 };

src/js/popup.js

@@ -173,14 +173,16 @@ const Logic = {
 
   _disableMenuItem(message, elementToDisable = document.querySelector("#move-to-new-window")) {
     elementToDisable.setAttribute("title", message);
+    elementToDisable.removeAttribute("tabindex");
     elementToDisable.classList.remove("hover-highlight");
     elementToDisable.classList.add("disabled-menu-item");
   },
 
-  _enableMenuItems(elementToDisable = document.querySelector("#move-to-new-window")) {
+  _enableMenuItems(elementToEnable = document.querySelector("#move-to-new-window")) {
-    elementToDisable.removeAttribute("title");
+    elementToEnable.removeAttribute("title");
-    elementToDisable.classList.add("hover-highlight");
+    elementToEnable.setAttribute("tabindex", "0");
-    elementToDisable.classList.remove("disabled-menu-item");
+    elementToEnable.classList.add("hover-highlight");
+    elementToEnable.classList.remove("disabled-menu-item");
   },
 
   async refreshIdentities() {
@@ -222,7 +224,6 @@ const Logic = {
     }
     if (!backwards || !this._currentPanel) {
       this._previousPanelPath.push(this._currentPanel);
-      console.log(this._previousPanelPath);
     }
 
     this._currentPanel = panel;
@@ -337,6 +338,16 @@ const Logic = {
     const panelItem = this._panels[this._currentPanel];
     return document.querySelector(this.getPanelSelector(panelItem));
   },
+
+  listenToPickerBackButton() {
+    const closeContEl = document.querySelector("#close-container-picker-panel");
+    if (!this._listenerSet) {
+      Utils.addEnterHandler(closeContEl, () => {
+        Logic.showPreviousPanel();
+      });
+      this._listenerSet = true;
+    }
+  }
 };
 
 // P_ONBOARDING_1: First page for Onboarding.
@@ -682,7 +693,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
   async initialize() {
     const closeContEl = document.querySelector("#close-container-info-panel");
     Utils.addEnterHandler(closeContEl, () => {
-      Logic.showPanel(P_CONTAINERS_LIST);
+      Logic.showPreviousPanel();
     });
 
     // Check if the user has incompatible add-ons installed
@@ -836,14 +847,11 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, {
 
   // This method is called when the object is registered.
   initialize() {
-    const closeContEl = document.querySelector("#close-container-picker-panel");
-    Utils.addEnterHandler(closeContEl, () => {
-      Logic.showPanel(P_CONTAINERS_LIST);
-    });
   },
 
   // This method is called when the panel is shown.
   prepare() {
+    Logic.listenToPickerBackButton();
     document.getElementById("picker-title").textContent = "Open a New Tab in";
     const fragment = document.createDocumentFragment();
     const pickedFunction = function (identity) {
@@ -857,13 +865,16 @@ Logic.registerPanel(OPEN_NEW_CONTAINER_PICKER, {
       }
     };
 
+    document.getElementById("new-container-div").innerHTML = "";
+
     Logic.identities().forEach(identity => {
       const tr = document.createElement("tr");
-      tr.classList.add("menu-item");
+      tr.classList.add("menu-item", "hover-highlight");
+      tr.setAttribute("tabindex", "0");
       const td = document.createElement("td");
 
       td.innerHTML = Utils.escaped`          
-        <div class="menu-icon hover-highlight">
+        <div class="menu-icon">
           <div class="usercontext-icon"
             data-identity-icon="${identity.icon}"
             data-identity-color="${identity.color}">
@@ -897,23 +908,45 @@ Logic.registerPanel(MANAGE_CONTAINERS_PICKER, {
 
   // This method is called when the object is registered.
   initialize() {
-    const closeContEl = document.querySelector("#close-container-picker-panel");
-    Utils.addEnterHandler(closeContEl, () => {
-      Logic.showPanel(P_CONTAINERS_LIST);
-    });
   },
 
   // This method is called when the panel is shown.
   prepare() {
+    Logic.listenToPickerBackButton();
+    const closeContEl = document.querySelector("#close-container-picker-panel");
+    if (!this._listenerSet) {
+      Utils.addEnterHandler(closeContEl, () => {
+        Logic.showPreviousPanel();
+      });
+      this._listenerSet = true;
+    }
     document.getElementById("picker-title").textContent = "Manage Containers";
     const fragment = document.createDocumentFragment();
     const pickedFunction = function (identity) {
       Logic.showPanel(P_CONTAINER_EDIT, identity);
     };
 
+    document.getElementById("new-container-div").innerHTML = Utils.escaped`
+      <table class="menu">
+        <tr class="menu-item hover-highlight" id="new-container" tabindex="0">
+          <td>
+            <div class="menu-icon new-container-icon">+
+            </div>
+            <span class="menu-text">New Container</span>
+          </td>
+        </tr>
+      </table>
+      <hr>
+    `;
+
+    Utils.addEnterHandler(document.querySelector("#new-container"), () => {
+      Logic.showPanel(P_CONTAINER_EDIT, { name: Logic.generateIdentityName() });
+    });
+
     Logic.identities().forEach(identity => {
       const tr = document.createElement("tr");
-      tr.classList.add("menu-item");
+      tr.classList.add("menu-item", "hover-highlight");
+      tr.setAttribute("tabindex", "0");
       const td = document.createElement("td");
 
       td.innerHTML = Utils.escaped`          
@@ -951,18 +984,16 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
 
   // This method is called when the object is registered.
   initialize() {
-    const closeContEl = document.querySelector("#close-container-picker-panel");
-    Utils.addEnterHandler(closeContEl, () => {
-      Logic.showPanel(P_CONTAINERS_LIST);
-    });
   },
 
   // This method is called when the panel is shown.
-  prepare() {
+  async prepare() {
+    Logic.listenToPickerBackButton();
     document.getElementById("picker-title").textContent = "Reopen This Site in";
     const fragment = document.createDocumentFragment();
-    const pickedFunction = async function (identity) {
+    const currentTab = await Utils.currentTab();
-      const currentTab = await Utils.currentTab();
+    console.log(currentTab);
+    const pickedFunction = function (identity) {
       const newUserContextId = Utils.userContextId(identity.cookieStoreId);
       Utils.reloadInContainer(
         currentTab.url, 
@@ -974,12 +1005,44 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
       window.close();
     };
 
-    Logic.identities().forEach(identity => {
+    document.getElementById("new-container-div").innerHTML = "";
+
+    if (currentTab.cookieStoreId !== "firefox-default") {
       const tr = document.createElement("tr");
-      tr.classList.add("menu-item");
+      tr.classList.add("menu-item", "hover-highlight");
       const td = document.createElement("td");
 
       td.innerHTML = Utils.escaped`          
+        <div class="menu-icon hover-highlight">
+          <div class="mac-icon">
+          </div>
+        </div>
+        <span class="menu-text">Default Container</span>`;
+
+      fragment.appendChild(tr);
+
+      tr.appendChild(td);
+
+      Utils.addEnterHandler(tr, () => {
+        Utils.reloadInContainer(
+          currentTab.url, 
+          false, 
+          0,
+          currentTab.index + 1, 
+          currentTab.active
+        );
+        window.close();
+      });
+    }
+
+    Logic.identities().forEach(identity => {
+      if (currentTab.cookieStoreId !== identity.cookieStoreId) {
+        const tr = document.createElement("tr");
+        tr.classList.add("menu-item", "hover-highlight");
+        tr.setAttribute("tabindex", "0");
+        const td = document.createElement("td");
+
+        td.innerHTML = Utils.escaped`          
         <div class="menu-icon hover-highlight">
           <div class="usercontext-icon"
             data-identity-icon="${identity.icon}"
@@ -988,13 +1051,14 @@ Logic.registerPanel(REOPEN_IN_CONTAINER_PICKER, {
         </div>
         <span class="menu-text">${identity.name}</span>`;
 
-      fragment.appendChild(tr);
+        fragment.appendChild(tr);
 
-      tr.appendChild(td);
+        tr.appendChild(td);
 
-      Utils.addEnterHandler(tr, () => {
+        Utils.addEnterHandler(tr, () => {
-        pickedFunction(identity);
+          pickedFunction(identity);
-      });
+        });
+      }
     });
 
     const list = document.querySelector("#picker-identities-list");
@@ -1014,19 +1078,20 @@ Logic.registerPanel(ALWAYS_OPEN_IN_PICKER, {
 
   // This method is called when the object is registered.
   initialize() {
-    const closeContEl = document.querySelector("#close-container-picker-panel");
-    Utils.addEnterHandler(closeContEl, () => {
-      Logic.showPanel(P_CONTAINERS_LIST);
-    });
   },
 
   // This method is called when the panel is shown.
   prepare() {
+    Logic.listenToPickerBackButton();
     document.getElementById("picker-title").textContent = "Reopen This Site in";
     const fragment = document.createDocumentFragment();
+
+    document.getElementById("new-container-div").innerHTML = "";
+
     Logic.identities().forEach(identity => {
       const tr = document.createElement("tr");
-      tr.classList.add("menu-item");
+      tr.classList.add("menu-item", "hover-highlight");
+      tr.setAttribute("tabindex", "0");
       const td = document.createElement("td");
 
       td.innerHTML = Utils.escaped`          
@@ -1066,8 +1131,6 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
   // This method is called when the object is registered.
   initialize() {
     const closeContEl = document.querySelector("#close-container-assignment-panel");
-    closeContEl.setAttribute("tabindex", "0");
-    closeContEl.classList.add("firstTabindex");
     Utils.addEnterHandler(closeContEl, () => {
       Logic.showPreviousPanel();
     });
@@ -1209,13 +1272,23 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     // Populating the panel: name and icon
     document.getElementById("container-edit-title").textContent = identity.name;
 
+
     const userContextId = Logic.currentUserContextId();
-    // const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
+    document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId;
-    // this.showAssignedContainers(assignments);
+    document.querySelector("#edit-container-panel .delete-container").hidden = !userContextId;
-    // document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId;
+
+    Utils.addEnterHandler(document.querySelector("#create-container-cancel-link"), () => {
+      Logic.showPreviousPanel();
+    });
+
+    Utils.addEnterHandler(document.querySelector("#create-container-ok-link"), () => {
+      this._submitForm();
+    });
+
     Utils.addEnterHandler(document.querySelector("#manage-assigned-sites-list"), () => {
       Logic.showPanel(P_CONTAINER_ASSIGNMENTS, identity);
     });
+
     document.querySelector("#edit-container-panel-name-input").value = identity.name || "";
     document.querySelector("#edit-container-panel-usercontext-input").value = userContextId || NEW_CONTAINER_ID;
     const containerName = document.querySelector("#edit-container-panel-name-input");

src/popup.html

@@ -251,6 +251,7 @@
     </h3>
     <button class="btn-return arrow-left" id="close-container-picker-panel" tabindex="0"></button>
     <hr>
+    <div id="new-container-div"></div>
     <div class="scrollable identities-list">
       <table class="menu" id="picker-identities-list">
         <tr class="menu-item hover-highlight">
@@ -288,17 +289,21 @@
           <legend class="form-header">Icon</legend>
         </fieldset>
       </form>
-        <div class="options-header">Options</div>
+      <div class="options-header">Options</div>
-        <div class="container-options">
+      <div class="container-options">
-          <input type="checkbox" id="site-isolation" name="site-isolation">
+        <input type="checkbox" id="site-isolation" name="site-isolation">
-          <label for="site-isolation" class="options-label">Limit to Designated Sites</label>
+        <label for="site-isolation" class="options-label">Limit to Designated Sites</label>
-        </div>
+      </div>
-        <div class="container-options options-label" id="manage-assigned-sites-list">Manage Site List...
+      <div class="container-options options-label" id="manage-assigned-sites-list">Manage Site List...
-        </div>
+      </div>
     </div>
     <div class="delete-container">
       <button class="delete-btn" id="delete-container-button">Delete This Container</button>
     </div>
+    <div class="panel-footer">
+      <a href="#" class="button expanded secondary footer-button cancel-button" id="create-container-cancel-link">Cancel</a>
+      <a href="#" class="button expanded primary footer-button" id="create-container-ok-link">OK</a>
+    </div>
   </div>
 
   <div class="panel menu-panel edit-container-assignments hide" id="edit-container-assignments">