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

 .*.swp
 core
 coverage.txt
+pprof

README.md

 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

 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
 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

 	Seconds   int
 	Timeout   int
 	Symbolize string
+	HTTPPort  int
 }
 
 // Parse parses the command lines through the specified flags package
 	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)
 	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)
 		Seconds:   *flagSeconds,
 		Timeout:   *flagTimeout,
 		Symbolize: *flagSymbolize,
+		HTTPPort:  *flagHTTPPort,
 	}
 
 	for _, s := range *flagBase {
 	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" +
 
 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

 
 	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

 		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)
 	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 {
 	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
 	}
 	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

+// 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

+// 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

+// 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

 // 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

 
 import (
 	"io"
+	"net/http"
 	"regexp"
 	"time"
 
 	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

 	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)
 		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
 }