For this section https://github.com/mozdevs/devtools-demos/blob/master/making-demos.md#linux

for https://github.com/mozdevs/devtools-demos/blob/master/making-demos.md#windows-1

With bug 1297100 we now have a way in nightly (Firefox 52) to tell people inspecting elements on the page that css grid layouts exist and where they are.

One of the most important things you can do in devtools when someone has a css grid in their layout is actually show them the grid. Show where the lines, columns, rows are, the areas and the gaps.

On the long term, we will have a sidebar panel that gives users ways to find grids and highlight them in the page, but before that happens, and in order to make it discoverable, we've done one very simple thing worth demoing:

any time you use the highlighter (be it when you pick elements from the page, or hover over elements in the inspector), if the currently highlighted element is a grid, or a child of the grid, then the grid is also highlighted.

See an example here:

The ability to inspect the messages sent over a websocket connection was recently added to Firefox DevTools (in Firefox 71). See https://hacks.mozilla.org/2019/10/firefoxs-new-websocket-inspector/

2 notable additions were made:

• Indicating when a WS connection is closed (landed in 73)
• Formatting SignalR JSON messages too, like other libraries (landed in 72)

Getting a simple demo together, as a screen recording, would be great, so we can then communicate it around.

The ability to block resources from the Netmonitor landed in Firefox 72 in this bug.

It's an awesome feature that lets users prevent downloading certain resources based on their URLs.
I don't think we've had the chance to write a blog post about this. Creating a short video screencast demo would be great so we can communicate about this more broadly via twitter and other places.

See bug 1283453 in bugzilla, the network throttling feature was adding to the new RDM tool, in Nightly, Firefox 52.

This is an awesome feature that lets user of RDM change the network characteristics so it ressembles a 2G or 3G or wifi, etc. network.

Chrome has had this feature for a while too.

This issue is about creating a demo for this. I think a video would work really well.

Bug 1210795 makes animations' easing directly visible inside the animation inspector sidebar, as shown below:

As you can see, now each iteration is displayed with a mini summary graph of the progress function of the animation. Linear would be a line, ease-in-out would be a curve, etc.
This also changes how forward-filling animations are displayed.

This is useful for users to see directly what type of easing is applied without having to mouseover the animation and wait for the tooltip to appear.

Note that bug 1210795 adds this feature for script-generated animations. CSS animations will always be linear, even if animation-timing-function is different from linear, because this property actually maps to the keyframe easing, not the effect easing.

This is why bug 1309468 is also needed as it will make the animation-timing-function easing also appear in the graph.

Bug 1276971 adds a menu to choose a custom devicePixelRatio while working in RDM.

I think a video / gif from some demo page that uses different images at different values could make a good demo of this.

For this section: https://github.com/mozdevs/devtools-demos/blob/master/making-demos.md#windows

As of January 1 2019, Mozilla requires that all GitHub projects include this CODE_OF_CONDUCT.md file in the project root. The file has two parts:

1. Required Text - All text under the headings Community Participation Guidelines and How to Report, are required, and should not be altered.
2. Optional Text - The Project Specific Etiquette heading provides a space to speak more specifically about ways people can work effectively and inclusively together. Some examples of those can be found on the Firefox Debugger project, and Common Voice. (The optional part is commented out in the raw template file, and will not be visible until you modify and uncomment that part.)

If you have any questions about this file, or Code of Conduct policies and procedures, please reach out to [email protected].

(Message COC001)

For https://github.com/mozdevs/devtools-demos/blob/master/making-demos.md#ffmpeg

There's a few suggestions for examples of ffmpeg usage that could be useful when preparing demos, but it is not an exhaustive list.

With bug 1310681, devtools can properly recognize and display new css color syntaxes, specifically in the rule-view (sidebar panel that displays css rules).

We should have a demo in this repo that illustrates the various new color formats and the fact that devtools actually shows a color swatch next to them in the rule-view so you can easily edit them with the color-picker popup.

I filed this issue a little bit early though, bug 1310681 hasn't landed yet. But the ground work is ready, and the bug is assigned and has a patch already, so it shouldn't be long.

In Firefox 72 (now in DevEdition), the debugger now offers users a way to break when a given variable is being accessed. This is a very useful debugger feature that should be communicated about more.

You can find Miriam's article about on Hacks here.

It would be great to create a quick screencast demo about it so it can be communicated even more widely by people.

For this section https://github.com/mozdevs/devtools-demos/blob/master/making-demos.md#linux-1