diff --git a/browser/devtools/inspector/test/browser_inspector_delete-selected-node-02.js b/browser/devtools/inspector/test/browser_inspector_delete-selected-node-02.js index 99f083ed27e1..67b76ddff74d 100644 --- a/browser/devtools/inspector/test/browser_inspector_delete-selected-node-02.js +++ b/browser/devtools/inspector/test/browser_inspector_delete-selected-node-02.js @@ -42,7 +42,7 @@ add_task(function* () { yield inspector.once("inspector-updated"); info("Inspector updated, performing checks."); - yield assertNodeSelectedAndPanelsUpdated("#deleteChildren", "ul#deleteChildren"); + yield assertNodeSelectedAndPanelsUpdated("#selectedAfterDelete", "li#selectedAfterDelete"); } function* testAutomaticallyDeleteSelectedNode() { diff --git a/browser/devtools/inspector/test/doc_inspector_delete-selected-node-02.html b/browser/devtools/inspector/test/doc_inspector_delete-selected-node-02.html index c91281867e9d..4d1ed5173012 100644 --- a/browser/devtools/inspector/test/doc_inspector_delete-selected-node-02.html +++ b/browser/devtools/inspector/test/doc_inspector_delete-selected-node-02.html @@ -7,6 +7,7 @@ diff --git a/browser/devtools/markupview/markup-view.js b/browser/devtools/markupview/markup-view.js index 0f5f15933e8b..7b484e931d49 100644 --- a/browser/devtools/markupview/markup-view.js +++ b/browser/devtools/markupview/markup-view.js @@ -426,9 +426,11 @@ MarkupView.prototype = { } break; case Ci.nsIDOMKeyEvent.DOM_VK_DELETE: - case Ci.nsIDOMKeyEvent.DOM_VK_BACK_SPACE: this.deleteNode(this._selectedContainer.node); break; + case Ci.nsIDOMKeyEvent.DOM_VK_BACK_SPACE: + this.deleteNode(this._selectedContainer.node, true); + break; case Ci.nsIDOMKeyEvent.DOM_VK_HOME: let rootContainer = this.getContainer(this._rootNode); this.navigate(rootContainer.children.firstChild.container); @@ -508,8 +510,12 @@ MarkupView.prototype = { /** * Delete a node from the DOM. * This is an undoable action. + * + * @param {NodeFront} aNode The node to remove. + * @param {boolean} moveBackward If set to true, focus the previous sibling, + * otherwise the next one. */ - deleteNode: function(aNode) { + deleteNode: function(aNode, moveBackward) { if (aNode.isDocumentElement || aNode.nodeType == Ci.nsIDOMNode.DOCUMENT_TYPE_NODE || aNode.isAnonymous) { @@ -524,8 +530,15 @@ MarkupView.prototype = { let nextSibling = null; this.undo.do(() => { this.walker.removeNode(aNode).then(siblings => { - let focusNode = siblings.previousSibling || parent; nextSibling = siblings.nextSibling; + let focusNode = moveBackward ? siblings.previousSibling : nextSibling; + + // If we can't move as the user wants, we move to the other direction. + // If there is no sibling elements anymore, move to the parent node. + if (!focusNode) { + focusNode = nextSibling || siblings.previousSibling || parent; + } + if (container.selected) { this.navigate(this.getContainer(focusNode)); } diff --git a/browser/devtools/markupview/test/browser_markupview_tag_edit_04.js b/browser/devtools/markupview/test/browser_markupview_tag_edit_04.js index 53d4344464b4..dedaf12658f7 100644 --- a/browser/devtools/markupview/test/browser_markupview_tag_edit_04.js +++ b/browser/devtools/markupview/test/browser_markupview_tag_edit_04.js @@ -10,13 +10,13 @@ const TEST_URL = "data:text/html,
"; -function* checkDeleteAndSelection(inspector, nodeSelector, focusedNodeSelector) { +function* checkDeleteAndSelection(inspector, key, nodeSelector, focusedNodeSelector) { yield selectNode(nodeSelector, inspector); yield clickContainer(nodeSelector, inspector); - info("Deleting the element \"" + nodeSelector + "\" with the keyboard"); + info(`Deleting the element "${nodeSelector}" using the ${key} key`); let mutated = inspector.once("markupmutation"); - EventUtils.sendKey("delete", inspector.panelWin); + EventUtils.sendKey(key, inspector.panelWin); yield Promise.all([mutated, inspector.once("inspector-updated")]); @@ -36,9 +36,24 @@ let test = asyncTest(function*() { info("Selecting the test node by clicking on it to make sure it receives focus"); - yield checkDeleteAndSelection(inspector, "#first", "#parent"); - yield checkDeleteAndSelection(inspector, "#second", "#first"); - yield checkDeleteAndSelection(inspector, "#third", "#second"); + yield checkDeleteAndSelection(inspector, "delete", "#first", "#second"); + yield checkDeleteAndSelection(inspector, "delete", "#second", "#third"); + yield checkDeleteAndSelection(inspector, "delete", "#third", "#second"); + + yield checkDeleteAndSelection(inspector, "back_space", "#first", "#second"); + yield checkDeleteAndSelection(inspector, "back_space", "#second", "#first"); + yield checkDeleteAndSelection(inspector, "back_space", "#third", "#second"); + + // Removing the siblings of #first. + let mutated = inspector.once("markupmutation"); + for (let node of content.document.querySelectorAll("#second, #third")) { + node.remove(); + } + yield mutated; + // Testing with an only child. + info("testing with an only child"); + yield checkDeleteAndSelection(inspector, "delete", "#first", "#parent"); + yield checkDeleteAndSelection(inspector, "back_space", "#first", "#parent"); yield inspector.once("inspector-updated"); });