chrome-devtools-frontend 1.0.1675430 → 1.0.1676824

package/front_end/panels/accessibility/SourceOrderView.ts

@@ -14,21 +14,21 @@ import {AccessibilitySubPane} from './AccessibilitySubPane.js';
 
 const UIStrings = {
   /**
-   * @description Name of a tool which allows the developer to view the contents of the page in the
-   * 'source order' (the order in which the HTML elements show up in the source code). In the
-   * Accessibility panel.
+   * @description Name of a feature that allows the developer to view the contents of the page in the
+   * 'source order' (the order in which the HTML elements show up in the source code) under the
+   * Accessibility tab in the Elements panel.
    */
-  sourceOrderViewer: 'Source Order Viewer',
+  sourceOrderViewer: 'Source order viewer',
   /**
-   * @description Text in Source Order Viewer of the Accessibility panel shown when the selected node has no child elements
+   * @description Text in the source order viewer under the Accessibility tab of the Elements panel shown when the selected node has no child elements.
    */
   noSourceOrderInformation: 'No source order information available',
   /**
-   * @description Text in Source Order Viewer of the Accessibility panel shown when the selected node has many child elements
+   * @description Text in the source order viewer under the Accessibility tab of the Elements panel shown when the selected node has many child elements.
    */
   thereMayBeADelayInDisplaying: 'There may be a delay in displaying source order for elements with many children',
   /**
-   * @description Checkbox label in Source Order Viewer of the Accessibility panel. Source order
+   * @description Checkbox label in the source order viewer under the Accessibility tab of the Elements panel. Source order
    * means the order in which the HTML elements show up in the source code.
    */
   showSourceOrder: 'Show source order',

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

@@ -11,11 +11,11 @@ let loadedAccessibilityModule: (typeof Accessibility|undefined);
 
 const UIStrings = {
   /**
-   * @description Text for accessibility of the web page
+   * @description Title of the Accessibility tab in the Elements panel.
    */
   accessibility: 'Accessibility',
   /**
-   * @description Command for showing the 'Accessibility' tool
+   * @description Command for showing the Accessibility tab in the Elements panel.
    */
   shoAccessibility: 'Show Accessibility',
 } as const;

package/front_end/panels/ai_assistance/AiAssistancePanel.ts

@@ -543,12 +543,12 @@ function createPerformanceTraceContext(focus: AiAssistanceModel.AIContext.AgentF
   return new AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext(focus);
 }
 
-function createStorageContext(item: AiAssistanceModel.StorageItem.StorageItem|null):
-    AiAssistanceModel.StorageAgent.StorageContext|null {
+function createStorageContext(item: AiAssistanceModel.StorageItem.StorageItem|
+                              null): AiAssistanceModel.StorageContext.StorageContext|null {
   if (!item) {
     return null;
   }
-  return new AiAssistanceModel.StorageAgent.StorageContext(item);
+  return new AiAssistanceModel.StorageContext.StorageContext(item);
 }
 
 /**
@@ -606,7 +606,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
   #selectedRequest: AiAssistanceModel.RequestContext.RequestContext|null = null;
 
   #selectedAccessibility: AiAssistanceModel.AccessibilityContext.AccessibilityContext|null = null;
-  #selectedStorage: AiAssistanceModel.StorageAgent.StorageContext|null = null;
+  #selectedStorage: AiAssistanceModel.StorageContext.StorageContext|null = null;
 
   // Messages displayed in the `ChatView` component.
 
@@ -1640,7 +1640,7 @@ export class AiAssistancePanel extends UI.Panel.Panel {
 
     } else if (data instanceof AiAssistanceModel.AccessibilityContext.AccessibilityContext) {
       this.#selectedAccessibility = data;
-    } else if (data instanceof AiAssistanceModel.StorageAgent.StorageContext) {
+    } else if (data instanceof AiAssistanceModel.StorageContext.StorageContext) {
       this.#selectedStorage = data;
     }
 

package/front_end/panels/ai_assistance/components/AIv2MarkdownRenderer.ts

@@ -110,9 +110,8 @@ export class AIv2MarkdownRenderer extends MarkdownView.MarkdownView.MarkdownInsi
       return html`${fallbackText}`;
     }
     if (href.startsWith('#file-')) {
-      const file = AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.getUISourceCodes().find(
-          file => AiAssistanceModel.ContextSelectionAgent.ContextSelectionAgent.uiSourceCodeId.get(file) ===
-              Number(href.substring(6)));
+      const file = AiAssistanceModel.ListSources.ListSourcesTool.getUISourceCodes().find(
+          file => AiAssistanceModel.ListSources.ListSourcesTool.uiSourceCodeId.get(file) === Number(href.substring(6)));
 
       if (file) {
         return this.#revealableLink(file, file.name());

package/front_end/panels/ai_assistance/components/ChatInput.ts

@@ -194,7 +194,7 @@ function getContextRemoveLabel(context: AiAssistanceModel.AiAgent.ConversationCo
   if (context instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext) {
     return lockedString(UIStringsNotTranslate.removeContextPerfInsight);
   }
-  if (context instanceof AiAssistanceModel.StorageAgent.StorageContext) {
+  if (context instanceof AiAssistanceModel.StorageContext.StorageContext) {
     return lockedString(UIStringsNotTranslate.removeContextStorage);
   }
   return lockedString(UIStringsNotTranslate.removeContext);
@@ -371,7 +371,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                             html`<devtools-icon class="icon" name="performance" title="Lighthouse"></devtools-icon>` :
                             input.context instanceof AiAssistanceModel.PerformanceTraceContext.PerformanceTraceContext ?
                             html`<devtools-icon class="icon" name="performance" title="Performance"></devtools-icon>` :
-                            input.context instanceof AiAssistanceModel.StorageAgent.StorageContext ?
+                            input.context instanceof AiAssistanceModel.StorageContext.StorageContext ?
                             html`<devtools-icon class="icon" name="table" title="Storage"></devtools-icon>` :
                             Lit.nothing}
                             <span

package/front_end/panels/ai_assistance/components/ChatMessage.ts

@@ -15,8 +15,9 @@ import type * as Protocol from '../../../generated/protocol.js';
 import type {
   AiWidget, BottomUpTreeAiWidget, ComputedStyleAiWidget, CoreVitalsAiWidget, DomTreeAiWidget, LighthouseReportAiWidget,
   NetworkRequestGeneralHeadersAiWidget, NetworkRequestsListAiWidget, NetworkTrackAiWidget, PerfInsightAiWidget,
-  PerformanceTraceAiWidget, SourceCodeAiWidget, SourceFileAiWidget, SourceFilesListAiWidget, StylePropertiesAiWidget,
-  TimelineEventSummaryAiWidget, TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
+  PerformanceTraceAiWidget, SourceCodeAiWidget, SourceFileAiWidget, SourceFilesListAiWidget, StorageBreakdownAiWidget,
+  StylePropertiesAiWidget, TimelineEventSummaryAiWidget,
+  TimelineRangeSummaryAiWidget} from '../../../models/ai_assistance/agents/AiAgent.js';
 import * as AiAssistanceModel from '../../../models/ai_assistance/ai_assistance.js';
 import * as ComputedStyle from '../../../models/computed_style/computed_style.js';
 import * as Formatter from '../../../models/formatter/formatter.js';
@@ -421,6 +422,14 @@ const UIStringsNotTranslate = {
    * @description Title for the source files list widget.
    */
   inspectedFileNames: 'Inspected file names',
+  /**
+   * @description Title for the storage breakdown widget.
+   */
+  storageBreakdown: 'Storage breakdown',
+  /**
+   * @description Accessible label for the reveal button in the storage breakdown widget.
+   */
+  revealStorageBreakdown: 'Reveal storage breakdown in Application panel',
 } as const;
 
 /**
@@ -1006,6 +1015,16 @@ async function resolveNode(backendNodeId: Protocol.DOM.BackendNodeId): Promise<S
   return resolved;
 }
 
+async function makeStorageBreakdownWidget(_widgetData: StorageBreakdownAiWidget): Promise<WidgetMakerResponse|null> {
+  return {
+    renderedWidget: html`<div>Storage Breakdown Stub</div>`,
+    title: lockedString(UIStringsNotTranslate.storageBreakdown),
+    revealable: null,
+    accessibleRevealLabel: lockedString(UIStringsNotTranslate.revealStorageBreakdown),
+    jslogContext: 'storage-breakdown-widget',
+  };
+}
+
 async function makeComputedStyleWidget(widgetData: ComputedStyleAiWidget): Promise<WidgetMakerResponse|null> {
   const domNodeForId = await resolveNode(widgetData.data.backendNodeId);
   if (!domNodeForId) {
@@ -1678,6 +1697,9 @@ export function getWidgetSignature(widget: AiWidget): string {
       return `${widget.name}:${widget.data.url}:${widget.data.line ?? ''}:${widget.data.column ?? ''}`;
     case 'NETWORK_REQUESTS_LIST':
       return `${widget.name}:${widget.data.requests.map(r => r.requestId()).join(',')}`;
+    case 'STORAGE_BREAKDOWN':
+      return `${widget.name}:${widget.data.totalUsageBytes}:${
+          widget.data.usageBreakdown.map(e => `${e.storageType}_${e.bytes}`).join(',')}`;
     default:
       Platform.assertNever(widget, 'Unknown AiWidget name');
   }
@@ -1785,6 +1807,9 @@ async function renderWidgets(
       case 'SOURCE_CODE':
         response = await makeSourceCodeWidget(widgetData);
         break;
+      case 'STORAGE_BREAKDOWN':
+        response = await makeStorageBreakdownWidget(widgetData);
+        break;
       default:
         Platform.assertNever(widgetData, 'Unknown AiWidget name');
     }

package/front_end/panels/application/IndexedDBViews.ts

@@ -254,7 +254,6 @@ export interface IndexedDBDataViewInput {
   onKeyFilterChange: (value: string) => void;
   onRowSelected: (rowNumber: number) => void;
   deleteEntry: (entry: Entry) => Promise<void>;
-  populateContextMenu: (e: CustomEvent<UI.ContextMenu.ContextMenu>, entry: Entry) => void;
 }
 
 const renderKeyPathString = (keyPathString: string): LitTemplate => {
@@ -272,6 +271,21 @@ const renderKeyColumnHeader = (prefix: string, keyPath: string|string[]|null|und
           renderKeyPathString(keyPath)})`;
 };
 
+const populateContextMenu = (e: CustomEvent<UI.ContextMenu.ContextMenu>): void => {
+  const row = e.currentTarget as HTMLElement;
+  const widgetElement = row.querySelector('.value-column devtools-widget');
+  const widget = widgetElement ? UI.Widget.Widget.get(widgetElement) as ObjectPropertiesSectionWidget : null;
+  if (widget?.objectTree) {
+    const contextMenu = e.detail;
+    contextMenu.revealSection().appendItem(i18nString(UIStrings.expandRecursively), () => {
+      void widget.expandRecursively();
+    }, {jslogContext: 'expand-recursively'});
+    contextMenu.revealSection().appendItem(i18nString(UIStrings.collapse), () => {
+      widget.expanded = false;
+    }, {jslogContext: 'collapse'});
+  }
+};
+
 const renderDataGrid = (input: IndexedDBDataViewInput): LitTemplate => {
   const keyPath = input.isIndex && input.index ? input.index.keyPath : input.objectStore.keyPath;
   // clang-format off
@@ -284,17 +298,20 @@ const renderDataGrid = (input: IndexedDBDataViewInput): LitTemplate => {
         ${input.isIndex ? html`<th id="primary-key">${renderKeyColumnHeader(i18nString(UIStrings.primaryKey), input.objectStore.keyPath)}</th>` : nothing}
         <th id="value">${i18nString(UIStrings.valueString)}</th>
       </tr>
-      ${repeat(input.entries, (_entry, index) => index, (entry, index) => html`
-        <tr ?selected=${index + input.skipCount === input.selectedRowNumber}
-            @select=${() => input.onRowSelected(index + input.skipCount)}
-            @delete=${() => input.deleteEntry(entry)}
-            @contextmenu=${(e: CustomEvent<UI.ContextMenu.ContextMenu>) => input.populateContextMenu(e, entry)}>
-          <td>${index + input.skipCount}</td>
-          <td>${widget(ObjectPropertiesSectionWidget, {value: entry.key})}</td>
-          ${input.isIndex ? html`<td>${widget(ObjectPropertiesSectionWidget, {value: entry.primaryKey})}</td>` : nothing}
-          <td class="value-column">${widget(ObjectPropertiesSectionWidget, {value: entry.value})}</td>
-        </tr>`,
-      )}
+      ${repeat(input.entries, (_entry, index) => index, (entry, index) => {
+        return html`
+          <tr ?selected=${index + input.skipCount === input.selectedRowNumber}
+              class="data-grid-data-row"
+              @select=${() => input.onRowSelected(index + input.skipCount)}
+              @delete=${() => input.deleteEntry(entry)}
+              @contextmenu=${populateContextMenu}>
+            <td>${index + input.skipCount}</td>
+            <td>${widget(ObjectPropertiesSectionWidget, {value: entry.key})}</td>
+            ${input.isIndex ? html`<td>${widget(ObjectPropertiesSectionWidget, {value: entry.primaryKey})}</td>`
+                            : nothing}
+            <td class="value-column">${widget(ObjectPropertiesSectionWidget, {value: entry.value})}</td>
+          </tr>`;
+      })}
     </table>`}>
   </devtools-data-grid>`;
   // clang-format on
@@ -467,31 +484,6 @@ export class IDBDataView extends UI.View.SimpleView {
     this.updateData(false);
   }
 
-  private populateContextMenu(e: CustomEvent<UI.ContextMenu.ContextMenu>, {value}: Entry): void {
-    const contextMenu = e.detail;
-    if (value && value.hasChildren) {
-      const tr = e.currentTarget as HTMLElement;
-      const valueTd = tr.querySelector('.value-column');
-      if (valueTd) {
-        const widgetEl = valueTd.querySelector('devtools-widget');
-        if (widgetEl) {
-          const widget = UI.Widget.Widget.get(widgetEl);
-          if (widget instanceof ObjectPropertiesSectionWidget) {
-            const objectUi = widget.objectPropertiesSection;
-            if (objectUi) {
-              contextMenu.revealSection().appendItem(i18nString(UIStrings.expandRecursively), () => {
-                void objectUi.objectTreeElement().expandRecursively();
-              }, {jslogContext: 'expand-recursively'});
-              contextMenu.revealSection().appendItem(i18nString(UIStrings.collapse), () => {
-                objectUi.objectTreeElement().collapse();
-              }, {jslogContext: 'collapse'});
-            }
-          }
-        }
-      }
-    }
-  }
-
   refreshData(): void {
     this.updateData(true);
   }
@@ -683,43 +675,33 @@ export class IDBDataView extends UI.View.SimpleView {
       },
       onRowSelected: this.onRowSelected.bind(this),
       deleteEntry: this.deleteEntry.bind(this),
-      populateContextMenu: this.populateContextMenu.bind(this),
     },
                undefined, this.element);
   }
 }
 
 interface ObjectPropertiesSectionWidgetInput {
-  value: SDK.RemoteObject.RemoteObject|null;
-}
-
-interface ObjectPropertiesSectionWidgetOutput {
-  objectPropSection: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection|null;
+  objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null;
 }
 
 type ObjectPropertiesSectionWidgetView = (
     input: ObjectPropertiesSectionWidgetInput,
-    output: ObjectPropertiesSectionWidgetOutput,
+    output: void,
     target: HTMLElement,
     ) => void;
 
 const OBJECT_PROPERTIES_SECTION_WIDGET_DEFAULT_VIEW: ObjectPropertiesSectionWidgetView = (input, output, target) => {
-  if (!input.value) {
-    output.objectPropSection = null;
+  if (!input.objectTree) {
     render(nothing, target);
     return;
   }
-  const objectPropSection = ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection.defaultObjectPropertiesSection(
-      input.value, undefined /* linkifier */, true /* skipProto */, true /* readOnly */);
-  output.objectPropSection = objectPropSection;
-
-  const element = input.value.hasChildren ? objectPropSection.element : objectPropSection.titleElement;
-  render(html`${element}`, target);
+  render(ObjectUI.ObjectPropertiesSection.defaultObjectPresentation(input.objectTree, undefined /* linkifier */,
+                                                                    true /* skipProto */, true /* readOnly */),
+         target);
 };
 
-class ObjectPropertiesSectionWidget extends UI.Widget.Widget {
-  #value: SDK.RemoteObject.RemoteObject|null = null;
-  #objectPropSection: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection|null = null;
+export class ObjectPropertiesSectionWidget extends UI.Widget.Widget {
+  #objectTree: ObjectUI.ObjectPropertiesSection.ObjectTree|null = null;
   readonly #view: ObjectPropertiesSectionWidgetView;
 
   constructor(element?: HTMLElement, view = OBJECT_PROPERTIES_SECTION_WIDGET_DEFAULT_VIEW) {
@@ -728,20 +710,40 @@ class ObjectPropertiesSectionWidget extends UI.Widget.Widget {
   }
 
   set value(value: SDK.RemoteObject.RemoteObject|null) {
-    if (this.#value === value) {
-      return;
+    if (value) {
+      this.#objectTree = new ObjectUI.ObjectPropertiesSection.ObjectTree(value, {
+        readOnly: true,
+        propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
+      });
+    } else {
+      this.#objectTree = null;
     }
-    this.#value = value;
     this.requestUpdate();
   }
 
-  get objectPropertiesSection(): ObjectUI.ObjectPropertiesSection.ObjectPropertiesSection|null {
-    return this.#objectPropSection;
+  get objectTree(): ObjectUI.ObjectPropertiesSection.ObjectTree|null {
+    return this.#objectTree;
+  }
+
+  get expanded(): boolean {
+    return this.#objectTree?.expanded ?? false;
+  }
+
+  set expanded(expanded: boolean) {
+    if (this.#objectTree) {
+      this.#objectTree.expanded = expanded;
+      this.requestUpdate();
+    }
+  }
+
+  async expandRecursively(): Promise<void> {
+    if (this.#objectTree) {
+      await this.#objectTree.expandRecursively(ObjectUI.ObjectPropertiesSection.EXPANDABLE_MAX_DEPTH);
+      this.requestUpdate();
+    }
   }
 
   override performUpdate(): void {
-    const output: ObjectPropertiesSectionWidgetOutput = {objectPropSection: null};
-    this.#view({value: this.#value}, output, this.contentElement);
-    this.#objectPropSection = output.objectPropSection;
+    this.#view({objectTree: this.#objectTree}, undefined, this.contentElement);
   }
 }

package/front_end/panels/application/WebMCPView.ts

@@ -251,6 +251,7 @@ export interface ViewInput {
   selectedCall: WebMCP.WebMCPModel.Call|null;
   selectedTab?: TabId;
   onCallSelect: (call: WebMCP.WebMCPModel.Call|null, tabId?: TabId) => void;
+  onTabSelect: (tabId: TabId) => void;
   filters: FilterState;
   filterButtons: FilterMenuButtons;
   onClearLogClick: () => void;
@@ -302,7 +303,7 @@ export function filterToolCalls(toolCalls: WebMCP.WebMCPModel.Call[],
     const regex = Platform.StringUtilities.createPlainTextSearchRegex(filterState.text, 'i');
     filtered = filtered.filter(call => {
       return regex.test(call.tool.name) || regex.test(call.input) ||
-          (call.result?.output && regex.test(JSON.stringify(call.result.output))) ||
+          (call.result?.output !== undefined && regex.test(JSON.stringify(call.result.output))) ||
           (call.result?.errorText && regex.test(call.result.errorText));
     });
   }
@@ -568,7 +569,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                         <td @click=${(e: Event) => {
                           e.stopPropagation();
                           input.onCallSelect(call, TabId.OUTPUT);
-                        }}>${call.result?.output ? JSON.stringify(call.result.output)
+                        }}>${call.result?.output !== undefined ? JSON.stringify(call.result.output)
                                                     : call.result?.errorText ?? ''}</td>
                         ` : nothing}
                     </tr>
@@ -577,7 +578,9 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
               </devtools-data-grid>
             </div>
             <div slot="sidebar" style="height: 100%; display: flex; flex-direction: column; overflow: hidden;">
-              <devtools-tabbed-pane class="call-details-tabbed-pane">
+              <devtools-tabbed-pane
+                class="call-details-tabbed-pane"
+                @select=${(e: Event) => input.onTabSelect((e as CustomEvent<{tabId: TabId}>).detail.tabId)}>
                 <devtools-button
                   slot="left"
                   .iconName=${'cross'}
@@ -588,19 +591,19 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
                 ></devtools-button>
                 <devtools-widget
                   id=${TabId.DETAILS}
-                  ?selected=${input.selectedTab === TabId.DETAILS}
+                  ?selected=${Directives.live(input.selectedTab === TabId.DETAILS)}
                   title=${i18nString(UIStrings.toolDetails)}
                   ${widget(ToolDetailsWidget, {tool: input.selectedCall?.tool, isUnregistered: input.selectedCall ? !input.tools.includes(input.selectedCall.tool) : false})}>
                 </devtools-widget>
                 <devtools-widget
                   id=${TabId.INPUT}
-                  ?selected=${input.selectedTab === TabId.INPUT}
+                  ?selected=${Directives.live(input.selectedTab === TabId.INPUT)}
                   title=${i18nString(UIStrings.input)}
                   ${widget(PayloadWidget, parsePayload(input.selectedCall?.input))}>
                 </devtools-widget>
                 <devtools-widget
                   id=${TabId.OUTPUT}
-                  ?selected=${input.selectedTab === TabId.OUTPUT}
+                  ?selected=${Directives.live(input.selectedTab === TabId.OUTPUT)}
                   title=${i18nString(UIStrings.output)}
                   ${widget(PayloadWidget, {
                           valueObject: input.selectedCall?.result?.output,
@@ -916,9 +919,13 @@ export class WebMCPView extends UI.Widget.VBox {
           this.#selectedTab = tabId;
         } else {
           this.#selectedCall = call;
+          this.#selectedTab = undefined;
         }
         this.requestUpdate();
       },
+      onTabSelect: tabId => {
+        this.#selectedTab = tabId;
+      },
       toolCalls: filteredCalls,
       filters: this.#filterState,
       filterButtons: this.#filterButtons,
@@ -967,7 +974,8 @@ export interface PayloadViewInput {
 }
 
 export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, target: HTMLElement): void => {
-  if (!input.valueObject && !input.valueString && !input.errorText && !input.symbolizedError) {
+  if (input.valueObject === undefined && input.valueString === undefined && !input.errorText &&
+      !input.symbolizedError) {
     render(nothing, target);
     return;
   }
@@ -979,6 +987,7 @@ export const PAYLOAD_DEFAULT_VIEW = (input: PayloadViewInput, output: object, ta
       readOnly: true,
       propertiesMode: ObjectUI.ObjectPropertiesSection.ObjectPropertiesMode.OWN_AND_INTERNAL_AND_INHERITED,
     });
+    objectTree.expanded = true;
     return html`<devtools-tree .template=${html`
           <style>${ObjectUI.ObjectPropertiesSection.objectValueStyles}</style>
           <style>${ObjectUI.ObjectPropertiesSection.objectPropertiesSectionStyles}</style>

package/front_end/panels/common/AiCodeCompletionSummaryToolbar.ts

@@ -9,10 +9,10 @@ import '../../ui/kit/kit.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 TextEditor from '../../ui/components/text_editor/text_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {Directives, html, nothing, render} from '../../ui/lit/lit.js';
 
-import {AiCodeCompletionDisclaimer, type DisclaimerTextVariant} from './AiCodeCompletionDisclaimer.js';
 import styles from './aiCodeCompletionSummaryToolbar.css.js';
 
 const UIStringsNotTranslate = {
@@ -34,7 +34,7 @@ export interface AiCodeCompletionSummaryToolbarProps {
   disclaimerTooltipId?: string;
   spinnerTooltipId?: string;
   hasTopBorder?: boolean;
-  disclaimerTextVariant?: DisclaimerTextVariant;
+  disclaimerTextVariant?: TextEditor.AiCodeCompletionDisclaimer.DisclaimerTextVariant;
 }
 
 export interface ViewInput {
@@ -45,7 +45,7 @@ export interface ViewInput {
   loading: boolean;
   hasTopBorder: boolean;
   aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
-  disclaimerTextVariant?: DisclaimerTextVariant;
+  disclaimerTextVariant?: TextEditor.AiCodeCompletionDisclaimer.DisclaimerTextVariant;
 }
 
 export type View = (input: ViewInput, output: undefined, target: HTMLElement) => void;
@@ -65,7 +65,7 @@ export const DEFAULT_SUMMARY_TOOLBAR_VIEW: View = (input, _output, target) => {
   // clang-format off
   const disclaimer = input.disclaimerTooltipId && input.spinnerTooltipId ?
     html`<devtools-widget
-            ${widget(AiCodeCompletionDisclaimer, {
+            ${widget(TextEditor.AiCodeCompletionDisclaimer.AiCodeCompletionDisclaimer, {
       disclaimerTooltipId: input.disclaimerTooltipId,
       spinnerTooltipId: input.spinnerTooltipId,
       loading: input.loading,
@@ -113,7 +113,7 @@ export class AiCodeCompletionSummaryToolbar extends UI.Widget.Widget {
   #citations = new Set<string>();
   #loading = false;
   #hasTopBorder = false;
-  #disclaimerTextVariant?: DisclaimerTextVariant;
+  #disclaimerTextVariant?: TextEditor.AiCodeCompletionDisclaimer.DisclaimerTextVariant;
 
   #aidaAvailability?: Host.AidaClient.AidaAccessPreconditions;
   #boundOnAidaAvailabilityChange:

package/front_end/panels/common/BadgeNotification.ts

@@ -23,30 +23,30 @@ const {html, render} = Lit;
 
 const UIStrings = {
   /**
-   * @description Title for close button
+   * @description Title for close button.
    */
   close: 'Close',
   /**
-   * @description Activity based badge award notification text
+   * @description Activity-based badge award notification text.
    * @example {Badge Title} PH1
    */
   activityBasedBadgeAwardMessage: 'You earned the {PH1} badge! It’s been added to your Developer Profile.',
   /**
-   * @description Action title for navigating to the badge settings in Google Developer Profile section
+   * @description Action title for navigating to the badge settings in Google Developer Profile section.
    */
   manageSettings: 'Manage settings',
   /**
-   * @description Action title for opening the Google Developer Program profile page of the user in a new tab
+   * @description Action title for opening the user\'s Google Developer Profile page in a new tab.
    */
   viewProfile: 'View profile',
   /**
-   * @description Starter badge award notification text when the user has a Google Developer Program profile but did not enable receiving badges in DevTools yet
+   * @description Starter badge award notification text when the user has a Google Developer Profile but has not enabled receiving badges in DevTools yet.
    * @example {Badge Title} PH1
    * @example {Google Developer Program link} PH2
    */
   starterBadgeAwardMessageSettingDisabled: 'You earned the {PH1} badge for the {PH2}! Turn on badges to claim it.',
   /**
-   * @description Starter badge award notification text when the user does not have a Google Developer Program profile.
+   * @description Starter badge award notification text when the user does not have a Google Developer Profile.
    * @example {Badge Title} PH1
    * @example {Google Developer Program link} PH2
    */
@@ -57,11 +57,11 @@ const UIStrings = {
    */
   noThanks: 'No thanks',
   /**
-   * @description Action title for enabling the "Receive badges" setting
+   * @description Action title for enabling the "Receive badges" setting.
    */
   receiveBadges: 'Turn on badges',
   /**
-   * @description Action title for creating a Google Developer Program profle
+   * @description Action title for creating a Google Developer Program profile.
    */
   createProfile: 'Create profile',
 } as const;

package/front_end/panels/common/ExtensionServer.ts

@@ -444,8 +444,12 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       return this.status.E_BADARG(
           'command', `expected ${Extensions.ExtensionAPI.PrivateAPI.Commands.RegisterRecorderExtensionPlugin}`);
     }
-    const {pluginName, mediaType, port, capabilities} = message;
     const extensionOrigin = this.getExtensionOrigin(_shared_port);
+    const extension = this.registeredExtensions.get(extensionOrigin);
+    if (!extension || extension.hostsPolicy.runtimeBlockedHosts.length > 0) {
+      return this.status.E_FAILED('Permission denied');
+    }
+    const {pluginName, mediaType, port, capabilities} = message;
     const recorderPluginManager = Extensions.RecorderPluginManager.RecorderPluginManager.instance();
     recorderPluginManager.addPlugin(new Extensions.RecorderExtensionEndpoint.RecorderExtensionEndpoint(
         pluginName, port, capabilities, extensionOrigin, recorderPluginManager, mediaType));
@@ -537,6 +541,10 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
     }
 
     const extensionOrigin = this.getExtensionOrigin(port);
+    const extension = this.registeredExtensions.get(extensionOrigin);
+    if (!extension || extension.hostsPolicy.runtimeBlockedHosts.length > 0) {
+      return this.status.E_FAILED('Permission denied');
+    }
     const pagePath = ExtensionServer.expandResourcePath(extensionOrigin, message.pagePath);
     if (pagePath === undefined) {
       return this.status.E_BADARG('pagePath', 'Resources paths cannot point to non-extension resources');
@@ -955,6 +963,18 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
    */
   private extensionAllowedOnContentProvider(
       contentProvider: TextUtils.ContentProvider.ContentProvider, port: MessagePort): boolean {
+    if (contentProvider instanceof Workspace.UISourceCode.UISourceCode) {
+      const debuggerSourceMapURLs =
+          Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance().sourceMapURLsForUISourceCode(
+              contentProvider);
+      const cssSourceMapURLs =
+          Bindings.CSSWorkspaceBinding.CSSWorkspaceBinding.instance().sourceMapURLsForUISourceCode(contentProvider);
+      const sourceMapURLs = [...debuggerSourceMapURLs, ...cssSourceMapURLs];
+      if (sourceMapURLs.some(url => !this.extensionAllowedOnURL(url, port))) {
+        return false;
+      }
+    }
+
     // 1. Exception for Scripts with sourceURL
     if (contentProvider instanceof Workspace.UISourceCode.UISourceCode &&
         contentProvider.contentType() === Common.ResourceType.resourceTypes.Script) {