Merge branch 'master' into chromeclip

app/ui.js

@@ -193,6 +193,7 @@ const UI = {
         UI.initSetting('treat_lossless', 7);
         UI.initSetting('jpeg_video_quality', 5);
         UI.initSetting('webp_video_quality', 5);
+        UI.initSetting('anti_aliasing', 0);
         UI.initSetting('video_area', 65);
         UI.initSetting('video_time', 5);
         UI.initSetting('video_out_time', 3);
@@ -412,6 +413,8 @@ const UI = {
         UI.addSettingChangeHandler('dynamic_quality_max', UI.updateQuality);
         UI.addSettingChangeHandler('treat_lossless');
         UI.addSettingChangeHandler('treat_lossless', UI.updateQuality);
+        UI.addSettingChangeHandler('anti_aliasing');
+        UI.addSettingChangeHandler('anti_aliasing', UI.updateQuality);
         UI.addSettingChangeHandler('jpeg_video_quality');
         UI.addSettingChangeHandler('jpeg_video_quality', UI.updateQuality);
         UI.addSettingChangeHandler('webp_video_quality');
@@ -953,6 +956,7 @@ const UI = {
         UI.updateSetting('dynamic_quality_min', 3);
         UI.updateSetting('dynamic_quality_max', 9);
         UI.updateSetting('treat_lossless', 7);
+        UI.updateSetting('anti_aliasing', 0);
         UI.updateSetting('jpeg_video_quality', 5);
         UI.updateSetting('webp_video_quality', 5);
         UI.updateSetting('video_area', 65);
@@ -1293,6 +1297,7 @@ const UI = {
         UI.rfb.showDotCursor = UI.getSetting('show_dot');
         UI.rfb.idleDisconnect = UI.getSetting('idle_disconnect');
         UI.rfb.videoQuality = UI.getSetting('video_quality');
+        UI.rfb.antiAliasing = UI.getSetting('anti_aliasing');
         UI.rfb.clipboardUp = UI.getSetting('clipboard_up');
         UI.rfb.clipboardDown = UI.getSetting('clipboard_down');
         UI.rfb.clipboardBinary = supportsBinaryClipboard();
@@ -1714,6 +1719,7 @@ const UI = {
             // avoid sending too many, will only apply when there are changes
             setTimeout(function() {
                 UI.rfb.qualityLevel = parseInt(UI.getSetting('quality'));
+                UI.rfb.antiAliasing = parseInt(UI.getSetting('anti_aliasing'));
                 UI.rfb.dynamicQualityMin = parseInt(UI.getSetting('dynamic_quality_min'));
                 UI.rfb.dynamicQualityMax = parseInt(UI.getSetting('dynamic_quality_max'));
                 UI.rfb.jpegVideoQuality = parseInt(UI.getSetting('jpeg_video_quality'));

core/display.js

@@ -43,11 +43,6 @@ export default class Display {
         }
 
         this._targetCtx = this._target.getContext('2d');
-	//Smoothing causes high DPI displays to look blurry
-	this._targetCtx.mozImageSmoothingEnabled = false;
-        this._targetCtx.webkitImageSmoothingEnabled = false;
-        this._targetCtx.msImageSmoothingEnabled = false;
-        this._targetCtx.imageSmoothingEnabled = false;
 
         // the visible canvas viewport (i.e. what actually gets seen)
         this._viewportLoc = { 'x': 0, 'y': 0, 'w': this._target.width, 'h': this._target.height };
@@ -55,11 +50,6 @@ export default class Display {
         // The hidden canvas, where we do the actual rendering
         this._backbuffer = document.createElement('canvas');
         this._drawCtx = this._backbuffer.getContext('2d');
-        //Smoothing causes high DPI displays to look blurry
-	this._drawCtx.mozImageSmoothingEnabled = false;
-        this._drawCtx.webkitImageSmoothingEnabled = false;
-        this._drawCtx.msImageSmoothingEnabled = false;
-        this._drawCtx.imageSmoothingEnabled = false;
 
         this._damageBounds = { left: 0, top: 0,
                                right: this._backbuffer.width,
@@ -73,6 +63,7 @@ export default class Display {
 
         this._scale = 1.0;
         this._clipViewport = false;
+        this._antiAliasing = 0;
 
         // ===== EVENT HANDLERS =====
 
@@ -81,6 +72,12 @@ export default class Display {
 
     // ===== PROPERTIES =====
     
+    get antiAliasing() { return this._antiAliasing; }
+    set antiAliasing(value) {
+        this._antiAliasing = value;
+        this._rescale(this._scale);
+    }
+
     get scale() { return this._scale; }
     set scale(scale) {
         this._rescale(scale);
@@ -462,10 +459,17 @@ export default class Display {
             this._target.style.height = height;
         }
 
-        if (factor === 1 && this._target.style.imageRendering !== 'pixelated') {
+        Log.Debug('Pixel Ratio: ' + window.devicePixelRatio + ', VNC Scale: ' + factor + 'VNC Res: ' + vp.w + 'x' + vp.h);
-            this._target.style.imageRendering = 'pixelated';
+
-        } else if (factor !== 1 && this._target.style.imageRendering !== 'auto') {
+        var pixR = Math.abs(Math.ceil(window.devicePixelRatio));
-            this._target.style.imageRendering = 'auto';
+        var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
+
+        if (this.antiAliasing === 2 || (this.antiAliasing === 0 && factor === 1 && this._target.style.imageRendering !== 'pixelated' && pixR === window.devicePixelRatio && vp.w > 0)) {
+            this._target.style.imageRendering = ((!isFirefox) ? 'pixelated' : 'crisp-edges' );
+            Log.Debug('Smoothing disabled');
+        } else if (this.antiAliasing === 1 || (this.antiAliasing === 0 && factor !== 1 && this._target.style.imageRendering !== 'auto')) {
+            this._target.style.imageRendering = 'auto'; //auto is really smooth (blurry) using trilinear of linear
+            Log.Debug('Smoothing enabled');
         }
     }
 

core/rfb.js

@@ -227,7 +227,6 @@ export default class RFB extends EventTargetMixin {
         this._canvas.style.margin = 'auto';
         // Some browsers add an outline on focus
         this._canvas.style.outline = 'none';
-        this._canvas.style.imageRendering = 'pixelated';
         this._canvas.width = 0;
         this._canvas.height = 0;
         this._canvas.tabIndex = -1;
@@ -431,6 +430,11 @@ export default class RFB extends EventTargetMixin {
         }
     }
 
+    get antiAliasing() { return this._display.antiAliasing; }
+    set antiAliasing(value) {
+       this._display.antiAliasing = value;
+    }
+
     get jpegVideoQuality() { return this._jpegVideoQuality; }
     set jpegVideoQuality(qualityLevel) {
         if (!Number.isInteger(qualityLevel) || qualityLevel < 0 || qualityLevel > 9) {

vnc.html

@@ -278,6 +278,14 @@
                                 <label for="noVNC_setting_quality">Quality:</label>
                                 <input id="noVNC_setting_quality" type="range" min="0" max="9" value="6">
                             </li>
+			    <li>
+                                <label for="noVNC_setting_anti_aliasing">Smoothing:</label>
+                                <select id="noVNC_setting_anti_aliasing" name="vncAntiAliasing">
+                                    <option value=0>Auto Dynamic</option>
+                                    <option value=1>On</option>
+				    <option value=2>Off</option>
+                                </select>
+                            </li>
                             <li>
                                 <label for="noVNC_setting_dynamic_quality_min">Dynamic Quality Min:</label>
                                 <input id="noVNC_setting_dynamic_quality_min" type="range" min="0" max="9" value="3" onchange="noVNC_setting_dynamic_quality_min_output.value=value">