Changeset 275560 in webkit


Ignore:
Timestamp:
Apr 6, 2021 3:13:40 PM (3 years ago)
Author:
Patrick Angle
Message:

Web Inspector: Grid overlay label style cleanup
​https://bugs.webkit.org/show_bug.cgi?id=224240

Reviewed by BJ Burg.

Source/WebCore:

Clean up grid overlay label styling by:

  • Make all labels use a translucent background. This patch chooses a middle ground between the existing

translucent labels that matched the color of the rulers, and the solid white background used by line
numbers/names for maximum legibility.

  • Bumping the label padding by 1px to improve legibility.
  • Bumping the label arrow size by 2px to make it easier to understand where a label is pointing, particularly

for labels where the edge position is not Middle.

  • inspector/InspectorOverlay.cpp:

(WebCore::InspectorOverlay::drawGridOverlay):
(WebCore::InspectorOverlay::buildGridOverlay):

Source/WebKit:

Mirror changes to constants from WebCore::InspectorOverlay.

  • UIProcess/Inspector/ios/WKInspectorHighlightView.mm:

(createLayoutLabelLayer):
(-[WKInspectorHighlightView _createGridOverlayLayer:scale:]):

Location:
trunk/Source
Files:
4 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r275559 r275560  
     12021-04-06  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: Grid overlay label style cleanup
     4        https://bugs.webkit.org/show_bug.cgi?id=224240
     5
     6        Reviewed by BJ Burg.
     7
     8        Clean up grid overlay label styling by:
     9        - Make all labels use a translucent background. This patch chooses a middle ground between the existing
     10        translucent labels that matched the color of the rulers, and the solid white background used by line
     11        numbers/names for maximum legibility.
     12        - Bumping the label padding by 1px to improve legibility.
     13        - Bumping the label arrow size by 2px to make it easier to understand where a label is pointing, particularly
     14        for labels where the edge position is not `Middle`.
     15
     16        * inspector/InspectorOverlay.cpp:
     17        (WebCore::InspectorOverlay::drawGridOverlay):
     18        (WebCore::InspectorOverlay::buildGridOverlay):
     19
    1202021-04-06  Patrick Angle  <pangle@apple.com>
    221

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

    r275559 r275560  
    8686static constexpr float rulerSubStepLength = 5;
    8787
    88 static constexpr float layoutLabelPadding = 3;
    89 static constexpr float layoutLabelArrowSize = 4;
     88static constexpr float layoutLabelPadding = 4;
     89static constexpr float layoutLabelArrowSize = 6;
    9090
    9191static constexpr UChar bullet = 0x2022;
    … …  
    14671467void InspectorOverlay::drawGridOverlay(GraphicsContext& context, const InspectorOverlay::Highlight::GridHighlightOverlay& gridOverlay)
    14681468{
    1469     constexpr auto translucentLabelBackgroundColor = Color::white.colorWithAlphaByte(153);
     1469    constexpr auto translucentLabelBackgroundColor = Color::white.colorWithAlphaByte(230);
    14701470
    14711471    GraphicsContextStateSaver saver(context);
    … …  
    16241624    }
    16251625
    1626     constexpr auto translucentLabelBackgroundColor = Color::white.colorWithAlphaByte(153);
     1626    constexpr auto translucentLabelBackgroundColor = Color::white.colorWithAlphaByte(230);
    16271627   
    16281628    FrameView* pageView = m_page.mainFrame().view();
    … …  
    18291829            }
    18301830
    1831             gridHighlightOverlay.labels.append(buildLabel(text, gapLabelPosition, Color::white, arrowDirection, arrowEdgePosition));
     1831            gridHighlightOverlay.labels.append(buildLabel(text, gapLabelPosition, translucentLabelBackgroundColor, arrowDirection, arrowEdgePosition));
    18321832        }
    18331833    }
    … …  
    19021902                arrowDirection = correctedArrowDirection(LabelArrowDirection::Left, GridTrackSizingDirection::ForRows);
    19031903
    1904             gridHighlightOverlay.labels.append(buildLabel(text, gapLabelPosition, Color::white, arrowDirection, arrowEdgePosition));
     1904            gridHighlightOverlay.labels.append(buildLabel(text, gapLabelPosition, translucentLabelBackgroundColor, arrowDirection, arrowEdgePosition));
    19051905        }
    19061906    }

  • trunk/Source/WebKit/ChangeLog

    r275557 r275560  
     12021-04-06  Patrick Angle  <pangle@apple.com>
     2
     3        Web Inspector: Grid overlay label style cleanup
     4        https://bugs.webkit.org/show_bug.cgi?id=224240
     5
     6        Reviewed by BJ Burg.
     7
     8        Mirror changes to constants from `WebCore::InspectorOverlay`.
     9
     10        * UIProcess/Inspector/ios/WKInspectorHighlightView.mm:
     11        (createLayoutLabelLayer):
     12        (-[WKInspectorHighlightView _createGridOverlayLayer:scale:]):
     13
    1142021-04-06  Mike Gorse  <mgorse@suse.com>
    215

  • trunk/Source/WebKit/UIProcess/Inspector/ios/WKInspectorHighlightView.mm

    r275519 r275560  
    324324
    325325    constexpr auto padding = 4;
    326     constexpr auto arrowSize = 4;
     326    constexpr auto arrowSize = 6;
    327327    float textHeight = font.fontMetrics().floatHeight();
    328328
    … …  
    462462    }
    463463
    464     constexpr auto translucentLabelBackgroundColor = WebCore::Color::white.colorWithAlphaByte(153);
     464    constexpr auto translucentLabelBackgroundColor = WebCore::Color::white.colorWithAlphaByte(230);
    465465
    466466    for (auto area : overlay.areas)
Note: See TracChangeset for help on using the changeset viewer.