Made non-D3 flamegraph view the default. (google#777) (google#781)

In preparation for removing the dependency on D3 make the
new flamegraph view the default. The old view is still available
under /flamegraphold for now.

See issue google#777.

Co-authored-by: Alexey Alexandrov <[email protected]>

Author: ghemawat

doc/README.md

@@ -431,15 +431,10 @@ Graph
 :   Displays a scrollable/zoomable graph view; each function (or profile entry)
     is represented by a node and edges connect callers to callees.
 
-Flame Graph
-:   Displays a [flame graph](https://www.brendangregg.com/flamegraphs.html).
-
-[Flame Graph (new)](#flame-graph)
-:   Displays a view similar to a flame graph that can show the selected node's
-    callers and callees simultaneously.
-
-    NOTE: This view is currently experimental and may eventually replace the normal
-    Flame Graph view.
+[Flame Graph](#flame-graph)
+:   Displays a view similar to a
+    [flame graph](https://www.brendangregg.com/flamegraphs.html)
+    that can show the selected node's callers and callees simultaneously.
 
 Peek
 :   Shows callers / callees per function in a simple textual forma.
@@ -473,8 +468,8 @@ prompting the user to confirm).
 
 ## Flame graph
 
-The `Flame graph (new)` view displays profile information as a
-[flame graph](https://www.brendangregg.com/flamegraphs.html).
+The `Flame graph` view displays profile information as a [flame
+graph](https://www.brendangregg.com/flamegraphs.html).
 
 Boxes on this view correspond to stack frames in the profile. Caller boxes are
 directly above callee boxes. The width of each box is proportional to the sum of

internal/driver/html/common.js

@@ -682,7 +682,9 @@ function viewer(baseUrl, nodes, options) {
     toptable.addEventListener('touchstart', handleTopClick);
   }
 
-  const ids = ['topbtn', 'graphbtn', 'flamegraph', 'flamegraph2', 'peek', 'list',
+  const ids = ['topbtn', 'graphbtn',
+	       'flamegraph', 'flamegraph2', 'flamegraphold',
+	       'peek', 'list',
 	       'disasm', 'focus', 'ignore', 'hide', 'show', 'show-from'];
   ids.forEach(makeSearchLinkDynamic);
 

internal/driver/html/header.html

@@ -12,7 +12,7 @@ <h1><a href="./">pprof</a></h1>
       <a title="{{.Help.top}}"  href="./top" id="topbtn">Top</a>
       <a title="{{.Help.graph}}" href="./" id="graphbtn">Graph</a>
       <a title="{{.Help.flamegraph}}" href="./flamegraph" id="flamegraph">Flame Graph</a>
-      <a title="{{.Help.flamegraph2}}" href="./flamegraph2" id="flamegraph2">Flame Graph (new)</a>
+      <a title="{{.Help.flamegraphold}}" href="./flamegraphold" id="flamegraphold">Flame Graph (old)</a>
       <a title="{{.Help.peek}}" href="./peek" id="peek">Peek</a>
       <a title="{{.Help.list}}" href="./source" id="list">Source</a>
       <a title="{{.Help.disasm}}" href="./disasm" id="disasm">Disassemble</a>

internal/driver/webui.go

@@ -112,7 +112,7 @@ func serveWebInterface(hostport string, p *profile.Profile, o *plugin.Options, d
 	ui.help["details"] = "Show information about the profile and this view"
 	ui.help["graph"] = "Display profile as a directed graph"
 	ui.help["flamegraph"] = "Display profile as a flame graph"
-	ui.help["flamegraph2"] = "Display profile as a flame graph (experimental version that can display caller info on selection)"
+	ui.help["flamegraphold"] = "Display profile as a flame graph (old version; slated for removal)"
 	ui.help["reset"] = "Show the entire profile"
 	ui.help["save_config"] = "Save current settings"
 
@@ -125,15 +125,16 @@ func serveWebInterface(hostport string, p *profile.Profile, o *plugin.Options, d
 		Host:     host,
 		Port:     port,
 		Handlers: map[string]http.Handler{
-			"/":             http.HandlerFunc(ui.dot),
-			"/top":          http.HandlerFunc(ui.top),
-			"/disasm":       http.HandlerFunc(ui.disasm),
-			"/source":       http.HandlerFunc(ui.source),
-			"/peek":         http.HandlerFunc(ui.peek),
-			"/flamegraph":   http.HandlerFunc(ui.flamegraph),
-			"/flamegraph2":  http.HandlerFunc(ui.stackView), // Experimental
-			"/saveconfig":   http.HandlerFunc(ui.saveConfig),
-			"/deleteconfig": http.HandlerFunc(ui.deleteConfig),
+			"/":              http.HandlerFunc(ui.dot),
+			"/top":           http.HandlerFunc(ui.top),
+			"/disasm":        http.HandlerFunc(ui.disasm),
+			"/source":        http.HandlerFunc(ui.source),
+			"/peek":          http.HandlerFunc(ui.peek),
+			"/flamegraphold": http.HandlerFunc(ui.flamegraph),
+			"/flamegraph":    http.HandlerFunc(ui.stackView),
+			"/flamegraph2":   http.HandlerFunc(ui.stackView), // Support older URL
+			"/saveconfig":    http.HandlerFunc(ui.saveConfig),
+			"/deleteconfig":  http.HandlerFunc(ui.deleteConfig),
 			"/download": http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
 				w.Header().Set("Content-Type", "application/vnd.google.protobuf+gzip")
 				w.Header().Set("Content-Disposition", "attachment;filename=profile.pb.gz")

internal/driver/webui_test.go

@@ -91,7 +91,7 @@ func TestWebInterface(t *testing.T) {
 			[]string{"300ms.*F1", "200ms.*300ms.*F2"}, false},
 		{"/disasm?f=" + url.QueryEscape("F[12]"),
 			[]string{"f1:asm", "f2:asm"}, false},
-		{"/flamegraph", []string{
+		{"/flamegraphold", []string{
 			"File: testbin",
 			// Check profile frame JSON is included.
 			`\\u0022n\\u0022:\\u0022root\\u0022`,
@@ -101,7 +101,7 @@ func TestWebInterface(t *testing.T) {
 			// Check d3-flame-graph CSS is included.
 			".d3-flame-graph rect {",
 		}, false},
-		{"/flamegraph2", []string{
+		{"/flamegraph", []string{
 			"File: testbin",
 			// Check that interesting frames are included.
 			`\bF1\b`,