Add support for Edge Enhanced Performance Traces

discoveryjs · Mar 21, 2024 · 4fc8a09 · 4fc8a09
1 parent a668cc2
commit 4fc8a09
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 13 deletions.
diff --git a/.discoveryrc.js b/.discoveryrc.js
@@ -4,7 +4,7 @@ module.exports = {
     darkmode: 'only',
     embed: true,
     upload: {
-        accept: ['.cpuprofile', '.json', '.jsonxl']
+        accept: ['.cpuprofile', '.devtools', '.json', '.jsonxl']
     },
     prepare: './prepare',
     data: './data',

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 ## next
 
 - Report
+    - Added support for [Edge Enhanced Performance Traces](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/experimental-features/share-traces)
     - Reworked the layout and UX of the main page
     - Added "Try demo CPU profile" button when no CPU profile is loaded
     - Adjusted call frame reference computation by omitting line and column when they are not specified or less than zero

diff --git a/app/pages/common.css b/app/pages/common.css
@@ -1,3 +1,7 @@
+.view-alert-warning .view-link {
+    color: inherit;
+    text-decoration-color: inherit;
+}
 
 .view-page-indicators,
 :not(.view-page-indicators) > .view-page-indicator-group {

diff --git a/app/pages/default.js b/app/pages/default.js
@@ -1,5 +1,6 @@
 /* eslint-env node */
 const demoDataBase64 = require('../demo/demo-data-base64.js').default;
+const { supportedFormats } = require('../prepare/index.js');
 let fullpageMode = false;
 
 discovery.action.define('uploadDemoData', () => discovery.loadDataFromUrl(demoDataBase64));
@@ -394,8 +395,7 @@ discovery.page.define('default', {
                         'A viewer for CPU profiles collected in Node.js or Chromium browsers.',
                         '',
                         'Supported formats:',
-                        '* [V8 CPU profile](https://v8.dev/docs/profile) (.cpuprofile)',
-                        '* [Chromium timeline](https://www.debugbear.com/blog/devtools-performance#recording-a-performance-profile) / [Trace Event](https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview) format (.json)'
+                        ...supportedFormats
                     ]
                 },
                 'html:"<br>"',

diff --git a/app/prepare/formats/chromium-devtools-enhanced-traces.ts b/app/prepare/formats/chromium-devtools-enhanced-traces.ts
@@ -0,0 +1,9 @@
+export function isDevToolsEnhancedTraces(data) {
+    const { meta } = data || {};
+
+    if (meta && meta.fileDocumentType === 'x-msedge-session-log' && meta.type === 'performance') {
+        return true;
+    }
+
+    return false;
+}
diff --git a/app/prepare/chromium-timeline.ts → ...e/formats/chromium-performance-profile.ts b/app/prepare/chromium-timeline.ts → ...e/formats/chromium-performance-profile.ts
@@ -56,11 +56,11 @@ export interface CPUProfile {
     timeDeltas: number[];
 }
 
-export function isChromiumTimeline(data: any): boolean {
+export function isChromiumPerformanceProfile(data: any): boolean {
     if (!Array.isArray(data)) {
         // JSON Object Format
         return data && 'traceEvents' in data
-            ? isChromiumTimeline(data.traceEvents)
+            ? isChromiumPerformanceProfile(data.traceEvents)
             : false;
     }
 
@@ -77,7 +77,7 @@ export function isChromiumTimeline(data: any): boolean {
     return true;
 }
 
-export function extractCpuProfilesFromChromiumTimeline(
+export function extractFromChromiumPerformanceProfile(
     events: ChromiumTimeline | ChromiumTimelineEvent[]
 ): ProfileGroup {
     // It seems like sometimes Chrome timeline files contain multiple CpuProfiles?

diff --git a/app/prepare/index.js b/app/prepare/index.js
@@ -1,17 +1,30 @@
 import { isCPUProfile } from './cpuprofile.js';
+import { isDevToolsEnhancedTraces } from './formats/chromium-devtools-enhanced-traces.js';
 import {
-    isChromiumTimeline,
-    extractCpuProfilesFromChromiumTimeline
-} from './chromium-timeline.js';
+    isChromiumPerformanceProfile,
+    extractFromChromiumPerformanceProfile
+} from './formats/chromium-performance-profile.js';
+
+export const supportedFormats = [
+    '* [V8 CPU profile](https://v8.dev/docs/profile) (.cpuprofile)',
+    '* [Chromium Performance Profile](https://developer.chrome.com/docs/devtools/performance/reference#save) / [Trace Event](https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview) format (.json)',
+    '* [Edge Enhanced Performance Traces](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/experimental-features/share-traces) (.devtools)'
+];
+export const supportedFormatsText = supportedFormats
+    .map(line => line.replace(/\[(.+?)\]\(.*?\)/g, '$1'));
 
 // function isCPUProfileMerge(data) {
 //     return data && Array.isArray(data.nodes) && Array.isArray(data.profiles);
 // }
 
 export function convertValidate(data, rejectData) {
+    if (isDevToolsEnhancedTraces(data)) {
+        data = data.payload;
+    }
+
     // see https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/preview#heading=h.lc5airzennvk
-    if (isChromiumTimeline(data)) {
-        const result = extractCpuProfilesFromChromiumTimeline(data);
+    if (isChromiumPerformanceProfile(data)) {
+        const result = extractFromChromiumPerformanceProfile(data);
 
         data = result.profiles[result.indexToView] || result.profiles[0];
 
@@ -38,8 +51,7 @@ export function convertValidate(data, rejectData) {
                 ] },
                 { view: 'md', source: [
                     'CPU (pro)file supports the following formats:',
-                    '* V8 CPU profile (.cpuprofile)',
-                    '* Chromium timeline / Trace Event format (.json)'
+                    ...supportedFormats
                 ] }
             ]
         });