The Tor Browser: browser/devtools/inspector/breadcrumbs.js@b8a032363ba2 (annotated)

browser/devtools/inspector/breadcrumbs.js@b8a032363ba2 (annotated)

browser/devtools/inspector/breadcrumbs.js

Thu, 22 Jan 2015 13:21:57 +0100

author: Michael Schloh von Bennewitz <michael@schloh.com>
date: Thu, 22 Jan 2015 13:21:57 +0100
branch: TOR_BUG_9701
changeset 15: b8a032363ba2
permissions: -rw-r--r--

Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6

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