Confirm
336
edits
Changes
→5. Layer Tree
'''What does it mean''':
Having a good layer tree means we can most changes without having to repaint the page. Think of a cartoons on the television like The Simpsons: Most cartoons will divide their scene into a few layer and will move the layers themselves instead of redrawing the scene for every frame of the cartoon. Using layers to perform animations means we can avoid redrawing the page every frame and can simple move these layers around.
'''Verification Steps''':
'''NOTE''': Verifying an optimal layer tree is complex task that require a lot of internal knowledge of Gecko. Be ready to ask for help.
* In the Developer menu, turn on 'Layer border' and/or 'Flash repainted area'.
* Perform all common interactions with the app.
* Look for borders around the content that is animating.
* Verify that paint flashing is kept to a minimum as done in the 'Over-invalidation' section.
and
* Enable 'layers.dump'. Each frame the exact layer structure will be printed to 'adb logcat'.
* Perform all common interactions with the app.
Look for the following (Note that they -may- not be bugs):
* Layers that are created around content that isn't animating.
* Layers that are created and destroyed because something changes once.
* Large layers that are created at the start or during an important user interaction.
* Excessive number of layers.
* RGBA layers in the layers.dump when the animated content is opaque
'''Debugging''':
* Attach with the App Manager and tweak the structure and styles of the page to trigger the desired behavior.
== 6. Styles ==
