<!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>[185784] 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/185784">185784</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2015-06-19 17:48:28 -0700 (Fri, 19 Jun 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Highlight currently edited CSS selector
https://bugs.webkit.org/show_bug.cgi?id=145658
Patch by Devin Rousso <drousso@apple.com> on 2015-06-19
Reviewed by Joseph Pecoraro.
Source/JavaScriptCore:
* inspector/protocol/DOM.json: Added highlightSelector to show highlight over multiple nodes.
Source/WebCore:
Test: inspector/dom/highlight-multiple-shapes.html
* inspector/InspectorController.cpp:
(WebCore::InspectorController::buildObjectForHighlightedNode):
* inspector/InspectorController.h:
* inspector/InspectorDOMAgent.cpp:
(WebCore::InspectorDOMAgent::highlightSelector): Gets a list of all nodes matching a given selector string and highlights each of them.
* inspector/InspectorDOMAgent.h:
* inspector/InspectorOverlay.cpp:
(WebCore::InspectorOverlay::hideHighlight):
(WebCore::InspectorOverlay::highlightNodeList): Loops through a given NodeList to create highlightObjects for each of them.
(WebCore::InspectorOverlay::shouldShowOverlay):
(WebCore::buildObjectForElementData): Don't show flow fragments when highlighting multiple nodes.
(WebCore::InspectorOverlay::buildHighlightObjectForNode):
(WebCore::InspectorOverlay::buildObjectForHighlightedNode): Now returns an array containing the highlightObject for each highligthed node.
(WebCore::InspectorOverlay::drawNodeHighlight): Now sends an array to the InspectorOverlayPage.js to provide support for highlighting multiple nodes.
* inspector/InspectorOverlay.h:
* inspector/InspectorOverlayPage.js: Now expects an array as its parameter and loops through it to highlight each node given.
If the parameter array contains more than one element, do not draw the textbox containing info on that node.
(drawNodeHighlight):
Source/WebInspectorUI:
* UserInterface/Views/CSSStyleDeclarationSection.js:
(WebInspector.CSSStyleDeclarationSection): Added event listeners on the selector text for mouseover and mouseout.
(WebInspector.CSSStyleDeclarationSection.prototype._highlightNodesWithSelector): Selector text mouseover action that highlights all nodes that match the selector string in the corresponding frame.
(WebInspector.CSSStyleDeclarationSection.prototype._hideHighlightOnNodesWithSelector): Selector text mouseout action that clears all highlights on matching nodes.
* UserInterface/Views/DOMNode.js:
(WebInspector.DOMNode): If the payload contains a frameId, then save it.
(WebInspector.DOMNode.frameIdentifier):
LayoutTests:
* inspector/dom/highlightSelector-expected.txt: Added.
* inspector/dom/highlightSelector-iframe.html: Added.
* inspector/dom/highlightSelector.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceJavaScriptCoreChangeLog">trunk/Source/JavaScriptCore/ChangeLog</a></li>
<li><a href="#trunkSourceJavaScriptCoreinspectorprotocolDOMjson">trunk/Source/JavaScriptCore/inspector/protocol/DOM.json</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreinspectorInspectorControllercpp">trunk/Source/WebCore/inspector/InspectorController.cpp</a></li>
<li><a href="#trunkSourceWebCoreinspectorInspectorControllerh">trunk/Source/WebCore/inspector/InspectorController.h</a></li>
<li><a href="#trunkSourceWebCoreinspectorInspectorDOMAgentcpp">trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp</a></li>
<li><a href="#trunkSourceWebCoreinspectorInspectorDOMAgenth">trunk/Source/WebCore/inspector/InspectorDOMAgent.h</a></li>
<li><a href="#trunkSourceWebCoreinspectorInspectorOverlaycpp">trunk/Source/WebCore/inspector/InspectorOverlay.cpp</a></li>
<li><a href="#trunkSourceWebCoreinspectorInspectorOverlayh">trunk/Source/WebCore/inspector/InspectorOverlay.h</a></li>
<li><a href="#trunkSourceWebCoreinspectorInspectorOverlayPagejs">trunk/Source/WebCore/inspector/InspectorOverlayPage.js</a></li>
<li><a href="#trunkSourceWebCoretestingInternalscpp">trunk/Source/WebCore/testing/Internals.cpp</a></li>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</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>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsinspectordomhighlightSelectorexpectedtxt">trunk/LayoutTests/inspector/dom/highlightSelector-expected.txt</a></li>
<li><a href="#trunkLayoutTestsinspectordomhighlightSelectoriframehtml">trunk/LayoutTests/inspector/dom/highlightSelector-iframe.html</a></li>
<li><a href="#trunkLayoutTestsinspectordomhighlightSelectorhtml">trunk/LayoutTests/inspector/dom/highlightSelector.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/LayoutTests/ChangeLog 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -1,3 +1,14 @@
</span><ins>+2015-06-19 Devin Rousso <drousso@apple.com>
+
+ Web Inspector: Highlight currently edited CSS selector
+ https://bugs.webkit.org/show_bug.cgi?id=145658
+
+ Reviewed by Joseph Pecoraro.
+
+ * inspector/dom/highlightSelector-expected.txt: Added.
+ * inspector/dom/highlightSelector-iframe.html: Added.
+ * inspector/dom/highlightSelector.html: Added.
+
</ins><span class="cx"> 2015-06-19 Dean Jackson <dino@apple.com>
</span><span class="cx">
</span><span class="cx"> Extremely large canvas crashes on pre-El Capitan machines
</span></span></pre></div>
<a id="trunkLayoutTestsinspectordomhighlightSelectorexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/inspector/dom/highlightSelector-expected.txt (0 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/dom/highlightSelector-expected.txt (rev 0)
+++ trunk/LayoutTests/inspector/dom/highlightSelector-expected.txt 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -0,0 +1,1350 @@
</span><ins>+
+SELECTOR: div
+FRAMEID: 0.1
+FOUND: 3
+[
+ {
+ "scrollOffset": {
+ "x": 0,
+ "y": 0
+ },
+ "fragments": [
+ {
+ "quads": [
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 162
+ },
+ {
+ "x": 8,
+ "y": 162
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 162
+ },
+ {
+ "x": 8,
+ "y": 162
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 162
+ },
+ {
+ "x": 8,
+ "y": 162
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 162
+ },
+ {
+ "x": 8,
+ "y": 162
+ }
+ ]
+ ],
+ "contentColor": "#ffffff",
+ "contentOutlineColor": "rgba(0, 0, 0, 0)",
+ "paddingColor": "#ffffff",
+ "borderColor": "#ffffff",
+ "marginColor": "#ffffff"
+ }
+ ],
+ "elementData": {
+ "tagName": "div",
+ "idValue": "",
+ "size": {
+ "width": 784,
+ "height": 154
+ },
+ "role": ""
+ }
+ },
+ {
+ "scrollOffset": {
+ "x": 0,
+ "y": 0
+ },
+ "fragments": [
+ {
+ "quads": [
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ]
+ ],
+ "contentColor": "#ffffff",
+ "contentOutlineColor": "rgba(0, 0, 0, 0)",
+ "paddingColor": "#ffffff",
+ "borderColor": "#ffffff",
+ "marginColor": "#ffffff"
+ }
+ ],
+ "elementData": {
+ "tagName": "div",
+ "idValue": "",
+ "className": ".class-one",
+ "size": {
+ "width": 784,
+ "height": 0
+ },
+ "role": ""
+ }
+ },
+ {
+ "scrollOffset": {
+ "x": 0,
+ "y": 0
+ },
+ "fragments": [
+ {
+ "quads": [
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 792,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ]
+ ],
+ "contentColor": "#ffffff",
+ "contentOutlineColor": "rgba(0, 0, 0, 0)",
+ "paddingColor": "#ffffff",
+ "borderColor": "#ffffff",
+ "marginColor": "#ffffff"
+ }
+ ],
+ "elementData": {
+ "tagName": "div",
+ "idValue": "id-one",
+ "className": ".class-two",
+ "size": {
+ "width": 784,
+ "height": 0
+ },
+ "role": ""
+ }
+ }
+]
+
+
+SELECTOR: .class-one
+FRAMEID: 0.1
+FOUND: 2
+[
+ {
+ "scrollOffset": {
+ "x": 0,
+ "y": 0
+ },
+ "fragments": [
+ {
+ "quads": [
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ]
+ ],
+ "contentColor": "#ffffff",
+ "contentOutlineColor": "rgba(0, 0, 0, 0)",
+ "paddingColor": "#ffffff",
+ "borderColor": "#ffffff",
+ "marginColor": "#ffffff"
+ }
+ ],
+ "elementData": {
+ "tagName": "div",
+ "idValue": "",
+ "className": ".class-one",
+ "size": {
+ "width": 769,
+ "height": 0
+ },
+ "role": ""
+ }
+ },
+ {
+ "scrollOffset": {
+ "x": 0,
+ "y": 0
+ },
+ "fragments": [
+ {
+ "quads": [
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 312,
+ "y": 8
+ },
+ {
+ "x": 312,
+ "y": 162
+ },
+ {
+ "x": 8,
+ "y": 162
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 312,
+ "y": 8
+ },
+ {
+ "x": 312,
+ "y": 162
+ },
+ {
+ "x": 8,
+ "y": 162
+ }
+ ],
+ [
+ {
+ "x": 10,
+ "y": 10
+ },
+ {
+ "x": 310,
+ "y": 10
+ },
+ {
+ "x": 310,
+ "y": 160
+ },
+ {
+ "x": 10,
+ "y": 160
+ }
+ ],
+ [
+ {
+ "x": 10,
+ "y": 10
+ },
+ {
+ "x": 310,
+ "y": 10
+ },
+ {
+ "x": 310,
+ "y": 160
+ },
+ {
+ "x": 10,
+ "y": 160
+ }
+ ]
+ ],
+ "contentColor": "#ffffff",
+ "contentOutlineColor": "rgba(0, 0, 0, 0)",
+ "paddingColor": "#ffffff",
+ "borderColor": "#ffffff",
+ "marginColor": "#ffffff"
+ }
+ ],
+ "elementData": {
+ "tagName": "iframe",
+ "idValue": "",
+ "className": ".class-one",
+ "size": {
+ "width": 304,
+ "height": 154
+ },
+ "role": "group"
+ }
+ }
+]
+
+
+SELECTOR: #id-one
+FRAMEID: 0.1
+FOUND: 1
+[
+ {
+ "scrollOffset": {
+ "x": 0,
+ "y": 0
+ },
+ "fragments": [
+ {
+ "quads": [
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ]
+ ],
+ "contentColor": "#ffffff",
+ "contentOutlineColor": "rgba(0, 0, 0, 0)",
+ "paddingColor": "#ffffff",
+ "borderColor": "#ffffff",
+ "marginColor": "#ffffff"
+ }
+ ],
+ "elementData": {
+ "tagName": "div",
+ "idValue": "id-one",
+ "className": ".class-two",
+ "size": {
+ "width": 769,
+ "height": 0
+ },
+ "role": ""
+ }
+ }
+]
+
+
+SELECTOR: .class-one, .class-two
+FRAMEID: 0.1
+FOUND: 3
+[
+ {
+ "scrollOffset": {
+ "x": 0,
+ "y": 0
+ },
+ "fragments": [
+ {
+ "quads": [
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ]
+ ],
+ "contentColor": "#ffffff",
+ "contentOutlineColor": "rgba(0, 0, 0, 0)",
+ "paddingColor": "#ffffff",
+ "borderColor": "#ffffff",
+ "marginColor": "#ffffff"
+ }
+ ],
+ "elementData": {
+ "tagName": "div",
+ "idValue": "",
+ "className": ".class-one",
+ "size": {
+ "width": 769,
+ "height": 0
+ },
+ "role": ""
+ }
+ },
+ {
+ "scrollOffset": {
+ "x": 0,
+ "y": 0
+ },
+ "fragments": [
+ {
+ "quads": [
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 777,
+ "y": 8
+ },
+ {
+ "x": 8,
+ "y": 8
+ }
+ ]
+ ],
+ "contentColor": "#ffffff",
+ "contentOutlineColor": "rgba(0, 0, 0, 0)",
+ "paddingColor": "#ffffff",
+ "borderColor": "#ffffff",
+ "marginColor": "#ffffff"
+ }
+ ],
+ "elementData": {
+ "tagName": "div",
+ "idValue": "id-one",
+ "className": ".class-two",
+ "size": {
+ "width": 769,
+ "height": 0
+ },
+ "role": ""
+ }
+ },
+ {
+ "scrollOffset": {
+ "x": 0,
+ "y": 0
+ },
+ "fragments": [
+ {
+ "quads": [
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 312,
+ "y": 8
+ },
+ {
+ "x": 312,
+ "y": 162
+ },
+ {
+ "x": 8,
+ "y": 162
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 312,
+ "y": 8
+ },
+ {
+ "x": 312,
+ "y": 162
+ },
+ {
+ "x": 8,
+ "y": 162
+ }
+ ],
+ [
+ {
+ "x": 10,
+ "y": 10
+ },
+ {
+ "x": 310,
+ "y": 10
+ },
+ {
+ "x": 310,
+ "y": 160
+ },
+ {
+ "x": 10,
+ "y": 160
+ }
+ ],
+ [
+ {
+ "x": 10,
+ "y": 10
+ },
+ {
+ "x": 310,
+ "y": 10
+ },
+ {
+ "x": 310,
+ "y": 160
+ },
+ {
+ "x": 10,
+ "y": 160
+ }
+ ]
+ ],
+ "contentColor": "#ffffff",
+ "contentOutlineColor": "rgba(0, 0, 0, 0)",
+ "paddingColor": "#ffffff",
+ "borderColor": "#ffffff",
+ "marginColor": "#ffffff"
+ }
+ ],
+ "elementData": {
+ "tagName": "iframe",
+ "idValue": "",
+ "className": ".class-one",
+ "size": {
+ "width": 304,
+ "height": 154
+ },
+ "role": "group"
+ }
+ }
+]
+
+
+SELECTOR: iframe.class-one
+FRAMEID: undefined
+FOUND: 1
+[
+ {
+ "scrollOffset": {
+ "x": 0,
+ "y": 0
+ },
+ "fragments": [
+ {
+ "quads": [
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 312,
+ "y": 8
+ },
+ {
+ "x": 312,
+ "y": 162
+ },
+ {
+ "x": 8,
+ "y": 162
+ }
+ ],
+ [
+ {
+ "x": 8,
+ "y": 8
+ },
+ {
+ "x": 312,
+ "y": 8
+ },
+ {
+ "x": 312,
+ "y": 162
+ },
+ {
+ "x": 8,
+ "y": 162
+ }
+ ],
+ [
+ {
+ "x": 10,
+ "y": 10
+ },
+ {
+ "x": 310,
+ "y": 10
+ },
+ {
+ "x": 310,
+ "y": 160
+ },
+ {
+ "x": 10,
+ "y": 160
+ }
+ ],
+ [
+ {
+ "x": 10,
+ "y": 10
+ },
+ {
+ "x": 310,
+ "y": 10
+ },
+ {
+ "x": 310,
+ "y": 160
+ },
+ {
+ "x": 10,
+ "y": 160
+ }
+ ]
+ ],
+ "contentColor": "#ffffff",
+ "contentOutlineColor": "rgba(0, 0, 0, 0)",
+ "paddingColor": "#ffffff",
+ "borderColor": "#ffffff",
+ "marginColor": "#ffffff"
+ }
+ ],
+ "elementData": {
+ "tagName": "iframe",
+ "idValue": "",
+ "className": ".class-one",
+ "size": {
+ "width": 304,
+ "height": 154
+ },
+ "role": "group"
+ }
+ }
+]
+
+
+PASS: Expected error: No frame for given id found
+SELECTOR: div
+FRAMEID: 0.2
+
+
+SELECTOR: .no-elements
+FRAMEID: 0.1
+FOUND: 0
+[]
+
+
+PASS: Expected error: DOM Error while querying
+SELECTOR: $%foobar
+FRAMEID: 0.1
+
+
+SELECTOR: div
+FRAMEID: 0.3
+FOUND: 2
+[
+ {
+ "scrollOffset": {
+ "x": 0,
+ "y": 0
+ },
+ "fragments": [
+ {
+ "quads": [
+ [
+ {
+ "x": 18,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 18,
+ "y": 18
+ }
+ ],
+ [
+ {
+ "x": 18,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 18,
+ "y": 18
+ }
+ ],
+ [
+ {
+ "x": 18,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 18,
+ "y": 18
+ }
+ ],
+ [
+ {
+ "x": 18,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 18,
+ "y": 18
+ }
+ ]
+ ],
+ "contentColor": "#ffffff",
+ "contentOutlineColor": "rgba(0, 0, 0, 0)",
+ "paddingColor": "#ffffff",
+ "borderColor": "#ffffff",
+ "marginColor": "#ffffff"
+ }
+ ],
+ "elementData": {
+ "tagName": "div",
+ "idValue": "id-one",
+ "size": {
+ "width": 284,
+ "height": 0
+ },
+ "role": ""
+ }
+ },
+ {
+ "scrollOffset": {
+ "x": 0,
+ "y": 0
+ },
+ "fragments": [
+ {
+ "quads": [
+ [
+ {
+ "x": 18,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 18,
+ "y": 18
+ }
+ ],
+ [
+ {
+ "x": 18,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 18,
+ "y": 18
+ }
+ ],
+ [
+ {
+ "x": 18,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 18,
+ "y": 18
+ }
+ ],
+ [
+ {
+ "x": 18,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 18,
+ "y": 18
+ }
+ ]
+ ],
+ "contentColor": "#ffffff",
+ "contentOutlineColor": "rgba(0, 0, 0, 0)",
+ "paddingColor": "#ffffff",
+ "borderColor": "#ffffff",
+ "marginColor": "#ffffff"
+ }
+ ],
+ "elementData": {
+ "tagName": "div",
+ "idValue": "",
+ "size": {
+ "width": 284,
+ "height": 0
+ },
+ "role": ""
+ }
+ }
+]
+
+
+SELECTOR: #id-one
+FRAMEID: 0.3
+FOUND: 1
+[
+ {
+ "scrollOffset": {
+ "x": 0,
+ "y": 0
+ },
+ "fragments": [
+ {
+ "quads": [
+ [
+ {
+ "x": 18,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 18,
+ "y": 18
+ }
+ ],
+ [
+ {
+ "x": 18,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 18,
+ "y": 18
+ }
+ ],
+ [
+ {
+ "x": 18,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 18,
+ "y": 18
+ }
+ ],
+ [
+ {
+ "x": 18,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 302,
+ "y": 18
+ },
+ {
+ "x": 18,
+ "y": 18
+ }
+ ]
+ ],
+ "contentColor": "#ffffff",
+ "contentOutlineColor": "rgba(0, 0, 0, 0)",
+ "paddingColor": "#ffffff",
+ "borderColor": "#ffffff",
+ "marginColor": "#ffffff"
+ }
+ ],
+ "elementData": {
+ "tagName": "div",
+ "idValue": "id-one",
+ "size": {
+ "width": 284,
+ "height": 0
+ },
+ "role": ""
+ }
+ }
+]
+
+
+
</ins></span></pre></div>
<a id="trunkLayoutTestsinspectordomhighlightSelectoriframehtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/inspector/dom/highlightSelector-iframe.html (0 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/dom/highlightSelector-iframe.html (rev 0)
+++ trunk/LayoutTests/inspector/dom/highlightSelector-iframe.html 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -0,0 +1,8 @@
</span><ins>+<html>
+ <head>
+ </head>
+ <body>
+ <div id="id-one"></div>
+ <div></div>
+ </body>
+</html>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkLayoutTestsinspectordomhighlightSelectorhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/inspector/dom/highlightSelector.html (0 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/dom/highlightSelector.html (rev 0)
+++ trunk/LayoutTests/inspector/dom/highlightSelector.html 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -0,0 +1,86 @@
</span><ins>+<html>
+<head>
+<script type="text/javascript" src="../../http/tests/inspector/inspector-test.js"></script>
+<script>
+function test() {
+ var testcases = [
+ {'frameId': '0.1', 'selector': 'div'},
+ {'frameId': '0.1', 'selector': '.class-one'},
+ {'frameId': '0.1', 'selector': '#id-one'},
+ {'frameId': '0.1', 'selector': '.class-one, .class-two'},
+ {'selector': 'iframe.class-one'}, // No frame ID.
+ {'frameId': '0.2', 'selector': 'div', "error": true}, // Non-existing frame ID.
+ {'frameId': '0.1', 'selector': '.no-elements'}, // Non-matching selector.
+ {'frameId': '0.1', 'selector': '$%foobar', "error": true}, // Invalid selector.
+ {'frameId': '0.3', 'selector': 'div'},
+ {'frameId': '0.3', 'selector': '#id-one'},
+ ];
+
+ function getHighlightObjectForSelector(selector, frameId, errorExpected, callback) {
+ var highlightConfig = {
+ showInfo: true,
+ contentColor: {r: 255, g: 255, b: 255},
+ paddingColor: {r: 255, g: 255, b: 255},
+ borderColor: {r: 255, g: 255, b: 255},
+ marginColor: {r: 255, g: 255, b: 255},
+ };
+
+ DOMAgent.highlightSelector(highlightConfig, selector, frameId, highlightSelectorCallback);
+
+ function highlightSelectorCallback(error) {
+ if (errorExpected) {
+ InspectorTest.assert(error, "Missing expected error. Error: " + error);
+
+ if (error)
+ InspectorTest.log("PASS: Expected error: " + error);
+
+ callback();
+ return;
+ } else
+ InspectorTest.assert(!error, "Error in callback for DOMAgent.highlightSelector: " + error);
+
+ InspectorTest.evaluateInPage("window.internals.inspectorHighlightObject()", receivedHighlightObject);
+ }
+
+ function receivedHighlightObject(error, payload, wasThrown) {
+ InspectorTest.assert(!error, "When evaluating code, received unexpected error:" + error);
+ InspectorTest.assert(!wasThrown, "When evaluating code, an exception was thrown:" + wasThrown);
+
+ var data = JSON.parse(payload.value);
+ callback(data);
+ }
+ }
+
+ function runNextTest(tests) {
+ var testcase = tests[0];
+
+ getHighlightObjectForSelector(testcase.selector, testcase.frameId, testcase.error, function(payload) {
+ InspectorTest.log("SELECTOR: " + testcase.selector);
+ InspectorTest.log("FRAMEID: " + testcase.frameId);
+
+ if (payload) {
+ InspectorTest.log("FOUND: " + payload.length);
+ InspectorTest.log(JSON.stringify(payload, null, 2));
+ }
+
+ InspectorTest.log("\n");
+
+ if (tests.length > 1)
+ runNextTest(tests.splice(1));
+ else
+ InspectorTest.completeTest();
+ });
+ }
+
+ runNextTest(testcases);
+}
+</script>
+</head>
+<body onload="runTest()">
+ <div>
+ <div class="class-one"></div>
+ <div id="id-one" class="class-two"></div>
+ <iframe class="class-one" src="highlightSelector-iframe.html"></iframe>
+ </div>
+</body>
+</html>
</ins><span class="cx">\ No newline at end of file
</span></span></pre></div>
<a id="trunkSourceJavaScriptCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/JavaScriptCore/ChangeLog (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/JavaScriptCore/ChangeLog 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/Source/JavaScriptCore/ChangeLog 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -1,3 +1,12 @@
</span><ins>+2015-06-19 Devin Rousso <drousso@apple.com>
+
+ Web Inspector: Highlight currently edited CSS selector
+ https://bugs.webkit.org/show_bug.cgi?id=145658
+
+ Reviewed by Joseph Pecoraro.
+
+ * inspector/protocol/DOM.json: Added highlightSelector to show highlight over multiple nodes.
+
</ins><span class="cx"> 2015-06-19 Mark Lam <mark.lam@apple.com>
</span><span class="cx">
</span><span class="cx"> Gardening: fix build for EWS bots.
</span></span></pre></div>
<a id="trunkSourceJavaScriptCoreinspectorprotocolDOMjson"></a>
<div class="modfile"><h4>Modified: trunk/Source/JavaScriptCore/inspector/protocol/DOM.json (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/JavaScriptCore/inspector/protocol/DOM.json 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/Source/JavaScriptCore/inspector/protocol/DOM.json 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -331,6 +331,15 @@
</span><span class="cx"> "description": "Highlights given quad. Coordinates are absolute with respect to the main frame viewport."
</span><span class="cx"> },
</span><span class="cx"> {
</span><ins>+ "name": "highlightSelector",
+ "parameters": [
+ { "name": "highlightConfig", "$ref": "HighlightConfig", "description": "A descriptor for the highlight appearance." },
+ { "name": "selectorString", "type": "string", "description": "A CSS selector for finding matching nodes to highlight." },
+ { "name": "frameId", "type": "string", "optional": true, "description": "Identifier of the frame which will be searched using the selector. If not provided, the main frame will be used." }
+ ],
+ "description": "Highlights all DOM nodes that match a given selector. A string containing a CSS selector must be specified."
+ },
+ {
</ins><span class="cx"> "name": "highlightNode",
</span><span class="cx"> "parameters": [
</span><span class="cx"> { "name": "highlightConfig", "$ref": "HighlightConfig", "description": "A descriptor for the highlight appearance." },
</span></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/Source/WebCore/ChangeLog 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -1,3 +1,31 @@
</span><ins>+2015-06-19 Devin Rousso <drousso@apple.com>
+
+ Web Inspector: Highlight currently edited CSS selector
+ https://bugs.webkit.org/show_bug.cgi?id=145658
+
+ Reviewed by Joseph Pecoraro.
+
+ Test: inspector/dom/highlight-multiple-shapes.html
+
+ * inspector/InspectorController.cpp:
+ (WebCore::InspectorController::buildObjectForHighlightedNode):
+ * inspector/InspectorController.h:
+ * inspector/InspectorDOMAgent.cpp:
+ (WebCore::InspectorDOMAgent::highlightSelector): Gets a list of all nodes matching a given selector string and highlights each of them.
+ * inspector/InspectorDOMAgent.h:
+ * inspector/InspectorOverlay.cpp:
+ (WebCore::InspectorOverlay::hideHighlight):
+ (WebCore::InspectorOverlay::highlightNodeList): Loops through a given NodeList to create highlightObjects for each of them.
+ (WebCore::InspectorOverlay::shouldShowOverlay):
+ (WebCore::buildObjectForElementData): Don't show flow fragments when highlighting multiple nodes.
+ (WebCore::InspectorOverlay::buildHighlightObjectForNode):
+ (WebCore::InspectorOverlay::buildObjectForHighlightedNode): Now returns an array containing the highlightObject for each highligthed node.
+ (WebCore::InspectorOverlay::drawNodeHighlight): Now sends an array to the InspectorOverlayPage.js to provide support for highlighting multiple nodes.
+ * inspector/InspectorOverlay.h:
+ * inspector/InspectorOverlayPage.js: Now expects an array as its parameter and loops through it to highlight each node given.
+ If the parameter array contains more than one element, do not draw the textbox containing info on that node.
+ (drawNodeHighlight):
+
</ins><span class="cx"> 2015-06-19 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> Crash under WebCore::PageConsoleClient::addMessage attempting to log insecure content message in ImageDocument
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorInspectorControllercpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/InspectorController.cpp (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/InspectorController.cpp 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/Source/WebCore/inspector/InspectorController.cpp 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -324,9 +324,9 @@
</span><span class="cx"> m_overlay->getHighlight(highlight, coordinateSystem);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> InspectorController::buildObjectForHighlightedNode() const
</del><ins>+Ref<Inspector::Protocol::Array<Inspector::Protocol::OverlayTypes::NodeHighlightData>> InspectorController::buildObjectForHighlightedNodes() const
</ins><span class="cx"> {
</span><del>- return m_overlay->buildObjectForHighlightedNode();
</del><ins>+ return m_overlay->buildObjectForHighlightedNodes();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void InspectorController::inspect(Node* node)
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorInspectorControllerh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/InspectorController.h (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/InspectorController.h 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/Source/WebCore/inspector/InspectorController.h 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -114,7 +114,7 @@
</span><span class="cx">
</span><span class="cx"> void setIndicating(bool);
</span><span class="cx">
</span><del>- WEBCORE_EXPORT RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> buildObjectForHighlightedNode() const;
</del><ins>+ WEBCORE_EXPORT Ref<Inspector::Protocol::Array<Inspector::Protocol::OverlayTypes::NodeHighlightData>> buildObjectForHighlightedNodes() const;
</ins><span class="cx">
</span><span class="cx"> bool isUnderTest() const { return m_isUnderTest; }
</span><span class="cx"> void setIsUnderTest(bool isUnderTest) { m_isUnderTest = isUnderTest; }
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorInspectorDOMAgentcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -1075,6 +1075,41 @@
</span><span class="cx"> m_overlay->highlightQuad(WTF::move(quad), *highlightConfig);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+void InspectorDOMAgent::highlightSelector(ErrorString& errorString, const InspectorObject& highlightInspectorObject, const String& selectorString, const String* frameId)
+{
+ RefPtr<Document> document;
+
+ if (frameId) {
+ Frame* frame = m_pageAgent->frameForId(*frameId);
+ if (!frame) {
+ errorString = ASCIILiteral("No frame for given id found");
+ return;
+ }
+
+ document = frame->document();
+ } else
+ document = m_document;
+
+ if (!document) {
+ errorString = ASCIILiteral("Document could not be found");
+ return;
+ }
+
+ ExceptionCode ec = 0;
+ RefPtr<NodeList> nodes = document->querySelectorAll(selectorString, ec);
+ // FIXME: <https://webkit.org/b/146161> Web Inspector: DOM.highlightSelector should work for "a:visited"
+ if (ec) {
+ errorString = ASCIILiteral("DOM Error while querying");
+ return;
+ }
+
+ std::unique_ptr<HighlightConfig> highlightConfig = highlightConfigFromInspectorObject(errorString, &highlightInspectorObject);
+ if (!highlightConfig)
+ return;
+
+ m_overlay->highlightNodeList(nodes, *highlightConfig);
+}
+
</ins><span class="cx"> void InspectorDOMAgent::highlightNode(ErrorString& errorString, const InspectorObject& highlightInspectorObject, const int* nodeId, const String* objectId)
</span><span class="cx"> {
</span><span class="cx"> Node* node = 0;
</span><span class="lines">@@ -1294,6 +1329,7 @@
</span><span class="cx">
</span><span class="cx"> } else if (is<Document>(*node)) {
</span><span class="cx"> Document& document = downcast<Document>(*node);
</span><ins>+ value->setFrameId(m_pageAgent->frameId(document.frame()));
</ins><span class="cx"> value->setDocumentURL(documentURLString(&document));
</span><span class="cx"> value->setBaseURL(documentBaseURLString(&document));
</span><span class="cx"> value->setXmlVersion(document.xmlVersion());
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorInspectorDOMAgenth"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/InspectorDOMAgent.h (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/InspectorDOMAgent.h 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/Source/WebCore/inspector/InspectorDOMAgent.h 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -143,6 +143,7 @@
</span><span class="cx"> virtual void hideHighlight(ErrorString&) override;
</span><span class="cx"> virtual void highlightRect(ErrorString&, int x, int y, int width, int height, const Inspector::InspectorObject* color, const Inspector::InspectorObject* outlineColor, const bool* usePageCoordinates) override;
</span><span class="cx"> virtual void highlightQuad(ErrorString&, const Inspector::InspectorArray& quad, const Inspector::InspectorObject* color, const Inspector::InspectorObject* outlineColor, const bool* usePageCoordinates) override;
</span><ins>+ virtual void highlightSelector(ErrorString&, const Inspector::InspectorObject& highlightConfig, const String& selectorString, const String* frameId) override;
</ins><span class="cx"> virtual void highlightNode(ErrorString&, const Inspector::InspectorObject& highlightConfig, const int* nodeId, const String* objectId) override;
</span><span class="cx"> virtual void highlightFrame(ErrorString&, const String& frameId, const Inspector::InspectorObject* color, const Inspector::InspectorObject* outlineColor) override;
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorInspectorOverlaycpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/InspectorOverlay.cpp (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/InspectorOverlay.cpp 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/Source/WebCore/inspector/InspectorOverlay.cpp 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -244,14 +244,24 @@
</span><span class="cx"> void InspectorOverlay::hideHighlight()
</span><span class="cx"> {
</span><span class="cx"> m_highlightNode.clear();
</span><ins>+ m_highlightNodeList.clear();
</ins><span class="cx"> m_highlightQuad.reset();
</span><span class="cx"> update();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+void InspectorOverlay::highlightNodeList(PassRefPtr<NodeList> nodes, const HighlightConfig& highlightConfig)
+{
+ m_nodeHighlightConfig = highlightConfig;
+ m_highlightNodeList = nodes;
+ m_highlightNode.clear();
+ update();
+}
+
</ins><span class="cx"> void InspectorOverlay::highlightNode(Node* node, const HighlightConfig& highlightConfig)
</span><span class="cx"> {
</span><span class="cx"> m_nodeHighlightConfig = highlightConfig;
</span><span class="cx"> m_highlightNode = node;
</span><ins>+ m_highlightNodeList.clear();
</ins><span class="cx"> update();
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -289,7 +299,7 @@
</span><span class="cx">
</span><span class="cx"> bool InspectorOverlay::shouldShowOverlay() const
</span><span class="cx"> {
</span><del>- return m_highlightNode || m_highlightQuad || m_indicating || m_showingPaintRects || !m_pausedInDebuggerMessage.isNull();
</del><ins>+ return m_highlightNode || m_highlightNodeList || m_highlightQuad || m_indicating || m_showingPaintRects || !m_pausedInDebuggerMessage.isNull();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void InspectorOverlay::update()
</span><span class="lines">@@ -673,7 +683,7 @@
</span><span class="cx"> }
</span><span class="cx"> #endif
</span><span class="cx">
</span><del>-static RefPtr<Inspector::Protocol::OverlayTypes::ElementData> buildObjectForElementData(Node* node)
</del><ins>+static RefPtr<Inspector::Protocol::OverlayTypes::ElementData> buildObjectForElementData(Node* node, HighlightType type)
</ins><span class="cx"> {
</span><span class="cx"> if (!is<Element>(node) || !node->document().frame())
</span><span class="cx"> return nullptr;
</span><span class="lines">@@ -716,7 +726,7 @@
</span><span class="cx"> .release();
</span><span class="cx"> elementData->setSize(WTF::move(sizeObject));
</span><span class="cx">
</span><del>- if (renderer->isRenderNamedFlowFragmentContainer()) {
</del><ins>+ if (type != HighlightType::NodeList && renderer->isRenderNamedFlowFragmentContainer()) {
</ins><span class="cx"> RenderNamedFlowFragment& region = *downcast<RenderBlockFlow>(*renderer).renderNamedFlowFragment();
</span><span class="cx"> if (region.isValid()) {
</span><span class="cx"> RenderFlowThread* flowThread = region.flowThread();
</span><span class="lines">@@ -757,12 +767,11 @@
</span><span class="cx"> return WTF::move(elementData);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> InspectorOverlay::buildObjectForHighlightedNode() const
</del><ins>+RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> InspectorOverlay::buildHighlightObjectForNode(Node* node, HighlightType type) const
</ins><span class="cx"> {
</span><del>- if (!m_highlightNode)
</del><ins>+ if (!node)
</ins><span class="cx"> return nullptr;
</span><span class="cx">
</span><del>- Node* node = m_highlightNode.get();
</del><span class="cx"> RenderObject* renderer = node->renderer();
</span><span class="cx"> if (!renderer)
</span><span class="cx"> return nullptr;
</span><span class="lines">@@ -780,17 +789,34 @@
</span><span class="cx"> .release();
</span><span class="cx">
</span><span class="cx"> if (m_nodeHighlightConfig.showInfo) {
</span><del>- if (RefPtr<Inspector::Protocol::OverlayTypes::ElementData> elementData = buildObjectForElementData(node))
</del><ins>+ if (RefPtr<Inspector::Protocol::OverlayTypes::ElementData> elementData = buildObjectForElementData(node, type))
</ins><span class="cx"> nodeHighlightObject->setElementData(WTF::move(elementData));
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> return WTF::move(nodeHighlightObject);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+Ref<Inspector::Protocol::Array<Inspector::Protocol::OverlayTypes::NodeHighlightData>> InspectorOverlay::buildObjectForHighlightedNodes() const
+{
+ auto highlights = Inspector::Protocol::Array<Inspector::Protocol::OverlayTypes::NodeHighlightData>::create();
+
+ if (m_highlightNode) {
+ if (RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> nodeHighlightData = buildHighlightObjectForNode(m_highlightNode.get(), HighlightType::Node))
+ highlights->addItem(WTF::move(nodeHighlightData));
+ } else if (m_highlightNodeList) {
+ for (unsigned i = 0; i < m_highlightNodeList->length(); ++i) {
+ if (RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> nodeHighlightData = buildHighlightObjectForNode(m_highlightNodeList->item(i), HighlightType::NodeList))
+ highlights->addItem(WTF::move(nodeHighlightData));
+ }
+ }
+
+ return WTF::move(highlights);
+}
+
</ins><span class="cx"> void InspectorOverlay::drawNodeHighlight()
</span><span class="cx"> {
</span><del>- if (RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> highlightObject = buildObjectForHighlightedNode())
- evaluateInOverlay("drawNodeHighlight", WTF::move(highlightObject));
</del><ins>+ if (m_highlightNode || m_highlightNodeList)
+ evaluateInOverlay("drawNodeHighlight", buildObjectForHighlightedNodes());
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> void InspectorOverlay::drawQuadHighlight()
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorInspectorOverlayh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/InspectorOverlay.h (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/InspectorOverlay.h 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/Source/WebCore/inspector/InspectorOverlay.h 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -32,7 +32,9 @@
</span><span class="cx"> #include "Color.h"
</span><span class="cx"> #include "FloatQuad.h"
</span><span class="cx"> #include "LayoutRect.h"
</span><ins>+#include "NodeList.h"
</ins><span class="cx"> #include "Timer.h"
</span><ins>+#include <inspector/InspectorProtocolObjects.h>
</ins><span class="cx"> #include <wtf/Deque.h>
</span><span class="cx"> #include <wtf/RefPtr.h>
</span><span class="cx"> #include <wtf/Vector.h>
</span><span class="lines">@@ -72,6 +74,7 @@
</span><span class="cx">
</span><span class="cx"> enum class HighlightType {
</span><span class="cx"> Node, // Provides 4 quads: margin, border, padding, content.
</span><ins>+ NodeList, // Provides a list of nodes.
</ins><span class="cx"> Rects, // Provides a list of quads.
</span><span class="cx"> };
</span><span class="cx">
</span><span class="lines">@@ -117,6 +120,7 @@
</span><span class="cx"> void setPausedInDebuggerMessage(const String*);
</span><span class="cx">
</span><span class="cx"> void hideHighlight();
</span><ins>+ void highlightNodeList(PassRefPtr<NodeList>, const HighlightConfig&);
</ins><span class="cx"> void highlightNode(Node*, const HighlightConfig&);
</span><span class="cx"> void highlightQuad(std::unique_ptr<FloatQuad>, const HighlightConfig&);
</span><span class="cx">
</span><span class="lines">@@ -129,7 +133,8 @@
</span><span class="cx">
</span><span class="cx"> void setIndicating(bool indicating);
</span><span class="cx">
</span><del>- RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> buildObjectForHighlightedNode() const;
</del><ins>+ RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> buildHighlightObjectForNode(Node*, HighlightType) const;
+ Ref<Inspector::Protocol::Array<Inspector::Protocol::OverlayTypes::NodeHighlightData>> buildObjectForHighlightedNodes() const;
</ins><span class="cx">
</span><span class="cx"> void freePage();
</span><span class="cx"> private:
</span><span class="lines">@@ -153,6 +158,7 @@
</span><span class="cx"> InspectorClient* m_client;
</span><span class="cx"> String m_pausedInDebuggerMessage;
</span><span class="cx"> RefPtr<Node> m_highlightNode;
</span><ins>+ RefPtr<NodeList> m_highlightNodeList;
</ins><span class="cx"> HighlightConfig m_nodeHighlightConfig;
</span><span class="cx"> std::unique_ptr<FloatQuad> m_highlightQuad;
</span><span class="cx"> std::unique_ptr<Page> m_overlayPage;
</span></span></pre></div>
<a id="trunkSourceWebCoreinspectorInspectorOverlayPagejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/inspector/InspectorOverlayPage.js (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/inspector/InspectorOverlayPage.js 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/Source/WebCore/inspector/InspectorOverlayPage.js 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -487,26 +487,32 @@
</span><span class="cx"> document.body.classList.remove("indicate");
</span><span class="cx"> }
</span><span class="cx">
</span><del>-function drawNodeHighlight(highlight)
</del><ins>+function drawNodeHighlight(allHighlights)
</ins><span class="cx"> {
</span><del>- context.save();
- context.translate(-highlight.scrollOffset.x, -highlight.scrollOffset.y);
</del><ins>+ var elementTitleContainer = document.getElementById("element-title-container");
+ while (elementTitleContainer.hasChildNodes())
+ elementTitleContainer.removeChild(elementTitleContainer.lastChild);
</ins><span class="cx">
</span><del>- for (var i = 0; i < highlight.fragments.length; ++i)
- _drawFragmentHighlight(highlight.fragments[i]);
</del><ins>+ for (var highlight of allHighlights) {
+ context.save();
+ context.translate(-highlight.scrollOffset.x, -highlight.scrollOffset.y);
</ins><span class="cx">
</span><del>- if (highlight.elementData && highlight.elementData.regionFlowData)
- _drawRegionsHighlight(highlight.elementData.regionFlowData.regions);
</del><ins>+ for (var fragment of highlight.fragments)
+ _drawFragmentHighlight(fragment);
</ins><span class="cx">
</span><del>- if (highlight.elementData && highlight.elementData.shapeOutsideData)
- _drawShapeHighlight(highlight.elementData.shapeOutsideData);
</del><ins>+ if (highlight.elementData && highlight.elementData.regionFlowData)
+ _drawRegionsHighlight(highlight.elementData.regionFlowData.regions);
</ins><span class="cx">
</span><del>- context.restore();
</del><ins>+ if (highlight.elementData && highlight.elementData.shapeOutsideData)
+ _drawShapeHighlight(highlight.elementData.shapeOutsideData);
</ins><span class="cx">
</span><del>- var elementTitleContainer = document.getElementById("element-title-container");
- elementTitleContainer.innerHTML = "";
- for (var i = 0; i < highlight.fragments.length; ++i)
- _drawElementTitle(highlight.elementData, highlight.fragments[i], highlight.scrollOffset);
</del><ins>+ context.restore();
+
+ if (allHighlights.length === 1) {
+ for (var fragment of highlight.fragments)
+ _drawElementTitle(highlight.elementData, fragment, highlight.scrollOffset);
+ }
+ }
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> function drawQuadHighlight(highlight)
</span></span></pre></div>
<a id="trunkSourceWebCoretestingInternalscpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/testing/Internals.cpp (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/testing/Internals.cpp 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/Source/WebCore/testing/Internals.cpp 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -926,8 +926,8 @@
</span><span class="cx"> ec = INVALID_ACCESS_ERR;
</span><span class="cx"> return String();
</span><span class="cx"> }
</span><del>- auto object = document->page()->inspectorController().buildObjectForHighlightedNode();
- return object ? object->toJSONString() : String();
</del><ins>+
+ return document->page()->inspectorController().buildObjectForHighlightedNodes()->toJSONString();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> unsigned Internals::markerCountForNode(Node* node, const String& markerType, ExceptionCode& ec)
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -1,3 +1,18 @@
</span><ins>+2015-06-19 Devin Rousso <drousso@apple.com>
+
+ Web Inspector: Highlight currently edited CSS selector
+ https://bugs.webkit.org/show_bug.cgi?id=145658
+
+ Reviewed by Joseph Pecoraro.
+
+ * UserInterface/Views/CSSStyleDeclarationSection.js:
+ (WebInspector.CSSStyleDeclarationSection): Added event listeners on the selector text for mouseover and mouseout.
+ (WebInspector.CSSStyleDeclarationSection.prototype._highlightNodesWithSelector): Selector text mouseover action that highlights all nodes that match the selector string in the corresponding frame.
+ (WebInspector.CSSStyleDeclarationSection.prototype._hideHighlightOnNodesWithSelector): Selector text mouseout action that clears all highlights on matching nodes.
+ * UserInterface/Views/DOMNode.js:
+ (WebInspector.DOMNode): If the payload contains a frameId, then save it.
+ (WebInspector.DOMNode.frameIdentifier):
+
</ins><span class="cx"> 2015-06-19 Joseph Pecoraro <pecoraro@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: Overlapping dashboard views causing lots of layers in source view
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsDOMNodejs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -87,6 +87,9 @@
</span><span class="cx"> this._renumber();
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ if (payload.frameId)
+ this._frameIdentifier = payload.frameId;
+
</ins><span class="cx"> if (this._nodeType === Node.ELEMENT_NODE) {
</span><span class="cx"> // HTML and BODY from internal iframes should not overwrite top-level ones.
</span><span class="cx"> if (this.ownerDocument && !this.ownerDocument.documentElement && this._nodeName === "HTML")
</span><span class="lines">@@ -582,6 +585,11 @@
</span><span class="cx"> callback.apply(null, arguments);
</span><span class="cx"> };
</span><span class="cx"> }
</span><ins>+
+ get frameIdentifier()
+ {
+ return this._frameIdentifier;
+ }
</ins><span class="cx"> };
</span><span class="cx">
</span><span class="cx"> WebInspector.DOMNode.Event = {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsCSSStyleDeclarationSectionjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js (185783 => 185784)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js 2015-06-20 00:14:20 UTC (rev 185783)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js 2015-06-20 00:48:28 UTC (rev 185784)
</span><span class="lines">@@ -48,6 +48,8 @@
</span><span class="cx"> this._selectorElement = document.createElement("span");
</span><span class="cx"> this._selectorElement.className = "selector";
</span><span class="cx"> this._selectorElement.setAttribute("spellcheck", "false");
</span><ins>+ this._selectorElement.addEventListener("mouseover", this._highlightNodesWithSelector.bind(this));
+ this._selectorElement.addEventListener("mouseout", this._hideHighlightOnNodesWithSelector.bind(this));
</ins><span class="cx"> this._headerElement.appendChild(this._selectorElement);
</span><span class="cx">
</span><span class="cx"> this._originElement = document.createElement("span");
</span><span class="lines">@@ -391,6 +393,31 @@
</span><span class="cx"> this._element.classList.toggle("rule-disabled", this._ruleDisabled);
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ _highlightNodesWithSelector: function()
+ {
+ var highlightConfig = {
+ borderColor: {r: 255, g: 229, b: 153, a: 0.66},
+ contentColor: {r: 111, g: 168, b: 220, a: 0.66},
+ marginColor: {r: 246, g: 178, b: 107, a: 0.66},
+ paddingColor: {r: 147, g: 196, b: 125, a: 0.66},
+ showInfo: true
+ };
+
+ if (!this._style.ownerRule) {
+ // COMPATIBILITY (iOS 6): Order of parameters changed in iOS 7.
+ DOMAgent.highlightNode.invoke({nodeId: this._style.node.id, highlightConfig});
+ return;
+ }
+
+ if (DOMAgent.highlightSelector)
+ DOMAgent.highlightSelector(highlightConfig, this._style.ownerRule.selectorText, this._style.node.ownerDocument.frameIdentifier);
+ },
+
+ _hideHighlightOnNodesWithSelector: function()
+ {
+ DOMAgent.hideHighlight();
+ },
+
</ins><span class="cx"> _commitSelector: function(mutations)
</span><span class="cx"> {
</span><span class="cx"> console.assert(this._style.ownerRule);
</span></span></pre>
</div>
</div>
</body>
</html>