firefox-devtools / demos Goto Github PK
View Code? Open in Web Editor NEWDemos for new features in Firefox DevTools
License: Mozilla Public License 2.0
Demos for new features in Firefox DevTools
License: Mozilla Public License 2.0
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.
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.
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.
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.
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.
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 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.
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:
If you have any questions about this file, or Code of Conduct policies and procedures, please reach out to [email protected].
(Message COC001)
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.