Bug 1228978 - Add a drop-mark to the playback-rate selector in the animation-inspector's toolbar; r=pbro

--HG--
extra : commitid : 7KunM7nMawt

devtools/client/animationinspector/animation-panel.js

@@ -42,6 +42,9 @@ var AnimationsPanel = {
     this.timelineCurrentTimeEl = $("#timeline-current-time");
     this.rateSelectorEl = $("#timeline-rate");
 
+    this.rewindTimelineButtonEl.setAttribute("title",
+      L10N.getStr("timeline.rewindButtonTooltip"));
+
     // If the server doesn't support toggling all animations at once, hide the
     // whole global toolbar.
     if (!AnimationsController.traits.hasToggleAll) {
@@ -213,6 +216,12 @@ var AnimationsPanel = {
 
     this.playTimelineButtonEl.classList.toggle("paused", !isMoving);
 
+    let l10nPlayProperty = isMoving ? "timeline.resumedButtonTooltip" :
+                                      "timeline.pausedButtonTooltip";
+
+    this.playTimelineButtonEl.setAttribute("title",
+      L10N.getStr(l10nPlayProperty));
+
     // If the timeline data changed as a result of the user dragging the
     // scrubber, then pause all animations and set their currentTimes.
     // (Note that we want server-side requests to be sequenced, so we only do

devtools/client/animationinspector/components/rate-selector.js

@@ -28,7 +28,10 @@ RateSelector.prototype = {
     this.selectEl = createNode({
       parent: containerEl,
       nodeType: "select",
-      attributes: {"class": "devtools-button"}
+      attributes: {
+        "class": "devtools-button",
+        "title": L10N.getStr("timeline.rateSelectorTooltip")
+      }
     });
 
     this.selectEl.addEventListener("change", this.onRateChanged);

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

@@ -61,14 +61,35 @@ player.timeLabel=%Ss
 # LOCALIZATION NOTE (player.playbackRateLabel):
 # This string is displayed in each animation player widget, as the label of
 # drop-down list items that can be used to change the rate at which the
-# animation runs (1x being the default, 2x being twice as fast).
-player.playbackRateLabel=%Sx
+# animation runs (1× being the default, 2× being twice as fast).
+player.playbackRateLabel=%S×
 
 # LOCALIZATION NOTE (player.runningOnCompositorTooltip):
 # This string is displayed as a tooltip for the icon that indicates that the
 # animation is running on the compositor thread.
 player.runningOnCompositorTooltip=This animation is running on compositor thread
 
+# LOCALIZATION NOTE (timeline.rateSelectorTooltip):
+# This string is displayed in the timeline toolbar, as the tooltip of the
+# drop-down list that can be used to change the rate at which the animations
+# run.
+timeline.rateSelectorTooltip=Set the animations playback rates
+
+# LOCALIZATION NOTE (timeline.pauseResumeButtonTooltip):
+# This string is displayed in the timeline toolbar, as the tooltip of the
+# pause/resume button that can be used to pause or resume the animations
+timeline.pausedButtonTooltip=Resume the animations
+
+# LOCALIZATION NOTE (timeline.pauseResumeButtonTooltip):
+# This string is displayed in the timeline toolbar, as the tooltip of the
+# pause/resume button that can be used to pause or resume the animations
+timeline.resumedButtonTooltip=Pause the animations
+
+# LOCALIZATION NOTE (timeline.rewindButtonTooltip):
+# This string is displayed in the timeline toolbar, as the tooltip of the
+# rewind button that can be used to rewind the animations
+timeline.rewindButtonTooltip=Rewind the animations
+
 # LOCALIZATION NOTE (timeline.timeGraduationLabel):
 # This string is displayed at the top of the animation panel, next to each time
 # graduation, to indicate what duration (in milliseconds) this graduation

devtools/client/themes/animationinspector.css

@@ -178,11 +178,15 @@ body {
   left: 0;
   width: 100%;
   height: 100%;
+  background-image: url("chrome://devtools/skin/images/dropmarker.svg");
+  background-repeat: no-repeat;
+  background-position: calc(100% - 4px) center;
+  padding-right: 1em;
 }
 
 #timeline-rate {
   position: relative;
-  width: 4em;
+  width: 4.5em;
 }
 
 /* Animation timeline component */