Web Inspector: Highlight currently edited CSS selector
authorcommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 20 Jun 2015 00:48:28 +0000 (00:48 +0000)
committercommit-queue@webkit.org <commit-queue@webkit.org@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Sat, 20 Jun 2015 00:48:28 +0000 (00:48 +0000)
commiteb30168bf0c0cd8b5437723dc4a4d137e5fb0ebb
treeabc72bc205c03169e2f96b908cf381543df84d81
parentc84538c1035c2e37568b35d7276e6d51ab16c6cc
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@185784 268f45cc-cd09-0410-ab3c-d52691b4dbfc
18 files changed:
LayoutTests/ChangeLog
LayoutTests/inspector/dom/highlightSelector-expected.txt [new file with mode: 0644]
LayoutTests/inspector/dom/highlightSelector-iframe.html [new file with mode: 0644]
LayoutTests/inspector/dom/highlightSelector.html [new file with mode: 0644]
Source/JavaScriptCore/ChangeLog
Source/JavaScriptCore/inspector/protocol/DOM.json
Source/WebCore/ChangeLog
Source/WebCore/inspector/InspectorController.cpp
Source/WebCore/inspector/InspectorController.h
Source/WebCore/inspector/InspectorDOMAgent.cpp
Source/WebCore/inspector/InspectorDOMAgent.h
Source/WebCore/inspector/InspectorOverlay.cpp
Source/WebCore/inspector/InspectorOverlay.h
Source/WebCore/inspector/InspectorOverlayPage.js
Source/WebCore/testing/Internals.cpp
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/UserInterface/Models/DOMNode.js
Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js