Introducing my very own web client of the future! EdBrowser!

A brand new shiny web client with buttons and boxes that's better than foxes!

Okay okay. I’m not actually making a web client of my own, but if I had a lot of time and the right infrastructure, it would probably look like the picture above. (I suppose I do have a lot of time seeing that I’m unemployed. But that does have various benefits.. no going to classes, no studying for exams, no paying income tax to blow up then rebuild bridges.. And who would want to use something called EdBrowser?!)

I’ll just go in left-to-right order describing what you can see (and don’t see) in my mock-up:

1. Identity Center
2. Site Launcher
3. Text Input
4. Web Content

Identity Center

First off, we have something new here — the web client knows who you are and lets you know who it thinks you are. (If your name isn’t shown, you’ll want to “log in” so your experience is personalized for you. Everything described further down can be stored as part of your account.)

When the client knows who you are, it makes it easy for sites to find out that it’s you if you let the site know. Now you won’t need to fiddle with logins and passwords for “simple” sites like forums. Additionally, sites can restrict sensitive data (bank accounts, emails, etc.) and require you to give the web client a password. When you do so, the client will send the server an impossible to guess “password”, which it set up earlier, and now you don’t need to worry about internet hackers guessing your bank password.

There’s a lot more functionality for this “Identity Center,” but because I made it green and ugly, I’ll talk about it at the end. 😛

Site Launcher

You might be wondering wheres the tab bar, and here it is! Kinda. You can initially think of this area as a combination of the bookmarks bar, tab bar, and history drop-down menu.

I’ve mentioned in some other post that even with a smart new-tab page, you still need to open a new tab then find the page you want to open — 2 clicks. Similar two steps if you use the drop-down menu. And bookmarks… ew.. at least the drop-down menu automatically shows the sites you frequently use instead of manually bookmarking sites.

What you really want to do is just get to a site you frequently visit. So let’s just put those sites in an easy-to-find place.. in the Site Launcher! The web client knows which sites you use frequently, and it will automatically populate the area with the icon for that site. Now when you want to open the site in a new tab, you just click on the icon. Done.

But that’s not all! When you move your pointer over the icons, it’ll show you titles and thumbnails of all your open “tabs” that share that same icon. It will also show thumbnails of pages that you frequently go to on that site. This means no more loading the site’s home page then clicking through to the actual page you want. It shows up right there – accessible with a single click.

And as a bonus, you would be able to search the listing of tabs and pages you frequently visit to restrict your searches to just that one site.

Opened sites, unopened sites, trash and active tabs

The Site Launcher has 3 main components:

1. Sites you commonly use
2. Trash for removed sites
3. New/temporary sites

When you visit a site not in the Site Launcher, it shows up towards the right side — to the right of the dot. If you want to “pin” the site, just drag it to the left of the dot. You can close that site just by dragging it to the trash or any other normal way you would close a “tab.”

While the trash isn’t really a site, you can still hover over it just like any other site’s icon. Except now it shows you thumbnails of sites you’ve recently closed and might want to reopen. “Undo” is such a great feature! 🙂

The dot is there for you to drag if you want more space for sites to automatically fill in to the left side. But hey, you’ve got a lot of space now that there’s just the Identity Center, Site Launcher, and some small Text Input box…

Text Input

Not much to explain here. Just type what you want to do. You can execute commands or search your history and/or the web. You could just put text to store there if you wanted. I suppose you could type a URL, but why do that when you’ve got the Site Launcher!

But about the location bar.. There’s nothing showing URLs anywhere. Not in this text box or when showing sites you might want to launch — those are just titles and thumbnails. (Wait! Didn’t this guy make the AwesomeBar awesome?! Oh well.. 😛 Okay fine. You can still get to the current URL and edit it, but it’s not shown in the main interface.)

I lied. It’s not really just a text box for input. When you click on the “text box,” it also opens up bigger box in the middle of the screen, so when you type it shows up in both places. This box will show the results of what you’ve typed in. So it could be a map of an address you’ve selected or pages that you might want to go to. And after you hit enter for the command or search, the input box clears itself.

Web Content

Content is king! Lots of space for it here with just little partitioned off to the web client.

So I’ve already talked about web sites knowing who you are, and now you won’t need to keep logging into sites before you use them. But there’s more websites can do with information if you give them access!

Share your history to find great deals (but no Wii will be that cheap...)

If I’ve given Amazon.com access to my Target.com history, the next time I visit, the site can figure out what items I’ve been looking at and hopefully offer me a better deal. No need for me to manually search for the same item across multiple websites.

Another example would be sharing my digg.com history with a news aggregator site like Google News. It can know that I dugg an article and show me news stories related. Additionally Google could dig deeper and find when the original article was submitted or when I dugg it and only show news that has happened or updated since those times.

Identity Center

Back to the ugly green button. It actually comes in different colors like red and gray. It would also have a different emphasis state when the site wants to get at more of your data (but hopefully it’s not an annoying animation..)

For example, when you first visit a site, the button will appear gray because you haven’t given the site any access. It would then try to get your attention, and pointing your cursor at it would show a message like “Site ABC would like to know who you are. 40% of your friends have granted access; 3% deny. Grant or Deny?” Granting access could be limited to just the site knowing that if you “log in” to your web client from somewhere else, it’ll know it’s you again. This can be done without ever giving away your name or other personal information.

Having the web client know about your social network is nice, but re-entering all your information to a web client is a pain. You already have a lot of information on a number of websites, so let’s collect that. When you visit certain sites, the Identity Center could let you know that you can extract data from those sites and securely store it on your profile. Then you can share that information with other sites you visit if you choose to do so.

Crude mock-up of attempting to grab attention

Other situations where the Identity Center button might want your attention is if the site wants to know more than just who you are. Clicking the button could show a list of sites that you might have history for. If you do have history, you can preview what information is sent to the site as well as visit the sites that you haven’t been to before.

If Amazon.com is asking for your visit history of competitor’s websites, they’re also giving away which competitors they’re interested in. You could then navigate to new sites that you didn’t even know about. (Or just visit the ones where your friends have also visited and granted access.)

There’s an endless combination of what can be done with having your data accessible online while selectively giving out certain portions to certain sites. Also, there’s plenty of interesting personal data that already exists on some sites, so you could unleash so much potential if it was easy to make that information available.

Do you have suggestions to streamline user tasks in this new web client?

So that’s a quick overview of some parts of my imaginary EdBrowser. There’s plenty more that I’ve thought about but am currently too tired to write up. But even if this web client doesn’t exist yet, the technologies needed to make something like this are coming in. There’s the AwesomeBar as part of Places that pushed towards adaptive behaviors and Ubiquity for new interfaces for “doing stuff.” And there’s Weave for securely pushing data to the cloud and letting the user selectively open it up.

The user is the focus of attention here, and making the experience better and more streamlined is the goal. The user isn’t just passively browsing the web anymore as s/he gets to leverage the web client to easily get at whatever is desired. (So actually.. User is King! or Queen! 😉 )

Josh had an interesting comment in my recent post on Firefox 3.1 Location Bar Preferences about hiding certain keywords from the location bar.

At first I suggested using the new “Forget About This Site” feature where you can select a page from your History Sidebar and choose to forget everything (history, cookies, etc) about that site. Doing this would prevent any of those pages from showing up in the location bar because you would have no history for that site.

Quick way to remove a site from the location bar

Unfortunately, that requires the user to actively clear the site from his/her history. (Perhaps Firefox could automatically do that for the user in a privacy-aware manner…)

Josh then had a question regarding userChrome. Since Firefox 3 handles all sorts of fancy CSS 3 selectors including substring matching in attributes with *=, I figured it would be fairly simple to match the url or title of a location bar result and hide it.

This technique works well if you don’t mind leaving trails of your privacy hiding in plain sight. However, I suppose the ease of taking a peek at userChrome is a quite bit more difficult than just typing in the location bar.

Hide pages that match your keyword/pattern in the URL or title

All you need to do is use your favorite way to style Firefox, e.g., editing userChrome.css in your profile’s chrome directory or through an add-on, and add a style matching the class name “autocomplete-richlistitem” as well as a selector for either the “url” or “title” attributes.

For example, if you want to block any results that have “facebook” anywhere in the URL, use the following style:
.autocomplete-richlistitem[url*="facebook"] { display: none; }

This is just a simple hack to prevent certain pages from showing up. The location bar by default tries to show the top 12 pages, but if you’re hiding pages, you might end up with no results. You can try changing the value of browser.urlbar.maxRichResults from about:config to get more results, so if any get hidden, there are others to fill in the space.

Thanks for installing/upgrading Hide Unvisited. This latest version is only for Firefox 3.5 and leverages the built-in privacy functionality of Firefox 3.5, so you don’t even need the add-on anymore. The add-on has already automatically uninstalled itself and set the preference as described below for you. 🙂 But if you want another add-on to try, check out Enter Selects — pressing enter from the location bar will now automatically go to the first result.

User Privacy has made big steps with Firefox 3.5. First off it’s very simple to clear out the last hour of online shopping, medical researching or media browsing with “Clear Recent History.” This is much smarter than wiping out your entire history or not letting Firefox track any history just to prevent some pages from showing up in the Location Bar. Another big privacy feature is Private Browsing Mode [support.mozilla.org] (Panic Mode? 😉 ), which starts a new browsing session where Firefox won’t track any history until you leave that mode.

Both these features affect the Location Bar because removing pages from your history stops you or someone else using Firefox and accidentally finding those pages when typing in the Location Bar.

One slight caveat is that by default, Firefox will suggest bookmarks from the Location Bar because you’ve added a star to the page and probably want to revisit it. This means even if you clear your browsing history, bookmarks will still show up when searching for pages.

Choose what Firefox 3.5 can suggest from the Location Bar

Firefox 3.5 adds a new drop-down menu in the Privacy view when setting your Preferences. Here you can tell Firefox to only search “History” instead of the default of “History and Bookmarks.” This means if you use a bookmark and remove traces of visiting the bookmark, it won’t show up in the Location Bar until you revisit that page you bookmarked.

On a related note of only showing pages you’ve been to, Firefox 3.5 will only suggest pages that you’ve typed in the Location Bar when clicking the drop-down button. This means the 12 sites that appear in the list are those that you frequently use to start browsing. Similarly, Auto Dial 6 has been updated to only show pages you’ve typed. These two make great ways to go back to sites that you launch from.

Two launch-points to get you started in just a couple clicks

If you want more advanced control of the Location Bar behavior, check out Firefox 3.5 Location Bar Preferences.

For those comfortable with twiddling around with about:config, there are several new preferences to play with since Firefox 3. (If that sounds scary, check out my other post about Firefox 3.5 Location Bar Privacy.)

I’ll explain three new groups of preferences that let you..

1. Toggle suggestions on and off
2. Customize what results get shown
3. Change the matching behavior as you type

Configure Smart Location Bar's behavior from about:config

Toggle Suggestions

The first preference is fairly simple; toggle browser.urlbar.autocomplete.enabled to turn the location bar suggestions on and off. This is useful if you always want to type out the URLs you want, or if you can type a whole domain and hit enter faster than typing a single letter and having Firefox suggest the site you want.

If you’re just looking to prevent certain pages from showing up in the suggestions, there are better options available than using this sledgehammer (see below). Also, for those who have set browser.urlbar.maxRichResults to 0, -1 or something else (e.g., userChrome.css) to turn off suggestions, using this preference is better as it prevents your CPU from wasting power while searching for results that Firefox won’t show.

Customize Results

The second preference lets you make the location bar only match URLs of pages you’ve visited, similar to Firefox 2’s behavior. It’s much more powerful than just that as it also lets you restrict results to pages that you’ve 1) visited, 2) bookmarked, 3) tagged or 4) typed in addition to letting you force your search terms to match in 1) the title or 2) the URL.

You can use any combination of these filters to reduce the number of results that show up in the location bar’s suggestions. Another way to look at it is if you specify some filters, e.g., bookmarked + typed, you’re getting rid of anything that isn’t that — throw away all results that aren’t bookmarked as well as get rid of pages that you’ve never typed in the location bar.

The way you set these filters in browser.urlbar.default.behavior is slightly tricky if you’re not familiar with “bitmaps.” They’re not too complicated to deal with, but you will have to do some simple addition in your head. 🙂 The way things work is each filter is given a number value, and to figure out what number to set for the preference, just add up the values of each filter you want.

If you want the location bar to only match URLs of pages you’ve visited like Firefox 2, set browser.urlbar.default.behavior to 17 (1 for visited pages + 16 for URLs).

Similarly, if you want to additionally restrict results to pages you’ve typed in, add in an extra 32 for “typed” — 49 for matching URLs of typed, visited pages. So for those who have used browser.urlbar.matchOnlyTyped in the past, you’ll probably want to add 32 to any other filters you want.

The whole set of values for each filter are as follows:

• 1: visited
• 2: bookmarked
• 4: tagged
• 8: match title
• 16: match URL
• 32: typed

Filter On-Demand

The last group of preferences are very related to the previous preference, and I’ve introduced their functionality in my post on Firefox 3.5 Restricts, Matches, Keywords.

Basically they do the same thing as the previous preference except you type in a special character to turn on a filter as you’re searching from the location bar. This lets you pick and choose when you want the filters to be in effect instead of always being on.

The default symbols for these “on-demand” filters are as follows:

• ^: browser.urlbar.restrict.history
• *: browser.urlbar.restrict.bookmark
• +: browser.urlbar.restrict.tag
• ~: browser.urlbar.restrict.typed
• #: browser.urlbar.match.title
• @: browser.urlbar.match.url

One big difference from what I described in the earlier post is the handling of empty filters. Setting these restrict/match preferences’ special symbols to nothing prevents you from (accidentally) activating that filter dynamically. However, you can still set the default.behavior to use that filter automatically.