[UX][Containers] UI integration.

Author: hackademix

src/ui/options.css

@@ -114,24 +114,25 @@ fieldset:disabled {
   flex: 2 2;
 }
 
-.per-site-buttons {
+#container-options {
   display: flex;
   flex-flow: row wrap;
-  justify-content: flex-end;
-  width: 100%;
-  text-align: right;
-  margin: .5em 0 0 0;
+  justify-content: flex-start;
 }
-#btn-clear-container {
-  margin-inline-start: .5em;
+
+#container-options label {
+  margin-block: auto;
 }
-#copy-container {
-  margin-inline: .5em;
+
+#container-options div {
+  margin-inline-end: 1em;
 }
-#copy-container-label {
-  margin-block: auto;
+
+#container-options button{
+  margin-inline: auto 3.5em;
 }
 
+
 #policy {
   display: block;
   margin-top: .5em;

src/ui/options.html

@@ -88,11 +88,23 @@ <h3 class="flextabs__tab"><button class="flextabs__toggle">__MSG_SectionGeneral_
 
 <h3 class="flextabs__tab"><button class="flextabs__toggle enforcement_required">__MSG_SectionSitePermissions__</button></h3>
 <div class="flextabs__content">
-  <label for="select-container" id="select-container-label">__MSG_select_container_label__</label>
-  <select name="select-container" id="select-container">
-    <option value="default">__MSG_DefaultContainerName__</option>
-  </select>
   <section class="sect-sites">
+  <div id="container-options">
+    <div>
+    <label for="select-container" id="select-container-label">__MSG_select_container_label__</label>
+    <select name="select-container" id="select-container">
+      <option value="default">__MSG_DefaultContainerName__</option>
+    </select>
+    </div>
+    <div>
+    <label for="copy-container" id="copy-container-label">__MSG_copy_container_label__</label>
+    <select name="copy-container" id="copy-container">
+      <option value=blank></option>
+      <option value="default">__MSG_DefaultContainerName__</option>
+    </select>
+    </div>
+    <button id="btn-clear-container">__MSG_clear_container_label__</button>
+  </div>
   <form id="form-newsite" class="browser-style" >
   <label id="newsite-label" for="newsite" accesskey="__MSG_WebAddress_accesskey__">__MSG_WebAddress__</label><input name="newsite" id="newsite" type="text" placeholder="[https://]noscript.net"
   ><button class="add">+</button>
@@ -102,15 +114,6 @@ <h3 class="flextabs__tab"><button class="flextabs__toggle enforcement_required">
   	   <div class="cssload-whirlpool"></div>
     </div>
   </div>
-  <div class="per-site-buttons" id="per-site-buttons">
-    <label for="copy-container" id="copy-container-label">__MSG_copy_container_label__</label>
-    <select name="copy-container" id="copy-container">
-      <option value=blank></option>
-      <option value="default">__MSG_DefaultContainerName__</option>
-    </select>
-    <div style="inline-size:0;margin-inline:.5em;border:1px solid #888"></div>
-    <button id="btn-clear-container">__MSG_clear_container_label__</button>
-  </div>
   </section>
 </div>
 

src/ui/options.js

@@ -223,18 +223,24 @@ document.querySelector("#version").textContent = _("Version",
   var currentPolicy = await UI.getPolicy(cookieStoreId);
 
   function updateContainersEnabled() {
-    let containersEnabled = Boolean(contextStore.enabled && browser.contextualIdentities);
+    const containersEnabled = Boolean(contextStore.enabled && browser.contextualIdentities);
     document.querySelector("#containers-opt").style.display = browser.contextualIdentities? "": "none";
     document.querySelector("#opt-containers").disabled = !browser.contextualIdentities;
     document.querySelector("#opt-containers").checked = contextStore.enabled;
-    document.querySelector("#select-container").hidden = !containersEnabled;
-    document.querySelector("#select-container-label").hidden = !containersEnabled;
-    document.querySelector("#per-site-buttons").style.display = containersEnabled? "flex" : "none";
+    document.querySelector("#container-options").style.display = containersEnabled ? "" : "none";
   }
   updateContainersEnabled();
 
+  function constrainContainerCopy() {
+    containerCopy.disabled = cookieStoreId == "default";
+    for (const opt of containerCopy.options) {
+      opt.disabled = opt.value == cookieStoreId;
+    }
+  }
+
   async function changeContainer() {
     cookieStoreId = containerSelect.value;
+    constrainContainerCopy();
     currentPolicy = await UI.getPolicy(cookieStoreId);
     debug("container change", cookieStoreId, currentPolicy);
     sitesUI.clear()
@@ -275,13 +281,24 @@ document.querySelector("#version").textContent = _("Version",
     }
     if (JSON.stringify(newContainers) == JSON.stringify(containers)) return;
     containers = newContainers;
-    var container_options = ""
-    for (var container of containers) {
-      container_options += "<option value=" + container.cookieStoreId + ">" + container.name + "</option>"
+    const options = document.createDocumentFragment();
+    for (const container of containers) {
+      const o = options.appendChild(document.createElement("option"));
+      o.value = container.cookieStoreId;
+      o.text = container.name;
     }
-    containerSelect.innerHTML = container_options;
+    while (containerSelect.firstChild) {
+      containerSelect.removeChild(containerSelect.firstChild);
+    }
+    containerSelect.appendChild(options.cloneNode(true));
     containerSelect.value = cookieStoreId;
-    containerCopy.innerHTML = "<option value=blank></option>" + container_options;
+    while (containerCopy.firstChild) {
+      containerCopy.removeChild(containerCopy.firstChild);
+    }
+    containerCopy.appendChild(document.createElement("option")).value = "blank";
+    containerCopy.appendChild(options);
+
+    constrainContainerCopy();
   }
   containerSelect.onfocus = updateContainerOptions;
   containerCopy.onfocus = updateContainerOptions;