Fix mozilla#1670 - Add option to manually assign an URL to a container

src/js/popup.js

@@ -129,7 +129,7 @@ const Logic = {
     notificationCards.forEach(notificationCard => {
       notificationCard.textContent = text;
       notificationCard.classList.add("is-shown");
-    
+
       setTimeout(() => {
         notificationCard.classList.remove("is-shown");
       }, 2000);
@@ -1450,10 +1450,44 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
     const userContextId = Logic.currentUserContextId();
     const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
     this.showAssignedContainers(assignments);
+    this.addAssignment();
 
     return Promise.resolve(null);
   },
 
+  addAssignment() {
+    const addAssignmentBtn =
+      document.getElementById("edit-sites-add-assignment");
+    const userContextId = Logic.currentUserContextId();
+
+    addAssignmentBtn.addEventListener("click", async () => {
+      const addAssignmentInput =
+        document.getElementById("edit-sites-add-assignment-info").value;
+
+      try {
+        const url = new URL(addAssignmentInput);
+
+        Utils.setOrRemoveAssignment(
+          false, addAssignmentInput, userContextId, false
+        );
+
+      } catch (e) {
+        const addAssignmentError =
+          document.getElementById("edit-sites-add-assignment-error");
+        addAssignmentError.textContent = "Bad input.";
+        return;
+      }
+
+      const assignments =
+        await Logic.getAssignmentObjectByContainer(userContextId);
+      this.showAssignedContainers(assignments);
+
+      const addAssignmentError =
+        document.getElementById("edit-sites-add-assignment-error");
+      addAssignmentError.textContent = "Good input.";
+    });
+  },
+
   showAssignedContainers(assignments) {
     const closeContEl = document.querySelector("#close-container-assignment-panel");
     Utils.addEnterHandler(closeContEl, () => {
@@ -2319,7 +2353,7 @@ Logic.registerPanel(P_CLEAR_CONTAINER_STORAGE, {
   // This method is called when the panel is shown.
   prepare() {
     const identity = Logic.currentIdentity();
-    
+
     // Populating the panel: name, icon, and warning message
     document.getElementById("container-clear-storage-title").textContent = identity.name;
     return Promise.resolve(null);

src/popup.html

@@ -409,6 +409,14 @@ <h3 class="title" id="edit-assignments-title" data-i18n-message-id="default"></h
         </tr>
       </table>
     </div>
+    <div id="edit-sites-new-assignment">
+      <input
+        id="edit-sites-add-assignment-info"
+        type="text"
+        style="display: block;">
+      <p id="edit-sites-add-assignment-error"></p>
+      <button id="edit-sites-add-assignment">Add site</button>
+    </div>
   </div>
 
   <div class="hide panel delete-container-panel" id="delete-container-panel">