From 35016d58b06ca6d51bae4c13f797db07870b0a33 Mon Sep 17 00:00:00 2001
From: Patrick Pircher <patricklx@users.noreply.github.com>
Date: Thu, 31 Aug 2023 16:00:26 +0200
Subject: [PATCH] add line break opportunity around /
 https://www.fileformat.info/info/unicode/char/200b/index.htm

use word-wrap instead of break-word
---
 ember_debug/libs/view-inspection.js  |  4 ++--
 tests/ember_debug/view-debug-test.js | 28 ++++++++++++++++++++++++----
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/ember_debug/libs/view-inspection.js b/ember_debug/libs/view-inspection.js
index ae065e429b..a0afc12618 100644
--- a/ember_debug/libs/view-inspection.js
+++ b/ember_debug/libs/view-inspection.js
@@ -161,7 +161,7 @@ function makeStylesheet(id) {
       color: #000;
       background: transparent;
       max-width: 400px;
-      word-break: break-word;
+      word-wrap: break-word;
     }
 
     #${prefix}-tooltip-${id} .${prefix}-tooltip-arrow {
@@ -521,7 +521,7 @@ export default class ViewInspection {
     if (Array.isArray(value)) {
       this._renderTokens(td, value);
     } else {
-      td.innerText = value;
+      td.innerText = value.replace(/\//g, '\u200B/\u200B');
     }
 
     tr.appendChild(th);
diff --git a/tests/ember_debug/view-debug-test.js b/tests/ember_debug/view-debug-test.js
index 9b03a0d963..8981c78bf2 100644
--- a/tests/ember_debug/view-debug-test.js
+++ b/tests/ember_debug/view-debug-test.js
@@ -803,7 +803,12 @@ module('Ember Debug - View', function (hooks) {
         .hasText('<TestFoo>');
       assert
         .dom('.ember-inspector-tooltip-detail-template', tooltip)
-        .hasText('my-app/templates/components/test-foo.hbs');
+        .hasText(
+          'my-app/templates/components/test-foo.hbs'.replace(
+            /\//g,
+            '\u200B/\u200B'
+          )
+        );
       assert
         .dom('.ember-inspector-tooltip-detail-instance', tooltip)
         .hasText('App.TestFooComponent');
@@ -833,7 +838,12 @@ module('Ember Debug - View', function (hooks) {
         .hasText('<TestBar>');
       assert
         .dom('.ember-inspector-tooltip-detail-template', tooltip)
-        .hasText('my-app/templates/components/test-bar.hbs');
+        .hasText(
+          'my-app/templates/components/test-bar.hbs'.replace(
+            /\//g,
+            '\u200B/\u200B'
+          )
+        );
       assert
         .dom('.ember-inspector-tooltip-detail-instance', tooltip)
         .hasText(
@@ -874,7 +884,12 @@ module('Ember Debug - View', function (hooks) {
         .hasText('<TestFoo>');
       assert
         .dom('.ember-inspector-tooltip-detail-template', tooltip)
-        .hasText('my-app/templates/components/test-foo.hbs');
+        .hasText(
+          'my-app/templates/components/test-foo.hbs'.replace(
+            /\//g,
+            '\u200B/\u200B'
+          )
+        );
       assert
         .dom('.ember-inspector-tooltip-detail-instance', tooltip)
         .hasText('App.TestFooComponent');
@@ -898,7 +913,12 @@ module('Ember Debug - View', function (hooks) {
         .hasText('<TestFoo>');
       assert
         .dom('.ember-inspector-tooltip-detail-template', tooltip)
-        .hasText('my-app/templates/components/test-foo.hbs');
+        .hasText(
+          'my-app/templates/components/test-foo.hbs'.replace(
+          /\//g,
+          '\u200B/\u200B'
+        )
+        );
       assert
         .dom('.ember-inspector-tooltip-detail-instance', tooltip)
         .hasText('App.TestFooComponent');