[Containers] Gracefully degrade when containers are disabled by browser options.

Author: hackademix

src/nscl

@@ -120,12 +120,23 @@ fieldset:disabled {
   justify-content: flex-start;
 }
 
+#container-options::before {
+  content: "📦︎";
+  font-variant-emoji: text;
+  font-size: 2em;
+  color: var(--container-color);
+}
+
+#select-container {
+  border-color: var(--container-color);
+}
+
 #container-options label {
   margin-block: auto;
 }
 
 #container-options div {
-  margin-inline-end: 1em;
+  margin-inline: .5em;
 }
 
 #container-options button{

src/ui/options.css

@@ -223,24 +223,27 @@ document.querySelector("#version").textContent = _("Version",
   var currentPolicy = await UI.getPolicy(cookieStoreId);
 
   function updateContainersEnabled() {
-    const containersEnabled = Boolean(contextStore.enabled && browser.contextualIdentities);
-    document.querySelector("#containers-opt").style.display = browser.contextualIdentities? "": "none";
-    document.querySelector("#opt-containers").disabled = !browser.contextualIdentities;
+    const supported = browser.contextualIdentities && !contextStore.disabledByHost;
+    const containersEnabled = supported && contextStore.enabled;
+    document.querySelector("#containers-opt").style.display = supported ? "": "none";
+    document.querySelector("#opt-containers").disabled = !supported;
     document.querySelector("#opt-containers").checked = contextStore.enabled;
-    document.querySelector("#container-options").style.display = containersEnabled ? "" : "none";
+    document.querySelector("#container-options").style.display = supported ? "" : "none";
   }
   updateContainersEnabled();
 
-  function constrainContainerCopy() {
+  function syncContainerSelectors() {
     containerCopy.disabled = cookieStoreId == "default";
     for (const opt of containerCopy.options) {
-      opt.disabled = opt.value == cookieStoreId;
+      if (opt.disabled = (opt.value == cookieStoreId)) {
+        document.querySelector("#container-options").style.setProperty("--container-color", opt.style.color);
+      }
     }
   }
 
   async function changeContainer() {
     cookieStoreId = containerSelect.value;
-    constrainContainerCopy();
+    syncContainerSelectors();
     currentPolicy = await UI.getPolicy(cookieStoreId);
     debug("container change", cookieStoreId, currentPolicy);
     sitesUI.clear()
@@ -275,9 +278,7 @@ document.querySelector("#version").textContent = _("Version",
     let newContainers = [{cookieStoreId: "default", name: "Default"},];
     let identities = browser.contextualIdentities && await browser.contextualIdentities.query({});
     if (identities) {
-      identities.forEach(({cookieStoreId, name}) => {
-        newContainers.push({cookieStoreId, name});
-      })
+      newContainers.push(...identities);
     }
     if (JSON.stringify(newContainers) == JSON.stringify(containers)) return;
     containers = newContainers;
@@ -286,6 +287,7 @@ document.querySelector("#version").textContent = _("Version",
       const o = options.appendChild(document.createElement("option"));
       o.value = container.cookieStoreId;
       o.text = container.name;
+      o.style.color = container.colorCode || "";
     }
     while (containerSelect.firstChild) {
       containerSelect.removeChild(containerSelect.firstChild);
@@ -298,7 +300,7 @@ document.querySelector("#version").textContent = _("Version",
     containerCopy.appendChild(document.createElement("option")).value = "blank";
     containerCopy.appendChild(options);
 
-    constrainContainerCopy();
+    syncContainerSelectors();
   }
   containerSelect.onfocus = updateContainerOptions;
   containerCopy.onfocus = updateContainerOptions;

src/ui/options.js

@@ -157,10 +157,25 @@ html:not(.mobile) #scrollable {
   margin-block: auto;
   padding: .4em;
   font-size: 1.2em;
-  border:1px solid lightgray;
+  border:1px solid;
+  border-color: var(--container-color);
   border-radius: .3em;
+  content: "📦︎";
+  font-variant-emoji: text;
 }
 
+.container-id::before {
+  content: "📦︎";
+  font-variant-emoji: text;
+  font-size: 1em;
+  line-height: 0;
+  padding: 0 .4em 0 0;
+  margin: 0;
+  color: var(--container-color);
+}
+
+
+
 .hider {
   background: var(--form-color1);
   box-shadow: inset 0 1px 3px #444;

src/ui/popup.css

@@ -186,20 +186,30 @@ addEventListener("unload", e => {
         if (e.tabId !== tabId) close();
       });
     }
-
-    if (UI.contextStore && UI.contextStore.enabled && browser.contextualIdentities) {
-      try {
-        let containerName = (await browser.contextualIdentities.get(cookieStoreId)).name;
-        document.querySelector("#container-id").textContent = containerName;
-        debug("found container name", containerName, "for cookieStoreId", cookieStoreId);
-      } catch(err) {
-        document.querySelector("#container-id").textContent = _("DefaultContainerName");
-        debug("no container for cookieStoreId", cookieStoreId, "error:", err.message);
+    {
+      let { contextStore } = UI;
+      const containerId = document.querySelector("#container-id");
+      if (contextStore?.enabled && !contextStore.disabledByHost && browser.contextualIdentities) {
+        try {
+          const { name, colorCode} = await browser.contextualIdentities.get(cookieStoreId);
+          containerId.textContent = name;
+          containerId.style.setProperty("--container-color", colorCode);
+
+          debug("found container name", name, "for cookieStoreId", cookieStoreId); // DEV_ONLY
+        } catch (err) {
+          if (/\bdisabled\b/.test(err.message)) {
+            contextStore = null;
+          } else {
+            containerId.textContent = _("DefaultContainerName");
+          }
+          debug("no container for cookieStoreId", cookieStoreId, "error:", err.message); // DEV_ONLY
+        } } else {
+        contextStore = null;
+      }
+      if (!contextStore) {
+        containerId.style.display = "none";
       }
-    } else {
-      document.querySelector("#container-id").style.visibility = 'hidden';
     }
-
     await include("/ui/toolbar.js");
     UI.toolbarInit();
     {