strepsirrhini/libreoffice-online
3
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix LOUtil.checkIfImageExists reprocessing errors

Browse source 
Previously, we would sometimes get the same error event mulitple times,
leading to us erroneously believing that an image which loaded correctly
was invalid. This caused images to sometimes disappear, particularly
when switching to dark mode.

Additionally, some images are critical to layout so even if they fail to
load we should not 'display: none' them. We can set their src to an
invisible pixel to get a similar effect. We must assume that they have
their width/height correctly set elsewhere or things such as the broken
image would also break the layout.

Signed-off-by: Skyler Grey <skyler.grey@collabora.com>
Change-Id: Id8e52416a60d394a00669e266595344eaa3376d2
This commit is contained in:
Skyler Grey 2024-03-26 16:11:18 +00:00 committed by Skyler Grey
parent 3718221c5a
commit bca4cbc15b
2 changed files with 24 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
browser/src/control/Control.UserList.ts
View file

@ -208,7 +208,7 @@ class UserList extends L.Control {
img.setAttribute('data-view-id', viewId.toString());
L.LOUtil.checkIfImageExists(img);
L.LOUtil.checkIfImageExists(img, true);
return img;
}

31
browser/src/core/LOUtil.js
View file

@ -128,19 +128,34 @@ L.LOUtil = {
}
return defaultImageURL;
},
checkIfImageExists : function(imageElement) {
imageElement.addEventListener('error', function() {
if (imageElement.src && imageElement.src.includes('images/branding/dark')) {
imageElement.src = imageElement.src.replace('images/branding/dark', 'images/dark');
checkIfImageExists: function (imageElement, imageIsLayoutCritical) {
imageElement.addEventListener('error', function (e) {
if (e.loUtilProcessed) {
return;
}
if (imageElement.src && (imageElement.src.includes('images/dark')|| imageElement.src.includes('images/branding'))) {
imageElement.src = imageElement.src.replace('images/dark', 'images');
imageElement.src = imageElement.src.replace('images/branding', 'images');
if (imageElement.src && imageElement.src.includes('/images/branding/dark/')) {
imageElement.src = imageElement.src.replace('/images/branding/dark/', '/images/dark/');
e.loUtilProcessed = true;
return;
}
if (imageElement.src && (imageElement.src.includes('/images/dark/') || imageElement.src.includes('/images/branding/'))) {
imageElement.src = imageElement.src.replace('/images/dark/', '/images/');
imageElement.src = imageElement.src.replace('/images/branding/', '/images/');
e.loUtilProcessed = true;
return;
}
if (imageIsLayoutCritical) {
imageElement.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
// We cannot set visibility: hidden because that would hide other attributes of the image, e.g. its border
e.loUtilProcessed = true;
return;
}
imageElement.style.display = 'none';
});
e.loUtilProcessed = true;
});
},
/// oldFileName = Example.odt, suffix = new
/// returns: Example_new.odt