Mozilla

Articles by Chris Heilmann

Sort by:

View:

  1. Firefox OS Security: Part 1 – The Web Security Model

    When presenting Firefox OS to people, security is a big topic. Can an operating system built on web technologies be secure? What has Mozilla built in to avoid drive-by downloads and malware? In this two part video series Christian Heilmann (@codepo8), principal evangelist of Mozilla, talks to Michael Coates (@_mwc), chair of @OWASP Board about all things security in Firefox OS.

    Firefox OS was built on top of the technologies that power the Web. Following Mozilla’s security practices and knowledge from over 10 years of securing Firefox, Firefox OS is engineered as a multi-tiered system that protects users while delivering the power of the mobile web. The design ensures users are in control of their data and developers have APIs and technologies at their disposal to unlock the power of the Web.

    Watch the following video where we talk more about the security design and controls present in Firefox OS. In this, the first of two videos on Firefox OS security, we’ll cover items such as the multi-tiered architecture, the permission model, run time decision making, protection of users data and the update model. You can watch the video on YouTube.

    Additional links for more information:

  2. Firefox OS Development: Web Components and Mozilla Brick

    In this edition of “Firefox OS: The platform HTML5 deserves” (the previous six videos are published here), Mozilla’s Principal Evangelist Chris Heilmann (@codepo8) grilled Mozilla’s “Senior HTML5 Engineer Angle Bracket Coordinator” Matthew Claypotch (@potch) about the exciting new possibilities of Web Components for Web App developers and how Mozilla’s Brick library, a collection of custom elements to build applications with, can help with the transition. You can watch the interview on YouTube.

    The Why of Web components

    There is a problem with the Web as a platform for applications: HTML, the language that makes it easy to mark up documents and give them meaning doesn’t have enough elements to build applications. There are quite a few new elements in the HTML5 spec, but their support is sketchy across browsers and there are still a lot of widgets missing that other platforms like Flex or iOS give developers out-of-the-box. As a result, developers build their own “widgets” like menu bars, slider controls and calendars using non-semantic HTML (mostly DIV elements) and make them interactive using JavaScript and theme-able using CSS.

    This is a great workaround but the issue is that we add on top of the functionality of browsers instead of extending the way they already function. In other words, a browser needs to display HTML and does a great job doing that at least 60 frames per second. We then add our own widget functionality on top of that and animate and change the display without notifying the browser. We constantly juggle the performance of the browser and our own code on top of it. This leads to laggy interfaces, battery drain and flickering.

    To work around that problem a few companies and standards body members are working on the Web Components specification which allows developers to extend the browser’s understanding of markup with own elements. Instead of writing a slider control and make it work after the browser already displayed the document, you define a slider element and become part of the normal display flow. This means our widgets get more responsive, don’t work against the browser’s rendering flow and all in all perform better. Especially on low spec mobile devices this is a massive win. The whole thing already happens: if you for example add a video element to the document you see a video controller with a timed slider bar, a play button and volume controls. All of these are HTML, CSS and JavaScript and you can even see them in the debugging tools:

    Anatomy of a video element

    Firefox OS, being targeted at low end devices can benefit a lot from widgets that are part of the rendering flow, which is why Mozilla created Mozilla Brick, a collection of custom elements to build applications with. Earlier we introduced the concept using a library called XTags, which powers Brick. Using Brick, it is very simple to create for example a deck based application layout using the following markup:

    <x-deck selected-index="0">
      <x-card>
        0<span>I'm the first card!</span>
      </x-card>
      <x-card>
        1
        <span>
          These cards can contain any markup!<br>
          <img src="../../site/img/grounds_keeping_it_real_s3.gif">
          <img src="../../site/img/grounds_keeping_it_real_s1.gif">
          <img src="../../site/img/grounds_keeping_it_real_s2.gif">
        </span>
      </x-card>
      <x-card>
        2 <img src="../../site/img/thumbs_up.gif">
      </x-card>
    </x-deck>

    The resulting app consists of three decks that can be animated into another without having to do anything but call a deck.shuffleNext(); function.

    Web Components are a huge topic right now and many libraries and frameworks appear each week. We hope that by using Brick we can enable developers to build very responsive apps for Firefox OS quickly and cleanly and leave the pain of making your app perform really well up to the OS.

  3. Web Activities – Firefox OS: the platform HTML5 deserves

    In the sixth video of our “Firefox OS – the platform HTML5 deserves” series (the previous five videos are published here) we talk about how Web Activities allow you as a developer to access parts of the hardware without having to package your app.

    Firefox OS - be the future

    Check out the video featuring Chris Heilmann (@codepo8) from Mozilla and Daniel Appelquist (@torgo) from Telefónica Digital/ W3C talking about the why and how of Web Activities. You can watch the video here.

    Web Activities are a way to extend the functionality of HTML5 apps without having to access the hardware on behalf of the user. In other words, you don’t need to ask the user to access the camera or the phone, but instead your app asks for an image or initiate a call and the user then picks the app most appropriate for the task. In the case of a photo the user might pick it from the gallery, the wallpapers or shoot a new photo with the camera app. You then get the photo back as a file blob. The code is incredibly simple:

    var pick = new MozActivity({
       name: "pick",
       data: {
           type: ["image/png", "image/jpg", "image/jpeg"]}
    });

    You invoke the “pick” activity and you ask for an image by listing all the MIME types you require. This small script will cause a Firefox OS device or an Android device running Firefox to show the user the following dialog:

    pick dialog

    All activities have a success and failure handler. In this case you could create a new image when the user successfully picked a source image or show an alert when the user didn’t allow you to take a picture or it was the wrong format:

    pick.onsuccess = function () {// Create image and set the returned blob as the src
        var img = document.createElement("img");
        img.src = window.URL.createObjectURL(this.result.blob);
     
        // Present that image in your app
        var imagePresenter = document.querySelector("#image-presenter");
        imagePresenter.appendChild(img);
    };
     
    pick.onerror = function () {// If an error occurred or the user canceled the activity
        alert("Can't view the image!");
    };

    Other Web Activities work in a similar fashion, for example to ask the user to call a number you write the following:

    var call = new MozActivity({
        name: "dial",
        data: {
            number: "+46777888999"
        }
    });

    This opens the application the user has defined as the one to make phone calls, and asks to call the number. Once the user hangs up, you get a success handler object back.

    Web Activities have a few benefits:

    • They allow secure access to hardware – instead of asking the user to allow yet another app to use the camera you send the user to the application they already trust to do this.
    • They allow your app to be part of the user’s device experience – instead of building a camera interface you send the user to the one they already are familiar with to take photos
    • You allow apps to become an ecosystem on the device – instead of having each app do the same things, you allow them to specialise on doing one thing and one thing well
    • You keep the user in control – they can provide you with the photo from anywhere they want and they can store results from your app’s functionality where they want rather than in yet another database on their device

    We’ve covered the subject here before in detail in the Introducing Web Activities post.

    The simplest way to get started with Web Activities on a Firefox OS device (or simulator) or an Android phone running Firefox is to download the Firefox OS Boilerplate App and play with the activities and the code:

    Firefox OS Boilerplate App

    Web Activities are a simple way to enable the apps hosted on your servers to reach further into the hardware without acting on behalf of the user. Instead, you let users decide how to get the information you want and concentrate on what to do with the data once you have it instead.

  4. WebAPIs – Firefox OS for developers: the platform HTML5 deserves

    In the fifth video of our “Firefox OS – the platform HTML5 deserves” series (part one, part two, part three and part four have already been published) we talk about how Firefox OS extends the capabilities of the Web by adding new APIs, called WebAPIs to the existing stack of technologies.

    Firefox OS - be the future

    Check out the video featuring Chris Heilmann (@codepo8) from Mozilla and Daniel Appelquist (@torgo) from Telefónica Digital/ W3C talking about the need for device APIs on the Web, how some of the existing APIs can be used and how the work on Firefox OS benefits the Web as a whole. You can watch the video here.

    The WebAPI work is important as it allows apps built with Web technologies to access the hardware. For the work on Firefox OS (which is fully built in HTML5 itself), we very much needed to know the status of the phone, how much battery is left, what the connectivity is like, the screen orientation and many more features. Thus we defined access to the various parts of the hardware as JavaScript APIs and sent these as proposals to the standard bodies.

    If you want to learn more about these new APIs the canonical place to go to is the WebAPI Wiki Page where you can find an up-to-date list of all the APIs, their implementation status in the different Firefox platforms, the standards bodies involved and where to file bugs for them. You can also click through to bugzilla to see demos of the APIs in action. We’ve blogged here about WebAPIs in detail before: Using WebAPIs to make the web layer more capable and you can see a lot of information and demos in that post.

    In general, all the APIs follow a simple model: you ask for access and you define a success and failure handler. You also get methods to ask for various properties in detail and some have Boolean values available to you. This makes it very easy to test for the support of a certain API before trying to access it.

    Not all APIs can be available on the open Web as we can not trust every server out there. That is why the APIs come in three flavours: regular, privileged and certified. Regular APIs can be used in any app, regardless of its location (you can self-host these apps). Examples for that are the geolocation or the battery API. Privileged and Certified APIs both need your app to have a content security policy and be hosted on Mozilla servers. That way we can give you access to the hardware but minimise the potential of abuse and malware at the same time.

    Take a look at the exhaustive list of blog posts here dealing with WebAPIs for more reading and we’ll be back with the next video covering WebActivities soon.

  5. New Features of Firefox Developer Tools: Episode 25

    Firefox 25 was just uplifted to the Aurora release channel which means we are back to report about new features in Firefox Developer Tools.

    Here’s a summary of some of the most exciting new features, and to get the whole picture you can check the complete list of resolved bugzilla tickets.

    Black box libraries in the Debugger

    In modern web development, we often rely on libraries like JQuery, Ember, or Angular, and 99% of the time we can safely assume that they “just work”. We don’t care about the internal implementation of these libraries: we treat them like a black box. However, a library’s abstraction leaks during debugging sessions when you are forced to step through its stack frames in order to reach your own code. To alleviate this problem, we introduced black boxing: a feature where you can tell the debugger to ignore the details of selected sources.

    To black box a source, you can either mark them one at a time by disabling the little eyeball next to it in the sources list:
    eyeball

    Or you can black box many sources at once by bringing up the developer toolbar with Shift+F2 and using the dbg blackbox command:

    dbg blackbox --glob *-min.js[source]

    When a source is black boxed:

    • Any breakpoints it may have are disabled.
    • When “pause on exceptions” is enabled, the debugger won’t pause when an exception is thrown in the black boxed source; instead it will wait until (and if) the stack unwinds to a frame in a source that isn’t black boxed.
    • The debugger will skip through black boxed sources when stepping.

    To see this in action and learn more about the details, check out the black boxing screencast on YouTube.

    Replay and edit requests in the Network Monitor

    You can now debug a network request by modifying headers before resending it. Right-click on an existing request and select the “resend” context menu item:

    resend request

    Now you can tweak the HTTP method, URL, headers, and request body before sending the request off again:

    tweak

    CSS Autocompletion in the inspector

    Writing CSS in the inspector is now much easier as we enabled autocompletion of CSS properties and values.

    autocomplete

    What’s more, it even works on inline style attributes

    inline

    Aside: this feature was implemented by contributors Girish Sharma and Mina Almasry. If you want to take your tools into your own hands too, check out our wiki page on how to get involved with developer tools.

    Execute JS in the current paused frame

    One request we’ve heard repeatedly is the ability to execute JS from the webconsole in the scope of the current paused frame in the debugger rather than the global scope. This is now possible. Using the webconsole to execute JS in the current frame can make it much easier to debug your apps.

    Edit: The webconsole has actually been executing in the current frame since Firefox 23, in Firefox 25 the scratchpad will execute in the current frame as well.

    Import and export profiled data in the Profiler

    Hacking on a shared project and think you found a performance regression in some bit of code owned by one of your friends? Don’t just file a github issue with steps to reproduce the slowness, export and attach a profile of the code that shows exactly how much slowness there is, and where it occurs. Your friend will thank you when he or she is trying to reproduce and debug the regression. Click the “import” button next to the start profiling button to load a profile from disk, and hit “save” on an existing profile to export it.

    profileimport

    When can I use these features?

    All of these features and more are available in the Aurora release channel. In another 12 weeks, these features will roll over into Firefox stable.

    Have some feedback about devtools? Ping @FirefoxDevTools on Twitter, or swing by #devtools on irc.mozilla.org.

  6. Firefox Marketplace and alternatives – Firefox OS for developers: the platform HTML5 deserves

    In the fourth video of our “Firefox OS – the platform HTML5 deserves” series (part one, part two and part three have already been published) we talk about how to submit apps to the Firefox Marketplace, and explain alternative ways to distribute your apps.

    Firefox OS - be the future

    Here are Mozilla’s principal developer evangelist Chris Heilmann (@codepo8) and Desigan Chinniah (@cyberdees) of the Firefox OS business development team showcasing how easy it is to get your app published on Firefox OS. You can watch the video on YouTube.

    Firefox OS – like any other mobile platform – has a marketplace that allows you to find apps by name or category.

    marketplace

    As a developer, to submit your app to the marketplace all you have to do to is to create a manifest file and host it on your server (make sure to give it the correct MIME type “application/x-web-app-manifest+json”). In the manifest you define name of your app, provide icons and ask for permission to access web activities and other functionality. You can validate your manifest online before going further to avoid erroneous submissions.

    Once you have your manifest in place, you can submit your app to the marketplace. There you provide screenshots or videos and a longer description of your app.

    If the app is hosted on your server, you get all the HTML5 functionality you expect to get. You don’t get access to the camera or the contact book though. To get this, you need to package your app and host it on the marketplace. You can get more information on the different levels of app privileges on the Wiki.

    As your apps are HTML5 apps you can also install them directly from the web without having to go through the marketplace. This also means that we don’t break the link-ability of the Web – you can send someone a link that will trigger the app install on a device that allows for the Open WebApps standards proposal (Firefox OS or Android with Firefox installed). This proposal is part of the WebAPI proposals and allows you to create a “install this app” button with a few lines of code:

    if (navigator.mozApps) {
      function install() {
        var installapp = navigator.mozApps.install(manifestURL);
        installapp.onsuccess = function(data) {
          // App is installed
        };
        installapp.onerror = function() {          
          // Something went wrong,
          // information is in: installapp.error.name         
        };         	
      }
      var button = document.createElement('button');
      button.innerHTML = 'Install this app';
      button.addEventListener('click', install, false);
      document.body.appendChild('button');
    }

    This allows you to re-use all the effort you put into promoting your existing web presence to become the advertisement for your app.

  7. Getting started with apps – Firefox OS for developers: the platform HTML5 deserves

    In the third instance of our “Firefox OS – the platform HTML5 deserves” video series (part one and part two have already been published here) we talk about tools available for building apps for Firefox OS.

    Firefox OS - be the future

    Check the short video featuring Chris Heilmann (@codepo8) from Mozilla and Daniel Appelquist (@torgo) from Telefónica Digital/ W3C talking about starting your first HTML5 app. You can watch the video here.

    First things first: you don’t build apps for Firefox OS – you build HTML5 apps for the Web. Firefox OS enables you as a developer to access the hardware of the phone by means of Web APIs – JavaScript APIs that are proposals to the standards bodies to give secure and simple access.

    This means first and foremost that for web developers, nothing changes. There is no SDK for the web you need to download and install. You can use the editor and tool chain you are familiar with. This could be as simple as VI on the command line, or Eclipse as you are working with other languages than the web ones. Firefox OS doesn’t demand any fixed environment, much like the Web doesn’t. That said, there are efforts to create HTML5 tools out there and Mozilla is keeping a close eye on these efforts to see where and if partnering makes sense.

    To get you started with building a Firefox OS app, you simply start with an HTML5 application in your browser. Whilst the first wave of Firefox OS devices have a resolution of 320 x 480 pixels, you should not fix your app to that size. Embracing the ubiquitous nature of the web, it seems prudent to use a responsive design approach. We’ve collected a lot of information on how to design a good HTML5 app on the Firefox OS developer hub.

    One great feature of the Firefox Developer Tools is the responsive view mode. You can turn this one on by opening the developer tools and clicking the responsive mode icon. This will result in the current page becoming re-sizable in the browser without losing the developer tools or having to resize the window: the responsive mode in the Firefox developer tools allows you to resize your app without resizing the browser

    Firefox is not the only browser with great developer tools built in. Chrome, for example allows you to simulate touch events when you are not on a touch device. To enable this, go to the developer tools settings, click “Overrides” and check the “Enable touch events” checkbox. For some great tips on when to use touch and when to use click, check out this video by Peter-Paul Koch (@ppk).

    If you want to test Firefox OS itself or how your app performs in it – including the install process – you can download the Firefox OS simulator, a no-restart-required add-on for Firefox.

    Once installed, you get a dashboard that allows you to manage your applications on your computer and start or stop the emulator:firefox emulator dashboard

    When you start the simulator, you get a clean instance of Firefox OS running on your computer in a window of the right dimensions. You
    can try out the OS, install your apps and see what the experience is like. simulator

    More detailed testing of the performance of your apps requires a Firefox OS device. If you have one of them, you can connect the phone via USB and send your app directly from the simulator to the phone.

    device connected

    The tooling space of HTML5 applications is one of the most discussed markets on the Web right now. We are confident that in the nearer future a lot of new, amazing tools will become available to make HTML5 app development easy and give developers the insights they need when they develop. For now, using the browsers’ developer tools and the Firefox OS sSimulator will get you 90% on the way.

  8. App discovery – Firefox OS for developers: the platform HTML5 deserves

    In the previous edition of this video series we introduced FirefoxOS and what it means for the open web and HTML5. We explained that apps for FirefoxOS are HTML5 apps, and could be as simple as a mobile-optimised web site with a manifest file. be-the-future

    Now we’re back explaining how Firefox OS is different from other platforms when it comes to app discovery. Here are Mozilla’s principal developer evangelist Chris Heilmann @codepo8 and Desigan Chinniah @cyberdees of the Firefox OS business development team showcasing how easy it is to get your app found on Firefox OS. You can watch the video on YouTube.

    The main difference of app discovery in Firefox OS is that you are not limited to a listing in a closed app store. Being a pure web platform, you can publish your apps either by adding them to the marketplace, but also by adding a simple “install from web” button to your already existing web sites. The code is as simple as adding an event handler to a button that points to your application’s manifest file:

    var button = document.querySelector('#install');
    button.addEventListener('click', function(ev) {
      var installapp = navigator.mozApps.install(manifestURL);  
      installapp.onsuccess = function(data) {
        // App is installed
      };
      installapp.onerror = function() {
        // App wasn't installed, info is in 
        // installapp.error.name  
      };
    }, false);

    That way you can re-use the work you put into search engine optimisation over the last years and make what you do on the web already advertise for your app.

    For end users, the main difference in Firefox OS is that apps can be found in context and locale. The flow for an end user in a closed app environment is the following:

    • Go to the marketplace (log in if you aren’t already)
    • Pick a promoted app or drill down into a category or search apps by name
    • Pick the app, go through the install process, give it the permissions it wants and start the app
    • Use it or uninstall it

    In any case app discovery is very targeted to the name of the app or dependent on the promotion of the app in the store. Firefox OS works around these problems and instead allows users to find relevant apps with a more intelligent search functionality that also understands locales.

    In the case of Firefox OS users can search for a topic, like the name of a band or a movie and find applications that are relevant to that search. For example if you look for a band name, you get Soundcloud for music, Wikipedia for information, Ticketmaster to get tickets for their next concert and many other, relevant apps. This is in the US, in other countries you’d get apps that are relevant there.

    Activating any of the icons in the search results then opens this app with the search term you entered, instead of just opening the app and asking you to re-enter your search term. The apps that are loaded are the mobile optimised HTML5 site of that provider, which means they load fast and don’t need to install – it is a real “try before you buy”.

    If the user likes the app, they can long-tap and install it, which means you get all the extra functionality Firefox OS offers HTML5 solutions.

    In essence, with Firefox OS, we made app discovery as easy as browsing the web, and we give you a very good reason to brush up the mobile optimised web sites you already have on the web.

    We hope you enjoy this and that it answers a few of the questions you had about Firefox OS. Watch this space for more videos in this series.

  9. Introducing… our new evangelists

    It is with great pride that we can announce three new faces in our midst, three people Mozilla just managed to hire to do Firefox OS developer outreach. Over the next few months you will hear and read a lot from these, that’s why we thought we start by introducing them with some short interviews.

    Jason Weathersby

    Jason Weathersby The first of the new bunch to sign up is Jason Weathersby, based in Inman, South Carolina in the United States. You can reach Jason on Twitter as @JasonWeathersby. When asked for a one liner about what he is looking forward to the most in this new role he stated “I am looking forward to helping developers create some fantastic Firefox OS apps.” and one of his big hobbies is playing the guitar. You can see what Jason had to say in his introduction interview on YouTube.

    Angelina Fabbro

    Angelina Fabbro Angelina Fabbro, based in Vancouver, Canada also got on board despite being pestered and climbed on by her cat during the video interview. You can contact Angelina on Twitter as @angelinamagnum. In her own words, she is “looking forward to making Firefox OS a solid product for the end user by encouraging best practices amongst developers. Pretty stoked to play with the newer APIs as I like trying new things.”. When asked for hobbies, she replied that she is taking singing lessons and plays “Magic: The Gathering”. Not at the same time though. You can see what Angelina had to say about herself here.

    Frédéric Harper

    Frédéric Harper Adding the final “je ne sais quoi” into the mix we have Frédéric Harper from Montréal (Québec, Canada). You can catch him on Twitter as @fharper in French or English. He is all about “Helping the Mozilla mission by promoting the openness of the Web, sharing my passion of Web standards, and helping people to be successful with Firefox OS.” and – in his own words – is a mad Geek t-shirt collector, likes gnomes and unicorns. You can see how he dealt with my questions here.

    Get prepared to hear a lot from these around here and on the interwebs from now on and join us in welcoming them to Mozilla and to the world of open web technology evangelism.

  10. Firefox OS for developers – the platform HTML5 deserves

    Over the next few weeks we will publish a series of short videos here that explain what Firefox OS means for developers and how you can be part of the revolution it brings to the world.

    be-the-future

    In various conversations we’ve repeatedly heard from developers that they view Firefox OS as simply a third player in the mobile space next to Android and iOS. This is not exactly what we are trying to achieve. Firefox OS is unique in its approach as it doesn’t target the high-end markets already saturated by other platforms. Instead its goal is to replace feature phones in markets that have no access to high-end smartphones or aren’t even considered in closed application mechanisms like marketplaces. Furthermore we wanted to create the first truly open and web-standards based ecosystem and mobile operating system – nothing in Firefox OS is closed or alien to the Web.

    This is why we recorded this video series to explain in a short and simple fashion where you can go to get started as a developer for Firefox OS and how this means writing HTML5 without the limitations other platforms have in place for web-standards based applications.

    Today we start with a short video featuring Chris Heilmann (@codepo8) from Mozilla and Daniel Appelquist (@torgo) from Telefónica Digital/ W3C talking about the goals of Firefox OS. You can watch the video here.

    Resources mentioned in the video are:

    We hope you enjoy this and that it answers a few of the questions you had about Firefox OS. Watch this space for more videos in this series.