Changeset 127240 in webkit
- Timestamp:
- Aug 31, 2012 2:35:57 AM (12 years ago)
- Location:
- trunk/Source/WebCore
- Files:
-
- 9 edited
Legend:
- Unmodified
- Added
- Removed
-
trunk/Source/WebCore/ChangeLog
r127239 r127240 1 2012-08-30 Pavel Feldman <pfeldman@chromium.org> 2 3 Web Inspector: render box model elements and grid on inspector overlay 4 https://bugs.webkit.org/show_bug.cgi?id=95456 5 6 Reviewed by Vsevolod Vlasov. 7 8 This change migrates native rendering for box model to the InspectorOverlay. 9 10 * inspector/InspectorInstrumentation.cpp: 11 (WebCore): 12 (WebCore::InspectorInstrumentation::didScrollImpl): 13 * inspector/InspectorInstrumentation.h: 14 (InspectorInstrumentation): 15 (WebCore::InspectorInstrumentation::didScroll): 16 (WebCore): 17 * inspector/InspectorOverlay.cpp: 18 (WebCore::InspectorOverlay::drawNodeHighlight): 19 (WebCore::InspectorOverlay::drawRectHighlight): 20 (WebCore::InspectorOverlay::overlayPage): 21 (WebCore::InspectorOverlay::evaluateInOverlay): 22 * inspector/InspectorOverlay.h: 23 (WebCore::Highlight::setColors): 24 (Highlight): 25 (InspectorOverlay): 26 * inspector/InspectorOverlayPage.html: 27 * inspector/InspectorPageAgent.cpp: 28 (WebCore::InspectorPageAgent::didLayout): 29 (WebCore): 30 (WebCore::InspectorPageAgent::didScroll): 31 * inspector/InspectorPageAgent.h: 32 * page/Chrome.cpp: 33 (WebCore::Chrome::scroll): 34 1 35 2012-08-31 Andrey Adaikin <aandrey@chromium.org> 2 36 -
trunk/Source/WebCore/inspector/InspectorInstrumentation.cpp
r126764 r127240 250 250 } 251 251 252 void InspectorInstrumentation::didScrollImpl(InstrumentingAgents* instrumentingAgents) 253 { 254 if (InspectorPageAgent* pageAgent = instrumentingAgents->inspectorPageAgent()) 255 pageAgent->didScroll(); 256 } 257 252 258 bool InspectorInstrumentation::handleMousePressImpl(InstrumentingAgents* instrumentingAgents) 253 259 { -
trunk/Source/WebCore/inspector/InspectorInstrumentation.h
r126754 r127240 146 146 static InspectorInstrumentationCookie willLayout(Frame*); 147 147 static void didLayout(const InspectorInstrumentationCookie&); 148 static void didScroll(Page*); 148 149 static InspectorInstrumentationCookie willLoadXHR(ScriptExecutionContext*, XMLHttpRequest*); 149 150 static void didLoadXHR(const InspectorInstrumentationCookie&); … … 322 323 static InspectorInstrumentationCookie willLayoutImpl(InstrumentingAgents*, Frame*); 323 324 static void didLayoutImpl(const InspectorInstrumentationCookie&); 325 static void didScrollImpl(InstrumentingAgents*); 324 326 static InspectorInstrumentationCookie willLoadXHRImpl(InstrumentingAgents*, XMLHttpRequest*, ScriptExecutionContext*); 325 327 static void didLoadXHRImpl(const InspectorInstrumentationCookie&); … … 841 843 } 842 844 845 inline void InspectorInstrumentation::didScroll(Page* page) 846 { 847 #if ENABLE(INSPECTOR) 848 FAST_RETURN_IF_NO_FRONTENDS(void()); 849 if (InstrumentingAgents* instrumentingAgents = instrumentingAgentsForPage(page)) 850 didScrollImpl(instrumentingAgents); 851 #endif 852 } 853 843 854 inline InspectorInstrumentationCookie InspectorInstrumentation::willLoadXHR(ScriptExecutionContext* context, XMLHttpRequest* request) 844 855 { -
trunk/Source/WebCore/inspector/InspectorOverlay.cpp
r126968 r127240 36 36 #include "Element.h" 37 37 #include "EmptyClients.h" 38 #include "Font.h"39 #include "FontCache.h"40 #include "FontFamily.h"41 38 #include "Frame.h" 42 39 #include "FrameView.h" 43 40 #include "GraphicsContext.h" 44 #include "GraphicsTypes.h"45 41 #include "InspectorClient.h" 46 42 #include "InspectorOverlayPage.h" … … 48 44 #include "Node.h" 49 45 #include "Page.h" 50 #include "Range.h"51 46 #include "RenderBoxModelObject.h" 52 47 #include "RenderInline.h" … … 56 51 #include "Settings.h" 57 52 #include "StyledElement.h" 58 #include "TextRun.h"59 #include <wtf/text/StringBuilder.h>60 53 61 54 namespace WebCore { 62 55 63 56 namespace { 64 65 #if OS(WINDOWS)66 static const unsigned fontHeightPx = 12;67 #elif OS(MAC_OS_X) || OS(UNIX)68 static const unsigned fontHeightPx = 11;69 #endif70 71 const static int rectInflatePx = 4;72 const static int borderWidthPx = 1;73 const static int tooltipPadding = 4;74 75 const static int arrowTipOffset = 20;76 const static float arrowHeight = 7;77 const static float arrowHalfWidth = 7;78 57 79 58 Path quadToPath(const FloatQuad& quad) … … 112 91 } 113 92 114 void drawOutlinedQuadWithClip(GraphicsContext* context, const FloatQuad& quad, const FloatQuad& clipQuad, const Color& fillColor)115 {116 context->save();117 Path clipQuadPath = quadToPath(clipQuad);118 context->clipOut(clipQuadPath);119 drawOutlinedQuad(context, quad, fillColor, Color::transparent);120 context->restore();121 }122 123 void drawHighlightForBox(GraphicsContext* context, const FloatQuad& contentQuad, const FloatQuad& paddingQuad, const FloatQuad& borderQuad, const FloatQuad& marginQuad, const HighlightConfig& highlightConfig)124 {125 bool hasMargin = highlightConfig.margin != Color::transparent;126 bool hasBorder = highlightConfig.border != Color::transparent;127 bool hasPadding = highlightConfig.padding != Color::transparent;128 bool hasContent = highlightConfig.content != Color::transparent || highlightConfig.contentOutline != Color::transparent;129 130 FloatQuad clipQuad;131 Color clipColor;132 if (hasMargin && (!hasBorder || marginQuad != borderQuad)) {133 drawOutlinedQuadWithClip(context, marginQuad, borderQuad, highlightConfig.margin);134 clipQuad = borderQuad;135 }136 if (hasBorder && (!hasPadding || borderQuad != paddingQuad)) {137 drawOutlinedQuadWithClip(context, borderQuad, paddingQuad, highlightConfig.border);138 clipQuad = paddingQuad;139 }140 if (hasPadding && (!hasContent || paddingQuad != contentQuad)) {141 drawOutlinedQuadWithClip(context, paddingQuad, contentQuad, highlightConfig.padding);142 clipQuad = contentQuad;143 }144 if (hasContent)145 drawOutlinedQuad(context, contentQuad, highlightConfig.content, highlightConfig.contentOutline);146 }147 148 void drawHighlightForSVGRenderer(GraphicsContext* context, const Vector<FloatQuad>& absoluteQuads, const HighlightConfig& highlightConfig)149 {150 for (size_t i = 0; i < absoluteQuads.size(); ++i)151 drawOutlinedQuad(context, absoluteQuads[i], highlightConfig.content, Color::transparent);152 }153 154 int drawSubstring(const TextRun& globalTextRun, int offset, int length, const Color& textColor, const Font& font, GraphicsContext* context, const LayoutRect& titleRect)155 {156 context->setFillColor(textColor, ColorSpaceDeviceRGB);157 context->drawText(font, globalTextRun, IntPoint(titleRect.pixelSnappedX() + rectInflatePx, titleRect.pixelSnappedY() + font.fontMetrics().height()), offset, offset + length);158 return offset + length;159 }160 161 float calculateArrowTipX(const LayoutRect& anchorBox, const LayoutRect& titleRect)162 {163 const static int anchorTipOffsetPx = 2;164 165 int minX = titleRect.x() + arrowHalfWidth;166 int maxX = titleRect.maxX() - arrowHalfWidth;167 int anchorX = anchorBox.x();168 int anchorMaxX = anchorBox.maxX();169 170 int x = titleRect.x() + arrowTipOffset; // Default tooltip position.171 if (x < anchorX)172 x = anchorX + anchorTipOffsetPx;173 else if (x > anchorMaxX)174 x = anchorMaxX - anchorTipOffsetPx;175 176 if (x < minX)177 x = minX;178 else if (x > maxX)179 x = maxX;180 181 return x;182 }183 184 void setUpFontDescription(FontDescription& fontDescription, WebCore::Settings* settings)185 {186 #define TOOLTIP_FONT_FAMILIES(size, ...) \187 static const unsigned tooltipFontFaceSize = size;\188 static const AtomicString* tooltipFontFace[size] = { __VA_ARGS__ };189 190 #if OS(WINDOWS)191 TOOLTIP_FONT_FAMILIES(2, new AtomicString("Consolas"), new AtomicString("Lucida Console"))192 #elif OS(MAC_OS_X)193 TOOLTIP_FONT_FAMILIES(2, new AtomicString("Menlo"), new AtomicString("Monaco"))194 #elif OS(UNIX)195 TOOLTIP_FONT_FAMILIES(1, new AtomicString("dejavu sans mono"))196 #endif197 // In the default case, we get the settings-provided monospace font.198 199 #undef TOOLTIP_FONT_FAMILIES200 201 fontDescription.setRenderingMode(settings->fontRenderingMode());202 fontDescription.setComputedSize(fontHeightPx);203 204 const AtomicString& fixedFontFamily = settings->fixedFontFamily();205 if (!fixedFontFamily.isEmpty()) {206 fontDescription.setGenericFamily(FontDescription::MonospaceFamily);207 FontFamily* currentFamily = 0;208 for (unsigned i = 0; i < tooltipFontFaceSize; ++i) {209 if (!currentFamily) {210 fontDescription.firstFamily().setFamily(*tooltipFontFace[i]);211 fontDescription.firstFamily().appendFamily(0);212 currentFamily = &fontDescription.firstFamily();213 } else {214 RefPtr<SharedFontFamily> newFamily = SharedFontFamily::create();215 newFamily->setFamily(*tooltipFontFace[i]);216 currentFamily->appendFamily(newFamily);217 currentFamily = newFamily.get();218 }219 }220 RefPtr<SharedFontFamily> newFamily = SharedFontFamily::create();221 newFamily->setFamily(fixedFontFamily);222 currentFamily->appendFamily(newFamily);223 currentFamily = newFamily.get();224 }225 }226 227 void drawElementTitle(GraphicsContext* context, Node* node, RenderObject* renderer, const IntRect& boundingBox, const IntRect& anchorBox, const FloatRect& visibleRect, WebCore::Settings* settings)228 {229 DEFINE_STATIC_LOCAL(Color, backgroundColor, (255, 255, 194));230 DEFINE_STATIC_LOCAL(Color, tagColor, (136, 18, 128)); // Same as .webkit-html-tag.231 DEFINE_STATIC_LOCAL(Color, attrColor, (26, 26, 166)); // Same as .webkit-html-attribute-value.232 DEFINE_STATIC_LOCAL(Color, normalColor, (Color::black));233 DEFINE_STATIC_LOCAL(Color, pxAndBorderColor, (128, 128, 128));234 235 DEFINE_STATIC_LOCAL(String, pxString, (ASCIILiteral("px")));236 const static UChar timesUChar[] = { 0x0020, 0x00D7, 0x0020, 0 };237 DEFINE_STATIC_LOCAL(String, timesString, (timesUChar)); // × string238 239 FontCachePurgePreventer fontCachePurgePreventer;240 241 Element* element = static_cast<Element*>(node);242 bool isXHTML = element->document()->isXHTMLDocument();243 StringBuilder nodeTitle;244 nodeTitle.append(isXHTML ? element->nodeName() : element->nodeName().lower());245 unsigned tagNameLength = nodeTitle.length();246 247 const AtomicString& idValue = element->getIdAttribute();248 unsigned idStringLength = 0;249 String idString;250 if (!idValue.isNull() && !idValue.isEmpty()) {251 nodeTitle.append("#");252 nodeTitle.append(idValue);253 idStringLength = 1 + idValue.length();254 }255 256 HashSet<AtomicString> usedClassNames;257 unsigned classesStringLength = 0;258 if (element->hasClass() && element->isStyledElement()) {259 const SpaceSplitString& classNamesString = static_cast<StyledElement*>(element)->classNames();260 size_t classNameCount = classNamesString.size();261 for (size_t i = 0; i < classNameCount; ++i) {262 const AtomicString& className = classNamesString[i];263 if (usedClassNames.contains(className))264 continue;265 usedClassNames.add(className);266 nodeTitle.append(".");267 nodeTitle.append(className);268 classesStringLength += 1 + className.length();269 }270 }271 272 RenderBoxModelObject* modelObject = renderer->isBoxModelObject() ? toRenderBoxModelObject(renderer) : 0;273 274 String widthNumberPart = " " + String::number(modelObject ? adjustForAbsoluteZoom(modelObject->pixelSnappedOffsetWidth(), modelObject) : boundingBox.width());275 nodeTitle.append(widthNumberPart);276 nodeTitle.append(pxString);277 nodeTitle.append(timesString);278 String heightNumberPart = String::number(modelObject ? adjustForAbsoluteZoom(modelObject->pixelSnappedOffsetHeight(), modelObject) : boundingBox.height());279 nodeTitle.append(heightNumberPart);280 nodeTitle.append(pxString);281 282 FontDescription desc;283 setUpFontDescription(desc, settings);284 Font font = Font(desc, 0, 0);285 font.update(0);286 287 TextRun nodeTitleRun(nodeTitle.toString());288 IntPoint titleBasePoint = IntPoint(anchorBox.x(), anchorBox.maxY() - 1);289 titleBasePoint.move(rectInflatePx, rectInflatePx);290 IntRect titleRect = enclosingIntRect(font.selectionRectForText(nodeTitleRun, titleBasePoint, fontHeightPx));291 titleRect.inflate(rectInflatePx);292 293 // The initial offsets needed to compensate for a 1px-thick border stroke (which is not a part of the rectangle).294 int dx = -borderWidthPx;295 int dy = borderWidthPx;296 297 // If the tip sticks beyond the right of visibleRect, right-align the tip with the said boundary.298 if (titleRect.maxX() + dx > visibleRect.maxX())299 dx = visibleRect.maxX() - titleRect.maxX();300 301 // If the tip sticks beyond the left of visibleRect, left-align the tip with the said boundary.302 if (titleRect.x() + dx < visibleRect.x())303 dx = visibleRect.x() - titleRect.x() - borderWidthPx;304 305 // If the tip sticks beyond the bottom of visibleRect, show the tip at top of bounding box.306 if (titleRect.maxY() + dy > visibleRect.maxY()) {307 dy = anchorBox.y() - titleRect.maxY() - borderWidthPx;308 // If the tip still sticks beyond the bottom of visibleRect, bottom-align the tip with the said boundary.309 if (titleRect.maxY() + dy > visibleRect.maxY())310 dy = visibleRect.maxY() - titleRect.maxY();311 }312 313 // If the tip sticks beyond the top of visibleRect, show the tip at top of visibleRect.314 if (titleRect.y() + dy < visibleRect.y())315 dy = visibleRect.y() - titleRect.y() + borderWidthPx;316 317 titleRect.move(dx, dy);318 319 bool isArrowAtTop = titleRect.y() > anchorBox.y();320 titleRect.move(0, tooltipPadding * (isArrowAtTop ? 1 : -1));321 322 {323 float arrowTipX = calculateArrowTipX(anchorBox, titleRect);324 int arrowBaseY = isArrowAtTop ? titleRect.y() : titleRect.maxY();325 int arrowOppositeY = isArrowAtTop ? titleRect.maxY() : titleRect.y();326 327 FloatPoint points[8];328 points[0] = FloatPoint(arrowTipX - arrowHalfWidth, arrowBaseY);329 points[1] = FloatPoint(arrowTipX, arrowBaseY + arrowHeight * (isArrowAtTop ? -1 : 1));330 points[2] = FloatPoint(arrowTipX + arrowHalfWidth, arrowBaseY);331 points[3] = FloatPoint(titleRect.maxX(), arrowBaseY);332 points[4] = FloatPoint(titleRect.maxX(), arrowOppositeY);333 points[5] = FloatPoint(titleRect.x(), arrowOppositeY);334 points[6] = FloatPoint(titleRect.x(), arrowBaseY);335 points[7] = points[0];336 337 Path path;338 path.moveTo(points[0]);339 for (int i = 1; i < 8; ++i)340 path.addLineTo(points[i]);341 342 context->save();343 context->translate(0.5f, 0.5f);344 context->setStrokeColor(pxAndBorderColor, ColorSpaceDeviceRGB);345 context->setFillColor(backgroundColor, ColorSpaceDeviceRGB);346 context->setStrokeThickness(borderWidthPx);347 context->fillPath(path);348 context->strokePath(path);349 context->restore();350 }351 352 int currentPos = 0;353 currentPos = drawSubstring(nodeTitleRun, currentPos, tagNameLength, tagColor, font, context, titleRect);354 if (idStringLength)355 currentPos = drawSubstring(nodeTitleRun, currentPos, idStringLength, attrColor, font, context, titleRect);356 if (classesStringLength)357 currentPos = drawSubstring(nodeTitleRun, currentPos, classesStringLength, attrColor, font, context, titleRect);358 currentPos = drawSubstring(nodeTitleRun, currentPos, widthNumberPart.length(), normalColor, font, context, titleRect);359 currentPos = drawSubstring(nodeTitleRun, currentPos, pxString.length() + timesString.length(), pxAndBorderColor, font, context, titleRect);360 currentPos = drawSubstring(nodeTitleRun, currentPos, heightNumberPart.length(), normalColor, font, context, titleRect);361 drawSubstring(nodeTitleRun, currentPos, pxString.length(), pxAndBorderColor, font, context, titleRect);362 }363 364 93 static void contentsQuadToPage(const FrameView* mainView, const FrameView* view, FloatQuad& quad) 365 94 { … … 371 100 } 372 101 373 static void getOrDrawNodeHighlight(GraphicsContext* context,Node* node, const HighlightConfig& highlightConfig, Highlight* highlight)102 static void buildNodeHighlight(Node* node, const HighlightConfig& highlightConfig, Highlight* highlight) 374 103 { 375 104 RenderObject* renderer = node->renderer(); … … 379 108 return; 380 109 110 highlight->setColors(highlightConfig); 381 111 FrameView* containingView = containingFrame->view(); 382 112 FrameView* mainView = containingFrame->page()->mainFrame()->view(); … … 384 114 boundingBox.move(mainView->scrollOffset()); 385 115 IntRect titleAnchorBox = boundingBox; 386 387 FloatRect visibleRect = mainView->visibleContentRect();388 // Don't translate the context if the frame is rendered in page coordinates.389 if (context && !mainView->delegatesScrolling())390 context->translate(-visibleRect.x(), -visibleRect.y());391 116 392 117 // RenderSVGRoot should be highlighted through the isBox() code path, all other SVG elements should just dump their absoluteQuads(). … … 402 127 for (size_t i = 0; i < highlight->quads.size(); ++i) 403 128 contentsQuadToPage(mainView, containingView, highlight->quads[i]); 404 405 if (context)406 drawHighlightForSVGRenderer(context, highlight->quads, highlightConfig);407 129 } else if (renderer->isBox() || renderer->isRenderInline()) { 408 130 LayoutRect contentBox; … … 456 178 highlight->quads.append(absPaddingQuad); 457 179 highlight->quads.append(absContentQuad); 458 459 if (context)460 drawHighlightForBox(context, absContentQuad, absPaddingQuad, absBorderQuad, absMarginQuad, highlightConfig);461 180 } 462 463 // Draw node title if necessary. 464 465 if (!node->isElementNode()) 466 return; 467 468 if (context && highlightConfig.showInfo) 469 drawElementTitle(context, node, renderer, pixelSnappedIntRect(boundingBox), pixelSnappedIntRect(titleAnchorBox), visibleRect, containingFrame->settings()); 470 } 471 472 static void getOrDrawRectHighlight(GraphicsContext* context, Page* page, IntRect* rect, const HighlightConfig& highlightConfig, Highlight *highlight) 181 } 182 183 static void buildRectHighlight(Page* page, IntRect* rect, const HighlightConfig& highlightConfig, Highlight *highlight) 473 184 { 474 185 if (!page) 475 186 return; 476 187 highlight->setColors(highlightConfig); 477 188 FloatRect highlightRect(*rect); 478 479 189 highlight->type = HighlightTypeRects; 480 190 highlight->quads.append(highlightRect); 481 482 if (context) {483 FrameView* view = page->mainFrame()->view();484 if (!view->delegatesScrolling()) {485 FloatRect visibleRect = view->visibleContentRect();486 context->translate(-visibleRect.x(), -visibleRect.y());487 }488 489 drawOutlinedQuad(context, highlightRect, highlightConfig.content, highlightConfig.contentOutline);490 }491 191 } 492 192 … … 505 205 void InspectorOverlay::paint(GraphicsContext& context) 506 206 { 507 drawNodeHighlight(&context);508 drawRectHighlight(&context);509 510 if (m_pausedInDebuggerMessage.isNull())511 return;512 drawOverlayPage(&context);207 if (m_pausedInDebuggerMessage.isNull() && !m_highlightNode && !m_highlightRect) 208 return; 209 GraphicsContextStateSaver stateSaver(context); 210 FrameView* view = overlayPage()->mainFrame()->view(); 211 ASSERT(!view->needsLayout()); 212 view->paint(&context, IntRect(0, 0, view->width(), view->height())); 513 213 } 514 214 … … 525 225 526 226 highlight->type = HighlightTypeRects; 527 if (m_highlightNode) { 528 highlight->setColors(m_nodeHighlightConfig); 529 getOrDrawNodeHighlight(0, m_highlightNode.get(), m_nodeHighlightConfig, highlight); 530 } else { 531 highlight->setColors(m_rectHighlightConfig); 532 getOrDrawRectHighlight(0, m_page, m_highlightRect.get(), m_rectHighlightConfig, highlight); 533 } 227 if (m_highlightNode) 228 buildNodeHighlight(m_highlightNode.get(), m_nodeHighlightConfig, highlight); 229 else 230 buildRectHighlight(m_page, m_highlightRect.get(), m_rectHighlightConfig, highlight); 534 231 } 535 232 … … 537 234 { 538 235 m_pausedInDebuggerMessage = message ? *message : String(); 539 evaluateInOverlay("setPausedInDebuggerMessage", m_pausedInDebuggerMessage);540 236 update(); 541 237 } … … 578 274 IntRect visibleRect = enclosingIntRect(view->visibleContentRect()); 579 275 overlayView->resize(visibleRect.width(), visibleRect.height()); 276 277 // Clear canvas and paint things. 278 reset(); 279 280 drawNodeHighlight(); 281 drawRectHighlight(); 282 drawPausedInDebuggerMessage(); 283 284 // Position DOM elements. 285 overlayPage()->mainFrame()->document()->recalcStyle(Node::Force); 580 286 if (overlayView->needsLayout()) 581 287 overlayView->layout(); 288 289 // Kick paint. 582 290 m_client->highlight(); 583 291 } 584 292 585 void InspectorOverlay::drawNodeHighlight(GraphicsContext* context) 293 static RefPtr<InspectorObject> buildObjectForPoint(const FloatPoint& point) 294 { 295 RefPtr<InspectorObject> object = InspectorObject::create(); 296 object->setNumber("x", point.x()); 297 object->setNumber("y", point.y()); 298 return object.release(); 299 } 300 301 static RefPtr<InspectorArray> buildArrayForQuad(const FloatQuad& quad) 302 { 303 RefPtr<InspectorArray> array = InspectorArray::create(); 304 array->pushObject(buildObjectForPoint(quad.p1())); 305 array->pushObject(buildObjectForPoint(quad.p2())); 306 array->pushObject(buildObjectForPoint(quad.p3())); 307 array->pushObject(buildObjectForPoint(quad.p4())); 308 return array.release(); 309 } 310 311 static RefPtr<InspectorObject> buildObjectForHighlight(FrameView* mainView, const Highlight& highlight) 312 { 313 RefPtr<InspectorObject> object = InspectorObject::create(); 314 RefPtr<InspectorArray> array = InspectorArray::create(); 315 for (size_t i = 0; i < highlight.quads.size(); ++i) 316 array->pushArray(buildArrayForQuad(highlight.quads[i])); 317 object->setArray("quads", array.release()); 318 object->setString("contentColor", highlight.contentColor.serialized()); 319 object->setString("contentOutlineColor", highlight.contentOutlineColor.serialized()); 320 object->setString("paddingColor", highlight.paddingColor.serialized()); 321 object->setString("borderColor", highlight.borderColor.serialized()); 322 object->setString("marginColor", highlight.marginColor.serialized()); 323 324 FloatRect visibleRect = mainView->visibleContentRect(); 325 if (!mainView->delegatesScrolling()) { 326 object->setNumber("scrollX", visibleRect.x()); 327 object->setNumber("scrollY", visibleRect.y()); 328 } else { 329 object->setNumber("scrollX", 0); 330 object->setNumber("scrollY", 0); 331 } 332 333 return object.release(); 334 } 335 336 void InspectorOverlay::drawNodeHighlight() 586 337 { 587 338 if (!m_highlightNode) … … 589 340 590 341 Highlight highlight; 591 getOrDrawNodeHighlight(context, m_highlightNode.get(), m_nodeHighlightConfig, &highlight); 592 } 593 594 void InspectorOverlay::drawRectHighlight(GraphicsContext* context) 342 buildNodeHighlight(m_highlightNode.get(), m_nodeHighlightConfig, &highlight); 343 RefPtr<InspectorObject> highlightObject = buildObjectForHighlight(m_page->mainFrame()->view(), highlight); 344 345 Node* node = m_highlightNode.get(); 346 if (node->isElementNode() && m_nodeHighlightConfig.showInfo && node->renderer() && node->document()->frame()) { 347 RefPtr<InspectorObject> elementInfo = InspectorObject::create(); 348 Element* element = toElement(node); 349 bool isXHTML = element->document()->isXHTMLDocument(); 350 elementInfo->setString("tagName", isXHTML ? element->nodeName() : element->nodeName().lower()); 351 elementInfo->setString("idValue", element->getIdAttribute()); 352 HashSet<AtomicString> usedClassNames; 353 if (element->hasClass() && element->isStyledElement()) { 354 String classNames; 355 const SpaceSplitString& classNamesString = static_cast<StyledElement*>(element)->classNames(); 356 size_t classNameCount = classNamesString.size(); 357 for (size_t i = 0; i < classNameCount; ++i) { 358 const AtomicString& className = classNamesString[i]; 359 if (usedClassNames.contains(className)) 360 continue; 361 usedClassNames.add(className); 362 classNames += makeString(".", className); 363 } 364 elementInfo->setString("className", classNames); 365 } 366 367 RenderObject* renderer = node->renderer(); 368 Frame* containingFrame = node->document()->frame(); 369 FrameView* containingView = containingFrame->view(); 370 IntRect boundingBox = pixelSnappedIntRect(containingView->contentsToRootView(renderer->absoluteBoundingBoxRect())); 371 RenderBoxModelObject* modelObject = renderer->isBoxModelObject() ? toRenderBoxModelObject(renderer) : 0; 372 elementInfo->setString("nodeWidth", String::number(modelObject ? adjustForAbsoluteZoom(modelObject->pixelSnappedOffsetWidth(), modelObject) : boundingBox.width())); 373 elementInfo->setString("nodeHeight", String::number(modelObject ? adjustForAbsoluteZoom(modelObject->pixelSnappedOffsetHeight(), modelObject) : boundingBox.height())); 374 highlightObject->setObject("elementInfo", elementInfo.release()); 375 } 376 evaluateInOverlay("drawNodeHighlight", highlightObject); 377 } 378 379 void InspectorOverlay::drawRectHighlight() 595 380 { 596 381 if (!m_highlightRect) … … 598 383 599 384 Highlight highlight; 600 getOrDrawRectHighlight(context,m_page, m_highlightRect.get(), m_rectHighlightConfig, &highlight);601 } 602 603 void InspectorOverlay::drawOverlayPage(GraphicsContext* context) 604 { 605 GraphicsContextStateSaver stateSaver(*context); 606 FrameView* view = overlayPage()->mainFrame()->view();607 view->paint(context, IntRect(0, 0, view->width(), view->height()));385 buildRectHighlight(m_page, m_highlightRect.get(), m_rectHighlightConfig, &highlight); 386 evaluateInOverlay("highlightRect", buildObjectForHighlight(m_page->mainFrame()->view(), highlight)); 387 } 388 389 void InspectorOverlay::drawPausedInDebuggerMessage() 390 { 391 if (!m_pausedInDebuggerMessage.isNull()) 392 evaluateInOverlay("drawPausedInDebuggerMessage", m_pausedInDebuggerMessage); 608 393 } 609 394 … … 622 407 623 408 overlaySettings->setStandardFontFamily(settings->standardFontFamily()); 624 #if OS(WINDOWS)625 overlaySettings->setFixedFontFamily("Consolas");626 #elif OS(MAC_OS_X)627 overlaySettings->setFixedFontFamily("Menlo");628 #elif OS(UNIX)629 overlaySettings->setFixedFontFamily("dejavu sans mono");630 #endif631 409 overlaySettings->setSerifFontFamily(settings->serifFontFamily()); 632 410 overlaySettings->setSansSerifFontFamily(settings->sansSerifFontFamily()); … … 636 414 overlaySettings->setMinimumFontSize(settings->minimumFontSize()); 637 415 overlaySettings->setMinimumLogicalFontSize(settings->minimumLogicalFontSize()); 638 overlaySettings->setDefaultFontSize(settings->defaultFontSize());639 overlaySettings->setDefaultFixedFontSize(settings->defaultFixedFontSize());640 416 overlaySettings->setMediaEnabled(false); 641 417 overlaySettings->setScriptEnabled(true); … … 654 430 loader->activeDocumentLoader()->writer()->end(); 655 431 432 #if OS(WINDOWS) 433 evaluateInOverlay("setPlatform", "windows"); 434 #elif OS(MAC_OS_X) 435 evaluateInOverlay("setPlatform", "mac"); 436 #elif OS(UNIX) 437 evaluateInOverlay("setPlatform", "linux"); 438 #endif 439 656 440 return m_overlayPage.get(); 441 } 442 443 void InspectorOverlay::reset() 444 { 445 evaluateInOverlay("reset", ""); 657 446 } 658 447 … … 665 454 } 666 455 456 void InspectorOverlay::evaluateInOverlay(const String& method, PassRefPtr<InspectorValue> argument) 457 { 458 RefPtr<InspectorArray> command = InspectorArray::create(); 459 command->pushString(method); 460 command->pushValue(argument); 461 overlayPage()->mainFrame()->script()->evaluate(ScriptSourceCode(makeString("dispatch(", command->toJSONString(), ")"))); 462 } 463 667 464 } // namespace WebCore 668 465 -
trunk/Source/WebCore/inspector/InspectorOverlay.h
r126857 r127240 45 45 class GraphicsContext; 46 46 class InspectorClient; 47 class InspectorValue; 47 48 class IntRect; 48 49 class Node; … … 67 68 { 68 69 contentColor = highlightConfig.content; 70 contentOutlineColor = highlightConfig.contentOutline; 69 71 paddingColor = highlightConfig.padding; 70 72 borderColor = highlightConfig.border; … … 73 75 74 76 Color contentColor; 77 Color contentOutlineColor; 75 78 Color paddingColor; 76 79 Color borderColor; … … 91 94 ~InspectorOverlay(); 92 95 96 void update(); 93 97 void paint(GraphicsContext&); 94 98 void drawOutline(GraphicsContext*, const LayoutRect&, const Color&); … … 106 110 InspectorOverlay(Page*, InspectorClient*); 107 111 108 void update(); 109 void drawNodeHighlight(GraphicsContext*); 110 void drawRectHighlight(GraphicsContext*); 111 void drawOverlayPage(GraphicsContext*); 112 void drawNodeHighlight(); 113 void drawRectHighlight(); 114 void drawPausedInDebuggerMessage(); 112 115 Page* overlayPage(); 116 void reset(); 113 117 void evaluateInOverlay(const String& method, const String& argument); 118 void evaluateInOverlay(const String& method, PassRefPtr<InspectorValue> argument); 114 119 115 120 Page* m_page; -
trunk/Source/WebCore/inspector/InspectorOverlayPage.html
r126857 r127240 35 35 } 36 36 37 body.platform-mac { 38 font-size: 11px; 39 font-family: Menlo, Monaco; 40 } 41 42 body.platform-windows { 43 font-size: 12px; 44 font-family: Consolas, Lucida Console; 45 } 46 47 body.platform-linux { 48 font-size: 11px; 49 font-family: dejavu sans mono; 50 } 51 37 52 .fill { 38 53 position: absolute; … … 48 63 49 64 .message-line { 65 margin: 10px 0; 50 66 text-align: center; 51 67 } 52 68 53 69 .message-box { 54 font-family: monospace;55 70 background-color: rgb(255, 255, 194); 56 71 border: 1px solid rgb(128, 128, 128); 57 72 display: inline-block; 58 margin: 10px 0;59 73 padding: 2px 4px; 60 74 } 61 75 76 .px { 77 color: rgb(128, 128, 128); 78 } 79 80 #element-title { 81 position: absolute; 82 z-index: 10; 83 } 84 85 #tag-name { 86 color: rgb(136, 18, 128); 87 } 88 89 #node-id { 90 color: rgb(26, 26, 166); 91 } 62 92 </style> 63 93 <script> 64 function setPausedInDebuggerMessage(message) 94 const lightGridColor = "rgba(0,0,0,0.2)"; 95 const darkGridColor = "rgba(0,0,0,0.5)"; 96 const transparentColor = "rgba(0, 0, 0, 0)"; 97 98 function drawPausedInDebuggerMessage(message) 65 99 { 66 100 var pausedInDebugger = document.getElementById("paused-in-debugger"); 67 if (message) { 68 pausedInDebugger.textContent = message; 69 pausedInDebugger.style.visibility = "visible"; 70 document.body.classList.add("dimmed"); 71 } else { 72 pausedInDebugger.style.visibility = "hidden"; 73 document.body.classList.remove("dimmed"); 74 } 101 pausedInDebugger.textContent = message; 102 pausedInDebugger.style.visibility = "visible"; 103 document.body.classList.add("dimmed"); 104 } 105 106 function _drawGrid(highlight) 107 { 108 context.save(); 109 110 var width = canvas.width; 111 var height = canvas.height; 112 113 context.fillStyle = "rgba(255, 255, 255, 0.6)"; 114 context.fillRect(0, 0, canvas.width, 15); 115 context.fillRect(0, 15, 15, canvas.height); 116 117 context.translate(-highlight.scrollX, 0.5 - highlight.scrollY); 118 context.lineWidth = 1; 119 120 const gridSubStep = 5; 121 const gridStep = 50; 122 123 context.strokeStyle = lightGridColor; 124 125 for (var y = gridSubStep; y < highlight.scrollY + height; y += gridSubStep) { 126 if (!(y % gridStep)) 127 continue; 128 context.beginPath(); 129 context.moveTo(highlight.scrollX, y); 130 context.lineTo(highlight.scrollX + gridSubStep, y); 131 context.stroke(); 132 } 133 134 context.strokeStyle = darkGridColor; 135 context.fillStyle = darkGridColor; 136 for (var y = gridStep; y < height + highlight.scrollY; y += gridStep) { 137 context.beginPath(); 138 context.moveTo(highlight.scrollX, y); 139 var markLength = (y % (gridStep * 2)) ? 5 : 8; 140 context.lineTo(highlight.scrollX + markLength, y); 141 context.stroke(); 142 if (!(y % (gridStep * 2))) { 143 context.save(); 144 context.translate(highlight.scrollX, y); 145 context.rotate(-Math.PI / 2); 146 context.fillText(y, 2, 13); 147 context.restore(); 148 } 149 } 150 151 context.translate(0.5, -0.5); 152 153 context.strokeStyle = lightGridColor; 154 for (var x = gridSubStep; x < highlight.scrollX + width; x += gridSubStep) { 155 if (!(x % gridStep)) 156 continue; 157 context.beginPath(); 158 context.moveTo(x, highlight.scrollY); 159 context.lineTo(x, highlight.scrollY + gridSubStep); 160 context.stroke(); 161 } 162 163 context.strokeStyle = darkGridColor; 164 context.fillStyle = darkGridColor; 165 for (var x = gridStep; x < width + highlight.scrollX; x += gridStep) { 166 context.beginPath(); 167 context.moveTo(x, highlight.scrollY); 168 var markLength = (x % (gridStep * 2)) ? 5 : 8; 169 context.lineTo(x, highlight.scrollY + markLength); 170 context.stroke(); 171 if (!(x % (gridStep * 2))) 172 context.fillText(x, x + 2, highlight.scrollY + 13); 173 } 174 context.restore(); 175 } 176 177 function quadToPath(quad) 178 { 179 context.beginPath(); 180 context.moveTo(quad[0].x, quad[0].y); 181 context.lineTo(quad[1].x, quad[1].y); 182 context.lineTo(quad[2].x, quad[2].y); 183 context.lineTo(quad[3].x, quad[3].y); 184 context.closePath(); 185 return context; 186 } 187 188 function drawOutlinedQuad(quad, fillColor, outlineColor) 189 { 190 context.save(); 191 context.lineWidth = 2; 192 quadToPath(quad).clip(); 193 context.fillStyle = fillColor; 194 context.fill(); 195 if (outlineColor) { 196 context.strokeStyle = outlineColor; 197 context.stroke(); 198 } 199 context.restore(); 200 } 201 202 function drawOutlinedQuadWithClip(quad, clipQuad, fillColor) 203 { 204 var canvas = document.getElementById("canvas"); 205 context.fillStyle = fillColor; 206 context.save(); 207 context.lineWidth = 0; 208 quadToPath(quad).fill(); 209 context.globalCompositeOperation = "destination-out"; 210 context.fillStyle = "red"; 211 quadToPath(clipQuad).fill(); 212 context.restore(); 213 } 214 215 function quadEquals(quad1, quad2) 216 { 217 return quad1[0].x === quad2[0].x && quad1[0].y === quad2[0].y && 218 quad1[1].x === quad2[1].x && quad1[1].y === quad2[1].y && 219 quad1[2].x === quad2[2].x && quad1[2].y === quad2[2].y && 220 quad1[3].x === quad2[3].x && quad1[3].y === quad2[3].y; 221 } 222 223 function reset() 224 { 225 window.canvas = document.getElementById("canvas"); 226 window.context = canvas.getContext("2d"); 227 canvas.width = document.body.offsetWidth; 228 canvas.height = document.body.offsetHeight; 229 230 document.getElementById("paused-in-debugger").style.visibility = "hidden"; 231 document.getElementById("element-title").style.visibility = "hidden"; 232 document.body.classList.remove("dimmed"); 233 } 234 235 function _drawElementTitle(highlight) 236 { 237 var elementInfo = highlight.elementInfo; 238 if (!highlight.elementInfo) 239 return; 240 241 document.getElementById("tag-name").textContent = elementInfo.tagName; 242 document.getElementById("node-id").textContent = elementInfo.nodeId ? "#" + elementInfo.nodeId : ""; 243 document.getElementById("class-name").textContent = elementInfo.className || ""; 244 document.getElementById("node-width").textContent = elementInfo.nodeWidth; 245 document.getElementById("node-height").textContent = elementInfo.nodeHeight; 246 var elementTitle = document.getElementById("element-title"); 247 248 var marginQuad = highlight.quads[0]; 249 250 var titleWidth = elementTitle.offsetWidth + 6; 251 var titleHeight = elementTitle.offsetHeight + 4; 252 253 var anchorTop = marginQuad[0].y; 254 var anchorBottom = marginQuad[3].y 255 256 const arrowHeight = 7; 257 var renderArrowUp = false; 258 var renderArrowDown = false; 259 260 var boxX = Math.max(2, marginQuad[0].x); 261 if (boxX + titleWidth > canvas.width) 262 boxX = canvas.width - titleWidth - 2; 263 264 var boxY; 265 if (anchorTop > canvas.height) { 266 boxY = canvas.height - titleHeight - arrowHeight; 267 renderArrowDown = true; 268 } else if (anchorBottom < 0) { 269 boxY = arrowHeight; 270 renderArrowUp = true; 271 } else if (anchorBottom + titleHeight + arrowHeight < canvas.height) { 272 boxY = anchorBottom + arrowHeight - 4; 273 renderArrowUp = true; 274 } else if (anchorTop - titleHeight - arrowHeight > 0) { 275 boxY = anchorTop - titleHeight - arrowHeight + 3; 276 renderArrowDown = true; 277 } else 278 boxY = arrowHeight; 279 280 context.save(); 281 context.translate(0.5, 0.5); 282 context.beginPath(); 283 context.moveTo(boxX, boxY); 284 if (renderArrowUp) { 285 context.lineTo(boxX + 2 * arrowHeight, boxY); 286 context.lineTo(boxX + 3 * arrowHeight, boxY - arrowHeight); 287 context.lineTo(boxX + 4 * arrowHeight, boxY); 288 } 289 context.lineTo(boxX + titleWidth, boxY); 290 context.lineTo(boxX + titleWidth, boxY + titleHeight); 291 if (renderArrowDown) { 292 context.lineTo(boxX + 4 * arrowHeight, boxY + titleHeight); 293 context.lineTo(boxX + 3 * arrowHeight, boxY + titleHeight + arrowHeight); 294 context.lineTo(boxX + 2 * arrowHeight, boxY + titleHeight); 295 } 296 context.lineTo(boxX, boxY + titleHeight); 297 context.closePath(); 298 context.fillStyle = "rgb(255, 255, 194)"; 299 context.fill(); 300 context.strokeStyle = "rgb(128, 128, 128)"; 301 context.stroke(); 302 303 context.restore(); 304 305 elementTitle.style.visibility = "visible"; 306 elementTitle.style.top = (boxY + 3) + "px"; 307 elementTitle.style.left = (boxX + 3) + "px"; 308 } 309 310 function _drawRulers(highlight) 311 { 312 context.save(); 313 context.strokeStyle = "rgba(128, 128, 128, 0.3)"; 314 context.lineWidth = 1; 315 context.translate(0.5, 0.5); 316 var leftmostXForY = {}; 317 var topmostYForX = {}; 318 319 for (var i = 0; i < highlight.quads.length; ++i) { 320 var quad = highlight.quads[i]; 321 for (var j = 0; j < quad.length; ++j) { 322 var x = quad[j].x; 323 var y = quad[j].y; 324 topmostYForX[Math.round(x)] = Math.min(topmostYForX[x] || Number.MAX_VALUE, Math.round(quad[j].y)); 325 leftmostXForY[Math.round(y)] = Math.min(leftmostXForY[y] || Number.MAX_VALUE, Math.round(quad[j].x)); 326 } 327 } 328 329 for (var y in leftmostXForY) { 330 context.beginPath(); 331 context.moveTo(0, y); 332 context.lineTo(leftmostXForY[y], y); 333 context.stroke(); 334 } 335 336 for (var x in topmostYForX) { 337 context.beginPath(); 338 context.moveTo(x, 0); 339 context.lineTo(x, topmostYForX[x]); 340 context.stroke(); 341 } 342 343 context.restore(); 344 } 345 346 function drawNodeHighlight(highlight) 347 { 348 _drawGrid(highlight); 349 350 if (!highlight.quads.length) 351 return; 352 353 context.save(); 354 355 for (var i = 0; i < highlight.quads.length; ++i) { 356 var quad = highlight.quads[i]; 357 for (var j = 0; j < quad.length; ++j) { 358 quad[j].x -= highlight.scrollX; 359 quad[j].y -= highlight.scrollY; 360 } 361 } 362 363 var quads = highlight.quads.slice(); 364 var contentQuad = quads.pop(); 365 var paddingQuad = quads.pop(); 366 var borderQuad = quads.pop(); 367 var marginQuad = quads.pop(); 368 369 var hasContent = contentQuad && highlight.contentColor !== transparentColor || highlight.contentOutlineColor !== transparentColor; 370 var hasPadding = paddingQuad && highlight.paddingColor !== transparentColor; 371 var hasBorder = borderQuad && highlight.borderColor !== transparentColor; 372 var hasMargin = marginQuad && highlight.marginColor !== transparentColor; 373 374 var clipQuad; 375 if (hasMargin && (!hasBorder || !quadEquals(marginQuad, borderQuad))) { 376 drawOutlinedQuadWithClip(marginQuad, borderQuad, highlight.marginColor); 377 clipQuad = borderQuad; 378 } 379 if (hasBorder && (!hasPadding || !quadEquals(borderQuad, paddingQuad))) { 380 drawOutlinedQuadWithClip(borderQuad, paddingQuad, highlight.borderColor); 381 clipQuad = paddingQuad; 382 } 383 if (hasPadding && (!hasContent || !quadEquals(paddingQuad, contentQuad))) { 384 drawOutlinedQuadWithClip(paddingQuad, contentQuad, highlight.paddingColor); 385 clipQuad = contentQuad; 386 } 387 if (hasContent) 388 drawOutlinedQuad(contentQuad, highlight.contentColor, highlight.contentOutlineColor); 389 390 _drawElementTitle(highlight); 391 _drawRulers(highlight); 392 context.restore(); 393 } 394 395 function drawRectHighlight(highlight) 396 { 397 context.save(); 398 drawOutlinedQuad(highlight.quads[0], highlight.contentColor, highlight.contentOutlineColor); 399 context.restore(); 400 } 401 402 function setPlatform(platform) 403 { 404 document.body.classList.add("platform-" + platform); 75 405 } 76 406 … … 80 410 window[functionName].apply(null, message); 81 411 } 412 413 function log(text) 414 { 415 var logEntry = document.createElement("div"); 416 logEntry.textContent = text; 417 document.getElementById("log").appendChild(logEntry); 418 } 419 82 420 </script> 83 421 </head> … … 85 423 <div class="message-line"><span class="message-box" id="paused-in-debugger"></span></div> 86 424 </body> 425 <canvas id="canvas" class="fill"></canvas> 426 <div id="element-title"> 427 <span id="tag-name"></span><span id="node-id"></span><span id="class-name"></span> 428 <span id="node-width"></span><span class="px">px</span><span class="px"> × </span><span id="node-height"></span><span class="px">px</span> 429 </div> 430 <div id="log"></div> 87 431 </html> -
trunk/Source/WebCore/inspector/InspectorPageAgent.cpp
r127224 r127240 915 915 if (currentWidth && currentHeight) 916 916 m_client->autoZoomPageToFitWidth(); 917 m_overlay->update(); 918 } 919 920 void InspectorPageAgent::didScroll() 921 { 922 m_overlay->update(); 917 923 } 918 924 -
trunk/Source/WebCore/inspector/InspectorPageAgent.h
r125028 r127240 138 138 void didPaint(); 139 139 void didLayout(); 140 void didScroll(); 140 141 141 142 // Inspector Controller API -
trunk/Source/WebCore/page/Chrome.cpp
r124389 r127240 96 96 { 97 97 m_client->scroll(scrollDelta, rectToScroll, clipRect); 98 InspectorInstrumentation::didScroll(m_page); 98 99 } 99 100
Note: See TracChangeset
for help on using the changeset viewer.