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