runtime/Debugger.js · elk · git.iko.soy

git.iko.soy/elk

on b0e5075 help sign in

elk/runtime/Debugger.js

568 lines 16 kB history raw

1(function() {

2'use strict';

4if (!window.location.origin) {

5 window.location.origin =

6 window.location.protocol + "//" +

7 window.location.hostname +

8 (window.location.port ? (':' + window.location.port) : '');

9}

11Elm.Debugger = null;

12Elm.debuggerAttach = function(module, hotSwapState /* =undefined */) {

13 return {

14 make: function(runtime) {

15 var wrappedModule = debugModule(module, runtime);

16 Elm.Debugger = debuggerInit(wrappedModule, runtime, hotSwapState);

17 dispatchElmDebuggerInit();

18 return wrappedModule.debuggedModule;

19 }

20 };

21};

23var EVENTS_PER_SAVE = 100;

24var eventCounter = 0;

26function dispatchElmDebuggerInit() {

27 if (parent.window) {

28 var dispatch = function() {

29 parent.window.postMessage("elmDebuggerInit", window.location.origin);

30 };

31 if (parent.window.document.readyState === "complete") {

32 dispatch();

33 }

34 else {

35 parent.window.addEventListener("load", dispatch);

36 }

37 }

40function debugModule(module, runtime) {

41 var programPaused = false;

42 var recordedEvents = [];

43 var asyncCallbacks = [];

44 var snapshots = [];

45 var watchTracker = Elm.Native.Debug.make(runtime).watchTracker;

46 var pauseTime = 0;

47 var eventsUntilSnapshot = EVENTS_PER_SAVE;

49 // runtime is the prototype of wrappedRuntime

50 // so we can access all runtime properties too

51 var wrappedRuntime = Object.create(runtime);

52 wrappedRuntime.notify = wrapNotify;

53 wrappedRuntime.runDelayed = wrapRunDelayed;

55 // make a copy of the wrappedRuntime

56 var assignedPropTracker = Object.create(wrappedRuntime);

57 var debuggedModule = module.make(assignedPropTracker);

59 // make sure the signal graph is actually a signal & extract the visual model

60 if ( !('recv' in debuggedModule.main) ) {

61 debuggedModule.main = Elm.Signal.make(runtime).constant(debuggedModule.main);

62 }

64 // The main module stores imported modules onto the runtime.

65 // To ensure only one instance of each module is created,

66 // we assign them back on the original runtime object.

67 Object.keys(assignedPropTracker).forEach(function(key) {

68 runtime[key] = assignedPropTracker[key];

69 });

71 var signalGraphNodes = flattenSignalGraph(wrappedRuntime.inputs);

72 var tracePath = tracePathInit(runtime, debuggedModule.main);

74 snapshots.push(snapshotSignalGraph(signalGraphNodes));

76 function wrapNotify(id, v) {

77 var timestep = runtime.timer.now();

79 if (programPaused) {

80 // ignore async events generated while playing back

81 // or user events while program is paused

82 return false;

83 }

84 else {

85 recordEvent(id, v, timestep);

86 var changed = runtime.notify(id, v, timestep);

87 if (eventsUntilSnapshot === 1) {

88 saveSnapshot();

89 eventsUntilSnapshot = EVENTS_PER_SAVE;

90 } else {

91 eventsUntilSnapshot -= 1;

92 }

93 if (parent.window) {

94 parent.window.postMessage("elmNotify", window.location.origin);

95 }

96 return changed;

97 }

98 };

100 function wrapRunDelayed(func, delayMs) {

101 if (programPaused) {

102 // Don't push timers and such to the callback stack while we're paused.

103 // It causes too many callbacks to be fired during unpausing.

104 return 0;

105 }

106 var cbObj = { func:func, delayMs:delayMs, timerId:0, executed:false };

107 var timerId = setTimeout(function() {

108 cbObj.executed = true;

109 func();

110 }, delayMs);

111 cbObj.timerId = timerId;

112 asyncCallbacks.push(cbObj);

113 return timerId;

114 }

116 function recordEvent(id, v, timestep) {

117 watchTracker.pushFrame();

118 recordedEvents.push({ id:id, value:v, timestep:timestep });

119 eventCounter += 1;

120 }

122 function clearAsyncCallbacks() {

123 asyncCallbacks.forEach(function(timer) {

124 if (!timer.executed) {

125 clearTimeout(timer.timerId);

126 }

127 });

128 }

130 function clearRecordedEvents() {

131 recordedEvents = [];

132 eventCounter = 0;

133 }

135 function getRecordedEventsLength() {

136 return recordedEvents.length;

137 }

139 function getRecordedEventAt(i) {

140 return recordedEvents[i];

141 }

143 function copyRecordedEvents() {

144 return recordedEvents.slice();

145 }

147 function loadRecordedEvents(events) {

148 recordedEvents = events.slice();

149 }

151 function clearSnapshots() {

152 snapshots = [snapshotSignalGraph(signalGraphNodes)];

153 }

155 function getSnapshotAt(i) {

156 var snapshotEvent = Math.floor(i / EVENTS_PER_SAVE);

157 assert(snapshotEvent < snapshots.length && snapshotEvent >= 0,

158 "Out of bounds index: " + snapshotEvent);

159 return snapshots[snapshotEvent];

160 }

162 function saveSnapshot() {

163 snapshots.push(snapshotSignalGraph(signalGraphNodes));

164 }

166 function setPaused() {

167 programPaused = true;

168 clearAsyncCallbacks();

169 tracePath.stopRecording();

170 pauseTime = Date.now();

171 }

173 function setContinue(position) {

174 var timerDelay = Date.now() - pauseTime;

175 runtime.timer.addDelay(timerDelay);

176 programPaused = false;

177 if (position > 0) {

178 // If we're not unpausing at the head, then we need to dump the

179 // events that are ahead of where we're continuing.

180 var lastSnapshotPosition = Math.ceil(position / EVENTS_PER_SAVE);

181 eventsUntilSnapshot = EVENTS_PER_SAVE - (position % EVENTS_PER_SAVE);

182 snapshots = snapshots.slice(0, lastSnapshotPosition);

183 recordedEvents = recordedEvents.slice(0, position);

184 tracePath.clearTracesAfter(position);

185 eventCounter = position;

186 executeCallbacks(asyncCallbacks, false);

187 }

188 tracePath.startRecording();

189 }

191 function getPaused() {

192 return programPaused;

193 }

195 return {

196 debuggedModule: debuggedModule,

197 signalGraphNodes: signalGraphNodes,

198 initialSnapshot: snapshotSignalGraph(signalGraphNodes),

199 initialAsyncCallbacks: asyncCallbacks.slice(),

200 // API functions

201 clearAsyncCallbacks: clearAsyncCallbacks,

202 clearRecordedEvents: clearRecordedEvents,

203 getRecordedEventsLength: getRecordedEventsLength,

204 getRecordedEventAt: getRecordedEventAt,

205 copyRecordedEvents: copyRecordedEvents,

206 loadRecordedEvents: loadRecordedEvents,

207 clearSnapshots: clearSnapshots,

208 getSnapshotAt: getSnapshotAt,

209 saveSnapshot: saveSnapshot,

210 getPaused: getPaused,

211 setPaused: setPaused,

212 setContinue: setContinue,

213 tracePath: tracePath,

214 watchTracker: watchTracker

215 };

218function debuggerInit(debugModule, runtime, hotSwapState /* =undefined */) {

219 var currentEventIndex = 0;

221 function resetProgram(position) {

222 var closestSnapshot = debugModule.getSnapshotAt(position);

223 debugModule.clearAsyncCallbacks();

224 restoreSnapshot(debugModule.signalGraphNodes, closestSnapshot);

225 redrawGraphics();

226 }

228 function restartProgram() {

229 resetProgram(0);

230 debugModule.watchTracker.clear();

231 debugModule.tracePath.clearTraces();

232 debugModule.clearRecordedEvents();

233 debugModule.clearSnapshots();

234 debugModule.setContinue(0);

235 executeCallbacks(debugModule.initialAsyncCallbacks, true);

236 }

238 function pauseProgram() {

239 debugModule.setPaused();

240 currentEventIndex = debugModule.getRecordedEventsLength();

241 }

243 function continueProgram() {

244 if (debugModule.getPaused())

245 {

246 if (currentEventIndex === 0) {

247 restartProgram();

248 return;

249 }

250 var closestSnapshotIndex =

251 Math.floor(currentEventIndex / EVENTS_PER_SAVE) * EVENTS_PER_SAVE;

252 resetProgram(currentEventIndex);

253 var continueIndex = currentEventIndex;

254 currentEventIndex = closestSnapshotIndex;

255 stepTo(continueIndex);

256 debugModule.setContinue(currentEventIndex);

257 }

258 }

260 function stepTo(index) {

261 if (!debugModule.getPaused()) {

262 debugModule.setPaused();

263 resetProgram();

264 }

266 if (index < 0 || index > getMaxSteps()) {

267 throw "Index out of bounds: " + index;

268 }

270 if (index < currentEventIndex) {

271 var closestSnapshotIndex = Math.floor(index / EVENTS_PER_SAVE) * EVENTS_PER_SAVE;

272 resetProgram(index);

273 currentEventIndex = closestSnapshotIndex;

274 }

276 while (currentEventIndex < index) {

277 var nextEvent = debugModule.getRecordedEventAt(currentEventIndex);

278 runtime.notify(nextEvent.id, nextEvent.value, nextEvent.timestep);

280 currentEventIndex += 1;

281 }

282 }

284 function getMaxSteps() {

285 return debugModule.getRecordedEventsLength();

286 }

288 function redrawGraphics() {

289 var main = debugModule.debuggedModule.main

290 for (var i = main.kids.length ; i-- ; ) {

291 main.kids[i].recv(runtime.timer.now(), true, main.id);

292 }

293 }

295 function getHotSwapState() {

296 var continueIndex = currentEventIndex;

297 if (!debugModule.getPaused()) {

298 continueIndex = getMaxSteps();

299 }

300 return {

301 recordedEvents: debugModule.copyRecordedEvents(),

302 currentEventIndex: continueIndex

303 };

304 }

306 function dispose() {

307 var parentNode = runtime.node.parentNode;

308 parentNode.removeChild(debugModule.tracePath.canvas);

309 parentNode.removeChild(runtime.node);

310 }

312 if (hotSwapState) {

313 // The problem is that we want to previous paused state. But

314 // by the time JS reaches here, the old code has been swapped out

315 // and the new modules are being generated. So we can ask the

316 // debugging console what it thinks the pause state is and go

317 // from there.

318 var paused = top.debug.paused;

319 debugModule.setPaused();

320 debugModule.loadRecordedEvents(hotSwapState.recordedEvents);

321 var index = getMaxSteps();

322 var eventsUntilSnapshot = EVENTS_PER_SAVE;

323 eventCounter = 0;

324 debugModule.tracePath.clearTraces();

326 // draw new trace path

327 debugModule.tracePath.startRecording();

328 while(currentEventIndex < index) {

329 var nextEvent = debugModule.getRecordedEventAt(currentEventIndex);

330 eventCounter += 1;

331 runtime.notify(nextEvent.id, nextEvent.value, nextEvent.timestep);

332 if (eventsUntilSnapshot === 1) {

333 debugModule.saveSnapshot();

334 eventsUntilSnapshot = EVENTS_PER_SAVE;

335 } else {

336 eventsUntilSnapshot -= 1;

337 }

338 currentEventIndex += 1;

339 }

340 debugModule.tracePath.stopRecording();

342 stepTo(hotSwapState.currentEventIndex);

343 if (!paused) {

344 debugModule.setContinue(hotSwapState.currentEventIndex);

345 }

346 }

348 runtime.node.parentNode.appendChild(debugModule.tracePath.canvas);

350 var elmDebugger = {

351 restart: restartProgram,

352 pause: pauseProgram,

353 kontinue: continueProgram,

354 getMaxSteps: getMaxSteps,

355 stepTo: stepTo,

356 getPaused: debugModule.getPaused,

357 getHotSwapState: getHotSwapState,

358 dispose: dispose,

359 allNodes: debugModule.signalGraphNodes,

360 watchTracker: debugModule.watchTracker

361 };

363 return elmDebugger;

366function Point(x, y) {

367 this.x = x;

368 this.y = y;

370 this.translate = function(x, y) {

371 return new Point(this.x + x, this.y + y);

372 }

374 this.equals = function(p) {

375 return this.x == p.x && this.y == p.y;

376 }

379function tracePathInit(runtime, signalGraphMain) {

380 var List = Elm.List.make(runtime);

381 var Signal = Elm.Signal.make(runtime);

382 var tracePathNode = A2(Signal.lift, graphicsUpdate, signalGraphMain);

383 var tracePathCanvas = createCanvas();

384 var tracePositions = {};

385 var recordingTraces = true;

387 function findPositions(currentScene) {

388 var positions = {};

389 function processElement(elem, offset) {

390 if (elem.element.ctor == "Custom" && elem.element.type == "Collage")

391 {

392 List.map(F2(processForm)(offset))(elem.element.model.forms);

393 }

394 if (elem.props.debugTracePathId)

395 {

396 positions[elem.props.debugTracePathId] = new Point(offset.x, offset.y);

397 }

398 }

400 function processForm(offset, form) {

401 if (form.form.ctor == "FElement")

402 {

403 processElement(form.form._0, offset.translate(form.x, -form.y));

404 }

405 }

407 processElement(currentScene, new Point(0, 0));

408 return positions;

409 }

411 function appendPositions(positions) {

412 for (var id in positions) {

413 var pos = positions[id];

414 if (tracePositions.hasOwnProperty(id)) {

415 tracePositions[id].push(pos);

416 }

417 else {

418 tracePositions[id] = [pos];

419 }

420 if (tracePositions[id].length < eventCounter) {

421 var padCount = eventCounter - tracePositions[id].length;

422 var lastTracePosition = tracePositions[id][tracePositions[id].length - 1];

423 for (var i = padCount; i--;) {

424 tracePositions[id].push(lastTracePosition)

425 }

426 }

427 assert(tracePositions[id].length === eventCounter,

428 "We don't have a 1-1 mapping of trace positions to events");

429 }

430 }

432 function graphicsUpdate(currentScene) {

433 if (!recordingTraces) {

434 return;

435 }

437 var ctx = tracePathCanvas.getContext('2d');

438 ctx.clearRect(0, 0, tracePathCanvas.width, tracePathCanvas.height);

440 ctx.save();

441 ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);

442 appendPositions(findPositions(currentScene));

443 for (var id in tracePositions)

444 {

445 ctx.beginPath();

446 var points = tracePositions[id];

447 for (var i=0; i < points.length; i++)

448 {

449 var p = points[i];

450 if (i == 0) {

451 ctx.moveTo(p.x, p.y);

452 }

453 else {

454 ctx.lineTo(p.x, p.y);

455 }

456 }

457 ctx.lineWidth = 1;

458 ctx.strokeStyle = "rgba(50, 50, 50, 0.4)";

459 ctx.stroke();

461 for (var i=0; i < points.length; i++)

462 {

463 var p = points[i];

464 ctx.beginPath();

465 ctx.arc(p.x, p.y, 2, 0, Math.PI * 2);

466 ctx.fillStyle = "rgba(50, 50, 50, 0.4)";

467 ctx.fill();

468 }

469 }

471 ctx.restore();

472 }

474 function clearTraces() {

475 tracePositions = {};

476 }

478 function stopRecording() {

479 recordingTraces = false;

480 }

482 function startRecording() {

483 recordingTraces = true;

484 }

486 function clearTracesAfter(position) {

487 var newTraces = {};

488 for (var id in tracePositions) {

489 newTraces[id] = tracePositions[id].slice(0,position);

490 }

491 tracePositions = newTraces;

492 }

494 return {

495 graphicsUpdate: graphicsUpdate,

496 canvas: tracePathCanvas,

497 clearTraces: clearTraces,

498 clearTracesAfter: clearTracesAfter,

499 stopRecording: stopRecording,

500 startRecording: startRecording

501 }

504function executeCallbacks(callbacks, reexecute) {

505 callbacks.forEach(function(timer) {

506 if (reexecute || !timer.executed) {

507 var func = timer.func;

508 timer.executed = true;

509 func();

510 }

511 });

514function createCanvas() {

515 var c = document.createElement('canvas');

516 c.width = window.innerWidth;

517 c.height = window.innerHeight;

518 c.style.position = "absolute";

519 c.style.top = "0";

520 c.style.left = "0";

521 c.style.pointerEvents = "none";

522 return c;

525function assert(bool, msg) {

526 if (!bool) {

527 throw "Assertion error: " + msg;

528 }

531function snapshotSignalGraph(signalGraphNodes) {

532 var nodeValues = [];

534 signalGraphNodes.forEach(function(node) {

535 nodeValues.push({ value: node.value, id: node.id });

536 });

538 return nodeValues;

541function restoreSnapshot(signalGraphNodes, snapshot) {

542 assert(signalGraphNodes.length == snapshot.length,

543 "saved program state has wrong length");

544 for (var i=0; i < signalGraphNodes.length; i++) {

545 var node = signalGraphNodes[i];

546 var state = snapshot[i];

547 assert(node.id == state.id, "the nodes moved position");

549 node.value = state.value;

550 }

553function flattenSignalGraph(nodes) {

554 var nodesById = {};

556 function addAllToDict(node) {

557 nodesById[node.id] = node;

558 node.kids.forEach(addAllToDict);

559 }

560 nodes.forEach(addAllToDict);

562 var allNodes = Object.keys(nodesById).sort().map(function(key) {

563 return nodesById[key];

564 });

565 return allNodes;

568}());