DevTools: highlight page regions as paths, not quads

We used to pass a typed set of quads plus the config that specified
color for each type of quad. This is not flexible enough to cover
the needs of highlighting of different types of render objects.
This switches to a more flexible interface passing an array of paths
with fill & outline colors specified for each path.

BUG=

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

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

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

@@ -1234,6 +1234,9 @@ PassOwnPtr<HighlightConfig> InspectorDOMAgent::highlightConfigFromInspectorObjec
     highlightConfig->border = parseConfigColor("borderColor", highlightInspectorObject);
     highlightConfig->margin = parseConfigColor("marginColor", highlightInspectorObject);
     highlightConfig->eventTarget = parseConfigColor("eventTargetColor", highlightInspectorObject);
+    highlightConfig->shape = parseConfigColor("shapeColor", highlightInspectorObject);
+    highlightConfig->shapeMargin = parseConfigColor("shapeMarginColor", highlightInspectorObject);
+
     return highlightConfig.release();
 }
 
@@ -1430,50 +1433,16 @@ void InspectorDOMAgent::setFileInputFiles(ErrorString* errorString, int nodeId,
     toHTMLInputElement(node)->setFiles(fileList);
 }
 
-static RefPtr<TypeBuilder::Array<double> > buildArrayForQuad(const FloatQuad& quad)
-{
-    RefPtr<TypeBuilder::Array<double> > array = TypeBuilder::Array<double>::create();
-    array->addItem(quad.p1().x());
-    array->addItem(quad.p1().y());
-    array->addItem(quad.p2().x());
-    array->addItem(quad.p2().y());
-    array->addItem(quad.p3().x());
-    array->addItem(quad.p3().y());
-    array->addItem(quad.p4().x());
-    array->addItem(quad.p4().y());
-    return array.release();
-}
-
 void InspectorDOMAgent::getBoxModel(ErrorString* errorString, int nodeId, RefPtr<TypeBuilder::DOM::BoxModel>& model)
 {
     Node* node = assertNode(errorString, nodeId);
     if (!node)
         return;
 
-    Vector<FloatQuad> quads;
-    bool isInlineOrBox = m_overlay->getBoxModel(node, &quads);
-    if (!isInlineOrBox) {
+    bool result = m_overlay->getBoxModel(node, model);
+    if (!result)
         *errorString = "Could not compute box model.";
-        return;
-    }
 
-    RenderObject* renderer = node->renderer();
-    LocalFrame* frame = node->document().frame();
-    FrameView* view = frame->view();
-
-    IntRect boundingBox = pixelSnappedIntRect(view->contentsToRootView(renderer->absoluteBoundingBoxRect()));
-    RenderBoxModelObject* modelObject = renderer->isBoxModelObject() ? toRenderBoxModelObject(renderer) : 0;
-    RefPtr<TypeBuilder::DOM::ShapeOutsideInfo> shapeOutsideInfo = m_overlay->buildObjectForShapeOutside(node);
-
-    model = TypeBuilder::DOM::BoxModel::create()
-        .setContent(buildArrayForQuad(quads.at(3)))
-        .setPadding(buildArrayForQuad(quads.at(2)))
-        .setBorder(buildArrayForQuad(quads.at(1)))
-        .setMargin(buildArrayForQuad(quads.at(0)))
-        .setWidth(modelObject ? adjustForAbsoluteZoom(modelObject->pixelSnappedOffsetWidth(), modelObject) : boundingBox.width())
-        .setHeight(modelObject ? adjustForAbsoluteZoom(modelObject->pixelSnappedOffsetHeight(), modelObject) : boundingBox.height());
-    if (shapeOutsideInfo)
-        model->setShapeOutside(shapeOutsideInfo);
 }
 
 void InspectorDOMAgent::getNodeForLocation(ErrorString* errorString, int x, int y, int* nodeId)

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

@@ -48,7 +48,6 @@ class EmptyChromeClient;
 class GraphicsContext;
 class InspectorClient;
 class InspectorOverlayHost;
-class JSONObject;
 class JSONValue;
 class Node;
 class Page;
@@ -66,46 +65,10 @@ public:
     Color border;
     Color margin;
     Color eventTarget;
-    bool showInfo;
-    bool showRulers;
-    bool showExtensionLines;
-};
+    Color shape;
+    Color shapeMargin;
 
-enum HighlightType {
-    HighlightTypeNode,
-    HighlightTypeRects,
-};
-
-struct Highlight {
-    Highlight()
-        : type(HighlightTypeNode)
-        , showRulers(false)
-    {
-    }
-
-    void setDataFromConfig(const HighlightConfig& highlightConfig)
-    {
-        contentColor = highlightConfig.content;
-        contentOutlineColor = highlightConfig.contentOutline;
-        paddingColor = highlightConfig.padding;
-        borderColor = highlightConfig.border;
-        marginColor = highlightConfig.margin;
-        eventTargetColor = highlightConfig.eventTarget;
-        showRulers = highlightConfig.showRulers;
-        showExtensionLines = highlightConfig.showExtensionLines;
-    }
-
-    Color contentColor;
-    Color contentOutlineColor;
-    Color paddingColor;
-    Color borderColor;
-    Color marginColor;
-    Color eventTargetColor;
-
-    // When the type is Node, there are 4 or 5 quads (margin, border, padding, content, optional eventTarget).
-    // When the type is Rects, this is just a list of quads.
-    HighlightType type;
-    Vector<FloatQuad> quads;
+    bool showInfo;
     bool showRulers;
     bool showExtensionLines;
 };
@@ -138,8 +101,7 @@ public:
     void showAndHideViewSize(bool showGrid);
 
     Node* highlightedNode() const;
-    bool getBoxModel(Node*, Vector<FloatQuad>*);
-    PassRefPtr<TypeBuilder::DOM::ShapeOutsideInfo> buildObjectForShapeOutside(Node*);
+    bool getBoxModel(Node*, RefPtr<TypeBuilder::DOM::BoxModel>&);
 
     void freePage();
 

third_party/WebKit/Source/devtools/front_end/common/Color.js

@@ -627,7 +627,9 @@ WebInspector.Color.PageHighlight = {
     BorderLight: WebInspector.Color.fromRGBA([255, 229, 153, .5]),
     Margin: WebInspector.Color.fromRGBA([246, 178, 107, .66]),
     MarginLight: WebInspector.Color.fromRGBA([246, 178, 107, .5]),
-    EventTarget: WebInspector.Color.fromRGBA([255, 196, 196, .66])
+    EventTarget: WebInspector.Color.fromRGBA([255, 196, 196, .66]),
+    Shape: WebInspector.Color.fromRGBA([96, 82, 177, 0.8]),
+    ShapeMargin: WebInspector.Color.fromRGBA([96, 82, 127, .6])
 }
 
 WebInspector.Color.Format = {

third_party/WebKit/Source/devtools/front_end/sdk/DOMModel.js

@@ -1559,9 +1559,11 @@ WebInspector.DOMModel.prototype = {
         if (mode === "all" || mode === "margin")
             highlightConfig.marginColor = WebInspector.Color.PageHighlight.Margin.toProtocolRGBA();
 
-        if (mode === "all")
+        if (mode === "all") {
             highlightConfig.eventTargetColor = WebInspector.Color.PageHighlight.EventTarget.toProtocolRGBA();
-
+            highlightConfig.shapeColor = WebInspector.Color.PageHighlight.Shape.toProtocolRGBA();
+            highlightConfig.shapeMarginColor = WebInspector.Color.PageHighlight.ShapeMargin.toProtocolRGBA();
+        }
         return highlightConfig;
     },
 

third_party/WebKit/Source/devtools/protocol.json

@@ -2012,7 +2012,9 @@
                     { "name": "paddingColor", "$ref": "RGBA", "optional": true, "description": "The padding highlight fill color (default: transparent)." },
                     { "name": "borderColor", "$ref": "RGBA", "optional": true, "description": "The border highlight fill color (default: transparent)." },
                     { "name": "marginColor", "$ref": "RGBA", "optional": true, "description": "The margin highlight fill color (default: transparent)." },
-                    { "name": "eventTargetColor", "$ref": "RGBA", "optional": true, "hidden": true, "description": "The event target element highlight fill color (default: transparent)." }
+                    { "name": "eventTargetColor", "$ref": "RGBA", "optional": true, "hidden": true, "description": "The event target element highlight fill color (default: transparent)." },
+                    { "name": "shapeColor", "$ref": "RGBA", "optional": true, "hidden": true, "description": "The shape outside fill color (default: transparent)." },
+                    { "name": "shapeMarginColor", "$ref": "RGBA", "optional": true, "hidden": true, "description": "The shape margin fill color (default: transparent)." }
                 ],
                 "description": "Configuration data for the highlighting of page elements."
             }