Mozilla Hacks

New in Firefox 58: Developer Edition

By Dan Callahan

Posted on November 21, 2017 in Developer Tools, Featured Article, Firefox, Firefox Development Highlights, and Firefox Releases

Firefox Quantum made Firefox fast again, but speed is only part of the story. A ton of work has gone into making Firefox an exceptional tool for creating on the Web. Let’s dive into the changes coming in Firefox 58, currently available to preview in Firefox Developer Edition.

More Control for CSS Authors

Following the success of Firefox’s powerful CSS Grid Inspector, we’re excited to introduce a Shape Path Editor for elements with a clip-path property.

Try it yourself on this CodePen by Chris Coyier.

We’ve also implemented the CSS font-display property, allowing authors to specify how long the browser should wait for a web font, and when it should consider swapping in a font once it’s loaded.

Firefox Quantum also introduced a brand new CSS engine (“Quantum CSS”) which fixed numerous bugs and inconsistencies with CSS in Firefox. For example, calc() now works everywhere that the spec says it should.

An Even Better Debugger

Piece by piece, we’ve been rewriting our developer tools in standard Web technologies. In Developer Edition, the Console, Debugger, Network Monitor, and Responsive Design Mode are all implemented in plain HTML, JavaScript, and CSS atop common libraries like React and Redux. This means that you can use your existing web development skills to hack on the DevTools. The source for debugger.html is on GitHub, and we do our best to tag good first bugs and mentor new contributors.

We’ve implemented tons of new features during the rewrite, but the debugger deserves special mention. First, source maps finally work everywhere, and even include proper syntax highlighting for markup like JSX:

Screenshot of the Debugger showing JSX syntax highlighting for a React component You might also notice that the debugger recognized Webpack, and appropriately labeled it in the Sources tree.

Similarly, the debugger can recognize two dozen common JavaScript libraries and group their stack frames in the call stack. This makes it easy to separate the code you wrote from code provided by a framework when you’re tracking down a bug:

Screenshot showing the call stack in the Debugger. Instead of one undifferentiated list, the new Debugger has grouped the stack frames by library, showing React calling Redux calling Lodash.We even implemented “sticky” breakpoints that intelligently move with your code when you refactor or rearrange declarations in a file.

The other tools have also improved: console groups can now be collapsed, the network monitor can be paused, etc.

The best way to discover the new DevTools is to download Developer Edition and try them yourself.

WebVR, FLAC, and Other Tidbits

Firefox is driving new, fundamental capabilities of the Web. Firefox 55 introduced support for WebVR on Windows, and included experimental support for macOS. With Firefox 58, WebVR now is supported by default on both Windows and macOS.

If you’re interested in creating virtual reality experiences on the Web, check out the A-Frame library, or read our article on how Firefox Quantum delivers smooth WebVR performance at 90 fps.

In other firsts, Firefox 51 was the first browser to support FLAC, a lossless audio format, on the Web. Until now, this support was limited to Firefox on desktop platforms (Windows, macOS, and Linux), but Firefox 58 brings FLAC support to Android. That means that Firefox, Chrome, and Edge all support FLAC on every platform but iOS.

We also landed a few changes to help measure and improve Firefox’s performance:

  • The PerformanceNavigationTiming API provides access to performance metrics related to page loading.
  • Off Main Thread Painting (“OMTP”) has been enabled by default on Windows, which improves Firefox’s responsiveness by reducing the workload on the main thread.
  • We’ve enabled budget-based background timeout throttling which slows down scripts running in background tabs to save further CPU resources.

Lastly, Content Security Policies (CSPs) now support the worker-src directive.

WebExtension API Additions

Firefox Quantum removed support for legacy add-ons and added dozens of new WebExtension APIs. Firefox 58 adds even more APIs, including ones to:

For example, Tree Style Tab can now adopt theme colors from WebExtensions like VivaldiFox:

Animated screenshot of Tree Style Tab adopting dynamic theme colors from VivaldiFox

We’re currently planning additional WebExtension capabilities for 2018, including looking into possibilities for hiding individual tabs, or the entire tab bar.

Wrapping Up

These are just the highlights. To learn more about what to expect in Firefox 58—currently available in Beta and Developer Edition—check out the Release Notes and MDN’s Firefox 58 for Developers.

About Dan Callahan

Engineer with Mozilla Developer Relations, former Mozilla Persona developer.

More articles by Dan Callahan…

41 comments

  1. Jim

    It would be nice to have a websocket monitor or something similar to view the websocket messages. The add-on that did this is not working with quantum anymore. Any updates on this matter?

    November 21st, 2017 at 14:05

    1. Dan Callahan

      We’re hoping to restore WebSocket inspection early next year. Bug 885508 tracks the necessary work to make this happen.

      November 22nd, 2017 at 16:21

  2. RS

    Mozilla and the contributors have done an impressive amount of work in this area!

    One thing that I found a little disappointing about the permissions in WebExtensions is that while I’m told what the addon wants, I get no say in this. Is there any possibility that this might change?

    It’s very common for random addons to request access to all my tabs and websites. What if I only want to allow an addon to run on a specific website, or prohibit it from running on certain pages? That would be neat.

    The other thing that’s disappointing is that no addons ask for internet access, meaning that any addon requesting access to my history or tabs is a privacy risk. Firefox is a leader in pushing for privacy; addon internet access rights and per-site permissions would be a great addition to that.

    November 21st, 2017 at 16:07

    1. Dan Callahan

      Selective permissions are a really interesting idea — what should an add-on do when a permission it wants is denied? How would you present the choices to users? Lots of tricky UX bits to solve, but worth considering. I’ll pass along the idea to the add-ons team.

      November 22nd, 2017 at 16:23

      1. James

        Dan,

        its pretty obvious, if the addon doesn’t have permission then either it disables whatever functionality depends on that feature or it breaks. Lots of addons/apps tend to ask for permission for stuff that isn’t directly related to their functionality.

        Its not firefox’s job to make sure that addons are well written, its firefox’s job to make sure users have control of what addons do and that addons have the api’s to do reasonable things.

        November 30th, 2017 at 05:50

  3. Robert Ab

    Firefox 57 and Quantum are definitely big achievements. But at the same time you destroyed a lot of great addons, like SESSION MANAGER / TAB MIX PLUS. I am staying with Firefox 56 (or Waterfox) until you will solve the problem (see below). Firefox is going to loose a lot of advanced users.

    Can you prepare APIs needed by developers of Session Manager / Tab Mix Plus and other similar extensions to make WebExtensions? Some of those developers stated clearly that they will prepare WebExtension only after all APIs will be prepared by Mozilla. The list of needed APIs:
    http://forums.mozillazine.org/viewtopic.php?p=14762057#p14762057
    http://forums.mozillazine.org/viewtopic.php?p=14772668#p14772668
    http://forums.mozillazine.org/viewtopic.php?p=14777435#p14777435

    Also those session manager extensions could cooperate nicely with FF multi-account containers.

    November 21st, 2017 at 22:29

    1. Dan Callahan

      Hi Robert,

      Thank you for the bug references. We’re currently planning what APIs to prioritize next year, and I’ll pass along those lists. I know things like tab discarding are important for bringing other add-ons, like Tab Groups, to Firefox Quantum, so it should be easy to make a case for them. Of course, I can’t promise anything specific. I’ll also caution that some of the cosmetic features of Tab Mix Plus, like multi-line tab bars, are probably not going to make it in the near future, as we’re still trying to figure out how to best handle UI modification in Quantum.

      If you must use an older version of Firefox, please use Firefox Extended Support Release (“ESR”), which is still receiving critical security patches. Other older versions do not. ESR is currently based on Firefox 52, which supports legacy add-ons, though it will upgrade to Firefox 59 in May next year.

      Thanks again,
      Dan

      November 22nd, 2017 at 16:33

      1. Robert Ab

        I would be more interested in reviving SESSION MANAGER.
        I mentioned Tab Mix Plus since this addon has session manager function which requires the same APIs as Session Manager.
        New WEs like “Tab Session Manager” or “MySessions” probably will also benefit from it (currently they are not very useful and still very buggy).

        Are you familiar with this Google document?
        https://docs.google.com/spreadsheets/d/1TFcEXMcKrwoIAECIVyBU0GPoSmRqZ7A0VBvqeKYVSww/edit#gid=0
        (found here: https://www.howtogeek.com/333230/why-firefox-had-to-kill-your-favorite-extension/ )
        According to this document Session Manager will not be ported to Webextension.

        Another page:
        https://arewewebextensionsyet.com/
        does not contain any information about on Session Manager.

        The information on both pages seems not up to date.

        November 22nd, 2017 at 16:55

  4. Sahriar Sykat

    I need http://www.alexa.com/toolbar back. I can’t live without it. please devs.

    November 21st, 2017 at 23:00

    1. Dan Callahan

      I’ll see if I can drop them an email. It should be trivial to port their Chrome version to Firefox.

      November 22nd, 2017 at 16:34

  5. Andrew de Ridder

    Still can’t view websocket frames though

    November 22nd, 2017 at 05:06

    1. Dan Callahan

      Unfortunately, WebSocket inspection didn’t make it into Quantum, but we’re hoping to address it early next year. Bug 885508 tracks the necessary work to make this happen.

      November 22nd, 2017 at 16:10

  6. AngryPenguin

    Guys, what with WebVR for Linux?

    November 22nd, 2017 at 06:59

  7. Roger H Thomas

    Hello, I downloaded the new Firefox and was disappointed to see that my videos have been corrupted. All videos have a green/pink tinge to them. All other features appear to act normally.
    Do you have any suggestions on how to clear the picture?
    Thank you, Roger

    November 22nd, 2017 at 08:50

    1. Dan Callahan

      Sorry about the video issues! We were incorrectly identifying some AMD GPUs, causing the video corruption you saw. A hotfix should have rolled out today which fixes it. You can check for updates manually by going to Menu -> Help -> About Firefox.

      November 22nd, 2017 at 16:18

  8. Daniel Lo Nigro

    Grouping the stack frames for common JavaScript libraries is such a good feature! I’ve been wanting that for a long time :)

    November 22nd, 2017 at 09:35

    1. Dan Callahan

      Thank you for the kind words! It gets even better in 59: we added a little badge next to each group to show how many frames are hidden. :)

      November 22nd, 2017 at 16:35

  9. Kees

    “Firefox Quantum removed support for legacy add-ons and added dozens of new WebExtension APIs.”
    I wouldn’t mind that the classic XPCOM/XUL based add-ons are no longer supported, when there is a replacement for them in the WebExtensions API.

    The reality is that the classic add-ons are now indeed legacy (unless the user *Upgrades* to Firefox 52 ESR), without a proper replacement possible due to lacking functionality in the WebExtensions API.

    There should be a plan to ensure that the functionality of the top-50 add-ons (based on the classic XPCOM list of say two months ago) is in Firefox in about 3-4 months and then in about 6-8 months from now all functionality of the top-100 add-ons should be complete and then the missing functionality for the next add-ons should be added, until most of the add-on functionality used in the past is available again.

    When Mozilla did do its homework correctly doing the first step should be childs play as most of it should be available as a WebExtension API already – I’m afraid this is not the case though…

    November 22nd, 2017 at 12:17

    1. Dan Callahan

      We did our homework and proactively worked with as many add-on authors as possible in advance of Quantum’s release. Rather than wait for perfect, we decided to ship once we were confident that the APIs and the porting rates were good enough. The fact that over 6,800 compatible add-ons are currently available on AMO is a great testament to that work.

      However, we’re absolutely aware that we have more work to do, and we look forward to delivering on that in 2018.

      November 22nd, 2017 at 16:39

      1. Michael

        So is there chance that a widely used addon like Classic Theme Restorer will work in May 2019? Or aren’t there any plans to introduce currently missing API functions?

        November 28th, 2017 at 23:44

  10. pjs

    All of the key rebinding vim/emacs addons are not working anympre. A colleague of mine tried Quantum and discarded it, because there was no alternative to his Surfing Keys addon. I am a long time keysnail user and understand that some other functionality of that addon raised some privacy concerns, but there is no alternative in Quantum. All the pentadactyl and vimperator users will miss their plugins, too. And keyrebindings should work everywhere. The emacsy plugins overwrite ctrl-n to next-line. Can you imagine how many unwanted quantum windows I have opened fast for nothing‽

    There is a bug. Filed two years ago.
    https://bugzilla.mozilla.org/show_bug.cgi?id=1215061

    November 22nd, 2017 at 17:05

  11. Patrik Ä

    Much of the new features are highly appreciated. But I don’t like some of the changes to Responsive Design Mode, specifically:
    – My custom sizes were removed
    – It doesn’t remember last used size
    – The design, buttons are tiny and the margins are huge (i need as much space as possible, i don’t have a 4K monitor) and white background is not appropriate.

    November 23rd, 2017 at 01:21

  12. Magic Johnson

    Hi, is it too much to ask for WebP image format support?
    I’ve been waiting for it for several years. It would reduce internet traffic by a significant percentage.
    Thanks

    November 23rd, 2017 at 08:11

  13. Bernie

    Favorite top sites disappear and cannot be replaced. Instead if 12, I now have nine and three unloadable blanks.
    I am using Windows 10 pro.

    Previous versions had 15 loadable favourite top sites.

    ?????????????????????????????????????

    November 24th, 2017 at 11:31

  14. Jesús Cea

    #Firefox 57 is fast but it is not working for me (Kubuntu 16.04). Many websites shown with broken/invisible font rendering.Unusable in 31% of my bookmarks.What is up, @mozilla @mozilla_hispano @firefox?.Testing with a 100% new profile, no addons, just plain fresh #Firefox install

    Some screenshots:

    https://twitter.com/jcea/status/931720673550065664

    November 24th, 2017 at 17:37

  15. Richard

    My iSkysoft Video Converter won’t download mp3 on Youtube anymore..it says it is not compatible with this Firefox version…any help?

    November 24th, 2017 at 21:09

  16. Alfonz

    Hello,

    well debugger and console messages listing > in previous versions were able to find function definition in code. When function was written in console and clicked. Also it was possible to just click on console log right part(there was page and line number) and see when message came from after click. Currently this does not work on most pages > sometimes it opens viewsource: which seems to find position. But most of time it opens debugger and stops at start of page/script js. It does not work – I thing it got broken in 56 or something like that – this behavior is present in current FF developer 58.0b6. Worst thing is that it behaves differently on same page. In Chrome it works and in FF52 ESR it works also. Just new Firefox is broken.

    I hope that you will be able to fix this, that is much more important than having new functions, when basic ones does not work.

    November 24th, 2017 at 23:05

  17. Jkeks

    Extensions like vimperator / fireguesture wouldn’t work on any tabs ( include about:, not found url and etc..) , but it must do, like at ff56-.

    November 26th, 2017 at 09:49

  18. Alex

    I think we all love the faster firefox quantum. But you have to know that we all do hate to lose the extensions that we had for 10+ years.

    We need more API features. Right now it is still better then Chrome and other browsers, but it is not that special flavor, like it used to.

    I hope you and the team will put a lot of effort to get that flavor of firefox back.

    For example:
    double click close tab
    opendownload
    download manager s3

    Yes I do miss them a lot!

    November 26th, 2017 at 10:03

  19. dave

    You need to address this DRM issue…..I was skeptical of downloading the NEW Firefox as I usually follow the rule “If it isn’t broken don’t fix it” but I did update to quantum and immediately my Netflix quit working in Firefox…as i researched the net I found out a LOT of people are having issues. So I have now downloaded Chrome which i have never done before and it works just fine with Netflix…(this is how you lose users and donations)…..also issuing new or statements about bugs would go along way in saving you users and donations instead of not saying a word about knowing about the issue and a time frame to fix it so users don’t go to other browsers.

    November 27th, 2017 at 08:42

  20. Gy. Owen

    There is no way to enlarge the fonts on the menu bars, tool bars, tabs, etc.
    And Theme and Font Size changer no longer works with Quantum.
    The font size is critical to some of us.
    Please help.

    November 27th, 2017 at 11:31

  21. Sara

    I’d love to see Tilt become compatible with Quantum. It’s such a useful add-on

    November 27th, 2017 at 12:41

  22. Andrea

    I think the new Firefox is not taking off like it should because if the poor UI. If you managed to improve it and make it beautiful, other than fast and powerful, you’d convince more users who switched to Chrome years ago to give Firefox another try (and keep using it)

    November 28th, 2017 at 09:44

  23. Matt Smart

    Good news and it’s getting better with each update. I still miss the color/colour control in the style editor, simply having the hex/rgba color code available isn’t helpful. In firebug you had the option of opening a color picker which was awesome, I appreciate it’s available in the inspector but having it also in the style editor would go some way in making this perfect for my front end needs when planning or changing colour/color in development.

    November 29th, 2017 at 04:33

  24. Rick

    Any idea when Private Tab will work again? Needing a different window for each kind of tab is really the biggest drag I’ve experienced with Firefox 57.

    November 29th, 2017 at 04:37

  25. Rob T

    You think it better well not for us very long time Firefox users it’s not. I lost everything and it looked terrible I guess I’m old school. I have been using firefox at home, work, forever. All you did was make it more chrome like.
    I had to revert back to 56 to get back where I was.
    No more firefox updated for me ever, and I’m not alone.
    It was a good run while it lasted

    November 29th, 2017 at 07:12

  26. voidpointer

    Do you know if/when “global keyboard shortcuts” will get added to extensions? The one thing I miss sorely from Chrome is the ability to map my media keys to Google Music, so I can pause, play, skip songs from my keyboard.

    Any updates on this that you’re aware of?

    November 29th, 2017 at 11:55

  27. Konstantin

    It’s fun to read about all the mentioned bells and whistles, but what about bringing WebExtension API closer (by capabilities) to its predecessor?

    E.g., bookmarks API is still, politely saying, incomplete. The corresponding bug, 1225916, lives in unassigned state for 2 years, but developers seem to be quite calm about that.

    Definitely, bringing WebExtensions API to a state when it can be at least partially as capable as XUL is of much less fun and priority.

    Personally, I see few advantages in quicker debugger, more control for CSS authors and rest of the above blah blah blah, if useful add-ons remain crippled just because developers abandoned working on API. Note that you have already banned old API, without providing fully functional new one. Applause.

    November 29th, 2017 at 16:05

  28. rane58

    I want Voikko back….!
    https://addons.mozilla.org/en-US/firefox/addon/finnish-spellchecker/

    November 30th, 2017 at 09:16

  29. Martin Gray

    Don’t understand this technical stuff but I was hoping that Firefox would stop frozen web pages and stalling. It has not. What can be done?

    November 30th, 2017 at 11:12

  30. Judev5762

    Is it possible to view the source code generate by javascript/jquery when I create dynamic node in DOM ? Web developer toolbar doesn’t give this option anymore. Thanks in advance for your answer

    November 30th, 2017 at 12:31

Comments are closed for this article.