GSoC comes to an end

It has been 13 weeks of continuous development, meetings, Photoshop (not that constant ) and most of all GSoC. And the GSoC finally comes to its end, with the firm pencil down date being today, and the final pencil down date on next Monday. So I would like to use this day (almost over btw) as the starting point of writing the various documentation for this product. I will continue my development on the Timeline devtool from 24th August (as suggested by the GSoC team to not to make change between 20th and 24th), but until then I will complete the documentation part.

Grab the addon from AMO and test it out. Continue reading to know all of its features.

The features completed during this time period of 13 weeks:

• Standardization on the Normalized event and the various rules that DataSink and Producers will follow to interact with each other.
• Creation of three Producers:
  • Network Producer: To track the network calls, time taken, response etc.
  • Page Events Producer: To track various kinds of DOM events happening on the page.
  • Memory Producer: To track the Garbage and Cycle collection, including visually able to separate the slices of an incremental GC.
• and the most time-consuming part: The UI to display all the captured data.
• The UI has many parts which will need lot of details for getting familiar with all of it.

Producer Pane

The pane on the left is the Producers pane, from where you can control every feature and sub-feature of any producer. You can enable/disable a whole producer, or its sub-features, like within Page Events, you can disable Keyboard events (/key(up|press|down)/) etc. You can also toggle a producer to cover maximum or minimum vertical space possible. You can also resize the pane (minimums and maximums set) . You can click a network event line to center the corresponding event and display its details in the pane on the right.

Toolbar

The toolbar on the top serves an area for the various buttons of the UI and for the time ruler that appears while there are events to display, or the recording is happening. On the extreme left, it has 5 buttons: (from left to right)

• Record: This button toggles the recording of the events. The events will still be displayed after the recording stops so that the developer can debug even after recording ends.
• Overview: This button toggles the Overview mode of the Timeline. In the overview, you can see all the events that have happened from the start of this recording session. This does not necessarily mean that the extreme right of the overview mode will be the current time, as the time till the last event would be on the extreme right.
• Zoom in: To zoom into the centered time.
• Zoom out: To zoom out of the centered time. If you zoom out enough number of times, you will reach back to the Overview mode.
• Options: This contains the popup menu for the possible options for the UI. Currently the option to restart the time from 0 on the page reload resides there.
  • This option is really useful in debugging the network calls.

Canvas

The mostly empty space in the right of the Producers Pane is the Timeline canvas, on which all the events will be displayed as dots, or lines with dots. There are various elements and interactions in this canvas itself:

• The ruler on top will give you the time information. It will also display the time at which the mouse pointer is at. You can also grab and drag the ruler to travel through time. No, it is not a time machine too.
• The main large area below ruler will host all the dots and lines. You can hover of these dots and/or lines and they will get highlighted. Along with their highlighting, a pane will also slide in from the extreme right, displaying its details. The mouse will become a hand pointer indicating that you can click to persist that details pane. Upon click, the details pane will stop hovering on top of the canvas and sit to the right of the canvas. If you are hovering over a network event, then the corresponding line on the producers pane will also highlight.
• The blue vertical line, from which all the events appear to come out is the current time (or the time corresponding to “now”) indicator. If you do not see that line, then it means that either the current time is to the left or the right of the visible area.
• You can also click and drag to select a time window to zoom into. If you see a particular event of interest, and want to look into it without the distraction of the neighboring events, then just click to the left of it and drag your mouse to the right of the event, a blue highlighted region will indicate that this area is being selected. In overview or live mode, you can also just click your mouse without moving it, and the window will keep getting bigger as the time passes.

Details Pane

This pane appears when you hover over any event and persists when you click over an event. It contains the detailed information about the event that is selected. It also acts as the junction to integrate with the other devtools in the following manner:

• Network Inspect Panel (used by Web Console): When you are viewing detailed information about a network event, lets say a GET request, then you can see a [+] icon on the top right corner of the details pane. Clicking on it will open the Network Inspect Panel, where you can see even more detailed information that was captured.
• Highlighter: If a DOM event that you are viewing in details in the Details Pane, is related with an element and its id, for ex. a keyup occurred on an input element, then you will see the Target Id property in the details pane. Clicking on the id will open up the highlighter with the corresponding element pre-selected.
• Style Editor: If a network call returned a css file, then clicking on the url in the details pane will open up the Style Editor with the file in view.
• Debugger: If the network call returned a js file, then clicking on the url in the details pane will open up the debugger with the same js file selected.

One more important thing to keep in mind: If you resize the UI using the splitter on the top of the toolbar, then upon reaching a certain threshold height, the UI will convert itself into compact mode, collapsing all the producers to cover as minimum as 100 pixel vertical space.

That is all for now (at least what I can remember). I will update this blog if I left something critical.

I will continue working on it until it reaches into Firefox and beyond. I already have some future ideas for it. Read them and share your ideas in the etherpad, if you have any. I will compile the Etherpad before the next Weekly Meeting.