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

src/css/popup.css

@@ -89,9 +89,13 @@
   --input-border-color: #8f8f9d;
   --input-border-focus-color: #0060df;
   --input-border-active-color: #054096;
+  --input-destructive-border-color: rgba(226, 40, 80, 1);
   --text-color-primary: #15141a;
   --menu-bg-active-color: #cfcfd8;
   --menu-bg-hover-color: #e0e0e6;
+  --messagebar-destructive-bg-color: rgba(255, 232, 232, 1);
+  --messagebar-destructive-border-color: rgba(0, 0, 0, 0.08);
+  --messagebar-destructive-text-color: rgba(21, 20, 26, 1);
   --panel-bg-color: #fff;
   --panel-separator-color: rgba(240, 240, 244, 1);
   --link-color: #0060df;
@@ -154,11 +158,15 @@
   --input-border-color: #8f8f9d;
   --input-border-active-color: #aaf2ff;
   --input-border-focus-color: #0df;
+  --input-destructive-border-color: rgba(255, 132, 128, 1);
   --link-color: #0df;
   --link-hover-color: #80ebff;
   --text-color-primary: #fbfbfe;
   --menu-bg-active-color: #5b5b66;
   --menu-bg-hover-color: #52525e;
+  --messagebar-destructive-bg-color: rgba(105, 15, 34, 1);
+  --messagebar-destructive-border-color: rgba(255, 255, 255, 0.08);
+  --messagebar-destructive-text-color: rgba(251, 251, 254, 1);
   --panel-bg-color: #42414d;
   --panel-separator-color: rgba(82, 82, 94, 1);
 
@@ -447,6 +455,7 @@ table {
 
 .button {
   background-color: var(--button-bg-color-secondary);
+  border: none;
   color: var(--text-color-primary);
 }
 
@@ -2441,3 +2450,37 @@ tr:hover > td > .reset-button {
 .searchbar input {
   inline-size: 100%;
 }
+
+/* Assignment panel */
+#edit-sites-new-assignment {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  margin: 8px;
+}
+
+#edit-sites-add-assignment {
+  block-size: 32px;
+  border: none;
+  border-radius: 4px;
+  font-family: inherit;
+  font-weight: bold;
+  text-align: center;
+}
+
+#edit-sites-add-assignment-info {
+
+}
+
+#edit-sites-add-assignment-error {
+  background-color: var(--messagebar-destructive-bg-color);
+  border: 1px solid var(--messagebar-destructive-border-color);
+  border-radius: 4px;
+  color: var(--messagebar-destructive-text-color);
+  display: none;
+  padding: 8px;
+}
+
+#edit-sites-add-assignment:hover {
+  cursor: pointer;
+}

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);
@@ -1454,6 +1454,35 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
     return Promise.resolve(null);
   },
 
+  async addAssignment() {
+    const errorMessage = document.getElementById("edit-sites-add-assignment-error");
+    const assignmentInput = document.getElementById("edit-sites-add-assignment-info");
+
+    let url = document.getElementById("edit-sites-add-assignment-info").value;
+
+    if (!URL.canParse(url)) {
+      url = "http://" + url;
+    }
+
+    if (new URL(url).protocol == "https:" || new URL(url).protocol == "http:") {
+      url = new URL(url);
+    } else {
+      errorMessage.style.display = "block";
+      assignmentInput.style.border = "2px solid var(--input-destructive-border-color)";
+    }
+
+    const userContextId = Logic.currentUserContextId();
+    await Utils.setOrRemoveAssignment(
+      false, url.origin, userContextId, false
+    );
+
+    const assignments = await Logic.getAssignmentObjectByContainer(userContextId);
+    this.showAssignedContainers(assignments);
+
+    errorMessage.style.display = "none";
+    assignmentInput.style.border = "1px solid var(--input-border-color)";
+  },
+
   showAssignedContainers(assignments) {
     const closeContEl = document.querySelector("#close-container-assignment-panel");
     Utils.addEnterHandler(closeContEl, () => {
@@ -1464,6 +1493,12 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
     const assignmentPanel = document.getElementById("edit-sites-assigned");
     const assignmentKeys = Object.keys(assignments);
     assignmentPanel.hidden = !(assignmentKeys.length > 0);
+
+    const addAssignmentButton = document.getElementById("edit-sites-add-assignment");
+    Utils.addEnterHandler(addAssignmentButton, async () => {
+      this.addAssignment();
+    });
+
     if (assignments) {
       const tableElement = document.querySelector("#edit-sites-assigned");
       /* Remove previous assignment list,
@@ -1487,6 +1522,7 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
           <img title="${deleteSiteInfo}" class="trash-button delete-assignment"  src="/img/container-delete.svg" />
         </td>`;
         trElement.getElementsByClassName("favicon")[0].appendChild(Utils.createFavIconElement(assumedUrl));
+
         const deleteButton = trElement.querySelector(".trash-button");
         Utils.addEnterHandler(deleteButton, async () => {
           const userContextId = Logic.currentUserContextId();
@@ -1496,6 +1532,7 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
           delete assignments[siteKey];
           this.showAssignedContainers(assignments);
         });
+
         const resetButton = trElement.querySelector(".reset-button");
         Utils.addEnterHandler(resetButton, async () => {
           const cookieStoreId = Logic.currentCookieStoreId();
@@ -1510,6 +1547,7 @@ Logic.registerPanel(P_CONTAINER_ASSIGNMENTS, {
             Logic.notify({messageId: "cookiesCouldNotBeCleared", placeholders: [site.hostname]});
           }
         });
+
         trElement.classList.add("menu-item", "hover-highlight", "keyboard-nav");
         tableElement.appendChild(trElement);
       });
@@ -2319,7 +2357,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,13 @@
         </tr>
       </table>
     </div>
+    <div id="edit-sites-new-assignment">
+      <input id="edit-sites-add-assignment-info" type="text">
+      <p id="edit-sites-add-assignment-error">You entered an invalid site URL.</p>
+      <button id="edit-sites-add-assignment" class="button controller">
+        Add site
+      </button>
+    </div>
   </div>
 
   <div class="hide panel delete-container-panel" id="delete-container-panel">