From c4f51b9de99a9e719fc7cfd4fe08d077768d0379 Mon Sep 17 00:00:00 2001
From: Connor Peet <connor@peet.io>
Date: Tue, 31 Oct 2023 17:12:32 -0700
Subject: [PATCH] fix: path diff display in diagnostic tool

Fixes https://github.com/microsoft/vscode/issues/195891
---
 CHANGELOG.md                            |  1 +
 src/diagnosticTool/breakpointHelper.tsx | 15 +++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8683f698b..ca9a1c5e2 100644
--- 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
index f1e7d062f..b97c63428 100644
--- 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>
 );