Bug 1563686 - Introduce menu.popupAtTarget to fix zoom issues in netmonitor menus r=nchevobbe
authorJulian Descottes <jdescottes@mozilla.com>
Sun, 07 Jul 2019 14:15:51 +0000
changeset 541227 9efab90160b46946e530e52d467bf00396c187ae
parent 541226 a75bba7b4bbb202429335a15a33a5c5eb77b42e2
child 541228 f0aa53a43409f79f50fdb92aed3ec164749c3bee
push id11533
push userarchaeopteryx@coole-files.de
push dateMon, 08 Jul 2019 18:18:03 +0000
treeherdermozilla-beta@f4452e031aed [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersnchevobbe
bugs1563686
milestone69.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1563686 - Introduce menu.popupAtTarget to fix zoom issues in netmonitor menus r=nchevobbe Already tested via toolbox menus in devtools/client/framework/test/browser_toolbox_zoom_popup.js Could open a follow up to allow for other anchor points than bottom-left. Differential Revision: https://phabricator.services.mozilla.com/D37044
devtools/client/framework/menu.js
devtools/client/shared/components/menu/utils.js
devtools/client/shared/components/tabs/TabBar.js
--- a/devtools/client/framework/menu.js
+++ b/devtools/client/framework/menu.js
@@ -48,27 +48,31 @@ Menu.prototype.append = function(menuIte
  * @param {int} pos
  * @param {MenuItem} menuItem
  */
 Menu.prototype.insert = function(pos, menuItem) {
   throw Error("Not implemented");
 };
 
 /**
- * Show the Menu with anchor element's coordinate.
- * For example, In the case of zoom in/out the devtool panel, we should multiply
- * element's position to zoom value.
- * If you know the screen coodinate of display position, you should use Menu.pop().
+ * Show the Menu next to the provided target. Anchor point is bottom-left.
  *
- * @param {int} x
- * @param {int} y
+ * @param {Element} target
+ *        The element to use as anchor.
  * @param {Document} doc
+ *        The document that should own the popup.
  */
-Menu.prototype.popupWithZoom = function(x, y, doc) {
+Menu.prototype.popupAtTarget = function(target, doc) {
   const zoom = getCurrentZoom(doc);
+
+  const rect = target.getBoundingClientRect();
+  const defaultView = target.ownerDocument.defaultView;
+  const x = rect.left + defaultView.mozInnerScreenX;
+  const y = rect.bottom + defaultView.mozInnerScreenY;
+
   this.popup(x * zoom, y * zoom, doc);
 };
 
 /**
  * Show the Menu at a specified location on the screen
  *
  * Missing features:
  *   - browserWindow - BrowserWindow (optional) - Default is null.
--- a/devtools/client/shared/components/menu/utils.js
+++ b/devtools/client/shared/components/menu/utils.js
@@ -41,27 +41,22 @@ function showMenu(items, options) {
         subMenu.append(new MenuItem(subItem));
       });
       menuItem.submenu = subMenu;
     }
 
     menu.append(menuItem);
   });
 
-  let screenX = options.screenX;
-  let screenY = options.screenY;
-
   // Calculate position on the screen according to
   // the parent button if available.
   if (options.button) {
-    const button = options.button;
-    const rect = button.getBoundingClientRect();
-    const defaultView = button.ownerDocument.defaultView;
-    screenX = rect.left + defaultView.mozInnerScreenX;
-    screenY = rect.bottom + defaultView.mozInnerScreenY;
+    menu.popupAtTarget(options.button, window.document);
+  } else {
+    const screenX = options.screenX;
+    const screenY = options.screenY;
+    menu.popup(screenX, screenY, window.document);
   }
-
-  menu.popup(screenX, screenY, window.document);
 }
 
 module.exports = {
   showMenu,
 };
--- a/devtools/client/shared/components/tabs/TabBar.js
+++ b/devtools/client/shared/components/tabs/TabBar.js
@@ -308,28 +308,17 @@ class Tabbar extends Component {
           type: "checkbox",
           checked: this.getCurrentTabId() === tab.id,
           click: () => this.select(tab.id),
         })
       );
     });
 
     // Show a drop down menu with frames.
-    // XXX Missing menu API for specifying target (anchor)
-    // and relative position to it. See also:
-    // https://developer.mozilla.org/en-US/docs/Mozilla/Tech/XUL/Method/openPopup
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1274551
-    const rect = target.getBoundingClientRect();
-    const screenX = target.ownerDocument.defaultView.mozInnerScreenX;
-    const screenY = target.ownerDocument.defaultView.mozInnerScreenY;
-    menu.popupWithZoom(
-      rect.left + screenX,
-      rect.bottom + screenY,
-      this.props.menuDocument
-    );
+    menu.popupAtTarget(target, this.props.menuDocument);
 
     return menu;
   }
 
   // Rendering
 
   renderTab(tab) {
     if (typeof tab.panel === "function") {