Bug 1222937 - Show a dedicated error message for animated pseudo elements; r=pbro
authorCuriousLearner <sanyam.khurana01@gmail.com>
Fri, 05 Feb 2016 20:10:18 +0530
changeset 287017 3827e69a54ef03d6224c27d6a1c7180f896d87e5
parent 287016 815d8ea19eff49bf8c1172f5cc23126299f29ac9
child 287018 4b613cad02de7b3fcd6ce622e26637a0af9ee52c
push id18035
push userpbrosset@mozilla.com
push dateMon, 07 Mar 2016 12:30:29 +0000
treeherderfx-team@3827e69a54ef [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerspbro
bugs1222937
milestone47.0a1
Bug 1222937 - Show a dedicated error message for animated pseudo elements; r=pbro MozReview-Commit-ID: Gv9YAsX9l2F
devtools/client/animationinspector/animation-controller.js
devtools/client/animationinspector/animation-inspector.xhtml
devtools/client/animationinspector/animation-panel.js
devtools/client/animationinspector/test/browser_animation_empty_on_invalid_nodes.js
devtools/client/animationinspector/test/doc_simple_animation.html
devtools/client/locales/en-US/animationinspector.dtd
devtools/client/locales/en-US/animationinspector.properties
--- a/devtools/client/animationinspector/animation-controller.js
+++ b/devtools/client/animationinspector/animation-controller.js
@@ -219,27 +219,28 @@ var AnimationsController = {
 
   onNewNodeFront: Task.async(function*() {
     // Ignore if the panel isn't visible or the node selection hasn't changed.
     if (!this.isPanelVisible() ||
         this.nodeFront === gInspector.selection.nodeFront) {
       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);
 
     done();
   }),
 
   /**
    * Toggle (pause/play) all animations in the current target.
--- a/devtools/client/animationinspector/animation-inspector.xhtml
+++ b/devtools/client/animationinspector/animation-inspector.xhtml
@@ -21,16 +21,16 @@
     <div id="timeline-toolbar" class="theme-toolbar">
       <button id="rewind-timeline" standalone="true" class="devtools-button"></button>
       <button id="pause-resume-timeline" standalone="true" class="devtools-button pause-button paused"></button>
       <span id="timeline-rate" standalone="true" class="devtools-button"></span>
       <span id="timeline-current-time" class="label devtools-toolbarbutton"></span>
     </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>
     <script type="application/javascript;version=1.8" src="animation-controller.js"></script>
     <script type="application/javascript;version=1.8" src="animation-panel.js"></script>
   </body>
 </html>
--- a/devtools/client/animationinspector/animation-panel.js
+++ b/devtools/client/animationinspector/animation-panel.js
@@ -178,16 +178,19 @@ var AnimationsPanel = {
 
   togglePlayers: function(isVisible) {
     if (isVisible) {
       document.body.removeAttribute("empty");
       document.body.setAttribute("timeline", "true");
     } else {
       document.body.setAttribute("empty", "true");
       document.body.removeAttribute("timeline");
+      $("#error-type").textContent = gInspector.selection.isPseudoElementNode()
+        ? L10N.getStr("panel.pseudoElementSelected")
+        : L10N.getStr("panel.invalidElementSelected");
     }
   },
 
   onPickerStarted: function() {
     this.pickerButtonEl.setAttribute("checked", "true");
   },
 
   onPickerStopped: function() {
--- a/devtools/client/animationinspector/test/browser_animation_empty_on_invalid_nodes.js
+++ b/devtools/client/animationinspector/test/browser_animation_empty_on_invalid_nodes.js
@@ -1,39 +1,62 @@
 /* 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);
   yield selectNode(stillNode, inspector);
   yield onUpdated;
 
   is(panel.animationsTimelineComponent.animations.length, 0,
      "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);
   onUpdated = panel.once(panel.UI_UPDATED_EVENT);
   yield selectNode(commentNode, inspector);
   yield onUpdated;
 
   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");
+});
--- a/devtools/client/animationinspector/test/doc_simple_animation.html
+++ b/devtools/client/animationinspector/test/doc_simple_animation.html
@@ -77,16 +77,31 @@
     .no-compositor {
       top: 0;
       right: 10px;
       background: gold;
 
       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);
       }
     }
 
     @keyframes other-animation {
       100% {
@@ -107,10 +122,11 @@
   <div class="ball animated"></div>
   <div class="ball multi"></div>
   <div class="ball delayed"></div>
   <div class="ball multi-finite"></div>
   <div class="ball short"></div>
   <div class="ball long"></div>
   <div class="ball negative-delay"></div>
   <div class="ball no-compositor"></div>
+  <div class="ball pseudo"></div>
 </body>
 </html>
--- a/devtools/client/locales/en-US/animationinspector.dtd
+++ b/devtools/client/locales/en-US/animationinspector.dtd
@@ -10,20 +10,16 @@
      developers. You want to make that choice consistent across the developer
      tools. A good criteria is the language in which you'd find the best
      documentation on web development on the web. -->
 
 <!-- LOCALIZATION NOTE (animationInspectorTitle): This is the label shown in the
      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. -->
 <!ENTITY selectElement "Pick another element from the page.">
 
 <!-- LOCALIZATION NOTE (allAnimations): This is the label shown at the bottom of
      the panel, in a toolbar, to let the user know the toolbar applies to all
      animations, not just the ones applying to the current element. -->
--- a/devtools/client/locales/en-US/animationinspector.properties
+++ b/devtools/client/locales/en-US/animationinspector.properties
@@ -5,16 +5,28 @@
 # LOCALIZATION NOTE These strings are used inside the Animation inspector
 # which is available as a sidebar panel in the Inspector.
 # The correct localization of this file might be to keep it in
 # English, or another language commonly spoken among web developers.
 # You want to make that choice consistent across the developer tools.
 # 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.
 player.animationNameLabel=Animation:
 
 # LOCALIZATION NOTE (player.transitionNameLabel):
 # This string is displayed in each animation player widget. It is the label
 # displayed in the header, when the element is animated by mean of a css