From e8b574da0bc2ca19f7baf2bfca886b82078740a4 Mon Sep 17 00:00:00 2001
From: Abe Jellinek <jellinek@berkeley.edu>
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.