712581 - Display the property details in the debugger using transitions

Status: RESOLVED FIXED

(DevTools :: Debugger, enhancement, P3)

Description

[Panos Astithas (he/him) [:past] (please ni?)]

It would be nice to use some sort of transition effect when opening the properties of an object, or showing the contents of a scope in the property view. Sliding from the top into view when appearing and sliding back into the object when disappearing would be best, I think.

Comment 1

[Victor Porof [:vporof][:vp]]

Would this be put in debugger css or themes css?

Comment 2

[Panos Astithas (he/him) [:past] (please ni?)]

Theme, since this is something that theme addons might want to modify.

Comment 3

[Victor Porof [:vporof][:vp]]

Attachment: v1

Comment 4

[Panos Astithas (he/him) [:past] (please ni?)]

Comment on attachment 600024 [details] [diff] [review]
v1

Review of attachment 600024 [details] [diff] [review]:
-----------------------------------------------------------------

I like it. The transition from open to closed doesn't happen for me though.

Comment 5

[Victor Porof [:vporof][:vp]]

(In reply to Panos Astithas [:past] from comment #4)
> Comment on attachment 600024 [details] [diff] [review]
> v1
> 
> Review of attachment 600024 [details] [diff] [review]:
> -----------------------------------------------------------------
> 
> I like it. The transition from open to closed doesn't happen for me though.

I may be missing something, but don't think I can create an animation (or transition for that matter) from open to closed because we're using display: none, which is applied before the animation would start. I can't workaround to using visibility: hidden/visible, because that would leave empty space, and setting element.hidden = true isn't a viable solution because tons of css will need to be changed (and it also doesn't work with display: -moz-box). In all cases, I'd still be required to hack around in js with animationstart/animationend or transitioned events to set display: none or .hidden = true at some point, which I believe would overcomplicate things a bit too much.
Is having just a "in" and no "out" animation too bad?

Comment 6

[Panos Astithas (he/him) [:past] (please ni?)]

(In reply to Victor Porof from comment #5)
> (In reply to Panos Astithas [:past] from comment #4)
> > Comment on attachment 600024 [details] [diff] [review]
> > v1
> > 
> > Review of attachment 600024 [details] [diff] [review]:
> > -----------------------------------------------------------------
> > 
> > I like it. The transition from open to closed doesn't happen for me though.
> 
> I may be missing something, but don't think I can create an animation (or
> transition for that matter) from open to closed because we're using display:
> none, which is applied before the animation would start. I can't workaround
> to using visibility: hidden/visible, because that would leave empty space,
> and setting element.hidden = true isn't a viable solution because tons of
> css will need to be changed (and it also doesn't work with display:
> -moz-box). In all cases, I'd still be required to hack around in js with
> animationstart/animationend or transitioned events to set display: none or
> .hidden = true at some point, which I believe would overcomplicate things a
> bit too much.

Yep, that's what I was afraid.

> Is having just a "in" and no "out" animation too bad?

My gut reaction was "hell no", but I can see how someone might find it strictly worse than how it is now. Still, I would prefer to get this in, so that others can form an opinion based on experience.

Comment 7

[Victor Porof [:vporof][:vp]]

That's what I also thought. I don't have anything else to add to this, so you could make this into an r+ if you feel like it.

Comment 8

[Panos Astithas (he/him) [:past] (please ni?)]

Comment on attachment 600024 [details] [diff] [review]
v1

(In reply to Victor Porof from comment #7)
> That's what I also thought. I don't have anything else to add to this, so
> you could make this into an r+ if you feel like it.

Done. I'll land it tomorrow, if nobody beats me to it.

Comment 9

[Rob Campbell [:rc] (:robcee)]

https://hg.mozilla.org/integration/fx-team/rev/ccac5b7ae380

Comment 10

[Tim Taubert [:ttaubert] (inactive)]

https://hg.mozilla.org/mozilla-central/rev/ccac5b7ae380