Fixes #1670 Manually add URL's to a container

src/css/popup.css

@@ -953,6 +953,19 @@ span ~ .panel-header-text {
   padding-inline-start: 5px;
 }
 
+.edit-container-panel input[type="text"]#edit-container-panel-site-input {
+  inline-size: 80%;
+}
+
+#edit-container-site-link {
+  background: #ebebeb;
+  block-size: 36px;
+}
+
+#edit-container-site-link:hover {
+  background: #e3e3e3;
+}
+
 .edit-container-panel legend {
   flex: 1 0;
   font-size: 14px !important;

src/js/popup.js

@@ -1054,6 +1054,11 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
       this._submitForm();
     });
 
+    // Add new site to current container
+    const siteLink = document.querySelector("#edit-container-site-link");
+    Logic.addEnterHandler(siteLink, () => {
+      this._addSite();
+    });
 
   },
 
@@ -1078,6 +1083,49 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     }
   },
 
+  async _addSite() {
+    // Get URL and container ID from form
+    const formValues = new FormData(this._editForm);
+    const url = formValues.get("site-name");
+    const userContextId = formValues.get("container-id");
+    const currentTab = await Logic.currentTab();
+    const tabId = currentTab.id;
+    const fullURL = this.checkUrl(url);
+
+    if (fullURL !== null) { 
+      // Assign URL to container
+      await Logic.setOrRemoveAssignment(tabId, fullURL, userContextId, false);
+
+      // Clear form
+      document.querySelector("#edit-container-panel-site-input").value = "";
+
+      // Show new assignments
+      const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
+      this.showAssignedContainers(assignments); 
+    }
+  },
+
+  checkUrl(url){
+    const validUrl = /[\w.-]+(?:\.[\w.-]+)/g;
+    const regexProtocol = /^https?:\/\/.*/g;
+    const valid = /((([A-Za-z]{3,9}:(?:\/\/)?)(?:[-;:&=+$,\w]+@)?[A-Za-z0-9.-]+|(?:www\.|[-;:&=+$,\w]+@)[A-Za-z0-9.-]+)((?:\/[+~%/.\w\-_]*)?\??(?:[-+=&;%@.\w_]*)#?(?:[.!/\\\w]*))?)/g;
+    let newURL = url;
+
+    if (!url.match(validUrl)) {
+      return null;
+    }
+
+    // append "https://" if protocol not found
+    if (!url.match(regexProtocol)) {
+      newURL = "https://" + url;
+    }
+
+    if (!newURL.match(valid)) {
+      return null;
+    }
+    return newURL;
+  },
+
   showAssignedContainers(assignments) {
     const assignmentPanel = document.getElementById("edit-sites-assigned");
     const assignmentKeys = Object.keys(assignments);
@@ -1161,7 +1209,10 @@ Logic.registerPanel(P_CONTAINER_EDIT, {
     const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
     this.showAssignedContainers(assignments);
     document.querySelector("#edit-container-panel .panel-footer").hidden = !!userContextId;
-
+    // Only show ability to add site if it's an existing container
+    document.querySelector("#edit-container-panel-add-site").hidden = !userContextId;
+    // Make site input empty
+    document.querySelector("#edit-container-panel-site-input").value = "";
     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

@@ -204,6 +204,11 @@ <h3 class="panel-header-text">Edit Containers</h3>
           <fieldset id="edit-container-panel-choose-icon" class="radio-choice">
             <legend>Choose an icon</legend>
           </fieldset>
+          <fieldset id="edit-container-panel-add-site" hidden>
+            <legend>Assign site</legend>
+            <input type="text" name="site-name" id="edit-container-panel-site-input"/>
+            <a class="button secondary" id="edit-container-site-link">Add</a>
+          </fieldset>
         </form>
         <div id="edit-sites-assigned" class="scrollable" hidden>
           <h3>Sites assigned to this container</h3>

test/issues/1670.test.js

@@ -0,0 +1,78 @@
+const {initializeWithTab} = require("../common");
+
+describe("#1670", function () {
+  beforeEach(async function () {
+    this.webExt = await initializeWithTab();
+  });
+
+  afterEach(function () {
+    this.webExt.destroy();
+  });
+
+  describe("creating a new container", function () {
+    beforeEach(async function () {
+      await this.webExt.popup.helper.clickElementById("container-add-link");
+      await this.webExt.popup.helper.clickElementById("edit-container-ok-link");
+    });
+
+    it("should create it in the browser as well", function () {
+      this.webExt.background.browser.contextualIdentities.create.should.have.been.calledOnce;
+    });
+
+    describe("manually assign a valid URL to a container", function () {
+      const exampleUrl = "https://github.com/mozilla/multi-account-containers";
+      beforeEach(async function () {
+        await this.webExt.popup.helper.clickElementById("edit-containers-link");
+        await this.webExt.popup.helper.clickElementByQuerySelectorAll(".edit-container-icon", "last");
+        this.webExt.popup.window.document.getElementById("edit-container-panel-site-input").value = exampleUrl;
+        await this.webExt.popup.helper.clickElementById("edit-container-site-link");
+      });
+
+      it("should assign the URL to a container", function () {
+        this.webExt.background.browser.contextualIdentities.create.should.have.been.calledOnce;
+      });
+    });
+
+    describe("manually assign valid URL without protocol to a container", function () {
+      const exampleUrl = "github.com/mozilla/multi-account-containers";
+      beforeEach(async function () {
+        await this.webExt.popup.helper.clickElementById("edit-containers-link");
+        await this.webExt.popup.helper.clickElementByQuerySelectorAll(".edit-container-icon", "last");
+        this.webExt.popup.window.document.getElementById("edit-container-panel-site-input").value = exampleUrl;
+        await this.webExt.popup.helper.clickElementById("edit-container-site-link");
+      });
+
+      it("should assign the URL without protocol to a container", function () {
+        this.webExt.background.browser.contextualIdentities.create.should.have.been.calledOnce;
+      });
+    });
+
+    describe("manually assign an invalid URL to a container", function () {
+      const exampleUrl = "github";
+      beforeEach(async function () {
+        await this.webExt.popup.helper.clickElementById("edit-containers-link");
+        await this.webExt.popup.helper.clickElementByQuerySelectorAll(".edit-container-icon", "last");
+        this.webExt.popup.window.document.getElementById("edit-container-panel-site-input").value = exampleUrl;
+        await this.webExt.popup.helper.clickElementById("edit-container-site-link");
+      });
+
+      it("should not assign the URL to a container", function () {
+        this.webExt.background.browser.contextualIdentities.update.should.not.have.been.called;
+      });
+    });
+
+    describe("manually assign empty URL to a container", function () {
+      const exampleUrl = "";
+      beforeEach(async function () {
+        await this.webExt.popup.helper.clickElementById("edit-containers-link");
+        await this.webExt.popup.helper.clickElementByQuerySelectorAll(".edit-container-icon", "last");
+        this.webExt.popup.window.document.getElementById("edit-container-panel-site-input").value = exampleUrl;
+        await this.webExt.popup.helper.clickElementById("edit-container-site-link");
+      });
+
+      it("should not assign the URL to a container", function () {
+        this.webExt.background.browser.contextualIdentities.update.should.not.have.been.called;
+      });
+    });
+  });
+});