chenchao
/
pprof


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556
							// 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>
`))