From 0fb164e88523d49adc6983752ba792051611177f Mon Sep 17 00:00:00 2001 From: Steve Melia Date: Wed, 4 May 2016 22:48:15 +0100 Subject: [PATCH] Bug 1269915 - Remove right click menu from breadcrumbs;r=bgrins MozReview-Commit-ID: 4mD2zcW7Awe --- devtools/client/inspector/breadcrumbs.js | 191 ++++++------------ devtools/client/inspector/inspector.xul | 2 +- devtools/client/inspector/test/browser.ini | 1 - .../browser_inspector_breadcrumbs_menu.js | 51 ----- 4 files changed, 59 insertions(+), 186 deletions(-) delete mode 100644 devtools/client/inspector/test/browser_inspector_breadcrumbs_menu.js 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