December 9, 2015 | Uncategorized | No Comments
Firefox OS is a smartphone and table Operating System developed by Mozilla. It is developed under the same brand of Mozilla’s famous web browser project, Mozilla Firefox. Mozilla has a big and clear vision. Firefox OS is developed to adapt the dynamic of the web. It anticipates users needs, adapts to every situation, and instantly delivers information user want.
The interesting part is, Mozilla has develop an add-on for developing and simulating Firefox OS on top of Firefox browser.
This article will discuss about how can we prepare a portable development environment and simulating Firefox OS.
About Firefox OS Simulator
Like implied by the name, Firefox OS simulator is a simulator for Firefox OS. As per September 29th 2013, the current Firefox OS Simulator is still at an early stage of development. Thus, it isn’t yet as reliable and complete. Mozilla also encourage to report bug to GitHub and participate to the development process.
The big concept Firefox OS has is an add-on for Firefox browser. Using this add-on we can test and debug Firefox OS app on the desktop. It is like Android Emulator, but lightweight and easy to use. But, as told above, don’t expect too much for now. But still, it’s quite promising 😉
So, what’s bundled to this add-on?
- the Simulator: Including Firefox OS desktop client. This is the higher layers of Firefox OS that runs on desktop. The simulator also includes some additional emulation features that aren’t in the standard Firefox OS desktop builds.
- the Dashboard: a tool hosted by the Firefox browser that enables you to start and stop the Simulator and to install, uninstall, and debug apps running in it. The Dashboard also helps you push apps to a real device, and checks app manifests for common problems.
Installing and Running the Simulator
Installing the simulator is really easy. As easy as installing any other Firefox add-on.
- Using Firefox, go to the Simulator’s page.
- Click “Add to Firefox”
- Once the add-on has been downloaded, you will be prompted to install it. Click “Install Now”.
The add-on is quite big in size, thus Firefox may freeze for several seconds while installing it. A dialog titled “Warning: Unresponsive script” might appear. If it does, just click “Continue” to wait for installation to finish.
The Dashboard opens automatically when you install the Simulator. You can reopen it at any time by going to the “Firefox” menu (or “Tools”), then “Web Developer”, then “Firefox OS Simulator”.
And here is the Dashboard for you:
Here, on the left panel is a button to activate the simulator.
The right panel will list all application you have developed and can be run on top of Firefox OS (simulator).
To add a hosted app, enter a URL in the textbox where it says “URL for page or manifest.webapp”, then click “Add URL”. If the URL points to a manifest, then that manifest will be used. If it doesn’t, the Dashboard will generate a manifest for the URL: so you can add any website as an app just by entering its URL.
When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on Manifest Validation for details on what tests are run.
Unless manifest validation reveals that your app has errors, the Dashboard will then automatically run your app in the Simulator.
On each entry, you will see information about the app:
- name, taken from the manifest
- type, which will be one of “Packaged”, “Hosted”, or “Generated”
- link to manifest file
- result of manifest validation
You also got four commands:
- “Refresh”: use this to update and reload the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app: you will need to refresh the app to apply the changes.
- “Connect”: use this to connect developer tools to the selected app. The Dashboard will start the Simulator and app if they aren’t already running.
- “Remove” (“X”): use this to remove the app from the Simulator and the Dashboard. You can undo this action as long as the Dashboard tab is open.
- “Receipt”: use this to test receipt verification for paid apps. After you select a type of receipt to test, the app will be reinstalled with a test receipt of the given type.
The Simulator Device
Here is what the simulator looks like. The simulator device will be opened on new Firefox window.
The simulator can be started in two different ways:
- adding an app or click the “Refresh” or “Connect” button next to your app’s entry, the Dashboard will automatically run your app in the Simulator
- clicking the button labeled “Stopped” on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you’ll need to navigate to your app
The simulator appear as window 320×480 pixels with a tool bar at the bottom and a menubar at the top that contains some extra features:
You can left-click on Firefox OS area to simulate touch events. To simulate drag, click and hold the button to your preferred area. Here is the example. The left is the default launcher and drag to right will bring you to menu.
Now we have seen toolbar. Let’s play around with it.
There are three buttons on toolbar. From left to right, these are: Home button, Screen Rotation button, and the Geolocation button.
- the Home button takes you to the Home screen (or to the task list if you keep it pressed for a couple of seconds)
- the Screen Rotation button switches the device between portrait and landscape orientation. This will generate the orientationchange event.
- the Geolocation button triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates: this will be made available to your app via the Geolocation API.
To attach developer tools to the Simulator, click the “Connect” button for an app. The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:
The app can log to this console using the global console object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors.
You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app.
Thanks to the new Network Monitor, you can analyze the status, headers, content and timing of all the network requests initiated by the app through a friendly interface.development, firefox