fix: Made timestamp consistant (#46)

src/lib/ext-activitylog.js

@@ -90,9 +90,8 @@ class Model {
 
     const startTime = this.filter.timeStamp?.start;
     const stopTime = this.filter.timeStamp?.stop;
-    const logTime = Date.parse(logTimestamp);
 
-    if (logTime < startTime || logTime > stopTime) {
+    if (logTimestamp < startTime || logTimestamp > stopTime) {
       return false;
     }
 

src/lib/ext-monitor.js

@@ -34,6 +34,11 @@ export default class ExtensionMonitor {
 
   createLogListener() {
     return async (details) => {
+      // set a timestamp(number) as the value of timeStamp property
+      // TODO: Stop using `Date.parse` when `details.timeStamp` is a numeric timestamp.
+      // See https://bugzilla.mozilla.org/show_bug.cgi?id=1660460
+      details.timeStamp = Date.parse(details.timeStamp);
+
       this.logs.push(details);
       await this.sendLogs(details);
     };

src/lib/formatters.js

@@ -0,0 +1,11 @@
+export function dateTimeFormat(timestamp, options) {
+  const dateTime = new Date(timestamp);
+  const timeFormatOptions = { timeStyle: 'medium' };
+  const dateFormatOptions = { dateStyle: 'medium' };
+
+  const chosenOptions = options?.timeOnly
+    ? timeFormatOptions
+    : { ...timeFormatOptions, ...dateFormatOptions };
+
+  return new Intl.DateTimeFormat(undefined, chosenOptions).format(dateTime);
+}

src/lib/web-component/filter-timestamp/filter-timestamp-element.js

@@ -1,3 +1,5 @@
+import { dateTimeFormat } from '../../formatters.js';
+
 export class FilterTimestamp extends HTMLElement {
   constructor() {
     super();
@@ -33,14 +35,15 @@ export class FilterTimestamp extends HTMLElement {
 
     const timeStamp = this.timeStamp || {};
 
-    const chosenTimestamp = selectedRow.querySelector('.timestamp').textContent;
+    const chosenTimestamp = selectedRow._log.timeStamp;
+
     if (info.menuItemId === 'startTime') {
-      timeStamp.start = Date.parse(chosenTimestamp);
-      this.startTimeLabel.textContent = chosenTimestamp;
+      timeStamp.start = chosenTimestamp;
+      this.startTimeLabel.textContent = dateTimeFormat(chosenTimestamp);
       this.clearStartTimeBtn.hidden = false;
     } else if (info.menuItemId === 'stopTime') {
-      timeStamp.stop = Date.parse(chosenTimestamp);
-      this.stopTimeLabel.textContent = chosenTimestamp;
+      timeStamp.stop = chosenTimestamp;
+      this.stopTimeLabel.textContent = dateTimeFormat(chosenTimestamp);
       this.clearStopTimeBtn.hidden = false;
     }
 

src/lib/web-component/log-view/log-view-element.js

@@ -1,3 +1,5 @@
+import { dateTimeFormat } from '../../formatters.js';
+
 export class LogView extends HTMLElement {
   constructor() {
     super();
@@ -39,8 +41,12 @@ export class LogView extends HTMLElement {
       logTableRowInstance.hidden = !this.isFilterMatched(log);
 
       logTableRowInstance.querySelector('.id').textContent = log.id;
-      logTableRowInstance.querySelector('.timestamp').textContent =
-        log.timeStamp;
+
+      const timestamp = logTableRowInstance.querySelector('.timestamp');
+
+      timestamp.textContent = dateTimeFormat(log.timeStamp, { timeOnly: true });
+      timestamp.title = dateTimeFormat(log.timeStamp);
+
       logTableRowInstance.querySelector('.api-type').textContent = log.type;
 
       if (log.type === 'content_script') {

tests/ext-activitylog.test.js

@@ -269,3 +269,57 @@ test('clearing logs from activitylog page', async () => {
   expect(activityLog.model.logs).toMatchObject([]);
   expect(getTableRows().length).toBe(0);
 });
+
+test('timestamp is formatted and rendered correctly', () => {
+  const logs = [
+    {
+      /* renders 1st row in table */
+      id: 'id1@test',
+      viewType: 'viewType@test',
+      type: 'type@test',
+      data: [{ test: 'test1@data' }],
+      timeStamp: 1597686226302,
+    },
+  ];
+
+  const addListener = jest.fn();
+  const sendMessage = jest.fn();
+  const connect = jest.fn();
+
+  window.browser = {
+    runtime: {
+      onMessage: { addListener },
+      sendMessage,
+      connect,
+    },
+  };
+
+  sendMessage.mockImplementation(() => {
+    return Promise.resolve({ existingLogs: [] });
+  });
+
+  document.body.innerHTML = activityLogBody;
+
+  const originalIntlDateTimeFormat = Intl.DateTimeFormat;
+  const IntlDateTimeFormatFn = jest.spyOn(Intl, 'DateTimeFormat');
+
+  // For log timestamp: 1597686226302
+  const expectedTime = '5:43:46 PM';
+  const expectedDateTime = `Aug 17, 2020, 5:43:46 PM`;
+
+  const { activityLog } = new ActivityLog();
+  // To have consistant date time format, we choose "en-US" date time formatting and UTC timezone.
+  IntlDateTimeFormatFn.mockImplementation((zone, options) => {
+    options = { ...options, timeZone: 'UTC' };
+    return new originalIntlDateTimeFormat('en-US', options);
+  });
+
+  activityLog.handleNewLogs(logs);
+
+  const tableBody = activityLog.view.logView.shadowRoot.querySelector('tbody');
+  const tableRows = tableBody.querySelectorAll('tr');
+  const firstRowTimestamp = tableRows[0].querySelector('.timestamp');
+
+  expect(firstRowTimestamp.textContent).toEqual(expectedTime);
+  expect(firstRowTimestamp.title).toEqual(expectedDateTime);
+});