DevTools: adopt FilmStripModel to new screenshot recorder trace format

Source/devtools/front_end/main/Tests.js

 /*
  * Copyright (C) 2010 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions are
  * met:
  *
  *     * Redistributions of source code must retain the above copyright
  * notice, this list of conditions and the following disclaimer.
  *     * Redistributions in binary form must reproduce the above
@@ skipping 471 matching lines @@
     function finish()
     {
         test.releaseControl();
     }
 
     WebInspector.overridesSupport._deviceMetricsChangedListenerMuted = true;
     test.takeControl();
     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;
 
     createSettings();
     test.takeControl();
     setTimeout(reset, 0);
 
     function createSettings()
     {
@@ skipping 42 matching lines @@
         if (text === "PASS")
             this.releaseControl();
         else if (/^FAIL/.test(text))
             this.fail(text);
     }
 
     WebInspector.multitargetConsoleModel.addEventListener(WebInspector.ConsoleModel.Events.MessageAdded, onConsoleMessage, this);
     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
  * @return {string}
  */
 TestSuite.prototype.uiSourceCodesToString_ = function(uiSourceCodes)
 {
     var names = [];
     for (var i = 0; i < uiSourceCodes.length; i++)
         names.push('"' + WebInspector.networkMapping.networkURL(uiSourceCodes[i]) + '"');
@@ skipping 143 matching lines @@
 }
 
 WebInspector.notifications.addEventListener(WebInspector.NotificationService.Events.InspectorAgentEnabledForTests, runTests);
 
 return new TestSuite();
 
 }
 
 if (window.uiTests)
     window.uiTests.testSuiteReady(createTestSuite, WebInspector.TestBase);