[skottie-wasm-perf] Command line application to measure perf

Uses puppeteer to bring up Chrome headless and then calls
skottie-wasm-perf-html with endpoints for canvaskit.js, canvaskit.wasm,
and the target lottie file.

Notry: true
Bug: skia:9179
Change-Id: I3250f2edf92329dce6e3f0bf125fa26b70bed632
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/221557
Reviewed-by: Joe Gregorio <jcgregorio@google.com>
Commit-Queue: Ravi Mistry <rmistry@google.com>

tools/skottie-wasm-perf/package.json

@@ -4,7 +4,12 @@
   "description": "",
   "main": "index.js",
   "dependencies": {
-    "canvaskit-wasm": "^0.6.0"
+    "command-line-args": "^5.0.2",
+    "command-line-usage": "^5.0.3",
+    "express": "^4.16.3",
+    "lottie-web": "5.2.1",
+    "node-fetch": "^2.2.0",
+    "puppeteer": "~1.17.0"
   },
   "devDependencies": {},
   "scripts": {

tools/skottie-wasm-perf/skottie-wasm-perf.js

@@ -0,0 +1,156 @@
+/**
+ * Command line application to run Skottie-WASM perf on a Lottie file in the
+ * browser and then exporting the result.
+ *
+ */
+const puppeteer = require('puppeteer');
+const express = require('express');
+const fs = require('fs');
+const commandLineArgs = require('command-line-args');
+const commandLineUsage= require('command-line-usage');
+const fetch = require('node-fetch');
+
+const opts = [
+  {
+    name: 'canvaskit_js',
+    typeLabel: '{underline file}',
+    description: 'The path to canvaskit.js.'
+  },
+  {
+    name: 'canvaskit_wasm',
+    typeLabel: '{underline file}',
+    description: 'The path to canvaskit.wasm.'
+  },
+  {
+    name: 'input',
+    typeLabel: '{underline file}',
+    description: 'The Lottie JSON file to process.'
+  },
+  {
+    name: 'output',
+    typeLabel: '{underline file}',
+    description: 'The perf file to write. Defaults to perf.json',
+  },
+  {
+    name: 'port',
+    description: 'The port number to use, defaults to 8081.',
+    type: Number,
+  },
+  {
+    name: 'help',
+    alias: 'h',
+    type: Boolean,
+    description: 'Print this usage guide.'
+  },
+];
+
+const usage = [
+  {
+    header: 'Skottie WASM Perf',
+    content: "Command line application to run Skottie-WASM perf."
+  },
+  {
+    header: 'Options',
+    optionList: opts,
+  },
+];
+
+// Parse and validate flags.
+const options = commandLineArgs(opts);
+
+if (!options.output) {
+  options.output = 'perf.json';
+}
+if (!options.port) {
+  options.port = 8081;
+}
+
+if (options.help) {
+  console.log(commandLineUsage(usage));
+  process.exit(0);
+}
+
+if (!options.canvaskit_js) {
+  console.error('You must supply path to canvaskit.js.');
+  console.log(commandLineUsage(usage));
+  process.exit(1);
+}
+
+if (!options.canvaskit_wasm) {
+  console.error('You must supply path to canvaskit.wasm.');
+  console.log(commandLineUsage(usage));
+  process.exit(1);
+}
+
+if (!options.input) {
+  console.error('You must supply a Lottie JSON filename.');
+  console.log(commandLineUsage(usage));
+  process.exit(1);
+}
+
+// Start up a web server to serve the three files we need.
+let canvasKitJS = fs.readFileSync(options.canvaskit_js, 'utf8');
+let canvasKitWASM = fs.readFileSync(options.canvaskit_wasm, 'binary');
+let driverHTML = fs.readFileSync('skottie-wasm-perf.html', 'utf8');
+let lottieJSON = fs.readFileSync(options.input, 'utf8');
+
+const app = express();
+app.get('/', (req, res) => res.send(driverHTML));
+app.get('/res/canvaskit.wasm', function(req, res) {
+  res.type('application/wasm');
+  res.send(new Buffer(canvasKitWASM, 'binary'));
+});
+app.get('/res/canvaskit.js', (req, res) => res.send(canvasKitJS));
+app.get('/res/lottie.json', (req, res) => res.send(lottieJSON));
+app.listen(options.port, () => console.log('- Local web server started.'))
+
+// Utility function.
+async function wait(ms) {
+    await new Promise(resolve => setTimeout(() => resolve(), ms));
+    return ms;
+}
+
+const targetURL = "http://localhost:" + options.port + "/";
+
+// Drive chrome to load the web page from the server we have running.
+async function driveBrowser() {
+  console.log('- Launching chrome.');
+  const browser = await puppeteer.launch(
+      {headless: true, args: ['--no-sandbox', '--disable-setuid-sandbox']});
+  const page = await browser.newPage();
+  console.log("Loading " + targetURL);
+  try {
+    await page.goto(targetURL, {
+      timeout: 20000,
+      waitUntil: 'networkidle0'
+    });
+    console.log('Waiting 20s for run to be done');
+    await page.waitForFunction('window._skottieDone === true', {
+      timeout: 20000,
+    });
+  } catch(e) {
+    console.log('Timed out while loading or drawing. Either the JSON file was ' +
+                'too big or hit a bug.', e);
+    await browser.close();
+    process.exit(0);
+  }
+
+  // Write results.
+  var extractResults = function() {
+    return {
+      'frame_avg_us': window._avgFrameTimeUs,
+      'frame_max_us': window._maxFrameTimeUs,
+      'frame_min_us': window._minFrameTimeUs,
+      'gpu': window._gpu,
+    };
+  }
+  var data = await page.evaluate(extractResults);
+  console.log(data)
+  fs.writeFileSync(options.output, JSON.stringify(data), 'utf-8');
+
+  await browser.close();
+  // Need to call exit() because the web server is still running.
+  process.exit(0);
+}
+
+driveBrowser();