1194146 - [meta] Creative Tools for Developer Edition 44

Status: RESOLVED FIXED

(DevTools :: Inspector, defect)

Description

[Patrick Brosset <:pbro>]

Important creative-tool bugs we want to get in FF dev edition 44 should block this bug.

Comment 1

[Patrick Brosset <:pbro>]

I'm going to add a bunch of bugs here, but will later modify that list depending on various discussions about whether we can actually make it for 44.

Comment 2

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Added to FF44 release notes as two notes: 1) for animation and 2) for layout and styles.

Suggested wording:

Creative tools for Animation:
* View/Edit CSS rules for animations directly in the inspector
* Edit cubic-bezier timing functions visually within the editor

Creative tools for Layout and Styles:
* Display rulers along the viewport to verify size and position 
* Easily detect alignment problems
* Use CSS filters to preview and create real-time effects like drop-shadows, sepia, etc.

Links: https://www.youtube.com/watch?v=VJ72MH1H_BQ, https://www.youtube.com/watch?v=t3NKmmWfklU, https://www.youtube.com/watch?v=OC3ZNbnDHt0

Comment 3

[Ritu Kothari (:ritu) (Inactive, please n-i to RyanVM, jcristau, or pascal)]

Patrick, could you please update the title of your youtube videos to Firefox 44? Thanks!

Comment 4

[Patrick Brosset <:pbro>]

(In reply to Ritu Kothari (:ritu) on PTO Oct26-30 from comment #2)
> Added to FF44 release notes as two notes: 1) for animation and 2) for layout
> and styles.
> 
> Suggested wording:
> 
> Creative tools for Animation:
> * View/Edit CSS rules for animations directly in the inspector
> * Edit cubic-bezier timing functions visually within the editor
> 
> Creative tools for Layout and Styles:
> * Display rulers along the viewport to verify size and position 
> * Easily detect alignment problems
> * Use CSS filters to preview and create real-time effects like drop-shadows,
> sepia, etc.
> 
> Links: https://www.youtube.com/watch?v=VJ72MH1H_BQ,
> https://www.youtube.com/watch?v=t3NKmmWfklU,
> https://www.youtube.com/watch?v=OC3ZNbnDHt0

https://www.youtube.com/watch?v=VJ72MH1H_BQ is an old video, the animation inspector has changed since FF43. A more recent video I made is: https://www.youtube.com/watch?v=T2jykykN3yc , but even this one doesn't show everything that ships in FF44 now (although it's quite close to it).
https://www.youtube.com/watch?v=OC3ZNbnDHt0 is also an old video for a feature we shipped some time ago already, I'm not sure we should use this one, as it demos something that's not part of the release notes in comment 2.

Comment 5

[Patrick Brosset <:pbro>]

How about this wording instead:

Creative tools for Animation:
* View/Edit CSS animation keyframe rules directly in the inspector (link: https://www.youtube.com/watch?v=T2jykykN3yc)
* Visually modify the cubic-bezier curve that drives the way animations progress through time
* Discover and scrub through all CSS animations and transitions playing on the page

Creative tools for Layout and Styles:
* Display rulers along the viewport to verify size and position and use the measurement tool to easily detect spacing and alignment problems
* Use CSS filters to preview and create real-time effects like drop-shadows, sepia, etc. (link: https://www.youtube.com/watch?v=t3NKmmWfklU)

Also, we should link to this MDN doc: https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations