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 @@
- Delete me via the inspector
+ - This node is selected after manual delete
- Delete me via javascript
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");
});