Margaret Leibovic

For the past few months, I’ve been spending most of my time helping the mobile team with the Fennec NativeUI rewrite, and a few weeks ago I officially became a member of the mobile front-end team. Although working on a native Android app has been painful different, I’ve found my desktop browser knowledge to be really useful, especially when working on Fennec features that I also helped make on desktop Firefox. I’m hoping that this will encourage the desktop and mobile teams to work together more closely, since we’re really just all part of a bigger team trying to make an awesome Firefox experience across all of your devices.

I’ve neglected to blog about the mobile work I’ve been doing these past few months, but I’ll use the excuse that I was too busy writing code instead! Among other things, I’ve been working on click-to-play plugins, doorhanger notifications, site settings, bookmarks, and our form assistant UI. Grab a Nightly build to see our most recent changes, or check out Aurora for a more stable experience.

Recent mock-ups for the home tab, new tab, awesome bar and full screen mode all call for larger site icons. Although I wrote some code to expand a 16x16 favicon using the icon’s dominant color, a larger icon specified by the site would really be ideal.

The HTML5 spec for link type “icon” describes a sizes attribute, which enables web authors to specify multiple icon sizes. I was curious if anyone was already using this attribute, so I wrote a python script to inspect the 1000 most-visited websites, as reported by Google. Unfortunately, I found that only one website is using this sizes attribute. However, that’s not too surprising, considering this is a new spec that doesn’t seem to do much for websites right now.

I was also curious about how many websites specify link type “apple-touch-icon”, which is a way to specify a larger icon for iOS app shortcuts. I found that 81 of these top 1000 websites include these tags. However, I realized that smart websites would probably only provide this icon for users on iOS devices, so I decided to modify my script to spoof an iPhone user agent header. When I made this change, I found that 225 of these top 1000 websites included an apple-touch-icon.

Based on this data, I’d say that if we started including larger icons in the Firefox UI, icons that web authors can provide according to the HTML5 spec, plenty of websites would be willing to include larger icons in their link tags.

A handful of websites, such as pandora.com and amazon.com, are already including multiple icon sizes in their favicon.ico files, even though they are not communicating this with a sizes attribute. Unfortunately, even if they included a sizes attribute, we don’t currently have platform support for getting multiple icon sizes out of ICO files. However, work is being done there, so hopefully we will be able to use these larger icons in the near future.

The data from my investigation, including a JSON mapping of site URLs to icon URLs, is available here: http://margaretleibovic.com/iconscrape/

Most websites only provide a 16x16px favicon, but what can we do if we want a larger icon to represent a site? Faaborg had an idea to use the dominant color of this favicon to color the background of a box surrounding the icon. Yesterday I used the canvas API to prototype this idea for a new tab page, and it turned out pretty well!

I generalized my dominant color function a bit and posted it in a gist, in case anyone else might find it useful! You can also grab the latest UX branch nightly build if you want to see this new tab page prototype in action.

Update: Mardak wrote a neat restartless add-on that lets you test this algorithm (or any variation you come up with) on images on the web.

This post is co-written by Margaret Lebovic and Sid Stamm. This article is cross-posted on Sid’s blog.

As the web becomes more and more complex (and AWESOME), it’s important that you can manage your relationship with the variety of sites out there. Sure, Firefox 4 has a Page Info dialog that lets you control what a web page is allowed to do, including whether you want to let it store data on your computer, access your location information, open pop-up windows, and on and on. However, this dialog only lets you manage your relationship with the one page you’re currently visiting, not the entire set of sites you visit on the web.

We think it’s important to be able to manage your whole relationship with web sites in an intuitive way, and that’s why we’re exited to show you what we’ve started working on: a site-based permissions interface.

This feature is still experimental, but you can give it a shot. In the future, we’ll be putting some polish on the UI, adding more controls like “always access securely” (HSTS), and hopefully giving you a better view of what a site knows about you. We also want to integrate this permissions manager with the site identity block in the location bar for quick and easy access.

Try it out! Grab an Aurora build and try out the feature by typing about:permissions into the location bar.

In tomorrow’s Nightly build, you will notice the site identity block is sleeker looking than it was before! And it’s extra sexy if you encounter a popup notification!

Shout-out to Stephen, Frank, and Dão for working on this with me.

If you get on the new Aurora channel, you will see that the Do Not Track preference is no longer buried under Advanced preferences. Now it’s located at the top of the Privacy pane, so it’s easier to find and easier to let advertisers know that you don’t want to be tracked!

Following in Paul’s footsteps, I’ve decided to set up a blog on tumblr. I’ve been wanting to do a better job of sharing the things I’m working on, and I plan to use this blog to do exactly that. Look forward to lots of sweet screenshots of Firefox 5 features and beyond!

It’s only been a month since I joined Mozilla as a full time employee, but it feels like it’s been much longer. Joining the Firefox team late in the Firefox 4 development cycle meant diving into a pile of blockers, so I had to get up to speed right away. By the end of my first week, I was the assignee on five blockers, wrote a few patches, and even broke the tree! I couldn’t remember everything I’ve done this past month, so I had to search through bugzilla to jog my memory. It turns out I did a lot! I was able to group most of the larger bugs I worked on into a few categories:

• About window: I refreshed the “About Firefox” window to include language about the Mozilla mission, important links, and update functionality. Compare a screenshot of the old about window…
  
  …to a screenshot of the new one!
  
  (bugs 579547, 571127, 571424, 585475, 591013)
• Doorhanger notifications: Continuing work that Frank Yan started, I converted the “Remember Password” and “Change Password” notifications from bar-style notifications to doorhanger notifications. Compare a screenshot of an old notification…
  
  …to a screenshot of a new one! (Please note that the styling of these doorhanger notifications is being handled by separate bugs.)
  
  (bugs 567814, 573536, 588309, 594572)
• Progress lines: I added progress lines to the location bar and tabs, eliminating the need for the progress bar in the status bar. (The styling on these lines is also being handled in follow-up bugs.)
  
  (bugs 544818, 578028)

Besides these bugs, I also worked on implementing a quick prototype of a “Share” menu to replace the “Send Link…” menu item with a list of sharing services (bug 588508). There are some tricky decisions to be made about how we’ll generate this list of services, so this feature isn’t going to make it into Firefox 4, but look out for it in future releases!

This summer I created an experimental prototype of an about:me page for Firefox, and I am proud to announce that it is now available for download as an add-on on addons.mozilla.org! The goal of the about:me page is to give you a more interesting view of statistics about your browser usage, providing a fun way to see personalized patterns in your interactions with Firefox. The current version includes graphs that illustrate trends in your browsing and downloads histories. The “Activity Stats” section graphs the websites you visit most, including the individual pages you visit most within each top-level site. This section also graphs your hourly browsing activity, which can reveal patterns in websites you visit most at various times of the day.

The “Downloads Stats” section illustrates the distribution of different types of files you download, as well as daily trends in your download activity.

I plan to continue to develop the about:me page to include more sections from our brainstorming list, such as statistics about bookmarks and tabs. Please let me know if there’s anything you would love to see next!