chrome-devtools-frontend 1.0.1665921 → 1.0.1667564

package/front_end/panels/application/BackgroundServiceView.ts

@@ -17,6 +17,7 @@ import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 // eslint-disable-next-line @devtools/es-modules-import
 import emptyWidgetStyles from '../../ui/legacy/emptyWidget.css.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import {type BackgroundServiceModel, Events} from './BackgroundServiceModel.js';
@@ -554,26 +555,23 @@ export class EventDataNode extends DataGrid.DataGrid.DataGridNode<EventData> {
     preview.element.classList.add('background-service-metadata');
     preview.element.setAttribute('jslog', `${VisualLogging.section('metadata')}`);
 
-    for (const entry of this.eventMetadata) {
-      const div = document.createElement('div');
-      div.classList.add('background-service-metadata-entry');
-      div.createChild('div', 'background-service-metadata-name').textContent = entry.key + ': ';
-      if (entry.value) {
-        div.createChild('div', 'background-service-metadata-value source-code').textContent = entry.value;
-      } else {
-        div.createChild('div', 'background-service-metadata-value background-service-empty-value').textContent =
-            i18nString(UIStrings.empty);
-      }
-      preview.element.appendChild(div);
-    }
-
-    if (!preview.element.children.length) {
-      const div = document.createElement('div');
-      div.classList.add('background-service-metadata-entry');
-      div.createChild('div', 'background-service-metadata-name background-service-empty-value').textContent =
-          i18nString(UIStrings.noMetadataForThisEvent);
-      preview.element.appendChild(div);
-    }
+    // clang-format off
+    // eslint-disable-next-line @devtools/no-lit-render-outside-of-view
+    render(
+      html`${this.eventMetadata.length > 0 ? this.eventMetadata.map(entry => html`
+        <div class="background-service-metadata-entry">
+          <div class="background-service-metadata-name">${entry.key}: </div>${
+            entry.value ?
+            html`<div class="background-service-metadata-value source-code">${entry.value}</div>` :
+            html`<div class="background-service-metadata-value background-service-empty-value">${i18nString(UIStrings.empty)}</div>`}
+        </div>
+      `) : html`
+        <div class="background-service-metadata-entry">
+          <div class="background-service-metadata-name background-service-empty-value">${i18nString(UIStrings.noMetadataForThisEvent)}</div>
+        </div>
+      `}`,
+      preview.element, {host: this});
+    // clang-format on
 
     return preview;
   }

package/front_end/panels/application/DOMStorageItemsView.ts

@@ -1,7 +1,6 @@
 // Copyright 2021 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-imperative-dom-api */
 
 /*
  * Copyright (C) 2008 Nokia Inc.  All rights reserved.
@@ -104,7 +103,7 @@ export class DOMStorageItemsView extends KeyValueStorageItemsView {
     Common.EventTarget.removeEventListeners(this.eventListeners);
     this.domStorage = domStorage;
     const storageKind = domStorage.isLocalStorage ? 'local-storage-data' : 'session-storage-data';
-    this.element.setAttribute('jslog', `${VisualLogging.pane().context(storageKind)}`);
+    this.jslog = `${VisualLogging.pane().context(storageKind)}`;
     if (domStorage.storageKey) {
       this.toolbar?.setStorageKey(domStorage.storageKey);
     }

package/front_end/panels/application/KeyValueStorageItemsView.ts

@@ -436,6 +436,18 @@ export abstract class KeyValueStorageItemsView extends UI.Widget.VBox {
     }
   }
 
+  protected set jslog(jslog: string|undefined) {
+    if (this.#jslog === jslog) {
+      return;
+    }
+    this.#jslog = jslog;
+    this.performUpdate();
+  }
+
+  protected get jslog(): string|undefined {
+    return this.#jslog;
+  }
+
   set editable(editable: boolean) {
     this.#editable = editable;
     this.performUpdate();

package/front_end/panels/autofill/AutofillView.ts

@@ -260,24 +260,24 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
       <style>${UI.inspectorCommonStyles}</style>
       <main>
         <div class="content-container" jslog=${VisualLogging.pane('autofill')}>
-          <div class="right-to-left" role="region" aria-label=${i18nString(UIStrings.addressPreview)}>
-            <div class="header">
-              <div class="label-container">
-                <devtools-checkbox
-                    ${bindToSetting(input.showTestAddressesInAutofillMenuSetting)}
-                    title=${i18nString(UIStrings.showTestAddressesInAutofillMenu)}>
-                  ${i18nString(UIStrings.showTestAddressesInAutofillMenu)}
-                </devtools-checkbox>
-              </div>
-              <div class="label-container">
-                <devtools-checkbox
-                    ${bindToSetting(input.autoOpenViewSetting)}
-                    title=${i18nString(UIStrings.autoShowTooltip)}>
-                  ${i18nString(UIStrings.autoShow)}
-                </devtools-checkbox>
-              </div>
-              <devtools-link href=${AUTOFILL_FEEDBACK_URL} class="feedback link" jslogcontext="feedback">${i18nString(UIStrings.sendFeedback)}</devtools-link>
+          <div class="header">
+            <div class="label-container">
+              <devtools-checkbox
+                  ${bindToSetting(input.showTestAddressesInAutofillMenuSetting)}
+                  title=${i18nString(UIStrings.showTestAddressesInAutofillMenu)}>
+                ${i18nString(UIStrings.showTestAddressesInAutofillMenu)}
+              </devtools-checkbox>
+            </div>
+            <div class="label-container">
+              <devtools-checkbox
+                  ${bindToSetting(input.autoOpenViewSetting)}
+                  title=${i18nString(UIStrings.autoShowTooltip)}>
+                ${i18nString(UIStrings.autoShow)}
+              </devtools-checkbox>
             </div>
+            <devtools-link href=${AUTOFILL_FEEDBACK_URL} class="feedback link" jslogcontext="feedback">${i18nString(UIStrings.sendFeedback)}</devtools-link>
+          </div>
+          <div role="region" aria-label=${i18nString(UIStrings.addressPreview)}>
             ${renderAddress()}
           </div>
           ${renderFilledFields()}

package/front_end/panels/autofill/autofillView.css

@@ -7,10 +7,12 @@
 @scope to (devtools-widget > *) {
   main {
     height: 100%;
+    overflow: auto;
   }
 
   .header {
     display: flex;
+    flex-wrap: wrap;
     border-bottom: 1px solid var(--sys-color-divider);
     width: 100%;
   }
@@ -20,11 +22,12 @@
     display: flex;
     justify-content: center;
     align-items: center;
+    overflow: auto;
   }
 
   .address {
     padding: 10px;
-    margin-right: auto;
+    border-bottom: 1px solid var(--sys-color-divider);
   }
 
   .filled-fields-grid {
@@ -36,10 +39,12 @@
     display: flex;
     flex-flow: column;
     height: 100%;
+    overflow: auto;
   }
 
   .grid-wrapper {
     flex-grow: 1;
+    min-height: 0;
   }
 
   devtools-data-grid {
@@ -52,13 +57,6 @@
     align-items: center;
   }
 
-  .right-to-left {
-    border-bottom: 1px solid var(--sys-color-divider);
-    display: flex;
-    flex-flow: row-reverse wrap;
-    justify-content: flex-end;
-  }
-
   .label-container {
     padding: 5px;
     display: flex;
@@ -68,6 +66,7 @@
   .top-left-corner {
     border-bottom: 1px solid var(--sys-color-divider);
     display: flex;
+    flex-wrap: wrap;
     padding: 5px;
     gap: 10px;
   }

package/front_end/panels/browser_debugger/CategorizedBreakpointsSidebarPane.ts

@@ -14,23 +14,23 @@ import categorizedBreakpointsSidebarPaneStyles from './categorizedBreakpointsSid
 
 const UIStrings = {
   /**
-   * @description Category of breakpoints
+   * @description Category of event listener breakpoints for Ad Auction Worklet events.
    */
-  auctionWorklet: 'Ad Auction Worklet',
+  auctionWorklet: 'Ad auction worklet',
   /**
-   * @description Text that refers to the animation of the web page
+   * @description Category of event listener breakpoints for animation events.
    */
   animation: 'Animation',
   /**
-   * @description Screen reader description of a hit breakpoint in the Sources panel
+   * @description Screen reader description of a hit breakpoint in the Sources panel.
    */
   breakpointHit: 'breakpoint hit',
   /**
-   * @description Text in DOMDebugger Model
+   * @description Category of event listener breakpoints for canvas events.
    */
   canvas: 'Canvas',
   /**
-   * @description Text in DOMDebugger Model
+   * @description Category of event listener breakpoints for clipboard events.
    */
   clipboard: 'Clipboard',
   /**
@@ -38,87 +38,87 @@ const UIStrings = {
    */
   control: 'Control',
   /**
-   * @description Text that refers to device such as a phone
+   * @description Category of event listener breakpoints for device events.
    */
   device: 'Device',
   /**
-   * @description Text in DOMDebugger Model
+   * @description Category of event listener breakpoints for DOM mutation events.
    */
-  domMutation: 'DOM Mutation',
+  domMutation: 'DOM mutation',
   /**
-   * @description Text in DOMDebugger Model
+   * @description Category of event listener breakpoints for drag and drop events.
    */
   dragDrop: 'Drag / drop',
   /**
-   * @description Title for a group of cities
+   * @description Category of event listener breakpoints for geolocation events.
    */
   geolocation: 'Geolocation',
   /**
-   * @description Text in DOMDebugger Model
+   * @description Category of event listener breakpoints for keyboard events.
    */
   keyboard: 'Keyboard',
   /**
-   * @description Text to load something
+   * @description Category of event listener breakpoints for load events.
    */
   load: 'Load',
   /**
-   * @description Text that appears on a button for the media resource type filter.
+   * @description Category of event listener breakpoints for media events.
    */
   media: 'Media',
   /**
-   * @description Text in DOMDebugger Model
+   * @description Category of event listener breakpoints for mouse events.
    */
   mouse: 'Mouse',
   /**
-   * @description Text in DOMDebugger Model
+   * @description Category of event listener breakpoints for notification events.
    */
   notification: 'Notification',
   /**
-   * @description Text to parse something
+   * @description Category of event listener breakpoints for parse events.
    */
   parse: 'Parse',
   /**
-   * @description Text in DOMDebugger Model
+   * @description Category of event listener breakpoints for picture-in-picture events.
    */
-  pictureinpicture: 'Picture-in-Picture',
+  pictureinpicture: 'Picture-in-picture',
   /**
-   * @description Text in DOMDebugger Model
+   * @description Category of event listener breakpoints for pointer events.
    */
   pointer: 'Pointer',
   /**
-   * @description Label for a group of JavaScript files
+   * @description Category of event listener breakpoints for script events.
    */
   script: 'Script',
   /**
-   * @description Category of breakpoints
+   * @description Category of event listener breakpoints for shared storage worklet events.
    */
-  sharedStorageWorklet: 'Shared Storage Worklet',
+  sharedStorageWorklet: 'Shared storage worklet',
   /**
-   * @description Text in DOMDebugger Model
+   * @description Category of event listener breakpoints for timer events.
    */
   timer: 'Timer',
   /**
-   * @description Text for the touch type to simulate on a device
+   * @description Category of event listener breakpoints for touch events.
    */
   touch: 'Touch',
   /**
-   * @description Title for a category of breakpoints on Trusted Type violations
+   * @description Category of event listener breakpoints for Trusted Type violations.
    */
-  trustedTypeViolations: 'Trusted Type Violations',
+  trustedTypeViolations: '`Trusted Type` violations',
   /**
-   * @description Title of the WebAudio tool
+   * @description Category of event listener breakpoints for WebAudio events.
    */
   webaudio: 'WebAudio',
   /**
-   * @description Text in DOMDebugger Model
+   * @description Category of event listener breakpoints for window events.
    */
   window: 'Window',
   /**
-   * @description Text for the service worker type.
+   * @description Category of event listener breakpoints for worker events.
    */
   worker: 'Worker',
   /**
-   * @description Text that appears on a button for the xhr resource type filter.
+   * @description Category of event listener breakpoints for XHR events.
    */
   xhr: 'XHR',
 } as const;

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -17,25 +17,25 @@ import domBreakpointsSidebarPaneStyles from './domBreakpointsSidebarPane.css.js'
 
 const UIStrings = {
   /**
-   * @description Header text to indicate there are no breakpoints
+   * @description Header text to indicate there are no DOM breakpoints.
    */
   noBreakpoints: 'No DOM breakpoints',
   /**
-   * @description DOM breakpoints description that shows if no DOM breakpoints are set
+   * @description Description shown when no DOM breakpoints are set.
    */
   domBreakpointsDescription: 'DOM breakpoints pause on the code that changes a DOM node or its children.',
   /**
-   * @description Accessibility label for the DOM breakpoints list in the Sources panel
+   * @description Accessibility label for the DOM breakpoints list in the Sources panel.
    */
-  domBreakpointsList: 'DOM Breakpoints list',
+  domBreakpointsList: 'DOM breakpoints list',
   /**
-   * @description Text with two placeholders separated by a colon
+   * @description Text with two placeholders separated by a colon.
    * @example {Node removed} PH1
    * @example {div#id1} PH2
    */
   sS: '{PH1}: {PH2}',
   /**
-   * @description Text with three placeholders separated by a colon and a comma
+   * @description Text with three placeholders separated by a colon and a comma.
    * @example {Node removed} PH1
    * @example {div#id1} PH2
    * @example {checked} PH3
@@ -55,7 +55,7 @@ const UIStrings = {
    */
   sBreakpointHit: '{PH1} breakpoint hit',
   /**
-   * @description Screen reader description of a hit breakpoint in the Sources panel
+   * @description Screen reader description of a hit breakpoint in the Sources panel.
    */
   breakpointHit: 'breakpoint hit',
   /**
@@ -63,30 +63,30 @@ const UIStrings = {
    */
   revealDomNodeInElementsPanel: 'Reveal DOM node in Elements panel',
   /**
-   * @description Text to remove a breakpoint
+   * @description Context menu item to remove a breakpoint.
    */
   removeBreakpoint: 'Remove breakpoint',
   /**
-   * @description A context menu item in the DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+   * @description Context menu item in the DOM Breakpoints sidebar of the Sources panel or the Elements panel to remove all DOM breakpoints.
    */
   removeAllDomBreakpoints: 'Remove all DOM breakpoints',
   /**
-   * @description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+   * @description Label for subtree modified DOM breakpoint type.
    */
   subtreeModified: 'Subtree modified',
   /**
-   * @description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+   * @description Label for attribute modified DOM breakpoint type.
    */
   attributeModified: 'Attribute modified',
   /**
-   * @description Text in DOMBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+   * @description Label for node removed DOM breakpoint type.
    */
   nodeRemoved: 'Node removed',
   /**
-   * @description Entry in context menu of the elements pane, allowing developers to select a DOM
+   * @description Entry in context menu of the Elements panel, allowing developers to select a DOM
    * breakpoint for the element that they have right-clicked on. Short for the action 'set a
-   * breakpoint on this DOM Element'. A breakpoint pauses the website when the code reaches a
-   * specified line, or when a specific action happen (in this case, when the DOM Element is
+   * breakpoint on this DOM element'. A breakpoint pauses the website when the code reaches a
+   * specified line, or when a specific action happens (in this case, when the DOM element is
    * modified).
    */
   breakOn: 'Break on',

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -18,11 +18,11 @@ const {classMap, ifDefined, ref} = Directives;
 
 const UIStrings = {
   /**
-   * @description Title of the 'XHR/fetch Breakpoints' tool in the bottom sidebar of the Sources tool
+   * @description Title of the XHR/fetch breakpoints sidebar in the Sources panel.
    */
-  xhrfetchBreakpoints: 'XHR/fetch Breakpoints',
+  xhrfetchBreakpoints: 'XHR/fetch breakpoints',
   /**
-   * @description Text to indicate there are no breakpoints
+   * @description Text to indicate there are no XHR/fetch breakpoints.
    */
   noBreakpoints: 'No breakpoints',
   /**
@@ -30,36 +30,36 @@ const UIStrings = {
    */
   addXhrfetchBreakpoint: 'Add XHR/fetch breakpoint',
   /**
-   * @description Text to add a breakpoint
+   * @description Context menu item to add an XHR/fetch breakpoint.
    */
   addBreakpoint: 'Add breakpoint',
   /**
-   * @description Input element container text content in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+   * @description Text preceding the input field to add an XHR/fetch breakpoint in the Sources panel.
    */
   breakWhenUrlContains: 'Break when URL contains:',
   /**
-   * @description Accessible label for XHR/fetch breakpoint text input
+   * @description Accessible label for XHR/fetch breakpoint text input.
    */
-  urlBreakpoint: 'URL Breakpoint',
+  urlBreakpoint: 'URL breakpoint',
   /**
-   * @description Text in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+   * @description Label for an XHR/fetch breakpoint targeting a specific URL in the Sources panel.
    * @example {example.com} PH1
    */
   urlContainsS: 'URL contains "{PH1}"',
   /**
-   * @description Text in XHRBreakpoints Sidebar Pane of the JavaScript Debugging pane in the Sources panel or the DOM Breakpoints pane in the Elements panel
+   * @description Label for an XHR/fetch breakpoint matching any XHR or fetch request in the Sources panel.
    */
   anyXhrOrFetch: 'Any XHR or fetch',
   /**
-   * @description Screen reader description of a hit breakpoint in the Sources panel
+   * @description Screen reader description of a hit breakpoint in the Sources panel.
    */
   breakpointHit: 'breakpoint hit',
   /**
-   * @description Text to remove all breakpoints
+   * @description Context menu item to remove all XHR/fetch breakpoints.
    */
   removeAllBreakpoints: 'Remove all breakpoints',
   /**
-   * @description Text to remove a breakpoint
+   * @description Context menu item to remove an XHR/fetch breakpoint.
    */
   removeBreakpoint: 'Remove breakpoint',
 } as const;

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

@@ -12,71 +12,71 @@ import type * as BrowserDebugger from './browser_debugger.js';
 
 const UIStrings = {
   /**
-   * @description Command for showing the 'Event Listener Breakpoints' tool
+   * @description Command for showing the Event listener breakpoints sidebar in the Sources panel.
    */
-  showEventListenerBreakpoints: 'Show Event Listener Breakpoints',
+  showEventListenerBreakpoints: 'Show Event listener breakpoints',
   /**
-   * @description Title of the 'Event Listener Breakpoints' tool in the bottom sidebar of the Sources tool
+   * @description Title of the Event listener breakpoints sidebar in the Sources panel.
    */
-  eventListenerBreakpoints: 'Event Listener Breakpoints',
+  eventListenerBreakpoints: 'Event listener breakpoints',
   /**
-   * @description Title for showing the 'CSP Violation Breakpoints' tool in the Sources panel
+   * @description Command for showing the CSP violation breakpoints sidebar in the Sources panel.
    */
-  showCspViolationBreakpoints: 'Show CSP Violation Breakpoints',
+  showCspViolationBreakpoints: 'Show CSP violation breakpoints',
   /**
-   * @description Title of the 'CSP Violation Breakpoints' tool in the bottom sidebar of the Sources tool
+   * @description Title of the CSP violation breakpoints sidebar in the Sources panel.
    */
-  cspViolationBreakpoints: 'CSP Violation Breakpoints',
+  cspViolationBreakpoints: 'CSP violation breakpoints',
   /**
-   * @description Command for showing the 'XHR/fetch Breakpoints' in the sources panel
+   * @description Command for showing the XHR/fetch breakpoints sidebar in the Sources panel.
    */
-  showXhrfetchBreakpoints: 'Show XHR/fetch Breakpoints',
+  showXhrfetchBreakpoints: 'Show XHR/fetch breakpoints',
   /**
-   * @description Title of the 'XHR/fetch Breakpoints' tool in the bottom sidebar of the Sources tool
+   * @description Title of the XHR/fetch breakpoints sidebar in the Sources panel.
    */
-  xhrfetchBreakpoints: 'XHR/fetch Breakpoints',
+  xhrfetchBreakpoints: 'XHR/fetch breakpoints',
   /**
-   * @description Command for showing the 'DOM Breakpoints' tool in the Elements panel
+   * @description Command for showing the DOM breakpoints sidebar.
    */
-  showDomBreakpoints: 'Show DOM Breakpoints',
+  showDomBreakpoints: 'Show DOM breakpoints',
   /**
-   * @description Title of the 'DOM Breakpoints' tool in the bottom sidebar of the Sources tool
+   * @description Title of the DOM breakpoints sidebar.
    */
-  domBreakpoints: 'DOM Breakpoints',
+  domBreakpoints: 'DOM breakpoints',
   /**
-   * @description Command for showing the 'Global Listeners' tool in the sources panel
+   * @description Command for showing the Global listeners sidebar in the Sources panel.
    */
-  showGlobalListeners: 'Show Global Listeners',
+  showGlobalListeners: 'Show Global listeners',
   /**
-   * @description Title of the 'Global Listeners' tool in the bottom sidebar of the Sources tool
+   * @description Title of the Global listeners sidebar in the Sources panel.
    */
-  globalListeners: 'Global Listeners',
+  globalListeners: 'Global listeners',
   /**
-   * @description Text that refers to one or a group of webpages
+   * @description Title of the Page tab in the Sources panel.
    */
   page: 'Page',
   /**
-   * @description Command for showing the 'Page' tab in the Sources panel
+   * @description Command for showing the Page tab in the Sources panel.
    */
   showPage: 'Show Page',
   /**
-   * @description Title as part of a tool to override existing configurations
+   * @description Title of the Overrides tab in the Sources panel.
    */
   overrides: 'Overrides',
   /**
-   * @description Command for showing the 'Overrides' tool in the Sources panel
+   * @description Command for showing the Overrides tab in the Sources panel.
    */
   showOverrides: 'Show Overrides',
   /**
-   * @description Title for a type of source files
+   * @description Title of the Content scripts tab in the Sources panel.
    */
   contentScripts: 'Content scripts',
   /**
-   * @description Command for showing the 'Content scripts' tool in the sources panel
+   * @description Command for showing the Content scripts tab in the Sources panel.
    */
   showContentScripts: 'Show Content scripts',
   /**
-   * @description Label for a button in the sources panel that refreshes the list of global event listeners.
+   * @description Label for a button in the Sources panel that refreshes the list of global event listeners.
    */
   refreshGlobalListeners: 'Refresh global listeners',
 } as const;

package/front_end/panels/common/AiCodeCompletionDisclaimer.ts

@@ -5,6 +5,7 @@
 import '../../ui/components/spinners/spinners.js';
 import '../../ui/components/tooltips/tooltips.js';
 
+import type * 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 Root from '../../core/root/root.js';
@@ -196,7 +197,8 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
   #panel?: AiCodeCompletion.AiCodeCompletion.ContextFlavor;
 
   #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
-  #boundOnAidaAvailabilityChange: () => Promise<void>;
+  #boundOnAidaAvailabilityChange:
+      (ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>) => void;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_SUMMARY_TOOLBAR_VIEW) {
     super(element);
@@ -249,14 +251,17 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
     this.requestUpdate();
   }
 
-  async #onAidaAvailabilityChange(): Promise<void> {
-    const currentAidaAvailability = await Host.AidaClient.AidaClient.checkAccessPreconditions();
-    if (currentAidaAvailability !== this.#aidaAvailability) {
-      this.#aidaAvailability = currentAidaAvailability;
+  #updateAidaAvailability(aidaAvailability: Host.AidaClient.AidaAccessPreconditions): void {
+    if (aidaAvailability !== this.#aidaAvailability) {
+      this.#aidaAvailability = aidaAvailability;
       this.requestUpdate();
     }
   }
 
+  #onAidaAvailabilityChange(ev: Common.EventTarget.EventTargetEvent<Host.AidaClient.AidaAccessPreconditions>): void {
+    this.#updateAidaAvailability(ev.data);
+  }
+
   #onManageInSettingsTooltipClick(): void {
     this.#viewOutput.hideTooltip?.();
     void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
@@ -279,7 +284,10 @@ export class AiCodeCompletionDisclaimer extends UI.Widget.Widget {
     super.wasShown();
     Host.AidaClient.HostConfigTracker.instance().addEventListener(
         Host.AidaClient.Events.AIDA_AVAILABILITY_CHANGED, this.#boundOnAidaAvailabilityChange);
-    void this.#onAidaAvailabilityChange();
+    const initialAvailability = Host.AidaClient.HostConfigTracker.instance().aidaAvailability;
+    if (initialAvailability !== undefined) {
+      this.#updateAidaAvailability(initialAvailability);
+    }
   }
 
   override willHide(): void {