[clangd] Added a colorizer to the vscode extension.

[jvikstrom]

Summary

Adds the main colorizer component. It colorizes every time clangd sends a publishSemanticHighlighting notification.
Every time it colorizes it does a full recolorization (removes all decorations from the editor and applies new ones). The reason for this is that all ranges for the same scope share a TextEditorDecorationType. This is due to TextEditorDecorationTypes being very expensive to create. The prototype used one DecorationType per range but that ran into very big performance problems (it took >100 ms to apply 600 lines of highlightings which froze the editor).

This version does not share the problem of being too slow, but there is probably potential to optimize it even more.

The Colorizer uses a FileColorizer interface to make it possible to mock out all the code that applies colorizations to a specific editor so that we can test it.

No document/texteditor lifecycle management code in this CL, that will come in the next one.

[hokein]

clang-tools-extra/clangd/clients/clangd-vscode/src/semantic-highlighting.ts

144 ↗

(On Diff #215112)

The generic T doesnt seem to be used?

Regarding the name, the word colorization is from vscode cpp-tools extension, I think in clangd we should keep using Hightlight for consistency, maybe use Highlighter?

145 ↗

(On Diff #215112)

could you add some documentation for these fields?

146 ↗

(On Diff #215112)

It seems that, all files are sharing with duplicated implementations in this patch, storing duplications is wasteful.

Maybe we could make the colorize method as a virtual method -- in the unittest, we create a subclass of Colorizer and override the colorize method.

164 ↗

(On Diff #215112)

we are patching the incremental diff to get a "global" highlighting for the whole file, but it maybe not correct -- clangd doesn't emit diff outside of the max line number of the file, if we delete a few lines at the end of the file, then we will keep the removed lines in the map.

I think this is a current limitation, could you check with the current behavior of vscode if we pass a out-of-range to the decoration API?

[jvikstrom]

Renamed colorizer to highlighter and added FIXME about highlightings below eof.

[hokein]

clang-tools-extra/clangd/clients/clangd-vscode/src/semantic-highlighting.ts

134 ↗

(On Diff #215886)

I'm not convinced that we need this interface.

With the current implementation (create new TextEditorDecorationTypes every time we do a re-highlighting), we'd need to save the old decorations in order to dispose them when applying new decorations.

but if we create the TextEditorDecorationTypes at Initialization and reuse them in re-highlighting, then we probably don't need to depose them manually, the vscode API seems do that for us, so I think we'd better to do that in this patch as it would simplify the current implementation.

So the APIs would looks like below. In unittest, we just override applyDecorations method.

class Highlighter {

public Initialize(themeRuleMatcher: ThemeRuleMatcher) {
   // build a scopeIndex => TextEditorDecorationTypes table
}

public highlight(fileUri: string, highlightings: SemanticHighlightingLine[]) {
   // update and patch the highlighting cache.
   // invoke getDecorations
   // invoke applyDecorations
}

protect applyDecorations(decorations...) {
   // invoke vscode API to apply the decorations.
}

private getDecorations(hightligtings...) {
}

176 ↗

(On Diff #215886)

I'd name it Initialize.

182 ↗

(On Diff #215886)

the name of this public API is confusing, the name indicates it just sets the data, but actually it does more stuff like doing the highlightings.

I think we may get rid of this function, by just exposing the highlight API. see my above comment.

199 ↗

(On Diff #215886)

could we name it fileUri? and elsewhere

217 ↗

(On Diff #215886)

nit: I think we can just do const lines: SemanticHighlightingLine[] = Array.from(this.files.get(uriString).values())?

219 ↗

(On Diff #215886)

nit: pull out this part into a new method e.g. getDecorations

[jvikstrom]

Rewrote the Highlighter class as we can override the highlighting method for the tests.

[jvikstrom]

I had completely forgotten we could just override the applyHighlightings method in the tests, everything is much simpler now.

Basically this entire CL was rewritten just now.

[jvikstrom]

Added missing protected and comment.

[hokein]

thanks, looks better now. Some more comments on the test code.

clang-tools-extra/clangd/clients/clangd-vscode/src/extension.ts

3 ↗

(On Diff #216624)

I'd name it semanticHighlighting

clang-tools-extra/clangd/clients/clangd-vscode/src/semantic-highlighting.ts

128 ↗

(On Diff #216624)

nit: mention the index is the scopeIndex?

135 ↗

(On Diff #216624)

nit: the comment is stale now. I believe this function is only called whenever we reload a theme or at the first launch of the extension.

137 ↗

(On Diff #216624)

if this.decorationsTypes is not empty (when this API is called multiple times), I think we need to call the dispose method to release the resource they hold.

139 ↗

(On Diff #216624)

just want to confirm: if we fail to find a matched theme rule, we return an empty decoration. I think vscode just doesn't do anything on an empty color?

157 ↗

(On Diff #216624)

nit: tokens => HighlightingLines.

190 ↗

(On Diff #216624)

nit: add a comment, we don't apply highlights when the class is not ready/initialized.

clang-tools-extra/clangd/clients/clangd-vscode/test/semantic-highlighting.test.ts

80 ↗

(On Diff #216624)

could you add a comment you override this so that it can be access from the test?

93 ↗

(On Diff #216624)

nit: please use a more descriptive name, e.g. HightlightsInLine.

94 ↗

(On Diff #216624)

I believe the test code is correct, but the code here/below is complex and hard to follow. I think we need make the code more readable/understandable.

some suggestions:

• the line number is implicitly indicated by the index of the array, I think we can add one more field line to the structure (call HighlightingTokens).
• and creates some helper functions (with proper names) that take the HighlightingTokens as parameter and generate the data you need e.g. SemanticHighlightingLine[], vscode.Range.

[jvikstrom]

Made tests more readable.

clang-tools-extra/clangd/clients/clangd-vscode/src/semantic-highlighting.ts

135 ↗

(On Diff #216624)

It's should only called when a theme is loaded (and we happen to load a theme when we initialize, but it's async).
Don't see why the comment is stale though, it seems to describe what it does to me.

139 ↗

(On Diff #216624)

vscode indeed does not do anything on empty colors.

clang-tools-extra/clangd/clients/clangd-vscode/test/semantic-highlighting.test.ts

94 ↗

(On Diff #216624)

Started exporting the SemanticHighlightingLine interface and use that format in the tests to not create more interfaces (also means we don't need a helper for creating the SemanticHighlightingLine).

[hokein]

thanks, looks great, looking forward to use it, just a few more nits.

Please update the patch description before committing.

clang-tools-extra/clangd/clients/clangd-vscode/src/semantic-highlighting.ts

135 ↗

(On Diff #216624)

IIRC, the comment here was move from setThemeRuleMatcher, but now it's named initialize, I'd expect the comment is more specific about *initialization* of the class -- when this method should be called, and what it does (in a high level).

139 ↗

(On Diff #216624)

could you add a comment for this?

58 ↗

(On Diff #217099)

nit: I think we can remove this field since it is not used in this class.

170 ↗

(On Diff #217099)

I think we should comment this method as normal methods.

171 ↗

(On Diff #217099)

nit: spell the return type.

clang-tools-extra/clangd/clients/clangd-vscode/test/semantic-highlighting.test.ts

84 ↗

(On Diff #217099)

nit: I'd inline the createRange here, since we only use it once.

105 ↗

(On Diff #217099)

nit: use some readable name, e.g. file1, file2?

108 ↗

(On Diff #217099)

nit: inline the rules here.

139 ↗

(On Diff #217099)

the array contains a single element, I'd use semanticHighlighting.SemanticHighlightingLine and name it HighlightingsInLine1

160 ↗

(On Diff #217099)

maybe just [HighlightingsInLine1, ...highlightingsInLine.slice(1)]?

clang-tools-extra/trunk/clangd/clients/clangd-vscode/src/extension.ts

 import * as vscode from 'vscode';
 import * as vscodelc from 'vscode-languageclient';
+import * as semanticHighlighting from './semantic-highlighting';
 
 /**
  * Method to get workspace configuration option
  * @param option name of the option (e.g. for clangd.path should be path)
  * @param defaultValue default value to return if option is not set
  */
 function getConfig<T>(option: string, defaultValue?: any): T {
   const config = vscode.workspace.getConfiguration('clangd');
const clientOptions: vscodelc.LanguageClientOptions = {
         },
         initializationOptions: { clangdFileStatus: true },
         // Do not switch to output window when clangd returns output
         revealOutputChannelOn: vscodelc.RevealOutputChannelOn.Never
     };
 
   const clangdClient = new ClangdLanguageClient('Clang Language Server',
                                                 serverOptions, clientOptions);
+  const semanticHighlightingFeature =
+      new semanticHighlighting.SemanticHighlightingFeature();
+  clangdClient.registerFeature(semanticHighlightingFeature);
+  // The notification handler must be registered after the client is ready or
+  // the client will crash.
+  clangdClient.onReady().then(
+      () => clangdClient.onNotification(
+          semanticHighlighting.NotificationType,
+          semanticHighlightingFeature.handleNotification.bind(
+              semanticHighlightingFeature)));
+
   console.log('Clang Language Server is now active!');
   context.subscriptions.push(clangdClient.start());
   context.subscriptions.push(vscode.commands.registerCommand(
       'clangd-vscode.switchheadersource', async () => {
         const uri =
             vscode.Uri.file(vscode.window.activeTextEditor.document.fileName);
         if (!uri) {
           return;

clang-tools-extra/trunk/clangd/clients/clangd-vscode/src/semantic-highlighting.ts

 interface SemanticHighlightingToken {
   // Start column for this token.
   character: number;
   // Length of the token.
   length: number;
   // The TextMate scope index to the clangd scope lookup table.
   scopeIndex: number;
 }
+// A line of decoded highlightings from the data clangd sent.
+export interface SemanticHighlightingLine {
+  // The zero-based line position in the text document.
+  line: number;
+  // All SemanticHighlightingTokens on the line.
+  tokens: SemanticHighlightingToken[];
+}
 
 // Language server push notification providing the semantic highlighting
 // information for a text document.
 export const NotificationType =
     new vscodelc.NotificationType<SemanticHighlightingParams, void>(
         'textDocument/semanticHighlighting');
 
 // The feature that should be registered in the vscode lsp for enabling
 // experimental semantic highlighting.
 export class SemanticHighlightingFeature implements vscodelc.StaticFeature {
   // The TextMate scope lookup table. A token with scope index i has the scopes
   // on index i in the lookup table.
   scopeLookupTable: string[][];
-  // The rules for the current theme.
-  themeRuleMatcher: ThemeRuleMatcher;
+  // The object that applies the highlightings clangd sends.
+  highlighter: Highlighter;
   fillClientCapabilities(capabilities: vscodelc.ClientCapabilities) {
     // Extend the ClientCapabilities type and add semantic highlighting
     // capability to the object.
     const textDocumentCapabilities: vscodelc.TextDocumentClientCapabilities&
         {semanticHighlightingCapabilities?: {semanticHighlighting : boolean}} =
         capabilities.textDocument;
     textDocumentCapabilities.semanticHighlightingCapabilities = {
       semanticHighlighting : true,
     };
   }
 
   async loadCurrentTheme() {
-    this.themeRuleMatcher = new ThemeRuleMatcher(
+    const themeRuleMatcher = new ThemeRuleMatcher(
         await loadTheme(vscode.workspace.getConfiguration('workbench')
                             .get<string>('colorTheme')));
+    this.highlighter.initialize(themeRuleMatcher);
   }
 
   initialize(capabilities: vscodelc.ServerCapabilities,
              documentSelector: vscodelc.DocumentSelector|undefined) {
     // The semantic highlighting capability information is in the capabilities
     // object but to access the data we must first extend the ServerCapabilities
     // type.
     const serverCapabilities: vscodelc.ServerCapabilities&
         {semanticHighlighting?: {scopes : string[][]}} = capabilities;
     if (!serverCapabilities.semanticHighlighting)
       return;
     this.scopeLookupTable = serverCapabilities.semanticHighlighting.scopes;
+    // Important that highlighter is created before the theme is loading as
+    // otherwise it could try to update the themeRuleMatcher without the
+    // highlighter being created.
+    this.highlighter = new Highlighter(this.scopeLookupTable);
     this.loadCurrentTheme();
   }
 
-  handleNotification(params: SemanticHighlightingParams) {}
+  handleNotification(params: SemanticHighlightingParams) {
+    const lines: SemanticHighlightingLine[] = params.lines.map(
+        (line) => ({line : line.line, tokens : decodeTokens(line.tokens)}));
+    this.highlighter.highlight(params.textDocument.uri, lines);
+  }
 }
 
 // Converts a string of base64 encoded tokens into the corresponding array of
 // HighlightingTokens.
 export function decodeTokens(tokens: string): SemanticHighlightingToken[] {
   const scopeMask = 0xFFFF;
   const lenShift = 0x10;
   const uint32Size = 4;
   const buf = Buffer.from(tokens, 'base64');
   const retTokens = [];
   for (let i = 0, end = buf.length / uint32Size; i < end; i += 2) {
     const start = buf.readUInt32BE(i * uint32Size);
     const lenKind = buf.readUInt32BE((i + 1) * uint32Size);
     const scopeIndex = lenKind & scopeMask;
     const len = lenKind >>> lenShift;
     retTokens.push({character : start, scopeIndex : scopeIndex, length : len});
   }
 
   return retTokens;
 }
 
+// The main class responsible for processing of highlightings that clangd
+// sends.
+export class Highlighter {
+  // Maps uris with currently open TextDocuments to the current highlightings.
+  private files: Map<string, Map<number, SemanticHighlightingLine>> = new Map();
+  // DecorationTypes for the current theme that are used when highlighting. A
+  // SemanticHighlightingToken with scopeIndex i should have the decoration at
+  // index i in this list.
+  private decorationTypes: vscode.TextEditorDecorationType[] = [];
+  // The clangd TextMate scope lookup table.
+  private scopeLookupTable: string[][];
+  constructor(scopeLookupTable: string[][]) {
+    this.scopeLookupTable = scopeLookupTable;
+  }
+  // This function must be called at least once or no highlightings will be
+  // done. Sets the theme that is used when highlighting. Also triggers a
+  // recolorization for all current highlighters. Should be called whenever the
+  // theme changes and has been loaded. Should also be called when the first
+  // theme is loaded.
+  public initialize(themeRuleMatcher: ThemeRuleMatcher) {
+    this.decorationTypes.forEach((t) => t.dispose());
+    this.decorationTypes = this.scopeLookupTable.map((scopes) => {
+      const options: vscode.DecorationRenderOptions = {
+        // If there exists no rule for this scope the matcher returns an empty
+        // color. That's ok because vscode does not do anything when applying
+        // empty decorations.
+        color : themeRuleMatcher.getBestThemeRule(scopes[0]).foreground,
+        // If the rangeBehavior is set to Open in any direction the
+        // highlighting becomes weird in certain cases.
+        rangeBehavior : vscode.DecorationRangeBehavior.ClosedClosed,
+      };
+      return vscode.window.createTextEditorDecorationType(options);
+    });
+    this.getVisibleTextEditorUris().forEach((fileUri) => {
+      // A TextEditor might not be a cpp file. So we must check we have
+      // highlightings for the file before applying them.
+      if (this.files.has(fileUri))
+        this.applyHighlights(fileUri);
+    })
+  }
+
+  // Adds incremental highlightings to the current highlightings for the file
+  // with fileUri. Also applies the highlightings to any associated
+  // TextEditor(s).
+  public highlight(fileUri: string,
+                   highlightingLines: SemanticHighlightingLine[]) {
+    if (!this.files.has(fileUri)) {
+      this.files.set(fileUri, new Map());
+    }
+    const fileHighlightings = this.files.get(fileUri);
+    highlightingLines.forEach((line) => fileHighlightings.set(line.line, line));
+    this.applyHighlights(fileUri);
+  }
+
+  // Gets the uris as strings for the currently visible text editors.
+  protected getVisibleTextEditorUris(): string[] {
+    return vscode.window.visibleTextEditors.map((e) =>
+                                                    e.document.uri.toString());
+  }
+
+  // Returns the ranges that should be used when decorating. Index i in the
+  // range array has the decoration type at index i of this.decorationTypes.
+  protected getDecorationRanges(fileUri: string): vscode.Range[][] {
+    const lines: SemanticHighlightingLine[] =
+        Array.from(this.files.get(fileUri).values());
+    const decorations: vscode.Range[][] = this.decorationTypes.map(() => []);
+    lines.forEach((line) => {
+      line.tokens.forEach((token) => {
+        decorations[token.scopeIndex].push(new vscode.Range(
+            new vscode.Position(line.line, token.character),
+            new vscode.Position(line.line, token.character + token.length)));
+      });
+    });
+    return decorations;
+  }
+
+  // Applies all the highlightings currently stored for a file with fileUri.
+  protected applyHighlights(fileUri: string) {
+    if (!this.decorationTypes.length)
+      // Can't apply any decorations when there is no theme loaded.
+      return;
+    // This must always do a full re-highlighting due to the fact that
+    // TextEditorDecorationType are very expensive to create (which makes
+    // incremental updates infeasible). For this reason one
+    // TextEditorDecorationType is used per scope.
+    const ranges = this.getDecorationRanges(fileUri);
+    vscode.window.visibleTextEditors.forEach((e) => {
+      if (e.document.uri.toString() !== fileUri)
+        return;
+      this.decorationTypes.forEach((d, i) => e.setDecorations(d, ranges[i]));
+    });
+  }
+}
+
 // A rule for how to color TextMate scopes.
 interface TokenColorRule {
   // A TextMate scope that specifies the context of the token, e.g.
   // "entity.name.function.cpp".
   scope: string;
   // foreground is the color tokens of this scope should have.
   foreground: string;
 }

clang-tools-extra/trunk/clangd/clients/clangd-vscode/test/semantic-highlighting.test.ts

 import * as assert from 'assert';
 import * as path from 'path';
+import * as vscode from 'vscode';
 
-import * as SM from '../src/semantic-highlighting';
+import * as semanticHighlighting from '../src/semantic-highlighting';
 
 suite('SemanticHighlighting Tests', () => {
   test('Parses arrays of textmate themes.', async () => {
     const themePath =
         path.join(__dirname, '../../test/assets/includeTheme.jsonc');
-    const scopeColorRules = await SM.parseThemeFile(themePath);
+    const scopeColorRules =
+        await semanticHighlighting.parseThemeFile(themePath);
     const getScopeRule = (scope: string) =>
         scopeColorRules.find((v) => v.scope === scope);
     assert.equal(scopeColorRules.length, 3);
     assert.deepEqual(getScopeRule('a'), {scope : 'a', foreground : '#fff'});
     assert.deepEqual(getScopeRule('b'), {scope : 'b', foreground : '#000'});
     assert.deepEqual(getScopeRule('c'), {scope : 'c', foreground : '#bcd'});
   });
   test('Decodes tokens correctly', () => {
     const testCases: string[] = [
       'AAAAAAABAAA=', 'AAAAAAADAAkAAAAEAAEAAA==',
       'AAAAAAADAAkAAAAEAAEAAAAAAAoAAQAA'
     ];
     const expected = [
       [ {character : 0, scopeIndex : 0, length : 1} ],
       [
         {character : 0, scopeIndex : 9, length : 3},
         {character : 4, scopeIndex : 0, length : 1}
       ],
       [
         {character : 0, scopeIndex : 9, length : 3},
         {character : 4, scopeIndex : 0, length : 1},
         {character : 10, scopeIndex : 0, length : 1}
       ]
     ];
-    testCases.forEach((testCase, i) => assert.deepEqual(
-                          SM.decodeTokens(testCase), expected[i]));
+    testCases.forEach(
+        (testCase, i) => assert.deepEqual(
+            semanticHighlighting.decodeTokens(testCase), expected[i]));
   });
   test('ScopeRules overrides for more specific themes', () => {
     const rules = [
       {scope : 'variable.other.css', foreground : '1'},
       {scope : 'variable.other', foreground : '2'},
       {scope : 'storage', foreground : '3'},
       {scope : 'storage.static', foreground : '4'},
       {scope : 'storage', foreground : '5'},
       {scope : 'variable.other.parameter', foreground : '6'},
     ];
-    const tm = new SM.ThemeRuleMatcher(rules);
+    const tm = new semanticHighlighting.ThemeRuleMatcher(rules);
     assert.deepEqual(tm.getBestThemeRule('variable.other.cpp').scope,
                      'variable.other');
     assert.deepEqual(tm.getBestThemeRule('storage.static').scope,
                      'storage.static');
     assert.deepEqual(
         tm.getBestThemeRule('storage'),
         rules[2]); // Match the first element if there are duplicates.
     assert.deepEqual(tm.getBestThemeRule('variable.other.parameter').scope,
                      'variable.other.parameter');
     assert.deepEqual(tm.getBestThemeRule('variable.other.parameter.cpp').scope,
                      'variable.other.parameter');
   });
+  test('Colorizer groups decorations correctly', async () => {
+    const scopeTable = [
+      [ 'variable' ], [ 'entity.type.function' ],
+      [ 'entity.type.function.method' ]
+    ];
+    // Create the scope source ranges the highlightings should be highlighted
+    // at. Assumes the scopes used are the ones in the "scopeTable" variable.
+    const createHighlightingScopeRanges =
+        (highlightingLines:
+             semanticHighlighting.SemanticHighlightingLine[]) => {
+          // Initialize the scope ranges list to the correct size. Otherwise
+          // scopes that don't have any highlightings are missed.
+          let scopeRanges: vscode.Range[][] = scopeTable.map(() => []);
+          highlightingLines.forEach((line) => {
+            line.tokens.forEach((token) => {
+              scopeRanges[token.scopeIndex].push(new vscode.Range(
+                  new vscode.Position(line.line, token.character),
+                  new vscode.Position(line.line,
+                                      token.character + token.length)));
+            });
+          });
+          return scopeRanges;
+        };
+
+    class MockHighlighter extends semanticHighlighting.Highlighter {
+      applicationUriHistory: string[] = [];
+      // Override to make the highlighting calls accessible to the test. Also
+      // makes the test not depend on visible text editors.
+      applyHighlights(fileUri: string) {
+        this.applicationUriHistory.push(fileUri);
+      }
+      // Override to make it accessible from the test.
+      getDecorationRanges(fileUri: string) {
+        return super.getDecorationRanges(fileUri);
+      }
+      // Override to make tests not depend on visible text editors.
+      getVisibleTextEditorUris() { return [ 'file1', 'file2' ]; }
+    }
+    const highlighter = new MockHighlighter(scopeTable);
+    const tm = new semanticHighlighting.ThemeRuleMatcher([
+      {scope : 'variable', foreground : '1'},
+      {scope : 'entity.type', foreground : '2'},
+    ]);
+    // Recolorizes when initialized.
+    highlighter.highlight('file1', []);
+    assert.deepEqual(highlighter.applicationUriHistory, [ 'file1' ]);
+    highlighter.initialize(tm);
+    assert.deepEqual(highlighter.applicationUriHistory, [ 'file1', 'file1' ]);
+    // Groups decorations into the scopes used.
+    let highlightingsInLine: semanticHighlighting.SemanticHighlightingLine[] = [
+      {
+        line : 1,
+        tokens : [
+          {character : 1, length : 2, scopeIndex : 1},
+          {character : 10, length : 2, scopeIndex : 2},
+        ]
+      },
+      {
+        line : 2,
+        tokens : [
+          {character : 3, length : 2, scopeIndex : 1},
+          {character : 6, length : 2, scopeIndex : 1},
+          {character : 8, length : 2, scopeIndex : 2},
+        ]
+      },
+    ];
+
+    highlighter.highlight('file1', highlightingsInLine);
+    assert.deepEqual(highlighter.applicationUriHistory,
+                     [ 'file1', 'file1', 'file1' ]);
+    assert.deepEqual(highlighter.getDecorationRanges('file1'),
+                     createHighlightingScopeRanges(highlightingsInLine));
+    // Keeps state separate between files.
+    const highlightingsInLine1:
+        semanticHighlighting.SemanticHighlightingLine = {
+      line : 1,
+      tokens : [
+        {character : 2, length : 1, scopeIndex : 0},
+      ]
+    };
+    highlighter.highlight('file2', [ highlightingsInLine1 ]);
+    assert.deepEqual(highlighter.applicationUriHistory,
+                     [ 'file1', 'file1', 'file1', 'file2' ]);
+    assert.deepEqual(highlighter.getDecorationRanges('file2'),
+                     createHighlightingScopeRanges([ highlightingsInLine1 ]));
+    // Does full colorizations.
+    highlighter.highlight('file1', [ highlightingsInLine1 ]);
+    assert.deepEqual(highlighter.applicationUriHistory,
+                     [ 'file1', 'file1', 'file1', 'file2', 'file1' ]);
+    // After the incremental update to line 1, the old highlightings at line 1
+    // will no longer exist in the array.
+    assert.deepEqual(
+        highlighter.getDecorationRanges('file1'),
+        createHighlightingScopeRanges(
+            [ highlightingsInLine1, ...highlightingsInLine.slice(1) ]));
+  });
 });