chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

package/front_end/panels/security/CookieReportView.ts

@@ -2,7 +2,11 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import type * 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 IssuesManager from '../../models/issues_manager/issues_manager.js';
+import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -25,6 +29,30 @@ const UIStrings = {
    *@description A link the user can follow to learn more about third party cookie usage
    */
   learnMoreLink: 'Learn more about how third-party cookies are used',
+  /**
+   *@description Column header for Cookie Report table. This column will contain the name of the cookie
+   */
+  name: 'Name',
+  /**
+   *@description Column header for Cookie Report table. This column will contain the domain of the cookie
+   */
+  domain: 'Domain',
+  /**
+   *@description Column header for Cookie Report table. This column will contain the type of the cookie. E.g. Advertisement, Marketing, etc.
+   */
+  type: 'Type',
+  /**
+   *@description Column header for Cookie Report table. This column will contain the third-party of the cookie. E.g. Amazon Analytics, etc.
+   */
+  platform: 'Platform',
+  /**
+   *@description Column header for Cookie Report table, This column will contain the actionable step the user can take (if any) for the cookie
+   */
+  recommendation: 'Recommendation',
+  /**
+   *@description Column header for Cookie Report table. This column will contain the blocked or allowed status of the cookie. See status strings below for more information on the different statuses
+   */
+  status: 'Status',
   /**
    *@description Status string in the cookie report for a third-party cookie that is allowed without any sort of exception. This is also used as filter chip text to allow the user to filter the table based on cookie status
    */
@@ -37,13 +65,34 @@ const UIStrings = {
    *@description Status string in the cookie report for a third-party cookie that was blocked. This is also used as filter chip text to allow the user to filter the table based on cookie status
    */
   blocked: 'Blocked',
+  /**
+   *@description String in the Cookie Report table. This is used when any data could not be fetched and that cell is unknown
+   */
+  unknown: 'Unknown',
+  /**
+   *@description Display name for the Cookie Report table. This string is used by the data grid for accessibility.
+   */
+  report: 'Third-Party Cookie Report',
+  /**
+   *@description The main string the user sees when there are no cookie issues to show. This will take place of the table
+   */
+  emptyReport: 'Not a crumb left',
+  /**
+   *@description Explanation to the user that there were no third-party cookie related issues found which is why they are not seeing the table/report
+   */
+  emptyReportExplanation: 'No issues with third-party cookies found',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/security/CookieReportView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export interface ViewInput {}
+export interface ViewInput {
+  gridData: DataGrid.DataGrid.DataGridNode<CookieReportNodeData>[];
+  onFilterChanged: () => void;
+  onSortingChanged: () => void;
+}
 export interface ViewOutput {
   namedBitSetFilterUI?: UI.FilterBar.NamedBitSetFilterUI;
+  dataGrid?: DataGrid.DataGrid.DataGridImpl<CookieReportNodeData>;
 }
 
 export interface CookieReportNodeData {
@@ -79,10 +128,28 @@ const filterItems: UI.FilterBar.Item[] = [
 ];
 
 export class CookieReportView extends UI.Widget.VBox {
+  #issuesManager?: IssuesManager.IssuesManager.IssuesManager;
   namedBitSetFilterUI?: UI.FilterBar.NamedBitSetFilterUI;
+  #cookieRows: Map<string, IssuesManager.CookieIssue.CookieReportInfo> = new Map();
   #view: View;
+  dataGrid?: DataGrid.DataGrid.DataGridImpl<CookieReportNodeData>;
+  gridData: DataGrid.DataGrid.DataGridNode<CookieReportNodeData>[] = [];
 
   constructor(element?: HTMLElement, view: View = (input, output, target) => {
+    const dataGridOptions: DataGrid.DataGrid.DataGridWidgetOptions<CookieReportNodeData> = {
+      nodes: input.gridData,
+      displayName: i18nString(UIStrings.report),
+      columns: [
+        {id: 'name', title: i18nString(UIStrings.name), weight: 1, sortable: true},
+        {id: 'domain', title: i18nString(UIStrings.domain), weight: 1, sortable: true},
+        {id: 'type', title: i18nString(UIStrings.type), weight: 1, sortable: true},
+        {id: 'platform', title: i18nString(UIStrings.platform), weight: 1, sortable: true},
+        {id: 'status', title: i18nString(UIStrings.status), weight: 1, sortable: true},
+        {id: 'recommendation', title: i18nString(UIStrings.recommendation), weight: 1, sortable: true},
+      ],
+      striped: true,
+    };
+
     // clang-format off
     render(html `
         <div class="report overflow-auto">
@@ -90,15 +157,43 @@ export class CookieReportView extends UI.Widget.VBox {
               <div class="title">${i18nString(UIStrings.title)}</div>
               <div class="body">${i18nString(UIStrings.body)} <x-link class="x-link" href="https://developers.google.com/privacy-sandbox/cookies/prepare/audit-cookies" jslog=${VisualLogging.link('learn-more').track({click: true})}>${i18nString(UIStrings.learnMoreLink)}</x-link></div>
             </div>
-            <devtools-named-bit-set-filter
-              class="filter"
-              .options=${{items: filterItems}}
-              ${ref((el?: Element) => {
-                  if(el instanceof UI.FilterBar.NamedBitSetFilterUIElement){
-                    output.namedBitSetFilterUI = el.getOrCreateNamedBitSetFilterUI();
-                  }
-              })}
-            ></devtools-named-bit-set-filter>
+            ${input.gridData.length > 0 ?
+              html`
+                <devtools-named-bit-set-filter
+                  class="filter"
+                  @filterChanged=${input.onFilterChanged}
+                  .options=${{items: filterItems}}
+                  ${ref((el?: Element) => {
+                    if(el instanceof UI.FilterBar.NamedBitSetFilterUIElement){
+                      output.namedBitSetFilterUI = el.getOrCreateNamedBitSetFilterUI();
+                    }
+                  })}
+                ></devtools-named-bit-set-filter>
+                <!-- @ts-ignore -->
+                <devtools-data-grid-widget
+                  @sortingChanged=${input.onSortingChanged}
+                  .options=${dataGridOptions}
+                  ${UI.Widget.widgetRef(DataGrid.DataGrid.DataGridWidget, w => {
+                    output.dataGrid = w.dataGrid;
+                  })}
+                ></devtools-data-grid-widget>
+              ` :
+              html `
+                <div class="empty-report">
+                  <devtools-icon
+                    class="cookie-off"
+                    .name=${'cookie_off'}
+                  ></devtools-icon>
+                  <div class="empty-report-title">
+                    ${i18nString(UIStrings.emptyReport)}
+                  </div>
+                  <div class="body">
+                    ${i18nString(UIStrings.emptyReportExplanation)}
+                  </div>
+                </div>
+              `
+            }
+
         </div>
     `, target, {host: this});
     // clang-format on
@@ -106,15 +201,116 @@ export class CookieReportView extends UI.Widget.VBox {
     super(true, undefined, element);
     this.#view = view;
 
-    this.doUpdate();
+    SDK.TargetManager.TargetManager.instance().addModelListener(
+        SDK.ResourceTreeModel.ResourceTreeModel, SDK.ResourceTreeModel.Events.PrimaryPageChanged,
+        this.#onPrimaryPageChanged, this);
+
+    this.#issuesManager = IssuesManager.IssuesManager.IssuesManager.instance();
+    this.#issuesManager.addEventListener(
+        IssuesManager.IssuesManager.Events.ISSUE_ADDED, this.#onIssueEventReceived, this);
+    for (const issue of this.#issuesManager.issues()) {
+      if (issue instanceof IssuesManager.CookieIssue.CookieIssue) {
+        this.#onIssueAdded(issue);
+      }
+    }
+
+    this.update();
   }
 
-  doUpdate(): void {
+  override async doUpdate(): Promise<void> {
+    this.gridData = this.#buildNodes();
     this.#view(this, this, this.contentElement);
   }
 
+  onFilterChanged(): void {
+    this.update();
+  }
+
+  onSortingChanged(): void {
+    this.update();
+  }
+
+  #onPrimaryPageChanged(): void {
+    this.#cookieRows.clear();
+    this.update();
+  }
+
+  #onIssueEventReceived(event: Common.EventTarget.EventTargetEvent<IssuesManager.IssuesManager.IssueAddedEvent>): void {
+    if (event.data.issue instanceof IssuesManager.CookieIssue.CookieIssue) {
+      if (this.#cookieRows.has(event.data.issue.cookieId())) {
+        return;
+      }
+      this.#onIssueAdded(event.data.issue);
+      this.update();
+    }
+  }
+
+  #onIssueAdded(issue: IssuesManager.CookieIssue.CookieIssue): void {
+    const info = issue.makeCookieReportEntry();
+    if (info) {
+      this.#cookieRows.set(issue.cookieId(), info);
+    }
+  }
+
+  #buildNodes(): DataGrid.DataGrid.DataGridNode<CookieReportNodeData>[] {
+    return [...this.#cookieRows.values()]
+        .filter(row => {
+          if (this.namedBitSetFilterUI) {
+            return this.namedBitSetFilterUI.accept(CookieReportView.getStatusString(row.status));
+          }
+          return true;
+        })
+        .sort((a, b) => {
+          if (!this.dataGrid) {
+            return 0;
+          }
+          const columnId = this.dataGrid.sortColumnId();
+          let result = 0;
+          if (columnId === 'name') {
+            result = a.name.localeCompare(b.name);
+          } else if (columnId === 'domain') {
+            result = a.domain.localeCompare(b.domain);
+          } else if (columnId === 'type') {
+            result = (a.type ?? i18nString(UIStrings.unknown)).localeCompare((b.type ?? i18nString(UIStrings.unknown)));
+          } else if (columnId === 'platform') {
+            result = (a.platform ?? i18nString(UIStrings.unknown))
+                         .localeCompare((b.platform ?? i18nString(UIStrings.unknown)));
+          } else if (columnId === 'status') {
+            result =
+                CookieReportView.getStatusString(a.status).localeCompare(CookieReportView.getStatusString(b.status));
+          } else if (columnId === 'recommendation') {
+            result = (a.recommendation ?? i18nString(UIStrings.unknown))
+                         .localeCompare((b.recommendation ?? i18nString(UIStrings.unknown)));
+          }
+          return this.dataGrid.isSortOrderAscending() ? result : -result;
+        })
+        .map(
+            row => new DataGrid.DataGrid.DataGridNode<CookieReportNodeData>(
+                {
+                  name: row.name,
+                  domain: row.domain,
+                  type: row.type ?? i18nString(UIStrings.unknown),
+                  platform: row.platform ?? i18nString(UIStrings.unknown),
+                  status: CookieReportView.getStatusString(row.status),
+                  recommendation: row.recommendation ?? i18nString(UIStrings.unknown),
+                } as CookieReportNodeData,
+                ));
+  }
+
   override wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([cookieReportViewStyles]);
   }
+
+  static getStatusString(status: IssuesManager.CookieIssue.CookieStatus): string {
+    switch (status) {
+      case IssuesManager.CookieIssue.CookieStatus.BLOCKED:
+        return i18nString(UIStrings.blocked);
+      case IssuesManager.CookieIssue.CookieStatus.ALLOWED_BY_GRACE_PERIOD:
+      case IssuesManager.CookieIssue.CookieStatus.ALLOWED_BY_HEURISTICS:
+        return i18nString(UIStrings.allowedByException);
+      case IssuesManager.CookieIssue.CookieStatus.ALLOWED:
+        return i18nString(UIStrings.allowed);
+    }
+  }
 }

package/front_end/panels/security/SecurityPanel.ts

@@ -14,6 +14,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import * as LitHtml from '../../ui/lit-html/lit-html.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';
@@ -572,6 +573,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
           slot="sidebar"
           .widgetClass=${SecurityPanelSidebar}
           @showCookieReport=${()=>output.setVisibleView(new CookieReportView())}
+          @showFlagControls=${() => output.setVisibleView(new CookieControlsView())}
           ${UI.Widget.widgetRef(SecurityPanelSidebar, e => {output.sidebar = e;})}>
         </devtools-widget>
     </devtools-split-widget>`,
@@ -580,7 +582,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
   }) {
     super('security');
 
-    this.doUpdate();
+    void this.doUpdate();
 
     this.sidebar.setMinimumSize(100, 25);
     this.sidebar.element.classList.add('panel-sidebar');
@@ -640,7 +642,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
     return certificateButton;
   }
 
-  private doUpdate(): void {
+  override async doUpdate(): Promise<void> {
     this.view({panel: this}, this, this.contentElement);
   }
 
@@ -825,7 +827,7 @@ export class SecurityPanel extends UI.Panel.Panel implements SDK.TargetManager.S
     const {frame} = event.data;
     const request = this.lastResponseReceivedForLoaderId.get(frame.loaderId);
 
-    if (!(this.visibleView instanceof CookieReportView)) {
+    if (!(this.visibleView instanceof CookieReportView) && !(this.visibleView instanceof CookieControlsView)) {
       this.selectAndSwitchToMainView();
     }
     this.sidebar.clearOrigins();

package/front_end/panels/security/SecurityPanelSidebar.ts

@@ -8,6 +8,7 @@ import * as Platform from '../../core/platform/platform.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import {CookieControlsTreeElement} from './CookieControlsTreeElement.js';
 import {CookieReportTreeElement} from './CookieReportTreeElement.js';
 import lockIconStyles from './lockIcon.css.js';
 import {OriginTreeElement} from './OriginTreeElement.js';
@@ -33,6 +34,10 @@ const UIStrings = {
    *@description Sidebar element text in the Security panel
    */
   cookieReport: 'Third-party cookies',
+  /**
+   *@description Sidebar element text in the Security panel
+   */
+  flagControls: 'Controls',
   /**
    *@description Text in Security Panel of the Security panel
    */
@@ -90,6 +95,7 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
 
     if (Common.Settings.Settings.instance().getHostConfig().devToolsPrivacyUI?.enabled) {
       const privacyTreeSection = this.#addSidebarSection(i18nString(UIStrings.privacy), 'privacy');
+      privacyTreeSection.appendChild(new CookieControlsTreeElement(i18nString(UIStrings.flagControls)));
       privacyTreeSection.appendChild(new CookieReportTreeElement(i18nString(UIStrings.cookieReport)));
     }
 
@@ -148,7 +154,6 @@ export class SecurityPanelSidebar extends UI.Widget.VBox {
   #createOriginGroupElement(originGroupTitle: string): UI.TreeOutline.TreeElement {
     const originGroup = new UI.TreeOutline.TreeElement(originGroupTitle, true);
     originGroup.selectable = false;
-    originGroup.setCollapsible(false);
     originGroup.expand();
     originGroup.listItemElement.classList.add('security-sidebar-origins');
     UI.ARIAUtils.setLabel(originGroup.childrenListElement, originGroupTitle);

package/front_end/panels/security/cookieControlsView.css

@@ -0,0 +1,101 @@
+/*
+ * Copyright 2024 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+.overflow-auto {
+  height: 100%;
+}
+
+.controls {
+  display: flex;
+  flex-direction: column;
+  padding: var(--sys-size-5) var(--sys-size-8) var(--sys-size-5) var(--sys-size-5);
+  min-width: var(--sys-size-33);
+}
+
+.header {
+  padding-left: var(--sys-size-5);
+}
+
+.title {
+  font: var(--sys-typescale-headline4);
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  padding: var(--sys-size-6) var(--sys-size-8);
+  gap: var(--sys-size-6);
+
+  &.enterprise-disabled {
+    color: var(--sys-color-token-subtle);
+  }
+}
+
+.card-header {
+  display: flex;
+  align-items: center;
+}
+
+.card-header > .lhs {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: var(--sys-size-9);
+
+  & > devtools-icon {
+    height: var(--sys-size-11);
+    width: var(--sys-size-11);
+  }
+}
+
+.text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--sys-size-2);
+}
+
+.card-title {
+  font: var(--sys-typescale-headline5);
+}
+
+.body {
+  font: var(--sys-typescale-body4-regular);
+}
+
+.checkbox-label {
+  gap: var(--sys-size-8);
+  display: flex;
+  align-items: center;
+}
+
+.card-row {
+  padding-top: var(--sys-size-4);
+  padding-bottom: var(--sys-size-4);
+  padding-left: var(--sys-size-8);
+}
+
+.card-row-title {
+  font: var(--sys-typescale-body4-medium);
+}
+
+.x-link {
+  color: var(--sys-color-primary);
+  text-decoration-line: underline;
+  cursor: pointer;
+}
+
+.enterprise {
+  display: flex;
+  flex-direction: row;
+  gap: var(--sys-size-9);
+  padding: var(--sys-size-6) var(--sys-size-8) var(--sys-size-6) var(--sys-size-11);
+  align-items: center;
+}
+
+input[type="checkbox"] {
+  flex-shrink: 0;
+}

package/front_end/panels/security/cookieReportView.css

@@ -27,10 +27,10 @@
   .title {
     font: var(--sys-typescale-headline4);
   }
+}
 
-  .body {
-    font: var(--sys-typescale-body4-regular);
-  }
+.body {
+  font: var(--sys-typescale-body4-regular);
 }
 
 .x-link {
@@ -44,3 +44,26 @@
   padding-right: var(--sys-size-6);
   flex-shrink: 0;
 }
+
+.data-grid {
+  flex: auto;
+}
+
+.empty-report {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--sys-size-2);
+  padding: var(--sys-size-11) var(--sys-size-6) 0 var(--sys-size-6);
+  flex-shrink: 0;
+  min-width: var(--sys-size-31);
+}
+
+.empty-report-title {
+  font: var(--sys-typescale-headline5);
+}
+
+.cookie-off {
+  width: var(--sys-size-11);
+  height: var(--sys-size-11);
+}

package/front_end/panels/security/security.ts

@@ -2,10 +2,14 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as CookieControlsView from './CookieControlsView.js';
+import * as CookieReportView from './CookieReportView.js';
 import * as SecurityModel from './SecurityModel.js';
 import * as SecurityPanel from './SecurityPanel.js';
 
 export {
+  CookieControlsView,
+  CookieReportView,
   SecurityModel,
   SecurityPanel,
 };

package/front_end/panels/security/sidebar.css

@@ -46,7 +46,7 @@
 .tree-outline span {
   font: var(--sys-typescale-body4-medium);
 
-  &:hover:not(:has(span[is="dt-checkbox"])) .selection {
+  &:hover:not(:has(dt-checkbox)) .selection {
     background: transparent;
   }
 }

package/front_end/panels/settings/KeybindsSettingsTab.ts

@@ -303,7 +303,7 @@ export class KeybindsSettingsTab extends UI.Widget.VBox implements UI.ListContro
     }
   }
 
-  update(): void {
+  override update(): void {
     if (this.editingItem) {
       this.stopEditing(this.editingItem);
     }
@@ -478,7 +478,8 @@ export class ShortcutListItem {
             UI.ARIAUtils.alert(i18nString(UIStrings.shortcutRemoved, {PH1: this.item.title()}));
           }));
     } else {
-      const keys = shortcut.descriptors.flatMap(descriptor => descriptor.name.split(' + '));
+      const separator = Host.Platform.isMac() ? '\u2004' : ' + ';
+      const keys = shortcut.descriptors.flatMap(descriptor => descriptor.name.split(separator));
       keys.forEach(key => {
         shortcutElement.createChild('div', 'keybinds-key').createChild('span').textContent = key;
       });

package/front_end/panels/settings/SettingsScreen.ts

@@ -35,6 +35,7 @@ import type * as Platform from '../../core/platform/platform.js';
 import * as Root from '../../core/root/root.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as Cards from '../../ui/components/cards/cards.js';
+import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -86,7 +87,7 @@ const UIStrings = {
    * @description Warning text shown when the user has entered text to filter the
    * list of experiments, but no experiments match the filter.
    */
-  noResults: 'Warning: No experiments match the filter',
+  noResults: 'No experiments match the filter',
   /**
    *@description Text that is usually a hyperlink to more documentation
    */
@@ -467,6 +468,9 @@ export class ExperimentsSettingsTab extends SettingsTab {
 
   private createExperimentsWarningSubsection(warningMessage: string): HTMLElement {
     const subsection = document.createElement('div');
+    subsection.classList.add('experiments-warning-subsection');
+    const warningIcon = IconButton.Icon.create('warning');
+    subsection.appendChild(warningIcon);
     const warning = subsection.createChild('span');
     warning.textContent = warningMessage;
     return subsection;

package/front_end/panels/settings/frameworkIgnoreListSettingsTab.css

@@ -51,7 +51,7 @@
   flex: auto;
 }
 
-.ignore-list-item > [is="dt-checkbox"] {
+.ignore-list-item > dt-checkbox {
   width: 100%;
 }
 

package/front_end/panels/settings/keybindsSettingsTab.css

@@ -29,6 +29,10 @@
   grid-template-rows: 1fr;
   grid-template-columns: 1fr 30px 2fr 30px 30px;
   border-bottom: var(--sys-size-1) solid var(--sys-color-divider);
+
+  &:last-of-type {
+    border-bottom: unset;
+  }
 }
 
 .keybinds-list-item:focus-visible {
@@ -110,7 +114,8 @@
 }
 
 .keybinds-list-item-wrapper:has(:not(.keybinds-category-header):hover),
-.keybinds-list-item-wrapper:has(.keybinds-list-item:not(.keybinds-editing)):focus-within {
+.keybinds-list-item-wrapper:has(
+  .keybinds-list-item:not(.keybinds-editing)):focus-within {
   background: var(--sys-color-state-hover-on-subtle);
 }
 

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

@@ -101,7 +101,9 @@ UI.ViewManager.registerViewExtension({
   iconName: 'button-magic',
   settings: ['console-insights-enabled'],
   condition: config => {
-    return (config?.devToolsConsoleInsights?.enabled || config?.devToolsFreestyler?.enabled) ?? false;
+    return (config?.aidaAvailability?.enabled &&
+            (config?.devToolsConsoleInsights?.enabled || config?.devToolsFreestyler?.enabled)) ??
+        false;
   },
 });
 

package/front_end/panels/settings/settingsScreen.css

@@ -146,6 +146,16 @@ devtools-button.link-icon {
   overflow: visible !important; /* stylelint-disable-line declaration-no-important */
 }
 
+.experiments-warning-subsection {
+  display: flex;
+  align-items: center;
+
+  > devtools-icon {
+    color: var(--sys-color-orange-bright);
+    margin-right: var(--sys-size-4);
+  }
+}
+
 @media (forced-colors: active) {
   .settings-window-title {
     color: canvastext;

package/front_end/panels/sources/CallStackSidebarPane.ts

@@ -202,11 +202,11 @@ export class CallStackSidebarPane extends UI.View.SimpleView implements UI.Conte
     }
   }
 
-  private update(): void {
+  override update(): void {
     void this.updateThrottler.schedule(() => this.doUpdate());
   }
 
-  private async doUpdate(): Promise<void> {
+  override async doUpdate(): Promise<void> {
     this.locationPool.disposeAll();
 
     this.callFrameWarningsElement.classList.add('hidden');

package/front_end/panels/sources/NavigatorView.ts

@@ -1418,6 +1418,7 @@ export class NavigatorSourceTreeElement extends UI.TreeOutline.TreeElement {
     if (!this.aiButtonContainer) {
       this.aiButtonContainer = this.listItemElement.createChild('span', 'ai-button-container');
       const floatingButton = new FloatingButton.FloatingButton.FloatingButton({
+        title: action.title(),
         iconName: 'smart-assistant',
       });
       floatingButton.addEventListener('click', ev => {

package/front_end/panels/sources/navigatorTree.css

@@ -127,7 +127,7 @@
   }
 
   .tree-outline li:hover:not(.selected) .selection,
-  .tree-outline li:hover:not(:has(span[is="dt-checkbox"])) .selection {
+  .tree-outline li:hover:not(:has(dt-checkbox)) .selection {
     forced-color-adjust: none;
     background-color: Highlight;
   }