Changeset 93603 in webkit


Ignore:
Timestamp:
Aug 23, 2011 7:38:07 AM (13 years ago)
Author:
apavlov@chromium.org
Message:

Web Inspector: differentiate element highlight colors for margin and padding
​https://bugs.webkit.org/show_bug.cgi?id=37768

The highlighting WIP API is slightly changed: clients will specify colors for certain elements of the highlighted objects,
rather than a generic "highlighting mode". This allows to:

  • use entirely custom colors for highlighting (and vary them over time);
  • display any combination of fill/outline for the highlighted area;
  • highlight any combinations of element parts.

Reviewed by Pavel Feldman.

  • inspector/DOMNodeHighlighter.cpp:

(WebCore::DOMNodeHighlighter::drawHighlight):

  • inspector/DOMNodeHighlighter.h:
  • inspector/Inspector.json:
  • inspector/InspectorDOMAgent.cpp:

(WebCore::parseColor):
(WebCore::parseConfigColor):
(WebCore::InspectorDOMAgent::~InspectorDOMAgent):
(WebCore::InspectorDOMAgent::clearFrontend):
(WebCore::InspectorDOMAgent::highlightedNode):
(WebCore::InspectorDOMAgent::handleMousePress):
(WebCore::InspectorDOMAgent::mouseDidMoveOverElement):
(WebCore::InspectorDOMAgent::setSearchingForNode):
(WebCore::InspectorDOMAgent::setInspectModeEnabled):
(WebCore::InspectorDOMAgent::setHighlightDataFromConfig):
(WebCore::InspectorDOMAgent::highlight):
(WebCore::InspectorDOMAgent::highlightRect):
(WebCore::InspectorDOMAgent::highlightNode):
(WebCore::InspectorDOMAgent::highlightFrame):
(WebCore::InspectorDOMAgent::hideHighlight):
(WebCore::InspectorDOMAgent::drawHighlight):

  • inspector/InspectorDOMAgent.h:
  • inspector/front-end/Color.js:

(WebInspector.Color.fromRGBA):
(WebInspector.Color.prototype.toProtocolRGBA):

  • inspector/front-end/ElementsPanel.js:

(WebInspector.ElementsPanel.prototype.setSearchingForNode):

  • inspector/front-end/MetricsSidebarPane.js:

(WebInspector.MetricsSidebarPane.prototype._highlightDOMNode.handleMouseOver):
(WebInspector.MetricsSidebarPane.prototype._highlightDOMNode.handleMouseOut):
(WebInspector.MetricsSidebarPane.prototype._highlightDOMNode):

  • inspector/front-end/ResourcesPanel.js:

(WebInspector.FrameTreeElement.prototype.set hovered):

  • inspector/front-end/TimelinePanel.js:

(WebInspector.TimelinePanel.prototype._highlightRect):

  • inspector/front-end/inspector.css:
  • inspector/front-end/inspector.js:

(WebInspector.buildHighlightConfig):
(WebInspector.highlightDOMNode):

Location:
trunk/Source/WebCore
Files:
13 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r93601 r93603  
     12011-08-23  Alexander Pavlov  <apavlov@chromium.org>
     2
     3        Web Inspector: differentiate element highlight colors for margin and padding
     4        https://bugs.webkit.org/show_bug.cgi?id=37768
     5
     6        The highlighting WIP API is slightly changed: clients will specify colors for certain elements of the highlighted objects,
     7        rather than a generic "highlighting mode". This allows to:
     8        - use entirely custom colors for highlighting (and vary them over time);
     9        - display any combination of fill/outline for the highlighted area;
     10        - highlight any combinations of element parts.
     11
     12        Reviewed by Pavel Feldman.
     13
     14        * inspector/DOMNodeHighlighter.cpp:
     15        (WebCore::DOMNodeHighlighter::drawHighlight):
     16        * inspector/DOMNodeHighlighter.h:
     17        * inspector/Inspector.json:
     18        * inspector/InspectorDOMAgent.cpp:
     19        (WebCore::parseColor):
     20        (WebCore::parseConfigColor):
     21        (WebCore::InspectorDOMAgent::~InspectorDOMAgent):
     22        (WebCore::InspectorDOMAgent::clearFrontend):
     23        (WebCore::InspectorDOMAgent::highlightedNode):
     24        (WebCore::InspectorDOMAgent::handleMousePress):
     25        (WebCore::InspectorDOMAgent::mouseDidMoveOverElement):
     26        (WebCore::InspectorDOMAgent::setSearchingForNode):
     27        (WebCore::InspectorDOMAgent::setInspectModeEnabled):
     28        (WebCore::InspectorDOMAgent::setHighlightDataFromConfig):
     29        (WebCore::InspectorDOMAgent::highlight):
     30        (WebCore::InspectorDOMAgent::highlightRect):
     31        (WebCore::InspectorDOMAgent::highlightNode):
     32        (WebCore::InspectorDOMAgent::highlightFrame):
     33        (WebCore::InspectorDOMAgent::hideHighlight):
     34        (WebCore::InspectorDOMAgent::drawHighlight):
     35        * inspector/InspectorDOMAgent.h:
     36        * inspector/front-end/Color.js:
     37        (WebInspector.Color.fromRGBA):
     38        (WebInspector.Color.prototype.toProtocolRGBA):
     39        * inspector/front-end/ElementsPanel.js:
     40        (WebInspector.ElementsPanel.prototype.setSearchingForNode):
     41        * inspector/front-end/MetricsSidebarPane.js:
     42        (WebInspector.MetricsSidebarPane.prototype._highlightDOMNode.handleMouseOver):
     43        (WebInspector.MetricsSidebarPane.prototype._highlightDOMNode.handleMouseOut):
     44        (WebInspector.MetricsSidebarPane.prototype._highlightDOMNode):
     45        * inspector/front-end/ResourcesPanel.js:
     46        (WebInspector.FrameTreeElement.prototype.set hovered):
     47        * inspector/front-end/TimelinePanel.js:
     48        (WebInspector.TimelinePanel.prototype._highlightRect):
     49        * inspector/front-end/inspector.css:
     50        * inspector/front-end/inspector.js:
     51        (WebInspector.buildHighlightConfig):
     52        (WebInspector.highlightDOMNode):
     53
    1542011-08-23  Sheriff Bot  <webkit.review.bot@gmail.com>
    255

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

    r93274 r93603  
    3434#include "Element.h"
    3535#include "FontCache.h"
     36#include "FontFamily.h"
    3637#include "Frame.h"
    3738#include "FrameView.h"
    3839#include "GraphicsContext.h"
     40#include "Node.h"
    3941#include "Page.h"
    4042#include "Range.h"
    … …  
    4749
    4850namespace {
     51
     52const static int rectInflatePx = 4;
     53const static int fontHeightPx = 12;
     54const static int borderWidthPx = 1;
     55const static int tooltipPadding = 4;
     56
     57const static int arrowTipOffset = 20;
     58const static int arrowHeight = 7;
     59const static int arrowHalfWidth = 7;
    4960
    5061Path quadToPath(const FloatQuad& quad)
    … …  
    5970}
    6071
    61 void drawOutlinedQuad(GraphicsContext& context, const FloatQuad& quad, const Color& fillColor)
     72void drawOutlinedQuad(GraphicsContext& context, const FloatQuad& quad, const Color& fillColor, const Color& outlineColor)
    6273{
    6374    static const int outlineThickness = 2;
    64     static const Color outlineColor(62, 86, 180, 228);
    6575
    6676    Path quadPath = quadToPath(quad);
    … …  
    8494}
    8595
    86 void drawOutlinedQuadWithClip(GraphicsContext& context, const FloatQuad& quad, const FloatQuad& clipQuad, const Color& fillColor)
     96void drawOutlinedQuadWithClip(GraphicsContext& context, const FloatQuad& quad, const FloatQuad& clipQuad, const Color& fillColor, const Color& outlineColor)
    8797{
    8898    context.save();
    8999    Path clipQuadPath = quadToPath(clipQuad);
    90100    context.clipOut(clipQuadPath);
    91     drawOutlinedQuad(context, quad, fillColor);
     101    drawOutlinedQuad(context, quad, fillColor, outlineColor);
    92102    context.restore();
    93103}
    94104
    95 void drawHighlightForBox(GraphicsContext& context, const FloatQuad& contentQuad, const FloatQuad& paddingQuad, const FloatQuad& borderQuad, const FloatQuad& marginQuad, DOMNodeHighlighter::HighlightMode mode)
    96 {
    97     static const Color contentBoxColor(125, 173, 217, 128);
    98     static const Color paddingBoxColor(125, 173, 217, 160);
    99     static const Color borderBoxColor(125, 173, 217, 192);
    100     static const Color marginBoxColor(125, 173, 217, 228);
     105void drawHighlightForBox(GraphicsContext& context, const FloatQuad& contentQuad, const FloatQuad& paddingQuad, const FloatQuad& borderQuad, const FloatQuad& marginQuad, HighlightData* highlightData)
     106{
     107    bool hasMargin = highlightData->margin != Color::transparent || highlightData->marginOutline != Color::transparent;
     108    bool hasBorder = highlightData->border != Color::transparent || highlightData->borderOutline != Color::transparent;
     109    bool hasPadding = highlightData->padding != Color::transparent || highlightData->paddingOutline != Color::transparent;
     110    bool hasContent = highlightData->content != Color::transparent || highlightData->contentOutline != Color::transparent;
    101111
    102112    FloatQuad clipQuad;
    103     if (mode == DOMNodeHighlighter::HighlightMargin || (mode == DOMNodeHighlighter::HighlightAll && marginQuad != borderQuad)) {
    104         drawOutlinedQuadWithClip(context, marginQuad, borderQuad, marginBoxColor);
     113    Color clipColor;
     114    if (hasMargin && (!hasBorder || marginQuad != borderQuad)) {
     115        drawOutlinedQuadWithClip(context, marginQuad, borderQuad, highlightData->margin, highlightData->marginOutline);
    105116        clipQuad = borderQuad;
    106     }
    107     if (mode == DOMNodeHighlighter::HighlightBorder || (mode == DOMNodeHighlighter::HighlightAll && borderQuad != paddingQuad)) {
    108         drawOutlinedQuadWithClip(context, borderQuad, paddingQuad, borderBoxColor);
     117        clipColor = highlightData->marginOutline;
     118    }
     119    if (hasBorder && (!hasPadding || borderQuad != paddingQuad)) {
     120        drawOutlinedQuadWithClip(context, borderQuad, paddingQuad, highlightData->border, highlightData->borderOutline);
    109121        clipQuad = paddingQuad;
    110     }
    111     if (mode == DOMNodeHighlighter::HighlightPadding || (mode == DOMNodeHighlighter::HighlightAll && paddingQuad != contentQuad)) {
    112         drawOutlinedQuadWithClip(context, paddingQuad, contentQuad, paddingBoxColor);
     122        clipColor = highlightData->borderOutline;
     123    }
     124    if (hasPadding && (!hasContent || paddingQuad != contentQuad)) {
     125        drawOutlinedQuadWithClip(context, paddingQuad, contentQuad, highlightData->padding, highlightData->paddingOutline);
    113126        clipQuad = contentQuad;
    114     }
    115     if (mode == DOMNodeHighlighter::HighlightContent || mode == DOMNodeHighlighter::HighlightAll)
    116         drawOutlinedQuad(context, contentQuad, contentBoxColor);
    117     else
    118         drawOutlinedQuadWithClip(context, clipQuad, clipQuad, contentBoxColor);
    119 }
    120 
    121 void drawHighlightForLineBoxesOrSVGRenderer(GraphicsContext& context, const Vector<FloatQuad>& lineBoxQuads)
    122 {
    123     static const Color lineBoxColor(125, 173, 217, 128);
    124 
     127        clipColor = highlightData->paddingOutline;
     128    }
     129    if (hasContent)
     130        drawOutlinedQuad(context, contentQuad, highlightData->content, highlightData->contentOutline);
     131    else {
     132        if (clipColor.isValid())
     133            drawOutlinedQuadWithClip(context, clipQuad, clipQuad, clipColor, clipColor);
     134    }
     135}
     136
     137void drawHighlightForLineBoxesOrSVGRenderer(GraphicsContext& context, const Vector<FloatQuad>& lineBoxQuads, HighlightData* highlightData)
     138{
    125139    for (size_t i = 0; i < lineBoxQuads.size(); ++i)
    126         drawOutlinedQuad(context, lineBoxQuads[i], lineBoxColor);
     140        drawOutlinedQuad(context, lineBoxQuads[i], highlightData->content, highlightData->contentOutline);
    127141}
    128142
    … …  
    133147}
    134148
     149int drawSubstring(const TextRun& globalTextRun, int offset, int length, const Color& textColor, const Font& font, GraphicsContext& context, const LayoutRect& titleRect)
     150{
     151    context.setFillColor(textColor, ColorSpaceDeviceRGB);
     152    context.drawText(font, globalTextRun, LayoutPoint(titleRect.x() + rectInflatePx, titleRect.y() + font.fontMetrics().height()), offset, offset + length);
     153    return offset + length;
     154}
     155
     156int calculateArrowTipX(const LayoutRect& anchorBox, const LayoutRect& titleRect)
     157{
     158    int anchorX = anchorBox.x();
     159
     160    // Check for heavily misaligned tooltip first.
     161    if (titleRect.x() > anchorBox.maxX())
     162        return titleRect.x() + arrowHalfWidth;
     163
     164    if (titleRect.maxX() < anchorX)
     165        return titleRect.maxX() - arrowHalfWidth;
     166
     167    int x = titleRect.x() + arrowTipOffset;
     168    if (x < anchorX)
     169        x = anchorX + arrowTipOffset;
     170    if (x > titleRect.maxX() - arrowHalfWidth)
     171        x = titleRect.maxX() - arrowHalfWidth;
     172
     173    return x;
     174}
     175
     176void setUpFontFamilies(FontDescription& fontDescription, WebCore::Settings* settings)
     177{
     178#define TOOLTIP_FONT_FAMILIES(size, ...) \
     179static unsigned tooltipFontFaceSize = size;\
     180static const AtomicString* tooltipFontFace[size] = { __VA_ARGS__ };
     181
     182#if OS(WINDOWS)
     183TOOLTIP_FONT_FAMILIES(2, new AtomicString("Consolas"), new AtomicString("Lucida Console"))
     184#elif OS(UNIX)
     185TOOLTIP_FONT_FAMILIES(1, new AtomicString("dejavu sans mono"))
     186#elif OS(MAC_OS_X)
     187TOOLTIP_FONT_FAMILIES(2, new AtomicString("Menlo"), new AtomicString("Monaco"))
     188#endif
     189// In the default case, we get the settings-provided monospace font.
     190
     191#undef TOOLTIP_FONT_FAMILIES
     192
     193    const AtomicString& fixedFontFamily = settings->fixedFontFamily();
     194    if (!fixedFontFamily.isEmpty()) {
     195        fontDescription.setGenericFamily(FontDescription::MonospaceFamily);
     196        FontFamily* currentFamily = 0;
     197        for (unsigned i = 0; i < tooltipFontFaceSize; ++i) {
     198            if (!currentFamily) {
     199                fontDescription.firstFamily().setFamily(*tooltipFontFace[i]);
     200                fontDescription.firstFamily().appendFamily(0);
     201                currentFamily = &fontDescription.firstFamily();
     202            } else {
     203                RefPtr<SharedFontFamily> newFamily = SharedFontFamily::create();
     204                newFamily->setFamily(*tooltipFontFace[i]);
     205                currentFamily->appendFamily(newFamily);
     206                currentFamily = newFamily.get();
     207            }
     208        }
     209        RefPtr<SharedFontFamily> newFamily = SharedFontFamily::create();
     210        newFamily->setFamily(fixedFontFamily);
     211        currentFamily->appendFamily(newFamily);
     212        currentFamily = newFamily.get();
     213    }
     214}
     215
    135216void drawElementTitle(GraphicsContext& context, Node* node, const LayoutRect& boundingBox, const LayoutRect& anchorBox, const FloatRect& overlayRect, WebCore::Settings* settings)
    136217{
    137     static const int rectInflatePx = 4;
    138     static const int fontHeightPx = 12;
    139     static const int borderWidthPx = 1;
    140     DEFINE_STATIC_LOCAL(Color, tooltipBackgroundColor, (255, 255, 194, 255));
    141     DEFINE_STATIC_LOCAL(Color, tooltipBorderColor, (Color::black));
    142     DEFINE_STATIC_LOCAL(Color, tooltipFontColor, (Color::black));
     218
     219    DEFINE_STATIC_LOCAL(Color, backgroundColor, (255, 255, 194, 255));
     220    DEFINE_STATIC_LOCAL(Color, tagColor, (136, 18, 128)); // Same as .webkit-html-tag.
     221    DEFINE_STATIC_LOCAL(Color, attrColor, (26, 26, 166)); // Same as .webkit-html-attribute-value.
     222    DEFINE_STATIC_LOCAL(Color, normalColor, (Color::black));
     223    DEFINE_STATIC_LOCAL(Color, pxAndBorderColor, (128, 128, 128));
     224
     225    DEFINE_STATIC_LOCAL(String, pxString, ("px"));
     226    const static UChar timesUChar[] = { 0x00D7, 0 };
     227    DEFINE_STATIC_LOCAL(String, timesString, (timesUChar)); // &times; string
     228
    143229    FontCachePurgePreventer fontCachePurgePreventer;
    144230
    145231    Element* element = static_cast<Element*>(node);
    146232    bool isXHTML = element->document()->isXHTMLDocument();
    147     String nodeTitle = isXHTML ? element->nodeName() : element->nodeName().lower();
     233    String nodeTitle(isXHTML ? element->nodeName() : element->nodeName().lower());
     234    unsigned tagNameLength = nodeTitle.length();
     235
    148236    const AtomicString& idValue = element->getIdAttribute();
     237    unsigned idStringLength = 0;
     238    String idString;
    149239    if (!idValue.isNull() && !idValue.isEmpty()) {
    150240        nodeTitle += "#";
    151241        nodeTitle += idValue;
    152     }
     242        idStringLength = 1 + idValue.length();
     243    }
     244
     245    HashSet<AtomicString> usedClassNames;
     246    unsigned classesStringLength = 0;
    153247    if (element->hasClass() && element->isStyledElement()) {
    154248        const SpaceSplitString& classNamesString = static_cast<StyledElement*>(element)->classNames();
    155249        size_t classNameCount = classNamesString.size();
    156         if (classNameCount) {
    157             HashSet<AtomicString> usedClassNames;
    158             for (size_t i = 0; i < classNameCount; ++i) {
    159                 const AtomicString& className = classNamesString[i];
    160                 if (usedClassNames.contains(className))
    161                     continue;
    162                 usedClassNames.add(className);
    163                 nodeTitle += ".";
    164                 nodeTitle += className;
    165             }
     250        for (size_t i = 0; i < classNameCount; ++i) {
     251            const AtomicString& className = classNamesString[i];
     252            if (usedClassNames.contains(className))
     253                continue;
     254            usedClassNames.add(className);
     255            nodeTitle += ".";
     256            nodeTitle += className;
     257            classesStringLength += 1 + className.length();
    166258        }
    167259    }
    168260
    169     nodeTitle += " [";
    170     nodeTitle += String::number(boundingBox.width());
    171     nodeTitle.append(static_cast<UChar>(0x00D7)); // &times;
    172     nodeTitle += String::number(boundingBox.height());
    173     nodeTitle += "]";
     261    String widthNumberPart = " " + String::number(boundingBox.width());
     262    nodeTitle += widthNumberPart + pxString;
     263    nodeTitle += timesString;
     264    String heightNumberPart = String::number(boundingBox.height());
     265    nodeTitle += heightNumberPart + pxString;
    174266
    175267    FontDescription desc;
    176     FontFamily family;
    177     family.setFamily(settings->fixedFontFamily());
    178     desc.setFamily(family);
     268    desc.setRenderingMode(settings->fontRenderingMode());
    179269    desc.setComputedSize(fontHeightPx);
     270    setUpFontFamilies(desc, settings);
    180271    Font font = Font(desc, 0, 0);
    181272    font.update(0);
    … …  
    184275    LayoutPoint titleBasePoint = LayoutPoint(anchorBox.x(), anchorBox.maxY() - 1);
    185276    titleBasePoint.move(rectInflatePx, rectInflatePx);
    186     LayoutRect titleRect = enclosingIntRect(font.selectionRectForText(nodeTitleRun, titleBasePoint, fontHeightPx));
     277    LayoutRect titleRect = enclosingLayoutRect(font.selectionRectForText(nodeTitleRun, titleBasePoint, fontHeightPx));
    187278    titleRect.inflate(rectInflatePx);
    188279
    … …  
    212303
    213304    titleRect.move(dx, dy);
    214     context.setStrokeColor(tooltipBorderColor, ColorSpaceDeviceRGB);
     305
     306    bool isArrowAtTop = titleRect.y() > anchorBox.y();
     307    titleRect.move(0, tooltipPadding * (isArrowAtTop ? 1 : -1));
     308
     309    context.setStrokeColor(pxAndBorderColor, ColorSpaceDeviceRGB);
    215310    context.setStrokeThickness(borderWidthPx);
    216     context.setFillColor(tooltipBackgroundColor, ColorSpaceDeviceRGB);
     311    context.setFillColor(backgroundColor, ColorSpaceDeviceRGB);
    217312    context.drawRect(titleRect);
    218     context.setFillColor(tooltipFontColor, ColorSpaceDeviceRGB);
    219     context.drawText(font, nodeTitleRun, LayoutPoint(titleRect.x() + rectInflatePx, titleRect.y() + font.fontMetrics().height()));
    220 }
    221 
    222 } // anonymous namespace
    223 
    224 namespace DOMNodeHighlighter {
    225 
    226 void drawNodeHighlight(GraphicsContext& context, Node* node, HighlightMode mode)
    227 {
     313
     314    {
     315        int arrowTipX = calculateArrowTipX(anchorBox, titleRect);
     316        FloatPoint arrowPoints[3];
     317        float arrowBaseY = isArrowAtTop ? titleRect.y() : titleRect.maxY();
     318        arrowPoints[0] = FloatPoint(arrowTipX - arrowHalfWidth, arrowBaseY);
     319        arrowPoints[1] = FloatPoint(arrowTipX, arrowBaseY + arrowHeight * (isArrowAtTop ? -1 : 1));
     320        arrowPoints[2] = FloatPoint(arrowTipX + arrowHalfWidth, arrowBaseY);
     321        context.drawConvexPolygon(3, arrowPoints);
     322
     323        context.setStrokeColor(backgroundColor, ColorSpaceDeviceRGB);
     324        context.setFillColor(backgroundColor, ColorSpaceDeviceRGB);
     325        context.setStrokeThickness(borderWidthPx + 1);
     326        LayoutPoint startPoint = LayoutPoint(arrowPoints[0].x() + 1, arrowPoints[0].y());
     327        LayoutPoint endPoint = LayoutPoint(arrowPoints[2].x() - 1, arrowPoints[2].y());
     328        context.drawLine(startPoint, endPoint);
     329    }
     330
     331    int currentPos = 0;
     332    currentPos = drawSubstring(nodeTitleRun, currentPos, tagNameLength, tagColor, font, context, titleRect);
     333    if (idStringLength)
     334        currentPos = drawSubstring(nodeTitleRun, currentPos, idStringLength, attrColor, font, context, titleRect);
     335    if (classesStringLength)
     336        currentPos = drawSubstring(nodeTitleRun, currentPos, classesStringLength, attrColor, font, context, titleRect);
     337    currentPos = drawSubstring(nodeTitleRun, currentPos, widthNumberPart.length(), normalColor, font, context, titleRect);
     338    currentPos = drawSubstring(nodeTitleRun, currentPos, pxString.length() + timesString.length(), pxAndBorderColor, font, context, titleRect);
     339    currentPos = drawSubstring(nodeTitleRun, currentPos, heightNumberPart.length(), normalColor, font, context, titleRect);
     340    drawSubstring(nodeTitleRun, currentPos, pxString.length(), pxAndBorderColor, font, context, titleRect);
     341}
     342
     343void drawNodeHighlight(GraphicsContext& context, HighlightData* highlightData)
     344{
     345    Node* node = highlightData->node.get();
    228346    RenderObject* renderer = node->renderer();
    229347    Frame* containingFrame = node->document()->frame();
    … …  
    241359    FrameView* view = containingFrame->page()->mainFrame()->view();
    242360    FloatRect overlayRect = view->visibleContentRect();
    243     if (!overlayRect.contains(boundingBox) && !boundingBox.contains(enclosingIntRect(overlayRect)))
     361    if (!overlayRect.contains(boundingBox) && !boundingBox.contains(enclosingLayoutRect(overlayRect)))
    244362        overlayRect = view->visibleContentRect();
    245363    context.translate(-overlayRect.x(), -overlayRect.y());
    … …  
    267385                          borderBox.width() + renderBox->marginLeft() + renderBox->marginRight(), borderBox.height() + renderBox->marginTop() + renderBox->marginBottom());
    268386
    269 
    270387        FloatQuad absContentQuad = renderBox->localToAbsoluteQuad(FloatRect(contentBox));
    271388        FloatQuad absPaddingQuad = renderBox->localToAbsoluteQuad(FloatRect(paddingBox));
    … …  
    280397        titleAnchorBox = absMarginQuad.enclosingBoundingBox();
    281398
    282         drawHighlightForBox(context, absContentQuad, absPaddingQuad, absBorderQuad, absMarginQuad, mode);
     399        drawHighlightForBox(context, absContentQuad, absPaddingQuad, absBorderQuad, absMarginQuad, highlightData);
    283400    } else if (renderer->isRenderInline() || isSVGRenderer) {
    284401        // FIXME: We should show margins/padding/border for inlines.
    … …  
    288405            lineBoxQuads[i] += mainFrameOffset;
    289406
    290         drawHighlightForLineBoxesOrSVGRenderer(context, lineBoxQuads);
     407        drawHighlightForLineBoxesOrSVGRenderer(context, lineBoxQuads, highlightData);
    291408    }
    292409
    … …  
    296413        return;
    297414
    298     WebCore::Settings* settings = containingFrame->settings();
    299     if (mode == DOMNodeHighlighter::HighlightAll)
    300         drawElementTitle(context, node, boundingBox, titleAnchorBox, overlayRect, settings);
    301 }
    302 
    303 void drawRectHighlight(GraphicsContext& context, Document* document, IntRect* rect)
     415    if (highlightData->showInfo)
     416        drawElementTitle(context, node, boundingBox, titleAnchorBox, overlayRect, containingFrame->settings());
     417}
     418
     419void drawRectHighlight(GraphicsContext& context, Document* document, HighlightData* highlightData)
    304420{
    305421    if (!document)
    … …  
    311427
    312428    static const int outlineThickness = 2;
    313     DEFINE_STATIC_LOCAL(Color, outlineColor, (255, 0, 0, 228));
    314     DEFINE_STATIC_LOCAL(Color, fillColor, (255, 0, 0, 20));
    315 
    316     Path quadPath = quadToPath(FloatRect(*rect));
     429
     430    Path quadPath = quadToPath(FloatRect(*(highlightData->rect)));
    317431
    318432    // Clip out the quad, then draw with a 2px stroke to get a pixel
    … …  
    323437
    324438        context.setStrokeThickness(outlineThickness);
    325         context.setStrokeColor(outlineColor, ColorSpaceDeviceRGB);
     439        context.setStrokeColor(highlightData->contentOutline, ColorSpaceDeviceRGB);
    326440        context.strokePath(quadPath);
    327441
    … …  
    330444
    331445    // Now do the fill
    332     context.setFillColor(fillColor, ColorSpaceDeviceRGB);
     446    context.setFillColor(highlightData->content, ColorSpaceDeviceRGB);
    333447    context.fillPath(quadPath);
    334448}
    335449
     450} // anonymous namespace
     451
     452namespace DOMNodeHighlighter {
     453
     454void drawHighlight(GraphicsContext& context, Document* document, HighlightData* highlightData)
     455{
     456    if (!highlightData)
     457        return;
     458
     459    if (highlightData->node)
     460        drawNodeHighlight(context, highlightData);
     461    else if (highlightData->rect)
     462        drawRectHighlight(context, document, highlightData);
     463}
     464
    336465} // namespace DOMNodeHighlighter
    337466

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

    r92284 r93603  
    3030#define DOMNodeHighlighter_h
    3131
     32#include "Color.h"
     33
     34#include <wtf/OwnPtr.h>
     35#include <wtf/RefPtr.h>
     36
    3237namespace WebCore {
    3338
     39class Color;
    3440class Document;
    3541class GraphicsContext;
    … …  
    3743class Node;
    3844
     45struct HighlightData {
     46    Color content;
     47    Color contentOutline;
     48    Color padding;
     49    Color paddingOutline;
     50    Color border;
     51    Color borderOutline;
     52    Color margin;
     53    Color marginOutline;
     54    bool showInfo;
     55
     56    // Either of these must be 0.
     57    RefPtr<Node> node;
     58    OwnPtr<IntRect> rect;
     59};
     60
    3961namespace DOMNodeHighlighter {
    4062
    41 enum HighlightMode {
    42     HighlightAll,
    43     HighlightContent,
    44     HighlightPadding,
    45     HighlightBorder,
    46     HighlightMargin
    47 };
    48 
    49 void drawNodeHighlight(GraphicsContext&, Node*, HighlightMode);
    50 
    51 void drawRectHighlight(GraphicsContext&, Document*, IntRect*);
     63void drawHighlight(GraphicsContext&, Document*, HighlightData*);
    5264
    5365} // namespace DOMNodeHighlighter

  • trunk/Source/WebCore/inspector/Inspector.json

    r93586 r93603  
    872872                ],
    873873                "description": "DOM interaction is implemented in terms of mirror objects that represent the actual DOM nodes. DOMNode is a base node mirror type."
     874            },
     875            {
     876                "id": "RGBA",
     877                "type": "object",
     878                "properties": [
     879                    { "name": "r", "type": "integer", "description": "The red component, in the [0-255] range." },
     880                    { "name": "g", "type": "integer", "description": "The green component, in the [0-255] range." },
     881                    { "name": "b", "type": "integer", "description": "The blue component, in the [0-255] range." },
     882                    { "name": "a", "type": "number", "optional": true, "description": "The alpha component, in the [0-1] range (default: 1)." }
     883                ],
     884                "description": "A structure holding an RGBA color."
     885            },
     886            {
     887                "id": "BoxHighlightConfig",
     888                "type": "object",
     889                "properties": [
     890                    { "name": "showInfo", "type": "boolean", "optional": true, "description": "Whether the node info tooltip should be shown (default: false)." },
     891                    { "name": "contentColor", "$ref": "RGBA", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
     892                    { "name": "contentOutlineColor", "$ref": "RGBA", "optional": true, "description": "The content box highlight outline color (default: transparent)." },
     893                    { "name": "paddingColor", "$ref": "RGBA", "optional": true, "description": "The padding highlight fill color (default: transparent)." },
     894                    { "name": "paddingOutlineColor", "$ref": "RGBA", "optional": true, "description": "The padding highlight outline color (default: transparent)." },
     895                    { "name": "borderColor", "$ref": "RGBA", "optional": true, "description": "The border highlight fill color (default: transparent)." },
     896                    { "name": "borderOutlineColor", "$ref": "RGBA", "optional": true, "description": "The border highlight outline color (default: transparent)." },
     897                    { "name": "marginColor", "$ref": "RGBA", "optional": true, "description": "The margin highlight fill color (default: transparent)." },
     898                    { "name": "marginOutlineColor", "$ref": "RGBA", "optional": true, "description": "The margin highlight outline color (default: transparent)." }
     899                ],
     900                "description": "Configuration data for the highlighting of page elements."
    874901            }
    875902        ],
    … …  
    10311058                "hidden": true,
    10321059                "parameters": [
    1033                     { "name": "enabled", "type": "boolean", "description": "True to enable inspection mode, false to disable it." }
     1060                    { "name": "enabled", "type": "boolean", "description": "True to enable inspection mode, false to disable it." },
     1061                    { "name": "highlightConfig", "$ref": "BoxHighlightConfig", "optional": true, "description": "A descriptor for the highlight appearance of hovered-over nodes. May be omitted if <code>enabled == false</code>." }
    10341062                ],
    10351063                "description": "Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspect' command upon element selection."
    … …  
    10411069                    { "name": "y", "type": "integer", "description": "Y coordinate" },
    10421070                    { "name": "width", "type": "integer", "description": "Rectangle width" },
    1043                     { "name": "height", "type": "integer", "description": "Rectangle height" }
     1071                    { "name": "height", "type": "integer", "description": "Rectangle height" },
     1072                    { "name": "color", "$ref": "RGBA", "optional": true, "description": "The highlight fill color (default: transparent)." },
     1073                    { "name": "outlineColor", "$ref": "RGBA", "optional": true, "description": "The highlight outline color (default: transparent)." }
    10441074                ],
    10451075                "description": "Highlights given rectangle. Coordinates are absolute with respect to the main frame viewport."
    … …  
    10481078                "name": "highlightNode",
    10491079                "parameters": [
    1050                     { "name": "nodeId", "$ref": "NodeId", "description": "Identifier of the node to highlight" },
    1051                     { "name": "mode", "type": "string", "enum": ["all", "content", "padding", "border", "margin"], "optional": true, "description": "The box model component(s) to highlight (default: \"all\")." }
     1080                    { "name": "nodeId", "$ref": "NodeId", "description": "Identifier of the node to highlight." },
     1081                    { "name": "highlightConfig", "$ref": "BoxHighlightConfig", "description": "A descriptor for the highlight appearance." }
    10521082                ],
    10531083                "description": "Highlights DOM node with given id."
    … …  
    10601090                "name": "highlightFrame",
    10611091                "parameters": [
    1062                     { "name": "frameId", "type": "string", "description": "Identifier of the frame to highlight" }
     1092                    { "name": "frameId", "type": "string", "description": "Identifier of the frame to highlight." },
     1093                    { "name": "contentColor", "$ref": "RGBA", "optional": true, "description": "The content box highlight fill color (default: transparent)." },
     1094                    { "name": "contentOutlineColor", "$ref": "RGBA", "optional": true, "description": "The content box highlight outline color (default: transparent)." }
    10631095                ],
    10641096                "description": "Highlights owner element of the frame with given id.",

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

    r93586 r93603  
    9999};
    100100
     101static Color parseColor(const RefPtr<InspectorObject>* colorObject)
     102{
     103    if (!colorObject || !(*colorObject))
     104        return Color::transparent;
     105
     106    int r;
     107    int g;
     108    int b;
     109    bool success = (*colorObject)->getNumber("r", &r);
     110    success |= (*colorObject)->getNumber("g", &g);
     111    success |= (*colorObject)->getNumber("b", &b);
     112    if (!success)
     113        return Color::transparent;
     114
     115    double a;
     116    success = (*colorObject)->getNumber("a", &a);
     117    if (!success)
     118        return Color(r, g, b);
     119
     120    // Clamp alpha to the [0..1] range.
     121    if (a < 0)
     122        a = 0;
     123    else if (a > 1)
     124        a = 1;
     125
     126    return Color(r, g, b, static_cast<int>(a * 255));
     127}
     128
     129static Color parseConfigColor(const String& fieldName, InspectorObject* configObject)
     130{
     131    const RefPtr<InspectorObject> colorObject = configObject->getObject(fieldName);
     132    return parseColor(&colorObject);
     133}
     134
    101135class MatchJob {
    102136public:
    … …  
    276310{
    277311    reset();
    278     ASSERT(!m_highlightedNode);
     312    ASSERT(!m_highlightData || (!m_highlightData->node && !m_highlightData->rect));
    279313    ASSERT(!m_searchingForNode);
    280314}
    … …  
    294328{
    295329    ASSERT(m_frontend);
    296     setSearchingForNode(false);
     330    setSearchingForNode(false, 0);
    297331
    298332    ErrorString error;
    … …  
    322356    }
    323357    return result;
     358}
     359
     360Node* InspectorDOMAgent::highlightedNode() const
     361{
     362    return m_highlightData ? m_highlightData->node.get() : 0;
    324363}
    325364
    … …  
    935974        return false;
    936975
    937     if (m_highlightedNode) {
    938         RefPtr<Node> node = m_highlightedNode;
    939         setSearchingForNode(false);
     976    if (m_highlightData && m_highlightData->node) {
     977        RefPtr<Node> node = m_highlightData->node;
     978        setSearchingForNode(false, 0);
    940979        inspect(node.get());
    941980    }
    … …  
    9781017void InspectorDOMAgent::mouseDidMoveOverElement(const HitTestResult& result, unsigned)
    9791018{
    980     if (!m_searchingForNode)
     1019    if (!m_searchingForNode || !m_highlightData)
    9811020        return;
    9821021
    … …  
    9851024        node = node->parentNode();
    9861025    if (node) {
    987         ErrorString error;
    988         highlight(&error, node, "all");
    989     }
    990 }
    991 
    992 void InspectorDOMAgent::setSearchingForNode(bool enabled)
     1026        m_highlightData->node = node;
     1027        highlight();
     1028    }
     1029}
     1030
     1031void InspectorDOMAgent::setSearchingForNode(bool enabled, InspectorObject* highlightConfig)
    9931032{
    9941033    if (m_searchingForNode == enabled)
    9951034        return;
    9961035    m_searchingForNode = enabled;
    997     if (!enabled) {
     1036    if (enabled)
     1037        setHighlightDataFromConfig(highlightConfig);
     1038    else {
    9981039        ErrorString error;
    9991040        hideHighlight(&error);
    1000     }
    1001 }
    1002 
    1003 void InspectorDOMAgent::setInspectModeEnabled(ErrorString*, bool enabled)
    1004 {
    1005     setSearchingForNode(enabled);
    1006 }
    1007 
    1008 void InspectorDOMAgent::highlight(ErrorString*, Node* node, const String& mode)
    1009 {
    1010     ASSERT_ARG(node, node);
    1011     m_highlightedNode = node;
    1012     m_highlightMode = mode;
     1041        m_highlightData.clear();
     1042    }
     1043}
     1044
     1045void InspectorDOMAgent::setInspectModeEnabled(ErrorString*, bool enabled, const RefPtr<InspectorObject>* highlightConfig)
     1046{
     1047    setSearchingForNode(enabled, highlightConfig ? highlightConfig->get() : 0);
     1048}
     1049
     1050bool InspectorDOMAgent::setHighlightDataFromConfig(InspectorObject* highlightConfig)
     1051{
     1052    if (!highlightConfig) {
     1053        m_highlightData.clear();
     1054        return false;
     1055    }
     1056
     1057    m_highlightData = adoptPtr(new HighlightData());
     1058    bool showInfo = false; // Default: false (do not show a tooltip).
     1059    highlightConfig->getBoolean("showInfo", &showInfo);
     1060    m_highlightData->showInfo = showInfo;
     1061    m_highlightData->content = parseConfigColor("contentColor", highlightConfig);
     1062    m_highlightData->contentOutline = parseConfigColor("contentOutlineColor", highlightConfig);
     1063    m_highlightData->padding = parseConfigColor("paddingColor", highlightConfig);
     1064    m_highlightData->paddingOutline = parseConfigColor("paddingOutlineColor", highlightConfig);
     1065    m_highlightData->border = parseConfigColor("borderColor", highlightConfig);
     1066    m_highlightData->borderOutline = parseConfigColor("borderOutlineColor", highlightConfig);
     1067    m_highlightData->margin = parseConfigColor("marginColor", highlightConfig);
     1068    m_highlightData->marginOutline = parseConfigColor("marginOutlineColor", highlightConfig);
     1069    return true;
     1070}
     1071
     1072void InspectorDOMAgent::highlight()
     1073{
     1074    // This method requires m_highlightData to have been filled in by its client.
     1075    ASSERT(m_highlightData);
    10131076    m_client->highlight();
    10141077}
    10151078
    1016 void InspectorDOMAgent::highlightRect(ErrorString*, int x, int y, int width, int height)
    1017 {
    1018     m_highlightedRect = adoptPtr(new IntRect(x, y, width, height));
     1079void InspectorDOMAgent::highlightRect(ErrorString*, int x, int y, int width, int height, const RefPtr<InspectorObject>* color, const RefPtr<InspectorObject>* outlineColor)
     1080{
     1081    m_highlightData = adoptPtr(new HighlightData());
     1082    m_highlightData->rect = adoptPtr(new IntRect(x, y, width, height));
     1083    m_highlightData->content = parseColor(color);
     1084    m_highlightData->contentOutline = parseColor(outlineColor);
    10191085    m_client->highlight();
    10201086}
    10211087
    1022 void InspectorDOMAgent::highlightNode(ErrorString* error, int nodeId, String* mode)
    1023 {
    1024     if (Node* node = nodeForId(nodeId))
    1025         highlight(error, node, mode && !mode->isEmpty() ? *mode : "all");
    1026 }
    1027 
    1028 void InspectorDOMAgent::highlightFrame(ErrorString* error, const String& frameId)
     1088void InspectorDOMAgent::highlightNode(
     1089    ErrorString*,
     1090    int nodeId,
     1091    const RefPtr<InspectorObject> highlightConfig)
     1092{
     1093    if (Node* node = nodeForId(nodeId)) {
     1094        if (setHighlightDataFromConfig(highlightConfig.get())) {
     1095            m_highlightData->node = node;
     1096            highlight();
     1097        }
     1098    }
     1099}
     1100
     1101void InspectorDOMAgent::highlightFrame(
     1102    ErrorString* error,
     1103    const String& frameId,
     1104    const RefPtr<InspectorObject>* color,
     1105    const RefPtr<InspectorObject>* outlineColor)
    10291106{
    10301107    Frame* frame = m_pageAgent->frameForId(frameId);
    1031     if (frame && frame->ownerElement())
    1032         highlight(error, frame->ownerElement(), "all");
     1108    if (frame && frame->ownerElement()) {
     1109        m_highlightData = adoptPtr(new HighlightData());
     1110        m_highlightData->node = frame->ownerElement();
     1111        m_highlightData->showInfo = true; // Always show tooltips for frames.
     1112        m_highlightData->content = parseColor(color);
     1113        m_highlightData->contentOutline = parseColor(outlineColor);
     1114        highlight();
     1115    }
    10331116}
    10341117
    10351118void InspectorDOMAgent::hideHighlight(ErrorString*)
    10361119{
    1037     m_highlightedNode = 0;
    1038     m_highlightedRect.clear();
     1120    if (m_highlightData) {
     1121        m_highlightData->node.clear();
     1122        m_highlightData->rect.clear();
     1123    }
    10391124    m_client->hideHighlight();
    10401125}
    … …  
    15121597void InspectorDOMAgent::drawHighlight(GraphicsContext& context) const
    15131598{
    1514     if (m_highlightedRect) {
    1515         DOMNodeHighlighter::drawRectHighlight(context, m_document.get(), m_highlightedRect.get());
    1516         return;
    1517     }
    1518 
    1519     if (!m_highlightedNode)
    1520         return;
    1521 
    1522     DOMNodeHighlighter::HighlightMode mode = DOMNodeHighlighter::HighlightAll;
    1523     if (m_highlightMode == "content")
    1524         mode = DOMNodeHighlighter::HighlightContent;
    1525     else if (m_highlightMode == "padding")
    1526         mode = DOMNodeHighlighter::HighlightPadding;
    1527     else if (m_highlightMode == "border")
    1528         mode = DOMNodeHighlighter::HighlightBorder;
    1529     else if (m_highlightMode == "margin")
    1530         mode = DOMNodeHighlighter::HighlightMargin;
    1531     DOMNodeHighlighter::drawNodeHighlight(context, m_highlightedNode.get(), mode);
     1599    if (!m_highlightData)
     1600        return;
     1601
     1602    DOMNodeHighlighter::drawHighlight(context, m_highlightData->node ? m_highlightData->node->document() : m_document.get(), m_highlightData.get());
    15321603}
    15331604

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

    r93586 r93603  
    6363class MatchJob;
    6464class HTMLElement;
     65class HighlightData;
    6566class InspectorState;
    6667class InstrumentingAgents;
    … …  
    130131    void resolveNode(ErrorString*, int nodeId, const String* const objectGroup, RefPtr<InspectorObject>* result);
    131132    void getAttributes(ErrorString*, int nodeId, RefPtr<InspectorArray>* result);
    132     void setInspectModeEnabled(ErrorString*, bool enabled);
     133    void setInspectModeEnabled(ErrorString*, bool enabled, const RefPtr<InspectorObject>* highlightConfig);
    133134    void requestNode(ErrorString*, const String& objectId, int* nodeId);
    134135    void pushNodeByPathToFrontend(ErrorString*, const String& path, int* nodeId);
    135136    void hideHighlight(ErrorString*);
    136     void highlightRect(ErrorString*, int x, int y, int width, int height);
    137     void highlightNode(ErrorString*, int nodeId, String* mode);
    138     void highlightFrame(ErrorString*, const String& frameId);
     137    void highlightRect(ErrorString*, int x, int y, int width, int height, const RefPtr<InspectorObject>* color, const RefPtr<InspectorObject>* outlineColor);
     138    void highlightNode(ErrorString*, int nodeId, const RefPtr<InspectorObject> highlightConfig);
     139    void highlightFrame(ErrorString*, const String& frameId, const RefPtr<InspectorObject>* color, const RefPtr<InspectorObject>* outlineColor);
    139140    void moveTo(ErrorString*, int nodeId, int targetNodeId, const int* const anchorNodeId, int* newNodeId);
    140141
    141     Node* highlightedNode() const { return m_highlightedNode.get(); }
     142    Node* highlightedNode() const;
    142143
    143144    // Methods called from the InspectorInstrumentation.
    … …  
    183184    InspectorDOMAgent(InstrumentingAgents*, InspectorPageAgent*, InspectorClient*, InspectorState*, InjectedScriptManager*);
    184185
    185     void setSearchingForNode(bool enabled);
    186     void highlight(ErrorString*, Node*, const String& mode);
     186    void setSearchingForNode(bool enabled, InspectorObject* highlightConfig);
     187    bool setHighlightDataFromConfig(InspectorObject* highlightConfig);
     188    void highlight();
    187189
    188190    // Node-related methods.
    … …  
    232234    HashSet<RefPtr<Node> > m_searchResults;
    233235    OwnPtr<RevalidateStyleAttributeTask> m_revalidateStyleAttrTask;
    234     RefPtr<Node> m_highlightedNode;
    235     OwnPtr<IntRect> m_highlightedRect;
    236     String m_highlightMode;
     236    OwnPtr<HighlightData> m_highlightData;
    237237    RefPtr<Node> m_nodeToFocus;
    238238    bool m_searchingForNode;

  • trunk/Source/WebCore/inspector/front-end/Color.js

    r80823 r93603  
    3434}
    3535
     36WebInspector.Color.fromRGBA = function(r, g, b, a)
     37{
     38    return new WebInspector.Color("rgba(" + r + "," + g + "," + b + "," + (typeof a === "undefined" ? 1 : a) + ")");
     39}
     40
    3641WebInspector.Color.prototype = {
    3742    get shorthex()
    … …  
    165170
    166171        throw "invalid color format";
     172    },
     173
     174    toProtocolRGBA: function()
     175    {
     176        if (this._protocolRGBA)
     177            return this._protocolRGBA;
     178
     179        var components = this.rgba;
     180        if (components)
     181            this._protocolRGBA = { r: Number(components[0]), g: Number(components[1]), b: Number(components[2]), a: Number(components[3]) };
     182        else {
     183            components = this.rgb;
     184            this._protocolRGBA = { r: Number(components[0]), g: Number(components[1]), b: Number(components[2]) };
     185        }
     186        return this._protocolRGBA;
    167187    },
    168188
    … …  
    662682    "hsla(0,0,0,0)": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"],
    663683};
     684
     685WebInspector.Color.PageHighlight = {
     686    Content: WebInspector.Color.fromRGBA(111, 168, 220, .66),
     687    ContentOutline: WebInspector.Color.fromRGBA(9, 83, 148),
     688    Padding: WebInspector.Color.fromRGBA(147, 196, 125, .55),
     689    PaddingOutline: WebInspector.Color.fromRGBA(55, 118, 28),
     690    Border: WebInspector.Color.fromRGBA(255, 229, 153, .66),
     691    BorderOutline: WebInspector.Color.fromRGBA(127, 96, 0),
     692    Margin: WebInspector.Color.fromRGBA(246, 178, 107, .66),
     693    MarginOutline: WebInspector.Color.fromRGBA(180, 95, 4)
     694}

  • trunk/Source/WebCore/inspector/front-end/ElementsPanel.js

    r93584 r93603  
    11101110    setSearchingForNode: function(enabled)
    11111111    {
    1112         DOMAgent.setInspectModeEnabled(enabled, this._setSearchingForNode.bind(this, enabled));
     1112        DOMAgent.setInspectModeEnabled(enabled, WebInspector.buildHighlightConfig(), this._setSearchingForNode.bind(this, enabled));
    11131113    },
    11141114

  • trunk/Source/WebCore/inspector/front-end/MetricsSidebarPane.js

    r91070 r93603  
    129129            return;
    130130
     131        function handleMouseOver(element)
     132        {
     133            element.addStyleClass("hovered");
     134
     135            var bgColor;
     136            if (element.hasStyleClass("margin"))
     137                bgColor = WebInspector.Color.PageHighlight.Margin.toString("original");
     138            else if (element.hasStyleClass("border"))
     139                bgColor = WebInspector.Color.PageHighlight.Border.toString("original");
     140            else if (element.hasStyleClass("padding"))
     141                bgColor = WebInspector.Color.PageHighlight.Padding.toString("original");
     142            else if (element.hasStyleClass("content"))
     143                bgColor = WebInspector.Color.PageHighlight.Content.toString("original");
     144            if (bgColor)
     145                element.style.backgroundColor = bgColor;
     146        }
     147
     148        function handleMouseOut(element)
     149        {
     150            element.style.backgroundColor = "";
     151            element.removeStyleClass("hovered");
     152        }
     153
    131154        if (showHighlight) {
    132155            // Into element.
    133156            if (this.node && toElement)
    134                 toElement.addStyleClass("hovered");
     157                handleMouseOver(toElement);
    135158            var nodeId = this.node ? this.node.id : 0;
    136159        } else {
    137160            // Out of element.
    138161            if (fromElement)
    139                 fromElement.removeStyleClass("hovered");
     162                handleMouseOut(fromElement);
    140163            var nodeId = 0;
    141164        }

  • trunk/Source/WebCore/inspector/front-end/ResourcesPanel.js

    r93584 r93603  
    10961096        if (hovered) {
    10971097            this.listItemElement.addStyleClass("hovered");
    1098             DOMAgent.highlightFrame(this._frameId);
     1098            DOMAgent.highlightFrame(this._frameId, WebInspector.Color.PageHighlight.Content.toProtocolRGBA(), WebInspector.Color.PageHighlight.ContentOutline.toProtocolRGBA());
    10991099        } else {
    11001100            this.listItemElement.removeStyleClass("hovered");

  • trunk/Source/WebCore/inspector/front-end/TimelinePanel.js

    r93196 r93603  
    738738            return;
    739739        this._highlightedRect = record.data;
    740         DOMAgent.highlightRect(this._highlightedRect.x, this._highlightedRect.y, this._highlightedRect.width, this._highlightedRect.height);
     740        DOMAgent.highlightRect(this._highlightedRect.x, this._highlightedRect.y, this._highlightedRect.width, this._highlightedRect.height, WebInspector.Color.PageHighlight.Content.toProtocolRGBA(), WebInspector.Color.PageHighlight.ContentOutline.toProtocolRGBA());
    741741    },
    742742

  • trunk/Source/WebCore/inspector/front-end/inspector.css

    r93127 r93603  
    18891889}
    18901890
    1891 .metrics .margin.hovered {
    1892     background-color: rgb(139, 182, 221);
    1893 }
    1894 
    18951891.metrics .border {
    18961892    border: 1px black solid;
    … …  
    19031899}
    19041900
    1905 .metrics .border.hovered {
    1906     background-color: rgb(157, 193, 226);
    1907 }
    1908 
    19091901.metrics .padding {
    19101902    border: 1px grey dashed;
    … …  
    19151907    padding: 3px;
    19161908    margin: 3px;
    1917 }
    1918 
    1919 .metrics .padding.hovered {
    1920     background-color: rgb(173, 204, 231);
    19211909}
    19221910
    … …  
    19331921    text-align: center;
    19341922    overflow: visible;
    1935 }
    1936 
    1937 .metrics .content.hovered {
    1938     background-color: rgb(190, 214, 236);
    19391923}
    19401924

  • trunk/Source/WebCore/inspector/front-end/inspector.js

    r93584 r93603  
    372372    },
    373373
     374    buildHighlightConfig: function(mode)
     375    {
     376        mode = mode || "all";
     377        var highlightConfig = { showInfo: mode === "all" };
     378        if (mode === "all" || mode === "content") {
     379            highlightConfig.contentColor = WebInspector.Color.PageHighlight.Content.toProtocolRGBA();
     380            highlightConfig.contentOutlineColor = WebInspector.Color.PageHighlight.ContentOutline.toProtocolRGBA();
     381        }
     382
     383        if (mode === "all" || mode === "padding") {
     384            highlightConfig.paddingColor = WebInspector.Color.PageHighlight.Padding.toProtocolRGBA();
     385            highlightConfig.paddingOutlineColor = WebInspector.Color.PageHighlight.PaddingOutline.toProtocolRGBA();
     386        }
     387
     388        if (mode === "all" || mode === "border") {
     389            highlightConfig.borderColor = WebInspector.Color.PageHighlight.Border.toProtocolRGBA();
     390            highlightConfig.borderOutlineColor = WebInspector.Color.PageHighlight.BorderOutline.toProtocolRGBA();
     391        }
     392
     393        if (mode === "all" || mode === "margin") {
     394            highlightConfig.marginColor = WebInspector.Color.PageHighlight.Margin.toProtocolRGBA();
     395            highlightConfig.marginOutlineColor = WebInspector.Color.PageHighlight.MarginOutline.toProtocolRGBA();
     396        }
     397
     398        return highlightConfig;
     399    },
     400
    374401    highlightDOMNode: function(nodeId, mode)
    375402    {
    … …  
    384411        this._highlightedDOMNodeId = nodeId;
    385412        if (nodeId)
    386             DOMAgent.highlightNode(nodeId, mode || "all");
     413            DOMAgent.highlightNode(nodeId, this.buildHighlightConfig(mode));
    387414        else
    388415            DOMAgent.hideHighlight();
Note: See TracChangeset for help on using the changeset viewer.