Changeset 245728 in webkit

Timestamp:

May 23, 2019, 5:10:09 PM (7 years ago)

Author:

Devin Rousso

Message:

Web Inspector: Overlay: rulers should switch sides if they intersect the highlighted node(s) so they don't obstruct any content
​https://bugs.webkit.org/show_bug.cgi?id=198165

Reviewed by Timothy Hatcher.

If the highlighted node is against the top edge of the screen, the top ruler should shift to
the bottom, unless the highlighted node is also against the bottom edge of the screen.

If the highlighted node is against the left edge of the screen, the left ruler should shift
to the right, unless the highlighted node is also against the right edge of the screen.

This way, unless the node is very wide/tall, the rulers won't be drawn on top of anything
being highlighted.

• inspector/InspectorOverlay.h:
• inspector/InspectorOverlay.cpp:

(WebCore::InspectorOverlay::paint):
(WebCore::InspectorOverlay::drawNodeHighlight):
(WebCore::InspectorOverlay::drawQuadHighlight):
(WebCore::InspectorOverlay::drawBounds):
(WebCore::InspectorOverlay::drawRulers):
Drive-by: create an alias for the type (FloatRect) used when calculating the bounds of

everything that's highlighted.

Location:

trunk/Source/WebCore

Files:

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

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2019-05-23  Devin Rousso  <drousso@apple.com>
+
+        Web Inspector: Overlay: rulers should switch sides if they intersect the highlighted node(s) so they don't obstruct any content
+        https://bugs.webkit.org/show_bug.cgi?id=198165
+
+        Reviewed by Timothy Hatcher.
+
+        If the highlighted node is against the top edge of the screen, the top ruler should shift to
+        the bottom, unless the highlighted node is also against the bottom edge of the screen.
+
+        If the highlighted node is against the left edge of the screen, the left ruler should shift
+        to the right, unless the highlighted node is also against the right edge of the screen.
+
+        This way, unless the node is very wide/tall, the rulers won't be drawn on top of anything
+        being highlighted.
+
+        * inspector/InspectorOverlay.h:
+        * inspector/InspectorOverlay.cpp:
+        (WebCore::InspectorOverlay::paint):
+        (WebCore::InspectorOverlay::drawNodeHighlight):
+        (WebCore::InspectorOverlay::drawQuadHighlight):
+        (WebCore::InspectorOverlay::drawBounds):
+        (WebCore::InspectorOverlay::drawRulers):
+        Drive-by: create an alias for the type (`FloatRect`) used when calculating the bounds of
+                  everything that's highlighted.
+
 2019-05-23  Saam barati  <sbarati@apple.com>
 

trunk/Source/WebCore/inspector/InspectorOverlay.cpp

@@ -199 +199 @@
 }
 
-static Path quadToPath(const FloatQuad& quad, FloatRect& bounds)
+static Path quadToPath(const FloatQuad& quad, Highlight::Bounds& bounds)
 {
     Path path;
@@ -213 +213 @@
 }
 
-static void drawOutlinedQuadWithClip(GraphicsContext& context, const FloatQuad& quad, const FloatQuad& clipQuad, const Color& fillColor, FloatRect& bounds)
+static void drawOutlinedQuadWithClip(GraphicsContext& context, const FloatQuad& quad, const FloatQuad& clipQuad, const Color& fillColor, Highlight::Bounds& bounds)
 {
     GraphicsContextStateSaver stateSaver(context);
@@ -226 +226 @@
 }
 
-static void drawOutlinedQuad(GraphicsContext& context, const FloatQuad& quad, const Color& fillColor, const Color& outlineColor, FloatRect& bounds)
+static void drawOutlinedQuad(GraphicsContext& context, const FloatQuad& quad, const Color& fillColor, const Color& outlineColor, Highlight::Bounds& bounds)
 {
     Path path = quadToPath(quad, bounds);
@@ -243 +243 @@
 }
 
-static void drawFragmentHighlight(GraphicsContext& context, Node& node, const HighlightConfig& highlightConfig, FloatRect& bounds)
+static void drawFragmentHighlight(GraphicsContext& context, Node& node, const HighlightConfig& highlightConfig, Highlight::Bounds& bounds)
 {
     Highlight highlight;
@@ -276 +276 @@
 }
 
-static void drawShapeHighlight(GraphicsContext& context, Node& node, FloatRect& bounds)
+static void drawShapeHighlight(GraphicsContext& context, Node& node, Highlight::Bounds& bounds)
 {
     Element* element = effectiveElementForNode(node);
@@ -388 +388 @@
     }
 
-    if (m_highlightQuad)
-        drawQuadHighlight(context, *m_highlightQuad);
+    Highlight::Bounds bounds;
+
+    if (m_highlightQuad) {
+        auto quadBounds = drawQuadHighlight(context, *m_highlightQuad);
+        bounds.unite(quadBounds);
+    }
 
     if (m_highlightNodeList) {
         for (unsigned i = 0; i < m_highlightNodeList->length(); ++i) {
-            if (Node* node = m_highlightNodeList->item(i))
-                drawNodeHighlight(context, *node);
+            if (Node* node = m_highlightNodeList->item(i)) {
+                auto nodeBounds = drawNodeHighlight(context, *node);
+                bounds.unite(nodeBounds);
+            }
         }
     }
 
-    if (m_highlightNode)
-        drawNodeHighlight(context, *m_highlightNode);
+    if (m_highlightNode) {
+        auto nodeBounds = drawNodeHighlight(context, *m_highlightNode);
+        bounds.unite(nodeBounds);
+    }
 
     if (!m_paintRects.isEmpty())
@@ -405 +413 @@
 
     if (m_showRulers)
-        drawRulers(context);
+        drawRulers(context, bounds);
 }
 
@@ -561 +569 @@
 }
 
-void InspectorOverlay::drawNodeHighlight(GraphicsContext& context, Node& node)
-{
-    FloatRect bounds;
+Highlight::Bounds InspectorOverlay::drawNodeHighlight(GraphicsContext& context, Node& node)
+{
+    Highlight::Bounds bounds;
 
     drawFragmentHighlight(context, node, m_nodeHighlightConfig, bounds);
@@ -576 +584 @@
     if (m_nodeHighlightConfig.showInfo)
         drawElementTitle(context, node, bounds);
-}
-
-void InspectorOverlay::drawQuadHighlight(GraphicsContext& context, const FloatQuad& quad)
-{
+
+    return bounds;
+}
+
+Highlight::Bounds InspectorOverlay::drawQuadHighlight(GraphicsContext& context, const FloatQuad& quad)
+{
+    Highlight::Bounds bounds;
+
     Highlight highlight;
     buildQuadHighlight(quad, m_quadHighlightConfig, highlight);
 
     if (highlight.quads.size() >= 1) {
-        FloatRect bounds;
-
         drawOutlinedQuad(context, highlight.quads[0], highlight.contentColor, highlight.contentOutlineColor, bounds);
 
@@ -591 +601 @@
             drawBounds(context, bounds);
     }
+
+    return bounds;
 }
 
@@ -604 +616 @@
 }
 
-void InspectorOverlay::drawBounds(GraphicsContext& context, const FloatRect& bounds)
+void InspectorOverlay::drawBounds(GraphicsContext& context, const Highlight::Bounds& bounds)
 {
     FrameView* pageView = m_page.mainFrame().view();
@@ -654 +666 @@
 }
 
-void InspectorOverlay::drawRulers(GraphicsContext& context)
+void InspectorOverlay::drawRulers(GraphicsContext& context, const Highlight::Bounds& bounds)
 {
     const Color rulerBackgroundColor(1.0f, 1.0f, 1.0f, 0.6f);
@@ -694 +706 @@
     float maxY = minY + height;
 
+    bool drawTopEdge = true;
+    bool drawLeftEdge = true;
+
+    // Determine which side (top/bottom and left/right) to draw the rulers.
+    {
+        FloatRect topEdge(contentInset.width(), contentInset.height(), zoom(width) - contentInset.width(), rulerSize);
+        FloatRect bottomEdge(contentInset.width(), zoom(height) - rulerSize, zoom(width) - contentInset.width(), rulerSize);
+        drawTopEdge = !bounds.intersects(topEdge) || bounds.intersects(bottomEdge);
+
+        FloatRect rightEdge(zoom(width) - rulerSize, contentInset.height(), rulerSize, zoom(height) - contentInset.height());
+        FloatRect leftEdge(contentInset.width(), contentInset.height(), rulerSize, zoom(height) - contentInset.height());
+        drawLeftEdge = !bounds.intersects(leftEdge) || bounds.intersects(rightEdge);
+    }
+
+    float cornerX = drawLeftEdge ? contentInset.width() : zoom(width) - rulerSize;
+    float cornerY = drawTopEdge ? contentInset.height() : zoom(height) - rulerSize;
+
     // Draw backgrounds.
     {
         GraphicsContextStateSaver backgroundStateSaver(context);
 
-        float offsetX = contentInset.width() + rulerSize;
-        float offsetY = contentInset.height() + rulerSize;
-
         context.setFillColor(rulerBackgroundColor);
-        context.fillRect({ contentInset.width(), contentInset.height(), rulerSize, rulerSize });
-        context.fillRect({ offsetX, contentInset.height(), zoom(width) - offsetX, rulerSize });
-        context.fillRect({ contentInset.width(), offsetY, rulerSize, zoom(height) - offsetY });
+
+        context.fillRect({ cornerX, cornerY, rulerSize, rulerSize });
+
+        if (drawLeftEdge)
+            context.fillRect({ cornerX + rulerSize, cornerY, zoom(width) - cornerX - rulerSize, rulerSize });
+        else
+            context.fillRect({ contentInset.width(), cornerY, cornerX - contentInset.width(), rulerSize });
+
+        if (drawTopEdge)
+            context.fillRect({ cornerX, cornerY + rulerSize, rulerSize, zoom(height) - cornerY - rulerSize });  
+        else
+            context.fillRect({ cornerX, contentInset.height(), rulerSize, cornerY - contentInset.height() });
     }
 
     // Draw lines.
     {
+        FontCascadeDescription fontDescription;
+        fontDescription.setOneFamily(m_page.settings().sansSerifFontFamily());
+        fontDescription.setComputedSize(10);
+
+        FontCascade font(WTFMove(fontDescription), 0, 0);
+        font.update(nullptr);
+
         GraphicsContextStateSaver lineStateSaver(context);
 
@@ -718 +760 @@
             GraphicsContextStateSaver horizontalRulerStateSaver(context);
 
-            context.translate(contentInset.width() - scrollX + 0.5f, contentInset.height() - scrollY);
+            context.translate(contentInset.width() - scrollX + 0.5f, cornerY - scrollY);
 
             for (float x = multipleBelow(minX, rulerSubStepIncrement); x < maxX; x += rulerSubStepIncrement) {
@@ -725 +767 @@
 
                 Path path;
-                path.moveTo({ zoom(x), scrollY });
-
+                path.moveTo({ zoom(x), drawTopEdge ? scrollY : scrollY + rulerSize });
+
+                float lineLength = 0.0f;
                 if (std::fmod(x, rulerStepIncrement)) {
+                    lineLength = rulerSubStepLength;
                     context.setStrokeColor(lightRulerColor);
-                    path.addLineTo({ zoom(x), scrollY + rulerSubStepLength });
                 } else {
+                    lineLength = std::fmod(x, rulerStepIncrement * 2) ? rulerSubStepLength : rulerStepLength;
                     context.setStrokeColor(darkRulerColor);
-                    path.addLineTo({ zoom(x), scrollY + (std::fmod(x, rulerStepIncrement * 2) ? rulerSubStepLength : rulerStepLength) });
                 }
+                path.addLineTo({ zoom(x), scrollY + (drawTopEdge ? lineLength : rulerSize - lineLength) });
 
                 context.strokePath(path);
+            }
+
+            // Draw labels.
+            for (float x = multipleBelow(minX, rulerStepIncrement * 2); x < maxX; x += rulerStepIncrement * 2) {
+                if (!x && !scrollX)
+                    continue;
+
+                GraphicsContextStateSaver verticalLabelStateSaver(context);
+                context.translate(zoom(x) + 0.5f, scrollY);
+                context.drawText(font, TextRun(String::numberToStringFixedPrecision(x)), { 2, drawTopEdge ? rulerLabelSize : rulerLabelSize - rulerSize + font.fontMetrics().height() - 1.0f });
             }
         }
@@ -743 +797 @@
             GraphicsContextStateSaver veritcalRulerStateSaver(context);
 
-            context.translate(contentInset.width() - scrollX, contentInset.height() - scrollY + 0.5f);
+            context.translate(cornerX - scrollX, contentInset.height() - scrollY + 0.5f);
 
             for (float y = multipleBelow(minY, rulerSubStepIncrement); y < maxY; y += rulerSubStepIncrement) {
@@ -750 +804 @@
 
                 Path path;
-                path.moveTo({ scrollX, zoom(y) });
-
+                path.moveTo({ drawLeftEdge ? scrollX : scrollX + rulerSize, zoom(y) });
+
+                float lineLength = 0.0f;
                 if (std::fmod(y, rulerStepIncrement)) {
+                    lineLength = rulerSubStepLength;
                     context.setStrokeColor(lightRulerColor);
-                    path.addLineTo({ scrollX + rulerSubStepLength, zoom(y) });
                 } else {
+                    lineLength = std::fmod(y, rulerStepIncrement * 2) ? rulerSubStepLength : rulerStepLength;
                     context.setStrokeColor(darkRulerColor);
-                    path.addLineTo({ scrollX + (std::fmod(y, rulerStepIncrement * 2) ? rulerSubStepLength : rulerStepLength), zoom(y) });
                 }
+                path.addLineTo({ scrollX + (drawLeftEdge ? lineLength : rulerSize - lineLength), zoom(y) });
 
                 context.strokePath(path);
             }
-        }
-
-        // Draw labels.
-        {
-            GraphicsContextStateSaver labelStateSaver(context);
-
-            FontCascadeDescription fontDescription;
-            fontDescription.setOneFamily(m_page.settings().sansSerifFontFamily());
-            fontDescription.setComputedSize(10);
-
-            FontCascade font(WTFMove(fontDescription), 0, 0);
-            font.update(nullptr);
-
-            context.translate(contentInset.width() - scrollX, contentInset.height() - scrollY);
-
-            for (float x = multipleBelow(minX, rulerStepIncrement * 2); x < maxX; x += rulerStepIncrement * 2) {
-                if (!x && !scrollX)
-                    continue;
-
-                GraphicsContextStateSaver verticalLabelStateSaver(context);
-                context.translate(zoom(x) + 0.5f, scrollY);
-                context.drawText(font, TextRun(String::numberToStringFixedPrecision(x)), { 2, rulerLabelSize });
-            }
-
+
+            // Draw labels.
             for (float y = multipleBelow(minY, rulerStepIncrement * 2); y < maxY; y += rulerStepIncrement * 2) {
                 if (!y && !scrollY)
@@ -792 +826 @@
                 GraphicsContextStateSaver horizontalLabelStateSaver(context);
                 context.translate(scrollX, zoom(y) + 0.5f);
-                context.rotate(-piOverTwoFloat);
-                context.drawText(font, TextRun(String::numberToStringFixedPrecision(y)), { 2, rulerLabelSize });
+                context.rotate(drawLeftEdge ? -piOverTwoFloat : piOverTwoFloat);
+                context.drawText(font, TextRun(String::numberToStringFixedPrecision(y)), { 2, drawLeftEdge ? rulerLabelSize : rulerLabelSize - rulerSize });
             }
         }
@@ -799 +833 @@
 }
 
-void InspectorOverlay::drawElementTitle(GraphicsContext& context, Node& node, const FloatRect& bounds)
+void InspectorOverlay::drawElementTitle(GraphicsContext& context, Node& node, const Highlight::Bounds& bounds)
 {
     if (bounds.isEmpty())

trunk/Source/WebCore/inspector/InspectorOverlay.h

@@ -88 +88 @@
     Vector<FloatQuad> quads;
     bool usePageCoordinates {true};
+
+    using Bounds = FloatRect;
 };
 
@@ -126 +128 @@
     bool shouldShowOverlay() const;
 
-    void drawNodeHighlight(GraphicsContext&, Node&);
-    void drawQuadHighlight(GraphicsContext&, const FloatQuad&);
+    Highlight::Bounds drawNodeHighlight(GraphicsContext&, Node&);
+    Highlight::Bounds drawQuadHighlight(GraphicsContext&, const FloatQuad&);
     void drawPaintRects(GraphicsContext&, const Deque<TimeRectPair>&);
-    void drawBounds(GraphicsContext&, const FloatRect&);
-    void drawRulers(GraphicsContext&);
+    void drawBounds(GraphicsContext&, const Highlight::Bounds&);
+    void drawRulers(GraphicsContext&, const Highlight::Bounds&);
 
-    void drawElementTitle(GraphicsContext&, Node&, const FloatRect& bounds);
+    void drawElementTitle(GraphicsContext&, Node&, const Highlight::Bounds&);
 
     void updatePaintRectsTimerFired();