Bug 1876455 - [devtools] Fix animation panel for animated registered properties. r=devtools-reviewers,bomsy.

Differential Revision: https://phabricator.services.mozilla.com/D199603
2024-02-01 13:03:22 +00:00 · 2024-02-01 13:03:22 +00:00 · 4e7d8179ef
--- a/devtools/client/inspector/animation/test/browser.toml
+++ b/devtools/client/inspector/animation/test/browser.toml
@ -1,6 +1,7 @@
 [DEFAULT]
 prefs = [
 "dom.svg.pathSeg.enabled=true",
+ "layout.css.properties-and-values.enabled=true"
 ]
 tags = "devtools"
 subsuite = "devtools"
--- a/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
@ -14,7 +14,7 @@ const TEST_DATA = [
  },
  {
    targetClass: "compositor-notall",
-    expectedNumber: 3,
+    expectedNumber: 4,
  },
 ];

--- a/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
@ -100,6 +100,9 @@ async function test_element(className, data) {

 add_task(async function compositor_notall() {
  await test_element(".compositor-notall", [
+    {
+      property: "--ball-color",
+    },
    {
      property: "opacity",
      isOnCompositor: true,
--- a/devtools/client/inspector/animation/test/doc_simple_animation.html
+++ b/devtools/client/inspector/animation/test/doc_simple_animation.html
@ -3,14 +3,19 @@
 <head>
  <meta charset="UTF-8">
  <style>
+    @property --ball-color {
+      syntax: "<color>";
+      inherits: true;
+      initial-value: #f06;
+    }
+
    .ball {
      width: 80px;
      height: 80px;
      /* Add a border here to avoid layout warnings in Linux debug builds: Bug 1329784 */
      border: 1px solid transparent;
      border-radius: 50%;
-      background: #f06;
-
+      background: var(--ball-color);
      position: absolute;
    }

@ -130,11 +135,13 @@

    @keyframes compositor-notall {
      from {
+        --ball-color: tomato;
        opacity: 0;
        width: 0px;
        transform: translate(0px);
      }
      to {
+        --ball-color: gold;
        opacity: 1;
        width: 100px;
        transform: translate(100px);
--- a/devtools/server/actors/animation.js
+++ b/devtools/server/actors/animation.js
@ -45,6 +45,13 @@ const ANIMATION_TYPES = {
 exports.ANIMATION_TYPES = ANIMATION_TYPES;

 function getAnimationTypeForLonghand(property) {
+  // If this is a custom property, return "custom" for now as it's not straightforward
+  // to retrieve the proper animation type.
+  // TODO: We could compute the animation type from the registered property syntax (Bug 1875435)
+  if (property.startsWith("--")) {
+    return "custom";
+  }
+
  for (const [type, props] of ANIMATION_TYPE_FOR_LONGHANDS) {
    if (props.has(property)) {
      return type;