chrome-devtools-frontend 1.0.1568864 → 1.0.1569477

package/front_end/panels/sources/BreakpointEditDialog.ts

@@ -11,12 +11,13 @@ import * as SDK from '../../core/sdk/sdk.js';
 import type * as BreakpointManager from '../../models/breakpoints/breakpoints.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
-import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import breakpointEditDialogStyles from './breakpointEditDialog.css.js';
 
+const {ref} = Directives;
 const {Direction} = TextEditor.TextEditorHistory;
 
 const UIStrings = {
@@ -73,191 +74,255 @@ export interface BreakpointEditDialogResult {
   isLogpoint: boolean;
 }
 
-export class BreakpointEditDialog extends UI.Widget.Widget {
-  private readonly onFinish: (result: BreakpointEditDialogResult) => void;
-  private finished: boolean;
-  private editor: TextEditor.TextEditor.TextEditor;
-  private readonly typeSelector: UI.Toolbar.ToolbarComboBox;
-  private placeholderCompartment: CodeMirror.Compartment;
+interface ViewInput {
+  state: CodeMirror.EditorState;
+  breakpointType: SDK.DebuggerModel.BreakpointType.LOGPOINT|SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT;
+  editorLineNumber: number;
+  onTypeChanged(breakpointType: SDK.DebuggerModel.BreakpointType): void;
+  saveAndFinish(): void;
+}
+interface ViewOutput {
+  editor: TextEditor.TextEditor.TextEditor|undefined;
+}
+type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  const editorRef = (e: Element|undefined): void => {
+    output.editor = e as TextEditor.TextEditor.TextEditor;
+  };
+
+  const onTypeChanged = (event: Event): void => {
+    if (event.target instanceof HTMLSelectElement && event.target.selectedOptions.length === 1) {
+      input.onTypeChanged(event.target.selectedOptions.item(0)?.value as SDK.DebuggerModel.BreakpointType);
+    }
+    output.editor?.focus();
+  };
 
-  #history: TextEditor.AutocompleteHistory.AutocompleteHistory;
-  #editorHistory: TextEditor.TextEditorHistory.TextEditorHistory;
+  // clang-format off
+  render(html`
+    <style>${breakpointEditDialogStyles}</style>
+    <div class=dialog-header>
+      <devtools-toolbar class=source-frame-breakpoint-toolbar>Line ${input.editorLineNumber + 1}:
+        <select
+          class=type-selector
+          title=${input.breakpointType === SDK.DebuggerModel.BreakpointType.LOGPOINT
+            ? i18nString(UIStrings.logAMessageToConsoleDoNotBreak)
+            : i18nString(UIStrings.pauseOnlyWhenTheConditionIsTrue)}
+          aria-label=${i18nString(UIStrings.breakpointType)}
+          jslog=${VisualLogging.dropDown('type').track({change: true})}
+          @change=${onTypeChanged}>
+            <option value=${SDK.DebuggerModel.BreakpointType.REGULAR_BREAKPOINT}>
+              ${i18nString(UIStrings.breakpoint)}
+            </option>
+            <option
+              value=${SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT}
+              .selected=${input.breakpointType === SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT}>
+                ${i18nString(UIStrings.conditionalBreakpoint)}
+            </option>
+            <option
+              value=${SDK.DebuggerModel.BreakpointType.LOGPOINT}
+              .selected=${input.breakpointType === SDK.DebuggerModel.BreakpointType.LOGPOINT}>
+                ${i18nString(UIStrings.logpoint)}
+            </option>
+        </select>
+      </devtools-toolbar>
+      <devtools-icon
+        name=cross
+        title=${i18nString(UIStrings.closeDialog)}
+        jslog=${VisualLogging.close().track({click: true})}
+        @click=${input.saveAndFinish}>
+      </devtools-icon>
+    </div>
+    <div class=condition-editor jslog=${VisualLogging.textField().track({change: true})}>
+      <devtools-text-editor
+        ${ref(editorRef)}
+        autofocus
+        .state=${input.state}
+        @focus=${() => output.editor?.focus()}></devtools-text-editor>
+    </div>
+    <div class=link-wrapper>
+      <devtools-icon name=open-externally class=link-icon></devtools-icon>
+      <x-link class="link devtools-link" tabindex="0" href="https://goo.gle/devtools-loc"
+                                          jslog=${VisualLogging.link('learn-more')}>${
+                     i18nString(UIStrings.learnMoreOnBreakpointTypes)}</x-link>
+    </div>
+    `,
+      // clang-format on
+      target);
+};
 
-  constructor(
-      editorLineNumber: number, oldCondition: string, isLogpoint: boolean,
-      onFinish: (result: BreakpointEditDialogResult) => void) {
+export class BreakpointEditDialog extends UI.Widget.Widget {
+  readonly #view: View;
+  readonly #history = new TextEditor.AutocompleteHistory.AutocompleteHistory(
+      Common.Settings.Settings.instance().createLocalSetting('breakpoint-condition-history', []));
+  #finished = false;
+  #editorLineNumber = 0;
+  #oldCondition = '';
+  #breakpointType: SDK.DebuggerModel.BreakpointType.LOGPOINT|SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT =
+      SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT;
+  #onFinish: (result: BreakpointEditDialogResult) => void = () => {};
+  #editor?: TextEditor.TextEditor.TextEditor;
+  #state?: CodeMirror.EditorState;
+
+  constructor(target?: HTMLElement, view = DEFAULT_VIEW) {
     super({
       jslog: `${VisualLogging.dialog('edit-breakpoint')}`,
       useShadowDom: true,
+      delegatesFocus: true,
+      classes: ['sources-edit-breakpoint-dialog'],
     });
-    this.registerRequiredCSS(breakpointEditDialogStyles);
+    this.#view = view;
 
-    const editorConfig = [
-      CodeMirror.javascript.javascriptLanguage,
-      TextEditor.Config.baseConfiguration(oldCondition || ''),
-      TextEditor.Config.closeBrackets.instance(),
-      TextEditor.Config.autocompletion.instance(),
-      CodeMirror.EditorView.lineWrapping,
-      TextEditor.Config.showCompletionHint,
-      TextEditor.Config.conservativeCompletion,
-      CodeMirror.javascript.javascriptLanguage.data.of({
-        autocomplete: (context: CodeMirror.CompletionContext) => this.#editorHistory.historyCompletions(context),
-      }),
-      CodeMirror.autocompletion(),
-      TextEditor.JavaScript.argumentHints(),
-    ];
-
-    this.onFinish = onFinish;
-    this.finished = false;
     this.element.tabIndex = -1;
+  }
 
-    this.element.classList.add('sources-edit-breakpoint-dialog');
-    const header = this.contentElement.createChild('div', 'dialog-header');
-    const toolbar = header.createChild('devtools-toolbar', 'source-frame-breakpoint-toolbar');
-    toolbar.appendText(`Line ${editorLineNumber + 1}:`);
+  get editorLineNumber(): number {
+    return this.#editorLineNumber;
+  }
+  set editorLineNumber(editorLineNumber: number) {
+    this.#editorLineNumber = editorLineNumber;
+    this.requestUpdate();
+  }
+  get oldCondition(): string {
+    return this.#oldCondition;
+  }
+  set oldCondition(oldCondition: string) {
+    this.#state = undefined;
+    this.#oldCondition = oldCondition;
+    this.requestUpdate();
+  }
+  get breakpointType(): SDK.DebuggerModel.BreakpointType {
+    return this.#breakpointType;
+  }
+  set breakpointType(
+      breakpointType: SDK.DebuggerModel.BreakpointType.LOGPOINT|
+      SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT) {
+    this.#breakpointType = breakpointType;
+    this.requestUpdate();
+  }
+  get onFinish(): (result: BreakpointEditDialogResult) => void {
+    return this.#onFinish;
+  }
+  set onFinish(onFinish: (result: BreakpointEditDialogResult) => void) {
+    this.#onFinish = onFinish;
+    this.requestUpdate();
+  }
 
-    this.typeSelector = new UI.Toolbar.ToolbarComboBox(
-        this.onTypeChanged.bind(this), i18nString(UIStrings.breakpointType), undefined, 'type');
-    this.typeSelector.createOption(
-        i18nString(UIStrings.breakpoint), SDK.DebuggerModel.BreakpointType.REGULAR_BREAKPOINT);
-    const conditionalOption = this.typeSelector.createOption(
-        i18nString(UIStrings.conditionalBreakpoint), SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT);
-    const logpointOption =
-        this.typeSelector.createOption(i18nString(UIStrings.logpoint), SDK.DebuggerModel.BreakpointType.LOGPOINT);
-    this.typeSelector.select(isLogpoint ? logpointOption : conditionalOption);
-    toolbar.appendToolbarItem(this.typeSelector);
+  override performUpdate(): void {
+    const input: ViewInput = {
+      state: this.#getEditorState(),
+      breakpointType: this.#breakpointType,
+      editorLineNumber: this.#editorLineNumber,
+      onTypeChanged: type => this.#typeChanged(type),
+      saveAndFinish: () => this.saveAndFinish(),
+    };
+    const that = this;
+    const output = {
+      get editor() {
+        return that.#editor;
+      },
+      set editor(editor) {
+        that.#editor = editor;
+      }
+    };
+    this.#view(input, output, this.contentElement);
+  }
+
+  #getEditorState(): CodeMirror.EditorState {
+    if (this.#state) {
+      return this.#state;
+    }
+    const getPlaceholder = (): CodeMirror.Extension => {
+      if (this.#breakpointType === SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT) {
+        return CodeMirror.placeholder(i18nString(UIStrings.expressionToCheckBeforePausingEg));
+      }
+      if (this.#breakpointType === SDK.DebuggerModel.BreakpointType.LOGPOINT) {
+        return CodeMirror.placeholder(i18nString(UIStrings.logMessageEgXIsX));
+      }
+      return [];
+    };
+
+    const history = (): TextEditor.TextEditorHistory.TextEditorHistory|undefined =>
+        this.#editor && new TextEditor.TextEditorHistory.TextEditorHistory(this.#editor, this.#history);
+    const autocomplete = (context: CodeMirror.CompletionContext): CodeMirror.CompletionResult|null =>
+        history()?.historyCompletions(context) ?? null;
+    const historyBack = (force: boolean): boolean => history()?.moveHistory(Direction.BACKWARD, force) ?? false;
+    const historyForward = (force: boolean): boolean => history()?.moveHistory(Direction.FORWARD, force) ?? false;
 
-    const content = oldCondition || '';
     const finishIfComplete = (view: CodeMirror.EditorView): boolean => {
       void TextEditor.JavaScript.isExpressionComplete(view.state.doc.toString()).then(complete => {
         if (complete) {
-          this.finishEditing(true, this.editor.state.doc.toString());
+          this.finishEditing(true, view.state.doc.toString());
         } else {
           CodeMirror.insertNewlineAndIndent(view);
         }
       });
       return true;
     };
+
     const keymap = [
-      {key: 'ArrowUp', run: () => this.#editorHistory.moveHistory(Direction.BACKWARD)},
-      {key: 'ArrowDown', run: () => this.#editorHistory.moveHistory(Direction.FORWARD)},
-      {mac: 'Ctrl-p', run: () => this.#editorHistory.moveHistory(Direction.BACKWARD, true)},
-      {mac: 'Ctrl-n', run: () => this.#editorHistory.moveHistory(Direction.FORWARD, true)},
-      {
-        key: 'Mod-Enter',
-        run: finishIfComplete,
-      },
-      {
-        key: 'Enter',
-        run: finishIfComplete,
-      },
-      {
-        key: 'Shift-Enter',
-        run: CodeMirror.insertNewlineAndIndent,
-      },
+      {key: 'ArrowUp', run: () => historyBack(false)},
+      {key: 'ArrowDown', run: () => historyForward(false)},
+      {mac: 'Ctrl-p', run: () => historyBack(true)},
+      {mac: 'Ctrl-n', run: () => historyForward(true)},
+      {key: 'Mod-Enter', run: finishIfComplete},
+      {key: 'Enter', run: finishIfComplete},
+      {key: 'Shift-Enter', run: CodeMirror.insertNewlineAndIndent},
       {
         key: 'Escape',
         run: () => {
           this.finishEditing(false, '');
           return true;
-        },
+        }
       },
     ];
 
-    this.placeholderCompartment = new CodeMirror.Compartment();
-
-    const editorWrapper = this.contentElement.appendChild(document.createElement('div'));
-    editorWrapper.classList.add('condition-editor');
-    editorWrapper.setAttribute('jslog', `${VisualLogging.textField().track({change: true})}`);
+    const editorConfig = [
+      CodeMirror.javascript.javascriptLanguage,
+      TextEditor.Config.baseConfiguration(this.oldCondition),
+      TextEditor.Config.closeBrackets.instance(),
+      TextEditor.Config.autocompletion.instance(),
+      CodeMirror.EditorView.lineWrapping,
+      TextEditor.Config.showCompletionHint,
+      TextEditor.Config.conservativeCompletion,
+      CodeMirror.javascript.javascriptLanguage.data.of({autocomplete}),
+      CodeMirror.autocompletion(),
+      TextEditor.JavaScript.argumentHints(),
+    ];
 
-    this.editor = new TextEditor.TextEditor.TextEditor(CodeMirror.EditorState.create({
-      doc: content,
-      selection: {anchor: 0, head: content.length},
+    this.#state = CodeMirror.EditorState.create({
+      doc: this.oldCondition,
+      selection: {anchor: 0, head: this.oldCondition.length},
       extensions: [
-        this.placeholderCompartment.of(this.getPlaceholder()),
+        new CodeMirror.Compartment().of(getPlaceholder()),
         CodeMirror.keymap.of(keymap),
         editorConfig,
       ],
-    }));
-    editorWrapper.appendChild(this.editor);
-
-    const closeIcon = createIcon('cross');
-    closeIcon.title = i18nString(UIStrings.closeDialog);
-    closeIcon.setAttribute('jslog', `${VisualLogging.close().track({click: true})}`);
-    closeIcon.onclick = () => this.finishEditing(true, this.editor.state.doc.toString());
-    header.appendChild(closeIcon);
-
-    this.#history = new TextEditor.AutocompleteHistory.AutocompleteHistory(
-        Common.Settings.Settings.instance().createLocalSetting('breakpoint-condition-history', []));
-    this.#editorHistory = new TextEditor.TextEditorHistory.TextEditorHistory(this.editor, this.#history);
-
-    const linkWrapper = this.contentElement.appendChild(document.createElement('div'));
-    linkWrapper.classList.add('link-wrapper');
-    const link = UI.Fragment.html`<x-link class="link devtools-link" tabindex="0" href="https://goo.gle/devtools-loc"
-                                          jslog="${VisualLogging.link('learn-more')}">${
-                     i18nString(UIStrings.learnMoreOnBreakpointTypes)}</x-link>` as UI.XLink.XLink;
-    const linkIcon = createIcon('open-externally', 'link-icon');
-    link.prepend(linkIcon);
-    linkWrapper.appendChild(link);
-
-    this.updateTooltip();
-  }
-
-  saveAndFinish(): void {
-    this.finishEditing(true, this.editor.state.doc.toString());
-  }
-
-  focusEditor(): void {
-    this.editor.editor.focus();
+    });
+    return this.#state;
   }
 
-  private onTypeChanged(): void {
-    if (this.breakpointType === SDK.DebuggerModel.BreakpointType.REGULAR_BREAKPOINT) {
+  #typeChanged(breakpointType: SDK.DebuggerModel.BreakpointType): void {
+    if (breakpointType === SDK.DebuggerModel.BreakpointType.REGULAR_BREAKPOINT) {
       this.finishEditing(true, '');
       return;
     }
-    this.focusEditor();
-    this.editor.dispatch({effects: this.placeholderCompartment.reconfigure(this.getPlaceholder())});
-    this.updateTooltip();
-  }
-
-  private get breakpointType(): string|null {
-    const option = this.typeSelector.selectedOption();
-    return option ? option.value : null;
-  }
-
-  private getPlaceholder(): CodeMirror.Extension {
-    const type = this.breakpointType;
-    if (type === SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT) {
-      return CodeMirror.placeholder(i18nString(UIStrings.expressionToCheckBeforePausingEg));
-    }
-    if (type === SDK.DebuggerModel.BreakpointType.LOGPOINT) {
-      return CodeMirror.placeholder(i18nString(UIStrings.logMessageEgXIsX));
-    }
-    return [];
-  }
-
-  private updateTooltip(): void {
-    const type = this.breakpointType;
-    if (type === SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT) {
-      UI.Tooltip.Tooltip.install((this.typeSelector.element), i18nString(UIStrings.pauseOnlyWhenTheConditionIsTrue));
-    } else if (type === SDK.DebuggerModel.BreakpointType.LOGPOINT) {
-      UI.Tooltip.Tooltip.install((this.typeSelector.element), i18nString(UIStrings.logAMessageToConsoleDoNotBreak));
-    }
+    this.breakpointType = breakpointType;
+    this.requestUpdate();
   }
 
   finishEditing(committed: boolean, condition: string): void {
-    if (this.finished) {
+    if (this.#finished) {
       return;
     }
-    this.finished = true;
-    this.editor.remove();
+    this.#finished = true;
     this.#history.pushHistoryItem(condition);
     const isLogpoint = this.breakpointType === SDK.DebuggerModel.BreakpointType.LOGPOINT;
     this.onFinish({committed, condition: condition as BreakpointManager.BreakpointManager.UserCondition, isLogpoint});
   }
 
-  get editorForTest(): TextEditor.TextEditor.TextEditor {
-    return this.editor;
+  saveAndFinish(): void {
+    if (this.#editor) {
+      this.finishEditing(true, this.#editor.state.doc.toString());
+    }
   }
 }

package/front_end/panels/sources/DebuggerPlugin.ts

@@ -479,7 +479,8 @@ export class DebuggerPlugin extends Plugin {
         contextMenu.debugSection().appendItem(
             i18nString(UIStrings.addBreakpoint),
             this.createNewBreakpoint.bind(
-                this, line, EMPTY_BREAKPOINT_CONDITION, /* enabled */ true, /* isLogpoint */ false),
+                this, line, EMPTY_BREAKPOINT_CONDITION,
+                /* enabled */ true, /* isLogpoint */ false),
             {jslogContext: 'add-breakpoint'});
         if (supportsConditionalBreakpoints) {
           contextMenu.debugSection().appendItem(i18nString(UIStrings.addConditionalBreakpoint), () => {
@@ -491,7 +492,8 @@ export class DebuggerPlugin extends Plugin {
           contextMenu.debugSection().appendItem(
               i18nString(UIStrings.neverPauseHere),
               this.createNewBreakpoint.bind(
-                  this, line, NEVER_PAUSE_HERE_CONDITION, /* enabled */ true, /* isLogpoint */ false),
+                  this, line, NEVER_PAUSE_HERE_CONDITION, /* enabled */ true,
+                  /* isLogpoint */ false),
               {jslogContext: 'never-pause-here'});
         }
       }
@@ -865,7 +867,12 @@ export class DebuggerPlugin extends Plugin {
     const isLogpointForDialog = breakpoint?.isLogpoint() ?? Boolean(isLogpoint);
     const decorationElement = document.createElement('div');
     const compartment = new CodeMirror.Compartment();
-    const dialog = new BreakpointEditDialog(line.number - 1, oldCondition, isLogpointForDialog, async result => {
+    const dialog = new BreakpointEditDialog();
+    dialog.editorLineNumber = line.number - 1;
+    dialog.oldCondition = oldCondition,
+    dialog.breakpointType = isLogpointForDialog ? SDK.DebuggerModel.BreakpointType.LOGPOINT :
+                                                  SDK.DebuggerModel.BreakpointType.CONDITIONAL_BREAKPOINT;
+    dialog.onFinish = async result => {
       this.activeBreakpointDialog = null;
       this.#activeBreakpointEditRequest = undefined;
       dialog.detach();
@@ -883,7 +890,7 @@ export class DebuggerPlugin extends Plugin {
       } else {
         await this.createNewBreakpoint(line, result.condition, /* enabled */ true, result.isLogpoint);
       }
-    });
+    };
     editor.dispatch({
       effects: CodeMirror.StateEffect.appendConfig.of(compartment.of(CodeMirror.EditorView.decorations.of(
           CodeMirror.Decoration.set([CodeMirror.Decoration
@@ -909,7 +916,7 @@ export class DebuggerPlugin extends Plugin {
               dialog.saveAndFinish();
               this.#scheduledFinishingActiveDialog = false;
             } else {
-              dialog.focusEditor();
+              dialog.focus();
             }
           }
         }, 200);
@@ -918,7 +925,7 @@ export class DebuggerPlugin extends Plugin {
 
     dialog.markAsExternallyManaged();
     dialog.show(decorationElement);
-    dialog.focusEditor();
+    dialog.focus();
     this.activeBreakpointDialog = dialog;
     this.#activeBreakpointEditRequest = breakpointEditRequest;
 
@@ -1341,7 +1348,8 @@ export class DebuggerPlugin extends Plugin {
       const line = this.editor.state.doc.lineAt(editorLocation);
       const uiLocation = this.transformer.editorLocationToUILocation(line.number - 1, editorLocation - line.from);
       void this.setBreakpoint(
-          uiLocation.lineNumber, uiLocation.columnNumber, EMPTY_BREAKPOINT_CONDITION, /* enabled */ true,
+          uiLocation.lineNumber, uiLocation.columnNumber, EMPTY_BREAKPOINT_CONDITION,
+          /* enabled */ true,
           /* isLogpoint */ false);
     }
   }

package/front_end/panels/timeline/TimelineUIUtils.ts

@@ -822,15 +822,19 @@ export class TimelineUIUtils {
     switch (event.name) {
       case Trace.Types.Events.Name.MARK_LCP_CANDIDATE:
         link = 'https://web.dev/lcp/';
-        name = 'largest contentful paint';
+        name = 'Largest Contentful Paint';
         break;
       case Trace.Types.Events.Name.MARK_LCP_CANDIDATE_FOR_SOFT_NAVIGATION:
         link = 'https://developer.chrome.com/docs/web-platform/soft-navigations-experiment';
-        name = 'largest contentful paint (soft navigation)';
+        name = 'Soft Largest Contentful Paint';
+        break;
+      case Trace.Types.Events.Name.SOFT_NAVIGATION_START:
+        link = 'https://developer.chrome.com/docs/web-platform/soft-navigations-experiment';
+        name = 'Soft Navigations';
         break;
       case Trace.Types.Events.Name.MARK_FCP:
         link = 'https://web.dev/first-contentful-paint/';
-        name = 'first contentful paint';
+        name = 'First Contentful Paint';
         break;
       default:
         break;
@@ -1017,6 +1021,8 @@ export class TimelineUIUtils {
       if (url) {
         contentHelper.appendElementRow(i18nString(UIStrings.url), LegacyComponents.Linkifier.Linkifier.linkifyURL(url));
       }
+      contentHelper.appendElementRow(
+          i18nString(UIStrings.details), TimelineUIUtils.buildDetailsNodeForMarkerEvents(event));
     }
 
     if (Trace.Types.Events.isV8Compile(event)) {

package/front_end/panels/timeline/TimingsTrackAppender.ts

@@ -162,6 +162,7 @@ export class TimingsTrackAppender implements TrackAppender {
 
   /**
    * Gets the style for a page load marker event.
+   * TODO(paulirish): Unify with trace/Styles.ts markerDetailsForEvent. Currently only color is read, the rest is ignored.
    */
   markerStyleForPageLoadEvent(markerEvent: Trace.Types.Events.PageLoadEvent): TimelineMarkerStyle {
     const tallMarkerDashStyle = [6, 4];

package/front_end/panels/timeline/overlays/OverlaysImpl.ts

@@ -1569,7 +1569,7 @@ export class Overlays extends EventTarget {
         const {color} = Trace.Styles.markerDetailsForEvent(overlay.entries[0]);
         const markersComponent = this.#createTimingsMarkerElement(overlay);
         overlayElement.appendChild(markersComponent);
-        overlayElement.style.backgroundColor = color;
+        overlayElement.style.setProperty('--marker-color', color);
         return overlayElement;
       }
       default: {
@@ -1618,6 +1618,8 @@ export class Overlays extends EventTarget {
       markers: HTMLElement, marker: HTMLElement): void {
     if (Trace.Types.Events.isSoftNavigationStart(event)) {
       name = 'Soft Nav';
+    } else if (Trace.Types.Events.isSoftLargestContentfulPaintCandidate(event)) {
+      name = 'Soft LCP';
     }
 
     const fieldResult = overlay.entryToFieldResult.get(event);

package/front_end/panels/timeline/timelineFlameChartView.css

@@ -162,6 +162,7 @@
   bottom: 0;
   width: 0.5px;
   pointer-events: auto;
+  background-color: var(--marker-color); /* stylelint-disable-line plugin/use_theme_colors */
 }
 
 .overlay-type-BOTTOM_INFO_BAR {

package/front_end/third_party/chromium/README.chromium

@@ -1,7 +1,7 @@
 Name: Dependencies sourced from the upstream `chromium` repository
 URL: https://chromium.googlesource.com/chromium/src
 Version: N/A
-Revision: cd78b67fa4902cc7cdd3a0aa6dfedf054e4b43d1
+Revision: 45ca275b4749431e27f80dc5defcf893accdf583
 Update Mechanism: Manual (https://crbug.com/428069060)
 License: BSD-3-Clause
 License File: LICENSE

package/front_end/ui/components/text_editor/AiCodeCompletionProvider.ts

@@ -6,12 +6,14 @@ import * as Common from '../../../core/common/common.js';
 import * as Host from '../../../core/host/host.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as AiCodeCompletion from '../../../models/ai_code_completion/ai_code_completion.js';
+import * as AiCodeGeneration from '../../../models/ai_code_generation/ai_code_generation.js';
 import * as PanelCommon from '../../../panels/common/common.js';
 import * as CodeMirror from '../../../third_party/codemirror.next/codemirror.next.js';
 import * as UI from '../../legacy/legacy.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';
 
 import {AccessiblePlaceholder} from './AccessiblePlaceholder.js';
+import {type AiCodeGenerationConfig, AiCodeGenerationProvider} from './AiCodeGenerationProvider.js';
 import {
   acceptAiAutoCompleteSuggestion,
   aiAutoCompleteSuggestion,
@@ -68,6 +70,8 @@ export class AiCodeCompletionProvider {
   #editor?: TextEditor;
   #aiCodeCompletionCitations: Host.AidaClient.Citation[] = [];
   #aiCodeCompletionConfig?: AiCodeCompletionConfig;
+  #aiCodeGenerationConfig?: AiCodeGenerationConfig;
+  #aiCodeGenerationProvider?: AiCodeGenerationProvider;
 
   #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
 
@@ -77,6 +81,18 @@ export class AiCodeCompletionProvider {
       throw new Error('AI code completion feature is not enabled.');
     }
     this.#aiCodeCompletionConfig = aiCodeCompletionConfig;
+    if (AiCodeGeneration.AiCodeGeneration.AiCodeGeneration.isAiCodeGenerationEnabled(devtoolsLocale.locale)) {
+      this.#aiCodeGenerationConfig = {
+        generationContext: {
+          inferenceLanguage: this.#aiCodeCompletionConfig.completionContext.inferenceLanguage,
+        },
+        onSuggestionAccepted: this.#aiCodeCompletionConfig.onSuggestionAccepted.bind(this),
+        onRequestTriggered: this.#aiCodeCompletionConfig.onRequestTriggered.bind(this),
+        onResponseReceived: this.#aiCodeCompletionConfig.onResponseReceived.bind(this),
+        panel: this.#aiCodeCompletionConfig.panel,
+      };
+      this.#aiCodeGenerationProvider = AiCodeGenerationProvider.createInstance(this.#aiCodeGenerationConfig);
+    }
   }
 
   static createInstance(aiCodeCompletionConfig: AiCodeCompletionConfig): AiCodeCompletionProvider {
@@ -84,7 +100,7 @@ export class AiCodeCompletionProvider {
   }
 
   extension(): CodeMirror.Extension[] {
-    return [
+    const extensions = [
       CodeMirror.EditorView.updateListener.of(update => this.#triggerAiCodeCompletion(update)),
       this.#teaserCompartment.of([]),
       aiAutoCompleteSuggestion,
@@ -92,6 +108,10 @@ export class AiCodeCompletionProvider {
       aiAutoCompleteSuggestionState,
       CodeMirror.Prec.highest(CodeMirror.keymap.of(this.#editorKeymap())),
     ];
+    if (this.#aiCodeGenerationProvider) {
+      extensions.push(this.#aiCodeGenerationProvider.extension());
+    }
+    return extensions;
   }
 
   dispose(): void {
@@ -101,6 +121,7 @@ export class AiCodeCompletionProvider {
     Host.AidaClient.HostConfigTracker.instance().removeEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnUpdateAiCodeCompletionState);
     this.#cleanupAiCodeCompletion();
+    this.#aiCodeGenerationProvider?.dispose();
   }
 
   editorInitialized(editor: TextEditor): void {
@@ -116,6 +137,7 @@ export class AiCodeCompletionProvider {
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnUpdateAiCodeCompletionState);
     this.#aiCodeCompletionSetting.addChangeListener(this.#boundOnUpdateAiCodeCompletionState);
     void this.#updateAiCodeCompletionState();
+    this.#aiCodeGenerationProvider?.editorInitialized(editor);
   }
 
   clearCache(): void {