Honey Web

about all things sweet and web-ish

Posts Tagged ‘webdev

Bookmarklets! Userstyles! Userscripts(sort of)!

leave a comment »

As you can infer from the title, I’m quite excited about my latest progress.

Firstly, Browse can now save bookmarklets. When you trigger the palette (right click) on a bookmarklet, the ‘Download link’ option in the palette is replaced with a ‘Save bookmarklet’ option. A new toolbar appears where all the bookmarklets are lined up as buttons. They work rather well and are saved through to SSBs.

Secondly, userstyles now work. There’s a new button in the edit toolbar (I’m open to suggestions about the UI) that opens a small window with a gtksourceview inside. You can write (or copy/paste) CSS in there and click ‘Save’. The CSS is immediately applied to the page and is saved in a file in the activity preferences.

Thirdly, userscripts almost work. The UI and store are not quite ready, but the main part is that I’ve figured out how to very nicely do javascript injection. Like userstyles, I can make userscripts to be immediately executed, but it’ll be slightly harder.

There’s another small feature I’ve added. When you create an SSB, the activity preferences of Browse (without caches and cookies) are saved in the SSB bundle. When first run, they are copied over to that specific SSB’s activity data.

Here are some screenshots:

You can get this commit and try it out.


Written by Lucian

July 6, 2009 at 12:28 am

SSB creator

with 2 comments

I’ve wrote a utility script that creates a copy of the current running activity and bundles it in an .xo (thank you Bobby Powers).

I’ve made a small modification to webtoolbar.py in Browse: the ‘create ssb’ button calls the create utility with the current web page title. In the process, I’ve had to also make a change in webactivity.py because the toolbar constructor did not get the activity object passed to the constructor, but the Browser object and I couldn’t find a way to get the title otherwise.

I’ve had a chat with bemasc, and he suggested I keep the ‘create ssb’ functionality in created SSBs. Since activities are immutable, they could instead be ‘curried’, like functions in functional languages. This would require including activity data (get_activity_root()/data) in the bundle and copy-ing it from the bundle on the first run. I’m a bit worried about confusing users with this, though.

I’ve been working on the Customisation toolbar that will be present in SSBs. For this to work nicely, I have to either allow webactivity.py check wether it rus as Browse or an SSB or subclass WebActivity in ssbactivity.py. I’m not yet sure which is the best way to do this.

I’d like some feedback on all this.

[update] Here‘s a created SSB. It includes the modifications I’ve done to Browse.

Written by Lucian

June 11, 2009 at 5:35 am

Posted in sugar

Tagged with , , , ,

The user experience

leave a comment »

I’ve been thinking about the user experience for quite a while, but it hadn’t quite crystallised into words before.

To the user, this will be a new button in the Browse toolbar named something like ‘create activity’ or ‘sugarize’. When clicked, a new activity bundle gets created with a custom name. The user has to restart Sugar for the activity to be loaded.

At this time, the SSB has no integration with Sugar beyond being able to be saved to the Journal (what Browse already does for all websites). Some web apps may work offline if they use Gears or gecko LocalStorage. Some may have sounds with <audio>. But there is no functionality that Browse doesn’t have, at least not yet.

The newly created activity will have buttons for customisation: adding userscripts, adding userstyles and a toolbar for bookmarklets (which will essentially be activity buttons). JavaScript from inside SSBs can access dbus and APIs for sugar notifications/alerts and hiding/closing the SSB; other APIs will only exist if there is no equivalent functionality using only web technologies. Any additions should be saved in the activity bundle, since they replace any python-level changes done in things like the GMail or the XOeditor activities.

It would also be nice to have bundles of customisation that users can create and other can download. Since SSBs don’t depend on anything, perhaps a button in the SSBs ‘save as .xo’ or ‘save as bundle’, which simply archives SSB activity bundle into an .xo (after it has been customised). The .xo can later be uploaded to activities.sugarlabs.org.

Also, a place to share icons, userscripts, userstyles and bookmarklets would be very useful. Fluid users share icons on flickr and there’s a fluid tag at userscripts.org.

So, I will be extending Browse:

  1. for proper Browse, there will be a new toolbar button for creating SSBs, with a backend script. Let’s call it ‘sugarizer’.
  2. for the Browse used in SSBs, more stuff: managing userstyles/userscripts, the bookmarklet toolbar. Perhaps other things as well, like forbidding domains not in a whitelist.

For the sugarizer, I was thinking of a manifest in Browse.activity that lists what files from Browse should be in the activity SSB. The sugarizer would also have to replace instances of ‘Browse’ and ‘WebActivity’ in activity.info and the locale files.

Written by Lucian

June 6, 2009 at 8:54 pm

Posted in sugar

Tagged with , , , ,

Web apps to demo for Webified

leave a comment »

Bryan Berry suggested I make a list of web apps I’d like to demo as deliverables. Users should be able to navigate to the website with Browse, click ‘create activity’, open the newly created activity and use the web app. I plan to provide examples of better integration with Sugar as userscripts and userstyles for some of the web apps. Also, the created activities should be able to save their state to the Journal.

It will be interesting to compare the results of this (almost) automatic generation of SSBs with manual efforts, like the GMail, SocialCalc and Wiki Browse activities.

Note that I will probably not have enough time to customize all of these. Read notes on each web app for more details.
Web apps that work offline (with Gears):
  •  GMail – probably the most complex, its offline feature is almost a unittest for Gears. With a lot of emails, it should show performance issues with Gears in Sugar. It also has several themes (some of which would look alright inside Sugar) and even allows users to choose their own colours.
  •  Google Calendar – there have been several interface customisations using userstyles and userscripts. It should be easy enough to make one for Sugar
  •  Google Docs (in particular, writer) – also quite complex, with a lot of Gears usage for the offline feature. Documents are plain HTML 4 (not quite valid), interesting
  • MindMeister – very interesting, possible educational value
  • Buxfer – impressive web app, seamless use of Gears. option to store the data only on the client with Firefox extension (firebux).
  • Passpack – interesting use of client-side encryption (passpack.com can’t see your passwords). Gears for resource caching. 3 offline clients: desktop, AIR and Gears.
‘Normal’ web apps, without (official) offline support:
  • WordPress – can optionally use Gears to cache all resources (called Turbo)
  • Bespin – does everything in a <canvas>
  • Wikipedia – not very useful as an activity, but it could run offline with this script
Plain HTML, (almost) only client-side:
  • PaintWeb – (demo) – uses <canvas> a lot, doesn’t really depend on a server
  • Mousebuster (66KB .zip) – made by me, small HTML  & JS game
  • Zoho Writer (and other docs) – much heavier and slower than google docs, interface tries to mimic MS Word and is probably very hard to customize. Plus, I already have an office suite on the list
  • Google Books – not much of a web app, I can’t see how it would help to have it in a separate activity

I welcome any feedback and will probably edit the list accordingly.

Written by Lucian

May 19, 2009 at 7:41 pm

Posted in sugar

Tagged with , , , , , ,