Bugzilla Timeline

If you follow me, you know that I challenged myself to fix one bug a week on the Firefox devtools for the whole 2016 year. To keep an eye of how this was going, I built a little dashboard, showing my assigned bugs and if they’re resolved or pending.

I enjoyed working on it, and it turns out, some people in the devtools team quite liked it too. Julian Descottes pinged me on IRC to say it was cool, and Patrick Brosset, which is a manager of said team, even mentionned it during one of their meeting. It pushes me to build a simple configurable version in order to let every mozillians have a glimpse of what their timeline lokks like.

What you can do with it

Configurable

Timeline navigation

You can navigate through your timeline, from year to year, starting 1998 ( Bugzilla’s date of creation, I did not know it had been around for so long ). You can do this by clicking the buttons in the header, or using the navigation keys on the keyboard. If there are lots of bugs to display, it may no fit in the screen, so you can go down with the arrow key too.

Cmd/Ctrl + click on bug line

Cmd/Ctrl + click on a bug line open the bugzilla page for the clicked bug

Bug detail

A click on a bug line triggers the Detail view. It shows the changes that occured on the bug, and displays a timeline of the bug lifetime.

Backstory

Sara Soueidan, whom I follow on Twitter, is advocating SVG real hard. So hard that after seeing her conference at ffconf in Brighton, I really wanted to give it a try. This timeline vizualisation tool looked like a good use case to get my hands dirty. But it ended up to teach me a lot more. Let’s see.

SVG

Fun fact : I first hear of SVG ( and SMIL ) during my first year of master’s degree in college, in 2008. The browser support was awful, and we had to run SMIL animations in Real Media Player. Back then, I did not saw any interests in it : why bother write XML markup to draw, when you just have to open Photoshop and do it in a better user-friendly way ?

Fast forward, nowadays SVG support is much more better, you can produce it with a myriad of softwares, and the most important to me, you can write it directly with Javascript.

Animation ( rAF )

Writing SVG dynamically is pretty cool, but it’s even cooler to animate it ! In order to navigate from year to year, I update the viewBox start attribute so it shows the relevant bugs for the year.
I was able to use requestAnimationFrame in order to animate the viewBox attribute for a given duration.

Github pages

I knew that Github provided a way to host static pages. As my app is only using HTML, CSS and Javascript, it was a perfect match for it. The process is quite simple, in you Git repository you create an orphan branch named “gh-pages”. After that, you can put whatever you want in it. All I have to do is to merge my master branch to it and push it to Github. And that’s it, free, painless hosting for the application. You can even make Travis automatically push master changes to the gh-pages branch.