Changeset 127240 in webkit

Timestamp:

Aug 31, 2012 2:35:57 AM (12 years ago)

Author:

pfeldman@chromium.org

Message:

Web Inspector: render box model elements and grid on inspector overlay
​https://bugs.webkit.org/show_bug.cgi?id=95456

Reviewed by Vsevolod Vlasov.

This change migrates native rendering for box model to the InspectorOverlay.

• inspector/InspectorInstrumentation.cpp:

(WebCore):
(WebCore::InspectorInstrumentation::didScrollImpl):

• inspector/InspectorInstrumentation.h:

(InspectorInstrumentation):
(WebCore::InspectorInstrumentation::didScroll):
(WebCore):

• inspector/InspectorOverlay.cpp:

(WebCore::InspectorOverlay::drawNodeHighlight):
(WebCore::InspectorOverlay::drawRectHighlight):
(WebCore::InspectorOverlay::overlayPage):
(WebCore::InspectorOverlay::evaluateInOverlay):

• inspector/InspectorOverlay.h:

(WebCore::Highlight::setColors):
(Highlight):
(InspectorOverlay):

• inspector/InspectorOverlayPage.html:
• inspector/InspectorPageAgent.cpp:

(WebCore::InspectorPageAgent::didLayout):
(WebCore):
(WebCore::InspectorPageAgent::didScroll):

• inspector/InspectorPageAgent.h:
• page/Chrome.cpp:

(WebCore::Chrome::scroll):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/InspectorInstrumentation.cpp (modified) (1 diff)
• inspector/InspectorInstrumentation.h (modified) (3 diffs)
• inspector/InspectorOverlay.cpp (modified) (19 diffs)
• inspector/InspectorOverlay.h (modified) (5 diffs)
• inspector/InspectorOverlayPage.html (modified) (4 diffs)
• inspector/InspectorPageAgent.cpp (modified) (1 diff)
• inspector/InspectorPageAgent.h (modified) (1 diff)
• page/Chrome.cpp (modified) (1 diff)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2012-08-30  Pavel Feldman  <pfeldman@chromium.org>
+
+        Web Inspector: render box model elements and grid on inspector overlay
+        https://bugs.webkit.org/show_bug.cgi?id=95456
+
+        Reviewed by Vsevolod Vlasov.
+
+        This change migrates native rendering for box model to the InspectorOverlay.
+
+        * inspector/InspectorInstrumentation.cpp:
+        (WebCore):
+        (WebCore::InspectorInstrumentation::didScrollImpl):
+        * inspector/InspectorInstrumentation.h:
+        (InspectorInstrumentation):
+        (WebCore::InspectorInstrumentation::didScroll):
+        (WebCore):
+        * inspector/InspectorOverlay.cpp:
+        (WebCore::InspectorOverlay::drawNodeHighlight):
+        (WebCore::InspectorOverlay::drawRectHighlight):
+        (WebCore::InspectorOverlay::overlayPage):
+        (WebCore::InspectorOverlay::evaluateInOverlay):
+        * inspector/InspectorOverlay.h:
+        (WebCore::Highlight::setColors):
+        (Highlight):
+        (InspectorOverlay):
+        * inspector/InspectorOverlayPage.html:
+        * inspector/InspectorPageAgent.cpp:
+        (WebCore::InspectorPageAgent::didLayout):
+        (WebCore):
+        (WebCore::InspectorPageAgent::didScroll):
+        * inspector/InspectorPageAgent.h:
+        * page/Chrome.cpp:
+        (WebCore::Chrome::scroll):
+
 2012-08-31  Andrey Adaikin  <aandrey@chromium.org>
 

trunk/Source/WebCore/inspector/InspectorInstrumentation.cpp

@@ -250 +250 @@
 }
 
+void InspectorInstrumentation::didScrollImpl(InstrumentingAgents* instrumentingAgents)
+{
+    if (InspectorPageAgent* pageAgent = instrumentingAgents->inspectorPageAgent())
+        pageAgent->didScroll();
+}
+
 bool InspectorInstrumentation::handleMousePressImpl(InstrumentingAgents* instrumentingAgents)
 {

trunk/Source/WebCore/inspector/InspectorInstrumentation.h

@@ -146 +146 @@
     static InspectorInstrumentationCookie willLayout(Frame*);
     static void didLayout(const InspectorInstrumentationCookie&);
+    static void didScroll(Page*);
     static InspectorInstrumentationCookie willLoadXHR(ScriptExecutionContext*, XMLHttpRequest*);
     static void didLoadXHR(const InspectorInstrumentationCookie&);
@@ -322 +323 @@
     static InspectorInstrumentationCookie willLayoutImpl(InstrumentingAgents*, Frame*);
     static void didLayoutImpl(const InspectorInstrumentationCookie&);
+    static void didScrollImpl(InstrumentingAgents*);
     static InspectorInstrumentationCookie willLoadXHRImpl(InstrumentingAgents*, XMLHttpRequest*, ScriptExecutionContext*);
     static void didLoadXHRImpl(const InspectorInstrumentationCookie&);
@@ -841 +843 @@
 }
 
+inline void InspectorInstrumentation::didScroll(Page* page)
+{
+#if ENABLE(INSPECTOR)
+    FAST_RETURN_IF_NO_FRONTENDS(void());
+    if (InstrumentingAgents* instrumentingAgents = instrumentingAgentsForPage(page))
+        didScrollImpl(instrumentingAgents);
+#endif
+}
+
 inline InspectorInstrumentationCookie InspectorInstrumentation::willLoadXHR(ScriptExecutionContext* context, XMLHttpRequest* request)
 {

trunk/Source/WebCore/inspector/InspectorOverlay.cpp

@@ -36 +36 @@
 #include "Element.h"
 #include "EmptyClients.h"
-#include "Font.h"
-#include "FontCache.h"
-#include "FontFamily.h"
 #include "Frame.h"
 #include "FrameView.h"
 #include "GraphicsContext.h"
-#include "GraphicsTypes.h"
 #include "InspectorClient.h"
 #include "InspectorOverlayPage.h"
@@ -48 +44 @@
 #include "Node.h"
 #include "Page.h"
-#include "Range.h"
 #include "RenderBoxModelObject.h"
 #include "RenderInline.h"
@@ -56 +51 @@
 #include "Settings.h"
 #include "StyledElement.h"
-#include "TextRun.h"
-#include <wtf/text/StringBuilder.h>
 
 namespace WebCore {
 
 namespace {
-
-#if OS(WINDOWS)
-static const unsigned fontHeightPx = 12;
-#elif OS(MAC_OS_X) || OS(UNIX)
-static const unsigned fontHeightPx = 11;
-#endif
-
-const static int rectInflatePx = 4;
-const static int borderWidthPx = 1;
-const static int tooltipPadding = 4;
-
-const static int arrowTipOffset = 20;
-const static float arrowHeight = 7;
-const static float arrowHalfWidth = 7;
 
 Path quadToPath(const FloatQuad& quad)
@@ -112 +91 @@
 }
 
-void drawOutlinedQuadWithClip(GraphicsContext* context, const FloatQuad& quad, const FloatQuad& clipQuad, const Color& fillColor)
-{
-    context->save();
-    Path clipQuadPath = quadToPath(clipQuad);
-    context->clipOut(clipQuadPath);
-    drawOutlinedQuad(context, quad, fillColor, Color::transparent);
-    context->restore();
-}
-
-void drawHighlightForBox(GraphicsContext* context, const FloatQuad& contentQuad, const FloatQuad& paddingQuad, const FloatQuad& borderQuad, const FloatQuad& marginQuad, const HighlightConfig& highlightConfig)
-{
-    bool hasMargin = highlightConfig.margin != Color::transparent;
-    bool hasBorder = highlightConfig.border != Color::transparent;
-    bool hasPadding = highlightConfig.padding != Color::transparent;
-    bool hasContent = highlightConfig.content != Color::transparent || highlightConfig.contentOutline != Color::transparent;
-
-    FloatQuad clipQuad;
-    Color clipColor;
-    if (hasMargin && (!hasBorder || marginQuad != borderQuad)) {
-        drawOutlinedQuadWithClip(context, marginQuad, borderQuad, highlightConfig.margin);
-        clipQuad = borderQuad;
-    }
-    if (hasBorder && (!hasPadding || borderQuad != paddingQuad)) {
-        drawOutlinedQuadWithClip(context, borderQuad, paddingQuad, highlightConfig.border);
-        clipQuad = paddingQuad;
-    }
-    if (hasPadding && (!hasContent || paddingQuad != contentQuad)) {
-        drawOutlinedQuadWithClip(context, paddingQuad, contentQuad, highlightConfig.padding);
-        clipQuad = contentQuad;
-    }
-    if (hasContent)
-        drawOutlinedQuad(context, contentQuad, highlightConfig.content, highlightConfig.contentOutline);
-}
-
-void drawHighlightForSVGRenderer(GraphicsContext* context, const Vector<FloatQuad>& absoluteQuads, const HighlightConfig& highlightConfig)
-{
-    for (size_t i = 0; i < absoluteQuads.size(); ++i)
-        drawOutlinedQuad(context, absoluteQuads[i], highlightConfig.content, Color::transparent);
-}
-
-int drawSubstring(const TextRun& globalTextRun, int offset, int length, const Color& textColor, const Font& font, GraphicsContext* context, const LayoutRect& titleRect)
-{
-    context->setFillColor(textColor, ColorSpaceDeviceRGB);
-    context->drawText(font, globalTextRun, IntPoint(titleRect.pixelSnappedX() + rectInflatePx, titleRect.pixelSnappedY() + font.fontMetrics().height()), offset, offset + length);
-    return offset + length;
-}
-
-float calculateArrowTipX(const LayoutRect& anchorBox, const LayoutRect& titleRect)
-{
-    const static int anchorTipOffsetPx = 2;
-
-    int minX = titleRect.x() + arrowHalfWidth;
-    int maxX = titleRect.maxX() - arrowHalfWidth;
-    int anchorX = anchorBox.x();
-    int anchorMaxX = anchorBox.maxX();
-
-    int x = titleRect.x() + arrowTipOffset; // Default tooltip position.
-    if (x < anchorX)
-        x = anchorX + anchorTipOffsetPx;
-    else if (x > anchorMaxX)
-        x = anchorMaxX - anchorTipOffsetPx;
-
-    if (x < minX)
-        x = minX;
-    else if (x > maxX)
-        x = maxX;
-
-    return x;
-}
-
-void setUpFontDescription(FontDescription& fontDescription, WebCore::Settings* settings)
-{
-#define TOOLTIP_FONT_FAMILIES(size, ...) \
-static const unsigned tooltipFontFaceSize = size;\
-static const AtomicString* tooltipFontFace[size] = { __VA_ARGS__ };
-
-#if OS(WINDOWS)
-TOOLTIP_FONT_FAMILIES(2, new AtomicString("Consolas"), new AtomicString("Lucida Console"))
-#elif OS(MAC_OS_X)
-TOOLTIP_FONT_FAMILIES(2, new AtomicString("Menlo"), new AtomicString("Monaco"))
-#elif OS(UNIX)
-TOOLTIP_FONT_FAMILIES(1, new AtomicString("dejavu sans mono"))
-#endif
-// In the default case, we get the settings-provided monospace font.
-
-#undef TOOLTIP_FONT_FAMILIES
-
-    fontDescription.setRenderingMode(settings->fontRenderingMode());
-    fontDescription.setComputedSize(fontHeightPx);
-
-    const AtomicString& fixedFontFamily = settings->fixedFontFamily();
-    if (!fixedFontFamily.isEmpty()) {
-        fontDescription.setGenericFamily(FontDescription::MonospaceFamily);
-        FontFamily* currentFamily = 0;
-        for (unsigned i = 0; i < tooltipFontFaceSize; ++i) {
-            if (!currentFamily) {
-                fontDescription.firstFamily().setFamily(*tooltipFontFace[i]);
-                fontDescription.firstFamily().appendFamily(0);
-                currentFamily = &fontDescription.firstFamily();
-            } else {
-                RefPtr<SharedFontFamily> newFamily = SharedFontFamily::create();
-                newFamily->setFamily(*tooltipFontFace[i]);
-                currentFamily->appendFamily(newFamily);
-                currentFamily = newFamily.get();
-            }
-        }
-        RefPtr<SharedFontFamily> newFamily = SharedFontFamily::create();
-        newFamily->setFamily(fixedFontFamily);
-        currentFamily->appendFamily(newFamily);
-        currentFamily = newFamily.get();
-    }
-}
-
-void drawElementTitle(GraphicsContext* context, Node* node, RenderObject* renderer, const IntRect& boundingBox, const IntRect& anchorBox, const FloatRect& visibleRect, WebCore::Settings* settings)
-{
-    DEFINE_STATIC_LOCAL(Color, backgroundColor, (255, 255, 194));
-    DEFINE_STATIC_LOCAL(Color, tagColor, (136, 18, 128)); // Same as .webkit-html-tag.
-    DEFINE_STATIC_LOCAL(Color, attrColor, (26, 26, 166)); // Same as .webkit-html-attribute-value.
-    DEFINE_STATIC_LOCAL(Color, normalColor, (Color::black));
-    DEFINE_STATIC_LOCAL(Color, pxAndBorderColor, (128, 128, 128));
-
-    DEFINE_STATIC_LOCAL(String, pxString, (ASCIILiteral("px")));
-    const static UChar timesUChar[] = { 0x0020, 0x00D7, 0x0020, 0 };
-    DEFINE_STATIC_LOCAL(String, timesString, (timesUChar)); // &times; string
-
-    FontCachePurgePreventer fontCachePurgePreventer;
-
-    Element* element = static_cast<Element*>(node);
-    bool isXHTML = element->document()->isXHTMLDocument();
-    StringBuilder nodeTitle;
-    nodeTitle.append(isXHTML ? element->nodeName() : element->nodeName().lower());
-    unsigned tagNameLength = nodeTitle.length();
-
-    const AtomicString& idValue = element->getIdAttribute();
-    unsigned idStringLength = 0;
-    String idString;
-    if (!idValue.isNull() && !idValue.isEmpty()) {
-        nodeTitle.append("#");
-        nodeTitle.append(idValue);
-        idStringLength = 1 + idValue.length();
-    }
-
-    HashSet<AtomicString> usedClassNames;
-    unsigned classesStringLength = 0;
-    if (element->hasClass() && element->isStyledElement()) {
-        const SpaceSplitString& classNamesString = static_cast<StyledElement*>(element)->classNames();
-        size_t classNameCount = classNamesString.size();
-        for (size_t i = 0; i < classNameCount; ++i) {
-            const AtomicString& className = classNamesString[i];
-            if (usedClassNames.contains(className))
-                continue;
-            usedClassNames.add(className);
-            nodeTitle.append(".");
-            nodeTitle.append(className);
-            classesStringLength += 1 + className.length();
-        }
-    }
-
-    RenderBoxModelObject* modelObject = renderer->isBoxModelObject() ? toRenderBoxModelObject(renderer) : 0;
-
-    String widthNumberPart = " " + String::number(modelObject ? adjustForAbsoluteZoom(modelObject->pixelSnappedOffsetWidth(), modelObject) : boundingBox.width());
-    nodeTitle.append(widthNumberPart);
-    nodeTitle.append(pxString);
-    nodeTitle.append(timesString);
-    String heightNumberPart = String::number(modelObject ? adjustForAbsoluteZoom(modelObject->pixelSnappedOffsetHeight(), modelObject) : boundingBox.height());
-    nodeTitle.append(heightNumberPart);
-    nodeTitle.append(pxString);
-
-    FontDescription desc;
-    setUpFontDescription(desc, settings);
-    Font font = Font(desc, 0, 0);
-    font.update(0);
-
-    TextRun nodeTitleRun(nodeTitle.toString());
-    IntPoint titleBasePoint = IntPoint(anchorBox.x(), anchorBox.maxY() - 1);
-    titleBasePoint.move(rectInflatePx, rectInflatePx);
-    IntRect titleRect = enclosingIntRect(font.selectionRectForText(nodeTitleRun, titleBasePoint, fontHeightPx));
-    titleRect.inflate(rectInflatePx);
-
-    // The initial offsets needed to compensate for a 1px-thick border stroke (which is not a part of the rectangle).
-    int dx = -borderWidthPx;
-    int dy = borderWidthPx;
-
-    // If the tip sticks beyond the right of visibleRect, right-align the tip with the said boundary.
-    if (titleRect.maxX() + dx > visibleRect.maxX())
-        dx = visibleRect.maxX() - titleRect.maxX();
-
-    // If the tip sticks beyond the left of visibleRect, left-align the tip with the said boundary.
-    if (titleRect.x() + dx < visibleRect.x())
-        dx = visibleRect.x() - titleRect.x() - borderWidthPx;
-
-    // If the tip sticks beyond the bottom of visibleRect, show the tip at top of bounding box.
-    if (titleRect.maxY() + dy > visibleRect.maxY()) {
-        dy = anchorBox.y() - titleRect.maxY() - borderWidthPx;
-        // If the tip still sticks beyond the bottom of visibleRect, bottom-align the tip with the said boundary.
-        if (titleRect.maxY() + dy > visibleRect.maxY())
-            dy = visibleRect.maxY() - titleRect.maxY();
-    }
-
-    // If the tip sticks beyond the top of visibleRect, show the tip at top of visibleRect.
-    if (titleRect.y() + dy < visibleRect.y())
-        dy = visibleRect.y() - titleRect.y() + borderWidthPx;
-
-    titleRect.move(dx, dy);
-
-    bool isArrowAtTop = titleRect.y() > anchorBox.y();
-    titleRect.move(0, tooltipPadding * (isArrowAtTop ? 1 : -1));
-
-    {
-        float arrowTipX = calculateArrowTipX(anchorBox, titleRect);
-        int arrowBaseY = isArrowAtTop ? titleRect.y() : titleRect.maxY();
-        int arrowOppositeY = isArrowAtTop ? titleRect.maxY() : titleRect.y();
-
-        FloatPoint points[8];
-        points[0] = FloatPoint(arrowTipX - arrowHalfWidth, arrowBaseY);
-        points[1] = FloatPoint(arrowTipX, arrowBaseY + arrowHeight * (isArrowAtTop ? -1 : 1));
-        points[2] = FloatPoint(arrowTipX + arrowHalfWidth, arrowBaseY);
-        points[3] = FloatPoint(titleRect.maxX(), arrowBaseY);
-        points[4] = FloatPoint(titleRect.maxX(), arrowOppositeY);
-        points[5] = FloatPoint(titleRect.x(), arrowOppositeY);
-        points[6] = FloatPoint(titleRect.x(), arrowBaseY);
-        points[7] = points[0];
-
-        Path path;
-        path.moveTo(points[0]);
-        for (int i = 1; i < 8; ++i)
-            path.addLineTo(points[i]);
-
-        context->save();
-        context->translate(0.5f, 0.5f);
-        context->setStrokeColor(pxAndBorderColor, ColorSpaceDeviceRGB);
-        context->setFillColor(backgroundColor, ColorSpaceDeviceRGB);
-        context->setStrokeThickness(borderWidthPx);
-        context->fillPath(path);
-        context->strokePath(path);
-        context->restore();
-    }
-
-    int currentPos = 0;
-    currentPos = drawSubstring(nodeTitleRun, currentPos, tagNameLength, tagColor, font, context, titleRect);
-    if (idStringLength)
-        currentPos = drawSubstring(nodeTitleRun, currentPos, idStringLength, attrColor, font, context, titleRect);
-    if (classesStringLength)
-        currentPos = drawSubstring(nodeTitleRun, currentPos, classesStringLength, attrColor, font, context, titleRect);
-    currentPos = drawSubstring(nodeTitleRun, currentPos, widthNumberPart.length(), normalColor, font, context, titleRect);
-    currentPos = drawSubstring(nodeTitleRun, currentPos, pxString.length() + timesString.length(), pxAndBorderColor, font, context, titleRect);
-    currentPos = drawSubstring(nodeTitleRun, currentPos, heightNumberPart.length(), normalColor, font, context, titleRect);
-    drawSubstring(nodeTitleRun, currentPos, pxString.length(), pxAndBorderColor, font, context, titleRect);
-}
-
 static void contentsQuadToPage(const FrameView* mainView, const FrameView* view, FloatQuad& quad)
 {
@@ -371 +100 @@
 }
 
-static void getOrDrawNodeHighlight(GraphicsContext* context, Node* node, const HighlightConfig& highlightConfig, Highlight* highlight)
+static void buildNodeHighlight(Node* node, const HighlightConfig& highlightConfig, Highlight* highlight)
 {
     RenderObject* renderer = node->renderer();
@@ -379 +108 @@
         return;
 
+    highlight->setColors(highlightConfig);
     FrameView* containingView = containingFrame->view();
     FrameView* mainView = containingFrame->page()->mainFrame()->view();
@@ -384 +114 @@
     boundingBox.move(mainView->scrollOffset());
     IntRect titleAnchorBox = boundingBox;
-
-    FloatRect visibleRect = mainView->visibleContentRect();
-    // Don't translate the context if the frame is rendered in page coordinates.
-    if (context && !mainView->delegatesScrolling())
-        context->translate(-visibleRect.x(), -visibleRect.y());
 
     // RenderSVGRoot should be highlighted through the isBox() code path, all other SVG elements should just dump their absoluteQuads().
@@ -402 +127 @@
         for (size_t i = 0; i < highlight->quads.size(); ++i)
             contentsQuadToPage(mainView, containingView, highlight->quads[i]);
-
-        if (context)
-            drawHighlightForSVGRenderer(context, highlight->quads, highlightConfig);
     } else if (renderer->isBox() || renderer->isRenderInline()) {
         LayoutRect contentBox;
@@ -456 +178 @@
         highlight->quads.append(absPaddingQuad);
         highlight->quads.append(absContentQuad);
-
-        if (context)
-            drawHighlightForBox(context, absContentQuad, absPaddingQuad, absBorderQuad, absMarginQuad, highlightConfig);
     }
-
-    // Draw node title if necessary.
-
-    if (!node->isElementNode())
-        return;
-
-    if (context && highlightConfig.showInfo)
-        drawElementTitle(context, node, renderer, pixelSnappedIntRect(boundingBox), pixelSnappedIntRect(titleAnchorBox), visibleRect, containingFrame->settings());
-}
-
-static void getOrDrawRectHighlight(GraphicsContext* context, Page* page, IntRect* rect, const HighlightConfig& highlightConfig, Highlight *highlight)
+}
+
+static void buildRectHighlight(Page* page, IntRect* rect, const HighlightConfig& highlightConfig, Highlight *highlight)
 {
     if (!page)
         return;
-
+    highlight->setColors(highlightConfig);
     FloatRect highlightRect(*rect);
-
     highlight->type = HighlightTypeRects;
     highlight->quads.append(highlightRect);
-
-    if (context) {
-        FrameView* view = page->mainFrame()->view();
-        if (!view->delegatesScrolling()) {
-            FloatRect visibleRect = view->visibleContentRect();
-            context->translate(-visibleRect.x(), -visibleRect.y());
-        }
-
-        drawOutlinedQuad(context, highlightRect, highlightConfig.content, highlightConfig.contentOutline);
-    }
 }
 
@@ -505 +205 @@
 void InspectorOverlay::paint(GraphicsContext& context)
 {
-    drawNodeHighlight(&context);
-    drawRectHighlight(&context);
-
-    if (m_pausedInDebuggerMessage.isNull())
-        return;
-    drawOverlayPage(&context);
+    if (m_pausedInDebuggerMessage.isNull() && !m_highlightNode && !m_highlightRect)
+        return;
+    GraphicsContextStateSaver stateSaver(context);
+    FrameView* view = overlayPage()->mainFrame()->view();
+    ASSERT(!view->needsLayout());
+    view->paint(&context, IntRect(0, 0, view->width(), view->height()));
 }
 
@@ -525 +225 @@
 
     highlight->type = HighlightTypeRects;
-    if (m_highlightNode) {
-        highlight->setColors(m_nodeHighlightConfig);
-        getOrDrawNodeHighlight(0, m_highlightNode.get(), m_nodeHighlightConfig, highlight);
-    } else {
-        highlight->setColors(m_rectHighlightConfig);
-        getOrDrawRectHighlight(0, m_page, m_highlightRect.get(), m_rectHighlightConfig, highlight);
-    }
+    if (m_highlightNode)
+        buildNodeHighlight(m_highlightNode.get(), m_nodeHighlightConfig, highlight);
+    else
+        buildRectHighlight(m_page, m_highlightRect.get(), m_rectHighlightConfig, highlight);
 }
 
@@ -537 +234 @@
 {
     m_pausedInDebuggerMessage = message ? *message : String();
-    evaluateInOverlay("setPausedInDebuggerMessage", m_pausedInDebuggerMessage);
     update();
 }
@@ -578 +274 @@
     IntRect visibleRect = enclosingIntRect(view->visibleContentRect());
     overlayView->resize(visibleRect.width(), visibleRect.height());
+
+    // Clear canvas and paint things.
+    reset();
+
+    drawNodeHighlight();
+    drawRectHighlight();
+    drawPausedInDebuggerMessage();
+
+    // Position DOM elements.
+    overlayPage()->mainFrame()->document()->recalcStyle(Node::Force);
     if (overlayView->needsLayout())
         overlayView->layout();
+
+    // Kick paint.
     m_client->highlight();
 }
 
-void InspectorOverlay::drawNodeHighlight(GraphicsContext* context)
+static RefPtr<InspectorObject> buildObjectForPoint(const FloatPoint& point)
+{
+    RefPtr<InspectorObject> object = InspectorObject::create();
+    object->setNumber("x", point.x());
+    object->setNumber("y", point.y());
+    return object.release();
+}
+
+static RefPtr<InspectorArray> buildArrayForQuad(const FloatQuad& quad)
+{
+    RefPtr<InspectorArray> array = InspectorArray::create();
+    array->pushObject(buildObjectForPoint(quad.p1()));
+    array->pushObject(buildObjectForPoint(quad.p2()));
+    array->pushObject(buildObjectForPoint(quad.p3()));
+    array->pushObject(buildObjectForPoint(quad.p4()));
+    return array.release();
+}
+
+static RefPtr<InspectorObject> buildObjectForHighlight(FrameView* mainView, const Highlight& highlight)
+{
+    RefPtr<InspectorObject> object = InspectorObject::create();
+    RefPtr<InspectorArray> array = InspectorArray::create();
+    for (size_t i = 0; i < highlight.quads.size(); ++i)
+        array->pushArray(buildArrayForQuad(highlight.quads[i]));
+    object->setArray("quads", array.release());
+    object->setString("contentColor", highlight.contentColor.serialized());
+    object->setString("contentOutlineColor", highlight.contentOutlineColor.serialized());
+    object->setString("paddingColor", highlight.paddingColor.serialized());
+    object->setString("borderColor", highlight.borderColor.serialized());
+    object->setString("marginColor", highlight.marginColor.serialized());
+
+    FloatRect visibleRect = mainView->visibleContentRect();
+    if (!mainView->delegatesScrolling()) {
+        object->setNumber("scrollX", visibleRect.x());
+        object->setNumber("scrollY", visibleRect.y());
+    } else {
+        object->setNumber("scrollX", 0);
+        object->setNumber("scrollY", 0);
+    }
+
+    return object.release();
+}
+
+void InspectorOverlay::drawNodeHighlight()
 {
     if (!m_highlightNode)
@@ -589 +340 @@
 
     Highlight highlight;
-    getOrDrawNodeHighlight(context, m_highlightNode.get(), m_nodeHighlightConfig, &highlight);
-}
-
-void InspectorOverlay::drawRectHighlight(GraphicsContext* context)
+    buildNodeHighlight(m_highlightNode.get(), m_nodeHighlightConfig, &highlight);
+    RefPtr<InspectorObject> highlightObject = buildObjectForHighlight(m_page->mainFrame()->view(), highlight);
+
+    Node* node = m_highlightNode.get();
+    if (node->isElementNode() && m_nodeHighlightConfig.showInfo && node->renderer() && node->document()->frame()) {
+        RefPtr<InspectorObject> elementInfo = InspectorObject::create();
+        Element* element = toElement(node);
+        bool isXHTML = element->document()->isXHTMLDocument();
+        elementInfo->setString("tagName", isXHTML ? element->nodeName() : element->nodeName().lower());
+        elementInfo->setString("idValue", element->getIdAttribute());
+        HashSet<AtomicString> usedClassNames;
+        if (element->hasClass() && element->isStyledElement()) {
+            String classNames;
+            const SpaceSplitString& classNamesString = static_cast<StyledElement*>(element)->classNames();
+            size_t classNameCount = classNamesString.size();
+            for (size_t i = 0; i < classNameCount; ++i) {
+                const AtomicString& className = classNamesString[i];
+                if (usedClassNames.contains(className))
+                    continue;
+                usedClassNames.add(className);
+                classNames += makeString(".", className);
+            }
+            elementInfo->setString("className", classNames);
+        }
+
+        RenderObject* renderer = node->renderer();
+        Frame* containingFrame = node->document()->frame();
+        FrameView* containingView = containingFrame->view();
+        IntRect boundingBox = pixelSnappedIntRect(containingView->contentsToRootView(renderer->absoluteBoundingBoxRect()));
+        RenderBoxModelObject* modelObject = renderer->isBoxModelObject() ? toRenderBoxModelObject(renderer) : 0;
+        elementInfo->setString("nodeWidth", String::number(modelObject ? adjustForAbsoluteZoom(modelObject->pixelSnappedOffsetWidth(), modelObject) : boundingBox.width()));
+        elementInfo->setString("nodeHeight", String::number(modelObject ? adjustForAbsoluteZoom(modelObject->pixelSnappedOffsetHeight(), modelObject) : boundingBox.height()));
+        highlightObject->setObject("elementInfo", elementInfo.release());
+    }
+    evaluateInOverlay("drawNodeHighlight", highlightObject);
+}
+
+void InspectorOverlay::drawRectHighlight()
 {
     if (!m_highlightRect)
@@ -598 +383 @@
 
     Highlight highlight;
-    getOrDrawRectHighlight(context, m_page, m_highlightRect.get(), m_rectHighlightConfig, &highlight);
-}
-
-void InspectorOverlay::drawOverlayPage(GraphicsContext* context)
-{
-    GraphicsContextStateSaver stateSaver(*context);
-    FrameView* view = overlayPage()->mainFrame()->view();
-    view->paint(context, IntRect(0, 0, view->width(), view->height()));
+    buildRectHighlight(m_page, m_highlightRect.get(), m_rectHighlightConfig, &highlight);
+    evaluateInOverlay("highlightRect", buildObjectForHighlight(m_page->mainFrame()->view(), highlight));
+}
+
+void InspectorOverlay::drawPausedInDebuggerMessage()
+{
+    if (!m_pausedInDebuggerMessage.isNull())
+        evaluateInOverlay("drawPausedInDebuggerMessage", m_pausedInDebuggerMessage);
 }
 
@@ -622 +407 @@
 
     overlaySettings->setStandardFontFamily(settings->standardFontFamily());
-#if OS(WINDOWS)
-    overlaySettings->setFixedFontFamily("Consolas");
-#elif OS(MAC_OS_X)
-    overlaySettings->setFixedFontFamily("Menlo");
-#elif OS(UNIX)
-    overlaySettings->setFixedFontFamily("dejavu sans mono");
-#endif
     overlaySettings->setSerifFontFamily(settings->serifFontFamily());
     overlaySettings->setSansSerifFontFamily(settings->sansSerifFontFamily());
@@ -636 +414 @@
     overlaySettings->setMinimumFontSize(settings->minimumFontSize());
     overlaySettings->setMinimumLogicalFontSize(settings->minimumLogicalFontSize());
-    overlaySettings->setDefaultFontSize(settings->defaultFontSize());
-    overlaySettings->setDefaultFixedFontSize(settings->defaultFixedFontSize());
     overlaySettings->setMediaEnabled(false);
     overlaySettings->setScriptEnabled(true);
@@ -654 +430 @@
     loader->activeDocumentLoader()->writer()->end();
 
+#if OS(WINDOWS)
+    evaluateInOverlay("setPlatform", "windows");
+#elif OS(MAC_OS_X)
+    evaluateInOverlay("setPlatform", "mac");
+#elif OS(UNIX)
+    evaluateInOverlay("setPlatform", "linux");
+#endif
+
     return m_overlayPage.get();
+}
+
+void InspectorOverlay::reset()
+{
+    evaluateInOverlay("reset", "");
 }
 
@@ -665 +454 @@
 }
 
+void InspectorOverlay::evaluateInOverlay(const String& method, PassRefPtr<InspectorValue> argument)
+{
+    RefPtr<InspectorArray> command = InspectorArray::create();
+    command->pushString(method);
+    command->pushValue(argument);
+    overlayPage()->mainFrame()->script()->evaluate(ScriptSourceCode(makeString("dispatch(", command->toJSONString(), ")")));
+}
+
 } // namespace WebCore
 

trunk/Source/WebCore/inspector/InspectorOverlay.h

@@ -45 +45 @@
 class GraphicsContext;
 class InspectorClient;
+class InspectorValue;
 class IntRect;
 class Node;
@@ -67 +68 @@
     {
         contentColor = highlightConfig.content;
+        contentOutlineColor = highlightConfig.contentOutline;
         paddingColor = highlightConfig.padding;
         borderColor = highlightConfig.border;
@@ -73 +75 @@
 
     Color contentColor;
+    Color contentOutlineColor;
     Color paddingColor;
     Color borderColor;
@@ -91 +94 @@
     ~InspectorOverlay();
 
+    void update();
     void paint(GraphicsContext&);
     void drawOutline(GraphicsContext*, const LayoutRect&, const Color&);
@@ -106 +110 @@
     InspectorOverlay(Page*, InspectorClient*);
 
-    void update();
-    void drawNodeHighlight(GraphicsContext*);
-    void drawRectHighlight(GraphicsContext*);
-    void drawOverlayPage(GraphicsContext*);
+    void drawNodeHighlight();
+    void drawRectHighlight();
+    void drawPausedInDebuggerMessage();
     Page* overlayPage();
+    void reset();
     void evaluateInOverlay(const String& method, const String& argument);
+    void evaluateInOverlay(const String& method, PassRefPtr<InspectorValue> argument);
 
     Page* m_page;

trunk/Source/WebCore/inspector/InspectorOverlayPage.html

@@ -35 +35 @@
 }
 
+body.platform-mac {
+    font-size: 11px;
+    font-family: Menlo, Monaco;
+}
+
+body.platform-windows {
+    font-size: 12px;
+    font-family: Consolas, Lucida Console;
+}
+
+body.platform-linux {
+    font-size: 11px;
+    font-family: dejavu sans mono;
+}
+
 .fill {
     position: absolute;
@@ -48 +63 @@
 
 .message-line {
+    margin: 10px 0;
     text-align: center;
 }
 
 .message-box {
-    font-family: monospace;
     background-color: rgb(255, 255, 194);
     border: 1px solid rgb(128, 128, 128);
     display: inline-block;
-    margin: 10px 0;
     padding: 2px 4px;
 }
 
+.px {
+    color: rgb(128, 128, 128);
+}
+
+#element-title {
+    position: absolute;
+    z-index: 10;
+}
+
+#tag-name {
+    color: rgb(136, 18, 128);
+}
+
+#node-id {
+    color: rgb(26, 26, 166);
+}
 </style>
 <script>
-function setPausedInDebuggerMessage(message)
+const lightGridColor = "rgba(0,0,0,0.2)";
+const darkGridColor = "rgba(0,0,0,0.5)";
+const transparentColor = "rgba(0, 0, 0, 0)";
+
+function drawPausedInDebuggerMessage(message)
 {
     var pausedInDebugger = document.getElementById("paused-in-debugger");
-    if (message) {
-        pausedInDebugger.textContent = message;
-        pausedInDebugger.style.visibility = "visible";
-        document.body.classList.add("dimmed");
-    } else {
-        pausedInDebugger.style.visibility = "hidden";
-        document.body.classList.remove("dimmed");
-    }
+    pausedInDebugger.textContent = message;
+    pausedInDebugger.style.visibility = "visible";
+    document.body.classList.add("dimmed");
+}
+
+function _drawGrid(highlight)
+{
+    context.save();
+
+    var width = canvas.width;
+    var height = canvas.height;
+
+    context.fillStyle = "rgba(255, 255, 255, 0.6)";
+    context.fillRect(0, 0, canvas.width, 15);
+    context.fillRect(0, 15, 15, canvas.height);
+    
+    context.translate(-highlight.scrollX, 0.5 - highlight.scrollY);
+    context.lineWidth = 1;
+
+    const gridSubStep = 5;
+    const gridStep = 50;
+
+    context.strokeStyle = lightGridColor;
+
+    for (var y = gridSubStep; y < highlight.scrollY + height; y += gridSubStep) {
+        if (!(y % gridStep))
+            continue;
+        context.beginPath();
+        context.moveTo(highlight.scrollX, y);
+        context.lineTo(highlight.scrollX + gridSubStep, y);
+        context.stroke();
+    }
+
+    context.strokeStyle = darkGridColor;
+    context.fillStyle = darkGridColor;
+    for (var y = gridStep; y < height + highlight.scrollY; y += gridStep) {
+        context.beginPath();
+        context.moveTo(highlight.scrollX, y);
+        var markLength = (y % (gridStep * 2)) ? 5 : 8;
+        context.lineTo(highlight.scrollX + markLength, y);
+        context.stroke();
+        if (!(y % (gridStep * 2))) {
+            context.save();
+            context.translate(highlight.scrollX, y);
+            context.rotate(-Math.PI / 2);
+            context.fillText(y, 2, 13);
+            context.restore();
+        }
+    }
+
+    context.translate(0.5, -0.5);
+
+    context.strokeStyle = lightGridColor;
+    for (var x = gridSubStep; x < highlight.scrollX + width; x += gridSubStep) {
+        if (!(x % gridStep))
+            continue;
+        context.beginPath();
+        context.moveTo(x, highlight.scrollY);
+        context.lineTo(x, highlight.scrollY + gridSubStep);
+        context.stroke();
+    }
+
+    context.strokeStyle = darkGridColor;
+    context.fillStyle = darkGridColor;
+    for (var x = gridStep; x < width + highlight.scrollX; x += gridStep) {
+        context.beginPath();
+        context.moveTo(x, highlight.scrollY);
+        var markLength = (x % (gridStep * 2)) ? 5 : 8;
+        context.lineTo(x, highlight.scrollY + markLength);
+        context.stroke();
+        if (!(x % (gridStep * 2)))
+            context.fillText(x, x + 2, highlight.scrollY + 13);
+    }
+    context.restore();
+}
+
+function quadToPath(quad)
+{
+    context.beginPath();
+    context.moveTo(quad[0].x, quad[0].y);
+    context.lineTo(quad[1].x, quad[1].y);
+    context.lineTo(quad[2].x, quad[2].y);
+    context.lineTo(quad[3].x, quad[3].y);
+    context.closePath();
+    return context;
+}
+
+function drawOutlinedQuad(quad, fillColor, outlineColor)
+{
+    context.save();
+    context.lineWidth = 2;
+    quadToPath(quad).clip();
+    context.fillStyle = fillColor;
+    context.fill();
+    if (outlineColor) {
+        context.strokeStyle = outlineColor;
+        context.stroke();
+    }
+    context.restore();
+}
+
+function drawOutlinedQuadWithClip(quad, clipQuad, fillColor)
+{
+    var canvas = document.getElementById("canvas");
+    context.fillStyle = fillColor;
+    context.save();
+    context.lineWidth = 0;
+    quadToPath(quad).fill();
+    context.globalCompositeOperation = "destination-out";
+    context.fillStyle = "red";
+    quadToPath(clipQuad).fill();
+    context.restore();
+}
+
+function quadEquals(quad1, quad2)
+{
+    return quad1[0].x === quad2[0].x && quad1[0].y === quad2[0].y &&
+        quad1[1].x === quad2[1].x && quad1[1].y === quad2[1].y &&
+        quad1[2].x === quad2[2].x && quad1[2].y === quad2[2].y &&
+        quad1[3].x === quad2[3].x && quad1[3].y === quad2[3].y;
+}
+
+function reset()
+{
+    window.canvas = document.getElementById("canvas");
+    window.context = canvas.getContext("2d");
+    canvas.width = document.body.offsetWidth;
+    canvas.height = document.body.offsetHeight;
+
+    document.getElementById("paused-in-debugger").style.visibility = "hidden";
+    document.getElementById("element-title").style.visibility = "hidden";
+    document.body.classList.remove("dimmed");
+}
+
+function _drawElementTitle(highlight)
+{
+    var elementInfo = highlight.elementInfo;
+    if (!highlight.elementInfo)
+        return;
+
+    document.getElementById("tag-name").textContent = elementInfo.tagName;
+    document.getElementById("node-id").textContent = elementInfo.nodeId ? "#" + elementInfo.nodeId : "";
+    document.getElementById("class-name").textContent = elementInfo.className || "";
+    document.getElementById("node-width").textContent = elementInfo.nodeWidth;
+    document.getElementById("node-height").textContent = elementInfo.nodeHeight;
+    var elementTitle = document.getElementById("element-title");
+
+    var marginQuad = highlight.quads[0];
+
+    var titleWidth = elementTitle.offsetWidth + 6;
+    var titleHeight = elementTitle.offsetHeight + 4;
+
+    var anchorTop = marginQuad[0].y;
+    var anchorBottom = marginQuad[3].y
+
+    const arrowHeight = 7;
+    var renderArrowUp = false;
+    var renderArrowDown = false;
+
+    var boxX = Math.max(2, marginQuad[0].x);
+    if (boxX + titleWidth > canvas.width)
+        boxX = canvas.width - titleWidth - 2;
+
+    var boxY;
+    if (anchorTop > canvas.height) {
+        boxY = canvas.height - titleHeight - arrowHeight;
+        renderArrowDown = true;
+    } else if (anchorBottom < 0) {
+        boxY = arrowHeight;
+        renderArrowUp = true;
+    } else if (anchorBottom + titleHeight + arrowHeight < canvas.height) {
+        boxY = anchorBottom + arrowHeight - 4;
+        renderArrowUp = true;
+    } else if (anchorTop - titleHeight - arrowHeight > 0) {
+        boxY = anchorTop - titleHeight - arrowHeight + 3;
+        renderArrowDown = true;
+    } else
+        boxY = arrowHeight;
+
+    context.save();
+    context.translate(0.5, 0.5);
+    context.beginPath();
+    context.moveTo(boxX, boxY);
+    if (renderArrowUp) {
+        context.lineTo(boxX + 2 * arrowHeight, boxY);
+        context.lineTo(boxX + 3 * arrowHeight, boxY - arrowHeight);
+        context.lineTo(boxX + 4 * arrowHeight, boxY);
+    }
+    context.lineTo(boxX + titleWidth, boxY);
+    context.lineTo(boxX + titleWidth, boxY + titleHeight);
+    if (renderArrowDown) {
+        context.lineTo(boxX + 4 * arrowHeight, boxY + titleHeight);
+        context.lineTo(boxX + 3 * arrowHeight, boxY + titleHeight + arrowHeight);
+        context.lineTo(boxX + 2 * arrowHeight, boxY + titleHeight);
+    }
+    context.lineTo(boxX, boxY + titleHeight);
+    context.closePath();
+    context.fillStyle = "rgb(255, 255, 194)";
+    context.fill();
+    context.strokeStyle = "rgb(128, 128, 128)";
+    context.stroke();
+
+    context.restore();
+
+    elementTitle.style.visibility = "visible";
+    elementTitle.style.top = (boxY + 3) + "px";
+    elementTitle.style.left = (boxX + 3) + "px";
+}
+
+function _drawRulers(highlight)
+{
+    context.save();
+    context.strokeStyle = "rgba(128, 128, 128, 0.3)";
+    context.lineWidth = 1;
+    context.translate(0.5, 0.5);
+    var leftmostXForY = {};
+    var topmostYForX = {};
+
+    for (var i = 0; i < highlight.quads.length; ++i) {
+        var quad = highlight.quads[i];
+        for (var j = 0; j < quad.length; ++j) {
+            var x = quad[j].x;
+            var y = quad[j].y;
+            topmostYForX[Math.round(x)] = Math.min(topmostYForX[x] || Number.MAX_VALUE, Math.round(quad[j].y));
+            leftmostXForY[Math.round(y)] = Math.min(leftmostXForY[y] || Number.MAX_VALUE, Math.round(quad[j].x));
+        }
+    }
+
+    for (var y in leftmostXForY) {
+        context.beginPath();
+        context.moveTo(0, y);
+        context.lineTo(leftmostXForY[y], y);
+        context.stroke();
+    }
+
+    for (var x in topmostYForX) {
+        context.beginPath();
+        context.moveTo(x, 0);
+        context.lineTo(x, topmostYForX[x]);
+        context.stroke();
+  }
+
+    context.restore();
+}
+
+function drawNodeHighlight(highlight)
+{
+    _drawGrid(highlight);
+
+    if (!highlight.quads.length)
+        return;
+
+    context.save();
+
+    for (var i = 0; i < highlight.quads.length; ++i) {
+        var quad = highlight.quads[i];
+        for (var j = 0; j < quad.length; ++j) {
+            quad[j].x -= highlight.scrollX;
+            quad[j].y -= highlight.scrollY;
+        }
+    }
+
+    var quads = highlight.quads.slice();
+    var contentQuad = quads.pop();
+    var paddingQuad = quads.pop();
+    var borderQuad = quads.pop();
+    var marginQuad = quads.pop();
+
+    var hasContent = contentQuad && highlight.contentColor !== transparentColor || highlight.contentOutlineColor !== transparentColor;
+    var hasPadding = paddingQuad && highlight.paddingColor !== transparentColor;
+    var hasBorder = borderQuad && highlight.borderColor !== transparentColor;
+    var hasMargin = marginQuad && highlight.marginColor !== transparentColor;
+
+    var clipQuad;
+    if (hasMargin && (!hasBorder || !quadEquals(marginQuad, borderQuad))) {
+        drawOutlinedQuadWithClip(marginQuad, borderQuad, highlight.marginColor);
+        clipQuad = borderQuad;
+    }
+    if (hasBorder && (!hasPadding || !quadEquals(borderQuad, paddingQuad))) {
+        drawOutlinedQuadWithClip(borderQuad, paddingQuad, highlight.borderColor);
+        clipQuad = paddingQuad;
+    }
+    if (hasPadding && (!hasContent || !quadEquals(paddingQuad, contentQuad))) {
+        drawOutlinedQuadWithClip(paddingQuad, contentQuad, highlight.paddingColor);
+        clipQuad = contentQuad;
+    }
+    if (hasContent)
+        drawOutlinedQuad(contentQuad, highlight.contentColor, highlight.contentOutlineColor);
+
+    _drawElementTitle(highlight);
+    _drawRulers(highlight);
+    context.restore();
+}
+
+function drawRectHighlight(highlight)
+{
+    context.save();
+    drawOutlinedQuad(highlight.quads[0], highlight.contentColor, highlight.contentOutlineColor);
+    context.restore();
+}
+
+function setPlatform(platform)
+{
+    document.body.classList.add("platform-" + platform);
 }
 
@@ -80 +410 @@
     window[functionName].apply(null, message);
 }
+
+function log(text)
+{
+    var logEntry = document.createElement("div");
+    logEntry.textContent = text;
+    document.getElementById("log").appendChild(logEntry);
+}
+
 </script>
 </head>
@@ -85 +423 @@
 <div class="message-line"><span class="message-box" id="paused-in-debugger"></span></div>
 </body>
+<canvas id="canvas" class="fill"></canvas>
+<div id="element-title">
+  <span id="tag-name"></span><span id="node-id"></span><span id="class-name"></span>
+  <span id="node-width"></span><span class="px">px</span><span class="px"> &#xD7; </span><span id="node-height"></span><span class="px">px</span>
+</div>
+<div id="log"></div>
 </html>

trunk/Source/WebCore/inspector/InspectorPageAgent.cpp

@@ -915 +915 @@
     if (currentWidth && currentHeight)
         m_client->autoZoomPageToFitWidth();
+    m_overlay->update();
+}
+
+void InspectorPageAgent::didScroll()
+{
+    m_overlay->update();
 }
 

trunk/Source/WebCore/inspector/InspectorPageAgent.h

@@ -138 +138 @@
     void didPaint();
     void didLayout();
+    void didScroll();
 
     // Inspector Controller API

trunk/Source/WebCore/page/Chrome.cpp

@@ -96 +96 @@
 {
     m_client->scroll(scrollDelta, rectToScroll, clipRect);
+    InspectorInstrumentation::didScroll(m_page);
 }