Developer Edition 48 – Firebug features, editable storage, inspector improvements and more…

This week marks the release of Firefox Developer Edition 48. In preparation for the arrival of multiprocess Firefox and the deprecation of the Firebug add-on, we are porting Firebug features to the built-in tools. We have also made tweaks to the current tools that we’ll cover in this post.

Firebug theme

As part of porting Firebug features to the built-in tools, we’re also porting the Firebug theme, giving Firebug users a more familiar environment to work with. This is the initial release of the theme so please let us know if you find any bugs and report them here. Here is a screenshot of the Firebug theme:

Firebug theme

DOM panel

The DOM panel is another feature we are porting from Firebug. This panel provides a handy tree view which allows you to browse and inspect the DOM structure of your page. Here’s a screenshot of the new tool:

DOM Panel screenshot

Editable storage

Editing support inside the storage inspector is one of the most frequently requested features. In this release, we added the ability to edit and delete cookies, local storage, and session storage entries. You can edit a cell by double-clicking on it. You can also delete entries by using the context menu.
Editable storage entries

Deletable cells

Geometry editor

In this release, we have added a new visual editing tool that allows you to easily tweak the positioning of any absolutely positioned or fixed-position element. You can change the values of the top, left, bottom and right properties using this tool. To launch the geometry editor, go to the Box Model tab in the inspector and click on the Geometry editor icon icon.

Geometry Editor

Memory tool improvements

The memory tool is now enhanced with a brand new tree-map view that gives a quick and intuitive visual overview of how memory is being used. This new view groups objects together by their types, which allows you to easily see the quantity of similar items (arrays when drawing canvas lines, scripts when loading a script-heavy website, etc.) taking up memory. Also, the size of each item in the map is proportional to the amount of bytes used, which allows you to easily see which items are taking up most of your memory.

Memory tool tree map

The memory tool provides a useful aggregate view that groups all instances of the same type of node. In this release, you can now click the ? icon to view all individual instances of a specified type in a separate view. You can also view the retaining paths of those individual nodes, using the retaining paths panel added in the previous release. This allows you to precisely pinpoint how a specific object is leaking when debugging your web app.

Aggregate view individual nodes

Finally, we have also added the ability to remove individual snapshots from the memory tool sidebar.

Inspector improvements

We have polished the user experience in the inspector to make it smoother and easier to use. The Rules view autocomplete now selects the most used property by default to make your authoring experience faster. For example, background will be selected instead of backface-visibility because it’s more frequently used. Here is a screencast of the feature in action:

Better rules view autocomplete

We have also improved the way long values are handled in the Rules view. A new multi-line mode specifically for long values lets you conveniently reach and select different parts of the value you’re editing.

Multi-line mode

The markup view now emphasises the relationship between a parent node and its children. The selected element now has a line underneath it that highlights the child nodes. This allows you to easily spot the selected element child nodes when the HTML markup is complex.

Parent child relationship

A quick way to switch between different angle units in the Rules view has been added. There is now a swatch next to angle values which you can shift-click to cycle between different units, similar to the colour values interaction. This feature was added by contributor Nicolas Chevobbe.

Cycle between angle units

Finally, we have added keyboard shortcuts to easily navigate between the markup view search results. You can now use Shift+Enter to navigate backwards within the search results. Also, Ctrl/Cmd+G and Ctrl/Cmd+Shift+G now work as aliases for Enter and Shift+Enter. These keyboard shortcuts were added by contributor Steve Melia.

Console improvements

The console has also received various tweaks that will make your daily experience with the tool more enjoyable. The first improvement comes from the set of Firebug features we’re porting. You can now expand network logs to inspect them and reveal a Firebug-style details view. Here is a screenshot:

Inline HTTP inspection

If you’re working with Map or Set objects, you can now view and inspect their individual entries from the console sidebar. This feature was added by contributor Jarda Snajdr.

Improved Map/Set inspection

Finally, we have added support for console.clear() to clear the console output.

about:debugging features

In preparation for the release of WebExtensions, we’ve added a feature that will be a great help to add-on developers. You can now reload add-ons from about:debugging, which allows you to quickly develop your add-on without having to re-install it every time you make a change.

Reloading add-ons with about:debugging

If you’re working with Service Workers, you’ll notice that we have added a way to unregister individual workers. Here is a screenshot:

Unregister service workers

Other notable changes

In addition to the changes above, we have polished various areas of the toolbox including:

Thanks to everyone who contributed to this release! Make sure to grab a fresh copy of Firefox Developer Edition and share your thoughts! If you have feedback about different Firebug features being ported, we’d love to hear your suggestions and constructive comments here.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firebug 1.12 New Features

Firebug team released fresh new Firebug 1.12 and here is a list of some new features we have implemented in this version.

  • Firebug 1.12 is compatible with Firefox 23 – 26

Firebug is an open source project maintained by developers from around the world and I can’t miss this opportunity to introduce all members who contributed to Firebug 1.12

  • Jan Odvarko
  • Sebastian Zartner
  • Simon Lindholm
  • Farshid Beheshti
  • Steven Roussey
  • Florent Fayolle
  • Awad Mackie
  • Belakhdar Abdeldjalil
  • Thomas Andersen
  • Hisateru Tanaka

New Features

Copy CSS Properties

Copying CSS properties into the clipboard has never been easier. It is now possible to copy individual CSS properties or rules or entire styles into the clipboard. Just right click on the part you want to copy. See detailed description of this feature.


New Net Panel Filters

The old Flash filter has been renamed to Plugins and covers Flash as well as Silverlight HTTP requests. There is also a new filter labeled Fonts that is used to see HTTP requests for custom fonts only (font/ttf or font/woff mime-types).


Use filter button tooltip to see detailed info about filtered files.

Filter for DOM Events Log

This feature allows to filter DOM event logging that is set for specific element. The next screenshot shows related user interface. There is a new submenu that allows to pick what events should be logged for selected element.


You can also help us improve the UI/UX of this feature.

Autocompletion Popup Improved

Autocompletion popup window that is available on Firebug Command Line (within the Console panel) has improved its design and it also offers built-in command line API.


Note that the bottom section of the popup window offers Firebug Command Line API.

Use in Command Line

This feature allows referring various page objects (HTML elements, JS objects, network requests, cookies, etc.) from the command line using new $p variable. The $p variable can also be used within command line expressions.


See detailed description of this feature.

Group Console Messages

Console messages are grouped now in case the messages appear multiple times consecutively. This feature can dramatically decrease number of logs and make the entire logging easier!


Better Infotip for HTTP Request Timings

The tooltip for individual HTTP requests displayed in the Net panel has been improved. It displays all phases of the current request as a little waterfall graph. It’s now a lot easier to understand the timing.


Multiple Filters for Console & Net Panel

The Console and Net panels support selection of multiple filters at the same time. Just hold down Ctrl key when clicking the filter buttons. This allows to see e.g. only Errors and Warnings in the Console panel or e.g. only HTML, CSS and JS files in the Net panel. See the screenshot.


Toggle Visibility of Side Panels

You can now toggle visibility of side-panels. The state is persistent across Firefox restarts. See couple of screenshots.


If you don’t need the Selectors side panel you can keep it hidden.


Store the result of the last command line evaluation in $_

Firebug implements a new variable available in the Command Line: $_. This variable stores the result of the previous expression evaluation (compatible with Chrome dev tools).


New command: getEventListeners()

Firebug implements a new Command Line command: getEventListeners(). This command returns the event listeners registered on a given object. The object is usually an element, but it can also be e.g. a window.


After you execute the command on the Command Line you can further inspect the return object in the DOM panel. See the following screenshot.


Copy as cURL

It is possible to create cURL command from a network request in order to test the request from the terminal window. Just right click on a request in the Net panel and pick Copy as cURL.


Precision for Console API %f log pattern

Floats can be rounded by using the %.xf pattern inside the first console.log() argument. Here x denotes the number of decimal places the number should be rounded to.

console.log("amount: %.2f", 4.3852)
will output
amount: 4.39


You may want to get to know about the other patterns available inside the Console API.

Show/hide stack arguments

Stack frames displayed in the Stack panel can be sometimes unusable due to a long list of arguments and so, Firebug introduced a new option Show Arguments allowing to show/hide them.


CSS Panel Improvements

Firebug introduces several improvements for the CSS panel. A lot more CSS information is now available.

  • @page rules are displayed
  • files with @media elements are displayed
  • @keyframes rules are now displayed
  • @-moz-document rules are displayed


There is a lot more new enhancements and you can see the entire list in our release notes. You can also see the official announcement on getfirebug.com.

Follow us on Twitter to be updated!

Jan ‘Honza’ Odvarko

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

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:

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:


CSS Autocompletion in the inspector

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


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


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.


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.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

New Features in Firefox Developer Tools: Episode 24

Releases have recently rolled, and there are a slew of new features coming to the developer tools in Firefox 24. Firefox 24 is currently in our alpha channel Firefox Aurora, and will hit the main release channel on September 17th, 2013.

A little alitteration leads to lots of cool features coming this release. I’m only touching on a few highlights here; to see a comprehensive list of all the new changes to developer tools, check out the full list of bugs fixed since last release.

Console Clean Ups

An oft-requested feature, the console will now clear all of the existing logs when you refresh the page. If you need logs to persist across reloads, don’t worry: this behavior is toggle-able in the options panel. Here’s to less clutter!

Users were also reporting that the “clear” button was confusing. It wasn’t obvious whether it was clearing the logs or the the filter text because the button as adjacent to the filtering search box. We moved it to so that this won’t happen anymore!

New position of the clear button

Source Map Sourcery

Source maps are now enabled by default. If you need to debug the JavaScript generated by your tool or compiler rather than the original source, you can still toggle them on and off in the debugger options.

Furthermore, because of issues with Internet Explorer, the source map specification was updated so that you link a source map to its script with //#
rather than the deprecated //@ sourceMappingURL=.... We will still respect the old style, but will warn you that it is deprecated. Here is a summary of the why this change was made.

Finally, we will load the text of a source mapped source from its source map’s sourcesContent property, if it exists. This property was added to source maps to enable dynamic source map creation, and to bundle your sources into the source map so that you don’t need to juggle extra files on your server.

Debugger Developments

Frozen, sealed, and non-extensible objects are now visually distinguished in the debugger’s variables view.

Frozen, sealed, and non-extensible objects

Also, when stepping out of a stack frame in the debugger, you will now see either the return value or the exception thrown (depending on why you are exiting the frame) in the variables view labeled <return> and <exception> respectively.

A stack frame's return value

A stack frame's exception

JavaScript-Free Fun

Need to see how your web page gracefully degrades when JavaScript is disabled? Head on over to the options panel and you can quickly disable JavaScript for the current tab. This persists until either you close the tab or the developer tools.

Network Monitor Magic

You can now filter by types of requests in the network monitor. Want to see only requests for stylesheets? Or maybe only XHRs? We’ve got your back. On top of that, there are now total number of requests, file sizes, and response times listed in the bottom that update with you filters, so you can see just how many KBs (or even MBs) of images you are requesting on every page load.

Filtering only images

Profiler Pleasantries

You can now control the profiler from your web app’s code base via console.profile() to start a new profile, and console.profileEnd() to end it. No more trimming your sample range, start and stop profiling in the exact places you want to from your code!

That’s it for this episode. Keep on hacking the free web!

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firefox Developer Tool Features for Firefox 23

Another uplift has left the building and it’s time to take a look at what’s in Firefox Developer Tools in Firefox 23 currently Aurora, our pre-beta channel. You can download it from the Aurora Download page today. Firefox 23 is currently scheduled to hit the release channel on Tuesday August 6th, 2013.

Episode XXIII is a barn-storming, hair-raising spectacle of incredible epicness that is sure to delight and amuse. If you want a sneak peak at features under active development, give Nightly a try.

Network Monitor

There’s a new tool in the toolbox: The Network Monitor. It’s a classic waterfall timeline view of network activity on a site. This data’s been available since Firefox 4 via the Web Console, albeit in a less visually pleasing way.

Please file bugs under the Developer Tools: Netmonitor component in Bugzilla.

Remote Style Editor

In Firefox 23, you can now edit styles via a Remote Connection on a suitably-enabled device. This should be great help for App Developers interested in testing and debugging styles on a mobile device over the remote protocol in real time.

As of the time of this writing, the Remote Style Editor should be compatible with Firefox for Android version 23, also scheduled for uplift to Aurora. We are working on incorporating the Style Editor Actors for the remote protocol into the Firefox OS Simulator and investigating what it will take to backport them to Firefox OS release.

Options Panel

We’ve added a Gear menu to the Toolbar containing an Options panel for turning tools on or off. As we add more stuff, this is going to be a popular place to manage preferences related to the Developer Tools.

Currently, there are options to turn on the Light or Dark theme for the tools and enable Chrome Debugging.

Initial SourceMap Support for Debugger Protocol

The first pieces of SourceMap support for the Debugger have landed and we are now able to serve up SourceMapped JS files for your debugging pleasure. Soon to follow will be column support for breakpoints allowing you to debug minified JS with a SourceMap.

Watch for the upcoming blog post by Nick Fitzgerald on Hacks explaining the magic.

Variables View Everywhere

Our Variables View is an improved Object Inspector and an integral part of our Debugger. Naturally, we wanted to put it in Everything. So now the Web Console and Scratchpad have a Variables View. Use the ESC key to close it.

Browser Console

If you have Chrome Debugging turned on, check out the Browser Console. It’s a replacement for the ancient Error Console and gives you a Chrome-context command line for executing JavaScript against the browser. It’s nice and should be enabled by default in Firefox 24.

GCLI Appcache Command

We finally have a little something for developers trying to use App Cache to store offline data. A new appcache command for the Graphical Command Line. You can read about it in Mike Ratcliffe’s The Application Cache is no longer a Douchebag.

Web Console in Debugger Frame

The Web Console is now fully-remoted (and has been since version 18). It now makes use of the Debugger’s current Frame if paused on a breakpoint.

Multiple Paused Debuggers

You can now debug multiple tabs at the same time using the Script Debugger. Previously, when attempting to use the debugger on two separate tabs, you’d be given a notification to resume the debugger in the other tab. Now you can debug as many tabs as you like.

There is one caveat to this awesome power, however. Due to the nested event loops each Debugger creates, you have to resume each tab in the order in which they were paused. Debug carefully and always carry a big stack.

You can see a comprehensive list of bugfixes in table form in Firefox 23 Developer Tools Fixes.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

headtrackr for real-time face tracking, smartphone features you never thought of, HTML5 Forms support + more in Hacks Weekly

This week Mozilla’s Developer Engagement team suggest reading about headtrackr for real-time face tracking, smartphone features you never thought of using, Web browser support for HTML5 Forms and more!

Weekly links

If there is anything you think we should read or know about, don’t hesitate to post a comment, contact us on Twitter or through any other means.
The picks this week are:

The Developer Engagement team

Mozilla’s Developer Engagement team work with writing articles, documentation – such as MDN (Mozilla Developer Network) – public speaking and generally helping and informing about open technologies and Mozilla products. If you are interested in following our work, here are the team members:

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Firebug 1.11 New Features

Firebug 1.11 has been released and so, let’s take a look at some of the new features introduced in this version.


First of all, check out the following compatibility table:

  • Firebug 1.10 with Firefox 13.0 – 17.0
  • Firebug 1.11 with Firefox 17.0 – 20.0

Firebug 1.11 is open source project surrounded by contributors and volunteers and so, let me also introduce all developers who contributed to Firebug 1.11

  • Jan Odvarko
  • Sebastian Zartner
  • Simon Lindholm
  • Florent Fayolle
  • Steven Roussey
  • Farshid Beheshti
  • Harutyun Amirjanyan
  • Bharath Thiruveedula
  • Nikhil Verma
  • Antanas Arvasevicius
  • Chris Coulson

New Features

SPDY Support

Are you optimizing your page and using SPDY protocol? Cool, the Net panel is now indicating whether the protocol is in action.

Performance Timing Visualization

Another feature related to page load performance. If you are analyzing performance-timing you can simply log the timing data into the Console panel and check out nice interactive graph presenting all information graphically.

Just execute the following expression on Firebug’s Command Line:


Read detailed description of this feature.

CSS Query Selector Tool

Firebug offers new side panel (available in the CSS panel) that allows quick execution of CSS selectors. You can either insert your own CSS Selector or get list of matching elements for an existing selector.

In order to see list of matching elements for an existing CSS rule, just right click on the rule and pick Get Matching Elements menu item. The list of elements (together with the CSS selector) will be displayed in the side panel.

New include() command

Firebug supports a new command called include(). This command can be executed on the Command Line and used to include a JavaScript file into the current page.

The simplest usage looks as follows:

If you are often including the same script (e.g. jqueryfying your page), you can create an alias.
include("http://code.jquery.com/jquery-latest.min.js", "jquery");

And use the alias as follow:

In order to see list of all defined aliases, type: include(). Note, that aliases are persistent across Firefox restarts.

Read detailed description of this command on Firebug wiki.

Observing window.postMessage()

Firebug improves the way how message events, those generated by window.postMessage() method, are displayed in the Console panel.

The log now displays:

  • origin window/iframe URL
  • data associated with the message
  • target window/iframe object

See detailed explanation of the feature.

Copy & Paste HTML

It’s now possible to quickly clone entire parts of HTML markup by Copy & Paste. Copy HTML action has been available for some time, but Paste HTML is new. Note that XML and SVG Copy & Paste is also supported!

See detailed explanation of the feature.

Styled Logging

The way how console logs can be styled using custom CSS (%c formatting variable) has been enhanced. You can now use more style formatters in one log.

console.log("%cred-text %cgreen-text", "color:red", "color:green");

See detailed explanation of this feature.

Log Function Calls

Log Function Calls feature has been improved and it also shows the current stack trace of the place where monitored function is executed.

See detailed explanation of this feature.

Improved $() and $$() commands

Firebug also improves existing commands for querying DOM elements.

$() command uses querySelector()
$$() command uses querySelectorAll()

It also means that the argument passed in must be CSS selector.

So, for example, if you need to get an element with ID equal to “content” you need to use # character.


If you forget, Firebug will nicely warn you 🙂

Autocompletion for built-in properties

The Command Line supports auto-completion even for built-in members of String.prototype or Object.prototype and other objects.

There are many other improvements and you can see the entire list in our release notes. You can also see the official announcement on getfirebug.com.

Follow us on Twitter to be updated!

Jan ‘Honza’ Odvarko

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)

Accessibility features in Firefox on Android

One of our principles in the Mozilla Manifesto states that the Internet ”is a global public resource that must remain open and accessible”. Our goal is to remove barriers that traditionally block participation, such as affordability, language and disability.

We have been working hard to bring Firefox for Android to everyone on the planet, including blind and visually impaired users. Firefox 15 for Android introduced preliminary screen reader support. In Firefox 17 we have come full circle, and now support Jelly Bean’s advanced accessibility features. To test the latest features right away, they are now available as Firefox Beta.

What are Accessibility Features?

Firefox is designed to meet the needs of the broadest population possible. Sometimes that is not enough. In the case of blind and visually impaired users, a conventional graphical interface with a touch screen is not usable. Assistive technologies such as screen readers exist to bridge that gap. They provide speech and audible feedback that represents the visual state of the application. They may also provide alternative interaction modes that make more sense for blind users. For example, a user could explore the visible items on a screen by moving their finger across the screen and have the screen reader tell them what is under their finger.

Accessible by Default

We believe that equal access requires Firefox for Android to be ready for any type of user once it is installed, with no extra setup steps or addons. When Firefox for Android launches for the first time on a blind user’s device, it should start talking and be responsive to the user’s input.
Firefox for Android is the first Android Web browser that integrates tightly with Android’s native accessibility framework and supports TalkBack, Android’s screen reader. This provides a consistent feel with the rest of the device, and the user’s specific screen reader configuration.

Under The Hood

Our Android accessibility solution leverages the same powerful accessibility engine we use on the desktop. This means that it is fast, and leads the industry in support of standards such as WAI-ARIA and HTML5.

Touch Exploration & Gestures

Android’s built-in accessibility features have been modernizing ever since Ice Cream Sandwich. Users can now explore the contents of the screen with the tip of their finger and have whatever is under their finger read out loud. Jelly Bean introduces “flick navigation”, a user could swipe left or right to navigate the contents of the screen in a linear fashion.
We have worked hard to support all of those features in Firefox for Android as well and stay apace with Android’s evolving Accessibility and offer a consistent user experience.

Quick Navigation

Web pages can be very big, complex, and contain a lot of content. When a screen reader user visits a large page it can be tiring and time consuming to step through every item on the page until they find what they are looking for. That is why we introduced Quick Navigation Keys. With the help of a physical keyboard or the Eyes-Free Keyboard, a user can press “k” repeatedly to step through all the hyperlinks on the page. Similar keys are available for headings, list items, various form fields, and more.
This type of feature is familiar to desktop screen reader users. But the Android screen reader does not have this kind of functionality, so we decided to implement ourselves.

Trying It Out

Accessibility on Jelly Bean is really easy to set up and play with. Go to System settings->Accessibility->TalkBack and enable it. Once TalkBack is enabled move your finger across the screen, you will hear audio feedback and speech telling you what your finger is resting on. Close your eyes and try to find different apps on the home screen. Are you getting the feel for it? If you want to sequentially step through items swipe your finger left or right quickly across the screen. If you want to activate an item (say, Firefox Beta?) double tap.

You already know everything you need to know about using Firefox with TalkBack. Launch it, explore the interface with your finger, swipe left and right, and double tab to activate items. This is a good opportunity to try out websites and applications you created and test to see how accessible they are. Could you manage with your eyes closed?

Here is a short video of Firefox Beta on a Nexus 7 working with TalkBack:


What we are most proud about in our accessibility story on Android is the invisibility of our solution. It integrates well, and it gets out of the way to allow blind users to enjoy the easy and fast mobile browsing experience that Firefox for Android provides.

View full post on Mozilla Hacks – the Web developer blog

VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)