Use common header for remaining web views (source code, disassembly, peek) (#214)

Use common header for remaining web views (source code, disassembly, peek).

Details:
* Made it easier to reuse css, javascript, etc. across views.
* Added two new templates: sourcelisting, plaintext.
* Use new templates for showing source code, disassembly, peek.
* Merged Functions menu into View menu.
* View change menu entries are now always enabled.
* Removed now unused "newWindow" argument to navigate.
* Removed redundancy in web handlers.
* Renamed /weblist URL to /source.
* Assembly and source code listings are now limited to 500 functions
  sorted by decreasing flat value (to prevent huge delays when
  selecting asm/source view across the entire profile).

internal/driver/webhtml.go

 
 import "html/template"
 
-// webTemplate defines a collection of related templates:
-//    css
-//    header
-//    script
-//    graph
-//    top
-var webTemplate = template.Must(template.New("web").Parse(`
+// addTemplates adds a set of template definitions to templates.
+func addTemplates(templates *template.Template) {
+	template.Must(templates.Parse(`
 {{define "css"}}
 <style type="text/css">
-html, body {
+html {
   height: 100%;
   min-height: 100%;
   margin: 0px;
 }
 body {
+  margin: 0px;
   width: 100%;
   height: 100%;
   min-height: 100%;
 #searchbox {
   margin-left: 10pt;
 }
-#topcontainer {
+#bodycontainer {
   width: 100%;
   height: 100%;
   max-height: 100%;
   overflow: scroll;
+  padding-top: 5px;
 }
 #toptable {
   border-spacing: 0px;
 <div class="menu-header">
 View
 <div class="menu">
-{{if (ne .Type "top")}}
-  <button title="{{.Help.top}}" id="topbtn">Top</button>
-{{end}}
-{{if (ne .Type "dot")}}
-  <button title="{{.Help.graph}}" id="graphbtn">Graph</button>
-{{end}}
-<hr>
-<button title="{{.Help.details}}" id="details">Details</button>
-</div>
-</div>
-
-<div class="menu-header">
-Functions
-<div class="menu">
+<button title="{{.Help.top}}" id="topbtn">Top</button>
+<button title="{{.Help.graph}}" id="graphbtn">Graph</button>
 <button title="{{.Help.peek}}" id="peek">Peek</button>
-<button title="{{.Help.list}}" id="list">List</button>
+<button title="{{.Help.list}}" id="list">Source</button>
 <button title="{{.Help.disasm}}" id="disasm">Disassemble</button>
+<hr>
+<button title="{{.Help.details}}" id="details">Details</button>
 </div>
 </div>
 
 {{template "header" .}}
 <div id="graphcontainer">
 <div id="graph">
-{{.Svg}}
+{{.HTMLBody}}
 </div>
 
 </div>
   }
 
   function handleReset() { window.location.href = baseUrl }
-  function handleTop() { navigate("/top", "f", false) }
-  function handleGraph() { navigate("/", "f", false) }
-  function handleList() { navigate("/weblist", "f", true) }
-  function handleDisasm() { navigate("/disasm", "f", true) }
-  function handlePeek() { navigate("/peek", "f", true) }
-  function handleFocus() { navigate(baseUrl, "f", false) }
-  function handleShow() { navigate(baseUrl, "s", false) }
-  function handleIgnore() { navigate(baseUrl, "i", false) }
-  function handleHide() { navigate(baseUrl, "h", false) }
+  function handleTop() { navigate("/top", "f") }
+  function handleGraph() { navigate("/", "f") }
+  function handleList() { navigate("/source", "f") }
+  function handleDisasm() { navigate("/disasm", "f") }
+  function handlePeek() { navigate("/peek", "f") }
+  function handleFocus() { navigate(baseUrl, "f") }
+  function handleShow() { navigate(baseUrl, "s") }
+  function handleIgnore() { navigate(baseUrl, "i") }
+  function handleHide() { navigate(baseUrl, "h") }
 
   function handleKey(e) {
     if (e.keyCode != 13) return
 
   // Navigate to specified path with current selection reflected
   // in the named parameter.
-  function navigate(path, param, newWindow) {
+  function navigate(path, param) {
     // The selection can be in one of two modes: regexp-based or
     // list-based.  Construct regular expression depending on mode.
     let re = regexpActive ? search.value : ""
       params.set(param, re)
     }
 
-    if (newWindow) {
-      window.open(url.toString(), "_blank")
-    } else {
-      window.location.href = url.toString()
-    }
+    window.location.href = url.toString()
   }
 
   function handleTopClick(e) {
     const enable = (search.value != "" || selected.size != 0)
     if (buttonsEnabled == enable) return
     buttonsEnabled = enable
-    for (const id of ["peek", "list", "disasm", "focus", "ignore", "hide", "show"]) {
+    for (const id of ["focus", "ignore", "hide", "show"]) {
       const btn = document.getElementById(id)
       if (btn != null) {
         btn.disabled = !enable
 
   search.addEventListener("input", handleSearch)
   search.addEventListener("keydown", handleKey)
+
+  // Give initial focus to main container so it can be scrolled using keys.
+  const main = document.getElementById("bodycontainer")
+  if (main) {
+    main.focus()
+  }
 }
 </script>
 {{end}}
 
 {{template "header" .}}
 
-<div id="topcontainer">
+<div id="bodycontainer">
 <table id="toptable">
 <tr><th>Flat<th>Flat%<th>Sum%<th>Cum<th>Cum%<th>Name<th>Inlined?</tr>
 {{range $i,$e := .Top}}
 </body>
 </html>
 {{end}}
+
+{{define "sourcelisting" -}}
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>{{.Title}}</title>
+{{template "css" .}}
+{{template "weblistcss" .}}
+{{template "weblistjs" .}}
+</head>
+<body>
+
+{{template "header" .}}
+
+<div id="bodycontainer">
+{{.HTMLBody}}
+</div>
+
+{{template "script" .}}
+<script>viewer({{.BaseURL}}, null)</script>
+</body>
+</html>
+{{end}}
+
+{{define "plaintext" -}}
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>{{.Title}}</title>
+{{template "css" .}}
+</head>
+<body>
+
+{{template "header" .}}
+
+<div id="bodycontainer">
+<pre>
+{{.TextBody}}
+</pre>
+</div>
+
+{{template "script" .}}
+<script>viewer({{.BaseURL}}, null)</script>
+</body>
+</html>
+{{end}}
 `))
+}

internal/driver/webui.go

 	"bytes"
 	"fmt"
 	"html/template"
-	"io"
 	"net"
 	"net/http"
 	gourl "net/url"
 
 // webInterface holds the state needed for serving a browser based interface.
 type webInterface struct {
-	prof    *profile.Profile
-	options *plugin.Options
-	help    map[string]string
+	prof      *profile.Profile
+	options   *plugin.Options
+	help      map[string]string
+	templates *template.Template
 }
 
+func makeWebInterface(p *profile.Profile, opt *plugin.Options) *webInterface {
+	templates := template.New("templategroup")
+	addTemplates(templates)
+	report.AddSourceTemplates(templates)
+	return &webInterface{
+		prof:      p,
+		options:   opt,
+		help:      make(map[string]string),
+		templates: templates,
+	}
+}
+
+// maxEntries is the maximum number of entries to print for text interfaces.
+const maxEntries = 50
+
 // errorCatcher is a UI that captures errors for reporting to the browser.
 type errorCatcher struct {
 	plugin.UI
 
 // webArgs contains arguments passed to templates in webhtml.go.
 type webArgs struct {
-	BaseURL string
-	Type    string
-	Title   string
-	Errors  []string
-	Legend  []string
-	Help    map[string]string
-	Nodes   []string
-	Svg     template.HTML
-	Top     []report.TextItem
+	BaseURL  string
+	Title    string
+	Errors   []string
+	Legend   []string
+	Help     map[string]string
+	Nodes    []string
+	HTMLBody template.HTML
+	TextBody string
+	Top      []report.TextItem
 }
 
 func serveWebInterface(hostport string, p *profile.Profile, o *plugin.Options) error {
 	interactiveMode = true
-	ui := &webInterface{
-		prof:    p,
-		options: o,
-		help:    make(map[string]string),
-	}
+	ui := makeWebInterface(p, o)
 	for n, c := range pprofCommands {
 		ui.help[n] = c.description
 	}
 	mux.Handle("/", wrap(http.HandlerFunc(ui.dot)))
 	mux.Handle("/top", wrap(http.HandlerFunc(ui.top)))
 	mux.Handle("/disasm", wrap(http.HandlerFunc(ui.disasm)))
-	mux.Handle("/weblist", wrap(http.HandlerFunc(ui.weblist)))
+	mux.Handle("/source", wrap(http.HandlerFunc(ui.source)))
 	mux.Handle("/peek", wrap(http.HandlerFunc(ui.peek)))
 
 	s := &http.Server{Handler: mux}
 	return vars
 }
 
-// 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
+// makeReport generates a report for the specified command.
+func (ui *webInterface) makeReport(w http.ResponseWriter, req *http.Request,
+	cmd []string, vars ...string) (*report.Report, []string) {
+	v := varsFromURL(req.URL)
+	for i := 0; i+1 < len(vars); i += 2 {
+		v[vars[i]].value = vars[i+1]
 	}
-
-	// 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 := varsFromURL(req.URL)
-	_, rpt, err := generateRawReport(ui.prof, args, vars, &options)
+	_, rpt, err := generateRawReport(ui.prof, cmd, v, &options)
 	if err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		ui.options.UI.PrintErr(err)
+		return nil, nil
+	}
+	return rpt, catcher.errors
+}
+
+// render generates html using the named template based on the contents of data.
+func (ui *webInterface) render(w http.ResponseWriter, baseURL, tmpl string,
+	errList, legend []string, data webArgs) {
+	file := getFromLegend(legend, "File: ", "unknown")
+	profile := getFromLegend(legend, "Type: ", "unknown")
+	data.BaseURL = baseURL
+	data.Title = file + " " + profile
+	data.Errors = errList
+	data.Legend = legend
+	data.Help = ui.help
+	html := &bytes.Buffer{}
+	if err := ui.templates.ExecuteTemplate(html, tmpl, 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())
+}
+
+// dot generates a web page containing an svg diagram.
+func (ui *webInterface) dot(w http.ResponseWriter, req *http.Request) {
+	// Disable prefix matching behavior of net/http.
+	if req.URL.Path != "/" {
+		http.NotFound(w, req)
 		return
 	}
+
+	rpt, errList := ui.makeReport(w, req, []string{"svg"})
+	if rpt == nil {
+		return // error already reported
+	}
+
+	// Generate dot graph.
 	g, config := report.GetDOT(rpt)
 	legend := config.Labels
 	config.Labels = nil
 		nodes = append(nodes, n.Info.Name)
 	}
 
-	// Embed in html.
-	file := getFromLegend(legend, "File: ", "unknown")
-	profile := getFromLegend(legend, "Type: ", "unknown")
-	data := webArgs{
-		BaseURL: "/",
-		Type:    "dot",
-		Title:   file + " " + profile,
-		Errors:  catcher.errors,
-		Svg:     template.HTML(string(svg)),
-		Legend:  legend,
-		Nodes:   nodes,
-		Help:    ui.help,
-	}
-	html := &bytes.Buffer{}
-	if err := webTemplate.ExecuteTemplate(html, "graph", 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())
+	ui.render(w, "/", "graph", errList, legend, webArgs{
+		HTMLBody: template.HTML(string(svg)),
+		Nodes:    nodes,
+	})
 }
 
 func dotToSvg(dot []byte) ([]byte, error) {
 }
 
 func (ui *webInterface) top(w http.ResponseWriter, req *http.Request) {
-	// Capture any error messages generated while generating a report.
-	catcher := &errorCatcher{UI: ui.options.UI}
-	options := *ui.options
-	options.UI = catcher
-
-	// Generate top report
-	args := []string{"top"}
-	vars := varsFromURL(req.URL)
-	vars["nodecount"].value = "500"
-	_, rpt, err := generateRawReport(ui.prof, args, vars, &options)
-	if err != nil {
-		http.Error(w, err.Error(), http.StatusBadRequest)
-		ui.options.UI.PrintErr(err)
-		return
+	rpt, errList := ui.makeReport(w, req, []string{"top"}, "nodecount", "500")
+	if rpt == nil {
+		return // error already reported
 	}
-
 	top, legend := report.TextItems(rpt)
-
-	// Get all node names into an array.
 	var nodes []string
 	for _, item := range top {
 		nodes = append(nodes, item.Name)
 	}
 
-	// Embed in html.
-	file := getFromLegend(legend, "File: ", "unknown")
-	profile := getFromLegend(legend, "Type: ", "unknown")
-	data := webArgs{
-		BaseURL: "/top",
-		Type:    "top",
-		Title:   file + " " + profile,
-		Errors:  catcher.errors,
-		Legend:  legend,
-		Help:    ui.help,
-		Top:     top,
-		Nodes:   nodes,
-	}
-	html := &bytes.Buffer{}
-	if err := webTemplate.ExecuteTemplate(html, "top", 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())
+	ui.render(w, "/top", "top", errList, legend, webArgs{
+		Top:   top,
+		Nodes: nodes,
+	})
 }
 
 // disasm generates a web page containing disassembly.
 func (ui *webInterface) disasm(w http.ResponseWriter, req *http.Request) {
-	ui.output(w, req, "disasm", "text/plain", pprofVariables.makeCopy())
-}
+	args := []string{"disasm", req.URL.Query().Get("f")}
+	rpt, errList := ui.makeReport(w, req, args)
+	if rpt == nil {
+		return // error already reported
+	}
 
-// weblist generates a web page containing disassembly.
-func (ui *webInterface) weblist(w http.ResponseWriter, req *http.Request) {
-	ui.output(w, req, "weblist", "text/html", pprofVariables.makeCopy())
-}
+	out := &bytes.Buffer{}
+	if err := report.PrintAssembly(out, rpt, ui.options.Obj, maxEntries); err != nil {
+		http.Error(w, err.Error(), http.StatusBadRequest)
+		ui.options.UI.PrintErr(err)
+		return
+	}
+
+	legend := report.ProfileLabels(rpt)
+	ui.render(w, "/disasm", "plaintext", errList, legend, webArgs{
+		TextBody: out.String(),
+	})
 
-// peek generates a web page listing callers/callers.
-func (ui *webInterface) peek(w http.ResponseWriter, req *http.Request) {
-	vars := pprofVariables.makeCopy()
-	vars.set("lines", "t") // Switch to line granularity
-	ui.output(w, req, "peek", "text/plain", vars)
 }
 
-// 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, vars variables) {
-	focus := req.URL.Query().Get("f")
-	if focus == "" {
-		fmt.Fprintln(w, "no argument supplied for "+cmd)
-		return
+// source generates a web page containing source code annotated with profile
+// data.
+func (ui *webInterface) source(w http.ResponseWriter, req *http.Request) {
+	args := []string{"weblist", req.URL.Query().Get("f")}
+	rpt, errList := ui.makeReport(w, req, args)
+	if rpt == nil {
+		return // error already reported
 	}
 
-	// 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}
-	_, rpt, err := generateRawReport(ui.prof, args, vars, &options)
-	if err != nil {
+	// Generate source listing.
+	var body bytes.Buffer
+	if err := report.PrintWebList(&body, rpt, ui.options.Obj, maxEntries); err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		ui.options.UI.PrintErr(err)
 		return
 	}
 
+	legend := report.ProfileLabels(rpt)
+	ui.render(w, "/source", "sourcelisting", errList, legend, webArgs{
+		HTMLBody: template.HTML(body.String()),
+	})
+}
+
+// peek generates a web page listing callers/callers.
+func (ui *webInterface) peek(w http.ResponseWriter, req *http.Request) {
+	args := []string{"peek", req.URL.Query().Get("f")}
+	rpt, errList := ui.makeReport(w, req, args, "lines", "t")
+	if rpt == nil {
+		return // error already reported
+	}
+
 	out := &bytes.Buffer{}
 	if err := report.Generate(out, rpt, ui.options.Obj); err != nil {
 		http.Error(w, err.Error(), http.StatusBadRequest)
 		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)
+	legend := report.ProfileLabels(rpt)
+	ui.render(w, "/peek", "plaintext", errList, legend, webArgs{
+		TextBody: out.String(),
+	})
 }
 
 // getFromLegend returns the suffix of an entry in legend that starts

internal/driver/webui_test.go

 
 func TestWebInterface(t *testing.T) {
 	prof := makeFakeProfile()
-	ui := &webInterface{
-		prof:    prof,
-		options: &plugin.Options{Obj: fakeObjTool{}},
-		help:    make(map[string]string),
-	}
+	ui := makeWebInterface(prof, &plugin.Options{Obj: fakeObjTool{}})
 
 	// Start test server.
 	server := httptest.NewServer(http.HandlerFunc(
 				ui.disasm(w, r)
 			case "/peek":
 				ui.peek(w, r)
-			case "/weblist":
-				ui.weblist(w, r)
+			case "/source":
+				ui.source(w, r)
 			}
 		}))
 	defer server.Close()
 	testcases := []testCase{
 		{"/", []string{"F1", "F2", "F3", "testbin", "cpu"}, true},
 		{"/top", []string{"Flat", "200ms.*100%.*F2"}, false},
-		{"/weblist?f=" + url.QueryEscape("F[12]"),
+		{"/source?f=" + url.QueryEscape("F[12]"),
 			[]string{"F1", "F2", "300ms line1"}, false},
 		{"/peek?f=" + url.QueryEscape("F[12]"),
 			[]string{"300ms.*F1", "200ms.*300ms.*F2"}, false},

internal/report/report.go

 
 // printAssembly prints an annotated assembly listing.
 func printAssembly(w io.Writer, rpt *Report, obj plugin.ObjTool) error {
+	return PrintAssembly(w, rpt, obj, -1)
+}
+
+// PrintAssembly prints annotated disasssembly of rpt to w.
+func PrintAssembly(w io.Writer, rpt *Report, obj plugin.ObjTool, maxFuncs int) error {
 	o := rpt.options
 	prof := rpt.prof
 
 	fmt.Fprintln(w, "Total:", rpt.formatValue(rpt.total))
 	symbols := symbolsFromBinaries(prof, g, o.Symbol, address, obj)
 	symNodes := nodesPerSymbol(g.Nodes, symbols)
-	// Sort function names for printing.
-	var syms objSymbols
+
+	// Sort for printing.
+	var syms []*objSymbol
 	for s := range symNodes {
 		syms = append(syms, s)
 	}
-	sort.Sort(syms)
+	byName := func(a, b *objSymbol) bool {
+		if na, nb := a.sym.Name[0], b.sym.Name[0]; na != nb {
+			return na < nb
+		}
+		return a.sym.Start < b.sym.Start
+	}
+	if maxFuncs < 0 {
+		sort.Sort(orderSyms{syms, byName})
+	} else {
+		byFlatSum := func(a, b *objSymbol) bool {
+			suma, _ := symNodes[a].Sum()
+			sumb, _ := symNodes[b].Sum()
+			if suma != sumb {
+				return suma > sumb
+			}
+			return byName(a, b)
+		}
+		sort.Sort(orderSyms{syms, byFlatSum})
+		if len(syms) > maxFuncs {
+			syms = syms[:maxFuncs]
+		}
+	}
 
 	// Correlate the symbols from the binary with the profile samples.
 	for _, s := range syms {
 	base uint64
 }
 
-// objSymbols is a wrapper type to enable sorting of []*objSymbol.
-type objSymbols []*objSymbol
-
-func (o objSymbols) Len() int {
-	return len(o)
+// orderSyms is a wrapper type to sort []*objSymbol by a supplied comparator.
+type orderSyms struct {
+	v    []*objSymbol
+	less func(a, b *objSymbol) bool
 }
 
-func (o objSymbols) Less(i, j int) bool {
-	if namei, namej := o[i].sym.Name[0], o[j].sym.Name[0]; namei != namej {
-		return namei < namej
-	}
-	return o[i].sym.Start < o[j].sym.Start
-}
-
-func (o objSymbols) Swap(i, j int) {
-	o[i], o[j] = o[j], o[i]
-}
+func (o orderSyms) Len() int           { return len(o.v) }
+func (o orderSyms) Less(i, j int) bool { return o.less(o.v[i], o.v[j]) }
+func (o orderSyms) Swap(i, j int)      { o.v[i], o.v[j] = o.v[j], o.v[i] }
 
 // nodesPerSymbol classifies nodes into a group of symbols.
 func nodesPerSymbol(ns graph.Nodes, symbols []*objSymbol) map[*objSymbol]graph.Nodes {

internal/report/source.go

 // printWebSource prints an annotated source listing, include all
 // functions with samples that match the regexp rpt.options.symbol.
 func printWebSource(w io.Writer, rpt *Report, obj plugin.ObjTool) error {
+	printHeader(w, rpt)
+	if err := PrintWebList(w, rpt, obj, -1); err != nil {
+		return err
+	}
+	printPageClosing(w)
+	return nil
+}
+
+// PrintWebList prints annotated source listing of rpt to w.
+func PrintWebList(w io.Writer, rpt *Report, obj plugin.ObjTool, maxFiles int) error {
 	o := rpt.options
 	g := rpt.newGraph(nil)
 
 		sNode.Flat, sNode.Cum = nodes.Sum()
 		sourceFiles = append(sourceFiles, &sNode)
 	}
-	sourceFiles.Sort(graph.FileOrder)
+
+	// Limit number of files printed?
+	if maxFiles < 0 {
+		sourceFiles.Sort(graph.FileOrder)
+	} else {
+		sourceFiles.Sort(graph.FlatNameOrder)
+		if maxFiles < len(sourceFiles) {
+			sourceFiles = sourceFiles[:maxFiles]
+		}
+	}
 
 	// Print each file associated with this function.
-	printHeader(w, rpt)
 	for _, n := range sourceFiles {
 		ff := fileFunction{n.Info.File, n.Info.Name}
 		fns := fileNodes[ff]
 		}
 		printFunctionClosing(w)
 	}
-	printPageClosing(w)
 	return nil
 }
 
 
 // printHeader prints the page header for a weblist report.
 func printHeader(w io.Writer, rpt *Report) {
-	fmt.Fprintln(w, weblistPageHeader)
+	fmt.Fprintln(w, `
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Pprof listing</title>`)
+	fmt.Fprintln(w, weblistPageCSS)
+	fmt.Fprintln(w, weblistPageScript)
+	fmt.Fprint(w, "</head>\n<body>\n\n")
 
 	var labels []string
 	for _, l := range ProfileLabels(rpt) {

internal/report/source_html.go

 
 package report
 
-const weblistPageHeader = `
-<!DOCTYPE html>
-<html>
-<head>
-<meta charset="UTF-8">
-<title>Pprof listing</title>
-<style type="text/css">
+import (
+	"html/template"
+)
+
+// AddSourceTemplates adds templates used by PrintWebList to t.
+func AddSourceTemplates(t *template.Template) {
+	template.Must(t.Parse(`{{define "weblistcss"}}` + weblistPageCSS + `{{end}}`))
+	template.Must(t.Parse(`{{define "weblistjs"}}` + weblistPageScript + `{{end}}`))
+}
+
+const weblistPageCSS = `<style type="text/css">
 body {
 font-family: sans-serif;
 }
 color: #008800;
 display: none;
 }
-</style>
-<script type="text/javascript">
+</style>`
+
+const weblistPageScript = `<script type="text/javascript">
 function pprof_toggle_asm(e) {
   var target;
   if (!e) e = window.event;
     }
   }
 }
-</script>
-</head>
-<body>
-`
+</script>`
 
 const weblistPageClosing = `
 </body>