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
Expand all 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-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