Merge branch 'ps-add-fallback-for-startup-css' into 'master'

Add fallback to load event for startup css

See merge request gitlab-org/gitlab!43329

app/assets/javascripts/behaviors/index.js

@@ -13,6 +13,9 @@ import './toggler_behavior';
 import './preview_markdown';
 import initCollapseSidebarOnWindowResize from './collapse_sidebar_on_window_resize';
 import initSelect2Dropdowns from './select2';
+import { loadStartupCSS } from './load_startup_css';
+
+loadStartupCSS();
 
 installGlEmojiElement();
 

app/assets/javascripts/behaviors/load_startup_css.js

+export const loadStartupCSS = () => {
+  // We need to fallback to dispatching `load` in case our event listener was added too late
+  // or the browser environment doesn't load media=print.
+  // Do this on `window.load` so that the default deferred behavior takes precedence.
+  // https://gitlab.com/gitlab-org/gitlab/-/issues/239357
+  window.addEventListener(
+    'load',
+    () => {
+      document
+        .querySelectorAll('link[media=print]')
+        .forEach(x => x.dispatchEvent(new Event('load')));
+    },
+    { once: true },
+  );
+};

app/views/layouts/_startup_css_activation.haml

@@ -7,4 +7,3 @@
       const startupLinkLoadedEvent = new CustomEvent('CSSStartupLinkLoaded');
       linkTag.addEventListener('load',function(){this.media='all';this.setAttribute('data-startupcss', 'loaded');document.dispatchEvent(startupLinkLoadedEvent);},{once: true});
     })
-- return unless use_startup_css?

spec/frontend/behaviors/load_startup_css_spec.js

+import { setHTMLFixture } from 'helpers/fixtures';
+import { loadStartupCSS } from '~/behaviors/load_startup_css';
+
+describe('behaviors/load_startup_css', () => {
+  let loadListener;
+
+  const setupListeners = () => {
+    document
+      .querySelectorAll('link')
+      .forEach(x => x.addEventListener('load', () => loadListener(x)));
+  };
+
+  beforeEach(() => {
+    loadListener = jest.fn();
+
+    setHTMLFixture(`
+      <meta charset="utf-8" />
+      <link media="print" src="./lorem-print.css" />
+      <link media="print" src="./ipsum-print.css" />
+      <link media="all" src="./dolar-all.css" />
+    `);
+
+    setupListeners();
+
+    loadStartupCSS();
+  });
+
+  it('does nothing at first', () => {
+    expect(loadListener).not.toHaveBeenCalled();
+  });
+
+  describe('on window load', () => {
+    beforeEach(() => {
+      window.dispatchEvent(new Event('load'));
+    });
+
+    it('dispatches load to the print links', () => {
+      expect(loadListener.mock.calls.map(([el]) => el.getAttribute('src'))).toEqual([
+        './lorem-print.css',
+        './ipsum-print.css',
+      ]);
+    });
+  });
+});