Bug 1222937 - Show a dedicated error message for animated pseudo elements; r=pbro

MozReview-Commit-ID: Gv9YAsX9l2F

devtools/client/animationinspector/animation-controller.js

@@ -224,17 +224,18 @@ var AnimationsController = {
       return;
     }
 
+    this.nodeFront = gInspector.selection.nodeFront;
     let done = gInspector.updating("animationscontroller");
 
     if (!gInspector.selection.isConnected() ||
-        !gInspector.selection.isElementNode()) {
+        !gInspector.selection.isElementNode() ||
+        gInspector.selection.isPseudoElementNode()) {
       this.destroyAnimationPlayers();
       this.emit(this.PLAYERS_UPDATED_EVENT);
       done();
       return;
     }
 
-    this.nodeFront = gInspector.selection.nodeFront;
     yield this.refreshAnimationPlayers(this.nodeFront);
     this.emit(this.PLAYERS_UPDATED_EVENT, this.animationPlayers);
 

devtools/client/animationinspector/animation-inspector.xhtml

@@ -26,7 +26,7 @@
     </div>
     <div id="players"></div>
     <div id="error-message">
-      <p>&invalidElement;</p>
+      <p id="error-type"></p>
       <p>&selectElement;</p>
       <button id="element-picker" standalone="true" class="devtools-button"></button>
     </div>

devtools/client/animationinspector/animation-panel.js

@@ -183,6 +183,9 @@ var AnimationsPanel = {
     } else {
       document.body.setAttribute("empty", "true");
       document.body.removeAttribute("timeline");
+      $("#error-type").textContent = gInspector.selection.isPseudoElementNode()
+        ? L10N.getStr("panel.pseudoElementSelected")
+        : L10N.getStr("panel.invalidElementSelected");
     }
   },
 

devtools/client/animationinspector/test/browser_animation_empty_on_invalid_nodes.js

@@ -1,21 +1,20 @@
 /* vim: set ts=2 et sw=2 tw=80: */
 /* Any copyright is dedicated to the Public Domain.
  http://creativecommons.org/publicdomain/zero/1.0/ */
-
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test that the panel shows no animation data for invalid or not animated nodes
 
+const STRINGS_URI = "chrome://devtools/locale/animationinspector.properties";
+const L10N = new ViewHelpers.L10N(STRINGS_URI);
+
 add_task(function*() {
   yield addTab(TEST_URL_ROOT + "doc_simple_animation.html");
+  let {inspector, panel, window} = yield openAnimationInspector();
+  let {document} = window;
 
-  let {inspector, panel} = yield openAnimationInspector();
-  yield testEmptyPanel(inspector, panel);
-});
-
-function* testEmptyPanel(inspector, panel) {
   info("Select node .still and check that the panel is empty");
   let stillNode = yield getNodeFront(".still", inspector);
   let onUpdated = panel.once(panel.UI_UPDATED_EVENT);
@@ -26,6 +25,9 @@ function* testEmptyPanel(inspector, panel) {
      "No animation players stored in the timeline component for a still node");
   is(panel.animationsTimelineComponent.animationsEl.childNodes.length, 0,
      "No animation displayed in the timeline component for a still node");
+  is(document.querySelector("#error-type").textContent,
+     L10N.getStr("panel.invalidElementSelected"),
+     "The correct error message is displayed");
 
   info("Select the comment text node and check that the panel is empty");
   let commentNode = yield inspector.walker.previousSibling(stillNode);
@@ -36,4 +38,25 @@ function* testEmptyPanel(inspector, panel) {
   is(panel.animationsTimelineComponent.animations.length, 0,
      "No animation players stored in the timeline component for a text node");
   is(panel.animationsTimelineComponent.animationsEl.childNodes.length, 0,
-     "No animation displayed in the timeline component for a text node");}
+     "No animation displayed in the timeline component for a text node");
+  is(document.querySelector("#error-type").textContent,
+     L10N.getStr("panel.invalidElementSelected"),
+     "The correct error message is displayed");
+
+  info("Select the pseudo element node and check that the panel is empty " +
+       "and contains the special animated pseudo-element message");
+  let pseudoElParent = yield getNodeFront(".pseudo", inspector);
+  let {nodes} = yield inspector.walker.children(pseudoElParent);
+  let pseudoEl = nodes[0];
+  onUpdated = panel.once(panel.UI_UPDATED_EVENT);
+  yield selectNode(pseudoEl, inspector);
+  yield onUpdated;
+
+  is(panel.animationsTimelineComponent.animations.length, 0,
+     "No animation players stored in the timeline component for a pseudo-node");
+  is(panel.animationsTimelineComponent.animationsEl.childNodes.length, 0,
+     "No animation displayed in the timeline component for a pseudo-node");
+  is(document.querySelector("#error-type").textContent,
+     L10N.getStr("panel.pseudoElementSelected"),
+     "The correct error message is displayed");
+});

devtools/client/animationinspector/test/doc_simple_animation.html

@@ -82,6 +82,21 @@
       animation: no-compositor 10s cubic-bezier(.57,-0.02,1,.31) forwards;
     }
 
+    .pseudo {
+      top: 800px;
+      left: 10px;
+    }
+
+    .pseudo::before {
+      content: "";
+      width: 50%;
+      height: 50%;
+      border-radius: 50%;
+      background: black;
+      position: absolute;
+      animation: simple-animation 1s infinite alternate;
+    }
+
     @keyframes simple-animation {
       100% {
         transform: translateX(300px);
@@ -112,5 +127,6 @@
   <div class="ball long"></div>
   <div class="ball negative-delay"></div>
   <div class="ball no-compositor"></div>
+  <div class="ball pseudo"></div>
 </body>
 </html>

devtools/client/locales/en-US/animationinspector.dtd

@@ -15,10 +15,6 @@
      sidebar tab -->
 <!ENTITY animationInspectorTitle "Animations">
 
-<!-- LOCALIZATION NOTE (invalidElement): This is the label shown in the panel
-     when an invalid node is currently selected in the inspector. -->
-<!ENTITY invalidElement "No animations were found for the current element.">
-
 <!-- LOCALIZATION NOTE (selectElement): This is the label shown in the panel
      when an invalid node is currently selected in the inspector, to invite the
      user to select a new node by clicking on the element-picker icon. -->

devtools/client/locales/en-US/animationinspector.properties

@@ -10,6 +10,18 @@
 # A good criteria is the language in which you'd find the best
 # documentation on web development on the web.
 
+# LOCALIZATION NOTE (panel.invalidElementSelected):
+# This is the label shown in the panel when an invalid node is currently
+# selected in the inspector (i.e. a non-element node or a node that is not
+# animated).
+panel.invalidElementSelected=No animations were found for the current element.
+
+# LOCALIZATION NOTE (panel.pseudoElementSelected):
+# This is the label shown in the panel when a pseudo-element is currently
+# selected in the inspector (pseudo-elements can be animated, but the tool
+# doesn't yet support them).
+panel.pseudoElementSelected=Animated pseudo-elements are not supported yet.
+
 # LOCALIZATION NOTE (player.animationNameLabel):
 # This string is displayed in each animation player widget. It is the label
 # displayed before the animation name.