Fix CSS property autocomplete with invalid characters

Prevent autocomplete suggestions when property names contain
invalid CSS characters like quotation marks.

Bug: 338536264
Change-Id: I72f2c473520c34925cabcdb1c0ab71b01527c2fa
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7137858
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Samiya Caur <samiyac@chromium.org>

Author: TheNourhan

front_end/panels/elements/StylesSidebarPane.test.ts

@@ -823,6 +823,37 @@ describe('StylesSidebarPane', () => {
         assert.strictEqual(completions?.[1].text, 'overflow-wrap');
         assert.strictEqual(completions?.[1].subtitle, '= word-wrap');
       });
+
+      it('returns no completions when property name contains invalid characters', async () => {
+        const attachedElement = document.createElement('div');
+        renderElementIntoDOM(attachedElement);
+        const cssPropertyPrompt = new CSSPropertyPrompt(mockTreeItem, true);
+
+        cssPropertyPrompt.attachAndStartEditing(attachedElement, noop);
+        const suggestBox = cssPropertyPrompt.suggestBoxForTest();
+        assert.exists(suggestBox);
+        const spyObj = sinon.spy(suggestBox);
+
+        cssPropertyPrompt.setText('height"');
+        await cssPropertyPrompt.complete(true);
+
+        sinon.assert.notCalled(spyObj.updateSuggestions);
+      });
+
+      it('allows completions for valid property names', async () => {
+        const attachedElement = document.createElement('div');
+        renderElementIntoDOM(attachedElement);
+        const cssPropertyPrompt = new CSSPropertyPrompt(mockTreeItem, true);
+
+        cssPropertyPrompt.attachAndStartEditing(attachedElement, noop);
+        const spyObj = sinon.spy(cssPropertyPrompt.suggestBoxForTest());
+        cssPropertyPrompt.setText('backgrou');
+        await cssPropertyPrompt.complete(true);
+
+        assert.isTrue(spyObj?.updateSuggestions.called);
+        const completions = spyObj?.updateSuggestions.firstCall.args[1];
+        assert.isAbove(completions.length, 0);
+      });
     });
   });
 });

front_end/panels/elements/StylesSidebarPane.ts

@@ -1869,6 +1869,13 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       Promise<UI.SuggestBox.Suggestions> {
     const lowerQuery = query.toLowerCase();
     const editingVariable = !this.isEditingName && expression.trim().endsWith('var(');
+    if (this.isEditingName && expression) {
+      const invalidCharsRegex = /["':;,\s()]/;
+      if (invalidCharsRegex.test(expression)) {
+        return await Promise.resolve([]);
+      }
+    }
+
     if (!query && !force && !editingVariable && (this.isEditingName || expression)) {
       return await Promise.resolve([]);
     }