DevTools: adopt FilmStripModel to new screenshot recorder trace format

Source/devtools/front_end/main/Tests.js

Index: Source/devtools/front_end/main/Tests.js
diff --git a/Source/devtools/front_end/main/Tests.js b/Source/devtools/front_end/main/Tests.js
index 9c7b2412a76fe55f668f5b09d9e788452f2cc0d0..25f51ff64867ef5b8c17f8c3b48f55e70750d217 100644
--- a/Source/devtools/front_end/main/Tests.js
+++ b/Source/devtools/front_end/main/Tests.js
@@ -489,6 +489,85 @@ TestSuite.prototype.testDeviceMetricsOverrides = function()
     this.waitForThrottler(WebInspector.overridesSupport._deviceMetricsThrottler, step1);
 };
 
+TestSuite.prototype.testScreenshotRecording = function()
+{
+    var test = this;
+
+    function performActionsInPage(callback)
+    {
+        var count = 0;
+        var d = document.createElement("div");
+        d.style.width = "100px";
+        d.style.height = "100px";
+        d.style.position = "absolute";
+        d.style.left = "0px";
+        d.style.top = "0px";
+        document.body.appendChild(d);
+        requestAnimationFrame(frame);
+        function frame()
+        {
+            var color = [0, 0, 0];
+            color[count % 3] = 255;
+            d.style.backgroundColor = "rgb(" + color.join(",") + ")";
+            if (++count > 5)
+                requestAnimationFrame(callback);
+            else
+                requestAnimationFrame(frame);
+        }
+    }
+
+    Runtime.experiments.enableForTest("filmStripInNetworkAndTimeline");
+    var captureFilmStripSetting = WebInspector.settings.createSetting("timelineCaptureFilmStrip", false);
+    captureFilmStripSetting.set(true);
+    test.evaluateInConsole_(performActionsInPage.toString(), function() {});
+    test.invokeAsyncWithTimeline_("performActionsInPage", onTimelineDone);
+
+    function onTimelineDone()
+    {
+        captureFilmStripSetting.set(false);
+        var filmStripModel = new WebInspector.FilmStripModel(WebInspector.panels.timeline._tracingModel);
+        var frames = filmStripModel.frames();
+        console.error("Frame count: " + frames.length);
+        test.assertTrue(frames.length > 2 && typeof frames.length === "number");

[alph, 2015/06/17 13:47:51]

We tend to not use assert in tests, but rather log results to the output.

+        loadFrameImages(frames);
+    }
+
+    function loadFrameImages(frames)
+    {
+        var readyImages = [];
+        for (var frame of frames) {
+            var image = new Image();
+            image.addEventListener("load", onLoad);
+            image.src = "data:image/jpg;base64," + frame.imageData;

[alph, 2015/06/17 13:47:51]

Ain't you just nuked imageData?

+        }
+
+        function onLoad(event)
+        {
+            readyImages.push(event.target);
+            if (readyImages.length === frames.length)
+                validateImagesAndCompleteTest(readyImages);
+        }
+    }
+
+    function validateImagesAndCompleteTest(images)
+    {
+        var canvas = document.createElement("canvas");
+        var ctx = canvas.getContext("2d");
+        for (var image of images) {
+            test.assertTrue(image.naturalWidth > 10);

[alph, 2015/06/17 13:47:51]

ditto for assertTrue

+            test.assertTrue(image.naturalHeight > 10);
+            canvas.width = image.naturalWidth;
+            canvas.height = image.naturalHeight;
+            ctx.drawImage(image, 0, 0);
+            var data = ctx.getImageData(0, 0, 1, 1);
+            console.error("Color " + Array.prototype.join.call(data.data, ","));
+        }
+        test.releaseControl();
+    }
+
+    test.takeControl();
+}
+
 TestSuite.prototype.testSettings = function()
 {
     var test = this;
@@ -551,6 +630,43 @@ TestSuite.prototype.waitForTestResultsInConsole = function()
     this.takeControl();
 };
 
+TestSuite.prototype.invokeAsyncWithTimeline_ = function(functionName, callback)
+{
+    var test = this;
+    test.showPanel("timeline").then(function() {
+        WebInspector.panels.timeline._model.addEventListener(WebInspector.TimelineModel.Events.RecordingStarted, onRecordingStarted);
+        WebInspector.panels.timeline.toggleTimelineButton.element.click();
+    });
+
+    function onRecordingStarted()
+    {
+        WebInspector.panels.timeline._model.removeEventListener(WebInspector.TimelineModel.Events.RecordingStarted, onRecordingStarted);
+        test.evaluateInConsole_(functionName + "(function() { console.log('DONE'); });", function() {});
+        WebInspector.multitargetConsoleModel.addEventListener(WebInspector.ConsoleModel.Events.MessageAdded, onConsoleMessage, this);

[alph, 2015/06/17 13:47:51]

Not sure, but does it make sense to addEventListener before evaluateInConsole?

+    }
+
+    function onConsoleMessage(event)
+    {
+        var text = event.data.messageText;
+        if (text === "DONE") {
+            WebInspector.multitargetConsoleModel.removeEventListener(WebInspector.ConsoleModel.Events.MessageAdded, onConsoleMessage, this);
+            pageActionsDone();
+        }
+    }
+
+    function pageActionsDone()
+    {
+        WebInspector.panels.timeline._model.addEventListener(WebInspector.TimelineModel.Events.RecordingStopped, onRecordingStopped);
+        WebInspector.panels.timeline.toggleTimelineButton.element.click();
+    }
+
+    function onRecordingStopped()
+    {
+        WebInspector.panels.timeline._model.removeEventListener(WebInspector.TimelineModel.Events.RecordingStopped, onRecordingStopped);
+        callback();
+    }
+};
+
 /**
  * Serializes array of uiSourceCodes to string.
  * @param {!Array.<!WebInspectorUISourceCode>} uiSourceCodes