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.
jjb
February 19th, 2009 at 1:08 pm
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.
February 19th, 2009 at 2:08 pm
Since Bespin (I assume) will have a great JS syntax highlighter, you might be able to simplify your code a fair bit by reusing Bespin, even if you don’t *need* it right now.
February 19th, 2009 at 2:12 pm
Robert: I’m hoping to do just that for the script panel.
March 10th, 2009 at 4:02 pm
I just dl this application. And just to clarify, Firebug can make changes to any website, but they are not permanent right??? Thanks
March 14th, 2009 at 6:02 pm
I just reread this post and my reply and it comes off pretty badly. John’s done a lot of great work on the viewport code and I didn’t mean we’d just want to throw it away without a really compelling reason to do it. sorry! I was caught up in the Bespin Fever.
kevin, you are right. Changes aren’t permanent unless you save them from an external editor or copy and paste your changes elsewhere.