fix: Fix formatting of events and their values

Some event objects do not inherit from Event (such as EME message
events).  This fixes HTML formatting of those using the event name.

This also fixes missing associated values that are falsey, such as a
playbackRate of 0 on a ratechange event (which happens in the Shaka
Player demo).

Change-Id: I10935834bd9c29f1ea6bc3475731d800069a0fbd

log-window.js

@@ -190,9 +190,15 @@ class EmeLogWindow {
         data.textContent += ` => ${prettyPrint(log.value)}`;
       }
     } else if (log.type == 'Event') {
-      data.textContent = `${log.className} ${prettyPrint(log.event)}`;
-      if (log.value) {
-        data.textContent = 'Associated value: ' + prettyPrint(log.value);
+      data.textContent = `${log.className} `;
+      if (!log.event.__type__) {
+        // If the event object didn't properly inherit from Event, then we may
+        // be missing type info.  Construct it now with the event name.
+        data.textContent += `${log.eventName} Event instance `;
+      }
+      data.textContent += prettyPrint(log.event);
+      if ('value' in log) {
+        data.textContent += '\nAssociated value: ' + prettyPrint(log.value);
       }
     }
 

spec/eme-trace-tests.js

@@ -374,6 +374,22 @@ describe('EME tracing', () => {
             'value': 2, /* playbackRate set above */
           }));
     });
+
+    it('events with falsey values', async () => {
+      // Should trigger a ratechange event with this value associated, even
+      // though the event name differs from the property name.
+      mediaElement.playbackRate = 0;
+
+      // A small delay for the ratechange event to fire.
+      await delay(0.5);
+
+      // Even though the associated value is falsey, we still log it.
+      expect(emeLogger).toHaveBeenCalledWith(
+          jasmine.objectContaining({
+            'eventName': 'ratechange',
+            'value': 0, /* playbackRate set above */
+          }));
+    });
   });
 
   describe('logs MediaKeys created via MediaCapabilities', () => {

spec/log-window-tests.js

@@ -162,12 +162,47 @@ describe('Log window', () => {
         type: TraceAnything.LogTypes.Event,
         className: 'SomeClass',
         eventName: 'someevent',
+        event: fakeObjectWithType('Event', {type: 'someevent'}),
       });
       expect(mockLogElement.querySelector('.title').textContent)
           .toContain('SomeClass someevent Event');
     });
   });
 
+  describe('formats event data', () => {
+    beforeEach(() => {
+      EmeLogWindow.instance.open();
+    });
+
+    it('for events with falsey values', () => {
+      EmeLogWindow.instance.appendLog({
+        timestamp: Date.now(),
+        type: TraceAnything.LogTypes.Event,
+        className: 'SomeClass',
+        eventName: 'someevent',
+        event: fakeObjectWithType('Event', {type: 'someevent'}),
+        value: 0,
+      });
+      expect(mockLogElement.querySelector('.data').textContent)
+          .toContain('Associated value: 0');
+    });
+
+    it('for events that are not Event objects', () => {
+      EmeLogWindow.instance.appendLog({
+        timestamp: Date.now(),
+        type: TraceAnything.LogTypes.Event,
+        className: 'SomeClass',
+        eventName: 'someevent',
+        event: {},
+        value: 0,
+      });
+      expect(mockLogElement.querySelector('.data').textContent)
+          .toContain('SomeClass someevent Event instance');
+      expect(mockLogElement.querySelector('.data').textContent)
+          .toContain('Associated value: 0');
+    });
+  });
+
   describe('value formatting', () => {
     beforeEach(() => {
       EmeLogWindow.instance.open();
@@ -183,28 +218,6 @@ describe('Log window', () => {
       });
     }
 
-    // This matches the format used in function emeLogger() in
-    // eme-trace-config.js for serializing complex objects.  Emulate it here.
-    function fakeObjectWithType(type, fields=null, data=null) {
-      const obj = {
-        __type__: type,
-      };
-
-      // Used for most object types to encode the fields that we serialized and
-      // send between windows.
-      if (fields) {
-        obj.__fields__ = fields;
-      }
-
-      // Used for ArrayBuffers and ArrayBufferViews like Uint8Array which encode
-      // an array of data.
-      if (data) {
-        obj.__data__ = data;
-      }
-
-      return obj;
-    }
-
     it('builds a formatted string from a undefined value', () => {
       logResult(undefined);
       expect(mockLogElement.querySelector('.data').textContent)
@@ -279,4 +292,26 @@ describe('Log window', () => {
       expect(JSON5.parse(objectText)).toEqual(fields);
     });
   });
+
+  // This matches the format used in function emeLogger() in
+  // eme-trace-config.js for serializing complex objects.  Emulate it here.
+  function fakeObjectWithType(type, fields=null, data=null) {
+    const obj = {
+      __type__: type,
+    };
+
+    // Used for most object types to encode the fields that we serialized and
+    // send between windows.
+    if (fields) {
+      obj.__fields__ = fields;
+    }
+
+    // Used for ArrayBuffers and ArrayBufferViews like Uint8Array which encode
+    // an array of data.
+    if (data) {
+      obj.__data__ = data;
+    }
+
+    return obj;
+  }
 });

trace-anything.js

@@ -880,7 +880,7 @@ TraceAnything.defaultLogger = (log) => {
       console.debug(`${logPrefix} =`, log.value);
     }
   } else if (log.type == TraceAnything.LogTypes.Event) {
-    if (log.value) {
+    if ('value' in log) {
       console.debug(logPrefix, log.event, '=>', log.value);
     } else {
       console.debug(logPrefix, log.event);