<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[205035] trunk</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/205035">205035</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2016-08-26 13:29:17 -0700 (Fri, 26 Aug 2016)</dd>
</dl>

<h3>Log Message</h3>
<pre>Web Inspector: Some CSS selectors in the UI aren't escaped
https://bugs.webkit.org/show_bug.cgi?id=151378

Patch by Devin Rousso &lt;dcrousso+webkit@gmail.com&gt; on 2016-08-26
Reviewed by Joseph Pecoraro.

Source/JavaScriptCore:

Change ElementData from sending a className string to using an array of
classes, allowing for proper escaping of each class value.

* inspector/protocol/OverlayTypes.json:

Source/WebCore:

No new tests, but logic and results of existing tests updated:
* inspector/dom/content-node-region-info.html:
* inspector/dom/content-node-region-info-expected.txt:
* inspector/dom/highlightNode-expected.txt:
* inspector/dom/highlightSelector.html:
* inspector/dom/highlightSelector-expected.txt:

* inspector/InspectorOverlay.cpp:
(WebCore::buildObjectForElementData):

* inspector/InspectorOverlayPage.css:
(.pseudo-type):
(.tag-name): Deleted.

* inspector/InspectorOverlayPage.js:
(_createElementTitle):

Source/WebInspectorUI:

* UserInterface/Base/DOMUtilities.js:
(WebInspector.displayNameForNode): Deleted.
(WebInspector.linkifyNodeReference):
Use DOMNode.prototype.displayName instead of WebInspector.displayNameForNode.

* UserInterface/Models/DOMNode.js:
(WebInspector.DOMNode.prototype.get escapedIdSelector):
(WebInspector.DOMNode.prototype.get escapedClassSelector):
(WebInspector.DOMNode.prototype.get displayName):
(WebInspector.DOMNode.prototype.appropriateSelectorFor):
Rework escaping of ids and class names into separate public functions using CSS.escape.

* UserInterface/Views/CSSStyleDeclarationSection.js:
(WebInspector.CSSStyleDeclarationSection.prototype.refresh):
Use DOMNode.prototype.displayName instead of WebInspector.displayNameForNode.

* UserInterface/Views/DOMTreeDataGridNode.js:
(WebInspector.DOMTreeDataGridNode.prototype._createNameCellDocumentFragment):
Use DOMNode.prototype.displayName instead of WebInspector.displayNameForNode.

* UserInterface/Views/DOMTreeElementPathComponent.js:
(WebInspector.DOMTreeElementPathComponent):
Use DOMNode.prototype.displayName instead of WebInspector.displayNameForNode.

* UserInterface/Views/LayerTreeDataGridNode.js:
(WebInspector.LayerTreeDataGridNode.prototype.set layer):
Use DOMNode.prototype.displayName instead of WebInspector.displayNameForNode.

* UserInterface/Views/VisualStyleSelectorSection.js:
(WebInspector.VisualStyleSelectorSection.prototype.update):
Use DOMNode.prototype.displayName instead of WebInspector.displayNameForNode.

LayoutTests:

* inspector/dom/content-node-region-info.html:
* inspector/dom/content-node-region-info-expected.txt:
Use DOMNode.prototype.displayName instead of WebInspector.displayNameForNode.

* inspector/dom/highlightNode-expected.txt:
* inspector/dom/highlightSelector.html:
* inspector/dom/highlightSelector-expected.txt:
Changed result to replace className with new classes array.</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkLayoutTestsinspectordomcontentnoderegioninfohtml">trunk/LayoutTests/inspector/dom/content-node-region-info.html</a></li>
<li><a href="#trunkLayoutTestsinspectordomhighlightNodeexpectedtxt">trunk/LayoutTests/inspector/dom/highlightNode-expected.txt</a></li>
<li><a href="#trunkLayoutTestsinspectordomhighlightSelectorexpectedtxt">trunk/LayoutTests/inspector/dom/highlightSelector-expected.txt</a></li>
<li><a href="#trunkLayoutTestsinspectordomhighlightSelectorhtml">trunk/LayoutTests/inspector/dom/highlightSelector.html</a></li>
<li><a href="#trunkSourceJavaScriptCoreChangeLog">trunk/Source/JavaScriptCore/ChangeLog</a></li>
<li><a href="#trunkSourceJavaScriptCoreinspectorprotocolOverlayTypesjson">trunk/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreinspectorInspectorOverlaycpp">trunk/Source/WebCore/inspector/InspectorOverlay.cpp</a></li>
<li><a href="#trunkSourceWebCoreinspectorInspectorOverlayPagecss">trunk/Source/WebCore/inspector/InspectorOverlayPage.css</a></li>
<li><a href="#trunkSourceWebCoreinspectorInspectorOverlayPagejs">trunk/Source/WebCore/inspector/InspectorOverlayPage.js</a></li>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseDOMUtilitiesjs">trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsDOMNodejs">trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationSectionjs">trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeElementPathComponentjs">trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElementPathComponent.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeDataGridNodejs">trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDataGridNode.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorSectionjs">trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/LayoutTests/ChangeLog        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -1,3 +1,19 @@
</span><ins>+2016-08-26  Devin Rousso  &lt;dcrousso+webkit@gmail.com&gt;
+
+        Web Inspector: Some CSS selectors in the UI aren't escaped
+        https://bugs.webkit.org/show_bug.cgi?id=151378
+
+        Reviewed by Joseph Pecoraro.
+
+        * inspector/dom/content-node-region-info.html:
+        * inspector/dom/content-node-region-info-expected.txt:
+        Use DOMNode.prototype.displayName instead of WebInspector.displayNameForNode.
+
+        * inspector/dom/highlightNode-expected.txt:
+        * inspector/dom/highlightSelector.html:
+        * inspector/dom/highlightSelector-expected.txt:
+        Changed result to replace className with new classes array.
+
</ins><span class="cx"> 2016-08-26  Chris Dumez  &lt;cdumez@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         HTMLAreaElement's coords attributes parsing does not comply with the HTML specification
</span></span></pre></div>
<a id="trunkLayoutTestsinspectordomcontentnoderegioninfohtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/inspector/dom/content-node-region-info.html (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/dom/content-node-region-info.html        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/LayoutTests/inspector/dom/content-node-region-info.html        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -27,8 +27,9 @@
</span><span class="cx"> &lt;script&gt;
</span><span class="cx"> function test()
</span><span class="cx"> {
</span><del>-    var queryList = [&quot;#flow&quot;, &quot;.contentNode1&quot;, &quot;.contentNode2&quot;, &quot;body&quot;, &quot;#region1&quot;, &quot;#region2&quot;];
-    var documentNodeId;
</del><ins>+    let displayNameGetter = Object.getOwnPropertyDescriptor(WebInspector.DOMNode.prototype, &quot;displayName&quot;).get;
+    let queryList = [&quot;#flow&quot;, &quot;.contentNode1&quot;, &quot;.contentNode2&quot;, &quot;body&quot;, &quot;#region1&quot;, &quot;#region2&quot;];
+    let documentNodeId = null;
</ins><span class="cx"> 
</span><span class="cx">     WebInspector.domTreeManager.requestDocument(function(documentNode) {
</span><span class="cx">         documentNodeId = documentNode.id;
</span><span class="lines">@@ -36,6 +37,11 @@
</span><span class="cx">         next();
</span><span class="cx">     });
</span><span class="cx"> 
</span><ins>+    function regionMapFunction(region)
+    {
+        return displayNameGetter.call(region);
+    }
+
</ins><span class="cx">     function query(selector, callback)
</span><span class="cx">     {
</span><span class="cx">         InspectorTest.log(&quot;\nSelector: &quot; + selector);
</span><span class="lines">@@ -44,7 +50,7 @@
</span><span class="cx">                 InspectorTest.log(&quot;DOM node not found.&quot;);
</span><span class="cx">                 callback();
</span><span class="cx">             }
</span><del>-            var domNode = WebInspector.domTreeManager.nodeForId(contentNodeId);
</del><ins>+            let domNode = WebInspector.domTreeManager.nodeForId(contentNodeId);
</ins><span class="cx">             WebInspector.domTreeManager.getNodeContentFlowInfo(domNode, function(error, result) {
</span><span class="cx">                 console.assert(!error);
</span><span class="cx">                 if (result) {
</span><span class="lines">@@ -51,7 +57,7 @@
</span><span class="cx">                     InspectorTest.log(&quot;Region flow name: &quot; + (result.regionFlow ? result.regionFlow.name : &quot;none&quot;));
</span><span class="cx">                     InspectorTest.log(&quot;Content flow name: &quot; + (result.contentFlow ? result.contentFlow.name : &quot;none&quot;));
</span><span class="cx">                     InspectorTest.log(&quot;Regions count: &quot; + (result.regions ? result.regions.length : &quot;N/A&quot;));
</span><del>-                    InspectorTest.log(&quot;Regions: &quot; + (result.regions ? result.regions.map(WebInspector.displayNameForNode).join(&quot;, &quot;) : &quot;N/A&quot;));
</del><ins>+                    InspectorTest.log(&quot;Regions: &quot; + (result.regions ? result.regions.map(regionMapFunction).join(&quot;, &quot;) : &quot;N/A&quot;));
</ins><span class="cx">                 } else
</span><span class="cx">                     InspectorTest.log(&quot;No region flow information.&quot;);
</span><span class="cx">                 callback();
</span></span></pre></div>
<a id="trunkLayoutTestsinspectordomhighlightNodeexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/inspector/dom/highlightNode-expected.txt (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/dom/highlightNode-expected.txt        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/LayoutTests/inspector/dom/highlightNode-expected.txt        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -8,7 +8,7 @@
</span><span class="cx"> 
</span><span class="cx"> -- Running test case: MainFrameNodeViaNodeId
</span><span class="cx"> PASS: Should be one highlighted node.
</span><del>-Highlighted Element Data: {&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;id-one&quot;,&quot;className&quot;:&quot;.class-two&quot;,&quot;size&quot;:{&quot;width&quot;:100,&quot;height&quot;:200},&quot;role&quot;:&quot;&quot;}
</del><ins>+Highlighted Element Data: {&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;id-one&quot;,&quot;classes&quot;:[&quot;class-two&quot;],&quot;size&quot;:{&quot;width&quot;:100,&quot;height&quot;:200},&quot;role&quot;:&quot;&quot;}
</ins><span class="cx"> 
</span><span class="cx"> -- Running test case: ChildFrameNodeViaNodeId
</span><span class="cx"> PASS: Should be one highlighted node.
</span><span class="lines">@@ -16,7 +16,7 @@
</span><span class="cx"> 
</span><span class="cx"> -- Running test case: MainFrameNodeViaObjectId
</span><span class="cx"> PASS: Should be one highlighted node.
</span><del>-Highlighted Element Data: {&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;id-one&quot;,&quot;className&quot;:&quot;.class-two&quot;,&quot;size&quot;:{&quot;width&quot;:100,&quot;height&quot;:200},&quot;role&quot;:&quot;&quot;}
</del><ins>+Highlighted Element Data: {&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;id-one&quot;,&quot;classes&quot;:[&quot;class-two&quot;],&quot;size&quot;:{&quot;width&quot;:100,&quot;height&quot;:200},&quot;role&quot;:&quot;&quot;}
</ins><span class="cx"> 
</span><span class="cx"> -- Running test case: ChildFrameNodeViaObjectId
</span><span class="cx"> PASS: Should be one highlighted node.
</span></span></pre></div>
<a id="trunkLayoutTestsinspectordomhighlightSelectorexpectedtxt"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/inspector/dom/highlightSelector-expected.txt (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/dom/highlightSelector-expected.txt        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/LayoutTests/inspector/dom/highlightSelector-expected.txt        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -9,8 +9,8 @@
</span><span class="cx"> PASS: Should highlight 3 element(s).
</span><span class="cx"> Highlighted Elements:
</span><span class="cx"> {&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;&quot;,&quot;size&quot;:{&quot;width&quot;:500,&quot;height&quot;:500},&quot;role&quot;:&quot;&quot;}
</span><del>-{&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;&quot;,&quot;className&quot;:&quot;.class-one&quot;,&quot;size&quot;:{&quot;width&quot;:10,&quot;height&quot;:20},&quot;role&quot;:&quot;&quot;}
-{&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;id-one&quot;,&quot;className&quot;:&quot;.class-two&quot;,&quot;size&quot;:{&quot;width&quot;:100,&quot;height&quot;:200},&quot;role&quot;:&quot;&quot;}
</del><ins>+{&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;class-one&quot;,&quot;.escaped&quot;],&quot;size&quot;:{&quot;width&quot;:10,&quot;height&quot;:20},&quot;role&quot;:&quot;&quot;}
+{&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;id-one&quot;,&quot;classes&quot;:[&quot;class-two&quot;],&quot;size&quot;:{&quot;width&quot;:100,&quot;height&quot;:200},&quot;role&quot;:&quot;&quot;}
</ins><span class="cx"> 
</span><span class="cx"> -- Running test case: MainFrameWithClassSelector
</span><span class="cx"> - Frame: &lt;main-frame&gt;
</span><span class="lines">@@ -17,15 +17,22 @@
</span><span class="cx"> - Selector: .class-one
</span><span class="cx"> PASS: Should highlight 2 element(s).
</span><span class="cx"> Highlighted Elements:
</span><del>-{&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;&quot;,&quot;className&quot;:&quot;.class-one&quot;,&quot;size&quot;:{&quot;width&quot;:10,&quot;height&quot;:20},&quot;role&quot;:&quot;&quot;}
-{&quot;tagName&quot;:&quot;iframe&quot;,&quot;idValue&quot;:&quot;&quot;,&quot;className&quot;:&quot;.class-one&quot;,&quot;size&quot;:{&quot;width&quot;:304,&quot;height&quot;:154},&quot;role&quot;:&quot;group&quot;}
</del><ins>+{&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;class-one&quot;,&quot;.escaped&quot;],&quot;size&quot;:{&quot;width&quot;:10,&quot;height&quot;:20},&quot;role&quot;:&quot;&quot;}
+{&quot;tagName&quot;:&quot;iframe&quot;,&quot;idValue&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;class-one&quot;],&quot;size&quot;:{&quot;width&quot;:304,&quot;height&quot;:154},&quot;role&quot;:&quot;group&quot;}
</ins><span class="cx"> 
</span><ins>+-- Running test case: MainFrameWithMultipleClassSelector
+- Frame: &lt;main-frame&gt;
+- Selector: .class-one.\.escaped
+PASS: Should highlight 1 element(s).
+Highlighted Elements:
+{&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;class-one&quot;,&quot;.escaped&quot;],&quot;size&quot;:{&quot;width&quot;:10,&quot;height&quot;:20},&quot;role&quot;:&quot;&quot;}
+
</ins><span class="cx"> -- Running test case: MainFrameIdSelector
</span><span class="cx"> - Frame: &lt;main-frame&gt;
</span><span class="cx"> - Selector: #id-one
</span><span class="cx"> PASS: Should highlight 1 element(s).
</span><span class="cx"> Highlighted Elements:
</span><del>-{&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;id-one&quot;,&quot;className&quot;:&quot;.class-two&quot;,&quot;size&quot;:{&quot;width&quot;:100,&quot;height&quot;:200},&quot;role&quot;:&quot;&quot;}
</del><ins>+{&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;id-one&quot;,&quot;classes&quot;:[&quot;class-two&quot;],&quot;size&quot;:{&quot;width&quot;:100,&quot;height&quot;:200},&quot;role&quot;:&quot;&quot;}
</ins><span class="cx"> 
</span><span class="cx"> -- Running test case: MainFrameMultipleSelectors
</span><span class="cx"> - Frame: &lt;main-frame&gt;
</span><span class="lines">@@ -32,9 +39,9 @@
</span><span class="cx"> - Selector: .class-one, .class-two
</span><span class="cx"> PASS: Should highlight 3 element(s).
</span><span class="cx"> Highlighted Elements:
</span><del>-{&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;&quot;,&quot;className&quot;:&quot;.class-one&quot;,&quot;size&quot;:{&quot;width&quot;:10,&quot;height&quot;:20},&quot;role&quot;:&quot;&quot;}
-{&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;id-one&quot;,&quot;className&quot;:&quot;.class-two&quot;,&quot;size&quot;:{&quot;width&quot;:100,&quot;height&quot;:200},&quot;role&quot;:&quot;&quot;}
-{&quot;tagName&quot;:&quot;iframe&quot;,&quot;idValue&quot;:&quot;&quot;,&quot;className&quot;:&quot;.class-one&quot;,&quot;size&quot;:{&quot;width&quot;:304,&quot;height&quot;:154},&quot;role&quot;:&quot;group&quot;}
</del><ins>+{&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;class-one&quot;,&quot;.escaped&quot;],&quot;size&quot;:{&quot;width&quot;:10,&quot;height&quot;:20},&quot;role&quot;:&quot;&quot;}
+{&quot;tagName&quot;:&quot;div&quot;,&quot;idValue&quot;:&quot;id-one&quot;,&quot;classes&quot;:[&quot;class-two&quot;],&quot;size&quot;:{&quot;width&quot;:100,&quot;height&quot;:200},&quot;role&quot;:&quot;&quot;}
+{&quot;tagName&quot;:&quot;iframe&quot;,&quot;idValue&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;class-one&quot;],&quot;size&quot;:{&quot;width&quot;:304,&quot;height&quot;:154},&quot;role&quot;:&quot;group&quot;}
</ins><span class="cx"> 
</span><span class="cx"> -- Running test case: MissingOptionalFrameIdShouldUseMainFrame
</span><span class="cx"> - Frame: Not Provided
</span><span class="lines">@@ -41,7 +48,7 @@
</span><span class="cx"> - Selector: iframe.class-one
</span><span class="cx"> PASS: Should highlight 1 element(s).
</span><span class="cx"> Highlighted Elements:
</span><del>-{&quot;tagName&quot;:&quot;iframe&quot;,&quot;idValue&quot;:&quot;&quot;,&quot;className&quot;:&quot;.class-one&quot;,&quot;size&quot;:{&quot;width&quot;:304,&quot;height&quot;:154},&quot;role&quot;:&quot;group&quot;}
</del><ins>+{&quot;tagName&quot;:&quot;iframe&quot;,&quot;idValue&quot;:&quot;&quot;,&quot;classes&quot;:[&quot;class-one&quot;],&quot;size&quot;:{&quot;width&quot;:304,&quot;height&quot;:154},&quot;role&quot;:&quot;group&quot;}
</ins><span class="cx"> 
</span><span class="cx"> -- Running test case: MainFrameNonMatchingSelector
</span><span class="cx"> - Frame: &lt;main-frame&gt;
</span></span></pre></div>
<a id="trunkLayoutTestsinspectordomhighlightSelectorhtml"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/inspector/dom/highlightSelector.html (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/dom/highlightSelector.html        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/LayoutTests/inspector/dom/highlightSelector.html        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -30,6 +30,12 @@
</span><span class="cx">             expectedElements: 2,
</span><span class="cx">         },
</span><span class="cx">         {
</span><ins>+            name: &quot;MainFrameWithMultipleClassSelector&quot;,
+            frameId: mainFrameId,
+            selector: &quot;.class-one.\\.escaped&quot;,
+            expectedElements: 1,
+        },
+        {
</ins><span class="cx">             name: &quot;MainFrameIdSelector&quot;,
</span><span class="cx">             frameId: mainFrameId,
</span><span class="cx">             selector: &quot;#id-one&quot;,
</span><span class="lines">@@ -133,7 +139,7 @@
</span><span class="cx"> &lt;body onload=&quot;runTest()&quot;&gt;
</span><span class="cx">     &lt;p&gt;Tests for the DOM.highlightSelector command.&lt;/p&gt;
</span><span class="cx">     &lt;div style=&quot;width: 500px; height: 500px&quot;&gt;
</span><del>-        &lt;div class=&quot;class-one&quot; style=&quot;width: 10px; height: 20px&quot;&gt;&lt;/div&gt;
</del><ins>+        &lt;div class=&quot;class-one .escaped&quot; style=&quot;width: 10px; height: 20px&quot;&gt;&lt;/div&gt;
</ins><span class="cx">         &lt;div id=&quot;id-one&quot; class=&quot;class-two&quot; style=&quot;width:100px; height: 200px&quot;&gt;&lt;/div&gt;
</span><span class="cx">         &lt;iframe class=&quot;class-one&quot; src=&quot;resources/highlight-iframe.html&quot;&gt;&lt;/iframe&gt;
</span><span class="cx">     &lt;/div&gt;
</span></span></pre></div>
<a id="trunkSourceJavaScriptCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/JavaScriptCore/ChangeLog (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/JavaScriptCore/ChangeLog        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/Source/JavaScriptCore/ChangeLog        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -1,3 +1,15 @@
</span><ins>+2016-08-26  Devin Rousso  &lt;dcrousso+webkit@gmail.com&gt;
+
+        Web Inspector: Some CSS selectors in the UI aren't escaped
+        https://bugs.webkit.org/show_bug.cgi?id=151378
+
+        Reviewed by Joseph Pecoraro.
+
+        Change ElementData from sending a className string to using an array of
+        classes, allowing for proper escaping of each class value.
+
+        * inspector/protocol/OverlayTypes.json:
+
</ins><span class="cx"> 2016-08-26  Joseph Pecoraro  &lt;pecoraro@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: ScriptProfilerAgent and HeapAgent should do less work when frontend disconnects
</span></span></pre></div>
<a id="trunkSourceJavaScriptCoreinspectorprotocolOverlayTypesjson"></a>
<div class="modfile"><h4>Modified: trunk/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/Source/JavaScriptCore/inspector/protocol/OverlayTypes.json        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -83,9 +83,10 @@
</span><span class="cx">             &quot;properties&quot;: [
</span><span class="cx">                 { &quot;name&quot;: &quot;tagName&quot;, &quot;type&quot;: &quot;string&quot; },
</span><span class="cx">                 { &quot;name&quot;: &quot;idValue&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;The value of the element's 'id' attribute.&quot; },
</span><del>-                { &quot;name&quot;: &quot;className&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: true },
</del><ins>+                { &quot;name&quot;: &quot;classes&quot;, &quot;type&quot;: &quot;array&quot;, &quot;items&quot;: { &quot;type&quot;: &quot;string&quot; }, &quot;optional&quot;: true },
</ins><span class="cx">                 { &quot;name&quot;: &quot;size&quot;, &quot;$ref&quot;: &quot;Size&quot;, &quot;optional&quot;: true },
</span><span class="cx">                 { &quot;name&quot;: &quot;role&quot;, &quot;type&quot;: &quot;string&quot;, &quot;description&quot;: &quot;Computed accessibility role for the element.&quot;, &quot;optional&quot;: true },
</span><ins>+                { &quot;name&quot;: &quot;pseudoElement&quot;, &quot;type&quot;: &quot;string&quot;, &quot;optional&quot;: true },
</ins><span class="cx">                 { &quot;name&quot;: &quot;regionFlowData&quot;, &quot;$ref&quot;: &quot;RegionFlowData&quot;, &quot;optional&quot;: true },
</span><span class="cx">                 { &quot;name&quot;: &quot;contentFlowData&quot;, &quot;$ref&quot;: &quot;ContentFlowData&quot;, &quot;optional&quot;: true },
</span><span class="cx">                 { &quot;name&quot;: &quot;shapeOutsideData&quot;, &quot;$ref&quot;: &quot;ShapeOutsideData&quot;, &quot;optional&quot;: true }
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/Source/WebCore/ChangeLog        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -1,3 +1,27 @@
</span><ins>+2016-08-26  Devin Rousso  &lt;dcrousso+webkit@gmail.com&gt;
+
+        Web Inspector: Some CSS selectors in the UI aren't escaped
+        https://bugs.webkit.org/show_bug.cgi?id=151378
+
+        Reviewed by Joseph Pecoraro.
+
+        No new tests, but logic and results of existing tests updated:
+        * inspector/dom/content-node-region-info.html:
+        * inspector/dom/content-node-region-info-expected.txt:
+        * inspector/dom/highlightNode-expected.txt:
+        * inspector/dom/highlightSelector.html:
+        * inspector/dom/highlightSelector-expected.txt:
+
+        * inspector/InspectorOverlay.cpp:
+        (WebCore::buildObjectForElementData):
+
+        * inspector/InspectorOverlayPage.css:
+        (.pseudo-type):
+        (.tag-name): Deleted.
+
+        * inspector/InspectorOverlayPage.js:
+        (_createElementTitle):
+
</ins><span class="cx"> 2016-08-25  Brent Fulgham  &lt;bfulgham@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Crash when getting font bounding rect
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorInspectorOverlaycpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/InspectorOverlay.cpp (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/InspectorOverlay.cpp        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/Source/WebCore/inspector/InspectorOverlay.cpp        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -58,7 +58,6 @@
</span><span class="cx"> #include &lt;bindings/ScriptValue.h&gt;
</span><span class="cx"> #include &lt;inspector/InspectorProtocolObjects.h&gt;
</span><span class="cx"> #include &lt;inspector/InspectorValues.h&gt;
</span><del>-#include &lt;wtf/text/StringBuilder.h&gt;
</del><span class="cx"> 
</span><span class="cx"> using namespace Inspector;
</span><span class="cx"> 
</span><span class="lines">@@ -713,28 +712,27 @@
</span><span class="cx">         .setIdValue(element.getIdAttribute())
</span><span class="cx">         .release();
</span><span class="cx"> 
</span><del>-    StringBuilder classNames;
</del><span class="cx">     if (element.hasClass() &amp;&amp; is&lt;StyledElement&gt;(element)) {
</span><ins>+        auto classes = Inspector::Protocol::Array&lt;String&gt;::create();
</ins><span class="cx">         HashSet&lt;AtomicString&gt; usedClassNames;
</span><span class="cx">         const SpaceSplitString&amp; classNamesString = downcast&lt;StyledElement&gt;(element).classNames();
</span><del>-        size_t classNameCount = classNamesString.size();
-        for (size_t i = 0; i &lt; classNameCount; ++i) {
</del><ins>+        for (size_t i = 0; i &lt; classNamesString.size(); ++i) {
</ins><span class="cx">             const AtomicString&amp; className = classNamesString[i];
</span><span class="cx">             if (usedClassNames.contains(className))
</span><span class="cx">                 continue;
</span><ins>+
</ins><span class="cx">             usedClassNames.add(className);
</span><del>-            classNames.append('.');
-            classNames.append(className);
</del><ins>+            classes-&gt;addItem(className);
</ins><span class="cx">         }
</span><ins>+        elementData-&gt;setClasses(WTFMove(classes));
</ins><span class="cx">     }
</span><ins>+
</ins><span class="cx">     if (node-&gt;isPseudoElement()) {
</span><span class="cx">         if (node-&gt;pseudoId() == BEFORE)
</span><del>-            classNames.appendLiteral(&quot;::before&quot;);
</del><ins>+            elementData-&gt;setPseudoElement(&quot;before&quot;);
</ins><span class="cx">         else if (node-&gt;pseudoId() == AFTER)
</span><del>-            classNames.appendLiteral(&quot;::after&quot;);
</del><ins>+            elementData-&gt;setPseudoElement(&quot;after&quot;);
</ins><span class="cx">     }
</span><del>-    if (!classNames.isEmpty())
-        elementData-&gt;setClassName(classNames.toString());
</del><span class="cx"> 
</span><span class="cx">     RenderElement* renderer = element.renderer();
</span><span class="cx">     if (!renderer)
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorInspectorOverlayPagecss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/InspectorOverlayPage.css (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/InspectorOverlayPage.css        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/Source/WebCore/inspector/InspectorOverlayPage.css        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -59,7 +59,8 @@
</span><span class="cx">     position: absolute;
</span><span class="cx"> }
</span><span class="cx"> 
</span><del>-.tag-name {
</del><ins>+.tag-name,
+.pseudo-type {
</ins><span class="cx">     /* Keep this in sync with XMLViewer.css (.tag) */
</span><span class="cx">     color: rgb(136, 18, 128);
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorInspectorOverlayPagejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/InspectorOverlayPage.js (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/InspectorOverlayPage.js        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/Source/WebCore/inspector/InspectorOverlayPage.js        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -263,12 +263,17 @@
</span><span class="cx"> 
</span><span class="cx"> function _createElementTitle(elementData)
</span><span class="cx"> {
</span><del>-    var builder = new DOMBuilder(&quot;div&quot;, &quot;element-title&quot;);
-    
</del><ins>+    let builder = new DOMBuilder(&quot;div&quot;, &quot;element-title&quot;);
+
</ins><span class="cx">     builder.appendSpanIfNotNull(&quot;tag-name&quot;, elementData.tagName);
</span><del>-    builder.appendSpanIfNotNull(&quot;node-id&quot;, elementData.idValue, &quot;#&quot;);
-    builder.appendSpanIfNotNull(&quot;class-name&quot;, _truncateString(elementData.className, 50));
</del><ins>+    builder.appendSpanIfNotNull(&quot;node-id&quot;, CSS.escape(elementData.idValue), &quot;#&quot;);
</ins><span class="cx"> 
</span><ins>+    let classes = elementData.classes;
+    if (classes &amp;&amp; classes.length)
+        builder.appendSpan(&quot;class-name&quot;, _truncateString(classes.map((className) =&gt; &quot;.&quot; + CSS.escape(className)).join(&quot;&quot;), 50));
+
+    builder.appendSpanIfNotNull(&quot;pseudo-type&quot;, elementData.pseudoElement, &quot;::&quot;);
+
</ins><span class="cx">     builder.appendTextNode(&quot; &quot;);
</span><span class="cx">     builder.appendSpan(&quot;node-width&quot;, elementData.size.width);
</span><span class="cx">     // \xd7 is the code for the &amp;times; HTML entity.
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/Source/WebInspectorUI/ChangeLog        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -1,3 +1,42 @@
</span><ins>+2016-08-26  Devin Rousso  &lt;dcrousso+webkit@gmail.com&gt;
+
+        Web Inspector: Some CSS selectors in the UI aren't escaped
+        https://bugs.webkit.org/show_bug.cgi?id=151378
+
+        Reviewed by Joseph Pecoraro.
+
+        * UserInterface/Base/DOMUtilities.js:
+        (WebInspector.displayNameForNode): Deleted.
+        (WebInspector.linkifyNodeReference):
+        Use DOMNode.prototype.displayName instead of WebInspector.displayNameForNode.
+
+        * UserInterface/Models/DOMNode.js:
+        (WebInspector.DOMNode.prototype.get escapedIdSelector):
+        (WebInspector.DOMNode.prototype.get escapedClassSelector):
+        (WebInspector.DOMNode.prototype.get displayName):
+        (WebInspector.DOMNode.prototype.appropriateSelectorFor):
+        Rework escaping of ids and class names into separate public functions using CSS.escape.
+
+        * UserInterface/Views/CSSStyleDeclarationSection.js:
+        (WebInspector.CSSStyleDeclarationSection.prototype.refresh):
+        Use DOMNode.prototype.displayName instead of WebInspector.displayNameForNode.
+
+        * UserInterface/Views/DOMTreeDataGridNode.js:
+        (WebInspector.DOMTreeDataGridNode.prototype._createNameCellDocumentFragment):
+        Use DOMNode.prototype.displayName instead of WebInspector.displayNameForNode.
+
+        * UserInterface/Views/DOMTreeElementPathComponent.js:
+        (WebInspector.DOMTreeElementPathComponent):
+        Use DOMNode.prototype.displayName instead of WebInspector.displayNameForNode.
+
+        * UserInterface/Views/LayerTreeDataGridNode.js:
+        (WebInspector.LayerTreeDataGridNode.prototype.set layer):
+        Use DOMNode.prototype.displayName instead of WebInspector.displayNameForNode.
+
+        * UserInterface/Views/VisualStyleSelectorSection.js:
+        (WebInspector.VisualStyleSelectorSection.prototype.update):
+        Use DOMNode.prototype.displayName instead of WebInspector.displayNameForNode.
+
</ins><span class="cx"> 2016-08-24  Matt Baker  &lt;mattbaker@apple.com&gt;
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: unexpected cursor changes while dragging ruler handle in rendering frames timeline
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseDOMUtilitiesjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/DOMUtilities.js        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -29,36 +29,6 @@
</span><span class="cx">  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
</span><span class="cx">  */
</span><span class="cx"> 
</span><del>-WebInspector.displayNameForNode = function(node)
-{
-    var title = node.nodeNameInCorrectCase();
-
-    var idAttribute = node.getAttribute(&quot;id&quot;);
-    if (idAttribute) {
-        if (/[\s'&quot;]/.test(idAttribute)) {
-            idAttribute = idAttribute.replace(/\\/g, &quot;\\\\&quot;).replace(/\&quot;/g, &quot;\\\&quot;&quot;);
-            title += &quot;[id=\&quot;&quot; + idAttribute + &quot;\&quot;]&quot;;
-        } else
-            title += &quot;#&quot; + idAttribute;
-    }
-
-    var classAttribute = node.getAttribute(&quot;class&quot;);
-    if (classAttribute) {
-        var classes = classAttribute.trim().split(/\s+/);
-        var foundClasses = {};
-
-        for (var i = 0; i &lt; classes.length; ++i) {
-            var className = classes[i];
-            if (className &amp;&amp; !(className in foundClasses)) {
-                title += &quot;.&quot; + className;
-                foundClasses[className] = true;
-            }
-        }
-    }
-
-    return title;
-};
-
</del><span class="cx"> WebInspector.roleSelectorForNode = function(node)
</span><span class="cx"> {
</span><span class="cx">     // This is proposed syntax for CSS 4 computed role selector :role(foo) and subject to change.
</span><span class="lines">@@ -89,7 +59,7 @@
</span><span class="cx"> 
</span><span class="cx"> WebInspector.linkifyNodeReference = function(node, maxLength)
</span><span class="cx"> {
</span><del>-    let displayName = WebInspector.displayNameForNode(node);
</del><ins>+    let displayName = node.displayName;
</ins><span class="cx">     if (!isNaN(maxLength))
</span><span class="cx">         displayName = displayName.truncate(maxLength);
</span><span class="cx"> 
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsDOMNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -520,28 +520,62 @@
</span><span class="cx">         return path.join(&quot;,&quot;);
</span><span class="cx">     }
</span><span class="cx"> 
</span><ins>+    get escapedIdSelector()
+    {
+        let id = this.getAttribute(&quot;id&quot;);
+        if (!id)
+            return &quot;&quot;;
+
+        id = id.trim();
+        if (!id.length)
+            return &quot;&quot;;
+
+        id = CSS.escape(id);
+        if (/[\s'&quot;]/.test(id))
+            return `[id=\&quot;${id}\&quot;]`;
+
+        return `#${id}`;
+    }
+
+    get escapedClassSelector()
+    {
+        let classes = this.getAttribute(&quot;class&quot;);
+        if (!classes)
+            return &quot;&quot;;
+
+        classes = classes.trim();
+        if (!classes.length)
+            return &quot;&quot;;
+
+        let foundClasses = new Set;
+        return classes.split(/\s+/).reduce((selector, className) =&gt; {
+            if (!className.length || foundClasses.has(className))
+                return selector;
+
+            foundClasses.add(className);
+            return `${selector}.${CSS.escape(className)}`;
+        }, &quot;&quot;);
+    }
+
+    get displayName()
+    {
+        return this.nodeNameInCorrectCase() + this.escapedIdSelector + this.escapedClassSelector;
+    }
+
</ins><span class="cx">     appropriateSelectorFor(justSelector)
</span><span class="cx">     {
</span><span class="cx">         if (this.isPseudoElement())
</span><span class="cx">             return this.parentNode.appropriateSelectorFor() + &quot;::&quot; + this._pseudoType;
</span><span class="cx"> 
</span><del>-        var lowerCaseName = this.localName() || this.nodeName().toLowerCase();
</del><ins>+        let lowerCaseName = this.localName() || this.nodeName().toLowerCase();
</ins><span class="cx"> 
</span><del>-        var id = this.getAttribute(&quot;id&quot;);
-        if (id) {
-            if (/[\s'&quot;]/.test(id)) {
-                id = id.replace(/\\/g, &quot;\\\\&quot;).replace(/\&quot;/g, &quot;\\\&quot;&quot;);
-                selector = lowerCaseName + &quot;[id=\&quot;&quot; + id + &quot;\&quot;]&quot;;
-            } else
-                selector = &quot;#&quot; + id;
-            return (justSelector ? selector : lowerCaseName + selector);
-        }
</del><ins>+        let id = this.escapedIdSelector;
+        if (id.length)
+            return justSelector ? id : lowerCaseName + id;
</ins><span class="cx"> 
</span><del>-        var className = this.getAttribute(&quot;class&quot;);
-        if (className) {
-            var selector = &quot;.&quot; + className.trim().replace(/\s+/g, &quot;.&quot;);
-            return (justSelector ? selector : lowerCaseName + selector);
-        }
</del><ins>+        let classes = this.escapedClassSelector;
+        if (classes.length)
+            return justSelector ? classes : lowerCaseName + classes;
</ins><span class="cx"> 
</span><span class="cx">         if (lowerCaseName === &quot;input&quot; &amp;&amp; this.getAttribute(&quot;type&quot;))
</span><span class="cx">             return lowerCaseName + &quot;[type=\&quot;&quot; + this.getAttribute(&quot;type&quot;) + &quot;\&quot;]&quot;;
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationSectionjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -261,12 +261,12 @@
</span><span class="cx">             break;
</span><span class="cx"> 
</span><span class="cx">         case WebInspector.CSSStyleDeclaration.Type.Inline:
</span><del>-            appendSelectorTextKnownToMatch.call(this, WebInspector.displayNameForNode(this._style.node));
</del><ins>+            appendSelectorTextKnownToMatch.call(this, this._style.node.displayName);
</ins><span class="cx">             this._originElement.append(WebInspector.UIString(&quot;Style Attribute&quot;));
</span><span class="cx">             break;
</span><span class="cx"> 
</span><span class="cx">         case WebInspector.CSSStyleDeclaration.Type.Attribute:
</span><del>-            appendSelectorTextKnownToMatch.call(this, WebInspector.displayNameForNode(this._style.node));
</del><ins>+            appendSelectorTextKnownToMatch.call(this, this._style.node.displayName);
</ins><span class="cx">             this._originElement.append(WebInspector.UIString(&quot;HTML Attributes&quot;));
</span><span class="cx">             break;
</span><span class="cx">         }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGridNode.js (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGridNode.js        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeDataGridNode.js        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -53,7 +53,7 @@
</span><span class="cx">     _createNameCellDocumentFragment()
</span><span class="cx">     {
</span><span class="cx">         let fragment = document.createDocumentFragment();
</span><del>-        let mainTitle = WebInspector.displayNameForNode(this._domNode);
</del><ins>+        let mainTitle = this._domNode.displayName;
</ins><span class="cx">         fragment.append(mainTitle);
</span><span class="cx"> 
</span><span class="cx">         let goToButton = fragment.appendChild(WebInspector.createGoToArrowButton());
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsDOMTreeElementPathComponentjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElementPathComponent.js (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElementPathComponent.js        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/DOMTreeElementPathComponent.js        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -39,7 +39,7 @@
</span><span class="cx">                 title = &quot;::&quot; + node.pseudoType();
</span><span class="cx">             } else {
</span><span class="cx">                 className = WebInspector.DOMTreeElementPathComponent.DOMElementIconStyleClassName;
</span><del>-                title = WebInspector.displayNameForNode(node);
</del><ins>+                title = node.displayName;
</ins><span class="cx">             }
</span><span class="cx">             break;
</span><span class="cx"> 
</span><span class="lines">@@ -75,7 +75,7 @@
</span><span class="cx">             if (node.shadowRootType())
</span><span class="cx">                 title = WebInspector.UIString(&quot;Shadow Content&quot;);
</span><span class="cx">             else
</span><del>-                title = WebInspector.displayNameForNode(node);
</del><ins>+                title = node.displayName;
</ins><span class="cx">             break;
</span><span class="cx"> 
</span><span class="cx">         case Node.PROCESSING_INSTRUCTION_NODE:
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLayerTreeDataGridNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDataGridNode.js (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDataGridNode.js        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LayerTreeDataGridNode.js        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -63,7 +63,7 @@
</span><span class="cx">         var domNode = WebInspector.domTreeManager.nodeForId(layer.nodeId);
</span><span class="cx"> 
</span><span class="cx">         this.data = {
</span><del>-            name: domNode ? WebInspector.displayNameForNode(domNode) : WebInspector.UIString(&quot;Unknown node&quot;),
</del><ins>+            name: domNode ? domNode.displayName : WebInspector.UIString(&quot;Unknown node&quot;),
</ins><span class="cx">             paintCount: layer.paintCount || emDash,
</span><span class="cx">             memory: Number.bytesToString(layer.memory || 0)
</span><span class="cx">         };
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsVisualStyleSelectorSectionjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js (205034 => 205035)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js        2016-08-26 20:22:24 UTC (rev 205034)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/VisualStyleSelectorSection.js        2016-08-26 20:29:17 UTC (rev 205035)
</span><span class="lines">@@ -191,7 +191,7 @@
</span><span class="cx">                     continue;
</span><span class="cx"> 
</span><span class="cx">                 if (!divider) {
</span><del>-                    let dividerText = WebInspector.UIString(&quot;Inherited from %s&quot;).format(WebInspector.displayNameForNode(inherited.node));
</del><ins>+                    let dividerText = WebInspector.UIString(&quot;Inherited from %s&quot;).format(inherited.node.displayName);
</ins><span class="cx">                     divider = new WebInspector.GeneralTreeElement(&quot;section-divider&quot;, dividerText);
</span><span class="cx">                     divider.selectable = false;
</span><span class="cx">                     this._selectors.appendChild(divider);
</span></span></pre>
</div>
</div>

</body>
</html>