fix: Made timestamp consistant

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-listen.js

@@ -31,3 +31,19 @@ export function openActivityLogPage() {
     url: getActivityLogPageURL(),
   });
 }
+
+export function dateTimeFormat(timestamp, options) {
+  const dateTime = new Date(timestamp);
+  const time = dateTime.toLocaleTimeString();
+
+  if (options?.timeOnly) {
+    return time;
+  }
+
+  const dateFormatOptions = { month: 'short', day: 'numeric', year: 'numeric' };
+  const date = new Intl.DateTimeFormat(undefined, dateFormatOptions).format(
+    dateTime
+  );
+
+  return `${date} ${time}`;
+}

src/lib/ext-monitor.js

@@ -34,6 +34,9 @@ export default class ExtensionMonitor {
 
   createLogListener() {
     return async (details) => {
+      // set a timestamp(number) as the value of timeStamp property
+      details.timeStamp = Date.parse(details.timeStamp);
+
       this.logs.push(details);
       await this.sendLogs(details);
     };

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

@@ -1,3 +1,5 @@
+import { dateTimeFormat } from '../../ext-listen.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 '../../ext-listen.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

@@ -5,6 +5,7 @@ import ActivityLog from '../src/lib/ext-activitylog';
 import { FilterOption } from '../src/lib/web-component/filter-option/filter-option-element';
 import { LogView } from '../src/lib/web-component/log-view/log-view-element';
 import { FilterKeyword } from '../src/lib/web-component/filter-keyword/filter-keyword-element';
+import * as ExtListen from '../src/lib/ext-listen';
 
 const activityLogHtml = fs.readFileSync(
   path.resolve(__dirname, '../src/activitylog/activitylog.html'),
@@ -269,3 +270,77 @@ 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 logTimestamp = 1597686226302;
+
+  const logs = [
+    {
+      /* renders 1st row in table */
+      id: 'id1@test',
+      viewType: 'viewType@test',
+      type: 'type@test',
+      data: [{ test: 'test1@data' }],
+      timeStamp: logTimestamp,
+    },
+  ];
+
+  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 dateTimeFormatFn = jest.spyOn(ExtListen, 'dateTimeFormat');
+
+  const { activityLog } = new ActivityLog();
+
+  // To have consistant date format, we choose "en-US" formatting
+  let expectedDate;
+  dateTimeFormatFn.mockImplementation((timestamp, options) => {
+    const dateTime = new Date(timestamp);
+    const time = dateTime.toLocaleTimeString();
+
+    if (options?.timeOnly) {
+      return time;
+    }
+
+    const dateFormatOptions = {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric',
+    };
+    expectedDate = new Intl.DateTimeFormat('en-US', dateFormatOptions).format(
+      dateTime
+    );
+
+    return `${expectedDate} ${time}`;
+  });
+
+  activityLog.handleNewLogs(logs);
+
+  expect(dateTimeFormatFn).toHaveBeenCalled();
+
+  const dateTime = new Date(logTimestamp);
+  const expectedTime = dateTime.toLocaleTimeString();
+  const expectedDateTime = `${expectedDate} ${expectedTime}`;
+
+  const tableBody = activityLog.view.logView.shadowRoot.querySelector('tbody');
+  const tableRows = tableBody.querySelectorAll('tr');
+  const firstRowTimestamp = tableRows[0].querySelector('.timestamp');
+
+  // For log timestamp: 1597686226302
+  expect(firstRowTimestamp.textContent).toEqual(expectedTime);
+  expect(firstRowTimestamp.title).toEqual(expectedDateTime);
+});