1 |
|
2 |
|
3 |
|
4 |
|
5 | import {Overlay} from './common.js';
|
6 |
|
7 | export type PausedToolMessage = 'resume'|'stepOver';
|
8 |
|
9 | export class PausedOverlay extends Overlay {
|
10 | private container!: HTMLElement;
|
11 |
|
12 | constructor(window: Window, style: CSSStyleSheet[] = []) {
|
13 | super(window, style);
|
14 | this.onKeyDown = this.onKeyDown.bind(this);
|
15 | }
|
16 |
|
17 | onKeyDown(event: KeyboardEvent) {
|
18 | if (event.key === 'F8' || this.eventHasCtrlOrMeta(event) && event.key === '\\') {
|
19 | this.window.InspectorOverlayHost.send('resume');
|
20 | } else if (event.key === 'F10' || this.eventHasCtrlOrMeta(event) && event.key === '\'') {
|
21 | this.window.InspectorOverlayHost.send('stepOver');
|
22 | }
|
23 | }
|
24 |
|
25 | install() {
|
26 | const controlsLine = this.document.createElement('div');
|
27 | controlsLine.classList.add('controls-line');
|
28 |
|
29 | const messageBox = this.document.createElement('div');
|
30 | messageBox.classList.add('message-box');
|
31 | const pausedInDebugger = this.document.createElement('div');
|
32 | pausedInDebugger.id = 'paused-in-debugger';
|
33 | this.container = pausedInDebugger;
|
34 | messageBox.append(pausedInDebugger);
|
35 | controlsLine.append(messageBox);
|
36 |
|
37 | const resumeButton = this.document.createElement('div');
|
38 | resumeButton.id = 'resume-button';
|
39 | resumeButton.title = 'Resume script execution (F8).';
|
40 | resumeButton.classList.add('button');
|
41 | const glyph = this.document.createElement('div');
|
42 | glyph.classList.add('glyph');
|
43 | resumeButton.append(glyph);
|
44 | controlsLine.append(resumeButton);
|
45 |
|
46 | const stepOverButton = this.document.createElement('div');
|
47 | stepOverButton.id = 'step-over-button';
|
48 | stepOverButton.title = 'Step over next function call (F10).';
|
49 | stepOverButton.classList.add('button');
|
50 | const glyph2 = this.document.createElement('div');
|
51 | glyph2.classList.add('glyph');
|
52 | stepOverButton.append(glyph2);
|
53 | controlsLine.append(stepOverButton);
|
54 |
|
55 | this.document.body.append(controlsLine);
|
56 |
|
57 | this.document.addEventListener('keydown', this.onKeyDown);
|
58 |
|
59 | resumeButton.addEventListener('click', () => this.window.InspectorOverlayHost.send('resume'));
|
60 | stepOverButton.addEventListener('click', () => this.window.InspectorOverlayHost.send('stepOver'));
|
61 |
|
62 | super.install();
|
63 | }
|
64 |
|
65 | uninstall() {
|
66 | this.document.body.innerHTML = '';
|
67 | this.document.removeEventListener('keydown', this.onKeyDown);
|
68 | super.uninstall();
|
69 | }
|
70 |
|
71 | drawPausedInDebuggerMessage(message: string) {
|
72 | this.container.textContent = message;
|
73 | }
|
74 | }
|