The week started with work on implementation of Zest Recorder. The first thing to do was to write the base recorder module and then improve on it in the following weeks.
The first obstacle came up when I realized that the requests and responses in the browser were not paired correctly in the way I had planned to implement. Due to this, a js file request object got a css response body in it and other similar problems. This issue delayed the work for a few days. I was researching on how other add-ons do the same thing. Read a lot of code from TamperData and HTTPFox add-ons to understand the way they collect req/res data and pair them.
The study of existing add-ons code helped me in understanding how to organize the listeners of the req/res in a better way. Although I didn’t get any clue about how to use a TracingListener to read the data in the channels but I figured it out and the obstacle was cleared :) Thanks to mgoodwin & honza for checking how the pairing is done in firebug.
Soon I packaged ZestRecorder as a module and wrote some front-end sidebar code. Created a github repo and pushed all the work. The initial sidebar looked like this (ugly)
Nothing amazing, but the point was that it was listing the requests properly.
Then in a few more days, I improved the sidebar and ZestRecorder, and enabled communication between them. Now the sidebar has some new useful functions and it has improved a lot (still ugly) :)
The above sidebar has some new options. It has 3 buttons: ‘Lock Tab’, ‘Start Recording’ and ‘Clear Records’.
'Lock Tab' activates the per tab recorder feature of zest addon. This helps in specifying which tab to listen to. When a tab is locked, a green circle appears at the top left of the sidebar. When the current tab is not being recorded, the circle is yellow. This could be used on multiple tabs also. When tabs are switched, the circle shows the state of currently active tab. If we are listening to it, it becomes green, else yellow.
'Start Recording' activates the zest recorder. This activates the main recorder. For this recorder to record req/res in any particular tab, the tabs have to be locked first using 'Lock Tab'. When the recorder is ON, the red circle at the top left of sidebar starts blinking. This indicates that recording is going on. When the 'Stop Recording' is clicked, the red circle stops blinking.
'Clear Records' removes all the recorded data from the bottom request logs and top textarea.
The bottom request log lists all the recorded requests and provides an ‘Open’ button to view the zest form of the request in the top textbox. The textbox needs some more work to show the zest content in a better way. (The text on the image has been edited by me to make it better to read).
The zest body shown in the image isn’t complete. That module is incomplete. The req/res data collected have to be organized properly and form a proper zest object.
A problem that I have found is that the current zest recorder isn’t considering the cached pages. When a page is cached in the browser and the same page is loaded in another tab, the recorder fails to retrieve the page content from cache.
1. Fix the cached page retrieval problem in zest recorder.
2. Complete the zest object creation module.
3. ‘Save Records’ option in sidebar.
4. Improve the UI using some CSS.
5. And whatever comes on the way :)