While pondering some directions for rapid prototyping of new UI stuff, I
found myself lamenting the difficulty of editing JS and CSS code for
user/site scripts and gadgets:
* lots of little things to separately click and edit for gadgets
* no syntax highlighting in the edit box
* no indication of obvious syntax errors, leading to frequent edit->preview
cycles (especially if you have to turn the gadget back off to edit
successfully!)
* no automatic indentation!
* can't use the tab key
Naturally, I thought it might be wise to start doing something about it.
I've made a small gadget script which hooks into editing of JS and CSS
pages, and embeds the ACE code editor (
http://ace.ajax.org -- a component of
the Cloud9 IDE, formerly Skywriter formerly Mozilla Bespin). This doesn't
fix the usability issues in Special:Gadgets, but it's a heck of a lot more
pleasant to edit the gadget's JS and CSS once you get there. :)
The gadget is available on
www.mediawiki.org on the 'Gadgets' tab of
preferences. Note that I'm currently loading the ACE JavaScript from
toolserver.org, so you may see a mixed-mode content warning if you're
editing via
secure.wikimedia.org. (Probably an easy fix.)
Go try it out!
http://www.mediawiki.org/wiki/MediaWiki:Gadget-CodeEditor.js
IE 8 kind of explodes and I haven't had a chance to test IE9 yet, but it
seems pretty consistently nice on current Firefox and Chrome and (barring
some cut-n-paste troubles) Opera.
I'd really love to be able to use more content-specific editing tools like
this, and using Gadgets is a good way to make this sort of tool available
for testing in a real environment -- especially once we devise some ways to
share gadgets across all sites more easily. I'll be similarly Gadget-izing
the SVG-Edit widget that I've previously done as an extension so folks can
play with it while it's still experimental, but we'll want to integrate them
better as time goes on.
-- brion