Chrome/Edge 84: More performant svg workaround solution

Instead of svg4everybody we use a custom more performant solution.
Unfortunately svg4everybody had a big performance impact on pages with a
lot of icons: https://gitlab.com/gitlab-org/quality/performance/-/issues/312

We load our sprite icons with JS and add them to the body.
Then we iterate over all the `use` elements and replace their reference
to that svg which we added internally. In order to avoid id conflicts,
those are renamed with a unique prefix.

We do that once the DOMContentLoaded fired and otherwise we use a
mutation observer to re-trigger this logic.

In order to not have a big impact on performance or to cause flickering
of of content,

1. we only do it for each svg once
2. we debounce the event handler and just do it in a requestIdleCallback

app/assets/javascripts/lib/chrome_84_icon_fix.js

-import svg4everybody from 'svg4everybody';
+import { debounce } from 'lodash';
 
 /*
   Chrome and Edge 84 have a bug relating to icon sprite svgs
   https://bugs.chromium.org/p/chromium/issues/detail?id=1107442
 
   If the SVG is loaded, under certain circumstances the icons are not
-  shown. As a workaround we use the well-tested svg4everybody and forcefully
-  include the icon fragments into the DOM and thus circumventing the bug
+  shown. We load our sprite icons with JS and add them to the body.
+  Then we iterate over all the `use` elements and replace their reference
+  to that svg which we added internally. In order to avoid id conflicts,
+  those are renamed with a unique prefix.
+
+  We do that once the DOMContentLoaded fired and otherwise we use a
+  mutation observer to re-trigger this logic.
+
+  In order to not have a big impact on performance or to cause flickering
+  of of content,
+
+  1. we only do it for each svg once
+  2. we debounce the event handler and just do it in a requestIdleCallback
+
+  Before we tried to do it with the library svg4everybody and it had a big
+  performance impact. See:
+  https://gitlab.com/gitlab-org/quality/performance/-/issues/312
  */
-document.addEventListener('DOMContentLoaded', () => {
-  svg4everybody({ polyfill: true });
+document.addEventListener('DOMContentLoaded', async () => {
+  const GITLAB_SVG_PREFIX = 'chrome-issue-230433-gitlab-svgs';
+  const FILE_ICON_PREFIX = 'chrome-issue-230433-file-icons';
+  const SKIP_ATTRIBUTE = 'data-replaced-by-chrome-issue-230433';
+
+  const fixSVGs = () => {
+    requestIdleCallback(() => {
+      document.querySelectorAll(`use:not([${SKIP_ATTRIBUTE}])`).forEach(use => {
+        const href = use?.getAttribute('href') ?? use?.getAttribute('xlink:href') ?? '';
+
+        if (href.includes(window.gon.sprite_icons)) {
+          use.removeAttribute('xlink:href');
+          use.setAttribute('href', `#${GITLAB_SVG_PREFIX}-${href.split('#')[1]}`);
+        } else if (href.includes(window.gon.sprite_file_icons)) {
+          use.removeAttribute('xlink:href');
+          use.setAttribute('href', `#${FILE_ICON_PREFIX}-${href.split('#')[1]}`);
+        }
+
+        use.setAttribute(SKIP_ATTRIBUTE, 'true');
+      });
+    });
+  };
+
+  const watchForNewSVGs = () => {
+    const observer = new MutationObserver(debounce(fixSVGs, 200));
+    observer.observe(document.querySelector('body'), {
+      childList: true,
+      attributes: false,
+      subtree: true,
+    });
+  };
+
+  const retrieveIconSprites = async (url, prefix) => {
+    const div = document.createElement('div');
+    div.classList.add('hidden');
+    const result = await fetch(url);
+    div.innerHTML = await result.text();
+    div.querySelectorAll('[id]').forEach(node => {
+      node.setAttribute('id', `${prefix}-${node.getAttribute('id')}`);
+    });
+    document.body.append(div);
+  };
+
+  if (window.gon && window.gon.sprite_icons) {
+    await retrieveIconSprites(window.gon.sprite_icons, GITLAB_SVG_PREFIX);
+    if (window.gon.sprite_file_icons) {
+      await retrieveIconSprites(window.gon.sprite_file_icons, FILE_ICON_PREFIX);
+    }
+
+    fixSVGs();
+    watchForNewSVGs();
+  }
 });

package.json

@@ -129,7 +129,6 @@
     "stickyfilljs": "^2.1.0",
     "string-hash": "1.1.3",
     "style-loader": "^1.1.3",
-    "svg4everybody": "^2.1.9",
     "swagger-ui-dist": "^3.26.2",
     "three": "^0.84.0",
     "three-orbit-controls": "^82.1.0",

vendor/licenses.csv

@@ -1044,7 +1044,6 @@ strip-json-comments,2.0.1,MIT
 style-loader,0.23.0,MIT
 supports-color,2.0.0,MIT
 supports-color,5.5.0,MIT
-svg4everybody,2.1.9,CC0-1.0
 symbol-observable,1.2.0,MIT
 sys-filesystem,1.1.6,Artistic 2.0
 tapable,1.1.0,MIT

yarn.lock

@@ -11208,11 +11208,6 @@ svg-tags@^1.0.0:
   resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
   integrity sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=
 
-svg4everybody@^2.1.9:
-  version "2.1.9"
-  resolved "https://registry.yarnpkg.com/svg4everybody/-/svg4everybody-2.1.9.tgz#5bd9f6defc133859a044646d4743fabc28db7e2d"
-  integrity sha1-W9n23vwTOFmgRGRtR0P6vCjbfi0=
-
 swagger-ui-dist@^3.26.2:
   version "3.26.2"
   resolved "https://registry.yarnpkg.com/swagger-ui-dist/-/swagger-ui-dist-3.26.2.tgz#22c700906c8911b1c9956da6c3fca371dba6219f"