2014-06-25 05:12:07 +00:00
|
|
|
/* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */
|
2012-11-30 08:07:59 +00:00
|
|
|
/* 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/. */
|
|
|
|
|
2015-04-08 10:16:25 +00:00
|
|
|
"use strict";
|
2012-11-30 08:07:59 +00:00
|
|
|
|
2016-04-15 10:03:33 +00:00
|
|
|
const {Ci} = require("chrome");
|
2016-02-27 12:51:10 +00:00
|
|
|
const Services = require("Services");
|
2015-08-26 13:05:13 +00:00
|
|
|
const promise = require("promise");
|
2016-04-12 15:53:54 +00:00
|
|
|
const FocusManager = Services.focus;
|
2016-04-19 19:33:54 +00:00
|
|
|
const {waitForTick} = require("devtools/shared/DevToolsUtils");
|
2015-04-08 10:16:25 +00:00
|
|
|
|
2016-05-04 21:48:15 +00:00
|
|
|
const ENSURE_SELECTION_VISIBLE_DELAY_MS = 50;
|
|
|
|
const ELLIPSIS = Services.prefs.getComplexValue(
|
|
|
|
"intl.ellipsis",
|
|
|
|
Ci.nsIPrefLocalizedString).data;
|
2014-01-30 20:24:30 +00:00
|
|
|
const MAX_LABEL_LENGTH = 40;
|
2012-11-30 08:07:59 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Display the ancestors of the current node and its children.
|
|
|
|
* Only one "branch" of children are displayed (only one line).
|
|
|
|
*
|
2013-02-20 23:33:36 +00:00
|
|
|
* FIXME: Bug 822388 - Use the BreadcrumbsWidget in the Inspector.
|
|
|
|
*
|
2012-11-30 08:07:59 +00:00
|
|
|
* Mechanism:
|
2015-04-08 10:16:25 +00:00
|
|
|
* - If no nodes displayed yet:
|
|
|
|
* then display the ancestor of the selected node and the selected node;
|
2012-11-30 08:07:59 +00:00
|
|
|
* else select the node;
|
2015-04-08 10:16:25 +00:00
|
|
|
* - If the selected node is the last node displayed, append its first (if any).
|
|
|
|
*
|
|
|
|
* @param {InspectorPanel} inspector The inspector hosting this widget.
|
2012-11-30 08:07:59 +00:00
|
|
|
*/
|
2015-04-08 10:16:25 +00:00
|
|
|
function HTMLBreadcrumbs(inspector) {
|
|
|
|
this.inspector = inspector;
|
2012-11-30 08:07:59 +00:00
|
|
|
this.selection = this.inspector.selection;
|
|
|
|
this.chromeWin = this.inspector.panelWin;
|
|
|
|
this.chromeDoc = this.inspector.panelDoc;
|
|
|
|
this._init();
|
|
|
|
}
|
|
|
|
|
2013-04-11 20:59:08 +00:00
|
|
|
exports.HTMLBreadcrumbs = HTMLBreadcrumbs;
|
|
|
|
|
2012-11-30 08:07:59 +00:00
|
|
|
HTMLBreadcrumbs.prototype = {
|
2015-05-22 18:50:01 +00:00
|
|
|
get walker() {
|
|
|
|
return this.inspector.walker;
|
|
|
|
},
|
2013-06-07 21:33:39 +00:00
|
|
|
|
2016-05-04 21:48:15 +00:00
|
|
|
_init: function () {
|
2012-11-30 08:07:59 +00:00
|
|
|
this.container = this.chromeDoc.getElementById("inspector-breadcrumbs");
|
2014-01-30 20:24:30 +00:00
|
|
|
|
|
|
|
// 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);
|
|
|
|
|
2016-05-04 21:48:15 +00:00
|
|
|
this.container.addEventListener("click", this, true);
|
2012-11-30 08:07:59 +00:00
|
|
|
this.container.addEventListener("keypress", this, true);
|
2014-07-30 19:46:00 +00:00
|
|
|
this.container.addEventListener("mouseover", this, true);
|
2015-07-02 03:18:09 +00:00
|
|
|
this.container.addEventListener("mouseleave", this, true);
|
2016-04-12 15:53:54 +00:00
|
|
|
this.container.addEventListener("focus", this, true);
|
2012-11-30 08:07:59 +00:00
|
|
|
|
|
|
|
// 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;
|
|
|
|
|
2014-06-14 10:49:00 +00:00
|
|
|
this.onscrollboxreflow = () => {
|
2015-06-02 09:26:24 +00:00
|
|
|
if (this.container._scrollButtonDown.collapsed) {
|
2012-11-30 08:07:59 +00:00
|
|
|
this.container.removeAttribute("overflows");
|
2015-06-02 09:26:24 +00:00
|
|
|
} else {
|
2012-11-30 08:07:59 +00:00
|
|
|
this.container.setAttribute("overflows", true);
|
2015-06-02 09:26:24 +00:00
|
|
|
}
|
2014-06-14 10:49:00 +00:00
|
|
|
};
|
2012-11-30 08:07:59 +00:00
|
|
|
|
|
|
|
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);
|
2013-06-07 21:33:39 +00:00
|
|
|
this.selection.on("new-node-front", this.update);
|
2012-11-30 08:07:59 +00:00
|
|
|
this.selection.on("pseudoclass", this.updateSelectors);
|
|
|
|
this.selection.on("attribute-changed", this.updateSelectors);
|
2013-10-02 00:14:00 +00:00
|
|
|
this.inspector.on("markupmutation", this.update);
|
2012-11-30 08:07:59 +00:00
|
|
|
this.update();
|
|
|
|
},
|
|
|
|
|
2013-06-07 21:33:39 +00:00
|
|
|
/**
|
|
|
|
|
2012-11-30 08:07:59 +00:00
|
|
|
* Build a string that represents the node: tagName#id.class1.class2.
|
2015-04-08 10:16:25 +00:00
|
|
|
* @param {NodeFront} node The node to pretty-print
|
|
|
|
* @return {String}
|
2012-11-30 08:07:59 +00:00
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
prettyPrintNodeAsText: function (node) {
|
2015-04-08 10:16:25 +00:00
|
|
|
let text = node.tagName.toLowerCase();
|
|
|
|
if (node.isPseudoElement) {
|
|
|
|
text = node.isBeforePseudoElement ? "::before" : "::after";
|
2014-09-29 07:29:00 +00:00
|
|
|
}
|
|
|
|
|
2015-04-08 10:16:25 +00:00
|
|
|
if (node.id) {
|
|
|
|
text += "#" + node.id;
|
2012-11-30 08:07:59 +00:00
|
|
|
}
|
2013-06-07 21:33:39 +00:00
|
|
|
|
2015-04-08 10:16:25 +00:00
|
|
|
if (node.className) {
|
|
|
|
let classList = node.className.split(/\s+/);
|
2013-06-07 21:33:39 +00:00
|
|
|
for (let i = 0; i < classList.length; i++) {
|
|
|
|
text += "." + classList[i];
|
|
|
|
}
|
2012-11-30 08:07:59 +00:00
|
|
|
}
|
2013-06-07 21:33:39 +00:00
|
|
|
|
2015-04-08 10:16:25 +00:00
|
|
|
for (let pseudo of node.pseudoClassLocks) {
|
2013-06-11 04:18:46 +00:00
|
|
|
text += pseudo;
|
2012-11-30 08:07:59 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
return text;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Build <label>s that represent the node:
|
2013-02-20 23:33:36 +00:00
|
|
|
* <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>
|
2015-04-08 10:16:25 +00:00
|
|
|
* @param {NodeFront} node The node to pretty-print
|
|
|
|
* @returns {DocumentFragment}
|
2012-11-30 08:07:59 +00:00
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
prettyPrintNodeAsXUL: function (node) {
|
2012-11-30 08:07:59 +00:00
|
|
|
let fragment = this.chromeDoc.createDocumentFragment();
|
|
|
|
|
|
|
|
let tagLabel = this.chromeDoc.createElement("label");
|
2013-02-20 23:33:36 +00:00
|
|
|
tagLabel.className = "breadcrumbs-widget-item-tag plain";
|
2012-11-30 08:07:59 +00:00
|
|
|
|
|
|
|
let idLabel = this.chromeDoc.createElement("label");
|
2013-02-20 23:33:36 +00:00
|
|
|
idLabel.className = "breadcrumbs-widget-item-id plain";
|
2012-11-30 08:07:59 +00:00
|
|
|
|
|
|
|
let classesLabel = this.chromeDoc.createElement("label");
|
2013-02-20 23:33:36 +00:00
|
|
|
classesLabel.className = "breadcrumbs-widget-item-classes plain";
|
2012-11-30 08:07:59 +00:00
|
|
|
|
|
|
|
let pseudosLabel = this.chromeDoc.createElement("label");
|
2013-02-20 23:33:36 +00:00
|
|
|
pseudosLabel.className = "breadcrumbs-widget-item-pseudo-classes plain";
|
2012-11-30 08:07:59 +00:00
|
|
|
|
2015-04-08 10:16:25 +00:00
|
|
|
let tagText = node.tagName.toLowerCase();
|
|
|
|
if (node.isPseudoElement) {
|
|
|
|
tagText = node.isBeforePseudoElement ? "::before" : "::after";
|
2014-09-29 07:29:00 +00:00
|
|
|
}
|
2015-04-08 10:16:25 +00:00
|
|
|
let idText = node.id ? ("#" + node.id) : "";
|
2014-01-30 20:24:30 +00:00
|
|
|
let classesText = "";
|
2012-11-30 08:07:59 +00:00
|
|
|
|
2015-04-08 10:16:25 +00:00
|
|
|
if (node.className) {
|
|
|
|
let classList = node.className.split(/\s+/);
|
2013-06-07 21:33:39 +00:00
|
|
|
for (let i = 0; i < classList.length; i++) {
|
|
|
|
classesText += "." + classList[i];
|
|
|
|
}
|
2012-11-30 08:07:59 +00:00
|
|
|
}
|
2013-06-07 21:33:39 +00:00
|
|
|
|
2014-01-30 20:24:30 +00:00
|
|
|
// 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) {
|
2015-06-02 09:26:24 +00:00
|
|
|
tagText = tagText.substr(0, maxTagLength) + ELLIPSIS;
|
|
|
|
idText = classesText = "";
|
2014-01-30 20:24:30 +00:00
|
|
|
} else if (idText.length > maxIdLength) {
|
2015-06-02 09:26:24 +00:00
|
|
|
idText = idText.substr(0, maxIdLength) + ELLIPSIS;
|
|
|
|
classesText = "";
|
2014-01-30 20:24:30 +00:00
|
|
|
} else if (classesText.length > maxClassLength) {
|
|
|
|
classesText = classesText.substr(0, maxClassLength) + ELLIPSIS;
|
|
|
|
}
|
|
|
|
|
|
|
|
tagLabel.textContent = tagText;
|
|
|
|
idLabel.textContent = idText;
|
|
|
|
classesLabel.textContent = classesText;
|
2015-04-08 10:16:25 +00:00
|
|
|
pseudosLabel.textContent = node.pseudoClassLocks.join("");
|
2012-11-30 08:07:59 +00:00
|
|
|
|
|
|
|
fragment.appendChild(tagLabel);
|
|
|
|
fragment.appendChild(idLabel);
|
|
|
|
fragment.appendChild(classesLabel);
|
|
|
|
fragment.appendChild(pseudosLabel);
|
|
|
|
|
|
|
|
return fragment;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Generic event handler.
|
2015-04-08 10:16:25 +00:00
|
|
|
* @param {DOMEvent} event.
|
2012-11-30 08:07:59 +00:00
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
handleEvent: function (event) {
|
|
|
|
if (event.type == "click" && event.button == 0) {
|
|
|
|
this.handleClick(event);
|
2015-04-08 10:16:25 +00:00
|
|
|
} else if (event.type == "keypress" && this.selection.isElementNode()) {
|
|
|
|
this.handleKeyPress(event);
|
|
|
|
} else if (event.type == "mouseover") {
|
|
|
|
this.handleMouseOver(event);
|
2015-07-02 03:18:09 +00:00
|
|
|
} else if (event.type == "mouseleave") {
|
2015-04-08 10:16:25 +00:00
|
|
|
this.handleMouseLeave(event);
|
2016-04-12 15:53:54 +00:00
|
|
|
} else if (event.type == "focus") {
|
|
|
|
this.handleFocus(event);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Focus event handler. When breadcrumbs container gets focus, if there is an
|
|
|
|
* already selected breadcrumb, move focus to it.
|
|
|
|
* @param {DOMEvent} event.
|
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
handleFocus: function (event) {
|
2016-04-12 15:53:54 +00:00
|
|
|
let control = this.container.querySelector(
|
|
|
|
".breadcrumbs-widget-item[checked]");
|
|
|
|
if (control && control !== event.target) {
|
|
|
|
// If we already have a selected breadcrumb and focus target is not it,
|
|
|
|
// move focus to selected breadcrumb.
|
|
|
|
event.preventDefault();
|
|
|
|
control.focus();
|
2015-04-08 10:16:25 +00:00
|
|
|
}
|
|
|
|
},
|
2012-11-30 08:07:59 +00:00
|
|
|
|
2015-04-08 10:16:25 +00:00
|
|
|
/**
|
2016-05-04 21:48:15 +00:00
|
|
|
* On click navigate to the correct node.
|
2015-04-08 10:16:25 +00:00
|
|
|
* @param {DOMEvent} event.
|
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
handleClick: function (event) {
|
|
|
|
let target = event.originalTarget;
|
|
|
|
if (target.tagName == "button") {
|
|
|
|
target.onBreadcrumbsClick();
|
2015-04-08 10:16:25 +00:00
|
|
|
}
|
|
|
|
},
|
2013-06-07 21:33:39 +00:00
|
|
|
|
2015-04-08 10:16:25 +00:00
|
|
|
/**
|
|
|
|
* On mouse over, highlight the corresponding content DOM Node.
|
|
|
|
* @param {DOMEvent} event.
|
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
handleMouseOver: function (event) {
|
2015-04-08 10:16:25 +00:00
|
|
|
let target = event.originalTarget;
|
|
|
|
if (target.tagName == "button") {
|
|
|
|
target.onBreadcrumbsHover();
|
2012-11-30 08:07:59 +00:00
|
|
|
}
|
2015-04-08 10:16:25 +00:00
|
|
|
},
|
2014-07-30 19:46:00 +00:00
|
|
|
|
2015-04-08 10:16:25 +00:00
|
|
|
/**
|
|
|
|
* On mouse leave, make sure to unhighlight.
|
|
|
|
* @param {DOMEvent} event.
|
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
handleMouseLeave: function (event) {
|
2015-04-08 10:16:25 +00:00
|
|
|
this.inspector.toolbox.highlighterUtils.unhighlight();
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
2016-04-15 10:03:33 +00:00
|
|
|
* On keypress, navigate through the list of breadcrumbs with the left/right
|
|
|
|
* arrow keys.
|
2015-04-08 10:16:25 +00:00
|
|
|
* @param {DOMEvent} event.
|
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
handleKeyPress: function (event) {
|
2016-04-15 10:03:33 +00:00
|
|
|
let win = this.chromeWin;
|
|
|
|
let {keyCode, shiftKey, metaKey, ctrlKey, altKey} = event;
|
|
|
|
|
|
|
|
// Only handle left, right, tab and shift tab, let anything else bubble up
|
|
|
|
// so native shortcuts work.
|
|
|
|
let hasModifier = metaKey || ctrlKey || altKey || shiftKey;
|
|
|
|
let isLeft = keyCode === win.KeyEvent.DOM_VK_LEFT && !hasModifier;
|
|
|
|
let isRight = keyCode === win.KeyEvent.DOM_VK_RIGHT && !hasModifier;
|
|
|
|
let isTab = keyCode === win.KeyEvent.DOM_VK_TAB && !hasModifier;
|
|
|
|
let isShiftTab = keyCode === win.KeyEvent.DOM_VK_TAB && shiftKey &&
|
|
|
|
!metaKey && !ctrlKey && !altKey;
|
|
|
|
|
|
|
|
if (!isLeft && !isRight && !isTab && !isShiftTab) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
|
|
|
|
|
|
|
this.keyPromise = (this.keyPromise || promise.resolve(null)).then(() => {
|
|
|
|
if (isLeft && this.currentIndex != 0) {
|
|
|
|
let node = this.nodeHierarchy[this.currentIndex - 1].node;
|
|
|
|
return this.selection.setNodeFront(node, "breadcrumbs");
|
|
|
|
} else if (isRight && this.currentIndex < this.nodeHierarchy.length - 1) {
|
|
|
|
let node = this.nodeHierarchy[this.currentIndex + 1].node;
|
|
|
|
return this.selection.setNodeFront(node, "breadcrumbs");
|
|
|
|
} else if (isTab || isShiftTab) {
|
|
|
|
// Tabbing when breadcrumbs or its contents are focused should move
|
|
|
|
// focus to next/previous focusable element relative to breadcrumbs
|
|
|
|
// themselves.
|
|
|
|
let elm, type;
|
|
|
|
if (shiftKey) {
|
|
|
|
elm = this.container;
|
|
|
|
type = FocusManager.MOVEFOCUS_BACKWARD;
|
|
|
|
} else {
|
|
|
|
// To move focus to next element following the breadcrumbs, relative
|
|
|
|
// element needs to be the last element in breadcrumbs' subtree.
|
|
|
|
let last = this.container.lastChild;
|
|
|
|
while (last && last.lastChild) {
|
|
|
|
last = last.lastChild;
|
2016-04-12 15:53:54 +00:00
|
|
|
}
|
2016-04-15 10:03:33 +00:00
|
|
|
elm = last;
|
|
|
|
type = FocusManager.MOVEFOCUS_FORWARD;
|
|
|
|
}
|
|
|
|
FocusManager.moveFocus(win, elm, type, 0);
|
2014-07-30 19:46:00 +00:00
|
|
|
}
|
|
|
|
|
2016-04-15 10:03:33 +00:00
|
|
|
return null;
|
2015-04-08 10:16:25 +00:00
|
|
|
});
|
2012-11-30 08:07:59 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
2015-04-08 10:16:25 +00:00
|
|
|
* Remove nodes and clean up.
|
2012-11-30 08:07:59 +00:00
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
destroy: function () {
|
2013-06-07 21:33:39 +00:00
|
|
|
this.selection.off("new-node-front", this.update);
|
2012-11-30 08:07:59 +00:00
|
|
|
this.selection.off("pseudoclass", this.updateSelectors);
|
|
|
|
this.selection.off("attribute-changed", this.updateSelectors);
|
2013-10-02 00:14:00 +00:00
|
|
|
this.inspector.off("markupmutation", this.update);
|
2012-11-30 08:07:59 +00:00
|
|
|
|
2016-05-04 21:48:15 +00:00
|
|
|
this.container.removeEventListener("underflow",
|
2016-04-15 10:03:33 +00:00
|
|
|
this.onscrollboxreflow, false);
|
2016-05-04 21:48:15 +00:00
|
|
|
this.container.removeEventListener("overflow",
|
2016-04-15 10:03:33 +00:00
|
|
|
this.onscrollboxreflow, false);
|
2016-05-04 21:48:15 +00:00
|
|
|
this.container.removeEventListener("click", this, true);
|
2012-11-30 08:07:59 +00:00
|
|
|
this.container.removeEventListener("keypress", this, true);
|
2014-07-30 19:46:00 +00:00
|
|
|
this.container.removeEventListener("mouseover", this, true);
|
2015-07-02 03:18:09 +00:00
|
|
|
this.container.removeEventListener("mouseleave", this, true);
|
2016-04-12 15:53:54 +00:00
|
|
|
this.container.removeEventListener("focus", this, true);
|
2014-01-30 20:24:30 +00:00
|
|
|
|
2015-04-08 10:16:25 +00:00
|
|
|
this.empty();
|
2014-01-30 20:24:30 +00:00
|
|
|
this.separators.remove();
|
|
|
|
|
2015-04-08 10:16:25 +00:00
|
|
|
this.onscrollboxreflow = null;
|
|
|
|
this.container = null;
|
|
|
|
this.separators = null;
|
2012-11-30 08:07:59 +00:00
|
|
|
this.nodeHierarchy = null;
|
2014-07-01 04:32:00 +00:00
|
|
|
|
|
|
|
this.isDestroyed = true;
|
2012-11-30 08:07:59 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Empty the breadcrumbs container.
|
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
empty: function () {
|
2012-11-30 08:07:59 +00:00
|
|
|
while (this.container.hasChildNodes()) {
|
2015-04-08 10:16:25 +00:00
|
|
|
this.container.firstChild.remove();
|
2012-11-30 08:07:59 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Set which button represent the selected node.
|
2015-04-08 10:16:25 +00:00
|
|
|
* @param {Number} index Index of the displayed-button to select.
|
2012-11-30 08:07:59 +00:00
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
setCursor: function (index) {
|
2012-11-30 08:07:59 +00:00
|
|
|
// Unselect the previously selected button
|
2016-05-04 21:48:15 +00:00
|
|
|
if (this.currentIndex > -1
|
|
|
|
&& this.currentIndex < this.nodeHierarchy.length) {
|
2012-11-30 08:07:59 +00:00
|
|
|
this.nodeHierarchy[this.currentIndex].button.removeAttribute("checked");
|
|
|
|
}
|
2015-04-08 10:16:25 +00:00
|
|
|
if (index > -1) {
|
|
|
|
this.nodeHierarchy[index].button.setAttribute("checked", "true");
|
2015-06-02 09:26:24 +00:00
|
|
|
if (this.hadFocus) {
|
2015-04-08 10:16:25 +00:00
|
|
|
this.nodeHierarchy[index].button.focus();
|
2015-06-02 09:26:24 +00:00
|
|
|
}
|
2012-11-30 08:07:59 +00:00
|
|
|
}
|
2015-04-08 10:16:25 +00:00
|
|
|
this.currentIndex = index;
|
2012-11-30 08:07:59 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Get the index of the node in the cache.
|
2015-04-08 10:16:25 +00:00
|
|
|
* @param {NodeFront} node.
|
|
|
|
* @returns {Number} The index for this node or -1 if not found.
|
2012-11-30 08:07:59 +00:00
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
indexOf: function (node) {
|
2012-11-30 08:07:59 +00:00
|
|
|
for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
|
2015-04-08 10:16:25 +00:00
|
|
|
if (this.nodeHierarchy[i].node === node) {
|
2012-11-30 08:07:59 +00:00
|
|
|
return i;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return -1;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
2015-04-08 10:16:25 +00:00
|
|
|
* Remove all the buttons and their references in the cache after a given
|
|
|
|
* index.
|
|
|
|
* @param {Number} index.
|
2012-11-30 08:07:59 +00:00
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
cutAfter: function (index) {
|
2015-04-08 10:16:25 +00:00
|
|
|
while (this.nodeHierarchy.length > (index + 1)) {
|
2012-11-30 08:07:59 +00:00
|
|
|
let toRemove = this.nodeHierarchy.pop();
|
|
|
|
this.container.removeChild(toRemove.button);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Build a button representing the node.
|
2015-04-08 10:16:25 +00:00
|
|
|
* @param {NodeFront} node The node from the page.
|
|
|
|
* @return {DOMNode} The <button> for this node.
|
2012-11-30 08:07:59 +00:00
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
buildButton: function (node) {
|
2012-11-30 08:07:59 +00:00
|
|
|
let button = this.chromeDoc.createElement("button");
|
2015-04-08 10:16:25 +00:00
|
|
|
button.appendChild(this.prettyPrintNodeAsXUL(node));
|
2013-02-20 23:33:36 +00:00
|
|
|
button.className = "breadcrumbs-widget-item";
|
2012-11-30 08:07:59 +00:00
|
|
|
|
2015-04-08 10:16:25 +00:00
|
|
|
button.setAttribute("tooltiptext", this.prettyPrintNodeAsText(node));
|
2012-11-30 08:07:59 +00:00
|
|
|
|
|
|
|
button.onkeypress = function onBreadcrumbsKeypress(e) {
|
|
|
|
if (e.charCode == Ci.nsIDOMKeyEvent.DOM_VK_SPACE ||
|
2015-06-02 09:26:24 +00:00
|
|
|
e.keyCode == Ci.nsIDOMKeyEvent.DOM_VK_RETURN) {
|
2012-11-30 08:07:59 +00:00
|
|
|
button.click();
|
2015-06-02 09:26:24 +00:00
|
|
|
}
|
|
|
|
};
|
2012-11-30 08:07:59 +00:00
|
|
|
|
2016-05-04 21:48:15 +00:00
|
|
|
button.onclick = () => {
|
|
|
|
button.focus();
|
|
|
|
};
|
|
|
|
|
2014-06-14 10:49:00 +00:00
|
|
|
button.onBreadcrumbsClick = () => {
|
2016-04-15 10:03:33 +00:00
|
|
|
this.selection.setNodeFront(node, "breadcrumbs");
|
2014-06-14 10:49:00 +00:00
|
|
|
};
|
2012-11-30 08:07:59 +00:00
|
|
|
|
2014-07-30 19:46:00 +00:00
|
|
|
button.onBreadcrumbsHover = () => {
|
2015-04-08 10:16:25 +00:00
|
|
|
this.inspector.toolbox.highlighterUtils.highlightNodeFront(node);
|
2014-07-30 19:46:00 +00:00
|
|
|
};
|
|
|
|
|
2012-11-30 08:07:59 +00:00
|
|
|
return button;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Connecting the end of the breadcrumbs to a node.
|
2015-04-08 10:16:25 +00:00
|
|
|
* @param {NodeFront} node The node to reach.
|
2012-11-30 08:07:59 +00:00
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
expand: function (node) {
|
2015-04-08 10:16:25 +00:00
|
|
|
let fragment = this.chromeDoc.createDocumentFragment();
|
|
|
|
let lastButtonInserted = null;
|
|
|
|
let originalLength = this.nodeHierarchy.length;
|
|
|
|
let stopNode = null;
|
|
|
|
if (originalLength > 0) {
|
|
|
|
stopNode = this.nodeHierarchy[originalLength - 1].node;
|
|
|
|
}
|
|
|
|
while (node && node != stopNode) {
|
|
|
|
if (node.tagName) {
|
|
|
|
let button = this.buildButton(node);
|
|
|
|
fragment.insertBefore(button, lastButtonInserted);
|
|
|
|
lastButtonInserted = button;
|
2015-04-13 08:22:05 +00:00
|
|
|
this.nodeHierarchy.splice(originalLength, 0, {
|
|
|
|
node,
|
|
|
|
button,
|
|
|
|
currentPrettyPrintText: this.prettyPrintNodeAsText(node)
|
|
|
|
});
|
2012-11-30 08:07:59 +00:00
|
|
|
}
|
2015-04-08 10:16:25 +00:00
|
|
|
node = node.parentNode();
|
|
|
|
}
|
|
|
|
this.container.appendChild(fragment, this.container.firstChild);
|
2012-11-30 08:07:59 +00:00
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Find the "youngest" ancestor of a node which is already in the breadcrumbs.
|
2015-04-08 10:16:25 +00:00
|
|
|
* @param {NodeFront} node.
|
|
|
|
* @return {Number} Index of the ancestor in the cache, or -1 if not found.
|
2012-11-30 08:07:59 +00:00
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
getCommonAncestor: function (node) {
|
2012-11-30 08:07:59 +00:00
|
|
|
while (node) {
|
|
|
|
let idx = this.indexOf(node);
|
|
|
|
if (idx > -1) {
|
|
|
|
return idx;
|
|
|
|
}
|
2015-06-02 09:26:24 +00:00
|
|
|
node = node.parentNode();
|
2012-11-30 08:07:59 +00:00
|
|
|
}
|
|
|
|
return -1;
|
|
|
|
},
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Ensure the selected node is visible.
|
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
scroll: function () {
|
2012-11-30 08:07:59 +00:00
|
|
|
// FIXME bug 684352: make sure its immediate neighbors are visible too.
|
|
|
|
|
|
|
|
let scrollbox = this.container;
|
|
|
|
let element = this.nodeHierarchy[this.currentIndex].button;
|
2013-02-20 23:33:36 +00:00
|
|
|
|
|
|
|
// Repeated calls to ensureElementIsVisible would interfere with each other
|
|
|
|
// and may sometimes result in incorrect scroll positions.
|
|
|
|
this.chromeWin.clearTimeout(this._ensureVisibleTimeout);
|
2016-05-04 21:48:15 +00:00
|
|
|
this._ensureVisibleTimeout = this.chromeWin.setTimeout(function () {
|
2013-02-20 23:33:36 +00:00
|
|
|
scrollbox.ensureElementIsVisible(element);
|
2016-05-04 21:48:15 +00:00
|
|
|
}, ENSURE_SELECTION_VISIBLE_DELAY_MS);
|
2012-11-30 08:07:59 +00:00
|
|
|
},
|
|
|
|
|
2015-04-08 10:16:25 +00:00
|
|
|
/**
|
|
|
|
* Update all button outputs.
|
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
updateSelectors: function () {
|
2014-07-01 04:32:00 +00:00
|
|
|
if (this.isDestroyed) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2012-11-30 08:07:59 +00:00
|
|
|
for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
|
2015-04-13 08:22:05 +00:00
|
|
|
let {node, button, currentPrettyPrintText} = this.nodeHierarchy[i];
|
2012-11-30 08:07:59 +00:00
|
|
|
|
2015-04-13 08:22:05 +00:00
|
|
|
// If the output of the node doesn't change, skip the update.
|
|
|
|
let textOutput = this.prettyPrintNodeAsText(node);
|
|
|
|
if (currentPrettyPrintText === textOutput) {
|
|
|
|
continue;
|
|
|
|
}
|
|
|
|
|
|
|
|
// Otherwise, update the whole markup for the button.
|
2015-04-08 10:16:25 +00:00
|
|
|
while (button.hasChildNodes()) {
|
2015-04-13 08:22:05 +00:00
|
|
|
button.firstChild.remove();
|
2012-11-30 08:07:59 +00:00
|
|
|
}
|
2015-04-13 08:22:05 +00:00
|
|
|
button.appendChild(this.prettyPrintNodeAsXUL(node));
|
|
|
|
button.setAttribute("tooltiptext", textOutput);
|
|
|
|
|
|
|
|
this.nodeHierarchy[i].currentPrettyPrintText = textOutput;
|
2012-11-30 08:07:59 +00:00
|
|
|
}
|
|
|
|
},
|
|
|
|
|
2015-04-13 08:22:05 +00:00
|
|
|
/**
|
|
|
|
* Given a list of mutation changes (passed by the markupmutation event),
|
|
|
|
* decide whether or not they are "interesting" to the current state of the
|
|
|
|
* breadcrumbs widget, i.e. at least one of them should cause part of the
|
|
|
|
* widget to be updated.
|
|
|
|
* @param {Array} mutations The mutations array.
|
|
|
|
* @return {Boolean}
|
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
_hasInterestingMutations: function (mutations) {
|
2015-04-13 08:22:05 +00:00
|
|
|
if (!mutations || !mutations.length) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
for (let {type, added, removed, target, attributeName} of mutations) {
|
|
|
|
if (type === "childList") {
|
|
|
|
// Only interested in childList mutations if the added or removed
|
2016-04-15 10:03:33 +00:00
|
|
|
// nodes are currently displayed.
|
2015-04-13 08:22:05 +00:00
|
|
|
return added.some(node => this.indexOf(node) > -1) ||
|
2016-04-15 10:03:33 +00:00
|
|
|
removed.some(node => this.indexOf(node) > -1);
|
2015-04-13 08:22:05 +00:00
|
|
|
} else if (type === "attributes" && this.indexOf(target) > -1) {
|
|
|
|
// Only interested in attributes mutations if the target is
|
|
|
|
// currently displayed, and the attribute is either id or class.
|
|
|
|
return attributeName === "class" || attributeName === "id";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
// Catch all return in case the mutations array was empty, or in case none
|
|
|
|
// of the changes iterated above were interesting.
|
|
|
|
return false;
|
|
|
|
},
|
|
|
|
|
2012-11-30 08:07:59 +00:00
|
|
|
/**
|
|
|
|
* Update the breadcrumbs display when a new node is selected.
|
2015-04-08 10:16:25 +00:00
|
|
|
* @param {String} reason The reason for the update, if any.
|
2015-04-13 08:22:05 +00:00
|
|
|
* @param {Array} mutations An array of mutations in case this was called as
|
|
|
|
* the "markupmutation" event listener.
|
2012-11-30 08:07:59 +00:00
|
|
|
*/
|
2016-05-04 21:48:15 +00:00
|
|
|
update: function (reason, mutations) {
|
2014-07-01 04:32:00 +00:00
|
|
|
if (this.isDestroyed) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2013-11-07 19:03:40 +00:00
|
|
|
if (reason !== "markupmutation") {
|
|
|
|
this.inspector.hideNodeMenu();
|
|
|
|
}
|
2012-11-30 08:07:59 +00:00
|
|
|
|
2015-04-13 08:22:05 +00:00
|
|
|
let hasInterestingMutations = this._hasInterestingMutations(mutations);
|
|
|
|
if (reason === "markupmutation" && !hasInterestingMutations) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2012-11-30 08:07:59 +00:00
|
|
|
let cmdDispatcher = this.chromeDoc.commandDispatcher;
|
|
|
|
this.hadFocus = (cmdDispatcher.focusedElement &&
|
|
|
|
cmdDispatcher.focusedElement.parentNode == this.container);
|
|
|
|
|
|
|
|
if (!this.selection.isConnected()) {
|
2015-06-02 09:26:24 +00:00
|
|
|
// remove all the crumbs
|
|
|
|
this.cutAfter(-1);
|
2012-11-30 08:07:59 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (!this.selection.isElementNode()) {
|
2015-06-02 09:26:24 +00:00
|
|
|
// no selection
|
|
|
|
this.setCursor(-1);
|
2012-11-30 08:07:59 +00:00
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
2013-06-07 21:33:39 +00:00
|
|
|
let idx = this.indexOf(this.selection.nodeFront);
|
2012-11-30 08:07:59 +00:00
|
|
|
|
|
|
|
// Is the node already displayed in the breadcrumbs?
|
2013-10-02 00:14:00 +00:00
|
|
|
// (and there are no mutations that need re-display of the crumbs)
|
2015-04-13 08:22:05 +00:00
|
|
|
if (idx > -1 && !hasInterestingMutations) {
|
2012-11-30 08:07:59 +00:00
|
|
|
// 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
|
2013-06-07 21:33:39 +00:00
|
|
|
let parent = this.selection.nodeFront.parentNode();
|
2016-05-04 21:48:15 +00:00
|
|
|
let ancestorIdx = this.getCommonAncestor(parent);
|
|
|
|
this.cutAfter(ancestorIdx);
|
2012-11-30 08:07:59 +00:00
|
|
|
}
|
|
|
|
// we append the missing button between the end of the breadcrumbs display
|
|
|
|
// and the current node.
|
2013-06-07 21:33:39 +00:00
|
|
|
this.expand(this.selection.nodeFront);
|
2012-11-30 08:07:59 +00:00
|
|
|
|
|
|
|
// we select the current node button
|
2013-06-07 21:33:39 +00:00
|
|
|
idx = this.indexOf(this.selection.nodeFront);
|
2012-11-30 08:07:59 +00:00
|
|
|
this.setCursor(idx);
|
|
|
|
}
|
|
|
|
|
2013-06-07 21:33:39 +00:00
|
|
|
let doneUpdating = this.inspector.updating("breadcrumbs");
|
2014-07-01 04:32:00 +00:00
|
|
|
|
2016-04-15 10:03:33 +00:00
|
|
|
this.updateSelectors();
|
|
|
|
|
|
|
|
// Make sure the selected node and its neighbours are visible.
|
|
|
|
this.scroll();
|
|
|
|
waitForTick().then(() => {
|
|
|
|
this.inspector.emit("breadcrumbs-updated", this.selection.nodeFront);
|
|
|
|
doneUpdating();
|
2013-06-07 21:33:39 +00:00
|
|
|
});
|
2013-10-02 00:14:00 +00:00
|
|
|
}
|
2014-03-09 17:03:00 +00:00
|
|
|
};
|