The Tor Browser: comparison browser/devtools/inspector/breadcrumbs.js

comparison: browser/devtools/inspector/breadcrumbs.js

browser/devtools/inspector/breadcrumbs.js

changeset 0: 6474c204b198

equal deleted inserted replaced

--1:000000000000
+:a7782d0b84db
+/* -*- 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);
+});