Issue #2241 - Part 4.3: Move devtools over to getBounds().

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.

Backported from Mozilla bug 1186265.

devtools/client/inspector/rules/test/browser_rules_completion-new-property_multiline.js

@@ -39,14 +39,14 @@ add_task(function* () {
 
   // Calculate offsets to click in the middle of the first box quad.
   let rect = prop.editor.valueSpan.getBoundingClientRect();
-  let firstQuad = prop.editor.valueSpan.getBoxQuads()[0];
+  let 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.
-  let x = firstQuad.bounds.left - rect.left + firstQuad.bounds.width / 2;
+  let x = firstQuadBounds.left - rect.left + firstQuadBounds.width / 2;
   // The first quad top edge is aligned with the bounding top edge, no
   // translation needed here.
-  let y = firstQuad.bounds.height / 2;
+  let y = firstQuadBounds.height / 2;
 
   info("Focusing the css property editable value");
   let editor = yield focusEditableField(view, prop.editor.valueSpan, x, y);

devtools/client/shared/autocomplete-popup.js

@@ -283,7 +283,7 @@ AutocompletePopup.prototype = {
       return;
     }
 
-    let {top, height} = quads[0].bounds;
+    let {top, height} = quads[0].getBounds();
     let containerHeight = this._tooltip.panel.getBoundingClientRect().height;
     if (top < 0) {
       // Element is above container.

devtools/client/shared/test/browser_html_tooltip_arrow-01.js

@@ -85,9 +85,9 @@ function* runTests(doc) {
     ok(arrow, "Tooltip has an arrow");
 
     // Get the geometry of the anchor, the tooltip panel & arrow.
-    let arrowBounds = arrow.getBoxQuads({relativeTo: doc})[0].bounds;
-    let panelBounds = tooltip.panel.getBoxQuads({relativeTo: doc})[0].bounds;
-    let anchorBounds = el.getBoxQuads({relativeTo: doc})[0].bounds;
+    let arrowBounds = arrow.getBoxQuads({relativeTo: doc})[0].getBounds();
+    let panelBounds = tooltip.panel.getBoxQuads({relativeTo: doc})[0].getBounds();
+    let anchorBounds = el.getBoxQuads({relativeTo: doc})[0].getBounds();
 
     let intersects = arrowBounds.left <= anchorBounds.right &&
                      arrowBounds.right >= anchorBounds.left;

devtools/client/shared/test/browser_html_tooltip_arrow-02.js

@@ -78,9 +78,9 @@ function* runTests(doc) {
     ok(arrow, "Tooltip has an arrow");
 
     // Get the geometry of the anchor, the tooltip panel & arrow.
-    let arrowBounds = arrow.getBoxQuads({relativeTo: doc})[0].bounds;
-    let panelBounds = tooltip.panel.getBoxQuads({relativeTo: doc})[0].bounds;
-    let anchorBounds = el.getBoxQuads({relativeTo: doc})[0].bounds;
+    let arrowBounds = arrow.getBoxQuads({relativeTo: doc})[0].getBounds();
+    let panelBounds = tooltip.panel.getBoxQuads({relativeTo: doc})[0].getBounds();
+    let anchorBounds = el.getBoxQuads({relativeTo: doc})[0].getBounds();
 
     let intersects = arrowBounds.left <= anchorBounds.right &&
                      arrowBounds.right >= anchorBounds.left;

devtools/client/shared/test/browser_inplace-editor_autocomplete_offset.js

@@ -114,5 +114,5 @@ let runAutocompletionTest = Task.async(function* (editor) {
  */
 function getPopupOffset({popup, input}) {
   let popupQuads = popup._panel.getBoxQuads({relativeTo: input});
-  return popupQuads[0].bounds.left;
+  return popupQuads[0].getBounds().left;
 }

devtools/client/shared/widgets/tooltip/HTMLTooltip.js

@@ -176,9 +176,9 @@ const getRelativeRect = function (node, relativeTo) {
   // Width and Height can be taken from the rect.
   let {width, height} = node.getBoundingClientRect();
 
-  let quads = node.getBoxQuads({relativeTo});
-  let top = quads[0].bounds.top;
-  let left = quads[0].bounds.left;
+  let quadBounds = node.getBoxQuads({relativeTo})[0].getBounds();
+  let top = quadBounds.top;
+  let left = quadBounds.left;
 
   // Compute right and bottom coordinates using the rest of the data.
   let right = left + width;

devtools/server/actors/inspector.js

@@ -3071,7 +3071,10 @@ function nodeHasSize(node) {
   }
 
   let quads = node.getBoxQuads();
-  return quads.length && quads.some(quad => quad.bounds.width && quad.bounds.height);
+  return quads.some(quad => {
+    let bounds = quad.getBounds();
+    return bounds.width && bounds.height;
+  });
 }
 
 /**

devtools/shared/layout/utils.js

@@ -175,6 +175,11 @@ 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.
@@ -206,6 +211,7 @@ function getAdjustedQuads(boundaryWindow, node, region) {
 
   let adjustedQuads = [];
   for (let quad of quads) {
+    let bounds = quad.getBounds();
     adjustedQuads.push({
       p1: {
         w: quad.p1.w * scale,
@@ -232,14 +238,14 @@ function getAdjustedQuads(boundaryWindow, node, region) {
         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
       }
     });
   }