[Bug] Fix Region mode being off on high dpi screens like Retina or Surface Book in Firefox (#305)

* Use a devicePixelRatio of 1 on HDPI screens on Firefox to work around a bug in their canvas.drawImage(...) implementation

* Add logging and make it work for zoom

* Remove parameter for high dpi displays

Author: VishaalK

src/scripts/clipperUI/regionSelector.tsx

@@ -3,6 +3,7 @@ import {DomUtils} from "../domParsers/domUtils";
 import * as Log from "../logging/log";
 
 import {Constants} from "../constants";
+import {ClientType} from "../clientType";
 import {Status} from "./status";
 
 import {ClipperStateProp} from "./clipperState";
@@ -199,8 +200,17 @@ class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStat
 	 * the maximum allowed size)
 	 */
 	private startRegionClip() {
+		// Taken from https://www.kirupa.com/html5/detecting_retina_high_dpi.htm
+		// We check this here so that we can log it as a custom property on the regionSelectionProcessingEvent
+		const query = "(-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
+		const isHighDpiScreen = matchMedia(query).matches;
+		const isFirefoxWithHighDpiDisplay = this.props.clipperState.clientInfo.clipperType === ClientType.FirefoxExtension && isHighDpiScreen;
+
 		// Firefox reports this value incorrectly if this iframe is hidden, so store it now since we know we're visible
-		this.devicePixelRatio = window.devicePixelRatio;
+		// In addition to this, Firefox currently has a bug where they are not using devicePixelRatio correctly 
+		// on HighDPI screens such as Retina screens or the Surface Pro 4
+		// Bug link: https://bugzilla.mozilla.org/show_bug.cgi?id=1278507 
+		this.devicePixelRatio = isFirefoxWithHighDpiDisplay ? window.devicePixelRatio / 2 : window.devicePixelRatio;
 
 		let regionSelectionProcessingEvent = new Log.Event.BaseEvent(Log.Event.Label.RegionSelectionProcessing);
 		let regionSelectionCapturingEvent = new Log.Event.BaseEvent(Log.Event.Label.RegionSelectionCapturing);
@@ -213,6 +223,7 @@ class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStat
 				this.saveCompressedSelectionToState(dataUrl).then((canvas) => {
 					regionSelectionProcessingEvent.setCustomProperty(Log.PropertyName.Custom.Width, canvas.width);
 					regionSelectionProcessingEvent.setCustomProperty(Log.PropertyName.Custom.Height, canvas.height);
+					regionSelectionProcessingEvent.setCustomProperty(Log.PropertyName.Custom.IsHighDpiScreen, isHighDpiScreen);
 					Clipper.logger.logEvent(regionSelectionProcessingEvent);
 				});
 			}
@@ -248,6 +259,8 @@ class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStat
 			return Promise.reject(new Error("Expected the two points to be set, but they were not"));
 		}
 
+		const devicePixelRatio = this.devicePixelRatio;
+
 		return new Promise<HTMLCanvasElement>((resolve) => {
 			let regionSelectionLoadingEvent = new Log.Event.BaseEvent(Log.Event.Label.RegionSelectionLoading);
 			let img: HTMLImageElement = new Image();
@@ -264,17 +277,16 @@ class RegionSelectorClass extends ComponentBase<RegionSelectorState, ClipperStat
 				let destinationOffsetY = 0;
 				let width = (xMax - xMin);
 				let height = (yMax - yMin);
-				let sourceOffsetX = xMin * this.devicePixelRatio;
-				let sourceOffsetY = yMin * this.devicePixelRatio;
-				let sourceWidth = (xMax - xMin) * this.devicePixelRatio;
-				let sourceHeight = (yMax - yMin) * this.devicePixelRatio;
+				let sourceOffsetX = xMin * devicePixelRatio;
+				let sourceOffsetY = yMin * devicePixelRatio;
+				let sourceWidth = (xMax - xMin) * devicePixelRatio;
+				let sourceHeight = (yMax - yMin) * devicePixelRatio;
 
 				let canvas: HTMLCanvasElement = document.createElement("canvas") as HTMLCanvasElement;
 				canvas.width = width;
 				canvas.height = height;
 				let ctx: CanvasRenderingContext2D = canvas.getContext("2d");
 				ctx.drawImage(img, sourceOffsetX, sourceOffsetY, sourceWidth, sourceHeight, destinationOffsetX, destinationOffsetY, width, height);
-
 				resolve(canvas);
 			};
 

src/scripts/logging/submodules/propertyName.ts

@@ -28,6 +28,7 @@ export module PropertyName {
 		InitialDataUrlLength,
 		InvokeMode,
 		InvokeSource,
+		IsHighDpiScreen,
 		IsRetryable,
 		IsSerif,
 		Key,