Add age indicator toggle to blame preferences dropdown

What does this MR do and why?

Adds a "Show age indicator legend" toggle to the blame preferences dropdown, allowing users to control whether the age indicator legend is visible. The preference is persisted in localStorage and tracked via internal events.

This is a follow-up to !225362 (merged), which moved the blame header into the blob header.

Changes

  • Convert blame preferences dropdown to icon-only with a "Blame preferences" heading
  • Add "Show age indicator legend" toggle using GlToggle
  • blame_preferences.vue owns localStorage logic, emits toggle-age-indicator on mount and on toggle
  • blame_header.vue listens to the emit to show/hide the legend
  • Age indicator defaults to hidden (off)
  • Internal events tracking: toggle_age_indicator_on_blob_page with property indicating show or hide, plus weekly/monthly unique user metrics
  • Fix blame legend padding in HAML view (gl-mt-2 → gl-p-4)

Resolves #589722 (closed)

Screenshots or screen recordings

CleanShot_2026-03-05_at_14.32.39

How to set up and validate locally

  1. Enable inline_blame FF
  2. Navigate to any repository file (e.g., gitlab-org/gitlab-shell/-/blame/main/.golangci.yml)
  3. Click the "Blame" button in the file header
  4. Click the preferences icon
  5. Verify the "Blame preferences" heading appears inside the dropdown
  6. Toggle "Show age indicator legend" — verify the legend shows/hides
  7. Refresh the page — verify the toggle state persists via localStorage
  8. Toggle again and check network tab for toggle_age_indicator_on_blob_page event with property: 'show' or property: 'hide'

MR acceptance checklist

Evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Chaoyue Zhao

Merge request reports

Loading
Loading