Nenhuma descrição

webhtml.go 15KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584
  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 (e.buttons == 0) {
  229. // Missed an end event, perhaps because mouse moved outside window.
  230. setMode(IDLE)
  231. svg.removeEventListener("mousemove", handleScanMove)
  232. return
  233. }
  234. if (mode == MOUSEPAN) panMove(e.clientX, e.clientY)
  235. }
  236. function handleScanEnd(e) {
  237. if (mode == MOUSEPAN) panMove(e.clientX, e.clientY)
  238. setMode(IDLE)
  239. svg.removeEventListener("mousemove", handleScanMove)
  240. if (!moved) clickHandler(e.target)
  241. }
  242. // Find touch object with specified identifier.
  243. function findTouch(tlist, id) {
  244. for (const t of tlist) {
  245. if (t.identifier == id) return t
  246. }
  247. return null
  248. }
  249. // Return distance between two touch points
  250. function touchGap(t1, t2) {
  251. const dx = t1.clientX - t2.clientX
  252. const dy = t1.clientY - t2.clientY
  253. return Math.hypot(dx, dy)
  254. }
  255. function handleTouchStart(e) {
  256. if (mode == IDLE && e.changedTouches.length == 1) {
  257. // Start touch based panning
  258. const t = e.changedTouches[0]
  259. setMode(TOUCHPAN)
  260. touchid = t.identifier
  261. panStart(t.clientX, t.clientY)
  262. e.preventDefault()
  263. } else if (mode == TOUCHPAN && e.touches.length == 2) {
  264. // Start pinch zooming
  265. setMode(TOUCHZOOM)
  266. const t1 = e.touches[0]
  267. const t2 = e.touches[1]
  268. touchid = t1.identifier
  269. touchid2 = t2.identifier
  270. initScale = currentScale
  271. initGap = touchGap(t1, t2)
  272. centerPoint = toSvg((t1.clientX + t2.clientX) / 2,
  273. (t1.clientY + t2.clientY) / 2)
  274. e.preventDefault()
  275. }
  276. }
  277. function handleTouchMove(e) {
  278. if (mode == TOUCHPAN) {
  279. const t = findTouch(e.changedTouches, touchid)
  280. if (t == null) return
  281. if (e.touches.length != 1) {
  282. setMode(IDLE)
  283. return
  284. }
  285. panMove(t.clientX, t.clientY)
  286. e.preventDefault()
  287. } else if (mode == TOUCHZOOM) {
  288. // Get two touches; new gap; rescale to ratio.
  289. const t1 = findTouch(e.touches, touchid)
  290. const t2 = findTouch(e.touches, touchid2)
  291. if (t1 == null || t2 == null) return
  292. const gap = touchGap(t1, t2)
  293. rescale(initScale * gap / initGap, centerPoint)
  294. e.preventDefault()
  295. }
  296. }
  297. function handleTouchEnd(e) {
  298. if (mode == TOUCHPAN) {
  299. const t = findTouch(e.changedTouches, touchid)
  300. if (t == null) return
  301. panMove(t.clientX, t.clientY)
  302. setMode(IDLE)
  303. e.preventDefault()
  304. if (!moved) clickHandler(t.target)
  305. } else if (mode == TOUCHZOOM) {
  306. setMode(IDLE)
  307. e.preventDefault()
  308. }
  309. }
  310. svg.addEventListener("mousedown", handleScanStart)
  311. svg.addEventListener("mouseup", handleScanEnd)
  312. svg.addEventListener("touchstart", handleTouchStart)
  313. svg.addEventListener("touchmove", handleTouchMove)
  314. svg.addEventListener("touchend", handleTouchEnd)
  315. svg.addEventListener("wheel", handleWheel, true)
  316. }
  317. function dotviewer(nodes) {
  318. 'use strict';
  319. // Elements
  320. const detailsButton = document.getElementById("details")
  321. const detailsText = document.getElementById("detailtext")
  322. const actionBox = document.getElementById("actionbox")
  323. const listButton = document.getElementById("list")
  324. const disasmButton = document.getElementById("disasm")
  325. const resetButton = document.getElementById("reset")
  326. const peekButton = document.getElementById("peek")
  327. const focusButton = document.getElementById("focus")
  328. const showButton = document.getElementById("show")
  329. const ignoreButton = document.getElementById("ignore")
  330. const hideButton = document.getElementById("hide")
  331. const search = document.getElementById("searchbox")
  332. const graph0 = document.getElementById("graph0")
  333. const svg = graph0.parentElement
  334. let regexpActive = false
  335. let selected = new Map()
  336. let origFill = new Map()
  337. let searchAlarm = null
  338. let buttonsEnabled = true
  339. function handleDetails() {
  340. if (detailtext.style.display == "block") {
  341. detailtext.style.display = "none"
  342. detailsButton.innerText = "\u25b7 Details"
  343. } else {
  344. detailtext.style.display = "block"
  345. detailsButton.innerText = "\u25bd Details"
  346. }
  347. }
  348. function handleReset() { window.location.href = "/" }
  349. function handleList() { navigate("/weblist", "f", true) }
  350. function handleDisasm() { navigate("/disasm", "f", true) }
  351. function handlePeek() { navigate("/peek", "f", true) }
  352. function handleFocus() { navigate("/", "f", false) }
  353. function handleShow() { navigate("/", "s", false) }
  354. function handleIgnore() { navigate("/", "i", false) }
  355. function handleHide() { navigate("/", "h", false) }
  356. function handleKey(e) {
  357. if (e.keyCode != 13) return
  358. handleFocus()
  359. e.preventDefault()
  360. }
  361. function handleSearch() {
  362. // Delay expensive processing so a flurry of key strokes is handled once.
  363. if (searchAlarm != null) {
  364. clearTimeout(searchAlarm)
  365. }
  366. searchAlarm = setTimeout(selectMatching, 300)
  367. regexpActive = true
  368. updateButtons()
  369. }
  370. function selectMatching() {
  371. searchAlarm = null
  372. let re = null
  373. if (search.value != "") {
  374. try {
  375. re = new RegExp(search.value)
  376. } catch (e) {
  377. // TODO: Display error state in search box
  378. return
  379. }
  380. }
  381. function match(text) {
  382. return re != null && re.test(text)
  383. }
  384. // drop currently selected items that do not match re.
  385. selected.forEach(function(v, n) {
  386. if (!match(nodes[n])) {
  387. unselect(n, document.getElementById("node" + n))
  388. }
  389. })
  390. // add matching items that are not currently selected.
  391. for (let n = 0; n < nodes.length; n++) {
  392. if (!selected.has(n) && match(nodes[n])) {
  393. select(n, document.getElementById("node" + n))
  394. }
  395. }
  396. updateButtons()
  397. }
  398. function toggleSelect(elem) {
  399. // Walk up to immediate child of graph0
  400. while (elem != null && elem.parentElement != graph0) {
  401. elem = elem.parentElement
  402. }
  403. if (!elem) return
  404. // Disable regexp mode.
  405. regexpActive = false
  406. const n = nodeId(elem)
  407. if (n < 0) return
  408. if (selected.has(n)) {
  409. unselect(n, elem)
  410. } else {
  411. select(n, elem)
  412. }
  413. updateButtons()
  414. }
  415. function unselect(n, elem) {
  416. if (elem == null) return
  417. selected.delete(n)
  418. setBackground(elem, false)
  419. }
  420. function select(n, elem) {
  421. if (elem == null) return
  422. selected.set(n, true)
  423. setBackground(elem, true)
  424. }
  425. function nodeId(elem) {
  426. const id = elem.id
  427. if (!id) return -1
  428. if (!id.startsWith("node")) return -1
  429. const n = parseInt(id.slice(4), 10)
  430. if (isNaN(n)) return -1
  431. if (n < 0 || n >= nodes.length) return -1
  432. return n
  433. }
  434. function setBackground(elem, set) {
  435. const p = findPolygon(elem)
  436. if (p != null) {
  437. if (set) {
  438. origFill.set(p, p.style.fill)
  439. p.style.fill = "#ccccff"
  440. } else if (origFill.has(p)) {
  441. p.style.fill = origFill.get(p)
  442. }
  443. }
  444. }
  445. function findPolygon(elem) {
  446. if (elem.localName == "polygon") return elem
  447. for (const c of elem.children) {
  448. const p = findPolygon(c)
  449. if (p != null) return p
  450. }
  451. return null
  452. }
  453. // Navigate to specified path with current selection reflected
  454. // in the named parameter.
  455. function navigate(path, param, newWindow) {
  456. // The selection can be in one of two modes: regexp-based or
  457. // list-based. Construct regular expression depending on mode.
  458. let re = regexpActive ? search.value : ""
  459. if (!regexpActive) {
  460. selected.forEach(function(v, key) {
  461. if (re != "") re += "|"
  462. re += nodes[key]
  463. })
  464. }
  465. const url = new URL(window.location.href)
  466. url.pathname = path
  467. url.hash = ""
  468. if (re != "") {
  469. // For focus/show, forget old parameter. For others, add to re.
  470. const params = url.searchParams
  471. if (param != "f" && param != "s" && params.has(param)) {
  472. const old = params.get(param)
  473. if (old != "") {
  474. re += "|" + old
  475. }
  476. }
  477. params.set(param, re)
  478. }
  479. if (newWindow) {
  480. window.open(url.toString(), "_blank")
  481. } else {
  482. window.location.href = url.toString()
  483. }
  484. }
  485. function updateButtons() {
  486. const enable = (search.value != "" || selected.size != 0)
  487. if (buttonsEnabled == enable) return
  488. buttonsEnabled = enable
  489. actionBox.style.display = enable ? "block" : "none"
  490. }
  491. // Initialize button states
  492. updateButtons()
  493. // Setup event handlers
  494. initPanAndZoom(svg, toggleSelect)
  495. function bindButtons(evt) {
  496. detailsButton.addEventListener(evt, handleDetails)
  497. resetButton.addEventListener(evt, handleReset)
  498. listButton.addEventListener(evt, handleList)
  499. disasmButton.addEventListener(evt, handleDisasm)
  500. peekButton.addEventListener(evt, handlePeek)
  501. focusButton.addEventListener(evt, handleFocus)
  502. showButton.addEventListener(evt, handleShow)
  503. ignoreButton.addEventListener(evt, handleIgnore)
  504. hideButton.addEventListener(evt, handleHide)
  505. }
  506. bindButtons("click")
  507. bindButtons("touchstart")
  508. search.addEventListener("input", handleSearch)
  509. search.addEventListener("keydown", handleKey)
  510. }
  511. dotviewer({{.Nodes}})
  512. </script>
  513. </body>
  514. </html>
  515. `))