Devtools [LayoutEditor]: show selector info and highlight affected nodes

BUG=501896

Review URL: https://codereview.chromium.org/1317913004

git-svn-id: svn://svn.chromium.org/blink/trunk@201681 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/Source/core/inspector/InspectorOverlayHost.cpp

@@ -77,6 +77,26 @@ void InspectorOverlayHost::clearSelection(bool commitChanges)
         m_listener->overlayClearSelection(commitChanges);
 }
 
+void InspectorOverlayHost::nextSelector()
+{
+    if (m_listener)
+        m_listener->overlayNextSelector();
+}
+
+void InspectorOverlayHost::previousSelector()
+{
+    if (m_listener)
+        m_listener->overlayPreviousSelector();
+}
+
+String InspectorOverlayHost::currentSelectorInfo()
+{
+    if (m_listener)
+        return m_listener->overlayCurrentSelectorInfo();
+
+    return String();
+}
+
 DEFINE_TRACE(InspectorOverlayHost)
 {
     visitor->trace(m_listener);

third_party/WebKit/Source/core/inspector/InspectorOverlayHost.h

@@ -52,6 +52,9 @@ public:
     void changeProperty(float delta);
     void endPropertyChange();
     void clearSelection(bool commitChanges);
+    void nextSelector();
+    void previousSelector();
+    String currentSelectorInfo();
 
     class Listener : public WillBeGarbageCollectedMixin {
     public:
@@ -62,6 +65,9 @@ public:
         virtual void overlayPropertyChanged(float cssDelta) = 0;
         virtual void overlayEndedPropertyChange() = 0;
         virtual void overlayClearSelection(bool commitChanges) = 0;
+        virtual void overlayNextSelector() = 0;
+        virtual void overlayPreviousSelector() = 0;
+        virtual String overlayCurrentSelectorInfo() = 0;
     };
     void setListener(Listener* listener) { m_listener = listener; }
 

third_party/WebKit/Source/core/inspector/InspectorOverlayHost.idl

@@ -38,4 +38,7 @@
     void changeProperty(float cssDelta);
     void endPropertyChange();
     void clearSelection(boolean commitChanges);
+    void nextSelector();
+    void previousSelector();
+    DOMString currentSelectorInfo();
 };

third_party/WebKit/Source/core/inspector/InspectorOverlayPage.html

@@ -254,7 +254,7 @@ function drawPausedInDebuggerMessage(message)
     document.body.classList.add("dimmed");
 }
 
-function _drawGrid(rulerAtRight, rulerAtBottom)
+function _drawGrid(context, rulerAtRight, rulerAtBottom)
 {
     if (window._gridPainted)
         return;
@@ -408,7 +408,7 @@ function drawViewSize(drawViewSizeWithGrid)
     context.fillText(text, frameWidth - textWidth - 6, drawGridBoolean ? 33 : 18);
     context.restore();
     if (drawGridBoolean)
-        _drawGrid();
+        _drawGrid(context);
 }
 
 function resetCanvas(canvasElement)
@@ -432,7 +432,8 @@ function reset(resetData)
     window.canvas = document.getElementById("canvas");
     window.context = canvas.getContext("2d");
     resetCanvas(canvas);
-
+    var matchedNodesCanvas = document.getElementById("layout-editor-matched-nodes-canvas");
+    resetCanvas(matchedNodesCanvas);
     window.labelsCanvas = document.getElementById("labels-canvas");
     resetLabelCanvas();
 
@@ -446,19 +447,21 @@ function reset(resetData)
     var editor = document.getElementById("editor");
     editor.style.visibility = "hidden";
     editor.textContent = "";
+    document.getElementById("selector-tooltip").style.visibility = "hidden";
     document.body.classList.remove("dimmed");
     document.removeEventListener("mousedown", consumeEvent);
     document.removeEventListener("mousemove", onLayoutEditorMouseMove);
     document.removeEventListener("mouseup", consumeEvent);
     document.removeEventListener("click", onLayoutEditorClick);
     document.removeEventListener("keydown", onLayoutEditorKeyDown);
+    document.removeEventListener("mousewheel", onLayoutEditorMouseWheel);
 
     delete window.hoverableAreas;
     delete window.anchorsByType;
     window._gridPainted = false;
 }
 
-function _drawElementTitle(elementInfo, bounds)
+function _drawElementTitle(context, elementInfo, bounds)
 {
     document.getElementById("tag-name").textContent = elementInfo.tagName;
     document.getElementById("node-id").textContent = elementInfo.idValue ? "#" + elementInfo.idValue : "";
@@ -588,7 +591,7 @@ function _drawMaterialElementTitle(elementInfo, bounds)
     }
 }
 
-function _drawRulers(bounds, rulerAtRight, rulerAtBottom)
+function _drawRulers(context, bounds, rulerAtRight, rulerAtBottom)
 {
     context.save();
     var width = canvasWidth;
@@ -632,7 +635,7 @@ function _drawRulers(bounds, rulerAtRight, rulerAtBottom)
     context.restore();
 }
 
-function drawPath(commands, fillColor, outlineColor, bounds, name)
+function drawPath(context, commands, fillColor, outlineColor, bounds, name)
 {
     var commandsIndex = 0;
 
@@ -701,8 +704,9 @@ function drawPath(commands, fillColor, outlineColor, bounds, name)
     }
 }
 
-function drawHighlight(highlight)
+function drawHighlight(highlight, context)
 {
+    context = context || window.context;
     context.save();
 
     var bounds = {
@@ -718,11 +722,11 @@ function drawHighlight(highlight)
 
     for (var paths = highlight.paths.slice(); paths.length;) {
         var path = paths.pop();
-        drawPath(path.path, path.fillColor, path.outlineColor, bounds, path.name);
+        drawPath(context, path.path, path.fillColor, path.outlineColor, bounds, path.name);
         if (paths.length) {
             context.save();
             context.globalCompositeOperation = "destination-out";
-            drawPath(paths[paths.length - 1].path, "red", null, bounds);
+            drawPath(context, paths[paths.length - 1].path, "red", null, bounds);
             context.restore();
         }
     }
@@ -731,16 +735,16 @@ function drawHighlight(highlight)
     var rulerAtBottom = highlight.paths.length && highlight.showRulers && bounds.minY < 20 && bounds.maxY + 20 < canvasHeight;
 
     if (highlight.showRulers)
-        _drawGrid(rulerAtRight, rulerAtBottom);
+        _drawGrid(context, rulerAtRight, rulerAtBottom);
 
     if (highlight.paths.length) {
         if (highlight.showExtensionLines)
-            _drawRulers(bounds, rulerAtRight, rulerAtBottom);
+            _drawRulers(context, bounds, rulerAtRight, rulerAtBottom);
 
         if (highlight.elementInfo && highlight.displayAsMaterial)
            _drawMaterialElementTitle(highlight.elementInfo, bounds);
         else if (highlight.elementInfo)
-           _drawElementTitle(highlight.elementInfo, bounds);
+           _drawElementTitle(context, highlight.elementInfo, bounds);
     }
     context.restore();
 }
@@ -820,6 +824,28 @@ function showLayoutEditor(info)
     document.addEventListener("mouseup", consumeEvent);
     document.addEventListener("click", onLayoutEditorClick);
     document.addEventListener("keydown", onLayoutEditorKeyDown);
+    document.addEventListener("mousewheel", onLayoutEditorMouseWheel);
+    showSelectorTooltip();
+}
+
+function showSelectorTooltip()
+{
+    var tooltipElement = document.getElementById("selector-tooltip");
+    tooltipElement.style.visibility = "visible";
+    tooltipElement.style.left = "100px";
+    tooltipElement.style.top = "100px";
+    var selectorInfo = JSON.parse(InspectorOverlayHost.currentSelectorInfo());
+    tooltipElement.textContent = selectorInfo.selector;
+    tooltipElement.style.backgroundColor = "#eee";
+
+    var matchedNodesCanvas = document.getElementById("layout-editor-matched-nodes-canvas");
+    resetCanvas(matchedNodesCanvas);
+
+    if (!selectorInfo.nodes)
+        return;
+
+    for (var nodeHighlight of selectorInfo.nodes)
+        drawHighlight(nodeHighlight, matchedNodesCanvas.getContext("2d"));
 }
 
 function createAnchor(anchorInfo)
@@ -1066,6 +1092,17 @@ function onLayoutEditorKeyDown(event)
     }
 }
 
+function onLayoutEditorMouseWheel(event)
+{
+    event.preventDefault();
+    if (event.wheelDelta > 0)
+        InspectorOverlayHost.previousSelector();
+    else
+        InspectorOverlayHost.nextSelector();
+
+    showSelectorTooltip();
+}
+
 function consumeEvent(event)
 {
     event.preventDefault();
@@ -1113,6 +1150,7 @@ document.addEventListener("keydown", onDocumentKeyDown);
     <div class="button" id="step-over-button" title="Step over next function call (F10)."><div class="glyph"></div></div>
 </div>
 </body>
+<canvas id="layout-editor-matched-nodes-canvas" class="fill"></canvas>
 <canvas id="canvas" class="fill"></canvas>
 <canvas id="labels-canvas" class="fill"></canvas>
 <div id="element-title">
@@ -1126,5 +1164,6 @@ document.addEventListener("keydown", onDocumentKeyDown);
     </div>
     <div id="element-tooltip-arrow"></div>
 <div id="editor" class="fill"></div>
+<div id="selector-tooltip"></div>
 <div id="log"></div>
 </html>

third_party/WebKit/Source/core/inspector/LayoutEditor.cpp

@@ -6,7 +6,9 @@
 #include "core/inspector/LayoutEditor.h"
 
 #include "core/css/CSSComputedStyleDeclaration.h"
+#include "core/css/CSSRuleList.h"
 #include "core/dom/NodeComputedStyle.h"
+#include "core/dom/StaticNodeList.h"
 #include "core/frame/FrameView.h"
 #include "core/inspector/InspectorCSSAgent.h"
 #include "core/inspector/InspectorDOMAgent.h"
@@ -139,6 +141,22 @@ float toValidValue(CSSPropertyID propertyId, float newValue)
 
     return newValue;
 }
+
+bool comparePairs(const std::pair<unsigned, CSSStyleRule*>& lhs, const std::pair<unsigned, CSSStyleRule*>& rhs)
+{
+    return lhs.first < rhs.first;
+}
+
+InspectorHighlightConfig affectedNodesHighlightConfig()
+{
+    // TODO: find a better color
+    InspectorHighlightConfig config;
+    config.content = Color(95, 127, 162, 100);
+    config.padding = Color(95, 127, 162, 100);
+    config.margin = Color(95, 127, 162, 100);
+    return config;
+}
+
 } // namespace
 
 LayoutEditor::LayoutEditor(InspectorCSSAgent* cssAgent, InspectorDOMAgent* domAgent)
@@ -156,6 +174,7 @@ DEFINE_TRACE(LayoutEditor)
     visitor->trace(m_element);
     visitor->trace(m_cssAgent);
     visitor->trace(m_domAgent);
+    visitor->trace(m_matchedRules);
 }
 
 void LayoutEditor::selectNode(Node* node)
@@ -168,7 +187,7 @@ void LayoutEditor::selectNode(Node* node)
     m_element = element;
     m_changingProperty = CSSPropertyInvalid;
     m_propertyInitialValue = 0;
-
+    initializeCSSRules();
 }
 
 PassRefPtr<JSONObject> LayoutEditor::buildJSONInfo() const
@@ -223,7 +242,6 @@ PassRefPtr<JSONObject> LayoutEditor::createValueDescription(const String& proper
     object->setNumber("value", cssValue ? cssValue->getFloatValue() : 0);
     CSSPrimitiveValue::UnitType unitType = cssValue ? cssValue->typeWithCalcResolved() : CSSPrimitiveValue::UnitType::Pixels;
     object->setString("unit", CSSPrimitiveValue::unitTypeToString(unitType));
-    // TODO: Support an editing of other popular units like: em, rem
     object->setBoolean("mutable", isMutableUnitType(unitType));
     return object.release();
 }
@@ -296,8 +314,108 @@ void LayoutEditor::clearSelection(bool commitChanges)
 
     m_element.clear();
     m_isDirty = false;
+    m_matchedRules.clear();
+    m_cachedSelectorsInfo.clear();
+    m_currentRuleIndex = -1;
+}
+
+void LayoutEditor::initializeCSSRules()
+{
+    if (!m_element)
+        return;
+
+    Document* ownerDocument = m_element->ownerDocument();
+    // A non-active document has no styles.
+    if (!ownerDocument->isActive())
+        return;
+
+    // Matched rules.
+    StyleResolver& styleResolver = ownerDocument->ensureStyleResolver();
+    PseudoId elementPseudoId = m_element->pseudoId();
+    m_element->updateDistribution();
+    RefPtrWillBeRawPtr<CSSRuleList> matchedRules = styleResolver.pseudoCSSRulesForElement(m_element.get(), elementPseudoId, StyleResolver::AllCSSRules);
+    if (!matchedRules)
+        return;
+
+    HashSet<CSSStyleRule*> uniqRulesSet;
+    Vector<CSSStyleRule*> uniqRules;
+    for (unsigned i = matchedRules->length(); i > 0; --i) {
+        CSSRule* rule = matchedRules->item(i);
+        if (!rule || rule->type() != CSSRule::STYLE_RULE || !rule->parentStyleSheet())
+            continue;
+
+        CSSStyleRule* styleRule = toCSSStyleRule(rule);
+
+        if (uniqRulesSet.contains(styleRule))
+            continue;
+        uniqRulesSet.add(styleRule);
+        uniqRules.append(styleRule);
+    }
+    Vector<std::pair<unsigned, CSSStyleRule*>> selectors;
+    for (unsigned i = 0; i < uniqRules.size(); ++i) {
+        TrackExceptionState exceptionState;
+        RefPtrWillBeRawPtr<StaticElementList> elements = ownerDocument->querySelectorAll(AtomicString(uniqRules[i]->selectorText()), exceptionState);
+        unsigned length = exceptionState.hadException() ? 0: elements->length();
+        selectors.append(std::make_pair(length, uniqRules[i]));
+    }
+
+    std::sort(selectors.begin(), selectors.end(), &comparePairs);
+    for (size_t i = 0; i < selectors.size(); ++i)
+        m_matchedRules.append(selectors[i].second);
+};
+
+void LayoutEditor::nextSelector()
+{
+    if (static_cast<size_t>(m_currentRuleIndex + 1) == m_matchedRules.size())
+        return;
+
+    m_currentRuleIndex++;
 }
 
+void LayoutEditor::previousSelector()
+{
+    if (m_currentRuleIndex == -1)
+        return;
+
+    m_currentRuleIndex--;
+}
+
+String LayoutEditor::currentSelectorInfo()
+{
+    if (!m_element)
+        return String();
+
+    if (m_cachedSelectorsInfo.contains(m_currentRuleIndex))
+        return m_cachedSelectorsInfo.get(m_currentRuleIndex);
+
+    RefPtr<JSONObject> object = JSONObject::create();
+    String currentSelectorText = m_currentRuleIndex == -1 ? "inline style" : m_matchedRules[m_currentRuleIndex]->selectorText();
+    object->setString("selector", currentSelectorText);
+
+    Document* ownerDocument = m_element->ownerDocument();
+    if (!ownerDocument->isActive() || m_currentRuleIndex == -1)
+        return object->toJSONString();
+
+    TrackExceptionState exceptionState;
+    RefPtrWillBeRawPtr<StaticElementList> elements = ownerDocument->querySelectorAll(AtomicString(m_matchedRules[m_currentRuleIndex]->selectorText()), exceptionState);
 
+    if (!elements || exceptionState.hadException())
+        return object->toJSONString();
+
+    RefPtr<JSONArray> highlights = JSONArray::create();
+    InspectorHighlightConfig config = affectedNodesHighlightConfig();
+    for (unsigned i = 0; i < elements->length(); ++i) {
+        Element* element = elements->item(i);
+        if (element == m_element)
+            continue;
+
+        InspectorHighlight highlight(element, config, false);
+        highlights->pushObject(highlight.asJSONObject());
+    }
+
+    object->setArray("nodes", highlights.release());
+    m_cachedSelectorsInfo.add(m_currentRuleIndex, object->toJSONString());
+    return m_cachedSelectorsInfo.get(m_currentRuleIndex);
+}
 
 } // namespace blink

third_party/WebKit/Source/core/inspector/LayoutEditor.h

@@ -8,6 +8,7 @@
 #include "core/CSSPropertyNames.h"
 #include "core/CoreExport.h"
 #include "core/css/CSSPrimitiveValue.h"
+#include "core/css/CSSStyleRule.h"
 #include "core/dom/Element.h"
 #include "platform/heap/Handle.h"
 #include "wtf/PassOwnPtr.h"
@@ -37,6 +38,9 @@ public:
     void overlayPropertyChanged(float);
     void overlayEndedPropertyChange();
     void clearSelection(bool);
+    void nextSelector();
+    void previousSelector();
+    String currentSelectorInfo();
 
     DECLARE_TRACE();
 
@@ -45,6 +49,7 @@ private:
     RefPtrWillBeRawPtr<CSSPrimitiveValue> getPropertyCSSValue(CSSPropertyID) const;
     PassRefPtr<JSONObject> createValueDescription(const String&) const;
     void appendAnchorFor(JSONArray*, const String&, const String&, const FloatPoint&, const FloatPoint&) const;
+    void initializeCSSRules();
 
     RefPtrWillBeMember<Element> m_element;
     RawPtrWillBeMember<InspectorCSSAgent> m_cssAgent;
@@ -54,6 +59,11 @@ private:
     float m_factor;
     CSSPrimitiveValue::UnitType m_valueUnitType;
     bool m_isDirty;
+
+    WillBeHeapVector<RefPtrWillBeMember<CSSStyleRule>> m_matchedRules;
+    HashMap<int, String> m_cachedSelectorsInfo;
+    // -1 means "inline style".
+    int m_currentRuleIndex;
 };
 
 } // namespace blink

third_party/WebKit/Source/web/InspectorOverlayImpl.cpp

@@ -284,6 +284,11 @@ bool InspectorOverlayImpl::handleInputEvent(const WebInputEvent& inputEvent)
         overlayMainFrame()->eventHandler().keyEvent(keyboardEvent);
     }
 
+    if (inputEvent.type == WebInputEvent::MouseWheel) {
+        PlatformWheelEvent wheelEvent = PlatformWheelEventBuilder(m_webViewImpl->mainFrameImpl()->frameView(), static_cast<const WebMouseWheelEvent&>(inputEvent));
+        handled = overlayMainFrame()->eventHandler().handleWheelEvent(wheelEvent);
+    }
+
     return handled;
 }
 
@@ -372,6 +377,7 @@ void InspectorOverlayImpl::rebuildOverlayPage()
     IntRect visibleRectInDocument = view->scrollableArea()->visibleContentRect();
     IntSize viewportSize = m_webViewImpl->page()->frameHost().visualViewport().size();
     toLocalFrame(overlayPage()->mainFrame())->view()->resize(viewportSize);
+    overlayPage()->frameHost().visualViewport().setSize(viewportSize);
     reset(viewportSize, visibleRectInDocument.location());
 
     drawNodeHighlight();
@@ -579,6 +585,21 @@ void InspectorOverlayImpl::overlayEndedPropertyChange()
     m_layoutEditor->overlayEndedPropertyChange();
 }
 
+void InspectorOverlayImpl::overlayNextSelector()
+{
+    m_layoutEditor->nextSelector();
+}
+
+void InspectorOverlayImpl::overlayPreviousSelector()
+{
+    m_layoutEditor->previousSelector();
+}
+
+String InspectorOverlayImpl::overlayCurrentSelectorInfo()
+{
+    return m_layoutEditor->currentSelectorInfo();
+}
+
 void InspectorOverlayImpl::overlayClearSelection(bool commitChanges)
 {
     if (m_inspectMode != InspectorDOMAgent::ShowLayoutEditor)

third_party/WebKit/Source/web/InspectorOverlayImpl.h

@@ -98,6 +98,9 @@ private:
     void overlayPropertyChanged(float) override;
     void overlayEndedPropertyChange() override;
     void overlayClearSelection(bool) override;
+    void overlayNextSelector() override;
+    void overlayPreviousSelector() override;
+    String overlayCurrentSelectorInfo() override;
 
     // InspectorProfilerAgent::Client implementation.
     void profilingStarted() override;