I am excited to announce that we’re now shipping WiFi debugging for Firefox for Android! It’s available in Firefox for Android 42 with Firefox Nightly on desktop.

The rest of this post will sound quite similar to the previous announcement for Firefox OS support.

WiFi debugging allows WebIDE to connect to Firefox for Android via your local WiFi network instead of a USB cable.

The connection experience is generally more straightforward (especially after connecting to a device the first time) than with USB and also more convenient to use since you’re no longer tied down by a cable.

Security

A large portion of this project has gone towards making the debugging connection secure, so that you can use it safely on shared network, such as an office or coffee shop.

We use TLS for encryption and authentication. The computer and device both create self-signed certificates. When you connect, a QR code is scanned to verify that the certificates can be trusted. During the connection process, you can choose to remember this information and connect immediately in the future if desired.

How to Use

You’ll need to assemble the following bits and bobs:

• Firefox 42
• Firefox for Android 42
• Barcode Scanner Android app by ZXing Team (for QR code scanning)

On your Android device:

1. Install the Barcode Scanner Android app by ZXing Team
2. Open Firefox for Android
3. Go to Developer Tools Settings on device (Settings -> Developer Tools)
4. Enable Remote Debugging via Wi-Fi

To connect from Firefox Desktop:

1. Open WebIDE in Firefox Nightly (Tools -> Web Developer -> WebIDE)
2. Click “Select Runtime” to open the runtimes panel
3. Your Firefox for Android device should show up in the “WiFi Devices” section
4. A connection prompt will appear on device, choose “Scan” or “Scan and Remember”
5. Scan the QR code displayed in WebIDE

After scanning the QR code, the QR display should disappear and the “device” icon in WebIDE will turn blue for “connected”.

You can then access all of your remote browser tabs just as you can today over USB.

Technical Aside

This process does not use ADB at all on the device, so if you find ADB inconvenient while debugging or would rather not install ADB at all, then WiFi debugging is the way to go.

By skipping ADB, we don’t have to worry about driver confusion, especially on Windows and Linux.

Supported Devices

This feature should be supported on any Firefox for Android device. So far, I’ve tested it on the LG G2.

Acknowledgments

Thanks to all who helped via advice and reviews while working on Android support, including (in semi-random order):

• Margaret Leibovic
• Karim Benhmida

And from the larger WiFi debugging effort:

• Brian Warner
• Trevor Perrin
• David Keeler
• Honza Bambas
• Patrick McManus
• Jason Duell
• Panos Astithas
• Jan Keromnes
• Alexandre Poirot
• Paul Rouget
• Paul Theriault

I am probably forgetting others as well, so I apologize if you were omitted.

What’s Next

If there are features you’d like to see added, file bugs or contact the team via various channels.

I am excited to announce that we’re now shipping WiFi debugging for Firefox OS! It’s available in Firefox OS 3.0 / master with Firefox Nightly on desktop.

WiFi debugging allows WebIDE to connect to your Firefox OS device via your local WiFi network instead of a USB cable.

The connection experience is generally more straightforward (especially after connecting to a device the first time) than with USB and also more convenient to use since you’re no longer tied down by a cable.

Security

A large portion of this project has gone towards making the debugging connection secure, so that you can use it safely on shared network, such as an office or coffee shop.

We use TLS for encryption and authentication. The computer and device both create self-signed certificates. When you connect, a QR code is scanned to verify that the certificates can be trusted. During the connection process, you can choose to remember this information and connect immediately in the future if desired.

How to Use

You’ll need to assemble the following bits and bobs:

• Firefox 39 (2015-03-27 or later)
• Firefox OS 3.0 (2015-03-27 or later)
  • Option A: Update your Flame to 3.0 / master
  • Option B: Build for your device from source

On Firefox OS, enable WiFi debugging:

1. Go to Developer Settings on device (Settings -> Developer)
2. Enable DevTools via Wi-Fi
3. Edit the device name if desired

To connect from Firefox Desktop:

1. Open WebIDE in Firefox Nightly (Tools -> Web Developer -> WebIDE)
2. Click “Select Runtime” to open the runtimes panel
3. Your Firefox OS device should show up in the “WiFi Devices” section
4. A connection prompt will appear on device, choose “Scan” or “Scan and Remember”
5. Scan the QR code displayed in WebIDE

After scanning the QR code, the QR display should disappear and the “device” icon in WebIDE will turn blue for “connected”.

You can then access all of your remote apps and browser tabs just as you can today over USB.

Technical Aside

This process does not use ADB at all on the device, so if you find ADB inconvenient while debugging or would rather not install ADB at all, then WiFi debugging is the way to go.

By skipping ADB, we don’t have to worry about driver confusion, especially on Windows and Linux.

Supported Devices

This feature should be supported on any Firefox OS device. So far, I’ve tested it on the Flame and Nexus 4.

Known Issues

The QR code scanner can be a bit frustrating at the moment, as real devices appear to capture a very low resolution picture. Bug 1145772 aims to improve this soon. You should be able to scan with the Flame by trying a few different orientations. I would suggest using “Scan and Remember”, so that scanning is only needed for the first connection.

If you find other issues while testing, please file bugs or contact me on IRC.

Acknowledgments

This was quite a complex project, and many people provided advice and reviews while working on this feature, including (in semi-random order):

• Brian Warner
• Trevor Perrin
• David Keeler
• Honza Bambas
• Patrick McManus
• Jason Duell
• Panos Astithas
• Jan Keromnes
• Alexandre Poirot
• Paul Rouget
• Paul Theriault

I am probably forgetting others as well, so I apologize if you were omitted.

What’s Next

I’d like to add this ability for Firefox for Android next. Thankfully, most of the work done here can be reused there.

If there are features you’d like to see added, file bugs or contact the team via various channels.

For quite a while, it has been possible to debug tabs on Firefox for Android devices, but there were many steps involved, including manual port forwarding from the terminal.

As I hinted a few weeks ago, WebIDE would soon support connecting to Firefox for Android via ADB Helper support, and that time is now!

How to Use

You’ll need to assemble the following bits and bobs:

• Firefox 36 (2014-10-25 or later)
• ADB Helper 0.7.0 or later
• Firefox for Android 35 or later

Opening WebIDE for the first time should install ADB Helper if you don’t already have it, but double-check it is the right version in the add-on manager.

Inside WebIDE, you’ll see an entry for Firefox for Android in the Runtime menu.

Once you select the runtime, tabs from Firefox for Android will be available in the (now poorly labelled) apps menu on the left.

Choosing a tab will open up the DevTools toolbox for that tab. You can also toggle the toolbox via the “Pause” icon in the top toolbar.

If you would like to debug Firefox for Android’s system-level / chrome code, instead of a specific tab, you can do that with the “Main Process” option.

What’s Next

We have even more connection UX improvements on the way, so I hope to have more to share soon!

If there are features you’d like to see added, file bugs or contact the team via various channels.

We’ve had various tools for inspecting apps on remote devices for some time now, but for a long time we’ve not had the same support for remote browser tabs.

To remedy this, WebIDE now supports inspecting browser tabs running on Firefox OS devices.

A few weeks back, WebIDE gained support for inspecting tabs on the remote device, but many of the likely suspects to connect to weren’t quite ready for various reasons.

We’ve just landed the necessary server-side bits for Firefox OS, so you should be able try this out by updating your device to the next nightly build after 2014-10-14.

How to Use

After connecting to your device in WebIDE, any open browser tabs will appear at the bottom of WebIDE’s project list.

The toolbox should open automatically after choosing a tab. You can also toggle the toolbox via the “Pause” icon in the top toolbar.

What’s Next

We’re planning to make this work for Firefox for Android as well. Much of that work is already done, so I am hopeful that it will be available soon.

If there are features you’d like to see added, file bugs or contact the team via various channels.

I am excited to announce that WebIDE is now enabled by default in Nightly (Firefox 34)! Everyone on the App Tools team has been working hard to polish this new tool that we originally announced back in June.

Features

While the previous App Manager tool was great, that tool’s UX held us back when trying support more complex workflows. With the redesign into WebIDE, we’ve already been able to add:

• Project Editing
  • Great for getting started without worrying about an external editor
• Project Templates
  • Easy to focus on content from the start by using a template
• Improved DevTools Toolbox integration
  • Many UX issues arose from the non-standard way that App Manager used the DevTools
• Monitor
  • Live memory graphs help diagnose performance issues

Transition

All projects you may have created previously in the App Manager are also available in WebIDE.

While the App Manager is now hidden, it’s accessible for now at about:app-manager. We do intend to remove it entirely in the future, so it’s best to start using WebIDE today. If you find any issues, please file bugs!

What’s Next

Looking ahead, we have many more exciting things planned for WebIDE, such as:

• Command line integration
• Improved support for app frameworks like Cordova
• Validation that matches the Firefox Marketplace

If there are features you’d like to see added, file bugs or contact the team via various channels.

In my last post (back in February…), I mentioned I was spending a lot of time on the side working on the developer tools in web browsers, particularly Firefox. I find that Mozilla’s values, which truly put the user first, are something I agree with wholeheartedly. Mozilla is in a unique position in this way, since all the other browsers are made by companies that, at the end of day, are looking to make money to appease their shareholders. Mozilla’s values are even more important to emphasize these days with the various forms of governmental spying that has been revealed in the last few months.

With that context, hopefully you can get an idea of how excited I am to say that this past Monday was my first day as a Mozilla employee, working on the Firefox Developer Tools team!

I am currently in Paris ramping up with the team for two weeks. After the first week, I am humbled to be able to say I am a part of this organization. There are so many people smarter than me here, and I am thrilled to have the opportunity to work with them. I know we will accomplish great things together.

There is so much potential in the web developer tools space. Every developer has their own workflow, favorite set of frameworks and tools, and new platform technologies and techniques are coming out at a rapid pace. While part of my job is certainly to help make all of this more efficient, there is a lot of room to shake things up by looking towards the future of web development and the tools that people don’t even know they need.

It’s going to be a blast! Hopefully I’ll have to some fun things to share.

I’m excited to start to focusing what time I do have on the side towards open source projects. I’m always on the lookout for good projects to help out with, but these days I always seem to come back to web browsers.

In particular, I really enjoy working on tools that improve the lives of other every day. In that vein, I’d like to focus on improvements to the developer tools in browsers today, though they are vastly better today than even a few years ago.

The main open source options as far as web browsers go are Chrome / Chromium and the various Mozilla projects, like Firefox. Near the end of 2011, I started ramping up on the Chromium project, mainly because Chrome is the main browser I used then.

However, now that Opera has decided to switch to Chromium for future versions of their browser, I’ve been reminded that Mozilla is the only party in the web development game that truly seems to be doing their best to fight for the user. The main reason I stopped using Firefox was due to Chrome’s impressive developer tools, so I’d like to help improve Firefox tools to bring them up to the level we’ve now come to expect and beyond.

Likely I’ll dabble in both Chromium and Firefox, but no matter what it should be an exciting time ahead!

Overview

For this assignment, we learned how to apply materials to the objects we’ve been creating. There are many, many different ways to construct a material that you apply to 3D object. They can be procedurally generated, they can pull from textures (or maps) you create, and you can manually tune many parameters as well.

Maps are a great way to control the appearance of an object because you can make something resemble a real object quite quickly by just taking a picture and doing a bit of editing.

Environment

For the environment, I used a variety of wood textures as maps to give the huts a rustic feel. The door particularly look much more believable now. Also, the islands look much less like strange brains now there’s a grassy appearance applied, instead of just the flat green.

Robot

For the robot, I gave him a weathered, rusty metal appearance that seems to tie in well with his supportive / charming look. Old, but still functioning just fine.

The eyes and mouth have a bit of an ethereal / floating feel to them thanks to the transparency.

It was fun to experiment with the various parameters and material types that can give a metallic appearance.

Overview

For this assignment, we learned a few new techniques, namely how to make use of 2D shapes to give more detail to our models. Beyond simple shapes like circles and squares is the very flexible spline, which gives you a lot of control over how a line is drawn, while still be purely analytical.

Shapes and Splines

For part of the homework, we added some shapes and splines to our existing models. Below you can see the island huts from before, but with a few additional decorations, such as some scary wiring / branches, as well as door knobs and roof ornaments.

Lathe and Loft

We also learned how to take 2D paths and morph them into 3D shapes in several interesting ways. You can use lathe to revolve the path around an axis, similar to a torus.

I used this technique to create a pot, an inflatable pool, and a spyglass.

We also learned about loft, which will take a shape and replicate it in 3D across whatever path you define. This is another very powerful feature, with many ways you can customize and tune its behavior.

I made several tracks and other shapes using this process:

Overview

For this week’s assignment, we jumped out of the normal curriculum and went straight to using a game engine with our models from last time. We added a few common elements, like terrain and fog.

Unity

Unity is a lot of fun to work with! It’s quite easy to assemble something pretty cool, and yet it is also has a lot of depth to allow you to refine details. I can definitely see myself working with this down the road, especially given the wide multi-platform support.

Game Level

For the level itself, I modified the environment to remove the static water I made before and surround the island with mountainous terrain. Then I added the animated water to get back to the original environment idea.

From there, I added some basic lighting and fog to match the skybox I chose. It was actually a bit tricky to map a collider to the island huts. For now I used spheres, but perhaps I’ll need to flatten those into a single mesh for Unity to represent them accurately.

There’s definitely room for improvement along many aspects, but it’s really exciting to see something playable come together so quickly.