Skip to content
This repository was archived by the owner on Jul 23, 2026. It is now read-only.
This repository was archived by the owner on Jul 23, 2026. It is now read-only.

[create-theme]: Tab Hotkey Indicators #2113

Closed
Closed
[create-theme]: Tab Hotkey Indicators#2113
Labels
new-themeSubmit a theme to be added to the theme library

Description

@ramla
ramla
opened on Jul 16, 2026

Name

Tab Hotkey Indicators

Description

Adds numbers on tabs to hint to its shortcut key

Homepage

https://github.com/ramla/zen-mods/tree/master/tabhotkeyindicators

Image

https://github.com/ramla/zen-mods/blob/master/tabhotkeyindicators/preview600x400.png?raw=true

Type

  • JSON Color Theme

Theme Styles

@counter-style blank {
  system: cyclic;
  symbols: "";
}
@counter-style tabhint {
  system: fixed;
  symbols: "1" "2" "3" "4" "5" "6" "7" "8";
  suffix: "";
  fallback: blank;
}

#TabsToolbar {
  counter-reset: tabcounter;
}

@media not (-moz-pref("mod.tab_hotkey_hints.essentials")) {
  #zen-essentials .tab-content::after {
    display: none;
  }
}

@media -moz-pref("mod.tab_hotkey_hints.last_tab") {
  zen-workspace[active="true"] .zen-workspace-tabs-section
  > tab:not([pinned]):not([aria-hidden="true"]):not([folder-active="true"]):nth-last-child(2),
  zen-workspace[active="true"] tab-group:not(:has(~ tab))
  tab:not([pinned]):not([aria-hidden="true"]):not([folder-active="true"]):nth-last-child(1) {
    .tab-content::before {
      content: "9";
      display: unset;
      z-index: 1;
      font-size: var(--mod-tab_hotkey_hints-font_size);
      font-weight: var(--mod-tab_hotkey_hints-font_weight);
      position: absolute;
      opacity: var(--mod-tab_hotkey_hints-opacity);
      color: var(--mod-tab_hotkey_hints-color);
      text-shadow: var(--mod-tab_hotkey_hints-text_shadow);
      @media (-moz-pref("mod.tab_hotkey_hints.position", "topright")) {
          right: var(--mod-tab_hotkey_hints-h_margin);
          top: var(--mod-tab_hotkey_hints-v_margin);
      }
      @media (-moz-pref("mod.tab_hotkey_hints.position", "topleft")) {
          left: var(--mod-tab_hotkey_hints-h_margin);
          top: var(--mod-tab_hotkey_hints-v_margin);
      }
      @media (-moz-pref("mod.tab_hotkey_hints.position", "botright")) {
          right: var(--mod-tab_hotkey_hints-h_margin);
          bottom: var(--mod-tab_hotkey_hints-v_margin);
      }
      @media (-moz-pref("mod.tab_hotkey_hints.position", "botleft")) {
          left: var(--mod-tab_hotkey_hints-h_margin);
          bottom: var(--mod-tab_hotkey_hints-v_margin);
      }
    }
  }
}
@media not (-moz-pref("mod.tab_hotkey_hints.last_tab")) {
  zen-workspace[active="true"] .zen-workspace-tabs-section
  > tab:not([pinned]):not([aria-hidden="true"]):not([folder-active="true"]):nth-last-child(2),
  zen-workspace[active="true"] tab-group:not(:has(~ tab))
  tab:not([pinned]):not([aria-hidden="true"]):not([folder-active="true"]):nth-last-child(1) {
    .tab-content::before {
      display: none;
    }
  }
}

#tabbrowser-tabs {
  #zen-essentials tab,
  zen-workspace[active="true"] .zen-workspace-tabs-section > zen-folder:not([collapsed]) tab[aria-hidden="true"][folder-active="true"]:not([style*="height: 0px"]),
  zen-workspace[active="true"] .zen-workspace-tabs-section > zen-folder:not([collapsed]) tab:not([aria-hidden="true"]):not([style*="height: 0px"]),
  zen-workspace[active="true"] .zen-workspace-tabs-section > tab[aria-hidden="true"][folder-active="true"]:not([style*="height: 0px"]),
  zen-workspace[active="true"] .zen-workspace-tabs-section > tab:not([aria-hidden="true"]):not([style*="height: 0px"]):not([zen-empty-tab="true"]):nth-child(-n+9) {
    counter-increment: tabcounter;
  }
  #zen-essentials tab .tab-content::after,
  zen-workspace[active="true"] .zen-workspace-tabs-section > zen-folder:not([collapsed]) tab[aria-hidden="true"][folder-active="true"]:not([style*="height: 0px"]) .tab-content::after,
  zen-workspace[active="true"] .zen-workspace-tabs-section > zen-folder:not([collapsed]) tab:not([aria-hidden="true"]):not([style*="height: 0px"]) .tab-content::after,
  zen-workspace[active="true"] .zen-workspace-tabs-section > tab[aria-hidden="true"][folder-active="true"]:not([style*="height: 0px"]) .tab-content::after,
  zen-workspace[active="true"] .zen-workspace-tabs-section > tab:not([aria-hidden="true"]):not([style*="height: 0px"]):nth-child(-n+9) .tab-content::after {
    content: counter(tabcounter, tabhint);
    font-size: var(--mod-tab_hotkey_hints-font_size);
    font-weight: var(--mod-tab_hotkey_hints-font_weight);
    position: absolute;
    opacity: var(--mod-tab_hotkey_hints-opacity);
    color: var(--mod-tab_hotkey_hints-color);
    text-shadow: var(--mod-tab_hotkey_hints-text_shadow);
  }
}
#tabbrowser-tabs {
  #zen-essentials .tab-content::after {
    @media (-moz-pref("mod.tab_hotkey_hints.position_essentials", "topright")) {
        right: var(--mod-tab_hotkey_hints-h_margin_essentials);
        top: var(--mod-tab_hotkey_hints-v_margin_essentials);
    }
    @media (-moz-pref("mod.tab_hotkey_hints.position_essentials", "topleft")) {
        left: var(--mod-tab_hotkey_hints-h_margin_essentials);
        top: var(--mod-tab_hotkey_hints-v_margin_essentials);
    }
    @media (-moz-pref("mod.tab_hotkey_hints.position_essentials", "botright")) {
        right: var(--mod-tab_hotkey_hints-h_margin_essentials);
        bottom: var(--mod-tab_hotkey_hints-v_margin_essentials);
    }
    @media (-moz-pref("mod.tab_hotkey_hints.position_essentials", "botleft")) {
        left: var(--mod-tab_hotkey_hints-h_margin_essentials);
        bottom: var(--mod-tab_hotkey_hints-v_margin_essentials);
    } 
  }
  zen-workspace[active="true"] .tab-content::after {
    @media (-moz-pref("mod.tab_hotkey_hints.position", "topright")) {
        right: var(--mod-tab_hotkey_hints-h_margin);
        top: var(--mod-tab_hotkey_hints-v_margin);
    }
    @media (-moz-pref("mod.tab_hotkey_hints.position", "topleft")) {
        left: var(--mod-tab_hotkey_hints-h_margin);
        top: var(--mod-tab_hotkey_hints-v_margin);
    }
    @media (-moz-pref("mod.tab_hotkey_hints.position", "botright")) {
        right: var(--mod-tab_hotkey_hints-h_margin);
        bottom: var(--mod-tab_hotkey_hints-v_margin);
    }
    @media (-moz-pref("mod.tab_hotkey_hints.position", "botleft")) {
        left: var(--mod-tab_hotkey_hints-h_margin);
    }
  }
}

Readme

# Tab Hotkey Indicators

Adds number hints to tabs so you always know which hotkey to press.

- Adds a number on the ten tabs that have hotkey available (Ctrl+number by default)
- Choose number style
    * size
    * font weight
    * shadow
    * opacity
- Choose number position
- Toggle for Essentials & last tab

There is a measurable but unnoticeable performance impact to using this mod if you have VERY many tabs in the pinned section. Tested n=1000.

Known issues:
 * Collapsed sidebar has issues
 * Last tab hint displays over other hints when tab count is small
 * Subfolders

Preferences

[
    {
        "property": "mod.tab_hotkey_hints.essentials",
        "label": "Enabled for Essentials",
        "type": "checkbox",
        "defaultValue": true
    },
    {
        "property": "mod.tab_hotkey_hints.last_tab",
        "label": "Enabled on last tab",
        "type": "checkbox",
        "defaultValue": false
    },
    {
        "property": "mod.tab_hotkey_hints.font_size",
        "label": "Font size",
        "type": "string",
        "defaultValue": "0.8em",
        "placeholder": "0.8em"
    },
    {
        "property": "mod.tab_hotkey_hints.font_weight",
        "label": "Font weight",
        "type": "string",
        "defaultValue": "500",
        "placeholder": "500"
    },
    {
        "property": "mod.tab_hotkey_hints.opacity",
        "label": "Opacity",
        "type": "string",
        "defaultValue": "1",
        "placeholder": "0.9"
    },
    {
        "property": "mod.tab_hotkey_hints.color",
        "label": "Font color",
        "type": "string",
        "defaultValue": "inherit",
        "placeholder": "inherit"
    },
    {
        "property": "mod.tab_hotkey_hints.text_shadow",
        "label": "Shadow",
        "type": "string",
        "defaultValue": "inherit",
        "placeholder": "0px 0px 3px hsl(from var(--zen-primary-color) h 80 15)"
    },
    {
        "property": "mod.tab_hotkey_hints.position",
        "label": "Hint position anchor",
        "type": "dropdown",
        "defaultValue": "topright",
        "options": [
            {
                "label": "Top right",
                "value": "topright"
            },
            {
                "label": "Top left",
                "value": "topleft"
            },
            {
                "label": "Bottom right",
                "value": "botright"
            },
            {
                "label": "Bottom left",
                "value": "botleft"
            }
        ]
    },
    {
        "property": "mod.tab_hotkey_hints.v_margin",
        "label": "Vertical margin",
        "type": "string",
        "defaultValue": "4px",
        "placeholder": "4px"
    },
    {
        "property": "mod.tab_hotkey_hints.h_margin",
        "label": "Horizontal margin",
        "type": "string",
        "defaultValue": "8px",
        "placeholder": "8px"
    },
    {
        "property": "mod.tab_hotkey_hints.position_essentials",
        "label": "Hint position anchor for essentials",
        "type": "dropdown",
        "defaultValue": "topright",
        "options": [
            {
                "label": "Top right",
                "value": "topright"
            },
            {
                "label": "Top left",
                "value": "topleft"
            },
            {
                "label": "Bottom right",
                "value": "botright"
            },
            {
                "label": "Bottom left",
                "value": "botleft"
            }
        ]
    },
    {
        "property": "mod.tab_hotkey_hints.v_margin_essentials",
        "label": "Vertical margin for essentials",
        "type": "string",
        "defaultValue": "4px",
        "placeholder": "4px"
    },
    {
        "property": "mod.tab_hotkey_hints.h_margin_essentials",
        "label": "Horizontal margin for essentials",
        "type": "string",
        "defaultValue": "8px",
        "placeholder": "8px"
    }
]

Activity

  1. ramla
    added
    new-themeSubmit a theme to be added to the theme library
    on Jul 16, 2026

  2. github-actions commented on Jul 16, 2026

    @github-actions
    github-actionsBot
    on Jul 16, 2026 – with GitHub Actions
    Contributor

    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:

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

  3. github-actions
    closed this as completedon Jul 16, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    new-themeSubmit a theme to be added to the theme library

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions