list sites which always load with container

Thanks for building this addon!  It's really great and I really love the
functionality it provides.  I have a small change that I'd like to make.
It's motivated by my personal frustration with trying to figure out what
is supposed to load in a specific container.

The data storage system used is optimized for quick lookups on webpage
load, which is the right choice.  Instead of changing that, I decided
instead to iterate through the full data storage and pick out the
relevant items and trace them back to the container that they belong to
for display.  I suspect that with the size of the data storage, it's
probably fine.  Other than building a mapping in a different key of the
local storage when adding a site to a container, I don't see any way to
make this quicker on lookup.

I'm not at all an extension developer, nor do I write a lot of html or
css.  I probably butchered the display portion of this, but it mostly
works...  I would not expect this patch to merge in this state, but I'd
be interested in working on making it possible to merge.  Maybe hiding
this functionality behind an addon preference?

If this functionality isn't desirable in the official addon, is there
anything which would block me from submitting a fork to
addons.mozilla.org?  It's primarily because I'd like to use it on a
release copy of firefox, and so I'd need it signed by addons.

src/css/popup.css

@@ -685,6 +685,16 @@ span ~ .panel-header-text {
   padding-inline-start: 16px;
 }
 
+ul.container-info-url-list {
+  font-size: 14px;
+  list-style-type: none;
+  padding-left: 16px;
+}
+
+li.container-info-url-item {
+  padding-left: 16px;
+}
+
 .container-info-has-tabs img,
 .container-info-tab-row img {
   block-size: 16px;
@@ -700,7 +710,8 @@ span ~ .panel-header-text {
   max-inline-size: 200px;
 }
 
-.container-info-list {
+.container-info-list,
+.container-url-list {
   display: flex;
   flex-direction: column;
   margin-block-start: 4px;

src/js/background/backgroundLogic.js

@@ -112,6 +112,28 @@ const backgroundLogic = {
     return list.concat(containerState.hiddenTabs);
   },
 
+  async getUrlsForContainer(options) {
+    const requiredArguments = ["cookieStoreId"];
+    this.checkArgs(requiredArguments, options, "getUrlsForContainer");
+    const { cookieStoreId } = options;
+
+    const userContextId = this.getUserContextIdFromCookieStoreId(cookieStoreId);
+
+    let siteStoreKeyBase = assignManager.storageArea.getSiteStoreKey("http://x");
+    siteStoreKeyBase = siteStoreKeyBase.slice(0, siteStoreKeyBase.length-1);
+    let isSiteStorageKey = new RegExp("^" + siteStoreKeyBase);
+    isSiteStorageKey = isSiteStorageKey.test.bind(isSiteStorageKey);
+
+    const containerUrls = [];
+    for (const [key, value] of Object.entries(await browser.storage.local.get())) {
+      if (isSiteStorageKey(key) && value.userContextId === userContextId) {
+        containerUrls.push(key.slice(siteStoreKeyBase.length));
+      }
+    }
+
+    return containerUrls;
+  },
+
   async moveTabsToWindow(options) {
     const requiredArguments = ["cookieStoreId", "windowId"];
     this.checkArgs(requiredArguments, options, "moveTabsToWindow");

src/js/background/messageHandler.js

@@ -62,6 +62,11 @@ const messageHandler = {
           windowId: m.windowId
         });
         break;
+      case "getUrlsForContainer":
+        response = backgroundLogic.getUrlsForContainer({
+          cookieStoreId: m.cookieStoreId,
+        });
+        break;
       case "queryIdentitiesState":
         response = backgroundLogic.queryIdentitiesState(m.message.windowId);
         break;

src/js/popup.js

@@ -123,7 +123,6 @@ const Logic = {
   },
 
   async showAchievementOrContainersListPanel() {
-    // Do we need to show an achievement panel?
     let showAchievements = false;
     const achievementsStorage = await browser.storage.local.get({achievements: []});
     for (const achievement of achievementsStorage.achievements) {
@@ -752,6 +751,7 @@ Logic.registerPanel(P_CONTAINER_INFO, {
 
     // Populating the panel: name and icon
     document.getElementById("container-info-name").textContent = identity.name;
+    document.getElementById("container-info-urls-name").textContent = identity.name + " Sites";
 
     const icon = document.getElementById("container-info-icon");
     icon.setAttribute("data-identity-icon", identity.icon);
@@ -774,13 +774,41 @@ Logic.registerPanel(P_CONTAINER_INFO, {
       table.firstChild.remove();
     }
 
+    const urlList = document.getElementById("container-info-urls");
+    while (urlList.firstChild) {
+      urlList.firstChild.remove();
+    }
+
     // Let's retrieve the list of tabs.
-    const tabs = await browser.runtime.sendMessage({
-      method: "getTabs",
-      windowId: browser.windows.WINDOW_ID_CURRENT,
-      cookieStoreId: Logic.currentIdentity().cookieStoreId
-    });
-    return this.buildInfoTable(tabs);
+    const [tabs, urls] = await Promise.all([
+      browser.runtime.sendMessage({
+        method: "getTabs",
+        windowId: browser.windows.WINDOW_ID_CURRENT,
+        cookieStoreId: Logic.currentIdentity().cookieStoreId
+      }),
+      browser.runtime.sendMessage({
+        method: "getUrlsForContainer",
+        cookieStoreId: Logic.currentIdentity().cookieStoreId
+      }),
+    ]);
+    this.buildInfoTable(tabs);
+    this.buildUrlList(urls);
+    return;
+  },
+
+  buildUrlList(urls) {
+    const fragment = document.createDocumentFragment();
+    if (urls.length === 0) {
+      urls = ["None"];
+    }
+    for (let url of urls) { // eslint-disable-line prefer-const
+      const li = document.createElement("li");
+      fragment.appendChild(li);
+      li.classList.add("container-info-url-item");
+      li.innerText = url;
+    }
+
+    document.getElementById("container-info-urls").appendChild(fragment);
   },
 
   buildInfoTable(tabs) {

src/popup.html

@@ -145,6 +145,10 @@
           <table id="container-info-table" class="container-info-list">
           </table>
         </div>
+        <div class="scrollable container-info-urls">
+          <h3 id="container-info-urls-name" class="panel-header-text container-name truncate-text"></h3>
+          <ul id="container-info-urls" class="container-info-url-list"></ul>
+        </div>
       </div>
     </div>
   </div>