Contributing to Thimble

Contributing to Open Source could be tricky and I’ve been able to experience how bad it gets over the last week. Choosing an Open Source project to contribute to was not a hard task, it was pretty much decided for us. Mozilla’s Thimble project is an open source online editor for people who are in the process of learning HTML, CSS, JavaScript. There were a bunch of issues labeled as “good first bug” and I thought it was the way to go. The actual bugs looked pretty much the same for me – I did have any clue of how to solve them. Eventually, I ended up picking this issue. The problem was that nav header was moving to a weird position when window was to narrow.

In the issue discussion, there has already been some thoughts on where this problem might be living. You see, Thimble projects actually consists of two sub-projects: Thimble project and Mozilla’s Brackets project. Brackets is the actual editor and Thimble is just a host for the iframe that contains Brackets. This  is done due to certain security concerns, since Brackets is running JavaScript this could lead to a potential breach. To avoid it, Brackets and Thimble are hosted on different services which eliminates a possibility of outside interference.

Installing and running Thimble was pretty easy thanks to this blog post. Here are a couple of screen shot of how Brackets and Thimble works.

Brackets (note names for editor parts in red):


and Thimble (note nav headers of Thimble that are synchronized with Brackets):


Initial comments suggested to look for the issue inside Thimble, so I’ve spent next couple of days looking in the wrong place. I think of it as a great insight on the system, since it gave me vague understanding of how Thimble works. Hours of stepping through the code landed me in Brackets, in the Bramble extension. It was a whole new portion of the system, so it took me an other day to finally find something useful. I’ve stumbled across a set of triggers that listened for layout updated. From there it was easy enough to locate the code that actually updates the layout.

At this point, I thought that my problem has finally appeared. Hours of code tinkering proved me wrong. So I sought help from projects developers. David Humphrey was really helpful in providing some valuable information regarding how modules interact with each other. His comments has also strengthened my suspicions of certain parts of the code. The follow-up talk with a friend, who was working on a new extension for Brackets, has cleared the rest of grey areas and allowed me to pin point the exact cause of the problem.

The issue was caused by the action sequence of how cached width for editor had been initialized. Brackets and Thimble use percentage-based system to update the layout, but it seems that cached values are stored as pixel values. Of course, this wasn’t my initial thought, one my initial pull request I’ve just deleted code that initialized the value of the editor. I admit, it wasn’t my brightest idea. After a couple of comments, I was able to come up with a proper formula for editor’s width initialization.

Thimble issue :
Pull request :


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s