perf-test.html 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. "http://www.w3.org/TR/html4/strict.dtd">
  3. <html lang="en">
  4. <head>
  5. <base href="..">
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <title>Ace Profile util</title>
  8. <link rel="stylesheet" href="demo/kitchen-sink/styles.css" type="text/css" media="screen" charset="utf-8">
  9. <link href="../doc/site/images/favicon.ico" rel="icon" type="image/x-icon">
  10. </head>
  11. <body>
  12. <div id="optionsPanel" style="position:absolute;height:100%;width:260px">
  13. <a href="http://ajaxorg.github.com/ace/" >
  14. <img id="logo" src="demo/kitchen-sink/logo.png">
  15. </a>
  16. <div style="position: absolute; overflow: hidden; top:80px; bottom:0">
  17. <div style="width: 120%; height:100%; overflow-y: scroll">
  18. <table id="controls">
  19. <tr>
  20. <td colspan="2">
  21. <label for="profile">profile</label>
  22. <input type="checkbox" checked id="profile"></input>
  23. <label for="timeout">delay</label>
  24. <input id="timeout" type="text" value="3" style="width:10em"></input>
  25. </td>
  26. </tr>
  27. <tr>
  28. <td colspan="2">
  29. <button onclick = "start(this.textContent)">scroll</button>
  30. <button onclick = "start(this.textContent)">select</button>
  31. <button onclick = "start(this.textContent)">type</button>
  32. <button onclick = "start(this.textContent)">selectH</button>
  33. </td>
  34. </tr>
  35. <tr>
  36. <td colspan="2">
  37. <button onclick = "start(this.textContent)">tokenize</button>
  38. </td>
  39. </tr>
  40. <tr>
  41. <td>
  42. <label for="doc">Document</label>
  43. </td><td>
  44. <select id="doc" size="1">
  45. </select>
  46. </td>
  47. </tr>
  48. <tr>
  49. <td >
  50. <label for="mode">Mode</label>
  51. </td><td>
  52. <select id="mode" size="1">
  53. </select>
  54. </td>
  55. </tr>
  56. <tr>
  57. <td>
  58. <label for="split">Split</label>
  59. </td><td>
  60. <select id="split" size="1">
  61. <option value="none">None</option>
  62. <option value="below">Below</option>
  63. <option value="beside">Beside</option>
  64. </select>
  65. </td>
  66. </tr>
  67. <tr>
  68. <td >
  69. <label for="theme">Theme</label>
  70. </td><td>
  71. <select id="theme" size="1">
  72. <optgroup label="Bright">
  73. <option value="ace/theme/chrome">Chrome</option>
  74. <option value="ace/theme/clouds">Clouds</option>
  75. <option value="ace/theme/crimson_editor">Crimson Editor</option>
  76. <option value="ace/theme/dawn">Dawn</option>
  77. <option value="ace/theme/dreamweaver">Dreamweaver</option>
  78. <option value="ace/theme/eclipse">Eclipse</option>
  79. <option value="ace/theme/github">GitHub</option>
  80. <option value="ace/theme/solarized_light">Solarized Light</option>
  81. <option value="ace/theme/textmate" selected="selected">TextMate</option>
  82. <option value="ace/theme/tomorrow">Tomorrow</option>
  83. <option value="ace/theme/xcode">XCode</option>
  84. </optgroup>
  85. <optgroup label="Dark">
  86. <option value="ace/theme/ambiance">Ambiance</option>
  87. <option value="ace/theme/chaos">Chaos</option>
  88. <option value="ace/theme/clouds_midnight">Clouds Midnight</option>
  89. <option value="ace/theme/cobalt">Cobalt</option>
  90. <option value="ace/theme/idle_fingers">idleFingers</option>
  91. <option value="ace/theme/kr_theme">krTheme</option>
  92. <option value="ace/theme/merbivore">Merbivore</option>
  93. <option value="ace/theme/merbivore_soft">Merbivore Soft</option>
  94. <option value="ace/theme/mono_industrial">Mono Industrial</option>
  95. <option value="ace/theme/monokai">Monokai</option>
  96. <option value="ace/theme/pastel_on_dark">Pastel on dark</option>
  97. <option value="ace/theme/solarized_dark">Solarized Dark</option>
  98. <option value="ace/theme/terminal">Terminal</option>
  99. <option value="ace/theme/tomorrow_night">Tomorrow Night</option>
  100. <option value="ace/theme/tomorrow_night_blue">Tomorrow Night Blue</option>
  101. <option value="ace/theme/tomorrow_night_bright">Tomorrow Night Bright</option>
  102. <option value="ace/theme/tomorrow_night_eighties">Tomorrow Night 80s</option>
  103. <option value="ace/theme/twilight">Twilight</option>
  104. <option value="ace/theme/vibrant_ink">Vibrant Ink</option>
  105. </optgroup>
  106. </select>
  107. </td>
  108. </tr>
  109. <tr>
  110. <td>
  111. <label for="fontsize">Font Size</label>
  112. </td><td>
  113. <select id="fontsize" size="1">
  114. <option value="10px">10px</option>
  115. <option value="11px">11px</option>
  116. <option value="12px" selected="selected">12px</option>
  117. <option value="13px">13px</option>
  118. <option value="14px">14px</option>
  119. <option value="16px">16px</option>
  120. <option value="18px">18px</option>
  121. <option value="20px">20px</option>
  122. <option value="24px">24px</option>
  123. </select>
  124. </td>
  125. </tr>
  126. <tr>
  127. <td>
  128. <label for="folding">Code Folding</label>
  129. </td><td>
  130. <select id="folding" size="1">
  131. <option value="manual">manual</option>
  132. <option value="markbegin" selected="selected">mark begin</option>
  133. <option value="markbeginend">mark begin and end</option>
  134. </select>
  135. </td>
  136. </tr>
  137. <tr>
  138. <td >
  139. <label for="keybinding">Key Binding</label>
  140. </td><td>
  141. <select id="keybinding" size="1">
  142. <option value="ace">Ace</option>
  143. <option value="vim">Vim</option>
  144. <option value="emacs">Emacs</option>
  145. <option value="custom">Custom</option>
  146. </select>
  147. </td>
  148. </tr>
  149. <tr>
  150. <td >
  151. <label for="soft_wrap">Soft Wrap</label>
  152. </td><td>
  153. <select id="soft_wrap" size="1">
  154. <option value="off">Off</option>
  155. <option value="40">40 Chars</option>
  156. <option value="80">80 Chars</option>
  157. <option value="free">Free</option>
  158. </select>
  159. </td>
  160. </tr>
  161. <tr><td colspan="2">
  162. <table id="more-controls">
  163. <tr>
  164. <td>
  165. <label for="select_style">Full Line Selection</label>
  166. </td><td>
  167. <input type="checkbox" name="select_style" id="select_style" checked>
  168. </td>
  169. </tr>
  170. <tr>
  171. <td>
  172. <label for="highlight_active">Highlight Active Line</label>
  173. </td><td>
  174. <input type="checkbox" name="highlight_active" id="highlight_active" checked>
  175. </td>
  176. </tr>
  177. <tr>
  178. <td >
  179. <label for="show_hidden">Show Invisibles</label>
  180. </td><td>
  181. <input type="checkbox" name="show_hidden" id="show_hidden" checked>
  182. </td>
  183. </tr>
  184. <tr>
  185. <td >
  186. <label for="display_indent_guides">Show Indent Guides</label>
  187. </td><td>
  188. <input type="checkbox" name="display_indent_guides" id="display_indent_guides" checked>
  189. </td>
  190. </tr>
  191. <tr>
  192. <td >
  193. <label for="show_hscroll">Persistent HScroll</label>
  194. </td><td>
  195. <input type="checkbox" name="show_hscroll" id="show_hscroll">
  196. </td>
  197. </tr>
  198. <tr>
  199. <td >
  200. <label for="animate_scroll">Animate scrolling</label>
  201. </td><td>
  202. <input type="checkbox" name="animate_scroll" id="animate_scroll">
  203. </td>
  204. </tr>
  205. <tr>
  206. <td >
  207. <label for="show_gutter">Show Gutter</label>
  208. </td><td>
  209. <input type="checkbox" id="show_gutter" checked>
  210. </td>
  211. </tr>
  212. <tr>
  213. <td >
  214. <label for="show_print_margin">Show Print Margin</label>
  215. </td><td>
  216. <input type="checkbox" id="show_print_margin" checked>
  217. </td>
  218. </tr>
  219. <tr>
  220. <td >
  221. <label for="soft_tab">Use Soft Tab</label>
  222. </td><td>
  223. <input type="checkbox" id="soft_tab" checked>
  224. </td>
  225. </tr>
  226. <tr>
  227. <td >
  228. <label for="highlight_selected_word">Highlight selected word</label>
  229. </td>
  230. <td>
  231. <input type="checkbox" id="highlight_selected_word" checked>
  232. </td>
  233. </tr>
  234. <tr>
  235. <td >
  236. <label for="enable_behaviours">Enable Behaviours</label>
  237. </td>
  238. <td>
  239. <input type="checkbox" id="enable_behaviours">
  240. </td>
  241. </tr>
  242. <tr>
  243. <td >
  244. <label for="fade_fold_widgets">Fade Fold Widgets</label>
  245. </td>
  246. <td>
  247. <input type="checkbox" id="fade_fold_widgets">
  248. </td>
  249. </tr>
  250. <tr>
  251. <td >
  252. <label for="elastic_tabstops">Enable Elastic Tabstops</label>
  253. </td>
  254. <td>
  255. <input type="checkbox" id="elastic_tabstops">
  256. </td>
  257. </tr>
  258. <tr>
  259. <td >
  260. <label for="isearch">Incremental Search</label>
  261. </td>
  262. <td>
  263. <input type="checkbox" id="isearch">
  264. </td>
  265. </tr>
  266. <tr>
  267. <td >
  268. <label for="highlight_token">Show token info</label>
  269. </td>
  270. <td>
  271. <input type="checkbox" id="highlight_token">
  272. </td>
  273. </tr>
  274. <tr>
  275. <td >
  276. <label for="read_only">Read-only</label>
  277. </td>
  278. <td>
  279. <input type="checkbox" id="read_only">
  280. </td>
  281. </tr>
  282. <tr>
  283. <td colspan="2">
  284. <input type="button" value="Edit Snippets", onclick="env.editSnippets()">
  285. </td>
  286. </tr>
  287. </table>
  288. </td></tr>
  289. </table>
  290. </div>
  291. </div>
  292. </div>
  293. <div id="editor-container"></div>
  294. <!--DEVEL-->
  295. <script type="text/javascript">
  296. var require = {
  297. baseUrl: window.location.protocol + "//" + window.location.host + window.location.pathname.split("/").slice(0, -1).join("/"),
  298. paths: {
  299. ace: "../lib/ace"
  300. }
  301. };
  302. </script>
  303. <script src="demo/kitchen-sink/require.js" data-main="../demo/kitchen-sink/demo" type="text/javascript"></script>
  304. <script>
  305. if (!Date.now) {
  306. Date.now = function() { return (new Date()).getTime() };
  307. }
  308. var scrollTop, startTime;
  309. var timeout, speed, next
  310. var editor, shouldProfile;
  311. function start(testName) {
  312. editor = env.editor
  313. timeout = parseInt(document.getElementById("timeout").value);
  314. shouldProfile = document.getElementById("profile").checked;
  315. startTime = Date.now()
  316. shouldProfile && console.profile()
  317. speed = 10;
  318. next = window[testName + "Next"];
  319. window[testName + "Start"] && window[testName + "Start"]()
  320. setTimeout(next, 1);
  321. }
  322. function end(){
  323. shouldProfile && console.profileEnd()
  324. var dt = startTime - Date.now()
  325. console.log(dt)
  326. ace.cmdLine.setValue(dt+"", 1)
  327. }
  328. /*editor.renderer.scrollToY(0);
  329. editor.navigateFileStart(0);
  330. */
  331. var scrollNext = function() {
  332. var r = editor.renderer
  333. for (var i = speed; i--; )
  334. r.scrollBy(0, 1)
  335. if (r.scrollTop + r.layerConfig.height > r.layerConfig.maxHeight - 20)
  336. end()
  337. else
  338. setTimeout(next, timeout, speed++)
  339. }
  340. var selectNext = function() {
  341. var r = editor.renderer
  342. for (var i = speed; i-- > 0; )
  343. editor.selection.selectDown()
  344. if (r.scrollTop + r.layerConfig.height > r.layerConfig.maxHeight - 20)
  345. end()
  346. else
  347. setTimeout(next, timeout, speed+=0.1)
  348. }
  349. var selectHNext = function() {
  350. var r = editor.renderer
  351. for (var i = speed; i-- > 0; )
  352. editor.selection.selectRight()
  353. if (r.scrollTop + r.layerConfig.height > r.layerConfig.maxHeight - 20)
  354. end()
  355. else
  356. setTimeout(next, timeout, speed+=0.1)
  357. }
  358. var typeChars = start.toString().split("")
  359. var typeNext = function() {
  360. var r = editor.renderer
  361. for (var i = speed; i--; )
  362. editor.insert(typeChars[i % typeChars.length])
  363. if (speed == 100)
  364. end()
  365. else
  366. setTimeout(next, timeout, speed++)
  367. }
  368. var tokenizer, state, lines, chunk
  369. var tokenizeStart = function() {
  370. var b = ace.session.bgTokenizer
  371. state = null
  372. tokenizer = b.tokenizer
  373. lines = b.doc.getAllLines()
  374. chunk = 1000
  375. }
  376. var tokenizeNext = function() {
  377. var states = []
  378. for (var i = 0, l = lines.length; i < l; i++) {
  379. state = tokenizer.getLineTokens(lines[i], state).state
  380. }
  381. states.push(state)
  382. if (speed-- > 3)
  383. setTimeout(next, timeout)
  384. else
  385. end()
  386. }
  387. </script>
  388. </body>
  389. </html>