tor-browser

commit 2e18e2122bbad3b812ab69b1e9070e65d5f00753
parent 09aedb6aef474d6d27b27be1065d6f126fb6f044
Author: Nicolas Chevobbe <nchevobbe@mozilla.com>
Date:   Fri, 17 Oct 2025 05:54:18 +0000

Bug 1994925 - [devtools] Add DAMP test for many unused variables. r=devtools-reviewers,perftest-reviewers,jdescottes,sparky.

This new test is similar to custom.inspector.manycssvariables.selectnode,
except that the CSS variables in the added rule aren't used in any other declaration.
This should help track the effectiveness of hiding unused variables.

Differential Revision: https://phabricator.services.mozilla.com/D268389

Diffstat:
M
testing/talos/talos/tests/devtools/addon/content/pages/custom/inspector/iframe.html
 | 
13
+++++++++++--
M
testing/talos/talos/tests/devtools/addon/content/tests/inspector/custom.js
 | 
13
+++++++++++++

2 files changed, 24 insertions(+), 2 deletions(-)
diff --git a/testing/talos/talos/tests/devtools/addon/content/pages/custom/inspector/iframe.html b/testing/talos/talos/tests/devtools/addon/content/pages/custom/inspector/iframe.html
@@ -76,6 +76,15 @@
       ${manyCSSVariablesDeclarations}
     }`
 
+    const UNUSED_CSS_VARIABLES_COUNT = 300;
+    let manyUnusedCSSVariablesDeclarations = "";
+    for (i = 0; i < UNUSED_CSS_VARIABLES_COUNT; i++) {
+      manyUnusedCSSVariablesDeclarations += `--unused-variable-${i}: ${i};\n`;
+    }
+    let manyUnusedCSSVariables = `.many-unused-css-variables {
+      ${manyUnusedCSSVariablesDeclarations}
+    }`
+
     let expandManyChildren = new Array(100).join("  <div attr='my-attr'>content</div>\n");
 
     let maxBalancedDepth = 8;
@@ -95,8 +104,7 @@
 
     let style = document.createElement("style");
     style.type = "text/css";
-    style.appendChild(document.createTextNode(manyCssRules));
-    style.appendChild(document.createTextNode(manyCSSVariables));
+    style.append(manyCssRules, manyCSSVariables, manyUnusedCSSVariables);
     document.head.appendChild(style);
 
     var tpl = document.createElement('template');
@@ -112,6 +120,7 @@
          <div class="no-css-rules"></div>
          <div class="many-css-rules"></div>
          <div class="many-css-variables"></div>
+         <div class="many-unused-css-variables"></div>
          <div class="expand-many-children">
          ${expandManyChildren}
          </div>
diff --git a/testing/talos/talos/tests/devtools/addon/content/tests/inspector/custom.js b/testing/talos/talos/tests/devtools/addon/content/tests/inspector/custom.js
@@ -165,6 +165,19 @@ async function selectNodeWithManyVariablesAndLog(toolbox) {
   await selectNodeFront(inspector, testNodeFront);
   test.done();
 
+  // Select test node and measure the time to display the rule view with many unused variables,
+  // so we can check that our feature to hide unused variables has the expected impact
+  // on performance.
+  testNodeFront = await root.walkerFront.querySelector(
+    root,
+    ".many-unused-css-variables"
+  );
+
+  dump("Selecting .many-unused-css-variables test node front\n");
+  test = runTest("custom.inspector.manyunusedcssvariables.selectnode");
+  await selectNodeFront(inspector, testNodeFront);
+  test.done();
+
   await selectNodeFront(inspector, initialNodeFront);
 }