Mozilla Hacks

Firefox 53: Quantum Compositor, Compact Themes, CSS Masks, and More

Avatar photo By Dan Callahan

Posted on April 19, 2017 in Featured Article, Firefox, Firefox Development Highlights, and Firefox Releases

Firefox 53, available today, includes the following key new features and enhancements.

Quantum Compositor Process on Windows

One of the first pieces of Project Quantum, the Compositor Process, has arrived on Windows. Compositors are responsible for flattening all of the various elements on a webpage into a single image to be drawn on the screen. Firefox can now run its compositor in a completely separate process from the main Firefox program, which means that Firefox will keep running even if the compositor crashes—it can simply restart it.

For more details on how this aspect of Project Quantum reduces crash rates for Firefox users, check out Anthony Hughes’ blog post.

Light and Dark Compact Themes

The “compact” themes that debuted with Firefox Developer Edition are now a standard feature of Firefox. Users can find light and dark variants of this space-saving, square-tabbed theme listed under the “Themes” menu in Customize mode.

Screenshot of the new compact themes in Firefox

New WebExtension Features

WebExtensions are browser add-ons that are designed to work safely and efficiently in Firefox, Chrome, Opera, and Edge, while also supporting powerful features unique to Firefox.

In Firefox 53, WebExtensions gained compatibility with several pre-existing Chrome APIs:

  • The browsingData API lets add-ons clear the browser’s cache, cookies, history, downloads, etc. For example, Firefox’s Forget Button could now be implemented as a WebExtension.
  • The identity API allows add-ons to request OAuth2 tokens with the consent of the user, making it easier to sign into services within an add-on.
  • The storage.sync API allows add-ons to save user preferences to Firefox Sync, where it can be shared and synchronized between devices.
  • The webRequest.onBeforeRequest API can now access the request body, in addition to headers.
  • The contextMenus API now supports adding menus to browser actions and page actions.

Firefox 53 also supports the following unique APIs:

New CSS Features: Positioned Masks and Flow-Root

Firefox 53 supports positioned CSS Masks, which allow authors to partially or fully hide visual elements within a webpage. Masks work by overlaying images or other graphics (like linear gradients) that define which regions of an element should be visible, translucent, or transparent.

Masks can be configured to use either luminance or alpha values for occlusion. When the mode is set to luminance, white pixels in the mask correspond to fully visible pixels in the underlying element, while black pixels in the mask render that area completely transparent. The alpha mode simply uses the mask’s own opacity: transparent pixels in the mask cause transparent pixels in the element.

Many masking properties function similarly to the equivalent background-* properties. For example, mask-repeat works just like background-repeat. To learn more about the available properties, see the documentation on MDN.

The specification also defines methods for clipping based on shapes and vector paths. Firefox 53 has partial support for clipping, and complete support is expected in Firefox 54.

Lastly, Firefox also supports the new display: flow-root value, which achieves similar results to clearfix, but using a standard CSS value instead of pseudo-elements or other hacks.

A Better Default Media Experience

Alongside many other UI refinements in Firefox 53, the default <video> and <audio> controls got a new, modern look:

Screenshot of the default HTML5 video controls in Firefox 53

Additionally, Firefox 53 includes brand new anti-annoyance technology: By default, HTML5 media will not autoplay until its tab is first activated. Try it by right-clicking on this link and choosing “Open in New Tab.” Notice that the video doesn’t start until you change to that tab.

Edit: Autoplay blocking is scheduled for Firefox 54, not 53. Oops. (Bug 1308154)

64-bit Everywhere

Windows users can now select between 32-bit and 64-bit Firefox during installation:

Screenshot of the Firefox installer on Windows offering a choice of 32-bit or 64-bit

We’ve also removed support for 32-bit Firefox on macOS, and for processors older than Pentium 4 and Opteron on Linux.

More Info

To find out more about Firefox 53, check out the general Release Notes as well as Firefox 53 for Developers on MDN.

About Dan Callahan

Engineer with Mozilla Developer Relations, former Mozilla Persona developer.

More articles by Dan Callahan…

67 comments

  1. John

    This dark compact theme looks nice but it needs more improvements.

    April 19th, 2017 at 10:20

    1. Dan Callahan

      Are there any specific improvements you’d like to see?

      April 19th, 2017 at 12:02

      1. George

        There is a large gap between the window controls and the tabs. I think the spacing in Chrome looks much better.

        Firefox 53: https://i.imgur.com/prUQ4qN.png
        Chrome: https://i.imgur.com/quH6SLl.png

        April 19th, 2017 at 14:22

        1. Tim

          Chrome looks better in a screenshot but it’s harder to use. I have real trouble trying to drag a window in Chrome. The draggable area is *tiny*!

          April 19th, 2017 at 19:56

        2. Jose

          It’s all good on Win7: http://prntscr.com/eylfic

          April 20th, 2017 at 00:45

      2. DD

        Hi,

        I just wanted to point out there seems to be a weird bug with the Hacks blog, here in the comments section. Not only does the author of the article get their comments tagged with the Author tag, the comments underneath the author’s comment also get the author tag.

        I reported this here, https://github.com/webcompat/web-bugs/issues/6332#issuecomment-298729789 but everyone was unsure how to officially pass this along to the Hacks blog maintainers. Might you be able to pass this along? Thank you.

        May 10th, 2017 at 21:39

        1. Potch

          There sure is! It’s an issue with the stylesheet, fixing that now. Thanks a bunch!

          May 11th, 2017 at 11:27

  2. jxn

    Thanks for the Rick-Roll. Any ETA for bringing Quantum compositor to Linux? It might be a smaller marketshare, but I feel like the state of GPU drivers makes it the biggest win on that platform stability-wise.

    April 19th, 2017 at 11:07

  3. michael

    Nice update. I welcome the themes. So now end users no longer have to install firefox developer edition to enjoy a dark theme. Thanks a lot!

    April 19th, 2017 at 11:31

  4. FJ

    Why not put an option to NEVER autoplay html5 videos? Most bigger sites have ditched flash videos and so new html5 videos are autoplaying. This is annoying especially on countries with spotty internet connections

    April 19th, 2017 at 11:34

    1. Dan Callahan

      We don’t have a comprehensive solution yet, but setting media.autoplay.enabled to false in about:config should get you most of the way there.

      April 19th, 2017 at 15:15

      1. Xadiq

        FlashStopper addon also does the job. You can specify which sites to allow autoplay (permanently or temporarily). Also stops GIFs if needed.

        April 20th, 2017 at 01:19

        1. sam

          Hi,
          i want to run all web sites in my web browser Firefox and here is administrator restriction so can u tell me how to run all the sites…through crack restriction.
          thank you.

          April 24th, 2017 at 04:27

          1. Dan Callahan

            We don’t support circumventing restrictions like that, but maybe the unofficial “portable” build of Firefox from portableapps.com would work for you? It allows you to run applications from a USB drive, without requiring installation.

            April 24th, 2017 at 08:15

  5. ClaudioM

    I do like the new Compact themes along with all of the other changes that make up Fx 53. Hopefully, the Compact themes would eventually be able to follow GTK+3 theme styles and colors. Not a deal breaker, but it would give the Compact themes more polish in Linux and other *nix systems.

    April 19th, 2017 at 12:04

  6. Xerathus

    “Additionally, Firefox 53 includes brand new anti-annoyance technology: By default, HTML5 media will not autoplay until its tab is first activated. Try it by right-clicking on this link and choosing “Open in New Tab.” Notice that the video doesn’t start until you change to that tab. ”

    This doesn’t work. It starts the video immediately. Normal other tabs without videos do reload (activate?) which is new though so I guess it’s partially working ?

    April 19th, 2017 at 12:11

    1. Dan Callahan

      Oh no! That was actually unintentional. The auto-play blocker is scheduled for the next Firefox release, not this one. Sorry! (I’ve updated the post accordingly.)

      April 19th, 2017 at 12:55

  7. minimalist

    I like the color scheme for the darker compact theme. But it does not seem to differ much in space waste compared to the default theme. Are more details (comparison shots) available on how many pixels are saved where with the compact themes?

    April 19th, 2017 at 13:22

    1. Dan Callahan

      The compact themes save about 15px on macOS: http://imgur.com/a/h1OdJ It’s not enormous, but it does make a difference.

      April 19th, 2017 at 15:34

      1. Dan

        The compact theme saves vertical space, but loses horizontal space. There is much more padding to the left of all the tabs, and to the right of all the tabs, as is clearly visible in your imgur link. Is this a bug? Cheers.

        April 19th, 2017 at 23:59

        1. Dan Callahan

          There is more padding on the left to ensure that the window is still draggable without accidentally hitting the maximize button. It’s a compromise between horizontal compactness and usability.

          April 20th, 2017 at 08:10

          1. Dan

            Ok, but why is that different to the default, non-compact theme, which has ample room, IMO. Here is what it looks like on my setup: http://imgur.com/a/Eudo2

            April 20th, 2017 at 21:53

  8. Ludwig Stecher

    I like the new compact themes, except that they can’t be used with a background image.

    It would be much better if I could select a theme (from addons.mozilla.org) AND choose between the default and the compact mode.

    April 19th, 2017 at 13:36

    1. Dan Callahan

      I suspect this will be possible later this year when Project Photon, our UI redesign, lands. The current mockups have the compact / normal modes as a separate “density” setting, independent from the theme setting.

      April 20th, 2017 at 08:20

  9. Jose

    Do we need to uninstall 32bit Firefox first in order to install 64bit?

    April 20th, 2017 at 00:48

  10. Shady Fluke

    The new compact theme is really neat.
    …but I wonder if there is an easy way to change the blue tab color to something less distracting?

    Thanks for all the great work!

    April 20th, 2017 at 01:24

    1. Dan Callahan

      It’s definitely Not Supported, but you can override the color in userChrome.css (Example)

      April 20th, 2017 at 09:25

  11. FJ

    I have installed firefox 53 on two machines. Both are on the latest windows 10, one has only an integrated intel video card, the other one is a lenovo laptop with both an intel and a nvidia card. None have two firefox processes running. Is there a way i can see why it isn’t enabling the two processes?

    April 20th, 2017 at 05:35

    1. Dan Callahan

      There should be some indication in about:support. Especially look around the “Multiprocess Windows” and “Graphics” -> “Decision Log” sections.

      April 20th, 2017 at 09:29

      1. FJ

        Thanks, multiprocess is disabled due to my addons.
        Here’s my list: do you know which one(s) of them causes multiprocess to get disabled?

        Downthemall
        Flashstopper
        Gcache
        Right links
        ublock origin
        user agent switcher
        youtube video and audio downloader

        April 20th, 2017 at 13:14

      2. FJ

        To answer my own questions, i have several addons which disable multiprocess. They are g+cache, flashstopper and user agent switcher.

        April 20th, 2017 at 13:42

  12. MakoSDV

    I think the compact themes are definitely an improvement, but I still had to switch back to using Classic Theme Restorer to get the functionality I wanted. I’m dreading when legacy addons are no longer going to be supported in Firefox 57.

    April 20th, 2017 at 07:59

    1. Dan Callahan

      What specific features do you want, that CTR offers?

      April 20th, 2017 at 08:07

      1. Miles Raymond

        Only CTR can make a new Firefox look like an old Firefox. No theme I’ve seen can put tabs back on the bottom, show the menu bar, etc.

        April 20th, 2017 at 09:34

  13. gr

    Yes but why add new fonctionnality if the browser crash always with two or three tab opens ? Since i’ve upgraded to a version 40 and now to 50 and more, still the same probleme, before with 30 i don’t have this problem !

    My hardware is 2020m processors, 6gb memory, 1to ssd disk, nvidia geforce 710m and it can run firefox since version 40 (i d’ont remember exactly the one!)

    April 20th, 2017 at 09:43

    1. Dan Callahan

      Firefox absolutely should not crash that often. Have you tried following the suggestions for troubleshooting crashes?

      April 20th, 2017 at 10:03

  14. Elijah

    Nice improvement for json viewer in new tab and in dev tools.
    Unfortunately, filtering doesn’t work as expected for objects and arrays.

    For example, if i filter json object by property name, and property is array, i can’t expand this array and see elements.

    April 20th, 2017 at 09:48

    1. Dan Callahan

      Thanks for the report! I’ve filed Bug 1358192 to track this.

      April 20th, 2017 at 10:01

  15. Ubuntourist

    So, six years ago…

    > Implement the WebVTT element…
    > https://bugzilla.mozilla.org/show_bug.cgi?id=629350

    The most recent “depends on” comment was two months ago…

    Any way to nudge that along?

    April 20th, 2017 at 10:00

    1. Dan Callahan

      The top level bug activity can be a bit misleading; it looks like there’s more life further down the dependency tree. E.g., a patch for Bug 1353689 just passed review two days ago. I’ll add the metabug to DevRel’s tracker so we get notified if it goes more than a quarter without meaningful activity.

      April 20th, 2017 at 10:17

  16. Anthony

    Does FF 64 bit work with Trusteer now?

    April 20th, 2017 at 10:18

    1. Dan Callahan

      Looks like we’re having difficulty reproducing most of the Trusteer issues that I can find in Bugzilla. If you’re having a specific problem, please file a bug and set it to block Bug 1320970.

      April 20th, 2017 at 10:31

  17. Hermann Hoor

    leider kann ich dies nicht kommentieren bzw. meine Meinung kundtun, da dies auf englisch ist. Meine >Muttersprache ist DEUTSCH

    April 20th, 2017 at 10:33

    1. Dan Callahan

      Entschuldigung. Die Release Notes werden von Freiwilligen übersetzt. Wenn eine Übersetzung gemacht wird, befindet sie sich unter https://developer.mozilla.org/de/Firefox/Releases/53

      (Dieser Kommentar wurde von Google übersetzt. Mein Deutsch ist nicht sehr gut…)

      April 20th, 2017 at 10:43

  18. Doug

    I’m seeing a rounded tab overlay on top of active tabs in the compact light theme. Is there a way to get rid of the overlaid tab, and just have the active tab solid blue?
    http://i.imgur.com/xlLL0AL.jpg

    April 20th, 2017 at 12:55

    1. Dan Callahan

      That’s definitely not right. Does it still happen in Safe Mode? What about if you create a new Profile?

      April 20th, 2017 at 13:12

  19. Francesco Miglietta

    What about HTML5 support regression?
    I score 2 points less in HTML5TEST site because of missing support to HTML5 beacon that was supported in Firefox 52.

    Thank you in advance

    April 21st, 2017 at 02:42

    1. Dan Callahan

      sendBeacon is working for me on Firefox 53. Maybe an add-on or other setting is blocking it on your end? Either way, html5test.com makes some really weird choices about what they include, so I wouldn’t worry too much about small deviations here and there.

      April 21st, 2017 at 13:03

  20. Sviat Lohinau

    Light compact theme looks great.
    But I’d like to have a possibility to reduce empty space in in tab bar though.

    April 21st, 2017 at 03:46

  21. eine

    why did it took so long to fully support CSS masks?

    April 21st, 2017 at 08:19

  22. Kent

    Was anything done to fix plugin-container.exe from consuming so much CPU? It’s killing my computer.

    April 21st, 2017 at 23:46

    1. Dan Callahan

      Plugin-container.exe is a wrapper for third-party plug-ins like Adobe Reader or Flash. Because we don’t control the plug-ins themselves, we can’t do much about how much CPU they use. What browser vendors can do is get rid of plug-ins altogether, now that the Web is powerful enough to replace most common plugins. All major browsers have done so, though most (including Firefox) have a temporary exception for Flash, since it’s still so common on the Web.

      April 24th, 2017 at 09:08

      1. MARILYN

        In reply to Root777, I use the search bar multiple times daily while in the current website to open in a new tab. If I can’t copy and paste, I may need the information to type into the search bar before opening a new tab to search in. I don’t know why that would bother you so much when you used to be able to slide the box to become almost non-existent. Now because of people like you, I will have to open a notepad to put my information in to copy and paste. Thanks

        April 26th, 2017 at 08:54

  23. Root777

    Small search bar in right hand corner should be removed. It’s totally redundant and confusing for the user. I have seen a lot of users think that left input is for URL and right input is for search. Though most of the user don’t use it as Firefox home has also a search box. Why Firefox needs three search box in one window? I don’t get it.

    April 22nd, 2017 at 22:37

    1. Dan Callahan

      We’re exploring unifying the search and URL bars by default in our UI refresh later this year. I promise there were good reasons for the split, once upon a time.

      April 24th, 2017 at 08:17

      1. DeRS

        Daniel, thanks for your updates, but may I ask a couple of kind of off-topic questions?

        1. My FireFox has a lot of tabs (few hundreds), so I use “click-to-load” feature so the browser would not go slowing down.

        However, it still goes slowing down as I see that it unpacks and unfolds all of the tabs in the memory as if they are loaded, what greatly slows down both starting the browser and exiting.

        I am not sure what it is not possible to process the tabs in “click-to-load” mode just as links with site’s icon attached. This would dramatically improve both starting and exiting time, as well as reduce memory footprint and overall operation.

        Do you know if there is a plan to rework how tabs that are not clicked-on yet are processed to solve this?

        2. When I have long sessions I end up clicking on a lot of tabs anyway and FireFox becomes super slow. Debugging analysis, not surprisingly, shows that the most of the time is spent on all kinds of garbage collection that all of those active tabs need.

        My point is that current tab has to have absolute priority for the sake of GUI so I would not need to wait for like half of a second for the browser trying to react to my typing something in a text field or trying to select some text or open a context menu on a link.

        Do you know if there are plans to rework this approach to guarantee that no matter how many active background tabs run their garbage-generating scripts a current tab would be an absolute priority to insure that an old FireFox session would be just as responsive as a fresh FireFox session with just one tab?

        April 26th, 2017 at 02:05

        1. Dan Callahan

          We just landed a massive improvement to lazy-loading tabs (Bug 1345090), which should arrive in Firefox 55. We’re also working on better throttling / freezing of background tabs as part of the Quantum DOM project, which should fix the second issue, though I’m having trouble digging up the specific bug number for that.

          April 26th, 2017 at 12:50

          1. DeRS

            Thanks for the great news. This lazy-tab feature from the referenced bug is a major professional browsing feature; there a lot of heavy browser users who hate using bookmarks and thus never really open a clean FireFox session.

            To be honest, I was not quite happy with the previous Mozilla’s management moving so much human resources to projects that were _obviously_ dead-ends, but it looks like recently the company treats its people much better by giving them actually useful tasks.

            Thank you guys!

            Few more questions, if I may:

            Did you ever have crashes that weirdly make your loaded (not “lazy”) background tabs losing all the context as well as sites’ icons, displaying grey globes instead? I usually have the infamous “@ IPCError-browser | ShutDownKill ” crashes that do this to my session (the context never gets recovered, but to get sites’ icons back I have to manually click on every tab that went grey).

            This means that SessionStore JSON gets corrupted, the crash probably happens at the time when it is processed/synchronized/written to the SSD/HDD.

            The strange thing is that during (re)start FF is unable to understand that the session was corrupted in this way and opens it as if is normal, ignoring back up versions and, hence, rewriting them with corrupted version of the session that it just opened.

            My questions are is whether there are bug reports filed about:

            1) changing SessionStore management in a way that it would stop corrupting the JSON? Why the architecture of the session management is still not reliable? Why not to make it corruption-proof, arranging the synchronization with the SSD/HDD in some serialized manner that would make it impossible to all of sudden yank the data of loaded background tabs?

            2) updating JSON integrity checker that is executed during the FF’s start up so it would better discern corrupted sessions and, preferably, recover the lost data such as the sites’ icons, or used backed up version of the SessionStore JSON that has it all, including the context?

            p.s. the flag “notify me of the followup comments via e-mail” did not work for me in this commenting system, despite the fact that I presented it with a perfectly valid and working mail address (I also checked Spam folder, too: no mail notification about your reply was received). Is it just me, or it is a common temporary issue?

            April 26th, 2017 at 14:02

          2. Dan Callahan

            I don’t tend to leave a lot of tabs open, so I haven’t seen those issues. Would you be comfortable filing bugs on them, or would you rather I do that?

            (I’ll also check on the comment reply notifications…)

            April 28th, 2017 at 10:37

          3. DeRS

            This session corruption effect is not systematically reproducible, so it would not make much sense to file it as a regular bug. There is a different type of “bugs” that active developers file when they need to discuss certain behaviours of the browser. The two questions that I raises about this belong to this category. But I am not aware if such feature bugs are already filed or not.

            April 28th, 2017 at 16:39

      2. Graeme

        I use the URL bar search box a lot … daily. After updating my work PC (Windows 7 64 bit) to FF 53.0 installed end of Friday last week, I realised today (Monday) that the small searchbox is gone! ARGHH!!!
        Trying to find option/setting to put it back … significant impact to my workflow!

        May 7th, 2017 at 18:07

        1. Dan Callahan

          The search box should definitely be there in Firefox 53. Maybe try Menu -> Customize -> Restore Defaults?

          May 8th, 2017 at 07:33

  24. jack

    There aren’t any comments on the main mozilla blog https://blog.mozilla.org/blog/2017/04/19/first-big-bytes-project-quantum/ so I’ll leave this here:

    The blogpost seems to be wrong. It says “Firefox now uses TLS 1.3 to secure HTTPs connections”. But it looks like security.tls.version.max is still 3 by default in Firefox 53, so it won’t use TLS 1.3 out of the box at all, no more than any previous release would. https://bugzilla.mozilla.org/show_bug.cgi?id=1310516 said this was changed in Firefox 52, too, but its FIXED status there just seems to be plain wrong and nobody’s changed it.

    April 27th, 2017 at 16:08

    1. Dan Callahan

      Thanks, I’ll look into that.

      April 28th, 2017 at 10:38

  25. J D

    Did Mozilla Team finally fixed long lasting PDF bug which happened since like 30-st version or even later?

    Here is a video of me trying to fight with that bug on a 52.0.2 version at the 2nd half of April when it was still the last version.
    https://youtu.be/VPxGOxalef8

    May 3rd, 2017 at 04:08

    1. Dan Callahan

      Wow, that’s a crazy bug. I’ll see what I can dig up in Bugzilla. We are experimenting with completely replacing the built-in PDF renderer (“Project Mortar“), which might incidentally fix that bug…

      May 3rd, 2017 at 16:31

  26. Matt M.

    I love the compact dark theme sooooo much. Very clean and modern.

    May 6th, 2017 at 19:33

Comments are closed for this article.