Web: Show Local timezone in the Timing tab (#7804)

* show local datetime

* Add TZ=UTC in test script

* update changelog

* review changes

* [autofix.ci] apply automated fixes

* review changes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

CHANGELOG.md

@@ -19,6 +19,8 @@
   ([#7734](https://github.com/mitmproxy/mitmproxy/pull/7734), @lups2000)
 - Add syntax highlighting for CSS and JavaScript contentviews.
   ([#7749](https://github.com/mitmproxy/mitmproxy/pull/7749), @mhils)
+- Display local timezone in the Timing tab of mitmweb.
+  ([#7804](https://github.com/mitmproxy/mitmproxy/pull/7804), @lups2000)
 
 ## 25 May 2025: mitmproxy 12.1.1
 

web/eslint.config.mjs

@@ -38,7 +38,12 @@ export default defineConfig([
         },
     },
     {
-        files: ["jest.config.js", "gulpfile.js", "setup-jest.js"],
+        files: [
+            "jest.config.js",
+            "gulpfile.js",
+            "setup-jest.js",
+            "setup-global-jest.js",
+        ],
         languageOptions: { globals: globals.node },
     },
     {

web/jest.config.js

@@ -25,5 +25,6 @@ module.exports = async () => {
             ],
         },
         setupFilesAfterEnv: ["<rootDir>/setup-jest.js"],
+        globalSetup: "<rootDir>/setup-global-jest.js",
     };
 };

web/setup-global-jest.js

@@ -0,0 +1,3 @@
+export default function () {
+    process.env.TZ = "UTC";
+}

web/setup-jest.js

@@ -1,4 +1,3 @@
-process.env.TZ = "UTC";
 const err = console.error;
 console.warn = console.error = function () {
     err.apply(console, arguments);

web/src/js/__tests__/utilsSpec.tsx

@@ -23,10 +23,10 @@ describe("formatTimeDelta", () => {
 describe("formatTimeStamp", () => {
     it("should return formatted time", () => {
         expect(
-            utils.formatTimeStamp(1483228800, { milliseconds: false }),
+            utils.formatTimeStamp(1483228800, { includeMilliseconds: false }),
         ).toEqual("2017-01-01 00:00:00");
         expect(
-            utils.formatTimeStamp(1483228800, { milliseconds: true }),
+            utils.formatTimeStamp(1483228800, { includeMilliseconds: true }),
         ).toEqual("2017-01-01 00:00:00.000");
     });
 });

web/src/js/components/FlowView/Connection.tsx

@@ -115,7 +115,7 @@ export function CertificateInfo({ flow }: { flow: Flow }): React.ReactElement {
                         <td>Valid from</td>
                         <td>
                             {formatTimeStamp(cert.notbefore, {
-                                milliseconds: false,
+                                includeMilliseconds: false,
                             })}
                         </td>
                     </tr>
@@ -123,7 +123,7 @@ export function CertificateInfo({ flow }: { flow: Flow }): React.ReactElement {
                         <td>Valid to</td>
                         <td>
                             {formatTimeStamp(cert.notafter, {
-                                milliseconds: false,
+                                includeMilliseconds: false,
                             })}
                         </td>
                     </tr>

web/src/js/utils.ts

@@ -33,12 +33,22 @@ export const formatTimeDelta = function (milliseconds) {
 
 export const formatTimeStamp = function (
     seconds: number,
-    { milliseconds = true } = {},
+    { includeMilliseconds = true } = {},
 ) {
-    const utc = new Date(seconds * 1000);
-    let ts = utc.toISOString().replace("T", " ").replace("Z", "");
-    if (!milliseconds) ts = ts.slice(0, -4);
-    return ts;
+    const date = new Date(seconds * 1000);
+
+    const yearStr = String(date.getFullYear());
+    const monthStr = String(date.getMonth() + 1).padStart(2, "0");
+    const dayStr = String(date.getDate()).padStart(2, "0");
+    const hourStr = String(date.getHours()).padStart(2, "0");
+    const minuteStr = String(date.getMinutes()).padStart(2, "0");
+    const secondStr = String(date.getSeconds()).padStart(2, "0");
+    const millisecondStr = String(date.getMilliseconds()).padStart(3, "0");
+
+    let timestamp = `${yearStr}-${monthStr}-${dayStr} ${hourStr}:${minuteStr}:${secondStr}`;
+    if (includeMilliseconds) timestamp += `.${millisecondStr}`;
+
+    return timestamp;
 };
 
 export function formatAddress(address: [string, number]): string {