[create-theme]: Named Container Tabs

[constansino]

Name

Named Container Tabs

Description

Show container labels above tab titles.

Homepage

https://github.com/constansino/named-container-tabs

Image

https://0x0.st/PaCl.png

Type

• JSON Color Theme

Theme Styles

.tab-context-line {
  display: none !important;
}

#tabbrowser-tabs .tabbrowser-tab[usercontextid]:is([selected], [visuallyselected], [multiselected]) .tab-background {
  border: 2px solid var(--identity-icon-color) !important;
  opacity: 0.85 !important;
}

#tabbrowser-tabs .tabbrowser-tab:is(
  [usercontextid="1"],
  [usercontextid="2"],
  [usercontextid="3"],
  [usercontextid="4"],
  [usercontextid="5"],
  [usercontextid="6"],
  [usercontextid="7"],
  [usercontextid="8"],
  [usercontextid="9"],
  [usercontextid="10"],
  [usercontextid="11"],
  [usercontextid="12"],
  [usercontextid="13"],
  [usercontextid="14"],
  [usercontextid="15"],
  [usercontextid="16"],
  [usercontextid="17"],
  [usercontextid="18"]
):not([pinned]) .tab-label-container {
  gap: 2px !important;
}

#tabbrowser-tabs .tabbrowser-tab:is(
  [usercontextid="1"],
  [usercontextid="2"],
  [usercontextid="3"],
  [usercontextid="4"],
  [usercontextid="5"],
  [usercontextid="6"],
  [usercontextid="7"],
  [usercontextid="8"],
  [usercontextid="9"],
  [usercontextid="10"],
  [usercontextid="11"],
  [usercontextid="12"],
  [usercontextid="13"],
  [usercontextid="14"],
  [usercontextid="15"],
  [usercontextid="16"],
  [usercontextid="17"],
  [usercontextid="18"]
):not([pinned]) .tab-label-container::before {
  content: var(--named-container-label);
  display: inline-flex;
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 1px 6px;
  border-radius: 999px;
  color: var(--identity-icon-color, currentColor);
  background: color-mix(
    in srgb,
    var(--identity-icon-color, currentColor) 18%,
    transparent
  );
  border: 1px solid color-mix(
    in srgb,
    var(--identity-icon-color, currentColor) 38%,
    transparent
  );
}

#tabbrowser-tabs .tabbrowser-tab[usercontextid="1"] {
  --named-container-label: var(--mod-named_container_tabs-name_1);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="2"] {
  --named-container-label: var(--mod-named_container_tabs-name_2);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="3"] {
  --named-container-label: var(--mod-named_container_tabs-name_3);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="4"] {
  --named-container-label: var(--mod-named_container_tabs-name_4);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="5"] {
  --named-container-label: var(--mod-named_container_tabs-name_5);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="6"] {
  --named-container-label: var(--mod-named_container_tabs-name_6);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="7"] {
  --named-container-label: var(--mod-named_container_tabs-name_7);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="8"] {
  --named-container-label: var(--mod-named_container_tabs-name_8);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="9"] {
  --named-container-label: var(--mod-named_container_tabs-name_9);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="10"] {
  --named-container-label: var(--mod-named_container_tabs-name_10);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="11"] {
  --named-container-label: var(--mod-named_container_tabs-name_11);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="12"] {
  --named-container-label: var(--mod-named_container_tabs-name_12);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="13"] {
  --named-container-label: var(--mod-named_container_tabs-name_13);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="14"] {
  --named-container-label: var(--mod-named_container_tabs-name_14);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="15"] {
  --named-container-label: var(--mod-named_container_tabs-name_15);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="16"] {
  --named-container-label: var(--mod-named_container_tabs-name_16);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="17"] {
  --named-container-label: var(--mod-named_container_tabs-name_17);
}
#tabbrowser-tabs .tabbrowser-tab[usercontextid="18"] {
  --named-container-label: var(--mod-named_container_tabs-name_18);
}

Readme

# Named Container Tabs

Show a compact container name badge above each tab title.

## What it does

- Keeps selected tab container-color highlight.
- Adds a small label badge using `usercontextid` mapping.
- No `Container` prefix, only the label text.

## Configuration

Open the mod preferences and set labels for each `usercontextid` value.

Examples:

- If your container named `01` uses `usercontextid=6`, set `name_6` to `01`.
- If your container named `07` uses `usercontextid=12`, set `name_12` to `07`.

Tip: You can inspect your IDs from `containers.json` in your profile folder.

Preferences

[
  {
    "property": "mod.named_container_tabs.name_1",
    "label": "Label for usercontextid=1",
    "type": "string",
    "defaultValue": "01"
  },
  {
    "property": "mod.named_container_tabs.name_2",
    "label": "Label for usercontextid=2",
    "type": "string",
    "defaultValue": "02"
  },
  {
    "property": "mod.named_container_tabs.name_3",
    "label": "Label for usercontextid=3",
    "type": "string",
    "defaultValue": "03"
  },
  {
    "property": "mod.named_container_tabs.name_4",
    "label": "Label for usercontextid=4",
    "type": "string",
    "defaultValue": "04"
  },
  {
    "property": "mod.named_container_tabs.name_5",
    "label": "Label for usercontextid=5",
    "type": "string",
    "defaultValue": "05"
  },
  {
    "property": "mod.named_container_tabs.name_6",
    "label": "Label for usercontextid=6",
    "type": "string",
    "defaultValue": "06"
  },
  {
    "property": "mod.named_container_tabs.name_7",
    "label": "Label for usercontextid=7",
    "type": "string",
    "defaultValue": "07"
  },
  {
    "property": "mod.named_container_tabs.name_8",
    "label": "Label for usercontextid=8",
    "type": "string",
    "defaultValue": "08"
  },
  {
    "property": "mod.named_container_tabs.name_9",
    "label": "Label for usercontextid=9",
    "type": "string",
    "defaultValue": "09"
  },
  {
    "property": "mod.named_container_tabs.name_10",
    "label": "Label for usercontextid=10",
    "type": "string",
    "defaultValue": "10"
  },
  {
    "property": "mod.named_container_tabs.name_11",
    "label": "Label for usercontextid=11",
    "type": "string",
    "defaultValue": "11"
  },
  {
    "property": "mod.named_container_tabs.name_12",
    "label": "Label for usercontextid=12",
    "type": "string",
    "defaultValue": "12"
  },
  {
    "property": "mod.named_container_tabs.name_13",
    "label": "Label for usercontextid=13",
    "type": "string",
    "defaultValue": "13"
  },
  {
    "property": "mod.named_container_tabs.name_14",
    "label": "Label for usercontextid=14",
    "type": "string",
    "defaultValue": "14"
  },
  {
    "property": "mod.named_container_tabs.name_15",
    "label": "Label for usercontextid=15",
    "type": "string",
    "defaultValue": "15"
  },
  {
    "property": "mod.named_container_tabs.name_16",
    "label": "Label for usercontextid=16",
    "type": "string",
    "defaultValue": "16"
  },
  {
    "property": "mod.named_container_tabs.name_17",
    "label": "Label for usercontextid=17",
    "type": "string",
    "defaultValue": "17"
  },
  {
    "property": "mod.named_container_tabs.name_18",
    "label": "Label for usercontextid=18",
    "type": "string",
    "defaultValue": "18"
  }
]

[github-actions]

Thank you for your contribution! 🎉

Your theme has been successfully submitted. The maintainers will review it and get back to you soon.

Here are some details about your submission:

• Your theme has been requested into this PR.
• It has been created into the create-theme-1907 branch.

If you have any questions or need help, feel free to ask in the comments below or in the PR.

[constansino]

Actual effect screenshot (from author):

[constansino]

Public source repo (ready to use now): https://github.com/constansino/named-container-tabs\n\nQuick start: copy chrome.manual.css into userChrome.css and restart Zen.