Mozilla Hacks

Firefox Quantum Developer Edition: the fastest Firefox ever with Photon UI and better tooling

By Dan Callahan

Posted on September 26, 2017 in Developer Tools, Featured Article, Firefox, Firefox Development Highlights, and Firefox Releases

Firefox Quantum is now available in Developer Edition, and this Firefox is fast.

As a reader of the Hacks blog, you may be familiar with Project Quantum, our attempt to refactor, redesign, replace, and modernize the very core of Firefox. We’ve shipped many incremental improvements to Firefox in the past, but this release marks the first milestone where we believe Firefox fundamentally feels like a newer, better browser.

To celebrate, we gave Developer Edition a brand new logo:

Why does this feel like a brand new browser? Read on!

Firefox Quantum: Towards a next-gen browser

Developer Edition now includes “Quantum CSS,” an entirely new CSS engine written in Rust and based on the Servo parallel browser engine project. Additionally, the “Quantum Flow” team tracked down and fixed 369 performance bugs in Firefox, with a special focus on responsiveness and UI interactions. Lastly, the “Quantum DOM” project began overhauling how Firefox prioritizes work, responding more quickly to events like user input while delaying less urgent computations until the browser is idle.

The result? Compared to Firefox six months ago, today’s Developer Edition is twice as fast on benchmarks like Speedometer 2.0 that simulate the real-world performance of modern web applications.

Furthermore, Firefox is 64-bit and multi-process by default, and Firefox’s unique architecture allows it to take advantage of modern, multi-core processors while still respecting your available RAM. Meanwhile, the “Quantum Compositor” project significantly reduced crashes caused by buggy graphics drivers.

Photon: Firefox’s new UI

To complement Quantum, the Photon team rebuilt Firefox’s interface to be faster and more modern:

You’ll hear more about Photon in November, but highlights include redesigned menus, square tabs, and a new “Library” button that acts as a single place for your bookmarks, downloads, history, etc. By default, Photon combines the search and URL bars into a single widget, but the old style is only a preference away.

The “Activity Stream” project redesigned the New Tab Page to feature highlights from your recent history and bookmarks, as well as recommendations from Pocket. Of course, each of these content blocks are optional, and add-ons can completely replace the new tab page to create entirely different experiences.

We also refreshed form handling in Firefox, adding a brand new autofill feature and implementing built-in widgets for <input type=date> and <input type=time> elements.

Lastly, Firefox’s preferences were completely redesigned and are now searchable.

DevTools in 57: Redesigned and better than ever

Firefox Quantum: Developer Edition also includes a ton of refined, redesigned, and brand new developer tools.

A few highlights:

  • The Console, Debugger, and Network tabs are now implemented using standard web technologies, including React and Redux, as part of our “devtools.html” effort.
  • The Inspector gained tons of new features for working with CSS Grid, CSS Variables, toggling classes on elements, etc.
  • The Console now supports grouping messages and expanding / inspecting objects in-line.
  • The Debugger offers completely new ways to search, navigate, and debug projects.

And that’s not all. To read in greater depth about what’s new in Firefox Developer Tools, check out Developer Edition Devtools Update.

 

Project Quantum: There’s more to come

Today’s release is a major milestone in Project Quantum, but we’re not done. Future releases of Firefox will include Quantum Render, a brand new, GPU-optimized rendering pipeline based on Servo’s WebRender project, and Quantum DOM Scheduler, a new technique that ensures that tabs in the background can’t slow down your active tabs.

Try out Developer Edition today, or sign up to get notified when Firefox Quantum is released to mainline Firefox. Either way, stay tuned to the Hacks blog to learn more about Project Quantum!

About Dan Callahan

Engineer with Mozilla Developer Relations, former Mozilla Persona developer.

More articles by Dan Callahan…

59 comments

  1. mike

    I have 57.0b3 but it doesn’t have the updated developer tools

    September 26th, 2017 at 08:19

    1. Dan Callahan

      Strange! Do you see any of the new tools, or none of them? Can you try creating a new profile and checking if you see the new tools there?

      September 26th, 2017 at 11:39

  2. Ivan Augusto

    Awesome (as always)!
    Loved the incredible performance (extremely perceptible on Nightly) and input[type=”date”] support :D

    September 26th, 2017 at 09:09

  3. Royi

    Such a joy to see the new spirit in Mozilla.

    Don’t measure your success with the number of users of Firefox.
    You changed the Internet as a whole!

    September 26th, 2017 at 09:50

  4. zakius

    photon is ugly, even if there were performance improvements it could still look like compact australis
    and daily use performance is much worse due to lack of quality of life features that stopped working in 57
    even if browser itself caused some slowdowns being able to use RSS reader and properly implemented mouse gestures (and let’s not forget about the perfect pocket extension) made overall performance better
    57 is just as crippled as chrome, chropera, edge and others

    September 26th, 2017 at 10:50

    1. Dan Callahan

      The a “Density” option in the Customize menu has a compact option that makes Photon look like the previous compact themes from Australis. The colors are different, but the WebExtension Theme APIS can change that. Additional visual customization options are on the way.

      Support for mouse gestures definitely needs more work, but we’ll get there. Bug 1360278 or similar will likely be one of the first steps toward that goal.

      September 26th, 2017 at 11:38

      1. zakius

        and what about the safelist disabling all contentscripts on certain websites and schemas? it makes it impossible to (easily?) implement gestures properly

        and still, full pocket and newsfox(like reader) are other core features, without them ff is just another chromium but slower (I’m aware of smart rss fork aiming to bring webextensions compatibility, but it’s interface need some crucial fixes to make it on par with newsfox, I’m also aware of in my pocket and one firefox targetted extension that try to replicate the og pocket extension, but both are sub par to say the least)

        seriously, firefox users are split into two groups: ones who wouldn’t notice if they switched browsers as long as their bookmarks are there and ones relying on the power brought by extension
        I guess you are trying to satisfy the first group, while leaving the second one crying

        September 26th, 2017 at 13:05

      2. zakius

        and BTW, are you sure that this
        https://zakius.s-ul.eu/7KkL2rJV.png
        looks like this?
        https://zakius.s-ul.eu/EbNMbJ06.png

        September 27th, 2017 at 07:22

  5. YF

    Mouse gesture is such a basic feature. And right now it doesn’t work every within the browser. Why not just let photon come with an official mouse gesture function?

    September 26th, 2017 at 12:41

  6. Ashoksinh

    this is really superfast…
    Finally receive what we want Privacy+Superfast+trust.
    love firefox :)

    September 26th, 2017 at 17:58

  7. Piyush

    Scrolling webpages have lot janks in my Android phone.

    September 26th, 2017 at 19:59

    1. Dan Callahan

      Sorry to hear that – do you still see lots of jank with Firefox Nightly on your Android?

      October 2nd, 2017 at 11:50

  8. noone

    A performance update was desperately needed, but why on earth does every freaking update changes the UI I got used to…

    September 27th, 2017 at 01:12

    1. Dan Callahan

      Sorry about that :( Superficially, we periodically need to refresh our UI to keep things looking modern and consistent with prevailing aesthetics. Deeper than that, we conducted studies and found that Firefox’s UI had several areas of poor usability (the menu grid, etc.) that we’ve been able to improve with Photon.

      It’s different, and change can be annoying, but we have data that shows that it’s ultimately a faster, more usable design.

      October 2nd, 2017 at 13:35

    2. SYSMAC

      While I do appreciate the performance improvements it has caused me a lot of headaches:
      1. Banking – if I click OK on cookies message used to disappear and full login screen available. Now screen refresh back to same screen…loop
      2. Online Surveys – do lots of these (pensioner untaxed earnings :) , but since Quantum appeared many scroll down menus on various websites show, BUT, no action when I select an item,

      I’m sure these could be to do with Remote sites interface, etc. But it does make the overall Quantum experience slower and gnashing of teeth occurs.

      I do agree it looks blockier that previous FF version, and the effort taken to use the hamburger / options / customise seem less intuitive than before.
      Please remember some of us are retarded old farts (OAP’s).

      But keep up the great work providing an alternative to the Internet Monopolisers (G,Fb, etc).

      October 3rd, 2017 at 03:42

  9. JB

    Fantastic update.

    The increase in speed is definitely noticeable.

    Congratulations on a job well done so far.

    September 27th, 2017 at 03:15

  10. Aek

    Those icons.. Jeeeez.. Who designed them???

    September 27th, 2017 at 03:33

  11. Sergey

    I love FireFox, but it is very slow debugger… Just for that use browsers based on WebKit.

    September 27th, 2017 at 12:01

    1. Harald Kirschner

      We are prioritizing performance issues on the devtools for 57 and more is coming for 58. Keep an eye on Nightly. If you find specific issues, you can help by reporting them: https://developer.mozilla.org/en-US/docs/Mozilla/Performance/Reporting_a_Performance_Problem

      October 9th, 2017 at 20:50

  12. JeanJ

    I appreciate all progerss made with Quantum and Servo but Photon it is regeress for me and is ugly. FF Devs writes taht Photon is highly customizable. It is not true. Lot of customization possibilities wihch are possible now, will vanish after update to FF57. Permanent hamburger menu position, no toolbars for addon icons, personas instead full themes , additional menus which are fallbacks for downloads, bookmarks and addons ect. for me it is regress.
    Web extensions, yes this tehnology is safe, and easy in maintain, but is limited in functionalities comparing to XUL addons. Why not to develop some other standard which will be more powerful than WebExtensions? This changes will force me to stop updating FF on version 56.

    September 27th, 2017 at 14:28

    1. Dan Callahan

      For power users, userChrome.css isn’t going away, and we’re not done with the WebExtension APIs. We’re actively expanding the dynamic theme APIs. The heyday of Classic Theme Restorer is probably over — we just can’t maintain software that offers public hooks that deep into the underlying implementation — but we’re absolutely not done with WebExtensions. We think WebExtensions are already at a point that’s more than sufficient for the vast majority of users, but they will continue to get more powerful over time to better serve power users.

      October 2nd, 2017 at 13:41

  13. Julie

    When will the new browser be available for download?

    September 27th, 2017 at 15:02

    1. Dan Callahan

      You can download Firefox Quantum: Beta and Firefox Quantum: Developer Edition today. Normal, stable Firefox will be upgraded to Firefox Quantum next month.

      October 2nd, 2017 at 13:43

  14. Craig

    How do you fancy while looking at tabs and the general aesthetic adding a few of the features that will be vanishing as part of the plug-in apocalypse?

    I, like a lot of people run tab mix plus to change the size of tabs for running large numbers of tabs. Tab management is my main reason for sticking with Firefox (well, for the last 10 years, customisation and firebug, but that seems to be out the window)). I also allow my tab bar over multiple lines too.

    Will you be extending the customisation further to allow things like this?

    Thanks

    Craig

    September 28th, 2017 at 05:18

    1. Dan Callahan

      While I can’t speak to specific feature requests (multiline tabbar, etc.), we are looking into expanding our APIs to better account for features of Tab Mix Plus and similar. Watch the dependencies of Bug 1226546 for progress on that.

      October 2nd, 2017 at 13:46

  15. Mikey Pee

    I love it! looks great and you can really feel the difference in speed. Great work!

    September 28th, 2017 at 12:31

  16. Wellington Torrejais da Silva

    Good news! I’m love mozilla products and using Firefox Nightly every day on many devices. Thanks.

    September 28th, 2017 at 12:42

  17. Tom

    Happy to see Firefox back on the battle ground. No doubt, version 57 beta shows the November Firefox still needs improvement though. As a non-expert user I would like to comment on the visual aspect of 57:
    some pop-up menu animations are “too snappy” and a bit nervous,
    the coloured frames around the address and search bars (when active) seem too aggressive, perhaps dark grey could be better; the blue line over the active tab could be less prominent too
    As for the browsing speed, it’s amazing.
    Generally, a huge leap into modernity!
    Best regards

    September 28th, 2017 at 13:05

  18. Alexandre Leduc

    Can we now view the DOM properties of an element in a panel just by clicking on it in Inspector, like we used to be able to do in Firebug?

    There is a bug open for that but it doesn’t seem to get a lot of attention
    https://bugzilla.mozilla.org/show_bug.cgi?id=704094

    If you already have a DOM properties panel implemented for the split console, why not:
    1: Mimic Firebug and move it next to the Rules, Computed, Animations and Fonts panels on the right of the Inspector.
    2. Mimic Firebug and auto update the DOM properties that are displayed when an element is selected in the Inspector. We shouldn’t have to click “Show DOM properties” each time we select a new element, just like we don’t have to click a “Show CSS rules” for CSS rules panel to display the currently selected element’s CSS rules.

    September 28th, 2017 at 13:57

    1. Harald Kirschner

      I would love to understand your use case better that requires stepping through the Inspector while scanning for DOM properties. If you have a minute, could you comment on the bug with your user story on what kind of problem this solves?

      Have you looked at the DOM panel for this purpose?

      October 9th, 2017 at 20:57

  19. Ass

    1) Does Firefox still lag and occasionally freeze some seconds with 1000+ tabs open ?
    2) How’s the RAM usage with that ? Can tabs be unloaded to be kept open with their original URL & page input but use minimum RAM only ?
    3) Can I access the menus as easy as with previous Firefox version ?
    4) Have there features been removes, if so which ?
    5) Do or don’t addons work with that, which type of addons, why, alternatives to possible yes / no ?
    6) Let’s make this a simple yes / no answer: Does this version of Firefox really make use of multiple cores. Really, really (a cap?) ?
    7) What slow and memory intense parts does Firefox still have ?
    8) Library: Combined bookmarks, downloads, history… Picture ? Collected data ? Ability to seperate (able to delete either only downloads without wiping the page history AND ability to only delete the page history without removing the download history ?
    9) Features: Search features for tabs (URL, loaded tabs: page content, page title) existing yes / no ?
    10) Security: NoScript / Umatrix / Ublock origin working with that version of firefox; Session: Session Manager working ?; Menus: Addons to get rid of right-click menu items that’ll never be used and are just bloating the list still possible ?; Videos: Possible to stop Youtube videos from autoplaying (including video after video, including in playlist automatically next while allowing repeat of the same video ?; tracking / data collection: What changed ? (link to another page explaining that is ok); Utility: Greasemonkey still working ?
    11) Finally a simple UI ? Would be something that has a configure button on each element to receive it’s feature name and an option to configure it as well as an initial “how would you like your UI” configuration opposed to making all decisions itself instead of allowing the user to do that, just like Microsoft ?
    12) What about user help and user requests ? Are the devs only doing whatever they want or actually work on things people actually asked for, criticized or want removed ?
    13) “Faster” isn’t an argument. As long as the pages don’t load slow I don’t need “faster”. I need a browser with LITTLE ANNOYANCES. You know, if the UI is redesigned, and the library part not further explained while this has been annoying to handle and addons probably broken. That kind of thing. Anyone ever thought about that if I open a new tab I just want a new tab, not some obnoxious new page loading some kind of stuff I never asked for (and thus a setting to make it a blank page again) ? Simple yes / no: Are the FF devs working on minimizing and getting rid of annoyances ?

    September 29th, 2017 at 09:24

    1. Dan Callahan

      WordPress isn’t well suited to longer comments; sorry. Hopefully this hits the high points:

      Firefox should perform as well or better than any other browser with 1000+ tabs open, though this is largely a function of your available RAM. I routinely have ~100 tabs open without ill effect. Additionally, Firefox can unload tabs from memory, and Bug 1322485 will soon expose that internal API to third party add-ons.

      The menu bar is visible when you press Alt. You can also turn on the menu bar permanently in the Customize view (look under “Toolbars” in the bottom left of Customize).

      This version of Firefox is fully multi-process. You can adjust how many processes are used for web content in Preferences; we default to 4.

      Typing in the URL bar will automatically also search your open tabs, bookmarks, etc. and offer the ability to switch to them.

      Autoplay blocking is in the works, and should be enabled by default in Developer Edition. UMatrix, NoScript, etc. are all WebExtension compatible, or have updates in the works.

      We’re trying to build the best browser we can, guided by professional user experience and product designers, telemetry, and user feedback.

      October 2nd, 2017 at 14:00

  20. Chris Cohier

    Personally I switched to chrome because FF was a RAM hog and it lacked native dev tools.

    Now I will reconsider installing it, but I’m not sure if I agree with the “web censorship” policies they want to implement (along with google, Mainstream media and the powers that be)

    September 29th, 2017 at 12:08

    1. Dan Callahan

      …what web censorship policies?

      October 2nd, 2017 at 14:04

  21. Kimi

    Can’t wait to try Firefox Quantum but I have a problem when click download button in Firefox Developer Edition page (https://www.mozilla.org/en-US/firefox/developer/) it download Firefox Setup 52.4.0esr.exe? Not Firefox Developer installer.
    I’m using window 10 PRO 64bit. It it a bug?

    September 29th, 2017 at 20:58

    1. Dan Callahan

      That’s odd. You can download directly and skip the detection step.

      October 2nd, 2017 at 14:05

  22. Artur Haurylkevich

    Hi there! What is the main (big) difference between Firefox Quantum Developer Edition and Firefox Nightly in a nutshell?

    September 30th, 2017 at 07:09

    1. Dan Callahan

      Nightly is the most up-to-date, in-development version of Firefox, while Beta and Developer Edition are our pre-release testing grounds. So while Beta and DevEdition are currently at version 57, Nightly is where we’re building 58.

      October 2nd, 2017 at 14:06

  23. Wes

    Can tab previews be added? It’s a feature i absolutely love from other browsers and it’s a bummer it isn’t in Firefox. I am absolutely loving version 57 and it’s definitely got me interested in switching from Chrome but tab previews are just so nice

    October 1st, 2017 at 02:30

    1. Dan Callahan

      When / where do you want to see those previews?

      October 2nd, 2017 at 11:21

  24. Dale

    DO NOT LIKE IT unless a “MENU” BAR is added.

    October 1st, 2017 at 11:37

    1. Dan Callahan

      The menu bar appears automatically when you tap Alt. You can turn it on permanently via Menu -> Customize -> Toolbars -> Menu Bar.

      October 2nd, 2017 at 11:21

  25. Chuck

    Can’t get any XDEBUG cookie helper to work with this new version. Huge PITA and now I have to spend time trying to figure out how to get functionality back that I had before this update.

    October 2nd, 2017 at 14:00

    1. Dan Callahan

      I’m not familiar with xdebug, but it looks like there are several open source add-ons that should work. Can you provide me with a demo site and instructions to test and I’ll see if I can get any necessary bugs filed.

      October 2nd, 2017 at 14:23

  26. Mike

    Loving the new Firefox even in it’s pre-release versions it is quite impressive. I wish people read all the specs and features before judging it. It’s a very well rounded browser in my opinion. Really liking what I’m seeing, perhaps I will return to my Firefox fanboy days!

    October 3rd, 2017 at 06:39

  27. Marcin W. Dąbrowski

    Oh my… Indeed, the rendering engine in Firefox Quantum Dev. Edition is fast.

    But the browser is slow (and it’s fresh install, fresh profile, nothing imported!). Why? Because the user interface isn’t as flexible and consistent as in Aurora/Classic.

    For example: context menu submenus appear on hover, while in main menu it requires clicking (slow, inconsistent). Getting back requires moving cursor, another click, and getting cursor back – so missclicks are extremely expensive and punishing for the user.

    Photon design principles have Adaptability as the first item – yet I can’t move interface element freely (order: title/menu/navigation&address/bookmarks/tab–bar/content–window is impossible to achieve). And of course TabMixPlus – keeping everything in order without TMP is time consuming and error prone (which again – makes the interaction slow).

    Navigation with mouse – thankfully there are some WebExtensions for gestures, but again – inconsistency, the gestures doesn’t work across the whole browser, as a.m.o, about: and other internal pages are not accessible to WebExt’s.

    Keyboard navigation – keeping fingers crossed for Bug 1215061 and replication of even a part of wonderful :kmag’s Pentadactyl, because keyboard shortcuts are now not editable of course – and selecting alternate tab (switching between two tabs) is impossible. Adding navigation commands to GCLI might also be helpful.

    Also, I’ve checked RAM usage… It swallows RAM like Cookie Monster in a bakery. Not fun to watch… :(

    To summarize my comment, as of today, the UI is lacking, distracting, limiting, inconsistent, non–configurable and as such leads to frustration when I want to work with it.

    I will keep my fingers crossed, but at the same time I’m very afraid of November and when the 57 drops into Release. :(

    October 6th, 2017 at 10:05

    1. Dan Callahan

      Sorry about the lack of flexibility (and the extension blacklist for about: and addons.mozilla.org pages). I’m hopeful that we’ll extend the customization APIs in the future. Until then, there’s a there’s a subreddit dedicated to unsupported UI tweaks at /r/FirefoxCSS. On Nightly and DevEdition, developers can create WebExtension Experiments that hook more deeply into the UI. Experiments are being to prototype an API that hides the tab bar, for example.

      I spoke with our UX folks a few months ago regarding sub-menus. They swear that they tested both instant and delayed hover-to-open, but that it just didn’t work as well for most users. You can still add buttons for individual submenus (bookmarks, history, downloads, etc.) to your toolbar in Customize mode, which eliminates a click. In that mode, the Bookmarks button does have classic style hover-to-open submenus.

      You can tweak the RAM overhead by adjusting the number of content processes on the General page of about:preferences. Look under the Performance heading (you might have to uncheck “use recommended performance settings” to see the manual controls). Unfortunately, in many cases we’re bound by the weight and complexity of the pages themselves.

      October 7th, 2017 at 11:39

      1. Sladi

        Hi,

        You did not explain why the context sub-menus show on hover, but the main sub-menus does not?

        I am interested to try the new developer tools, and the scheduler is a good thing for those laptop CPUs.

        Regards,
        Sladi

        October 13th, 2017 at 11:55

  28. Cuongtv

    I’m using Quantum beta on Linux Debian 8 kernel, It’s very good, but when playing any Youtube video, the video is not smooth, I think it has problems with v-sync screen.
    Thank you!

    October 6th, 2017 at 20:24

    1. Dan Callahan

      Are you seeing those problems with builds downloaded directly from mozilla.org?

      October 7th, 2017 at 11:21

      1. Cuongtv

        I use the version Developer Edition.
        This’s image for video tearing: https://photos.app.goo.gl/QalFEerlJWPiZe0H3
        Thank you!

        October 8th, 2017 at 20:14

  29. Philipp

    How can I implement my own density and make some UI elements to use advantages of Retina screen. I would like to make tool & tab bars to become more compact.

    October 7th, 2017 at 07:16

    1. Dan Callahan

      Firefox Quantum doesn’t officially support the same degree of UI modifications are legacy Firefox. However, there’s a subreddit dedicated to unsupported UI tweaks at /r/FirefoxCSS.

      October 7th, 2017 at 11:25

  30. daler5150

    I see alot of extensions are not compatible. Windscribe being one. Any fixes in the near future?

    October 8th, 2017 at 01:34

  31. Karen

    I need tab groups back desperately. How can I get them?

    If not, when?????!!!!!

    October 8th, 2017 at 18:17

  32. shelly

    I downloaded this stupid browser and opened it from the folder. It removed all my old firefox bookmarks and Firefox is already running messages. I hate this browser. Use it with caution. How can i restore it to the old one ??

    October 9th, 2017 at 05:37

  33. Dreamwebs

    I use Firefox Quantom Developer and it works great. I have one question.

    I have to use Alt-Cmd-i to toggle the developer tools.

    Is it possible to put an icon in the toolbar so i just have to click once and get the developer tools right away?

    I couldn’t do this. Maybe it’s impossible?

    Thank you.

    October 10th, 2017 at 01:34

  34. Siamak Alavi

    I just saw the news of the upcoming Quantum release in November, and the pictures are shocking!
    The new looks (photon or whatever name it has) is SUPER SUPER UGLY!
    What is wrong with you!!!???
    What happened to the beautiful curved-lined trapezoid-like tabs? Why ugly rectangles?
    Why is EVERYTHING so ugly!!!???
    Is there a setting to change the looks back to what Firefox looks pre-Quantum?
    If there isn’t then why don’t you add that setting?
    Why did you do this?
    Please advise.

    October 11th, 2017 at 23:59

  35. Luke

    I do hope this new versione will come with official admx files for management in group policy. Otherwise companies will stop using firefox.
    Thanks.

    October 13th, 2017 at 07:16

Comments are closed for this article.