Changeset 246301 in webkit

Timestamp:

Jun 10, 2019 5:54:11 PM (5 years ago)

Author:

Simon Fraser

Message:

Add visualization of touch action regions
​https://bugs.webkit.org/show_bug.cgi?id=198718

Reviewed by Antoine Quint.

Add a way to show which elements of the page have touch-action set on them by
painting an overlay with small text that shows the type of action(s).

The event regions are painted into GraphicsLayers at paint time in
RenderLayerBacking by making a pattern image and filling the region rects
with the pattern.

• page/DebugPageOverlays.cpp:

(WebCore::touchEventRegionColors):

• rendering/EventRegion.cpp:

(WebCore::EventRegion::regionForTouchAction const):

• rendering/EventRegion.h:

(WebCore::EventRegion::region const):

• rendering/RenderLayerBacking.cpp:

(WebCore::RenderLayerBacking::updateEventRegion):
(WebCore::patternForTouchAction):
(WebCore::RenderLayerBacking::paintContents):

Location:

trunk/Source/WebCore

Files:

• ChangeLog (modified) (1 diff)
• page/DebugPageOverlays.cpp (modified) (1 diff)
• rendering/EventRegion.cpp (modified) (2 diffs)
• rendering/EventRegion.h (modified) (1 diff)
• rendering/RenderLayerBacking.cpp (modified) (2 diffs)
• rendering/RenderLayerBacking.h (modified) (1 diff)

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2019-06-10  Simon Fraser  <simon.fraser@apple.com>
+
+        Add visualization of touch action regions
+        https://bugs.webkit.org/show_bug.cgi?id=198718
+
+        Reviewed by Antoine Quint.
+
+        Add a way to show which elements of the page have touch-action set on them by
+        painting an overlay with small text that shows the type of action(s).
+
+        The event regions are painted into GraphicsLayers at paint time in
+        RenderLayerBacking by making a pattern image and filling the region rects
+        with the pattern.
+
+        * page/DebugPageOverlays.cpp:
+        (WebCore::touchEventRegionColors):
+        * rendering/EventRegion.cpp:
+        (WebCore::EventRegion::regionForTouchAction const):
+        * rendering/EventRegion.h:
+        (WebCore::EventRegion::region const):
+        * rendering/RenderLayerBacking.cpp:
+        (WebCore::RenderLayerBacking::updateEventRegion):
+        (WebCore::patternForTouchAction):
+        (WebCore::RenderLayerBacking::paintContents):
+
 2019-06-10  Basuke Suzuki  <Basuke.Suzuki@sony.com>
 

trunk/Source/WebCore/page/DebugPageOverlays.cpp

@@ -163 +163 @@
         HashMap<String, Color> map;
         for (auto& entry : entries)
-            map.add(entry.name, Color { entry.r, entry.g, entry.b, 80 });
+            map.add(entry.name, Color { entry.r, entry.g, entry.b, 50 });
         return map;
     }());

trunk/Source/WebCore/rendering/EventRegion.cpp

@@ -158 +158 @@
 }
 
+const Region* EventRegion::regionForTouchAction(TouchAction action) const
+{
+    unsigned actionIndex = toIndex(action);
+    if (actionIndex >= m_touchActionRegions.size())
+        return nullptr;
+
+    return &m_touchActionRegions[actionIndex];
+}
+
 OptionSet<TouchAction> EventRegion::touchActionsForPoint(const IntPoint& point) const
 {
@@ -197 +206 @@
 }
 
-#endif
+#endif // ENABLE(POINTER_EVENTS)
 
 TextStream& operator<<(TextStream& ts, const EventRegion& eventRegion)

trunk/Source/WebCore/rendering/EventRegion.h

@@ -68 +68 @@
     bool contains(const IntRect& rect) const { return m_region.contains(rect); }
 
+    const Region& region() const { return m_region; }
+
 #if ENABLE(POINTER_EVENTS)
     bool hasTouchActions() const { return !m_touchActionRegions.isEmpty(); }
     WEBCORE_EXPORT OptionSet<TouchAction> touchActionsForPoint(const IntPoint&) const;
+
+    const Region* regionForTouchAction(TouchAction) const;
 #endif
 

trunk/Source/WebCore/rendering/RenderLayerBacking.cpp

@@ -2734 +2734 @@
 }
 
+#if ENABLE(POINTER_EVENTS)
+static RefPtr<Pattern> patternForTouchAction(TouchAction touchAction, FloatSize contentOffset, GraphicsContext& destContext)
+{
+    auto toIndex = [](TouchAction touchAction) -> unsigned {
+        switch (touchAction) {
+        case TouchAction::Manipulation:
+            return 1;
+        case TouchAction::PanX:
+            return 2;
+        case TouchAction::PanY:
+            return 3;
+        case TouchAction::PinchZoom:
+            return 4;
+        case TouchAction::None:
+        case TouchAction::Auto:
+            break;
+        }
+        return 0;
+    };
+
+    struct TouchActionAndRGB {
+        TouchAction action;
+        ASCIILiteral name;
+        FloatSize phase;
+    };
+    static const TouchActionAndRGB actionsAndColors[] = {
+        { TouchAction::None, "none"_s, { } },
+        { TouchAction::Manipulation, "manip"_s, { } },
+        { TouchAction::PanX, "pan-x"_s, { } },
+        { TouchAction::PanY, "pan-y"_s, { 0, 9 } },
+        { TouchAction::PinchZoom, "p-z"_s, { 16, 4.5 } },
+    };
+    
+    auto actionIndex = toIndex(touchAction);
+    if (!actionIndex || actionIndex >= ARRAY_SIZE(actionsAndColors))
+        return nullptr;
+
+    const FloatSize tileSize { 32, 18 };
+
+    auto imageBuffer = ImageBuffer::createCompatibleBuffer(tileSize, ColorSpaceSRGB, destContext);
+    if (!imageBuffer)
+        return nullptr;
+
+    const auto& touchActionData = actionsAndColors[actionIndex];
+    {
+        GraphicsContext& imageContext = imageBuffer->context();
+
+        FontCascadeDescription fontDescription;
+        fontDescription.setOneFamily("Helvetica");
+        fontDescription.setSpecifiedSize(10);
+        fontDescription.setComputedSize(10);
+        fontDescription.setWeight(FontSelectionValue(500));
+        FontCascade font(WTFMove(fontDescription), 0, 0);
+        font.update(nullptr);
+
+        TextRun textRun = TextRun(touchActionData.name);
+        imageContext.setFillColor(Color(0, 0, 0, 128));
+
+        constexpr float textGap = 4;
+        constexpr float yOffset = 12;
+        imageContext.drawText(font, textRun, { textGap, yOffset }, 0);
+    }
+
+    auto tileImage = ImageBuffer::sinkIntoImage(WTFMove(imageBuffer));
+    auto fillPattern = Pattern::create(tileImage.releaseNonNull(), true, true);
+    AffineTransform patternOffsetTransform;
+    patternOffsetTransform.translate(contentOffset + touchActionData.phase);
+    patternOffsetTransform.scale(1 / destContext.scaleFactor());
+    fillPattern->setPatternSpaceTransform(patternOffsetTransform);
+
+    return fillPattern;
+}
+#endif // ENABLE(POINTER_EVENTS)
+
+void RenderLayerBacking::paintDebugOverlays(const GraphicsLayer* graphicsLayer, GraphicsContext& context)
+{
+    if (graphicsLayer->eventRegion().isEmpty())
+        return;
+
+    GraphicsContextStateSaver stateSaver(context);
+
+    // The region is offset by contentOffsetInCompositingLayer() so undo that.
+    auto contentOffset = roundedIntSize(contentOffsetInCompositingLayer());
+    context.translate(-contentOffset);
+
+    // The interactive part.
+    auto& eventRegion = graphicsLayer->eventRegion();
+    Color regionColor(0, 0, 0, 5);
+    context.setFillColor(regionColor);
+    for (auto rect : eventRegion.region().rects())
+        context.fillRect(rect);
+
+#if ENABLE(POINTER_EVENTS)
+    const TouchAction touchActionList[] = {
+        TouchAction::None,
+        TouchAction::Manipulation,
+        TouchAction::PanX,
+        TouchAction::PanY,
+        TouchAction::PinchZoom,
+    };
+
+    for (auto action : touchActionList) {
+        auto* actionRegion = graphicsLayer->eventRegion().regionForTouchAction(action);
+        if (!actionRegion)
+            continue;
+
+        auto fillPattern = patternForTouchAction(action, contentOffsetInCompositingLayer(), context);
+        if (!fillPattern)
+            continue;
+
+        context.setFillPattern(fillPattern.releaseNonNull());
+        for (auto rect : actionRegion->rects())
+            context.fillRect(rect);
+    }
+#endif // ENABLE(POINTER_EVENTS)
+}
+
 // Up-call from compositing layer drawing callback.
 void RenderLayerBacking::paintContents(const GraphicsLayer* graphicsLayer, GraphicsContext& context, OptionSet<GraphicsLayerPaintingPhase> paintingPhase, const FloatRect& clip, GraphicsLayerPaintBehavior layerPaintBehavior)
@@ -2772 +2889 @@
 
         paintIntoLayer(graphicsLayer, context, dirtyRect, behavior, paintingPhase);
+
+        if (renderer().settings().visibleDebugOverlayRegions() & NonFastScrollableRegion) // Piggy-back off the setting that shows touch handler regions.
+            paintDebugOverlays(graphicsLayer, context);
+
     } else if (graphicsLayer == layerForHorizontalScrollbar()) {
         paintScrollbar(m_owningLayer.horizontalScrollbar(), context, dirtyRect);

trunk/Source/WebCore/rendering/RenderLayerBacking.h

@@ -385 +385 @@
 
     void paintIntoLayer(const GraphicsLayer*, GraphicsContext&, const IntRect& paintDirtyRect, OptionSet<PaintBehavior>, OptionSet<GraphicsLayerPaintingPhase>);
+    
+    void paintDebugOverlays(const GraphicsLayer*, GraphicsContext&);
 
     static CSSPropertyID graphicsLayerToCSSProperty(AnimatedPropertyID);