1075268 - [video] analyze video layer tree during playback and look for performance issues or regressions

Status: RESOLVED WONTFIX

(Firefox OS Graveyard :: Gaia::Video, defect)

Description

[David Flanagan [:djf]]

I'm filing this bug as a followup to bug 1074262 because the fix for that smoketest blocker added a will-change: opacity declaration which may affect the layer tree while the app is playing videos. A complex layer tree during playback will decrease battery life, so this is a necessary followup to make sure that the fix for that bug (which I landed on master and on 2.1) did not make playback performance worse.  If we find a performance regression, then we'll probably want to make it a 2.1 blocker, since 1074262 was a blocker.

Also, however, the video app is overdue for a layer tree performance audit like the one the Camera app got in bug 1040952, specifically for the layers in the tree when videos are being played.  Here are some things we should look at:

1) I noticed when investigating 1074262 that video uses a lot of z-index declarations. It seemed to work just fine when I commented them out. Can we simplify layers if we do that? (Is it worth the risk?)

2) Bug 1054105 was an attempt to improve the layer tree by removing background-color, but we just basically backed it out in 1072013. Are there other optimizations we could do here instead?

Comment 1

[Russ Nicoletti [:russn]]

Notes from IRC discussion with Justin and Hub:

To enable layer tree information in logcat: enable "dump layer tree" in settings (no need to restart b2g)

Use this script to pull out layer tree logs from logcat: https://github.com/hfiguiere/layertree

"the best advice i can give you is to just pull open WebIDE and toggle `display: none;` on each root-level element to see how it affects the tree.. also play with toggling the CSS attributes for the html and body tags on/off -- its not an exact science, unfortunately"

"so the layer tree dump is always for the entire b2g process.. in order to find the relevant "branch" of the tree that is the app you're looking at, you need to find `RefLayerComposite`, everything under `RefLayerComposite` is the app (you probably should only be running the app you're investigating so you get just *one* RefLayer)"

"anything labelled `PaintedLayerComposite` is actual HTML content that gets rendered, it used to be labelled `ThebesLayerComposite`, in case you ever go back to debug older versions.. PaintedLayer == ThebesLayer.

Those are your most expensive layers; on the other hand, `ColorLayerComposite` is much cheaper and is used when you have a solid color (background)

The only other type of layer is a `ContainerLayerComposite` which is nothing you really need to worry about optimizing (its mostly used from a data model standpoint internally from what i understand); you need to visualize the app and think of what would be the ideal layertree.. 

In the case when you're playing a video, you really should only have 2 layers.. ImageLayerComposite (video) and PaintedLayerComposite (UI overlay)"

Comment 2

[Russ Nicoletti [:russn]]

More discussion with Justin on IRC:

12:42 PM <justindarc> russn: by looking at the tree in your pastebin [1], there's one layer you need to get rid of
12:42 PM <justindarc> russn: on line 29 you have a PaintedLayerComposite
12:43 PM <justindarc> russn: that should probably be a ColorLayer (think: what needs drawn *behind* the video)
12:44 PM <justindarc> russn: say, for instance, if your <video> element was completely covering some content behind it.. that layer should get marked [not visible]
12:45 PM <justindarc> russn: so, you'll actually see a [not visible] on that layer.. if you have a PaintedLayer marked [not visible] that's also really good
12:46 PM <justindarc> russn: if you put a full-width/height element *behind* your <video> and give it a solid background color.. either a.) that PaintedLayer will become a ColorLayer, or b.) you'll get a new ColorLayer and that PaintedLayer will get marked [not visible] -- both scenarios would be a WIN
12:48 PM <justindarc> russn: the last piece of advice i can give you would be to use the (x, y, w, h) values on the layers to give you a clue as to what element they represent
12:50 PM <justindarc> russn: yep.. like, the 2nd PaintedLayer is obviously your UI overlay (gaia-header and bottom controls) because it has 2 rects (0, 0, 480, 75) = gaia-header and (0, 661, 480, 133) = bottom player controls

[1] http://pastebin.com/RqvbTBAR

Comment 3

[Russ Nicoletti [:russn]]

Attachment: Baseline layertree output -- video does not cover entire screen

When the video does not cover the entire screen, the PaintedLayer is visible. Snippet from attached layertree output log:

I/Gecko   ( 1566):           PaintedLayerComposite (0xa7234800) [shadow-visible=< (x=0, y=0, w=480, h=854); >] [bounds=(x=0, y=0, w=480, h=929)] [visible=< (x=0, y=0, w=480, h=854); >] [opaqueContent] [valid=< (x=0, y=0, w=480, h=854); >]

Comment 4

[Russ Nicoletti [:russn]]

Attachment: Baseline layertree output -- video covers entire screen

When the video covers the entire screen, the PaintedLayer is 'not visible'. Snippet from attached layertree output:

I/Gecko   ( 1566):           PaintedLayerComposite (0xa952a400) [shadow-clip=(x=0, y=0, w=0, h=0)] [clip=(x=0, y=0, w=0,     h=0)] [bounds=(x=0, y=0, w=481, h=929)] [not visible] [opaqueContent]

Comment 5

[Russ Nicoletti [:russn]]

Attachment: layertree output -- fullscreen background color behind video

However, when adding a full-width/height element behind the video the first PaintedLayer is still visible. Interestingly, the second PainterLayer, which presumably corresponds to the gaia-header and video footer, is now not present at all.

Patch for adding full-width/height element:

diff --git a/apps/video/index.html b/apps/video/index.html
index 1efdce5..b543a18 100644
--- a/apps/video/index.html
+++ b/apps/video/index.html
@@ -80,6 +80,8 @@
       <div id="video-container">
         <video src="about:blank" id="player"></video>
       </div>
+      <div id="video-background-layer">
+      </div>
       <!-- video controls -->
       <div id="videoControls">
         <section role="region">
diff --git a/apps/video/style/video.css b/apps/video/style/video.css
index 1a02fb2..5589c20 100644
--- a/apps/video/style/video.css
+++ b/apps/video/style/video.css
@@ -244,6 +244,17 @@ span.line-break {
   z-index: 10;
 }
 
+#video-background-layer{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9;
+  background-color: red;
+  opacity: 1;
+}
+
 /*
  * The overlay is where we display messages like Scanning, No Videos,
  * No SD card and SD Card in Use along with instructions for resolving

Comment 6

[BMO Automation]

Firefox OS is not being worked on