Fix code completions generated in Styles pane

This CL updates the generated text to be as per the valid properties -
this will remove any inconsistencies between what is shown and what is
accepted

This CL also adds `}` as a stop sequence

This CL also updates removePrompt impl to clear entire AI suggestion
instead of just the value ghost text

Bug: 502459959
Change-Id: I5eeda4c27f4936282e6ecfc7ed8feb26dd109255
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7806814
Auto-Submit: Samiya Caur <samiyac@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Samiya Caur <samiyac@chromium.org>

Author: samiyac

front_end/panels/elements/StylePropertyTreeElement.ts

@@ -3515,7 +3515,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     if (this.prompt) {
       this.prompt.detach();
       this.prompt = null;
-      this.#clearGhostTextInValue();
+      this.section().activeAiSuggestion = undefined;
     }
   }
 

front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -55,9 +55,13 @@ export class StylesAiCodeCompletionProvider {
       // early return as this means that code completion was previously setup
       return;
     }
+    // Adding '}' as a stop sequence so that suggestion is limited to properties for a given style section
+    const stopSequences = ['}'];
+    if (this.#aiCodeCompletionConfig.completionContext.stopSequences) {
+      stopSequences.push(...this.#aiCodeCompletionConfig.completionContext.stopSequences);
+    }
     this.#aiCodeCompletion = new AiCodeCompletion.AiCodeCompletion.AiCodeCompletion(
-        {aidaClient: this.#aidaClient}, this.#aiCodeCompletionConfig.panel, undefined,
-        this.#aiCodeCompletionConfig.completionContext.stopSequences);
+        {aidaClient: this.#aidaClient}, this.#aiCodeCompletionConfig.panel, undefined, stopSequences);
     this.#aiCodeCompletionConfig.onFeatureEnabled();
   }
 

front_end/panels/elements/StylesSidebarPane.ts

@@ -2268,9 +2268,18 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
     if (!this.queryRange) {
       this.queryRange = new TextUtils.TextRange.TextRange(0, 0, 0, this.text().length);
     }
+
+    const properties = this.#getAiSuggestedProperties(args.text);
+    if (properties.length === 0) {
+      this.treeElement.section().activeAiSuggestion = undefined;
+      this.activeAiSuggestionInfo = undefined;
+      return;
+    }
+
+    const styleText = properties.map(p => `${p.name}: ${p.value};`).join(' ');
     this.treeElement.section().activeAiSuggestion = {
-      text: args.text,
-      properties: this.#getAiSuggestedProperties(args.text),
+      text: styleText,
+      properties,
       cursorPosition: args.from,
       clearCachedRequest: args.clearCachedRequest,
       cssProperty: this.treeElement.property,