fluidinfo / infomaniac

A Firefox extension for Fluidinfo

Infomaniac is a Firefox extension for Fluidinfo.

Introduction

Infomaniac is a Firefox extension that makes it easy to follow web pages, see the info other people have stored and to add one's own info about them. The extension adds a sidebar to the browser and, as such, must be XUL-based. The sidebar contains a browser XUL element which displays a mini-object browser served from fluidinfo.com. As the user changes tabs and pages the sidebar is updated to show the relevant content.

Development and testing

Follow the instructions here to prepare a development profile and tweak some settings to get information about errors when the extension runs:

https://developer.mozilla.org/en/Setting_up_extension_development_environment

When that's done put a file in ~/.mozilla/firefox/<profile>/extensions called jid1-AiwVfZ6h5L6xsQ@jetpack with a single line containing the path to this repository. Start Firefox and hit Ctrl-Shift-f to see the extension in action:

/usr/bin/firefox -no-remote -P dev

You need to restart the browser whenever you make a change to the extension logic before it will be visible. When the browser is running install the Firebug extension.

When you use Firebug for the first time click on the little box next to "Console" to enable it. Then click on the little menu arrow beside "Console" and turn on the following options:

• Show Javascript Errors
• Show Chrome Errors
• Show Chrome Messages
• Show Stack Trace With Errors

They'll persist between browser restarts so you should only need to do this once.

Handling page and tab changes

The extension needs to detect a few several kinds of state changes and update itself to ensure that the content it displays always matches the current page:

• A new tab is opened showing the empty about:blank page.
• A new tab is opened showing a page that can be followed.
• The active tab is switched from one to another.
• The page in the active tab isn't loaded yet.
• The page in the active tab finishes loading.
• The page in the active tab is changed.
• The page in an inactive tab has changed since the last time the extension updated itself (say because of an automatic refresh or because a page was loading slowly and the user switched away while it finished).

As you can see many things can happen that must result in the extension updating its state. The way it does this is by listening for and responding to a combination of events, which are described on these pages:

• https://developer.mozilla.org/en/Code_snippets/Tabbed_browser
• https://developer.mozilla.org/en/Code_snippets/On_page_load

Setting the root URL

The root URL, used to fetch the extension content, is stored in the extensions.infomaniac.rootURL preference. Preferences are described in some detail here:

https://developer.mozilla.org/en/Code_snippets/Preferences

The default can be overridden by opening about:config and setting a new endpoint. It's quite useful to use a browser profile just for development, as described above, with the root URL set to a local instance of fluidinfo.com.

Making a new release

Create a .xpi file:

make

This will create an infomaniac.xpi file that's ready to deploy.

Further information

There are a number of resources you'll need to have on hand to understand and modify the extension:

• https://developer.mozilla.org/en/XUL_tutorial provides a nice introduction to XUL.
• https://developer.mozilla.org/en/XUL_reference provides a list of XUL elements with links to detailed API documentation for each one.
• https://developer.mozilla.org/en/Code_snippets provides a list of examples, nicely organized by topic, which are indispensable when learning how to perform basic (and not-so-basic) tasks.
• https://developer.mozilla.org/en/Extension_packaging provides instructions for making an XPI. It also has some information about how to install the extension directly and serve the file correctly from a web server.

infomaniac's Issues

Pressing Ctrl-Shift-f when the extension content is focused doesn't close the sidebar

It would be nice if this worked. I don't keep it open most of the
time, so my workflow is often:

1. Look at webpage and decide I want to comment/tag it.
2. Hit Ctrl-Shift-f to open the sidebar.
3. Enter my comment.
4. Hit Ctrl-Shift-f to close the sidebar... nothing happens, so I
   have to click in the page content area and then hit the keystroke
   again to make the sidebar go away.

When clicking on the fluidinfo logo, the page is opened in the sidebar

That

Need to update the sidebar when a text selection is made

Like the Chrome extension, the sidebar should show you comments and
related content about the object matching the text you've selected.

Refactor the code to create a more clear separation between event detection, data logic and user interface logic

As it stands the logic in the extension mixes event detection, user
interface updates and Fluidinfo interactions together with clear
separations between these different concerns. It's already showing
signs of getting crufty. I have some ideas for improving this which
I'll try to push forward.

Remove the 'More on Fluidinfo' link at the bottom of the sidebar

We need to move it in to the sidebar content so that it appears in
Chrome too.

Display a 'More on Fluidinfo...' link in a page's context menu

This will make the extension work like the existing one, when the
sidebar is hidden.

Links need to open in the main window

This used to work but broke when links started getting rendered
dynamically by Javascript.

Need to add styling to make the extension look nicer

Right now it's a bit meh because, for example, the fonts are serif and
too big. The styling is CSS-based, so we could theoretically do
whatever we want... on the other hand, the widgets displayed in the
extension are native to each OS the browser runs in, so we probably
don't want to muck around too much.

The side bar doesn't remove the listeners it adds to pages.

This causes errors when the sidebar is closed an opened again.

Elements in the sidebar need to wrap automatically

I'm not sure what's going on, but elements in the sidebar never seem
to wrap. It seems that the element containing entire sidebar has a
different width than what the browser displays and that the content
width expands infinitely as content is added. This needs to be fixed.

Need to URI encode URLs to ensure that bits past # get sent to the server

Right now we're just passing the bare URL.

Need a basic project skeleton to start adding features to

We need a basic skeleton extension that runs and displays a sidebar.
Once that's in place we can start adding features to it.

Right-clicking on a link should take you to the object for that URL

When you right click on a URL in a webpage the More on Fluidinfo
link should take you to the object for that page. If the link text is
a hashtag, such as http://twitter.com/#!/search/%23aosa, it should
take you to the hashtag object, not the Twitter URL.

Fluidinfo link and text should match the style of the object browser

We're using the Varela Round font and a particular shade of blue.

Update the extension to use the new loveme.do URL

It's pointing to fluidinfo.com right now. In addition to updating the
extension we need to ensure that the old URL continues to work.

Default extensions.infomaniac.rootURL value is not working

Reproduce the problem by building an XPI, installing it and then
noticing that the sidebar is blank. When you look in about:config
you'll see that the extensions.infomaniac.rootURL value is undefined
and has no default.

I think the issue is that the defaults directory is not being
included in the built XPI.

Need to update the rootURL preference to use fluidinfo.com

Right now it's set to use new.fluidinfo.com.

Use a properties file so that we can localize strings

I started to do this but ran into some issues. I've decided to forget
about it for now, in order to keep moving forward, but in the future
we should do this so that we can translate the extension for use in
different languages.

This page describes the steps you need to undertake to localize the
extension:

https://developer.mozilla.org/en/Localizing_an_extension

Sidebar toggle doesn't work in OSX

The keybind for toggling the sidebar is OSX ends up being Cmd-Shift-F, which is already bound to fullscreen.

Use a configuration option to get/define the server to use to get extension content from

It's a pain to rebuild and reinstall the extension just to change from
using new.fluidinfo.com to localhost:8000/infomaniac.

Sidebar toggle doesn't work in OSX

The keybind for toggling the sidebar is OSX ends up being Cmd-Shift-F, which is already bound to fullscreen.

Update logic to match the style used in other projects

The Javascript classes we have are defined by creating functions that
return objects and specifying methods on the prototype for those
objects. This is fine, but it's different than the method used in all
our other Javascript code, something @ceronman pointed out in one of
the recent reviews. While there isn't much code, it'd be nice to
update it to use the same style as everything else we have (that is, a
function which defines objects in a closure and returns them).

Need to display some feedback when data is being retrieved from Fluidinfo

At present there is no feedback to indicate that the extension is
waiting for data from Fluidinfo. Some of the time Fluidinfo responds
very quickly, but other times it takes awhile and the extension seems
to be dead. Showing a spinner, progress bar or some other indication
that something is happening would help improve the situation.

Need to detect and respond to tab changes

As a starting point we'll display the URL of the content page in the
sidebar and update it whenever the tab changes. This will form the
basis of the change detection that will cause the sidebar to update
its state depending on what you're looking at.

Need to wire the Follow button up with Fluidinfo

We have the basic pieces in place to wire up the Follow button. It
needs to do the following:

• Show the current follow state of the page you're viewing.
• Interact with Fluidinfo when you click it to toggle the follow
  state.
• Update itself when the active tag or current page changes.

Add a debug flag.

The console object should not be overriden if the debug flag is false.

Show a notification when information is available for the current page

Like the Chrome extension, we want a pop-up of some kind that let's
the user know there's something interesting available that they might
want to look at in the sidebar.

Need to show tag/value info available for the current page

We'll start by showing a list of all info for the page.

Need to provide a way to get to the object for the current page in the object browser

Showing a More about this page in Fluidinfo... link sounds good.

Need a simple way to build an XPI

It's just a zip file so will add a simple make release target and
update the README.md file.