add a new feature to miscMods.uc.js:

show container tab icons on multiselected container tabs.
we normally show the container by adding a colored stripe to the tab,
but this color is overridden when multiselecting the tab.
so when a container tab is multiselected, this new option will
add a colored icon to the tab to indicate the tab's container.
this feature is disabled by default, so see miscMods.uc.js

Author: aminomancer

JS/miscMods.uc.js

@@ -1,6 +1,6 @@
 // ==UserScript==
 // @name           Misc. Mods
-// @version        2.0.2
+// @version        2.0.3
 // @author         aminomancer
 // @homepage       https://github.com/aminomancer/uc.css.js
 // @description    Various tiny mods not worth making separate scripts for. Read the comments inside the script for details.
@@ -123,6 +123,30 @@
     // yourself if you use my CSS theme. If you don't, then make sure you add
     // `:root{--in-content-bg-dark: #000}` to your userChrome.css, or it will fall back to white.
     "Customize tab drag preview background color": true,
+
+    // With duskFox installed, we indicate container tabs by adding a colored
+    // stripe at the bottom of the tab. But we also add a purple stripe at the
+    // bottom of multiselected tabs, which overrides the container tab stripe.
+    // So when you multiselect a container tab, you can't tell it's a container
+    // tab until you deselect it. This mod will additionally add a CSS property
+    // that carries the container's icon in addition to its color. That's the
+    // same icon that shows in the urlbar on container tabs. Firefox's built-in
+    // styles don't use this for tabs, but duskFox does. Here's the style I use
+    // to show these icons in tabs in duskFox:
+    // .tabbrowser-tab.identity-icon-on-multiselect[usercontextid][multiselected="true"]
+    //   .tab-content::after {
+    //   content: "";
+    //   display: -moz-box;
+    //   height: 12px;
+    //   width: 12px;
+    //   margin-inline: 3px;
+    //   background: var(--identity-icon) center/contain no-repeat;
+    //   fill: var(--identity-icon-color);
+    //   -moz-context-properties: fill;
+    // }
+    // This is a pretty opinionated change and it doesn't do anything without
+    // duskFox or the above CSS, so it's disabled by default.
+    "Show container icons on multiselected tabs": false,
   };
   class UCMiscMods {
     constructor() {
@@ -144,6 +168,8 @@
       if (config["Don't exit DOM fullscreen when opening permissions popup"])
         this.permsPopupInFullscreen();
       if (config["Customize tab drag preview background color"]) this.tabDragPreview();
+      if (config["Show container icons on multiselected tabs"])
+        this.containerIconsOnMultiselectedTabs();
       this.randomTinyStuff();
     }
     stopDownloadsPanelFocus() {
@@ -325,6 +351,39 @@
             )
       );
     }
+    containerIconsOnMultiselectedTabs() {
+      const lazy = {};
+      XPCOMUtils.defineLazyModuleGetters(lazy, {
+        ContextualIdentityService: "resource://gre/modules/ContextualIdentityService.jsm",
+      });
+      if (lazy.ContextualIdentityService.hasOwnProperty("setTabStyle")) return;
+      lazy.ContextualIdentityService.setTabStyle = function (tab) {
+        if (!tab.hasAttribute("usercontextid")) {
+          return;
+        }
+
+        let userContextId = tab.getAttribute("usercontextid");
+        let identity = this.getPublicIdentityFromId(userContextId);
+
+        let colorPrefix = "identity-color-";
+        let iconPrefix = "identity-icon-";
+        /* Remove the existing container color highlight if it exists */
+        for (let className of tab.classList) {
+          if (className.startsWith(colorPrefix) || className.startsWith(iconPrefix)) {
+            tab.classList.remove(className);
+          }
+        }
+        if (identity) {
+          if (identity.color) {
+            tab.classList.add(colorPrefix + identity.color);
+          }
+          if (identity.icon) {
+            tab.classList.add(iconPrefix + identity.icon);
+            tab.classList.add(iconPrefix + "on-multiselect");
+          }
+        }
+      };
+    }
     randomTinyStuff() {
       // give the tracking protection popup's info button a tooltip
       let etpPanel = document

uc-tabs.css

@@ -83,19 +83,6 @@
   box-shadow: 0px 0px 25px 3px rgba(0, 0, 0, 0.1), 0px 0px 15px 0px hsla(0, 0%, 0%, 0.35) !important;
 }
 
-/* colored lines on container tabs */
-.tabbrowser-tab[usercontextid] .tab-context-line {
-  background: var(--identity-tab-color) !important;
-  height: 1px !important;
-  margin-bottom: 0 !important;
-}
-
-/* purple line on multiselected tabs */
-#TabsToolbar .tabbrowser-tab[multiselected="true"] .tab-context-line {
-  min-height: 1px !important;
-  background-color: var(--multiselected-color) !important;
-}
-
 .tabbrowser-tab .tab-context-line {
   display: -moz-box !important;
   -moz-box-ordinal-group: 2 !important;
@@ -105,10 +92,32 @@
   transition: none !important;
 }
 
+/* colored lines on container tabs */
+.tabbrowser-tab[usercontextid] .tab-context-line {
+  background-color: var(--identity-tab-color) !important;
+}
+
+/* purple line on multiselected tabs */
+.tabbrowser-tab[multiselected="true"] .tab-context-line {
+  background-color: var(--multiselected-color) !important;
+}
+
 .tabbrowser-tab:not([usercontextid], [multiselected]) .tab-context-line {
   display: none !important;
 }
 
+.tabbrowser-tab.identity-icon-on-multiselect[usercontextid][multiselected="true"]
+  .tab-content::after {
+  content: "";
+  display: -moz-box;
+  height: 12px;
+  width: 12px;
+  margin-inline: 3px;
+  background: var(--identity-icon) center/contain no-repeat;
+  fill: var(--identity-icon-color);
+  -moz-context-properties: fill;
+}
+
 .tab-label-container {
   height: revert !important;
   pointer-events: none !important;