diff --git a/application.tsx b/application.tsx index 96f783d..2dfb464 100644 --- a/application.tsx +++ b/application.tsx @@ -4,7 +4,7 @@ import {ReloadableComponent} from './reloadable' import {importFromBGFlameGraph} from './import/bg-flamegraph' import {importFromStackprof} from './import/stackprof' -import {importFromChrome} from './import/chrome' +import {importFromChromeTimeline, importFromChromeCPUProfile} from './import/chrome' import {Profile, Frame} from './profile' import {Flamechart} from './flamechart' @@ -81,7 +81,7 @@ export class Application extends ReloadableComponent<{}, ApplicationState> { importJSON(parsed: any): Profile { if (Array.isArray(parsed) && parsed[parsed.length - 1].name === "CpuProfile") { - return importFromChrome(parsed) + return importFromChromeTimeline(parsed) } else { return importFromStackprof(parsed) } @@ -89,7 +89,11 @@ export class Application extends ReloadableComponent<{}, ApplicationState> { loadFromString(fileName: string, contents: string) { console.time('import') - const profile = fileName.endsWith('json') ? this.importJSON(JSON.parse(contents)) : importFromBGFlameGraph(contents) + console.log(fileName) + const profile = + fileName.endsWith('json') ? this.importJSON(JSON.parse(contents)) + : fileName.endsWith('cpuprofile') ? importFromChromeCPUProfile(JSON.parse(contents)) + : importFromBGFlameGraph(contents) profile.setName(fileName) document.title = `${fileName} - speedscope` @@ -174,7 +178,9 @@ export class Application extends ReloadableComponent<{}, ApplicationState> { renderLanding() { return
👋 Hi there! Welcome to 🔬speedscope.
+👋 Hi there! Welcome to 🔬speedscope, an interactive{' '} + flamegraph visualizer. + Use it to help you make your software faster.
Drag and drop a profile file onto this window to get started,
click the big blue button below to browse for a profile to explore, or{' '}
click here{' '}
@@ -221,7 +227,8 @@ const style = StyleSheet.create({
display: 'flex',
flexDirection: 'column',
position: 'relative',
- fontFamily: FontFamily.MONOSPACE
+ fontFamily: FontFamily.MONOSPACE,
+ lineHeight: '20px'
},
landingContainer: {
display: 'flex',
diff --git a/import/chrome.ts b/import/chrome.ts
index 2de9ef4..0f274fe 100644
--- a/import/chrome.ts
+++ b/import/chrome.ts
@@ -41,9 +41,13 @@ interface CPUProfile {
timeDeltas: number[]
}
-export function importFromChrome(events: TimelineEvent[]) {
+export function importFromChromeTimeline(events: TimelineEvent[]) {
const profileEvent = events[events.length - 1]
const chromeProfile = profileEvent.args.data.cpuProfile as CPUProfile
+ return importFromChromeCPUProfile(chromeProfile)
+}
+
+export function importFromChromeCPUProfile(chromeProfile: CPUProfile) {
const profile = new Profile(chromeProfile.endTime - chromeProfile.startTime)
const nodeById = new Map