Changeset 93603 in webkit
- Timestamp:
- Aug 23, 2011 7:38:07 AM (13 years ago)
- Location:
- trunk/Source/WebCore
- Files:
-
- 13 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebCore/ChangeLog
r93601 r93603 1 2011-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 1 54 2011-08-23 Sheriff Bot <webkit.review.bot@gmail.com> 2 55 -
trunk/Source/WebCore/inspector/DOMNodeHighlighter.cpp
r93274 r93603 34 34 #include "Element.h" 35 35 #include "FontCache.h" 36 #include "FontFamily.h" 36 37 #include "Frame.h" 37 38 #include "FrameView.h" 38 39 #include "GraphicsContext.h" 40 #include "Node.h" 39 41 #include "Page.h" 40 42 #include "Range.h" … … 47 49 48 50 namespace { 51 52 const static int rectInflatePx = 4; 53 const static int fontHeightPx = 12; 54 const static int borderWidthPx = 1; 55 const static int tooltipPadding = 4; 56 57 const static int arrowTipOffset = 20; 58 const static int arrowHeight = 7; 59 const static int arrowHalfWidth = 7; 49 60 50 61 Path quadToPath(const FloatQuad& quad) … … 59 70 } 60 71 61 void drawOutlinedQuad(GraphicsContext& context, const FloatQuad& quad, const Color& fillColor )72 void drawOutlinedQuad(GraphicsContext& context, const FloatQuad& quad, const Color& fillColor, const Color& outlineColor) 62 73 { 63 74 static const int outlineThickness = 2; 64 static const Color outlineColor(62, 86, 180, 228);65 75 66 76 Path quadPath = quadToPath(quad); … … 84 94 } 85 95 86 void drawOutlinedQuadWithClip(GraphicsContext& context, const FloatQuad& quad, const FloatQuad& clipQuad, const Color& fillColor )96 void drawOutlinedQuadWithClip(GraphicsContext& context, const FloatQuad& quad, const FloatQuad& clipQuad, const Color& fillColor, const Color& outlineColor) 87 97 { 88 98 context.save(); 89 99 Path clipQuadPath = quadToPath(clipQuad); 90 100 context.clipOut(clipQuadPath); 91 drawOutlinedQuad(context, quad, fillColor );101 drawOutlinedQuad(context, quad, fillColor, outlineColor); 92 102 context.restore(); 93 103 } 94 104 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);105 void 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; 101 111 102 112 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); 105 116 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); 109 121 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); 113 126 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 137 void drawHighlightForLineBoxesOrSVGRenderer(GraphicsContext& context, const Vector<FloatQuad>& lineBoxQuads, HighlightData* highlightData) 138 { 125 139 for (size_t i = 0; i < lineBoxQuads.size(); ++i) 126 drawOutlinedQuad(context, lineBoxQuads[i], lineBoxColor);140 drawOutlinedQuad(context, lineBoxQuads[i], highlightData->content, highlightData->contentOutline); 127 141 } 128 142 … … 133 147 } 134 148 149 int 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 156 int 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 176 void setUpFontFamilies(FontDescription& fontDescription, WebCore::Settings* settings) 177 { 178 #define TOOLTIP_FONT_FAMILIES(size, ...) \ 179 static unsigned tooltipFontFaceSize = size;\ 180 static const AtomicString* tooltipFontFace[size] = { __VA_ARGS__ }; 181 182 #if OS(WINDOWS) 183 TOOLTIP_FONT_FAMILIES(2, new AtomicString("Consolas"), new AtomicString("Lucida Console")) 184 #elif OS(UNIX) 185 TOOLTIP_FONT_FAMILIES(1, new AtomicString("dejavu sans mono")) 186 #elif OS(MAC_OS_X) 187 TOOLTIP_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 135 216 void drawElementTitle(GraphicsContext& context, Node* node, const LayoutRect& boundingBox, const LayoutRect& anchorBox, const FloatRect& overlayRect, WebCore::Settings* settings) 136 217 { 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)); // × string 228 143 229 FontCachePurgePreventer fontCachePurgePreventer; 144 230 145 231 Element* element = static_cast<Element*>(node); 146 232 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 148 236 const AtomicString& idValue = element->getIdAttribute(); 237 unsigned idStringLength = 0; 238 String idString; 149 239 if (!idValue.isNull() && !idValue.isEmpty()) { 150 240 nodeTitle += "#"; 151 241 nodeTitle += idValue; 152 } 242 idStringLength = 1 + idValue.length(); 243 } 244 245 HashSet<AtomicString> usedClassNames; 246 unsigned classesStringLength = 0; 153 247 if (element->hasClass() && element->isStyledElement()) { 154 248 const SpaceSplitString& classNamesString = static_cast<StyledElement*>(element)->classNames(); 155 249 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(); 166 258 } 167 259 } 168 260 169 nodeTitle += " [";170 nodeTitle += String::number(boundingBox.width());171 nodeTitle .append(static_cast<UChar>(0x00D7)); // ×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; 174 266 175 267 FontDescription desc; 176 FontFamily family; 177 family.setFamily(settings->fixedFontFamily()); 178 desc.setFamily(family); 268 desc.setRenderingMode(settings->fontRenderingMode()); 179 269 desc.setComputedSize(fontHeightPx); 270 setUpFontFamilies(desc, settings); 180 271 Font font = Font(desc, 0, 0); 181 272 font.update(0); … … 184 275 LayoutPoint titleBasePoint = LayoutPoint(anchorBox.x(), anchorBox.maxY() - 1); 185 276 titleBasePoint.move(rectInflatePx, rectInflatePx); 186 LayoutRect titleRect = enclosing IntRect(font.selectionRectForText(nodeTitleRun, titleBasePoint, fontHeightPx));277 LayoutRect titleRect = enclosingLayoutRect(font.selectionRectForText(nodeTitleRun, titleBasePoint, fontHeightPx)); 187 278 titleRect.inflate(rectInflatePx); 188 279 … … 212 303 213 304 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); 215 310 context.setStrokeThickness(borderWidthPx); 216 context.setFillColor( tooltipBackgroundColor, ColorSpaceDeviceRGB);311 context.setFillColor(backgroundColor, ColorSpaceDeviceRGB); 217 312 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 343 void drawNodeHighlight(GraphicsContext& context, HighlightData* highlightData) 344 { 345 Node* node = highlightData->node.get(); 228 346 RenderObject* renderer = node->renderer(); 229 347 Frame* containingFrame = node->document()->frame(); … … 241 359 FrameView* view = containingFrame->page()->mainFrame()->view(); 242 360 FloatRect overlayRect = view->visibleContentRect(); 243 if (!overlayRect.contains(boundingBox) && !boundingBox.contains(enclosing IntRect(overlayRect)))361 if (!overlayRect.contains(boundingBox) && !boundingBox.contains(enclosingLayoutRect(overlayRect))) 244 362 overlayRect = view->visibleContentRect(); 245 363 context.translate(-overlayRect.x(), -overlayRect.y()); … … 267 385 borderBox.width() + renderBox->marginLeft() + renderBox->marginRight(), borderBox.height() + renderBox->marginTop() + renderBox->marginBottom()); 268 386 269 270 387 FloatQuad absContentQuad = renderBox->localToAbsoluteQuad(FloatRect(contentBox)); 271 388 FloatQuad absPaddingQuad = renderBox->localToAbsoluteQuad(FloatRect(paddingBox)); … … 280 397 titleAnchorBox = absMarginQuad.enclosingBoundingBox(); 281 398 282 drawHighlightForBox(context, absContentQuad, absPaddingQuad, absBorderQuad, absMarginQuad, mode);399 drawHighlightForBox(context, absContentQuad, absPaddingQuad, absBorderQuad, absMarginQuad, highlightData); 283 400 } else if (renderer->isRenderInline() || isSVGRenderer) { 284 401 // FIXME: We should show margins/padding/border for inlines. … … 288 405 lineBoxQuads[i] += mainFrameOffset; 289 406 290 drawHighlightForLineBoxesOrSVGRenderer(context, lineBoxQuads );407 drawHighlightForLineBoxesOrSVGRenderer(context, lineBoxQuads, highlightData); 291 408 } 292 409 … … 296 413 return; 297 414 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 419 void drawRectHighlight(GraphicsContext& context, Document* document, HighlightData* highlightData) 304 420 { 305 421 if (!document) … … 311 427 312 428 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))); 317 431 318 432 // Clip out the quad, then draw with a 2px stroke to get a pixel … … 323 437 324 438 context.setStrokeThickness(outlineThickness); 325 context.setStrokeColor( outlineColor, ColorSpaceDeviceRGB);439 context.setStrokeColor(highlightData->contentOutline, ColorSpaceDeviceRGB); 326 440 context.strokePath(quadPath); 327 441 … … 330 444 331 445 // Now do the fill 332 context.setFillColor( fillColor, ColorSpaceDeviceRGB);446 context.setFillColor(highlightData->content, ColorSpaceDeviceRGB); 333 447 context.fillPath(quadPath); 334 448 } 335 449 450 } // anonymous namespace 451 452 namespace DOMNodeHighlighter { 453 454 void 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 336 465 } // namespace DOMNodeHighlighter 337 466 -
trunk/Source/WebCore/inspector/DOMNodeHighlighter.h
r92284 r93603 30 30 #define DOMNodeHighlighter_h 31 31 32 #include "Color.h" 33 34 #include <wtf/OwnPtr.h> 35 #include <wtf/RefPtr.h> 36 32 37 namespace WebCore { 33 38 39 class Color; 34 40 class Document; 35 41 class GraphicsContext; … … 37 43 class Node; 38 44 45 struct 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 39 61 namespace DOMNodeHighlighter { 40 62 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*); 63 void drawHighlight(GraphicsContext&, Document*, HighlightData*); 52 64 53 65 } // namespace DOMNodeHighlighter -
trunk/Source/WebCore/inspector/Inspector.json
r93586 r93603 872 872 ], 873 873 "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." 874 901 } 875 902 ], … … 1031 1058 "hidden": true, 1032 1059 "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>." } 1034 1062 ], 1035 1063 "description": "Enters the 'inspect' mode. In this mode, elements that user is hovering over are highlighted. Backend then generates 'inspect' command upon element selection." … … 1041 1069 { "name": "y", "type": "integer", "description": "Y coordinate" }, 1042 1070 { "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)." } 1044 1074 ], 1045 1075 "description": "Highlights given rectangle. Coordinates are absolute with respect to the main frame viewport." … … 1048 1078 "name": "highlightNode", 1049 1079 "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." } 1052 1082 ], 1053 1083 "description": "Highlights DOM node with given id." … … 1060 1090 "name": "highlightFrame", 1061 1091 "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)." } 1063 1095 ], 1064 1096 "description": "Highlights owner element of the frame with given id.", -
trunk/Source/WebCore/inspector/InspectorDOMAgent.cpp
r93586 r93603 99 99 }; 100 100 101 static 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 129 static Color parseConfigColor(const String& fieldName, InspectorObject* configObject) 130 { 131 const RefPtr<InspectorObject> colorObject = configObject->getObject(fieldName); 132 return parseColor(&colorObject); 133 } 134 101 135 class MatchJob { 102 136 public: … … 276 310 { 277 311 reset(); 278 ASSERT(!m_highlight edNode);312 ASSERT(!m_highlightData || (!m_highlightData->node && !m_highlightData->rect)); 279 313 ASSERT(!m_searchingForNode); 280 314 } … … 294 328 { 295 329 ASSERT(m_frontend); 296 setSearchingForNode(false );330 setSearchingForNode(false, 0); 297 331 298 332 ErrorString error; … … 322 356 } 323 357 return result; 358 } 359 360 Node* InspectorDOMAgent::highlightedNode() const 361 { 362 return m_highlightData ? m_highlightData->node.get() : 0; 324 363 } 325 364 … … 935 974 return false; 936 975 937 if (m_highlight edNode) {938 RefPtr<Node> node = m_highlight edNode;939 setSearchingForNode(false );976 if (m_highlightData && m_highlightData->node) { 977 RefPtr<Node> node = m_highlightData->node; 978 setSearchingForNode(false, 0); 940 979 inspect(node.get()); 941 980 } … … 978 1017 void InspectorDOMAgent::mouseDidMoveOverElement(const HitTestResult& result, unsigned) 979 1018 { 980 if (!m_searchingForNode )1019 if (!m_searchingForNode || !m_highlightData) 981 1020 return; 982 1021 … … 985 1024 node = node->parentNode(); 986 1025 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 1031 void InspectorDOMAgent::setSearchingForNode(bool enabled, InspectorObject* highlightConfig) 993 1032 { 994 1033 if (m_searchingForNode == enabled) 995 1034 return; 996 1035 m_searchingForNode = enabled; 997 if (!enabled) { 1036 if (enabled) 1037 setHighlightDataFromConfig(highlightConfig); 1038 else { 998 1039 ErrorString error; 999 1040 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 1045 void InspectorDOMAgent::setInspectModeEnabled(ErrorString*, bool enabled, const RefPtr<InspectorObject>* highlightConfig) 1046 { 1047 setSearchingForNode(enabled, highlightConfig ? highlightConfig->get() : 0); 1048 } 1049 1050 bool 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 1072 void InspectorDOMAgent::highlight() 1073 { 1074 // This method requires m_highlightData to have been filled in by its client. 1075 ASSERT(m_highlightData); 1013 1076 m_client->highlight(); 1014 1077 } 1015 1078 1016 void InspectorDOMAgent::highlightRect(ErrorString*, int x, int y, int width, int height) 1017 { 1018 m_highlightedRect = adoptPtr(new IntRect(x, y, width, height)); 1079 void 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); 1019 1085 m_client->highlight(); 1020 1086 } 1021 1087 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) 1088 void 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 1101 void InspectorDOMAgent::highlightFrame( 1102 ErrorString* error, 1103 const String& frameId, 1104 const RefPtr<InspectorObject>* color, 1105 const RefPtr<InspectorObject>* outlineColor) 1029 1106 { 1030 1107 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 } 1033 1116 } 1034 1117 1035 1118 void InspectorDOMAgent::hideHighlight(ErrorString*) 1036 1119 { 1037 m_highlightedNode = 0; 1038 m_highlightedRect.clear(); 1120 if (m_highlightData) { 1121 m_highlightData->node.clear(); 1122 m_highlightData->rect.clear(); 1123 } 1039 1124 m_client->hideHighlight(); 1040 1125 } … … 1512 1597 void InspectorDOMAgent::drawHighlight(GraphicsContext& context) const 1513 1598 { 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()); 1532 1603 } 1533 1604 -
trunk/Source/WebCore/inspector/InspectorDOMAgent.h
r93586 r93603 63 63 class MatchJob; 64 64 class HTMLElement; 65 class HighlightData; 65 66 class InspectorState; 66 67 class InstrumentingAgents; … … 130 131 void resolveNode(ErrorString*, int nodeId, const String* const objectGroup, RefPtr<InspectorObject>* result); 131 132 void getAttributes(ErrorString*, int nodeId, RefPtr<InspectorArray>* result); 132 void setInspectModeEnabled(ErrorString*, bool enabled );133 void setInspectModeEnabled(ErrorString*, bool enabled, const RefPtr<InspectorObject>* highlightConfig); 133 134 void requestNode(ErrorString*, const String& objectId, int* nodeId); 134 135 void pushNodeByPathToFrontend(ErrorString*, const String& path, int* nodeId); 135 136 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); 139 140 void moveTo(ErrorString*, int nodeId, int targetNodeId, const int* const anchorNodeId, int* newNodeId); 140 141 141 Node* highlightedNode() const { return m_highlightedNode.get(); }142 Node* highlightedNode() const; 142 143 143 144 // Methods called from the InspectorInstrumentation. … … 183 184 InspectorDOMAgent(InstrumentingAgents*, InspectorPageAgent*, InspectorClient*, InspectorState*, InjectedScriptManager*); 184 185 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(); 187 189 188 190 // Node-related methods. … … 232 234 HashSet<RefPtr<Node> > m_searchResults; 233 235 OwnPtr<RevalidateStyleAttributeTask> m_revalidateStyleAttrTask; 234 RefPtr<Node> m_highlightedNode; 235 OwnPtr<IntRect> m_highlightedRect; 236 String m_highlightMode; 236 OwnPtr<HighlightData> m_highlightData; 237 237 RefPtr<Node> m_nodeToFocus; 238 238 bool m_searchingForNode; -
trunk/Source/WebCore/inspector/front-end/Color.js
r80823 r93603 34 34 } 35 35 36 WebInspector.Color.fromRGBA = function(r, g, b, a) 37 { 38 return new WebInspector.Color("rgba(" + r + "," + g + "," + b + "," + (typeof a === "undefined" ? 1 : a) + ")"); 39 } 40 36 41 WebInspector.Color.prototype = { 37 42 get shorthex() … … 165 170 166 171 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; 167 187 }, 168 188 … … 662 682 "hsla(0,0,0,0)": [[0, 0, 0, 0], [0, 0, 0, 0], "transparent"], 663 683 }; 684 685 WebInspector.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 1110 1110 setSearchingForNode: function(enabled) 1111 1111 { 1112 DOMAgent.setInspectModeEnabled(enabled, this._setSearchingForNode.bind(this, enabled));1112 DOMAgent.setInspectModeEnabled(enabled, WebInspector.buildHighlightConfig(), this._setSearchingForNode.bind(this, enabled)); 1113 1113 }, 1114 1114 -
trunk/Source/WebCore/inspector/front-end/MetricsSidebarPane.js
r91070 r93603 129 129 return; 130 130 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 131 154 if (showHighlight) { 132 155 // Into element. 133 156 if (this.node && toElement) 134 toElement.addStyleClass("hovered");157 handleMouseOver(toElement); 135 158 var nodeId = this.node ? this.node.id : 0; 136 159 } else { 137 160 // Out of element. 138 161 if (fromElement) 139 fromElement.removeStyleClass("hovered");162 handleMouseOut(fromElement); 140 163 var nodeId = 0; 141 164 } -
trunk/Source/WebCore/inspector/front-end/ResourcesPanel.js
r93584 r93603 1096 1096 if (hovered) { 1097 1097 this.listItemElement.addStyleClass("hovered"); 1098 DOMAgent.highlightFrame(this._frameId );1098 DOMAgent.highlightFrame(this._frameId, WebInspector.Color.PageHighlight.Content.toProtocolRGBA(), WebInspector.Color.PageHighlight.ContentOutline.toProtocolRGBA()); 1099 1099 } else { 1100 1100 this.listItemElement.removeStyleClass("hovered"); -
trunk/Source/WebCore/inspector/front-end/TimelinePanel.js
r93196 r93603 738 738 return; 739 739 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()); 741 741 }, 742 742 -
trunk/Source/WebCore/inspector/front-end/inspector.css
r93127 r93603 1889 1889 } 1890 1890 1891 .metrics .margin.hovered {1892 background-color: rgb(139, 182, 221);1893 }1894 1895 1891 .metrics .border { 1896 1892 border: 1px black solid; … … 1903 1899 } 1904 1900 1905 .metrics .border.hovered {1906 background-color: rgb(157, 193, 226);1907 }1908 1909 1901 .metrics .padding { 1910 1902 border: 1px grey dashed; … … 1915 1907 padding: 3px; 1916 1908 margin: 3px; 1917 }1918 1919 .metrics .padding.hovered {1920 background-color: rgb(173, 204, 231);1921 1909 } 1922 1910 … … 1933 1921 text-align: center; 1934 1922 overflow: visible; 1935 }1936 1937 .metrics .content.hovered {1938 background-color: rgb(190, 214, 236);1939 1923 } 1940 1924 -
trunk/Source/WebCore/inspector/front-end/inspector.js
r93584 r93603 372 372 }, 373 373 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 374 401 highlightDOMNode: function(nodeId, mode) 375 402 { … … 384 411 this._highlightedDOMNodeId = nodeId; 385 412 if (nodeId) 386 DOMAgent.highlightNode(nodeId, mode || "all");413 DOMAgent.highlightNode(nodeId, this.buildHighlightConfig(mode)); 387 414 else 388 415 DOMAgent.hideHighlight();
Note: See TracChangeset
for help on using the changeset viewer.