From bca4cbc15bbb246e150a67ed364c6d0be546d04a Mon Sep 17 00:00:00 2001 From: Skyler Grey Date: Tue, 26 Mar 2024 16:11:18 +0000 Subject: [PATCH] Fix LOUtil.checkIfImageExists reprocessing errors 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 Change-Id: Id8e52416a60d394a00669e266595344eaa3376d2 --- browser/src/control/Control.UserList.ts | 2 +- browser/src/core/LOUtil.js | 31 ++++++++++++++++++------- 2 files changed, 24 insertions(+), 9 deletions(-) diff --git a/browser/src/control/Control.UserList.ts b/browser/src/control/Control.UserList.ts index 4d91e22f7..ac56d3487 100644 --- a/browser/src/control/Control.UserList.ts +++ b/browser/src/control/Control.UserList.ts @@ -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; } diff --git a/browser/src/core/LOUtil.js b/browser/src/core/LOUtil.js index ab71f681b..766a82b80 100644 --- a/browser/src/core/LOUtil.js +++ b/browser/src/core/LOUtil.js @@ -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