Skip to content

Add startup-css-check in CI

Paul Slaughter requested to merge ps-add-startup-css-check into master

What does this MR do?

This MR adds the startup-css-check CI job which verifies that the generated files in app/assets/stylesheets/startup/ are up-to-date.

Why are there so many file changes in this MR!?

It's been a long time since we've updated Startup CSS and it used to use a semi-manual process. This MR establishes the new baseline using the new Startup CSS generation.

Screenshots (strongly suggested)

How to test?

You can either:

  1. Simply open a page locally and check for any significant style changes while the application.css loads.
  2. Try applying the following patch and visiting a page with ?startup_css_only=true to prevent the application.css from loading. You can then compare this page with one that does not have the ?startup_css_only parameter and compare for differences.

0001-Add-startup_css_only-condition.patch

Description Before (master with ?startup_css_only=true) After (this MR with ?startup_css_only=true) After (this MR with full load)
Sign in before_sign_in_startup_only after_sign_in_after_only after_sign_in_full
Register before_register_startup_only after_register_startup_only after_register_full
Project page + signed out + Feature.enable(:combined_menu) before_project_anon_combined_startup_only after_project_anon_combined_startup_only after_project_anon_combined_full
Project page before_project_startup_only after_project_startup_only after_project_full
Project page + sidebar collapse before_sidebar_collapse_startup_only after_sidebar_collapse_startup_only after_sidebar_collapse_full
Project page + Feature.enable(:sidebar_refactor) before_sidebar_refactor_startup_only after_sidebar_refactor_startup_only after_sidebar_refactor_full
Project page + Feature.enable(:combined_menu) before_combined_menu_startup_only after_combined_menu_startup_only after_combined_menu_full
Dark mode before_dark_startup_only after_dark_startup_only after_dark_full

You'll notice that updating the startup CSS in this MR fixes the following experiences on initial page load:

  • Initial colors when dark mode
  • Sidebar refactor
  • Identicon on sidebar
  • Register page

There's some things which we're choosing not to fix in this MR, namely the startup CSS for when a GitLab instance has a system header/footer and when the performance bar is open.

Does this MR meet the acceptance criteria?

Conformity

Availability and Testing

Edited by Paul Slaughter

Merge request reports

Loading