Trainspotting

Trainspotting: Firefox 45

Trainspotting is a series of posts highlighting what’s new in release versions of Firefox. A new version of Firefox is shipped every six weeks – we at Mozilla call this pattern “release trains.”

March winds bring April showers, and also the latest and greatest version of Firefox! Let’s take a look at some of the new goodies and other changes in the browser.

Tab Sync

Location bar suggestions for tabs open on other devices

If you have tabs open in Firefox on another device, those tabs will now appear as suggestions in the Awesome Bar. It’s a fast way to pick up where you left off on your phone or work computer. You can also view the full list of tabs open on other devices via a toolbar button menu.

Developer Tools

negative filtering of requests in the network panel

You’ve been able to filter network requests by URL since Firefox 40, but now you’re able to filter out requests you’re not interested in by pre-pending ‘-‘ to your filter terms. Handy in long-lived single-page webapps where many requests occur over the duration of a page session.

Animation Panel Enhancements

animation property break-down

The animation panel has a few new tricks up its sleeve (sleeves? not sure how many limbs a devtool has). You can now view a list of individual properties being modified by each animation. The expanded view of the timeline also has markers for each keyframe that applies to the specific CSS property.

Also new in Firefox 45 is the ability to adjust the playback rate in the Animation Panel for fine-tuning those complex sequences in slow motion. Should speed up debugging quite a bit.

Goodbye Tab Groups

organize your tabs into groups using the Tab Groups extension

Hello Tab Groups! If you know about the Tab Groups feature in Firefox, there’s a pretty good chance you are a die-hard power user of the feature. That group, however, was a very small percentage of users, and the feature was removed to simplify Firefox’s code base. Never fear! Simultaneously, add-on developer Quicksaver stepped up and hosted the Tab Groups code into a Firefox extension! All the visual organizing, drag-n-dropping action is just as it was before. Kudos to Quicksaver for keeping the power-user dream alive!

There’s always more to talk about in a Firefox release than I have words for, and 45 is no exception. Check out the release notes for a high-level list of changes in the browser, or peruse the detailed list of developer facing changes on MDN.

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)

Trainspotting: Firefox 44

Trainspotting is a series of articles highlighting features in the lastest version of Firefox. A new version of Firefox is shipped every six weeks or sometimes eight– we at Mozilla call this pattern “release trains”.

It’s a new year, and of course there’s a new Firefox! Let’s take a look at some of the goodies inside the latest update.

ServiceWorkers and Web Push

ServiceWorkers and Web Push are two truly transformational web technologies, because they enable web pages and web applications to do things that were simply not possible before. ServiceWorkers allow a website to register a script that can intercept navigation requests, cache assets and data offline, and run even when the webpage isn’t open! This allows for more responsive UIs, better offline support, and lays the groundwork for more application-grade experiences.

A working test notification! Hooray!

Web Push builds on top of ServiceWorkers and, with user consent, allows web content to receive push notificatons from a server and to trigger system notifications that can return a user to the page, even after they’ve closed the browser tab.

There’s a lot to say about each of these technologies- more than I can cover here. If you’re interested in learning more about ServiceWorkers and Web Push or want to start experimenting, here are some resources:

Design Tools in Firefox

Diagram of a submarine with Developer Tools labeled on it

We’re going to need a bigger boat. Firefox 44 puts an emphasis on designer productivity tools with a fantastic animation inspector to complement existing style tools. Climb aboard the DevTools Challenger to learn about these tools, and explore both the deep ocean as you learn how to inspect animations, live-edit keyframes, tweak CSS filters, and more.

More DevTools Goodness

In addition to the aquatic wonders and animation tools, there are other great changes and additions to the Firefox Developer Tools.

WebSocket Debugging

WebSocket debugging is now available as an API in the Developer Tools. While an official UI is under development, you can start debugging WebSockets today with a purpose-built extension.

Use Logged Object in the Web Console

Assigning a logged object to a temporary variable using the Web Console

If you’d like to manipulate or more deeply inspect an object logged in the console, you can now assign it to a temporary variable via the context menu.

Dive Deeper

There’s lots more to love for developers and users alike in Firefox 44- check out the full release notes or view the list of developer-facing changes. Keep on rocking 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)

Trainspotting: Firefox in 2015

Trainspotting is a series of articles highlighting features in the lastest version of Firefox. A new version of Firefox is shipped every six weeks- we at Mozilla call this pattern "release trains".

The year is coming to a close, and even as the coals of 2015 fade to a soft orange, we've got Firefox releases to talk about! Here's a run-down of a few new tricks up the browser's sleeve, as well as a few of my favorite new features from this year.

Firefox 42 and 43 were released since our last Trainspotting post- you can check out 42's release notes here and 43's here.

"Use in Console" in Firefox 43

Let's start with something new and handy- sometimes it's useful to use Console to inspect or tweak an element you found in the Inspector. The traditional way is to use querySelector to find the element, or, in some browsers, the special $0 variable which refers to the element currently being inspected. (If you didn't know about $0, consider it a nice end-of-year bonus!). Starting in Firefox 43, you can now use the "Use in Console" command in the context menu to put that element into a temporary variable. Unlike $0, you can create multiple temporary variables in the Console and highlight other elements without losing your reference. An iterative improvement, but one that makes life easier.

New Privacy and Security Control Center in Firefox 42

control-center

You've always been able to check whether your connection to a website is secure by clicking in the address bar. Firefox 42 includes a redesign of this panel to make it easier to review the security of a website, as well as incorporate privacy settings and what permissions you've granted. It's a nice improvement to an interface that used to take many more clicks.

Easier Element Screenshots in Firefox 41

Right click on a node in the markup view.

This feature proved to be very popular! Firefox 41 added the ability to capture a part of the page from the Inspector with the “Screenshot Node” menu command.

BroadcastChannel in Firefox 38

A personal favorite API of mine- the ability for all open pages on a domain to broadcast messages to one another. Great for keeping app state in sync or event notifications.

// one tab
var ch = new BroadcastChannel('test');
ch.postMessage('this is a test');

// another tab
ch.addEventListener('message', function (e) {
    alert('I got a message!', e.data);
});

// yet another tab
ch.addEventListener('message', function (e) {
    alert('Avast! a message!' e.data);
});

Wrapping up 2015

It’s been a great year, and I’ve had a blast writing about notable new features in Firefox. If you want to learn more about how Firefox has grown and improved this year, read through the Trainspotting post archive.

See you in 2016!

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)

Trainspotting: Firefox 41

Trainspotting is a series of articles highlighting features in the lastest version of Firefox. A new version of Firefox is shipped every six weeks – we at Mozilla call this pattern “release trains.”

Firefox 41 (the Fire-y-est Fox to date) brings a bevy of new and improved features for browser users and web developer audiences. Let’s take a look at some highlights.

For a full list of changes and additions, check out the Firefox 41 release notes.

Screenshot a single element

Need to capture just one bit of a web page? Using the Inspector panel, you can now screenshot the area of a page contained by a single element:

Right click on a node in the markup view.

The result is a snapshot cropped to perfection:

Resulting Screenshot of an element on the page.

Connection status

The navigator.onLine API, historically, wasn’t all that useful. Pages could only inquire whether Firefox itself was in a specific “Work Offline” state, regardless of whether the computer had any network connection. Now, navigator.onLine uses system network information to mirror the state of the device’s Internet connection!

See the Pen QjGoRP by Potch (@potch) on CodePen.

Clipboard management

Copying text on behalf of the user used to be the hardest problem in computer science. Web developers would have to embed a Flash widget on the page just to put some text in the user’s clipboard. No more! Developers can now copy text to a users’ clipboard programmatically directly in JavaScript, provided the user takes an explicit action such as clicking a button.

Read the Hacks Post on clipboard manipulation for more details.

Network Panel HAR exports

We should rename the Network Panel to Hagar, because it’s now HAR-able! HAR is a network request archive format used by many performance and request analysis tools, and it’s now possible to export HAR information from the Network panel from the context menu.

The location of the Save As HAR option in the context menu.

<picture> perfect

In a previous edition of Trainspotting, I provided the following caveat about responsive image support in Firefox:

Responsive images will load using the correct media queries, but presently do not respond to viewport resizing. This bug is being actively worked on and tracked here, and will be fixed in a near-future version of Firefox.

Well, that near-future version is this now-present version! Responsive images will now respond to post-load changes to the page’s viewport. Isn’t it nice when a plan comes together!

There couldn’t possibly be more…

…But there most definitely is. There’s plenty of additional information in the Developer Release Notes or, for large <table> enthusiasts, the full list of fixed bugs.

Keep on rocking 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)

Trainspotting: Firefox 40

Trainspotting is a series of articles highlighting features in the lastest version of Firefox. A new version of Firefox is shipped every six weeks – we at Mozilla call this pattern “release trains.”

Firefox keeps on shippin' shippin' shippin' /
Into the future…
—Steve Miller Band, probably

Like a big ol’ jet airliner, a new version of Firefox has been cleared for takeoff! Let’s take a look at some of the snazzy new things in store for both users and developers.

For a full list of changes and additions, take a look at the Firefox 40 release notes.

Developer Tools

Find what you’re looking for in the Inspector, but don’t know where it is on the page? You can now scroll an element into view via the Markup View in the Inspector:

scroll-into-view

Sift through complex stylesheets more easily by filtering CSS rules:

You can now toggle how colors are represented by Shift+clicking on them in the Rules view:

color-rotate

The Web Console will now warn of code that is unreachable because it comes after a return statement:

unreachable

The Developer Tools have also gained a powerful new set of Performance analysis tools, which are demonstrated along with all the other Firefox 40 Developer Tools changes in this in-depth blog post.

Signed Add-ons

extension-warning

Malicious extensions are a growing problem in all browsers. Because Firefox Add-ons have tremendous power, there needs to be a better way to protect users from malicious code running wild. Starting in Firefox 42, all Firefox add-ons will be required to be signed in order to be able to be installed by end-users. In Firefox 40, users will be warned about un-signed extensions, but can opt to install them anyway. You can read more about why extension signing is needed, and also check out the overall plan for the roll-out of signed extensions.

Event offsetX and offsetY

Sometimes a good idea is a good idea, even if it takes 14 years! Firefox now supports the offsetX and offsetY properties for MouseEvents. This makes it much easier for code to track mouse events on an element within a page, without needing to know where in the page the element is. As always, perform capability checks to ensure that your code works across browsers:

el.addEventListener(function (e) {
  var x, y;
  if (e.offsetX) {
     x = e.offsetX;
     y = e.offsetY;
  } else {
    // addition needed for every offsetParent up the chain
    x = e.clientX + e.target.offsetLeft /* ... */;
    y = e.clientY + e.target.offsetTop /* ... */;
  }
  addGlitterMouseTrails(x, y);
}

But Wait, There’s More!

Every new version of Firefox has dozens of bug fixes and changes to make browsing and web development better- I’ve only touched upon a few. Finally, it’s well worth noting that 55 developers contributed their first code change to Firefox in this release, and 49 of them were brand new volunteers. Shipping would not be the same without these awesome contributions! Thank you!

For all the rest of the details, check out the Developer Release Notes or even the full list of fixed bugs. Happy Browsing!

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)

Trainspotting: Firefox 39

Note: Firefox 39 has been delayed due to a last-minute stability issue. It will be released later this week. We’ll update this post when the release occurs. Stay tuned!

Trainspotting is a series of articles highlighting features in the lastest version of Firefox. A new version of Firefox is shipped every six weeks – we at Mozilla call this pattern “release trains.”

A new version of Firefox is here, and with it come some great improvements and additions to the Web platform and developer tools. This post will call out a few highlights.

For a full list of changes and additions, take a look at the Firefox 39 release notes.

DevTools Love

The Firefox Developer Tools are constantly getting better. We’re listening to developers on UserVoice, and using their feedback to make tools that are more powerful and easier to use. One requested feature was the ability to re-order elements in the Inspector:

Editing and tweaking CSS Animations is easier than ever – Firefox 39 lets developers pause, restart, slow down, and preview new timings without having to switch applications.

Menu of animation easing presets in the Inspector

CSS Scroll Snap Points

CSS Scroll Snap Points in action

CSS Scroll Snap Points let web developers instruct the browser to smoothly snap element scrolling to specific points along an axis, creating smoother, easier to interact with interfaces with fewer lines of code.

Improvements to Firefox on Mac OS X

Firefox gets some Mac- specific improvements and updates in version 39:

  • Project Silk enabled – Improves scrolling and animation performance by more closely timing painting with hardware vsync. Read more about Project Silk.
  • Unicode 8.0 skin tone emoji – Fixed a bug in the rendering of skin tone modifiers for emoji.
  • Dashed line performance – Rendering of dotted and dashed lines is vastly improved. Check out the fixed bug for more information.

Service Workers Progress

Firefox’s implementation of the Service Workers API continues – fetch is enabled for workers and is now generally available to web content, and the Cache and CacheStorage are now available behind a flag.

There’s lots more changes and improvements in Firefox 39 – check out the Developer Release Notes for developer-oriented changes or the full list of bugs fixed in this release. Enjoy!

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)