Improve DPI matching & scaling logic.

remoting/webapp/crd/js/client_session.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview
  * Class handling creation and teardown of a remoting client session.
  *
  * The ClientSession class controls lifetime of the client plugin
  * object and provides the plugin with the functionality it needs to
@@ skipping 1237 matching lines @@
 remoting.ClientSession.prototype.updateDimensions = function() {
   if (this.plugin_.getDesktopWidth() == 0 ||
       this.plugin_.getDesktopHeight() == 0) {
     return;
   }
 
   var clientArea = this.getClientArea_();
   var desktopWidth = this.plugin_.getDesktopWidth();
   var desktopHeight = this.plugin_.getDesktopHeight();
 
-  // When configured to display a host at its original size, we aim to display
-  // it as close to its physical size as possible, without losing data:
-  // - If client and host have matching DPI, render the host pixel-for-pixel.
-  // - If the host has higher DPI then still render pixel-for-pixel.
-  // - If the host has lower DPI then let Chrome up-scale it to natural size.
+  // We have the following goals in sizing the desktop display at the client:
+  //  1. Avoid losing detail by down-scaling beyond 1:1 host:device pixels.
+  //  2. Avoid up-scaling if that will cause the client to need scrollbars.
+  //  3. Avoid introducing blurriness with non-integer up-scaling factors.
+  //  4. Avoid having huge "letterboxes" around the desktop, if it's really
+  //     small.
+  //
+  // To determine the ideal size we follow a four-stage process:
+  //  1. Determine the "natural" size at which to display the desktop.
+  //    a. Initially assume 1:1 mapping of desktop to client device pixels.
+  //    b. If host DPI is less than the client's then up-scale accordingly.

[Jamie, 2015/01/09 22:23:47]

Does this overrule constraint 3, above?

+  //    c. If desktopScale is configured for the host then allow that to
+  //       cancel-out some or all of the up-scaling from (b).

[Jamie, 2015/01/09 22:23:47]

It's not clear what "some or all" means here. Can you be more specific?

+  //  2. If the natural size of the desktop is smaller than the client device
+  //     then apply up-scaling by an integer scale factor to avoid excessive
+  //     letterboxing.

[Jamie, 2015/01/09 22:23:47]

Does "avoid excessive letterboxing" imply that we'll always select the largest
integer that gives a plugin size smaller than the window (ie, no scroll-bars)?

Edit: No, it seems that's not true, based on step 3. That being the case, I
think it needs some clarification.

+  //  3. If shrink-to-fit is configured, and the natural size exceeds the
+  //     client size then apply down-scaling by an arbitrary scale factor.
+  //  4. If the overall scale factor is fractionally over an integer factor
+  //     then reduce it to that integer factor, to avoid blurring.

[Jamie, 2015/01/09 22:23:47]

By "fractionally", do mean "only just"? Given that we're talking about ratios
(a.k.a, fractions) below, I would pick a different word to avoid confusion, or
(if it's not overkill) be explicit: (1 + epsilon) * k, for some integer k.

 
-  // We specify the plugin dimensions in Density-Independent Pixels, so to
-  // render pixel-for-pixel we need to down-scale the host dimensions by the
-  // devicePixelRatio of the client. To match the host pixel density, we choose
-  // an initial scale factor based on the client devicePixelRatio and host DPI.
+  // All calculations are performed in device pixels.
+  var clientWidth = clientArea.width * window.devicePixelRatio;
+  var clientHeight = clientArea.height * window.devicePixelRatio;
 
-  // Determine the effective device pixel ratio of the host, based on DPI.
+  // 1. Determine a "natural" size at which to display the desktop.
+  var scale = 1.0;
+
+  // Determine the effective host device pixel ratio.
   var hostPixelRatioX = Math.ceil(this.plugin_.getDesktopXDpi() / 96);
   var hostPixelRatioY = Math.ceil(this.plugin_.getDesktopYDpi() / 96);
   var hostPixelRatio = Math.min(hostPixelRatioX, hostPixelRatioY);
 
-  // Include the desktopScale in the hostPixelRatio before comparing it with
-  // the client devicePixelRatio to determine the "natural" scale to use.
-  hostPixelRatio *= this.desktopScale_;
+  // Allow up-scaling to account for DPI.
+  scale = Math.max(scale, window.devicePixelRatio / hostPixelRatio);
 
-  // Down-scale by the smaller of the client and host ratios.
-  var scale = 1.0 / Math.min(window.devicePixelRatio, hostPixelRatio);
+  // Allow some or all of the up-scaling to be cancelled by the desktopScale.
+  if (this.desktopScale_ > 1.0) {
+    scale = Math.max(1.0, scale / this.desktopScale_);
+  }
 
+  // 2. Up-scale to avoid excessive letterboxing, if necessary.
+  if (desktopWidth * scale <= clientWidth &&
+      desktopHeight * scale <= clientHeight) {
+    var scaleX = Math.floor(clientWidth / desktopWidth);
+    var scaleY = Math.floor(clientHeight / desktopHeight);
+    scale = Math.min(scaleX, scaleY);
+  }
+
+  // 3. Apply shrink-to-fit, if configured.
   if (this.shrinkToFit_) {
-    // Reduce the scale, if necessary, to fit the whole desktop in the window.
-    var scaleFitWidth = Math.min(scale, 1.0 * clientArea.width / desktopWidth);
-    var scaleFitHeight =
-        Math.min(scale, 1.0 * clientArea.height / desktopHeight);
+    var scaleFitWidth = Math.min(scale, 1.0 * clientWidth / desktopWidth);
+    var scaleFitHeight = Math.min(scale, 1.0 * clientHeight / desktopHeight);
     scale = Math.min(scaleFitHeight, scaleFitWidth);
 
+    // TODO(wez): Fix multi-monitor and wide/tall desktop handling.
     // If we're running full-screen then try to handle common side-by-side
     // multi-monitor combinations more intelligently.
     if (remoting.fullscreen.isActive()) {
       // If the host has two monitors each the same size as the client then
       // scale-to-fit will have the desktop occupy only 50% of the client area,
       // in which case it would be preferable to down-scale less and let the
       // user bump-scroll around ("scale-and-pan").
       // Triggering scale-and-pan if less than 65% of the client area would be
       // used adds enough fuzz to cope with e.g. 1280x800 client connecting to
       // a (2x1280)x1024 host nicely.
       // Note that we don't need to account for scrollbars while fullscreen.
       if (scale <= scaleFitHeight * 0.65) {
         scale = scaleFitHeight;
       }
       if (scale <= scaleFitWidth * 0.65) {
         scale = scaleFitWidth;
       }
     }
   }
 
+  // 4. Avoid blurring for close-to-integer up-scaling factors.
+  if (scale > 1.0) {
+    var scaleBlurriness = scale / Math.floor(scale);
+    if (scaleBlurriness < 1.1) {
+      scale = Math.floor(scale);
+    }
+  }
+
+  // Determine the necessary plugin dimensions in DIPs.
+  scale = scale / window.devicePixelRatio;
   var pluginWidth = Math.round(desktopWidth * scale);
   var pluginHeight = Math.round(desktopHeight * scale);
 
   // Resize the plugin if necessary.
   // TODO(wez): Handle high-DPI to high-DPI properly (crbug.com/135089).
   this.plugin_.element().style.width = pluginWidth + 'px';
   this.plugin_.element().style.height = pluginHeight + 'px';
 
   // Position the container.
   // Note that clientWidth/Height take into account scrollbars.
@@ skipping 408 matching lines @@
  * @param {Object} message The parsed extension message data.
  * @return {boolean} True if the message was recognized, false otherwise.
  */
 remoting.ClientSession.prototype.handleExtensionMessage =
     function(type, message) {
   if (this.videoFrameRecorder_) {
     return this.videoFrameRecorder_.handleMessage(type, message);
   }
   return false;
 }