Bug 1186265 - Move devtools over to getBounds(). r=pbro
authorBlake Kaplan <mrbkap@gmail.com>
Mon, 04 Jun 2018 16:41:43 -0700
changeset 421818 4321a242f5f79de5ed5f37567a70bb38b0fe4ba4
parent 421817 3dc087521307d1abd85260df0851cf8c72f24a50
child 421819 c6bf8562cf6ddc938423233fe21598d679570f06
push id104125
push useraciure@mozilla.com
push dateThu, 07 Jun 2018 21:57:03 +0000
treeherdermozilla-inbound@38c222c1bf73 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1186265
milestone62.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 1186265 - Move devtools over to getBounds(). r=pbro This leaves getAdjustedQuads alone because it lives in its own world and its result gets sent over IPC. That leaves things in a bit of an intermediate state, but that should be OK for now. MozReview-Commit-ID: DH6eGqCFhPr
devtools/client/framework/test/browser_toolbox_zoom_popup.js
devtools/client/inspector/animation-old/test/browser_animation_timeline_pause_button_02.js
devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js
devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js
devtools/client/shared/autocomplete-popup.js
devtools/client/shared/test/browser_html_tooltip_arrow-01.js
devtools/client/shared/test/browser_html_tooltip_arrow-02.js
devtools/client/shared/test/browser_html_tooltip_zoom.js
devtools/client/shared/test/browser_inplace-editor_autocomplete_offset.js
devtools/client/shared/widgets/tooltip/HTMLTooltip.js
devtools/server/actors/highlighters/shapes.js
devtools/server/actors/inspector/utils.js
devtools/shared/layout/utils.js
--- a/devtools/client/framework/test/browser_toolbox_zoom_popup.js
+++ b/devtools/client/framework/test/browser_toolbox_zoom_popup.js
@@ -90,18 +90,18 @@ async function getButtonAndMenuRects(too
   const popupset = toolbox.doc.querySelector("popupset");
   let menuPopup;
   await waitUntil(() => {
     menuPopup = popupset.querySelector("menupopup[menu-api=\"true\"]");
     return !!menuPopup && menuPopup.state === "open";
   });
   ok(menuPopup, "Menu popup is displayed.");
 
-  const btnRect = menuButton.getBoxQuads({relativeTo: toolbox.doc})[0].bounds;
-  const menuRect = menuPopup.getBoxQuads({relativeTo: toolbox.doc})[0].bounds;
+  const btnRect = menuButton.getBoxQuads({relativeTo: toolbox.doc})[0].getBounds();
+  const menuRect = menuPopup.getBoxQuads({relativeTo: toolbox.doc})[0].getBounds();
 
   info("Hide popup menu.");
   const onPopupHidden = once(menuPopup, "popuphidden");
   menuPopup.hidePopup();
   await onPopupHidden;
 
   return [btnRect, menuRect];
 }
--- a/devtools/client/inspector/animation-old/test/browser_animation_timeline_pause_button_02.js
+++ b/devtools/client/inspector/animation-old/test/browser_animation_timeline_pause_button_02.js
@@ -39,17 +39,17 @@ add_task(async function() {
   ok(btn.classList.contains("paused"),
      "The button can be paused after the scrubber has moved out of bounds");
   await assertScrubberMoving(panel, false);
 });
 
 function waitForOutOfBoundScrubber({win, scrubberEl}) {
   return new Promise(resolve => {
     function check() {
-      const pos = scrubberEl.getBoxQuads()[0].bounds.right;
+      const pos = scrubberEl.getBoxQuads()[0].getBounds().right;
       const width = win.document.documentElement.offsetWidth;
       if (pos >= width) {
         setTimeout(resolve, 50);
       } else {
         setTimeout(check, 50);
       }
     }
     check();
--- a/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js
+++ b/devtools/client/inspector/boxmodel/test/browser_boxmodel_editablemodel_bluronclick.js
@@ -57,17 +57,17 @@ async function testClickingBelowContaine
   EventUtils.synthesizeMouseAtCenter(span, {}, boxmodel.document.defaultView);
   const editor = boxmodel.document.querySelector(".styleinspector-propertyeditor");
   ok(editor, "Should have opened the editor.");
 
   const onBlur = once(editor, "blur");
   const container = boxmodel.document.querySelector(".boxmodel-container");
   // Using getBoxQuads here because getBoundingClientRect (and therefore synthesizeMouse)
   // use an erroneous height of ~50px for the boxmodel-container.
-  const bounds = container.getBoxQuads({relativeTo: boxmodel.document})[0].bounds;
+  const bounds = container.getBoxQuads({relativeTo: boxmodel.document})[0].getBounds();
   EventUtils.synthesizeMouseAtPoint(
     bounds.left + 10,
     bounds.top + bounds.height + 10,
     {}, boxmodel.document.defaultView);
   await onBlur;
 
   is(boxmodel.document.querySelector(".styleinspector-propertyeditor"), null,
     "Inplace editor has been removed.");
--- a/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js
+++ b/devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js
@@ -35,24 +35,24 @@ add_task(async function() {
   await selectNode("h1", inspector);
 
   info("Focusing the property editable field");
   const rule = getRuleViewRuleEditor(view, 1).rule;
   const prop = rule.textProps[0];
 
   // Calculate offsets to click in the middle of the first box quad.
   const rect = prop.editor.valueSpan.getBoundingClientRect();
-  const firstQuad = prop.editor.valueSpan.getBoxQuads()[0];
+  const firstQuadBounds = prop.editor.valueSpan.getBoxQuads()[0].getBounds();
   // For a multiline value, the first quad left edge is not aligned with the
   // bounding rect left edge. The offsets expected by focusEditableField are
   // relative to the bouding rectangle, so we need to translate the x-offset.
-  const x = firstQuad.bounds.left - rect.left + firstQuad.bounds.width / 2;
+  const x = firstQuadBounds.left - rect.left + firstQuadBounds.width / 2;
   // The first quad top edge is aligned with the bounding top edge, no
   // translation needed here.
-  const y = firstQuad.bounds.height / 2;
+  const y = firstQuadBounds.height / 2;
 
   info("Focusing the css property editable value");
   const editor = await focusEditableField(view, prop.editor.valueSpan, x, y);
 
   info("Moving the caret next to a number");
   let pos = editor.input.value.indexOf("0deg") + 1;
   editor.input.setSelectionRange(pos, pos);
   is(editor.input.value[editor.input.selectionStart - 1], "0",
--- a/devtools/client/shared/autocomplete-popup.js
+++ b/devtools/client/shared/autocomplete-popup.js
@@ -291,17 +291,17 @@ AutocompletePopup.prototype = {
   },
 
   _scrollElementIntoViewIfNeeded: function(element) {
     const quads = element.getBoxQuads({relativeTo: this._tooltip.panel});
     if (!quads || !quads[0]) {
       return;
     }
 
-    const {top, height} = quads[0].bounds;
+    const {top, height} = quads[0].getBounds();
     const containerHeight = this._tooltip.panel.getBoundingClientRect().height;
     if (top < 0) {
       // Element is above container.
       element.scrollIntoView(true);
     } else if ((top + height) > containerHeight) {
       // Element is beloew container.
       element.scrollIntoView(false);
     }
--- a/devtools/client/shared/test/browser_html_tooltip_arrow-01.js
+++ b/devtools/client/shared/test/browser_html_tooltip_arrow-01.js
@@ -46,19 +46,19 @@ async function runTests(doc) {
   for (const el of elements) {
     info("Display the tooltip on an anchor.");
     await showTooltip(tooltip, el);
 
     const arrow = tooltip.arrow;
     ok(arrow, "Tooltip has an arrow");
 
     // Get the geometry of the anchor, the tooltip panel & arrow.
-    const arrowBounds = arrow.getBoxQuads({relativeTo: doc})[0].bounds;
-    const panelBounds = tooltip.panel.getBoxQuads({relativeTo: doc})[0].bounds;
-    const anchorBounds = el.getBoxQuads({relativeTo: doc})[0].bounds;
+    const arrowBounds = arrow.getBoxQuads({relativeTo: doc})[0].getBounds();
+    const panelBounds = tooltip.panel.getBoxQuads({relativeTo: doc})[0].getBounds();
+    const anchorBounds = el.getBoxQuads({relativeTo: doc})[0].getBounds();
 
     const intersects = arrowBounds.left <= anchorBounds.right &&
                      arrowBounds.right >= anchorBounds.left;
     const isBlockedByViewport = arrowBounds.left == 0 ||
                               arrowBounds.right == docRight;
     ok(intersects || isBlockedByViewport,
       "Tooltip arrow is aligned with the anchor, or stuck on viewport's edge.");
 
--- a/devtools/client/shared/test/browser_html_tooltip_arrow-02.js
+++ b/devtools/client/shared/test/browser_html_tooltip_arrow-02.js
@@ -45,19 +45,19 @@ async function runTests(doc) {
   for (const el of elements) {
     info("Display the tooltip on an anchor.");
     await showTooltip(tooltip, el);
 
     const arrow = tooltip.arrow;
     ok(arrow, "Tooltip has an arrow");
 
     // Get the geometry of the anchor, the tooltip panel & arrow.
-    const arrowBounds = arrow.getBoxQuads({relativeTo: doc})[0].bounds;
-    const panelBounds = tooltip.panel.getBoxQuads({relativeTo: doc})[0].bounds;
-    const anchorBounds = el.getBoxQuads({relativeTo: doc})[0].bounds;
+    const arrowBounds = arrow.getBoxQuads({relativeTo: doc})[0].getBounds();
+    const panelBounds = tooltip.panel.getBoxQuads({relativeTo: doc})[0].getBounds();
+    const anchorBounds = el.getBoxQuads({relativeTo: doc})[0].getBounds();
 
     const intersects = arrowBounds.left <= anchorBounds.right &&
                      arrowBounds.right >= anchorBounds.left;
     const isBlockedByViewport = arrowBounds.left == 0 ||
                               arrowBounds.right == docRight;
     ok(intersects || isBlockedByViewport,
       "Tooltip arrow is aligned with the anchor, or stuck on viewport's edge.");
 
--- a/devtools/client/shared/test/browser_html_tooltip_zoom.js
+++ b/devtools/client/shared/test/browser_html_tooltip_zoom.js
@@ -37,19 +37,22 @@ add_task(async function() {
 
   is(tooltip.isVisible(), false, "Tooltip is not visible");
 
   info("Show the tooltip and check the expected events are fired.");
   const onShown = tooltip.once("shown");
   tooltip.show(doc.getElementById("box1"));
   await onShown;
 
-  const menuRect =
-      doc.querySelector(".tooltip-xul-wrapper").getBoxQuads({relativeTo: doc})[0].bounds;
-  const anchorRect = doc.getElementById("box1").getBoxQuads({relativeTo: doc})[0].bounds;
+  const menuRect = doc.querySelector(".tooltip-xul-wrapper")
+                      .getBoxQuads({relativeTo: doc})[0]
+                      .getBounds();
+  const anchorRect = doc.getElementById("box1")
+                        .getBoxQuads({relativeTo: doc})[0]
+                        .getBounds();
   const xDelta = Math.abs(menuRect.left - anchorRect.left);
   const yDelta = Math.abs(menuRect.top - anchorRect.bottom);
 
   // This test allow the rounded error and platform's offset.
   // For detail, see the devtools/client/framework/test/browser_toolbox_zoom_popup.js
   ok(xDelta < 2, "xDelta is lower than 2: " + xDelta + ".");
   ok(yDelta < 6, "yDelta is lower than 6: " + yDelta + ".");
 
--- a/devtools/client/shared/test/browser_inplace-editor_autocomplete_offset.js
+++ b/devtools/client/shared/test/browser_inplace-editor_autocomplete_offset.js
@@ -104,10 +104,10 @@ const runAutocompletionTest = async func
   EventUtils.synthesizeKey("VK_RETURN", {}, editor.input.defaultView);
 };
 
 /**
  * Get the autocomplete panel left offset, relative to the provided input's left offset.
  */
 function getPopupOffset({popup, input}) {
   const popupQuads = popup._panel.getBoxQuads({relativeTo: input});
-  return popupQuads[0].bounds.left;
+  return popupQuads[0].getBounds().left;
 }
--- a/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
+++ b/devtools/client/shared/widgets/tooltip/HTMLTooltip.js
@@ -181,19 +181,19 @@ const getRelativeRect = function(node, r
     const right = left + width;
     const bottom = top + height;
     return {top, right, bottom, left, width, height};
   }
 
   // Width and Height can be taken from the rect.
   const {width, height} = node.getBoundingClientRect();
 
-  const quads = node.getBoxQuads({relativeTo});
-  const top = quads[0].bounds.top;
-  const left = quads[0].bounds.left;
+  const quadBounds = node.getBoxQuads({relativeTo})[0].getBounds();
+  const top = quadBounds.top;
+  const left = quadBounds.left;
 
   // Compute right and bottom coordinates using the rest of the data.
   const right = left + width;
   const bottom = top + height;
 
   return {top, right, bottom, left, width, height};
 };
 
--- a/devtools/server/actors/highlighters/shapes.js
+++ b/devtools/server/actors/highlighters/shapes.js
@@ -451,17 +451,19 @@ class ShapesHighlighter extends AutoRefr
 
     // If the node exists within an iframe, get offsets for the virtual viewport so that
     // points can be dragged to the extent of the global window, outside of the iframe
     // window.
     if (this.currentNode.ownerGlobal !== this.win) {
       const win =  this.win;
       const nodeWin = this.currentNode.ownerGlobal;
       // Get bounding box of iframe document relative to global document.
-      const { bounds } = nodeWin.document.getBoxQuads({ relativeTo: win.document })[0];
+      const bounds = nodeWin.document
+                            .getBoxQuads({ relativeTo: win.document })[0]
+                            .getBounds();
       xOffset = bounds.left - nodeWin.scrollX + win.scrollX;
       yOffset = bounds.top - nodeWin.scrollY + win.scrollY;
     }
 
     const { pageXOffset, pageYOffset } = this.win;
     const { clientHeight, clientWidth } = this.win.document.documentElement;
     const left = pageXOffset + padding - xOffset;
     const right = clientWidth + pageXOffset - padding - xOffset;
--- a/devtools/server/actors/inspector/utils.js
+++ b/devtools/server/actors/inspector/utils.js
@@ -115,17 +115,20 @@ function isWhitespaceTextNode(node) {
  * @return {Boolean}
  */
 function nodeHasSize(node) {
   if (!node.getBoxQuads) {
     return false;
   }
 
   const quads = node.getBoxQuads();
-  return quads.length && quads.some(quad => quad.bounds.width && quad.bounds.height);
+  return quads.some(quad => {
+    const bounds = quad.getBounds();
+    return bounds.width && bounds.height;
+  });
 }
 
 /**
  * Returns a promise that is settled once the given HTMLImageElement has
  * finished loading.
  *
  * @param {HTMLImageElement} image - The image element.
  * @param {Number} timeout - Maximum amount of time the image is allowed to load
--- a/devtools/shared/layout/utils.js
+++ b/devtools/shared/layout/utils.js
@@ -177,16 +177,21 @@ function getFrameOffsets(boundaryWindow,
 
   return [xOffset * scale, yOffset * scale];
 }
 exports.getFrameOffsets = getFrameOffsets;
 
 /**
  * Get box quads adjusted for iframes and zoom level.
  *
+ * Warning: this function returns things that look like DOMQuad objects but
+ * aren't (they resemble an old version of the spec). Unlike the return value
+ * of node.getBoxQuads, they have a .bounds property and not a .getBounds()
+ * method.
+ *
  * @param {DOMWindow} boundaryWindow
  *        The window where to stop to iterate. If `null` is given, the top
  *        window is used.
  * @param {DOMNode} node
  *        The node for which we are to get the box model region
  *        quads.
  * @param {String} region
  *        The box model region to return: "content", "padding", "border" or
@@ -212,16 +217,17 @@ function getAdjustedQuads(boundaryWindow
   const scale = getCurrentZoom(node);
   const { scrollX, scrollY } = boundaryWindow;
 
   const xOffset = scrollX * scale;
   const yOffset = scrollY * scale;
 
   const adjustedQuads = [];
   for (const quad of quads) {
+    const bounds = quad.getBounds();
     adjustedQuads.push({
       p1: {
         w: quad.p1.w * scale,
         x: quad.p1.x * scale + xOffset,
         y: quad.p1.y * scale + yOffset,
         z: quad.p1.z * scale
       },
       p2: {
@@ -238,24 +244,24 @@ function getAdjustedQuads(boundaryWindow
       },
       p4: {
         w: quad.p4.w * scale,
         x: quad.p4.x * scale + xOffset,
         y: quad.p4.y * scale + yOffset,
         z: quad.p4.z * scale
       },
       bounds: {
-        bottom: quad.bounds.bottom * scale + yOffset,
-        height: quad.bounds.height * scale,
-        left: quad.bounds.left * scale + xOffset,
-        right: quad.bounds.right * scale + xOffset,
-        top: quad.bounds.top * scale + yOffset,
-        width: quad.bounds.width * scale,
-        x: quad.bounds.x * scale + xOffset,
-        y: quad.bounds.y * scale + yOffset
+        bottom: bounds.bottom * scale + yOffset,
+        height: bounds.height * scale,
+        left: bounds.left * scale + xOffset,
+        right: bounds.right * scale + xOffset,
+        top: bounds.top * scale + yOffset,
+        width: bounds.width * scale,
+        x: bounds.x * scale + xOffset,
+        y: bounds.y * scale + yOffset
       }
     });
   }
 
   return adjustedQuads;
 }
 exports.getAdjustedQuads = getAdjustedQuads;