diff --git a/devtools/client/inspector/breadcrumbs.js b/devtools/client/inspector/breadcrumbs.js
index 6c95e2755dfe..a1174cc5b00b 100644
--- a/devtools/client/inspector/breadcrumbs.js
+++ b/devtools/client/inspector/breadcrumbs.js
@@ -13,8 +13,10 @@ const promise = require("promise");
const FocusManager = Services.focus;
const {waitForTick} = require("devtools/shared/DevToolsUtils");
-const ENSURE_SELECTION_VISIBLE_DELAY = 50; // ms
-const ELLIPSIS = Services.prefs.getComplexValue("intl.ellipsis", Ci.nsIPrefLocalizedString).data;
+const ENSURE_SELECTION_VISIBLE_DELAY_MS = 50;
+const ELLIPSIS = Services.prefs.getComplexValue(
+ "intl.ellipsis",
+ Ci.nsIPrefLocalizedString).data;
const MAX_LABEL_LENGTH = 40;
const LOW_PRIORITY_ELEMENTS = {
"HEAD": true,
@@ -57,7 +59,7 @@ HTMLBreadcrumbs.prototype = {
return this.inspector.walker;
},
- _init: function() {
+ _init: function () {
this.container = this.chromeDoc.getElementById("inspector-breadcrumbs");
// These separators are used for CSS purposes only, and are positioned
@@ -70,7 +72,7 @@ HTMLBreadcrumbs.prototype = {
"";
this.container.parentNode.appendChild(this.separators);
- this.container.addEventListener("mousedown", this, true);
+ this.container.addEventListener("click", this, true);
this.container.addEventListener("keypress", this, true);
this.container.addEventListener("mouseover", this, true);
this.container.addEventListener("mouseleave", this, true);
@@ -113,7 +115,7 @@ HTMLBreadcrumbs.prototype = {
* when the breadcrumbs' selection has changed while the promise
* was outstanding.
*/
- selectionGuard: function() {
+ selectionGuard: function () {
let selection = this.selection.nodeFront;
return result => {
if (selection != this.selection.nodeFront) {
@@ -127,7 +129,7 @@ HTMLBreadcrumbs.prototype = {
* Warn if rejection was caused by selection change, print an error otherwise.
* @param {Error} err
*/
- selectionGuardEnd: function(err) {
+ selectionGuardEnd: function (err) {
// If the error is selection-changed, this is expected, the selection
// changed while we were waiting for a promise to resolve, so there's no
// need to proceed with the current update, and we should be silent.
@@ -141,7 +143,7 @@ HTMLBreadcrumbs.prototype = {
* @param {NodeFront} node The node to pretty-print
* @return {String}
*/
- prettyPrintNodeAsText: function(node) {
+ prettyPrintNodeAsText: function (node) {
let text = node.tagName.toLowerCase();
if (node.isPseudoElement) {
text = node.isBeforePseudoElement ? "::before" : "::after";
@@ -173,7 +175,7 @@ HTMLBreadcrumbs.prototype = {
* @param {NodeFront} node The node to pretty-print
* @returns {DocumentFragment}
*/
- prettyPrintNodeAsXUL: function(node) {
+ prettyPrintNodeAsXUL: function (node) {
let fragment = this.chromeDoc.createDocumentFragment();
let tagLabel = this.chromeDoc.createElement("label");
@@ -232,62 +234,13 @@ HTMLBreadcrumbs.prototype = {
return fragment;
},
- /**
- * Open the sibling menu.
- * @param {DOMNode} button the button representing the node.
- * @param {NodeFront} node the node we want the siblings from.
- */
- openSiblingMenu: function(button, node) {
- // We make sure that the targeted node is selected
- // because we want to use the nodemenu that only works
- // for inspector.selection
- this.navigateTo(node);
-
- // Build a list of extra menu items that will be appended at the end of the
- // inspector node context menu.
- let items = [this.chromeDoc.createElement("menuseparator")];
-
- this.walker.siblings(node, {
- whatToShow: Ci.nsIDOMNodeFilter.SHOW_ELEMENT
- }).then(siblings => {
- let nodes = siblings.nodes;
- for (let i = 0; i < nodes.length; i++) {
- // Skip siblings of the documentElement node.
- if (nodes[i].nodeType !== Ci.nsIDOMNode.ELEMENT_NODE) {
- continue;
- }
-
- let item = this.chromeDoc.createElement("menuitem");
- if (nodes[i] === node) {
- item.setAttribute("disabled", "true");
- item.setAttribute("checked", "true");
- }
-
- item.setAttribute("type", "radio");
- item.setAttribute("label", this.prettyPrintNodeAsText(nodes[i]));
-
- let self = this;
- item.onmouseup = (function(node) {
- return function() {
- self.navigateTo(node);
- };
- })(nodes[i]);
-
- items.push(item);
- }
-
- // Append the items to the inspector node context menu and show the menu.
- this.inspector.showNodeMenu(button, "before_start", items);
- });
- },
-
/**
* Generic event handler.
* @param {DOMEvent} event.
*/
- handleEvent: function(event) {
- if (event.type == "mousedown" && event.button == 0) {
- this.handleMouseDown(event);
+ handleEvent: function (event) {
+ if (event.type == "click" && event.button == 0) {
+ this.handleClick(event);
} else if (event.type == "keypress" && this.selection.isElementNode()) {
this.handleKeyPress(event);
} else if (event.type == "mouseover") {
@@ -304,7 +257,7 @@ HTMLBreadcrumbs.prototype = {
* already selected breadcrumb, move focus to it.
* @param {DOMEvent} event.
*/
- handleFocus: function(event) {
+ handleFocus: function (event) {
let control = this.container.querySelector(
".breadcrumbs-widget-item[checked]");
if (control && control !== event.target) {
@@ -316,46 +269,21 @@ HTMLBreadcrumbs.prototype = {
},
/**
- * On click and hold, open the siblings menu.
+ * On click navigate to the correct node.
* @param {DOMEvent} event.
*/
- handleMouseDown: function(event) {
- let timer;
- let container = this.container;
-
- function openMenu(event) {
- cancelHold();
- let target = event.originalTarget;
- if (target.tagName == "button") {
- target.onBreadcrumbsHold();
- }
+ handleClick: function (event) {
+ let target = event.originalTarget;
+ if (target.tagName == "button") {
+ target.onBreadcrumbsClick();
}
-
- 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);
},
/**
* On mouse over, highlight the corresponding content DOM Node.
* @param {DOMEvent} event.
*/
- handleMouseOver: function(event) {
+ handleMouseOver: function (event) {
let target = event.originalTarget;
if (target.tagName == "button") {
target.onBreadcrumbsHover();
@@ -366,7 +294,7 @@ HTMLBreadcrumbs.prototype = {
* On mouse leave, make sure to unhighlight.
* @param {DOMEvent} event.
*/
- handleMouseLeave: function(event) {
+ handleMouseLeave: function (event) {
this.inspector.toolbox.highlighterUtils.unhighlight();
},
@@ -374,7 +302,7 @@ HTMLBreadcrumbs.prototype = {
* On key press, navigate the node hierarchy.
* @param {DOMEvent} event.
*/
- handleKeyPress: function(event) {
+ handleKeyPress: function (event) {
let navigate = promise.resolve(null);
this._keyPromise = (this._keyPromise || promise.resolve(null)).then(() => {
@@ -433,15 +361,17 @@ HTMLBreadcrumbs.prototype = {
/**
* Remove nodes and clean up.
*/
- destroy: function() {
+ destroy: function () {
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.container.removeEventListener("mousedown", this, true);
+ this.container.removeEventListener("underflow",
+ this.onscrollboxreflow, false);
+ this.container.removeEventListener("overflow",
+ this.onscrollboxreflow, false);
+ this.container.removeEventListener("click", this, true);
this.container.removeEventListener("keypress", this, true);
this.container.removeEventListener("mouseover", this, true);
this.container.removeEventListener("mouseleave", this, true);
@@ -461,7 +391,7 @@ HTMLBreadcrumbs.prototype = {
/**
* Empty the breadcrumbs container.
*/
- empty: function() {
+ empty: function () {
while (this.container.hasChildNodes()) {
this.container.firstChild.remove();
}
@@ -471,9 +401,10 @@ HTMLBreadcrumbs.prototype = {
* Set which button represent the selected node.
* @param {Number} index Index of the displayed-button to select.
*/
- setCursor: function(index) {
+ setCursor: function (index) {
// Unselect the previously selected button
- if (this.currentIndex > -1 && this.currentIndex < this.nodeHierarchy.length) {
+ if (this.currentIndex > -1
+ && this.currentIndex < this.nodeHierarchy.length) {
this.nodeHierarchy[this.currentIndex].button.removeAttribute("checked");
}
if (index > -1) {
@@ -490,7 +421,7 @@ HTMLBreadcrumbs.prototype = {
* @param {NodeFront} node.
* @returns {Number} The index for this node or -1 if not found.
*/
- indexOf: function(node) {
+ indexOf: function (node) {
for (let i = this.nodeHierarchy.length - 1; i >= 0; i--) {
if (this.nodeHierarchy[i].node === node) {
return i;
@@ -504,14 +435,14 @@ HTMLBreadcrumbs.prototype = {
* index.
* @param {Number} index.
*/
- cutAfter: function(index) {
+ cutAfter: function (index) {
while (this.nodeHierarchy.length > (index + 1)) {
let toRemove = this.nodeHierarchy.pop();
this.container.removeChild(toRemove.button);
}
},
- navigateTo: function(node) {
+ navigateTo: function (node) {
if (node) {
this.selection.setNodeFront(node, "breadcrumbs");
} else {
@@ -524,7 +455,7 @@ HTMLBreadcrumbs.prototype = {
* @param {NodeFront} node The node from the page.
* @return {DOMNode} The