Changeset 274096 in webkit


Ignore:
Timestamp:
Mar 8, 2021 12:55:46 PM (17 months ago)
Author:
Patrick Angle
Message:

Web Inspector: Grid overlay does not adjust for element transforms (rotation, scale, etc.)
​https://bugs.webkit.org/show_bug.cgi?id=222565

Reviewed by BJ Burg & Devin Rousso.

Added support throughout the grid drawing code to support grids that have been translated/rotated/scaled by
passing all coordinates through the renderGrid's transform before drawing.

Relative directions/lengths throughout (e.g. left, width, and column) are expressed as if there was no
transform applied to the grid in order to help with readability and reasoning with the code in the future.

  • Sources.txt:
  • WebCore.xcodeproj/project.pbxproj:
  • inspector/InspectorOverlay.cpp:
  • Added variant that doesn't resize bounds as a side effect.

(WebCore::quadToPath):
(WebCore::InspectorOverlay::drawLayoutHatching):

  • Support drawing hatching in a FloatQuad instead of a FloatRect.

(WebCore::InspectorOverlay::drawGridOverlay):

  • Use the renderGrid to transform known points into drawing coordinates.
  • inspector/InspectorOverlay.h:
  • platform/graphics/FloatLine.cpp: Added.

(WebCore::FloatLine::pointAtAbsoluteDistance const):

  • Finds the point that is the given absolute distance from the start point. The distance may be less than 0 or

greater than the length of the line.
(WebCore::FloatLine::pointAtRelativeDistance const):

  • Finds the point that is the given relative distance from the start point, where 0 is the start point and 1.0

is the end point. The distance may be less than zero or greater than 1.
(WebCore::FloatLine::extendedToBounds const):

  • Creates a new FloatLine that at least covers the provided bounds such that the new line's points will either

be outside or on the bounds.
(WebCore::FloatLine::intersectionWith const):

  • Finds the FloatPoint at the intersection of this FloatLine and another FloatLine.
  • platform/graphics/FloatLine.h: Added.
  • Introduced FloatLine class to store two points that conceptually form a line.

(WebCore::FloatLine::FloatLine):
(WebCore::FloatLine::start const):
(WebCore::FloatLine::end const):
(WebCore::FloatLine::length const):

Location:
trunk/Source/WebCore
Files:
2 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r274094 r274096  
     12021-03-08  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: Grid overlay does not adjust for element transforms (rotation, scale, etc.)
     4        https://bugs.webkit.org/show_bug.cgi?id=222565
     5
     6        Reviewed by BJ Burg & Devin Rousso.
     7
     8        Added support throughout the grid drawing code to support grids that have been translated/rotated/scaled by
     9        passing all coordinates through the `renderGrid`'s transform before drawing.
     10
     11        Relative directions/lengths throughout (e.g. `left`, `width`, and `column`) are expressed as if there was no
     12        transform applied to the grid in order to help with readability and reasoning with the code in the future.
     13
     14        * Sources.txt:
     15        * WebCore.xcodeproj/project.pbxproj:
     16        * inspector/InspectorOverlay.cpp:
     17        - Added variant that doesn't resize bounds as a side effect.
     18        (WebCore::quadToPath):
     19        (WebCore::InspectorOverlay::drawLayoutHatching):
     20        - Support drawing hatching in a `FloatQuad` instead of a `FloatRect`.
     21        (WebCore::InspectorOverlay::drawGridOverlay):
     22        - Use the `renderGrid` to transform known points into drawing coordinates.
     23        * inspector/InspectorOverlay.h:
     24        * platform/graphics/FloatLine.cpp: Added.
     25        (WebCore::FloatLine::pointAtAbsoluteDistance const):
     26        - Finds the point that is the given absolute distance from the start point. The distance may be less than 0 or
     27        greater than the length of the line.
     28        (WebCore::FloatLine::pointAtRelativeDistance const):
     29        - Finds the point that is the given relative distance from the start point, where 0 is the start point and 1.0
     30        is the end point. The distance may be less than zero or greater than 1.
     31        (WebCore::FloatLine::extendedToBounds const):
     32        - Creates a new `FloatLine` that at least covers the provided bounds such that the new line's points will either
     33        be outside or on the bounds.
     34        (WebCore::FloatLine::intersectionWith const):
     35        - Finds the `FloatPoint` at the intersection of this `FloatLine` and another `FloatLine`.
     36        * platform/graphics/FloatLine.h: Added.
     37        - Introduced FloatLine class to store two points that conceptually form a line.
     38        (WebCore::FloatLine::FloatLine):
     39        (WebCore::FloatLine::start const):
     40        (WebCore::FloatLine::end const):
     41        (WebCore::FloatLine::length const):
     42
    1432021-03-08  Chris Dumez  <cdumez@apple.com>
    244

  • trunk/Source/WebCore/Sources.txt

    r274033 r274096  
    19371937platform/graphics/DisplayRefreshMonitorClient.cpp
    19381938platform/graphics/DisplayRefreshMonitorManager.cpp
     1939platform/graphics/FloatLine.cpp
    19391940platform/graphics/FloatPoint.cpp
    19401941platform/graphics/FloatPoint3D.cpp

  • trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj

    r274033 r274096  
    863863                2E75841E12779ADA0062628B /* FileReaderLoader.h in Headers */ = {isa = PBXBuildFile; fileRef = 2E75841B12779ADA0062628B /* FileReaderLoader.h */; settings = {ATTRIBUTES = (Private, ); }; };
    864864                2E75841F12779ADA0062628B /* FileReaderLoaderClient.h in Headers */ = {isa = PBXBuildFile; fileRef = 2E75841C12779ADA0062628B /* FileReaderLoaderClient.h */; settings = {ATTRIBUTES = (Private, ); }; };
     865                2E888CAA25F6A4110057914A /* FloatLine.h in Headers */ = {isa = PBXBuildFile; fileRef = 2E888CA825F6A4110057914A /* FloatLine.h */; };
    865866                2E94F43C119207DA00B7F75D /* JSFileReader.h in Headers */ = {isa = PBXBuildFile; fileRef = 2E94F43A119207DA00B7F75D /* JSFileReader.h */; };
    866867                2E9B5D8F1B66A94E008C6A24 /* WheelEventDeltaFilterMac.h in Headers */ = {isa = PBXBuildFile; fileRef = 2E9B5D8E1B66A94E008C6A24 /* WheelEventDeltaFilterMac.h */; settings = {ATTRIBUTES = (Private, ); }; };
    … …  
    72787279                2E75841B12779ADA0062628B /* FileReaderLoader.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = FileReaderLoader.h; sourceTree = "<group>"; };
    72797280                2E75841C12779ADA0062628B /* FileReaderLoaderClient.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = FileReaderLoaderClient.h; sourceTree = "<group>"; };
     7281                2E888CA825F6A4110057914A /* FloatLine.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = FloatLine.h; sourceTree = "<group>"; };
     7282                2E888CA925F6A4110057914A /* FloatLine.cpp */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.cpp.cpp; path = FloatLine.cpp; sourceTree = "<group>"; };
    72807283                2E94F439119207DA00B7F75D /* JSFileReader.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = JSFileReader.cpp; sourceTree = "<group>"; };
    72817284                2E94F43A119207DA00B7F75D /* JSFileReader.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = JSFileReader.h; sourceTree = "<group>"; };
    … …  
    2669626699                                2D29ECC4192ECC8300984B78 /* DisplayRefreshMonitorManager.h */,
    2669726700                                6E67D2A81280E8BD008758F7 /* ExtensionsGL.h */,
     26701                                2E888CA925F6A4110057914A /* FloatLine.cpp */,
     26702                                2E888CA825F6A4110057914A /* FloatLine.h */,
    2669826703                                B275353A0B053814002CE64F /* FloatPoint.cpp */,
    2669926704                                B275353B0B053814002CE64F /* FloatPoint.h */,
    … …  
    3226832273                                FE699872192087E7006936BD /* FloatingPointEnvironment.h in Headers */,
    3226932274                                115CFA82208B8EDA001E6991 /* FloatingState.h in Headers */,
     32275                                2E888CAA25F6A4110057914A /* FloatLine.h in Headers */,
    3227032276                                B27535690B053814002CE64F /* FloatPoint.h in Headers */,
    3227132277                                B2E27CA00B0F2B0900F17C7B /* FloatPoint3D.h in Headers */,

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

    r273185 r274096  
    3939#include "DOMTokenList.h"
    4040#include "Element.h"
     41#include "FloatLine.h"
    4142#include "FloatPoint.h"
    4243#include "FloatRoundedRect.h"
    … …  
    211212}
    212213
    213 static Path quadToPath(const FloatQuad& quad, InspectorOverlay::Highlight::Bounds& bounds)
     214static Path quadToPath(const FloatQuad& quad)
    214215{
    215216    Path path;
    … …  
    220221    path.closeSubpath();
    221222
     223    return path;
     224}
     225
     226static Path quadToPath(const FloatQuad& quad, InspectorOverlay::Highlight::Bounds& bounds)
     227{
     228    auto path = quadToPath(quad);
    222229    bounds.unite(path.boundingRect());
    223230
    … …  
    11501157}
    11511158
    1152 void InspectorOverlay::drawLayoutHatching(GraphicsContext& context, FloatRect rect, IntPoint scrollOffset)
     1159void InspectorOverlay::drawLayoutHatching(GraphicsContext& context, FloatQuad quad)
    11531160{
    11541161    GraphicsContextStateSaver saver(context);
    1155    
    1156     context.translate(rect.x(), rect.y());
    1157     context.clip(FloatRect(0, 0, rect.width(), rect.height()));
    1158    
     1162    context.clipPath(quadToPath(quad));
    11591163    context.setStrokeThickness(0.5);
    11601164    context.setStrokeStyle(StrokeStyle::DashedStroke);
    … …  
    11641168    Path hatchPath;
    11651169   
    1166     // The opposite axis' size is used to determine how far to draw a hatch line in both dimensions, which keeps the lines at a 45deg angle.
    1167     if (rect.width() > rect.height()) {
    1168         // Move across the top of the rect, starting left of `0, 0` to ensure that the tail of the previous hatch line is drawn while scrolling.
    1169         for (float x = (-scrollOffset.x() % hatchSpacing) - rect.height(); x < rect.width(); x += hatchSpacing) {
    1170             hatchPath.moveTo({ x, 0 });
    1171             hatchPath.addLineTo({ x + rect.height(), rect.height()});
     1170    FloatLine topSide = { quad.p1(), quad.p2() };
     1171    FloatLine leftSide = { quad.p1(), quad.p4() };
     1172   
     1173    // The opposite axis' length is used to determine how far to draw a hatch line in both dimensions, which keeps the lines at a 45deg angle.
     1174    if (topSide.length() > leftSide.length()) {
     1175        FloatLine bottomSide = { quad.p4(), quad.p3() };
     1176        // Move across the relative top of the quad, starting left of `0, 0` to ensure that the tail of the previous hatch line is drawn while scrolling.
     1177        for (float x = -leftSide.length(); x < topSide.length(); x += hatchSpacing) {
     1178            hatchPath.moveTo(topSide.pointAtAbsoluteDistance(x));
     1179            hatchPath.addLineTo(bottomSide.pointAtAbsoluteDistance(x + leftSide.length()));
    11721180        }
    11731181    } else {
    1174         // Move down the left side of the rect, starting above `0, 0` to ensure that the tail of the previous hatch line is drawn while scrolling.
    1175         for (float y = (-scrollOffset.y() % hatchSpacing) - rect.width(); y < rect.height(); y += hatchSpacing) {
    1176             hatchPath.moveTo({ 0, y });
    1177             hatchPath.addLineTo({ rect.width(), y + rect.width()});
     1182        FloatLine rightSide = { quad.p2(), quad.p3() };
     1183        // Move down the relative left side of the quad, starting above `0, 0` to ensure that the tail of the previous hatch line is drawn while scrolling.
     1184        for (float y = -topSide.length(); y < leftSide.length(); y += hatchSpacing) {
     1185            hatchPath.moveTo(leftSide.pointAtAbsoluteDistance(y));
     1186            hatchPath.addLineTo(rightSide.pointAtAbsoluteDistance(y + topSide.length()));
    11781187        }
    11791188    }
    … …  
    13911400   
    13921401    constexpr auto translucentLabelBackgroundColor = Color::white.colorWithAlphaByte(153);
    1393 
    1394     auto* renderGrid = downcast<RenderGrid>(renderer);
    1395     auto columnPositions = renderGrid->columnPositions();
    1396     auto rowPositions = renderGrid->rowPositions();
    1397     LayoutRect paddingBox = renderGrid->clientBoxRect();
    1398     LayoutRect contentBox = LayoutRect(paddingBox.x() + renderGrid->paddingLeft(), paddingBox.y() + renderGrid->paddingTop(),
    1399         paddingBox.width() - renderGrid->paddingLeft() - renderGrid->paddingRight(), paddingBox.height() - renderGrid->paddingTop() - renderGrid->paddingBottom());
    1400     FloatQuad absoluteContentQuad = renderer->localToAbsoluteQuad(FloatRect(contentBox));
    1401     // FIXME: <webkit.org/b/221971> The position of the grid's bounding box can end up in the wrong place in some layout contexts (e.g. inside another grid)
    1402     // The grid's bounding box may be less than the size of the content box.
    1403     FloatRect gridBoundingBox = {
    1404         absoluteContentQuad.boundingBox().x(),
    1405         absoluteContentQuad.boundingBox().y(),
    1406         columnPositions[columnPositions.size() - 1],
    1407         rowPositions[rowPositions.size() - 1],
    1408     };
    14091402   
    14101403    IntPoint scrollOffset;
    … …  
    14121405    if (!pageView->delegatesScrolling())
    14131406        scrollOffset = pageView->visibleContentRect().location();
    1414 
    1415     FloatSize viewportSize = pageView->sizeForVisibleContent();
     1407   
    14161408    FloatSize contentInset(0, pageView->topContentInset(ScrollView::TopContentInsetType::WebCoreOrPlatformContentInset));
    14171409    float pageScaleFactor = m_page.pageScaleFactor();
    … …  
    14191411    float scrollX = scrollOffset.x() * pageScaleFactor;
    14201412    float scrollY = scrollOffset.y() * pageScaleFactor;
    1421 
     1413   
     1414    FloatRect viewportBounds = { FloatPoint(scrollX, scrollY), pageView->sizeForVisibleContent() };
     1415   
     1416    auto& renderGrid = *downcast<RenderGrid>(renderer);
     1417    auto columnPositions = renderGrid.columnPositions();
     1418    auto rowPositions = renderGrid.rowPositions();
     1419    if (!columnPositions.size() || !rowPositions.size())
     1420        return;
     1421   
     1422    float gridStartX = columnPositions[0];
     1423    float gridEndX = columnPositions[columnPositions.size() - 1];
     1424    float gridStartY = rowPositions[0];
     1425    float gridEndY = rowPositions[rowPositions.size() - 1];
     1426   
     1427    // FIXME: <webkit.org/b/222920> Grid overlay does not adjust for element inside iframes.
     1428    auto columnLineAt = [&](int x) -> FloatLine {
     1429        return {
     1430            renderGrid.localToContainerPoint(FloatPoint(x, gridStartY), nullptr),
     1431            renderGrid.localToContainerPoint(FloatPoint(x, gridEndY), nullptr),
     1432        };
     1433    };
     1434    auto rowLineAt = [&](int y) -> FloatLine {
     1435        return {
     1436            renderGrid.localToContainerPoint(FloatPoint(gridStartX, y), nullptr),
     1437            renderGrid.localToContainerPoint(FloatPoint(gridEndX, y), nullptr),
     1438        };
     1439    };
     1440   
    14221441    GraphicsContextStateSaver saver(context);
    14231442
    14241443    // Drawing code is relative to the visible viewport area.
    14251444    context.translate(0 - scrollX, contentInset.height() - scrollY);
    1426    
    14271445    context.setStrokeThickness(1);
    14281446    context.setStrokeColor(gridOverlay.config.gridColor);
    1429    
    1430     // FIXME: <webkit.org/b/221974> This clipping clips labels as well.
    1431     if (!gridOverlay.config.showExtendedGridLines)
    1432         context.clip(gridBoundingBox);
    14331447
    14341448    // Draw columns and rows.
    1435     auto columnWidths = renderGrid->trackSizesForComputedStyle(GridTrackSizingDirection::ForColumns);
     1449    auto columnWidths = renderGrid.trackSizesForComputedStyle(GridTrackSizingDirection::ForColumns);
    14361450    auto columnLineNames = gridLineNames(node->renderStyle(), GridTrackSizingDirection::ForColumns, columnPositions.size());
    14371451    auto authoredTrackColumnSizes = authoredGridTrackSizes(node, GridTrackSizingDirection::ForColumns, columnWidths.size());
    1438     float previousColumnX = 0;
     1452    FloatLine previousColumnEndLine;
    14391453    for (unsigned i = 0; i < columnPositions.size(); ++i) {
    1440         // Column positions are (apparently) relative to the element's content area.
    1441         auto position = columnPositions[i] + gridBoundingBox.x();
     1454        auto columnStartLine = columnLineAt(columnPositions[i]);
    14421455
    14431456        Path columnPaths;
    1444         columnPaths.moveTo({ position, scrollY });
    1445         columnPaths.addLineTo({ position, scrollY + viewportSize.height() });
     1457        if (gridOverlay.config.showExtendedGridLines) {
     1458            auto extendedLine = columnStartLine.extendedToBounds(viewportBounds);
     1459            columnPaths.moveTo(extendedLine.start());
     1460            columnPaths.addLineTo(extendedLine.end());
     1461        } else {
     1462            columnPaths.moveTo(columnStartLine.start());
     1463            columnPaths.addLineTo(columnStartLine.end());
     1464        }
    14461465       
    1447         float labelX = position;
    1448         if (previousColumnX) {
    1449             drawLayoutHatching(context, FloatRect(previousColumnX, scrollY, position - previousColumnX, viewportSize.height()), IntPoint(scrollX, scrollY));
    1450             labelX = (position + previousColumnX) / 2;
    1451         }
    1452 
    1453         if (i < columnWidths.size() && i + 1 != columnPositions.size()) {
     1466        FloatPoint gapLabelPosition = columnStartLine.start();
     1467        if (i) {
     1468            drawLayoutHatching(context, { previousColumnEndLine.start(), columnStartLine.start(), columnStartLine.end(), previousColumnEndLine.end() });
     1469            FloatLine lineBetweenColumnTops = { columnStartLine.start(), previousColumnEndLine.start() };
     1470            gapLabelPosition = lineBetweenColumnTops.pointAtRelativeDistance(0.5);
     1471        }
     1472
     1473        if (i < columnWidths.size() && i < columnPositions.size()) {
    14541474            auto width = columnWidths[i];
    1455             columnPaths.moveTo({ position + width, scrollY });
    1456             columnPaths.addLineTo({ position + width, scrollY + viewportSize.height() });
    1457             previousColumnX = position + width;
     1475            auto columnEndLine = columnLineAt(columnPositions[i] + width);
     1476
     1477            if (gridOverlay.config.showExtendedGridLines) {
     1478                auto extendedLine = columnEndLine.extendedToBounds(viewportBounds);
     1479                columnPaths.moveTo(extendedLine.start());
     1480                columnPaths.addLineTo(extendedLine.end());
     1481            } else {
     1482                columnPaths.moveTo(columnEndLine.start());
     1483                columnPaths.addLineTo(columnEndLine.end());
     1484            }
     1485            previousColumnEndLine = columnEndLine;
    14581486           
    14591487            if (gridOverlay.config.showTrackSizes) {
    … …  
    14721500                }
    14731501               
    1474                 drawLayoutLabel(context, trackSizeLabel, FloatPoint(position + (width / 2), gridBoundingBox.y()), LabelArrowDirection::Up, translucentLabelBackgroundColor);
     1502                FloatLine trackTopLine = { columnStartLine.start(), columnEndLine.start() };
     1503                drawLayoutLabel(context, trackSizeLabel, trackTopLine.pointAtRelativeDistance(0.5), LabelArrowDirection::Up, translucentLabelBackgroundColor);
    14751504            }
    14761505        } else
    1477             previousColumnX = position;
     1506            previousColumnEndLine = columnStartLine;
    14781507       
    14791508        context.strokePath(columnPaths);
    … …  
    14911520        // FIXME: <webkit.org/b/221972> Layout labels can be drawn outside the viewport, and a best effort should be made to keep them in the viewport while the grid is in the viewport.
    14921521        if (!lineLabel.isEmpty())
    1493             drawLayoutLabel(context, lineLabel.toString(), FloatPoint(labelX, gridBoundingBox.y()), LabelArrowDirection::Down);
    1494     }
    1495 
    1496     auto rowHeights = renderGrid->trackSizesForComputedStyle(GridTrackSizingDirection::ForRows);
     1522            drawLayoutLabel(context, lineLabel.toString(), gapLabelPosition, LabelArrowDirection::Down);
     1523    }
     1524
     1525    auto rowHeights = renderGrid.trackSizesForComputedStyle(GridTrackSizingDirection::ForRows);
    14971526    auto rowLineNames = gridLineNames(node->renderStyle(), GridTrackSizingDirection::ForRows, rowPositions.size());
    14981527    auto authoredTrackRowSizes = authoredGridTrackSizes(node, GridTrackSizingDirection::ForRows, rowHeights.size());
    1499     float previousRowY = 0;
     1528    FloatLine previousRowEndLine;
    15001529    for (unsigned i = 0; i < rowPositions.size(); ++i) {
    1501         auto position = rowPositions[i] + gridBoundingBox.y();
     1530        auto rowStartLine = rowLineAt(rowPositions[i]);
    15021531
    15031532        Path rowPaths;
    1504         rowPaths.moveTo({ scrollX, position });
    1505         rowPaths.addLineTo({ scrollX + viewportSize.width(), position });
     1533        if (gridOverlay.config.showExtendedGridLines) {
     1534            auto line = rowStartLine.extendedToBounds(viewportBounds);
     1535            rowPaths.moveTo(line.start());
     1536            rowPaths.addLineTo(line.end());
     1537        } else {
     1538            rowPaths.moveTo(rowStartLine.start());
     1539            rowPaths.addLineTo(rowStartLine.end());
     1540        }
    15061541       
    1507         float labelY = position;
    1508         if (previousRowY) {
    1509             drawLayoutHatching(context, FloatRect(scrollX, previousRowY, viewportSize.width(), position - previousRowY), IntPoint(scrollX, scrollY));
    1510             labelY = (position + previousRowY) / 2;
    1511         }
     1542        FloatPoint gapLabelPosition = rowStartLine.start();
     1543        if (i) {
     1544            FloatLine lineBetweenRowStarts = { rowStartLine.start(), previousRowEndLine.start() };
     1545            drawLayoutHatching(context, { previousRowEndLine.start(), previousRowEndLine.end(), rowStartLine.end(), rowStartLine.start() });
     1546            gapLabelPosition = lineBetweenRowStarts.pointAtRelativeDistance(0.5);
     1547        }
     1548
     1549        if (i < rowHeights.size() && i < rowPositions.size()) {
     1550            auto height = rowHeights[i];
     1551            auto rowEndLine = rowLineAt(rowPositions[i] + height);
    15121552           
    1513         if (i < rowHeights.size()) {
    1514             auto height = rowHeights[i];
    1515             rowPaths.moveTo({ scrollX, position + height });
    1516             rowPaths.addLineTo({ scrollX + viewportSize.width(), position + height });
    1517             previousRowY = position + height;
     1553            if (gridOverlay.config.showExtendedGridLines) {
     1554                auto extendedLine = rowEndLine.extendedToBounds(viewportBounds);
     1555                rowPaths.moveTo(extendedLine.start());
     1556                rowPaths.addLineTo(extendedLine.end());
     1557            } else {
     1558                rowPaths.moveTo(rowEndLine.start());
     1559                rowPaths.addLineTo(rowEndLine.end());
     1560            }
     1561            previousRowEndLine = rowEndLine;
    15181562           
    15191563            if (gridOverlay.config.showTrackSizes) {
    15201564                auto trackSizeLabel = String::number(roundf(height));
    15211565                trackSizeLabel.append("px"_s);
    1522                
     1566
    15231567                String authoredTrackSize;
    15241568                if (i < authoredTrackRowSizes.size()) {
    … …  
    15311575                    }
    15321576                }
    1533                
    1534                 drawLayoutLabel(context, trackSizeLabel, FloatPoint(gridBoundingBox.x(), position + (height / 2)), LabelArrowDirection::Left, translucentLabelBackgroundColor);
     1577                FloatLine trackLeftLine = { rowStartLine.start(), rowEndLine.start() };
     1578                drawLayoutLabel(context, trackSizeLabel, trackLeftLine.pointAtRelativeDistance(0.5), LabelArrowDirection::Left, translucentLabelBackgroundColor);
    15351579            }
    15361580        } else
    1537             previousRowY = position;
     1581            previousRowEndLine = rowStartLine;
    15381582
    15391583        context.strokePath(rowPaths);
    … …  
    15511595        // FIXME: <webkit.org/b/221972> Layout labels can be drawn outside the viewport, and a best effort should be made to keep them in the viewport while the grid is in the viewport.
    15521596        if (!lineLabel.isEmpty())
    1553             drawLayoutLabel(context, lineLabel.toString(), FloatPoint(gridBoundingBox.x(), labelY), LabelArrowDirection::Right);
     1597            drawLayoutLabel(context, lineLabel.toString(), gapLabelPosition, LabelArrowDirection::Right);
    15541598    }
    15551599   
    … …  
    15601604
    15611605            // Named grid areas will always be rectangular per the CSS Grid specification.
    1562             auto columnStartLine = area.columns.startLine();
    1563             auto columnEndLine = area.columns.endLine();
    1564             auto rowStartLine = area.rows.startLine();
    1565             auto rowEndLine = area.rows.endLine();
     1606            auto columnStartLine = columnLineAt(columnPositions[area.columns.startLine()] - columnPositions[0]);
     1607            auto columnEndLine = columnLineAt(columnPositions[area.columns.endLine() - 1] + columnWidths[area.columns.endLine() - 1]);
     1608            auto rowStartLine = rowLineAt(rowPositions[area.rows.startLine()] - rowPositions[0]);
     1609            auto rowEndLine = rowLineAt(rowPositions[area.rows.endLine() - 1] + rowHeights[area.rows.endLine() - 1] - rowPositions[0]);
    15661610           
    1567             FloatRect areaRect = {
    1568                 columnPositions[columnStartLine] + gridBoundingBox.x(),
    1569                 rowPositions[rowStartLine] + gridBoundingBox.y(),
    1570                 columnPositions[columnEndLine - 1] + columnWidths[columnEndLine - 1] - columnPositions[columnStartLine],
    1571                 rowPositions[rowEndLine - 1] + rowHeights[rowEndLine - 1] - rowPositions[rowStartLine],
    1572             };
     1611            Optional<FloatPoint> topLeft = columnStartLine.intersectionWith(rowStartLine);
     1612            Optional<FloatPoint> topRight = columnEndLine.intersectionWith(rowStartLine);
     1613            Optional<FloatPoint> bottomRight = columnEndLine.intersectionWith(rowEndLine);
     1614            Optional<FloatPoint> bottomLeft = columnStartLine.intersectionWith(rowEndLine);
    15731615           
    1574             context.strokeRect(areaRect, 3);
    1575             drawLayoutLabel(context, name, areaRect.location(), LabelArrowDirection::None, translucentLabelBackgroundColor, areaRect.width());
     1616            // If any two lines are coincident with each other, they will not have an intersection, which can occur with extreme `transform: perspective(...)` values.
     1617            if (!topLeft || !topRight || !bottomRight || !bottomLeft)
     1618                continue;
     1619
     1620            FloatQuad areaQuad = { *topLeft, *topRight, *bottomRight, *bottomLeft };
     1621
     1622            context.setStrokeThickness(3);
     1623            context.strokePath(quadToPath(areaQuad));
     1624
     1625            context.setStrokeThickness(1);
     1626            drawLayoutLabel(context, name, areaQuad.p1(), LabelArrowDirection::None, translucentLabelBackgroundColor, areaQuad.boundingBox().width());
    15761627        }
    15771628    }

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

    r272948 r274096  
    184184    Path drawElementTitle(GraphicsContext&, Node&, const Highlight::Bounds&);
    185185   
    186     void drawLayoutHatching(GraphicsContext&, FloatRect, IntPoint);
     186    void drawLayoutHatching(GraphicsContext&, FloatQuad);
    187187    void drawLayoutLabel(GraphicsContext&, String, FloatPoint, LabelArrowDirection, Color backgroundColor = Color::white, float maximumWidth = 0);
    188188
Note: See TracChangeset for help on using the changeset viewer.