firefox-devtools / demos Goto Github PK

Demos for new features in Firefox DevTools

License: Mozilla Public License 2.0

HTML 100.00%

demos's Introduction

devtools-demos

A collection of demos for features in Firefox DevTools

We use these for the posts in the Firefox Nightly blog, twitter announcements in @FirefoxDevTools and generally everywhere we want to talk about these features.

Contributing

Contributions are more than welcome! There are many features and bugs fixed in DevTools every week and we would totally love your help talking about them.

We are creating issues when things are ready to be demoed here too--have a look and see if there's anything you would like to demo!

Choosing a feature to talk about

We want to talk about:

new features or closed bugs in DevTools recently, not in Firefox in general. You can find recently resolved bugs with this Bugzilla search (most Firefox Devtools bugs are tracked in Bugzilla, not GitHub).
tips and tricks, like the ones described in this page.

To avoid duplicating work, look in the issues page to see if someone is already working on making a demo for a specific feature.

If no one is working on it, create a new issue with the same format so others can find it, and state that you want to work on it. Name the issue in a recognisable way! For example, if you want to make a demo for a feature tracked in bugzilla, name the issue as bug-number - description of bug, where the bug number is the number in Bugzilla. For example, bug 12345678 - demo feature ABC would correspond to the bug 12345678 in Bugzilla. Or if the issue is for a tip, name it like tip-feature XYZ.

Demoing a feature

We suggest you create a new branch to work on the feature. Name it something like bug-number, as it makes things easy to track. Make it your current git branch. Then make a new directory, named like the feature you want to demonstrate (but with hyphens, like this).

The Bugzilla page for the feature will often contain a lot of information, but that is normally just useful for the developer implementing the feature, code reviewers, QA/integration testers, and so on, and very rarely useful for the end web developer that uses Devtools.

Your challenge here is to find a way to demo the new feature to web developers. Some features can be explained with an image. Other features are best demoed with a short screen capture (videos or GIFs, but videos are better, because they can be paused AND converted to GIF if need be). This depends on each feature, and some people simply prefer to see a written description. To top it all, not all features are easily demoable, specially the ones that do not have user visible changes. If you're unsure, tell us about your ideas when you create the issue, and we can provide feedback.

We have also prepared a document providing general advice for creating demos. Let us know if there's anything you miss, or if there's anything you feel should be there too!

At a minimum, a demo folder will contain:

index.html page containing HTML to demonstrate the feature. Possibly additional JavaScript and CSS files, if required. This will be linked from the Nightly blog.
README.md explaining what the demo is about, how to use the feature, etc. We will use this for the blog post as well as documentation for the tools in MDN, etc. And it's clear what the demo is when browsing the repository.
And any additional images, videos or demonstrative assets. It's possible that there are already images you can use in the assets folder. Feel free to use these instead of adding new images.

In case of doubt, or to get inspired, you can look at existing demos and follow the same style.

Committing!

Send a pull request and we will review and merge the demo if all is good, or provide extra feedback to help you get better at demoing before we merge it into the repo.

We will aim to use it in every available channel, giving you credit. Thank you!

demos's People

Contributors

Stargazers

Watchers

Forkers

jryans captainbrosset sole nchevobbe glien-king digideskio mozilla-github-standards

demos's Issues

[making-demos] Add software for screen capturing in Windows

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

1297100 - Highlight CSS grids when highlighting elements in the page

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:

1276971 - devicePixelRatio control in RDM

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.

[making-demos] Find out how to take screenshots in Linux

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

1210795 & 1309468 - Animations' easing now appears in the animation inspector sidebar

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.

1310681 - css-color-4 devtools support

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.

WebSocket Inspector

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:

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

Debugger watchpoints

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.

[making-demos] Add software to screen capture in Linux

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

CODE_OF_CONDUCT.md file missing

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:

Required Text - All text under the headings Community Participation Guidelines and How to Report, are required, and should not be altered.
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)

1283453 - Network Throttling UI

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.

[making-demos] Add handy ffmpeg examples

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.

[making-demos] Find out shortcuts to take screenshots in Windows

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

Netmonitor resource blocking

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.