Minor code review of static filtering parser

Rename `l` property to `len`, to avoid ambiguity as `l` could mean _left_ or _length_. Typically `l` is to be used for _left_ (whereas `r` is to be used for _right_). Additionally, add CodeMirror's bracket-matching and bracket auto-closing to _My filters_ pane and and bracket-matching to asset viewer page.
gorhill · Jun 14, 2020 · 6d8b310 · 6d8b310
1 parent 2523959
commit 6d8b310
Show file tree

Hide file tree

Showing 9 changed files with 555 additions and 161 deletions.
diff --git a/src/1p-filters.html b/src/1p-filters.html
@@ -38,6 +38,8 @@
 
 <script src="lib/codemirror/lib/codemirror.js"></script>
 <script src="lib/codemirror/addon/display/panel.js"></script>
+<script src="lib/codemirror/addon/edit/closebrackets.js"></script>
+<script src="lib/codemirror/addon/edit/matchbrackets.js"></script>
 <script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
 <script src="lib/codemirror/addon/search/matchesonscrollbar.js"></script>
 <script src="lib/codemirror/addon/search/searchcursor.js"></script>

diff --git a/src/asset-viewer.html b/src/asset-viewer.html
@@ -30,6 +30,7 @@
 
 <script src="lib/codemirror/lib/codemirror.js"></script>
 <script src="lib/codemirror/addon/display/panel.js"></script>
+<script src="lib/codemirror/addon/edit/matchbrackets.js"></script>
 <script src="lib/codemirror/addon/scroll/annotatescrollbar.js"></script>
 <script src="lib/codemirror/addon/search/matchesonscrollbar.js"></script>
 <script src="lib/codemirror/addon/search/searchcursor.js"></script>

diff --git a/src/css/codemirror.css b/src/css/codemirror.css
@@ -48,6 +48,14 @@
 .cm-staticnetAllow { color: #004f00; }
 .cm-staticOpt { background-color: #ddd; font-weight: bold; }
 
+div.CodeMirror span.CodeMirror-matchingbracket {
+    color: unset;
+    }
+.CodeMirror-matchingbracket {
+    color: inherit !important;
+    font-weight: bold;
+    }
+
 .cm-search-widget {
     align-items: center;
     background-color: var(--bg-code);

diff --git a/src/js/1p-filters.js b/src/js/1p-filters.js
@@ -29,15 +29,15 @@
 
 /******************************************************************************/
 
-const cmEditor = new CodeMirror(
-    document.getElementById('userFilters'),
-    {
-        autofocus: true,
-        lineNumbers: true,
-        lineWrapping: true,
-        styleActiveLine: true,
-    }
-);
+const cmEditor = new CodeMirror(document.getElementById('userFilters'), {
+    autoCloseBrackets: true,
+    autofocus: true,
+    lineNumbers: true,
+    lineWrapping: true,
+    matchBrackets: true,
+    maxScanLines: 1,
+    styleActiveLine: true,
+});
 
 uBlockDashboard.patchCodeMirrorEditor(cmEditor);
 

diff --git a/src/js/asset-viewer.js b/src/js/asset-viewer.js
@@ -30,16 +30,15 @@
     const assetKey = params.get('url');
     if ( assetKey === null ) { return; }
 
-    const cmEditor = new CodeMirror(
-        document.getElementById('content'),
-        {
-            autofocus: true,
-            lineNumbers: true,
-            lineWrapping: true,
-            readOnly: true,
-            styleActiveLine: true,
-        }
-    );
+    const cmEditor = new CodeMirror(document.getElementById('content'), {
+        autofocus: true,
+        lineNumbers: true,
+        lineWrapping: true,
+        matchBrackets: true,
+        maxScanLines: 1,
+        readOnly: true,
+        styleActiveLine: true,
+    });
 
     uBlockDashboard.patchCodeMirrorEditor(cmEditor);
 

diff --git a/src/js/codemirror/ubo-static-filtering.js b/src/js/codemirror/ubo-static-filtering.js
@@ -29,6 +29,48 @@ CodeMirror.defineMode("ubo-static-filtering", function() {
     let parserSlot = 0;
     let netOptionValueMode = false;
 
+    const colorExtHTMLPatternSpan = function(stream) {
+        const { i } = parser.patternSpan;
+        if ( stream.pos === parser.slices[i+1] ) {
+            stream.pos += 1;
+            return 'def';
+        }
+        stream.skipToEnd();
+        return 'variable';
+    };
+
+    const colorExtScriptletPatternSpan = function(stream) {
+        const { i, len } = parser.patternSpan;
+        if ( stream.pos === parser.slices[i+1] ) {
+            stream.pos += 4;
+            return 'def';
+        }
+        if ( len > 3 ) {
+            const r = parser.slices[i+len+1] - 1;
+            if ( stream.pos < r ) {
+                stream.pos = r;
+                return 'variable';
+            }
+            if ( stream.pos === r ) {
+                stream.pos += 1;
+                return 'def';
+            }
+        }
+        stream.skipToEnd();
+        return 'variable';
+    };
+
+    const colorExtPatternSpan = function(stream) {
+        if ( (parser.flavorBits & parser.BITFlavorExtScriptlet) !== 0 ) {
+            return colorExtScriptletPatternSpan(stream);
+        }
+        if ( (parser.flavorBits & parser.BITFlavorExtHTML) !== 0 ) {
+            return colorExtHTMLPatternSpan(stream);
+        }
+        stream.skipToEnd();
+        return 'variable';
+    };
+
     const colorExtSpan = function(stream) {
         if ( parserSlot < parser.optionsAnchorSpan.i ) {
             const style = (parser.slices[parserSlot] & parser.BITComma) === 0
@@ -49,73 +91,74 @@ CodeMirror.defineMode("ubo-static-filtering", function() {
             parserSlot += 3;
             return `${style} strong`;
         }
-        if ( parserSlot >= parser.patternSpan.i ) {
-            stream.skipToEnd();
-            return 'variable';
+        if (
+            parserSlot >= parser.patternSpan.i &&
+            parserSlot < parser.rightSpaceSpan.i
+        ) {
+            return colorExtPatternSpan(stream);
         }
         stream.skipToEnd();
-        return '';
+        return null;
     };
 
     const colorNetSpan = function(stream) {
         if ( parserSlot < parser.exceptionSpan.i ) {
             stream.pos += parser.slices[parserSlot+2];
             parserSlot += 3;
-            return '';
+            return null;
         }
         if (
             parserSlot === parser.exceptionSpan.i &&
-            parser.exceptionSpan.l !== 0
+            parser.exceptionSpan.len !== 0
         ) {
             stream.pos += parser.slices[parserSlot+2];
             parserSlot += 3;
             return 'tag strong';
         }
         if (
             parserSlot === parser.patternLeftAnchorSpan.i &&
-            parser.patternLeftAnchorSpan.l !== 0 ||
+            parser.patternLeftAnchorSpan.len !== 0 ||
             parserSlot === parser.patternRightAnchorSpan.i &&
-            parser.patternRightAnchorSpan.l !== 0
+            parser.patternRightAnchorSpan.len !== 0
         ) {
             stream.pos += parser.slices[parserSlot+2];
             parserSlot += 3;
             return 'keyword strong';
         }
         if (
             parserSlot >= parser.patternSpan.i &&
-            parserSlot < parser.patternRightAnchorSpan.i
+            parserSlot < parser.optionsAnchorSpan.i
         ) {
-            const isRegex = parser.patternIsRegex();
-            if (
-                (isRegex === false) &&
-                (parser.slices[parserSlot] & (parser.BITAsterisk | parser.BITCaret)) !== 0
-            ) {
+            if ( parser.patternIsRegex() ) {
+                stream.pos = parser.slices[parser.optionsAnchorSpan.i+1];
+                parserSlot += parser.optionsAnchorSpan.i;
+                return 'variable regex';
+            }
+            if ( (parser.slices[parserSlot] & (parser.BITAsterisk | parser.BITCaret)) !== 0 ) {
                 stream.pos += parser.slices[parserSlot+2];
                 parserSlot += 3;
                 return 'keyword strong';
             }
-            let style = 'variable';
-            if ( isRegex ) { style += ' regex'; }
             const nextSlot = parser.skipUntil(
-                parserSlot,
+                parserSlot + 3,
                 parser.patternRightAnchorSpan.i,
                 parser.BITAsterisk | parser.BITCaret
             );
             stream.pos = parser.slices[nextSlot+1];
             parserSlot = nextSlot;
-            return style;
+            return 'variable';
         }
         if (
             parserSlot === parser.optionsAnchorSpan.i &&
-            parser.optionsAnchorSpan.l !== 0
+            parserSlot < parser.optionsSpan.i !== 0
         ) {
             stream.pos += parser.slices[parserSlot+2];
             parserSlot += 3;
             return 'def strong';
         }
         if (
             parserSlot >= parser.optionsSpan.i &&
-            parser.optionsSpan.l !== 0
+            parserSlot < parser.rightSpaceSpan.i
         ) {
             const bits = parser.slices[parserSlot];
             let style;
@@ -137,13 +180,13 @@ CodeMirror.defineMode("ubo-static-filtering", function() {
         }
         if (
             parserSlot >= parser.commentSpan.i &&
-            parser.commentSpan.l !== 0
+            parser.commentSpan.len !== 0
         ) {
             stream.skipToEnd();
             return 'comment';
         }
         stream.skipToEnd();
-        return '';
+        return null;
     };
 
     const colorSpan = function(stream) {
@@ -185,7 +228,7 @@ CodeMirror.defineMode("ubo-static-filtering", function() {
                 parserSlot = 0;
                 netOptionValueMode = false;
             }
-            let style = colorSpan(stream);
+            let style = colorSpan(stream) || '';
             if ( (parser.flavorBits & parser.BITFlavorError) !== 0 ) {
                 style += ' line-background-error';
             }