Bug 481082. Video controls listen for stalled event and change the UI accordingly. r=dolske

toolkit/content/widgets/videocontrols.xml

@@ -303,7 +303,7 @@
                                "loadstart", "timeupdate", "progress",
                                "playing", "waiting", "canplay", "canplaythrough",
                                "seeking", "seeked", "emptied", "loadedmetadata",
-                               "error", "suspend"],
+                               "error", "suspend", "stalled"],
 
                 firstFrameShown : false,
                 timeUpdateCount : 0,
@@ -463,9 +463,15 @@
                             this.setPlayButtonState(true);
                             break;
                         case "progress":
+                            this.statusIcon.removeAttribute("stalled");
                             this.showBuffered();
                             this.setupStatusFader();
                             break;
+                        case "stalled":
+                            this.statusIcon.setAttribute("stalled", "true");
+                            this.statusIcon.setAttribute("type", "throbber");
+                            this.setupStatusFader();
+                            break;
                         case "suspend":
                             this.setupStatusFader();
                             break;

toolkit/themes/pinstripe/global/jar.mn

@@ -148,6 +148,7 @@ toolkit.jar:
   skin/classic/global/media/scrubberThumbWide.png                    (media/scrubberThumbWide.png)
   skin/classic/global/media/error.png                                (media/error.png)
   skin/classic/global/media/throbber.png                             (media/throbber.png)
+  skin/classic/global/media/stalled.png                              (media/stalled.png)
   skin/classic/global/media/volumeThumb.png                          (media/volumeThumb.png)
   skin/classic/global/menu/menu-arrow.png                            (menu/menu-arrow.png)
   skin/classic/global/menu/menu-check.png                            (menu/menu-check.png)

toolkit/themes/pinstripe/global/media/videocontrols.css

@@ -172,6 +172,10 @@
   background: url(chrome://global/skin/media/throbber.png) no-repeat center;
 }
 
+.statusIcon[type="throbber"][stalled] {
+  background: url(chrome://global/skin/media/stalled.png) no-repeat center;
+}
+
 .statusIcon[type="error"] {
   background: url(chrome://global/skin/media/error.png) no-repeat center;
 }

toolkit/themes/winstripe/global/jar.mn

@@ -155,6 +155,7 @@ toolkit.jar:
         skin/classic/global/media/scrubberThumb.png              (media/scrubberThumb.png)
         skin/classic/global/media/scrubberThumbWide.png          (media/scrubberThumbWide.png)
         skin/classic/global/media/throbber.png                   (media/throbber.png)
+        skin/classic/global/media/stalled.png                    (media/stalled.png)
         skin/classic/global/media/volumeThumb.png                (media/volumeThumb.png)
         skin/classic/global/media/error.png                      (media/error.png)
         skin/classic/global/printpreview/arrow-left.png          (printpreview/arrow-left.png)
@@ -334,6 +335,7 @@ toolkit.jar:
         skin/classic/aero/global/media/scrubberThumb.png                 (media/scrubberThumb.png)
         skin/classic/aero/global/media/scrubberThumbWide.png             (media/scrubberThumbWide.png)
         skin/classic/aero/global/media/throbber.png                      (media/throbber.png)
+        skin/classic/aero/global/media/stalled.png                       (media/stalled.png)
         skin/classic/aero/global/media/volumeThumb.png                   (media/volumeThumb.png)
         skin/classic/aero/global/media/error.png                         (media/error.png)
         skin/classic/aero/global/printpreview/arrow-left.png             (printpreview/arrow-left-aero.png)

toolkit/themes/winstripe/global/media/videocontrols.css

@@ -181,6 +181,10 @@
   background: url(chrome://global/skin/media/throbber.png) no-repeat center;
 }
 
+.statusIcon[type="throbber"][stalled] {
+  background: url(chrome://global/skin/media/stalled.png) no-repeat center;
+}
+
 .statusIcon[type="error"] {
   background: url(chrome://global/skin/media/error.png) no-repeat center;
 }