css3 – Included layers. * In about: config, what do the output FPS and layer border color mean?

Question:

Now I have Mozilla Developer Edition 42.0a2 (2015-09-08) , I don't know from which version these properties appeared, but still.

1. layers.acceleration.draw-fps adds three digital blocks to the upper left corner of the window. The first block is responsible for fps , I understood that, but what the other 2 show, I could not figure out yet. What do they mean?
2. layers.draw-borders allows the browser to highlight GPU-loaded layers in a document as far as I know. The browser highlights them in green, however, there are cases, sometimes noticed on other sites, it is quite rare, however, when it does it in blue or even red, what does it mean?

Answer:

1) layers.acceleration.draw-fps outputs 3 numbers : compositions / sec, transactions / sec, fill ratio% .

To understand what they mean, you need to understand the architecture of the Firefox graphics subsystem. I can't say that I am an expert in this area, but in particular from the Gecko overview: compositing and these two posts: 1 , 2 , I got the following understanding:

• The entire window / page is divided into "layers": blocks, drawing on top of each other, you can get the desired image. For example, the "attached" background image, text, image in <canvas> and video can each be on their own layer.
• Drawing takes place in two stages: first, the content of the "layers" is updated, then the layers are added (this is called "compositing") into the final image on the screen (ideally, quite efficiently, using the GPU).
• These two stages are executed in different threads (from the so-called OMTC – off-main-thread compositing) or even in different processes (drawing layers – in the "content" process of a particular page, the final compositing in the main process).

This allows in situations where the page is slowing down (due to JavaScript or simply when updating layers is difficult) to show the best responsiveness, i.e. do not slow down too much from the user's point of view. For example, scrolling is possible by shifting layers, you can show the next video frame without waiting for the JS to work on the page.

So,

• The first number is how many times compositing has been performed, i.e. the picture on the screen has been updated. This is what it would be logical to call an FPS.
• The second number, as I understand it, is how many times (per second) the "layers" have been updated.
• (About the third – fill ratio – except for what is written in the link at the very beginning of the answer, I can not say anything.)

For example, when I play HTML5 YouTube videos on OS X, the first number is 60FPS, the second is 0. And if you hover the mouse over the video so that the video controls are displayed, the second one immediately becomes> 0.

The availability and interpretation of these numbers depends on the platform, version and settings, I do not pretend to be complete. By the way, there is stated that under Windows the number may be incorrect.

2) layers.draw-borders are drawn sort of like in Compositor :: DrawDiagnosticsInternal . If I read correctly, different colors indicate layers of different types, red and blue – pictures and monochrome layers, respectively.