rescale works like a charm now, at least in Firefox. Needed to use the more standards-compliant way (window.innerWidth / innerHeight) instead of offsetWidth / offsetHeight. More work needed to center the canvas to the middle of the screen.

include/display.js

@@ -23,7 +23,7 @@ var that           = {},  // Public API methods
 
     // Predefine function variables (jslint)
     imageDataCreate, imageDataGet, rgbxImageData, cmapImageData,
-    rgbxImageFill, cmapImageFill, setFillColor, rescale, flush,
+    rgbxImageFill, cmapImageFill, setFillColor, rescale, rescaleAuto, flush,
 
     c_width        = 0,
     c_height       = 0,
@@ -223,15 +223,53 @@ rescale = function(factor) {
         factor = 0.1;
     }
 
-    /* if (conf.scale === factor) {
+    if (conf.scale === factor) {
         //Util.Debug("Display already scaled to '" + factor + "'");
+        UI.message("Display already scaled to '" + factor + "'");
         return;
-    } */
+    }
 
-    conf.scale = factor;
     x = c.width - c.width * factor;
     y = c.height - c.height * factor;
     c.style[tp] = "scale(" + conf.scale + ") translate(-" + x + "px, -" + y + "px)";
+    UI.message("scale: "+conf.scale+", x: "+x+", y: "+y);
+};
+
+rescaleAuto = function() {
+    var c, tp, x, y, xFactor, yFactor, factor,
+        properties = ['transform', 'WebkitTransform', 'MozTransform', null];
+    
+    c = conf.target;
+    tp = properties.shift();
+    while (tp) {
+        if (typeof c.style[tp] !== 'undefined') {
+            break;
+        }
+        tp = properties.shift();
+    }
+    
+    if (tp === null) {
+        Util.Debug("No scaling support");
+        return;
+    }
+    
+    xFactor=viewport.w/fb_width;
+    yFactor=viewport.h/fb_height;
+    UI.message("xFactor: "+xFactor+", yFactor: "+yFactor+", viewport.h: "+viewport.h+", fb_height: "+fb_height);
+    
+    if (xFactor > 1.0) {xFactor = 1.0;}
+    else if (xFactor < 0.1) {xFactor = 0.1;}
+    
+    if (yFactor > 1.0) {yFactor = 1.0;}
+    else if (yFactor < 0.1) {yFactor = 0.1;}
+    
+    /* Rescale screen to whichever factor that is smaller (so we get to see the whole screen). */
+    factor=xFactor<yFactor?xFactor:yFactor;
+    
+    c.style.MozTransform = "scale(" + factor + ")";
+    c.style.MozTransformOrigin = "top left";
+    
+    UI.rfb.get_mouse().set_scale(factor);
 };
 
 // Force canvas redraw (for webkit bug #46319 workaround)
@@ -278,11 +316,11 @@ that.resize = function(width, height) {
     rescale(conf.scale);
 };
 
-that.resizeAuto = function() {
-    var c=$D('vnc');
+that.resizeAuto = function(canvas) {
+    var c=canvas;
     var v = viewport,
-        cw = c.offsetWidth,
-        ch = c.offsetHeight;
+        cw=window.innerWidth,
+        ch=window.innerHeight;
     
     UI.message("container: " + cw + "," + ch);
     
@@ -301,12 +339,7 @@ that.resizeAuto = function() {
         c.width = v.w;
         c.height = v.h;
         
-        conf.scale=v.w/fb_width;
-        UI.message("fb_width: "+fb_width+", c.width: "+c.offsetWidth+", viewport width: "+v.w+", scale: "+conf.scale);
-        UI.rfb.get_display().set_scale(conf.scale);
-        UI.rfb.get_mouse().set_scale(conf.scale);
-        rescale(conf.scale);
-        //rescale(1.0);
+        rescaleAuto();
         that.refresh();
     }
     UI.message("framebuffer: "+fb_width+","+fb_height+"; viewport: "+v.w+","+v.h);
@@ -337,6 +370,7 @@ that.drawArea = function(x, y, w, h) {
 that.refresh = function() {
     if (UI.rfb) {UI.rfb.refresh();}
 
+    UI.message('screen refreshed.');
     Util.Debug('screen refreshed.');
 };
 

include/plain.css

@@ -80,10 +80,11 @@
 }
 
 /* Do not set width/height for VNC_screen or VNC_canvas or incorrect
- * scaling will occur. Canvas resizes to remote VNC settings */
+ * scaling will occur. Canvas resizes to client browser size (viewport). */
 #VNC_screen {
     text-align: center;
-    display: table;
+    /* display: table; */
+    display: block;
 }
 #VNC_canvas {
     background: #eee;

include/ui.js

@@ -14,7 +14,7 @@ var msg_cnt = 0, iterations,
             //fb_width = 800,
             //fb_height = 768,
             fb_width=1920,
-            fb_height=900,
+            fb_height=1200,
             viewport = {'x': 0, 'y': 0, 'w' : 0, 'h' : 0 },
             cleanRect = {},
             penDown = false, doMove = false,
@@ -178,10 +178,8 @@ load: function(target) {
     UI.initSetting('port', '');
     UI.initSetting('password', '');
     //TODO: Dynamically detect URI to determine encryption mode.
-    //UI.initSetting('encrypt', false);
     UI.initSetting('encrypt', false);
-    //UI.initSetting('true_color', true);
-    UI.initSetting('true_color', false);
+    UI.initSetting('true_color', true);
     UI.initSetting('cursor', false);
     UI.initSetting('shared', true);
     UI.initSetting('connectTimeout', 2);
@@ -189,9 +187,7 @@ load: function(target) {
     UI.rfb = RFB({'target': $D('VNC_canvas'),
                   'onUpdateState': UI.updateState,
                   'onClipboard': UI.clipReceive});
-    
-    UI.message('uri: '+UI.rfb.rfb_uri);
-    
+                  
     // Unfocus clipboard when over the VNC area
     $D('VNC_screen').onmousemove = function () {
             var keyboard = UI.rfb.get_keyboard();
@@ -207,7 +203,7 @@ load: function(target) {
     }
     
     ctx=UI.rfb.get_display().get_context();
-    UI.rfb.get_display().resizeAuto();
+    UI.rfb.get_display().resizeAuto(target);
 },
 
 // Read form control compatible setting from cookie
@@ -355,7 +351,7 @@ settingsApply: function() {
         UI.rfb.get_display().set_scale(UI.getSetting('scale'));
         UI.rfb.get_mouse().set_scale(UI.getSetting('scale'));
         //UI.rfb.get_display().resize();
-        UI.rfb.get_display().resizeAuto();
+        UI.rfb.get_display().resizeAuto($D('vnc'));
     }
     WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
     WebUtil.init_logging(UI.getSetting('logging'));

vnc.html

@@ -23,13 +23,13 @@
         <div id="vnc" class="flex-box">Loading...</div>
         <div>
             <br>
-            Results:<br>
+            Log:<br>
             <textarea id="messages" font="9pt" cols=80 rows=8></textarea>
         </div>
 
         <script>
             //window.onresize=function() {UI.rfb.get_display().resize(); UI.rfb.get_display().refresh();};
-            window.onresize=function() {UI.rfb.get_display().resizeAuto();};
+            window.onresize=function() {UI.rfb.get_display().resizeAuto($D('vnc'));};
             window.onload=function() {UI.load('vnc');};
         </script>
     </body>