code-dot-org/code-dot-org — pull request #285 by cpirich (2014-10-29 17:31:51+00:00)
Title: modify workspace headers to work with editcode

![screen shot 2014-10-29 at 10 23 48 am](https://cloud.githubusercontent.com/assets/5429146/4830816/6e82fb2e-5f90-11e4-892b-a331e8133299.png)

Now using the same workspace headers in both blockly mode and droplet (editcode) mode.
Rearranged the page.html.ejs to place the headers inside the appropriate element.
Changed all apps to pass the level.editCode parameter when loading the page.html.ejs template (even only 3 apps completely support editCode at present).
In editCode, added a new codeWorkspace div (that contains the headers and the block/text editor - which is codeTextbox).
Removed the hidden (click the bird / prompt icon) toggle functionality in droplet. You can now just click "Show code" in the headers.
Removed config.getDisplayWidth() from all apps. They all did the same thing. Moved that check for the width into BlocklyApps and removed the onResize wrapper required.
Set the overflow:hidden style on the codeWorkspace div so the droplet toggle animation now looks better!

Sadly, I'm now running into a droplet bug related to dragging blocks from the palette (what we call toolbox) because the hit testing for mousedown seems to not take into account the position of the palette (which has been adjusted by the headers height). I'm going to work with the droplet guys to see how to fix/workaround. Until then, you have to click about 70 pixels higher than the block you are hoping to select...