Display container icon in Buffer/BufferAll completions

src/completions/Bmark.ts

@@ -23,11 +23,11 @@ class BmarkCompletionOption extends Completions.CompletionOptionHTML
         // const favIconUrl = tab.favIconUrl ? tab.favIconUrl : DEFAULT_FAVICON
         this.html = html`<tr class="BmarkCompletionOption option">
             <td class="prefix">${"".padEnd(2)}</td>
-            <td></td>
-            <td>${bmark.title}</td>
-            <td><a class="url" target="_blank" href=${bmark.url}>${
-            bmark.url
-        }</a></td>
+            <td class="icon"></td>
+            <td class="title">${bmark.title}</td>
+            <td class="content"><a class="url" target="_blank" href=${
+                bmark.url
+            }>${bmark.url}</a></td>
         </tr>`
     }
 }

src/completions/Buffer.ts

@@ -1,4 +1,5 @@
 import { enumerate } from "../itertools"
+import * as Containers from "../lib/containers"
 import * as Messaging from "../messaging"
 import * as Completions from "../completions"
 
@@ -10,6 +11,7 @@ class BufferCompletionOption extends Completions.CompletionOptionHTML
         public value: string,
         tab: browser.tabs.Tab,
         public isAlternative = false,
+        container: browser.contextualIdentities.ContextualIdentity,
     ) {
         super()
         // Two character buffer properties prefix
@@ -31,13 +33,16 @@ class BufferCompletionOption extends Completions.CompletionOptionHTML
         const favIconUrl = tab.favIconUrl
             ? tab.favIconUrl
             : Completions.DEFAULT_FAVICON
-        this.html = html`<tr class="BufferCompletionOption option">
+        this.html = html`<tr class="BufferCompletionOption option container_${
+            container.color
+        } container_${container.icon} container_${container.name}">
             <td class="prefix">${pre.padEnd(2)}</td>
-            <td><img src=${favIconUrl} /></td>
-            <td>${tab.index + 1}: ${tab.title}</td>
-            <td><a class="url" target="_blank" href=${tab.url}>${
-            tab.url
-        }</a></td>
+            <td class="container"></td>
+            <td class="icon"><img src="${favIconUrl}"/></td>
+            <td class="title">${tab.index + 1}: ${tab.title}</td>
+            <td class="content"><a class="url" target="_blank" href=${
+                tab.url
+            }>${tab.url}</a></td>
         </tr>`
     }
 }
@@ -84,6 +89,7 @@ export class BufferCompletionSource extends Completions.CompletionSourceFuse {
                     (tab.index + 1).toString(),
                     tab,
                     tab === alt,
+                    await Containers.getFromId(tab.cookieStoreId),
                 ),
             )
         }

src/completions/BufferAll.ts

@@ -1,10 +1,16 @@
+import * as Containers from "../lib/containers"
 import * as Messaging from "../messaging"
 import * as Completions from "../completions"
 
 class BufferAllCompletionOption extends Completions.CompletionOptionHTML
     implements Completions.CompletionOptionFuse {
     public fuseKeys = []
-    constructor(public value: string, tab: browser.tabs.Tab, winindex: number) {
+    constructor(
+        public value: string,
+        tab: browser.tabs.Tab,
+        winindex: number,
+        container: browser.contextualIdentities.ContextualIdentity,
+    ) {
         super()
         this.value = `${winindex}.${tab.index + 1}`
         this.fuseKeys.push(this.value, tab.title, tab.url)
@@ -13,13 +19,16 @@ class BufferAllCompletionOption extends Completions.CompletionOptionHTML
         const favIconUrl = tab.favIconUrl
             ? tab.favIconUrl
             : Completions.DEFAULT_FAVICON
-        this.html = html`<tr class="BufferAllCompletionOption option">
+        this.html = html`<tr class="BufferAllCompletionOption option container_${
+            container.color
+        } container_${container.icon} container_${container.name}">
             <td class="prefix"></td>
-            <td><img src=${favIconUrl} /></td>
-            <td>${this.value}: ${tab.title}</td>
-            <td><a class="url" target="_blank" href=${tab.url}>${
-            tab.url
-        }</a></td>
+            <td class="container"></td>
+            <td class="icon"><img src="${favIconUrl}"/></td>
+            <td class="title">${this.value}: ${tab.title}</td>
+            <td class="content"><a class="url" target="_blank" href=${
+                tab.url
+            }>${tab.url}</a></td>
         </tr>`
     }
 }
@@ -61,7 +70,12 @@ export class BufferAllCompletionSource extends Completions.CompletionSourceFuse
                 winindex += 1
             }
             options.push(
-                new BufferAllCompletionOption(tab.id.toString(), tab, winindex),
+                new BufferAllCompletionOption(
+                    tab.id.toString(),
+                    tab,
+                    winindex,
+                    await Containers.getFromId(tab.cookieStoreId),
+                ),
             )
         }
 

src/completions/History.ts

@@ -21,11 +21,11 @@ class HistoryCompletionOption extends Completions.CompletionOptionHTML
         // const favIconUrl = tab.favIconUrl ? tab.favIconUrl : DEFAULT_FAVICON
         this.html = html`<tr class="HistoryCompletionOption option">
             <td class="prefix">${"".padEnd(2)}</td>
-            <td></td>
-            <td>${page.title}</td>
-            <td><a class="url" target="_blank" href=${page.url}>${
-            page.url
-        }</a></td>
+            <td class="icon"></td>
+            <td class="title">${page.title}</td>
+            <td class="content"><a class="url" target="_blank" href=${
+                page.url
+            }>${page.url}</a></td>
         </tr>`
     }
 }

src/lib/containers.ts

@@ -1,3 +1,4 @@
+import { browserBg } from "./webext"
 import * as Logging from "../logging"
 const logger = new Logging.Logger("containers")
 
@@ -29,6 +30,10 @@ const ContainerIcon = [
     "chill",
 ]
 
+const DefaultContainer = Object.freeze(
+    fromString("default", "invisible", "noicond", "firefox-default"),
+)
+
 /** Creates a container from the specified parameters.Does not allow multiple containers with the same name.
     @param name  The container name.
     @param color  The container color, must be one of: "blue", "turquoise", "green", "yellow", "orange", "red", "pink" or "purple". If nothing is supplied, it selects one at random.
@@ -104,14 +109,16 @@ export async function update(
     }
 }
 
-/** Gets a container object from a supplied container id string.
+/** Gets a container object from a supplied container id string. If no container corresponds to containerId, returns a default empty container.
     @param containerId Expects a cookieStringId e.g. "firefox-container-n"
  */
-export async function getFromId(containerId: string): Promise<{}> {
+export async function getFromId(
+    containerId: string,
+): Promise<browser.contextualIdentities.ContextualIdentity> {
     try {
-        return await browser.contextualIdentities.get(containerId)
+        return await browserBg.contextualIdentities.get(containerId)
     } catch (e) {
-        throw e
+        return DefaultContainer
     }
 }
 
@@ -146,13 +153,19 @@ export async function exists(cname: string): Promise<boolean> {
     @param color
     @param icon
  */
-export function fromString(name: string, color: string, icon: string) {
+export function fromString(
+    name: string,
+    color: string,
+    icon: string,
+    id: string = "",
+) {
     try {
         return {
             name: name,
             color: color as browser.contextualIdentities.IdentityColor,
             icon: icon as browser.contextualIdentities.IdentityIcon,
-        }
+            cookieStoreId: id,
+        } as browser.contextualIdentities.ContextualIdentity // rules are made to be broken
     } catch (e) {
         throw e
     }

src/static/css/commandline.css

@@ -63,15 +63,17 @@ input {
     table-layout: fixed;
 }
 
-#completions table tr td:nth-of-type(1) {
-    width: 1.5em;
+#completions table tr td.prefix {
+    width: 1em;
     padding-left: 0.5em;
+    text-align: center;
 }
-#completions table tr td:nth-of-type(2) {
+#completions table tr td.icon,
+#completions table tr td.container {
     width: 1.5em;
 }
 /* #completions table tr td:nth-of-type(3) { width: 5em; } */
-#completions table tr td:nth-of-type(4) {
+#completions table tr td.content {
     width: 50%;
 }
 
@@ -145,3 +147,71 @@ a.url:hover {
     color: var(--tridactyl-of-fg);
     background: var(--tridactyl-of-bg);
 }
+
+/* Still completions, but container-related stuff */
+.option .container {
+    background-size: 1em;
+    background-repeat: no-repeat;
+    background-position: center;
+    -moz-context-properties: fill;
+}
+.option.container_blue .container {
+    fill: var(--tridactyl-container-color-blue);
+}
+.option.container_turquoise .container {
+    fill: var(--tridactyl-container-color-turquoise);
+}
+.option.container_green .container {
+    fill: var(--tridactyl-container-color-green);
+}
+.option.container_yellow .container {
+    fill: var(--tridactyl-container-color-yellow);
+}
+.option.container_orange .container {
+    fill: var(--tridactyl-container-color-orange);
+}
+.option.container_red .container {
+    fill: var(--tridactyl-container-color-red);
+}
+.option.container_pink .container {
+    fill: var(--tridactyl-container-color-pink);
+}
+.option.container_purple .container {
+    fill: var(--tridactyl-container-color-purple);
+}
+.option.container_fingerprint .container {
+    background-image: var(--tridactyl-container-fingerprint-url);
+}
+.option.container_briefcase .container {
+    background-image: var(--tridactyl-container-briefcase-url);
+}
+.option.container_dollar .container {
+    background-image: var(--tridactyl-container-dollar-url);
+}
+.option.container_cart .container {
+    background-image: var(--tridactyl-container-cart-url);
+}
+.option.container_circle .container {
+    background-image: var(--tridactyl-container-circle-url);
+}
+.option.container_gift .container {
+    background-image: var(--tridactyl-container-gift-url);
+}
+.option.container_vacation .container {
+    background-image: var(--tridactyl-container-vacation-url);
+}
+.option.container_food .container {
+    background-image: var(--tridactyl-container-food-url);
+}
+.option.container_fruit .container {
+    background-image: var(--tridactyl-container-fruit-url);
+}
+.option.container_pet .container {
+    background-image: var(--tridactyl-container-pet-url);
+}
+.option.container_tree .container {
+    background-image: var(--tridactyl-container-tree-url);
+}
+.option.container_chill .container {
+    background-image: var(--tridactyl-container-chill-url);
+}

src/static/themes/default.css

@@ -96,4 +96,26 @@
     /*new tab spoiler box*/
     --tridactyl-highlight-box-bg: #eee;
     --tridactyl-highlight-box-fg: var(--tridactyl-fg);
+
+    --tridactyl-container-fingerprint-url: url("resource://usercontext-content/fingerprint.svg");
+    --tridactyl-container-briefcase-url: url("resource://usercontext-content/briefcase.svg");
+    --tridactyl-container-dollar-url: url("resource://usercontext-content/dollar.svg");
+    --tridactyl-container-cart-url: url("resource://usercontext-content/cart.svg");
+    --tridactyl-container-circle-url: url("resource://usercontext-content/circle.svg");
+    --tridactyl-container-gift-url: url("resource://usercontext-content/gift.svg");
+    --tridactyl-container-vacation-url: url("resource://usercontext-content/vacation.svg");
+    --tridactyl-container-food-url: url("resource://usercontext-content/food.svg");
+    --tridactyl-container-fruit-url: url("resource://usercontext-content/fruit.svg");
+    --tridactyl-container-pet-url: url("resource://usercontext-content/pet.svg");
+    --tridactyl-container-tree-url: url("resource://usercontext-content/tree.svg");
+    --tridactyl-container-chill-url: url("resource://usercontext-content/chill.svg");
+
+    --tridactyl-container-color-blue: #37adff;
+    --tridactyl-container-color-turquoise: #00c79a;
+    --tridactyl-container-color-green: #51cd00;
+    --tridactyl-container-color-yellow: #ffcb00;
+    --tridactyl-container-color-orange: #ff9f00;
+    --tridactyl-container-color-red: #ff613d;
+    --tridactyl-container-color-pink: #ff4bda;
+    --tridactyl-container-color-purple: #af51f5;
 }