chrome-devtools-frontend 1.0.1596260 → 1.0.1596535

package/front_end/models/ai_assistance/AiConversation.ts

@@ -4,10 +4,10 @@
 
 import * as Host from '../../core/host/host.js';
 import * as Root from '../../core/root/root.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import * as Trace from '../../models/trace/trace.js';
+import type * as SDK from '../../core/sdk/sdk.js';
+import type * as Trace from '../../models/trace/trace.js';
 import * as Greendev from '../greendev/greendev.js';
-import * as NetworkTimeCalculator from '../network_time_calculator/network_time_calculator.js';
+import type * as NetworkTimeCalculator from '../network_time_calculator/network_time_calculator.js';
 
 import {
   type AiAgent,
@@ -26,10 +26,6 @@ import {PerformanceAgent, PerformanceTraceContext} from './agents/PerformanceAge
 import {NodeContext, StylingAgent} from './agents/StylingAgent.js';
 import {AiHistoryStorage, ConversationType, type SerializedConversation} from './AiHistoryStorage.js';
 import type {ChangeManager} from './ChangeManager.js';
-import {NetworkRequestFormatter} from './data_formatters/NetworkRequestFormatter.js';
-import {PerformanceInsightFormatter} from './data_formatters/PerformanceInsightFormatter.js';
-import {micros} from './data_formatters/UnitFormatters.js';
-import {AgentFocus} from './performance/AIContext.js';
 
 export const NOT_FOUND_IMAGE_DATA = '';
 const MAX_TITLE_LENGTH = 80;
@@ -274,6 +270,9 @@ export class AiConversation {
                      if (item.type === ResponseType.SIDE_EFFECT) {
                        return {...item, confirm: undefined};
                      }
+                     if (item.type === ResponseType.CONTEXT && item.widgets) {
+                       return {...item, widgets: undefined};
+                     }
                      return item;
                    })
                    .filter(history => !!history),
@@ -342,88 +341,11 @@ export class AiConversation {
     }
   }
 
-  #factsCache = new Map<ExtraContext, Host.AidaClient.RequestFact>();
-
-  async #createFactsForExtraContext(contexts: ExtraContext[]): Promise<void> {
-    for (const context of contexts) {
-      const cached = this.#factsCache.get(context);
-      if (cached) {
-        this.#agent.addFact(cached);
-        continue;
-      }
-
-      if (context instanceof SDK.DOMModel.DOMNode) {
-        const desc = await StylingAgent.describeElement(context);
-
-        const fact = {
-          text: `Relevant HTML element:\n${desc}`,
-          metadata: {
-            source: 'devtools-floaty',
-            score: 1,
-          }
-        };
-        this.#factsCache.set(context, fact);
-        this.#agent.addFact(fact);
-      } else if (context instanceof SDK.NetworkRequest.NetworkRequest) {
-        const calculator = new NetworkTimeCalculator.NetworkTransferTimeCalculator();
-        calculator.updateBoundaries(context);
-        const formatter = new NetworkRequestFormatter(context, calculator);
-        const desc = await formatter.formatNetworkRequest();
-
-        const fact = {
-          text: `Relevant network request:\n${desc}`,
-          metadata: {
-            source: 'devtools-floaty',
-            score: 1,
-          }
-        };
-        this.#factsCache.set(context, fact);
-        this.#agent.addFact(fact);
-      } else if ('insight' in context) {
-        const focus = AgentFocus.fromInsight(context.trace, context.insight);
-        const formatter = new PerformanceInsightFormatter(
-            focus,
-            context.insight,
-        );
-
-        const text = `Relevant Performance Insight:\n${formatter.formatInsight()}`;
-        const fact = {
-          text,
-          metadata: {
-            source: 'devtools-floaty',
-            score: 1,
-          }
-        };
-        this.#factsCache.set(context, fact);
-        this.#agent.addFact(fact);
-      } else {
-        // Must be a trace event
-        const time = Trace.Types.Timing.Micro(
-            context.event.ts - context.traceStartTime,
-        );
-
-        const desc = `Trace event: ${context.event.name}
-Time: ${micros(time)}`;
-
-        const fact = {
-          text: `Relevant trace event:\n${desc}`,
-          metadata: {
-            source: 'devtools-floaty',
-            score: 1,
-          }
-        };
-        this.#factsCache.set(context, fact);
-        this.#agent.addFact(fact);
-      }
-    }
-  }
-
   async *
       run(
           initialQuery: string,
           options: {
             signal?: AbortSignal,
-            extraContext?: ExtraContext[],
             multimodalInput?: MultimodalInput,
           } = {},
           ): AsyncGenerator<ResponseData, void, void> {
@@ -442,9 +364,6 @@ Time: ${micros(time)}`;
     void this.addHistoryItem(userQuery);
     yield userQuery;
 
-    if (options.extraContext) {
-      await this.#createFactsForExtraContext(options.extraContext);
-    }
     this.#setOriginIfEmpty(this.selectedContext?.getOrigin());
 
     if (this.isBlockedByOrigin) {
@@ -463,7 +382,6 @@ Time: ${micros(time)}`;
           initialQuery: string,
           options: {
             signal?: AbortSignal,
-            extraContext?: ExtraContext[],
             multimodalInput?: MultimodalInput,
           } = {},
           ): AsyncGenerator<ResponseData, void, void> {
@@ -528,13 +446,6 @@ function isAiAssistanceServerSideLoggingEnabled(): boolean {
   return !Root.Runtime.hostConfig.aidaAvailability?.disallowLogging;
 }
 
-// TODO: this is the same as the type in UI.Floaty but we cannot use UI
-// here. This is fine for prototyping but if we take this further we can
-// rearchitect.
-type ExtraContext = SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest|
-                    {event: Trace.Types.Events.Event, traceStartTime: Trace.Types.Timing.Micro}|
-                    {insight: Trace.Insights.Types.InsightModel, trace: Trace.TraceModel.ParsedTrace};
-
 function isAiAssistanceContextSelectionAgentEnabled(): boolean {
   return Boolean(Root.Runtime.hostConfig.devToolsAiAssistanceContextSelectionAgent?.enabled);
 }

package/front_end/models/ai_assistance/agents/AiAgent.ts

@@ -7,6 +7,7 @@ import * as Root from '../../../core/root/root.js';
 import type * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Greendev from '../../greendev/greendev.js';
+import type * as Trace from '../../trace/trace.js';
 import {debugLog, isStructuredLogEnabled} from '../debug.js';
 
 export const enum ResponseType {
@@ -69,6 +70,7 @@ export interface ContextResponse {
   type: ResponseType.CONTEXT;
   title: string;
   details: [ContextDetail, ...ContextDetail[]];
+  widgets?: AiWidget[];
 }
 
 export interface TitleResponse {
@@ -228,8 +230,16 @@ export interface ComputedStyleAiWidget {
     properties: string[],
   };
 }
+export interface CoreVitalsAiWidget {
+  name: 'CORE_VITALS';
+  data: {
+    insightSetKey: string,
+    parsedTrace: Trace.TraceModel.ParsedTrace,
+  };
+}
+
 // This type will grow as we add more widgets.
-export type AiWidget = ComputedStyleAiWidget;
+export type AiWidget = ComputedStyleAiWidget|CoreVitalsAiWidget;
 
 export type FunctionCallHandlerResult<Result> = {
   requiresApproval: true,

package/front_end/models/ai_assistance/agents/PerformanceAgent.ts

@@ -22,6 +22,7 @@ import {AgentFocus} from '../performance/AIContext.js';
 
 import {
   AiAgent,
+  type AiWidget,
   type ContextResponse,
   ConversationContext,
   type ConversationSuggestions,
@@ -381,6 +382,18 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
       return;
     }
 
+    const widgets: AiWidget[] = [];
+    const primaryInsightSet = context.getItem().primaryInsightSet;
+    if (primaryInsightSet) {
+      widgets.push({
+        name: 'CORE_VITALS',
+        data: {
+          parsedTrace: context.getItem().parsedTrace,
+          insightSetKey: primaryInsightSet.id,
+        },
+      });
+    }
+
     yield {
       type: ResponseType.CONTEXT,
       title: lockedString(UIStringsNotTranslated.analyzingTrace),
@@ -390,6 +403,7 @@ export class PerformanceAgent extends AiAgent<AgentFocus> {
           text: this.#formatter?.formatTraceSummary() ?? '',
         },
       ],
+      widgets,
     };
 
     this.#hasShownAnalyzeTraceContext = true;

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -1714,6 +1714,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
           case AiAssistanceModel.AiAgent.ResponseType.CONTEXT: {
             step.title = data.title;
             step.contextDetails = data.details;
+            step.widgets = data.widgets;
             step.isLoading = false;
             commitStep();
             break;

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -12,7 +12,8 @@ import type * as Platform from '../../../core/platform/platform.js';
 import * as Root from '../../../core/root/root.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
-import type {AiWidget, ComputedStyleAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
+import type {
+  AiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
 import * as Marked from '../../../third_party/marked/marked.js';
@@ -25,6 +26,8 @@ import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Elements from '../../elements/elements.js';
+import * as TimelineComponents from '../../timeline/components/components.js';
+import * as TimelineUtils from '../../timeline/utils/utils.js';
 
 import chatMessageStyles from './chatMessage.css.js';
 import {walkthroughTitle, WalkthroughView} from './WalkthroughView.js';
@@ -696,6 +699,19 @@ async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promi
   return {renderedWidget: widget, revealable: new Elements.ElementsPanel.NodeComputedStyles(domNodeForId)};
 }
 
+async function makeCoreVitalsWidget(widgetData: CoreVitalsAiWidget): Promise<WidgetMakerResponse|null> {
+  const widgetConfig = UI.Widget.widgetConfig(TimelineComponents.CWVMetrics.CWVMetrics, {data: widgetData.data});
+
+  // clang-format off
+  const widget = html`<devtools-widget class="core-vitals-widget" .widgetConfig=${widgetConfig}></devtools-widget>`;
+  // clang-format on
+
+  return {
+    renderedWidget: widget,
+    revealable: new TimelineUtils.Helpers.RevealableCoreVitals(widgetData.data.insightSetKey)
+  };
+}
+
 function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTemplate {
   if (response === null) {
     return Lit.nothing;
@@ -732,10 +748,11 @@ function renderWidgetResponse(response: WidgetMakerResponse|null): Lit.LitTempla
  * iterates through the `step.widgets` array. For each widget, it determines
  * the appropriate rendering logic based on the `widgetData.name`.
  *
- * Currently, only 'COMPUTED_STYLES' widgets are supported. For these, the
- * `makeComputedStyleWidget` function is called to construct the necessary
+ * Currently, only 'COMPUTED_STYLES' and 'CORE_VITALS' widgets are supported. For these, the
+ * `makeComputedStyleWidget` and `makeCoreVitalsWidget` functions are called to construct the necessary
  * data and configuration for the `Elements.ComputedStyleWidget.ComputedStyleWidget`
- * component. The widget is then rendered using the `<devtools-widget>`
+ * and `TimelineComponents.CWVMetrics.CWVMetrics`
+ * components. The widget is then rendered using the `<devtools-widget>`
  * custom element, which dynamically instantiates and displays the specified
  * UI.Widget subclass with the provided configuration.
  *
@@ -752,6 +769,10 @@ async function renderStepWidgets(step: Step): Promise<Lit.LitTemplate> {
       const response = await makeComputedStyleWidget(widgetData);
       return renderWidgetResponse(response);
     }
+    if (widgetData.name === 'CORE_VITALS') {
+      const response = await makeCoreVitalsWidget(widgetData);
+      return renderWidgetResponse(response);
+    }
     return Lit.nothing;
   }));
   return html`${ui}`;

package/front_end/panels/ai_assistance/components/WalkthroughView.ts

@@ -25,7 +25,7 @@ const UIStrings = {
   /**
    * @description Title for the walkthrough view.
    */
-  title: 'Investigation steps',
+  title: 'Agent walkthrough',
   /**
    * @description Title for the button that shows the walkthrough when there are no widgets in the walkthrough.
    */
@@ -101,7 +101,7 @@ function renderSidebarWalkthrough(input: ViewInput, stepsOutput: Lit.LitTemplate
          <devtools-button
           .data=${{
             variant: Buttons.Button.Variant.TOOLBAR,
-            iconName: 'right-panel-open',
+            iconName: 'cross',
             title: i18nString(UIStrings.close),
             jslogContext: 'close-walkthrough',
           } as Buttons.Button.ButtonData}

package/front_end/panels/elements/StandaloneStylesContainer.ts

@@ -40,7 +40,16 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
       target);
 };
 
-export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesContainer {
+export const enum Events {
+  STYLES_UPDATE_COMPLETED = 'StylesUpdateCompleted',
+}
+
+export interface EventTypes {
+  [Events.STYLES_UPDATE_COMPLETED]: void;
+}
+
+export class StandaloneStylesContainer extends Common.ObjectWrapper.eventMixin<EventTypes, typeof UI.Widget.VBox>(
+    UI.Widget.VBox) implements StylesContainer {
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null = null;
   isEditingStyle = false;
   readonly sectionByElement = new WeakMap<Node, StylePropertiesSection>();
@@ -49,7 +58,7 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
       new Components.Linkifier.Linkifier(23, /* useLinkDecorator */ true);
 
   #webCustomData: WebCustomData|undefined;
-  #userOperation = false;
+  userOperation = false;
   #sections: StylePropertiesSection[] = [];
   #swatchPopoverHelper = new InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper();
   #computedStyleModelInternal = new ComputedStyle.ComputedStyleModel.ComputedStyleModel();
@@ -58,10 +67,24 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element, {useShadowDom: true});
     this.#view = view;
+    this.#computedStyleModelInternal.addEventListener(
+        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.#onCSSModelChanged, this);
   }
 
-  get userOperation(): boolean {
-    return this.#userOperation;
+  async #onCSSModelChanged(
+      event: Common.EventTarget.EventTargetEvent<ComputedStyle.ComputedStyleModel.CSSModelChangedEvent>):
+      Promise<void> {
+    // We only recreate sections if this update is more than an "edit" operation.
+    // Sections will pull their own updates in the case of an "edit".
+    if (event?.data && 'edit' in event.data && event?.data.edit) {
+      return;
+    }
+
+    if (this.isEditingStyle || this.userOperation) {
+      return;
+    }
+
+    this.requestUpdate();
   }
 
   get webCustomData(): WebCustomData|undefined {
@@ -73,10 +96,12 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
   }
 
   async #updateSections(): Promise<void> {
+    for (const section of this.#sections) {
+      section.dispose();
+    }
     const node = this.node();
     if (!node) {
       this.#sections = [];
-      this.requestUpdate();
       return;
     }
 
@@ -106,9 +131,8 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
   }
 
   override async performUpdate(): Promise<void> {
-    if (this.isEditingStyle || this.#userOperation) {
-      return;
-    }
+    this.hideAllPopovers();
+    this.node()?.domModel().cssModel().discardCachedMatchedCascade();
 
     await this.#updateSections();
 
@@ -116,6 +140,11 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
       sections: this.#sections,
     };
     this.#view(viewInput, undefined, this.contentElement);
+    this.#onUpdateFinished();
+  }
+
+  #onUpdateFinished(): void {
+    this.dispatchEventToListeners(Events.STYLES_UPDATE_COMPLETED);
   }
 
   swatchPopoverHelper(): InlineEditor.SwatchPopoverHelper.SwatchPopoverHelper {
@@ -154,6 +183,7 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
     }
 
     if (this.isEditingStyle) {
+      this.#onUpdateFinished();
       return;
     }
 
@@ -161,6 +191,7 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
       section.update(section === editedSection);
     }
     this.swatchPopoverHelper().reposition();
+    this.#onUpdateFinished();
   }
 
   filterRegex(): RegExp|null {
@@ -172,16 +203,19 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
   }
 
   setUserOperation(userOperation: boolean): void {
-    this.#userOperation = userOperation;
+    this.userOperation = userOperation;
   }
 
   forceUpdate(): void {
-    this.hideAllPopovers();
     this.requestUpdate();
   }
 
   hideAllPopovers(): void {
     this.#swatchPopoverHelper.hide();
+    if (this.activeCSSAngle) {
+      this.activeCSSAngle.minify();
+      this.activeCSSAngle = null;
+    }
   }
 
   allSections(): StylePropertiesSection[] {
@@ -246,9 +280,11 @@ export class StandaloneStylesContainer extends UI.Widget.VBox implements StylesC
   jumpToDeclaration(_valueSource: SDK.CSSMatchedStyles.CSSValueSource): void {
   }
 
-  addStyleUpdateListener(_listener: () => void): void {
+  addStyleUpdateListener(listener: () => void): void {
+    this.addEventListener(Events.STYLES_UPDATE_COMPLETED, listener);
   }
 
-  removeStyleUpdateListener(_listener: () => void): void {
+  removeStyleUpdateListener(listener: () => void): void {
+    this.removeEventListener(Events.STYLES_UPDATE_COMPLETED, listener);
   }
 }

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -43,6 +43,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
+import * as ComputedStyle from '../../models/computed_style/computed_style.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
@@ -55,7 +56,7 @@ import {FontEditorSectionManager} from './ColorSwatchPopoverIcon.js';
 import * as ElementsComponents from './components/components.js';
 import {ElementsPanel} from './ElementsPanel.js';
 import stylePropertiesTreeOutlineStyles from './stylePropertiesTreeOutline.css.js';
-import {type Context, StylePropertyTreeElement} from './StylePropertyTreeElement.js';
+import {type Context, GhostStylePropertyTreeElement, StylePropertyTreeElement} from './StylePropertyTreeElement.js';
 import type {StylesContainer} from './StylesContainer.js';
 
 const UIStrings = {
@@ -166,6 +167,8 @@ export class StylePropertiesSection {
   static #nextSectionTooltipIdPrefix = 0;
   readonly sectionTooltipIdPrefix = StylePropertiesSection.#nextSectionTooltipIdPrefix++;
 
+  private ghostStyleTreeElements: GhostStylePropertyTreeElement[] = [];
+
   constructor(
       stylesContainer: StylesContainer, matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles,
       style: SDK.CSSStyleDeclaration.CSSStyleDeclaration, sectionIdx: number, computedStyles: Map<string, string>|null,
@@ -323,12 +326,55 @@ export class StylePropertiesSection {
     this.#isHidden = false;
     this.markSelectorMatches();
     this.onpopulate();
+
+    this.stylesContainer.computedStyleModel().addEventListener(
+        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.#onCSSModelChanged, this);
   }
 
   setComputedStyles(computedStyles: Map<string, string>|null): void {
     this.computedStyles = computedStyles;
   }
 
+  #onCSSModelChanged(event: Common.EventTarget.EventTargetEvent<ComputedStyle.ComputedStyleModel.CSSModelChangedEvent>):
+      void {
+    const edit = event?.data && 'edit' in event.data ? event.data.edit : null;
+    if (edit) {
+      this.styleSheetEdited(edit);
+      void this.refreshComputedValues();
+      return;
+    }
+
+    if (this.stylesContainer.isEditingStyle || this.stylesContainer.userOperation) {
+      void this.refreshComputedValues();
+    }
+  }
+
+  async refreshComputedValues(): Promise<void> {
+    const node = this.stylesContainer.node();
+    if (!node) {
+      return;
+    }
+
+    const cssModel = node.domModel().cssModel();
+    const computedStyleModel = this.stylesContainer.computedStyleModel();
+
+    const matchedStyles = await cssModel.cachedMatchedCascadeForNode(node);
+    const parentNodeId = matchedStyles?.getParentLayoutNodeId();
+
+    const [computedStyles, parentsComputedStyles] = await Promise.all([
+      computedStyleModel.fetchComputedStyle(),
+      parentNodeId ? cssModel.getComputedStyle(parentNodeId) : null,
+    ]);
+
+    if (computedStyles) {
+      this.setComputedStyles(computedStyles.computedStyle);
+    }
+    if (parentsComputedStyles) {
+      this.setParentsComputedStyles(parentsComputedStyles);
+    }
+    this.updateAuthoringHint();
+  }
+
   setParentsComputedStyles(parentsComputedStyles: Map<string, string>|null): void {
     this.parentsComputedStyles = parentsComputedStyles;
   }
@@ -349,6 +395,11 @@ export class StylePropertiesSection {
     }
   }
 
+  dispose(): void {
+    this.stylesContainer.computedStyleModel().removeEventListener(
+        ComputedStyle.ComputedStyleModel.Events.CSS_MODEL_CHANGED, this.#onCSSModelChanged, this);
+  }
+
   setSectionIdx(sectionIdx: number): void {
     this.sectionIdx = sectionIdx;
     this.onpopulate();
@@ -778,6 +829,51 @@ export class StylePropertiesSection {
     return;
   }
 
+  clearGhostStyleTreeElements(): void {
+    // Clear existing ghost elements
+    for (const ghost of this.ghostStyleTreeElements) {
+      this.propertiesTreeOutline.removeChild(ghost);
+    }
+    this.ghostStyleTreeElements = [];
+  }
+
+  renderGhostStyleTreeElements(suggestion: string): void {
+    this.clearGhostStyleTreeElements();
+    if (!suggestion) {
+      return;
+    }
+
+    const suggestionLines = suggestion.split(';').map(line => line.trim());
+    for (const line of suggestionLines) {
+      const colonIdx = line.indexOf(':');
+      if (colonIdx === -1) {
+        continue;
+      }
+
+      const name = line.substring(0, colonIdx).trim();
+      const value = line.substring(colonIdx + 1).trim();
+      if (!name || !value) {
+        continue;
+      }
+
+      // Create a fake property attached to this style
+      const fakeProperty = new SDK.CSSProperty.CSSProperty(
+          this.styleInternal,
+          this.styleInternal.allProperties().length,
+          name,
+          value,
+          false,
+          false,
+          true,
+          false,
+      );
+
+      const ghost = new GhostStylePropertyTreeElement(this.stylesContainer, this, this.matchedStyles, fakeProperty);
+      this.propertiesTreeOutline.appendChild(ghost);
+      this.ghostStyleTreeElements.push(ghost);
+    }
+  }
+
   private onNewRuleClick(event: Common.EventTarget.EventTargetEvent<Event>): void {
     event.data.consume();
     const rule = this.styleInternal.parentRule;

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -3548,6 +3548,22 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   override isEventWithinDisclosureTriangle(event: Event): boolean {
     return event.target === this.expandElement;
   }
+
+  showGhostTextInValue(text: string): void {
+    if (!this.valueElement) {
+      return;
+    }
+    this.clearGhostTextInValue();
+    this.valueElement.createChild('span', 'ghost-value-prediction').textContent = text;
+  }
+
+  clearGhostTextInValue(): void {
+    if (!this.valueElement) {
+      return;
+    }
+    const ghostElement = this.valueElement.querySelector('.ghost-value-prediction');
+    ghostElement?.remove();
+  }
 }
 
 export class GhostStylePropertyTreeElement extends StylePropertyTreeElement {

package/front_end/panels/elements/StylesContainer.ts

@@ -17,6 +17,7 @@ export interface StylesContainer {
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null;
   readonly webCustomData: WebCustomData|undefined;
   isEditingStyle: boolean;
+  userOperation: boolean;
   readonly sectionByElement: WeakMap<Node, StylePropertiesSection>;
   readonly element: HTMLElement;
   readonly linkifier: Components.Linkifier.Linkifier;