chrome-devtools-frontend 1.0.1595925 → 1.0.1596535

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

@@ -1575,11 +1575,17 @@ export class GridTemplateRenderer extends rendererBase(SDK.CSSPropertyParserMatc
 
     const indent = Common.Settings.Settings.instance().moduleSetting('text-editor-indent').get();
     const container = document.createDocumentFragment();
-    for (const line of match.lines) {
-      const value = Renderer.render(line, context);
-      const lineBreak = UI.Fragment.html`<br /><span class='styles-clipboard-only'>${indent.repeat(2)}</span>`;
-      container.append(lineBreak, ...value.nodes);
-    }
+
+    const template = html`
+      ${match.lines.map(line => {
+      const lines = Renderer.render(line, context).nodes;
+      return html`
+        <span class='styles-clipboard-only'>${indent.repeat(2)}</span>
+        ${lines}`;
+    })}
+    `;
+
+    render(template, container);
     return [container];
   }
 }
@@ -3542,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;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -185,7 +185,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
   private readonly decorator: StylePropertyHighlighter;
 
   private lastRevealedProperty: SDK.CSSProperty.CSSProperty|null = null;
-  private userOperation = false;
+  userOperation = false;
   isEditingStyle = false;
   #filterRegex: RegExp|null = null;
   #isRegex = false;
@@ -208,7 +208,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   activeCSSAngle: InlineEditor.CSSAngle.CSSAngle|null = null;
   #updateAbortController?: AbortController;
-  #updateComputedStylesAbortController?: AbortController;
 
   constructor(computedStyleModel: ComputedStyle.ComputedStyleModel.ComputedStyleModel) {
     super(computedStyleModel, {delegatesFocus: true});
@@ -695,12 +694,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   override onCSSModelChanged(
       event: Common.EventTarget.EventTargetEvent<ComputedStyle.ComputedStyleModel.CSSModelChangedEvent>): void {
-    const edit = event?.data && 'edit' in event.data ? event.data.edit : null;
-    if (edit) {
-      for (const section of this.allSections()) {
-        section.styleSheetEdited(edit);
-      }
-      void this.#refreshComputedStyles();
+    // 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;
     }
 
@@ -723,7 +719,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
   #resetUpdateIfNotEditing(): void {
     if (this.userOperation || this.isEditingStyle) {
-      void this.#refreshComputedStyles();
       return;
     }
 
@@ -872,28 +867,6 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     }
   }
 
-  async #refreshComputedStyles(): Promise<void> {
-    this.#updateComputedStylesAbortController?.abort();
-    this.#updateAbortController = new AbortController();
-    const signal = this.#updateAbortController.signal;
-    const matchedStyles = await this.fetchMatchedCascade();
-    const nodeId = this.node()?.id;
-    const parentNodeId = matchedStyles?.getParentLayoutNodeId();
-
-    const [computedStyles, parentsComputedStyles] =
-        await Promise.all([this.fetchComputedStylesFor(nodeId), this.fetchComputedStylesFor(parentNodeId)]);
-
-    if (signal.aborted) {
-      return;
-    }
-
-    for (const section of this.allSections()) {
-      section.setComputedStyles(computedStyles);
-      section.setParentsComputedStyles(parentsComputedStyles);
-      section.updateAuthoringHint();
-    }
-  }
-
   focusedSectionIndex(): number {
     let index = 0;
     for (const block of this.sectionBlocks) {
@@ -936,6 +909,9 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
 
     this.linkifier.reset();
     const prevSections = this.sectionBlocks.map(block => block.sections).flat();
+    for (const section of prevSections) {
+      section.dispose();
+    }
     this.sectionBlocks = [];
 
     const node = this.node();
@@ -1825,7 +1801,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
         getCurrentText: () => {
           return this.text();
         },
-        setAiAutoCompletion: () => {},
+        setAiAutoCompletion: this.setAiAutoCompletion.bind(this),
       };
       this.aiCodeCompletionProvider =
           StylesAiCodeCompletionProvider.StylesAiCodeCompletionProvider.createInstance(this.aiCodeCompletionConfig);
@@ -2117,6 +2093,46 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
         userInput, range.endOffset, this.isEditingName, this.treeElement.property, cssModel);
   }
 
+  private setAiAutoCompletion(args: {
+    text: string,
+    from: number,
+    startTime: number,
+    onImpression: (rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number) => void,
+    clearCachedRequest: () => void,
+    rpcGlobalId?: Host.AidaClient.RpcGlobalId,
+    sampleId?: number,
+  }|null): void {
+    if (!args) {
+      this.treeElement.section().clearGhostStyleTreeElements();
+      return;
+    }
+    this.showAiGhostText(args?.text);
+    const latency = performance.now() - args.startTime;
+    if (args.rpcGlobalId) {
+      args.onImpression(args.rpcGlobalId, latency, args.sampleId);
+    }
+  }
+
+  private showAiGhostText(text: string): void {
+    const [currentLine, ...nextLinesList] = text.split(';');
+    const nextLines = nextLinesList.join(';').trim();
+
+    if (this.isEditingName && currentLine.includes(':')) {
+      const [namePart, valuePart] = currentLine.split(':').map(s => s.trim());
+      this.applySuggestion({text: this.text() + namePart}, true);
+      this.treeElement.showGhostTextInValue(valuePart);
+    } else {
+      // Only has ghost text for one field - name part or value part
+      this.applySuggestion({text: this.text() + currentLine}, true);
+    }
+
+    if (nextLines) {
+      this.treeElement.section().renderGhostStyleTreeElements(nextLines);
+    } else {
+      this.treeElement.section().clearGhostStyleTreeElements();
+    }
+  }
+
   /**
    * Extracts the remaining portion of the suggestion text that follows the
    * user's current input.

package/front_end/panels/elements/nodeStackTraceWidget.css

@@ -6,6 +6,6 @@
 @scope to (devtools-widget > *) {
   .stack-trace {
     font-size: 11px !important; /* stylelint-disable-line declaration-no-important */
-    font-family: Menlo, monospace;
+    font-family: Menlo, var(--monospace-font-family);
   }
 }

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -81,7 +81,7 @@
     padding-bottom: 3px;
   }
 
-  &.ghost-row {
+  &.ghost-row, .ghost-value-prediction {
     opacity: 50%;
     font-style: italic;
     pointer-events: none;