pcmanfx_retina_support.diff

diff --git a/chrome/content/pcman.xul b/chrome/content/pcman.xul
index 3ff4c9b..a6a5d18 100755
--- a/chrome/content/pcman.xul
+++ b/chrome/content/pcman.xul
@@ -50,11 +50,10 @@
     }
 
     function resize(){
-        var win=document.getElementById('topwin');
-        var canvas=document.getElementById("canvas");
+        var win = document.getElementById('topwin');
+        var canvas = document.getElementById("canvas");
         //canvas.width=win.clientWidth;
         //canvas.height=win.clientHeight - document.getElementById("box3").clientHeight;
-        canvas.height=win.clientHeight;
         pcman.view.onResize();
         // rc=document.getElementById('topwin').getBoundingClientRect();
     }
diff --git a/chrome/content/termview.js b/chrome/content/termview.js
index 2f27cac..f9d77c4 100755
--- a/chrome/content/termview.js
+++ b/chrome/content/termview.js
@@ -238,11 +238,11 @@ TermView.prototype={
     onkeyPress: function(e) {
         // dump('onKeyPress:'+e.charCode + ', '+e.keyCode+'\n');
         var conn = this.conn;
-        
+
         // give keypress control back to Firefox
         if ( !conn.ins )
           return;
-          
+
         if(e.charCode){
             // Control characters
             if(e.ctrlKey && !e.altKey && !e.shiftKey) {
@@ -313,40 +313,63 @@ TermView.prototype={
     },
 
     onResize: function() {
+        var win = document.getElementById('topwin');
         var ctx = this.ctx;
-        this.chh = Math.floor(this.canvas.height / 24);
+        this.chh = Math.floor(win.clientHeight / 24);
         var font = this.chh + 'px monospace';
-        ctx.font= font;
-        ctx.textBaseline='top';
-
-        var m=ctx.measureText('　'); //全形空白
-        this.chw=Math.round(m.width/2);
+        ctx.font = font;
+        ctx.textBaseline = 'top';
+
+        var m = ctx.measureText('　'); //全形空白
+        this.chw = Math.round(m.width/2);
+
+        // Handle about device pixel ratio
+        // ref: http://www.html5rocks.com/en/tutorials/canvas/hidpi/
+        devicePixelRatio = window.devicePixelRatio || 1,
+        backingStoreRatio = ctx.webkitBackingStorePixelRatio ||
+                            ctx.mozBackingStorePixelRatio ||
+                            ctx.msBackingStorePixelRatio ||
+                            ctx.oBackingStorePixelRatio ||
+                            ctx.backingStorePixelRatio || 1,
+        ratio = devicePixelRatio / backingStoreRatio;
 
         // if overflow, resize canvas again
-        var win = document.getElementById('topwin');
         var overflowX = (this.chw * 80) - win.clientWidth;
         if(overflowX > 0) {
-          this.canvas.width = win.clientWidth;
-          this.chw = Math.floor(this.canvas.width / 80);
-          this.chh = this.chw*2;  // is it necessary to measureText?
+          this.canvas.width = win.clientWidth * ratio;
+          this.canvas.style.width = win.clientWidth + 'px';
+          this.chw = Math.floor(win.clientWidth / 80);
+          this.chh = this.chw * 2;  // is it necessary to measureText?
           font = this.chh + 'px monospace';
           ctx.font= font;
-          this.canvas.height = this.chh * 24;
+          this.canvas.height = this.chh * 24 * ratio;
+          this.canvas.style.height = this.chh * 24 + 'px';
         }
 
         if(this.buf) {
-            this.canvas.width = this.chw * this.buf.cols;
+            canvas_width = this.chw * this.buf.cols;
+            this.canvas.width = canvas_width * ratio;
+            this.canvas.style.width = canvas_width + 'px';
+            this.canvas.height = win.clientHeight * ratio;
+            this.canvas.style.height = win.clientHeight + 'px';
             // font needs to be reset after resizing canvas
-            ctx.font= font;
-            ctx.textBaseline='top';
+            ctx.font = font;
+            ctx.textBaseline = 'top';
+            ctx.scale(ratio, ratio);    // for HiDPI display
+            this.canvas.style.left = ((win.clientWidth - canvas_width) / 2) + 'px';
             this.redraw(true);
         }
         else {
+            canvas_width = this.chw * 80;
             // dump(this.chw + ', ' + this.chw * 80 + '\n');
-            this.canvas.width = this.chw * 80;
+            this.canvas.width = canvas_width * ratio;
+            this.canvas.style.width = canvas_width + 'px';
+            this.canvas.height = win.clientHeight * ratio;
+            this.canvas.style.height = win.clientHeight + 'px';
             // font needs to be reset after resizing canvas
-            ctx.font= font;
-            ctx.textBaseline='top';
+            ctx.font = font;
+            ctx.textBaseline = 'top';
+            this.canvas.style.left = ((win.clientWidth - canvas_width) / 2) + 'px';
         }
 
         var visible=this.cursorVisible;
diff --git a/chrome/skin/classic/pcman.css b/chrome/skin/classic/pcman.css
index eb98ae5..f45fc57 100644
--- a/chrome/skin/classic/pcman.css
+++ b/chrome/skin/classic/pcman.css
@@ -2,8 +2,36 @@
   -moz-appearance: none;
   background-color:#000;
 }
-#canvas {background-color:#000;}
-#box3 {position:fixed; top:-100px; background:#fff;}
-#input_proxy {-moz-appearance:none; position:fixed; border:none; opacity:.9; background-color:-moz-field; color:-moz-fieldtext; padding:0; margin:0;}
 
-#selection {position:fixed; display:none; opacity:.6; padding:0; margin:0; background-color:Highlight; color:HighlightText;}
+#canvas {
+  background-color:#000;
+  position: fixed;
+  top: 0;
+}
+
+#box3 {
+  position:fixed;
+  top:-100px;
+  background:#fff;
+}
+
+#input_proxy {
+  -moz-appearance:none;
+  position:fixed;
+  border:none;
+  opacity:.9;
+  background-color: -moz-field;
+  color: -moz-fieldtext;
+  padding:0;
+  margin:0;
+}
+
+#selection {
+  position:fixed;
+  display:none;
+  opacity:.6;
+  padding:0;
+  margin:0;
+  background-color: Highlight;
+  color:HighlightText;
+}