Bug 1134513 - shaky eme icon on first play, r=sevaan

--HG--
extra : amend_source : 3ccdc86226d0996c3836fe557bf8be6bdca78cf7

browser/base/content/browser-eme.js

@@ -167,6 +167,15 @@ let gEMEHandler = {
 
     let message = gNavigatorBundle.getFormattedString(msgId, [this._brandShortName]);
     let anchorId = "eme-notification-icon";
+    let firstPlayPref = "browser.eme.ui.firstContentShown";
+    if (!Services.prefs.getPrefType(firstPlayPref) ||
+        !Services.prefs.getBoolPref(firstPlayPref)) {
+      document.getElementById(anchorId).setAttribute("firstplay", "true");
+      Services.prefs.setBoolPref(firstPlayPref, true);
+    } else {
+      document.getElementById(anchorId).removeAttribute("firstplay");
+    }
+
 
     let mainAction = {
       label: gNavigatorBundle.getString(btnLabelId),

browser/themes/linux/browser.css

@@ -2217,6 +2217,17 @@ chatbox {
   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
 }
 
+#eme-notification-icon[firstplay=true] {
+  animation: emeTeachingMoment 0.2s linear 0s 5 normal;
+}
+
+@keyframes emeTeachingMoment {
+  0% {transform: translateX(0); }
+  25% {transform: translateX(3px) }
+  75% {transform: translateX(-3px) }
+  100% { transform: translateX(0); }
+}
+
 /* Customization mode */
 
 %include ../shared/customizableui/customizeMode.inc.css

browser/themes/osx/browser.css

@@ -4647,6 +4647,17 @@ window > chatbox {
   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
 }
 
+#eme-notification-icon[firstplay=true] {
+  animation: emeTeachingMoment 0.2s linear 0s 5 normal;
+}
+
+@keyframes emeTeachingMoment {
+  0% {transform: translateX(0); }
+  25% {transform: translateX(3px) }
+  75% {transform: translateX(-3px) }
+  100% { transform: translateX(0); }
+}
+
 /* Customization mode */
 
 %include ../shared/customizableui/customizeMode.inc.css

browser/themes/windows/browser.css

@@ -2838,6 +2838,17 @@ chatbox {
   list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
 }
 
+#eme-notification-icon[firstplay=true] {
+  animation: emeTeachingMoment 0.2s linear 0s 5 normal;
+}
+
+@keyframes emeTeachingMoment {
+  0% {transform: translateX(0); }
+  25% {transform: translateX(3px) }
+  75% {transform: translateX(-3px) }
+  100% { transform: translateX(0); }
+}
+
 /* Customization mode */
 
 %include ../shared/customizableui/customizeMode.inc.css