Awesome. It seems to work well in FF4. Now we just need to tack on a jsLint button :) (Although we would have to get an exception to their "good not evil" licensing clause!) Ryan Kaldari On 4/12/11 5:40 PM, Brion Vibber wrote: > 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

Yes, JSHint looks more reasonable, although it inherits the same "good not evil" license-cruft. Sigh. Ryan Kaldari On 4/12/11 9:20 PM, Daniel Friesen wrote: > I never liked jsLint... tries to enforce some overzealous conventions. > I've seen some comments on JSHint. Haven't tried it, but it looks nice, > lets you decide your coding standard. > > ~Daniel Friesen (Dantman, Nadir-Seen-Fire) [http://daniel.friesen.name] > > On 11-04-12 08:50 PM, Ryan Kaldari wrote: >> Awesome. It seems to work well in FF4. Now we just need to tack on a >> jsLint button :) (Although we would have to get an exception to their >> "good not evil" licensing clause!) >> >> Ryan Kaldari >> >> On 4/12/11 5:40 PM, Brion Vibber wrote: >>> 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

-----Original Message----- From: wikitech-l-bounces(a)lists.wikimedia.org [mailto:wikitech-l-bounces@lists.wikimedia.org] On Behalf Of Brion Vibber Sent: 13 April 2011 18:31 To: Wikimedia developers Subject: Re: [Wikitech-l] Syntax-highlighting JS & CSS code editor gadget embedding Ace On Wed, Apr 13, 2011 at 7:23 AM, Michael Dale <mdale(a)wikimedia.org> wrote: > Very cool. Especially given the development trajectory of Ace to > become the "eclipse" of web IDEs there will be a lot of

> possibilities as we could develop our own mediaWiki centric

workflows > for going from per user developing and testing on the live site,

tested by [snip lots of awesome sauce] I, for one, welcome our new integrated development overlords! :D I started up a page of notes and smaller steps on the road to awesomeness which we can start expanding on: http://www.mediawiki.org/wiki/Gadget_Studio The main things I want to hit in the immediate future are syntax highlighting (including clear detection of parse errors, which I don't think Ace does yet) for editing gadgets and site & user scripts. For the upcoming parser stuff we'll want to do lots of experiments, and rapid prototyping the JavaScript-side implementations seems like a good way to get stuff into preliminary testing quickly, so being able to tweak code and immediately re-run it on something is going to be

I like the idea of being able to work on a core or extension JS module "in-place" too though, that could be interesting. :) Not everything will be amenable to being reloaded in the middle of a page view, but things that are could benefit from that kind of testing turnover. -- brion _______________________________________________ Wikitech-l mailing list Wikitech-l(a)lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/wikitech-l