Changeset 273098 in webkit

Timestamp:

Feb 18, 2021 12:58:04 PM (17 months ago)

Author:

Patrick Angle

Message:

Web Inspector: Implement Grid Overlay "Show track sizes" drawing
​https://bugs.webkit.org/show_bug.cgi?id=222007

Reviewed by BJ Burg.

Show computed and authored track sizes in the grid overlay. Authored sizes are determined from the original
CSSValue, not from the GridTrackSize as the later loses the exact authored syntax (e.g. 14vw is already
resolved to an absolute pixel value).

When the authored size is in px and is identical to the computed size, the value is only shown once for the
track.

• inspector/InspectorOverlay.cpp:

(WebCore::InspectorOverlay::drawLayoutLabel):

• Use the system-ui font for layout labels and reduce the font size to improve information density.
• Drive-by further adjustment to label text positioning to be more accurate.

(WebCore::authoredGridTrackSizes):

• Get the authored sizes for each track in a sizing direction (row-wise or column-wise).

(WebCore::InspectorOverlay::drawGridOverlay):

• Draw labels for track sizes with their computed and, if different from the computed, authored values.
• Drive-by to have area name label backgrounds share a common constant color with track size label backgrounds.

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• inspector/InspectorOverlay.cpp (modified) (13 diffs)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2021-02-18  Patrick Angle  <pangle@apple.com>
+
+        Web Inspector: Implement Grid Overlay "Show track sizes" drawing
+        https://bugs.webkit.org/show_bug.cgi?id=222007
+
+        Reviewed by BJ Burg.
+
+        Show computed and authored track sizes in the grid overlay. Authored sizes are determined from the original
+        `CSSValue`, not from the GridTrackSize as the later loses the exact authored syntax (e.g. `14vw` is already
+        resolved to an absolute pixel value).
+
+        When the authored size is in `px` and is identical to the computed size, the value is only shown once for the
+        track.
+
+        * inspector/InspectorOverlay.cpp:
+        (WebCore::InspectorOverlay::drawLayoutLabel):
+        - Use the system-ui font for layout labels and reduce the font size to improve information density.
+        - Drive-by further adjustment to label text positioning to be more accurate.
+        (WebCore::authoredGridTrackSizes):
+        - Get the authored sizes for each track in a sizing direction (row-wise or column-wise).
+        (WebCore::InspectorOverlay::drawGridOverlay):
+        - Draw labels for track sizes with their computed and, if different from the computed, authored values.
+        - Drive-by to have area name label backgrounds share a common constant color with track size label backgrounds.
+
 2021-02-18  Commit Queue  <commit-queue@webkit.org>
 

trunk/Source/WebCore/inspector/InspectorOverlay.cpp

@@ -33 +33 @@
 #include "AXObjectCache.h"
 #include "AccessibilityObject.h"
+#include "CSSGridAutoRepeatValue.h"
+#include "CSSGridIntegerRepeatValue.h"
+#include "CSSGridLineNamesValue.h"
 #include "DOMCSSNamespace.h"
 #include "DOMTokenList.h"
@@ -61 +64 @@
 #include "RenderObject.h"
 #include "Settings.h"
+#include "StyleResolver.h"
 #include <wtf/MathExtras.h>
 #include <wtf/text/StringBuilder.h>
@@ -79 +83 @@
 static constexpr float rulerSubStepLength = 5;
 
+static constexpr UChar bullet = 0x2022;
 static constexpr UChar ellipsis = 0x2026;
 static constexpr UChar multiplicationSign = 0x00D7;
+static constexpr UChar thinSpace = 0x2009;
 
 static void truncateWithEllipsis(String& string, size_t length)
@@ -1182 +1188 @@
     
     FontCascadeDescription fontDescription;
-    fontDescription.setFamilies({ m_page.settings().fixedFontFamily() });
-    fontDescription.setComputedSize(13);
+    fontDescription.setFamilies({ "system-ui" });
+    fontDescription.setWeight(FontSelectionValue(500));
+    fontDescription.setComputedSize(12);
 
     FontCascade font(WTFMove(fontDescription), 0, 0);
@@ -1215 +1222 @@
         labelPath.addLineTo({ (textWidth / 2) + padding, -arrowSize });
         labelPath.addLineTo({ (textWidth / 2) + padding, -textHeight - (padding * 2) - arrowSize });
-        textPosition = FloatPoint(-(textWidth / 2), -(textHeight / 2) + textDescent - arrowSize - padding);
+        textPosition = FloatPoint(-(textWidth / 2), -textDescent - arrowSize - padding);
         break;
     case InspectorOverlay::LabelArrowDirection::Up:
@@ -1225 +1232 @@
         labelPath.addLineTo({ (textWidth / 2) + padding, arrowSize });
         labelPath.addLineTo({ (textWidth / 2) + padding, textHeight + (padding * 2) + arrowSize });
-        textPosition = FloatPoint(-(textWidth / 2), (textHeight / 2) + textDescent + arrowSize + padding);
+        textPosition = FloatPoint(-(textWidth / 2), textHeight - textDescent + arrowSize + padding);
         break;
     case InspectorOverlay::LabelArrowDirection::Right:
@@ -1265 +1272 @@
 }
 
+static Vector<String> authoredGridTrackSizes(Node* node, GridTrackSizingDirection direction, unsigned expectedTrackCount)
+{
+    if (!is<Element>(node))
+        return { };
+    
+    auto element = downcast<Element>(node);
+    auto styleRules = element->styleResolver().styleRulesForElement(element);
+    styleRules.reverse();
+    RefPtr<CSSValue> cssValue;
+    for (auto styleRule : styleRules) {
+        ASSERT(styleRule);
+        if (!styleRule)
+            continue;
+        cssValue = styleRule->properties().getPropertyCSSValue(direction == GridTrackSizingDirection::ForColumns ? CSSPropertyID::CSSPropertyGridTemplateColumns : CSSPropertyID::CSSPropertyGridTemplateRows);
+        if (cssValue)
+            break;
+    }
+    
+    if (!cssValue || !is<CSSValueList>(cssValue))
+        return { };
+    
+    Vector<String> trackSizes;
+    
+    auto handleValueIgnoringLineNames = [&](const CSSValue& currentValue) {
+        if (!is<CSSGridLineNamesValue>(currentValue))
+            trackSizes.append(currentValue.cssText());
+    };
+    
+    for (auto& currentValue : downcast<CSSValueList>(*cssValue)) {
+        if (is<CSSGridAutoRepeatValue>(currentValue)) {
+            // Auto-repeated values will be looped through until no more values were used in layout based on the expected track count.
+            while (trackSizes.size() < expectedTrackCount) {
+                for (auto& autoRepeatValue : downcast<CSSValueList>(currentValue.get())) {
+                    handleValueIgnoringLineNames(autoRepeatValue);
+                    if (trackSizes.size() >= expectedTrackCount)
+                        break;
+                }
+            }
+            break;
+        }
+        
+        if (is<CSSGridIntegerRepeatValue>(currentValue)) {
+            size_t repetitions = downcast<CSSGridIntegerRepeatValue>(currentValue.get()).repetitions();
+            for (size_t i = 0; i < repetitions; ++i) {
+                for (auto& integerRepeatValue : downcast<CSSValueList>(currentValue.get()))
+                    handleValueIgnoringLineNames(integerRepeatValue);
+            }
+            continue;
+        }
+        
+        handleValueIgnoringLineNames(currentValue);
+    }
+    
+    // Remaining tracks will be `auto`.
+    while (trackSizes.size() < expectedTrackCount)
+        trackSizes.append("auto"_s);
+    
+    return trackSizes;
+}
+
 void InspectorOverlay::drawGridOverlay(GraphicsContext& context, const InspectorOverlay::Grid& gridOverlay)
 {
@@ -1283 +1350 @@
         return;
     }
+    
+    constexpr auto translucentLabelBackgroundColor = Color::white.colorWithAlphaByte(153);
 
     auto* renderGrid = downcast<RenderGrid>(renderer);
@@ -1326 +1395 @@
     // Draw columns and rows.
     auto columnWidths = renderGrid->trackSizesForComputedStyle(GridTrackSizingDirection::ForColumns);
+    auto authoredTrackColumnSizes = authoredGridTrackSizes(node, GridTrackSizingDirection::ForColumns, columnWidths.size());
     float previousColumnX = 0;
     for (unsigned i = 0; i < columnPositions.size(); ++i) {
@@ -1346 +1416 @@
             columnPaths.addLineTo({ position + width, scrollY + viewportSize.height() });
             previousColumnX = position + width;
+            
+            if (gridOverlay.config.showTrackSizes) {
+                auto trackSizeLabel = String::number(roundf(width));
+                trackSizeLabel.append("px"_s);
+                
+                String authoredTrackSize;
+                if (i < authoredTrackColumnSizes.size()) {
+                    auto authoredTrackSize = authoredTrackColumnSizes[i];
+                    if (authoredTrackSize.length() && authoredTrackSize != trackSizeLabel) {
+                        trackSizeLabel.append(thinSpace);
+                        trackSizeLabel.append(bullet);
+                        trackSizeLabel.append(thinSpace);
+                        trackSizeLabel.append(authoredTrackSize);
+                    }
+                }
+                
+                drawLayoutLabel(context, trackSizeLabel, FloatPoint(position + (width / 2), gridBoundingBox.y()), LabelArrowDirection::Up, translucentLabelBackgroundColor);
+            }
         } else
             previousColumnX = position;
@@ -1359 +1447 @@
 
     auto rowHeights = renderGrid->trackSizesForComputedStyle(GridTrackSizingDirection::ForRows);
+    auto authoredTrackRowSizes = authoredGridTrackSizes(node, GridTrackSizingDirection::ForRows, rowHeights.size());
     float previousRowY = 0;
     for (unsigned i = 0; i < rowPositions.size(); ++i) {
@@ -1378 +1467 @@
             rowPaths.addLineTo({ scrollX + viewportSize.width(), position + height });
             previousRowY = position + height;
+            
+            if (gridOverlay.config.showTrackSizes) {
+                auto trackSizeLabel = String::number(roundf(height));
+                trackSizeLabel.append("px"_s);
+                
+                String authoredTrackSize;
+                if (i < authoredTrackRowSizes.size()) {
+                    auto authoredTrackSize = authoredTrackRowSizes[i];
+                    if (authoredTrackSize.length() && authoredTrackSize != trackSizeLabel) {
+                        trackSizeLabel.append(thinSpace);
+                        trackSizeLabel.append(bullet);
+                        trackSizeLabel.append(thinSpace);
+                        trackSizeLabel.append(authoredTrackSize);
+                    }
+                }
+                
+                drawLayoutLabel(context, trackSizeLabel, FloatPoint(gridBoundingBox.x(), position + (height / 2)), LabelArrowDirection::Left, translucentLabelBackgroundColor);
+            }
         } else
             previousRowY = position;
@@ -1409 +1516 @@
             
             context.strokeRect(areaRect, 3);
-            drawLayoutLabel(context, name, areaRect.location(), LabelArrowDirection::None, Color::white.colorWithAlphaByte(153), areaRect.width());
+            drawLayoutLabel(context, name, areaRect.location(), LabelArrowDirection::None, translucentLabelBackgroundColor, areaRect.width());
         }
     }