Improve Display of Log Point Suggestions (#103)

- The icon for recommended/enabled operator log points is displayed at the very beginning of the line of the respective operator. This icon knows three states:
   - Log point recommended (gray outline)
   - Log point enabled (filled red)
   - Some log points enabled (filled gray; in case of multiple log points on one line, but not all of them enabled)
- Try out: The log point indicator icon resembles a miniature version of Archie
- Managing operator log points still works via the hover message of the actual operator

Author: swissmanu

.vscode/settings.json

@@ -5,5 +5,7 @@
   },
   // Turn off tsc task auto detection since we have the necessary tasks as npm scripts
   "typescript.tsc.autoDetect": "off",
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "typescript.tsdk": "node_modules/typescript/lib",
+
+  "jest.disabledWorkspaceFolders": ["packages/extension-integrationtest"]
 }

CONTRIBUTING.md

@@ -11,7 +11,7 @@ Before you submit a pull request, please discuss potential changes with the main
 To get started with development, follow these four steps:
 
 1. Clone the repo and run `yarn` to install all dependencies.
-2. Open the repo in Visual Studio Code.
+2. Open `workspace.code-workspace` with Visual Studio Code.
 3. Run the "extension: Build and Watch" task, which will continuously (re-)build the extension.
 4. Run the "Testbench: NodeJS" launch configuration to open a new Visual Studio Code window, which:
    - loads the RxJS debugging extension in development mode, so you can use the debugger in the original Visual Studio Code window.

packages/extension-integrationtest/src/extension.test.ts

@@ -1,4 +1,9 @@
-import { Commands, executeCommand, TestCommands } from 'rxjs-debugging-for-vs-code/out/integrationTest';
+import {
+  Commands,
+  executeCommand,
+  TestCommands,
+  OperatorLogPoint,
+} from 'rxjs-debugging-for-vs-code/out/integrationTest';
 import * as vscode from 'vscode';
 import openAndShowTextDocument from './util/openAndShowTextDocument';
 import waitForExtension from './util/waitForExtension';
@@ -9,12 +14,21 @@ describe('RxJS Debugging for vscode', () => {
     await waitForExtension();
 
     // Enable Operator Log Point for the first operator, take.
-    await executeCommand(vscode.commands, Commands.EnableOperatorLogPoint, document.uri, new vscode.Position(5, 4), {
-      fileName: document.uri.fsPath,
-      line: 5,
-      character: 25,
-      operatorIndex: 0,
-    });
+    await executeCommand(
+      vscode.commands,
+      Commands.EnableOperatorLogPoint,
+      new OperatorLogPoint(
+        document.uri,
+        new vscode.Position(5, 4),
+        {
+          fileName: document.uri.fsPath,
+          line: 5,
+          character: 25,
+          operatorIndex: 0,
+        },
+        'take'
+      )
+    );
 
     const debuggingDone = new Promise<void>((resolve) => {
       vscode.debug.onDidTerminateDebugSession(() => resolve());

packages/extension/package.json

@@ -25,15 +25,15 @@
     "commands": [
       {
         "category": "RxJS",
-        "command": "rxjs-debugging-for-vs-code.command.toggleOperatorLogPointRecommendations",
-        "title": "%rxjs-debugging.command.toggleOperatorLogPointRecommendations%"
+        "command": "rxjs-debugging-for-vs-code.command.toggleOperatorLogPointGutterIcon",
+        "title": "%rxjs-debugging.command.toggleOperatorLogPointGutterIcon%"
       }
     ],
     "configuration": {
       "title": "%rxjs-debugging.config.title%",
       "properties": {
-        "debug.rxjs.showOperatorLogPointRecommendations": {
-          "description": "%rxjs-debugging.config.showOperatorLogPointRecommendations%",
+        "debug.rxjs.recommendOperatorLogPointsWithAnIcon": {
+          "description": "%rxjs-debugging.config.recommendOperatorLogPointsWithAnIcon%",
           "type": "boolean",
           "default": true
         },
@@ -97,9 +97,9 @@
     "@types/webpack": "5.28.0",
     "@types/ws": "8.2.0",
     "jest": "27.3.1",
+    "rollup": "2.59.0",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-terser": "7.0.2",
-    "rollup": "2.59.0",
     "ts-jest": "27.0.7",
     "tslib": "2.3.1",
     "typescript": "4.4.4",
@@ -111,6 +111,7 @@
     "@rxjs-debugging/telemetry": "0.0.0",
     "inversify": "5.1.1",
     "reflect-metadata": "0.1.13",
+    "spicery": "2.1.2",
     "typescript": "4.4.4",
     "vscode-nls": "5.0.0",
     "ws": "8.2.3"

packages/extension/package.nls.json

@@ -1,7 +1,8 @@
 {
   "rxjs-debugging.config.title": "RxJS Debugging",
   "rxjs-debugging.config.hideLiveLogWhenStoppingDebugger": "When enabled, live log values are hidden automatically after stopping the debugger.",
-  "rxjs-debugging.config.showOperatorLogPointRecommendations": "When enabled, recommended operator log points will be shown automatically. Hint: You can toggle this setting using the related command in the command palette as well.",
+  "rxjs-debugging.config.recommendOperatorLogPointsWithAnIcon": "When enabled, recommended operator log points will be indicated using an icon at the beginning of the line. Hint: You can toggle this setting using the related command in the command palette as well.",
   "rxjs-debugging.config.logLevel": "Internal log level for the extension. (reload required)",
-  "rxjs-debugging.command.toggleOperatorLogPointRecommendations": "Toggle Display of Operator Log Point Recommendations"
+
+  "rxjs-debugging.command.toggleOperatorLogPointGutterIcon": "Toggle gutter icon for recommended operator log points"
 }

packages/extension/resources/rxjs-operator-log-point-all-enabled.svg

@@ -69,25 +69,31 @@ export class Disposable {
 
 export class Uri implements UriType {
   static parse(value: string, strict?: boolean): Uri {
-    return new Uri('', '', '', '', '');
+    return new Uri('', '', value, '', '');
   }
 
   static file(path: string): Uri {
-    return new Uri('', '', '', '', '');
+    return new Uri('', '', path, '', '');
   }
 
   static joinPath(base: Uri, ...pathSegments: string[]): Uri {
     return new Uri('', '', '', '', '');
   }
 
-  static from(components: {
+  static from({
+    scheme,
+    authority = '',
+    path = '',
+    query = '',
+    fragment = '',
+  }: {
     scheme: string;
     authority?: string;
     path?: string;
     query?: string;
     fragment?: string;
   }): Uri {
-    return new Uri('', '', '', '', '');
+    return new Uri(scheme, authority, path, query, fragment);
   }
 
   private constructor(
@@ -100,15 +106,39 @@ export class Uri implements UriType {
 
   readonly fsPath: string = '';
 
-  with(change: { scheme?: string; authority?: string; path?: string; query?: string; fragment?: string }): Uri {
-    return this;
+  with({
+    scheme,
+    authority,
+    path,
+    query,
+    fragment,
+  }: {
+    scheme?: string;
+    authority?: string;
+    path?: string;
+    query?: string;
+    fragment?: string;
+  }): Uri {
+    return new Uri(
+      scheme || this.scheme,
+      authority || this.authority,
+      path || this.path,
+      query || this.query,
+      fragment || this.fragment
+    );
   }
 
   toString(skipEncoding?: boolean): string {
     return '';
   }
 
   toJSON(): any {
-    return {};
+    return {
+      scheme: this.scheme,
+      authority: this.authority,
+      path: this.path,
+      query: this.query,
+      fragment: this.fragment,
+    };
   }
 }

packages/extension/resources/rxjs-operator-log-point-disabled.svg

@@ -1,14 +1,13 @@
-import { IOperatorIdentifier } from '@rxjs-debugging/telemetry/out/operatorIdentifier';
-import { Position, Uri } from 'vscode';
+import OperatorLogPoint from '../operatorLogPoint';
 
 export const enum Commands {
   EnableOperatorLogPoint = 'rxjs-debugging-for-vs-code.command.enableOperatorLogPoint',
   DisableOperatorLogPoint = 'rxjs-debugging-for-vs-code.command.disableOperatorLogPoint',
-  ToggleOperatorLogPointRecommendations = 'rxjs-debugging-for-vs-code.command.toggleOperatorLogPointRecommendations',
+  ToggleOperatorLogPointGutterIcon = 'rxjs-debugging-for-vs-code.command.toggleOperatorLogPointGutterIcon',
 }
 
 export interface ICommandTypes {
-  [Commands.EnableOperatorLogPoint]: (uri: Uri, position: Position, operatorIdentifier: IOperatorIdentifier) => void;
-  [Commands.DisableOperatorLogPoint]: (uri: Uri, position: Position, operatorIdentifier: IOperatorIdentifier) => void;
-  [Commands.ToggleOperatorLogPointRecommendations]: () => void;
+  [Commands.EnableOperatorLogPoint]: (operatorLogPoint: OperatorLogPoint | string) => void;
+  [Commands.DisableOperatorLogPoint]: (operatorLogPoint: OperatorLogPoint | string) => void;
+  [Commands.ToggleOperatorLogPointGutterIcon]: () => void;
 }

packages/extension/resources/rxjs-operator-log-point-some-enabled.svg

@@ -2,7 +2,8 @@ import { ICommandTypes } from './commands';
 
 export default function getMarkdownCommandWithArgs<K extends keyof ICommandTypes>(
   key: K,
-  args: Parameters<ICommandTypes[K]>
+  args: Parameters<ICommandTypes[K]>,
+  serialize: (args: Parameters<ICommandTypes[K]>) => [string] = (args) => [JSON.stringify(args)]
 ): string {
-  return `command:${key}?${encodeURIComponent(JSON.stringify(args))}`;
+  return `command:${key}?${encodeURIComponent(JSON.stringify(serialize(args)))}`;
 }