Bug 1210796 - Part 16: Move unchanged properties to bottom in the list. r=pbro

MozReview-Commit-ID: CEmaEYhD6KM

--HG--
extra : rebase_source : 49f812d66281f87f6f5eff46165450552db3c244

devtools/client/animationinspector/components/animation-details.js

@@ -248,11 +248,27 @@ AnimationDetails.prototype = {
       parent: this.containerEl,
       attributes: { "class": "animated-properties-body" }
     });
+
+    // Move unchanged value animation to bottom in the list.
+    const propertyNames = [];
+    const unchangedPropertyNames = [];
     for (let propertyName in this.tracks) {
+      if (!isUnchangedProperty(this.tracks[propertyName])) {
+        propertyNames.push(propertyName);
+      } else {
+        unchangedPropertyNames.push(propertyName);
+      }
+    }
+    Array.prototype.push.apply(propertyNames, unchangedPropertyNames);
+
+    for (let propertyName of propertyNames) {
       let line = createNode({
         parent: bodyEl,
         attributes: {"class": "property"}
       });
+      if (unchangedPropertyNames.includes(propertyName)) {
+        line.classList.add("unchanged");
+      }
       let {warning, className} =
         this.getPerfDataForProperty(this.animation, propertyName);
       createNode({
@@ -329,3 +345,13 @@ AnimationDetails.prototype = {
     return this.containerEl.ownerDocument.defaultView;
   }
 };
+
+function isUnchangedProperty(values) {
+  const firstValue = values[0].value;
+  for (let i = 1; i < values.length; i++) {
+    if (values[i].value !== firstValue) {
+      return false;
+    }
+  }
+  return true;
+}

devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js

@@ -11,6 +11,15 @@ const LAYOUT_ERRORS_L10N =
 // displayed below it.
 
 const EXPECTED_PROPERTIES = [
+  "border-bottom-left-radius",
+  "border-bottom-right-radius",
+  "border-top-left-radius",
+  "border-top-right-radius",
+  "filter",
+  "height",
+  "transform",
+  "width",
+  // Unchanged value properties
   "background-attachment",
   "background-clip",
   "background-color",
@@ -19,15 +28,7 @@ const EXPECTED_PROPERTIES = [
   "background-position-x",
   "background-position-y",
   "background-repeat",
-  "background-size",
-  "border-bottom-left-radius",
-  "border-bottom-right-radius",
-  "border-top-left-radius",
-  "border-top-right-radius",
-  "filter",
-  "height",
-  "transform",
-  "width"
+  "background-size"
 ].sort();
 
 add_task(function* () {

devtools/client/themes/animationinspector.css

@@ -546,6 +546,10 @@ body {
   position: relative;
 }
 
+.animation-detail .animated-properties .property.unchanged {
+  opacity: 0.6;
+}
+
 .animation-detail .animated-properties .property:nth-child(2n) {
   background-color: var(--even-animation-timeline-background-color);
 }