Bug 902505 - Set a no-op CSS viewport on Metro to prevent clipping subframes improperly. r=jimm

browser/metro/base/content/ContentAreaObserver.js

@@ -132,7 +132,7 @@ var ContentAreaObserver = {
     this._updateViewState();
 
     this.updateContentArea(newWidth, this._getContentHeightForWindow(newHeight));
-    this._disatchBrowserEvent("SizeChanged");
+    this._dispatchBrowserEvent("SizeChanged");
   },
 
   updateContentArea: function cao_updateContentArea (width, height) {
@@ -162,7 +162,7 @@ var ContentAreaObserver = {
     this.styles["content-width"].maxWidth = newWidth + "px";
 
     this.updateViewableArea(newWidth, this._getViewableHeightForContent(newHeight));
-    this._disatchBrowserEvent("ContentSizeChanged");
+    this._dispatchBrowserEvent("ContentSizeChanged");
   },
 
   updateViewableArea: function cao_updateViewableArea (width, height) {
@@ -186,7 +186,7 @@ var ContentAreaObserver = {
     // these are hidden.
     BrowserUI._updateButtons();
 
-    this._disatchBrowserEvent("ViewableSizeChanged");
+    this._dispatchBrowserEvent("ViewableSizeChanged");
   },
 
   updateAppBarPosition: function updateAppBarPosition(aForceDown) {
@@ -332,7 +332,7 @@ var ContentAreaObserver = {
     window.dispatchEvent(event);
   },
 
-  _disatchBrowserEvent: function (aName, aDetail) {
+  _dispatchBrowserEvent: function (aName, aDetail) {
     setTimeout(function() {
       let event = document.createEvent("Events");
       event.initEvent(aName, true, false);

browser/metro/base/content/bindings/browser.js

@@ -583,6 +583,7 @@ let ContentScroll =  {
       case "Content:SetWindowSize": {
         let cwu = content.QueryInterface(Ci.nsIInterfaceRequestor).getInterface(Ci.nsIDOMWindowUtils);
         cwu.setCSSViewport(json.width, json.height);
+        sendAsyncMessage("Content:SetWindowSize:Complete", {});
         break;
       }
     }

browser/metro/base/content/browser.js

@@ -1312,6 +1312,9 @@ Tab.prototype = {
       self._eventDeferred = null;
     }
     browser.addEventListener("pageshow", onPageShowEvent, true);
+    browser.addEventListener("DOMWindowCreated", this, false);
+    Elements.browsers.addEventListener("SizeChanged", this, false);
+
     browser.messageManager.addMessageListener("Content:StateChange", this);
     Services.obs.addObserver(this, "metro_viewstate_changed", false);
 
@@ -1320,6 +1323,20 @@ Tab.prototype = {
     this._loadUsingParams(browser, aURI, aParams);
   },
 
+  updateViewport: function (aEvent) {
+    // <meta name=viewport> is not yet supported; just use the browser size.
+    this.browser.setWindowSize(this.browser.clientWidth, this.browser.clientHeight);
+  },
+
+  handleEvent: function (aEvent) {
+    switch (aEvent.type) {
+      case "DOMWindowCreated":
+      case "SizeChanged":
+        this.updateViewport();
+        break;
+    }
+  },
+
   receiveMessage: function(aMessage) {
     switch (aMessage.name) {
       case "Content:StateChange":
@@ -1348,6 +1365,8 @@ Tab.prototype = {
 
   destroy: function destroy() {
     this._browser.messageManager.removeMessageListener("Content:StateChange", this);
+    this._browser.removeEventListener("DOMWindowCreated", this, false);
+    Elements.browsers.removeEventListener("SizeChanged", this, false);
     Services.obs.removeObserver(this, "metro_viewstate_changed", false);
     clearTimeout(this._updateThumbnailTimeout);
 

browser/metro/base/tests/mochitest/head.js

@@ -350,6 +350,22 @@ function waitForEvent(aSubject, aEventName, aTimeoutMs, aTarget) {
   return eventDeferred.promise.then(cleanup, cleanup);
 }
 
+/**
+ * Wait for an nsIMessageManager IPC message.
+ */
+function waitForMessage(aName, aMessageManager) {
+  let deferred = Promise.defer();
+  let manager = aMessageManager || messageManager;
+  function listener(aMessage) {
+    deferred.resolve(aMessage);
+  }
+  manager.addMessageListener(aName, listener);
+  function cleanup(aEventOrError) {
+    manager.removeMessageListener(aName, listener);
+  }
+  return deferred.promise.then(cleanup, cleanup);
+}
+
 /**
  * Waits a specified number of miliseconds.
  *

browser/metro/base/tests/mochitest/helpers/ViewStateHelper.js

@@ -22,6 +22,8 @@ function setSnappedViewstate() {
 
   // Communicate viewstate change
   ContentAreaObserver._updateViewState("snapped");
+  ContentAreaObserver._dispatchBrowserEvent("SizeChanged");
+  yield waitForMessage("Content:SetWindowSize:Complete", browser.messageManager);
 
   // Make sure it renders the new mode properly
   yield waitForMs(0);
@@ -43,6 +45,7 @@ function setPortraitViewstate() {
     browser.style.borderBottom = (fullHeight - maxPortraitHeight) + "px solid gray";
 
   ContentAreaObserver._updateViewState("portrait");
+  ContentAreaObserver._dispatchBrowserEvent("SizeChanged");
 
   // Make sure it renders the new mode properly
   yield waitForMs(0);
@@ -50,6 +53,8 @@ function setPortraitViewstate() {
 
 function restoreViewstate() {
   ContentAreaObserver._updateViewState("landscape");
+  ContentAreaObserver._dispatchBrowserEvent("SizeChanged");
+
   ok(isLandscapeMode(), "restoreViewstate should restore landscape mode.");
 
   Browser.selectedBrowser.style.removeProperty("border-right");