diff options
Diffstat (limited to 'site')
| -rw-r--r-- | site/inspector.mjs | 98 |
1 files changed, 52 insertions, 46 deletions
diff --git a/site/inspector.mjs b/site/inspector.mjs index 7de1039..b2efb1c 100644 --- a/site/inspector.mjs +++ b/site/inspector.mjs @@ -33,18 +33,25 @@ export default class extends HTMLElement { self.customElements.define(this.name, this); } + #highRange = new Range(); + #highlight = new Highlight(this.#highRange); + #srcSelect; + #compileButton; + #wordlist; + #stack; + #callstack; + #vars; + #src; + constructor() { super(); - this.highRange = new Range(); - this.highlight = new Highlight(this.highRange); - CSS.highlights.set('exec', this.highlight); - console.debug('bjc class var?', this.constructor.name, this.__proto__.name, Object.getPrototypeOf(this)) + CSS.highlights.set('exec', this.#highlight); } connectedCallback() { self.foo = this; console.debug('connectedCallback()', this); - [this.srcSelect, this.compileButton, this.wordlist, this.stack, this.callstack, this.vars, this.src] = [ + [this.#srcSelect, this.#compileButton, this.#wordlist, this.#stack, this.#callstack, this.#vars, this.#src] = [ SRC_SELECT_SELECTOR, COMPILE_BUTTON_SELECTOR, WORDLIST_SELECTOR, @@ -54,24 +61,35 @@ export default class extends HTMLElement { SRC_SELECTOR, ].map(this.querySelector.bind(this)); - this.compileButton.onclick = e => { + this.#compileButton.onclick = e => { console.debug('compile clicked', e); // always add a newline until i decide what to do with the parser. - const text = this.src.textContent + '\n'; + const text = this.#src.textContent + '\n'; const compileEvent = new CustomEvent(this.constructor.compileRequest, { detail: { text } }); this.dispatchEvent(compileEvent); } - this.srcSelect.onchange = _ => this.loadForth(this.srcSelect.value); - this.loadForth(this.srcSelect.value); + this.#srcSelect.onchange = _ => this.#loadForth(this.#srcSelect.value); + this.#loadForth(this.#srcSelect.value); } attributeChangedCallback(name, old, v) { console.debug('attributeChangedCallback', this, name, old, v); } - loadForth(taintedPath) { + render(robo, fresh=false) { + if (fresh) { + this.#renderWordlist(robo); + } + this.#renderTextHighlight(robo); + this.#renderWordlistHighlight(robo); + this.#renderVars(robo); + this.#renderStack(robo); + this.#renderCallstack(robo); + } + + #loadForth(taintedPath) { console.debug('loadForth', this, taintedPath); // ascii only + ‘-’, ‘_’, ‘.’, and ‘/’, but no ‘../’ const path = @@ -86,91 +104,79 @@ export default class extends HTMLElement { return resp.text() }) .then(text => { - this.src.textContent = text; + this.#src.textContent = text; }) .catch(e => { console.error(`couldn't fetch ‘${path}’`, e); }); } - render(robo, fresh=false) { - if (fresh) { - this.renderWordlist(robo); - } - this.renderTextHighlight(robo); - this.renderWordlistHighlight(robo); - this.renderVars(robo); - this.renderStack(robo); - this.renderCallstack(robo); - } - - renderWordlist(vm) { - while (this.wordlist.lastChild) { - console.debug('removing child', this.wordlist.lastChild) - this.wordlist.removeChild(this.wordlist.lastChild); + #renderWordlist(vm) { + while (this.#wordlist.lastChild) { + console.debug('removing child', this.#wordlist.lastChild) + this.#wordlist.removeChild(this.#wordlist.lastChild); } const wordlist = wordlistElts(vm.wordlist); - wordlist.forEach(elt => this.wordlist.appendChild(elt)); + wordlist.forEach(elt => this.#wordlist.appendChild(elt)); } - renderTextHighlight(vm) { + #renderTextHighlight(vm) { const { word, offset } = vm.ip; const anno = vm.annos[word][offset]; - const src = document.querySelector(SRC_SELECTOR); // this assumes the text node is the first child, maybe it isn't? - this.highRange.setStart(src.childNodes[0], anno.start); - this.highRange.setEnd(src.childNodes[0], anno.end); + this.#highRange.setStart(this.#src.childNodes[0], anno.start); + this.#highRange.setEnd(this.#src.childNodes[0], anno.end); } - renderWordlistHighlight(vm) { + #renderWordlistHighlight(vm) { const { word, offset } = vm.ip; - this.querySelectorAll(IP_SELECTOR).forEach(e => e.classList.remove('ip')); + this.#wordlist.querySelectorAll(IP_SELECTOR).forEach(e => e.classList.remove('ip')); const sel = selectorForIP(word, offset); this.querySelectorAll(sel).forEach(e => { e.classList.add('ip'); }); } - renderVars(vm) { - while (this.vars.lastChild) { - this.vars.removeChild(this.vars.lastChild); + #renderVars(vm) { + while (this.#vars.lastChild) { + this.#vars.removeChild(this.#vars.lastChild); } ['out', 'heading', 'speed', 'doppler'].forEach(name => { const dt = document.createElement('dt'); dt.textContent = name; - this.vars.appendChild(dt); + this.#vars.appendChild(dt); const dd = document.createElement('dd'); dd.textContent = vm.vars[name]; - this.vars.appendChild(dd); + this.#vars.appendChild(dd); }); } - renderStack(vm) { - while (this.stack.lastChild) { - this.stack.removeChild(this.stack.lastChild); + #renderStack(vm) { + while (this.#stack.lastChild) { + this.#stack.removeChild(this.#stack.lastChild); } vm.stack.reverse() .forEach(datum => { const elt = document.createElement('li'); elt.textContent = datum; - this.stack.appendChild(elt); + this.#stack.appendChild(elt); return elt; }); } - renderCallstack(vm) { - while (this.callstack.lastChild) { - this.callstack.removeChild(this.callstack.lastChild); + #renderCallstack(vm) { + while (this.#callstack.lastChild) { + this.#callstack.removeChild(this.#callstack.lastChild); } vm.callstack.reverse() .forEach(datum => { const elt = document.createElement('li'); elt.textContent = `${datum.word}@${datum.offset}`; - this.callstack.appendChild(elt); + this.#callstack.appendChild(elt); return elt; }); } |