Commit 23ddf80d authored by Lukas Eipert's avatar Lukas Eipert

Remove Chrome 84 icon workaround

It should be safe to remove this workaround, as we are officially
supporting the last three major versions of Chrome, so at time of this
writing Chrom >= 86. Furthermore they even fixed it in a patch release
for Chrome 84, namely 84.0.4147.125.
parent 0d347294
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. 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', 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();
}
});
......@@ -61,7 +61,6 @@
= yield :page_specific_javascripts
= webpack_controller_bundle_tags
= webpack_bundle_tag "chrome_84_icon_fix" if browser.chrome?([">=84", "<84.0.4147.125"]) || browser.edge?([">=84", "<84.0.522.59"])
= yield :project_javascripts
......
---
title: Remove workaround for icon loading in Chrome 84
merge_request: 56114
author:
type: removed
......@@ -103,7 +103,6 @@ function generateEntries() {
default: defaultEntries,
sentry: './sentry/index.js',
performance_bar: './performance_bar/index.js',
chrome_84_icon_fix: './lib/chrome_84_icon_fix.js',
jira_connect_app: './jira_connect/index.js',
};
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment