Bug 1107759 - Fix window resizing and replace dpi support with pixel ratio. r=fabrice

b2g/chrome/content/desktop.js

@@ -125,6 +125,9 @@ function initResponsiveDesign() {
       return;
     }
 
+    // Disable transition as they mess up with screen size handler
+    responsive.transitionsEnabled = false;
+
     responsive.buildPhoneUI();
 
     responsive.rotatebutton.addEventListener('command', function (evt) {

b2g/chrome/content/screen.js

@@ -7,6 +7,7 @@
 
 let browserWindow = Services.wm.getMostRecentWindow("navigator:browser");
 let isMulet = "ResponsiveUI" in browserWindow;
+Cu.import("resource://gre/modules/GlobalSimulatorScreen.jsm");
 
 // We do this on ContentStart because querying the displayDPI fails otherwise.
 window.addEventListener('ContentStart', function() {
@@ -98,26 +99,18 @@ window.addEventListener('ContentStart', function() {
     return;
   } 
 
-  let rescale = false;
+  let width, height, ratio = 1.0;
-
-  // If the value of --screen ends with !, we'll be scaling the output
-  if (screenarg[screenarg.length - 1] === '!') {
-    rescale = true;
-    screenarg = screenarg.substring(0, screenarg.length-1);
-  }
-
-  let width, height, dpi;
 
   if (screenarg in screens) {
     // If this is a named screen, get its data
     let screen = screens[screenarg];
     width = screen.width;
     height = screen.height;
-    dpi = screen.dpi;
+    ratio = screen.ratio;
   } else {
     // Otherwise, parse the resolution and density from the --screen value.
     // The supported syntax is WIDTHxHEIGHT[@DPI]
-    let match = screenarg.match(/^(\d+)x(\d+)(@(\d+))?$/);
+    let match = screenarg.match(/^(\d+)x(\d+)(@(\d+(\.\d+)?))?$/);
     
     // Display usage information on syntax errors
     if (match == null)
@@ -127,17 +120,15 @@ window.addEventListener('ContentStart', function() {
     width = parseInt(match[1], 10);
     height = parseInt(match[2], 10);
     if (match[4])
-      dpi = parseInt(match[4], 10);
+      ratio = parseFloat(match[4], 10);
-    else    // If no DPI, use the actual dpi of the host screen
-      dpi = hostDPI;
 
     // If any of the values came out 0 or NaN or undefined, display usage
-    if (!width || !height || !dpi)
+    if (!width || !height || !ratio) {
       usage();
+    }
   }
 
-  Cu.import("resource://gre/modules/GlobalSimulatorScreen.jsm");
+  function resize(width, height, ratio, shouldFlip) {
-  function resize(width, height, dpi, shouldFlip) {
     GlobalSimulatorScreen.width = width;
     GlobalSimulatorScreen.height = height;
 
@@ -145,7 +136,7 @@ window.addEventListener('ContentStart', function() {
     // width and height, and then use a CSS transform to scale it so that
     // it appears at the correct size on the host display.  We also set
     // the size of the <window> element to that scaled target size.
-    let scale = rescale ? hostDPI / dpi : 1;
+    let scale = 1.0;
 
     // Set the window width and height to desired size plus chrome
     // Include the size of the toolbox displayed under the system app
@@ -158,7 +149,7 @@ window.addEventListener('ContentStart', function() {
     let chromeheight = window.outerHeight - window.innerHeight + controlsHeight;
     if (isMulet) {
       let responsive = browserWindow.gBrowser.selectedTab.__responsiveUI;
-      responsive.setSize((Math.round(width * scale) + 14*2),
+      responsive.setSize((Math.round(width * scale) + 16*2),
                         (Math.round(height * scale) + controlsHeight + 61));
     } else {
       window.resizeTo(Math.round(width * scale) + chromewidth,
@@ -173,20 +164,9 @@ window.addEventListener('ContentStart', function() {
 
     // Set the browser element to the full unscaled size of the screen
     let style = browser.style;
-    style.width = style.minWidth = style.maxWidth =
-      frameWidth + 'px';
-    style.height = style.minHeight = style.maxHeight =
-      frameHeight + 'px';
-    browser.setAttribute('flex', '0');  // Don't let it stretch
-
-    style.transformOrigin = '';
     style.transform = '';
-
+    style.height = 'calc(100% - ' + controlsHeight + 'px)';
-    // Now scale the browser element as needed
+    style.bottom = controlsHeight;
-    if (scale !== 1) {
-      style.transformOrigin = 'top left';
-      style.transform += ' scale(' + scale + ',' + scale + ')';
-    }
 
     if (shouldFlip) {
       // Display the system app with a 90° clockwise rotation
@@ -195,16 +175,26 @@ window.addEventListener('ContentStart', function() {
         ' rotate(0.25turn) translate(-' + shift + 'px, -' + shift + 'px)';
     }
 
-    // Set the pixel density that we want to simulate.
+    Services.prefs.setCharPref('layout.css.devPixelsPerPx', ratio);
-    // This doesn't change the on-screen size, but makes
-    // CSS media queries and mozmm units work right.
-    Services.prefs.setIntPref('layout.css.dpi', dpi);
   }
 
   // Resize on startup
-  resize(width, height, dpi, false);
+  resize(width, height, ratio, false);
 
   let defaultOrientation = width < height ? 'portrait' : 'landscape';
+  GlobalSimulatorScreen.mozOrientation = GlobalSimulatorScreen.screenOrientation = defaultOrientation;
+
+  // Catch manual resizes to update the internal device size.
+  window.onresize = function() {
+    width = browser.clientWidth;
+    height = browser.clientHeight;
+    if ((defaultOrientation == 'portrait' && width > height) ||
+        (defaultOrientation == 'landscape' && width < height)) {
+      let w = width;
+      width = height;
+      height = w;
+    }
+  };
 
   // Then resize on each rotation button click,
   // or when the system app lock/unlock the orientation
@@ -226,7 +216,7 @@ window.addEventListener('ContentStart', function() {
     // it is displayed rotated on the side
     let shouldFlip = mozOrientation != screenOrientation;
 
-    resize(newWidth, newHeight, dpi, shouldFlip);
+    resize(newWidth, newHeight, ratio, shouldFlip);
   }, 'simulator-adjust-window-size', false);
 
   // A utility function like console.log() for printing to the terminal window
@@ -256,12 +246,6 @@ window.addEventListener('ContentStart', function() {
       '\nYou can also specify certain device names:\n';
     for(let p in screens)
       msg += '\t--screen=' + p + '\t// ' + screens[p].name + '\n';
-    msg += 
-      '\nAdd a ! to the end of a screen specification to rescale the\n' +
-      'screen so that it is shown at actual size on your monitor:\n' +
-      '\t--screen=nexus_s!\n' +
-      '\t--screen=320x480@200!\n'
-    ;
 
     // Display the usage message
     print(msg);

b2g/chrome/content/shell.js

@@ -290,7 +290,7 @@ var shell = {
     systemAppFrame.setAttribute('mozbrowser', 'true');
     systemAppFrame.setAttribute('mozapp', manifestURL);
     systemAppFrame.setAttribute('allowfullscreen', 'true');
-    systemAppFrame.setAttribute('style', "overflow: hidden; height: 100%; width: 100%; border: none;");
+    systemAppFrame.setAttribute('style', "overflow: hidden; height: 100%; width: 100%; border: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0;");
     systemAppFrame.setAttribute('src', "data:text/html;charset=utf-8,%3C!DOCTYPE html>%3Cbody style='background:black;");
     let container = document.getElementById('container');
 #ifdef MOZ_WIDGET_COCOA