Major Features

What is Weave Sync all about? In short, Weave Sync lets you securely take your Firefox experience with you to all your Firefox browsers — including our mobile browser, codenamed Fennec. It currently supports continuous synchronization of your bookmarks, browsing history, saved passwords and tabs. For example:

• Get the same results on the Smart Location Bar on each of your Firefox browsers, so you can get to your favorite sites with just a few keystrokes
• Continue what you were doing: have the ability to open any tab you have open on any of your Firefox browsers
• Keep the same list of bookmarks on all of your Firefox browsers
• Easily sign in to all your favorite sites using your saved passwords (this is especially handy on mobile phones, where it’s hard to type in complex passwords)
• Do it all securely: Weave Sync encrypts user data before uploading it to Mozilla’s servers, so that only you can access your data

What’s new in 0.4.0?

If you have not looked at Weave recently, now is a great time to jump in and try it out! This release includes a major rewrite of many of Weave’s key components since the last major release in June. A few of the major changes are:

• Preference syncing (including Personas)
• Identity support (automatic login, including use of OpenID logins)
• Better support for addons using Weave
• Support for Fennec 1.0 beta 2 on Maemo Linux
• Significant improvements in performance during startup and opening new windows.

Getting Involved with Testing and Development

• Install Weave 0.4.0 (requires the Firefox 3.5 release candidate)
• Learn more about Weave
• Discuss, debate, and add to the design in the Weave forum
• Join us in #labs on irc.mozilla.org

– Mike Connor, on behalf of the Weave development team

First, the view once again groups messages into time periods, although it uses a different approach. Version 0.2 grouped messages into four time periods: Today, Yesterday, Last Seven Days, and Last Four Weeks. That made it hard to browse older messages, and in the case of the latter two periods, it didn’t map well to the weekly and monthly groupings by which people typically structure their time.

This version groups messages by day (with plans to support grouping by week and month in the future) and lets you traverse them using buttons on the toolbar:

Second, you can once again view all your subscriptions at once. To do so, select the Subscriptions item from the list of collections:

Try out Snowl 0.3pre2 and let us know what you think! But don’t forget that this is a preview release of a labs experiment, not a stable release of a finished product, and there are bound to be bugs and other issues.

Post your thoughts on Snowl to the discussion group, and file bug reports on the problems you encounter. Or join us for discussion in the #labs IRC channel on irc.mozilla.org. And if you’re interesting in hacking on Snowl, check out the source code.

- Myk Melez on behalf of the Snowl team

Download the extension here. Works in Firefox 3.0 and 3.5.

The First International Ubiquity

The new language options on the Ubiquity settings page

Ubiquity is an experiment in natural-language interfaces, but “natural language” doesn’t mean just English! Since before the first release of Ubiquity, we’ve been pondering how it could be generalized to work for non-English speakers.

The original Ubiquity input parser — the part of Ubiquity that takes what you typed and matches it to what you want to do — was based on a lot of assumptions about English that are not necessarily true in other languages. Some languages don’t use spaces between words; some have the verb come at the end of the sentence. Some languages put different endings on nouns to identify what part of the sentence they are. (If all this grammar talk makes your head spin with fuzzy memories of high-school Latin, you’re not alone.)

Ubiquity 0.5 features a new input parser re-written from scratch to support many languages. Adding new languages to it does not require writing new code, so people don’t have to be programmers to contribute to localization. A new parser localization tutorial will walk you through teaching Ubiquity the grammar of your language.

Ubiquity 0.5 also supports the localization of commands bundled with Ubiquity. At launch, Ubiquity 0.5 will have commands localized in Danish, English, and Japanese. More languages are planned for the near future. We also have a new tutorial that shows how you can get involved in translating Ubiquity commands to your language.

Ubiquity in Japanese mode

Ubiquity in Danish mode

New Interactive Tutorial

We’ve improved the first-run experience of Ubiquity fairly dramatically, based on some user testing. In particular, inspired by the tutorial levels in video games, we’ve created an interactive tutorial that takes you by the hand and walks you through each step of using Ubiquity. It’s aware of where you are, so it can always tell you exactly what to do next.

The interactive tutorial in action

No More Hyphens

Due to a limitation in the old parser, command names couldn’t have spaces in them. That’s why we had a lot of commands with hyphens: “add-to-calendar”, “close-all-tabs”, etc. These hyphens were ugly, hard to type, and not very natural-language. Thanks to the fact that the new parser supports spaces, we can now have much more natural command names. We’ve also standardized the command names in a way that we hope will make Ubiquity overall easier to learn.

Spaces in command names!

Suggestions while you wait

Ubiquity suggestions are now fully asynchronous. What does that mean? Previously, Ubiquity could only show you suggestions based on what it already knew. But with the new improved architecture, it is capable of making network calls to help figure out what your input means, and it can then update the suggestion list in real time to show you new possibilities that it finds. For example, you can now type “pasta” into Ubiquity; before, it wouldn’t have known what to do with this input. But now, by making network calls to web services, it recognizes “pasta” as a type of restaurant, and suggests the Yelp command to find pasta places near you:

The old version of Ubiquity wouldn't know what to do with this input.

Updating Your Commands

The new version of the parser has a new API for command developers. Unfortunately, this means that custom Ubiquity commands will need to be updated in order to work with the new version. Fortunately, the required updates are very minor; they mostly have to do with how commands declare their arguments. We have written a tutorial on how to convert your existing commands to work with the new parser. There is also an updated Command Development tutorial if you are writing new commands from scratch for the new version.

How To Get Involved

• Check out Planet Ubiquity for the latest and greatest Ubiquity happenings.
• Read and contribute to Ubiquity’s documentation on the Mozilla wiki.
• Join the ubiquity-firefox mailing list to discuss Ubiquity with others.
• Join the #ubiquity channel on irc.mozilla.org to talk to Ubiquity community members in real-time over IRC.
• Browse the command library to find Ubiquity commands all over the Internet.
• Report or help fix bugs at our bug tracker.
• Discuss translation and localization issues on the Ubiquity-i18n (internationalization) mailing list.

Thanks

Special thanks to our amazing community members, who really stepped up to make this release possible. They put their blood, sweat, and tears (and weekends) into making Ubiquity 0.5 what it is:

Thanks in particular to:

• Mitcho (Michael Yoshitaka) the linguist of the Ubiquity team, for doing the majority of the design and implementation work on this new parser and localization infrastructure.
• Seth Bindernagel of the Mozilla localization department for his valuable advice.
• Christian Sonne, for working very hard to single-handedly create the Danish translation.
• Masahiko Imanaka (marsf), for contributing the majority of the Japanese translations.
• Heather Kofke-Egger for writing documentation, tracking bugs, and giving technical support to users.
• Brandon Pung for his work on the asynchronous noun detection features.
• Satoshi Murakami (satyr) for numerous bug fixes.
• Blair McBride (Unfocused) for many contributions.
• Fernando Takai (fern) for working on the command search engine.
• Zac Lym (indolering) for his usability research.

Release Notes

The full release notes for 0.5 list many fixed bugs and minor features not mentioned above.

–Jono DiCarlo, on behalf of the Ubiquity team

The submission deadline to the Summer 09 Design Challenge is now closed and 120 concepts were presented. Our nine panelists are busy going through all the excellent entries and voting on the four “Best in Class” honors they are going to bestow on July 8th.

Now it’s time for you to vote on your favorite concept – and help us decide which concept will take the “People’s Choice” award.

Voting is simple – go to our showcase site and select the concept you like most. Everyone has one vote only, so please make sure you choose well. Click on the concept you want to win, and then confirm your vote by clicking on the confirmation link we will send you via email.

Voting ends on Sunday, July 5th.

Vote now!

We are excited to welcome Joseph Smarr, Chief Platform Architect at Plaxo. Joseph is currently leading Plaxo’s “Open Social Web” initiative to put users back in control of who they know when using socially-enabled sites by using open data-sharing standards. He will be discussing the social web, the underlying protocols that make it possible, and the potential role for the browser to play in this world.

In addition, we will hear progress updates on active Labs projects and would love to hear from you! Get involved with a Labs project. Get feedback on your own projects. There will be plenty of opportunity for discussion and hacking. And of course, pizza :). Please RSVP by commenting on this blog if you plan to attend. Hope to see you there!

In particular, it more closely integrates Snowl into Firefox’s existing feed functionality with a revamped river view that replaces Firefox’s feed preview page. When you press the feed button () in Firefox’s location bar, Snowl now subscribes you to the feed and shows it to you in the river view:

If you decide you don’t want to subscribe to the feed after all, unsubscribing from it is easy: just press the Undo button in the notification bar at the top of the page. If you’d rather subscribe to the feed using a different feed reader, you can still do that: just select the reader from the menu in the notification bar.

If the site provides multiple feeds, Snowl subscribes you to all of them. However, if it detects duplicate feeds–like an Atom feed and an RSS one–it only subscribes you to one.

The river view also shows you feeds available in other open tabs, to make the feeds provided by the websites you are browsing more discoverable.

You can subscribe to those feeds with a single click on their star icons, just as with bookmarks.

alta88 has also made a number of improvements to the list view, including the ability to delete messages and the ability to search collections.

Try out Snowl 0.3pre1 and let us know what you think! But don’t forget that this is a preview release of a labs experiment, not a stable release of a finished product, and there are bound to be bugs and other issues.

Post your thoughts on Snowl to the discussion group, and file bug reports on the problems you encounter. Or join us for discussion in the #labs IRC channel on irc.mozilla.org. And if you’re interesting in hacking on Snowl, check out the source code.

- Myk Melez on behalf of the Snowl team

Over the last few weeks, we’ve been busy with the usual hacking making Weave more useful and stable for our users.

We’ve added some new and some familiar faces to our team.

+ Mike Connor. We are really excited to have Mike join our team to hack on Weave. His experience leading Firefox is going to be invaluable as we work towards making Weave a rock solid service for users.

+ Anant Narayanan. Anant was an intern last year and is back for the summer working on several cool Weave projects.

+ Ragavan Srinivasan. Ragavan joins the team as a PM who will be responsible for making sure we continue building a useful service that furthers the Weave vision.

We’ve also been doing some hard thinking on where we would like to see Weave go next. Most of this thinking is still in the very early stages, but here are a couple of thoughts that we’d like to share and get your feedback on:

Increasing Weave stability and scalability.
There are a few open bugs we’d like to tackle.

While we aren’t going to get to all of them right away, there is a reasonable number in there that we’d like to resolve soon. You should see more activity on this front soon along with a call to action. But, don’t wait for us. If you are interested in a particular bug, let us know by leaving a comment on bugzilla. If you are a developer and want to get involved in the Weave project, pick a bug and get going.

We are also going to be restarting our regular meetings and bug triage sessions real soon now. We’ll share details shortly here as well as on the Weave wiki pages.

Revising the Weave vision.
We crafted the initial vision for Mozilla Weave in late 2007. While the core concepts outlined in that vision still remain true and continue to guide the project, we are also increasingly aware of rapid change and innovation across the open, social web. We feel this is a good time for us to revise some aspects of the original vision. A couple of examples of what we’ve been thinking about include:

+ One of the most popular features of the Weave platform is Sync that allows you to synchronize your browser meta-data in the cloud. Over time, people have started equating Weave to Sync. We need to do a better job of explaining that Sync is one (important) aspect of Weave, but Weave is a lot more than Sync.

+ We’ve mentioned before that user identity is an important building block for the open web. Yet, it continues to be fraught with usability issues. Some of the recent efforts like OpenID are making admirable progress in making this easy for users, but we agree there’s room for improvement. We demonstrated one such possible improvement previously. A question we keep coming back to is what role should the browser play in online identity?

We hope to continue evolving our thinking on this over the next few weeks and we’ll share them frequently via this blog and other forums.

As always, if you have any thoughts on the above topics or anything related to Weave, we’d love to hear from you. Please post your comments here or on the Weave discussion group .

–
Dan Mills, Ragavan Srinivasan on behalf of the Weave team

In the short few weeks since launch, we’ve already seen an amazing amount of generativity.

People have Jetpacks that do everything from extending the capabilities of the web to adding a Cylon to the browser; from taking snapshots of the current page to controlling music players. In fact, we’ve had over 40,000 downloads and over 40 Jetpacks (that we know about!) written by people who previously had only written for the Web. And Jetpack is still mainly a technology preview.

What’s New in 0.2?

Besides numerous bug fixes (including a particularly nasty one that would hide prevent extensions from being in the status bar), there are three main additions: slidebars, jetpack.future, and persistent storage.

Install it now.

Slidebars

Slidebars are a reinvention of the old sidebar feature of browsers. They allow quick access to a wide range of both temporary and permanent information at the side of your browser window.

Slidebars can be used for many things, like quick access to streams of information (like Twitter, Facebook, or Reddit), or for watching a video while you continue to browse the web.

Creating a slidebar is as simple as:

jetpack.slideBar.append({
  icon: "http://wikipedia.org/favicon.ico",
  url: "http://en.m.wikipedia.org/",
  width: 300
});

Which will create a slidebar which shows the mobile version of Wikipedia. You can read more about slidebars in the API documentation.

Slidebars are still experimental and have a lot of quirks. The API will change. That’s why they’re only accessible through a new feature…

jetpack.future

Jetpack is two things at once: it is a platform for experimentation and it is also a solid set of APIs that anyone to easily build new Firefox features. To enable Jetpack to be both stable and — at the same time — to experiment with not-quite-yet-ready features we’ve added the ability to import new features from the “future”.

Slidebars, for example, are still highly experimental. To use them, you need to import them from the future first.

Read more about future in the Jetpack enhancement proposal (JEP) for jetpack.future.

jetpack.future.import("slideBar")

This makes slidebars accessible from jetpack.slideBar.

Persistent Storage and Clipboard Support

One of the most requested features in the Jetpack development mailing list was for the ability to persistently store data across restarts.

We’ve added simple storage to the future module. The API is defined in the storage JEP. Using it as simple as:

jetpack.future.import("storage.simple");
var db = jetpack.storage.simple;
var data = {name: "Firefox", twitter: "@firefox"};
db.set( "friend", data );

Get Involved

Mozilla Labs is a virtual lab where people come together online to create, experiment and play with Web innovations for the public benefit. The Jetpack experiment is still in its infancy and just getting started. There are many ways to join the team and get involved:

• Install and play around with the initial Jetpack API and demos
• Write a JEP
• Report a bug
• Grab the source code and fix a bug or add a feature
• Discuss, debate and add to the design in the Jetpack discussion group
• Join us in #jetpack on irc.mozilla.org

– Atul Varma and Aza Raskin on behalf of the Jetpack development team.

Since the Personas launch ten weeks ago, 5 million users have downloaded the extension, approximately 60% of which are based outside of the United States. The community has also welcomed over 13,000 designs from nearly 9,000 artists.

• People can more easily access, discover, and share art.
• Artists can more easily create and promote their art.
• Community members can more easily collaborate and contribute to the project.

We blog about this progress regularly, but here is a summary of what has been accomplished, as well as the project’s next steps:

1. People can more easily discover, use, and share art.

Through a series of five releases, the community has made the Personas experience more accessible, discoverable, and shareable.

• Localized in Additional Languages : the Personas extension is now localized in Polish, Serbian, Turkish, and Chinese. This is in addition to the other 12 languages that were supported during the last launch, including Spanish, German, Bulgarian, Danish, French, Italian, Japanese, and Portuguese. In the future, we plan to localize the website with these languages.

• Ported to Thunderbird: thanks largely to the contributions of Huang Yaoquan, Personas can now be installed on Thunderbird. Integrating the extension into Thunderbird is a work in progress (see buglist), and Huang and others are continuing to make progress.

• Enabled Sharing: it is now easy for you to share Personas art work you admire with your friends. Each design’s detail page now has a ShareThis link.

• Added Pagination: as the Pesonas gallery continues to expand, it became increasingly important to organize the art in a way that enables you to browse all designs without performance issues. We included pagination in the All/All section of the gallery so that your browser loads the full gallery in sections, rather than 10,000+ designs at one time.

2. Artists can more easily create and promote their art.

Through the past five releases, we have added a easy-to-use platform for artists to create new Personas art and promote their work in front of millions of people.

• Artist Detail Pages: As the gallery expands, it becomes increasingly important for each artist to have their own personal space within the site to display their creations. In the prior release, we solved this problem by creating detail pages for each artist. So, if you have created several persona designs, you can now share your entire set of work by sharing a single link.

• Personalized Descriptions: Before the recent release, each detail page header included the same language. Now, each artist can also personalize their detail page by adding a description of themselves and their work. Existing Personas artists can add a personalized description here.

• Artist Display Names: Before the recent release, each artist’s user-name served as their byline. Now, each artist will have the opportunity to create a cleaner, less restricted display name for their work. Existing artists can add a display name here.

• Revamped Design Tutorial: Sean Martell developed an easy-to-read and apply tutorial (located in the “How To” section of the site) that makes it easier for each artist to create and share quality art in the Personas gallery. The tutorial also points to free online editing resources, which lets artists without access to Photoshop, or other pay-to-use editing software, participate in the gallery.

3. Community members can more easily collaborate and contribute.

• Expanded Discussion Group: The Personas discussion group now has over 100 engaged members posting an average of 10-15 thoughts every day. Members actively debate product features and support technical issues. The conversation continues to grow every day.

• Collaborative Product Vision: Community discussion also informs product development. Members actively suggest new features, including joeytwiddle who assembled a wiki page of suggestions, which the Personas development team is considering for their roadmap.

What’s Next?

Between now and 10 million downloads, we will continue to focus on creating the easiest, and most meaningful gallery experience possible, and serving as a strong platform for artists to create and promote their work . In the next two weeks, we will focus on a set of improvements, which include letting you search functionality to the gallery, and enabling you to create a “my favorites” category.

To evolve quickly in the right direction, we need your ideas and feedback. If you have thoughts on how to make Personas better, please discuss and debate them with the community in our discussion group or add a solution to our newly created support wiki. We will continue to update you with the progress of the project. In the meantime, take a moment to celebrate how far our community and product have come in the past ten weeks.

– Toby Elliott, Myk Melez, Ryan Doherty, and Suneel Gupta on behalf of the Personas development team.

Panelists Announced

We are proud to announce our panel which will bestow “Best in Class” honors to the best concepts in the categories innovation, execution, interaction and producible.

The panelists are:

• Janna DeVylder, President of IxDA’s board of directors and soon-to-be director of interactive communication at Savannah College of Art & Design
• Kevin Silver, IxDA board member and interaction designer at Tyler Technologies
• Jeroen van Geel, Chief kahuna of Johnny Holland and senior interaction designer at Fabrique Communication & Design
• Steve Baty, Editor at Johnny Holland and user experience strategist
• Aza Raskin, Head of user experience at Mozilla Labs and founder of Humanized
• Ecaterina Valica, Amine Zafri & Valentin Laube, the “Best in Class” honorees from our Spring 09 Design Challenge

And we want to hear your opinion. Have your say and vote for the “People’s Choice” honor!

Deadline Reminder

The submission deadline for the Design Challenge Spring 2009 is on June 21st! Now is the time for everyone in the wider community to help us answer the question: “Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?”

All you need to get started is a mockup and a short video explaining your mockup, the ideas behind it and the proposed functionality!

Get all the details about your participation here.

Since the Personas project launched, the extension has been downloaded almost 5 million times, and the gallery has welcomed over 13,000 designs.

Over the past three weeks, the Personas development team has released two updates to the project. Much of this effort was driven through community feedback, particularly from the Personas discussion group. In the earlier release, we enabled pagination and sharing on the site, localized the extension in additional languages, and ported Personas to Thunderbird. In the latest release, we focused on improving the experience for the Personas artists who create and share their work in the public gallery.

Improving the Artist’s Experience

A major goal for the Personas project is not only to scale a gallery of art, but to give each artist a platform to create and promote their work. In the latest release, we aimed to make it even easier to create Persona art, and to enable each artist to build their presence within the gallery. With these objectives in mind, we added the following features to the project:

• Artist Detail Pages: As the gallery expands, it becomes increasingly important for each artist to have their own personal space within the site to display their creations. In the prior release, we solved this problem by creating detail pages for each artist. So, if you have created several persona designs, you can now share your entire set of work by sharing a single link.

Each Artist Page Now Include a Personal Description

Old Byline

New Byline

• Revamped Design Tutorial: Sean Martell developed an easy-to-read and apply tutorial (located in the “How To” section of the site) that makes it easier for each artist to create and share quality art in the Personas gallery. The tutorial also points to free online editing resources, which lets artists without access to Photoshop, or other pay-to-use editing software, participate in the gallery.

What’s Next?

The Personas project will continue to evolve quickly with your ideas and feedback. If you have thoughts on how to make Personas better, please discuss and debate them with the community in our discussion group or add a solution to our newly created support wiki. We will continue to update you with the progress of the project.

– Toby Elliott, Ryan Doherty, and Suneel Gupta on behalf of the Personas development team.

We have been really excited to work with the Jetpack team to offer good support for extending the browser on the fly from within Bespin itself. As you can see from the video below there is support on bespin.mozilla.com itself to edit and install Jetpack features, and the Jetpack team added Bespin from within the add-on itself to give you a quick way to fly around!

This is the tip of the iceberg of course, and we can’t wait to add more features to both Jetpack and Bespin to make extending the browser a fun and pleasurable experience!

It’s always a good time for Pie!

There is major refactoring going on right now. We have been unifying what has been called the “Dashboard” and the “Editor” into one thing. Ben wrote about the Pie Menu that defines this work, but behind the hood there is a lot more. Julian and Danzat have been busy helping Ben crank on a new version of Thunderhead that groks CSS for both layout and style. It is really fun to see them implement CSS3 features and have them work. Check out the border code some time!

The details of the Pie will be changing a lot, but the unification will stay.

The command line is the bottom of the pie, and now gets more room to play with (includes history, and the chance to visually help people with their commands). Joe has a nice post talking some of the command line thinking.

Malte has continued to push on some great architecture work. We made Bespin event driven from the beginning, and he has done great work making the events cross interesting boundaries. He has written up some of this work in:

• Transparent Client-Server PubSub implementation details
• One event loop to rule them all and in the darkness bind them

Being able to have events across Web Workers and get all the way over to a Server Side JavaScript server is fun stuff!

Surfing the Wave

Bespin has social collaboration as a core part of its vision. After seeing the early stage Google Wave and meeting the team, we are thinking about if and how there is a way we can work together. We are at an early point, but hope to give something a nice try!

You can naturally where the Wave concept fits in with our social mock:

There have also been other fun third party news. Thanks for supporting us everyone!

• zembly meets Bespin
• Bespin on Rails is a simple Ruby on Rails plugin that allows you to embed the Mozilla Bespin code editor component in your Rails views using simple helper tags.
• Bespin to Helma talks about a server side JavaScript back end

Labs is working on a new release of Ubiquity, tentatively scheduled for mid-June. It’s a fairly major update with a lot of changes and new features; major enough to deserve to be called Ubiquity 0.5.

The main goals for Ubiquity 0.5 are as follows:

1. Make Ubiquity easier to learn with better organized documentation and help content, and a new interactive tutorial that walks users from zero to basic competence in a few minutes.
2. Internationalize Ubiquity with a new parser that can handle the grammars of many languages. We’re aiming to release Ubiquity 0.5 with at least three usable languages; more are in development. This is thanks to the hard work of our extremely dedicated Ubiquity internationalization community.
3. Implement a more flexible way of handling input that will allow for more consistency, and no more hyphens, in command names. (more about the proposed change here.)
4. Begin doing usability research on Ubiquity as part of the new Test Pilot program.
5. As always, fix bugs and improve built-in commands.

In order to complete all of these goals, we’ll need the help of everyone in the Ubiquity community. And I don’t just mean developers — command authors and regular Ubiquity users are just as important! There is a lot you can do to help make this release a success, even if you are not a programmer and don’t know the first thing about Javascript.

If you’ve been thinking about getting involved in Ubiquity development, either by writing code or in one of the many other ways you can contribute, now would be a great time! Below are some ways that you can get started.

If you write code…

• Learn how to develop for Ubiquity.
• Find an open bug ticket to work on.
• Help us review these patches.

If you don’t write code…

• Help us improve the documentation of the built-in commands. No programming needed — just edit a wiki page!
• Help us improve the contents of the new interactive tutorial. This one is a wiki page too.
• Help us reproduce one of these bugs. All you need is a willingness to try out different versions of Ubiquity or different versions of Firefox and report back on what you find.
• Add your voice to the main Ubiquity discussion group where new features and major changes are proposed and discussed.

— Jono DiCarlo, on behalf of the Ubiquity development team

This week Labs launched Jetpack, a newly formed experiment in using open Web technologies to enhance the browser, with the goal of allowing anyone who can build a Web site to participate in making the Web a better place to work, communicate and play. In short, Jetpack is an API for allowing you to write Firefox add-ons using the web technologies you already know.

Join us at Labs Night to help hash out a potential future of Firefox add-ons!

In addition to our Jetpack hack session we will hear progress updates on other active Labs projects and would love to hear from you! Get involved with a Labs project. Get feedback on your own projects. There will be plenty of opportunity for discussion and hacking. And of course, pizza :). The space has a limit of 35 people, so if you can join us please RSVP by commenting on this blog. Thanks, hope to see you there!

Mozilla Labs just released JetPack, a new experimental project intended to make adding functionality to the browser as easy as writing a web page.  We’re looking for ways that the API can make life even easier for developers.  At tomorrow’s lunch, Aza Raskin will present JetPack in action and solicit design feedback on the API.

Anyone dealing with design challenges who is looking for help resolving them is welcome to join us! You provide the problems, and we’ll provide the food and feedback. (You’re also welcome if you just want to provide feedback on other people’s design issues!)

To join us, come to 1981 Landings Drive, Building K, Mountain View, CA 94043 at noon tomorrow, Thursday, May 21. Let us know if you’re coming (and how many of you there are) by commenting on this blog post so we get a sense for how much food to order.

See you soon!

– Rhian Gracey, on behalf of the Mozilla Labs team

The add-ons community for Firefox is arguably one of the largest, most vibrant sources for innovation on the Web today. If you want to affect people, to reach them and make a difference in their daily lives, the Firefox add-ons platform is hard to beat, with over one billion installs of Firefox add-ons to date.

However, we’ve only scratched the surface of its potential.

Today we’re announcing the launch of Jetpack, a Mozilla Labs project to explore new ways to extend & personalize the Web.

In short, Jetpack is an API for allowing you to write Firefox add-ons using the web technologies you already know.

With Jetpack, we’re building upon our experience over the last four years empowering a community of more than 8,000 developers to produce more than 12,000 add-ons to imagine and build the next generation of the add-ons platform. We want to grow our community of developers by orders of magnitude through making add-on creation much more accessible, and yet more powerful by developing it as an extensible platform for innovation itself. Many useful Jetpack Feature’s can be written in under a dozen lines of code.

Specifically, Jetpack will be an exploration in using Web technologies to enhance the browser (e.g. HTML, CSS and Javascript), with the goal of allowing anyone who can build a Web site to participate in making the Web a better place to work, communicate and play.

Most importantly, from a user perspective, Jetpack will allow new features to be added to the browser without a restart or compatibility issues, resulting in little to no disruption to the online experience.

As with all Mozilla Labs initiatives, Jetpack is an open source project and everyone is welcome to participate in its design, development & experimentation.

Initial Release

This is a 0.1 release, so it unpolished, unfinished, and still highly prototyped. We are planning on entirely revamping things for the next iterations within the coming days and weeks. We need your feedback, both on the particulars as well as the direction. In particular, we are actively seeking feedback on the API design.

• v0.1 – May 2009
  • Initial Jetpack APIs with support for statusbars, tabs, content-scripts, animations, and more.
  • Support for external API libraries (e.g. Twitter)
  • jQuery support
  • Integrated development environment with Bespin, with immediate installs and a fast development cycle
  • Inline debugging with Firebug
  • This initial release of the Jetpack API does not include a fully formed security model. It is being released for testing, development, and feedback.

Getting Started with Jetpack

• Install and play around with the initial Jetpack API and demos
• Take the Jetpack Tutorial (although it is better to follow it inside of Jetpack, where you can edit and run the examples live)
• Jetpack Demos, and more demos.

Developing Jetpack Features with Bespin

Other Resources

• AMO’s Welcoming Jetpack
• Justin Scott’s Feature presentation
• Jetpacks in the Wild

Get Involved

Mozilla Labs is a virtual lab where people come together online to create, experiment and play with Web innovations for the public benefit. The Jetpack experiment is still in its infancy and just getting started. There are many ways to join the team and get involved:

• Install and play around with the initial Jetpack API and demos
• Report a bug
• Grab the source code and fix a bug or add a feature
• Discuss, debate and add to the design in the Jetpack discussion group
• Join us in #jetpack on irc.mozilla.org

– Aza Raskin, Atul Varma, and Nick Nguyen on behalf of the Jetpack development team.

The Personas project launched six weeks ago with a friendlier look and feel, improved functionality, and an expanded set of categories. Since that time, we have been working with the community to make the Personas user experience better and have done so through a series of three quick website releases, and one extension release. Here are a few of the key modifications that were made since Personas 1.0:

• Added Designer Detail Pages: the Personas community now has over 7K designers that have submitted over 10,000 designs. As the gallery expands, it becomes increasingly important for each designer to have their own personal space within the site to display their creations. We solved this problem by creating designer detail pages for each artist (see graphic below).
• Localized in Additional Languages : the Personas extension is now localized in Polish, Serbian, Turkish, and Chinese. This is in addition to the other 12 languages that were supported during the last launch, including Spanish, German, Bulgarian, Danish, French, Italian, Japanese, and Portuguese. In the future, we plan to localize the website with these languages.
• Ported to Thunderbird: thanks largely to the contributions of Huang Yaoquan, Personas can now be installed on Thunderbird. Integrating the extension into Thunderbird is a work in progress (see buglist), and Huang and others are continuing to make progress.
• Enabled Sharing: it is now easy for you to share Personas art work you admire with your friends. Each design’s detail page now has a ShareThis link.
• Pagination: as the Pesonas gallery continues to expand, it became increasingly important to organize the art in a way that enables you to browse all designs without performance issues. We included pagination in the All/All section of the gallery so that your browser loads the full gallery in sections, rather than 10,000+ designs at one time.

What’s Next?

The Personas project will continue to evolve quickly with your ideas and feedback. If you have thoughts on how to make Personas better, please discuss and debate them with the community in our discussion group or add a solution to our newly created support wiki. We will continue to update you with the progress of the project.

– Suneel Gupta and Toby Elliott, on behalf of the Personas development team

Personas enables artists to treat the browser as their canvas. An important goal is to continue to provide artists with the tools they need to create original art, and share their work with a global audience. As part of this effort, we recently added “designer pages”, which gives each Personas artist an easily shareable page that showcases their creations.

The results have been inspiring. Many artists in the Personas community have been able to attract tens of thousands of active, engaged users of their art. Here are just some examples:

What’s Next?

Between now and the 20,000th design, we’ll be actively looking for additional ways to give Personas artists a strong, easy-to-use platform for their work. If you have ideas, please discuss and debate them with the community in our discussion group. Finally, if you have an inner-artist, join thousands of others in the Personas community by creating your own Persona art work and sharing it our gallery for millions of people around the globe to enjoy.

– Suneel Gupta and Toby Elliott, on behalf of the Personas development team

Design Challenge: Summer 09 – together with IxDA and Johnny Holland

After our successful inaugural Design Challenge in Spring ‘09 – more than 50 students from all around the world participated and submitted nearly 20 prototypes – we are happy to announce the next Design Challenge today.

In collaboration with IxDA, a network dedicated to the professional practice of Interaction Design and Johnny Holland, an open collective talking, sharing and finding answers about all aspects of interaction design, we once again invite designers, students and design-focused people from all around the world to develop new ideas & mockups for the future of the Web.

About the Design Challenge

The Design Challenge is a series of events to encourage innovation, and experimentation in user interface design for the Web. Our aim is to provoke thought, facilitate discussion, and inspire future design directions for Firefox, the Mozilla project, and the Open Web as a whole.

For this Design Challenge we are focusing on finding creative solutions to the question: “Reinventing Tabs in the Browser – How can we create, navigate and manage multiple web sites within the same browser instance?”

Tabs worked well on slow machines on a thin Internet, where ten browser sessions were “many browser sessions”. Today, 20+ parallel sessions are quite common; the browser is more of an operating system than a data display application; we use it to manage the web as a shared hard drive.

However, if you have more than seven or eight tabs open they become pretty much useless. And tabs don’t work well if you use them with heterogeneous information. They’re a good solution to keep the screen tidy for the moment. And that’s just what they should continue doing.

How it works

To participate in the Design Challenge you need to create a mockup of your proposed solution. A mockup can be anything from a napkin drawing, to a wireframe, to a polished graphic.

You also need to create a video explaining your idea(s), presenting the mockup and showing how your idea works.

To register your entry: Upload your mockup and your video to a website such as Flickr, Vimeo or YouTube and tag it with “mozconcept”. Send us an email to conceptseries@mozilla.com with links to both your mockup and your video. (To facilitate the free exchange of ideas, all content and contributions will be licensed under appropriate open source licenses.)

During the Design Challenge you can discuss your ideas with fellow designers on the Mozilla Concept Series forum. To inspire and help you during the challenge, Johnny Holland will post articles with background information on their website throughout the challenge.

All submissions will be presented on the Design Challenge website and honors for “Best in Class” in the categories Innovation, Execution, Interaction, Producible plus a People’s Choice Award will be bestowed.

You find all the details on the Design Challenge website.

Important Dates

• May 14th, 2009 – Launch of Design Challenge: Summer 09
• June 21st, 2009 – Submission deadline for mockups & videos
• July 8th, 2009 – Announcement of “Best in Class” and “People’s Choice” selection

Getting Involved

If you’re interested in participating, please do join us in the Concept Series discussion forums. Also follow us on Twitter: @mozconcept, @ixda and @johnnyholland.

You’ll find more information on how to participate on our Design Challenge website.

If your school/university is interested in participating, please contact us directly at conceptseries@mozilla.com.

– Pascal Finette, on behalf of the Mozilla Labs team

We’ll solicit topics from attendees at the beginning of the lunch, divvy up the available time between them, learn about each problem in turn, and brainstorm solutions.

Anyone dealing with design challenges who is looking for help resolving them is welcome to join us! You provide the problems, and we’ll provide the food and feedback. (You’re also welcome if you just want to provide feedback on other people’s design issues!)

To join us, come to 1981 Landings Drive, Building K, Mountain View, CA 94043 at noon tomorrow, Thursday, May 13. Let us know if you’re coming (and how many of you there are) by commenting on this blog post so we get a sense for how much food to order.

See you soon!

– Myk Melez, on behalf of the Mozilla Labs team

New Mozilla Labs discussion groups:

• Mozilla Labs – If there’s a Labs project, idea, or topic you would like to talk about and there doesn’t seem to be another place for it, post it here!
• Bespin – The Bespin project is developing an open, extensible web-based framework for code editing. (project site)
• Concept Series – Concept Series and Design Challenges. (project site)
• Personas – A new add-on that gives Firefox a dynamic, lightweight theme system. (project site)
• Prism – Prism is an application that lets users split web applications out of their browser and run them directly on their desktop. (project site)
• Snowl – Snowl is a prototype extension that integrates messaging into the browser. (project site)
• Test Pilot – Test Pilot is an idea for a new user testing program for Mozilla Labs that aims to build a 1% representative sample of the Firefox user base for soliciting wide participation and structured feedback for Labs experiments. (project site)
• Ubiquity – An experiment into connecting the Web with language in an attempt to find new user interfaces that could make it possible for everyone to do common Web tasks more quickly and easily. (project site)
• Weave – Weave is a Mozilla Labs project to explore ways in which the browser can broker richer experiences on the Web, by integrating more closely with online services. (project site)

Another project we’re currently working on (along with the WebDev and QA teams) is a revamp of the existing Labs website, with a whole new look and feel and a more flexible backend infrastructure. We’re tracking progress and keeping docs and whatnot on the Mozilla Wiki here: Mozilla Labs Site 2.0. This is a multi-stage project, and we’ve just started the development phase of stage one.

If you have any questions or comments about the new discussion forums or the Mozilla Labs site project, please leave a comment here, email me at deb-at-mozilla-dot-com, or post a note in the Mozilla Labs discussion group.

– Deb Richardson, on behalf of the Mozilla Labs team

Just over three months ago we launched our first Mozilla Labs Design Challenge. We invited design-focused students from around the world to participate and develop solutions to the question “What would a browser look like if the Web was all there was? No windows, no unnecessary trappings. Just the Web.”

After the first round, where students submitted mockups of their proposed solutions, more than 40 students actively participated in a three-week long tutoring and mentoring phase (the tutoring sessions are available on video). At the end of this tutoring phase the students refined their ideas and submitted 18 prototypes.

Out of those 18 prototypes a panel of design experts selected the following four “Best in Class” entries:

Best in Class: Innovation

For the solution that has the newest / most original interaction models.

• Collaborative Research on a Virtual Desk by Ecaterina Valica

Best in Class: Execution

For the solution that has the most expressive prototype, a combination of polish as well as functional availability.

• The Media Center-Like Browser by Amine Zafri

Best in Class: Interaction

For the solution that feels provides the best human-computer interaction model.

• Scrolling 2.0 by Valentin Laube

Best in Class: Producible

For the solution that would be the easiest to ship to users immediately.

• An Information-Centric Web Browser by Choawen Tan

Congratulations!

Head over to our Design Challenge landing page for more information on the selected prototypes, a complete list of all submitted prototypes, information on the panel and videos from the tutoring sessions.

Today we are pleased to announce the release of the beta version of Prism 1.0. It’s the culmination of more than a year of real-world use by companies like Yahoo! Zimbra, DesignLinks International and many others.

Tens of thousands of end users have installed Prism-enabled sites. Based on their feedback, as well as the experience of website creators, we’ve added new features to bring the user experience of web apps even closer to that of their desktop counterparts. We are particularly excited by these features because they’ve been informed by the many real-world applications currently using Prism:

• New API functionality for allowing Prism-enabled web sites more desktop like power.
• Ability to set fonts, proxy settings and other application-specific settings.
• The ability to clear private data on demand.
• Applications are automatically updated when new Prism versions are available.
• Tray icon support, as well as submenus for dock and system tray menus.
• Full OS X 10.4 support, and further OS X specific enhancement.
• Support for SSL exceptions.

You can find out more about Prism 1.0 beta and download the standalone version and Firefox extension from our new Prism website at prism.mozilla.com.

The ability to run stand-alone web apps and access them like normal desktop apps provides instant benefits to end users. However, a number of the advantages are only available when software developers take advantage of Prism-specific features. With the release of Prism 1.0 beta we are ready to start fostering an ecosystem that makes it easier for developers to create and distribute compelling web app bundles.

Prism Retrospective

The initial version of Prism was more of a prototype, a foundation on which to build out additional features to improve web app usability.

In March 2008, we released Prism 0.9 with numerous improvements:

• Each application runs with its own profile, making it possible to run multiple apps simultaneously.
• The web app favicon is used to provide an application icon if no alternative is provided by the user.
• The first desktop integration features made an appearance. These included popup notifications and dock badging. A special JavaScript file called webapp.js contains Prism-specific code for customizing a web app.
• A Firefox extension made it possible to create new Prism apps directly from the browser. This is a very convenient and natural way to use Prism.
• Under the hood, we moved to the same build system used by Firefox and other Mozilla products. This makes hacking Prism much easier for developers familiar with the Mozilla environment.

Desktop integration features are key to achieving the Prism vision. With the
experimental Prism 0.9.1 version, released last October, these features were significantly expanded:

• System tray icon support on Windows.
• Minimize and close applications to the system tray.
• Dock and tray icon menus on OS X and Windows.
• Protocol handlers for associating Prism apps with specific URL schemes like mailto:

Prism 0.9.1 also represented a major step forward in Mozilla’s commitment to supporting all major platforms. OS X support, which was problematic in previous releases, was completely revamped to ensure that Prism apps running on OS X behave like other native applications.

Get Involved

Mozilla Labs is a virtual lab where people come together online to create, experiment and play with Web innovations for the public benefit. The Prism experiment is in production use today by thousands of people around the world, however, there is still much to explore. There are many ways to join the team and get involved:

• Play around with the current prototype and let us know what you think
• Report a bug
• Grab the source code and fix a bug or add a feature
• Discuss, debate and add to the design in the Prism discussion group
• Join us in #labs on irc.mozilla.org

– Matthew Gertner on behalf of the Prism development team.

The current state of identity on the Web is not so great.

Much of the ongoing discussion and efforts around user identity on the Web focuses on tying identities to new or existing networks and using various protocols for federating it. User experience in general suffers as protocols for federation (e.g. OpenID) involve complex redirects which jump the user from page to page and leave them open to phishing attacks–not to mention other “ajax” methods which are even worse from a security standpoint.

So last week the Weave team took advantage of the Mozilla all-hands, and decided to sprint on the Weave Identity component to open it up to the Web. After only a few days of hacking we came up with some very exciting stuff to share!

Our sprint changes the browser to provide single-click login to sites with saved passwords as well as sites that support a federated identity (OpenID in this case). It also provides the option to automatically sign in when the page is loaded, essentially providing a single-sign-on-like experience regardless of the login method being used. In the case of OpenID, we intercept the login procedure and, taking advantage of the fact that you’re already logged into your browser, and then use Weave identity to let you into the site.

Why?

Something that often goes unsaid in the discussion about online identity is that while most websites right now require usernames and passwords, many people actually use the password manager feature in the browser–effectively turning their browser into a limited identity manager. So one of the things we can and should be looking at is how to improve the existing identity manager to better serve our users’ needs.

In this context, Weave Sync already improves it by synchronizing your login information across devices–so when I use Fennec I don’t need to type in my login information, because they get pulled down from the cloud. But we can go further, in two ways:

First, the Weave framework includes an identity component which is currently used exclusively for Weave Sync. What happens when we integrate it with the browser and open it up to content?

Second, part of the appeal of federated identity management is about single sign-on and automated provisioning. Can we improve the user experience of the current system to provide some of those features?

Part of the guiding force here is that we think that regardless of the inner mechanism (a federated identity, a simple username and password, or something else), in the end the action of logging in is essentially the same. Therefore, as the browser we should try to provide a similar experience, regardless of the method being used. As the user’s agent we should also strive to act on the user’s behalf when possible, and we believe this is one of those cases.

Keep in mind that this is just a prototype that we hacked together in a few of days, so there are some very rough edges. But we’re super excited about the possibilities already. When demoing it to people, they said things like “whoa! how did you do that?” and “I want this! How do I get it?”

The answer is, “soon”, or if you’re brave/impatient enough you can try it out right now by installing the latest Weave development snapshot. Please let us know what you think by posting on the Weave forum!

– Dan Mills, on behalf of the Weave development team

opportunities to collaborate with the Personas team

Members of the Personas community are now submitting designs faster than the Personas team can approve them, which has led to a large queue of designs waiting for approval. This is a nice challenge to have, and we are working diligently to evaluate and approve designs that meet the program’s terms of service. The immediate goal is to reduce the size of the approval queue. The near-term goal is to reduce the amount of time a community member needs to wait between submitting a design and being able to view that design in the gallery and share it with friends. If you are interested in collaborating with the Personas team on these goals, please send an email to personas@mozilla.com.

Other ways to help:

– suneel gupta, on behalf of the Personas Development team

At the moment, the specification aims to expose a particular implementation of SQL to web pages. Vladimir Vukićević has written about flaws in this approach. Among them are:

• While a lot of server-side developers already know SQL, it’s actually quite low-level and not very easy to use. This goes against the grain of the Web as a platform, which is something that should be as easy to develop for as possible.
• There’s no useful core SQL standard, and as a result the specification effectively says “do what SQLite does”. Because “what SQLite does” isn’t well-defined and can change in future versions of SQLite, it effectively means tying all browsers to a particular implementation, and any security vulnerabilities that the implementation may have.

It seems that a different approach is required and we’re highly interested in exploring alternative proposals to SQLite for Web Storage.

I’ve recently undertaken an experimental re-implementation of CouchDB in the browser to explore the possibilities of using a simpler standard that delegates many of its semantics to the JavaScript language and is also easily parallelizable to take advantage of multiple processor cores. For instance, putting posts into a blog database might look something like this:

blogDb.put(
  [{author: 'Myk', title: 'Burritos',
    content: 'Burritos are yum.'},
   {author: 'Thunder', title: 'Bacon',
    content: 'I like bacon.'},
   {author: 'Thunder', title: 'Beer',
    content: 'Beer is good too.'}],
  function onDone() { /* Do stuff... */ }
);

Take a look at the BrowserCouch Tutorial for more information on how this kind of Web Storage API would look and work—it also lets you play around with the MapReduce algorithm interactively, so you can really get a feel for it.

Please do let us know what you think, or if you have other ideas on how best to approach Web Storage.

– Atul Varma, on behalf of the Mozilla Labs team

Above you will see Kevin Dangoor showing of the fruits of his labor on VCS integration with Bespin. His screencast shows how you can fire up Bespin, tie into your VCS, and start coding. This is an exciting step for us.

You will notice that at one point Kevin doesn’t notice that he hasn’t saved his file before he tries to talk to the VCS. Since the video we have added an indicator that shows you if the file that you are editing hasn’t been saved yet. Long term, we are keen to have the collaboration feature where the files are constantly being saved back to the cloud, and the flow changes where “commit” is the new “save”. We will see.

Julian has added support for searching within a file and has partially implemented the search design:

Ben has also added hooks to the gutter which means that you will see that it is now dynamic. You can set a debugmode and add breakpoints, but we don’t have a backend for the debugger quite yet. Chris Jay has been playing with the gutter to show syntax errors over there and there is work on jslint output too.

The settings implementation has been changed too. We are finding that the user specific BespinSettings project is a great place to store all of your user specific data. We recently added your command history so that it is saved up there on command.history.txt. Easy to edit and tweak, and it goes with you wherever your editing goes! Anyway, the editor settings will now be found at settings.txt. One side benefit with this approach beyond those mentioned, is that we can delete the settings API from the Bespin server making it even easy to implement.

Finally, we have themes. There are some core themes that you get out of the box. Most people like the default one, but there are simple white, black, and a recent “Pastels”. You can recreate your own themes by placing a copy in BespinSettings/themes/themename.js allowing you to set theme themename away. We will be moving this format to simple CSS soon, so I wouldn’t spend too much time there. If you feel like getting creative in that way though, go ahead and create a Persona :)

As always, thanks for listening and please follow us on Twitter, chat with us on #bespin in irc, and join our group.

– Dion Almaer, on behalf of the Bespin development team

Inspired by the horizontal styling of the thumbnails in Chris Stone’s answer to the call for participation, we’ve got some new designs that incorporate the learnings from the last 36 revisions while finally making it feel much more Firefox-y. Unfortunately, we haven’t implemented the new style yet so for the time being, it’s see only.

By using a horizontal thumbnail clipped from the top of a page, we are capturing the site’s logo and masthead — the most visually distinctive aspect of a web page. By default only the top two visited sites get a visual treatment (to remove visual clutter), but more can be turned on by clicking the little edit icon. We’ve gone to a two-column format to better use the available space. If you have an extra wide monitor, you may get more columns.

All of the features from before are there, like in-line search and automatic RSS. It’s just all cleaned up.

– Edi Lee, Sean Martell, and Aza Raskin from the New Tabs Team.

We are currently working on bringing some of that power to Firefox. See the link for the goals and non-goals for Taskfox, which is what we call the Firefox feature inspired by Ubiquity. You can see some static mockups on the mockups page of the project wiki. Static mockups only get you so far, however. To really get a sense of how something feels, you need to touch it and see it in motion.

Prototype

Some thoughts:

* The main thing we haven’t prototyped is the interaction of the awesome bar results and the Taskfox commands. We know that this is a major remaining question so we’ll be prototyping that soon. We’ve more or less ignored that interaction for this prototype.

* We’ve moved all modifiers into the suggestions area. That is, you can’t type “translate Hello, World into Japanese”. Instead, you type “translate Hello, World” and select Japanese inside the preview. This simplifies the interaction in the Awesome Bar, and makes the interface a bit more discoverable and localizable, at the cost of effortlessly typing what you want to do. Fortunately, everything in the preview will be keyboard navigatable so you’ll still be able to tab-and-type without using the mouse.

* Being able to navigate results with the keyboard is lacking in Ubiquity proper. We’ve tried to solve that in TaskFox.

* We’ve made “diving into results” a fundamental part of TaskFox. Clicking the more arrow (or using the right arrow keys) slides everything over for an ultra-fast way to checkout a more detailed view of information. See the video for more detail.

* We haven’t concentrated on visual style, so forgive it.

* You can drag results and they’ll “tear off” to form their own window. In this way, any result/detailed view can become more permanent. E.g., if you want to start a youtube video playing you can pull it off and place it in a corner of your screen while you continue browsing. The torn-off window can be re-docked into your tabs.

Try it out yourself

The demo is written entirely in HTML and Javascript (with some help from jQuery). It has only been tested in Firefox. It’s a prototype so type slowly, or it won’t work.

Go to the demo!

Get Involved

We have a weekly public meeting every Thursday at 3:00pm PDT (10:00pm UTC). These are open to everyone, no RSVP needed. To join in, dial in to one of the following numbers:

* +1 650 903 0800 x92 Conf# 8604 (US/International)
* +1 416 848 3114 x92 Conf# 8604 (Canada)
* +1 800 707 2533 (pin 369) Conf# 8604 (US Toll Free & Skype)

You can also join #fx-team to chat about Taskfox on IRC, or discuss it on the mozilla.dev.apps.firefox newsgroup. Anyone can help out by creating your own mockups or prototypes, filing bugs, write patches, and generally giving input.

– Aza Raskin, Blair McBride, and Alex Faaborg from the TaskFox team.

Structured Outline View

Malte has built on his work involving rich parsers using Web Workers and taken it from the interesting function viewer to a full structured outline view that shows you your classes, methods, and subscribers.

What is particularly exciting about this is that Malte has written the functionality in a way that can be extended for the library of your choice, or the way that you write code. For example, he has code to understand how Dojo does classes (dojo.declare) and also code like the following to understand how we use pub/sub:

bespinEventPublish: {
    declaration: "bespin.publish",
    description: "Publish"
},

bespinEventSubscription: {
    declaration: "bespin.subscribe",
    description: "Subscribe to"
}

How does it work? Malte tells us:

At the heart of the outline generator is a visitor function that gets invoked for every node. It receives a stack of nodes that are lexically before and above it. It also receives a stack of indexes that tell us where a node lies within the child nodes of its parents. This allows finding predecessors and successors of nodes above us. Long story short: Once we find a string like “subscribe”, we can check our lexical predecessors for “bespin” and assume the next string node is the name of the event. Voila.

Python Syntax Highlighting

Roberto has committed python syntax highlighting support via the set syntaxengine codemirror engine:

It has some pretty fun features such as:

• Token-based syntax highlighting – currently very little lexical analysis happens. Few lexical errors will be detected.
• Use the normal indentation mode to enforce regular indentation, otherwise the “shift” indentation mode will give you more flexibility (not used yet in bespin).
• Parser Options: Python version, error display

iPhone and Bespin

Roberto didn’t stop there though, and created some simple iPhone support for Web applications:

His new inline preview setting lets you see your current page in iPhone mode. Before running the new enhanced preview command, set your preference:

• set preview window – default, an external window, as we have now.
• set preview inline – instead of editor canvas we have an iframe containing the preview
• set preview iphone – a non-modal popup containing an iframe with dimensions of the iPhone screen. Of course you should use Safari for this.

Defrag Command

I should have written up the defrag command for April Fools, but instead this post talks about a Bespin concept around visualising code in a way that shows you who is editing what. At this point we are very much in experimental mode and I am looking for feedback on the ideas in the article.

There have also been some great contributions from the entire team. Some subtle features such as set highlightline on (highlight the line that your cursor is on), set trimonsave on (auto trim trailing spaces before saving a file), and a great addition by Julian that has you able to use the keyboard to get around the file browser. We also have to give a big shout-out to Gordon who is doing a phenomenal job shepherding Bugzilla recently (along with fixing bugs and making tabs work well!)

We still have much to do, so if you have enough free cycles to dive in and help make Bespin a fun and productive tool for the Open Web, please join us! We are going to start to have weekly status calls on Tuesdays at 9am PT. Join us on #bespin to chat more!

– Dion Almaer, on behalf of the Bespin development team

March 2009

Concept Series

We are currently collecting feedback on a proposed web-based collaboration tool/space for the Concept Series. Learn more and join the discussion over on the discussion forum.

Design Challenge – Spring 09

More than 40 ideas from around the world were submitted to our inaugural Design Challenge. Thirty participants were selected to join the tutoring & mentoring phase. Check out our awesome tutorials, recorded and available here.

Experiments

Personas

Labs is expanding its experiment in personalization by launching the newest version of Personas with a cleaner, friendlier look, and hundreds of new designs. With the support and imagination of the Labs community, Personas has evolved through a set of iterations but remained focused on three key concepts:

1.    It shouldn’t be hard to make your browser a little more fun and personal.
2.    You should be able to personalize your entire online experience with lots of great designs.
3.    The artist in you should be able to treat the browser as your canvas.

You can download the latest extension on AMO or on getpersonas.com. As always, we’ll be listening to your feedback to continue making the online experience more fun and personal.

Weave

Weave 0.3 was released, and includes a major rewrite of many of Weave’s key components since the last major release in June.  If you have not looked at Weave recently, now is a great time to jump in and try it out! More info here.

Bespin

The Bespin project is going strong, check out the latest news here. Also from the Developer Tools team, an new memory tool.

Labs Nights

If you’re hosting a Labs Night in your area, please let us know and we’ll add it to the event calendar and post it on this site.

London – Bespin Event

Ben, Dion and Joe from the Bespin team presented the latest version of Bespin to an enthusiastic crowd of more than 40 people at London’s The Hub. There was a lively discussion about a broad range of topics, ranging from the Open Web in general, JavaScript and Accessibility to ideas for future use cases for the Bespin technology. Stay tuned for the next Mozilla Labs Meetup in London in April.

Mountain View

This month’s Labs Night Mountain View was great. Three of our Design Challenge participants presented their mockups in progress for feedback. Their work so far is super impressive and we are looking forward to sharing it. Stay tuned for the next Labs meetup in April! ]]> https://labs.mozilla.com/2009/04/labs-update-march-2009/feed/ 1 https://labs.mozilla.com/2009/03/developer-tools-presentation-and-open-session/ https://labs.mozilla.com/2009/03/developer-tools-presentation-and-open-session/#comments Tue, 31 Mar 2009 16:00:06 +0000 Ben Galbraith http://labs.mozilla.com/?p=1528

Tomorrow, Dion and I are giving a talk at O’Reilly’s Web 2.0 Expo conference in San Francisco at the Moscone Center: “Web Developer Tools: How to Be Productive Building for the Web” (Wed. Apr 1, 10:50 am). While normally Web 2.0 Expo costs money to attend, our session is free; all you need do is register for the free web2Open program. As part of our session we’ll be releasing something small; we’d love to see you there and get your feedback.

Following the presentation, we’ll be hosting a web2Open session at 12:40 pm–also in Moscone–to host a discussion about the state of Developer Tools for the Open Web and explore their future. If you’ve an interest in the subject and find yourself in town, won’t you drop in?

NOTE: I cross-posted this to my blog; please use the comment thread over there.

Today, we are launching a major expansion of the Personas experiment, which includes more dependable functionality, a cleaner look, an expanded gallery of artistic designs, and a much easier way to contribute.

Here’s a video that was put together by Rainer Cvillink that shows off some of the new designs with folks around Mozilla talking about what they like about Personas:

Getting Started with Personas from Mozilla Labs on Vimeo.

Progress

Since we began work on the Personas experiment, the project has evolved with the support and creativity of the Mozilla community. We have been able to accomplish the following key milestones:

1. smoother integration into the chrome, including styling for the Find toolbar;

2. an expanded gallery of over 500 persona designs, including art from independent and established artists;

3. ability to create a “custom” persona locally either to keep private, or to test before submitting to the gallery;

4. an easy-to-use interface for contributing designs, with more control over text and accent colors for your art;

5. localization for the extension, which now supports Bulgarian (bg-BG), Czech (cs-CZ), Danish (da-DK), German (de-DE), English (en-US), Spanish (es-CL), French (fr-FR), Hebrew (he-IL), Italian (it-IT), Japanese (ja-JP), Korean (ko-KR), and Portugese (pt-BR).

Background

The Personas project began in late 2007 as an experiment within Mozilla Labs to explore new ways to quickly and easily personalize the online experience. With the support and creativity of the Mozilla community, the project continues to evolve and is focused on three key concepts:

1. It Shouldn’t be Hard to Make Your Browser a Little More Fun and Personal

You can download the Personas add-on in under a minute with just a few clicks of your mouse. Select a design from the online gallery that reflects your mood or interests, and when you are ready for a change, rotate it out for another style. Your choice will appear instantly with no disruption to your web browsing.

2. You Should be able to Personalize Your Entire Web Experience with Lots of Great Designs

You can personalize your homepage, blog or instant messenger, but you leave your design behind when you visit another webpage or minimize your chat. The only way to personalize your entire online experience is through your browser. With Personas, your design stays with you at each and every point of your time online. And to give you lots of great content to choose from, we have opened the Personas gallery to independent designers from around the world, and also teamed up with popular brands, including Greenpeace, Cynthia Rowley, All American Rejects, and LIVESTRONG. Here are just some of the designs for you to choose from:

MUSIC

All American Rejects

No Doubt

Lady Gaga

CAUSES

Common Ground Foundation

3. The Artist in You Should Be Able to Treat the Browser as Your Canvas

The Personas project aims to support and promote artists and their work. We do this by making it easy for you to style the browser with your own designs and share your work with millions of people around the world. Until now, designers had to write code to customize a browser. With Personas, you can use a simple interface to upload formatted images. If you don’t have experience with formatting images, we make it easy for you to learn how (and, we’re working on tools to make it even easier!) Once you’re done creating your design, you can upload it to the design gallery for people to discover and enjoy during their next online stroll through the gallery.

While we suggest that everyone license their designs under a Creative Commons license, we’re also now exploring a model where designers can keep their designs proprietary.  The idea is that we’ll freely host content that’s contributed as open source while providing an option for paid hosting of other content.  We’re still working on the details and expect to have a more formal plan and framework for this soon.

What’s Next?

Mozilla is dedicated to promoting choice and innovation on the Internet. Personas extends on that mission by giving Firefox fans, both new and established, the ability to make the browser reflect their personality, interests and passions. This is the first of many steps to expand the catalog of available designs by reaching out to both established designers and the imagination of our community. After you give Personas a shot, let us know what you think. As always, we’ll be listening carefully to your feedback on how to make your browser more personal.

Get Started

Install the Personas add-on for Firefox, watch a demo, or find out more by visiting getpersonas.com. Even if you’re not a current Firefox user, you can download Personas in less than a minute and begin asking yourself: “What will my browser wear today?”

– Suneel Gupta, on behalf of the Personas development team

Major Features

What is Weave Sync all about? In short, Weave Sync lets you securely take your Firefox experience with you to all your Firefox browsers — including our mobile browser, codenamed Fennec. It currently supports continuous synchronization of your bookmarks, browsing history, saved passwords and tabs. For example:

• Get the same results on the Smart Location Bar on each of your Firefox browsers, so you can get to your favorite sites with just a few keystrokes
• Continue what you were doing: have the ability to open any tab you have open on any of your Firefox browsers
• Keep the same list of bookmarks on all of your Firefox browsers
• Easily sign in to all your favorite sites using your saved passwords (this is especially handy on mobile phones, where it’s hard to type in complex passwords)
• Do it all securely: Weave Sync encrypts user data before uploading it to Mozilla’s servers, so that only you can access your data

What’s new in 0.3?

If you have not looked at Weave recently, now is a great time to jump in and try it out! This release includes a major rewrite of many of Weave’s key components since the last major release in June. A few of the major changes are:

• Increased reliability and performance
• Support for mobile browsers via Fennec
• Support for the new 0.3 server architecture

Getting Involved with Testing and Development

• Install Weave 0.3 (requires Firefox 3.1 beta 3)
• Learn more about Weave
• Discuss, debate, and add to the design in the Weave forum
• Join us in #labs on irc.mozilla.org

– Dan Mills, on behalf of the Weave development team

In this latest iteration, we’ve continued to refine the concept taking into account all of the feedback we’ve received in comments, blogs, IRC conversations, and hallway talks.

The Latest Edition

The main feature we’re exploring in this iteration is in-line search for the sites you search often.

If one of your main uses of a site is to perform a search (e.g., Technorati, Wikipedia, or Twitter) then the new tab page should help you perform that search more quickly and efficiently. Instead of first navigating to the site and then performing the search, you can search instantly without the need to install a search provider (or even for a site to provide one).

We’ve implemented this feature using Places, the feature introduced in Firefox 3.0 that enables the Awesome Bar. Our heuristics are still a little rough — and they won’t find every site search — so we are looking for feedback. What sites that you search often and appear on your new tab page don’t have in-line search?

We’ve also continued to explore ways of keeping the new tab polite. In an attempt to not break your train of thought, the cognitive shield hid the frequently accessed sites until you moved the mouse. Although the implementation got in the way of the idea (the shield looked clickable, and people got frustrated as it vanished as they tried to use it), the feedback indicating that hiding the ambient information of the new tab page was a major detractor: We had underestimated the power of gaining information at a glance.

We’ve taken another tack this time at not breaking your train of thought by using default fonts and a Firefox-gray background. Instead of taking the over-the-top cognitive shield approach, we are trying to make the page “fit-in” to ameliorate a visually jarring experience. After a couple days of testing and feedback, it seems to work. What do you think?

We’re now working with the Firefox product team to explore potential inclusion of a feature like this in an upcoming Firefox release, and what that might look like.

Prototype

Step 1. Download and install the latest development build of Firefox 3.1.
Step 2. Download and install the latest version of the New Tab prototype.
Step 3. Let us know what you think, including what works, what doesn’t and how we can improve the design.

– Aza Raskin and Ed Lee on behalf of the “New Tab” team

They say Marc Andreessen, co-founder of Netscape and co-author of the Mosaic browser, once said:

[An operating system] is just a bag of drivers.

People have been fantasizing about the web as application platform for as long as we’ve had it. Nearly a decade later, we’re really just getting started at realizing this vision–of truly reproducing the power of traditional operating system APIs inside of the browsers.

While some have had this vision of browser-as-application-runtime since the beginning, most of us have traditionally viewed the browser as a web page renderer. It’s only been in the past few years that some have begun to push hard on changing this status quo. Google stands out in this group both with the creation of boundary-pushing “desktop-quality” applications like Gmail and in describing Google Chrome as an application run-time, not a page viewer. [1]

Here in the Mozilla Developer Tools Lab, we’ve been pondering the various gaps in the tool-chain when you treat the browser as a serious, OS-grade application run-time. We’ll talk more about the landscape of tools and what’s available in a different post. In this one, we’d like to talk about one of the gaps we’ve found: memory tools.

The Memory Problem

It’s a rare application developer indeed who doesn’t wish their GUI to be “snappy”. In technical terms, Jakob Nielsen defines snappy as responding to user input within a tenth of a second. To put that in perspective, that’s shorter than it takes the average person to blink their eye.

If an application’s appetite for memory crosses over into gluttony, it can put a developer’s snappiness ambitions at risk. There are at least a couple of reasons why.

First, applications have a finite amount of memory available to them. When the operating system runs out of memory, a cool trick lets them supplement disk space for memory, but when this happens, performance hits the floor–hard drives, being mechanical, are orders of magnitude slower than memory.

While web applications don’t directly interact with the operating system to obtain memory, the browser does both for its own internal functions and as a proxy to the appetite of the web applications it is displaying, and as a web application’s memory consumption grows, so does that of the browser.

Therefore, if an individual web application’s memory needs grow sufficiently large, it can force the operating system to start dipping into disk space to provide sufficient memory, and when this happens, kiss any semblance of responsiveness goodbye.

Since there’s no way for a web application to know how much memory is available before this performance doomsday occurs, its good behavior to make your memory footprint as svelte as possible.

Garbage Collection and You

But there’s another, much more important reason why small web application memory footprints are good. It has to do with the way memory is handled in a browser. Like Java and pretty much any scripting language, JavaScript manages memory allocation for developers. This frees developers from having to deal with the tedious bookkeeping associated with manual memory management, but it comes at a cost.

That cost is embodied by the garbage collector. As a web application executes, it is constantly creating new objects, most of which are fairly transient–they are part of a transaction that has completed, like creating some short-lived jQuery objects to look-up some DOM elements. These objects consume memory. Eventually, the web application has created enough objects and is therefore consuming enough memory that the collector needs to wade through all the objects to see which ones are no longer being used and therefore represent memory that can be released.

This is where the performance implication comes in. To do its work, the collector stops the web application’s execution. Typically, this happens so fast that the user doesn’t notice. But when a web application creates lots and lots of objects, and these objects aren’t transient, the collector has a lot of work to do–it must go through all of these objects to ferret out the ones that are no longer used. This is turn results in delays that the user can perceive–and impairs the application’s responsiveness.

Leaks

To be clear, most web pages and web applications don’t push the browser’s memory limitations enough to cause performance problems related to either of the scenarios above. As stated at the outset, this blog entry is about those web applications that need to treat the browser as a high-performance run-time, which in the context of this entry means that they have much-larger-than-average memory requirements.

However, these issues apply to more than just those web apps that are designed to use large amounts of memory; they can also apply to long-running applications which, over time, gradually consume small amounts of memory until the footprint grows to be quite large. When an application consumes more memory than its designers intended, it is said to leak memory. [2]

And this leads in turn to a third way in which memory can give the shift to performance: when the browser itself leaks memory. It turns out that mere mortals have created web browsers, and every so often they’ve made mistakes which can trigger either of the two scenarios described above.

Diagnosing the Problem

So how do you as a developer go about troubleshooting these sorts of problems? Today, there’s really only one way good way to do it: use the operating system’s tools. Unfortunately, this option doesn’t provide the right level of detail; you can either see how much memory the browser is consuming in aggregate (which is fine to let you know that your memory use is increasing, but doesn’t tell you why) or you can see which data structures in the browser itself are consuming the memory (which is fine if understand the guts of the browser, but it’s pretty hard for anyone else to understand how this maps into the web application they’ve developed).

What’s missing is a tool targeted at web developers that makes it easy to understand what’s happening with their application’s memory usage. We propose to create such a tool.

Start Small, Start Focused

Our plan is to start small and address two key needs that are presently unmet by any of the existing, developer-friendly, easy-to-use tools we’ve seen on any browser. These needs are:

1. Understand the memory usage of an application
2. Understand the garbage collector’s behavior

While here in the Developer Tools Lab we’re most interested in creating developer tools for the entire web community (i.e., not just Firefox users), in this case because the tool will need some pretty deep integration with the browser, we’re going to start with Firefox (because we sit close to the engineers who work on it).

We plan on the initial implementation of this tool to be simple. For memory usage, we want to introduce the ability to visualize the current set of non-collectible JavaScript objects at any point in time (i.e., the heap) and give you the ability to understand why those objects aren’t collectible (i.e., trace any object to a GC root). For the garbage collector, we want to give you a way to understand when a collection starts and when it finishes and thus understand how long it took.

Help Us!

This is obviously a small step into a large world. Is it a good first step? What do you think we should do differently? We’d love to hear from you, and thanks for reading!

[1] Of course, Firefox does a fine job of acting as application run-time; my point is that Google was the first to call out web applications as a distinct class of web content and to talk in terms of supporting these for their mainstream browser. Incidentally, Mozilla Labs’ Prism project sought to pioneer this idea years before.

[2] I’m using the term “leak” in a much more general way than is common in most developer communities. Traditionally, the term is applied to an application that allocates memory and then neglects to deallocate it when done. Because a language like JavaScript doesn’t allow developers to manually allocate or deallocate memory, it is impossible to leak at the JS level in this sense. But in my broader sense, any time a developer unintentionally creates memory footprint (e.g., by continuously storing objects in a hash in a mis-designed cache, etc.), I consider it a leak. This broader definition is borrowed from the Java community.

[3] Image of Marc Andreessen taken from http://images.businessweek.com/ss/08/05/0520_valleyboys/source/4.htm

[4] Image of the Google Chrome comic book taken from http://www.google.com/googlebooks/chrome/

[5] Image of Jakob Nielsen taken from http://www.useit.com/

NOTE: I cross-posted this to my blog; please use the comment thread over there.

The feedback for the last major iteration was largely positive, and it seems like we are on the right track. But we ran into a paradox.

We believe that the new tab screen should have two main functions: (A) To show you the sites you are most likely to be interested in going to, and (B) to not distract you. That’s the paradox: by design success is when the pages we show are maximally interesting/distracting, but an explicit goal is to not interrupt your flow.

This iteration focuses on solving that paradox by proposing a solution that we’ve dubbed “the cognitive shield”.

The Cognitive Shield

No matter where we put the links to your most visited sites (and their latest news), it always seemed to be a distraction, based upon our own perception and the feedback from thousands of testers. Given that the bulk of those testers are multi-tasking-adept early adopters, we’d expect that feedback to be even stronger from more mainstream users. Our original thought was to place the links along the bottom of the page — outside your foveal vision. In practice, the peripheral vision proved too strong, and the links still drew your eye and interrupted your cognitive flow.

The cognitive shield hides the distractions until you move the mouse. Then the links fade in quickly.

Here’s the thinking:

If you are typing a destination into the navigation bar, then your locus of attention is on the place you are trying to go — so we should stay politely out of your cognitive way. On the other hand, if you are using the mouse than you will probably benefit from the mouse-based navigation aid, so show it.

Whether you are using the mouse is a good indicator of whether you are in a cognitive flow or not. That realization resolves the paradox: the links are there when you need then, and not when you don’t.

The Design

The design of the cognitive shield is a ring of 8 circles, each containing one of your top-visited sites. We think of it as a personal watermark.

We went through a number of metaphors for the cognitive shield.

Instead of a metaphor which always strains — what symbol represents frequently used sites? — we went for an abstract glyph.

Known Bugs

There are a couple more features we’re in the process of adding. In particular: The ability to manually add a site is entirely broken. There’s no way to change the total number of frequently visited sites shown. There may still be encoding problems for non-roman scripts. Middle-clicks may be broken. The visual style needs a refresh. And the sites don’t remember their new positions post restart.

Testing the Prototype of New Tab

Step 1. Download and install the latest development build of Firefox 3.1.
Step 2. Download and install the latest version of the New Tab prototype.
Step 3. Let us know what you think, including what works, what doesn’t and how we can improve the design.

– Aza Raskin, for the “New Tab” team

As always, we will hear progress updates on various active Labs projects and would love to hear from you! Get involved with a Labs project. Get feedback on your own projects. There will be plenty of opportunity for discussion and hacking. And of course, pizza :)

A fair amount has happened, so I thought I would write up the news:

Tab Support

Believe it or not, but the editor was cheeky when it came to tabs. Ben reworked the model so tabs will work with a special “tabmode”, where you can decide if you like to code with true tab characters, or if you prefer converting to spaces. As always, “tabsize” defines how many spaces a tab takes up. This is actually a big change and if you are developing on top of Bespin you need to be aware that there is a new CursorManager that handles some of the heavy lifting for you. Ben wrote all about it and how we found a performance bug with it on stage!

Reusable Editor Component

We have seen a bunch of people embedding the editor component itself, and we haven’t made that as easy as we should. We now have a first class editor component that I discuss, with the goal of being able to simply load up a script src pointing to the embed code, and then wrap up a div, or create on the fly, a Bespin editor.

Quick Open

Julian has created a killer feature, Quick Open Those that have used Cmd/Apple-T in Textmate know what this does, it pops up an easy way to jump between files in a project. This is a real success story as Julian was able to take a design document and implement it himself in short order. He has continued to improve it, along with Kevin Dangdoor, who worked on the backend pieces.

Syntax checker

Malte has been hacking on syntax checker / web worker type code for awhile, and we just got this work into tip. Now the JavaScript code that you write in Bespin is syntax checked on the fly (we need to iron our the UI there a little more).

There are also other benefits such as the new command outline that shows you a function list that you can jump from, and a new improved goto command that not only takes a line number, but also a function name to … go to.

Doctype integration

We have a lot of thoughts on how to integrate great Open Web documentation into Bespin. One little experiment is being able to bring Doctype into Bespin via a doctype command. Pops it open inline. Now we need to make search work for it.

More copy and paste

Jim Wilson has integrated trepanation a Java plugin based system that lets you access more services from your Web application. He whipped together a quick way to get copy and paste work nicely via Java, and a new exec command that “runs the current document or selection in the privileged trephine Rhino context”.

Thunderhead, Ho!

Ben is on the case with Thunderhead. He has taken out the custom styling and is using CSS to do that work. We will then be able to have full themes and skins available where you can easily add your own.

There is much more coming too. Joe Walker showed off Collaboration at the Mozilla Labs London event last week, VCS is looking good, and more features are in active development. Phew!

As always, follow us on Twitter, chat with us on #bespin in irc, and join our group.

– Dion Almaer, on behalf of the Bespin development team

For the past week we’ve been using the feedback as a springboard for designing the next iteration. If you’d like to watch the design iterations as they happen, follow #mozconcept on Twitter.

Current Design

We’ve done away with the thumbnails as they just didn’t seem to be providing large amounts of value. As we played with different methods of taking screenshots, we discovered that it was the top-left corner that was most distinctive in identification because it generally contains the site’s logo. We have a much stronger association with a site’s logo or favicon than with the low information-density thumbnail of the page itself.

We’ve also turned the contextual actions into an actionable sentence. Previously, the actions were large, separated buttons. The actionable sentence connects the actions into a cohesive whole. Further, we now only show the contextual actions if the copy action has happened within the last 40 seconds, so that random chunks of text don’t appear on the new tab page.

Finally, the interface for undoing a tab close now uses the familiar info-bar. This gives less weight to the undo action, while still keeping it visible. By design, the undo doesn’t feel like a part of the page so the eye skips over it if your intent is to interact with the page.

Overall, the design feels faster, politer, and more functional.
The visuals still aren’t exactly right (help wanted!), but this feels much “righter”.

Instead of talking more about the design, give it a try and give us feedback:

Step 1. Download and install the latest development build of Firefox 3.1.
Step 2. Download and install the latest version of the New Tab prototype.
Step 3. Let us know what you think, including what works, what doesn’t and how we can improve the design.

You can switch back-and-forth between the old design and the new design by clicking the star in the lower-right corner.

Other Thoughts

There are still a lot of possible directions to take the new tab screen. Here are a couple of the ones we’ve played with. More to come soon. For instance, we want to revisit the first design.

With Thumbnails

Out There Designs

Oliver Reichenstein has joined Sean Martell to form a “new tab” visual design team. They’ve already separately produced almost all of these fantastic visual artifacts, and we are looking forward to more. If you’re a designer and interested in this project from a design perspective, this is a great opportunity to get involved in an open source project. Please jump onto either #labs on irc.mozilla.org or link your mockups in the comments section of this post.

In the spirit of welcoming new developers to our ranks, consider this question: if you’re a potential extension developer but for whatever reason haven’t gotten around to creating the Next Great Extension, we’d like to know what we can do to help.

Check out the survey we’ve created and let us know what you like and don’t like about those platforms.  We’ll use this feedback to guide our thinking around how we can make development easier, more fun, and more rewarding.

New Developers Survey

In true Mozilla fashion, we’ll share our findings with you here on the Labs blog, and we look forward to hearing your thoughts.

Nick

M5 Development Milestone

We’re proud to announce the release of the next development milestone of Weave Sync on the road towards the upcoming 0.3 release

Major Features

What is Weave Sync all about? In short, Weave Sync lets you securely take your Firefox experience with you to all your Firefox browsers — including our mobile browser, codenamed Fennec. It currently supports continuous synchronization of your bookmarks, browsing history, saved passwords and tabs. For example:

• Get the same results on the Smart Location Bar on each of your Firefox browsers, so you can get to your favorite sites with just a few keystrokes
• Continue what you were doing: have the ability to open any tab you have open on any of your Firefox browsers
• Keep the same list of bookmarks on all of your Firefox browsers
• Easily sign in to all your favorite sites using your saved passwords (this is especially handy on mobile phones, where it’s hard to type in complex passwords)
• Do it all securely: Weave Sync encrypts user data before uploading it to Mozilla’s servers, so that only you can access your data

What’s new in M5?

• Improved reliability and performance, specially on Fennec.
• Added the first pass of a set of user controls to help recover from sync problems: one way sync up/down, force a slow-sync.
• Polished UI on Firefox and Fennec.

Getting Involved with Testing and Development

• Register for a Weave account on http://services.mozilla.com/
• Install the latest development milestone (requires Firefox 3.1 beta 3)
• Learn more about Weave.
• Discuss, debate, and add to the design in the Weave forum.
• Join us in #labs on irc.mozilla.org.

– Dan Mills, on behalf of the Weave development team

A lot of the discussion has been taking place on personal weblogs, which makes it a bit hard to follow what’s been going on. To counteract that, here’s a round-up of important articles that have been written so far.

Describing the general problem:

• The Tower of Babel, by Jono
• Localizing Ubiquity: an Open Letter to Linguists, by Mitcho

Language-specific articles:

• Thinking Ubiquity in Portugese, by Felipe
• Focus on Japanese, by Mitcho
• Thinking Ubiquity in Italian, by Flod

Proposals for partial solutions:

• Writing Commands with Semantic Roles, by Mitcho
• Overlord Verbs: a Proposal, by Jono
• Verb-final languages: An advantage? by Jono

There is also now a mailing list, ubiquity-i18n@googlegroups.com, for discussing internationalization of Ubiquity. We are eager for your feedback, especially if you’re a localizer in the Mozilla community.

– Jono, on behalf of Ubiquity development team

– Jono, on behalf of the Weave development team

This sucks.

Why does it suck? Because there’s no drag-and-drop; Flash or server-side hacking is required to provide any kind of progress indication; you can’t upload multiple files; if you know what you want to attach you have to navigate there again with the OS file picker; you can’t even enter a path into the widget because of security issues; and the list goes on. Ideally, the browser should make it painless to get files from the desktop to the cloud.

There has to be an easier way. Here are two ways for you to make a difference:

1. Post an idea anywhere and Tweet its URL to mozconcept any time before the party (see below). The idea can be a mock-up, a prototype, some words, a napkin sketch, a video, anything.
2. Join the Mozilla Labs team at SxSW as we discuss ideas and mock-ups to replace or augment Firefox’s current built-in file uploader. Come take part in the conversation and enjoy some refreshments (read: beer & grub). Join the inventor of Javascript, the lead architect of Ubiquity, the creator of jQuery, and others to discuss how you can prototype your ideas. Expect the usual Firefox swag, some prizes, and merriment.

   Moonshine Patio Bar & Grill
   303 Red River St
   Austin, TX 78701
   Time: 4:30 – 6:30 p.m.
   March 16, 2009

If you’re looking for inspiration for how to solve the file upload problem, check out Jesse Ruderman’s recent blog post on the topic.

We’re looking forward to seeing your ideas!

The Mozilla Labs Team

From the feedback from the last two rounds of new tab concepts, we know that the page needs to load instantly (even a small wait breaks user experience); that it shouldn’t be visually distracting; and that it should be a launch point into your daily activities. One level higher, the distilled design themes were:

• No configuration. Never force the user to set up or fidget with a feature before they use it.
• Streamlined. New tabs are opened to start a new task or navigation. If we have a good idea of what that task is (like mapping an address selected on the last tab) or where you want to go, we should help you do that quickly and efficiently.
• Polite. The page must be instant load, shouldn’t be distracting, or ever get in your way. Being too “clever” results in annoyance: we should be avoid recapitulating Clippy.

Over the last week we’ve gotten back to this project and have come up with an experimental revised design that we believe is consistent with these principles.

Revised Design

The design consists of two components. The quick-access bar on the right, and the contextual actions on the upper left.

Quick-access Bar

It may seem strange that the quick-access strip is along the right of the window. It’s there in order to be polite. If you’ve got your mind on opening a new tab and just entering a url, it’s outside your foveal vision.

The quick-access strip is determined by frecency — the same metric that the Awesome Bar uses — with one twist. Instead of raw frecency over all sites visited, we are only considering those sites that start history “strands”. That is, we are using the most frecent sites that you actually begin browsing from. The versatile Places feature of Firefox 3 makes this possible.

Finally, we include the latest updates for each page automatically. For example, both Gmail and Yahoo! Mail provide RSS feeds, so you’ll automatically get to see your latest emails — without hassle or setup — if you visit your email often. You don’t need to know what RSS is to get its benefits.

The thumbnails are supposed to be in grayscale (by using SVG filters), but we weren’t able to implement that for this iteration.

Contextual Actions

If you are performing a task, the new tab page should make it effortless. Generally, you’ll select some text and open a new tab to search for that text. The new tab provides a big button so that becomes a one-click action (in the future, it will use your default search provider). If you’ve selected an address, the new tab provides a one-click action to map it. If you’ve selected a URL, one-click action will open it. The action system in the future will be extensible, and could be connected with or take inspiration from Ubiquity.

Also, in case you’ve just closed a tab you didn’t mean to, there’s a contextual action on the new tab to recover it.

Try It Out

We’ve put together a prototype of this revised design to see how this feels and to get wider feedback and review.

This is a rough-cut prototype: the page loads too slowly, the visual design isn’t right, and you can’t even tell the browser that you don’t want a particular site to show up on the new-tab screen.

This prototype also only works on the latest version of Firefox as it takes advantage of new platform capabilities. Here are the directions for helping test and review the revised design:

• Step 1. Download and install the latest development build of Firefox 3.1.
• Step 2. Download and install the latest version of the New Tab prototype.
• Step 3. Let us know what you think, including what works, what doesn’t and how we can improve the design by commenting here, joining us in IRC at #labs, or getting involved on the wiki.

Open Questions and Problems

Besides problems we know need to be fixed, there are a number of questions we don’t know how to approach yet:

• We fetch the latest updates, via RSS, for your most visited sites. It’s convenient, but is making network connections okay? There’s precedent with live bookmarks.
• How much reaching out is okay? If you’ve selected an address should we just put a map on the new-tab page? If you’ve selected a single word, should we fetch its definition?
• Is there something besides RSS that’s useful to show related to each page?
• What other layouts should we consider?

Background & Other References

• New Tab Concepts
• Firefox 3.1 New Tab Spec
• about:tab New Tab Page from Mozilla Labs
• Source code for the about:tab prototype on hg.mozilla.org

Dan Mills and Ed Lee worked up this prototype. It is based on discussions on the previous blogs posts and comments, IRC, and around the Mozilla offices. Special thanks for input from Sean Martell, Alex Faaborg, and Mike Beltzner. We’re keen to hear your thoughts and opinions!

– Aza Raskin, on behalf of the New Tab design & prototype team

We just deployed version 0.1.4 to bespin.mozilla.com, and this release has a lot of changes.

The biggest infrastructure reboot is the fact that we are now using Dojo to power Bespin, and this major contribution was lead by Roberto Saccon. Major thanks to Pete Higgins, Dojo lead, to giving it all a once over and making sure that Bespin looks and runs as “Dojo-y” as possible.

Roberto went on to fix a bunch of bugs and issues, and is now working on a much better syntax highlighter.

Jay Bird and Julian Vierect kindly made the editor nicer. You can now indent and un-indent as you would imagine (with TAB), and I added the notion of a setting autoindent that when on (by running set autoindent on in the command line) will keep track of your indent level when you hit RETURN.

Extension points; Config and Commands

We really want to offer great extension points, and we got a bit of the way there in this release. You can use the configuration system to tweak your system. After opening your config.js (manually get into the BespinSettings project or just run editconfig. Once there you can include other files, setup aliases, load commands, and run any code you wish.

For example:

// -- Load up custom commands
publish("bespin:commands:load", { commandname: "calculate" });

// -- Load in my aliases
include("aliases.js");

// -- Load up sub systems of Bespin that aren't loaded by default
require("bespin.syntax.arduino");

You will notice that these functions are aliases to make life easier for you when in config scope.

To create a custom command such as the calculate one above, you simply create a new file in your BespinSettings/commands directory, and write a command object.

Here is what the calculate command looks like. Read about the various commands here. We are also designing a simple plugin API, and would love comment.

There is a lot more in this release, and I want to thanks all of the contributors who have already made working in the Bespin community so much fun.

What else is happening in the community? Here are a few things:

• Joe Walker has a design document (and partial implementation already) for how collaboration will work in Bespin, at scale
• Kevin Dangoor did a great screencast introducing the python backend to Bespin which implements the Bespin Server API
• Guillaume and Sebastian posted on how they have integrated Bespin with the Java Play! Web framework
• Malte Ubl shared a prototype of what a “VisualWorks for JavaScript” could look like
• I wrote about the pain of working with system clipboards from the Web here and then followed up right here

Finally, Ben and I will be in London next week and will be hanging at a Mozilla Labs event that is taking place on Tuesday March 10, 2009 from 6:30pm to 8:30pm at The Hub in Kings Cross. We hope to see any Londoners there to chat Bespin, Developer Tools, and general Open Web!

– Dion Almaer, on behalf of the Bespin development team

The focus of development so far has been on enabling Weave Sync to encrypt and securely synchronize the Firefox experience across multiple browsers, and more specifically between the desktop and mobile devices.

M4 Development Milestone

This is an early developer release of the Weave client, for testing purposes only, and one of many planned development milestones toward the next major update expected later this year. This development milestone is being made available for testing purposes only and is intended to solicit wider testing and feedback from the broader Mozilla community.

What’s New in M4?

• Preliminary support for Fennec for all data types, i.e. bookmarks, history, tabs, and saved passwords.
• Redesigned sync protocol and server architecture.
• Client optimization to improve CPU and memory efficiency.
• services.mozilla.com now hosted on a redesigned hardware server cluster.

Getting Involved with Testing and Development

• Register for a Weave account on http://services.mozilla.com
• Install the latest development milestone
• Learn more about Weave.
• Discuss, debate, and add to the design in the Weave forum.
• Join us in #labs on irc.mozilla.org.

– Dan Mills, on behalf of the Weave development team

All you need to get started is a mockup! Share your great idea in the forums – a sketch, wireframe, polished graphic or video. Within the next two weeks we will identify the most promising ideas and invite their creators to participate in a mentoring program where we’ll work together to refine ideas & mockups into interactive prototypes. Check below to see a list of the institutions who are currently involved.

Get all the details about participation here. More questions? Contact us at conceptseries@mozilla.com.

Schools that have signed on so far:
Carnegie Mellon University (USA)
Parsons School for Design (USA)
University of Michigan – School of Information (USA)
London Royal College of Arts (UK)
ESDI (Brazil)
University of the Arts London (UK)
L’Ecole de Design Nantes Atlantique (FR)
Universitaet Karlsruhe TH (DE)

February 2009

Concept Series

We are currently collecting feedback on a proposed web-based collaboration tool/space for the Concept Series. Learn more and join the discussion over on the discussion forum.

Design Challenge

The application deadline for the inaugural Design Challenge is right around the corner! Initial ideas & mockups must be submitted to the forums by Sunday, March 1st. Further details on applying are available in the discussion forum.

Experiments

Weave

In preparation for the release of the next milestone leading up to the 0.3 release on March 2nd the newly updated server-side components of Weave have been migrated to a new server cluster on real hardware, dramatically increasing speed and availability. If you’re interested in helping test the next release, please register now to receive an invitation within the next few days.

Ubiquity

Another update to Ubiquity was released this week, with many bug fixes. Release notes can be found here. More details about 0.1.6 have been posted on Atul Varma’s blog.

HCI student and Ubiquity community contributor Zac Lym has been doing good work researching the usability of Ubiquity through scientific user testing.  His research has highlighted some areas where Ubiquity needs improvement to be discoverable and learnable for new users.  He has written up his methodology and his findings on the Mozilla wiki.  He’s blogged about the root causes of the usability problems that he found, and has also come up with a list of recommendations for fixing them.

Bespin

As its first experiment to escape into the open, the Developer Tools Lab launched Bespin, an experimental web-based code editor with ambitions to bring a desktop-class code editor to the Web. View an introduction screencast and check out the initial release of the editor, and get  more information on engaging with us as we figure out where to take it!

Labs Nights

If you’re hosting a Labs Night in your area, please let us know and we’ll add it to the event calendar and post it on this site.

London

Great success at the first Labs Night in London! Plenty of folks joined the group at Waterstones Piccadilly to discuss Ubiquity, Weave, Test Pilot, Bespin, Concept Series and Labs in general. Be on the look out in March for more London Labs events.

Mountain View

This month’s Labs Night Mountain View was awesome. We welcomed Edwin Khodabakchian, developer of Feedly, a Firefox extension which weaves twitter and Google Reader into a magazine like experience. We heard a great presentation on Play!, a Java web application framework, and Ben Galbraith and Dion Almaer discussed Bespin. Stay tuned for the next Labs meetup in March!