Development Blog

1.3: Viewports on Script Panel

All of the discussion about Bespin’s choice of  Canvas for source code editing, reminded me to talk about one of the invisible new features of Firebug 1.3: the Script panel is now implemented with a ‘viewport’.  By that I mean that only the visible lines of the source are rendered.

If you have 40kloc in a Javascript file (yes those extJS files do that!), the pre-1.3 Firebug would try to render all 40,000 lines in to HTML. Each line would require about 10 DOM elements, plus they have attributes.  That means we are up to around a million nodes.  So as soon as you try to view that monster JS file, Firefox starts to burn CPU while you sit and watch. With the viewport solution we only build 20 lines, a factor of more than 1,000 less!

Of course the viewport has to be updated dynamically for scrolling and other movement.  If you use 1.3 you will see that the Script panel is not as smooth or fast as one would like.  1.4 adds a number of improvements mostly around avoiding extraneous updates.

Right now the 1.4 script panel is fast enough, if not blazing. That makes it unlikely that we would invest in a canvas alternative until we examined the performance issues and determined that the problem was related to HTML rather than some other issue in Firebug.  Another consideration for a large code like Firebug is complexity: the viewport code is harder to maintain but I guess not as hard as a canvas solution.


One Response to “1.3: Viewports on Script Panel”

  1. James Dempster Says:

    Awesome work!

    I had noticed a massive difference for the script tab, it’s usable now! I do lots of coding in ExtJS, so I was really affected.

    Gonna try the 1.4 alpha (or is it beta now) thanks for all the hard work.