Ensure high-dpi icons are loaded in React components

chrome/content/zotero/components/icons.jsx

@@ -26,7 +26,7 @@ function i(name, svgOrSrc) {
 			const { className } = this.props
 			
 			if (typeof svgOrSrc == 'string') {
-				if (window.devicePixelRatio >= 0.75) {
+				if (window.devicePixelRatio >= 1.25) {
 					let parts = svgOrSrc.split('.');
 					parts[parts.length-2] = parts[parts.length-2] + '@2x';
 					svgOrSrc = parts.join('.')

chrome/content/zotero/include.js

@@ -7,4 +7,9 @@ var Zotero = Components.classes['@zotero.org/Zotero;1']
 				.getService(Components.interfaces.nsISupports)
 				.wrappedJSObject;
 
-Components.utils.import('resource://zotero/require.js');
+// Components.utils.import('resource://zotero/require.js');
+// Not using Cu.import here since we don't want the require module to be cached
+// for includes within ZoteroPane or other code, where we want the window instance available to modules.
+Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
+	.getService(Components.interfaces.mozIJSSubScriptLoader)
+	.loadSubScript('resource://zotero/require.js');

chrome/content/zotero/standalone/standalone.xul

@@ -46,7 +46,8 @@
 				windowtype="navigator:browser" 
 				title="&brandShortName;"
 				width="1000" height="600"
-				persist="screenX screenY width height sizemode"> 
+				persist="screenX screenY width height sizemode">
+	<script type="application/javascript" src="resource://zotero/require.js"/>
 	<script type="application/javascript" src="standalone.js"/>
 	<script type="application/javascript" src="chrome://global/content/globalOverlay.js"/>
 	<script type="application/javascript" src="chrome://global/content/contentAreaUtils.js"/>

components/zotero-service.js

@@ -152,7 +152,13 @@ var isFirstLoadThisSession = true;
 var zContext = null;
 var initCallbacks = [];
 var zInitOptions = {};
-Components.utils.import('resource://zotero/require.js');
+
+// Components.utils.import('resource://zotero/require.js');
+// Not using Cu.import here since we don't want the require module to be cached
+// for includes within ZoteroPane or other code, where we want the window instance available to modules.
+Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
+	.getService(Components.interfaces.mozIJSSubScriptLoader)
+	.loadSubScript('resource://zotero/require.js');
 
 ZoteroContext = function() {}
 ZoteroContext.prototype = {

resource/concurrentCaller.js

@@ -26,7 +26,12 @@
 EXPORTED_SYMBOLS = ["ConcurrentCaller"];
 
 if (!(typeof process === 'object' && process + '' === '[object process]')) {
-	Components.utils.import('resource://zotero/require.js');
+	// Components.utils.import('resource://zotero/require.js');
+	// Not using Cu.import here since we don't want the require module to be cached
+	// for includes within ZoteroPane or other code where we want the window instance available to modules.
+	Components.classes["@mozilla.org/moz/jssubscript-loader;1"]
+		.getService(Components.interfaces.mozIJSSubScriptLoader)
+		.loadSubScript('resource://zotero/require.js');
 	var Promise = require('resource://zotero/bluebird.js');
 } else {
 	Promise = require('bluebird');

resource/require.js

@@ -1,63 +1,64 @@
 'use strict';
 
-var Zotero;
-
-var EXPORTED_SYMBOLS = ['require'];
-
 var require = (function() {
+	var win, Zotero;
 	var { Loader, Require, Module } = Components.utils.import('resource://gre/modules/commonjs/toolkit/loader.js');
 	var requirer = Module('/', '/');
 	var _runningTimers = {};
-	var win = {};
+	if (typeof window != 'undefined') {
+		win = window;
+	} else {
+		win = {};
 
-	win.setTimeout = function (func, ms) {
+		win.setTimeout = function (func, ms) {
-		var id = Math.floor(Math.random() * (1000000000000 - 1)) + 1
+			var id = Math.floor(Math.random() * (1000000000000 - 1)) + 1
-		var useMethodjit = Components.utils.methodjit;
+			var useMethodjit = Components.utils.methodjit;
-		var timer = Components.classes["@mozilla.org/timer;1"]
+			var timer = Components.classes["@mozilla.org/timer;1"]
-			.createInstance(Components.interfaces.nsITimer);
+				.createInstance(Components.interfaces.nsITimer);
-		timer.initWithCallback({"notify":function() {
+			timer.initWithCallback({"notify":function() {
-			// Remove timer from object so it can be garbage collected
+				// Remove timer from object so it can be garbage collected
-			delete _runningTimers[id];
+				delete _runningTimers[id];
-			
+				
-			// Execute callback function
+				// Execute callback function
-			try {
+				try {
-				func();
+					func();
-			} catch(err) {
+				} catch(err) {
-				// Rethrow errors that occur so that they appear in the error
+					// Rethrow errors that occur so that they appear in the error
-				// console with the appropriate name and line numbers. While the
+					// console with the appropriate name and line numbers. While the
-				// the errors appear without this, the line numbers get eaten.
+					// the errors appear without this, the line numbers get eaten.
-				var scriptError = Components.classes["@mozilla.org/scripterror;1"]
+					var scriptError = Components.classes["@mozilla.org/scripterror;1"]
-					.createInstance(Components.interfaces.nsIScriptError);
+						.createInstance(Components.interfaces.nsIScriptError);
-				scriptError.init(
+					scriptError.init(
-					err.message || err.toString(),
+						err.message || err.toString(),
-					err.fileName || err.filename || null,
+						err.fileName || err.filename || null,
-					null,
+						null,
-					err.lineNumber || null,
+						err.lineNumber || null,
-					null,
+						null,
-					scriptError.errorFlag,
+						scriptError.errorFlag,
-					'component javascript'
+						'component javascript'
-				);
+					);
-				Components.classes["@mozilla.org/consoleservice;1"]
+					Components.classes["@mozilla.org/consoleservice;1"]
-					.getService(Components.interfaces.nsIConsoleService)
+						.getService(Components.interfaces.nsIConsoleService)
-					.logMessage(scriptError);
+						.logMessage(scriptError);
-				typeof Zotero !== 'undefined' && Zotero.debug(err.stack, 1);
+					typeof Zotero !== 'undefined' && Zotero.debug(err.stack, 1);
+				}
+			}}, ms, Components.interfaces.nsITimer.TYPE_ONE_SHOT);
+			_runningTimers[id] = timer;
+			return id;
+		};
+		
+		win.clearTimeout = function (id) {
+			var timer = _runningTimers[id];
+			if (timer) {
+				timer.cancel();
 			}
-		}}, ms, Components.interfaces.nsITimer.TYPE_ONE_SHOT);
+			delete _runningTimers[id];
-		_runningTimers[id] = timer;
+		};
-		return id;
-	};
-	
-	win.clearTimeout = function (id) {
-		var timer = _runningTimers[id];
-		if (timer) {
-			timer.cancel();
-		}
-		delete _runningTimers[id];
-	};
 
-	win.debug = function (msg) {
+		win.debug = function (msg) {
-		dump(msg + "\n\n");
+			dump(msg + "\n\n");
-	};
+		};
+	}
 	
 	function getZotero() {
 		if (typeof Zotero === 'undefined') {
@@ -70,7 +71,7 @@ var require = (function() {
 	}
 
 	var cons;
-	if (typeof console !== 'undefined') {
+	if (typeof win.console !== 'undefined') {
 		cons = console;
 	}
 	if (!cons) {
@@ -80,16 +81,14 @@ var require = (function() {
 		}
 	}
 	let globals = {
-		document: typeof document !== 'undefined' && document || {},
+		window: win,
+		document: typeof win.document !== 'undefined' && win.document || {},
 		console: cons,
-		navigator: typeof navigator !== 'undefined' && navigator || {},
+		navigator: typeof win.navigator !== 'undefined' && win.navigator || {},
 		setTimeout: win.setTimeout,
 		clearTimeout: win.clearTimeout,
 	};
 	Object.defineProperty(globals, 'Zotero', { get: getZotero });
-	Object.defineProperty(globals, 'window', { get: function() {
-		return typeof window != 'undefined' ? window : win;
-	} });
 	var loader = Loader({
 		id: 'zotero/require',
 		paths: {
@@ -100,4 +99,4 @@ var require = (function() {
 	});
 
 	return Require(loader, requirer);
-})();
+})();

scss/components/_button.scss

@@ -28,9 +28,10 @@
     &:last-child {
       margin-right: -5px;
     }
-  }
+    svg, img {
-  svg, img {
+      vertical-align: middle;
-    vertical-align: middle;
+      width: 16px;
+    }
   }
   span.menu-marker {
     -moz-appearance: toolbarbutton-dropdown;