Bug 969306 - Remove getQuads() polyfill now that getQuads has landed r=pbrosset
authorMichael Ratcliffe <mratcliffe@mozilla.com>
Tue, 03 Jun 2014 13:12:55 +0100
changeset 206019 c2b9502bcf60cdcef586b837d983480a3ddb265a
parent 206018 52f6d0a67991ce51edd6303e9911247cb7847039
child 206020 531774aeb6c2bc4ff3ea293b8a3ef96ad8cbc2b2
push id3741
push userasasaki@mozilla.com
push dateMon, 21 Jul 2014 20:25:18 +0000
treeherdermozilla-beta@4d6f46f5af68 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbrosset
bugs969306
milestone32.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 969306 - Remove getQuads() polyfill now that getQuads has landed r=pbrosset
browser/devtools/inspector/test/browser_inspector_highlighter.js
browser/devtools/inspector/test/head.js
toolkit/devtools/LayoutHelpers.jsm
toolkit/devtools/server/actors/highlighter.js
--- a/browser/devtools/inspector/test/browser_inspector_highlighter.js
+++ b/browser/devtools/inspector/test/browser_inspector_highlighter.js
@@ -1,115 +1,80 @@
 /* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
 /* vim: set ts=2 et sw=2 tw=80: */
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 let doc;
-let h1;
+let div;
+let rotated;
 let inspector;
+let contentViewer;
 
 function createDocument() {
-  let div = doc.createElement("div");
-  h1 = doc.createElement("h1");
-  let p1 = doc.createElement("p");
-  let p2 = doc.createElement("p");
-  let div2 = doc.createElement("div");
-  let p3 = doc.createElement("p");
-  doc.title = "Inspector Highlighter Meatballs";
-  h1.textContent = "Inspector Tree Selection Test";
-  p1.textContent = "This is some example text";
-  p2.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing " +
-    "elit, sed do eiusmod tempor incididunt ut labore et dolore magna " +
-    "aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco " +
-    "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure " +
-    "dolor in reprehenderit in voluptate velit esse cillum dolore eu " +
-    "fugiat nulla pariatur. Excepteur sint occaecat cupidatat non " +
-    "proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
-  p3.textContent = "Lorem ipsum dolor sit amet, consectetur adipisicing " +
-    "elit, sed do eiusmod tempor incididunt ut labore et dolore magna " +
-    "aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco " +
-    "laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure " +
-    "dolor in reprehenderit in voluptate velit esse cillum dolore eu " +
-    "fugiat nulla pariatur. Excepteur sint occaecat cupidatat non " +
-    "proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
-  let div3 = doc.createElement("div");
-  div3.id = "checkOutThisWickedSpread";
-  div3.setAttribute("style", "position: absolute; top: 20px; right: 20px; height: 20px; width: 20px; background-color: yellow; border: 1px dashed black;");
-  let p4 = doc.createElement("p");
-  p4.setAttribute("style", "font-weight: 200; font-size: 8px; text-align: center;");
-  p4.textContent = "Smörgåsbord!";
-  div.appendChild(h1);
-  div.appendChild(p1);
-  div.appendChild(p2);
-  div2.appendChild(p3);
-  div3.appendChild(p4);
+  div = doc.createElement("div");
+  div.setAttribute("style",
+                   "padding:5px; border:7px solid red; margin: 9px; " +
+                   "position:absolute; top:30px; left:150px;");
+  let textNode = doc.createTextNode("Gort! Klaatu barada nikto!");
+  rotated = doc.createElement("div");
+  rotated.setAttribute("style",
+                       "padding:5px; border:7px solid red; margin: 9px; " +
+                       "transform:rotate(45deg); " +
+                       "position:absolute; top:30px; left:80px;");
+  div.appendChild(textNode);
   doc.body.appendChild(div);
-  doc.body.appendChild(div2);
-  doc.body.appendChild(div3);
+  doc.body.appendChild(rotated);
 
   openInspector(aInspector => {
     inspector = aInspector;
     inspector.selection.setNode(div, null);
-    inspector.once("inspector-updated", () => {
-      inspector.toolbox.highlighterUtils.startPicker().then(testMouseOverH1Highlights);
-    });
+    inspector.once("inspector-updated", testMouseOverDivHighlights);
   });
 }
 
-function testMouseOverH1Highlights() {
-  inspector.toolbox.once("highlighter-ready", () => {
-    ok(isHighlighting(), "Highlighter is shown");
-    is(getHighlitNode(), h1, "Highlighter's outline correspond to the selected node");
-    testBoxModelDimensions();
-  });
+function testMouseOverDivHighlights() {
+  ok(isHighlighting(), "Highlighter is shown");
+  is(getHighlitNode(), div, "Highlighter's outline correspond to the non-rotated div");
+  testNonTransformedBoxModelDimensionsNoZoom();
+}
 
-  EventUtils.synthesizeMouse(h1, 2, 2, {type: "mousemove"}, content);
+function testNonTransformedBoxModelDimensionsNoZoom() {
+  info("Highlighted the non-rotated div");
+  isNodeCorrectlyHighlighted(div, "non-zoomed");
+
+  inspector.toolbox.once("highlighter-ready", testNonTransformedBoxModelDimensionsZoomed);
+  contentViewer = gBrowser.selectedBrowser.docShell.contentViewer
+                          .QueryInterface(Ci.nsIMarkupDocumentViewer);
+  contentViewer.fullZoom = 2;
 }
 
-function testBoxModelDimensions() {
-  let h1Dims = h1.getBoundingClientRect();
-  let h1Width = Math.ceil(h1Dims.width);
-  let h1Height = Math.ceil(h1Dims.height);
+function testNonTransformedBoxModelDimensionsZoomed() {
+  info("Highlighted the zoomed, non-rotated div");
+  isNodeCorrectlyHighlighted(div, "zoomed");
 
-  let outlineDims = getSimpleBorderRect();
-  let outlineWidth = Math.ceil(outlineDims.width);
-  let outlineHeight = Math.ceil(outlineDims.height);
-
-  // Disabled due to bug 716245
-  is(outlineWidth, h1Width, "outline width matches dimensions of element (no zoom)");
-  is(outlineHeight, h1Height, "outline height matches dimensions of element (no zoom)");
+  inspector.toolbox.once("highlighter-ready", testMouseOverRotatedHighlights);
+  contentViewer.fullZoom = 1;
+}
 
-  // zoom the page by a factor of 2
-  let contentViewer = gBrowser.selectedBrowser.docShell.contentViewer
-                             .QueryInterface(Ci.nsIMarkupDocumentViewer);
-  contentViewer.fullZoom = 2;
+function testMouseOverRotatedHighlights() {
+  inspector.toolbox.once("highlighter-ready", () => {
+    ok(isHighlighting(), "Highlighter is shown");
+    info("Highlighted the rotated div");
+    isNodeCorrectlyHighlighted(rotated, "rotated");
 
-  // simulate the zoomed dimensions of the div element
-  let h1Dims = h1.getBoundingClientRect();
-  // There seems to be some very minor differences in the floats, so let's
-  // floor the values
-  let h1Width = Math.floor(h1Dims.width * contentViewer.fullZoom);
-  let h1Height = Math.floor(h1Dims.height * contentViewer.fullZoom);
-
-  let outlineDims = getSimpleBorderRect();
-  let outlineWidth = Math.floor(outlineDims.width);
-  let outlineHeight = Math.floor(outlineDims.height);
-
-  is(outlineWidth, h1Width, "outline width matches dimensions of element (zoomed)");
-
-  is(outlineHeight, h1Height, "outline height matches dimensions of element (zoomed)");
-
-  executeSoon(finishUp);
+    executeSoon(finishUp);
+  });
+  inspector.selection.setNode(rotated);
 }
 
 function finishUp() {
   inspector.toolbox.highlighterUtils.stopPicker().then(() => {
-    doc = h1 = inspector = null;
+    doc = div = rotated = inspector = contentViewer = null;
     let target = TargetFactory.forTab(gBrowser.selectedTab);
     gDevTools.closeToolbox(target);
     gBrowser.removeCurrentTab();
     finish();
   });
 }
 
 function test() {
--- a/browser/devtools/inspector/test/head.js
+++ b/browser/devtools/inspector/test/head.js
@@ -395,17 +395,17 @@ function focusSearchBoxUsingShortcut(pan
   isnot(name, null, "Successfully retrieved keycode/key");
 
   let modifiers = {
     shiftKey: modifiersAttr.match("shift"),
     ctrlKey: modifiersAttr.match("ctrl"),
     altKey: modifiersAttr.match("alt"),
     metaKey: modifiersAttr.match("meta"),
     accelKey: modifiersAttr.match("accel")
-  }
+  };
 
   let searchBox = panelWin.document.getElementById("inspector-searchbox");
   searchBox.addEventListener("focus", function onFocus() {
     searchBox.removeEventListener("focus", onFocus, false);
     callback && callback();
   }, false);
   EventUtils.synthesizeKey(name, modifiers);
 }
@@ -420,16 +420,70 @@ function getComputedPropertyValue(aName)
 
     if (name.textContent === aName) {
       let value = prop.querySelector(".property-value");
       return value.textContent;
     }
   }
 }
 
+function isNodeCorrectlyHighlighted(node, prefix="") {
+  let boxModel = getBoxModelStatus();
+  let helper = new LayoutHelpers(window.content);
+
+  prefix += (prefix ? " " : "") + node.nodeName;
+  prefix += (node.id ? "#" + node.id : "");
+  prefix += (node.classList.length ? "." + [...node.classList].join(".") : "");
+  prefix += " ";
+
+  let quads = helper.getAdjustedQuads(node, "content");
+  let {p1:cp1, p2:cp2, p3:cp3, p4:cp4} = boxModel.content.points;
+  is(cp1.x, quads.p1.x, prefix + "content point 1 x co-ordinate is correct");
+  is(cp1.y, quads.p1.y, prefix + "content point 1 y co-ordinate is correct");
+  is(cp2.x, quads.p2.x, prefix + "content point 2 x co-ordinate is correct");
+  is(cp2.y, quads.p2.y, prefix + "content point 2 y co-ordinate is correct");
+  is(cp3.x, quads.p3.x, prefix + "content point 3 x co-ordinate is correct");
+  is(cp3.y, quads.p3.y, prefix + "content point 3 y co-ordinate is correct");
+  is(cp4.x, quads.p4.x, prefix + "content point 4 x co-ordinate is correct");
+  is(cp4.y, quads.p4.y, prefix + "content point 4 y co-ordinate is correct");
+
+  quads = helper.getAdjustedQuads(node, "padding");
+  let {p1:pp1, p2:pp2, p3:pp3, p4:pp4} = boxModel.padding.points;
+  is(pp1.x, quads.p1.x, prefix + "padding point 1 x co-ordinate is correct");
+  is(pp1.y, quads.p1.y, prefix + "padding point 1 y co-ordinate is correct");
+  is(pp2.x, quads.p2.x, prefix + "padding point 2 x co-ordinate is correct");
+  is(pp2.y, quads.p2.y, prefix + "padding point 2 y co-ordinate is correct");
+  is(pp3.x, quads.p3.x, prefix + "padding point 3 x co-ordinate is correct");
+  is(pp3.y, quads.p3.y, prefix + "padding point 3 y co-ordinate is correct");
+  is(pp4.x, quads.p4.x, prefix + "padding point 4 x co-ordinate is correct");
+  is(pp4.y, quads.p4.y, prefix + "padding point 4 y co-ordinate is correct");
+
+  quads = helper.getAdjustedQuads(node, "border");
+  let {p1:bp1, p2:bp2, p3:bp3, p4:bp4} = boxModel.border.points;
+  is(bp1.x, quads.p1.x, prefix + "border point 1 x co-ordinate is correct");
+  is(bp1.y, quads.p1.y, prefix + "border point 1 y co-ordinate is correct");
+  is(bp2.x, quads.p2.x, prefix + "border point 2 x co-ordinate is correct");
+  is(bp2.y, quads.p2.y, prefix + "border point 2 y co-ordinate is correct");
+  is(bp3.x, quads.p3.x, prefix + "border point 3 x co-ordinate is correct");
+  is(bp3.y, quads.p3.y, prefix + "border point 3 y co-ordinate is correct");
+  is(bp4.x, quads.p4.x, prefix + "border point 4 x co-ordinate is correct");
+  is(bp4.y, quads.p4.y, prefix + "border point 4 y co-ordinate is correct");
+
+  quads = helper.getAdjustedQuads(node, "margin");
+  let {p1:mp1, p2:mp2, p3:mp3, p4:mp4} = boxModel.margin.points;
+  is(mp1.x, quads.p1.x, prefix + "margin point 1 x co-ordinate is correct");
+  is(mp1.y, quads.p1.y, prefix + "margin point 1 y co-ordinate is correct");
+  is(mp2.x, quads.p2.x, prefix + "margin point 2 x co-ordinate is correct");
+  is(mp2.y, quads.p2.y, prefix + "margin point 2 y co-ordinate is correct");
+  is(mp3.x, quads.p3.x, prefix + "margin point 3 x co-ordinate is correct");
+  is(mp3.y, quads.p3.y, prefix + "margin point 3 y co-ordinate is correct");
+  is(mp4.x, quads.p4.x, prefix + "margin point 4 x co-ordinate is correct");
+  is(mp4.y, quads.p4.y, prefix + "margin point 4 y co-ordinate is correct");
+}
+
 function getContainerForRawNode(markupView, rawNode)
 {
   let front = markupView.walker.frontForRawNode(rawNode);
   let container = markupView.getContainer(front);
   return container;
 }
 
 SimpleTest.registerCleanupFunction(function () {
--- a/toolkit/devtools/LayoutHelpers.jsm
+++ b/toolkit/devtools/LayoutHelpers.jsm
@@ -407,103 +407,9 @@ LayoutHelpers.prototype = {
       xOffset += frameRect.left + offsetLeft;
       yOffset += frameRect.top + offsetTop;
 
       frameWin = this.getParentWindow(frameWin);
     }
 
     return [xOffset * scale, yOffset * scale];
   },
-
-
-
-  /********************************************************************
-   * GetBoxQuads POLYFILL START TODO: Remove this when bug 917755 is fixed.
-   ********************************************************************/
-  _getBoxQuadsFromRect: function(rect, node) {
-    let scale = this.calculateScale(node);
-    let [xOffset, yOffset] = this._getNodeOffsets(node);
-
-    let out = {
-      p1: {
-        x: rect.left * scale + xOffset,
-        y: rect.top * scale + yOffset
-      },
-      p2: {
-        x: (rect.left + rect.width) * scale + xOffset,
-        y: rect.top * scale + yOffset
-      },
-      p3: {
-        x: (rect.left + rect.width) * scale + xOffset,
-        y: (rect.top + rect.height) * scale + yOffset
-      },
-      p4: {
-        x: rect.left * scale + xOffset,
-        y: (rect.top + rect.height) * scale + yOffset
-      }
-    };
-
-    out.bounds = {
-      bottom: out.p4.y,
-      height: out.p4.y - out.p1.y,
-      left: out.p1.x,
-      right: out.p2.x,
-      top: out.p1.y,
-      width: out.p2.x - out.p1.x,
-      x: out.p1.x,
-      y: out.p1.y
-    };
-
-    return out;
-  },
-
-  _parseNb: function(distance) {
-    let nb = parseFloat(distance, 10);
-    return isNaN(nb) ? 0 : nb;
-  },
-
-  getAdjustedQuadsPolyfill: function(node, region) {
-    // Get the border-box rect
-    // Note that this is relative to the node's viewport, so before we can use
-    // it, will need to go back up the frames like getRect
-    let borderRect = node.getBoundingClientRect();
-
-    // If the boxType is border, no need to go any further, we're done
-    if (region === "border") {
-      return this._getBoxQuadsFromRect(borderRect, node);
-    }
-
-    // Else, need to get margin/padding/border distances
-    let style = node.ownerDocument.defaultView.getComputedStyle(node);
-    let camel = s => s.substring(0, 1).toUpperCase() + s.substring(1);
-    let distances = {border:{}, padding:{}, margin: {}};
-
-    for (let side of ["top", "right", "bottom", "left"]) {
-      distances.border[side] = this._parseNb(style["border" + camel(side) + "Width"]);
-      distances.padding[side] = this._parseNb(style["padding" + camel(side)]);
-      distances.margin[side] = this._parseNb(style["margin" + camel(side)]);
-    }
-
-    // From the border-box rect, calculate the content-box, padding-box and
-    // margin-box rects
-    function offsetRect(rect, offsetType, dir=1) {
-      return {
-        top: rect.top + (dir * distances[offsetType].top),
-        left: rect.left + (dir * distances[offsetType].left),
-        width: rect.width - (dir * (distances[offsetType].left + distances[offsetType].right)),
-        height: rect.height - (dir * (distances[offsetType].top + distances[offsetType].bottom))
-      };
-    }
-
-    if (region === "margin") {
-      return this._getBoxQuadsFromRect(offsetRect(borderRect, "margin", -1), node);
-    } else if (region === "padding") {
-      return this._getBoxQuadsFromRect(offsetRect(borderRect, "border"), node);
-    } else if (region === "content") {
-      let paddingRect = offsetRect(borderRect, "border");
-      return this._getBoxQuadsFromRect(offsetRect(paddingRect, "padding"), node);
-    }
-  },
-
-  /********************************************************************
-   * GetBoxQuads POLYFILL END
-   ********************************************************************/
 };
--- a/toolkit/devtools/server/actors/highlighter.js
+++ b/toolkit/devtools/server/actors/highlighter.js
@@ -577,29 +577,26 @@ BoxModelHighlighter.prototype = {
    * @return {boolean}
    *         True if the rectangle was highlighted, false otherwise.
    */
   _highlightBoxModel: function(options) {
     let isShown = false;
 
     options.region = options.region || "content";
 
-    // TODO: Remove this polyfill
-    this.rect =
-      this.layoutHelpers.getAdjustedQuadsPolyfill(this.currentNode, "margin");
+    this.rect = this.layoutHelpers.getAdjustedQuads(this.currentNode, "margin");
 
     if (!this.rect) {
       return null;
     }
 
     if (this.rect.bounds.width > 0 && this.rect.bounds.height > 0) {
       for (let boxType in this._boxModelNodes) {
-        // TODO: Remove this polyfill
         let {p1, p2, p3, p4} = boxType === "margin" ? this.rect :
-          this.layoutHelpers.getAdjustedQuadsPolyfill(this.currentNode, boxType);
+          this.layoutHelpers.getAdjustedQuads(this.currentNode, boxType);
 
         let boxNode = this._boxModelNodes[boxType];
         boxNode.setAttribute("points",
                              p1.x + "," + p1.y + " " +
                              p2.x + "," + p2.y + " " +
                              p3.x + "," + p3.y + " " +
                              p4.x + "," + p4.y);