Use the meta.profilingStartTime and meta.profilingEndTime fields

locales/en-US/app.ftl

@@ -506,6 +506,8 @@ MenuButtons--metaInfo--logical-cpu =
        *[other] { $logicalCPUs } logical cores
     }
 
+MenuButtons--metaInfo--profiling-started = Recording started:
+MenuButtons--metaInfo--profiling-session = Recording length:
 MenuButtons--metaInfo--main-process-started = Main process started:
 MenuButtons--metaInfo--main-process-ended = Main process ended:
 MenuButtons--metaInfo--interval = Interval:
@@ -525,6 +527,7 @@ MenuButtons--metaInfo--buffer-duration-seconds =
 MenuButtons--metaInfo--buffer-duration-unlimited = Unlimited
 MenuButtons--metaInfo--application = Application
 MenuButtons--metaInfo--name-and-version = Name and version:
+MenuButtons--metaInfo--application-uptime = Uptime:
 MenuButtons--metaInfo--update-channel = Update channel:
 MenuButtons--metaInfo--build-id = Build ID:
 MenuButtons--metaInfo--build-type = Build type:

src/components/app/MenuButtons/MetaInfo.js

@@ -218,7 +218,27 @@ class MetaInfoPanelImpl extends React.PureComponent<Props, State> {
     return (
       <>
         <div className="metaInfoSection">
-          {meta.startTime ? (
+          {meta.profilingStartTime !== undefined ? (
+            <div className="metaInfoRow">
+              <span className="metaInfoLabel">
+                <Localized id="MenuButtons--metaInfo--profiling-started">
+                  Recording started:
+                </Localized>
+              </span>
+              {_formatDate(meta.startTime + meta.profilingStartTime)}
+            </div>
+          ) : null}
+          {meta.profilingStartTime !== undefined && meta.profilingEndTime ? (
+            <div className="metaInfoRow">
+              <span className="metaInfoLabel">
+                <Localized id="MenuButtons--metaInfo--profiling-session">
+                  Recording length:
+                </Localized>
+              </span>
+              {formatTimestamp(meta.profilingEndTime - meta.profilingStartTime)}
+            </div>
+          ) : null}
+          {meta.profilingStartTime === undefined && meta.startTime ? (
             <div className="metaInfoRow">
               <span className="metaInfoLabel">
                 <Localized id="MenuButtons--metaInfo--main-process-started">
@@ -310,6 +330,16 @@ class MetaInfoPanelImpl extends React.PureComponent<Props, State> {
               {formatProductAndVersion(meta)}
             </div>
           ) : null}
+          {meta.profilingStartTime ? (
+            <div className="metaInfoRow">
+              <span className="metaInfoLabel">
+                <Localized id="MenuButtons--metaInfo--application-uptime">
+                  Uptime:
+                </Localized>
+              </span>
+              {formatTimestamp(meta.profilingStartTime)}
+            </div>
+          ) : null}
           {meta.updateChannel ? (
             <div className="metaInfoRow">
               <span className="metaInfoLabel">

src/components/app/WindowTitle.js

@@ -71,7 +71,9 @@ class WindowTitleImpl extends PureComponent<Props> {
           if (formattedMetaInfoString) {
             title += formattedMetaInfoString + SEPARATOR;
           }
-          title += _formatDateTime(meta.startTime);
+          title += _formatDateTime(
+            meta.startTime + (meta.profilingStartTime || 0)
+          );
           if (dataSource === 'public') {
             title += ` (${dataSource})`;
           }

src/profile-logic/process-profile.js

@@ -1508,7 +1508,7 @@ export function processGeckoProfile(geckoProfile: GeckoProfile): Profile {
     pages = pages.concat(subprocessProfile.pages || []);
   }
 
-  const meta = {
+  const meta: ProfileMeta = {
     interval: geckoProfile.meta.interval,
     startTime: geckoProfile.meta.startTime,
     abi: geckoProfile.meta.abi,
@@ -1544,6 +1544,11 @@ export function processGeckoProfile(geckoProfile: GeckoProfile): Profile {
     device: geckoProfile.meta.device,
   };
 
+  if (geckoProfile.meta.profilingStartTime !== undefined) {
+    meta.profilingStartTime = geckoProfile.meta.profilingStartTime;
+    meta.profilingEndTime = geckoProfile.meta.profilingEndTime;
+  }
+
   const profilerOverhead: ProfilerOverhead[] = nullableProfilerOverhead.reduce(
     (acc, overhead) => {
       if (overhead !== null) {
@@ -1578,7 +1583,7 @@ export function processGeckoProfile(geckoProfile: GeckoProfile): Profile {
       const jsTracerThread = convertJsTracerToThread(
         thread,
         jsTracer,
-        meta.categories
+        geckoProfile.meta.categories
       );
       jsTracerThread.isJsTracer = true;
       jsTracerThread.name = `JS Tracer of ${friendlyThreadName}`;

src/profile-logic/profile-data.js

@@ -919,6 +919,15 @@ export function getTimeRangeIncludingAllThreads(
   profile: Profile
 ): StartEndRange {
   const completeRange = { start: Infinity, end: -Infinity };
+  if (
+    profile.meta.profilingStartTime !== undefined &&
+    profile.meta.profilingEndTime
+  ) {
+    return {
+      start: profile.meta.profilingStartTime,
+      end: profile.meta.profilingEndTime,
+    };
+  }
   profile.threads.forEach((thread) => {
     const threadRange = memoizedGetTimeRangeForThread(
       thread,

src/profile-logic/sanitize.js

@@ -191,6 +191,12 @@ export function sanitizePII(
       : undefined,
   };
 
+  if (PIIToBeRemoved.shouldFilterToCommittedRange !== null) {
+    const { start, end } = PIIToBeRemoved.shouldFilterToCommittedRange;
+    newProfile.meta.profilingStartTime = start;
+    newProfile.meta.profilingEndTime = end;
+  }
+
   return {
     profile: newProfile,
     // Note that the profile was sanitized.

src/test/components/MenuButtons.test.js

@@ -524,6 +524,21 @@ describe('app/MenuButtons', function () {
       expect(getMetaInfoPanel()).toMatchSnapshot();
     });
 
+    it('matches the snapshot with uptime', async () => {
+      // Using gecko profile because it has metadata and profilerOverhead data in it.
+      const profile = processGeckoProfile(createGeckoProfile());
+      // The profiler was started 500ms after the parent process.
+      profile.meta.profilingStartTime = 500;
+
+      const { displayMetaInfoPanel, getMetaInfoPanel } =
+        await setupForMetaInfoPanel(profile);
+      await displayMetaInfoPanel();
+
+      const uptime = ensureExists(screen.getByText(/Uptime:/).nextSibling);
+      expect(uptime).toHaveTextContent('500ms');
+      expect(getMetaInfoPanel()).toMatchSnapshot();
+    });
+
     it('with no statistics object should not make the app crash', async () => {
       // Using gecko profile because it has metadata and profilerOverhead data in it.
       const profile = processGeckoProfile(createGeckoProfile());