Bug 199411 - Web Inspector: Elements: use a CSS transition when showing/hiding DOM breakpoint gutter
Summary: Web Inspector: Elements: use a CSS transition when showing/hiding DOM breakpo...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P4 Normal
Assignee: Matt Baker
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2019-07-02 10:57 PDT by Matt Baker
Modified: 2019-07-05 13:07 PDT (History)
6 users (show)

See Also:


Attachments
[Video] 200ms ease-in-out (628.09 KB, video/mp4)
2019-07-02 10:57 PDT, Matt Baker
no flags Details
Patch (1.32 KB, patch)
2019-07-02 10:58 PDT, Matt Baker
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Matt Baker 2019-07-02 10:57:19 PDT
.
Comment 1 Matt Baker 2019-07-02 10:57:55 PDT
Created attachment 373340 [details]
[Video] 200ms ease-in-out
Comment 2 Matt Baker 2019-07-02 10:58:52 PDT
Created attachment 373341 [details]
Patch
Comment 3 Nikita Vasilyev 2019-07-02 12:50:47 PDT
Comment on attachment 373341 [details]
Patch

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

This is really neat!

> Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css:32
> +    transition: padding 200ms ease-in-out;

Nit: I'd prefer to be more explicit: `transition: -webkit-padding-start 200ms ease-in-out`
Comment 4 Matt Baker 2019-07-02 14:59:53 PDT
Comment on attachment 373341 [details]
Patch

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

>> Source/WebInspectorUI/UserInterface/Views/DOMTreeContentView.css:32
>> +    transition: padding 200ms ease-in-out;
> 
> Nit: I'd prefer to be more explicit: `transition: -webkit-padding-start 200ms ease-in-out`

I agree. Unfortunately while `padding-left` works as a transition property, `-webkit-padding-start` does not.

We could revert to the bad ol' days of body[dir=ltr/rtl], and provide a more narrowly scoped CSS transition, but that feels like overkill.
Comment 5 Devin Rousso 2019-07-05 12:27:21 PDT
I'm on the fence as to whether I like adding these kinds of `transition`s.  On one hand, it makes it nice and smooth and feels less jarring (like the content is "added" instead of just "appearing").  On the other hand, if I'm constantly adding/removing DOM breakpoints, seeing that animation over and over may get annoying or too "slow".  I'm inclined to lean towards the former, but I'd like to hear if anyone else has an opinion before r+ing.
Comment 6 Timothy Hatcher 2019-07-05 12:29:42 PDT
I like it.
Comment 7 Devin Rousso 2019-07-05 12:34:10 PDT
Comment on attachment 373341 [details]
Patch

(In reply to Timothy Hatcher from comment #6)
> I like it.
Ok, then r=me :P
Comment 8 WebKit Commit Bot 2019-07-05 13:06:53 PDT
Comment on attachment 373341 [details]
Patch

Clearing flags on attachment: 373341

Committed r247169: <https://trac.webkit.org/changeset/247169>
Comment 9 WebKit Commit Bot 2019-07-05 13:06:54 PDT
All reviewed patches have been landed.  Closing bug.