Closed Bug 1194146 Opened 9 years ago Closed 8 years ago

[meta] Creative Tools for Developer Edition 44

Categories

(DevTools :: Inspector, defect)

defect
Not set
normal

Tracking

(relnote-firefox 44+)

RESOLVED FIXED
Tracking Status
relnote-firefox --- 44+

People

(Reporter: pbro, Unassigned)

References

Details

(Keywords: meta)

Important creative-tool bugs we want to get in FF dev edition 44 should block this bug.
Blocks: 1181027
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.
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
Patrick, could you please update the title of your youtube videos to Firefox 44? Thanks!
Flags: needinfo?(pbrosset)
(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.
Flags: needinfo?(pbrosset)
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
Keywords: meta
Status: NEW → RESOLVED
Closed: 8 years ago
No longer depends on: inspector/rulers
Resolution: --- → FIXED
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.