Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 00:05:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1636111 - Add DAMP test for Inspector Rules view with many CSS Variables r=jdescottes,sparky,perftest-reviewers

Browse Source 
Inspecting a node with many CSS variables makes the Rules view render slowly. A patch to improve performance is in development in D73062.

This patch adds a new subtest, `custom.inspector.manycssvariables.selectnode`, to the existing custom Inspector DAMP test to measure the rendering time for a node with 300 CSS variables all of them used (600 declarations in total).

It might seem extreme. In May 2020 youtube.com has 1,375 CSS variables applicable to the `<html>` element. They all get inherited by all CSS rules for most nodes on the page. This slows down the action of inspecting CSS for any node. The largest CSS rule from youtube's stylesheets has 287 declarations of CSS variables. In the age of automatically-generated stylesheets for design systems this scenario becomes more common.

Differential Revision: https://phabricator.services.mozilla.com/D73289
This commit is contained in:
Razvan Caliman 2020-05-12 14:09:25 +00:00
parent c9cae42014
commit d8b0ded34b
2 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
testing/talos/talos/tests/devtools/addon/content/pages/custom/inspector/iframe.html
View File

@ -60,6 +60,18 @@
}`;
}
let CSS_VARIABLES_COUNT = 300;
let manyCSSVariablesDeclarations = "";
for (i = 0; i < CSS_VARIABLES_COUNT; i++) {
manyCSSVariablesDeclarations += `
--variable-${i}: ${i};
content: var(--variable-${i});
`
}
let manyCSSVariables = `.many-css-variables {
${manyCSSVariablesDeclarations}
}`
let expandManyChildren = new Array(100).join(" <div attr='my-attr'>content</div>\n");
let maxBalancedDepth = 8;
@ -80,6 +92,7 @@
let style = document.createElement("style");
style.type = "text/css";
style.appendChild(document.createTextNode(manyCssRules));
style.appendChild(document.createTextNode(manyCSSVariables));
document.head.appendChild(style);
var tpl = document.createElement('template');
@ -94,6 +107,7 @@
<!-- Elements for custom.inspector.manyrules tests -->
<div class="no-css-rules"></div>
<div class="many-css-rules"></div>
<div class="many-css-variables"></div>
<div class="expand-many-children">
${expandManyChildren}
</div>

26
testing/talos/talos/tests/devtools/addon/content/tests/inspector/custom.js
View File

@ -32,6 +32,8 @@ module.exports = async function() {
await selectNodeWithManyRulesAndLog(toolbox);
await selectNodeWithManyVariablesAndLog(toolbox);
await collapseExpandAllAndLog(toolbox);
await closeToolboxAndLog("custom.inspector", toolbox);
@ -140,6 +142,30 @@ async function selectNodeWithManyRulesAndLog(toolbox) {
await selectNodeFront(inspector, initialNodeFront);
}
/**
* Measure the time necessary to select a node and display the rule view when many
* CSS variables apply to the element.
*/
async function selectNodeWithManyVariablesAndLog(toolbox) {
let inspector = toolbox.getPanel("inspector");
let initialNodeFront = inspector.selection.nodeFront;
// Retrieve the node front for the test node.
let root = await getRootNodeFront(inspector);
let testNodeFront = await inspector.walker.querySelector(
root,
".many-css-variables"
);
// Select test node and measure the time to display the rule view with many variables.
dump("Selecting .many-css-variables test node front\n");
let test = runTest("custom.inspector.manycssvariables.selectnode");
await selectNodeFront(inspector, testNodeFront);
test.done();
await selectNodeFront(inspector, initialNodeFront);
}
async function collapseExpandAllAndLog(toolbox) {
let inspector = toolbox.getPanel("inspector");