Added an interactive web interface (#154)

* Added an interactive web interface triggered by passing -http=port
on the command line.  The interface is available by visiting
localhost:port in a browser.

Requirements:
* Graphviz must be installed.
* Browser must support Javascript.
* Tested in recent stable versions of chrome and firefox.

Features:
* The entry point is a dot graph display (equivalent to "web" output).
* Nodes in the graph can be selected by clicking.
* A regular expression can also be typed in for selection.
* The current selection (either list of nodes or a regexp)
  can be focused, ignored, or hidden.
* Source code or disassembly of the current selection can be displayed.

* Remove unused function.

* Skip graph generation test if graphviz is not installed.

* Added -http port and the various modes of using pprof to the
usage message.

* Web interface now supports "show" option.

* Web interface automatically opens the browser pointed at
the page corresponding to command line arguments.

* Some tweaks for firefox.

* Handle review comments (better usage message, more testing).

* Handled review comments:

1. Capture and display errors like "Focus expression matched no samples".
2. Re-ordered buttons to match other interfaces.
3. Use UI.PrintErr to print error messages.

* Handle javascript code review comments (a bunch of cleanups).
Also added pprof binary to .gitignore.

.gitignore

@@ -5,3 +5,4 @@
 .*.swp
 core
 coverage.txt
+pprof

README.md

@@ -77,6 +77,19 @@ This will open a simple shell that takes pprof commands to generate reports.
 Type 'help' for available commands/options.
 ```
 
+## Run pprof via a web interface
+
+If the `-http=port` option is specified, pprof starts a web server at
+the specified port that provides an interactive web-based interface to pprof.
+
+```
+pprof -http=[port] [main_binary] profile.pb.gz
+```
+
+The preceding command should automatically open your web browser at
+the right page; if not, you can manually visit the specified port in
+your web browser.
+
 ## Using pprof with Linux Perf
 
 pprof can read `perf.data` files generated by the

doc/pprof.md

@@ -29,7 +29,40 @@ location. pprof is agnostic to the profile semantics, so other uses are
 possible. The interpretation of the reports generated by pprof depends on the
 semantics defined by the source of the profile.
 
-# General usage
+# Usage Modes
+
+There are few different ways of using `pprof`.
+
+## Report generation
+
+If a report format is requested on the command line:
+
+    pprof <format> [options] source
+
+pprof will generate a report in the specified format and exit.
+Formats can be either text, or graphical. See below for details about
+supported formats, options, and sources.
+
+## Interactive terminal use
+
+Without a format specifier:
+
+    pprof [options] source
+
+pprof will start an interactive shell in which the user can type
+commands.  Type `help` to get online help.
+
+## Web interface
+
+If a port is specified on the command line:
+
+    pprof -http=<port> [options] source
+
+pprof will start serving HTTP requests on the specified port.  Visit
+the HTTP url corresponding to the port (typically `http://localhost:<port>/`)
+in a browser to see the interface.
+
+# Details
 
 The objective of pprof is to generate a report for a profile. The report is
 generated from a location hierarchy, which is reconstructed from the profile
@@ -38,14 +71,12 @@ itself, while *cum* is the value of the location plus all its
 descendants. Samples that include a location multiple times (eg for recursive
 functions) are counted only once per location.
 
-The basic usage of pprof is
-
-    pprof <format> [options] source
+## Options
 
-Where *format* selects the nature of the report, and *options* configure the
-contents of the report. Each option has a value, which can be boolean, numeric,
-or strings. While only one format can be specified, most options can be selected
-independently of each other.
+*options* configure the contents of a report. Each option has a value,
+which can be boolean, numeric, or strings. While only one format can
+be specified, most options can be selected independently of each
+other.
 
 Some common pprof options are:
 

internal/driver/cli.go

@@ -32,6 +32,7 @@ type source struct {
 	Seconds   int
 	Timeout   int
 	Symbolize string
+	HTTPPort  int
 }
 
 // Parse parses the command lines through the specified flags package
@@ -58,6 +59,7 @@ func parseFlags(o *plugin.Options) (*source, []string, error) {
 	flagTools := flag.String("tools", os.Getenv("PPROF_TOOLS"), "Path for object tool pathnames")
 
 	flagTimeout := flag.Int("timeout", -1, "Timeout in seconds for fetching a profile")
+	flagHTTPPort := flag.Int("http", 0, "Present interactive web based UI at the specified http port")
 
 	// Flags used during command processing
 	installedFlags := installFlags(flag)
@@ -106,6 +108,9 @@ func parseFlags(o *plugin.Options) (*source, []string, error) {
 	if err != nil {
 		return nil, nil, err
 	}
+	if cmd != nil && *flagHTTPPort != 0 {
+		return nil, nil, fmt.Errorf("--http is not compatible with an output format on the command line")
+	}
 
 	si := pprofVariables["sample_index"].value
 	si = sampleIndex(flagTotalDelay, si, "delay", "-total_delay", o.UI)
@@ -128,6 +133,7 @@ func parseFlags(o *plugin.Options) (*source, []string, error) {
 		Seconds:   *flagSeconds,
 		Timeout:   *flagTimeout,
 		Symbolize: *flagSymbolize,
+		HTTPPort:  *flagHTTPPort,
 	}
 
 	for _, s := range *flagBase {
@@ -240,7 +246,25 @@ func outputFormat(bcmd map[string]*bool, acmd map[string]*string) (cmd []string,
 	return cmd, nil
 }
 
-var usageMsgHdr = "usage: pprof [options] [-base source] [binary] <source> ...\n"
+var usageMsgHdr = `usage:
+
+Produce output in the specified format.
+
+   pprof <format> [options] [binary] <source> ...
+
+Omit the format to get an interactive shell whose commands can be used
+to generate various views of a profile
+
+   pprof [options] [binary] <source> ...
+
+Omit the format and provide the "-http" flag to get an interactive web
+interface at the specified port that can be used to navigate through
+various views of a profile.
+
+   pprof -http <port> [options] [binary] <source> ...
+
+Details:
+`
 
 var usageMsgSrc = "\n\n" +
 	"  Source options:\n" +
@@ -261,6 +285,7 @@ var usageMsgSrc = "\n\n" +
 
 var usageMsgVars = "\n\n" +
 	"  Misc options:\n" +
+	"   -http port             Provide web based interface at port\n" +
 	"   -tools                 Search path for object tools\n" +
 	"\n" +
 	"  Environment Variables:\n" +

internal/driver/commands.go

@@ -263,7 +263,7 @@ func usage(commandLine bool) string {
 
 	var help string
 	if commandLine {
-		help = "  Output formats (select only one):\n"
+		help = "  Output formats (select at most one):\n"
 	} else {
 		help = "  Commands:\n"
 		commands = append(commands, fmtHelp("o/options", "List options and their current values"))

internal/driver/driver.go

@@ -52,10 +52,13 @@ func PProf(eo *plugin.Options) error {
 		return generateReport(p, cmd, pprofVariables, o)
 	}
 
+	if src.HTTPPort > 0 {
+		return serveWebInterface(src.HTTPPort, p, o)
+	}
 	return interactive(p, o)
 }
 
-func generateReport(p *profile.Profile, cmd []string, vars variables, o *plugin.Options) error {
+func generateRawReport(p *profile.Profile, cmd []string, vars variables, o *plugin.Options) (*command, *report.Report, error) {
 	p = p.Copy() // Prevent modification to the incoming profile.
 
 	vars = applyCommandOverrides(cmd, vars)
@@ -64,12 +67,12 @@ func generateReport(p *profile.Profile, cmd []string, vars variables, o *plugin.
 	relative := vars["relative_percentages"].boolValue()
 	if relative {
 		if err := applyFocus(p, vars, o.UI); err != nil {
-			return err
+			return nil, nil, err
 		}
 	}
 	ropt, err := reportOptions(p, vars)
 	if err != nil {
-		return err
+		return nil, nil, err
 	}
 	c := pprofCommands[cmd[0]]
 	if c == nil {
@@ -79,7 +82,7 @@ func generateReport(p *profile.Profile, cmd []string, vars variables, o *plugin.
 	if len(cmd) == 2 {
 		s, err := regexp.Compile(cmd[1])
 		if err != nil {
-			return fmt.Errorf("parsing argument regexp %s: %v", cmd[1], err)
+			return nil, nil, fmt.Errorf("parsing argument regexp %s: %v", cmd[1], err)
 		}
 		ropt.Symbol = s
 	}
@@ -87,10 +90,19 @@ func generateReport(p *profile.Profile, cmd []string, vars variables, o *plugin.
 	rpt := report.New(p, ropt)
 	if !relative {
 		if err := applyFocus(p, vars, o.UI); err != nil {
-			return err
+			return nil, nil, err
 		}
 	}
 	if err := aggregate(p, vars); err != nil {
+		return nil, nil, err
+	}
+
+	return c, rpt, nil
+}
+
+func generateReport(p *profile.Profile, cmd []string, vars variables, o *plugin.Options) error {
+	c, rpt, err := generateRawReport(p, cmd, vars, o)
+	if err != nil {
 		return err
 	}
 

internal/driver/webhtml.go

@@ -0,0 +1,556 @@
+// Copyright 2017 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package driver
+
+import "html/template"
+
+var graphTemplate = template.Must(template.New("graph").Parse(
+	`<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>{{.Title}}</title>
+<style type="text/css">
+html, body {
+  height: 100%;
+  min-height: 100%;
+  margin: 0px;
+}
+body {
+  width: 100%;
+  overflow: hidden;
+}
+h1 {
+  font-weight: normal;
+  font-size: 24px;
+  padding: 0em;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+#page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 100%;
+  width: 100%;
+  min-width: 100%;
+  margin: 0px;
+}
+#header {
+  flex: 0 0 auto;
+  width: 100%;
+}
+#leftbuttons {
+  float: left;
+}
+#rightbuttons {
+  float: right;
+  display: table-cell;
+  vertical-align: middle;
+}
+#rightbuttons label {
+  vertical-align: middle;
+}
+#scale {
+  vertical-align: middle;
+}
+#graph {
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+svg {
+  width: 100%;
+  height: auto;
+  border: 1px solid black;
+}
+button {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+#reset, #scale {
+  margin-left: 10px;
+}
+#detailtext {
+  display: none;
+  position: absolute;
+  background-color: #ffffff;
+  min-width: 160px;
+  border-top: 1px solid black;
+  box-shadow: 2px 2px 2px 0px #aaa;
+  z-index: 1;
+}
+</style>
+</head>
+<body>
+<h1>{{.Title}}</h1>
+<div id="page">
+
+<div id="errors">{{range .Errors}}<div>{{.}}</div>{{end}}</div>
+
+<div id="header">
+<div id="leftbuttons">
+<button id="details">&#x25b7; Details</button>
+<div id="detailtext">
+{{range .Legend}}<div>{{.}}</div>{{end}}
+</div>
+<button id="list">List</button>
+<button id="disasm">Disasm</button>
+<input id="searchbox" type="text" placeholder="Search regexp" autocomplete="off" autocapitalize="none" size=40>
+<button id="focus">Focus</button>
+<button id="ignore">Ignore</button>
+<button id="hide">Hide</button>
+<button id="show">Show</button>
+<button id="reset">Reset</button>
+</div>
+<div id="rightbuttons">
+</div>
+</div>
+
+<div id="graph">
+{{.Svg}}
+</div>
+
+</div>
+<script>
+// Make svg pannable and zoomable.
+// Call clickHandler(t) if a click event is caught by the pan event handlers.
+function initPanAndZoom(svg, clickHandler) {
+  'use strict';
+
+  // Current mouse/touch handling mode
+  const IDLE = 0
+  const MOUSEPAN = 1
+  const TOUCHPAN = 2
+  const TOUCHZOOM = 3
+  let mode = IDLE
+
+  // State needed to implement zooming.
+  let currentScale = 1.0
+  const initWidth = svg.viewBox.baseVal.width
+  const initHeight = svg.viewBox.baseVal.height
+
+  // State needed to implement panning.
+  let panLastX = 0      // Last event X coordinate
+  let panLastY = 0      // Last event Y coordinate
+  let moved = false     // Have we seen significant movement
+  let touchid = null    // Current touch identifier
+
+  // State needed for pinch zooming
+  let touchid2 = null     // Second id for pinch zooming
+  let initGap = 1.0       // Starting gap between two touches
+  let initScale = 1.0     // currentScale when pinch zoom started
+  let centerPoint = null  // Center point for scaling
+
+  // Convert event coordinates to svg coordinates.
+  function toSvg(x, y) {
+    const p = svg.createSVGPoint()
+    p.x = x
+    p.y = y
+    let m = svg.getCTM()
+    if (m == null) m = svg.getScreenCTM()  // Firefox workaround.
+    return p.matrixTransform(m.inverse())
+  }
+
+  // Change the scaling for the svg to s, keeping the point denoted
+  // by u (in svg coordinates]) fixed at the same screen location.
+  function rescale(s, u) {
+    // Limit to a good range.
+    if (s < 0.2) s = 0.2
+    if (s > 10.0) s = 10.0
+
+    currentScale = s
+
+    // svg.viewBox defines the visible portion of the user coordinate
+    // system.  So to magnify by s, divide the visible portion by s,
+    // which will then be stretched to fit the viewport.
+    const vb = svg.viewBox
+    const w1 = vb.baseVal.width
+    const w2 = initWidth / s
+    const h1 = vb.baseVal.height
+    const h2 = initHeight / s
+    vb.baseVal.width = w2
+    vb.baseVal.height = h2
+
+    // We also want to adjust vb.baseVal.x so that u.x remains at same
+    // screen X coordinate.  In other words, want to change it from x1 to x2
+    // so that:
+    //     (u.x - x1) / w1 = (u.x - x2) / w2
+    // Simplifying that, we get
+    //     (u.x - x1) * (w2 / w1) = u.x - x2
+    //     x2 = u.x - (u.x - x1) * (w2 / w1)
+    vb.baseVal.x = u.x - (u.x - vb.baseVal.x) * (w2 / w1)
+    vb.baseVal.y = u.y - (u.y - vb.baseVal.y) * (h2 / h1)
+  }
+
+  function handleWheel(e) {
+    if (e.deltaY == 0) return
+    // Change scale factor by 1.1 or 1/1.1
+    rescale(currentScale * (e.deltaY < 0 ? 1.1 : (1/1.1)),
+            toSvg(e.offsetX, e.offsetY))
+  }
+
+  function setMode(m) {
+    mode = m
+    touchid = null
+    touchid2 = null
+  }
+
+  function panStart(x, y) {
+    moved = false
+    panLastX = x
+    panLastY = y
+  }
+
+  function panMove(x, y) {
+    let dx = x - panLastX
+    let dy = y - panLastY
+    if (Math.abs(dx) <= 2 && Math.abs(dy) <= 2) return  // Ignore tiny moves
+
+    moved = true
+    panLastX = x
+    panLastY = y
+
+    // Firefox workaround: get dimensions from parentNode.
+    const swidth = svg.clientWidth || svg.parentNode.clientWidth
+    const sheight = svg.clientHeight || svg.parentNode.clientHeight
+
+    // Convert deltas from screen space to svg space.
+    dx *= (svg.viewBox.baseVal.width / swidth)
+    dy *= (svg.viewBox.baseVal.height / sheight)
+
+    svg.viewBox.baseVal.x -= dx
+    svg.viewBox.baseVal.y -= dy
+  }
+
+  function handleScanStart(e) {
+    if (e.button != 0) return  // Do not catch right-clicks etc.
+    setMode(MOUSEPAN)
+    panStart(e.clientX, e.clientY)
+    e.preventDefault()
+    svg.addEventListener("mousemove", handleScanMove)
+  }
+
+  function handleScanMove(e) {
+    if (mode == MOUSEPAN) panMove(e.clientX, e.clientY)
+  }
+
+  function handleScanEnd(e) {
+    if (mode == MOUSEPAN) panMove(e.clientX, e.clientY)
+    setMode(IDLE)
+    svg.removeEventListener("mousemove", handleScanMove)
+    if (!moved) clickHandler(e.target)
+  }
+
+  // Find touch object with specified identifier.
+  function findTouch(tlist, id) {
+    for (const t of tlist) {
+      if (t.identifier == id) return t
+    }
+    return null
+  }
+
+ // Return distance between two touch points
+  function touchGap(t1, t2) {
+    const dx = t1.clientX - t2.clientX
+    const dy = t1.clientY - t2.clientY
+    return Math.hypot(dx, dy)
+  }
+
+  function handleTouchStart(e) {
+    if (mode == IDLE && e.changedTouches.length == 1) {
+      // Start touch based panning
+      const t = e.changedTouches[0]
+      setMode(TOUCHPAN)
+      touchid = t.identifier
+      panStart(t.clientX, t.clientY)
+      e.preventDefault()
+    } else if (mode == TOUCHPAN && e.touches.length == 2) {
+      // Start pinch zooming
+      setMode(TOUCHZOOM)
+      const t1 = e.touches[0]
+      const t2 = e.touches[1]
+      touchid = t1.identifier
+      touchid2 = t2.identifier
+      initScale = currentScale
+      initGap = touchGap(t1, t2)
+      centerPoint = toSvg((t1.clientX + t2.clientX) / 2,
+                          (t1.clientY + t2.clientY) / 2)
+      e.preventDefault()
+    }
+  }
+
+  function handleTouchMove(e) {
+    if (mode == TOUCHPAN) {
+      const t = findTouch(e.changedTouches, touchid)
+      if (t == null) return
+      if (e.touches.length != 1) {
+        setMode(IDLE)
+        return
+      }
+      panMove(t.clientX, t.clientY)
+      e.preventDefault()
+    } else if (mode == TOUCHZOOM) {
+      // Get two touches; new gap; rescale to ratio.
+      const t1 = findTouch(e.touches, touchid)
+      const t2 = findTouch(e.touches, touchid2)
+      if (t1 == null || t2 == null) return
+      const gap = touchGap(t1, t2)
+      rescale(initScale * gap / initGap, centerPoint)
+      e.preventDefault()
+    }
+  }
+
+  function handleTouchEnd(e) {
+    if (mode == TOUCHPAN) {
+      const t = findTouch(e.changedTouches, touchid)
+      if (t == null) return
+      panMove(t.clientX, t.clientY)
+      setMode(IDLE)
+      e.preventDefault()
+      if (!moved) clickHandler(t.target)
+    } else if (mode == TOUCHZOOM) {
+      setMode(IDLE)
+      e.preventDefault()
+    }
+  }
+
+  svg.addEventListener("mousedown", handleScanStart)
+  svg.addEventListener("mouseup", handleScanEnd)
+  svg.addEventListener("touchstart", handleTouchStart)
+  svg.addEventListener("touchmove", handleTouchMove)
+  svg.addEventListener("touchend", handleTouchEnd)
+  svg.addEventListener("wheel", handleWheel, true)
+}
+
+function dotviewer(nodes) {
+  'use strict';
+
+  // Elements
+  const detailsButton = document.getElementById("details")
+  const detailsText = document.getElementById("detailtext")
+  const listButton = document.getElementById("list")
+  const disasmButton = document.getElementById("disasm")
+  const resetButton = document.getElementById("reset")
+  const focusButton = document.getElementById("focus")
+  const showButton = document.getElementById("show")
+  const ignoreButton = document.getElementById("ignore")
+  const hideButton = document.getElementById("hide")
+  const search = document.getElementById("searchbox")
+  const graph0 = document.getElementById("graph0")
+  const svg = graph0.parentElement
+
+  let currentRe = ""
+  let selected = new Map()
+  let origFill = new Map()
+  let searchAlarm = null
+  let buttonsEnabled = true
+
+  function handleDetails() {
+    if (detailtext.style.display == "block") {
+      detailtext.style.display = "none"
+      detailsButton.innerText = "\u25b7 Details"
+    } else {
+      detailtext.style.display = "block"
+      detailsButton.innerText = "\u25bd Details"
+    }
+  }
+
+  function handleReset() { window.location.href = "/" }
+  function handleList() { navigate("/weblist", "f", true) }
+  function handleDisasm() { navigate("/disasm", "f", true) }
+  function handleFocus() { navigate("/", "f", false) }
+  function handleShow() { navigate("/", "s", false) }
+  function handleIgnore() { navigate("/", "i", false) }
+  function handleHide() { navigate("/", "h", false) }
+
+  function handleSearch() {
+    // Delay processing so a flurry of key strokes is handled once.
+    if (searchAlarm != null) {
+      clearTimeout(searchAlarm)
+    }
+    searchAlarm = setTimeout(doSearch, 300)
+  }
+
+  function doSearch() {
+    searchAlarm = null
+    let re = null
+    if (search.value != "") {
+      try {
+        re = new RegExp(search.value)
+      } catch (e) {
+        // TODO: Display error state in search box
+        return
+      }
+    }
+    currentRe = search.value
+
+    function match(text) {
+      return re != null && re.test(text)
+    }
+
+    // drop currently selected items that do not match re.
+    selected.forEach(function(v, n) {
+      if (!match(nodes[n])) {
+        unselect(n, document.getElementById("node" + n))
+      }
+    })
+
+    // add matching items that are not currently selected.
+    for (let n = 0; n < nodes.length; n++) {
+      if (!selected.has(n) && match(nodes[n])) {
+        select(n, document.getElementById("node" + n))
+      }
+    }
+
+    updateButtons()
+  }
+
+  function toggleSelect(elem) {
+    // Walk up to immediate child of graph0
+    while (elem != null && elem.parentElement != graph0) {
+      elem = elem.parentElement
+    }
+    if (!elem) return
+
+    // Disable regexp mode.
+    currentRe = ""
+
+    const n = nodeId(elem)
+    if (n < 0) return
+    if (selected.has(n)) {
+      unselect(n, elem)
+    } else {
+      select(n, elem)
+    }
+    updateButtons()
+  }
+
+  function unselect(n, elem) {
+    if (elem == null) return
+    selected.delete(n)
+    setBackground(elem, false)
+  }
+
+  function select(n, elem) {
+    if (elem == null) return
+    selected.set(n, true)
+    setBackground(elem, true)
+  }
+
+  function nodeId(elem) {
+    const id = elem.id
+    if (!id) return -1
+    if (!id.startsWith("node")) return -1
+    const n = parseInt(id.slice(4), 10)
+    if (isNaN(n)) return -1
+    if (n < 0 || n >= nodes.length) return -1
+    return n
+  }
+
+  function setBackground(elem, set) {
+    const p = findPolygon(elem)
+    if (p != null) {
+      if (set) {
+        origFill.set(p, p.style.fill)
+        p.style.fill = "#ccccff"
+      } else if (origFill.has(p)) {
+        p.style.fill = origFill.get(p)
+      }
+    }
+  }
+
+  function findPolygon(elem) {
+    if (elem.localName == "polygon") return elem
+    for (const c of elem.children) {
+      const p = findPolygon(c)
+      if (p != null) return p
+    }
+    return null
+  }
+
+  // Navigate to specified path with current selection reflected
+  // in the named parameter.
+  function navigate(path, param, newWindow) {
+    // The selection can be in one of two modes: regexp-based or
+    // list-based.  Construct regular expression depending on mode.
+    let re = currentRe
+    if (re == "") {
+      selected.forEach(function(v, key) {
+        if (re != "") re += "|"
+        re += nodes[key]
+      })
+    }
+
+    const url = new URL(window.location.href)
+    url.pathname = path
+    url.hash = ""
+
+    if (re != "") {
+      // For focus/show, forget old parameter.  For others, add to re.
+      const params = url.searchParams
+      if (param != "f" && param != "s" && params.has(param)) {
+        const old = params.get(param)
+        if (old != "") {
+          re += "|" + old
+        }
+      }
+      params.set(param, re)
+    }
+
+    if (newWindow) {
+      window.open(url.toString(), "_blank")
+    } else {
+      window.location.href = url.toString()
+    }
+  }
+
+  function updateButtons() {
+    const enable = (currentRe != "" || selected.size != 0)
+    if (buttonsEnabled == enable) return
+    buttonsEnabled = enable
+    listButton.disabled = !enable
+    disasmButton.disabled = !enable
+    focusButton.disabled = !enable
+    showButton.disabled = !enable
+    ignoreButton.disabled = !enable
+    hideButton.disabled = !enable
+  }
+
+  // Initialize button states
+  updateButtons()
+
+  // Setup event handlers
+  initPanAndZoom(svg, toggleSelect)
+  
+  function bindButtons(evt) {
+    detailsButton.addEventListener(evt, handleDetails)
+    listButton.addEventListener(evt, handleList)
+    disasmButton.addEventListener(evt, handleDisasm)
+    resetButton.addEventListener(evt, handleReset)
+    focusButton.addEventListener(evt, handleFocus)
+    showButton.addEventListener(evt, handleShow)
+    ignoreButton.addEventListener(evt, handleIgnore)
+    hideButton.addEventListener(evt, handleHide)
+  }
+  bindButtons("click")
+  bindButtons("touchstart")
+  search.addEventListener("input", handleSearch)
+}
+
+dotviewer({{.Nodes}})
+</script>
+</body>
+</html>
+`))

internal/driver/webui.go

@@ -0,0 +1,268 @@
+// Copyright 2017 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package driver
+
+import (
+	"bytes"
+	"fmt"
+	"html/template"
+	"io"
+	"net"
+	"net/http"
+	"net/url"
+	"os"
+	"os/exec"
+	"regexp"
+	"strings"
+	"time"
+
+	"github.com/google/pprof/internal/graph"
+	"github.com/google/pprof/internal/plugin"
+	"github.com/google/pprof/internal/report"
+	"github.com/google/pprof/profile"
+)
+
+// webInterface holds the state needed for serving a browser based interface.
+type webInterface struct {
+	prof    *profile.Profile
+	options *plugin.Options
+}
+
+// errorCatcher is a UI that captures errors for reporting to the browser.
+type errorCatcher struct {
+	plugin.UI
+	errors []string
+}
+
+func (ec *errorCatcher) PrintErr(args ...interface{}) {
+	ec.errors = append(ec.errors, strings.TrimSuffix(fmt.Sprintln(args...), "\n"))
+	ec.UI.PrintErr(args...)
+}
+
+func serveWebInterface(port int, p *profile.Profile, o *plugin.Options) error {
+	interactiveMode = true
+	ui := &webInterface{
+		prof:    p,
+		options: o,
+	}
+	// authorization wrapper
+	wrap := o.HTTPWrapper
+	if wrap == nil {
+		// only allow requests from local host
+		wrap = checkLocalHost
+	}
+	http.Handle("/", wrap(http.HandlerFunc(ui.dot)))
+	http.Handle("/disasm", wrap(http.HandlerFunc(ui.disasm)))
+	http.Handle("/weblist", wrap(http.HandlerFunc(ui.weblist)))
+	go openBrowser(port, o)
+	return http.ListenAndServe(fmt.Sprint(":", port), nil)
+}
+
+func openBrowser(port int, o *plugin.Options) {
+	// Construct URL.
+	u, _ := url.Parse(fmt.Sprint("http://localhost:", port))
+	q := u.Query()
+	for _, p := range []struct{ param, key string }{
+		{"f", "focus"},
+		{"s", "show"},
+		{"i", "ignore"},
+		{"h", "hide"},
+	} {
+		if v := pprofVariables[p.key].value; v != "" {
+			q.Set(p.param, v)
+		}
+	}
+	u.RawQuery = q.Encode()
+
+	// Give server a little time to get ready.
+	time.Sleep(time.Millisecond * 500)
+
+	for _, b := range browsers() {
+		args := strings.Split(b, " ")
+		if len(args) == 0 {
+			continue
+		}
+		viewer := exec.Command(args[0], append(args[1:], u.String())...)
+		viewer.Stderr = os.Stderr
+		if err := viewer.Start(); err == nil {
+			return
+		}
+	}
+	// No visualizer succeeded, so just print URL.
+	o.UI.PrintErr(u.String())
+}
+
+func checkLocalHost(h http.Handler) http.Handler {
+	return http.HandlerFunc(func(w http.ResponseWriter, req *http.Request) {
+		host, _, err := net.SplitHostPort(req.RemoteAddr)
+		if err != nil || ((host != "127.0.0.1") && (host != "::1")) {
+			http.Error(w, "permission denied", http.StatusForbidden)
+			return
+		}
+		h.ServeHTTP(w, req)
+	})
+}
+
+// dot generates a web page containing an svg diagram.
+func (ui *webInterface) dot(w http.ResponseWriter, req *http.Request) {
+	if req.URL.Path != "/" {
+		http.NotFound(w, req)
+		return
+	}
+
+	// Capture any error messages generated while generating a report.
+	catcher := &errorCatcher{UI: ui.options.UI}
+	options := *ui.options
+	options.UI = catcher
+
+	// Generate dot graph.
+	args := []string{"svg"}
+	vars := pprofVariables.makeCopy()
+	vars["focus"].value = req.URL.Query().Get("f")
+	vars["show"].value = req.URL.Query().Get("s")
+	vars["ignore"].value = req.URL.Query().Get("i")
+	vars["hide"].value = req.URL.Query().Get("h")
+	_, rpt, err := generateRawReport(ui.prof, args, vars, &options)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		ui.options.UI.PrintErr(err)
+		return
+	}
+	g, config := report.GetDOT(rpt)
+	legend := config.Labels
+	config.Labels = nil
+	dot := &bytes.Buffer{}
+	graph.ComposeDot(dot, g, &graph.DotAttributes{}, config)
+
+	// Convert to svg.
+	svg, err := dotToSvg(dot.Bytes())
+	if err != nil {
+		http.Error(w, "Could not execute dot; may need to install graphviz.",
+			http.StatusNotImplemented)
+		ui.options.UI.PrintErr("Failed to execute dot. Is Graphviz installed?\n", err)
+		return
+	}
+
+	// Get regular expression for each node.
+	nodes := []string{""}
+	for _, n := range g.Nodes {
+		nodes = append(nodes, regexp.QuoteMeta(n.Info.Name))
+	}
+
+	// Embed in html.
+	file := getFromLegend(legend, "File: ", "unknown")
+	profile := getFromLegend(legend, "Type: ", "unknown")
+	data := struct {
+		Title  string
+		Errors []string
+		Svg    template.HTML
+		Legend []string
+		Nodes  []string
+	}{
+		Title:  file + " " + profile,
+		Errors: catcher.errors,
+		Svg:    template.HTML(string(svg)),
+		Legend: legend,
+		Nodes:  nodes,
+	}
+	html := &bytes.Buffer{}
+	if err := graphTemplate.Execute(html, data); err != nil {
+		http.Error(w, "internal template error", http.StatusInternalServerError)
+		ui.options.UI.PrintErr(err)
+		return
+	}
+	w.Header().Set("Content-Type", "text/html")
+	w.Write(html.Bytes())
+}
+
+func dotToSvg(dot []byte) ([]byte, error) {
+	cmd := exec.Command("dot", "-Tsvg")
+	out := &bytes.Buffer{}
+	cmd.Stdin, cmd.Stdout, cmd.Stderr = bytes.NewBuffer(dot), out, os.Stderr
+	if err := cmd.Run(); err != nil {
+		return nil, err
+	}
+
+	// Fix dot bug related to unquoted amperands.
+	svg := bytes.Replace(out.Bytes(), []byte("&;"), []byte("&;"), -1)
+
+	// Cleanup for embedding by dropping stuff before the <svg> start.
+	if pos := bytes.Index(svg, []byte("<svg")); pos >= 0 {
+		svg = svg[pos:]
+	}
+	return svg, nil
+}
+
+// disasm generates a web page containing disassembly.
+func (ui *webInterface) disasm(w http.ResponseWriter, req *http.Request) {
+	ui.output(w, req, "disasm", "text/plain")
+}
+
+// weblist generates a web page containing disassembly.
+func (ui *webInterface) weblist(w http.ResponseWriter, req *http.Request) {
+	ui.output(w, req, "weblist", "text/html")
+}
+
+// output generates a webpage that contains the output of the specified pprof cmd.
+func (ui *webInterface) output(w http.ResponseWriter, req *http.Request, cmd, ctype string) {
+	focus := req.URL.Query().Get("f")
+	if focus == "" {
+		fmt.Fprintln(w, "no argument supplied for "+cmd)
+		return
+	}
+
+	// Capture any error messages generated while generating a report.
+	catcher := &errorCatcher{UI: ui.options.UI}
+	options := *ui.options
+	options.UI = catcher
+
+	args := []string{cmd, focus}
+	vars := pprofVariables.makeCopy()
+	_, rpt, err := generateRawReport(ui.prof, args, vars, &options)
+	if err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		ui.options.UI.PrintErr(err)
+		return
+	}
+
+	out := &bytes.Buffer{}
+	if err := report.Generate(out, rpt, ui.options.Obj); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		ui.options.UI.PrintErr(err)
+		return
+	}
+
+	if len(catcher.errors) > 0 {
+		w.Header().Set("Content-Type", "text/plain")
+		for _, msg := range catcher.errors {
+			fmt.Println(w, msg)
+		}
+		return
+	}
+
+	w.Header().Set("Content-Type", ctype)
+	io.Copy(w, out)
+}
+
+// getFromLegend returns the suffix of an entry in legend that starts
+// with param.  It returns def if no such entry is found.
+func getFromLegend(legend []string, param, def string) string {
+	for _, s := range legend {
+		if strings.HasPrefix(s, param) {
+			return s[len(param):]
+		}
+	}
+	return def
+}

internal/driver/webui_test.go

@@ -0,0 +1,185 @@
+// Copyright 2017 Google Inc. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+package driver
+
+import (
+	"fmt"
+	"io/ioutil"
+	"net/http"
+	"net/http/httptest"
+	"net/url"
+	"os/exec"
+	"regexp"
+	"strings"
+	"testing"
+
+	"github.com/google/pprof/internal/plugin"
+	"github.com/google/pprof/profile"
+)
+
+func TestWebInterface(t *testing.T) {
+	prof := makeFakeProfile()
+	ui := &webInterface{prof, &plugin.Options{Obj: fakeObjTool{}}}
+
+	// Start test server.
+	server := httptest.NewServer(http.HandlerFunc(
+		func(w http.ResponseWriter, r *http.Request) {
+			switch r.URL.Path {
+			case "/":
+				ui.dot(w, r)
+			case "/disasm":
+				ui.disasm(w, r)
+			case "/weblist":
+				ui.weblist(w, r)
+			}
+		}))
+	defer server.Close()
+
+	haveDot := false
+	if _, err := exec.LookPath("dot"); err == nil {
+		haveDot = true
+	}
+
+	type testCase struct {
+		path    string
+		want    []string
+		needDot bool
+	}
+	testcases := []testCase{
+		{"/", []string{"F1", "F2", "F3", "testbin", "cpu"}, true},
+		{"/weblist?f=" + url.QueryEscape("F[12]"),
+			[]string{"F1", "F2", "300ms line1"}, false},
+		{"/disasm?f=" + url.QueryEscape("F[12]"),
+			[]string{"f1:asm", "f2:asm"}, false},
+	}
+	for _, c := range testcases {
+		if c.needDot && !haveDot {
+			t.Log("skpping", c.path, "since dot (graphviz) does not seem to be installed")
+			continue
+		}
+
+		res, err := http.Get(server.URL + c.path)
+		if err != nil {
+			t.Error("could not fetch", c.path, err)
+			continue
+		}
+		data, err := ioutil.ReadAll(res.Body)
+		if err != nil {
+			t.Error("could not read response", c.path, err)
+			continue
+		}
+		result := string(data)
+		for _, w := range c.want {
+			if !strings.Contains(result, w) {
+				t.Errorf("response for %s does not contain "+
+					"expected string '%s'; "+
+					"actual result:\n%s", c.path, w, result)
+			}
+		}
+	}
+
+}
+
+// Implement fake object file support.
+
+const addrBase = 0x1000
+const fakeSource = "testdata/file1000.src"
+
+type fakeObj struct{}
+
+func (f fakeObj) Close() error    { return nil }
+func (f fakeObj) Name() string    { return "testbin" }
+func (f fakeObj) Base() uint64    { return 0 }
+func (f fakeObj) BuildID() string { return "" }
+func (f fakeObj) SourceLine(addr uint64) ([]plugin.Frame, error) {
+	return nil, fmt.Errorf("SourceLine unimplemented")
+}
+func (f fakeObj) Symbols(r *regexp.Regexp, addr uint64) ([]*plugin.Sym, error) {
+	return []*plugin.Sym{
+		{[]string{"F1"}, fakeSource, addrBase, addrBase + 10},
+		{[]string{"F2"}, fakeSource, addrBase + 10, addrBase + 20},
+		{[]string{"F3"}, fakeSource, addrBase + 20, addrBase + 30},
+	}, nil
+}
+
+type fakeObjTool struct{}
+
+func (obj fakeObjTool) Open(file string, start, limit, offset uint64) (plugin.ObjFile, error) {
+	return fakeObj{}, nil
+}
+
+func (obj fakeObjTool) Disasm(file string, start, end uint64) ([]plugin.Inst, error) {
+	return []plugin.Inst{
+		{Addr: addrBase + 0, Text: "f1:asm", Function: "F1"},
+		{Addr: addrBase + 10, Text: "f2:asm", Function: "F2"},
+		{Addr: addrBase + 20, Text: "d3:asm", Function: "F3"},
+	}, nil
+}
+
+func makeFakeProfile() *profile.Profile {
+	// Three functions: F1, F2, F3 with three lines, 11, 22, 33.
+	funcs := []*profile.Function{
+		{ID: 1, Name: "F1", Filename: fakeSource, StartLine: 3},
+		{ID: 2, Name: "F2", Filename: fakeSource, StartLine: 5},
+		{ID: 3, Name: "F3", Filename: fakeSource, StartLine: 7},
+	}
+	lines := []profile.Line{
+		{Function: funcs[0], Line: 11},
+		{Function: funcs[1], Line: 22},
+		{Function: funcs[2], Line: 33},
+	}
+	mapping := []*profile.Mapping{
+		{
+			ID:             1,
+			Start:          addrBase,
+			Limit:          addrBase + 10,
+			Offset:         0,
+			File:           "testbin",
+			HasFunctions:   true,
+			HasFilenames:   true,
+			HasLineNumbers: true,
+		},
+	}
+
+	// Three interesting addresses: base+{10,20,30}
+	locs := []*profile.Location{
+		{ID: 1, Address: addrBase + 10, Line: lines[0:1], Mapping: mapping[0]},
+		{ID: 2, Address: addrBase + 20, Line: lines[1:2], Mapping: mapping[0]},
+		{ID: 3, Address: addrBase + 30, Line: lines[2:3], Mapping: mapping[0]},
+	}
+
+	// Two stack traces.
+	return &profile.Profile{
+		PeriodType:    &profile.ValueType{Type: "cpu", Unit: "milliseconds"},
+		Period:        1,
+		DurationNanos: 10e9,
+		SampleType: []*profile.ValueType{
+			{Type: "cpu", Unit: "milliseconds"},
+		},
+		Sample: []*profile.Sample{
+			{
+				Location: []*profile.Location{locs[2], locs[1], locs[0]},
+				Value:    []int64{100},
+			},
+			{
+				Location: []*profile.Location{locs[1], locs[0]},
+				Value:    []int64{200},
+			},
+		},
+		Location: locs,
+		Function: funcs,
+		Mapping:  mapping,
+	}
+}

internal/graph/dotgraph.go

@@ -123,10 +123,10 @@ func (b *builder) finish() {
 // addLegend generates a legend in DOT format.
 func (b *builder) addLegend() {
 	labels := b.config.Labels
-	var title string
-	if len(labels) > 0 {
-		title = labels[0]
+	if len(labels) == 0 {
+		return
 	}
+	title := labels[0]
 	fmt.Fprintf(b, `subgraph cluster_L { "%s" [shape=box fontsize=16`, title)
 	fmt.Fprintf(b, ` label="%s\l"`, strings.Join(labels, `\l`))
 	if b.config.LegendURL != "" {

internal/plugin/plugin.go

@@ -17,6 +17,7 @@ package plugin
 
 import (
 	"io"
+	"net/http"
 	"regexp"
 	"time"
 
@@ -31,6 +32,15 @@ type Options struct {
 	Sym     Symbolizer
 	Obj     ObjTool
 	UI      UI
+
+	// HTTPWrapper takes a pprof http handler as an argument and
+	// returns the actual handler that should be invoked by http.
+	// A typical use is to add authentication before calling the
+	// pprof handler.
+	//
+	// If HTTPWrapper is nil, a default wrapper will be used that
+	// disallows all requests except from the localhost.
+	HTTPWrapper func(http.Handler) http.Handler
 }
 
 // Writer provides a mechanism to write data under a certain name,

internal/report/report.go

@@ -975,8 +975,9 @@ func printTree(w io.Writer, rpt *Report) error {
 	return nil
 }
 
-// printDOT prints an annotated callgraph in DOT format.
-func printDOT(w io.Writer, rpt *Report) error {
+// GetDOT returns a graph suitable for dot processing along with some
+// configuration information.
+func GetDOT(rpt *Report) (*graph.Graph, *graph.DotConfig) {
 	g, origCount, droppedNodes, droppedEdges := rpt.newTrimmedGraph()
 	rpt.selectOutputUnit(g)
 	labels := reportLabels(rpt, g, origCount, droppedNodes, droppedEdges, true)
@@ -993,6 +994,12 @@ func printDOT(w io.Writer, rpt *Report) error {
 		FormatTag:   formatTag,
 		Total:       rpt.total,
 	}
+	return g, c
+}
+
+// printDOT prints an annotated callgraph in DOT format.
+func printDOT(w io.Writer, rpt *Report) error {
+	g, c := GetDOT(rpt)
 	graph.ComposeDot(w, g, &graph.DotAttributes{}, c)
 	return nil
 }