Changeset 272948 in webkit

Timestamp:

Feb 16, 2021 5:16:15 PM (17 months ago)

Author:

Patrick Angle

Message:

Web Inspector: Implement Grid Overlay "Show area names" drawing
​https://bugs.webkit.org/show_bug.cgi?id=221979

Reviewed by Devin Rousso.

Added support for showing grid area names and bounds in the grid overlay.

• inspector/InspectorOverlay.cpp:

(WebCore::InspectorOverlay::drawLayoutLabel):

• Added support for arrow-less layout labels.
• Added support for providing a background color to allow area names to have a semi-translucent label background.
• Added support for clipping labels to a target width.

(WebCore::InspectorOverlay::drawGridOverlay):

• Added support for stroking grid areas and showing their names in a label.
• inspector/InspectorOverlay.h:

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/InspectorOverlay.cpp (modified) (6 diffs)
• inspector/InspectorOverlay.h (modified) (2 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2021-02-16  Patrick Angle  <pangle@apple.com>
+
+        Web Inspector: Implement Grid Overlay "Show area names" drawing
+        https://bugs.webkit.org/show_bug.cgi?id=221979
+
+        Reviewed by Devin Rousso.
+
+        Added support for showing grid area names and bounds in the grid overlay.
+
+        * inspector/InspectorOverlay.cpp:
+        (WebCore::InspectorOverlay::drawLayoutLabel):
+        - Added support for arrow-less layout labels.
+        - Added support for providing a background color to allow area names to have a semi-translucent label background.
+        - Added support for clipping labels to a target width.
+        (WebCore::InspectorOverlay::drawGridOverlay):
+        - Added support for stroking grid areas and showing their names in a label.
+        * inspector/InspectorOverlay.h:
+
 2021-02-16  Chris Dumez  <cdumez@apple.com>
 

trunk/Source/WebCore/inspector/InspectorOverlay.cpp

@@ -44 +44 @@
 #include "FrameView.h"
 #include "GraphicsContext.h"
+#include "GridArea.h"
 #include "GridPositionsResolver.h"
 #include "InspectorClient.h"
@@ -51 +52 @@
 #include "Node.h"
 #include "NodeList.h"
+#include "NodeRenderStyle.h"
 #include "Page.h"
 #include "PseudoElement.h"
@@ -1173 +1175 @@
 }
 
-void InspectorOverlay::drawLayoutLabel(GraphicsContext& context, String label, FloatPoint point, InspectorOverlay::LabelArrowDirection direction)
+void InspectorOverlay::drawLayoutLabel(GraphicsContext& context, String label, FloatPoint point, InspectorOverlay::LabelArrowDirection direction, Color backgroundColor, float maximumWidth)
 {
     GraphicsContextStateSaver saver(context);
@@ -1185 +1187 @@
     FontCascade font(WTFMove(fontDescription), 0, 0);
     font.update(nullptr);
-    
-    float textWidth = font.width(TextRun(label));
+
+    constexpr auto padding = 4;
+    constexpr auto arrowSize = 4;
     float textHeight = font.fontMetrics().floatHeight();
     float textDescent = font.fontMetrics().floatDescent();
-    constexpr auto padding = 4;
-    constexpr auto arrowSize = 4;
+    
+    float textWidth = font.width(TextRun(label));
+    if (maximumWidth && textWidth + (padding * 2) > maximumWidth) {
+        label.append("..."_s);
+        while (textWidth + (padding * 2) > maximumWidth && label.length() >= 4) {
+            // Remove the fourth from last character (the character before the ellipsis) and remeasure.
+            label.remove(label.length() - 4);
+            textWidth = font.width(TextRun(label));
+        }
+    }
     
     Path labelPath;
@@ -1236 +1247 @@
         textPosition = FloatPoint(arrowSize + padding, (textHeight / 2) - textDescent);
         break;
+    case InspectorOverlay::LabelArrowDirection::None:
+        labelPath.addLineTo({ 0, textHeight + (padding * 2) });
+        labelPath.addLineTo({ textWidth + (padding * 2), textHeight + (padding * 2) });
+        labelPath.addLineTo({ textWidth + (padding * 2), 0 });
+        textPosition = FloatPoint(padding, padding + textHeight - textDescent);
+        break;
     }
     
     labelPath.closeSubpath();
     
-    context.setFillColor(Color::white);
+    context.setFillColor(backgroundColor);
     context.fillPath(labelPath);
     context.strokePath(labelPath);
@@ -1372 +1389 @@
         }
     }
+    
+    if (gridOverlay.config.showAreaNames) {
+        for (auto& [name, area] : node->renderStyle()->namedGridArea()) {
+            // Named grid areas will always be rectangular per the CSS Grid specification.
+            auto columnStartLine = area.columns.startLine();
+            auto columnEndLine = area.columns.endLine();
+            auto rowStartLine = area.rows.startLine();
+            auto rowEndLine = area.rows.endLine();
+            
+            FloatRect areaRect = {
+                columnPositions[columnStartLine] + gridBoundingBox.x(),
+                rowPositions[rowStartLine] + gridBoundingBox.y(),
+                columnPositions[columnEndLine - 1] + columnWidths[columnEndLine - 1] - columnPositions[columnStartLine],
+                rowPositions[rowEndLine - 1] + rowHeights[rowEndLine - 1] - rowPositions[rowStartLine],
+            };
+            
+            context.strokeRect(areaRect, 3);
+            drawLayoutLabel(context, name, areaRect.location(), LabelArrowDirection::None, Color::white.colorWithAlphaByte(153), areaRect.width());
+        }
+    }
 }
 

trunk/Source/WebCore/inspector/InspectorOverlay.h

@@ -169 +169 @@
     
     enum class LabelArrowDirection {
+        None,
         Down,
         Up,
@@ -184 +185 @@
     
     void drawLayoutHatching(GraphicsContext&, FloatRect, IntPoint);
-    void drawLayoutLabel(GraphicsContext&, String, FloatPoint, LabelArrowDirection);
+    void drawLayoutLabel(GraphicsContext&, String, FloatPoint, LabelArrowDirection, Color backgroundColor = Color::white, float maximumWidth = 0);
 
     void drawGridOverlay(GraphicsContext&, const InspectorOverlay::Grid&);