chrome-devtools-frontend 1.0.1596260 → 1.0.1596535

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/stylePropertiesTreeOutline.css

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

package/front_end/panels/lighthouse/LighthouseController.ts

@@ -12,6 +12,7 @@ import * as EmulationModel from '../../models/emulation/emulation.js';
 import type * as LighthouseModel from '../../models/lighthouse/lighthouse.js';
 import * as Emulation from '../emulation/emulation.js';
 
+import type {RunOverrides} from './LighthousePanel.js';
 import type {LighthouseRun as LighthouseRunType, ProtocolService} from './LighthouseProtocolService.js';
 
 const UIStrings = {
@@ -567,9 +568,9 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     };
   }
 
-  getCategoryIDs(): string[] {
+  getCategoryIDs(): CategoryId[] {
     const {mode} = this.getFlags();
-    const categoryIDs = [];
+    const categoryIDs: CategoryId[] = [];
     for (const preset of Presets) {
       if (mode && !preset.supportedModes.includes(mode)) {
         continue;
@@ -639,7 +640,12 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
     }
   }
 
-  async startLighthouse(): Promise<void> {
+  /**
+   * Starts a LH run. By default it will use the categories based on what the
+   * user has selected in the UI, but these can be overridden by passing in the
+   * category IDs, in which case these take priority.
+   */
+  async startLighthouse(overrides?: RunOverrides): Promise<void> {
     if (this.lastAction) {
       await this.lastAction;
     }
@@ -651,7 +657,7 @@ export class LighthouseController extends Common.ObjectWrapper.ObjectWrapper<Eve
       }
 
       const inspectedURL = await this.getInspectedURL({force: true});
-      const categoryIDs = this.getCategoryIDs();
+      const categoryIDs = overrides?.categoryIds ?? this.getCategoryIDs();
       const flags = this.getFlags();
 
       this.recordMetrics(flags, categoryIDs);
@@ -861,9 +867,11 @@ export interface EventTypes {
   [Events.AuditProgressChanged]: AuditProgressChangedEvent;
 }
 
+export type CategoryId = 'performance'|'accessibility'|'best-practices'|'seo';
+
 export interface Preset {
   setting: Common.Settings.Setting<boolean>;
-  configID: string;
+  configID: CategoryId;
   title: () => Common.UIString.LocalizedString;
   description: () => Common.UIString.LocalizedString;
   supportedModes: string[];

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -13,10 +13,11 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {
   type AuditProgressChangedEvent,
+  type CategoryId,
   Events,
   LighthouseController,
   type PageAuditabilityChangedEvent,
-  type PageWarningsChangedEvent,
+  type PageWarningsChangedEvent
 } from './LighthouseController.js';
 import lighthousePanelStyles from './lighthousePanel.css.js';
 import {ProtocolService} from './LighthouseProtocolService.js';
@@ -70,7 +71,6 @@ export class LighthousePanel extends UI.Panel.Panel {
   private warningText: Nullable<string>;
   private unauditableExplanation: Nullable<string>;
   private readonly cachedRenderedReports: Map<LighthouseModel.ReporterTypes.ReportJSON, HTMLElement>;
-  private readonly dropTarget: UI.DropTarget.DropTarget;
   private readonly auditResultsElement: HTMLElement;
   private clearButton!: UI.Toolbar.ToolbarButton;
   private newButton!: UI.Toolbar.ToolbarButton;
@@ -94,7 +94,7 @@ export class LighthousePanel extends UI.Panel.Panel {
     this.unauditableExplanation = null;
     this.cachedRenderedReports = new Map();
 
-    this.dropTarget = new UI.DropTarget.DropTarget(
+    new UI.DropTarget.DropTarget(
         this.contentElement, [UI.DropTarget.Type.File], i18nString(UIStrings.dropLighthouseJsonHere),
         this.handleDrop.bind(this));
 
@@ -147,14 +147,17 @@ export class LighthousePanel extends UI.Panel.Panel {
     }
   }
 
-  async handleCompleteRun(): Promise<void> {
+  async handleCompleteRun(overrides?: RunOverrides):
+      Promise<{report: LighthouseModel.ReporterTypes.ReportJSON | null}> {
     try {
-      await this.controller.startLighthouse();
+      await this.controller.startLighthouse(overrides);
       this.renderStatusView();
       const {lhr, artifacts} = await this.controller.collectLighthouseResults();
       this.buildReportUI(lhr, artifacts);
+      return {report: lhr};
     } catch (err) {
       this.handleError(err);
+      return {report: null};
     }
   }
 
@@ -379,4 +382,18 @@ export class LighthousePanel extends UI.Panel.Panel {
       event.handled = true;
     }
   }
+
+  static async executeLighthouseRecording(
+      overrides?: RunOverrides,
+      ): Promise<LighthouseModel.ReporterTypes.ReportJSON|null> {
+    const panel = LighthousePanel.instance();
+    await UI.ViewManager.ViewManager.instance().showView('lighthouse');
+
+    const {report} = await panel.handleCompleteRun(overrides);
+    return report;
+  }
+}
+
+export interface RunOverrides {
+  categoryIds: CategoryId[];
 }

package/front_end/panels/recorder/components/StepView.ts

@@ -362,7 +362,6 @@ function renderStepActions(input: ViewInput): Lit.TemplateResult|null {
       }}
       jslog=${VisualLogging.dropDown('step-actions').track({click: true})}
       .iconName=${'dots-vertical'}
-      }
     ></devtools-menu-button>
   `;
   // clang-format on
@@ -459,7 +458,6 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
               <div class="subtitle" title=${subtitle}>${subtitle}</div>
             </div>
           </div>
-          <div class="filler"></div>
           ${renderStepActions(input)}
         </div>
         <div class="details">

package/front_end/panels/recorder/components/stepView.css

@@ -13,18 +13,18 @@
 .title-container {
   /* Vertically center items with min-width: 0; */
   min-width: 0;
-  font-size: 13px;
-  line-height: 16px;
-  letter-spacing: 0.03em;
+  font-size: var(--sys-size-7);
   display: flex;
   flex-direction: row;
-  gap: 3px;
-  outline-offset: 3px;
+  gap: var(--sys-size-2);
+  outline-offset: var(--sys-size-2);
+  flex-grow: 1;
+  align-items: center;
 }
 
 .action {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
 }
 
 .title {
@@ -58,7 +58,7 @@
   cy: 8px;
 }
 
-.is-start-of-group .circle-icon {
+.is-start-of-group:not(:first-of-type) .circle-icon {
   r: 7px;
   fill: var(--sys-color-cdt-base-container);
   stroke: var(--sys-color-primary);
@@ -143,7 +143,7 @@
   height: 14px;
   transition: 200ms;
   position: absolute;
-  top: 18px;
+  top: 14px;
   left: 24px;
   transform: rotate(-90deg);
   color: var(--sys-color-on-surface);
@@ -183,7 +183,11 @@ devtools-recorder-step-editor:hover {
 }
 
 devtools-recorder-step-editor.is-selected {
-  background-color: color-mix(in srgb, var(--sys-color-tonal-container), var(--sys-color-cdt-base-container) 50%);
+  background-color: color-mix(
+    in srgb,
+    var(--sys-color-tonal-container),
+    var(--sys-color-cdt-base-container) 50%
+  );
   border: 1px solid var(--sys-color-tonal-outline);
 }
 
@@ -192,10 +196,6 @@ devtools-recorder-step-editor.is-selected {
   flex-flow: row nowrap;
 }
 
-.filler {
-  flex-grow: 1;
-}
-
 .subtitle {
   font-weight: normal;
   color: var(--sys-color-on-surface-subtle);

package/front_end/panels/recorder/components/timelineSection.css

@@ -13,7 +13,7 @@
 
 .timeline-section {
   position: relative;
-  padding: 16px 0 0 40px;
+  padding: 8px 0 8px 40px;
   margin-left: 8px;
 
   --override-color-recording-successful-text: #36a854;
@@ -52,12 +52,12 @@
   z-index: 4;
 }
 
-.is-start-of-group {
-  padding-top: 28px;
+.is-start-of-group:not(:first-of-type) {
+  padding-top: 16px;
 }
 
 .is-end-of-group {
-  padding-bottom: 24px;
+  padding-bottom: 16px;
 }
 
 .icon {
@@ -73,7 +73,7 @@
   display: block;
   transform: translateX(-50%);
   top: 18px;
-  height: calc(100% + 8px);
+  height: 100%;
   z-index: 1; /* We want this to be below of `.overlay` for stopped case */
 }
 
@@ -86,8 +86,7 @@
 }
 
 .is-first-section .bar {
-  top: 32px;
-  height: calc(100% - 8px);
+  height: 100%;
   display: none;
 }
 

package/front_end/panels/timeline/TimelinePanel.ts

@@ -3054,6 +3054,17 @@ export class TimelinePanel extends Common.ObjectWrapper.eventMixin<EventTypes, t
     this.#setActiveInsight({model: insightModel, insightSetKey}, {highlightInsight: true});
   }
 
+  revealCoreVitals(revealable: Utils.Helpers.RevealableCoreVitals): void {
+    if (this.#splitWidget.showMode() !== UI.SplitWidget.ShowMode.BOTH) {
+      this.#splitWidget.showBoth();
+    }
+    this.#sideBar.openInsightsTab();
+    if (revealable.insightSetKey) {
+      this.#sideBar.setActiveInsightSet(revealable.insightSetKey);
+      this.#setActiveInsight(null);
+    }
+  }
+
   static async executeRecordAndReload(): Promise<Trace.TraceModel.ParsedTrace> {
     await UI.ViewManager.ViewManager.instance().showView('timeline');
     const panelInstance = TimelinePanel.instance();
@@ -3238,6 +3249,13 @@ export class InsightRevealer implements Common.Revealer.Revealer<Utils.Helpers.R
   }
 }
 
+export class CoreVitalsRevealer implements Common.Revealer.Revealer<Utils.Helpers.RevealableCoreVitals> {
+  async reveal(revealable: Utils.Helpers.RevealableCoreVitals): Promise<void> {
+    await UI.ViewManager.ViewManager.instance().showView('timeline');
+    TimelinePanel.instance().revealCoreVitals(revealable);
+  }
+}
+
 export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
   handleAction(context: UI.Context.Context, actionId: string): boolean {
     const panel = context.flavor(TimelinePanel);