2016 Q4 accomplishements

[Patrick Brosset]

(Sorry for the long email, but hopefully you'll enjoy reading it! I did put
a lot of emojis in it!)

I'm a big fan of looking back at what landed and reflecting on how much
we've done.
Engineering work can be hard, we're constantly trying to solve hard
problems, making compromises, discovering bugs, and we don't have a lot of
time for celebrating the good things we've done.

So here's a list that, hopefully, will make people realize the amount of
really cool stuff they've done over Q4.

- We shipped a brand new *CSS Grid inspection tool
<https://hacks.mozilla.org/2016/12/css-grid-and-grid-highlighter-now-in-firefox-developer-edition/>*,
first of its kind (thank you :gl and :helenvholmes, :jensimmons). 🎉

- We also shipped a *brand new, redesigned, console panel*. It's only
enabled in Nightly for now but is on the right tracks to becoming enabled
everywhere very soon. 🎊

A lot of work went into creating Reps, the reusable widgets responsible for
displaying all kinds of output in the console. This is great because these
reps are shareable components that are/will be used in many other places of
DevTools.

Thank you to a lot of people, especially contributor :nchevobbe, :bgrins,
:Honza, :lclark and more.

- Q4 was also the time when we shipped our *brand new debugger front-end *to
all channels! This was an awesome accomplishment that we can be proud of. 🔥

I'm personally really excited by all the good stuff moving this project to
GitHub has brought. Q1 will be an interesting time for us to experiment
with moving even more code to GitHub. Let's sync back on that topic again
at the end of Q1 and decide our roadmap for the rest of DevTools. But I'm
already confident that this is the right thing for us to do at this stage,
and we have the debugger project to thank for this.

Props go to :jlast, :jlongster, :clarkbw and the debugger github community
that has been so great.

- As if we didn't ship enough new things, we also shipped *the new,
completely redesigned RDM*
<https://hacks.mozilla.org/2016/11/new-responsive-design-mode-rdm-lands-in-firefox-dev-tools/>
in Q4. 🎆

Not only does it look better, but it also comes with major new features
like network throttling and others. Thank you to :jryans, :zer0, :gl.

- But Q4 was also a quarter where the team actively continued to de-XUL and
de-Chrome our front-end. In fact, we were able to load *the inspector panel
in a content tab* by the end of Q4, which means that it's now entirely HTML
and web APIs. 🎇
Great work :bgrins, :jdescottes, :tromey.

The team even went as far as putting in place an *npm-based local
development workflow* so you can build the inspector, open it in a browser
tab, make changes and see them in the browser by simply reloading!

- Moving on to the *network panel*, thanks to the hard work of :Honza,
contributor :jsnajdr, :rickychien, :steveck and :gasolin, the panel has
been almost entirely de-XUL'd and Reactified! We now have a new and more
modern code base that I'm sure will be very exciting for people to work
with. ✨

- Talking about killing XUL, :gregtatum eradicated a large piece of it
by *re-writting
the toolbox tabs using HTML and React. 🌟*

- :mikeratcliffe did a tone of work on *the storage inspector *too, making
it work even better with IndexedDB, and able to delete cookies and more. 🎈

- A lot of work went into fixing "paper cut" bugs in Q4, those little (or
not so little) annoying bugs that make it frustrating to use our UI.
A big thank you to :ochameau for making *the inspector a lot more resilient*
and fast and to :mikeratcliffe for fixing many bugs of* the inspector event
tooltip*. 🌠

- While I'm on the inspector, there's also been a few random features
added: *css level 4 colors *are now supported (thanks :jerry and :tromey),
there are *visual hints between closing and opening tags *(thanks
:jdescottes), *text nodes are highlighted *(:jdescottes again), and whitespaces
in inline layouts
<https://blog.nightly.mozilla.org/2016/10/17/devtools-now-display-white-space-text-nodes-in-the-dom-inspector/>
are easy to debug (thanks me 😀).

- Q4 was also the occasion for us to plan for the future and set up for *the
new Performance Tool *project. A lot of talking and design work happened.
We can now start 2017 confident that we will ship an awesome performance
tool that both Gecko and web developers will love using.
Thank you :jimb, :gregtatum, :ejpbruel, :mstange. 🎖

- I'll conclude with a few features:

- Our tools became ever so slightly *better for RTL* users too thanks to
contributor :tomer.
- *Service worker's statuses *are now visible in about:debugging thanks
to :jdescottes.
- And *the animation tooling can display easings *
<https://hacks.mozilla.org/2016/11/visualize-animations-easing-in-devtools/>thanks
to :daisuke and :birtles. 🌈

- One last thing: we've written *more React than ever before*. I'm very
happy that our UI is converging towards one common style. Thank you
:jlongster for showing us the way!

- Finally, thank you *:sole *for joining the DevTools team in Q4 and
bringing your energy and ideas. Judging by the number of blog posts I
linked to above, your DevRel background is already having a really good
influence on how the team communicates its work! 🏆

Thank you to all who contributed to making DevTools better in Q4. Thank you
to all the contributors who helped fix DevTools bugs. I could not mention
them all here unfortunately (there wouldn't have been enough emojis anyway).

Let's have a great first quarter of 2017 together!

Cheers,
Patrick

[Amit Zur]

This was very beneficial, thank you! I didn't know about all these efforts.
Regarding the inspector and console - these are not public in github yet, right?

[Patrick Brosset]

Correct, these 2 panels still live in the Mozilla Mercurial repository:
https://hg.mozilla.org/mozilla-central/file/tip/devtools/client

On Sun, Jan 15, 2017 at 11:36 AM, Amit Zur <sendwi...@gmail.com> wrote:

> This was very beneficial, thank you! I didn't know about all these efforts.
> Regarding the inspector and console - these are not public in github yet,
> right?
>
>
> On Thursday, January 12, 2017 at 7:49:20 PM UTC+2, Patrick Brosset wrote:

> _______________________________________________
> dev-developer-tools mailing list
> dev-devel...@lists.mozilla.org
> https://lists.mozilla.org/listinfo/dev-developer-tools
>

[Tom Tromey]

>>>>> "Patrick" == Patrick Brosset <pbro...@mozilla.com> writes:

Patrick> Correct, these 2 panels still live in the Mozilla Mercurial repository:
Patrick> https://hg.mozilla.org/mozilla-central/file/tip/devtools/client

It's perhaps worth noting that the console and reps experiment has
started, thanks to Jason:

https://github.com/devtools-html/console.html
https://github.com/devtools-html/devtools-reps

For the time being these are still canonically maintained in m-c though.
devtools-reps is a bit further along, I don't think the console there
actually works yet.

Tom