michael@0: /* -*- Mode: Javascript; tab-width: 2; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
michael@0: /* vim: set ft=javascript ts=2 et sw=2 tw=80: */
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: const {Cc, Cu, Ci} = require("chrome");
michael@0: 
michael@0: const PSEUDO_CLASSES = [":hover", ":active", ":focus"];
michael@0: const ENSURE_SELECTION_VISIBLE_DELAY = 50; // ms
michael@0: 
michael@0: Cu.import("resource://gre/modules/XPCOMUtils.jsm");
michael@0: Cu.import("resource:///modules/devtools/DOMHelpers.jsm");
michael@0: Cu.import("resource://gre/modules/Services.jsm");
michael@0: Cu.import("resource:///modules/devtools/ViewHelpers.jsm");
michael@0: const ELLIPSIS = Services.prefs.getComplexValue("intl.ellipsis", Ci.nsIPrefLocalizedString).data;
michael@0: const MAX_LABEL_LENGTH = 40;
michael@0: 
michael@0: let promise = require("devtools/toolkit/deprecated-sync-thenables");
michael@0: 
michael@0: const LOW_PRIORITY_ELEMENTS = {
michael@0:   "HEAD": true,
michael@0:   "BASE": true,
michael@0:   "BASEFONT": true,
michael@0:   "ISINDEX": true,
michael@0:   "LINK": true,
michael@0:   "META": true,
michael@0:   "SCRIPT": true,
michael@0:   "STYLE": true,
michael@0:   "TITLE": true,
michael@0: };
michael@0: 
michael@0: function resolveNextTick(value) {
michael@0:   let deferred = promise.defer();
michael@0:   Services.tm.mainThread.dispatch(() => {
michael@0:     try {
michael@0:       deferred.resolve(value);
michael@0:     } catch(ex) {
michael@0:       console.error(ex);
michael@0:     }
michael@0:   }, Ci.nsIThread.DISPATCH_NORMAL);
michael@0:   return deferred.promise;
michael@0: }
michael@0: 
michael@0: ///////////////////////////////////////////////////////////////////////////
michael@0: //// HTML Breadcrumbs
michael@0: 
michael@0: /**
michael@0:  * Display the ancestors of the current node and its children.
michael@0:  * Only one "branch" of children are displayed (only one line).
michael@0:  *
michael@0:  * FIXME: Bug 822388 - Use the BreadcrumbsWidget in the Inspector.
michael@0:  *
michael@0:  * Mechanism:
michael@0:  * . If no nodes displayed yet:
michael@0:  *    then display the ancestor of the selected node and the selected node;
michael@0:  *   else select the node;
michael@0:  * . If the selected node is the last node displayed, append its first (if any).
michael@0:  */
michael@0: function HTMLBreadcrumbs(aInspector)
michael@0: {
michael@0:   this.inspector = aInspector;
michael@0:   this.selection = this.inspector.selection;
michael@0:   this.chromeWin = this.inspector.panelWin;
michael@0:   this.chromeDoc = this.inspector.panelDoc;
michael@0:   this.DOMHelpers = new DOMHelpers(this.chromeWin);
michael@0:   this._init();
michael@0: }
michael@0: 
michael@0: exports.HTMLBreadcrumbs = HTMLBreadcrumbs;
michael@0: 
michael@0: HTMLBreadcrumbs.prototype = {
michael@0:   get walker() this.inspector.walker,
michael@0: 
michael@0:   _init: function BC__init()
michael@0:   {
michael@0:     this.container = this.chromeDoc.getElementById("inspector-breadcrumbs");
michael@0: 
michael@0:     // These separators are used for CSS purposes only, and are positioned
michael@0:     // off screen, but displayed with -moz-element.
michael@0:     this.separators = this.chromeDoc.createElement("box");
michael@0:     this.separators.className = "breadcrumb-separator-container";
michael@0:     this.separators.innerHTML =
michael@0:                       "<box id='breadcrumb-separator-before'></box>" +
michael@0:                       "<box id='breadcrumb-separator-after'></box>" +
michael@0:                       "<box id='breadcrumb-separator-normal'></box>";
michael@0:     this.container.parentNode.appendChild(this.separators);
michael@0: 
michael@0:     this.container.addEventListener("mousedown", this, true);
michael@0:     this.container.addEventListener("keypress", this, true);
michael@0: 
michael@0:     // We will save a list of already displayed nodes in this array.
michael@0:     this.nodeHierarchy = [];
michael@0: 
michael@0:     // Last selected node in nodeHierarchy.
michael@0:     this.currentIndex = -1;
michael@0: 
michael@0:     // By default, hide the arrows. We let the <scrollbox> show them
michael@0:     // in case of overflow.
michael@0:     this.container.removeAttribute("overflows");
michael@0:     this.container._scrollButtonUp.collapsed = true;
michael@0:     this.container._scrollButtonDown.collapsed = true;
michael@0: 
michael@0:     this.onscrollboxreflow = function() {
michael@0:       if (this.container._scrollButtonDown.collapsed)
michael@0:         this.container.removeAttribute("overflows");
michael@0:       else
michael@0:         this.container.setAttribute("overflows", true);
michael@0:     }.bind(this);
michael@0: 
michael@0:     this.container.addEventListener("underflow", this.onscrollboxreflow, false);
michael@0:     this.container.addEventListener("overflow", this.onscrollboxreflow, false);
michael@0: 
michael@0:     this.update = this.update.bind(this);
michael@0:     this.updateSelectors = this.updateSelectors.bind(this);
michael@0:     this.selection.on("new-node-front", this.update);
michael@0:     this.selection.on("pseudoclass", this.updateSelectors);
michael@0:     this.selection.on("attribute-changed", this.updateSelectors);
michael@0:     this.inspector.on("markupmutation", this.update);
michael@0:     this.update();
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Include in a promise's then() chain to reject the chain
michael@0:    * when the breadcrumbs' selection has changed while the promise
michael@0:    * was outstanding.
michael@0:    */
michael@0:   selectionGuard: function() {
michael@0:     let selection = this.selection.nodeFront;
michael@0:     return (result) => {
michael@0:       if (selection != this.selection.nodeFront) {
michael@0:         return promise.reject("selection-changed");
michael@0:       }
michael@0:       return result;
michael@0:     }
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Print any errors (except selection guard errors).
michael@0:    */
michael@0:   selectionGuardEnd: function(err) {
michael@0:     if (err != "selection-changed") {
michael@0:       console.error(err);
michael@0:     }
michael@0:     promise.reject(err);
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Build a string that represents the node: tagName#id.class1.class2.
michael@0:    *
michael@0:    * @param aNode The node to pretty-print
michael@0:    * @returns a string
michael@0:    */
michael@0:   prettyPrintNodeAsText: function BC_prettyPrintNodeText(aNode)
michael@0:   {
michael@0:     let text = aNode.tagName.toLowerCase();
michael@0:     if (aNode.id) {
michael@0:       text += "#" + aNode.id;
michael@0:     }
michael@0: 
michael@0:     if (aNode.className) {
michael@0:       let classList = aNode.className.split(/\s+/);
michael@0:       for (let i = 0; i < classList.length; i++) {
michael@0:         text += "." + classList[i];
michael@0:       }
michael@0:     }
michael@0: 
michael@0:     for (let pseudo of aNode.pseudoClassLocks) {
michael@0:       text += pseudo;
michael@0:     }
michael@0: 
michael@0:     return text;
michael@0:   },
michael@0: 
michael@0: 
michael@0:   /**
michael@0:    * Build <label>s that represent the node:
michael@0:    *   <label class="breadcrumbs-widget-item-tag">tagName</label>
michael@0:    *   <label class="breadcrumbs-widget-item-id">#id</label>
michael@0:    *   <label class="breadcrumbs-widget-item-classes">.class1.class2</label>
michael@0:    *
michael@0:    * @param aNode The node to pretty-print
michael@0:    * @returns a document fragment.
michael@0:    */
michael@0:   prettyPrintNodeAsXUL: function BC_prettyPrintNodeXUL(aNode)
michael@0:   {
michael@0:     let fragment = this.chromeDoc.createDocumentFragment();
michael@0: 
michael@0:     let tagLabel = this.chromeDoc.createElement("label");
michael@0:     tagLabel.className = "breadcrumbs-widget-item-tag plain";
michael@0: 
michael@0:     let idLabel = this.chromeDoc.createElement("label");
michael@0:     idLabel.className = "breadcrumbs-widget-item-id plain";
michael@0: 
michael@0:     let classesLabel = this.chromeDoc.createElement("label");
michael@0:     classesLabel.className = "breadcrumbs-widget-item-classes plain";
michael@0: 
michael@0:     let pseudosLabel = this.chromeDoc.createElement("label");
michael@0:     pseudosLabel.className = "breadcrumbs-widget-item-pseudo-classes plain";
michael@0: 
michael@0:     let tagText = aNode.tagName.toLowerCase();
michael@0:     let idText = aNode.id ? ("#" + aNode.id) : "";
michael@0:     let classesText = "";
michael@0: 
michael@0:     if (aNode.className) {
michael@0:       let classList = aNode.className.split(/\s+/);
michael@0:       for (let i = 0; i < classList.length; i++) {
michael@0:         classesText += "." + classList[i];
michael@0:       }
michael@0:     }
michael@0: 
michael@0:     // XXX: Until we have pseudoclass lock in the node.
michael@0:     for (let pseudo of aNode.pseudoClassLocks) {
michael@0: 
michael@0:     }
michael@0: 
michael@0:     // Figure out which element (if any) needs ellipsing.
michael@0:     // Substring for that element, then clear out any extras
michael@0:     // (except for pseudo elements).
michael@0:     let maxTagLength = MAX_LABEL_LENGTH;
michael@0:     let maxIdLength = MAX_LABEL_LENGTH - tagText.length;
michael@0:     let maxClassLength = MAX_LABEL_LENGTH - tagText.length - idText.length;
michael@0: 
michael@0:     if (tagText.length > maxTagLength) {
michael@0:        tagText = tagText.substr(0, maxTagLength) + ELLIPSIS;
michael@0:        idText = classesText = "";
michael@0:     } else if (idText.length > maxIdLength) {
michael@0:        idText = idText.substr(0, maxIdLength) + ELLIPSIS;
michael@0:        classesText = "";
michael@0:     } else if (classesText.length > maxClassLength) {
michael@0:       classesText = classesText.substr(0, maxClassLength) + ELLIPSIS;
michael@0:     }
michael@0: 
michael@0:     tagLabel.textContent = tagText;
michael@0:     idLabel.textContent = idText;
michael@0:     classesLabel.textContent = classesText;
michael@0:     pseudosLabel.textContent = aNode.pseudoClassLocks.join("");
michael@0: 
michael@0:     fragment.appendChild(tagLabel);
michael@0:     fragment.appendChild(idLabel);
michael@0:     fragment.appendChild(classesLabel);
michael@0:     fragment.appendChild(pseudosLabel);
michael@0: 
michael@0:     return fragment;
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Open the sibling menu.
michael@0:    *
michael@0:    * @param aButton the button representing the node.
michael@0:    * @param aNode the node we want the siblings from.
michael@0:    */
michael@0:   openSiblingMenu: function BC_openSiblingMenu(aButton, aNode)
michael@0:   {
michael@0:     // We make sure that the targeted node is selected
michael@0:     // because we want to use the nodemenu that only works
michael@0:     // for inspector.selection
michael@0:     this.selection.setNodeFront(aNode, "breadcrumbs");
michael@0: 
michael@0:     let title = this.chromeDoc.createElement("menuitem");
michael@0:     title.setAttribute("label", this.inspector.strings.GetStringFromName("breadcrumbs.siblings"));
michael@0:     title.setAttribute("disabled", "true");
michael@0: 
michael@0:     let separator = this.chromeDoc.createElement("menuseparator");
michael@0: 
michael@0:     let items = [title, separator];
michael@0: 
michael@0:     this.walker.siblings(aNode, {
michael@0:       whatToShow: Ci.nsIDOMNodeFilter.SHOW_ELEMENT
michael@0:     }).then(siblings => {
michael@0:       let nodes = siblings.nodes;
michael@0:       for (let i = 0; i < nodes.length; i++) {
michael@0:         let item = this.chromeDoc.createElement("menuitem");
michael@0:         if (nodes[i] === aNode) {
michael@0:           item.setAttribute("disabled", "true");
michael@0:           item.setAttribute("checked", "true");
michael@0:         }
michael@0: 
michael@0:         item.setAttribute("type", "radio");
michael@0:         item.setAttribute("label", this.prettyPrintNodeAsText(nodes[i]));
michael@0: 
michael@0:         let selection = this.selection;
michael@0:         item.onmouseup = (function(aNode) {
michael@0:           return function() {
michael@0:             selection.setNodeFront(aNode, "breadcrumbs");
michael@0:           }
michael@0:         })(nodes[i]);
michael@0: 
michael@0:         items.push(item);
michael@0:         this.inspector.showNodeMenu(aButton, "before_start", items);
michael@0:       }
michael@0:     });
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Generic event handler.
michael@0:    *
michael@0:    * @param nsIDOMEvent event
michael@0:    *        The DOM event object.
michael@0:    */
michael@0:   handleEvent: function BC_handleEvent(event)
michael@0:   {
michael@0:     if (event.type == "mousedown" && event.button == 0) {
michael@0:       // on Click and Hold, open the Siblings menu
michael@0: 
michael@0:       let timer;
michael@0:       let container = this.container;
michael@0: 
michael@0:       function openMenu(event) {
michael@0:         cancelHold();
michael@0:         let target = event.originalTarget;
michael@0:         if (target.tagName == "button") {
michael@0:           target.onBreadcrumbsHold();
michael@0:         }
michael@0:       }
michael@0: 
michael@0:       function handleClick(event) {
michael@0:         cancelHold();
michael@0:         let target = event.originalTarget;
michael@0:         if (target.tagName == "button") {
michael@0:           target.onBreadcrumbsClick();
michael@0:         }
michael@0:       }
michael@0: 
michael@0:       let window = this.chromeWin;
michael@0:       function cancelHold(event) {
michael@0:         window.clearTimeout(timer);
michael@0:         container.removeEventListener("mouseout", cancelHold, false);
michael@0:         container.removeEventListener("mouseup", handleClick, false);
michael@0:       }
michael@0: 
michael@0:       container.addEventListener("mouseout", cancelHold, false);
michael@0:       container.addEventListener("mouseup", handleClick, false);
michael@0:       timer = window.setTimeout(openMenu, 500, event);
michael@0:     }
michael@0: 
michael@0:     if (event.type == "keypress" && this.selection.isElementNode()) {
michael@0:       let node = null;
michael@0: 
michael@0: 
michael@0:       this._keyPromise = this._keyPromise || promise.resolve(null);
michael@0: 
michael@0:       this._keyPromise = (this._keyPromise || promise.resolve(null)).then(() => {
michael@0:         switch (event.keyCode) {
michael@0:           case this.chromeWin.KeyEvent.DOM_VK_LEFT:
michael@0:             if (this.currentIndex != 0) {
michael@0:               node = promise.resolve(this.nodeHierarchy[this.currentIndex - 1].node);
michael@0:             }
michael@0:             break;
michael@0:           case this.chromeWin.KeyEvent.DOM_VK_RIGHT:
michael@0:             if (this.currentIndex < this.nodeHierarchy.length - 1) {
michael@0:               node = promise.resolve(this.nodeHierarchy[this.currentIndex + 1].node);
michael@0:             }
michael@0:             break;
michael@0:           case this.chromeWin.KeyEvent.DOM_VK_UP:
michael@0:             node = this.walker.previousSibling(this.selection.nodeFront, {
michael@0:               whatToShow: Ci.nsIDOMNodeFilter.SHOW_ELEMENT
michael@0:             });
michael@0:             break;
michael@0:           case this.chromeWin.KeyEvent.DOM_VK_DOWN:
michael@0:             node = this.walker.nextSibling(this.selection.nodeFront, {
michael@0:               whatToShow: Ci.nsIDOMNodeFilter.SHOW_ELEMENT
michael@0:             });
michael@0:             break;
michael@0:         }
michael@0: 
michael@0:         return node.then((node) => {
michael@0:           if (node) {
michael@0:             this.selection.setNodeFront(node, "breadcrumbs");
michael@0:           }
michael@0:         });
michael@0:       });
michael@0:       event.preventDefault();
michael@0:       event.stopPropagation();
michael@0:     }
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Remove nodes and delete properties.
michael@0:    */
michael@0:   destroy: function BC_destroy()
michael@0:   {
michael@0:     this.selection.off("new-node-front", this.update);
michael@0:     this.selection.off("pseudoclass", this.updateSelectors);
michael@0:     this.selection.off("attribute-changed", this.updateSelectors);
michael@0:     this.inspector.off("markupmutation", this.update);
michael@0: 
michael@0:     this.container.removeEventListener("underflow", this.onscrollboxreflow, false);
michael@0:     this.container.removeEventListener("overflow", this.onscrollboxreflow, false);
michael@0:     this.onscrollboxreflow = null;
michael@0: 
michael@0:     this.empty();
michael@0:     this.container.removeEventListener("mousedown", this, true);
michael@0:     this.container.removeEventListener("keypress", this, true);
michael@0:     this.container = null;
michael@0: 
michael@0:     this.separators.remove();
michael@0:     this.separators = null;
michael@0: 
michael@0:     this.nodeHierarchy = null;
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Empty the breadcrumbs container.
michael@0:    */
michael@0:   empty: function BC_empty()
michael@0:   {
michael@0:     while (this.container.hasChildNodes()) {
michael@0:       this.container.removeChild(this.container.firstChild);
michael@0:     }
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Set which button represent the selected node.
michael@0:    *
michael@0:    * @param aIdx Index of the displayed-button to select
michael@0:    */
michael@0:   setCursor: function BC_setCursor(aIdx)
michael@0:   {
michael@0:     // Unselect the previously selected button
michael@0:     if (this.currentIndex > -1 && this.currentIndex < this.nodeHierarchy.length) {
michael@0:       this.nodeHierarchy[this.currentIndex].button.removeAttribute("checked");
michael@0:     }
michael@0:     if (aIdx > -1) {
michael@0:       this.nodeHierarchy[aIdx].button.setAttribute("checked", "true");
michael@0:       if (this.hadFocus)
michael@0:         this.nodeHierarchy[aIdx].button.focus();
michael@0:     }
michael@0:     this.currentIndex = aIdx;
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Get the index of the node in the cache.
michael@0:    *
michael@0:    * @param aNode
michael@0:    * @returns integer the index, -1 if not found
michael@0:    */
michael@0:   indexOf: function BC_indexOf(aNode)
michael@0:   {
michael@0:     let i = this.nodeHierarchy.length - 1;
michael@0:     for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
michael@0:       if (this.nodeHierarchy[i].node === aNode) {
michael@0:         return i;
michael@0:       }
michael@0:     }
michael@0:     return -1;
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Remove all the buttons and their references in the cache
michael@0:    * after a given index.
michael@0:    *
michael@0:    * @param aIdx
michael@0:    */
michael@0:   cutAfter: function BC_cutAfter(aIdx)
michael@0:   {
michael@0:     while (this.nodeHierarchy.length > (aIdx + 1)) {
michael@0:       let toRemove = this.nodeHierarchy.pop();
michael@0:       this.container.removeChild(toRemove.button);
michael@0:     }
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Build a button representing the node.
michael@0:    *
michael@0:    * @param aNode The node from the page.
michael@0:    * @returns aNode The <button>.
michael@0:    */
michael@0:   buildButton: function BC_buildButton(aNode)
michael@0:   {
michael@0:     let button = this.chromeDoc.createElement("button");
michael@0:     button.appendChild(this.prettyPrintNodeAsXUL(aNode));
michael@0:     button.className = "breadcrumbs-widget-item";
michael@0: 
michael@0:     button.setAttribute("tooltiptext", this.prettyPrintNodeAsText(aNode));
michael@0: 
michael@0:     button.onkeypress = function onBreadcrumbsKeypress(e) {
michael@0:       if (e.charCode == Ci.nsIDOMKeyEvent.DOM_VK_SPACE ||
michael@0:           e.keyCode == Ci.nsIDOMKeyEvent.DOM_VK_RETURN)
michael@0:         button.click();
michael@0:     }
michael@0: 
michael@0:     button.onBreadcrumbsClick = function onBreadcrumbsClick() {
michael@0:       this.selection.setNodeFront(aNode, "breadcrumbs");
michael@0:     }.bind(this);
michael@0: 
michael@0:     button.onclick = (function _onBreadcrumbsRightClick(event) {
michael@0:       button.focus();
michael@0:       if (event.button == 2) {
michael@0:         this.openSiblingMenu(button, aNode);
michael@0:       }
michael@0:     }).bind(this);
michael@0: 
michael@0:     button.onBreadcrumbsHold = (function _onBreadcrumbsHold() {
michael@0:       this.openSiblingMenu(button, aNode);
michael@0:     }).bind(this);
michael@0:     return button;
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Connecting the end of the breadcrumbs to a node.
michael@0:    *
michael@0:    * @param aNode The node to reach.
michael@0:    */
michael@0:   expand: function BC_expand(aNode)
michael@0:   {
michael@0:       let fragment = this.chromeDoc.createDocumentFragment();
michael@0:       let toAppend = aNode;
michael@0:       let lastButtonInserted = null;
michael@0:       let originalLength = this.nodeHierarchy.length;
michael@0:       let stopNode = null;
michael@0:       if (originalLength > 0) {
michael@0:         stopNode = this.nodeHierarchy[originalLength - 1].node;
michael@0:       }
michael@0:       while (toAppend && toAppend != stopNode) {
michael@0:         if (toAppend.tagName) {
michael@0:           let button = this.buildButton(toAppend);
michael@0:           fragment.insertBefore(button, lastButtonInserted);
michael@0:           lastButtonInserted = button;
michael@0:           this.nodeHierarchy.splice(originalLength, 0, {node: toAppend, button: button});
michael@0:         }
michael@0:         toAppend = toAppend.parentNode();
michael@0:       }
michael@0:       this.container.appendChild(fragment, this.container.firstChild);
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Get a child of a node that can be displayed in the breadcrumbs
michael@0:    * and that is probably visible. See LOW_PRIORITY_ELEMENTS.
michael@0:    *
michael@0:    * @param aNode The parent node.
michael@0:    * @returns nsIDOMNode|null
michael@0:    */
michael@0:   getInterestingFirstNode: function BC_getInterestingFirstNode(aNode)
michael@0:   {
michael@0:     let deferred = promise.defer();
michael@0: 
michael@0:     var fallback = null;
michael@0: 
michael@0:     var moreChildren = () => {
michael@0:       this.walker.children(aNode, {
michael@0:         start: fallback,
michael@0:         maxNodes: 10,
michael@0:         whatToShow: Ci.nsIDOMNodeFilter.SHOW_ELEMENT
michael@0:       }).then(this.selectionGuard()).then(response => {
michael@0:         for (let node of response.nodes) {
michael@0:           if (!(node.tagName in LOW_PRIORITY_ELEMENTS)) {
michael@0:             deferred.resolve(node);
michael@0:             return;
michael@0:           }
michael@0:           if (!fallback) {
michael@0:             fallback = node;
michael@0:           }
michael@0:         }
michael@0:         if (response.hasLast) {
michael@0:           deferred.resolve(fallback);
michael@0:           return;
michael@0:         } else {
michael@0:           moreChildren();
michael@0:         }
michael@0:       }).then(null, this.selectionGuardEnd);
michael@0:     }
michael@0:     moreChildren();
michael@0:     return deferred.promise;
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Find the "youngest" ancestor of a node which is already in the breadcrumbs.
michael@0:    *
michael@0:    * @param aNode
michael@0:    * @returns Index of the ancestor in the cache
michael@0:    */
michael@0:   getCommonAncestor: function BC_getCommonAncestor(aNode)
michael@0:   {
michael@0:     let node = aNode;
michael@0:     while (node) {
michael@0:       let idx = this.indexOf(node);
michael@0:       if (idx > -1) {
michael@0:         return idx;
michael@0:       } else {
michael@0:         node = node.parentNode();
michael@0:       }
michael@0:     }
michael@0:     return -1;
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Make sure that the latest node in the breadcrumbs is not the selected node
michael@0:    * if the selected node still has children.
michael@0:    */
michael@0:   ensureFirstChild: function BC_ensureFirstChild()
michael@0:   {
michael@0:     // If the last displayed node is the selected node
michael@0:     if (this.currentIndex == this.nodeHierarchy.length - 1) {
michael@0:       let node = this.nodeHierarchy[this.currentIndex].node;
michael@0:       return this.getInterestingFirstNode(node).then(child => {
michael@0:         // If the node has a child
michael@0:         if (child) {
michael@0:           // Show this child
michael@0:           this.expand(child);
michael@0:         }
michael@0:       });
michael@0:     }
michael@0: 
michael@0:     return resolveNextTick(true);
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Ensure the selected node is visible.
michael@0:    */
michael@0:   scroll: function BC_scroll()
michael@0:   {
michael@0:     // FIXME bug 684352: make sure its immediate neighbors are visible too.
michael@0: 
michael@0:     let scrollbox = this.container;
michael@0:     let element = this.nodeHierarchy[this.currentIndex].button;
michael@0: 
michael@0:     // Repeated calls to ensureElementIsVisible would interfere with each other
michael@0:     // and may sometimes result in incorrect scroll positions.
michael@0:     this.chromeWin.clearTimeout(this._ensureVisibleTimeout);
michael@0:     this._ensureVisibleTimeout = this.chromeWin.setTimeout(function() {
michael@0:       scrollbox.ensureElementIsVisible(element);
michael@0:     }, ENSURE_SELECTION_VISIBLE_DELAY);
michael@0:   },
michael@0: 
michael@0:   updateSelectors: function BC_updateSelectors()
michael@0:   {
michael@0:     for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
michael@0:       let crumb = this.nodeHierarchy[i];
michael@0:       let button = crumb.button;
michael@0: 
michael@0:       while(button.hasChildNodes()) {
michael@0:         button.removeChild(button.firstChild);
michael@0:       }
michael@0:       button.appendChild(this.prettyPrintNodeAsXUL(crumb.node));
michael@0:       button.setAttribute("tooltiptext", this.prettyPrintNodeAsText(crumb.node));
michael@0:     }
michael@0:   },
michael@0: 
michael@0:   /**
michael@0:    * Update the breadcrumbs display when a new node is selected.
michael@0:    */
michael@0:   update: function BC_update(reason)
michael@0:   {
michael@0:     if (reason !== "markupmutation") {
michael@0:       this.inspector.hideNodeMenu();
michael@0:     }
michael@0: 
michael@0:     let cmdDispatcher = this.chromeDoc.commandDispatcher;
michael@0:     this.hadFocus = (cmdDispatcher.focusedElement &&
michael@0:                      cmdDispatcher.focusedElement.parentNode == this.container);
michael@0: 
michael@0:     if (!this.selection.isConnected()) {
michael@0:       this.cutAfter(-1); // remove all the crumbs
michael@0:       return;
michael@0:     }
michael@0: 
michael@0:     if (!this.selection.isElementNode()) {
michael@0:       this.setCursor(-1); // no selection
michael@0:       return;
michael@0:     }
michael@0: 
michael@0:     let idx = this.indexOf(this.selection.nodeFront);
michael@0: 
michael@0:     // Is the node already displayed in the breadcrumbs?
michael@0:     // (and there are no mutations that need re-display of the crumbs)
michael@0:     if (idx > -1 && reason !== "markupmutation") {
michael@0:       // Yes. We select it.
michael@0:       this.setCursor(idx);
michael@0:     } else {
michael@0:       // No. Is the breadcrumbs display empty?
michael@0:       if (this.nodeHierarchy.length > 0) {
michael@0:         // No. We drop all the element that are not direct ancestors
michael@0:         // of the selection
michael@0:         let parent = this.selection.nodeFront.parentNode();
michael@0:         let idx = this.getCommonAncestor(parent);
michael@0:         this.cutAfter(idx);
michael@0:       }
michael@0:       // we append the missing button between the end of the breadcrumbs display
michael@0:       // and the current node.
michael@0:       this.expand(this.selection.nodeFront);
michael@0: 
michael@0:       // we select the current node button
michael@0:       idx = this.indexOf(this.selection.nodeFront);
michael@0:       this.setCursor(idx);
michael@0:     }
michael@0: 
michael@0:     let doneUpdating = this.inspector.updating("breadcrumbs");
michael@0:     // Add the first child of the very last node of the breadcrumbs if possible.
michael@0:     this.ensureFirstChild().then(this.selectionGuard()).then(() => {
michael@0:       this.updateSelectors();
michael@0: 
michael@0:       // Make sure the selected node and its neighbours are visible.
michael@0:       this.scroll();
michael@0:       return resolveNextTick().then(() => {
michael@0:         this.inspector.emit("breadcrumbs-updated", this.selection.nodeFront);
michael@0:         doneUpdating();
michael@0:       });
michael@0:     }).then(null, err => {
michael@0:       doneUpdating(this.selection.nodeFront);
michael@0:       this.selectionGuardEnd(err);
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: });