add line break opportunity around /

https://www.fileformat.info/info/unicode/char/200b/index.htm use word-wrap instead of break-word
emberjs · Sep 5, 2023 · 35016d5 · 35016d5
1 parent 60de6c2
commit 35016d5
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 6 deletions.
diff --git 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
@@ -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');