Lazy load xterm css colors

Manually includes the xterm custom colors
on the 3 files that will need it: job log page,
job terminal page, environment terminal page

Reduces main CSS bundle

app/assets/stylesheets/pages/xterm.scss → app/assets/stylesheets/page_bundles/xterm.scss

+@import 'framework/variables';
+
 .build-page {
   // color codes are based on http://en.wikipedia.org/wiki/File:Xterm_256color_chart.svg
   // see also: https://gist.github.com/jasonm23/2868981

app/views/projects/jobs/show.html.haml

@@ -3,6 +3,9 @@
 - breadcrumb_title "##{@build.id}"
 - page_title "#{@build.name} (##{@build.id})", "Jobs"
 
+- content_for :page_specific_javascripts do
+  = stylesheet_link_tag 'page_bundles/xterm'
+
 %div{ class: container_class }
   .build-page.js-build-page
     #js-build-header-vue

changelogs/unreleased/44768-lazy-load-xterm-css.yml

+---
+title: Lazy load xterm custom colors css
+merge_request:
+author:
+type: performance

config/application.rb

@@ -134,6 +134,7 @@ module Gitlab
     config.assets.precompile << "notify.css"
     config.assets.precompile << "mailers/*.css"
     config.assets.precompile << "page_bundles/ide.css"
+    config.assets.precompile << "page_bundles/xterm.css"
     config.assets.precompile << "performance_bar.css"
     config.assets.precompile << "lib/ace.js"
     config.assets.precompile << "test.css"