Making create screen have buttons again

webextension/background.js

@@ -339,7 +339,7 @@ const backgroundLogic = {
 
   createOrUpdateContainer(options) {
     let donePromise;
-    if (options.userContextId) {
+    if (options.userContextId !== "new") {
       donePromise = browser.contextualIdentities.update(
         this.cookieStoreId(options.userContextId),
         options.params

webextension/css/popup.css

@@ -91,6 +91,10 @@ table {
   opacity: 0;
 }
 
+[hidden] {
+  display: none !important;
+}
+
 /* Effect borrowed from tabs in Firefox, ensure that the element flexes to the full width */
 .truncate-text {
   mask-image: linear-gradient(to left, transparent, black 1em);
@@ -803,8 +807,14 @@ span ~ .panel-header-text {
   border: 0;
   filter: none;
   inline-size: 23px;
-  margin: 0;
-  padding: 0;
+  margin-block-end: 0;
+  margin-block-start: 0;
+  margin-inline-end: 0;
+  margin-inline-start: 0;
+  padding-block-end: 0;
+  padding-block-start: 0;
+  padding-inline-end: 0;
+  padding-inline-start: 0;
 }
 
 .radio-choice > .radio-container > label::before {
@@ -814,18 +824,18 @@ span ~ .panel-header-text {
   background-repeat: no-repeat;
   background-size: 16px;
   block-size: 23px;
-  fill: var(--identity-icon-color);
-  filter: url('/img/filters.svg#fill');
-  position: relative;
+  border: none;
   content: "";
   display: block;
-  border: none;
+  fill: var(--identity-icon-color);
+  filter: url('/img/filters.svg#fill');
   inline-size: 23px;
+  position: relative;
 }
 
 .radio-choice > .radio-container > [type="radio"] {
-  display: inline;
   -moz-appearance: none;
+  display: inline;
   opacity: 0;
 }
 

webextension/js/popup.js

@@ -7,6 +7,7 @@ const CONTAINER_UNHIDE_SRC = "/img/container-unhide.svg";
 
 const DEFAULT_COLOR = "blue";
 const DEFAULT_ICON = "circle";
+const NEW_CONTAINER_ID = "new";
 
 // List of panels
 const P_ONBOARDING_1     = "onboarding1";
@@ -750,10 +751,30 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     this.initializeRadioButtons();
 
     Logic.addEnterHandler(document.querySelector("#edit-container-panel-back-arrow"), () => {
+      const formValues = new FormData(this._editForm);
+      if (formValues.get("container-id") !== NEW_CONTAINER_ID) {
+        this._submitForm();
+      } else {
+        Logic.showPreviousPanel();
+      }
+    });
+
+    Logic.addEnterHandler(document.querySelector("#edit-container-cancel-link"), () => {
+      Logic.showPreviousPanel();
+    });
+
+    this._editForm = document.getElementById("edit-container-panel-form");
+    const editLink = document.querySelector("#edit-container-ok-link");
+    Logic.addEnterHandler(editLink, () => {
       this._submitForm();
     });
-    this._editForm = document.getElementById("edit-container-panel-form");
-    this._editForm.addEventListener("submit", this._submitForm.bind(this));
+    editLink.addEventListener("submit", () => {
+      this._submitForm();
+    });
+    this._editForm.addEventListener("submit", () => {
+      this._submitForm();
+    });
+
 
   },
 
@@ -762,7 +783,7 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     return browser.runtime.sendMessage({
       method: "createOrUpdateContainer",
       message: {
-        userContextId: Logic.currentUserContextId() || false,
+        userContextId: formValues.get("container-id") || NEW_CONTAINER_ID,
         params: {
           name: document.getElementById("edit-container-panel-name-input").value || Logic.generateIdentityName(),
           icon: formValues.get("container-icon") || DEFAULT_ICON,
@@ -860,8 +881,10 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     const userContextId = Logic.currentUserContextId();
     const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
     this.showAssignedContainers(assignments);
+    document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId;
 
     document.querySelector("#edit-container-panel-name-input").value = identity.name || "";
+    document.querySelector("#edit-container-panel-usercontext-input").value = userContextId || NEW_CONTAINER_ID;
     [...document.querySelectorAll("[name='container-color']")].forEach(colorInput => {
       colorInput.checked = colorInput.value === identity.color;
     });

webextension/popup.html

@@ -115,6 +115,7 @@
       </div>
       <div class="column-panel-content">
         <form id="edit-container-panel-form">
+          <input type="hidden" name="container-id" id="edit-container-panel-usercontext-input" />
           <fieldset>
             <legend>Name</legend>
             <input type="text" name="container-name" id="edit-container-panel-name-input" maxlength="25"/>
@@ -131,6 +132,10 @@
           <div class="assigned-sites-list">
           </div>
         </div>
+        <div class="panel-footer">
+          <a href="#" class="button secondary expanded footer-button cancel-button" id="edit-container-cancel-link">Cancel</a>
+          <a class="button primary expanded footer-button" id="edit-container-ok-link">OK</a>
+        </div>
       </div>
     </div>
   </div>