From e8b574da0bc2ca19f7baf2bfca886b82078740a4 Mon Sep 17 00:00:00 2001 From: Abe Jellinek Date: Thu, 3 Feb 2022 21:38:01 -0800 Subject: [PATCH] Fix React icons only using 2x image once (#2324) a1267bc fixed repeated re-appending of '@2x' by moving the modified URL to a local variable, but it still set hasHiDPI to false permanently; this meant that icons displayed repeatedly in the same window, like the tab close button, would only use their 2x versions the first time they were displayed (in the case of tabs, this is the library tab's invisible close button, so *no* tabs got visible 2x buttons). This commit moves the HiDPI check and URL modification out of the render function and instead runs it a single time when i() is first called. --- chrome/content/zotero/components/icons.jsx | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/chrome/content/zotero/components/icons.jsx b/chrome/content/zotero/components/icons.jsx index 817bcc6426..0bd109d520 100644 --- a/chrome/content/zotero/components/icons.jsx +++ b/chrome/content/zotero/components/icons.jsx @@ -23,25 +23,22 @@ Icon.propTypes = { module.exports = { Icon } -function i(name, svgOrSrc, hasHiDPI=true) { +function i(name, svgOrSrc, hasHiDPI = true) { + if (typeof svgOrSrc == 'string' && hasHiDPI && window.devicePixelRatio >= 1.25) { + // N.B. In Electron we can use css-image-set + let parts = svgOrSrc.split('.'); + parts[parts.length - 2] = parts[parts.length - 2] + '@2x'; + svgOrSrc = parts.join('.'); + } + const icon = class extends PureComponent { render() { let props = Object.assign({}, this.props); props.name = name.toLowerCase(); if (typeof svgOrSrc == 'string') { - let finalSrc = svgOrSrc; - // N.B. In Electron we can use css-image-set - // Also N.B. this modifies svgOrSrc and hasHiDPI for all future invocations - // of this function - if (hasHiDPI && window.devicePixelRatio >= 1.25) { - let parts = svgOrSrc.split('.'); - parts[parts.length - 2] = parts[parts.length - 2] + '@2x'; - finalSrc = parts.join('.'); - hasHiDPI = false; - } if (!("style" in props)) props.style = {}; - props.style.backgroundImage = `url(${finalSrc})`; + props.style.backgroundImage = `url(${svgOrSrc})`; props.className = props.className || ""; props.className += " icon-bg"; // We use css background-image.