Fix regression in rendering css keywords

Bug: 409325196
Change-Id: I1a51b5ed045b5a334a6407b693709c3cd12af67a
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6439041
Reviewed-by: Benedikt Meurer <bmeurer@chromium.org>
Auto-Submit: Philip Pfaffe <pfaffe@chromium.org>
Commit-Queue: Philip Pfaffe <pfaffe@chromium.org>

Author: pfaffe

front_end/panels/elements/StylePropertyTreeElement.test.ts

@@ -1587,9 +1587,12 @@ describeWithMockConnection('StylePropertyTreeElement', () => {
       const originalDeclaration = mockResolvedKeyword('width', keyword);
       const stylePropertyTreeElement = getTreeElement(originalDeclaration.name, keyword);
       stylePropertyTreeElement.updateTitle();
+      assert.exists(stylePropertyTreeElement.valueElement);
+      renderElementIntoDOM(stylePropertyTreeElement.valueElement);
 
-      const linkSwatch = stylePropertyTreeElement.valueElement?.querySelector('devtools-link-swatch');
+      const linkSwatch = stylePropertyTreeElement.valueElement.querySelector('devtools-link-swatch');
       assert.isOk(linkSwatch);
+      assert.strictEqual(linkSwatch.innerText, keyword);
       const spy = sinon.spy(stylePropertyTreeElement.parentPane(), 'revealProperty');
       (linkSwatch.querySelector('button') as HTMLElement | undefined)?.click();
       assert.isTrue(spy.calledOnceWithExactly(originalDeclaration));

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -212,7 +212,6 @@ export class CSSWideKeywordRenderer extends rendererBase(SDK.CSSPropertyParserMa
     }
 
     const swatch = new InlineEditor.LinkSwatch.LinkSwatch();
-    UI.UIUtils.createTextChild(swatch, match.text);
     swatch.data = {
       text: match.text,
       tooltip: resolvedProperty ? undefined : {title: i18nString(UIStrings.sIsNotDefined, {PH1: match.text})},