Fix long CSS values being clipped in Styles pane

Add overflow-wrap: break-word to tree outline items and constrain the TextPrompt proxy span width during editing so long values wrap instead of being clipped by overflow: hidden.

Bug: 431091918
Change-Id: I8d991b3720e21b619f1f62b99ba7611bd92b1668
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7644488
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Helmut Januschka <helmut@januschka.com>
Reviewed-by: Philip Pfaffe <pfaffe@chromium.org>

Author: hjanuschka

front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -2386,4 +2386,19 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       sinon.assert.calledOnce(editingEndedSpy);
     });
   });
+
+  it('applies overflow-wrap: break-word to tree outline list items for long values', () => {
+    // Create a very long value without spaces that would otherwise overflow.
+    const longValue = '9'.repeat(500) + 'px';
+    const stylePropertyTreeElement = getTreeElement('width', longValue);
+    const section = stylePropertyTreeElement.section();
+    section.propertiesTreeOutline.appendChild(stylePropertyTreeElement);
+    stylePropertyTreeElement.updateTitle();
+    renderElementIntoDOM(section.element);
+
+    const li = section.propertiesTreeOutline.shadowRoot.querySelector('.tree-outline li');
+    assert.exists(li);
+    const computedStyle = getComputedStyle(li);
+    assert.strictEqual(computedStyle.overflowWrap, 'break-word');
+  });
 });

front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -21,6 +21,7 @@
   padding-left: 22px;
   white-space: normal;
   text-overflow: ellipsis;
+  overflow-wrap: break-word;
   cursor: auto;
   display: block;
 
@@ -74,6 +75,12 @@
     overflow-wrap: break-word !important; /* stylelint-disable-line declaration-no-important */
     white-space: normal !important; /* stylelint-disable-line declaration-no-important */
     padding-left: 0;
+
+    /* Constrain the TextPrompt proxy span (display: inline-block) so that
+       long values wrap instead of overflowing the section. */
+    > span:has(> .text-prompt-root) {
+      max-width: 100%;
+    }
   }
 
   .info {