Keine Beschreibung

webhtml.go 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578
  1. // Copyright 2017 Google Inc. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. package driver
  15. import "html/template"
  16. var graphTemplate = template.Must(template.New("graph").Parse(
  17. `<!DOCTYPE html>
  18. <html>
  19. <head>
  20. <meta charset="utf-8">
  21. <title>{{.Title}}</title>
  22. <style type="text/css">
  23. html, body {
  24. height: 100%;
  25. min-height: 100%;
  26. margin: 0px;
  27. }
  28. body {
  29. width: 100%;
  30. overflow: hidden;
  31. }
  32. #page {
  33. display: flex;
  34. flex-direction: column;
  35. height: 100%;
  36. min-height: 100%;
  37. width: 100%;
  38. min-width: 100%;
  39. margin: 0px;
  40. }
  41. #graph {
  42. flex: 1 1 auto;
  43. overflow: hidden;
  44. }
  45. svg {
  46. width: 100%;
  47. height: auto;
  48. }
  49. button {
  50. margin-top: 5px;
  51. margin-bottom: 5px;
  52. }
  53. #reset {
  54. margin-left: 10px;
  55. }
  56. #detailtext {
  57. display: none;
  58. position: absolute;
  59. background-color: #ffffff;
  60. min-width: 160px;
  61. border-top: 1px solid black;
  62. box-shadow: 2px 2px 2px 0px #aaa;
  63. z-index: 1;
  64. }
  65. #actionbox {
  66. display: none;
  67. position: fixed;
  68. background-color: #ffffff;
  69. border: 1px solid black;
  70. box-shadow: 2px 2px 2px 0px #aaa;
  71. top: 20px;
  72. right: 20px;
  73. z-index: 1;
  74. }
  75. .actionhdr {
  76. background-color: #ddd;
  77. width: 100%;
  78. border-bottom: 1px solid black;
  79. border-top: 1px solid black;
  80. font-size: 14pt;
  81. }
  82. #actionbox > button {
  83. display: block;
  84. width: 100%;
  85. margin: 0px;
  86. text-align: left;
  87. padding-left: 0.5em;
  88. background-color: #fff;
  89. border: none;
  90. font-size: 12pt;
  91. }
  92. #actionbox > button:hover {
  93. background-color: #ddd;
  94. }
  95. #home {
  96. font-size: 20pt;
  97. padding-left: 0.5em;
  98. padding-right: 0.5em;
  99. }
  100. </style>
  101. </head>
  102. <body>
  103. <button id="details">&#x25b7; Details</button>
  104. <div id="detailtext">
  105. {{range .Legend}}<div>{{.}}</div>{{end}}
  106. </div>
  107. <button id="reset">Reset</button>
  108. <span id="home">{{.Title}}</span>
  109. <input id="searchbox" type="text" placeholder="Search regexp" autocomplete="off" autocapitalize="none" size=40>
  110. <div id="page">
  111. <div id="errors">{{range .Errors}}<div>{{.}}</div>{{end}}</div>
  112. <div id="graph">
  113. <div id="actionbox">
  114. <div class="actionhdr">Refine graph</div>
  115. <button title="{{.Help.focus}}" id="focus">Focus</button>
  116. <button title="{{.Help.ignore}}" id="ignore">Ignore</button>
  117. <button title="{{.Help.hide}}" id="hide">Hide</button>
  118. <button title="{{.Help.show}}" id="show">Show</button>
  119. <div class="actionhdr">Show Functions</div>
  120. <button title="{{.Help.peek}}" id="peek">Peek</button>
  121. <button title="{{.Help.list}}" id="list">List</button>
  122. <button title="{{.Help.disasm}}" id="disasm">Disassemble</button>
  123. </div>
  124. {{.Svg}}
  125. </div>
  126. </div>
  127. <script>
  128. // Make svg pannable and zoomable.
  129. // Call clickHandler(t) if a click event is caught by the pan event handlers.
  130. function initPanAndZoom(svg, clickHandler) {
  131. 'use strict';
  132. // Current mouse/touch handling mode
  133. const IDLE = 0
  134. const MOUSEPAN = 1
  135. const TOUCHPAN = 2
  136. const TOUCHZOOM = 3
  137. let mode = IDLE
  138. // State needed to implement zooming.
  139. let currentScale = 1.0
  140. const initWidth = svg.viewBox.baseVal.width
  141. const initHeight = svg.viewBox.baseVal.height
  142. // State needed to implement panning.
  143. let panLastX = 0 // Last event X coordinate
  144. let panLastY = 0 // Last event Y coordinate
  145. let moved = false // Have we seen significant movement
  146. let touchid = null // Current touch identifier
  147. // State needed for pinch zooming
  148. let touchid2 = null // Second id for pinch zooming
  149. let initGap = 1.0 // Starting gap between two touches
  150. let initScale = 1.0 // currentScale when pinch zoom started
  151. let centerPoint = null // Center point for scaling
  152. // Convert event coordinates to svg coordinates.
  153. function toSvg(x, y) {
  154. const p = svg.createSVGPoint()
  155. p.x = x
  156. p.y = y
  157. let m = svg.getCTM()
  158. if (m == null) m = svg.getScreenCTM() // Firefox workaround.
  159. return p.matrixTransform(m.inverse())
  160. }
  161. // Change the scaling for the svg to s, keeping the point denoted
  162. // by u (in svg coordinates]) fixed at the same screen location.
  163. function rescale(s, u) {
  164. // Limit to a good range.
  165. if (s < 0.2) s = 0.2
  166. if (s > 10.0) s = 10.0
  167. currentScale = s
  168. // svg.viewBox defines the visible portion of the user coordinate
  169. // system. So to magnify by s, divide the visible portion by s,
  170. // which will then be stretched to fit the viewport.
  171. const vb = svg.viewBox
  172. const w1 = vb.baseVal.width
  173. const w2 = initWidth / s
  174. const h1 = vb.baseVal.height
  175. const h2 = initHeight / s
  176. vb.baseVal.width = w2
  177. vb.baseVal.height = h2
  178. // We also want to adjust vb.baseVal.x so that u.x remains at same
  179. // screen X coordinate. In other words, want to change it from x1 to x2
  180. // so that:
  181. // (u.x - x1) / w1 = (u.x - x2) / w2
  182. // Simplifying that, we get
  183. // (u.x - x1) * (w2 / w1) = u.x - x2
  184. // x2 = u.x - (u.x - x1) * (w2 / w1)
  185. vb.baseVal.x = u.x - (u.x - vb.baseVal.x) * (w2 / w1)
  186. vb.baseVal.y = u.y - (u.y - vb.baseVal.y) * (h2 / h1)
  187. }
  188. function handleWheel(e) {
  189. if (e.deltaY == 0) return
  190. // Change scale factor by 1.1 or 1/1.1
  191. rescale(currentScale * (e.deltaY < 0 ? 1.1 : (1/1.1)),
  192. toSvg(e.offsetX, e.offsetY))
  193. }
  194. function setMode(m) {
  195. mode = m
  196. touchid = null
  197. touchid2 = null
  198. }
  199. function panStart(x, y) {
  200. moved = false
  201. panLastX = x
  202. panLastY = y
  203. }
  204. function panMove(x, y) {
  205. let dx = x - panLastX
  206. let dy = y - panLastY
  207. if (Math.abs(dx) <= 2 && Math.abs(dy) <= 2) return // Ignore tiny moves
  208. moved = true
  209. panLastX = x
  210. panLastY = y
  211. // Firefox workaround: get dimensions from parentNode.
  212. const swidth = svg.clientWidth || svg.parentNode.clientWidth
  213. const sheight = svg.clientHeight || svg.parentNode.clientHeight
  214. // Convert deltas from screen space to svg space.
  215. dx *= (svg.viewBox.baseVal.width / swidth)
  216. dy *= (svg.viewBox.baseVal.height / sheight)
  217. svg.viewBox.baseVal.x -= dx
  218. svg.viewBox.baseVal.y -= dy
  219. }
  220. function handleScanStart(e) {
  221. if (e.button != 0) return // Do not catch right-clicks etc.
  222. setMode(MOUSEPAN)
  223. panStart(e.clientX, e.clientY)
  224. e.preventDefault()
  225. svg.addEventListener("mousemove", handleScanMove)
  226. }
  227. function handleScanMove(e) {
  228. if (mode == MOUSEPAN) panMove(e.clientX, e.clientY)
  229. }
  230. function handleScanEnd(e) {
  231. if (mode == MOUSEPAN) panMove(e.clientX, e.clientY)
  232. setMode(IDLE)
  233. svg.removeEventListener("mousemove", handleScanMove)
  234. if (!moved) clickHandler(e.target)
  235. }
  236. // Find touch object with specified identifier.
  237. function findTouch(tlist, id) {
  238. for (const t of tlist) {
  239. if (t.identifier == id) return t
  240. }
  241. return null
  242. }
  243. // Return distance between two touch points
  244. function touchGap(t1, t2) {
  245. const dx = t1.clientX - t2.clientX
  246. const dy = t1.clientY - t2.clientY
  247. return Math.hypot(dx, dy)
  248. }
  249. function handleTouchStart(e) {
  250. if (mode == IDLE && e.changedTouches.length == 1) {
  251. // Start touch based panning
  252. const t = e.changedTouches[0]
  253. setMode(TOUCHPAN)
  254. touchid = t.identifier
  255. panStart(t.clientX, t.clientY)
  256. e.preventDefault()
  257. } else if (mode == TOUCHPAN && e.touches.length == 2) {
  258. // Start pinch zooming
  259. setMode(TOUCHZOOM)
  260. const t1 = e.touches[0]
  261. const t2 = e.touches[1]
  262. touchid = t1.identifier
  263. touchid2 = t2.identifier
  264. initScale = currentScale
  265. initGap = touchGap(t1, t2)
  266. centerPoint = toSvg((t1.clientX + t2.clientX) / 2,
  267. (t1.clientY + t2.clientY) / 2)
  268. e.preventDefault()
  269. }
  270. }
  271. function handleTouchMove(e) {
  272. if (mode == TOUCHPAN) {
  273. const t = findTouch(e.changedTouches, touchid)
  274. if (t == null) return
  275. if (e.touches.length != 1) {
  276. setMode(IDLE)
  277. return
  278. }
  279. panMove(t.clientX, t.clientY)
  280. e.preventDefault()
  281. } else if (mode == TOUCHZOOM) {
  282. // Get two touches; new gap; rescale to ratio.
  283. const t1 = findTouch(e.touches, touchid)
  284. const t2 = findTouch(e.touches, touchid2)
  285. if (t1 == null || t2 == null) return
  286. const gap = touchGap(t1, t2)
  287. rescale(initScale * gap / initGap, centerPoint)
  288. e.preventDefault()
  289. }
  290. }
  291. function handleTouchEnd(e) {
  292. if (mode == TOUCHPAN) {
  293. const t = findTouch(e.changedTouches, touchid)
  294. if (t == null) return
  295. panMove(t.clientX, t.clientY)
  296. setMode(IDLE)
  297. e.preventDefault()
  298. if (!moved) clickHandler(t.target)
  299. } else if (mode == TOUCHZOOM) {
  300. setMode(IDLE)
  301. e.preventDefault()
  302. }
  303. }
  304. svg.addEventListener("mousedown", handleScanStart)
  305. svg.addEventListener("mouseup", handleScanEnd)
  306. svg.addEventListener("touchstart", handleTouchStart)
  307. svg.addEventListener("touchmove", handleTouchMove)
  308. svg.addEventListener("touchend", handleTouchEnd)
  309. svg.addEventListener("wheel", handleWheel, true)
  310. }
  311. function dotviewer(nodes) {
  312. 'use strict';
  313. // Elements
  314. const detailsButton = document.getElementById("details")
  315. const detailsText = document.getElementById("detailtext")
  316. const actionBox = document.getElementById("actionbox")
  317. const listButton = document.getElementById("list")
  318. const disasmButton = document.getElementById("disasm")
  319. const resetButton = document.getElementById("reset")
  320. const peekButton = document.getElementById("peek")
  321. const focusButton = document.getElementById("focus")
  322. const showButton = document.getElementById("show")
  323. const ignoreButton = document.getElementById("ignore")
  324. const hideButton = document.getElementById("hide")
  325. const search = document.getElementById("searchbox")
  326. const graph0 = document.getElementById("graph0")
  327. const svg = graph0.parentElement
  328. let regexpActive = false
  329. let selected = new Map()
  330. let origFill = new Map()
  331. let searchAlarm = null
  332. let buttonsEnabled = true
  333. function handleDetails() {
  334. if (detailtext.style.display == "block") {
  335. detailtext.style.display = "none"
  336. detailsButton.innerText = "\u25b7 Details"
  337. } else {
  338. detailtext.style.display = "block"
  339. detailsButton.innerText = "\u25bd Details"
  340. }
  341. }
  342. function handleReset() { window.location.href = "/" }
  343. function handleList() { navigate("/weblist", "f", true) }
  344. function handleDisasm() { navigate("/disasm", "f", true) }
  345. function handlePeek() { navigate("/peek", "f", true) }
  346. function handleFocus() { navigate("/", "f", false) }
  347. function handleShow() { navigate("/", "s", false) }
  348. function handleIgnore() { navigate("/", "i", false) }
  349. function handleHide() { navigate("/", "h", false) }
  350. function handleKey(e) {
  351. if (e.keyCode != 13) return
  352. handleFocus()
  353. e.preventDefault()
  354. }
  355. function handleSearch() {
  356. // Delay expensive processing so a flurry of key strokes is handled once.
  357. if (searchAlarm != null) {
  358. clearTimeout(searchAlarm)
  359. }
  360. searchAlarm = setTimeout(selectMatching, 300)
  361. regexpActive = true
  362. updateButtons()
  363. }
  364. function selectMatching() {
  365. searchAlarm = null
  366. let re = null
  367. if (search.value != "") {
  368. try {
  369. re = new RegExp(search.value)
  370. } catch (e) {
  371. // TODO: Display error state in search box
  372. return
  373. }
  374. }
  375. function match(text) {
  376. return re != null && re.test(text)
  377. }
  378. // drop currently selected items that do not match re.
  379. selected.forEach(function(v, n) {
  380. if (!match(nodes[n])) {
  381. unselect(n, document.getElementById("node" + n))
  382. }
  383. })
  384. // add matching items that are not currently selected.
  385. for (let n = 0; n < nodes.length; n++) {
  386. if (!selected.has(n) && match(nodes[n])) {
  387. select(n, document.getElementById("node" + n))
  388. }
  389. }
  390. updateButtons()
  391. }
  392. function toggleSelect(elem) {
  393. // Walk up to immediate child of graph0
  394. while (elem != null && elem.parentElement != graph0) {
  395. elem = elem.parentElement
  396. }
  397. if (!elem) return
  398. // Disable regexp mode.
  399. regexpActive = false
  400. const n = nodeId(elem)
  401. if (n < 0) return
  402. if (selected.has(n)) {
  403. unselect(n, elem)
  404. } else {
  405. select(n, elem)
  406. }
  407. updateButtons()
  408. }
  409. function unselect(n, elem) {
  410. if (elem == null) return
  411. selected.delete(n)
  412. setBackground(elem, false)
  413. }
  414. function select(n, elem) {
  415. if (elem == null) return
  416. selected.set(n, true)
  417. setBackground(elem, true)
  418. }
  419. function nodeId(elem) {
  420. const id = elem.id
  421. if (!id) return -1
  422. if (!id.startsWith("node")) return -1
  423. const n = parseInt(id.slice(4), 10)
  424. if (isNaN(n)) return -1
  425. if (n < 0 || n >= nodes.length) return -1
  426. return n
  427. }
  428. function setBackground(elem, set) {
  429. const p = findPolygon(elem)
  430. if (p != null) {
  431. if (set) {
  432. origFill.set(p, p.style.fill)
  433. p.style.fill = "#ccccff"
  434. } else if (origFill.has(p)) {
  435. p.style.fill = origFill.get(p)
  436. }
  437. }
  438. }
  439. function findPolygon(elem) {
  440. if (elem.localName == "polygon") return elem
  441. for (const c of elem.children) {
  442. const p = findPolygon(c)
  443. if (p != null) return p
  444. }
  445. return null
  446. }
  447. // Navigate to specified path with current selection reflected
  448. // in the named parameter.
  449. function navigate(path, param, newWindow) {
  450. // The selection can be in one of two modes: regexp-based or
  451. // list-based. Construct regular expression depending on mode.
  452. let re = regexpActive ? search.value : ""
  453. if (!regexpActive) {
  454. selected.forEach(function(v, key) {
  455. if (re != "") re += "|"
  456. re += nodes[key]
  457. })
  458. }
  459. const url = new URL(window.location.href)
  460. url.pathname = path
  461. url.hash = ""
  462. if (re != "") {
  463. // For focus/show, forget old parameter. For others, add to re.
  464. const params = url.searchParams
  465. if (param != "f" && param != "s" && params.has(param)) {
  466. const old = params.get(param)
  467. if (old != "") {
  468. re += "|" + old
  469. }
  470. }
  471. params.set(param, re)
  472. }
  473. if (newWindow) {
  474. window.open(url.toString(), "_blank")
  475. } else {
  476. window.location.href = url.toString()
  477. }
  478. }
  479. function updateButtons() {
  480. const enable = (search.value != "" || selected.size != 0)
  481. if (buttonsEnabled == enable) return
  482. buttonsEnabled = enable
  483. actionBox.style.display = enable ? "block" : "none"
  484. }
  485. // Initialize button states
  486. updateButtons()
  487. // Setup event handlers
  488. initPanAndZoom(svg, toggleSelect)
  489. function bindButtons(evt) {
  490. detailsButton.addEventListener(evt, handleDetails)
  491. resetButton.addEventListener(evt, handleReset)
  492. listButton.addEventListener(evt, handleList)
  493. disasmButton.addEventListener(evt, handleDisasm)
  494. peekButton.addEventListener(evt, handlePeek)
  495. focusButton.addEventListener(evt, handleFocus)
  496. showButton.addEventListener(evt, handleShow)
  497. ignoreButton.addEventListener(evt, handleIgnore)
  498. hideButton.addEventListener(evt, handleHide)
  499. }
  500. bindButtons("click")
  501. bindButtons("touchstart")
  502. search.addEventListener("input", handleSearch)
  503. search.addEventListener("keydown", handleKey)
  504. }
  505. dotviewer({{.Nodes}})
  506. </script>
  507. </body>
  508. </html>
  509. `))