chrome-devtools-frontend 1.0.1034999 → 1.0.1036501

package/front_end/panels/sources/NavigatorView.ts

@@ -1034,17 +1034,10 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
     }
   }
 
-  /**
-   * Subclasses can override to listen to grouping changes.
-   */
-  onGroupingChanged(): void {
-  }
-
   private groupingChanged(): void {
     this.reset(true);
     this.initGrouping();
     // Reset the workspace to repopulate filesystem folders.
-    this.onGroupingChanged();
     this.resetWorkspace(Workspace.Workspace.WorkspaceImpl.instance());
     this.workspaceInternal.uiSourceCodes().forEach(this.addUISourceCode.bind(this));
   }

package/front_end/panels/sources/ScopeChainSidebarPane.ts

@@ -317,16 +317,17 @@ export class OpenLinearMemoryInspector extends UI.Widget.VBox implements UI.Cont
     if (target instanceof ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement) {
       if (target.property && target.property.value &&
           LinearMemoryInspector.LinearMemoryInspectorController.isMemoryObjectProperty(target.property.value)) {
+        const expression = target.path();
         contextMenu.debugSection().appendItem(
             i18nString(UIStrings.revealInMemoryInspectorPanel),
-            this.openMemoryInspector.bind(this, target.property.name, target.property.value));
+            this.openMemoryInspector.bind(this, expression, target.property.value));
       }
     }
   }
 
-  private async openMemoryInspector(name: string, obj: SDK.RemoteObject.RemoteObject): Promise<void> {
+  private async openMemoryInspector(expression: string, obj: SDK.RemoteObject.RemoteObject): Promise<void> {
     const controller = LinearMemoryInspector.LinearMemoryInspectorController.LinearMemoryInspectorController.instance();
     Host.userMetrics.linearMemoryInspectorRevealedFrom(Host.UserMetrics.LinearMemoryInspectorRevealedFrom.ContextMenu);
-    void controller.openInspectorView(obj, undefined /* address */, name);
+    void controller.openInspectorView(obj, /* address */ undefined, expression);
   }
 }

package/front_end/panels/sources/SourcesNavigator.ts

@@ -32,11 +32,9 @@ import * 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 Platform from '../../core/platform/platform.js';
-import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Persistence from '../../models/persistence/persistence.js';
 import * as Workspace from '../../models/workspace/workspace.js';
-import * as Feedback from '../../ui/components/panel_feedback/panel_feedback.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Snippets from '../snippets/snippets.js';
 
@@ -102,61 +100,26 @@ const UIStrings = {
   *@description Text to save content as a specific file type
   */
   saveAs: 'Save as...',
-  /**
-   *@description Description of the new experimental Authored/Deployed view
-   */
-  authoredDescription: 'Group files by Authored/Deployed',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/sources/SourcesNavigator.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 let networkNavigatorViewInstance: NetworkNavigatorView;
 
 export class NetworkNavigatorView extends NavigatorView {
-  private previewToggle: Feedback.PreviewToggle.PreviewToggle;
   private constructor() {
     super(true);
     SDK.TargetManager.TargetManager.instance().addEventListener(
         SDK.TargetManager.Events.InspectedURLChanged, this.inspectedURLChanged, this);
 
-    this.previewToggle = new Feedback.PreviewToggle.PreviewToggle();
-    this.onGroupingChanged();
-
-    const div = UI.Fragment.html`<div class="border-container"></div>`;
-    div.append(this.previewToggle);
-    this.contentElement.prepend(div);
-
     // Record the sources tool load time after the file navigator has loaded.
     Host.userMetrics.panelLoaded('sources', 'DevTools.Launch.Sources');
   }
 
-  onGroupingChanged(): void {
-    // Setting the data will re-render it.
-    this.previewToggle.data = {
-      name: i18nString(UIStrings.authoredDescription),
-      helperText: null,
-      experiment: Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING,
-      learnMoreURL: 'https://goo.gle/authored-deployed',
-      feedbackURL: 'https://goo.gle/authored-deployed-feedback',
-      onChangeCallback: this.onAuthoredDeployedChanged,
-    };
-  }
-
   wasShown(): void {
     this.registerCSSFiles([sourcesNavigatorStyles]);
     super.wasShown();
   }
 
-  private onAuthoredDeployedChanged(checked: boolean): void {
-    Host.userMetrics.experimentChanged(Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING, checked);
-    // Need to signal to the NavigatorView that grouping has changed. Unfortunately,
-    // it can't listen to an experiment, and this class doesn't directly interact
-    // with it, so we will convince it a different grouping setting changed. When we switch
-    // from using an experiment to a setting, it will listen to that setting and we
-    // won't need to do this.
-    const groupByFolderSetting = Common.Settings.Settings.instance().moduleSetting('navigatorGroupByFolder');
-    groupByFolderSetting.set(groupByFolderSetting.get());
-  }
-
   static instance(opts: {
     forceNew: boolean|null,
   } = {forceNew: null}): NetworkNavigatorView {

package/front_end/panels/sources/SourcesPanel.ts

@@ -112,6 +112,10 @@ const UIStrings = {
   */
   groupByAuthored: 'Group by Authored/Deployed',
   /**
+  *@description Text in Sources Panel of the Sources panel
+  */
+  hideIgnoreListed: 'Hide ignore-listed sources',
+  /**
   *@description Text for pausing the debugger on exceptions
   */
   pauseOnExceptions: 'Pause on exceptions',
@@ -563,36 +567,44 @@ export class SourcesPanel extends UI.Panel.Panel implements UI.ContextMenu.Provi
     }
   }
 
-  private toggleAuthoredDeployedExperiment(): void {
-    const experiment = Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING;
-    const checked = Root.Runtime.experiments.isEnabled(experiment);
-    Root.Runtime.experiments.setEnabled(experiment, !checked);
-    Host.userMetrics.experimentChanged(experiment, checked);
-    // Need to signal to the NavigatorView that grouping has changed. Unfortunately,
-    // it can't listen to an experiment, and this class doesn't directly interact
-    // with it, so we will convince it a different grouping setting changed. When we switch
-    // from using an experiment to a setting, it will listen to that setting and we
-    // won't need to do this.
-    const groupByFolderSetting = Common.Settings.Settings.instance().moduleSetting('navigatorGroupByFolder');
-    groupByFolderSetting.set(groupByFolderSetting.get());
-  }
+  private addExperimentMenuItem(
+      menuSection: UI.ContextMenu.Section, experiment: string, menuItem: Common.UIString.LocalizedString): void {
+    // menu handler
+    function toggleExperiment(): void {
+      const checked = Root.Runtime.experiments.isEnabled(experiment);
+      Root.Runtime.experiments.setEnabled(experiment, !checked);
+      Host.userMetrics.experimentChanged(experiment, checked);
+      // Need to signal to the NavigatorView that grouping has changed. Unfortunately,
+      // it can't listen to an experiment, and this class doesn't directly interact
+      // with it, so we will convince it a different grouping setting changed. When we switch
+      // from using an experiment to a setting, it will listen to that setting and we
+      // won't need to do this.
+      const groupByFolderSetting = Common.Settings.Settings.instance().moduleSetting('navigatorGroupByFolder');
+      groupByFolderSetting.set(groupByFolderSetting.get());
+    }
 
-  private populateNavigatorMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
-    const groupByFolderSetting = Common.Settings.Settings.instance().moduleSetting('navigatorGroupByFolder');
-    contextMenu.appendItemsAtLocation('navigatorMenu');
-    contextMenu.viewSection().appendCheckboxItem(
-        i18nString(UIStrings.groupByFolder), () => groupByFolderSetting.set(!groupByFolderSetting.get()),
-        groupByFolderSetting.get());
     const previewIcon = new IconButton.Icon.Icon();
-    const experiment = Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING;
     previewIcon.data = {
       iconName: 'ic_preview_feature',
       color: 'var(--icon-color)',
       width: '14px',
     };
+    menuSection.appendCheckboxItem(
+        menuItem, toggleExperiment, Root.Runtime.experiments.isEnabled(experiment), false, previewIcon);
+  }
+
+  private populateNavigatorMenu(contextMenu: UI.ContextMenu.ContextMenu): void {
+    const groupByFolderSetting = Common.Settings.Settings.instance().moduleSetting('navigatorGroupByFolder');
+    contextMenu.appendItemsAtLocation('navigatorMenu');
     contextMenu.viewSection().appendCheckboxItem(
-        i18nString(UIStrings.groupByAuthored), this.toggleAuthoredDeployedExperiment,
-        Root.Runtime.experiments.isEnabled(experiment), false, previewIcon);
+        i18nString(UIStrings.groupByFolder), () => groupByFolderSetting.set(!groupByFolderSetting.get()),
+        groupByFolderSetting.get());
+
+    this.addExperimentMenuItem(
+        contextMenu.viewSection(), Root.Runtime.ExperimentName.AUTHORED_DEPLOYED_GROUPING,
+        i18nString(UIStrings.groupByAuthored));
+    this.addExperimentMenuItem(
+        contextMenu.viewSection(), Root.Runtime.ExperimentName.JUST_MY_CODE, i18nString(UIStrings.hideIgnoreListed));
   }
 
   setIgnoreExecutionLineEvents(ignoreExecutionLineEvents: boolean): void {

package/front_end/panels/sources/components/BreakpointsView.ts

@@ -0,0 +1,206 @@
+// Copyright (c) 2022 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.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Platform from '../../../core/platform/platform.js';
+import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
+import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+
+import breakpointsViewStyles from './breakpointsView.css.js';
+
+const UIStrings = {
+  /**
+  *@description Text exposed to screen readers on checked items.
+  */
+  checked: 'checked',
+  /**
+  *@description Accessible text exposed to screen readers when the screen reader encounters an unchecked checkbox.
+  */
+  unchecked: 'unchecked',
+  /**
+  *@description Accessible text for a breakpoint collection with a combination of checked states.
+  */
+  indeterminate: 'mixed',
+  /**
+  *@description Accessibility label for hit breakpoints in the Sources panel.
+  *@example {checked} PH1
+  */
+  breakpointHit: '{PH1} breakpoint hit',
+
+};
+const str_ = i18n.i18n.registerUIStrings('panels/sources/components/BreakpointsView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+const MAX_SNIPPET_LENGTH = 200;
+
+export interface BreakpointsViewData {
+  groups: BreakpointGroup[];
+}
+
+export interface BreakpointGroup {
+  name: string;
+  url: Platform.DevToolsPath.UrlString;
+  expanded: boolean;
+  breakpointItems: BreakpointItem[];
+}
+
+export interface BreakpointItem {
+  location: string;
+  codeSnippet: string;
+  isHit: boolean;
+  status: BreakpointStatus;
+  hoverText?: string;
+}
+
+export const enum BreakpointStatus {
+  ENABLED = 'ENABLED',
+  DISABLED = 'DISABLED',
+  INDETERMINATE = 'INDETERMINATE',
+}
+
+export class CheckboxToggledEvent extends Event {
+  static readonly eventName = 'checkboxtoggled';
+  data: {breakpointItem: BreakpointItem, checked: boolean};
+
+  constructor(breakpointItem: BreakpointItem, checked: boolean) {
+    super(CheckboxToggledEvent.eventName);
+    this.data = {breakpointItem: breakpointItem, checked};
+  }
+}
+
+export class ExpandedStateChangedEvent extends Event {
+  static readonly eventName = 'expandedstatechanged';
+  data: {url: Platform.DevToolsPath.UrlString, expanded: boolean};
+
+  constructor(url: Platform.DevToolsPath.UrlString, expanded: boolean) {
+    super(ExpandedStateChangedEvent.eventName);
+    this.data = {url, expanded};
+  }
+}
+
+export class BreakpointSelectedEvent extends Event {
+  static readonly eventName = 'breakpointselected';
+  data: {breakpointItem: BreakpointItem};
+
+  constructor(breakpointItem: BreakpointItem) {
+    super(BreakpointSelectedEvent.eventName);
+    this.data = {breakpointItem: breakpointItem};
+  }
+}
+
+export class BreakpointsView extends HTMLElement {
+  static readonly litTagName = LitHtml.literal`devtools-breakpoint-view`;
+  readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.#render.bind(this);
+
+  #breakpointGroups: BreakpointGroup[] = [];
+
+  set data(data: BreakpointsViewData) {
+    this.#breakpointGroups = data.groups;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  connectedCallback(): void {
+    this.#shadow.adoptedStyleSheets = [breakpointsViewStyles];
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  #render(): void {
+    const renderedGroups = this.#breakpointGroups.map((group, index) => {
+      const out = this.#renderBreakpointGroup(group);
+      if (index === this.#breakpointGroups.length - 1) {
+        return out;
+      }
+      return LitHtml.html`${out}<div class='divider'></div>`;
+    });
+    LitHtml.render(LitHtml.html`${renderedGroups}`, this.#shadow, {host: this});
+  }
+
+  #renderBreakpointGroup(group: BreakpointGroup): LitHtml.TemplateResult {
+    const groupClassMap = {
+      'expanded': group.expanded,
+    };
+    // clang-format off
+    return LitHtml.html`
+      <div data-group='true' class=${LitHtml.Directives.classMap(groupClassMap)}>
+        <div class='group-header' @click=${(): void => this.#onGroupExpandToggled(group)}>
+            <span class='triangle'></span>
+            ${this.#renderFileIcon()}
+            <span class='group-header-title'>${group.name}</span>
+        </div>
+        ${group.expanded? LitHtml.html`
+          ${group.breakpointItems.map(entry => this.#renderBreakpointEntry(entry))}` : LitHtml.nothing}
+      </div>
+      `;
+    // clang-format on
+  }
+
+  #renderFileIcon(): LitHtml.TemplateResult {
+    return LitHtml.html`
+      <${IconButton.Icon.Icon.litTagName} .data=${
+        {iconName: 'ic_file_script', color: 'var(--color-ic-file-script)', width: '16px', height: '16px'} as
+        IconButton.Icon.IconWithName}></${IconButton.Icon.Icon.litTagName}>
+    `;
+  }
+
+  #renderBreakpointEntry(breakpointItem: BreakpointItem): LitHtml.TemplateResult {
+    const classMap = {
+      'breakpoint-item': true,
+      'hit': breakpointItem.isHit,
+    };
+    const breakpointItemDescription = this.#getBreakpointItemDescription(breakpointItem);
+    const codeSnippet = Platform.StringUtilities.trimEndWithMaxLength(breakpointItem.codeSnippet, MAX_SNIPPET_LENGTH);
+
+    // clang-format off
+    return LitHtml.html`
+    <div class=${LitHtml.Directives.classMap(classMap)} aria-label=${breakpointItemDescription}  tabIndex=${breakpointItem.isHit ? 0 : 1}>
+      <label class='checkbox-label'>
+        <input type='checkbox' aria-label=${breakpointItem.location} ?indeterminate=${breakpointItem.status === BreakpointStatus.INDETERMINATE} ?checked=${breakpointItem.status === BreakpointStatus.ENABLED} @change=${(e: Event): void => this.#onCheckboxToggled(e, breakpointItem)}>
+      </label>
+      <span class='code-snippet' @click=${():void => {this.dispatchEvent(new BreakpointSelectedEvent(breakpointItem));}}>${codeSnippet}</span>
+      <span class='location'>${breakpointItem.location}</span>
+    </div>
+    `;
+    // clang-format on
+  }
+
+  #getBreakpointItemDescription(breakpointItem: BreakpointItem): Platform.UIString.LocalizedString {
+    let checkboxDescription;
+    switch (breakpointItem.status) {
+      case BreakpointStatus.ENABLED:
+        checkboxDescription = i18nString(UIStrings.checked);
+        break;
+      case BreakpointStatus.DISABLED:
+        checkboxDescription = i18nString(UIStrings.unchecked);
+        break;
+      case BreakpointStatus.INDETERMINATE:
+        checkboxDescription = i18nString(UIStrings.indeterminate);
+        break;
+    }
+    if (!breakpointItem.isHit) {
+      return checkboxDescription;
+    }
+    return i18nString(UIStrings.breakpointHit, {PH1: checkboxDescription});
+  }
+
+  #onGroupExpandToggled(group: BreakpointGroup): void {
+    group.expanded = !group.expanded;
+    this.dispatchEvent(new ExpandedStateChangedEvent(group.url, group.expanded));
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  #onCheckboxToggled(e: Event, item: BreakpointItem): void {
+    const element = e.target as HTMLInputElement;
+    this.dispatchEvent(new CheckboxToggledEvent(item, element.checked));
+  }
+}
+
+ComponentHelpers.CustomElements.defineComponent('devtools-breakpoint-view', BreakpointsView);
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'devtools-breakpoint-view': BreakpointsView;
+  }
+}

package/front_end/panels/sources/components/HeadersView.ts

@@ -9,6 +9,7 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import type * as Protocol from '../../../generated/protocol.js';
 
 import HeadersViewStyles from './HeadersView.css.js';
 
@@ -81,23 +82,8 @@ export class HeadersView extends UI.View.SimpleView {
       parsingError = true;
     }
 
-    // Header overrides are stored as the key-value pairs of a JSON object on
-    // disk. For the editor we want them as an array instead, so that we can
-    // access/add/remove entries by their index.
-    const arrayOfHeaderOverrideArrays: HeaderOverride[] = headerOverrides.map(headerOverride => {
-      return {
-        applyTo: headerOverride.applyTo,
-        headers: Object.entries(headerOverride.headers).map(([headerName, headerValue]) => {
-          return {
-            name: headerName,
-            value: headerValue,
-          };
-        }),
-      };
-    });
-
     this.#headersViewComponent.data = {
-      headerOverrides: arrayOfHeaderOverrideArrays,
+      headerOverrides,
       uiSourceCode: this.#uiSourceCode,
       parsingError,
     };
@@ -128,18 +114,8 @@ export class HeadersView extends UI.View.SimpleView {
   }
 }
 
-type Header = {
-  name: string,
-  value: string,
-};
-
-type HeaderOverride = {
-  applyTo: string,
-  headers: Header[],
-};
-
 export interface HeadersViewComponentData {
-  headerOverrides: HeaderOverride[];
+  headerOverrides: Persistence.NetworkPersistenceManager.HeaderOverride[];
   uiSourceCode: Workspace.UISourceCode.UISourceCode;
   parsingError: boolean;
 }
@@ -148,7 +124,7 @@ export class HeadersViewComponent extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-sources-headers-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   readonly #boundRender = this.#render.bind(this);
-  #headerOverrides: HeaderOverride[] = [];
+  #headerOverrides: Persistence.NetworkPersistenceManager.HeaderOverride[] = [];
   #uiSourceCode: Workspace.UISourceCode.UISourceCode|null = null;
   #parsingError = false;
   #focusElement: {blockIndex: number, headerIndex?: number}|null = null;
@@ -213,7 +189,7 @@ export class HeadersViewComponent extends HTMLElement {
     selection?.removeAllRanges();
   }
 
-  #generateNextHeaderName(headers: Header[]): string {
+  #generateNextHeaderName(headers: Protocol.Fetch.HeaderEntry[]): string {
     const takenNames = new Set<string>(headers.map(header => header.name));
     let idx = 1;
     while (takenNames.has('headerName' + idx)) {
@@ -270,17 +246,7 @@ export class HeadersViewComponent extends HTMLElement {
   }
 
   #onHeadersChanged(): void {
-    // In the editor header overrides are represented by items in an array, so
-    // that we can access/add/remove entries by their index. On disk, they are
-    // stored as key-value pairs of a JSON object instead.
-    const arrayOfHeaderOverrideObjects: Persistence.NetworkPersistenceManager.HeaderOverride[] =
-        this.#headerOverrides.map(headerOverride => {
-          return {
-            applyTo: headerOverride.applyTo,
-            headers: headerOverride.headers.reduce((a, v) => ({...a, [v.name]: v.value}), {}),
-          };
-        });
-    this.#uiSourceCode?.setWorkingCopy(JSON.stringify(arrayOfHeaderOverrideObjects, null, 2));
+    this.#uiSourceCode?.setWorkingCopy(JSON.stringify(this.#headerOverrides, null, 2));
   }
 
   #render(): void {
@@ -355,7 +321,8 @@ export class HeadersViewComponent extends HTMLElement {
     // clang-format on
   }
 
-  #renderHeaderRow(header: Header, blockIndex: number, headerIndex: number): LitHtml.TemplateResult {
+  #renderHeaderRow(header: Protocol.Fetch.HeaderEntry, blockIndex: number, headerIndex: number):
+      LitHtml.TemplateResult {
     // clang-format off
     return LitHtml.html`
       <div class="row padded" data-block-index=${blockIndex} data-header-index=${headerIndex}>

package/front_end/panels/sources/components/breakpointsView.css

@@ -0,0 +1,95 @@
+/*
+ * Copyright 2022 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.
+ */
+
+:host {
+  flex: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.divider {
+  height: 1px;
+  width: inherit;
+  background-color: var(--color-details-hairline);
+}
+
+.code-snippet {
+  width: 100%;
+  padding-left: 6px;
+  font-family: var(--source-code-font-family);
+  font-size: var(--source-code-font-size);
+  color: var(--color-text-secondary);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  flex-shrink: 100;
+}
+
+input {
+  height: 12px;
+  width: 12px;
+  flex-shrink: 0;
+  margin: 3px 0;
+}
+
+.triangle {
+  margin-left: 6px;
+  margin-right: 4px;
+  display: inline-block;
+  -webkit-mask-image: var(--image-file-treeoutlineTriangles);
+  -webkit-mask-size: 32px 24px;
+  -webkit-mask-position: 0 0;
+  background-color: var(--color-text-primary);
+  height: 12px;
+  width: 8px;
+}
+
+.group-header {
+  display: flex;
+  align-items: center;
+  height: 18px;
+}
+
+.expanded > .group-header > .triangle {
+  -webkit-mask-position: -16px 0;
+}
+
+.group-header-title {
+  margin-left: 4px;
+  font-weight: 500;
+  font-size: var(--source-code-font-size);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.breakpoint-item {
+  display: flex;
+  align-items: center;
+  line-height: 13px;
+  height: 18px;
+}
+
+.breakpoint-item:hover {
+  background-color: var(--color-background-elevation-1);
+}
+
+.breakpoint-item.hit {
+  --override-breakpoint-hit-background: rgb(255 255 194);
+
+  background-color: var(--override-breakpoint-hit-background);
+}
+
+.checkbox-label {
+  padding-left: 24px;
+  display: flex;
+  align-items: center;
+}
+
+.location {
+  line-height: 14px;
+  margin: 0 8px;
+}

package/front_end/panels/sources/components/components.ts

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

package/front_end/ui/components/linear_memory_inspector/LinearMemoryHighlightChipList.ts

@@ -95,15 +95,17 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
             <span class="value">${expressionName}</span><span class="separator">: </span><span>${expressionType}</span>
           </span>
         </button>
-        <button class="delete-highlight-button" title=${
-            i18nString(UIStrings.deleteHighlight)} @click=${():void => this.#onDeleteHighlightClick(highlightInfo)}>
-          <${IconButton.Icon.Icon.litTagName} .data=${{
-            iconName: 'close-icon',
-            color: 'black',
-            width: '7px',
-            } as IconButton.Icon.IconData}>
-          </${IconButton.Icon.Icon.litTagName}>
-        </button>
+        <div class="delete-highlight-container">
+          <button class="delete-highlight-button" title=${
+              i18nString(UIStrings.deleteHighlight)} @click=${():void => this.#onDeleteHighlightClick(highlightInfo)}>
+            <${IconButton.Icon.Icon.litTagName} .data=${{
+              iconName: 'close-icon',
+              color: 'var(--color-text-primary)',
+              width: '7px',
+              } as IconButton.Icon.IconData}>
+            </${IconButton.Icon.Icon.litTagName}>
+          </button>
+        </div>
       </div>
     `;
     // clang-format off