--- a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_01.js
@@ -1,95 +1,89 @@
 /* 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/. */
 
 "use strict";
 
 // Test the creation of the geometry highlighter elements.
 
-const TEST_URL = "data:text/html;charset=utf-8," +
-                 "<span id='inline'></span>" +
-                 "<div id='positioned' style='background:yellow;position:absolute;left:5rem;top:30px;right:300px;bottom:10em;'></div>" +
-                 "<div id='sized' style='background:red;width:5em;height:50%;'></div>";
+const TEST_URL = `data:text/html;charset=utf-8,
+                  <span id='inline'></span>
+                  <div id='positioned' style='
+                    background:yellow;
+                    position:absolute;
+                    left:5rem;
+                    top:30px;
+                    right:300px;
+                    bottom:10em;'></div>
+                  <div id='sized' style='
+                    background:red;
+                    width:5em;
+                    height:50%;'></div>`;
+
+const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
+
 const ID = "geometry-editor-";
 const SIDES = ["left", "right", "top", "bottom"];
-const SIZES = ["width", "height"];
 
-add_task(function*() {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
-  let front = inspector.inspector;
+add_task(function* () {
+  let helper = yield openInspectorForURL(TEST_URL)
+                       .then(getHighlighterHelperFor(HIGHLIGHTER_TYPE));
+
+  let { finalize } = helper;
 
-  let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
+  helper.prefix = ID;
 
-  yield hasArrowsAndLabels(highlighter, inspector, testActor);
-  yield isHiddenForNonPositionedNonSizedElement(highlighter, inspector, testActor);
-  yield sideArrowsAreDisplayedForPositionedNode(highlighter, inspector, testActor);
-  yield sizeLabelIsDisplayedForSizedNode(highlighter, inspector, testActor);
+  yield hasArrowsAndLabelsAndHandlers(helper);
+  yield isHiddenForNonPositionedNonSizedElement(helper);
+  yield sideArrowsAreDisplayedForPositionedNode(helper);
 
-  yield highlighter.finalize();
+  finalize();
 });
 
-function* hasArrowsAndLabels(highlighterFront, inspector, testActor) {
+function* hasArrowsAndLabelsAndHandlers({getElementAttribute}) {
   info("Checking that the highlighter has the expected arrows and labels");
 
   for (let name of [...SIDES]) {
-    let value = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + name, "class", highlighterFront);
+    let value = yield getElementAttribute("arrow-" + name, "class");
     is(value, ID + "arrow " + name, "The " + name + " arrow exists");
 
-    value = yield testActor.getHighlighterNodeAttribute(ID + "label-text-" + name, "class", highlighterFront);
+    value = yield getElementAttribute("label-text-" + name, "class");
     is(value, ID + "label-text", "The " + name + " label exists");
-  }
-
-  let value = yield testActor.getHighlighterNodeAttribute(ID + "label-text-size", "class", highlighterFront);
-  is(value, ID + "label-text", "The size label exists");
-}
-
-function* isHiddenForNonPositionedNonSizedElement(highlighterFront, inspector, testActor) {
-  info("Asking to show the highlighter on an inline, non positioned element");
 
-  let node = yield getNodeFront("#inline", inspector);
-  yield highlighterFront.show(node);
-
-  for (let name of [...SIDES]) {
-    let hidden = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + name, "hidden", highlighterFront);
-    is(hidden, "true", "The " + name + " arrow is hidden");
+    value = yield getElementAttribute("handler-" + name, "class");
+    is(value, ID + "handler-" + name, "The " + name + " handler exists");
   }
-
-  let hidden = yield testActor.getHighlighterNodeAttribute(ID + "label-size", "hidden", highlighterFront);
-  is(hidden, "true", "The size label is hidden");
 }
 
-function* sideArrowsAreDisplayedForPositionedNode(highlighterFront, inspector, testActor) {
+function* isHiddenForNonPositionedNonSizedElement(
+  {show, hide, isElementHidden}) {
+  info("Asking to show the highlighter on an inline, non p  ositioned element");
+
+  yield show("#inline");
+
+  for (let name of [...SIDES]) {
+    let hidden = yield isElementHidden("arrow-" + name);
+    ok(hidden, "The " + name + " arrow is hidden");
+
+    hidden = yield isElementHidden("handler-" + name);
+    ok(hidden, "The " + name + " handler is hidden");
+  }
+}
+
+function* sideArrowsAreDisplayedForPositionedNode(
+  {show, hide, isElementHidden}) {
   info("Asking to show the highlighter on the positioned node");
 
-  let node = yield getNodeFront("#positioned", inspector);
-  yield highlighterFront.show(node);
+  yield show("#positioned");
 
   for (let name of SIDES) {
-    let hidden = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + name, "hidden", highlighterFront);
+    let hidden = yield isElementHidden("arrow-" + name);
     ok(!hidden, "The " + name + " arrow is visible for the positioned node");
-  }
-
-  let hidden = yield testActor.getHighlighterNodeAttribute(ID + "label-size", "hidden", highlighterFront);
-  is(hidden, "true", "The size label is hidden");
-
-  info("Hiding the highlighter");
-  yield highlighterFront.hide();
-}
 
-function* sizeLabelIsDisplayedForSizedNode(highlighterFront, inspector, testActor) {
-  info("Asking to show the highlighter on the sized node");
-
-  let node = yield getNodeFront("#sized", inspector);
-  yield highlighterFront.show(node);
-
-  let hidden = yield testActor.getHighlighterNodeAttribute(ID + "label-size", "hidden", highlighterFront);
-  ok(!hidden, "The size label is visible");
-
-  for (let name of SIDES) {
-    let hidden = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + name, "hidden", highlighterFront);
-    is(hidden, "true", "The " + name + " arrow is hidden for the sized node");
+    hidden = yield isElementHidden("handler-" + name);
+    ok(!hidden, "The " + name + " handler is visible for the positioned node");
   }
 
   info("Hiding the highlighter");
-  yield highlighterFront.hide();
+  yield hide();
 }

--- a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_02.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_02.js
@@ -1,24 +1,48 @@
 /* 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/. */
 
+/* Globals defined in: devtools/client/inspector/test/head.js */
+
 "use strict";
 
 // Test that the geometry highlighter labels are correct.
 
-const TEST_URL = "data:text/html;charset=utf-8," +
-                 "<div id='positioned' style='background:yellow;position:absolute;left:5rem;top:30px;right:300px;bottom:10em;'></div>" +
-                 "<div id='positioned2' style='background:blue;position:absolute;right:10%;top:5vmin;'>test element</div>" +
-                 "<div id='relative' style='background:green;position:relative;top:10px;left:20px;bottom:30px;right:40px;width:100px;height:100px;'></div>" +
-                 "<div id='relative2' style='background:grey;position:relative;top:0;bottom:-50px;height:3em;'>relative</div>" +
-                 "<div id='sized' style='background:red;width:5em;height:50%;'></div>" +
-                 "<div id='sized2' style='background:orange;width:40px;position:absolute;right:0;bottom:0'>wow</div>";
+const TEST_URL = `data:text/html;charset=utf-8,
+                  <div id='positioned' style='
+                    background:yellow;
+                    position:absolute;
+                    left:5rem;
+                    top:30px;
+                    right:300px;
+                    bottom:10em;'></div>
+                  <div id='positioned2' style='
+                    background:blue;
+                    position:absolute;
+                    right:10%;
+                    top:5vmin;'>test element</div>
+                 <div id='relative' style='
+                    background:green;
+                    position:relative;
+                    top:10px;
+                    left:20px;
+                    bottom:30px;
+                    right:40px;
+                    width:100px;
+                    height:100px;'></div>
+                 <div id='relative2' style='
+                    background:grey;
+                    position:relative;
+                    top:0;bottom:-50px;
+                    height:3em;'>relative</div>`;
+
 const ID = "geometry-editor-";
+const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
 
 const POSITIONED_ELEMENT_TESTS = [{
   selector: "#positioned",
   expectedLabels: [
     {side: "left", visible: true, label: "5rem"},
     {side: "top", visible: true, label: "30px"},
     {side: "right", visible: true, label: "300px"},
     {side: "bottom", visible: true, label: "10em"}
@@ -27,24 +51,16 @@ const POSITIONED_ELEMENT_TESTS = [{
   selector: "#positioned2",
   expectedLabels: [
     {side: "left", visible: false},
     {side: "top", visible: true, label: "5vmin"},
     {side: "right", visible: true, label: "10%"},
     {side: "bottom", visible: false}
   ]
 }, {
-  selector: "#sized",
-  expectedLabels: [
-    {side: "left", visible: false},
-    {side: "top", visible: false},
-    {side: "right", visible: false},
-    {side: "bottom", visible: false}
-  ]
-}, {
   selector: "#relative",
   expectedLabels: [
     {side: "left", visible: true, label: "20px"},
     {side: "top", visible: true, label: "10px"},
     {side: "right", visible: false},
     {side: "bottom", visible: false}
   ]
 }, {
@@ -52,91 +68,49 @@ const POSITIONED_ELEMENT_TESTS = [{
   expectedLabels: [
     {side: "left", visible: false},
     {side: "top", visible: true, label: "0px"},
     {side: "right", visible: false},
     {side: "bottom", visible: false}
   ]
 }];
 
-const SIZED_ELEMENT_TESTS = [{
-  selector: "#positioned",
-  visible: false
-}, {
-  selector: "#sized",
-  visible: true,
-  expected: "\u2194 5em \u2195 50%"
-}, {
-  selector: "#relative",
-  visible: true,
-  expected: "\u2194 100px \u2195 100px"
-}, {
-  selector: "#relative2",
-  visible: true,
-  expected: "\u2195 3em"
-}, {
-  selector: "#sized2",
-  visible: true,
-  expected: "\u2194 40px"
-}];
+add_task(function* () {
+  let helper = yield openInspectorForURL(TEST_URL)
+                       .then(getHighlighterHelperFor(HIGHLIGHTER_TYPE));
+
+  helper.prefix = ID;
 
-add_task(function*() {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
-  let front = inspector.inspector;
+  let { finalize } = helper;
 
-  let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
+  yield positionLabelsAreCorrect(helper);
 
-  yield positionLabelsAreCorrect(highlighter, inspector, testActor);
-  yield sizeLabelIsCorrect(highlighter, inspector, testActor);
-
-  yield highlighter.finalize();
+  yield finalize();
 });
 
-function* positionLabelsAreCorrect(highlighterFront, inspector, testActor) {
+function* positionLabelsAreCorrect(
+  {show, hide, isElementHidden, getElementTextContent}
+) {
   info("Highlight nodes and check position labels");
 
   for (let {selector, expectedLabels} of POSITIONED_ELEMENT_TESTS) {
     info("Testing node " + selector);
-    let node = yield getNodeFront(selector, inspector);
-    yield highlighterFront.show(node);
+
+    yield show(selector);
 
     for (let {side, visible, label} of expectedLabels) {
-      let id = ID + "label-" + side;
+      let id = "label-" + side;
 
-      let hidden = yield testActor.getHighlighterNodeAttribute(id, "hidden", highlighterFront);
+      let hidden = yield isElementHidden(id);
       if (visible) {
         ok(!hidden, "The " + side + " label is visible");
 
-        let value = yield testActor.getHighlighterNodeTextContent(id, highlighterFront);
+        let value = yield getElementTextContent(id);
         is(value, label, "The " + side + " label textcontent is correct");
       } else {
-        is(hidden, "true", "The " + side + " label is hidden");
+        ok(hidden, "The " + side + " label is hidden");
       }
     }
 
     info("Hiding the highlighter");
-    yield highlighterFront.hide();
+    yield hide();
   }
 }
-
-function* sizeLabelIsCorrect(highlighterFront, inspector, testActor) {
-  info("Highlight nodes and check size labels");
-
-  let id = ID + "label-size";
-  for (let {selector, visible, expected} of SIZED_ELEMENT_TESTS) {
-    info("Testing node " + selector);
-    let node = yield getNodeFront(selector, inspector);
-    yield highlighterFront.show(node);
-
-    let hidden = yield testActor.getHighlighterNodeAttribute(id, "hidden", highlighterFront);
-    if (!visible) {
-      is(hidden, "true", "The size label is hidden");
-    } else {
-      ok(!hidden, "The size label is visible");
-
-      let label = yield testActor.getHighlighterNodeTextContent(id, highlighterFront);
-      is(label, expected, "The size label textcontent is correct");
-    }
-
-    info("Hiding the highlighter");
-    yield highlighterFront.hide();
-  }
-}

--- a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_03.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_03.js
@@ -1,60 +1,61 @@
 /* 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/. */
 
+/* Globals defined in: devtools/client/inspector/test/head.js */
+
 "use strict";
 
 // Test that the right arrows/labels are shown even when the css properties are
 // in several different css rules.
 
 const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
 const ID = "geometry-editor-";
+const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
 const PROPS = ["left", "right", "top", "bottom"];
 
-add_task(function*() {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
-  let front = inspector.inspector;
+add_task(function* () {
+  let helper = yield openInspectorForURL(TEST_URL)
+                       .then(getHighlighterHelperFor(HIGHLIGHTER_TYPE));
 
-  let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
+  helper.prefix = ID;
+
+  let { finalize } = helper;
 
-  yield checkArrowsLabels("#node1", ["size"],
-                          highlighter, inspector, testActor);
+  yield checkArrowsLabelsAndHandlers(
+    "#node2", ["top", "left", "bottom", "right"],
+     helper);
 
-  yield checkArrowsLabels("#node2", ["top", "left", "bottom", "right"],
-                          highlighter, inspector, testActor);
+  yield checkArrowsLabelsAndHandlers("#node3", ["top", "left"], helper);
 
-  yield checkArrowsLabels("#node3", ["top", "left", "size"],
-                          highlighter, inspector, testActor);
-
-  yield highlighter.finalize();
+  yield finalize();
 });
 
-function* checkArrowsLabels(selector, expectedProperties, highlighterFront, inspector, testActor) {
+function* checkArrowsLabelsAndHandlers(selector, expectedProperties,
+  {show, hide, isElementHidden}
+) {
   info("Getting node " + selector + " from the page");
-  let node = yield getNodeFront(selector, inspector);
 
-  info("Highlighting the node");
-  yield highlighterFront.show(node);
+  yield show(selector);
 
   for (let name of expectedProperties) {
-    let hidden;
-    if (name === "size") {
-      hidden = yield testActor.getHighlighterNodeAttribute(ID + "label-size", "hidden", highlighterFront);
-    } else {
-      hidden = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + name, "hidden", highlighterFront);
-    }
-    ok(!hidden, "The " + name + " arrow/label is visible for node " + selector);
+    let hidden = (yield isElementHidden("arrow-" + name)) &&
+                 (yield isElementHidden("handler-" + name));
+    ok(!hidden,
+      "The " + name + " label/arrow & handler is visible for node " + selector);
   }
 
   // Testing that the other arrows are hidden
   for (let name of PROPS) {
     if (expectedProperties.indexOf(name) !== -1) {
       continue;
     }
-    let hidden = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + name, "hidden", highlighterFront);
-    is(hidden, "true", "The " + name + " arrow is hidden for node " + selector);
+    let hidden = (yield isElementHidden("arrow-" + name)) &&
+                 (yield isElementHidden("handler-" + name));
+    ok(hidden,
+      "The " + name + " arrow & handler is hidden for node " + selector);
   }
 
   info("Hiding the highlighter");
-  yield highlighterFront.hide();
+  yield hide();
 }

--- a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_04.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_04.js
@@ -1,56 +1,85 @@
 /* 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/. */
 
+ /* Globals defined in: devtools/client/inspector/test/head.js */
+
 "use strict";
 
-// Test that the arrows are positioned correctly and have the right size.
+// Test that the arrows and handlers are positioned correctly and have the right
+// size.
 
 const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_01.html";
 const ID = "geometry-editor-";
+const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
 
-add_task(function*() {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
-  let front = inspector.inspector;
+const handlerMap = {
+  "top": {"cx": "x2", "cy": "y2"},
+  "bottom": {"cx": "x2", "cy": "y2"},
+  "left": {"cx": "x2", "cy": "y2"},
+  "right": {"cx": "x2", "cy": "y2"}
+};
 
-  let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
+add_task(function* () {
+  let helper = yield openInspectorForURL(TEST_URL)
+                       .then(getHighlighterHelperFor(HIGHLIGHTER_TYPE));
+
+  helper.prefix = ID;
 
-  yield checkArrows(highlighter, inspector, testActor, ".absolute-all-4", {
-   "top": {x1: 506, y1: 51, x2: 506, y2: 61},
-   "bottom": {x1: 506, y1: 451, x2: 506, y2: 251},
-   "left": {x1: 401, y1: 156, x2: 411, y2: 156},
-   "right": {x1: 901, y1: 156, x2: 601, y2: 156}
+  let { hide, finalize } = helper;
+
+  yield checkArrowsAndHandlers(helper, ".absolute-all-4", {
+    "top": {x1: 506, y1: 51, x2: 506, y2: 61},
+    "bottom": {x1: 506, y1: 451, x2: 506, y2: 251},
+    "left": {x1: 401, y1: 156, x2: 411, y2: 156},
+    "right": {x1: 901, y1: 156, x2: 601, y2: 156}
   });
 
-  yield checkArrows(highlighter, inspector, testActor, ".relative", {
-   "top": {x1: 901, y1: 51, x2: 901, y2: 91},
-   "left": {x1: 401, y1: 97, x2: 651, y2: 97}
+  yield checkArrowsAndHandlers(helper, ".relative", {
+    "top": {x1: 901, y1: 51, x2: 901, y2: 91},
+    "left": {x1: 401, y1: 97, x2: 651, y2: 97}
   });
 
-  yield checkArrows(highlighter, inspector, testActor, ".fixed", {
-   "top": {x1: 25, y1: 0, x2: 25, y2: 400},
-   "left": {x1: 0, y1: 425, x2: 0, y2: 425}
+  yield checkArrowsAndHandlers(helper, ".fixed", {
+    "top": {x1: 25, y1: 0, x2: 25, y2: 400},
+    "left": {x1: 0, y1: 425, x2: 0, y2: 425}
   });
 
   info("Hiding the highlighter");
-  yield highlighter.hide();
-  yield highlighter.finalize();
+  yield hide();
+  yield finalize();
 });
 
-function* checkArrows(highlighter, inspector, testActor, selector, arrows) {
+function* checkArrowsAndHandlers(helper, selector, arrows) {
   info("Highlighting the test node " + selector);
-  let node = yield getNodeFront(selector, inspector);
-  yield highlighter.show(node);
+
+  yield helper.show(selector);
 
   for (let side in arrows) {
-    yield checkArrow(highlighter, testActor, side, arrows[side]);
+    yield checkArrowAndHandler(helper, side, arrows[side]);
   }
 }
 
-function* checkArrow(highlighter, testActor, name, expectedCoordinates) {
-  for (let coordinate in expectedCoordinates) {
-    let value = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + name, coordinate, highlighter);
-    is(Math.floor(value), expectedCoordinates[coordinate],
+function* checkArrowAndHandler({getElementAttribute}, name, expectedCoords) {
+  info("Checking " + name + "arrow and handler coordinates are correct");
+
+  let handlerX = yield getElementAttribute("handler-" + name, "cx");
+  let handlerY = yield getElementAttribute("handler-" + name, "cy");
+
+  let expectedHandlerX = yield getElementAttribute("arrow-" + name,
+                                handlerMap[name].cx);
+  let expectedHandlerY = yield getElementAttribute("arrow-" + name,
+                                handlerMap[name].cy);
+
+  is(handlerX, expectedHandlerX,
+    "coordinate X for handler " + name + " is correct.");
+  is(handlerY, expectedHandlerY,
+    "coordinate Y for handler " + name + " is correct.");
+
+  for (let coordinate in expectedCoords) {
+    let value = yield getElementAttribute("arrow-" + name, coordinate);
+
+    is(Math.floor(value), expectedCoords[coordinate],
       coordinate + " coordinate for arrow " + name + " is correct");
   }
 }

--- a/devtools/client/inspector/test/browser_inspector_highlighter-geometry_05.js
+++ b/devtools/client/inspector/test/browser_inspector_highlighter-geometry_05.js
@@ -1,134 +1,119 @@
 /* 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/. */
 
+ /* Globals defined in: devtools/client/inspector/test/head.js */
+
 "use strict";
 
-// Test that the arrows and offsetparent and currentnode elements of the
-// geometry highlighter only appear when needed.
+// Test that the arrows/handlers and offsetparent and currentnode elements of
+// the geometry highlighter only appear when needed.
 
 const TEST_URL = URL_ROOT + "doc_inspector_highlighter-geometry_02.html";
 const ID = "geometry-editor-";
+const HIGHLIGHTER_TYPE = "GeometryEditorHighlighter";
 
 const TEST_DATA = [{
   selector: "body",
   isOffsetParentVisible: false,
   isCurrentNodeVisible: false,
-  hasVisibleArrows: false,
-  isSizeVisible: false
+  hasVisibleArrowsAndHandlers: false
 }, {
   selector: "h1",
   isOffsetParentVisible: false,
   isCurrentNodeVisible: false,
-  hasVisibleArrows: false,
-  isSizeVisible: false
+  hasVisibleArrowsAndHandlers: false
 }, {
   selector: ".absolute",
   isOffsetParentVisible: false,
   isCurrentNodeVisible: true,
-  hasVisibleArrows: true,
-  isSizeVisible: false
+  hasVisibleArrowsAndHandlers: true
 }, {
   selector: "#absolute-container",
   isOffsetParentVisible: false,
   isCurrentNodeVisible: true,
-  hasVisibleArrows: false,
-  isSizeVisible: true
+  hasVisibleArrowsAndHandlers: false
 }, {
   selector: ".absolute-bottom-right",
   isOffsetParentVisible: true,
   isCurrentNodeVisible: true,
-  hasVisibleArrows: true,
-  isSizeVisible: false
+  hasVisibleArrowsAndHandlers: true
 }, {
   selector: ".absolute-width-margin",
   isOffsetParentVisible: true,
   isCurrentNodeVisible: true,
-  hasVisibleArrows: true,
-  isSizeVisible: true
+  hasVisibleArrowsAndHandlers: true
 }, {
   selector: ".absolute-all-4",
   isOffsetParentVisible: true,
   isCurrentNodeVisible: true,
-  hasVisibleArrows: true,
-  isSizeVisible: false
+  hasVisibleArrowsAndHandlers: true
 }, {
   selector: ".relative",
   isOffsetParentVisible: true,
   isCurrentNodeVisible: true,
-  hasVisibleArrows: true,
-  isSizeVisible: false
+  hasVisibleArrowsAndHandlers: true
 }, {
   selector: ".static",
   isOffsetParentVisible: false,
   isCurrentNodeVisible: false,
-  hasVisibleArrows: false,
-  isSizeVisible: false
+  hasVisibleArrowsAndHandlers: false
 }, {
   selector: ".static-size",
   isOffsetParentVisible: false,
   isCurrentNodeVisible: true,
-  hasVisibleArrows: false,
-  isSizeVisible: true
+  hasVisibleArrowsAndHandlers: false
 }, {
   selector: ".fixed",
   isOffsetParentVisible: false,
   isCurrentNodeVisible: true,
-  hasVisibleArrows: true,
-  isSizeVisible: false
+  hasVisibleArrowsAndHandlers: true
 }];
 
-add_task(function*() {
-  let {inspector, testActor} = yield openInspectorForURL(TEST_URL);
-  let front = inspector.inspector;
+add_task(function* () {
+  let helper = yield openInspectorForURL(TEST_URL)
+                       .then(getHighlighterHelperFor(HIGHLIGHTER_TYPE));
 
-  let highlighter = yield front.getHighlighterByType("GeometryEditorHighlighter");
+  helper.prefix = ID;
+
+  let { hide, finalize } = helper;
 
   for (let data of TEST_DATA) {
-    yield testNode(inspector, highlighter, testActor, data);
+    yield testNode(helper, data);
   }
 
   info("Hiding the highlighter");
-  yield highlighter.hide();
-  yield highlighter.finalize();
+  yield hide();
+  yield finalize();
 });
 
-function* testNode(inspector, highlighter, testActor, data) {
-  info("Highlighting the test node " + data.selector);
-  let node = yield getNodeFront(data.selector, inspector);
-  yield highlighter.show(node);
+function* testNode(helper, data) {
+  let { selector } = data;
+  yield helper.show(data.selector);
 
-  is((yield isOffsetParentVisible(highlighter, testActor)), data.isOffsetParentVisible,
-    "The offset-parent highlighter visibility is correct for node " + data.selector);
-  is((yield isCurrentNodeVisible(highlighter, testActor)), data.isCurrentNodeVisible,
-    "The current-node highlighter visibility is correct for node " + data.selector);
-  is((yield hasVisibleArrows(highlighter, testActor)), data.hasVisibleArrows,
-    "The arrows visibility is correct for node " + data.selector);
-  is((yield isSizeVisible(highlighter, testActor)), data.isSizeVisible,
-    "The size label visibility is correct for node " + data.selector);
+  is((yield isOffsetParentVisible(helper)), data.isOffsetParentVisible,
+    "The offset-parent highlighter visibility is correct for node " + selector);
+  is((yield isCurrentNodeVisible(helper)), data.isCurrentNodeVisible,
+    "The current-node highlighter visibility is correct for node " + selector);
+  is((yield hasVisibleArrowsAndHandlers(helper)),
+    data.hasVisibleArrowsAndHandlers,
+    "The arrows visibility is correct for node " + selector);
 }
 
-function* isOffsetParentVisible(highlighter, testActor) {
-  let hidden = yield testActor.getHighlighterNodeAttribute(ID + "offset-parent", "hidden", highlighter);
-  return !hidden;
+function* isOffsetParentVisible({isElementHidden}) {
+  return !(yield isElementHidden("offset-parent"));
 }
 
-function* isCurrentNodeVisible(highlighter, testActor) {
-  let hidden = yield testActor.getHighlighterNodeAttribute(ID + "current-node", "hidden", highlighter);
-  return !hidden;
+function* isCurrentNodeVisible({isElementHidden}) {
+  return !(yield isElementHidden("current-node"));
 }
 
-function* hasVisibleArrows(highlighter, testActor) {
+function* hasVisibleArrowsAndHandlers({isElementHidden}) {
   for (let side of ["top", "left", "bottom", "right"]) {
-    let hidden = yield testActor.getHighlighterNodeAttribute(ID + "arrow-" + side, "hidden", highlighter);
+    let hidden = yield isElementHidden("arrow-" + side);
     if (!hidden) {
-      return true;
+      return !(yield isElementHidden("handler-" + side));
     }
   }
   return false;
 }
-
-function* isSizeVisible(highlighter, testActor) {
-  let hidden = yield testActor.getHighlighterNodeAttribute(ID + "label-size", "hidden", highlighter);
-  return !hidden;
-}

--- a/devtools/client/inspector/test/doc_inspector_highlighter-geometry_01.html
+++ b/devtools/client/inspector/test/doc_inspector_highlighter-geometry_01.html
@@ -23,17 +23,17 @@
       position: absolute;
       background: #f06;
     }
     .pos-top-left {
       top: 30px;
       left: 25%;
     }
     .pos-bottom-right {
-      bottom: 5em;
+      bottom: 10em;
       right: -10px;
     }
 
     .inline-positioned {
       background: yellow;
     }
 
     #absolute-container {

--- a/devtools/client/inspector/test/head.js
+++ b/devtools/client/inspector/test/head.js
@@ -470,24 +470,46 @@ function* getNodeFrontForSelector(select
  */
 const getHighlighterHelperFor = (type) => Task.async(
   function*({inspector, testActor}) {
     let front = inspector.inspector;
     let highlighter = yield front.getHighlighterByType(type);
 
     let prefix = "";
 
+    // Internals for mouse events
+    let prevX, prevY;
+
+    // Highlighted node
+    let  highlightedNode = null;
+
     return {
       set prefix(value) {
         prefix = value;
       },
+      get highlightedNode() {
+        if (!highlightedNode) {
+          return null;
+        }
+
+        return {
+          getComputedStyle: function*(options = {}) {
+            return yield inspector.pageStyle.getComputed(
+              highlightedNode, options);
+          }
+        };
+      },
 
       show: function*(selector = ":root") {
-        let node = yield getNodeFront(selector, inspector);
-        yield highlighter.show(node);
+        highlightedNode = yield getNodeFront(selector, inspector);
+        return yield highlighter.show(highlightedNode);
+      },
+
+      hide: function*() {
+        yield highlighter.hide();
       },
 
       isElementHidden: function*(id) {
         return (yield testActor.getHighlighterNodeAttribute(
           prefix + id, "hidden", highlighter)) === "true";
       },
 
       getElementTextContent: function*(id) {
@@ -496,20 +518,45 @@ const getHighlighterHelperFor = (type) =
       },
 
       getElementAttribute: function*(id, name) {
         return yield testActor.getHighlighterNodeAttribute(
           prefix + id, name, highlighter);
       },
 
       synthesizeMouse: function*(options) {
+        options = Object.assign({selector: ":root"}, options);
         yield testActor.synthesizeMouse(options);
       },
 
+      // This object will synthesize any "mouse" prefixed event to the
+      // `testActor`, using the name of method called as suffix for the
+      // event's name.
+      // If no x, y coords are given, the previous ones are used.
+      //
+      // For example:
+      //   mouse.down(10, 20); // synthesize "mousedown" at 10,20
+      //   mouse.move(20, 30); // synthesize "mousemove" at 20,30
+      //   mouse.up();         // synthesize "mouseup" at 20,30
+      mouse: new Proxy({}, {
+        get: (target, name) =>
+          function*(x = prevX, y = prevY) {
+            prevX = x;
+            prevY = y;
+            yield testActor.synthesizeMouse({
+              selector: ":root", x, y, options: {type: "mouse" + name}});
+          }
+      }),
+
+      reflow: function*() {
+        yield testActor.reflow();
+      },
+
       finalize: function*() {
+        highlightedNode = null;
         yield highlighter.finalize();
       }
     };
   }
 );
 
 // The expand all operation of the markup-view calls itself recursively and
 // there's not one event we can wait for to know when it's done

--- a/devtools/client/shared/test/test-actor.js
+++ b/devtools/client/shared/test/test-actor.js
@@ -615,16 +615,27 @@ var TestActor = exports.TestActor = prot
       y: Arg(1, "number"),
       relative: Arg(2, "nullable:boolean"),
     },
     response: {
       value: RetVal("json")
     }
   }),
 
+  /**
+   * Forces the reflow and waits for the next repaint.
+   */
+  reflow: protocol.method(function () {
+    let deferred = promise.defer();
+    this.content.document.documentElement.offsetWidth;
+    this.content.requestAnimationFrame(deferred.resolve);
+
+    return deferred.promise;
+  }),
+
   getNodeRect: protocol.method(Task.async(function* (selector) {
     let node = this._querySelector(selector);
     return getRect(this.content, node, this.content);
   }), {
     request: {
       selector: Arg(0, "string")
     },
     response: {