⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 185784 in webkit


Ignore:
Timestamp:
Jun 19, 2015, 5:48:28 PM (11 years ago)
Author:
commit-queue@webkit.org
Message:

Web Inspector: Highlight currently edited CSS selector
​https://bugs.webkit.org/show_bug.cgi?id=145658

Patch by Devin Rousso <Devin Rousso> 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.
Location:
trunk
Files:
3 added
15 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r185779 r185784  
     12015-06-19  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Highlight currently edited CSS selector
     4        https://bugs.webkit.org/show_bug.cgi?id=145658
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * inspector/dom/highlightSelector-expected.txt: Added.
     9        * inspector/dom/highlightSelector-iframe.html: Added.
     10        * inspector/dom/highlightSelector.html: Added.
     11
    1122015-06-19  Dean Jackson  <dino@apple.com>
    213

  • trunk/Source/JavaScriptCore/ChangeLog

    r185773 r185784  
     12015-06-19  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Highlight currently edited CSS selector
     4        https://bugs.webkit.org/show_bug.cgi?id=145658
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * inspector/protocol/DOM.json: Added highlightSelector to show highlight over multiple nodes.
     9
    1102015-06-19  Mark Lam  <mark.lam@apple.com>
    211

  • trunk/Source/JavaScriptCore/inspector/protocol/DOM.json

    r174906 r185784  
    332332        },
    333333        {
     334            "name": "highlightSelector",
     335            "parameters": [
     336                { "name": "highlightConfig", "$ref": "HighlightConfig", "description": "A descriptor for the highlight appearance." },
     337                { "name": "selectorString", "type": "string", "description": "A CSS selector for finding matching nodes to highlight." },
     338                { "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." }
     339            ],
     340            "description": "Highlights all DOM nodes that match a given selector. A string containing a CSS selector must be specified."
     341        },
     342        {
    334343            "name": "highlightNode",
    335344            "parameters": [

  • trunk/Source/WebCore/ChangeLog

    r185781 r185784  
     12015-06-19  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Highlight currently edited CSS selector
     4        https://bugs.webkit.org/show_bug.cgi?id=145658
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        Test: inspector/dom/highlight-multiple-shapes.html
     9
     10        * inspector/InspectorController.cpp:
     11        (WebCore::InspectorController::buildObjectForHighlightedNode):
     12        * inspector/InspectorController.h:
     13        * inspector/InspectorDOMAgent.cpp:
     14        (WebCore::InspectorDOMAgent::highlightSelector): Gets a list of all nodes matching a given selector string and highlights each of them.
     15        * inspector/InspectorDOMAgent.h:
     16        * inspector/InspectorOverlay.cpp:
     17        (WebCore::InspectorOverlay::hideHighlight):
     18        (WebCore::InspectorOverlay::highlightNodeList): Loops through a given NodeList to create highlightObjects for each of them.
     19        (WebCore::InspectorOverlay::shouldShowOverlay):
     20        (WebCore::buildObjectForElementData): Don't show flow fragments when highlighting multiple nodes.
     21        (WebCore::InspectorOverlay::buildHighlightObjectForNode):
     22        (WebCore::InspectorOverlay::buildObjectForHighlightedNode): Now returns an array containing the highlightObject for each highligthed node.
     23        (WebCore::InspectorOverlay::drawNodeHighlight): Now sends an array to the InspectorOverlayPage.js to provide support for highlighting multiple nodes.
     24        * inspector/InspectorOverlay.h:
     25        * inspector/InspectorOverlayPage.js: Now expects an array as its parameter and loops through it to highlight each node given.
     26        If the parameter array contains more than one element, do not draw the textbox containing info on that node.
     27        (drawNodeHighlight):
     28
    1292015-06-19  Joseph Pecoraro  <pecoraro@apple.com>
    230

  • trunk/Source/WebCore/inspector/InspectorController.cpp

    r182193 r185784  
    325325}
    326326
    327 RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> InspectorController::buildObjectForHighlightedNode() const
    328 {
    329     return m_overlay->buildObjectForHighlightedNode();
     327Ref<Inspector::Protocol::Array<Inspector::Protocol::OverlayTypes::NodeHighlightData>> InspectorController::buildObjectForHighlightedNodes() const
     328{
     329    return m_overlay->buildObjectForHighlightedNodes();
    330330}
    331331

  • trunk/Source/WebCore/inspector/InspectorController.h

    r180116 r185784  
    115115    void setIndicating(bool);
    116116
    117     WEBCORE_EXPORT RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> buildObjectForHighlightedNode() const;
     117    WEBCORE_EXPORT Ref<Inspector::Protocol::Array<Inspector::Protocol::OverlayTypes::NodeHighlightData>> buildObjectForHighlightedNodes() const;
    118118
    119119    bool isUnderTest() const { return m_isUnderTest; }

  • trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp

    r185722 r185784  
    10761076}
    10771077
     1078void InspectorDOMAgent::highlightSelector(ErrorString& errorString, const InspectorObject& highlightInspectorObject, const String& selectorString, const String* frameId)
     1079{
     1080    RefPtr<Document> document;
     1081
     1082    if (frameId) {
     1083        Frame* frame = m_pageAgent->frameForId(*frameId);
     1084        if (!frame) {
     1085            errorString = ASCIILiteral("No frame for given id found");
     1086            return;
     1087        }
     1088
     1089        document = frame->document();
     1090    } else
     1091        document = m_document;
     1092
     1093    if (!document) {
     1094        errorString = ASCIILiteral("Document could not be found");
     1095        return;
     1096    }
     1097
     1098    ExceptionCode ec = 0;
     1099    RefPtr<NodeList> nodes = document->querySelectorAll(selectorString, ec);
     1100    // FIXME: <https://webkit.org/b/146161> Web Inspector: DOM.highlightSelector should work for "a:visited"
     1101    if (ec) {
     1102        errorString = ASCIILiteral("DOM Error while querying");
     1103        return;
     1104    }
     1105
     1106    std::unique_ptr<HighlightConfig> highlightConfig = highlightConfigFromInspectorObject(errorString, &highlightInspectorObject);
     1107    if (!highlightConfig)
     1108        return;
     1109
     1110    m_overlay->highlightNodeList(nodes, *highlightConfig);
     1111}
     1112
    10781113void InspectorDOMAgent::highlightNode(ErrorString& errorString, const InspectorObject& highlightInspectorObject, const int* nodeId, const String* objectId)
    10791114{
    … …  
    12951330    } else if (is<Document>(*node)) {
    12961331        Document& document = downcast<Document>(*node);
     1332        value->setFrameId(m_pageAgent->frameId(document.frame()));
    12971333        value->setDocumentURL(documentURLString(&document));
    12981334        value->setBaseURL(documentBaseURLString(&document));

  • trunk/Source/WebCore/inspector/InspectorDOMAgent.h

    r185722 r185784  
    144144    virtual void highlightRect(ErrorString&, int x, int y, int width, int height, const Inspector::InspectorObject* color, const Inspector::InspectorObject* outlineColor, const bool* usePageCoordinates) override;
    145145    virtual void highlightQuad(ErrorString&, const Inspector::InspectorArray& quad, const Inspector::InspectorObject* color, const Inspector::InspectorObject* outlineColor, const bool* usePageCoordinates) override;
     146    virtual void highlightSelector(ErrorString&, const Inspector::InspectorObject& highlightConfig, const String& selectorString, const String* frameId) override;
    146147    virtual void highlightNode(ErrorString&, const Inspector::InspectorObject& highlightConfig, const int* nodeId, const String* objectId) override;
    147148    virtual void highlightFrame(ErrorString&, const String& frameId, const Inspector::InspectorObject* color, const Inspector::InspectorObject* outlineColor) override;

  • trunk/Source/WebCore/inspector/InspectorOverlay.cpp

    r184895 r185784  
    245245{
    246246    m_highlightNode.clear();
     247    m_highlightNodeList.clear();
    247248    m_highlightQuad.reset();
    248249    update();
    249250}
    250251
     252void InspectorOverlay::highlightNodeList(PassRefPtr<NodeList> nodes, const HighlightConfig& highlightConfig)
     253{
     254    m_nodeHighlightConfig = highlightConfig;
     255    m_highlightNodeList = nodes;
     256    m_highlightNode.clear();
     257    update();
     258}
     259
    251260void InspectorOverlay::highlightNode(Node* node, const HighlightConfig& highlightConfig)
    252261{
    253262    m_nodeHighlightConfig = highlightConfig;
    254263    m_highlightNode = node;
     264    m_highlightNodeList.clear();
    255265    update();
    256266}
    … …  
    290300bool InspectorOverlay::shouldShowOverlay() const
    291301{
    292     return m_highlightNode || m_highlightQuad || m_indicating || m_showingPaintRects || !m_pausedInDebuggerMessage.isNull();
     302    return m_highlightNode || m_highlightNodeList || m_highlightQuad || m_indicating || m_showingPaintRects || !m_pausedInDebuggerMessage.isNull();
    293303}
    294304
    … …  
    674684#endif
    675685
    676 static RefPtr<Inspector::Protocol::OverlayTypes::ElementData> buildObjectForElementData(Node* node)
     686static RefPtr<Inspector::Protocol::OverlayTypes::ElementData> buildObjectForElementData(Node* node, HighlightType type)
    677687{
    678688    if (!is<Element>(node) || !node->document().frame())
    … …  
    717727    elementData->setSize(WTF::move(sizeObject));
    718728
    719     if (renderer->isRenderNamedFlowFragmentContainer()) {
     729    if (type != HighlightType::NodeList && renderer->isRenderNamedFlowFragmentContainer()) {
    720730        RenderNamedFlowFragment& region = *downcast<RenderBlockFlow>(*renderer).renderNamedFlowFragment();
    721731        if (region.isValid()) {
    … …  
    758768}
    759769
    760 RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> InspectorOverlay::buildObjectForHighlightedNode() const
    761 {
    762     if (!m_highlightNode)
     770RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> InspectorOverlay::buildHighlightObjectForNode(Node* node, HighlightType type) const
     771{
     772    if (!node)
    763773        return nullptr;
    764774
    765     Node* node = m_highlightNode.get();
    766775    RenderObject* renderer = node->renderer();
    767776    if (!renderer)
    … …  
    781790
    782791    if (m_nodeHighlightConfig.showInfo) {
    783         if (RefPtr<Inspector::Protocol::OverlayTypes::ElementData> elementData = buildObjectForElementData(node))
     792        if (RefPtr<Inspector::Protocol::OverlayTypes::ElementData> elementData = buildObjectForElementData(node, type))
    784793            nodeHighlightObject->setElementData(WTF::move(elementData));
    785794    }
    … …  
    788797}
    789798
     799Ref<Inspector::Protocol::Array<Inspector::Protocol::OverlayTypes::NodeHighlightData>> InspectorOverlay::buildObjectForHighlightedNodes() const
     800{
     801    auto highlights = Inspector::Protocol::Array<Inspector::Protocol::OverlayTypes::NodeHighlightData>::create();
     802
     803    if (m_highlightNode) {
     804        if (RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> nodeHighlightData = buildHighlightObjectForNode(m_highlightNode.get(), HighlightType::Node))
     805            highlights->addItem(WTF::move(nodeHighlightData));
     806    } else if (m_highlightNodeList) {
     807        for (unsigned i = 0; i < m_highlightNodeList->length(); ++i) {
     808            if (RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> nodeHighlightData = buildHighlightObjectForNode(m_highlightNodeList->item(i), HighlightType::NodeList))
     809                highlights->addItem(WTF::move(nodeHighlightData));
     810        }
     811    }
     812
     813    return WTF::move(highlights);
     814}
     815
    790816void InspectorOverlay::drawNodeHighlight()
    791817{
    792     if (RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> highlightObject = buildObjectForHighlightedNode())
    793         evaluateInOverlay("drawNodeHighlight", WTF::move(highlightObject));
     818    if (m_highlightNode || m_highlightNodeList)
     819        evaluateInOverlay("drawNodeHighlight", buildObjectForHighlightedNodes());
    794820}
    795821

  • trunk/Source/WebCore/inspector/InspectorOverlay.h

    r178631 r185784  
    3333#include "FloatQuad.h"
    3434#include "LayoutRect.h"
     35#include "NodeList.h"
    3536#include "Timer.h"
     37#include <inspector/InspectorProtocolObjects.h>
    3638#include <wtf/Deque.h>
    3739#include <wtf/RefPtr.h>
    … …  
    7375enum class HighlightType {
    7476    Node, // Provides 4 quads: margin, border, padding, content.
     77    NodeList, // Provides a list of nodes.
    7578    Rects, // Provides a list of quads.
    7679};
    … …  
    118121
    119122    void hideHighlight();
     123    void highlightNodeList(PassRefPtr<NodeList>, const HighlightConfig&);
    120124    void highlightNode(Node*, const HighlightConfig&);
    121125    void highlightQuad(std::unique_ptr<FloatQuad>, const HighlightConfig&);
    … …  
    130134    void setIndicating(bool indicating);
    131135
    132     RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> buildObjectForHighlightedNode() const;
     136    RefPtr<Inspector::Protocol::OverlayTypes::NodeHighlightData> buildHighlightObjectForNode(Node*, HighlightType) const;
     137    Ref<Inspector::Protocol::Array<Inspector::Protocol::OverlayTypes::NodeHighlightData>> buildObjectForHighlightedNodes() const;
    133138
    134139    void freePage();
    … …  
    154159    String m_pausedInDebuggerMessage;
    155160    RefPtr<Node> m_highlightNode;
     161    RefPtr<NodeList> m_highlightNodeList;
    156162    HighlightConfig m_nodeHighlightConfig;
    157163    std::unique_ptr<FloatQuad> m_highlightQuad;

  • trunk/Source/WebCore/inspector/InspectorOverlayPage.js

    r178631 r185784  
    488488}
    489489
    490 function drawNodeHighlight(highlight)
    491 {
    492     context.save();
    493     context.translate(-highlight.scrollOffset.x, -highlight.scrollOffset.y);
    494 
    495     for (var i = 0; i < highlight.fragments.length; ++i)
    496         _drawFragmentHighlight(highlight.fragments[i]);
    497 
    498     if (highlight.elementData && highlight.elementData.regionFlowData)
    499         _drawRegionsHighlight(highlight.elementData.regionFlowData.regions);
    500 
    501     if (highlight.elementData && highlight.elementData.shapeOutsideData)
    502         _drawShapeHighlight(highlight.elementData.shapeOutsideData);
    503 
    504     context.restore();
    505 
     490function drawNodeHighlight(allHighlights)
     491{
    506492    var elementTitleContainer = document.getElementById("element-title-container");
    507     elementTitleContainer.innerHTML = "";
    508     for (var i = 0; i < highlight.fragments.length; ++i)
    509         _drawElementTitle(highlight.elementData, highlight.fragments[i], highlight.scrollOffset);
     493    while (elementTitleContainer.hasChildNodes())
     494        elementTitleContainer.removeChild(elementTitleContainer.lastChild);
     495
     496    for (var highlight of allHighlights) {
     497        context.save();
     498        context.translate(-highlight.scrollOffset.x, -highlight.scrollOffset.y);
     499
     500        for (var fragment of highlight.fragments)
     501            _drawFragmentHighlight(fragment);
     502
     503        if (highlight.elementData && highlight.elementData.regionFlowData)
     504            _drawRegionsHighlight(highlight.elementData.regionFlowData.regions);
     505
     506        if (highlight.elementData && highlight.elementData.shapeOutsideData)
     507            _drawShapeHighlight(highlight.elementData.shapeOutsideData);
     508
     509        context.restore();
     510
     511        if (allHighlights.length === 1) {
     512            for (var fragment of highlight.fragments)
     513                _drawElementTitle(highlight.elementData, fragment, highlight.scrollOffset);
     514        }
     515    }
    510516}
    511517

  • trunk/Source/WebCore/testing/Internals.cpp

    r185310 r185784  
    927927        return String();
    928928    }
    929     auto object = document->page()->inspectorController().buildObjectForHighlightedNode();
    930     return object ? object->toJSONString() : String();
     929
     930    return document->page()->inspectorController().buildObjectForHighlightedNodes()->toJSONString();
    931931}
    932932

  • trunk/Source/WebInspectorUI/ChangeLog

    r185759 r185784  
     12015-06-19  Devin Rousso  <drousso@apple.com>
     2
     3        Web Inspector: Highlight currently edited CSS selector
     4        https://bugs.webkit.org/show_bug.cgi?id=145658
     5
     6        Reviewed by Joseph Pecoraro.
     7
     8        * UserInterface/Views/CSSStyleDeclarationSection.js:
     9        (WebInspector.CSSStyleDeclarationSection): Added event listeners on the selector text for mouseover and mouseout.
     10        (WebInspector.CSSStyleDeclarationSection.prototype._highlightNodesWithSelector): Selector text mouseover action that highlights all nodes that match the selector string in the corresponding frame.
     11        (WebInspector.CSSStyleDeclarationSection.prototype._hideHighlightOnNodesWithSelector): Selector text mouseout action that clears all highlights on matching nodes.
     12        * UserInterface/Views/DOMNode.js:
     13        (WebInspector.DOMNode): If the payload contains a frameId, then save it.
     14        (WebInspector.DOMNode.frameIdentifier):
     15
    1162015-06-19  Joseph Pecoraro  <pecoraro@apple.com>
    217

  • trunk/Source/WebInspectorUI/UserInterface/Models/DOMNode.js

    r182113 r185784  
    8787            this._renumber();
    8888        }
     89
     90        if (payload.frameId)
     91            this._frameIdentifier = payload.frameId;
    8992
    9093        if (this._nodeType === Node.ELEMENT_NODE) {
    … …  
    583586        };
    584587    }
     588
     589    get frameIdentifier()
     590    {
     591        return this._frameIdentifier;
     592    }
    585593};
    586594

  • trunk/Source/WebInspectorUI/UserInterface/Views/CSSStyleDeclarationSection.js

    r185757 r185784  
    4949    this._selectorElement.className = "selector";
    5050    this._selectorElement.setAttribute("spellcheck", "false");
     51    this._selectorElement.addEventListener("mouseover", this._highlightNodesWithSelector.bind(this));
     52    this._selectorElement.addEventListener("mouseout", this._hideHighlightOnNodesWithSelector.bind(this));
    5153    this._headerElement.appendChild(this._selectorElement);
    5254
    … …  
    392394    },
    393395
     396    _highlightNodesWithSelector: function()
     397    {
     398        var highlightConfig = {
     399            borderColor: {r: 255, g: 229, b: 153, a: 0.66},
     400            contentColor: {r: 111, g: 168, b: 220, a: 0.66},
     401            marginColor: {r: 246, g: 178, b: 107, a: 0.66},
     402            paddingColor: {r: 147, g: 196, b: 125, a: 0.66},
     403            showInfo: true
     404        };
     405
     406        if (!this._style.ownerRule) {
     407            // COMPATIBILITY (iOS 6): Order of parameters changed in iOS 7.
     408            DOMAgent.highlightNode.invoke({nodeId: this._style.node.id, highlightConfig});
     409            return;
     410        }
     411
     412        if (DOMAgent.highlightSelector)
     413            DOMAgent.highlightSelector(highlightConfig, this._style.ownerRule.selectorText, this._style.node.ownerDocument.frameIdentifier);
     414    },
     415
     416    _hideHighlightOnNodesWithSelector: function()
     417    {
     418        DOMAgent.hideHighlight();
     419    },
     420
    394421    _commitSelector: function(mutations)
    395422    {
Note: See TracChangeset for help on using the changeset viewer.