J. Ryan Stinnett

A Convolution of Software and Electronics

Debugging Tabs with Firefox for Android

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.

Firefox for Android runtime appears

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

Firefox for Android tab list

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

Inspecting a tab in WebIDE

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.

DevTools for Firefox OS browser tabs

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.

Inspecting a tab in WebIDE

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.

Browser tab list in WebIDE

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.

WebIDE enabled in Nightly

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.

Mozilla

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.

Into the Open

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!

Materials, Maps, and Surfacing

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.

Splines, Loft, and Lathe

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:

Basic Game with Unity

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.

3D Modeling: Robot in the Ruins

Overview

For our first assignment, we had to build a robot and an environment for the it to inhabit.

Robot

The robot had to use exactly 1000 polygons. I chose to create a kind of transport robot with a cute appearance. I used an elongated egg shape, and gave it two propellers to maneuver. The robot is shown at an angle to suggest movement. The propellers were fun to construct, especially with the primitives, since you have to think of clever ways to build what want from just a few shapes. With two shapes and a few filters, I arrived at a convincing version of propeller blades.

Environment

For the environment, we had a budget of 10,000 polygons. I thought it would be fun to create a water / island environment. However, even a poor simulation of water quickly eats up a lot of polygons!

My thoughts here were that several of the robots might be used to transport various items between the islands as needed.

3D Modeling and Rendering 1

I’ve started taking classes at ACC to learn some visual design skills and generally extend my knowledge of how games and other media are built.

The first one is this 3D modeling class, and I’ll be maintaining a portfolio of my work as this class goes on. I’m excited to see what I can come up with! Undoubtedly my work won’t win too many awards, but hopefully I can pick up the principles and develop them further over time.

I think this will also give me a better understanding of the thought process that design and creative teams go through at the various places I’ve worked now and in the past.

Anyway, should be fun! :D