Fix text selection with hdpi screens (mozilla#15229)

src/display/text_layer.js

@@ -166,6 +166,8 @@ function appendText(task, geom, styles, ctx) {
  textDiv.style.fontSize = `${fontHeight}px`;
  textDiv.style.fontFamily = style.fontFamily;
 
+ textDivProperties.fontSize = fontHeight;
+
  // Keeps screen readers from pausing on every new text span.
  textDiv.setAttribute("role", "presentation");
 
@@ -595,6 +597,7 @@ class TextLayerRenderTask {
  this._capability = createPromiseCapability();
  this._renderTimer = null;
  this._bounds = [];
+ this._devicePixelRatio = window.devicePixelRatio;
 
  // Always clean-up the temporary canvas once rendering is no longer pending.
  this._capability.promise
@@ -680,22 +683,26 @@ class TextLayerRenderTask {
 
  let transform = "";
  if (textDivProperties.canvasWidth !== 0 && textDivProperties.hasText) {
- const { fontSize, fontFamily } = textDiv.style;
+ const { fontFamily } = textDiv.style;
+ const { fontSize } = textDivProperties;
 
  // Only build font string and set to context if different from last.
  if (
  fontSize !== this._layoutTextLastFontSize ||
  fontFamily !== this._layoutTextLastFontFamily
  ) {
- this._layoutTextCtx.font = `${fontSize} ${fontFamily}`;
+ this._layoutTextCtx.font = `${
+ fontSize * this._devicePixelRatio
+ }px ${fontFamily}`;
  this._layoutTextLastFontSize = fontSize;
  this._layoutTextLastFontFamily = fontFamily;
  }
  // Only measure the width for multi-char text divs, see `appendText`.
  const { width } = this._layoutTextCtx.measureText(textDiv.textContent);
 
  if (width > 0) {
- const scale = textDivProperties.canvasWidth / width;
+ const scale =
+ (this._devicePixelRatio * textDivProperties.canvasWidth) / width;
  if (this._enhanceTextSelection) {
  textDivProperties.scale = scale;
  }