- Revision
- 174687
- Author
- [email protected]
- Date
- 2014-10-14 10:53:34 -0700 (Tue, 14 Oct 2014)
Log Message
Web Inspector: Processing Instruction Nodes appear poorly in DOM Tree
https://bugs.webkit.org/show_bug.cgi?id=137681
Patch by Joseph Pecoraro <[email protected]> on 2014-10-14
Reviewed by Timothy Hatcher.
Source/WebCore:
* inspector/InspectorDOMAgent.cpp:
(WebCore::InspectorDOMAgent::buildObjectForNode):
Include the nodeName, localName, and nodeValue (string data)
properties for processing instruction nodes.
Source/WebInspectorUI:
Handle processing instruction node types in more places. The
backend sends the contents as a pure string, not as attribute
pairs, so just include the string in the UI.
* UserInterface/Models/DOMSearchMatchObject.js:
(WebInspector.DOMSearchMatchObject.prototype._generateClassName):
(WebInspector.DOMSearchMatchObject.titleForDOMNode):
* UserInterface/Views/DOMTreeElement.js:
(WebInspector.DOMTreeElement.prototype._nodeTitleInfo):
Display the value in the UI.
* UserInterface/Views/DOMTreeElementPathComponent.js:
(WebInspector.DOMTreeElementPathComponent):
Include an icon like DOCTYPE.
* UserInterface/Views/SyntaxHighlightingDefaultTheme.css:
(.syntax-highlighted .html-processing-instruction):
Style gray like a DOCTYPE.
Modified Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (174686 => 174687)
--- trunk/Source/WebCore/ChangeLog 2014-10-14 17:31:59 UTC (rev 174686)
+++ trunk/Source/WebCore/ChangeLog 2014-10-14 17:53:34 UTC (rev 174687)
@@ -1,3 +1,15 @@
+2014-10-14 Joseph Pecoraro <[email protected]>
+
+ Web Inspector: Processing Instruction Nodes appear poorly in DOM Tree
+ https://bugs.webkit.org/show_bug.cgi?id=137681
+
+ Reviewed by Timothy Hatcher.
+
+ * inspector/InspectorDOMAgent.cpp:
+ (WebCore::InspectorDOMAgent::buildObjectForNode):
+ Include the nodeName, localName, and nodeValue (string data)
+ properties for processing instruction nodes.
+
2014-10-14 Chris Dumez <[email protected]>
Use is<>() / downcast<>() for RenderFrame / RenderFrameSet
Modified: trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp (174686 => 174687)
--- trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp 2014-10-14 17:31:59 UTC (rev 174686)
+++ trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp 2014-10-14 17:53:34 UTC (rev 174687)
@@ -1233,6 +1233,10 @@
String nodeValue;
switch (node->nodeType()) {
+ case Node::PROCESSING_INSTRUCTION_NODE:
+ nodeName = node->nodeName();
+ localName = node->localName();
+ FALLTHROUGH;
case Node::TEXT_NODE:
case Node::COMMENT_NODE:
case Node::CDATA_SECTION_NODE:
Modified: trunk/Source/WebInspectorUI/ChangeLog (174686 => 174687)
--- trunk/Source/WebInspectorUI/ChangeLog 2014-10-14 17:31:59 UTC (rev 174686)
+++ trunk/Source/WebInspectorUI/ChangeLog 2014-10-14 17:53:34 UTC (rev 174687)
@@ -1,3 +1,29 @@
+2014-10-14 Joseph Pecoraro <[email protected]>
+
+ Web Inspector: Processing Instruction Nodes appear poorly in DOM Tree
+ https://bugs.webkit.org/show_bug.cgi?id=137681
+
+ Reviewed by Timothy Hatcher.
+
+ Handle processing instruction node types in more places. The
+ backend sends the contents as a pure string, not as attribute
+ pairs, so just include the string in the UI.
+
+ * UserInterface/Models/DOMSearchMatchObject.js:
+ (WebInspector.DOMSearchMatchObject.prototype._generateClassName):
+ (WebInspector.DOMSearchMatchObject.titleForDOMNode):
+ * UserInterface/Views/DOMTreeElement.js:
+ (WebInspector.DOMTreeElement.prototype._nodeTitleInfo):
+ Display the value in the UI.
+
+ * UserInterface/Views/DOMTreeElementPathComponent.js:
+ (WebInspector.DOMTreeElementPathComponent):
+ Include an icon like DOCTYPE.
+
+ * UserInterface/Views/SyntaxHighlightingDefaultTheme.css:
+ (.syntax-highlighted .html-processing-instruction):
+ Style gray like a DOCTYPE.
+
2014-10-13 Joseph Pecoraro <[email protected]>
Web Inspector: Paint Flashing button does not match page state after reload
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMSearchMatchObject.js (174686 => 174687)
--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMSearchMatchObject.js 2014-10-14 17:31:59 UTC (rev 174686)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMSearchMatchObject.js 2014-10-14 17:53:34 UTC (rev 174687)
@@ -97,6 +97,10 @@
case Node.CDATA_SECTION_NODE:
return WebInspector.DOMSearchMatchObject.DOMMatchCharacterDataIconStyleClassName;
+ case Node.PROCESSING_INSTRUCTION_NODE:
+ // <rdar://problem/12800950> Need icon for DOCUMENT_FRAGMENT_NODE and PROCESSING_INSTRUCTION_NODE
+ return WebInspector.DOMSearchMatchObject.DOMMatchDocumentTypeIconStyleClassName;
+
default:
console.error("Unknown DOM node type: ", this._domNode.nodeType());
return WebInspector.DOMSearchMatchObject.DOMMatchNodeIconStyleClassName;
@@ -109,13 +113,11 @@
switch (domNode.nodeType()) {
case Node.ELEMENT_NODE:
var title = "<" + domNode.nodeNameInCorrectCase();
-
- for (var i = 0; i < domNode.attributes().length; ++i) {
- title += " " + domNode.attributes()[i].name;
- if (domNode.attributes()[i].value.length)
- title += "=\"" + domNode.attributes()[i].value + "\"";
+ for (var attribute of domNode.attributes()) {
+ title += " " + attribute.name;
+ if (attribute.value.length)
+ title += "=\"" + attribute.value + "\"";
}
-
return title + ">";
case Node.TEXT_NODE:
@@ -141,6 +143,12 @@
case Node.CDATA_SECTION_NODE:
return "<![CDATA[" + domNode + "]]>";
+ case Node.PROCESSING_INSTRUCTION_NODE:
+ var data = ""
+ var dataString = data.length ? " " + data : "";
+ var title = "<?" + domNode.nodeNameInCorrectCase() + dataString + "?>";
+ return title;
+
default:
console.error("Unknown DOM node type: ", domNode.nodeType());
return domNode.nodeNameInCorrectCase();
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js (174686 => 174687)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2014-10-14 17:31:59 UTC (rev 174686)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElement.js 2014-10-14 17:53:34 UTC (rev 174687)
@@ -1205,6 +1205,15 @@
var cdataElement = info.titleDOM.createChild("span", "html-text-node");
cdataElement.appendChild(document.createTextNode("<![CDATA[" + node.nodeValue() + "]]>"));
break;
+
+ case Node.PROCESSING_INSTRUCTION_NODE:
+ var processingInstructionElement = info.titleDOM.createChild("span", "html-processing-instruction");
+ var data = ""
+ var dataString = data.length ? " " + data : "";
+ var title = "<?" + node.nodeNameInCorrectCase() + dataString + "?>";
+ processingInstructionElement.appendChild(document.createTextNode(title));
+ break;
+
default:
var defaultElement = info.titleDOM.appendChild(document.createTextNode(node.nodeNameInCorrectCase().collapseWhitespace()));
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElementPathComponent.js (174686 => 174687)
--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElementPathComponent.js 2014-10-14 17:31:59 UTC (rev 174686)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElementPathComponent.js 2014-10-14 17:53:34 UTC (rev 174687)
@@ -62,7 +62,7 @@
case Node.DOCUMENT_FRAGMENT_NODE:
// FIXME: At some point we might want a different icon for this.
- // <rdar://problem/12800950> Need icon for DOCUMENT_FRAGMENT_NODE
+ // <rdar://problem/12800950> Need icon for DOCUMENT_FRAGMENT_NODE and PROCESSING_INSTRUCTION_NODE
className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
if (node.isInShadowTree())
title = WebInspector.UIString("Shadow Content");
@@ -70,6 +70,13 @@
title = WebInspector.displayNameForNode(node);
break;
+ case Node.PROCESSING_INSTRUCTION_NODE:
+ // FIXME: At some point we might want a different icon for this.
+ // <rdar://problem/12800950> Need icon for DOCUMENT_FRAGMENT_NODE and PROCESSING_INSTRUCTION_NODE.
+ className = WebInspector.DOMTreeElementPathComponent.DOMDocumentTypeIconStyleClassName;
+ title = node.nodeNameInCorrectCase();
+ break;
+
default:
console.error("Unknown DOM node type: ", node.nodeType());
className = WebInspector.DOMTreeElementPathComponent.DOMNodeIconStyleClassName;
Modified: trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css (174686 => 174687)
--- trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css 2014-10-14 17:31:59 UTC (rev 174686)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/SyntaxHighlightingDefaultTheme.css 2014-10-14 17:53:34 UTC (rev 174687)
@@ -90,7 +90,8 @@
}
.cm-s-default .cm-m-xml.cm-meta,
-.syntax-highlighted .html-doctype {
+.syntax-highlighted .html-doctype,
+.syntax-highlighted .html-processing-instruction {
color: rgb(192, 192, 192);
}
