[tooltips] improve display of time-related fields (durations, timestamps)

[marcdumais-work]

Bug Description:

Durations are always displayed in nano seconds, timestamps, I think, in Epoch seconds with nanosecond resolution. Neither seem ideal.

"Classic" Trace Compass is better at this, adjusting the unit to something more relevant:

Trace Viewer for Theia/VSCode (React Components):

Trace Compass:

Steps to Reproduce:

Additional Information

• Operating System:
• Theia Version:

[aaanh]

Hello,

I'd like to suggest that we display the time numerical values in monotype font family so that it is vertically aligned for each digit, making it better for comparison between start/end/duration. To make it consistent, we would need the front-end to handle the padding with zeros too.

Format

Start         HH:MM:SS.mmm μss nss
End           HH:MM:SS.mmm μss nss
Duration      HH:MM:SS.mmm μss nss

Example code

function pad(num: number, size: number) {
  return String(num).padStart(size, '0');
}

function formatTime(
  hours: number,
  minutes: number,
  seconds: number,
  milliseconds: number,
  microseconds: number,
  nanoseconds: number
): string {


  return `${pad(hours, 2)}:${pad(minutes, 2)}:${pad(seconds, 2)}.` +
         `${pad(milliseconds, 3)} ${pad(microseconds, 3)} ${pad(nanoseconds, 3)}`;
}