Web Inspector: Pad ruler selection area by 1px in the Rendering Frames timeline overview

• Component: Web Inspector
• Status: RESOLVED FIXED

[Matt Baker]

* SUMMARY
Pad ruler selection area by 1px in the Rendering Frames timeline overview.

Frame elements have 1px of left padding, but no right padding (since it would result in 2px gaps between frames). As a result, there is a nice 1px space between the left edge of the ruler selection and the first selected frame, but the right edge is flush against the last frame.

[Radar WebKit Bug Importer]

<rdar://problem/21511319>

[Matt Baker]

Created attachment 255433 [details]
[Patch] Proposed Fix

[Matt Baker]

Created attachment 255434 [details]
[Image] New UI - zoomed in

[Matt Baker]

Created attachment 255435 [details]
[Image] New UI - zoomed out

[Timothy Hatcher]

Comment on attachment 255433 [details]
[Patch] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=255433&action=review

The zoomed in image shows the shading being off by 0.5px, what could cause that? Zoomed out looks fine.

> Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css:58
> +.timeline-overview.frames > .timeline-ruler > .shaded-area.right {
> +    -webkit-transform: translateX(1px);
> +}

Need to shift the right handle too.

[Matt Baker]

Created attachment 256272 [details]
[Patch] Proposed Fix

[Timothy Hatcher]

Comment on attachment 256272 [details]
[Patch] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=256272&action=review

> Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css:57
> +    -webkit-transform: translateX(0px);

Why is this needed?

> Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css:61
> +    -webkit-transform: translateX(5px);

5px seems like a lot, why not just 1px here too?

[Matt Baker]

Comment on attachment 256272 [details]
[Patch] Proposed Fix

View in context: https://bugs.webkit.org/attachment.cgi?id=256272&action=review

>> Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css:57
>> +    -webkit-transform: translateX(0px);
> 
> Why is this needed?

It undoes -webkit-transform: translateX(-1px) declared in the rule set for .timeline-ruler > .header > .divider in TimelineRuler.css.

>> Source/WebInspectorUI/UserInterface/Views/TimelineOverview.css:61
>> +    -webkit-transform: translateX(5px);
> 
> 5px seems like a lot, why not just 1px here too?

Using 1px  would effectively be -webkit-transform: translateX(-3px), as .timeline-ruler > .selection-handle.right is translated by 4px by default (TimelineRuler.css).

[WebKit Commit Bot]

Comment on attachment 256272 [details]
[Patch] Proposed Fix

Clearing flags on attachment: 256272

Committed r186471: <http://trac.webkit.org/changeset/186471>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.