chrome-devtools-frontend 1.0.1592129 → 1.0.1592362

package/front_end/panels/elements/ElementsPanel.ts

@@ -385,6 +385,9 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     const matchedCascade = await this.#computedStyleModel.fetchMatchedCascade();
     this.#computedStyleWidget.nodeStyle = computedStyle;
     this.#computedStyleWidget.matchedStyles = matchedCascade;
+    if (matchedCascade) {
+      this.#computedStyleWidget.propertyTraces = this.#computedStyleModel.computePropertyTraces(matchedCascade);
+    }
   }
 
   private handleElementExpanded(): void {
@@ -1224,6 +1227,10 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
     this.splitWidget.setSidebarWidget(this.sidebarPaneView.tabbedPane());
   }
 
+  revealComputedStylesPane(): void {
+    this.sidebarPaneView?.tabbedPane().selectTab(SidebarPaneTabId.COMPUTED);
+  }
+
   private updateSidebarPosition(): void {
     if (this.sidebarPaneView?.tabbedPane().shouldHideOnDetach()) {
       return;
@@ -1471,11 +1478,23 @@ export class ContextMenuProvider implements
   }
 }
 
-export class DOMNodeRevealer implements Common.Revealer.Revealer<
-    SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode|SDK.RemoteObject.RemoteObject|SDK.DOMModel.AdoptedStyleSheet> {
+/**
+ * Wraps around the Node so we can pass it into the DOMNodeRevealer but
+ * distinguish that we want to reveal the computed styles panel.
+ */
+export class NodeComputedStyles {
+  readonly node: SDK.DOMModel.DOMNode;
+  constructor(node: SDK.DOMModel.DOMNode) {
+    this.node = node;
+  }
+}
+
+export class DOMNodeRevealer implements
+    Common.Revealer.Revealer<SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode|SDK.RemoteObject.RemoteObject|
+                             SDK.DOMModel.AdoptedStyleSheet|NodeComputedStyles> {
   reveal(
       node: SDK.DOMModel.DOMNode|SDK.DOMModel.DeferredDOMNode|SDK.RemoteObject.RemoteObject|
-      SDK.DOMModel.AdoptedStyleSheet,
+      SDK.DOMModel.AdoptedStyleSheet|NodeComputedStyles,
       omitFocus?: boolean): Promise<void> {
     const panel = ElementsPanel.instance();
     panel.pendingNodeReveal = true;
@@ -1501,6 +1520,10 @@ export class DOMNodeRevealer implements Common.Revealer.Revealer<
         onNodeResolved((node));
       } else if (node instanceof SDK.DOMModel.DeferredDOMNode) {
         (node).resolve(checkDeferredDOMNodeThenReveal);
+      } else if (node instanceof NodeComputedStyles) {
+        const elements = ElementsPanel.instance();
+        elements.revealComputedStylesPane();
+        onNodeResolved(node.node);
       } else {
         const domModel = node.runtimeModel().target().model(SDK.DOMModel.DOMModel);
         if (domModel) {

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -3543,6 +3543,39 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     return event.target === this.expandElement;
   }
 }
+
+export class GhostStylePropertyTreeElement extends StylePropertyTreeElement {
+  constructor(
+      stylesContainer: StylesContainer, section: StylePropertiesSection,
+      matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles, property: SDK.CSSProperty.CSSProperty) {
+    super({
+      stylesContainer,
+      section,
+      matchedStyles,
+      property,
+      isShorthand: false,
+      inherited: false,
+      overloaded: false,
+      newProperty: false,
+    });
+  }
+
+  override onattach(): void {
+    this.listItemElement.classList.add('ghost-row');
+    this.updateTitle();
+  }
+
+  override updateTitle(): void {
+    this.listItemElement.removeChildren();
+    this.nameElement = Renderer.renderNameElement(this.name);
+    this.listItemElement.appendChild(this.nameElement);
+    this.listItemElement.createChild('span', 'styles-name-value-separator').textContent = ': ';
+    this.valueElement = this.listItemElement.createChild('span');
+    this.valueElement.textContent = this.value;
+    this.listItemElement.createChild('span', 'styles-semicolon').textContent = ';';
+  }
+}
+
 export interface Context {
   expanded: boolean;
   hasChildren: boolean;

package/front_end/panels/elements/StylesAiCodeCompletionProvider.ts

@@ -5,8 +5,10 @@
 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 type * as SDK from '../../core/sdk/sdk.js';
 import * as AiCodeCompletion from '../../models/ai_code_completion/ai_code_completion.js';
-import type * as TextEditor from '../../ui/components/text_editor/text_editor.js';
+import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as TextEditor from '../../ui/components/text_editor/text_editor.js';
 
 export class StylesAiCodeCompletionProvider {
   #aidaClient: Host.AidaClient.AidaClient = new Host.AidaClient.AidaClient();
@@ -16,6 +18,11 @@ export class StylesAiCodeCompletionProvider {
 
   #boundOnUpdateAiCodeCompletionState = this.#updateAiCodeCompletionState.bind(this);
 
+  #debouncedRequestAidaSuggestion =
+      Common.Debouncer.debounce((prefix: string, suffix: string, cursorPositionAtRequest: number) => {
+        void this.#requestAidaSuggestion(prefix, suffix, cursorPositionAtRequest);
+      }, TextEditor.AiCodeCompletionProvider.AIDA_REQUEST_DEBOUNCE_TIMEOUT_MS);
+
   private constructor(aiCodeCompletionConfig: TextEditor.AiCodeCompletionProvider.AiCodeCompletionConfig) {
     const devtoolsLocale = i18n.DevToolsLocale.DevToolsLocale.instance();
     if (!AiCodeCompletion.AiCodeCompletion.AiCodeCompletion.isAiCodeCompletionStylesEnabled(devtoolsLocale.locale)) {
@@ -66,4 +73,144 @@ export class StylesAiCodeCompletionProvider {
       this.#cleanupAiCodeCompletion();
     }
   }
+
+  async triggerAiCodeCompletion(
+      text: string, cursorPosition: number, isEditingName: boolean, cssProperty: SDK.CSSProperty.CSSProperty,
+      cssModel: SDK.CSSModel.CSSModel): Promise<void> {
+    const styleSheetId = cssProperty.ownerStyle.styleSheetId;
+    if (!styleSheetId) {
+      return;
+    }
+
+    const header = cssModel.styleSheetHeaderForId(styleSheetId);
+    if (!header) {
+      return;
+    }
+
+    const contentData = await header.requestContentData();
+    if (TextUtils.ContentData.ContentData.isError(contentData)) {
+      AiCodeCompletion.debugLog('Error while fetching content from stylesheet', contentData.error);
+      return;
+    }
+
+    const content = contentData.text;
+    const propertyRange = cssProperty.range;
+    if (!content || !propertyRange) {
+      return;
+    }
+
+    const contentText = new TextUtils.Text.Text(content);
+    const propertyStartOffset = contentText.offsetFromPosition(propertyRange.startLine, propertyRange.startColumn);
+    const propertyEndOffset = contentText.offsetFromPosition(propertyRange.endLine, propertyRange.endColumn);
+    let prefix = content.substring(0, propertyStartOffset);
+    if (!isEditingName) {
+      const nameRange = cssProperty.nameRange();
+      if (nameRange) {
+        const nameEndOffset = contentText.offsetFromPosition(nameRange.endLine, nameRange.endColumn);
+        prefix = prefix + content.substring(propertyStartOffset, nameEndOffset) + ': ';
+      }
+    }
+    prefix = prefix + text;
+    const suffix = content.substring(propertyEndOffset);
+    // TODO(b/476098133): Consider adjusting cursor position
+    this.#debouncedRequestAidaSuggestion(prefix, suffix, cursorPosition);
+  }
+
+  async #requestAidaSuggestion(prefix: string, suffix: string, cursorPositionAtRequest: number): Promise<void> {
+    if (!this.#aiCodeCompletion) {
+      AiCodeCompletion.debugLog('Ai Code Completion is not initialized');
+      this.#aiCodeCompletionConfig?.onResponseReceived();
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionError);
+      return;
+    }
+
+    const startTime = performance.now();
+    this.#aiCodeCompletionConfig?.onRequestTriggered();
+    // Registering AiCodeCompletionRequestTriggered metric even if the request is served from cache
+    Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionRequestTriggered);
+
+    try {
+      const completionResponse = await this.#aiCodeCompletion.completeCode(
+          prefix, suffix, cursorPositionAtRequest, Host.AidaClient.AidaInferenceLanguage.CSS);
+      this.#aiCodeCompletionConfig?.onResponseReceived();
+      if (!completionResponse) {
+        return;
+      }
+
+      const {response, fromCache} = completionResponse;
+      if (!response) {
+        return;
+      }
+
+      const sampleResponse = await this.#generateSampleForRequest(response, prefix, suffix);
+      if (!sampleResponse) {
+        return;
+      }
+      if (fromCache) {
+        Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionResponseServedFromCache);
+      }
+      this.#aiCodeCompletionConfig?.setAiAutoCompletion?.({
+        text: sampleResponse.suggestionText,
+        from: cursorPositionAtRequest,
+        rpcGlobalId: sampleResponse.rpcGlobalId,
+        sampleId: sampleResponse.sampleId,
+        startTime,
+        clearCachedRequest: this.clearCache.bind(this),
+        onImpression: this.#aiCodeCompletion?.registerUserImpression.bind(this.#aiCodeCompletion),
+      });
+    } catch (e) {
+      AiCodeCompletion.debugLog('Error while fetching code completion suggestions from AIDA', e);
+      this.#aiCodeCompletionConfig?.onResponseReceived();
+      Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionError);
+    }
+  }
+
+  async #generateSampleForRequest(response: Host.AidaClient.CompletionResponse, prefix: string, suffix?: string):
+      Promise<{
+        suggestionText: string,
+        citations: Host.AidaClient.Citation[],
+        rpcGlobalId?: Host.AidaClient.RpcGlobalId,
+        sampleId?: number,
+      }|null> {
+    const suggestionSample = this.#pickSampleFromResponse(response);
+    if (!suggestionSample) {
+      return null;
+    }
+
+    const shouldBlock =
+        suggestionSample.attributionMetadata?.attributionAction === Host.AidaClient.RecitationAction.BLOCK;
+    if (shouldBlock) {
+      return null;
+    }
+
+    const suggestionText = TextEditor.AiCodeCompletionProvider.AiCodeCompletionProvider.trimSuggestionOverlap(
+        suggestionSample.generationString, suffix);
+    if (suggestionText.length === 0) {
+      return null;
+    }
+
+    return {
+      suggestionText,
+      sampleId: suggestionSample.sampleId,
+      citations: suggestionSample.attributionMetadata?.citations ?? [],
+      rpcGlobalId: response.metadata.rpcGlobalId,
+    };
+  }
+
+  #pickSampleFromResponse(response: Host.AidaClient.CompletionResponse): Host.AidaClient.GenerationSample|null {
+    if (!response.generatedSamples.length) {
+      return null;
+    }
+
+    const completionHint = this.#aiCodeCompletionConfig?.getCompletionHint?.();
+    if (!completionHint) {
+      return response.generatedSamples[0];
+    }
+    return response.generatedSamples.find(sample => sample.generationString.startsWith(completionHint)) ??
+        response.generatedSamples[0];
+  }
+
+  clearCache(): void {
+    this.#aiCodeCompletion?.clearCachedRequest();
+  }
 }

package/front_end/panels/elements/elements-meta.ts

@@ -8,7 +8,7 @@ import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
-import type * as Elements from './elements.js';
+import * as Elements from './elements.js';
 
 const UIStrings = {
   /**
@@ -614,10 +614,8 @@ UI.ViewManager.registerLocationResolver({
 Common.Revealer.registerRevealer({
   contextTypes() {
     return [
-      SDK.DOMModel.DOMNode,
-      SDK.DOMModel.DeferredDOMNode,
-      SDK.RemoteObject.RemoteObject,
-      SDK.DOMModel.AdoptedStyleSheet,
+      SDK.DOMModel.DOMNode, SDK.DOMModel.DeferredDOMNode, SDK.RemoteObject.RemoteObject, SDK.DOMModel.AdoptedStyleSheet,
+      Elements.ElementsPanel.NodeComputedStyles
     ];
   },
   destination: Common.Revealer.RevealerDestination.ELEMENTS_PANEL,

package/front_end/panels/elements/stylePropertiesTreeOutline.css

@@ -80,6 +80,12 @@
     padding-top: 4px;
     padding-bottom: 3px;
   }
+
+  &.ghost-row {
+    opacity: 50%;
+    font-style: italic;
+    pointer-events: none;
+  }
 }
 
 .tree-outline > li {

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -163,6 +163,11 @@ const UIStrings = {
    * @description Tooltip of the rotate/screen orientation button.
    */
   screenOrientationOptions: 'Screen orientation options',
+  /**
+   * @description Tooltip shown on the rotate button when screen orientation is locked by the page
+   * via screen.orientation.lock().
+   */
+  screenOrientationLocked: 'Screen orientation is locked by the page',
   /**
    * @description Tooltip for a button which turns on/off dual-screen mode, which emulates devices
    * like tablets which have two screens.
@@ -617,6 +622,9 @@ export class DeviceModeToolbar {
   private modeMenuClicked(event: {
     data: Event,
   }): void {
+    if (this.model.isScreenOrientationLocked()) {
+      return;
+    }
     const device = this.model.device();
     const model = this.model;
     const autoAdjustScaleSetting = this.autoAdjustScaleSetting;
@@ -804,6 +812,23 @@ export class DeviceModeToolbar {
       }
       this.persistenceSetting.set(value);
     }
+
+    // When screen orientation is locked by the page (via screen.orientation.lock()),
+    // disable the rotate button to prevent user-initiated rotation.
+    // When unlocked, restore the button to its normal state.
+    if (this.model.isScreenOrientationLocked()) {
+      this.modeButton.setEnabled(false);
+      setTitleForButton(this.modeButton, i18nString(UIStrings.screenOrientationLocked));
+    } else if (this.cachedModelDevice) {
+      const modeCount = this.cachedModelDevice.modes.length;
+      this.modeButton.setEnabled(modeCount >= 2);
+      setTitleForButton(
+          this.modeButton,
+          modeCount === 2 ? i18nString(UIStrings.rotate) : i18nString(UIStrings.screenOrientationOptions));
+    } else if (this.model.type() === EmulationModel.DeviceModeModel.Type.Responsive) {
+      this.modeButton.setEnabled(true);
+      setTitleForButton(this.modeButton, i18nString(UIStrings.rotate));
+    }
   }
 
   restore(): void {

package/front_end/panels/timeline/components/metricCard.css

@@ -10,10 +10,6 @@
   background-color: var(--sys-color-surface3);
   height: 100%;
   box-sizing: border-box;
-
-  &:not(:hover) .title-help {
-    visibility: hidden;
-  }
 }
 
 .title {

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

@@ -56,6 +56,17 @@ export interface AiCodeCompletionConfig {
   onRequestTriggered: () => void;
   onResponseReceived: () => void;
   panel: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
+  getCompletionHint?: () => string | null;
+  getCurrentText?: () => string;
+  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;
 }
 
 export const DELAY_BEFORE_SHOWING_RESPONSE_MS = 500;
@@ -401,7 +412,7 @@ export class AiCodeCompletionProvider {
       return null;
     }
 
-    const suggestionText = this.#trimSuggestionOverlap(suggestionSample.generationString, suffix);
+    const suggestionText = AiCodeCompletionProvider.trimSuggestionOverlap(suggestionSample.generationString, suffix);
     if (suggestionText.length === 0) {
       return null;
     }
@@ -442,7 +453,7 @@ export class AiCodeCompletionProvider {
   /**
    * Removes the end of a suggestion if it overlaps with the start of the suffix.
    */
-  #trimSuggestionOverlap(generationString: string, suffix?: string): string {
+  static trimSuggestionOverlap(generationString: string, suffix?: string): string {
     if (!suffix) {
       return generationString;
     }

package/front_end/ui/legacy/components/cookie_table/CookiesTable.ts

@@ -183,26 +183,26 @@ export interface CookiesTableData {
 }
 
 export class CookiesTable extends UI.Widget.VBox {
-  private saveCallback?: ((arg0: SDK.Cookie.Cookie, arg1: SDK.Cookie.Cookie|null) => Promise<boolean>);
-  private readonly refreshCallback?: (() => void);
-  private readonly selectedCallback?: (() => void);
-  private readonly deleteCallback?: ((arg0: SDK.Cookie.Cookie, arg1: () => void) => void);
+  #saveCallback?: ((arg0: SDK.Cookie.Cookie, arg1: SDK.Cookie.Cookie|null) => Promise<boolean>);
+  #refreshCallback?: (() => void);
+  #selectedCallback?: ((arg0: SDK.Cookie.Cookie|null) => void);
+  #deleteCallback?: ((arg0: SDK.Cookie.Cookie, arg1: () => void) => void);
   private lastEditedColumnId: string|null;
   private data: CookieData[] = [];
   private cookies: SDK.Cookie.Cookie[] = [];
-  private cookieDomain: string;
+  #cookieDomain: string;
   private cookieToBlockedReasons: ReadonlyMap<SDK.Cookie.Cookie, SDK.CookieModel.BlockedReason[]>|null;
   private cookieToExemptionReason: ReadonlyMap<SDK.Cookie.Cookie, SDK.CookieModel.ExemptionReason>|null;
   private readonly view: ViewFunction;
   private selectedKey?: string;
-  private readonly editable: boolean;
+  #editable: boolean;
   private renderInline: boolean;
   private readonly schemeBindingEnabled: boolean;
   private readonly portBindingEnabled: boolean;
   constructor(
       element?: HTMLElement, renderInline?: boolean,
       saveCallback?: ((arg0: SDK.Cookie.Cookie, arg1: SDK.Cookie.Cookie|null) => Promise<boolean>),
-      refreshCallback?: (() => void), selectedCallback?: (() => void),
+      refreshCallback?: (() => void), selectedCallback?: ((arg0: SDK.Cookie.Cookie|null) => void),
       deleteCallback?: ((arg0: SDK.Cookie.Cookie, arg1: () => void) => void), view?: ViewFunction) {
     super(element);
     if (!view) {
@@ -302,11 +302,11 @@ export class CookiesTable extends UI.Widget.VBox {
 
     this.element.classList.add('cookies-table');
 
-    this.saveCallback = saveCallback;
-    this.refreshCallback = refreshCallback;
-    this.deleteCallback = deleteCallback;
+    this.#saveCallback = saveCallback;
+    this.#refreshCallback = refreshCallback;
+    this.#deleteCallback = deleteCallback;
 
-    this.editable = Boolean(saveCallback);
+    this.#editable = Boolean(saveCallback);
     const {devToolsEnableOriginBoundCookies} = Root.Runtime.hostConfig;
 
     this.schemeBindingEnabled = Boolean(devToolsEnableOriginBoundCookies?.schemeBindingEnabled);
@@ -316,13 +316,13 @@ export class CookiesTable extends UI.Widget.VBox {
 
     this.renderInline = Boolean(renderInline);
 
-    this.selectedCallback = selectedCallback;
+    this.#selectedCallback = selectedCallback;
 
     this.lastEditedColumnId = null;
 
     this.data = [];
 
-    this.cookieDomain = '';
+    this.#cookieDomain = '';
 
     this.cookieToBlockedReasons = null;
 
@@ -335,6 +335,26 @@ export class CookiesTable extends UI.Widget.VBox {
     this.setCookies(data.cookies, data.cookieToBlockedReasons, data.cookieToExemptionReason);
   }
 
+  set saveCallback(callback: (arg0: SDK.Cookie.Cookie, arg1: SDK.Cookie.Cookie|null) => Promise<boolean>) {
+    this.#saveCallback = callback;
+  }
+
+  set refreshCallback(callback: () => void) {
+    this.#refreshCallback = callback;
+  }
+
+  set selectedCallback(callback: (arg0: SDK.Cookie.Cookie|null) => void) {
+    this.#selectedCallback = callback;
+  }
+
+  set deleteCallback(callback: (arg0: SDK.Cookie.Cookie, arg1: () => void) => void) {
+    this.#deleteCallback = callback;
+  }
+
+  set editable(value: boolean) {
+    this.#editable = value;
+  }
+
   set inline(value: boolean) {
     this.renderInline = value;
     this.requestUpdate();
@@ -357,8 +377,8 @@ export class CookiesTable extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
-  setCookieDomain(cookieDomain: string): void {
-    this.cookieDomain = cookieDomain;
+  set cookieDomain(cookieDomain: string) {
+    this.#cookieDomain = cookieDomain;
   }
 
   selectedCookie(): SDK.Cookie.Cookie|null {
@@ -374,7 +394,7 @@ export class CookiesTable extends UI.Widget.VBox {
     const input: ViewInput = {
       data: this.data,
       selectedKey: this.selectedKey,
-      editable: this.editable,
+      editable: this.#editable,
       renderInline: this.renderInline,
       schemeBindingEnabled: this.schemeBindingEnabled,
       portBindingEnabled: this.portBindingEnabled,
@@ -391,13 +411,13 @@ export class CookiesTable extends UI.Widget.VBox {
 
   private onSelect(key: string|undefined): void {
     this.selectedKey = key;
-    this.selectedCallback?.();
+    this.#selectedCallback?.(this.selectedCookie());
   }
 
   private onDeleteCookie(data: CookieData): void {
     const cookie = this.cookies.find(cookie => cookie.key() === data.key);
-    if (cookie && this.deleteCallback) {
-      this.deleteCallback(cookie, () => this.refresh());
+    if (cookie && this.#deleteCallback) {
+      this.#deleteCallback(cookie, () => this.refresh());
     }
   }
 
@@ -434,7 +454,7 @@ export class CookiesTable extends UI.Widget.VBox {
       data[SDK.Cookie.Attribute.VALUE] = '';
     }
     if (data[SDK.Cookie.Attribute.DOMAIN] === undefined) {
-      data[SDK.Cookie.Attribute.DOMAIN] = this.cookieDomain;
+      data[SDK.Cookie.Attribute.DOMAIN] = this.#cookieDomain;
     }
     if (data[SDK.Cookie.Attribute.PATH] === undefined) {
       data[SDK.Cookie.Attribute.PATH] = '/';
@@ -448,11 +468,11 @@ export class CookiesTable extends UI.Widget.VBox {
   }
 
   private saveCookie(newCookieData: CookieData, oldCookie?: SDK.Cookie.Cookie): void {
-    if (!this.saveCallback) {
+    if (!this.#saveCallback) {
       return;
     }
     const newCookie = this.createCookieFromData(newCookieData);
-    void this.saveCallback(newCookie, oldCookie ?? null).then(success => {
+    void this.#saveCallback(newCookie, oldCookie ?? null).then(success => {
       if (!success) {
         newCookieData.dirty = true;
       }
@@ -591,8 +611,8 @@ export class CookiesTable extends UI.Widget.VBox {
   }
 
   private refresh(): void {
-    if (this.refreshCallback) {
-      this.refreshCallback();
+    if (this.#refreshCallback) {
+      this.#refreshCallback();
     }
   }
 

package/front_end/ui/visual_logging/Debugging.ts

@@ -878,6 +878,10 @@ function checkPendingEventExpectation(): void {
     }
     if (!found) {
       processMissingEvents(pendingEventExpectation, expectedEventIndex, matchedImpressions);
+      if (!pendingEventExpectation.missingEvents?.length) {
+        numMatchedEvents = actualEventIndex;
+        pendingEventExpectation.success();
+      }
       return;
     }
   }

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -2058,6 +2058,7 @@ export const knownContextValues = new Set([
   'java-script-disabled-true',
   'javascript',
   'javascript-context',
+  'jpeg-xl',
   'jpeg-xl-format-disabled',
   'jpeg-xl-format-disabled-true',
   'jpg-header',

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1592129"
+  "version": "1.0.1592362"
 }