Commit f985d588 authored by pfeldman@chromium.org's avatar pfeldman@chromium.org

Web Inspector: preserve elements panel selection upon node drag'n'drop

https://bugs.webkit.org/show_bug.cgi?id=77722

Reviewed by Vsevolod Vlasov.

Source/WebCore:

Test: inspector/elements/move-node.html

* inspector/front-end/DOMAgent.js:
(WebInspector.DOMAgent.prototype._markRevision):
* inspector/front-end/ElementsTreeOutline.js:
(WebInspector.ElementsTreeOutline.prototype._ondrop):
(WebInspector.ElementsTreeOutline.prototype._doMove.callback):
(WebInspector.ElementsTreeOutline.prototype._doMove):

LayoutTests:

* inspector/elements/move-node-expected.txt: Added.
* inspector/elements/move-node.html: Added.

git-svn-id: http://svn.webkit.org/repository/webkit/trunk@106638 268f45cc-cd09-0410-ab3c-d52691b4dbfc
parent 4a5af418
2012-02-03 Pavel Feldman <pfeldman@google.com>
Web Inspector: preserve elements panel selection upon node drag'n'drop
https://bugs.webkit.org/show_bug.cgi?id=77722
Reviewed by Vsevolod Vlasov.
* inspector/elements/move-node-expected.txt: Added.
* inspector/elements/move-node.html: Added.
2012-02-03 Shinya Kawanaka <shinyak@google.com>
Reimplement DETAILS and SUMMARY using selector query.
......@@ -23,7 +23,7 @@ Running: testSetNodeName
</div>
==== after ====
- <div id="testSetNodeName">
<span id="node-to-set-name"></span>
<span id="node-to-set-name" ></span>
</div>
Running: testSetNodeNameInput
......@@ -33,7 +33,7 @@ Running: testSetNodeNameInput
</div>
==== after ====
- <div id="testSetNodeNameInput">
<input id="node-to-set-name-input">
<input id="node-to-set-name-input" >
</div>
Running: testSetNodeValue
......
Tests elements drag and drop operation internals, verifies post-move selection.
Running: testDumpInitial
========= Original ========
- <div id="container">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
<div id="child4"></div>
</div>
Running: testDragAndDrop
===== Moved child2 =====
- <div id="container">
<div id="child1"></div>
<div id="child3"></div>
<div id="child2"></div>
<div id="child4"></div>
</div>
Selection: div#child2
<html>
<head>
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/elements-test.js"></script>
<script>
function test()
{
var containerNode;
InspectorTest.runTestSuite([
function testDumpInitial(next)
{
function callback(node)
{
containerNode = InspectorTest.expandedNodeWithId("container");
InspectorTest.addResult("========= Original ========");
InspectorTest.dumpElementsTree(containerNode);
next();
}
InspectorTest.expandElementsTree(callback);
},
function testDragAndDrop(next)
{
var treeOutline = WebInspector.panels.elements.treeOutline;
treeOutline.addEventListener(WebInspector.ElementsTreeOutline.Events.SelectedNodeChanged, selectionChanged);
function selectionChanged()
{
InspectorTest.addResult("===== Moved child2 =====");
InspectorTest.dumpElementsTree(containerNode);
InspectorTest.addResult("Selection: " + treeOutline.selectedDOMNode().appropriateSelectorFor());
next();
}
treeOutline._nodeBeingDragged = InspectorTest.expandedNodeWithId("child2");
var treeElementToDropOn = treeOutline.getCachedTreeElement(InspectorTest.expandedNodeWithId("child4"));
treeOutline._doMove(treeElementToDropOn);
}
]);
}
</script>
</head>
<body onload="runTest()">
<p>
Tests elements drag and drop operation internals, verifies post-move selection.
</p>
<div id="container">
<div id="child1"></div>
<div id="child2"></div>
<div id="child3"></div>
<div id="child4"></div>
</div>
</body>
</html>
2012-02-03 Pavel Feldman <pfeldman@google.com>
Web Inspector: preserve elements panel selection upon node drag'n'drop
https://bugs.webkit.org/show_bug.cgi?id=77722
Reviewed by Vsevolod Vlasov.
Test: inspector/elements/move-node.html
* inspector/front-end/DOMAgent.js:
(WebInspector.DOMAgent.prototype._markRevision):
* inspector/front-end/ElementsTreeOutline.js:
(WebInspector.ElementsTreeOutline.prototype._ondrop):
(WebInspector.ElementsTreeOutline.prototype._doMove.callback):
(WebInspector.ElementsTreeOutline.prototype._doMove):
2012-02-03 Shinya Kawanaka <shinyak@google.com>
Reimplement DETAILS and SUMMARY using selector query.
......@@ -978,7 +978,7 @@ WebInspector.DOMAgent.prototype = {
function wrapperFunction(error)
{
if (callback)
callback(error);
callback.apply(this, arguments);
if (error || !WebInspector.experimentsSettings.freeFlowDOMEditing.isEnabled())
return;
if (this._captureDOMTimer)
......
......@@ -386,32 +386,40 @@ WebInspector.ElementsTreeOutline.prototype = {
{
event.preventDefault();
var treeElement = this._treeElementFromEvent(event);
if (this._nodeBeingDragged && treeElement) {
var parentNode;
var anchorNode;
if (treeElement)
this._doMove(treeElement);
},
if (treeElement._elementCloseTag) {
// Drop onto closing tag -> insert as last child.
parentNode = treeElement.representedObject;
} else {
var dragTargetNode = treeElement.representedObject;
parentNode = dragTargetNode.parentNode;
anchorNode = dragTargetNode;
}
_doMove: function(treeElement)
{
if (!this._nodeBeingDragged)
return;
function callback(error, newNodeId)
{
if (error)
return;
var parentNode;
var anchorNode;
this._updateModifiedNodes();
var newNode = WebInspector.domAgent.nodeForId(newNodeId);
if (newNode)
this.selectDOMNode(newNode, true);
}
this._nodeBeingDragged.moveTo(parentNode, anchorNode, callback.bind(this));
if (treeElement._elementCloseTag) {
// Drop onto closing tag -> insert as last child.
parentNode = treeElement.representedObject;
} else {
var dragTargetNode = treeElement.representedObject;
parentNode = dragTargetNode.parentNode;
anchorNode = dragTargetNode;
}
function callback(error, newNodeId)
{
if (error)
return;
this._updateModifiedNodes();
var newNode = WebInspector.domAgent.nodeForId(newNodeId);
if (newNode)
this.selectDOMNode(newNode, true);
}
this._nodeBeingDragged.moveTo(parentNode, anchorNode, callback.bind(this));
delete this._nodeBeingDragged;
},
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment