This week I continued my work on the User Interface of the Timeline based on the mockups I created. Most of the styling and functionality is complete. I will complete the remaining 3 things over the weekend i.e.
- The axis on the bottom to show the time.
- Per query vertical space for Networks Producer. Which means that each of the request will be shown in its separate row. (right now, every thing is combined in one row)
- Provide a way to hover points and lines to show their info on the right.
I will also populate the list of colors with more bright colors.
One major change from the previous weeks is that I have shifted the storage and transferring mechanism for the captured normalized data from IndexedDB to Custom Event data (data will be sent via a custom event). This might be a temporary change, but during peak activities, a lot of time was utilized to read from User Hard Disk which introduced lags and high CPU usage at times. Moreover, I was already sending an event to tell the UI that a new data is available in the database, adding the new data to the database, and then the fetching the data from database. Now these extra adding and fetching of data parts are removed.
The User Interface
The UI is based on the Developer Tools dark appearance and is very similar to the mockups of Script Debugger by Stephen Horlander. The pane on the left is the controller pane which controls the producers and their features if any. This pane is dynamically generated on the basis of producers information provided by the Data Sink. You can click and feature or any producer to enable or disable it. The bigger empty space on the right is the Canvas where events would be drawn.
When you start the producer, by clicking on the play icon (in future: record icon), all the enabled producers are activated and data starts coming on the canvas as shown in the mockups. As you would see that the data moves away from view very quickly, you can pause the view by clicking on the button again or you can hold and drag the vertical blue bar representing the current time. You can move forward or backward holding the bar and the data will follow accordingly. You can come back to the current time view by clicking on the “Current” just besides the “Producers” button. There are some more user interaction changes remaining for the dragging, but overall it feels good.
Grab the latest xpi and install the add-on to give it a try now.