WebUI: Trigger critical lottie player events and fix linting

This patch adds the posting of important messages to the parent thread.
The messages are send when:
 - a lottie animation is initialized.
 - a lottie animation has started playing.
 - a lottie animation has resized its canvas.

This patch also fixes the lint for the wrapper code to be closer to
chromium's style guide.

Change-Id: Ibf27da53ec4bba6ec696041e312c7fb317a64833
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1747195
Commit-Queue: Malay Keshav <malaykeshav@chromium.org>
Reviewed-by: Mitsuru Oshima (OOO 8/12,13) <oshima@chromium.org>
Cr-Commit-Position: refs/heads/master@{#686507}

third_party/lottie/README.chromium

@@ -16,4 +16,4 @@ The library has been modified to be able to run on javascript worker thread whic
 
 Generating Minified Version:
 To generate the minified version use node's uglify-js-
-$ node uglifyjs --compress --mangle reserved=['onmessage'] lottie_worker.js -o lottie_worker.min.js -b beautify=false,ascii_only=true
+$ node uglifyjs --compress --mangle reserved=['onmessage', 'postMessage'] lottie_worker.js -o lottie_worker.min.js -b beautify=false,ascii_only=true

third_party/lottie/README.md

@@ -54,3 +54,30 @@ data: {
   }
 },
 ```
+
+## Events fired back to the parent thread
+The web worker running the lottie player will send the following events back to
+its parent thread:
+1. **'initialized'**
+```javascript
+{
+    name: 'initialized',
+    success: true/false // True if the animation was successfully initialized.
+}
+```
+2. **'playing'**
+```javascript
+{
+    name: 'playing'
+}
+```
+3. **'resized'**
+```javascript
+{
+    name: 'resized',
+    size: {
+        height: HEIGHT, // Current height of canvas in pixels.
+        width: WIDTH    // Current width of canvas in pixels.
+    }
+}
+```

third_party/lottie/lottie_worker.js

@@ -12150,47 +12150,117 @@ GroupEffect.prototype.init = function(data,element){
  * a wrapper that manages animation control for each animation.
  */
 
+/**
+ * An instance of the currently running lottie animation.
+ * @type {?AnimationItem}
+ */
 var currentAnimation = null;
 
+/**
+ * Events sent back to the parent thread.
+ */
+var events = {
+  INITIALIZED: 'initialized',  // Send when the animation was successfully
+                               // initialized.
+  RESIZED: 'resized',  // Sent when the animation has been resized.
+  PLAYING: 'playing'   // Send when the animation started playing.
+};
+
+/**
+ * Returns the size of the canvas on which the current animation is running on.
+ * @return {Object<string, number>} Returns the current size of canvas
+ */
+getCurrentCanvasSize = function() {
+  var canvas = currentAnimation.renderer.canvasContext.canvas;
+  return {
+    height: canvas.height,
+    width: canvas.width
+  };
+}
+
+/**
+ * Informs the parent thread that the canvas has been resized and also sends the
+ * new size.
+ */
+sendResizeEvent = function() {
+  var canvas = currentAnimation.renderer.canvasContext.canvas;
+  postMessage({
+    name: events.RESIZED,
+    size: getCurrentCanvasSize()
+  });
+};
+
+/**
+ * Informs the parent thread that the animation has started playing.
+ */
+sendPlayEvent = function() {
+  postMessage({
+    name: events.PLAYING
+  });
+}
+
+/**
+ * Informs the parent thread that the animation has finished initializing.
+ */
+sendInitializedEvent = function() {
+  var canvas = currentAnimation.renderer.canvasContext.canvas;
+  postMessage({
+    name: events.INITIALIZED,
+    success: currentAnimation.isLoaded
+  })
+}
+
 onmessage = function(evt) {
-    if (!evt || !evt.data) return;
+  if (!evt || !evt.data) return;
 
-    var canvas = null;
+  var canvas = null;
+  if (currentAnimation) {
+    canvas = currentAnimation.renderer.canvasContext.canvas;
+  } else if (evt.data.canvas) {
+    canvas = evt.data.canvas;
+  } else {
+    return;
+  }
+
+  // Set the draw size of the canvas. This is the pixel size at which the
+  // lottie renderer will render the frames.
+  if (evt.data.drawSize && evt.data.drawSize.height > 0 &&
+    evt.data.drawSize.width > 0) {
+    canvas.height = evt.data.drawSize.height;
+    canvas.width = evt.data.drawSize.width;
+
+    // Update lottie player to use the new canvas size.
     if (currentAnimation) {
-        canvas = currentAnimation.renderer.canvasContext.canvas;
-    } else if (evt.data.canvas) {
-        canvas = evt.data.canvas;
-    } else {
-        return;
+      currentAnimation.resize();
+      sendResizeEvent();
     }
+  }
+
+  if (!currentAnimation) {
+    if (!evt.data.animationData || !evt.data.params)
+      return;
+    var params = evt.data.params;
+    var ctx = canvas.getContext("2d");
+    currentAnimation = lottiejs.loadAnimation({
+      renderer: 'canvas',
+      loop: params.loop,
+      autoplay: params.autoplay,
+      animationData: evt.data.animationData,
+      rendererSettings: {
+        context: ctx,
+        scaleMode: 'noScale',
+        clearCanvas: true
+      }
+    });
 
-    // Set the draw size of the canvas. This is the pixel size at which the
-    // lottie renderer will render the frames.
-    if (evt.data.drawSize) {
-        canvas.height = evt.data.drawSize.height;
-        canvas.width = evt.data.drawSize.width;
+    sendInitializedEvent();
 
-        // Update lottie player to use the new canvas size.
-        if (currentAnimation)
-            currentAnimation.resize();
+    if (params.autoplay) {
+      currentAnimation.play();
     }
 
-    if (!currentAnimation) {
-        if (!evt.data.animationData || !evt.data.params)
-            return;
-        var params = evt.data.params;
-        var ctx = canvas.getContext("2d");
-        currentAnimation = lottiejs.loadAnimation({
-            renderer: 'canvas',
-            loop: params.loop,
-            autoplay: params.autoplay,
-            animationData: evt.data.animationData,
-            rendererSettings: {
-                context: ctx,
-                scaleMode: 'noScale',
-                clearCanvas: true
-            }
-        });
-        currentAnimation.play();
+    if (currentAnimation.isLoaded && !currentAnimation.isPaused) {
+      sendPlayEvent();
     }
+  }
 };