chrome-devtools-frontend 1.0.1579812 → 1.0.1581708

package/front_end/panels/greendev/GreenDevPanel.ts

@@ -0,0 +1,337 @@
+// Copyright 2026 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 */
+
+import type * as Common from '../../core/common/common.js';
+import * as Host from '../../core/host/host.js';
+import type * as Platform from '../../core/platform/platform.js';
+import * as SDK from '../../core/sdk/sdk.js';
+import type * as Protocol from '../../generated/protocol.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import greenDevPanelStyles from './GreenDevPanel.css.js';
+import type {SyncMessage} from './GreenDevShared.js';
+
+let greenDevPanelInstance: GreenDevPanel;
+
+export class GreenDevPanel extends UI.Panel.Panel {
+  #tabbedPane: UI.TabbedPane.TabbedPane;
+  #sessions = new Map<
+      string,
+      {view: UI.Widget.Widget, container: HTMLDivElement, description: HTMLDivElement, node?: SDK.DOMModel.DOMNode}>();
+  #syncChannel: BroadcastChannel;
+
+  private constructor() {
+    super('greendev');
+    this.contentElement.style.display = 'flex';
+    this.contentElement.style.flexDirection = 'column';
+    this.contentElement.style.height = '100%';
+    this.contentElement.style.overflow = 'hidden';
+
+    this.#tabbedPane = new UI.TabbedPane.TabbedPane();
+    this.#tabbedPane.element.style.flex = '1';
+    this.#tabbedPane.show(this.contentElement);
+
+    // Welcome Tab
+    this.#createWelcomeTab();
+
+    this.#tabbedPane.addEventListener(UI.TabbedPane.Events.TabClosed, this.#onTabClosed, this);
+
+    this.#syncChannel = new BroadcastChannel('green-dev-sync');
+    this.#syncChannel.onmessage = event => {
+      void this.#handlePanelMessage(event.data as SyncMessage);
+    };
+
+    // Request state from active floaties
+    this.#syncChannel.postMessage({type: 'request-session-state'});
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+    this.registerRequiredCSS(greenDevPanelStyles);
+    SDK.OverlayModel.OverlayModel.setInspectNodeHandler(this.#handleInspectNode.bind(this));
+  }
+
+  override willHide(): void {
+    super.willHide();
+    SDK.OverlayModel.OverlayModel.setInspectNodeHandler(async () => {});
+  }
+
+  async #handleInspectNode(_node: SDK.DOMModel.DOMNode): Promise<void> {
+    // Suppress reveal in Elements panel by doing nothing here.
+    // The Floaty will handle its own opening and broadcasting.
+  }
+
+  #onTabClosed(event: Common.EventTarget.EventTargetEvent<UI.TabbedPane.EventData>): void {
+    const tabId = event.data.tabId;
+    if (tabId === 'welcome') {
+      return;
+    }
+    this.#sessions.delete(tabId);
+    if (this.#sessions.size === 0) {
+      if (!this.#tabbedPane.hasTab('welcome')) {
+        this.#createWelcomeTab();
+      }
+    }
+  }
+
+  #createWelcomeTab(): void {
+    const welcomeWidget = new UI.Widget.Widget();
+    welcomeWidget.element.style.display = 'flex';
+    welcomeWidget.element.style.alignItems = 'center';
+    welcomeWidget.element.style.justifyContent = 'center';
+    welcomeWidget.element.style.height = '100%';
+    const welcomeContent = document.createElement('div');
+    welcomeContent.textContent = 'Interact with GreenDev Floaty dialogs to see conversations here.';
+    welcomeContent.style.padding = '20px';
+    welcomeContent.style.fontSize = '14px';
+    welcomeContent.style.color = 'var(--sys-color-on-surface-subtle)';
+    welcomeWidget.contentElement.appendChild(welcomeContent);
+    this.#tabbedPane.appendTab('welcome', 'Welcome', welcomeWidget);
+    this.#tabbedPane.selectTab('welcome');
+  }
+
+  closeSession(sessionId: string): void {
+    this.#tabbedPane.closeTab(sessionId);
+  }
+
+  async #handlePanelMessage(data: SyncMessage): Promise<void> {
+    const sessionId = String(data.sessionId);
+    if (!sessionId || sessionId === '0' || sessionId === 'undefined') {
+      return;
+    }
+
+    let session = this.#sessions.get(sessionId);
+    if (!session) {
+      // If we are adding a new tab, check if we need to remove the welcome tab
+      if (this.#tabbedPane.hasTab('welcome')) {
+        this.#tabbedPane.closeTab('welcome');
+      }
+
+      const widget = new UI.Widget.Widget();
+      widget.contentElement.className = 'green-dev-floaty-dialog';
+      widget.contentElement.style.display = 'flex';
+      widget.contentElement.style.flexDirection = 'column';
+      widget.contentElement.style.height = '100%';
+      widget.contentElement.style.padding = '0';
+
+      const content = document.createElement('div');
+      content.className = 'green-dev-floaty-dialog-content';
+      content.style.flexGrow = '1';
+      content.style.display = 'flex';
+      content.style.flexDirection = 'column';
+      content.style.overflow = 'hidden';
+
+      // Top row: Context added
+      const topRow = document.createElement('div');
+      topRow.className = 'green-dev-floaty-dialog-top-row';
+      topRow.style.flexShrink = '0';
+      const geminiIcon = document.createElement('div');
+      geminiIcon.className = 'green-dev-floaty-dialog-gemini-icon';
+      const checkmarkIcon = document.createElement('div');
+      checkmarkIcon.className = 'green-dev-floaty-dialog-checkmark-icon';
+      const contextText = document.createElement('span');
+      contextText.className = 'green-dev-floaty-dialog-context-text';
+      contextText.textContent = 'Context added';
+      topRow.appendChild(geminiIcon);
+      topRow.appendChild(checkmarkIcon);
+      topRow.appendChild(contextText);
+      content.appendChild(topRow);
+
+      const chatContainer = document.createElement('div');
+      chatContainer.className = 'green-dev-floaty-dialog-chat-container';
+      chatContainer.style.flexGrow = '1';
+      chatContainer.style.overflowY = 'auto';
+      content.appendChild(chatContainer);
+
+      const blueCard = document.createElement('div');
+      blueCard.className = 'green-dev-floaty-dialog-blue-card';
+      blueCard.style.flexShrink = '0';
+
+      const desc = document.createElement('div');
+      desc.className = 'green-dev-floaty-dialog-node-description';
+      desc.style.whiteSpace = 'normal';
+      desc.style.overflow = 'auto';
+      blueCard.appendChild(desc);
+
+      const inputRow = document.createElement('div');
+      inputRow.className = 'input-row';
+
+      const input = document.createElement('input');
+      input.type = 'text';
+      input.className = 'green-dev-floaty-dialog-text-field';
+      input.placeholder = 'Ask a question...';
+
+      const button = document.createElement('button');
+      button.className = 'green-dev-floaty-dialog-play-button';
+
+      const sendAction = (): void => {
+        const text = input.value;
+        if (text) {
+          input.value = '';
+          // Do not append locally; wait for broadcast from floaty
+          this.#syncChannel.postMessage({type: 'user-input', sessionId: parseInt(sessionId, 10), text});
+        }
+      };
+
+      button.addEventListener('click', sendAction);
+      input.addEventListener('keydown', e => {
+        if (e.key === 'Enter') {
+          sendAction();
+        }
+      });
+
+      inputRow.appendChild(input);
+      inputRow.appendChild(button);
+      blueCard.appendChild(inputRow);
+
+      const disclaimer = document.createElement('div');
+      disclaimer.className = 'green-dev-floaty-disclaimer';
+
+      const link = document.createElement('span');
+      link.className = 'disclaimer-link';
+      link.textContent = 'Relevant data';
+      disclaimer.appendChild(link);
+
+      disclaimer.appendChild(document.createTextNode(' is sent to Google'));
+
+      const tooltip = document.createElement('div');
+      tooltip.className = 'disclaimer-tooltip';
+
+      tooltip.appendChild(document.createTextNode(
+          'Chat messages and any data the inspected page can access via Web APIs are sent to Google and may be seen by human reviewers to improve this feature. This is an experimental AI feature and won\'t always get it right.'));
+      tooltip.appendChild(document.createElement('br'));
+      tooltip.appendChild(document.createElement('br'));
+
+      const learnMore = document.createElement('a');
+      const href = 'https://developer.chrome.com/docs/devtools/ai-assistance' as Platform.DevToolsPath.UrlString;
+      learnMore.href = href;
+      learnMore.className = 'learn-more-link';
+      learnMore.textContent = 'Learn about AI in DevTools';
+      learnMore.addEventListener('click', event => {
+        event.preventDefault();
+        Host.InspectorFrontendHost.InspectorFrontendHostInstance.openInNewTab(href);
+      });
+      tooltip.appendChild(learnMore);
+
+      disclaimer.appendChild(tooltip);
+      blueCard.appendChild(disclaimer);
+
+      content.appendChild(blueCard);
+      widget.contentElement.appendChild(content);
+
+      this.#sessions.set(sessionId, {view: widget, container: chatContainer, description: desc});
+      session = {view: widget, container: chatContainer, description: desc};
+
+      const title = data.nodeDescription || `Node ${sessionId}`;
+      this.#tabbedPane.appendTab(sessionId, title, widget, undefined, undefined, true);
+      this.#tabbedPane.selectTab(sessionId);
+    }
+
+    if (!session.node && (data.type === 'full-state' || data.type === 'node-changed' || !session)) {
+      const backendNodeId = parseInt(sessionId, 10);
+      const targetManager = SDK.TargetManager.TargetManager.instance();
+      let mainTarget = targetManager.primaryPageTarget();
+
+      const fetchNode = async(target: SDK.Target.Target): Promise<void> => {
+        const domModel = target.model(SDK.DOMModel.DOMModel);
+        if (domModel) {
+          const nodesMap = await domModel.pushNodesByBackendIdsToFrontend(
+              new Set([backendNodeId]) as Set<Protocol.DOM.BackendNodeId>);
+          const node = nodesMap?.get(backendNodeId as Protocol.DOM.BackendNodeId) || null;
+          if (node && session) {
+            session.node = node;
+            this.#addHighlightListeners(session.description, node);
+          }
+        }
+      };
+
+      if (mainTarget) {
+        await fetchNode(mainTarget);
+      } else {
+        targetManager.observeTargets({
+          targetAdded: async(target: SDK.Target.Target): Promise<void> => {
+            if (target === targetManager.primaryPageTarget()) {
+              mainTarget = target;
+              await fetchNode(mainTarget);
+            }
+          },
+          targetRemoved: (_: SDK.Target.Target): void => {},
+        });
+      }
+    }
+
+    if (data.type === 'new-message' && data.text) {
+      this.#appendMessageToContainer(session.container, data.text, data.isUser ?? false);
+    } else if (data.type === 'update-last-message') {
+      const lastMsg = session.container.lastElementChild?.querySelector('.message-content');
+      if (lastMsg) {
+        lastMsg.textContent = data.text ?? null;
+      }
+    } else if (data.type === 'full-state') {
+      session.container.innerHTML = '';
+      if (data.messages) {
+        for (const msg of data.messages) {
+          this.#appendMessageToContainer(session.container, msg.text, msg.isUser);
+        }
+      }
+    } else if (data.type === 'select-tab') {
+      this.#tabbedPane.selectTab(sessionId);
+    }
+
+    if (data.nodeDescription) {
+      session.description.textContent = data.nodeDescription;
+      if (data.type === 'node-changed') {
+        this.#tabbedPane.changeTabTitle(sessionId, data.nodeDescription);
+      }
+    }
+  }
+
+  #addHighlightListeners(element: HTMLElement, node: SDK.DOMModel.DOMNode): void {
+    element.addEventListener('mousemove', () => {
+      node.highlight();
+    });
+    element.addEventListener('mouseleave', () => {
+      void node.domModel().overlayModel().clearHighlight();
+    });
+  }
+
+  #appendMessageToContainer(container: HTMLDivElement, text: string, isUser: boolean): void {
+    const messageElement = document.createElement('div');
+    messageElement.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
+    messageElement.style.display = 'flex';
+    messageElement.style.flexDirection = 'column';
+    messageElement.style.flexShrink = '0';
+
+    const content = document.createElement('div');
+    content.className = 'message-content';
+    content.textContent = text;
+    content.style.flexGrow = '1';
+    messageElement.appendChild(content);
+
+    container.appendChild(messageElement);
+    container.scrollTop = container.scrollHeight;
+  }
+
+  static instance(opts: {
+    forceNew: boolean|null,
+  } = {forceNew: null}): GreenDevPanel {
+    const {forceNew} = opts;
+    if (!greenDevPanelInstance || forceNew) {
+      greenDevPanelInstance = new GreenDevPanel();
+    }
+
+    return greenDevPanelInstance;
+  }
+}
+
+// Expose global method for browser process to call
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(window as any).GreenDevPanel = {
+  closeSession: (sessionId: number): void => {
+    if (greenDevPanelInstance) {
+      greenDevPanelInstance.closeSession(String(sessionId));
+    }
+  },
+};

package/front_end/panels/greendev/GreenDevShared.ts

@@ -0,0 +1,13 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+export interface SyncMessage {
+  type: 'main-window-alive'|'request-session-state'|'user-input'|'restore-floaty'|'full-state'|'activate-panel'|
+      'select-tab'|'node-changed'|'new-message'|'update-last-message';
+  sessionId?: number;
+  text?: string;
+  isUser?: boolean;
+  nodeDescription?: string|null;
+  messages?: Array<{text: string, isUser: boolean}>;
+}

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

@@ -0,0 +1,52 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../core/i18n/i18n.js';
+import * as UI from '../../ui/legacy/legacy.js';
+
+import type * as GreenDev from './greendev.js';
+
+let loadedGreenDevModule: (typeof GreenDev|undefined);
+
+async function loadGreenDevModule(): Promise<typeof GreenDev> {
+  if (!loadedGreenDevModule) {
+    loadedGreenDevModule = await import('./greendev.js');
+  }
+  return loadedGreenDevModule;
+}
+
+UI.ViewManager.registerViewExtension({
+  location: UI.ViewManager.ViewLocationValues.PANEL,
+  id: 'greendev',
+  title: i18n.i18n.lockedLazyString('GreenDev'),
+  commandPrompt: i18n.i18n.lockedLazyString('Show GreenDev'),
+  persistence: UI.ViewManager.ViewPersistence.CLOSEABLE,
+  order: 100,
+  async loadView() {
+    const GreenDev = await loadGreenDevModule();
+    return GreenDev.GreenDevPanel.GreenDevPanel.instance();
+  },
+  condition: config => {
+    return Boolean(config?.devToolsGreenDevUi?.enabled);
+  },
+});
+
+const syncChannel = new BroadcastChannel('green-dev-sync');
+
+syncChannel.postMessage({type: 'main-window-alive'});
+
+syncChannel.onmessage = event => {
+  if (event.data.type === 'activate-panel') {
+    console.error('[GreenDev] Meta: Received activate-panel broadcast');
+
+    void UI.ViewManager.ViewManager.instance().showView('greendev').then(() => {
+      console.error('[GreenDev] Meta: View shown, broadcasting select-tab');
+
+      const replyChannel = new BroadcastChannel('green-dev-sync');
+      replyChannel.postMessage({type: 'select-tab', sessionId: event.data.sessionId});
+
+      replyChannel.close();
+    });
+  }
+};

package/front_end/panels/greendev/greendev.ts

@@ -0,0 +1,9 @@
+// Copyright 2026 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as GreenDevPanel from './GreenDevPanel.js';
+
+export {
+  GreenDevPanel,
+};

package/front_end/panels/issues/CorsIssueDetailsView.ts

@@ -176,7 +176,7 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.appendColumnTitle(header, i18nString(UIStrings.preflightRequestIfProblematic));
         this.appendColumnTitle(header, i18nString(UIStrings.allowCredentialsValueFromHeader));
         break;
-      case IssuesManager.CorsIssue.IssueCode.INSECURE_PRIVATE_NETWORK:
+      case IssuesManager.CorsIssue.IssueCode.INSECURE_LOCAL_NETWORK:
         this.appendColumnTitle(header, i18nString(UIStrings.resourceAddressSpace));
         this.appendColumnTitle(header, i18nString(UIStrings.initiatorAddressSpace));
         this.appendColumnTitle(header, i18nString(UIStrings.initiatorContext));
@@ -207,7 +207,7 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
       default:
         Platform.assertUnhandled<IssuesManager.CorsIssue.IssueCode.PREFLIGHT_MISSING_ALLOW_EXTERNAL|
                                  IssuesManager.CorsIssue.IssueCode.PREFLIGHT_INVALID_ALLOW_EXTERNAL|
-                                 IssuesManager.CorsIssue.IssueCode.INVALID_PRIVATE_NETWORK_ACCESS|
+                                 IssuesManager.CorsIssue.IssueCode.INVALID_LOCAL_NETWORK_ACCESS|
                                  IssuesManager.CorsIssue.IssueCode.LOCAL_NETWORK_ACCESS_PERMISSION_DENIED>(issueCode);
     }
 
@@ -362,7 +362,7 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         }
         this.appendIssueDetailCell(element, details.corsErrorStatus.failedParameter, 'code-example');
         break;
-      case IssuesManager.CorsIssue.IssueCode.INSECURE_PRIVATE_NETWORK:
+      case IssuesManager.CorsIssue.IssueCode.INSECURE_LOCAL_NETWORK:
         element.appendChild(this.createRequestCell(details.request, opts));
         this.#appendStatus(element, details.isWarning);
         this.appendIssueDetailCell(element, details.resourceIPAddressSpace ?? '');
@@ -433,7 +433,7 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.#appendStatus(element, details.isWarning);
         Platform.assertUnhandled<IssuesManager.CorsIssue.IssueCode.PREFLIGHT_MISSING_ALLOW_EXTERNAL|
                                  IssuesManager.CorsIssue.IssueCode.PREFLIGHT_INVALID_ALLOW_EXTERNAL|
-                                 IssuesManager.CorsIssue.IssueCode.INVALID_PRIVATE_NETWORK_ACCESS|
+                                 IssuesManager.CorsIssue.IssueCode.INVALID_LOCAL_NETWORK_ACCESS|
                                  IssuesManager.CorsIssue.IssueCode.LOCAL_NETWORK_ACCESS_PERMISSION_DENIED>(issueCode);
         break;
     }

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -197,7 +197,7 @@ export class LighthouseReportRenderer {
         continue;
       }
 
-      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`).track({resize: true})}`);
+      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`)}`);
 
       let state: string|undefined;
       for (const className of auditEl.classList) {

package/front_end/panels/linear_memory_inspector/components/LinearMemoryValueInterpreter.ts

@@ -60,7 +60,7 @@ function renderEndiannessSetting(
         data-endianness="true" @change=${(e: Event) => onEndiannessChanged((e.target as HTMLSelectElement).value as Endianness)}>
         ${[Endianness.LITTLE, Endianness.BIG].map(endianness => {
             return html`<option value=${endianness} .selected=${currentEndiannes === endianness}
-            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true, resize: true})}>${
+            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true})}>${
                 i18n.i18n.lockedString(endianness)}</option>`;
         })}
       </select>

package/front_end/panels/linear_memory_inspector/components/ValueInterpreterDisplay.ts

@@ -104,7 +104,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target:
                     ${VALUE_TYPE_MODE_LIST.filter(x => isValidMode(type, x)).map(mode => {
                       return html`
                         <option value=${mode} .selected=${input.valueTypeModes.get(type) === mode}
-                                jslog=${VisualLogging.item(mode).track({click: true, resize: true})}>${
+                                jslog=${VisualLogging.item(mode).track({click: true})}>${
                           i18n.i18n.lockedString(mode)}
                         </option>`;
                     })}

package/front_end/panels/media/PlayerListView.ts

@@ -84,7 +84,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
                @contextmenu=${(e: Event) => input.onPlayerContextMenu(player.playerID, e)}
                role="option"
                aria-selected=${isSelected}
-               jslog=${VisualLogging.item('player').track({click: true, resize: true})}>
+               jslog=${VisualLogging.item('player').track({click: true})}>
             <div class="player-entry-status-icon vbox">
               <div class="player-entry-status-icon-centering">
                 <devtools-icon name=${player.iconName}></devtools-icon>

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -410,8 +410,7 @@ export class NetworkLogViewColumns {
 
   private createWaterfallHeader(): void {
     this.waterfallHeaderElement = this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-header');
-    this.waterfallHeaderElement.setAttribute(
-        'jslog', `${VisualLogging.tableHeader('waterfall').track({click: true, resize: true})}`);
+    this.waterfallHeaderElement.setAttribute('jslog', `${VisualLogging.tableHeader('waterfall').track({click: true})}`);
     this.waterfallHeaderElement.addEventListener('click', waterfallHeaderClicked.bind(this));
     this.waterfallHeaderElement.addEventListener('contextmenu', event => {
       const contextMenu = new UI.ContextMenu.ContextMenu(event);

package/front_end/panels/network/RequestInitiatorView.ts

@@ -184,21 +184,18 @@ export class RequestInitiatorView extends UI.Widget.VBox {
     if (!initiator?.stack) {
       return null;
     }
+    const targetManager = SDK.TargetManager.TargetManager.instance();
     const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
-    const target = networkManager ? networkManager.target() : undefined;
+    const target = networkManager?.target() ?? targetManager.primaryPageTarget() ?? targetManager.rootTarget();
+    let stackTrace: StackTrace.StackTrace.StackTrace|null = null;
+    const preview = new Components.JSPresentationUtils.StackTracePreviewContent(
+        undefined, target ?? undefined, linkifier, {tabStops: focusableLink});
     if (target) {
-      const stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
-                             .createStackTraceFromProtocolRuntime(initiator.stack, target);
-      const preview = new Components.JSPresentationUtils.StackTracePreviewContent(
-          undefined, target, linkifier, {tabStops: focusableLink});
+      stackTrace = await Bindings.DebuggerWorkspaceBinding.DebuggerWorkspaceBinding.instance()
+                       .createStackTraceFromProtocolRuntime(initiator.stack, target);
       preview.stackTrace = stackTrace;
-      return {preview, stackTrace};
     }
-    return {
-      preview: new Components.JSPresentationUtils.StackTracePreviewContent(
-          undefined, target, linkifier, {runtimeStackTrace: initiator.stack, tabStops: focusableLink}),
-      stackTrace: null
-    };
+    return {preview, stackTrace};
   }
 
   override performUpdate(): void {

package/front_end/panels/network/RequestTimingView.ts

@@ -576,7 +576,7 @@ export class RequestTimingView extends UI.Widget.VBox {
       calculator: this.#calculator,
       requestStartTime: this.#request.startTime,
       requestIssueTime: this.#request.issueTime(),
-      requestUnfinished: false,
+      requestUnfinished: !this.#request.finished,
       fetchDetails: this.#fetchDetailsTree(),
       routerDetails: this.#routerDetailsTree(),
       wasThrottled: conditions?.urlPattern ? conditions : undefined,

package/front_end/panels/network/components/RequestHeaderSection.ts

@@ -59,7 +59,7 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
     ${headers.map(header => html`
       <devtools-header-section-row
         .data=${{ header }}
-        jslog=${VisualLogging.item('request-header').track({resize: true})}
+        jslog=${VisualLogging.item('request-header')}
       ></devtools-header-section-row>
     `)}
   `, target);

package/front_end/panels/protocol_monitor/JSONEditor.ts

@@ -990,7 +990,7 @@ function renderTargetSelectorRow(input: ViewInput): Lit.TemplateResult|undefined
             jslog=${VisualLogging.dropDown('target-selector').track({change: true})}
             @change=${input.onTargetSelected}>
       ${input.targets.map(target => html`
-        <option jslog=${VisualLogging.item('target').track({click: true, resize: true})}
+        <option jslog=${VisualLogging.item('target').track({click: true})}
                 value=${target.id()} ?selected=${target.id() === input.targetId}>
           ${target.name()} (${target.inspectedURL()})
         </option>`)}

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

@@ -140,7 +140,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
                   @keydown=${(event: Event) => onKeyDown(recording.storageName, event)}
                   @click=${(event: Event) => onOpenClick(recording.storageName, event)}
                   jslog=${VisualLogging.item()
-                    .track({ click: true, resize: true })
+                    .track({ click: true })
                     .context('recording')}>
                   <div class="icon">
                     <devtools-icon name="flow">

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

@@ -646,7 +646,7 @@ export class StepEditor extends LitElement {
   #renderTypeRow(editable: boolean): Lit.TemplateResult {
     this.#renderedAttributes.add('type');
     // clang-format off
-    return html`<div class="row attribute" data-attribute="type" jslog=${VisualLogging.treeItem('type').track({resize: true})}>
+    return html`<div class="row attribute" data-attribute="type" jslog=${VisualLogging.treeItem('type')}>
       <div id="type">type<span class="separator">:</span></div>
       <devtools-suggestion-input
         aria-labelledby="type"
@@ -667,7 +667,7 @@ export class StepEditor extends LitElement {
       return;
     }
     // clang-format off
-    return html`<div class="row attribute" data-attribute=${attribute} jslog=${VisualLogging.treeItem(Platform.StringUtilities.toKebabCase(attribute)).track({resize: true})}>
+    return html`<div class="row attribute" data-attribute=${attribute} jslog=${VisualLogging.treeItem(Platform.StringUtilities.toKebabCase(attribute))}>
       <div id=${attribute}>${attribute}<span class="separator">:</span></div>
       <devtools-suggestion-input
         .disabled=${this.disabled}
@@ -706,7 +706,7 @@ export class StepEditor extends LitElement {
     }
     // clang-format off
     return html`
-      <div class="attribute" data-attribute="frame" jslog=${VisualLogging.treeItem('frame').track({resize: true})}>
+      <div class="attribute" data-attribute="frame" jslog=${VisualLogging.treeItem('frame')}>
         <div class="row">
           <div id="frame">frame<span class="separator">:</span></div>
           ${this.#renderDeleteButton('frame')}

package/front_end/panels/security/SecurityPanel.ts

@@ -15,8 +15,6 @@ 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 {CookieControlsView} from './CookieControlsView.js';
-import {CookieReportView} from './CookieReportView.js';
 import lockIconStyles from './lockIcon.css.js';
 import mainViewStyles from './mainView.css.js';
 import {ShowOriginEvent} from './OriginTreeElement.js';
@@ -555,8 +553,6 @@ const DEFAULT_VIEW: View = (input: ViewInput, output: ViewOutput, target: HTMLEl
       <devtools-widget
         slot="sidebar"
         .widgetConfig=${widgetConfig(SecurityPanelSidebar)}
-        @showCookieReport=${()=>output.setVisibleView(new CookieReportView())}
-        @showFlagControls=${() => output.setVisibleView(new CookieControlsView())}
         ${UI.Widget.widgetRef(SecurityPanelSidebar, e => {output.sidebar = e;})}>
       </devtools-widget>
   </devtools-split-view>`,