DevTools: fix animations panel after image loading became async

third_party/WebKit/Source/devtools/front_end/animation/AnimationTimeline.js

 // Copyright (c) 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @constructor
  * @extends {WebInspector.VBox}
  * @implements {WebInspector.TargetManager.Observer}
  */
 WebInspector.AnimationTimeline = function()
@@ skipping 173 matching lines @@
      * @param {!WebInspector.Popover} popover
      */
     _showPopover: function(anchor, popover)
     {
         var animGroup;
         for (var group of this._previewMap.keysArray()) {
             if (this._previewMap.get(group).element === anchor.parentElement)
                 animGroup = group;
         }
         console.assert(animGroup);
-        var screenshots = animGroup.screenshots();
+        var screenshots = animGroup.screenshots(onImageLoad);
         if (!screenshots.length)
             return;
-        var content = new WebInspector.AnimationScreenshotPopover(screenshots);
-        popover.setNoMargins(true);
-        popover.showView(content, anchor);
+        if (screenshots[0].complete)

[lushnikov, 2016/08/01 23:16:11]

why do we care only about the 0's screenshot?

[luoe, 2016/08/02 00:24:10]

We shouldn't :)
Changed to keep a counter for remaining loading images.  When it hits 0, we call
onImageLoad().

+            onImageLoad();
+
+        var loaded = false;
+        function onImageLoad()
+        {
+            if (loaded)
+                return;
+            loaded = true;
+
+            var content = new WebInspector.AnimationScreenshotPopover(screenshots);
+            popover.setNoMargins(true);
+            popover.showView(content, anchor);
+        }
     },
 
     _onHidePopover: function()
     {
     },
 
     _togglePauseAll: function()
     {
         this._allPaused = !this._allPaused;
         this._pauseButton.setToggled(this._allPaused);
@@ skipping 541 matching lines @@
  */
 WebInspector.AnimationTimeline.StepTimingFunction.parse = function(text) {
     var match = text.match(/^step-(start|middle|end)$/);
     if (match)
         return new WebInspector.AnimationTimeline.StepTimingFunction(1, match[1]);
     match = text.match(/^steps\((\d+), (start|middle|end)\)$/);
     if (match)
         return new WebInspector.AnimationTimeline.StepTimingFunction(parseInt(match[1], 10), match[2]);
     return null;
 }