Bug 1210796 - Part 16: Move unchanged properties to bottom in the list. r=pbro
authorDaisuke Akatsuka <dakatsuka@mozilla.com>
Tue, 18 Apr 2017 12:15:57 +0900
changeset 353592 5132225c253493827ec56e22379faa322142fe0c
parent 353591 284a66e290fc5de0fffa236e3f81070cc4a89b15
child 353593 16be1871115c68a598a6cc1edadd1ed003e5baff
push id31673
push userkwierso@gmail.com
push dateTue, 18 Apr 2017 21:23:54 +0000
treeherdermozilla-central@1a81aadc2510 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1210796
milestone55.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1210796 - Part 16: Move unchanged properties to bottom in the list. r=pbro MozReview-Commit-ID: CEmaEYhD6KM
devtools/client/animationinspector/components/animation-details.js
devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
devtools/client/themes/animationinspector.css
--- a/devtools/client/animationinspector/components/animation-details.js
+++ b/devtools/client/animationinspector/components/animation-details.js
@@ -243,21 +243,37 @@ AnimationDetails.prototype = {
   },
 
   renderAnimatedPropertiesBody: function (animationTypes) {
     // Add animated property body.
     const bodyEl = createNode({
       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({
         // text-overflow doesn't work in flex items, so we need a second level
         // of container to actually have an ellipsis on the name.
         // See bug 972664.
         parent: createNode({
           parent: line,
@@ -324,8 +340,18 @@ AnimationDetails.prototype = {
     this.progressIndicatorEl.style.left =
       `${ this.dummyAnimation.effect.getComputedTiming().progress * 100 }%`;
   },
 
   get win() {
     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;
+}
--- a/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
+++ b/devtools/client/animationinspector/test/browser_animation_animated_properties_displayed.js
@@ -6,33 +6,34 @@
 
 const LAYOUT_ERRORS_L10N =
   new LocalizationHelper("toolkit/locales/layout_errors.properties");
 
 // Test that when an animation is selected, its list of animated properties is
 // 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",
   "background-image",
   "background-origin",
   "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* () {
   yield addTab(URL_ROOT + "doc_keyframes.html");
   let {panel} = yield openAnimationInspector();
   let timeline = panel.animationsTimelineComponent;
   let propertiesList = timeline.rootWrapperEl
                                .querySelector(".animated-properties");
--- a/devtools/client/themes/animationinspector.css
+++ b/devtools/client/themes/animationinspector.css
@@ -541,16 +541,20 @@ body {
 
 /* Inline keyframes info in the timeline */
 
 .animation-detail .animated-properties .property {
   height: var(--timeline-animation-height);
   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);
 }
 
 .animation-detail .animated-properties .name {
   width: var(--timeline-sidebar-width);
   padding-right: var(--keyframes-marker-size);
   box-sizing: border-box;