Mozilla

Articles by Paul Rouget

Sort by:

View:

  1. Firefox Developer Tools: Episode 27 – Edit as HTML, Codemirror & more

    Firefox 27 was just uplifted to the Aurora release channel which means we are back to report on new features in Firefox Developer Tools. Below are just some of the new features, you can also take a look at all bugs resolved in DevTools for this release).

    JS Debugger: Break on DOM Events

    You can now automatically break on a variety of DOM events, without needing to manually set a breakpoint. To do this, click on the “Expand Panes” button on the top right of the debugger panel (right next to the search box). Then flip over to the events tab. Click on an event name to automatically pause the next time it happens. This will only show events that currently have listeners bound from your code. If you click on one of the headings, like “Mouse” or “Keyboard”, then all of the relevant events will be selected.

    Inspector improvements

    We’ve listened to feedback from web developers and made a number of enhancements to the Inspector:

    Edit as HTML

    Now in the inspector, you can right click on an element and open up an editor that allows you to set the outerHTML on an element.

    Select default color format

    You now have an option to select the default color format in the option panel:

    Color swatch previews

    The Developer Tools now offer color swatch previews that show up in the rule view:

    Image previews for background image urls

    Highly requested, we now offer image previews for background image URLs:

    In addition to above improvements, Mutated DOM elements are now highlighted in the Inspector.

    Keep an eye out for more tooltips coming soon, and feel free to chime in if you have any others you’d like to see!

    Codemirror

    Codemirror is a popular HTML5-based code editor component used on web sites. It is customizable and theme-able. The Firefox Devtools now use CodeMirror in various places: Style editor, Debugger, Inspector (Edit as HTML) and Scratchpad.

    From the Option panel, the user can select which theme to use (dark or light).

    WebConsole: Reflow Logging

    When the layout is invalidated (CSS or DOM changes), gecko needs to re-compute the position of some nodes. This computation doesn’t happen immediatly. It’s triggered for various reasons. For example, if you do “node.clientTop”, gecko needs to do this computation. This computation is called a “reflow”. Reflows are expensive. Avoiding reflows is important for responsiveness.

    To enable reflow logging, check the “Log” option under the “CSS” menu in the Console tab. Now, everytime a reflow happens, a log will be printed with the name of the JS function that triggered this reflow (if caused by JS).

    That’s all for this time. Hope you like the new improvements!

  2. New Features in the Firefox Developer Tools: Episode 26

    Firefox 26 was just uplifted to the Aurora release channel which means we are back to report on new features in Firefox Developer Tools. Here’s a summary of some of the most exciting new features.

    Inspector: pseudo element support

    To get more flexibility in the design of an element without using additional nodes, it’s very common to use CSS pseudo elements, eg (`:before/:after{content:””}`). In the Inspector it’s now possible to see the rules applied to pseudo elements.

    Debugger: break on uncaught exceptions

    It’s now possible to pause the debugger on uncaught exceptions. It makes debugging unexpected errors easier and prevents the developer from having to step over a barrage of exceptions which were handled by Try/Catch blocks.

    Web Console: Better text selection

    It used to be hard to select text from the web console. Fixing this bug needed a whole rewrite of the console output area. This will make copying/pasting logs much simpler and provides the ground-work for improved console output features landing soon.

    Global UI improvements

    It is now possible to zoom in and zoom out for the UI of all the developer tools. Do you prefer bigger fonts? Hit Ctrl +. Smaller? Ctrl -. (Cmd in Mac OS X).

    The DOM view in the Inspector has also been improved. The selection is more obvious and it’s easier to expand nodes and very long attributes are now cropped.

    Keyboard shortcuts improvements: It’s now easier to control the tools from the keyboard. We’ve created many new keyboard shortcuts and tried to be compatible with other browsers. All the available keyboard shortcuts for the Developer Tools are listed on MDN.

    As an added bonus, we also moved the URL preview (the bar that pops out when hovering a link with the mouse) above the toolbox. It doesn’t cover the Web Console input or any other tool anymore.

    Responsive Design View

    The Responsive Design View comes with 3 new improvements:

    • Touch Event simulation (mouse events are translated to touch events)
    • Quick screenshot
    • Precise resize. Press Ctrl while moving the mouse for a more accurate resize

    When can I use these features?

    All of these features and more are available in the Firefox 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.

  3. WebRTC enabled, H.264/MP3 support in Win 7 on by default, Metro UI for Windows 8 + more – Firefox Development Highlights

    Time again for looking at the latest progress with Firefox. These posts are part of our Bleeding Edge and Firefox Development Highlights series – take note that most examples only work in Firefox Nightly (and could be subject to change).

    WebRTC enabled by default

    Previously, you needed to go to about:config in Firefox and set the media.peerconnection.enabled option to true, but now it’s enabled by default. This is a huge step forward, to be able to run WebRTC directly in a web browser without it needing any special settings or configuration.

    For more details behind this decision, please read Pref on WebRTC by default.

    Want to get started with WebRTC? Then we recommend our article Cross-browser camera capture with getUserMedia/WebRTC.

    Metro UI

    The new Firefox User Interface for Windows 8 has landed (if you had Firefox Nightly as your default browser, reset that permission to see the new UI).

    There are more screenshots available too.

    H.264 & MP3 support enabled by default in Windows 7

    We talked about H.264 & MP3 support before, and now that support is activated by default.

    We are still working on supporting Mac OS X and Linux.

    WebAudio API progress

    We are working on implementing the WebAudio API, and the first parts of support has just started appearing.

    It’s available in about:config in the media.webaudio.enabled preference – set it to true to enable it and be able to access things such as AudioContext.decodeAudioData.

    Crypto API: window.crypto.getRandomValues

    If you provide an integer-based TypedArray (i.e. Int8Array, Uint8Array, Int16Array, Uint16Array, Int32Array, or Uint32Array), window.crypto.getRandomValues is going fill the array with cryptographically random numbers:

    /* assuming that window.crypto.getRandomValues is available */
    
    var array = new Uint32Array(10);
    window.crypto.getRandomValues(array);
    
    console.log("Your lucky numbers:");
    for (var i = 0; i < array.length; i++) {
        console.log(array[i]);
    }
    

    canvas: ctx.isPointInStroke

    This has been uplifted to Firefox 19 Beta.

    From the WHATWG mailing list:

    "We have recently implemented isPointInStroke(x,y) in Firefox (https://bugzilla.mozilla.org/show_bug.cgi?id=803124). This is a parallel to isPointInPath(x,y) and returns true if the point is inside the area contained by the stroking of a path."

    JavaScript: Math.imul

    Math.imul allows for fast 32-bit integer multiplication with C-like semantics. This feature is useful for projects like Emscripten.

    Polyfill:

    function imul(a, b) {
        var ah  = (a >>> 16) & 0xffff;
        var al = a & 0xffff;
        var bh  = (b >>> 16) & 0xffff;
        var bl = b & 0xffff;
        // the shift by 0 fixes the sign on the high part
        return (al * bl) + (((ah * bl + al * bh) << 16) >>> 0);
    }
    
  4. Firefox Development Highlights – H.264 & MP3 support on Windows, scoped stylesheets + more

    Time for the first look this year into the latest developments with Firefox. This is part of our Bleeding Edge and Firefox Development Highlights series, and most examples only work in Firefox Nightly (and could be subject to change).

    H.264 & MP3 support on Windows

    Firefox for Android and Firefox OS already support H.264 and MP3. We are also working on bringing these formats to Firefox Desktop. On Windows 7 and above, you can already test it by turning on the preference media.windows-media-foundation.enabled in about:config. Decoding is done on the OS side (no decoder included in Firefox source code, not like WebM or Ogg Theora). For Linux and Mac, work is in progress.

    The new Downloads panel has been enabled

    We have now enabled the new Downloads panel:

    Scoped style attribute

    It’s now possible to define scoped style elements. Usually, when we write a stylesheet, we use <style>...</style>, and CSS code is applied to the whole document. If the <style> tag is nested inside a node (let’s say a <div>), and the <style> tag includes the scoped attribute (<style scoped>), then the CSS code will apply only to a subtree of the document, starting with the parent node of the <style> element. The root of the subtree can also be referred via the :scope pseudo-class.

    Demo

    Scoped style demo support on JS Bin.

    Our friends over at HTML5Rocks have also written about it in A New Experimental Feature: scoped stylesheets.

    @supports and CSS.supports

    In Firefox 17, we shipped the @supports CSS at-rule. This lets you define specific CSS code only if some features are supported. For example:

    @supports not (display: flex) {
      /* If flex box model is not supported, we use a different layout */
      #main {
          width: 90%;
      }
    }
    

    In Firefox 20, it’s now possible to do the same thing, but within JavaScript:

    if (CSS.supports("display", "flex")) {
      // do something relying on flexbox
    }
  5. Firefox Development Highlights – Per Window Private Browsing & Canvas' globalCompositeOperation new values

    On a regular basis, we like to highlight the latest features in Firefox for developers, as part of our Bleeding Edge series, and most examples only work in Firefox Nightly (and could be subject to change).

    Per Window Private Browsing

    Private browsing is very useful for web developers. A new private session doesn’t include existing persistent data (cookies and HTML5 storage). It’s convenient if we want to test a website that stores data (login and persistent informations) without cleaning every time these cached data, or if we want to login to a service with 2 different users.

    Until now, when entering Private Browsing in Firefox, it was closing the existing session to start a new one. Now, Firefox will keep the current session and open a new private window. You can test it in Firefox Nightly (to be Firefox 20). There’s still some frontend work to do, but the feature works.

    Canvas’ globalCompositeOperation new values

    The ‘globalCompositeOperation’ canvas property lets you define how you want canvas to draw images over an existing image. By default, when canvas draws an image over existing pixels, the new image is just replacing the pixels. But there are other ways to mix pixels. For example, if you set ctx.globalCompositeOperation = "lighter", pixel color values are added, and it creates a different visual effect.

    There are several effects available, and more on them can be found in globalCompositeOperation on MDN.

    Rik Cabanier from Adobe has extended the Canvas specification to include more effects. He has also implemented these new effects in Firefox Nightly. These new effects are called “blend modes”. These are more advanced ways of mixing colors.

    Please take a look at the list of these new blending modes.

    And here’s an example of how to use them:

    JS Bin demo.

    If you don’t use Firefox Nightly, here is a (long) screenshot:

    image

  6. Firefox Development Highlights: video.playbackRate and download attribute

    Here are the latest features in Firefox for developers, as part of our Bleeding Edge series, and most examples only work in Firefox Nightly (and could be subject to change).

    <video>: support for custom playbackRate

    Setting video.playbackRate changes the “video speed”. 1.0 is regular speed, 2.0 is 2 times faster. From the MDN documentation on HTMLMediaElement:

    The default playback rate for the media. 1.0 is “normal speed,” values lower than 1.0 make the media play slower than normal, higher values make it play faster.

    Example:

    
    
    
    

    Interactive demo:

    video playbackRate demo

    <a> “download” attribute

    From Downloading resources in the Living standard at Whatwg.org:

    In some cases, resources are intended for later use rather than immediate viewing. To indicate that a resource is intended to be downloaded for use later, rather than immediately used, the download attribute can be specified on the a or area element that creates the hyperlink to that resource.

    This attribute is particularly useful with blobs. With Blobs, You can create files in JavaScript. A binary blob can be an image built in a canvas element for example. Linking binary blobs to a <a> element (with a URL constructor) and marking this <a> element as downloadable with this new attribute, the user will be able to save the blob as a file on his hard-drive.

    Example from Tom Schuster’s blog post about his work on the HTML5 download attribute: ]

    var blob = new Blob(["Hello World"]);
    var a = document.createElement("a");
    a.href = window.URL.createObjectURL(blob);
    a.download = "hello-world.txt";
    a.textContent = "Download Hello World!";
    

    It has also been covered on HTML5Rocks in Downloading resources in HTML5.

  7. Progress on OMTC, unprefixed Visibility API and CSS improvements – Firefox Development Highlights

    To keep all you web developers in the loop about new features and improvements in Firefox, and to be able to test and experiment in an early stage, here’s the latest Firefox Development Highlights. This is part of our Bleeding Edge series, and most examples only work in Firefox Nightly (and could be subject to change).

    Good progress on OMTC (“Off Main Thread Compositing”)

    A direct advantage of OMTC is a more responsive user interface. Rendering a web page is a complex process that involves different operations, like computing the layout of the page, downloading the different resources, decoding images, or executing JavaScript code.
    Some of these operations are executed in a same thread. Some of them are executed in the main thread, where most of the User Interface interactions are handled. If an operation takes times in this main thread, it would then block the UI and makes the UI feel sluggish.

    So, we want to move as many operations as possible into another thread. One of these operations we want to move is called “Compositing”. It’s responsible for “flattening” the page. A page is made of layers. For example, a layer for the fixed-background, a layer for a piece of test, and a layer for a video element. Flattening the page, compositing it, will merge these layers into one texture.

    In Firefox OS and Firefox for Android, the Compositing operations are made in a different thread. And we are making some good progress to get OMTC working for Firefox Desktop.

    To delve more into this, we recommend reading Off Main Thread Compositing (OMTC) and why it matters.

    The visibility API has been unprefixed

    The Page Visibility API lets you know when a webpage is visible or in focus. With tabbed browsing, there is a reasonable chance that any given webpage is in the background and thus not visible to the user.

    When the user minimizes the webpage or moves to another tab, the API sends a visibilitychange event regarding the visibility of the page. You can detect the event and perform some actions or behave differently. For example, if your web app is playing a video, it would pause the moment the user looks at another browser, and plays again when the user returns to the tab. The user does not lose her place in the video and can continue watching.

    To that end, for mozHidden and mozvisibilitychange, the moz prefix is not required anymore.

    CSS improvements

    We always need more CSS support, right? Here are the latest changes:

    @page CSS at-rule

    The @page CSS at-rule is used to modify some CSS properties when printing a document. You can’t change all CSS properties with @page. You can only change the margins, orphans, widows, and page breaks of the document. Attempts to change any other CSS properties will be ignored.

    For example, you can write a specific style for left pages, and one for right pages (think “book”) with the :left and :right pseudo classes, or for the very first page with :first.

    page-break-inside CSS property

    The page-break-inside CSS property adjusts page breaks inside the current element:

    page-break-inside:auto;
    

    Automatic page breaks (default behavior):

    page-break-inside:avoid;
    

    Avid page breaks before the element:

    /* avoid page break inside the paragraph */
    p { page-break-inside: avoid; }
    

    text-transform:full-width

    For CSS text-transform, full-width forces the writing of a character, mainly ideograms and latin scripts inside a square, allowing them to be aligned in the usual East Asian scripts (like Chinese or Japanese).

  8. Firefox Development Highlights – Viewport percentage, canvas.toBlob() and WebRTC

    To keep you updated on the latest features in Firefox, here is again a blog post highlighting the most recent changes. This is part of our Bleeding Edge series, and most examples only work in Firefox Nightly (and could be subject to change).

    Viewport-percentage lengths

    Gecko now supports new lenght units: vh, vw, vmin and vmax. 1vh is 1% of the viewport height, and the length doesn’t depend on its container size. We can build designs that are directly proportional to the page size (think about HTML slides for example, which are supposed to keep the same appearance regardless the size of the page).

    vh
    1/100th of the height of the viewport.
    vw
    1/100th of the width of the viewport.
    vmin
    1/100th of the minimum value between the height and the width of the viewport.
    vmax
    1/100th of the maximum value between the height and the width of the viewport.

    Read more about CSS Viewport-percentage lengths on MDN.

    <canvas>.toBlob()

    A Blob object represents a file-like object of immutable, raw data. Blobs can be used by different APIs, like the File API or IndexedDB. We can create an alias URL the refers to the blob with window.URL.createObjectURL, which can be used in place of data URLs in some cases (which is better memory wise).

    Now, a canvas element can export its content as an image blob with the toBlob() method (this replaces the non standard mozGetAsFile function). toBlob is asynchronous:

    toBlob(callback, type) // type is "image/png" by default

    For more information, see Example: Getting a file representing the canvas on MDN.

    WebRTC in Firefox Nightly and Firefox Aurora (Firefox 18)

    To enable our WebRTC code in Firefox’s Nightly desktop build, browse to about:config and change the media.peerconnection.enabled preference to true. More WebRTC documentation on MDN, and we plan to have future blog posts about WebRTC here on Mozilla Hacks.

    Additionally, if you are interested in a steady flow of the latest Firefox highlights, you can also follow @FirefoxNightly on Twitter.

  9. Introducing Firefox Development Highlights

    We know he have a lot of readers out there interested in the Open Web and its capabilities, and part of that is to see the latest additions and implemented features in Firefox. Therefore, we’re introducing Firefox Development Highlights here at Mozilla Hacks.

    Introduction

    The purpose of this post is to highlight some of the latest (couple of weeks) developments in Firefox and Gecko. Bear in mind that these changes might be backed out at any time and they are part of our Bleeding Edge posts.

    You can test them out in Firefox Nightly.

    If you are interested in a steady flow of the latest highlights, you can also follow @FirefoxNightly on Twitter.

    Graphic

    Firefox’ graphic stack received some great improvements lately: better scaling algorithm for images and support for retina display. Gecko now downscales images using a high-quality scaling algorithm. You can see the improvements in this screenshot (click on it for a larger version):

    This is disabled on mobile, where we worry about speed/multicore abilities. It’s also disabled on OS X, which has high-quality downscaling built in.

    Gecko now supports HiDPI displays, for web pages, plugins and for Firefox’ UI.

    Standards

    CSS3 flexbox model is now available in Gecko, behind a preference: layout.css.flexbox.enable. Go to about:config in Firefox and add that as a preference, set to true.

    Quote from W3C:

    In the flex layout model, the children of a flex container can be laid out in any direction, and can “flex” their sizes, either growing to fill unused space or shrinking to avoid overflowing the parent. Both horizontal and vertical alignment of the children can be easily manipulated. Nesting of these boxes (horizontal inside vertical, or vertical inside horizontal) can be used to build layouts in two dimensions.

    Web Workers

    Support for transferable objects from HTML5 spec.

    Quote from Andrea Marchesini:

    If you want to send data to/from a Web Worker, you have to use postMessage() method. Internally what happens is that the data is duplicated using the structured cloned algorithm and then the copy is sent. To make this sharing faster, HTML5 specs add a new concept: transferable objects, data is transferred from one context to another without copy. Note: data is no longer available once transferred to the new context. Right now we can transfer just ArrayBuffers, but maybe in the future we will support other data types.

  10. BrowserQuest – a massively multiplayer HTML5 (WebSocket + Canvas) game experiment

    It’s time for some gaming action with a new HTML5 game demo: BrowserQuest, a massively multiplayer adventure game created by Little Workshop (@glecollinet & @whatthefranck) and Mozilla.

    Play the game: browserquest.mozilla.org
    BrowserQuest

    BrowserQuest is a tribute to classic video-games with a multiplayer twist. You play as a young warrior driven by the thrill of adventure. No princess to save here, just a dangerous world filled with treasures to discover. And it’s all done in glorious HTML5 and JavaScript.

    Even better, it’s open-source so be sure to check out the source code on GitHub!

    Watch a screencast:

    A multiplayer experience

    BrowserQuest screenshot

    BrowserQuest can be played by thousands of simultaneous players, distributed across different instances of the in-game world. Click on the population counter at any time to know exactly how many total players are currently online.

    Players can see and interact with each other by using an in-game chat system. They can also team up and fight enemies together.

    BrowserQuest is a game of exploration: the more dangerous the places you go, the better the rewards.

    Powered by WebSockets

    WebSockets are a new technology enabling bi-directional communication between a browser and a server on the web.

    BrowserQuest is a demo of how this technology can be used today to create a real-time multiplayer game in a single webpage. When you start to play, your browser opens up a WebSocket connection to one of several load-balanced game servers. Each server hosts multiple world instances and handles the player synchronization and game logic within all instances. Because the server code is running on Node.js, both the server and client codebases share a small portion of the same JavaScript source code.

    Server code is available on Github.

    BrowserQuest screenshot

    Built on the Web platform

    BrowserQuest makes extensive use of different web technologies, such as:

    • HTML5 Canvas, which powers the 2D tile-based graphics engine.
    • Web workers, allowing to initialize the large world map without slowing down the homepage UI.
    • localStorage, in which the progress of your character is continually saved.
    • CSS3 Media Queries, so that the game can resize itself and adapt to many devices.
    • HTML5 audio, so you can hear that rat or skeleton die!

    Available everywhere

    Since BrowserQuest is written in HTML5/JavaScript, it is available across a lot of different browsers and platforms. The game can be played in Firefox, Chrome and Safari. With WebSockets enabled, it’s also playable in Opera. Moreover, it’s compatible with iOS devices, as well as tablets and phones running Firefox for Android.

    BrowserQuest screenshot

    The mobile versions are more experimental than the desktop experience, which has richer features and performance, but it’s an early glimpse of what kind of games will be coming to the mobile Web in the future. Give it a try with your favorite mobile device!

    Join the adventure

    Want to be part of BrowserQuest? Create your own character and venture into the world. Fight enemies by yourself or with friends to get your hands on new equipment and items. You might even stumble upon a couple of surprises along the way…