Add ability to fold/unfold in devtools page

gorhill · Dec 14, 2021 · 01f87e9 · 01f87e9
1 parent 7a780e4
commit 01f87e9
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 1 deletion.
diff --git a/src/devtools.html b/src/devtools.html
@@ -23,6 +23,8 @@
 <div class="body">
  <p>
  <button id="console-clear" class="iconifiable" type="button"><span class="fa-icon">trash-o</span></button>
+ <button id="console-fold" class="iconifiable" type="button"><span class="fa-icon">double-angle-up</span></button>
+ <button id="console-unfold" class="iconifiable" type="button"><span class="fa-icon fa-icon-vflipped">double-angle-up</span></button>
  <button id="snfe-dump" type="button">SNFE: Dump</button>
  <button id="snfe-benchmark" type="button" disabled>SNFE: Benchmark</button>
  <button id="cfe-dump" type="button">CFE: Dump</button>

diff --git a/src/js/devtools.js b/src/js/devtools.js
@@ -25,6 +25,10 @@
 
 /******************************************************************************/
 
+const reFoldable = /^ *(?=\+ \S)/;
+
+/******************************************************************************/
+
 CodeMirror.registerGlobalHelper(
  'fold',
  'ubo-dump',
@@ -34,7 +38,7 @@ CodeMirror.registerGlobalHelper(
  const startLine = cm.getLine(startLineNo);
  let endLineNo = startLineNo;
  let endLine = startLine;
- const match = /^ *(?=\+ \S)/.exec(startLine);
+ const match = reFoldable.exec(startLine);
  if ( match === null ) { return; }
  const foldCandidate = ' ' + match[0];
  const lastLineNo = cm.lastLine();
@@ -83,6 +87,50 @@ uDom.nodeFromId('console-clear').addEventListener('click', ( ) => {
  cmEditor.setValue('');
 });
 
+uDom.nodeFromId('console-fold').addEventListener('click', ( ) => {
+ const unfolded = [];
+ let maxUnfolded = -1;
+ cmEditor.eachLine(handle => {
+ const match = reFoldable.exec(handle.text);
+ if ( match === null ) { return; }
+ const depth = match[0].length;
+ const line = handle.lineNo();
+ const isFolded = cmEditor.isFolded({ line, ch: handle.text.length });
+ if ( isFolded === true ) { return; }
+ unfolded.push({ line, depth });
+ maxUnfolded = Math.max(maxUnfolded, depth);
+ });
+ if ( maxUnfolded === -1 ) { return; }
+ cmEditor.startOperation();
+ for ( const details of unfolded ) {
+ if ( details.depth !== maxUnfolded ) { continue; }
+ cmEditor.foldCode(details.line, null, 'fold');
+ }
+ cmEditor.endOperation();
+});
+
+uDom.nodeFromId('console-unfold').addEventListener('click', ( ) => {
+ const folded = [];
+ let minFolded = Number.MAX_SAFE_INTEGER;
+ cmEditor.eachLine(handle => {
+ const match = reFoldable.exec(handle.text);
+ if ( match === null ) { return; }
+ const depth = match[0].length;
+ const line = handle.lineNo();
+ const isFolded = cmEditor.isFolded({ line, ch: handle.text.length });
+ if ( isFolded !== true ) { return; }
+ folded.push({ line, depth });
+ minFolded = Math.min(minFolded, depth);
+ });
+ if ( minFolded === Number.MAX_SAFE_INTEGER ) { return; }
+ cmEditor.startOperation();
+ for ( const details of folded ) {
+ if ( details.depth !== minFolded ) { continue; }
+ cmEditor.foldCode(details.line, null, 'unfold');
+ }
+ cmEditor.endOperation();
+});
+
 uDom.nodeFromId('snfe-dump').addEventListener('click', ev => {
  const button = ev.target;
  button.setAttribute('disabled', '');