diff -r 000000000000 -r 6474c204b198 toolkit/devtools/server/actors/highlighter.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/toolkit/devtools/server/actors/highlighter.js	Wed Dec 31 06:09:35 2014 +0100
@@ -0,0 +1,891 @@
+/* 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";
+
+const {Cu, Cc, Ci} = require("chrome");
+const Services = require("Services");
+const protocol = require("devtools/server/protocol");
+const {Arg, Option, method} = protocol;
+const events = require("sdk/event/core");
+
+const EventEmitter = require("devtools/toolkit/event-emitter");
+const GUIDE_STROKE_WIDTH = 1;
+
+// Make sure the domnode type is known here
+require("devtools/server/actors/inspector");
+
+Cu.import("resource://gre/modules/devtools/LayoutHelpers.jsm");
+Cu.import("resource://gre/modules/XPCOMUtils.jsm");
+
+// FIXME: add ":visited" and ":link" after bug 713106 is fixed
+const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
+const HIGHLIGHTED_PSEUDO_CLASS = ":-moz-devtools-highlighted";
+let HELPER_SHEET = ".__fx-devtools-hide-shortcut__ { visibility: hidden !important } ";
+HELPER_SHEET += ":-moz-devtools-highlighted { outline: 2px dashed #F06!important; outline-offset: -2px!important } ";
+const XHTML_NS = "http://www.w3.org/1999/xhtml";
+const SVG_NS = "http://www.w3.org/2000/svg";
+const HIGHLIGHTER_PICKED_TIMER = 1000;
+const INFO_BAR_OFFSET = 5;
+
+/**
+ * The HighlighterActor is the server-side entry points for any tool that wishes
+ * to highlight elements in the content document.
+ *
+ * The highlighter can be retrieved via the inspector's getHighlighter method.
+ */
+
+/**
+ * The HighlighterActor class
+ */
+let HighlighterActor = protocol.ActorClass({
+  typeName: "highlighter",
+
+  initialize: function(inspector, autohide) {
+    protocol.Actor.prototype.initialize.call(this, null);
+
+    this._autohide = autohide;
+    this._inspector = inspector;
+    this._walker = this._inspector.walker;
+    this._tabActor = this._inspector.tabActor;
+
+    this._highlighterReady = this._highlighterReady.bind(this);
+    this._highlighterHidden = this._highlighterHidden.bind(this);
+
+    if (this._supportsBoxModelHighlighter()) {
+      this._boxModelHighlighter =
+        new BoxModelHighlighter(this._tabActor, this._inspector);
+
+        this._boxModelHighlighter.on("ready", this._highlighterReady);
+        this._boxModelHighlighter.on("hide", this._highlighterHidden);
+    } else {
+      this._boxModelHighlighter = new SimpleOutlineHighlighter(this._tabActor);
+    }
+  },
+
+  get conn() this._inspector && this._inspector.conn,
+
+  /**
+   * Can the host support the box model highlighter which requires a parent
+   * XUL node to attach itself.
+   */
+  _supportsBoxModelHighlighter: function() {
+    // Note that <browser>s on Fennec also have a XUL parentNode but the box
+    // model highlighter doesn't display correctly on Fennec (bug 993190)
+    return this._tabActor.browser &&
+           !!this._tabActor.browser.parentNode &&
+           Services.appinfo.ID !== "{aa3c5121-dab2-40e2-81ca-7ea25febc110}";
+  },
+
+  destroy: function() {
+    protocol.Actor.prototype.destroy.call(this);
+    if (this._boxModelHighlighter) {
+      this._boxModelHighlighter.off("ready", this._highlighterReady);
+      this._boxModelHighlighter.off("hide", this._highlighterHidden);
+      this._boxModelHighlighter.destroy();
+      this._boxModelHighlighter = null;
+    }
+    this._autohide = null;
+    this._inspector = null;
+    this._walker = null;
+    this._tabActor = null;
+  },
+
+  /**
+   * Display the box model highlighting on a given NodeActor.
+   * There is only one instance of the box model highlighter, so calling this
+   * method several times won't display several highlighters, it will just move
+   * the highlighter instance to these nodes.
+   *
+   * @param NodeActor The node to be highlighted
+   * @param Options See the request part for existing options. Note that not
+   * all options may be supported by all types of highlighters.
+   */
+  showBoxModel: method(function(node, options={}) {
+    if (node && this._isNodeValidForHighlighting(node.rawNode)) {
+      this._boxModelHighlighter.show(node.rawNode, options);
+    } else {
+      this._boxModelHighlighter.hide();
+    }
+  }, {
+    request: {
+      node: Arg(0, "domnode"),
+      region: Option(1)
+    }
+  }),
+
+  _isNodeValidForHighlighting: function(node) {
+    // Is it null or dead?
+    let isNotDead = node && !Cu.isDeadWrapper(node);
+
+    // Is it connected to the document?
+    let isConnected = false;
+    try {
+      let doc = node.ownerDocument;
+      isConnected = (doc && doc.defaultView && doc.documentElement.contains(node));
+    } catch (e) {
+      // "can't access dead object" error
+    }
+
+    // Is it an element node
+    let isElementNode = node.nodeType === Ci.nsIDOMNode.ELEMENT_NODE;
+
+    return isNotDead && isConnected && isElementNode;
+  },
+
+  /**
+   * Hide the box model highlighting if it was shown before
+   */
+  hideBoxModel: method(function() {
+    this._boxModelHighlighter.hide();
+  }, {
+    request: {}
+  }),
+
+  /**
+   * Pick a node on click, and highlight hovered nodes in the process.
+   *
+   * This method doesn't respond anything interesting, however, it starts
+   * mousemove, and click listeners on the content document to fire
+   * events and let connected clients know when nodes are hovered over or
+   * clicked.
+   *
+   * Once a node is picked, events will cease, and listeners will be removed.
+   */
+  _isPicking: false,
+  _hoveredNode: null,
+
+  pick: method(function() {
+    if (this._isPicking) {
+      return null;
+    }
+    this._isPicking = true;
+
+    this._preventContentEvent = event => {
+      event.stopPropagation();
+      event.preventDefault();
+    };
+
+    this._onPick = event => {
+      this._preventContentEvent(event);
+      this._stopPickerListeners();
+      this._isPicking = false;
+      if (this._autohide) {
+        this._tabActor.window.setTimeout(() => {
+          this._boxModelHighlighter.hide();
+        }, HIGHLIGHTER_PICKED_TIMER);
+      }
+      events.emit(this._walker, "picker-node-picked", this._findAndAttachElement(event));
+    };
+
+    this._onHovered = event => {
+      this._preventContentEvent(event);
+      let res = this._findAndAttachElement(event);
+      if (this._hoveredNode !== res.node) {
+        this._boxModelHighlighter.show(res.node.rawNode);
+        events.emit(this._walker, "picker-node-hovered", res);
+        this._hoveredNode = res.node;
+      }
+    };
+
+    this._tabActor.window.focus();
+    this._startPickerListeners();
+
+    return null;
+  }),
+
+  _findAndAttachElement: function(event) {
+    let doc = event.target.ownerDocument;
+
+    let x = event.clientX;
+    let y = event.clientY;
+
+    let node = doc.elementFromPoint(x, y);
+    return this._walker.attachElement(node);
+  },
+
+  /**
+   * Get the right target for listening to mouse events while in pick mode.
+   * - On a firefox desktop content page: tabActor is a BrowserTabActor from
+   *   which the browser property will give us a target we can use to listen to
+   *   events, even in nested iframes.
+   * - On B2G: tabActor is a ContentActor which doesn't have a browser but
+   *   since it overrides BrowserTabActor, it does get a browser property
+   *   anyway, which points to its window object.
+   * - When using the Browser Toolbox (to inspect firefox desktop): tabActor is
+   *   the RootActor, in which case, the window property can be used to listen
+   *   to events
+   */
+  _getPickerListenerTarget: function() {
+    let actor = this._tabActor;
+    return actor.isRootActor ? actor.window : actor.chromeEventHandler;
+  },
+
+  _startPickerListeners: function() {
+    let target = this._getPickerListenerTarget();
+    target.addEventListener("mousemove", this._onHovered, true);
+    target.addEventListener("click", this._onPick, true);
+    target.addEventListener("mousedown", this._preventContentEvent, true);
+    target.addEventListener("mouseup", this._preventContentEvent, true);
+    target.addEventListener("dblclick", this._preventContentEvent, true);
+  },
+
+  _stopPickerListeners: function() {
+    let target = this._getPickerListenerTarget();
+    target.removeEventListener("mousemove", this._onHovered, true);
+    target.removeEventListener("click", this._onPick, true);
+    target.removeEventListener("mousedown", this._preventContentEvent, true);
+    target.removeEventListener("mouseup", this._preventContentEvent, true);
+    target.removeEventListener("dblclick", this._preventContentEvent, true);
+  },
+
+  _highlighterReady: function() {
+    events.emit(this._inspector.walker, "highlighter-ready");
+  },
+
+  _highlighterHidden: function() {
+    events.emit(this._inspector.walker, "highlighter-hide");
+  },
+
+  cancelPick: method(function() {
+    if (this._isPicking) {
+      this._boxModelHighlighter.hide();
+      this._stopPickerListeners();
+      this._isPicking = false;
+      this._hoveredNode = null;
+    }
+  })
+});
+
+exports.HighlighterActor = HighlighterActor;
+
+/**
+ * The HighlighterFront class
+ */
+let HighlighterFront = protocol.FrontClass(HighlighterActor, {});
+
+/**
+ * The BoxModelHighlighter is the class that actually draws the the box model
+ * regions on top of a node.
+ * It is used by the HighlighterActor.
+ *
+ * Usage example:
+ *
+ * let h = new BoxModelHighlighter(browser);
+ * h.show(node);
+ * h.hide();
+ * h.destroy();
+ *
+ * Structure:
+ * <stack class="highlighter-container">
+ *   <svg class="box-model-root" hidden="true">
+ *     <g class="box-model-container">
+ *       <polygon class="box-model-margin" points="317,122 747,36 747,181 317,267" />
+ *       <polygon class="box-model-border" points="317,128 747,42 747,161 317,247" />
+ *       <polygon class="box-model-padding" points="323,127 747,42 747,161 323,246" />
+ *       <polygon class="box-model-content" points="335,137 735,57 735,152 335,232" />
+ *     </g>
+ *     <line class="box-model-guide-top" x1="0" y1="592" x2="99999" y2="592" />
+ *     <line class="box-model-guide-right" x1="735" y1="0" x2="735" y2="99999" />
+ *     <line class="box-model-guide-bottom" x1="0" y1="612" x2="99999" y2="612" />
+ *     <line class="box-model-guide-left" x1="334" y1="0" x2="334" y2="99999" />
+ *   </svg>
+ *   <box class="highlighter-nodeinfobar-container">
+ *     <box class="highlighter-nodeinfobar-positioner" position="top" />
+ *       <box class="highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-top" />
+ *       <hbox class="highlighter-nodeinfobar">
+ *         <hbox class="highlighter-nodeinfobar-text" align="center" flex="1">
+ *           <span class="highlighter-nodeinfobar-tagname">Node name</span>
+ *           <span class="highlighter-nodeinfobar-id">Node id</span>
+ *           <span class="highlighter-nodeinfobar-classes">.someClass</span>
+ *           <span class="highlighter-nodeinfobar-pseudo-classes">:hover</span>
+ *         </hbox>
+ *       </hbox>
+ *       <box class="highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-bottom"/>
+ *     </box>
+ *   </box>
+ * </stack>
+ */
+function BoxModelHighlighter(tabActor, inspector) {
+  this.browser = tabActor.browser;
+  this.win = tabActor.window;
+  this.chromeDoc = this.browser.ownerDocument;
+  this.chromeWin = this.chromeDoc.defaultView;
+  this._inspector = inspector;
+
+  this.layoutHelpers = new LayoutHelpers(this.win);
+  this.chromeLayoutHelper = new LayoutHelpers(this.chromeWin);
+
+  this.transitionDisabler = null;
+  this.pageEventsMuter = null;
+  this._update = this._update.bind(this);
+  this.handleEvent = this.handleEvent.bind(this);
+  this.currentNode = null;
+
+  EventEmitter.decorate(this);
+  this._initMarkup();
+}
+
+BoxModelHighlighter.prototype = {
+  get zoom() {
+    return this.win.QueryInterface(Ci.nsIInterfaceRequestor)
+               .getInterface(Ci.nsIDOMWindowUtils).fullZoom;
+  },
+
+  _initMarkup: function() {
+    let stack = this.browser.parentNode;
+
+    this._highlighterContainer = this.chromeDoc.createElement("stack");
+    this._highlighterContainer.className = "highlighter-container";
+
+    this._svgRoot = this._createSVGNode("root", "svg", this._highlighterContainer);
+
+    // Set the SVG canvas height to 0 to stop content jumping around on small
+    // screens.
+    this._svgRoot.setAttribute("height", "0");
+
+    this._boxModelContainer = this._createSVGNode("container", "g", this._svgRoot);
+
+    this._boxModelNodes = {
+      margin: this._createSVGNode("margin", "polygon", this._boxModelContainer),
+      border: this._createSVGNode("border", "polygon", this._boxModelContainer),
+      padding: this._createSVGNode("padding", "polygon", this._boxModelContainer),
+      content: this._createSVGNode("content", "polygon", this._boxModelContainer)
+    };
+
+    this._guideNodes = {
+      top: this._createSVGNode("guide-top", "line", this._svgRoot),
+      right: this._createSVGNode("guide-right", "line", this._svgRoot),
+      bottom: this._createSVGNode("guide-bottom", "line", this._svgRoot),
+      left: this._createSVGNode("guide-left", "line", this._svgRoot)
+    };
+
+    this._guideNodes.top.setAttribute("stroke-width", GUIDE_STROKE_WIDTH);
+    this._guideNodes.right.setAttribute("stroke-width", GUIDE_STROKE_WIDTH);
+    this._guideNodes.bottom.setAttribute("stroke-width", GUIDE_STROKE_WIDTH);
+    this._guideNodes.left.setAttribute("stroke-width", GUIDE_STROKE_WIDTH);
+
+    this._highlighterContainer.appendChild(this._svgRoot);
+
+    let infobarContainer = this.chromeDoc.createElement("box");
+    infobarContainer.className = "highlighter-nodeinfobar-container";
+    this._highlighterContainer.appendChild(infobarContainer);
+
+    // Insert the highlighter right after the browser
+    stack.insertBefore(this._highlighterContainer, stack.childNodes[1]);
+
+    // Building the infobar
+    let infobarPositioner = this.chromeDoc.createElement("box");
+    infobarPositioner.className = "highlighter-nodeinfobar-positioner";
+    infobarPositioner.setAttribute("position", "top");
+    infobarPositioner.setAttribute("disabled", "true");
+
+    let nodeInfobar = this.chromeDoc.createElement("hbox");
+    nodeInfobar.className = "highlighter-nodeinfobar";
+
+    let arrowBoxTop = this.chromeDoc.createElement("box");
+    arrowBoxTop.className = "highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-top";
+
+    let arrowBoxBottom = this.chromeDoc.createElement("box");
+    arrowBoxBottom.className = "highlighter-nodeinfobar-arrow highlighter-nodeinfobar-arrow-bottom";
+
+    let tagNameLabel = this.chromeDoc.createElementNS(XHTML_NS, "span");
+    tagNameLabel.className = "highlighter-nodeinfobar-tagname";
+
+    let idLabel = this.chromeDoc.createElementNS(XHTML_NS, "span");
+    idLabel.className = "highlighter-nodeinfobar-id";
+
+    let classesBox = this.chromeDoc.createElementNS(XHTML_NS, "span");
+    classesBox.className = "highlighter-nodeinfobar-classes";
+
+    let pseudoClassesBox = this.chromeDoc.createElementNS(XHTML_NS, "span");
+    pseudoClassesBox.className = "highlighter-nodeinfobar-pseudo-classes";
+
+    // Add some content to force a better boundingClientRect
+    pseudoClassesBox.textContent = "&nbsp;";
+
+    // <hbox class="highlighter-nodeinfobar-text"/>
+    let texthbox = this.chromeDoc.createElement("hbox");
+    texthbox.className = "highlighter-nodeinfobar-text";
+    texthbox.setAttribute("align", "center");
+    texthbox.setAttribute("flex", "1");
+
+    texthbox.appendChild(tagNameLabel);
+    texthbox.appendChild(idLabel);
+    texthbox.appendChild(classesBox);
+    texthbox.appendChild(pseudoClassesBox);
+
+    nodeInfobar.appendChild(texthbox);
+
+    infobarPositioner.appendChild(arrowBoxTop);
+    infobarPositioner.appendChild(nodeInfobar);
+    infobarPositioner.appendChild(arrowBoxBottom);
+
+    infobarContainer.appendChild(infobarPositioner);
+
+    let barHeight = infobarPositioner.getBoundingClientRect().height;
+
+    this.nodeInfo = {
+      tagNameLabel: tagNameLabel,
+      idLabel: idLabel,
+      classesBox: classesBox,
+      pseudoClassesBox: pseudoClassesBox,
+      positioner: infobarPositioner,
+      barHeight: barHeight,
+    };
+  },
+
+  _createSVGNode: function(classPostfix, nodeType, parent) {
+    let node = this.chromeDoc.createElementNS(SVG_NS, nodeType);
+    node.setAttribute("class", "box-model-" + classPostfix);
+
+    parent.appendChild(node);
+
+    return node;
+  },
+
+  /**
+   * Destroy the nodes. Remove listeners.
+   */
+  destroy: function() {
+    this.hide();
+
+    this.chromeWin.clearTimeout(this.transitionDisabler);
+    this.chromeWin.clearTimeout(this.pageEventsMuter);
+
+    this.nodeInfo = null;
+
+    this._highlighterContainer.remove();
+    this._highlighterContainer = null;
+
+    this.rect = null;
+    this.win = null;
+    this.browser = null;
+    this.chromeDoc = null;
+    this.chromeWin = null;
+    this.currentNode = null;
+  },
+
+  /**
+   * Show the highlighter on a given node
+   *
+   * @param {DOMNode} node
+   * @param {Object} options
+   *        Object used for passing options
+   */
+  show: function(node, options={}) {
+    this.currentNode = node;
+
+    this._showInfobar();
+    this._detachPageListeners();
+    this._attachPageListeners();
+    this._update();
+    this._trackMutations();
+  },
+
+  _trackMutations: function() {
+    if (this.currentNode) {
+      let win = this.currentNode.ownerDocument.defaultView;
+      this.currentNodeObserver = new win.MutationObserver(() => {
+        this._update();
+      });
+      this.currentNodeObserver.observe(this.currentNode, {attributes: true});
+    }
+  },
+
+  _untrackMutations: function() {
+    if (this.currentNode) {
+      if (this.currentNodeObserver) {
+        // The following may fail with a "can't access dead object" exception
+        // when the actor is being destroyed
+        try {
+          this.currentNodeObserver.disconnect();
+        } catch (e) {}
+        this.currentNodeObserver = null;
+      }
+    }
+  },
+
+  /**
+   * 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.currentNode) {
+      if (this._highlightBoxModel(options)) {
+        this._showInfobar();
+      } else {
+        // Nothing to highlight (0px rectangle like a <script> tag for instance)
+        this.hide();
+      }
+      this.emit("ready");
+    }
+  },
+
+  /**
+   * Hide the highlighter, the outline and the infobar.
+   */
+  hide: function() {
+    if (this.currentNode) {
+      this._untrackMutations();
+      this.currentNode = null;
+      this._hideBoxModel();
+      this._hideInfobar();
+      this._detachPageListeners();
+    }
+    this.emit("hide");
+  },
+
+  /**
+   * Hide the infobar
+   */
+  _hideInfobar: function() {
+    this.nodeInfo.positioner.setAttribute("hidden", "true");
+  },
+
+  /**
+   * Show the infobar
+   */
+  _showInfobar: function() {
+    this.nodeInfo.positioner.removeAttribute("hidden");
+    this._updateInfobar();
+  },
+
+  /**
+   * Hide the box model
+   */
+  _hideBoxModel: function() {
+    this._svgRoot.setAttribute("hidden", "true");
+  },
+
+  /**
+   * Show the box model
+   */
+  _showBoxModel: function() {
+    this._svgRoot.removeAttribute("hidden");
+  },
+
+  /**
+   * Highlight the box model.
+   *
+   * @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 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");
+
+    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);
+
+        let boxNode = this._boxModelNodes[boxType];
+        boxNode.setAttribute("points",
+                             p1.x + "," + p1.y + " " +
+                             p2.x + "," + p2.y + " " +
+                             p3.x + "," + p3.y + " " +
+                             p4.x + "," + p4.y);
+
+        if (boxType === options.region) {
+          this._showGuides(p1, p2, p3, p4);
+        }
+      }
+
+      isShown = true;
+      this._showBoxModel();
+    } else {
+      // Only return false if the element really is invisible.
+      // A height of 0 and a non-0 width corresponds to a visible element that
+      // is below the fold for instance
+      if (this.rect.width > 0 || this.rect.height > 0) {
+        isShown = true;
+        this._hideBoxModel();
+      }
+    }
+    return isShown;
+  },
+
+  /**
+   * We only want to show guides for horizontal and vertical edges as this helps
+   * to line them up. This method finds these edges and displays a guide there.
+   *
+   * @param  {DOMPoint} p1
+   *                    Point 1
+   * @param  {DOMPoint} p2
+   *                    Point 2
+   * @param  {DOMPoint} p3 [description]
+   *                    Point 3
+   * @param  {DOMPoint} p4 [description]
+   *                    Point 4
+   */
+  _showGuides: function(p1, p2, p3, p4) {
+    let allX = [p1.x, p2.x, p3.x, p4.x].sort();
+    let allY = [p1.y, p2.y, p3.y, p4.y].sort();
+    let toShowX = [];
+    let toShowY = [];
+
+    for (let arr of [allX, allY]) {
+      for (let i = 0; i < arr.length; i++) {
+        let val = arr[i];
+
+        if (i !== arr.lastIndexOf(val)) {
+          if (arr === allX) {
+            toShowX.push(val);
+          } else {
+            toShowY.push(val);
+          }
+          arr.splice(arr.lastIndexOf(val), 1);
+        }
+      }
+    }
+
+    // Move guide into place or hide it if no valid co-ordinate was found.
+    this._updateGuide(this._guideNodes.top, toShowY[0]);
+    this._updateGuide(this._guideNodes.right, toShowX[1]);
+    this._updateGuide(this._guideNodes.bottom, toShowY[1]);
+    this._updateGuide(this._guideNodes.left, toShowX[0]);
+  },
+
+  /**
+   * Move a guide to the appropriate position and display it. If no point is
+   * passed then the guide is hidden.
+   *
+   * @param  {SVGLine} guide
+   *         The guide to update
+   * @param  {Integer} point
+   *         x or y co-ordinate. If this is undefined we hide the guide.
+   */
+  _updateGuide: function(guide, point=-1) {
+    if (point > 0) {
+      let offset = GUIDE_STROKE_WIDTH / 2;
+
+      if (guide === this._guideNodes.top || guide === this._guideNodes.left) {
+        point -= offset;
+      } else {
+        point += offset;
+      }
+
+      if (guide === this._guideNodes.top || guide === this._guideNodes.bottom) {
+        guide.setAttribute("x1", 0);
+        guide.setAttribute("y1", point);
+        guide.setAttribute("x2", "100%");
+        guide.setAttribute("y2", point);
+      } else {
+        guide.setAttribute("x1", point);
+        guide.setAttribute("y1", 0);
+        guide.setAttribute("x2", point);
+        guide.setAttribute("y2", "100%");
+      }
+      guide.removeAttribute("hidden");
+      return true;
+    } else {
+      guide.setAttribute("hidden", "true");
+      return false;
+    }
+  },
+
+  /**
+   * Update node information (tagName#id.class)
+   */
+  _updateInfobar: function() {
+    if (this.currentNode) {
+      // Tag name
+      this.nodeInfo.tagNameLabel.textContent = this.currentNode.tagName;
+
+      // ID
+      this.nodeInfo.idLabel.textContent = this.currentNode.id ? "#" + this.currentNode.id : "";
+
+      // Classes
+      let classes = this.nodeInfo.classesBox;
+
+      classes.textContent = this.currentNode.classList.length ?
+                              "." + Array.join(this.currentNode.classList, ".") : "";
+
+      // Pseudo-classes
+      let pseudos = PSEUDO_CLASSES.filter(pseudo => {
+        return DOMUtils.hasPseudoClassLock(this.currentNode, pseudo);
+      }, this);
+
+      let pseudoBox = this.nodeInfo.pseudoClassesBox;
+      pseudoBox.textContent = pseudos.join("");
+
+      this._moveInfobar();
+    }
+  },
+
+  /**
+   * Move the Infobar to the right place in the highlighter.
+   */
+  _moveInfobar: function() {
+    if (this.rect) {
+      let bounds = this.rect.bounds;
+      let winHeight = this.win.innerHeight * this.zoom;
+      let winWidth = this.win.innerWidth * this.zoom;
+
+      this.nodeInfo.positioner.removeAttribute("disabled");
+      // Can the bar be above the node?
+      if (bounds.top < this.nodeInfo.barHeight) {
+        // No. Can we move the toolbar under the node?
+        if (bounds.bottom + this.nodeInfo.barHeight > winHeight) {
+          // No. Let's move it inside.
+          this.nodeInfo.positioner.style.top = bounds.top + "px";
+          this.nodeInfo.positioner.setAttribute("position", "overlap");
+        } else {
+          // Yes. Let's move it under the node.
+          this.nodeInfo.positioner.style.top = bounds.bottom - INFO_BAR_OFFSET + "px";
+          this.nodeInfo.positioner.setAttribute("position", "bottom");
+        }
+      } else {
+        // Yes. Let's move it on top of the node.
+        this.nodeInfo.positioner.style.top =
+          bounds.top + INFO_BAR_OFFSET - this.nodeInfo.barHeight + "px";
+        this.nodeInfo.positioner.setAttribute("position", "top");
+      }
+
+      let barWidth = this.nodeInfo.positioner.getBoundingClientRect().width;
+      let left = bounds.right - bounds.width / 2 - barWidth / 2;
+
+      // Make sure the whole infobar is visible
+      if (left < 0) {
+        left = 0;
+        this.nodeInfo.positioner.setAttribute("hide-arrow", "true");
+      } else {
+        if (left + barWidth > winWidth) {
+          left = winWidth - barWidth;
+          this.nodeInfo.positioner.setAttribute("hide-arrow", "true");
+        } else {
+          this.nodeInfo.positioner.removeAttribute("hide-arrow");
+        }
+      }
+      this.nodeInfo.positioner.style.left = left + "px";
+    } else {
+      this.nodeInfo.positioner.style.left = "0";
+      this.nodeInfo.positioner.style.top = "0";
+      this.nodeInfo.positioner.setAttribute("position", "top");
+      this.nodeInfo.positioner.setAttribute("hide-arrow", "true");
+    }
+  },
+
+  _attachPageListeners: function() {
+    if (this.currentNode) {
+      let win = this.currentNode.ownerGlobal;
+
+      win.addEventListener("scroll", this, false);
+      win.addEventListener("resize", this, false);
+      win.addEventListener("MozAfterPaint", this, false);
+    }
+  },
+
+  _detachPageListeners: function() {
+    if (this.currentNode) {
+      let win = this.currentNode.ownerGlobal;
+
+      win.removeEventListener("scroll", this, false);
+      win.removeEventListener("resize", this, false);
+      win.removeEventListener("MozAfterPaint", this, false);
+    }
+  },
+
+  /**
+   * Generic event handler.
+   *
+   * @param nsIDOMEvent aEvent
+   *        The DOM event object.
+   */
+  handleEvent: function(event) {
+    switch (event.type) {
+      case "resize":
+      case "MozAfterPaint":
+      case "scroll":
+        this._update();
+        break;
+    }
+  },
+};
+
+/**
+ * The SimpleOutlineHighlighter is a class that has the same API than the
+ * BoxModelHighlighter, but adds a pseudo-class on the target element itself
+ * to draw a simple outline.
+ * It is used by the HighlighterActor too, but in case the more complex
+ * BoxModelHighlighter can't be attached (which is the case for FirefoxOS and
+ * Fennec targets for instance).
+ */
+function SimpleOutlineHighlighter(tabActor) {
+  this.chromeDoc = tabActor.window.document;
+}
+
+SimpleOutlineHighlighter.prototype = {
+  /**
+   * Destroy the nodes. Remove listeners.
+   */
+  destroy: function() {
+    this.hide();
+    if (this.installedHelpers) {
+      this.installedHelpers.clear();
+    }
+    this.chromeDoc = null;
+  },
+
+  _installHelperSheet: function(node) {
+    if (!this.installedHelpers) {
+      this.installedHelpers = new WeakMap;
+    }
+    let win = node.ownerDocument.defaultView;
+    if (!this.installedHelpers.has(win)) {
+      let {Style} = require("sdk/stylesheet/style");
+      let {attach} = require("sdk/content/mod");
+      let style = Style({source: HELPER_SHEET, type: "agent"});
+      attach(style, win);
+      this.installedHelpers.set(win, style);
+    }
+  },
+
+  /**
+   * Show the highlighter on a given node
+   * @param {DOMNode} node
+   */
+  show: function(node) {
+    if (!this.currentNode || node !== this.currentNode) {
+      this.hide();
+      this.currentNode = node;
+      this._installHelperSheet(node);
+      DOMUtils.addPseudoClassLock(node, HIGHLIGHTED_PSEUDO_CLASS);
+    }
+  },
+
+  /**
+   * Hide the highlighter, the outline and the infobar.
+   */
+  hide: function() {
+    if (this.currentNode) {
+      DOMUtils.removePseudoClassLock(this.currentNode, HIGHLIGHTED_PSEUDO_CLASS);
+      this.currentNode = null;
+    }
+  }
+};
+
+XPCOMUtils.defineLazyGetter(this, "DOMUtils", function () {
+  return Cc["@mozilla.org/inspector/dom-utils;1"].getService(Ci.inIDOMUtils)
+});