fix: path diff display in diagnostic tool

Fixes microsoft/vscode#195891
microsoft · Nov 1, 2023 · c4f51b9 · c4f51b9
1 parent ca624e1
commit c4f51b9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -6,6 +6,7 @@ This changelog records changes to stable releases since 1.50.2. "TBA" changes he
 
 - fix: reuse the webassembly worker across sessions in the debug tree ([#1830](https://github.com/microsoft/vscode-js-debug/issues/1830))
 - fix: respect sourceMapResolveLocations in the web extension host ([vscode#196781](https://github.com/microsoft/vscode/issues/196781))
+- fix: path diff display in diagnostic tool ([vscode#195891](https://github.com/microsoft/vscode/issues/195891))
 
 ## v1.84 (October 2023)
 

diff --git a/src/diagnosticTool/breakpointHelper.tsx b/src/diagnosticTool/breakpointHelper.tsx
@@ -2,7 +2,7 @@
  * Copyright (C) Microsoft Corporation. All rights reserved.
  *--------------------------------------------------------*/
 
-import { diffChars } from 'diff';
+import { diffArrays } from 'diff';
 import { Fragment, FunctionComponent, h } from 'preact';
 import { useState } from 'preact/hooks';
 import {
@@ -217,11 +217,14 @@ const TextDiff: FunctionComponent<{ original: string; updated: string }> = ({
   updated,
 }) => (
   <span className="text-diff">
-    {diffChars(original, updated, { ignoreCase: true }).map((diff, i) => (
-      <span className={diff.added ? 'add' : diff.removed ? 'rm' : ''} key={i}>
-        {diff.value}
-      </span>
-    ))}
+    {diffArrays(original.split(/[/\\]/g), updated.split(/[/\\]/g), { ignoreCase: true }).map(
+      (diff, i) => (
+        <span className={diff.added ? 'add' : diff.removed ? 'rm' : ''} key={i}>
+          {i > 0 ? '/' : ''}
+          {diff.value.join('/')}
+        </span>
+      ),
+    )}
   </span>
 );