From 464824f8d8fdb3c8982e18fa38e4218c2713272e Mon Sep 17 00:00:00 2001
From: Jamie Wong <jamie.lf.wong@gmail.com>
Date: Sun, 7 Jan 2018 19:50:27 -0800
Subject: [PATCH] Add support for .cpuprofile format

---
 application.tsx  | 17 ++++++++++++-----
 import/chrome.ts |  6 +++++-
 2 files changed, 17 insertions(+), 6 deletions(-)

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 <div className={css(style.landingContainer)}>
       <div className={css(style.landingMessage)}>
-        <p className={css(style.landingP)}>👋 Hi there! Welcome to 🔬speedscope.</p>
+        <p className={css(style.landingP)}>👋 Hi there! Welcome to 🔬speedscope, an interactive{' '}
+        <a className={css(style.link)} href="http://www.brendangregg.com/FlameGraphs/cpuflamegraphs.html">flamegraph</a> visualizer.
+        Use it to help you make your software faster.</p>
         <p className={css(style.landingP)}>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{' '}
           <a className={css(style.link)} onClick={this.loadExample}>click here</a>{' '}
@@ -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<number, CPUProfileNode>()