Bug 994729 - Make box model guides move on layout view region hover r=bgrins

browser/devtools/framework/toolbox-highlighter-utils.js

@@ -210,7 +210,7 @@ exports.getHighlighterUtils = function(toolbox) {
       yield toolbox.walker.highlight(nodeFront);
     }
 
-    toolbox.emit("node-highlight", nodeFront);
+    toolbox.emit("node-highlight", nodeFront, options.toSource());
   });
 
   /**

browser/devtools/layoutview/test/browser.ini

@@ -7,6 +7,9 @@ support-files =
   head.js
 
 [browser_layoutview.js]
+[browser_layoutview_guides.js]
+# browser_layoutview_guides.js should be re-enabled when bug 1029451 is fixed.
+skip-if = true
 [browser_layoutview_rotate-labels-on-sides.js]
 [browser_layoutview_update-after-navigation.js]
 [browser_layoutview_update-after-reload.js]

browser/devtools/layoutview/test/browser_layoutview_guides.js

@@ -0,0 +1,82 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+let test = asyncTest(function*() {
+  let style = "div { position: absolute; top: 50px; left: 50px; height: 10px; " +
+              "width: 10px; border: 10px solid black; padding: 10px; margin: 10px;}";
+  let html = "<style>" + style + "</style><div></div>";
+
+  yield addTab("data:text/html;charset=utf-8," + encodeURIComponent(html));
+
+  let {inspector, view} = yield openLayoutView();
+  yield selectNode("div", inspector);
+  yield runTests(inspector, view);
+});
+
+addTest("Test that the initial values of the box model are correct",
+function*(inspector, view) {
+  yield testGuideOnLayoutHover("margins", {
+    top: { x1: "0", x2: "100%", y1: "119.5", y2: "119.5" },
+    right: { x1: "50.5", x2: "50.5", y1: "0", y2: "100%" },
+    bottom: { x1: "0", x2: "100%", y1: "50.5", y2: "50.5" },
+    left: { x1: "119.5", x2: "119.5", y1: "0", y2: "100%" }
+  }, inspector, view);
+
+  yield testGuideOnLayoutHover("borders", {
+    top: { x1: "0", x2: "100%", y1: "109.5", y2: "109.5" },
+    right: { x1: "60.5", x2: "60.5", y1: "0", y2: "100%" },
+    bottom: { x1: "0", x2: "100%", y1: "60.5", y2: "60.5" },
+    left: { x1: "109.5", x2: "109.5", y1: "0", y2: "100%" }
+  }, inspector, view);
+
+  yield testGuideOnLayoutHover("padding", {
+    top: { x1: "0", x2: "100%", y1: "99.5", y2: "99.5" },
+    right: { x1: "70.5", x2: "70.5", y1: "0", y2: "100%" },
+    bottom: { x1: "0", x2: "100%", y1: "70.5", y2: "70.5" },
+    left: { x1: "99.5", x2: "99.5", y1: "0", y2: "100%" }
+  }, inspector, view);
+
+  yield testGuideOnLayoutHover("content", {
+    top: { x1: "0", x2: "100%", y1: "79.5", y2: "79.5" },
+    right: { x1: "90.5", x2: "90.5", y1: "0", y2: "100%" },
+    bottom: { x1: "0", x2: "100%", y1: "90.5", y2: "90.5" },
+    left: { x1: "79.5", x2: "79.5", y1: "0", y2: "100%" }
+  }, inspector, view);
+
+  gBrowser.removeCurrentTab();
+});
+
+function* testGuideOnLayoutHover(id, expected, inspector, view) {
+  info("Checking " + id);
+
+  let elt = view.doc.getElementById(id);
+
+  EventUtils.synthesizeMouse(elt, 2, 2, {type:'mouseover'}, view.doc.defaultView);
+
+  yield inspector.toolbox.once("highlighter-ready");
+
+  let guideTop = getGuideStatus("top");
+  let guideRight = getGuideStatus("right");
+  let guideBottom = getGuideStatus("bottom");
+  let guideLeft = getGuideStatus("left");
+
+  is(guideTop.x1, expected.top.x1, "top x1 is correct");
+  is(guideTop.x2, expected.top.x2, "top x2 is correct");
+  is(guideTop.y1, expected.top.y1, "top y1 is correct");
+  is(guideTop.y2, expected.top.y2, "top y2 is correct");
+
+  is(guideRight.x1, expected.right.x1, "right x1 is correct");
+  is(guideRight.x2, expected.right.x2, "right x2 is correct");
+  is(guideRight.y1, expected.right.y1, "right y1 is correct");
+  is(guideRight.y2, expected.right.y2, "right y2 is correct");
+
+  is(guideBottom.x1, expected.bottom.x1, "bottom x1 is correct");
+  is(guideBottom.x2, expected.bottom.x2, "bottom x2 is correct");
+  is(guideBottom.y1, expected.bottom.y1, "bottom y1 is correct");
+  is(guideBottom.y2, expected.bottom.y2, "bottom y2 is correct");
+
+  is(guideLeft.x1, expected.left.x1, "left x1 is correct");
+  is(guideLeft.x2, expected.left.x2, "left x2 is correct");
+  is(guideLeft.y1, expected.left.y1, "left y1 is correct");
+  is(guideLeft.y2, expected.left.y2, "left y2 is correct");
+}

browser/devtools/layoutview/test/head.js

@@ -216,6 +216,28 @@ function waitForUpdate(inspector) {
   return inspector.once("layoutview-updated");
 }
 
+function getHighlighter() {
+  return gBrowser.selectedBrowser.parentNode.querySelector(".highlighter-container");
+}
+
+function getBoxModelRoot() {
+  let highlighter = getHighlighter();
+  return highlighter.querySelector(".box-model-root");
+}
+
+function getGuideStatus(location) {
+  let root = getBoxModelRoot();
+  let guide = root.querySelector(".box-model-guide-" + location);
+
+  return {
+    visible: !guide.hasAttribute("hidden"),
+    x1: guide.getAttribute("x1"),
+    y1: guide.getAttribute("y1"),
+    x2: guide.getAttribute("x2"),
+    y2: guide.getAttribute("y2")
+  };
+}
+
 /**
  * The addTest/runTests function couple provides a simple way to define
  * subsequent test cases in a test file. Example:

toolkit/devtools/server/actors/highlighter.js

@@ -352,12 +352,16 @@ XULBasedHighlighter.prototype = {
   /**
    * Show the highlighter on a given node
    * @param {DOMNode} node
+   * @param {Object} options
+   *        Object used for passing options
    */
-  show: function(node) {
+  show: function(node, options={}) {
     if (!isNodeValid(node) || node === this.currentNode) {
       return;
     }
 
+    this.options = options;
+
     this._detachPageListeners();
     this.currentNode = node;
     this._attachPageListeners();
@@ -375,6 +379,7 @@ XULBasedHighlighter.prototype = {
     this._hide();
     this._detachPageListeners();
     this.currentNode = null;
+    this.options = null;
   },
 
   /**
@@ -630,12 +635,38 @@ BoxModelHighlighter.prototype = Heritage.extend(XULBasedHighlighter.prototype, {
     this._currentNode = null;
   },
 
+  /**
+   * Show the highlighter on a given node. We override this method so that the
+   * same node can be rehighlighted e.g. to highlight different regions from the
+   * layout view.
+   *
+   * @param {DOMNode} node
+   * @param {Object} options
+   *        Object used for passing options
+   */
+  show: function(node, options={}) {
+    if (!isNodeValid(node)) {
+      return;
+    }
+
+    this.options = options;
+
+    if (!this.options.region) {
+      this.options.region = "content";
+    }
+
+    this._detachPageListeners();
+    this.currentNode = node;
+    this._attachPageListeners();
+    this._show();
+  },
+
   /**
    * Show the highlighter on a given node
    * @param {Object} options
    *        Object used for passing options
    */
-  _show: function(options={}) {
+  _show: function() {
     this._update();
     this._trackMutations();
     this.emit("ready");
@@ -664,13 +695,9 @@ BoxModelHighlighter.prototype = Heritage.extend(XULBasedHighlighter.prototype, {
    * Update the highlighter on the current highlighted node (the one that was
    * passed as an argument to show(node)).
    * Should be called whenever node size or attributes change
-   * @param {Object} options
-   *        Object used for passing options. Valid options are:
-   *          - box: "content", "padding", "border" or "margin." This specifies
-   *            the box that the guides should outline. Default is content.
    */
-  _update: function(options={}) {
-    if (this._updateBoxModel(options)) {
+  _update: function() {
+    if (this._updateBoxModel()) {
       this._showInfobar();
       this._showBoxModel();
     } else {
@@ -720,16 +747,10 @@ BoxModelHighlighter.prototype = Heritage.extend(XULBasedHighlighter.prototype, {
   /**
    * Update the box model as per the current node.
    *
-   * @param {Object} options
-   *        Object used for passing options. Valid options are:
-   *          - region: "content", "padding", "border" or "margin." This specifies
-   *            the region that the guides should outline. Default is content.
    * @return {boolean}
    *         True if the current node has a box model to be highlighted
    */
-  _updateBoxModel: function(options) {
-    options.region = options.region || "content";
-
+  _updateBoxModel: function() {
     if (this._nodeNeedsHighlighting()) {
       for (let boxType in this._boxModelNodes) {
         let {p1, p2, p3, p4} =
@@ -742,7 +763,7 @@ BoxModelHighlighter.prototype = Heritage.extend(XULBasedHighlighter.prototype, {
                              p3.x + "," + p3.y + " " +
                              p4.x + "," + p4.y);
 
-        if (boxType === options.region) {
+        if (boxType === this.options.region) {
           this._showGuides(p1, p2, p3, p4);
         }
       }