[create-theme]: Tab Hotkey Indicators

[ramla]

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"
    }
]

[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-2113 branch.

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