Skip to content

GitLab

T
tangled
Commit 39d506e5 authored by apavlov@chromium.org's avatar apavlov@chromium.org
Browse files
Options

DevTools: Allow general editing of author shadow DOM elements 

As a drive-by, shadow DOM editing tests have been extracted into a new HTML

R=aandrey, pfeldman, vsevik
BUG=353910
NOTRY=true

Review URL: https://codereview.chromium.org/206503002

git-svn-id: svn://svn.chromium.org/blink/trunk@169743 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent f64411a3
Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 143 deletions
third_party/WebKit/LayoutTests/inspector/elements/edit-dom-actions-expected.txt
View file @ 39d506e5
...@@ -148,18 +148,3 @@ Running: testEditScript ...@@ -148,18 +148,3 @@ Running: testEditScript
</script> </script>
</div> </div>
Running: testEditShadowDOMAsHTML
==== before ====
- <div id="testEditAuthorShadowDOMAsHTML">
- #shadow-root
<div id="authorShadowDOMElement"></div>
</div>
<div id="authorShadowDOMElement"></div>
==== after ====
- <div id="testEditAuthorShadowDOMAsHTML">
- #shadow-root
- <span foo="shadow-span">
<span id="inner-shadow-span">Shadow span contents</span>
</span>
</div>
third_party/WebKit/LayoutTests/inspector/elements/edit-dom-actions-shadow-expected.txt 0 → 100644
View file @ 39d506e5
Tests that user can mutate author shadow DOM by means of elements panel.
Running: testSetUp
Running: testSetAuthorShadowDOMElementAttribute
==== before ====
- <div id="testSetAuthorShadowDOMElementAttribute">
- #shadow-root
<div foo="attribute value" id="shadow-node-to-set-attribute"></div>
</div>
==== after ====
- <div id="testSetAuthorShadowDOMElementAttribute">
- #shadow-root
<div id="shadow-node-to-set-attribute" bar="edited attribute"></div>
</div>
Running: testEditShadowDOMAsHTML
==== before ====
- <div id="testEditAuthorShadowDOMAsHTML">
- #shadow-root
<div id="authorShadowDOMElement"></div>
</div>
<div id="authorShadowDOMElement"></div>
==== after ====
- <div id="testEditAuthorShadowDOMAsHTML">
- #shadow-root
- <span foo="shadow-span">
<span id="inner-shadow-span">Shadow span contents</span>
</span>
</div>
third_party/WebKit/LayoutTests/inspector/elements/edit-dom-actions-shadow.html 0 → 100644
View file @ 39d506e5
<html>
<head>
<script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/elements-test.js"></script>
<script src="edit-dom-test.js"></script>
<script>
function test()
{
// Save time on style updates.
WebInspector.inspectorView.showPanel("elements");
WebInspector.StylesSidebarPane.prototype.update = function() {};
WebInspector.MetricsSidebarPane.prototype.update = function() {};
InspectorTest.runTestSuite([
function testSetUp(next)
{
InspectorTest.nodeWithId("authorShadowDOMElement");
InspectorTest.nodeWithId("testSetAuthorShadowDOMElementAttribute", checkTree);
function checkTree()
{
InspectorTest.expandElementsTree(next);
}
},
function testSetAuthorShadowDOMElementAttribute(next)
{
InspectorTest.domActionTestForNodeId("testSetAuthorShadowDOMElementAttribute", "shadow-node-to-set-attribute", testBody, next);
function testBody(node, done)
{
InspectorTest.editNodePartAndRun(node, "webkit-html-attribute", "bar=\"edited attribute\"", done, true);
}
},
function testEditShadowDOMAsHTML(next)
{
InspectorTest.domActionTestForNodeId("testEditAuthorShadowDOMAsHTML", "authorShadowDOMElement", testBody, next);
function testBody(node, done)
{
var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
treeElement._editAsHTML();
InspectorTest.runAfterPendingDispatches(step2);
function step2()
{
InspectorTest.addResult(treeElement._editing.codeMirror.getValue());
treeElement._editing.codeMirror.setValue("<span foo=\"shadow-span\"><span id=\"inner-shadow-span\">Shadow span contents</span></span>");
var event = InspectorTest.createKeyEvent("Enter");
event.isMetaOrCtrlForTest = true;
treeElement._htmlEditElement.dispatchEvent(event);
InspectorTest.runAfterPendingDispatches(InspectorTest.expandElementsTree.bind(InspectorTest, done));
}
}
}
]);
}
</script>
</head>
<body onload="runTest()">
<p>
Tests that user can mutate author shadow DOM by means of elements panel.
</p>
<div>
<div id="testEditAuthorShadowDOMAsHTML"></div>
<div id="testSetAuthorShadowDOMElementAttribute"></div>
</div>
<script>
function createRootWithContents(id, html)
{
var container = document.getElementById(id);
var root = container.createShadowRoot();
root.innerHTML = html;
}
createRootWithContents("testEditAuthorShadowDOMAsHTML", "<div id='authorShadowDOMElement'></div>");
createRootWithContents("testSetAuthorShadowDOMElementAttribute", "<div foo='attribute value' id='shadow-node-to-set-attribute'></div>");
</script>
</body>
</html>
third_party/WebKit/LayoutTests/inspector/elements/edit-dom-actions.html
View file @ 39d506e5
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
<head> <head>
<script src="../../http/tests/inspector/inspector-test.js"></script> <script src="../../http/tests/inspector/inspector-test.js"></script>
<script src="../../http/tests/inspector/elements-test.js"></script> <script src="../../http/tests/inspector/elements-test.js"></script>
<script src="edit-dom-test.js"></script>
<script> <script>
function test() function test()
...@@ -19,7 +20,7 @@ function test() ...@@ -19,7 +20,7 @@ function test()
function testRemove(next) function testRemove(next)
{ {
domActionTestForNodeId("testRemove", "node-to-remove", testBody, next); InspectorTest.domActionTestForNodeId("testRemove", "node-to-remove", testBody, next);
function testBody(node, done) function testBody(node, done)
{ {
...@@ -31,72 +32,72 @@ function test() ...@@ -31,72 +32,72 @@ function test()
function testSetNodeName(next) function testSetNodeName(next)
{ {
domActionTestForNodeId("testSetNodeName", "node-to-set-name", testBody, next); InspectorTest.domActionTestForNodeId("testSetNodeName", "node-to-set-name", testBody, next);
function testBody(node, done) function testBody(node, done)
{ {
editNodePartAndRun(node, "webkit-html-tag-name", "span", done); InspectorTest.editNodePartAndRun(node, "webkit-html-tag-name", "span", done);
} }
}, },
function testSetNodeNameInput(next) function testSetNodeNameInput(next)
{ {
domActionTestForNodeId("testSetNodeNameInput", "node-to-set-name-input", testBody, next); InspectorTest.domActionTestForNodeId("testSetNodeNameInput", "node-to-set-name-input", testBody, next);
function testBody(node, done) function testBody(node, done)
{ {
editNodePartAndRun(node, "webkit-html-tag-name", "input", done); InspectorTest.editNodePartAndRun(node, "webkit-html-tag-name", "input", done);
} }
}, },
function testSetNodeValue(next) function testSetNodeValue(next)
{ {
domActionTestForNodeId("testSetNodeValue", "node-to-set-value", testBody, next); InspectorTest.domActionTestForNodeId("testSetNodeValue", "node-to-set-value", testBody, next);
function testBody(node, done) function testBody(node, done)
{ {
editNodePartAndRun(node, "webkit-html-text-node", " \n Edited Text \n ", done); InspectorTest.editNodePartAndRun(node, "webkit-html-text-node", " \n Edited Text \n ", done);
} }
}, },
function testSetAttribute(next) function testSetAttribute(next)
{ {
domActionTestForNodeId("testSetAttribute", "node-to-set-attribute", testBody, next); InspectorTest.domActionTestForNodeId("testSetAttribute", "node-to-set-attribute", testBody, next);
function testBody(node, done) function testBody(node, done)
{ {
editNodePartAndRun(node, "webkit-html-attribute", "bar=\"edited attribute\"", done, true); InspectorTest.editNodePartAndRun(node, "webkit-html-attribute", "bar=\"edited attribute\"", done, true);
} }
}, },
function testSetScriptableAttribute(next) function testSetScriptableAttribute(next)
{ {
domActionTestForNodeId("testSetScriptableAttribute", "node-to-set-scriptable-attribute", testBody, next); InspectorTest.domActionTestForNodeId("testSetScriptableAttribute", "node-to-set-scriptable-attribute", testBody, next);
function testBody(node, done) function testBody(node, done)
{ {
editNodePartAndRun(node, "webkit-html-attribute", "onclick=\"alert(2)\"", done, true); InspectorTest.editNodePartAndRun(node, "webkit-html-attribute", "onclick=\"alert(2)\"", done, true);
} }
}, },
function testRemoveAttribute(next) function testRemoveAttribute(next)
{ {
domActionTestForNodeId("testRemoveAttribute", "node-to-remove-attribute", testBody, next); InspectorTest.domActionTestForNodeId("testRemoveAttribute", "node-to-remove-attribute", testBody, next);
function testBody(node, done) function testBody(node, done)
{ {
editNodePartAndRun(node, "webkit-html-attribute", "", done, true); InspectorTest.editNodePartAndRun(node, "webkit-html-attribute", "", done, true);
} }
}, },
function testAddAttribute(next) function testAddAttribute(next)
{ {
doAddAttribute("testAddAttribute", "node-to-add-attribute", "newattr=\"new-value\"", next); InspectorTest.doAddAttribute("testAddAttribute", "node-to-add-attribute", "newattr=\"new-value\"", next);
}, },
function testAddAttributeUnquotedValue(next) function testAddAttributeUnquotedValue(next)
{ {
doAddAttribute("testAddAttributeUnquotedValue", "node-to-add-attribute-unquoted-value", "newattr=unquotedValue", next); InspectorTest.doAddAttribute("testAddAttributeUnquotedValue", "node-to-add-attribute-unquoted-value", "newattr=unquotedValue", next);
}, },
function testEditCommentAsHTML(next) function testEditCommentAsHTML(next)
...@@ -114,7 +115,7 @@ function test() ...@@ -114,7 +115,7 @@ function test()
InspectorTest.addResult("Comment node not found"); InspectorTest.addResult("Comment node not found");
InspectorTest.completeTest(); InspectorTest.completeTest();
} }
domActionTest("testEditCommentAsHTML", commentNodeSelectionCallback, testBody, next); InspectorTest.domActionTest("testEditCommentAsHTML", commentNodeSelectionCallback, testBody, next);
function testBody(node, done) function testBody(node, done)
{ {
...@@ -136,7 +137,7 @@ function test() ...@@ -136,7 +137,7 @@ function test()
function testEditAsHTML(next) function testEditAsHTML(next)
{ {
domActionTestForNodeId("testEditAsHTML", "node-to-edit-as-html", testBody, next); InspectorTest.domActionTestForNodeId("testEditAsHTML", "node-to-edit-as-html", testBody, next);
function testBody(node, done) function testBody(node, done)
{ {
...@@ -158,7 +159,7 @@ function test() ...@@ -158,7 +159,7 @@ function test()
function testEditInvisibleCharsAsHTML(next) function testEditInvisibleCharsAsHTML(next)
{ {
domActionTestForNodeId("testEditInvisibleCharsAsHTML", "node-with-invisible-chars", testBody, next); InspectorTest.domActionTestForNodeId("testEditInvisibleCharsAsHTML", "node-with-invisible-chars", testBody, next);
function testBody(node, done) function testBody(node, done)
{ {
...@@ -181,113 +182,14 @@ function test() ...@@ -181,113 +182,14 @@ function test()
function testEditScript(next) function testEditScript(next)
{ {
domActionTestForNodeId("testEditScript", "node-to-edit-script", testBody, next); InspectorTest.domActionTestForNodeId("testEditScript", "node-to-edit-script", testBody, next);
function testBody(node, done) function testBody(node, done)
{ {
editNodePartAndRun(node, "webkit-html-text-node", "\n var i = 0;\n var j = 0;\n", done); InspectorTest.editNodePartAndRun(node, "webkit-html-text-node", "\n var i = 0;\n var j = 0;\n", done);
}
},
function testEditShadowDOMAsHTML(next)
{
domActionTestForNodeId("testEditAuthorShadowDOMAsHTML", "authorShadowDOMElement", testBody, next);
function testBody(node, done)
{
var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
treeElement._editAsHTML();
InspectorTest.runAfterPendingDispatches(step2);
function step2()
{
InspectorTest.addResult(treeElement._editing.codeMirror.getValue());
treeElement._editing.codeMirror.setValue("<span foo=\"shadow-span\"><span id=\"inner-shadow-span\">Shadow span contents</span></span>");
var event = InspectorTest.createKeyEvent("Enter");
event.isMetaOrCtrlForTest = true;
treeElement._htmlEditElement.dispatchEvent(event);
InspectorTest.runAfterPendingDispatches(InspectorTest.expandElementsTree.bind(InspectorTest, done));
}
} }
} }
]); ]);
function doAddAttribute(testName, dataNodeId, attributeText, next)
{
domActionTestForNodeId(testName, dataNodeId, testBody, next);
function testBody(node, done)
{
var editorElement = editNodePart(node, "webkit-html-attribute");
editorElement.dispatchEvent(InspectorTest.createKeyEvent("U+0009")); // Tab
InspectorTest.runAfterPendingDispatches(testContinuation);
function testContinuation()
{
var editorElement = window.getSelection().anchorNode.parentElement;
editorElement.textContent = attributeText;
editorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
InspectorTest.addSniffer(WebInspector.ElementsTreeUpdater.prototype, "_updateModifiedNodes", done);
}
}
}
function domActionTestForNodeId(testName, dataNodeId, testBody, next)
{
function callback(testNode, continuation)
{
InspectorTest.selectNodeWithId(dataNodeId, continuation);
}
domActionTest(testName, callback, testBody, next);
}
function domActionTest(testName, dataNodeSelectionCallback, testBody, next)
{
var testNode = InspectorTest.expandedNodeWithId(testName);
InspectorTest.addResult("==== before ====");
InspectorTest.dumpElementsTree(testNode);
dataNodeSelectionCallback(testNode, step0);
function step0(node)
{
InspectorTest.runAfterPendingDispatches(step1.bind(null, node));
}
function step1(node)
{
testBody(node, step2);
}
function step2()
{
InspectorTest.addResult("==== after ====");
InspectorTest.dumpElementsTree(testNode);
next();
}
}
function editNodePart(node, className)
{
var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
var textElement = treeElement.listItemElement.getElementsByClassName(className)[0];
if (!textElement && treeElement.childrenListElement)
textElement = treeElement.childrenListElement.getElementsByClassName(className)[0];
treeElement._startEditingTarget(textElement);
return textElement;
}
function editNodePartAndRun(node, className, newValue, step2, useSniffer)
{
var editorElement = editNodePart(node, className);
editorElement.textContent = newValue;
editorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
if (useSniffer)
InspectorTest.addSniffer(WebInspector.ElementsTreeUpdater.prototype, "_updateModifiedNodes", step2);
else
InspectorTest.runAfterPendingDispatches(step2);
}
} }
</script> </script>
...@@ -360,13 +262,6 @@ Tests that user can mutate DOM by means of elements panel. ...@@ -360,13 +262,6 @@ Tests that user can mutate DOM by means of elements panel.
<div id="testEditCommentAsHTML"> <div id="testEditCommentAsHTML">
<!-- Comment --> <!-- Comment -->
</div> </div>
<div id="testEditAuthorShadowDOMAsHTML" />
</div> </div>
<script>
var container = document.getElementById("testEditAuthorShadowDOMAsHTML");
var root = container.createShadowRoot();
root.innerHTML = "<div id='authorShadowDOMElement'></div>";
</script>
</body> </body>
</html> </html>
third_party/WebKit/LayoutTests/inspector/elements/edit-dom-test.js 0 → 100644
View file @ 39d506e5
function initialize_EditDOMTests()
{
InspectorTest.doAddAttribute = function(testName, dataNodeId, attributeText, next)
{
InspectorTest.domActionTestForNodeId(testName, dataNodeId, testBody, next);
function testBody(node, done)
{
var editorElement = InspectorTest.editNodePart(node, "webkit-html-attribute");
editorElement.dispatchEvent(InspectorTest.createKeyEvent("U+0009")); // Tab
InspectorTest.runAfterPendingDispatches(testContinuation);
function testContinuation()
{
var editorElement = window.getSelection().anchorNode.parentElement;
editorElement.textContent = attributeText;
editorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
InspectorTest.addSniffer(WebInspector.ElementsTreeUpdater.prototype, "_updateModifiedNodes", done);
}
}
}
InspectorTest.domActionTestForNodeId = function(testName, dataNodeId, testBody, next)
{
function callback(testNode, continuation)
{
InspectorTest.selectNodeWithId(dataNodeId, continuation);
}
InspectorTest.domActionTest(testName, callback, testBody, next);
}
InspectorTest.domActionTest = function(testName, dataNodeSelectionCallback, testBody, next)
{
var testNode = InspectorTest.expandedNodeWithId(testName);
InspectorTest.addResult("==== before ====");
InspectorTest.dumpElementsTree(testNode);
dataNodeSelectionCallback(testNode, step0);
function step0(node)
{
InspectorTest.runAfterPendingDispatches(step1.bind(null, node));
}
function step1(node)
{
testBody(node, step2);
}
function step2()
{
InspectorTest.addResult("==== after ====");
InspectorTest.dumpElementsTree(testNode);
next();
}
}
InspectorTest.editNodePart = function(node, className)
{
var treeElement = WebInspector.panels.elements.treeOutline.findTreeElement(node);
var textElement = treeElement.listItemElement.getElementsByClassName(className)[0];
if (!textElement && treeElement.childrenListElement)
textElement = treeElement.childrenListElement.getElementsByClassName(className)[0];
treeElement._startEditingTarget(textElement);
return textElement;
}
InspectorTest.editNodePartAndRun = function(node, className, newValue, step2, useSniffer)
{
var editorElement = InspectorTest.editNodePart(node, className);
editorElement.textContent = newValue;
editorElement.dispatchEvent(InspectorTest.createKeyEvent("Enter"));
if (useSniffer)
InspectorTest.addSniffer(WebInspector.ElementsTreeUpdater.prototype, "_updateModifiedNodes", step2);
else
InspectorTest.runAfterPendingDispatches(step2);
}
}
third_party/WebKit/Source/core/inspector/InspectorDOMAgent.cpp
View file @ 39d506e5
...@@ -468,8 +468,8 @@ Element* InspectorDOMAgent::assertEditableElement(ErrorString* errorString, int ...@@ -468,8 +468,8 @@ Element* InspectorDOMAgent::assertEditableElement(ErrorString* errorString, int
if (!element) if (!element)
return 0; return 0;
if (element->isInShadowTree()) { if (element->isInShadowTree() && userAgentShadowRoot(element)) {
*errorString = "Cannot edit elements from shadow trees"; *errorString = "Cannot edit elements from user-agent shadow trees";
return 0; return 0;
} }
......
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