Friday May 16, 2008

DOM Inspector in Firefox Sidebar

In this entry I talked about how to show Google Talk in Firefox Sidebar. Using the same technique you can show the DOM Inspector in the Firefox Sidebar. That way you can get the DOM Inspector in the same window as the page you are inspecting.

UPDATE: You can simply install this add-on in the Firefox browser. It will add a new menu item Tools:DOM Inspector in sidebar .

SidebarDomInspector Menu Item 

Selecting this menu item will show the DOM Inspector in the Firefox sidebar. It also makes the sidebar resizable.

Here is the NetBeans 6.1 project to build the extension.

Here is how. Just create a bookmark like this:

DOMInspectorInSideBar Bookmark

and then invoke the bookmark. Then use the File:Inspect Window > menu item to select the window you are browsing in. You will see something like this


Unfortunately the Sidebar is not resizable. However this could be tweaked using the property overlay incantation overrding the flex attribute of the sidebar box. Also the popup dialogs to search for  nodes does not work. Once again some XUL overlay gimmickry could come handy here.

Useful? You decide.

Sunday Apr 20, 2008

Open Location in iPhone Mode in Firefox

I have been hacking Firefox. Here is a simple iPhone mode add-on. This is very basic mode. You can type an address in the address field and hit ENTER. You can use the Reload button to reload the page. You can use Go Back and Go Forward buttons to navigate the history. You can use Add Bookmark button to add a bookmark to the current page. You can use the Show Bookmarks button to show the Bookmarks window. Just lkie the iPhone - the address bar is hidden when the document loads. You can reshow the address bar by clicking on the battery indicator bar.

Any URL can be invoked in the iPhone mode from command line by using the -iphone command line argument.

> firefox -iphone URL

Use the File:OpenLocation in iPhone Mode... menu item to launch the iPhone mode.

Open Location in iPhone Mode

iPhone ModeiPhone mode collapsed address bar

Talk about recursive :)

Download the add-on.

Download the NetBeans 6.1 project.

DISCLAIMER: This add-on is experimental. So no guarantees. Use the add-on at your own risk.

Wednesday Apr 02, 2008

Mac OS Leopard: /usr/bin/open -b org.mozilla.firefox 'file:///tmp/test.html/?a=b&c=d' does not work


I just ran into a bug where by a command like this:

> /usr/bin/open -b org.mozilla.firefox 'file:///tmp/test.html/?a=b&c=d'

does not work correctly. It turns out the query string such as '?a=b&c=d' does not get passed to the Firefox as evident in the address bar. The http:// protocol based URLs work correctly.

I suspect the #reference to go to a specific anchor will also not work. I have not tried it though.

This is a bug (regression) on Mac OS Leopard (10.5). It use to work on Mac OS Tiger (10.4). I have already filed a bug with Apple for this.

BTW I have to use the /usr/bin/open command to reliably and repeatedly open a URL in Firefox (i.e. when Firefox is already running or not). That is because if I use the command such as:

> /Application/ 'file:///tmp/test.html/?a=b&c=d'

when Firefox is already running it give me an error along the lines of "There is already an instance of Firefox running. You can only run one instance of Firefox.".

I thought this information may be useful to some folks who are struggling with the same issue.


Tuesday Jan 01, 2008

Firefox add-on - YouTube Viewer

Over the holidays I have been hacking Firefox, XULRunner, JavaScript and so has been a lot of fun.

Here is a no-nosense YouTube Viewer add-on for Firefox that came out of that:

YouTube Viewer

If you want to try it, simply download this add-on, install it and launch it using Tools:YouTube Viewer... menu item. The operation is pretty simple, just type the search terms in the Search for: (Alt+f) text field and press Search (Alt+S)button. The list of matching videos will be populated in the listbox on the left. Select a video and type ENTER or double click on it. The video is loaded in the Video panel. The Description text box shows the video title and detailed description.

Watch this space for a tutorial on how I developed this module and which tools and add-ons I used to develop and  debug this add-on.

DISCLAIMER: This add-on is experimental. So no guarantees. Use the add-on at your own risk. 




« July 2016