chrome-devtools-frontend 1.0.1592129 → 1.0.1592362

package/front_end/panels/application/CookieItemsView.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) 2009 Apple Inc.  All rights reserved.
@@ -35,9 +34,11 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
+import * as Geometry from '../../models/geometry/geometry.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as CookieTable from '../../ui/legacy/components/cookie_table/cookie_table.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 cookieItemsViewStyles from './cookieItemsView.css.js';
@@ -80,74 +81,24 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/application/CookieItemsView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-class CookiePreviewWidget extends UI.Widget.VBox {
-  private cookie: SDK.Cookie.Cookie|null;
-  private showDecodedSetting: Common.Settings.Setting<boolean>;
-  private toggle: UI.UIUtils.CheckboxLabel;
-  private value: HTMLDivElement;
-
-  constructor() {
-    super({jslog: `${VisualLogging.section('cookie-preview')}`});
-    this.setMinimumSize(230, 45);
-    this.cookie = null;
-    this.showDecodedSetting = Common.Settings.Settings.instance().createSetting('cookie-view-show-decoded', false);
+const {Size} = Geometry;
 
-    const header = document.createElement('div');
-    header.classList.add('cookie-preview-widget-header');
-    const span = document.createElement('span');
-    span.classList.add('cookie-preview-widget-header-label');
-    span.textContent = 'Cookie Value';
-    header.appendChild(span);
-    this.contentElement.appendChild(header);
-
-    const toggle = UI.UIUtils.CheckboxLabel.create(
-        i18nString(UIStrings.showUrlDecoded), this.showDecodedSetting.get(), undefined, 'show-url-decoded');
-    toggle.title = i18nString(UIStrings.showUrlDecoded);
-    toggle.classList.add('cookie-preview-widget-toggle');
-    toggle.addEventListener('click', () => this.showDecoded(!this.showDecodedSetting.get()));
-    header.appendChild(toggle);
-    this.toggle = toggle;
-
-    const value = document.createElement('div');
-    value.classList.add('cookie-preview-widget-cookie-value');
-    value.textContent = '';
-    value.addEventListener('dblclick', this.handleDblClickOnCookieValue.bind(this));
-    this.value = value;
-
-    this.contentElement.classList.add('cookie-preview-widget');
-    this.contentElement.appendChild(value);
-  }
-
-  showDecoded(decoded: boolean): void {
-    if (!this.cookie) {
-      return;
-    }
-    this.showDecodedSetting.set(decoded);
-    this.toggle.checked = decoded;
-    this.updatePreview();
-  }
+interface CookiePreviewWidgetInput {
+  cookie: SDK.Cookie.Cookie|null;
+  showDecoded: boolean;
+  onShowDecodedChanged: (showDecoded: boolean) => void;
+}
 
-  private updatePreview(): void {
-    if (this.cookie) {
-      this.value.textContent =
-          this.showDecodedSetting.get() ? decodeURIComponent(this.cookie.value()) : this.cookie.value();
-    } else {
-      this.value.textContent = '';
-    }
-  }
+type CookiePreviewWidgetView = (input: CookiePreviewWidgetInput, output: undefined, target: HTMLElement) => void;
 
-  setCookie(cookie: SDK.Cookie.Cookie): void {
-    this.cookie = cookie;
-    this.updatePreview();
-  }
+export const DEFAULT_COOKIE_PREVIEW_WIDGET_VIEW: CookiePreviewWidgetView = (input, output, target) => {
+  const cookieValue =
+      input.cookie ? (input.showDecoded ? decodeURIComponent(input.cookie.value()) : input.cookie.value()) : '';
 
-  /**
-   * Select all text even if there a spaces in it
-   */
-  handleDblClickOnCookieValue(event: Event): void {
+  function handleDblClickOnCookieValue(event: Event): void {
     event.preventDefault();
     const range = document.createRange();
-    range.selectNode(this.value);
+    range.selectNode(event.currentTarget as Node);
     const selection = window.getSelection();
     if (!selection) {
       return;
@@ -155,73 +106,159 @@ class CookiePreviewWidget extends UI.Widget.VBox {
     selection.removeAllRanges();
     selection.addRange(range);
   }
+
+  // clang-format off
+  render(html`<style>${cookieItemsViewStyles}</style>
+    <div class="cookie-preview-widget">
+      <div class="cookie-preview-widget-header">
+        <span class="cookie-preview-widget-header-label">Cookie Value</span>
+        <devtools-checkbox
+          .checked=${input.showDecoded}
+          @change=${(e: Event) => input.onShowDecodedChanged((e.target as HTMLInputElement).checked)}
+          title=${i18nString(UIStrings.showUrlDecoded)}
+          jslog=${VisualLogging.toggle('show-url-decoded').track({ click: true })}>
+          ${i18nString(UIStrings.showUrlDecoded)}
+        </devtools-checkbox>
+      </div>
+      <div class="cookie-preview-widget-cookie-value"
+          @dblclick=${handleDblClickOnCookieValue}>
+        ${cookieValue}
+      </div>
+    </div>
+  `,
+      // clang-format on
+      target);
+};
+
+class CookiePreviewWidget extends UI.Widget.VBox {
+  private view: CookiePreviewWidgetView;
+  #cookie: SDK.Cookie.Cookie|null;
+  private showDecodedSetting: Common.Settings.Setting<boolean>;
+
+  constructor(element?: HTMLElement, view: CookiePreviewWidgetView = DEFAULT_COOKIE_PREVIEW_WIDGET_VIEW) {
+    super(element, {jslog: `${VisualLogging.section('cookie-preview')}`});
+    this.view = view;
+    this.setMinimumSize(230, 45);
+    this.#cookie = null;
+    this.showDecodedSetting = Common.Settings.Settings.instance().createSetting('cookie-view-show-decoded', false);
+    this.requestUpdate();
+  }
+
+  set cookie(cookie: SDK.Cookie.Cookie|null) {
+    this.#cookie = cookie;
+    this.requestUpdate();
+  }
+
+  override performUpdate(): void {
+    const input: CookiePreviewWidgetInput = {
+      cookie: this.#cookie,
+      showDecoded: this.showDecodedSetting.get(),
+      onShowDecodedChanged: (showDecoded: boolean) => {
+        this.showDecodedSetting.set(showDecoded);
+        this.requestUpdate();
+      },
+    };
+    this.view(input, undefined, this.contentElement);
+  }
+}
+
+interface CookieItemsViewInput {
+  cookieDomain: string;
+  cookiesData: CookieTable.CookiesTable.CookiesTableData;
+  onSaveCookie: (arg0: SDK.Cookie.Cookie, arg1: SDK.Cookie.Cookie|null) => Promise<boolean>;
+  onRefresh: () => void;
+  onSelect: (arg0: SDK.Cookie.Cookie|null) => void;
+  onDelete: (arg0: SDK.Cookie.Cookie, arg1: () => void) => void;
+  onDeleteSelectedItems: () => void;
+  onDeleteAllItems: () => void;
+  onRefreshItems: () => void;
+  selectedCookie: SDK.Cookie.Cookie|null;
+}
+
+interface CookieItemsViewOutput {
+  toolbar: StorageItemsToolbar;
 }
 
+type View = (input: CookieItemsViewInput, output: CookieItemsViewOutput, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: View = (input, output, target) => {
+  // clang-format off
+  render(html`<style>${cookieItemsViewStyles}</style>
+    <devtools-widget class="storage-view"
+      .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox, {minimumSize: new Size(0, 50)})}>
+      <devtools-widget
+        .widgetConfig=${UI.Widget.widgetConfig(StorageItemsToolbar, {
+          onDeleteSelectedCallback: input.onDeleteSelectedItems,
+          onDeleteAllCallback: input.onDeleteAllItems,
+          onRefreshCallback: input.onRefreshItems,
+        })}
+        class=flex-none
+        ${UI.Widget.widgetRef(StorageItemsToolbar, toolbar => { output.toolbar = toolbar; })}
+      ></devtools-widget>
+      <devtools-split-view sidebar-position="second" name="cookie-items-split-view-state">
+        <devtools-widget
+                  slot="main"
+                  .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox, {minimumSize: new Size(0, 50)})}>
+          <devtools-widget slot="main" .widgetConfig=${UI.Widget.widgetConfig(CookieTable.CookiesTable.CookiesTable, {
+            cookieDomain: input.cookieDomain,
+            cookiesData: input.cookiesData,
+            saveCallback: input.onSaveCookie,
+            refreshCallback: input.onRefresh,
+            selectedCallback: input.onSelect,
+            deleteCallback: input.onDelete,
+            editable: true,
+          })}
+          ></devtools-widget>
+        </devtools-widget>
+        <devtools-widget
+          slot="sidebar"
+          .widgetConfig=${UI.Widget.widgetConfig(UI.Widget.VBox, {minimumSize: new Size(0, 50)})}
+          jslog=${VisualLogging.pane('preview').track({resize: true})}>
+          ${input.selectedCookie ?
+            html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CookiePreviewWidget, {
+              cookie: input.selectedCookie
+            })}></devtools-widget>` :
+            html`<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget, {
+              header: i18nString(UIStrings.noCookieSelected),
+              text: i18nString(UIStrings.selectACookieToPreviewItsValue)
+            })}></devtools-widget>`}
+        </devtools-widget>
+      </devtools-split-view>
+    </devtools-widget>
+  `,
+      // clang-format on
+      target);
+};
+
 export class CookieItemsView extends UI.Widget.VBox {
+  private view: View;
   private model: SDK.CookieModel.CookieModel;
   private cookieDomain: string;
-  private cookiesTable: CookieTable.CookiesTable.CookiesTable;
-  private readonly splitWidget: UI.SplitWidget.SplitWidget;
-  private readonly previewPanel: UI.Widget.VBox;
-  private readonly previewWidget: CookiePreviewWidget;
-  private readonly emptyWidget: UI.EmptyWidget.EmptyWidget;
   private onlyIssuesFilterUI: UI.Toolbar.ToolbarCheckbox;
   private allCookies: SDK.Cookie.Cookie[];
   private shownCookies: SDK.Cookie.Cookie[];
   private selectedCookie: SDK.Cookie.Cookie|null;
-  #toolbar: StorageItemsToolbar;
-  constructor(model: SDK.CookieModel.CookieModel, cookieDomain: string) {
+  #toolbar?: StorageItemsToolbar;
+
+  constructor(model: SDK.CookieModel.CookieModel, cookieDomain: string, view: View = DEFAULT_VIEW) {
     super({jslog: `${VisualLogging.pane('cookies-data')}`});
-    this.registerRequiredCSS(cookieItemsViewStyles);
 
-    this.element.classList.add('storage-view');
+    this.view = view;
 
     this.model = model;
     this.cookieDomain = cookieDomain;
 
-    this.#toolbar = new StorageItemsToolbar();
-    this.#toolbar.element.classList.add('flex-none');
-    this.#toolbar.show(this.element);
-
-    this.cookiesTable = new CookieTable.CookiesTable.CookiesTable(
-        undefined,
-        /* renderInline */ false, this.saveCookie.bind(this), this.refreshItems.bind(this),
-        this.handleCookieSelected.bind(this), this.deleteCookie.bind(this));
-
-    this.cookiesTable.setMinimumSize(0, 50);
-
-    this.splitWidget = new UI.SplitWidget.SplitWidget(
-        /* isVertical: */ false, /* secondIsSidebar: */ true, 'cookie-items-split-view-state');
-    this.splitWidget.show(this.element);
-
-    this.previewPanel = new UI.Widget.VBox();
-    this.previewPanel.element.setAttribute('jslog', `${VisualLogging.pane('preview').track({resize: true})}`);
-    const resizer = this.previewPanel.element.createChild('div', 'preview-panel-resizer');
-
-    this.splitWidget.setMainWidget(this.cookiesTable);
-    this.splitWidget.setSidebarWidget(this.previewPanel);
-    this.splitWidget.installResizer(resizer);
-
-    this.previewWidget = new CookiePreviewWidget();
-    this.emptyWidget = new UI.EmptyWidget.EmptyWidget(
-        i18nString(UIStrings.noCookieSelected), i18nString(UIStrings.selectACookieToPreviewItsValue));
-    this.emptyWidget.show(this.previewPanel.contentElement);
-
     this.onlyIssuesFilterUI = new UI.Toolbar.ToolbarCheckbox(
         i18nString(UIStrings.onlyShowCookiesWithAnIssue), i18nString(UIStrings.onlyShowCookiesWhichHaveAn), () => {
           this.updateWithCookies(this.allCookies);
         }, 'only-show-cookies-with-issues');
-    this.#toolbar.appendToolbarItem(this.onlyIssuesFilterUI);
 
     this.allCookies = [];
     this.shownCookies = [];
     this.selectedCookie = null;
 
     this.setCookiesDomain(model, cookieDomain);
-
-    this.#toolbar.addEventListener(StorageItemsToolbar.Events.DELETE_SELECTED, this.deleteSelectedItem, this);
-    this.#toolbar.addEventListener(StorageItemsToolbar.Events.DELETE_ALL, this.deleteAllItems, this);
-    this.#toolbar.addEventListener(StorageItemsToolbar.Events.REFRESH, this.refreshItems, this);
+    this.requestUpdate();
   }
 
   setCookiesDomain(model: SDK.CookieModel.CookieModel, domain: string): void {
@@ -232,6 +269,43 @@ export class CookieItemsView extends UI.Widget.VBox {
     this.model.addEventListener(SDK.CookieModel.Events.COOKIE_LIST_UPDATED, this.onCookieListUpdate, this);
   }
 
+  override performUpdate(): void {
+    const that = this;
+    const output = {
+      set toolbar(toolbar: StorageItemsToolbar) {
+        if (that.#toolbar === toolbar) {
+          return;
+        }
+        that.#toolbar = toolbar;
+        that.#toolbar.appendToolbarItem(that.onlyIssuesFilterUI);
+        that.updateWithCookies(that.allCookies);
+      },
+    };
+
+    const cookiesData: CookieTable.CookiesTable.CookiesTableData = {
+      cookies: this.shownCookies,
+      cookieToBlockedReasons: this.model.getCookieToBlockedReasonsMap(),
+    };
+
+    const parsedURL = Common.ParsedURL.ParsedURL.fromString(this.cookieDomain);
+    const host = parsedURL ? parsedURL.host : '';
+
+    const input: CookieItemsViewInput = {
+      cookieDomain: host,
+      cookiesData,
+      onSaveCookie: this.saveCookie.bind(this),
+      onRefresh: this.refreshItems.bind(this),
+      onSelect: this.handleCookieSelected.bind(this),
+      onDelete: this.deleteCookie.bind(this),
+      onDeleteSelectedItems: this.deleteSelectedItem.bind(this),
+      onDeleteAllItems: this.deleteAllItems.bind(this),
+      onRefreshItems: this.refreshItems.bind(this),
+      selectedCookie: this.selectedCookie,
+    };
+
+    this.view(input, output, this.contentElement);
+  }
+
   override wasShown(): void {
     super.wasShown();
     this.refreshItems();
@@ -242,22 +316,15 @@ export class CookieItemsView extends UI.Widget.VBox {
       return;
     }
     this.selectedCookie = cookie;
-
-    if (!cookie) {
-      this.previewWidget.detach();
-      this.emptyWidget.show(this.previewPanel.contentElement);
-    } else {
-      this.emptyWidget.detach();
-      this.previewWidget.setCookie(cookie);
-      this.previewWidget.show(this.previewPanel.contentElement);
-    }
+    this.requestUpdate();
   }
 
-  private handleCookieSelected(): void {
-    const cookie = this.cookiesTable.selectedCookie();
-    this.#toolbar.setCanDeleteSelected(Boolean(cookie));
-
-    this.showPreview(cookie);
+  private handleCookieSelected(selectedCookie: SDK.Cookie.Cookie|null): void {
+    if (!this.#toolbar) {
+      return;
+    }
+    this.#toolbar.setCanDeleteSelected(Boolean(selectedCookie));
+    this.showPreview(selectedCookie);
   }
 
   private async saveCookie(newCookie: SDK.Cookie.Cookie, oldCookie: SDK.Cookie.Cookie|null): Promise<boolean> {
@@ -272,12 +339,10 @@ export class CookieItemsView extends UI.Widget.VBox {
   }
 
   private updateWithCookies(allCookies: SDK.Cookie.Cookie[]): void {
+    if (!this.#toolbar) {
+      return;
+    }
     this.allCookies = allCookies;
-
-    const parsedURL = Common.ParsedURL.ParsedURL.fromString(this.cookieDomain);
-    const host = parsedURL ? parsedURL.host : '';
-    this.cookiesTable.setCookieDomain(host);
-
     this.shownCookies = this.filter(allCookies, cookie => `${cookie.name()} ${cookie.value()} ${cookie.domain()}`);
     if (this.#toolbar.hasFilter()) {
       this.#toolbar.setDeleteAllTitle(i18nString(UIStrings.clearFilteredCookies));
@@ -286,16 +351,12 @@ export class CookieItemsView extends UI.Widget.VBox {
       this.#toolbar.setDeleteAllTitle(i18nString(UIStrings.clearAllCookies));
       this.#toolbar.setDeleteAllGlyph('clear-list');
     }
-    this.cookiesTable.setCookies(this.shownCookies, this.model.getCookieToBlockedReasonsMap());
     UI.ARIAUtils.LiveAnnouncer.alert(
         i18nString(UIStrings.numberOfCookiesShownInTableS, {PH1: this.shownCookies.length}));
     this.#toolbar.setCanFilter(true);
     this.#toolbar.setCanDeleteAll(this.shownCookies.length > 0);
-    this.#toolbar.setCanDeleteSelected(Boolean(this.cookiesTable.selectedCookie()));
-
-    if (!this.cookiesTable.selectedCookie()) {
-      this.showPreview(null);
-    }
+    this.#toolbar.setCanDeleteSelected(Boolean(this.selectedCookie));
+    this.requestUpdate();
   }
 
   filter<T>(items: T[], keyFunction: (arg0: T) => string): T[] {
@@ -308,7 +369,7 @@ export class CookieItemsView extends UI.Widget.VBox {
       }
       return false;
     };
-    return items.filter(item => this.#toolbar.filterRegex?.test(keyFunction(item)) ?? true).filter(predicate);
+    return items.filter(item => this.#toolbar?.filterRegex?.test(keyFunction(item)) ?? true).filter(predicate);
   }
 
   /**
@@ -320,10 +381,9 @@ export class CookieItemsView extends UI.Widget.VBox {
   }
 
   deleteSelectedItem(): void {
-    const selectedCookie = this.cookiesTable.selectedCookie();
-    if (selectedCookie) {
+    if (this.selectedCookie) {
       this.showPreview(null);
-      void this.model.deleteCookie(selectedCookie);
+      void this.model.deleteCookie(this.selectedCookie);
     }
   }
 

package/front_end/panels/application/DeviceBoundSessionsTreeElement.ts

@@ -119,7 +119,7 @@ export class RootTreeElement extends ApplicationPanelTreeElement {
     if (isSiteAllowed && !isElementPresent) {
       // Appending a child element that already has children requires a workaround of
       // detaching and repopulating them so that the selection background color UI works.
-      // TODO(crbug.com/471021582): Can this fix safely be moved to Treeoutline.ts?
+      // TODO(crbug.com/486866983): Can this fix safely be moved to Treeoutline.ts?
       this.appendChild(siteTreeElement);
       const children = [...siteTreeElement.children()];
       siteTreeElement.removeChildren();

package/front_end/panels/application/StorageItemsToolbar.ts

@@ -106,6 +106,9 @@ export class StorageItemsToolbar extends
   #deleteAllButtonIconName = 'clear';
   #deleteAllButtonTitle: string = i18nString(UIStrings.clearAll);
   #mainToolbarItems: UI.Toolbar.ToolbarItem[] = [];
+  #onRefreshCallback?: () => void;
+  #onDeleteAllCallback?: () => void;
+  #onDeleteSelectedCallback?: () => void;
 
   constructor(element?: HTMLElement, view: View = DEFAULT_VIEW) {
     super(element);
@@ -113,6 +116,18 @@ export class StorageItemsToolbar extends
     this.filterRegex = null;
   }
 
+  set onRefreshCallback(callback: () => void) {
+    this.#onRefreshCallback = callback;
+  }
+
+  set onDeleteAllCallback(callback: () => void) {
+    this.#onDeleteAllCallback = callback;
+  }
+
+  set onDeleteSelectedCallback(callback: () => void) {
+    this.#onDeleteSelectedCallback = callback;
+  }
+
   set metadataView(view: ApplicationComponents.StorageMetadataView.StorageMetadataView) {
     this.#metadataView = view;
   }
@@ -135,11 +150,18 @@ export class StorageItemsToolbar extends
       metadataView: this.metadataView,
       onFilterChanged: this.filterChanged.bind(this),
       onRefresh: () => {
+        this.#onRefreshCallback?.();
         this.dispatchEventToListeners(StorageItemsToolbar.Events.REFRESH);
         UI.ARIAUtils.LiveAnnouncer.alert(i18nString(UIStrings.refreshedStatus));
       },
-      onDeleteAll: () => this.dispatchEventToListeners(StorageItemsToolbar.Events.DELETE_ALL),
-      onDeleteSelected: () => this.dispatchEventToListeners(StorageItemsToolbar.Events.DELETE_SELECTED),
+      onDeleteAll: () => {
+        this.#onDeleteAllCallback?.();
+        this.dispatchEventToListeners(StorageItemsToolbar.Events.DELETE_ALL);
+      },
+      onDeleteSelected: () => {
+        this.#onDeleteSelectedCallback?.();
+        this.dispatchEventToListeners(StorageItemsToolbar.Events.DELETE_SELECTED);
+      },
     };
     this.#view(viewInput, {}, this.contentElement);
   }
@@ -165,6 +187,7 @@ export class StorageItemsToolbar extends
 
   filterChanged({detail: text}: CustomEvent<string|null>): void {
     this.filterRegex = text ? new RegExp(Platform.StringUtilities.escapeForRegExp(text), 'i') : null;
+    this.#onRefreshCallback?.();
     this.dispatchEventToListeners(StorageItemsToolbar.Events.REFRESH);
   }
 

package/front_end/panels/application/cookieItemsView.css

@@ -4,34 +4,36 @@
  * found in the LICENSE file.
  */
 
-.cookie-preview-widget {
-  padding: 2px 6px;
-}
+@scope to (devtools-widget > *) {
+  .cookie-preview-widget {
+    padding: 2px 6px;
+  }
 
-.cookie-preview-widget-header {
-  font-weight: bold;
-  user-select: none;
-  white-space: nowrap;
-  margin-bottom: 4px;
-  flex: 0 0 18px;
-  display: flex;
-  align-items: center;
-}
+  .cookie-preview-widget-header {
+    font-weight: bold;
+    user-select: none;
+    white-space: nowrap;
+    margin-bottom: 4px;
+    flex: 0 0 18px;
+    display: flex;
+    align-items: center;
+  }
 
-.cookie-preview-widget-header-label {
-  line-height: 18px;
-  flex-shrink: 0;
-}
+  .cookie-preview-widget-header-label {
+    line-height: 18px;
+    flex-shrink: 0;
+  }
 
-.cookie-preview-widget-cookie-value {
-  user-select: text;
-  word-break: break-all;
-  flex: 1;
-  overflow: auto;
-}
+  .cookie-preview-widget-cookie-value {
+    user-select: text;
+    word-break: break-all;
+    flex: 1;
+    overflow: auto;
+  }
 
-.cookie-preview-widget-toggle {
-  margin-left: 12px;
-  font-weight: normal;
-  flex-shrink: 1;
+  .cookie-preview-widget-toggle {
+    margin-left: 12px;
+    font-weight: normal;
+    flex-shrink: 1;
+  }
 }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1675,7 +1675,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
             Breakpoints.BreakpointManager.EMPTY_BREAKPOINT_CONDITION, /* enabled */ true,
             /* isLogpoint */ false, Breakpoints.BreakpointManager.BreakpointOrigin.OTHER);
         const aiPanel = await AiAssistancePanel.AiAssistancePanel.instance();
-        void aiPanel.handleBreakpointConversation(uiLocation);
+        void aiPanel.handleBreakpointConversation(uiLocation, this.text);
       }
     };
 

package/front_end/panels/elements/ComputedStyleWidget.ts

@@ -297,6 +297,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   #computedStyleModel?: ComputedStyleModule.ComputedStyleModel.ComputedStyleModel;
   #nodeStyle: ComputedStyleModule.ComputedStyleModel.ComputedStyle|null = null;
   #matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles|null = null;
+  #propertyTraces: Map<string, SDK.CSSProperty.CSSProperty[]>|null = null;
   private readonly showInheritedComputedStylePropertiesSetting: Common.Settings.Setting<boolean>;
   private readonly groupComputedStylesSetting: Common.Settings.Setting<boolean>;
   private filterRegex: RegExp|null = null;
@@ -335,9 +336,9 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
   #filterIsRegex = false;
   #allowUserControl = true;
 
-  constructor() {
-    super({useShadowDom: true});
-    this.#view = DEFAULT_VIEW;
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
 
     this.contentElement.classList.add('styles-sidebar-computed-style-widget');
 
@@ -432,6 +433,11 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     this.requestUpdate();
   }
 
+  set propertyTraces(propertyTraces: Map<string, SDK.CSSProperty.CSSProperty[]>|null) {
+    this.#propertyTraces = propertyTraces;
+    this.requestUpdate();
+  }
+
   get computedStyleModel(): ComputedStyleModule.ComputedStyleModel.ComputedStyleModel|undefined {
     return this.#computedStyleModel;
   }
@@ -477,7 +483,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     uniqueProperties.sort(propertySorter);
 
     const node = nodeStyle.node;
-    const propertyTraces = this.computePropertyTraces(matchedStyles);
+    const propertyTraces = this.#propertyTraces || new Map();
     const nonInheritedProperties = this.computeNonInheritedProperties(matchedStyles);
     const showInherited = this.#shouldShowAllStyles();
     const tree: Array<TreeOutline.TreeOutlineUtils.TreeNode<ComputedStyleData>> = [];
@@ -518,7 +524,7 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     }
 
     const node = nodeStyle.node;
-    const propertyTraces = this.computePropertyTraces(matchedStyles);
+    const propertyTraces = this.#propertyTraces || new Map();
     const nonInheritedProperties = this.computeNonInheritedProperties(matchedStyles);
     const showInherited = this.showInheritedComputedStylePropertiesSetting.get();
 
@@ -664,26 +670,6 @@ export class ComputedStyleWidget extends UI.Widget.VBox {
     void contextMenu.show();
   }
 
-  private computePropertyTraces(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles):
-      Map<string, SDK.CSSProperty.CSSProperty[]> {
-    const result = new Map<string, SDK.CSSProperty.CSSProperty[]>();
-    for (const style of matchedStyles.nodeStyles()) {
-      const allProperties = style.allProperties();
-      for (const property of allProperties) {
-        if (!property.activeInStyle() || !matchedStyles.propertyState(property)) {
-          continue;
-        }
-        if (!result.has(property.name)) {
-          result.set(property.name, []);
-        }
-        // TODO(crbug.com/1172300) Ignored during the jsdoc to ts migration
-        // @ts-expect-error
-        result.get(property.name).push(property);
-      }
-    }
-    return result;
-  }
-
   private computeNonInheritedProperties(matchedStyles: SDK.CSSMatchedStyles.CSSMatchedStyles): Set<string> {
     const result = new Set<string>();
     for (const style of matchedStyles.nodeStyles()) {