Skip to content

Set the user preferred highlight theme for the Blame page during server side rendering

Stanislav Lashmanov requested to merge cyberap/gitlab:set-highlight-theme-for-blame-page into master

What does this MR do and why?

Blame page has code highlighting that uses color scheme from user preferences. Right now this scheme is not set by default during server render time. Instead, it is set on client-side after the initial render. Which leads to FOUC and massive style recalculations with severe performance impact (every single element inside code highlight root must be recalculated). We can fix that by applying user-preferred color scheme during server render time. This variable is already accessible inside Rails application and is simply passed through to client-side, so we can safely reuse it in the Blame page template.

Screenshots or screen recordings

Here are the results before and after the change on a high-end system (performance impact on low-end devices will be much greater than that)

Before After
image image

How to set up and validate locally

  1. Open this blame page on your local GDK instance.
  2. Measure performance in the DevTools performance tab.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Merge request reports