[Wety14]

Summary

This PR modernizes and styles existing native Firefox tooltips across Zen's chrome UI to match Zen's signature aesthetic (pill shape with anchor-corner rounding, primary color background tinting, and light/dark theme adaptation).

Following maintainer feedback, this PR focuses purely on styling the existing native tooltip UI cleanly via CSS, touching 0 locale files and avoiding custom DOM overrides.

---

Key Changes

• Pure CSS styling: Modernizes Firefox's native <tooltip> elements for chrome UI without overriding or injecting custom DOM.
• Chrome UI scoped: Specifically excludes web views and content tooltips (#remoteBrowserTooltip, [contenttooltip], [page="true"]) so web pages retain their standard behavior.
• Zen aesthetic:
  • Pill shape with top-left anchor radius (border-radius: 16px; border-top-left-radius: 4px;).
  • Subtle workspace/theme tint via color-mix() and var(--zen-primary-color).
  • Full light-dark() theme support.
  • Added to squircle exclusions to ensure crisp rounded pill corners.
• Multi-line tooltip support: Polished layout for #tabbrowser-tab-tooltip (title + subtle URI) and navigation tooltips (#back-button-tooltip / #forward-button-tooltip).

---

Checklist

• UI builds cleanly with npm run build:ui (0 warnings / errors).
• Only affects chrome UI; web view tooltips are completely unaffected.
• No locale files touched.
• Adapts cleanly across light and dark modes.

[Wety14]

Update on Chrome UI tooltips harmonization:

• Unified Button Tooltips: All Chrome UI buttons (navigation, workspaces, extensions, compact mode, library, tab close buttons) now consistently inherit from the single dynamic tooltip element (#dynamic-shortcut-tooltip).
• Tab Tooltips Restored: Resolved the trigger node resolution in nsXULTooltipListener so tab hover previews and titles (#tabbrowser-tab-tooltip) display seamlessly.
• Dynamic Corner Rounding & Overflow Alignment: Tooltips now round the corner closest to the trigger button to 4px (16px elsewhere) and properly align leftwards from the button's right edge when running out of screen space on the right.
• Known Issue:
  • When workspace theme mode is set to Automatic, tooltips currently default to light mode regardless of the device's system dark theme preference.

[Wety14]

Update: Phase 2 - Tooltip Descriptions Ready & Strict Crowdin Fallback

The harmonized Chrome UI tooltips are now working properly and stably. The frontend is fully wired to display secondary descriptions under the title on buttons where extra context is helpful.

Key Highlights

• Secondary Description Support: #dynamic-shortcut-tooltip now supports displaying a secondary description line (.zen-tooltip-description at 11px, opacity: 0.75) beneath the main label.
• Strict Invisible Fallback: When an element has no description configured, the description container is strictly collapsed and hidden (display: none !important; margin: 0; padding: 0;). Standard tooltips remain in their compact single-line layout with zero residual whitespace or padding.
• Zero Locale Files Touched: No .ftl or .properties files have been modified in this PR to keep Crowdin synchronizations completely clean.
• Keyboard Shortcuts: Please note that automatic keyboard shortcut badges/formatting (specified for Phase 3) are not yet supported/active in this phase; they will be addressed in a subsequent phase.
• Known Issue: When workspace theme mode is set to Automatic, tooltips currently default to light mode regardless of the device's system dark theme preference.

---

How to Add Descriptions via Crowdin (Note for Maintainers)

The frontend automatically resolves .description attributes via Fluent. To add descriptions to buttons where helpful, simply define a .description attribute in the Fluent key (e.g. in browser/locales/en-US/browser/zen-browser.ftl):

zen-toolbar-compact-mode-button =
    .label = Toggle Compact Mode
    .description = Automatically collapses the sidebar and toolbar

Crowdin can then sync this attribute across all locales. If a locale hasn't translated .description yet, or if a button has no description, the tooltip transparently falls back to the clean single-line title.

[Wety14]

Update: 3D Shortcut Keycaps, Dynamic Descriptions & Strict Fallbacks

1. Implemented Features

• 3D Keycap Badges: Shortcuts are parsed into individual keycaps (.zen-tooltip-key) inside .zen-tooltip-shortcut:
  • Background: Light pastel accent tint (color-mix(in srgb, var(--zen-primary-color, #888888) 36%, #ffffff)).
  • Symbol: Dark accent tone in both light and dark modes (light-dark(...)).
  • 3D Bevel: 1.5px bottom shadow with subtle outline.
• Strict Invisible Fallbacks: If an element lacks a description or shortcut, those elements collapse completely (display: none !important; margin: 0; padding: 0), maintaining the ultra-compact mono-line pill shape.
• Temporary In-Label Shortcut Extraction: For buttons where legacy strings embed shortcuts in the label (e.g., New Tab (⌘T)), the shortcut is temporarily stripped from the title and routed into the keycap badge to avoid duplicate text.

2. Crowdin Steps (Full Migration)

1. In browser/locales/en-US/browser/*.ftl, remove embedded shortcut parentheses from .label / .tooltiptext strings.
2. Declare secondary descriptions using the .description attribute (e.g., zen-toolbar-compact-mode-button.description = ...).
3. Crowdin will automatically sync these keys across all locales.

3. Code Cleanup Checklist (Post-Crowdin Migration)

Once strings on Crowdin are updated:

• In browser.js (DynamicShortcutTooltip.updateText), remove the temporary regex fallback:

  let match = titleText.match(/\s*\(([^)]+)\)$/);
  if (match && ...) { ... }

• The system will then exclusively rely on DOM [command] / [key] resolution via findShortcutForTrigger.

[Wety14]

Bugfix update:

• Fixed dynamic shortcut detection for all toolbar/navigation buttons (including Back, Forward, Reload).
• Prioritized canonical keys with accelerator modifiers over legacy/function key aliases.
• Added full support and dynamic updating for workspace switch shortcuts (^1..^0 / Alt+1..Alt+0).
• Refined tooltip styling with a subtle divider separator for descriptions and tighter keycap badge spacing (1.5px).

[Wety14]

Refactor: Clean JS/CSS Implementation & Crowdin Migration Path

Following the feedback, we completely discarded all C++ engine patches, scheme overrides, and non-existent variables to keep the PR focused and minimal:

1. Clean Approach:

   • Dropped C++ patches: theme adaptation and DOM handling now rely exclusively on standard CSS (light-dark(), color-mix()) and front-end JS helpers.
   • Removed unused CSS variables/properties (--zen-squircle, custom pseudo-selectors).
   • Fixed text duplication: decoupled the DOM updates from Gecko's internal tooltip label sync runner to ensure titles and shortcut badges render once cleanly.

2. Upcoming Crowdin Migration Path:

   • Step 1 (Fluent strings): When updating strings in Crowdin / en-US, remove hardcoded shortcut suffixes (e.g. (⌘T)) from .label / .tooltiptext and define .description where secondary descriptions are desired.
   • Step 2 (Regex deprecation): Once translated, remove the temporary regex fallback in DynamicShortcutTooltip.updateText, letting keycaps rely 100% on native key/command bindings.

[Wety14]

Further Refactor: Streamlined Footprint & Robust Shortcut Resolution

• Streamlined DynamicShortcutTooltip: Replaced ~650 lines of complex caching, subtree mutation observers, and heuristic guessing with ~130 lines of clean, idiomatic front-end JS.
• Dropped main-popupset-js.patch: Removed global popup listeners entirely; accent color is resolved dynamically on demand via _applyAccent.
• Cleaned ZenSpaceIcons.mjs: Removed inline style injections on workspace buttons.
• Decluttered CSS: Stripped redundant !important declarations, eliminated obsolete properties, and perfected keycap contrast across light and dark themes.
• Feature Loss: one of the corners of the tooltip (the nearest from the button view point) was less round before to indicate a sort of pointing.