Development Firefox/XUL

Firefox plugins and XUL

Writing XUL is a giant pain in the ass and the documentation is lacking any examples.
Here is a good resource

Excerpt from that page

There is a list of some resources here … ng-started

This tutorial is quite a helpful introduction … Extensions

I generally just use MDC (Mozilla Developer Center) for reference (just keep an eye on what version of Firefox/Gecko the documentation applies to)

The XUL periodic table is a helpful resource for basic XUL element layout

W3Schools is a useful basic reference for DOM and Javascript

There is a list of the Mozilla interfaces here

The DOM inspector is a “must have”

Anyway that’s just a few that you might find useful


Development Web

VirtualDocumentRoot for local development

If you want to develop locally on your machine, its a pain to have to write a virtualhost container and restart apache every time. There is a simple way to do this by using VirtualDocumentRoot directive.

1) use localhost as the domain and create subdomains in /etc/hosts ie devsite.localhost

2) Put this into your httpd-vhosts.conf file

VirtualDocumentRoot /my_home_dir/Sites/%0

AllowOverride All

Order allow,deny
Allow from all
All your development sites need to be in /my_home_dir/Sites and the directories must have the same name as the entry in /etc/hosts ( ie /my_home_dir/Sites/devsite.localhost/ )


Xdebug and Phpstorm

Phpstorm is an IDE made by Intellij. I’ve never really used an IDE for php before. I have tried Aptana and Eclipse but didn’t really like them. My coworker Alex really loves Intellij so I thought I would give it a try. One of the reasons I’m giving in is due to having to work on Magento.
Magento is so large that without an IDE, it would be difficult to navigate. Instead of grepping, I would like to use something that can find the definition/declaration of functions and trace through the stack.

First, my impressions of Phpstorm: I like it! It doesn’t have as many of the mystery buttons of Aptana, and pretty much everything is configurable. I was able to find an editor theme that I liked ( ).

My next task was to get Magento working on my local machine ( Mac OSX Lion). This is the first hiccup as mcrypt is not compiled. There are a few ways to fix this but coupled with the fact that xdebug is also not compiled for OSX, I’ll save you the time and tell you that MAMP is the easiest option.

By default, MAMP runs apache on port 8888 and mysql on 8887, you can set the preferences in MAMP to change them back to port 80 for apache and 6667 for mysql provided that you are not running web sharing or mysql server on the mac. If you are, simply disable in your System Preferences.

The next thing to do is to turn on vhosts config for MAMP. Edit /Applications/MAMP/conf/apache/httpd.conf and uncomment
# Virtual hosts
Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

You can set local vhosts for development and modify /etc/hosts so that your mac responds to a domain for development. I’ll write about how to make all this easy to deploy using VirtualDocumentRoot later.

The last step is to turn on xdebug. Edit your php.ini ( ie /Applications/MAMP/bin/php/php5.3.6/conf/php.ini ) and add the following lines:
*** make sure the path to your zend_extension matches what you installed from MAMP ***
xdebug.default_enable = On
xdebug.show_exception_trace = On
xdebug.show_local_vars = 1
xdebug.var_display_max_depth = 6
xdebug.remote_enable = 1

xdebug.dump_once = On
xdebug.dump_globals = On
xdebug.dump_undefined = On
xdebug.dump.REQUEST = *

To debug from Intellij you can either set up the PHP processor ( CLI ) to your MAMP php binary, or you can have Phpstorm listen to port 9000 for xdebug messages. Xdebug does this by
1) set a cookie in your browser so that when module intercepts the request and sees the cookie, it will:
2) stop at the break points in debugger window.

Use the bookmarklet generator link on this page.

Navigate to your local development site, turn on the listening in Phpstorm for this project and set the break points in Phpstorm. Click on the bookmarket to set the cookie for Xdebug. Reload the page and watch Phpstorm debug window.