Bug 1488991: Update remote browser position before showing context menu. r=pbro,smaug

The position of remote browser was not updated by resizing the window and
changing the align of viewport etc, although will be updated when the window
moves, the frame reflows and so on.
Thus, in this patch, update the position of remote browser before showing
context menu so as to locates at proper position.
I investigated though, when reflow and moving happens, the position is updated
by TabParent::UpdateDimensions()[1]. This patch as well is taking an approach
which update the position explicitly by TabParent::UpdateDimensions() before
showing context menu.

[1] https://searchfox.org/mozilla-central/source/dom/ipc/TabParent.cpp#729

Differential Revision: https://phabricator.services.mozilla.com/D23470

--HG--
extra : moz-landing-system : lando

devtools/client/responsive.html/components/App.js

@@ -59,6 +59,7 @@ class App extends PureComponent {
     super(props);
 
     this.onAddCustomDevice = this.onAddCustomDevice.bind(this);
+    this.onBrowserContextMenu = this.onBrowserContextMenu.bind(this);
     this.onBrowserMounted = this.onBrowserMounted.bind(this);
     this.onChangeDevice = this.onChangeDevice.bind(this);
     this.onChangeNetworkThrottling = this.onChangeNetworkThrottling.bind(this);
@@ -82,11 +83,24 @@ class App extends PureComponent {
     this.onUpdateDeviceModal = this.onUpdateDeviceModal.bind(this);
   }
 
+  componentWillUnmount() {
+    this.browser.removeEventListener("contextmenu", this.onContextMenu);
+    this.browser = null;
+  }
+
   onAddCustomDevice(device) {
     this.props.dispatch(addCustomDevice(device));
   }
 
-  onBrowserMounted() {
+  onBrowserContextMenu() {
+    // Update the position of remote browser so that makes the context menu to show at
+    // proper position before showing.
+    this.browser.frameLoader.requestUpdatePosition();
+  }
+
+  onBrowserMounted(browser) {
+    this.browser = browser;
+    this.browser.addEventListener("contextmenu", this.onBrowserContextMenu);
     window.postMessage({ type: "browser-mounted" }, "*");
   }
 

devtools/client/responsive.html/components/Browser.js

@@ -72,7 +72,7 @@ class Browser extends PureComponent {
     // Notify manager.js that this browser has mounted, so that it can trigger
     // a swap if needed and continue with the rest of its startup.
     await this.browserShown;
-    this.props.onBrowserMounted();
+    this.props.onBrowserMounted(this.browser);
 
     // If we are swapping browsers after mount, wait for the swap to complete
     // and start the frame script after that.