chrome-devtools-frontend 1.0.1035409 → 1.0.1036726

package/front_end/panels/elements/StylePropertiesSection.ts

@@ -298,6 +298,18 @@ export class StylePropertiesSection {
     this.parentsComputedStyles = parentsComputedStyles;
   }
 
+  updateAuthoringHint(): void {
+    let child = this.propertiesTreeOutline.firstChild();
+    while (child) {
+      if (child instanceof StylePropertyTreeElement) {
+        child.setComputedStyles(this.computedStyles);
+        child.setParentsComputedStyles(this.parentsComputedStyles);
+        child.updateAuthoringHint();
+      }
+      child = child.nextSibling;
+    }
+  }
+
   setSectionIdx(sectionIdx: number): void {
     this.sectionIdx = sectionIdx;
     this.onpopulate();

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -761,7 +761,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  private updateAuthoringHint(): void {
+  updateAuthoringHint(): void {
     if (!Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.CSS_AUTHORING_HINTS)) {
       return;
     }

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -785,6 +785,7 @@ export class StylesSidebarPane extends Common.ObjectWrapper.eventMixin<EventType
     for (const section of this.allSections()) {
       section.setComputedStyles(computedStyles);
       section.setParentsComputedStyles(parentsComputedStyles);
+      section.updateAuthoringHint();
     }
   }
 

package/front_end/panels/elements/TopLayerContainer.ts

@@ -25,14 +25,13 @@ const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 export class TopLayerContainer extends UI.TreeOutline.TreeElement {
   tree: ElementsTreeOutline.ElementsTreeOutline;
   domModel: SDK.DOMModel.DOMModel;
-  currentTopLayerElements: Set<ElementsTreeElement>;
+  currentTopLayerDOMNodes: Set<SDK.DOMModel.DOMNode> = new Set();
   topLayerUpdateThrottler: Common.Throttler.Throttler;
 
   constructor(tree: ElementsTreeOutline.ElementsTreeOutline, domModel: SDK.DOMModel.DOMModel) {
     super('#top-layer');
     this.tree = tree;
     this.domModel = domModel;
-    this.currentTopLayerElements = new Set();
     this.topLayerUpdateThrottler = new Common.Throttler.Throttler(1);
   }
 
@@ -43,7 +42,7 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
   async updateTopLayerElements(): Promise<void> {
     this.removeChildren();
     this.removeCurrentTopLayerElementsAdorners();
-    this.currentTopLayerElements = new Set();
+    this.currentTopLayerDOMNodes = new Set();
 
     const newTopLayerElementsIDs = await this.domModel.getTopLayerElements();
     if (!newTopLayerElementsIDs || newTopLayerElementsIDs.length === 0) {
@@ -57,15 +56,9 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
         const topLayerElementShortcut = new SDK.DOMModel.DOMNodeShortcut(
             this.domModel.target(), topLayerDOMNode.backendNodeId(), 0, topLayerDOMNode.nodeName());
         const topLayerElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(topLayerElementShortcut);
-        const topLayerTreeElement = this.tree.treeElementByNode.get(topLayerDOMNode);
-        if (!topLayerTreeElement) {
-          continue;
-        }
-
-        topLayerElementIndex++;
-        this.addTopLayerAdorner(topLayerTreeElement, topLayerElementRepresentation, topLayerElementIndex);
-        this.currentTopLayerElements.add(topLayerTreeElement);
         this.appendChild(topLayerElementRepresentation);
+        this.currentTopLayerDOMNodes.add(topLayerDOMNode);
+
         // Add the element's backdrop if previous top layer element is a backdrop.
         const previousTopLayerDOMNode =
             (i > 0) ? this.domModel.idToDOMNode.get(newTopLayerElementsIDs[i - 1]) : undefined;
@@ -75,13 +68,21 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
           const backdropElementRepresentation = new ElementsTreeOutline.ShortcutTreeElement(backdropElementShortcut);
           topLayerElementRepresentation.appendChild(backdropElementRepresentation);
         }
+
+        // TODO(changhaohan): store not-yet-inserted DOMNodes and adorn them when inserted.
+        const topLayerTreeElement = this.tree.treeElementByNode.get(topLayerDOMNode);
+        if (topLayerTreeElement) {
+          this.addTopLayerAdorner(topLayerTreeElement, topLayerElementRepresentation, ++topLayerElementIndex);
+        }
       }
     }
   }
 
   private removeCurrentTopLayerElementsAdorners(): void {
-    for (const topLayerElement of this.currentTopLayerElements) {
-      topLayerElement.removeAllAdorners();
+    for (const node of this.currentTopLayerDOMNodes) {
+      const topLayerTreeElement = this.tree.treeElementByNode.get(node);
+      // TODO(changhaohan): remove only top layer adorner.
+      topLayerTreeElement?.removeAllAdorners();
     }
   }
 

package/front_end/panels/network/NetworkLogView.ts

@@ -1662,7 +1662,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   private async copyCurlCommand(request: SDK.NetworkRequest.NetworkRequest, platform: string): Promise<void> {
-    const command = await this.generateCurlCommand(request, platform);
+    const command = await NetworkLogView.generateCurlCommand(request, platform);
     Host.InspectorFrontendHost.InspectorFrontendHostInstance.copyText(command);
   }
 
@@ -2092,7 +2092,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     return commands.join(' ;\n');
   }
 
-  private async generateCurlCommand(request: SDK.NetworkRequest.NetworkRequest, platform: string): Promise<string> {
+  static async generateCurlCommand(request: SDK.NetworkRequest.NetworkRequest, platform: string): Promise<string> {
     let command: string[] = [];
     // Most of these headers are derived from the URL and are automatically added by cURL.
     // The |Accept-Encoding| header is ignored to prevent decompression errors. crbug.com/1015321
@@ -2115,7 +2115,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
          gets to MS Crt parser safely.
 
          The % character is special because MS Crt parser will try and look for
-         ENV variables and fill them in it's place. We cannot escape them with %
+         ENV variables and fill them in its place. We cannot escape them with %
          and cannot escape them with ^ (because it's cmd.exe's escape not MS Crt
          parser); So we can get cmd.exe parser to escape the character after it,
          if it is followed by a valid beginning character of an ENV variable.
@@ -2191,7 +2191,14 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
       if (ignoredHeaders.has(name.toLowerCase())) {
         continue;
       }
-      command.push('-H ' + escapeString(name + ': ' + header.value));
+      if (header.value.trim()) {
+        command.push('-H ' + escapeString(name + ': ' + header.value));
+      } else {
+        // A header passed with -H with no value or only whitespace as its
+        // value tells curl to not set the header at all. To post an empty
+        // header, you have to terminate it with a semicolon.
+        command.push('-H ' + escapeString(name + ';'));
+      }
     }
     command = command.concat(data);
     command.push('--compressed');
@@ -2205,7 +2212,8 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   private async generateAllCurlCommand(requests: SDK.NetworkRequest.NetworkRequest[], platform: string):
       Promise<string> {
     const nonBlobRequests = this.filterOutBlobRequests(requests);
-    const commands = await Promise.all(nonBlobRequests.map(request => this.generateCurlCommand(request, platform)));
+    const commands =
+        await Promise.all(nonBlobRequests.map(request => NetworkLogView.generateCurlCommand(request, platform)));
     if (platform === 'win') {
       return commands.join(' &\r\n');
     }

package/front_end/panels/settings/SettingsScreen.ts

@@ -93,6 +93,10 @@ const UIStrings = {
   *@description Text that is usually a hyperlink to more documentation
   */
   learnMore: 'Learn more',
+  /**
+  *@description Text that is usually a hyperlink to a feedback form
+  */
+  sendFeedback: 'Send feedback',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/settings/SettingsScreen.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -489,6 +493,14 @@ export class ExperimentsSettingsTab extends SettingsTab {
       p.appendChild(link);
     }
 
+    if (experiment.feedbackLink) {
+      const link = UI.XLink.XLink.create(experiment.feedbackLink);
+      link.textContent = i18nString(UIStrings.sendFeedback);
+      link.classList.add('feedback-link');
+
+      p.appendChild(link);
+    }
+
     return p;
   }
 }

package/front_end/panels/settings/settingsScreen.css

@@ -199,6 +199,12 @@ label {
   color: var(--color-text-secondary);
 }
 
+.settings-experiment .feedback-link {
+  color: var(--color-primary);
+  text-decoration-line: underline;
+  margin-left: 4px;
+}
+
 @media (forced-colors: active) {
   .settings-window-title {
     color: canvastext;

package/front_end/panels/sources/NavigatorView.ts

@@ -594,12 +594,17 @@ export class NavigatorView extends UI.Widget.VBox implements SDK.TargetManager.O
       project: Workspace.Workspace.Project, target: SDK.Target.Target|null,
       frame: SDK.ResourceTreeModel.ResourceTreeFrame|null, projectOrigin: string, isFromSourceMap: boolean,
       path: Platform.DevToolsPath.EncodedPathString): string {
-    let targetId = target && !(this.groupByAuthored && isFromSourceMap) ? target.id() : '';
     const projectId = project.type() === Workspace.Workspace.projectTypes.FileSystem ? project.id() : '';
+    let targetId = target && !(this.groupByAuthored && isFromSourceMap) ? target.id() : '';
+    let frameId = this.groupByFrame && frame ? frame.id : '';
     if (this.groupByAuthored) {
-      targetId = isFromSourceMap ? 'Authored' : 'Deployed:' + targetId;
+      if (isFromSourceMap) {
+        targetId = 'Authored';
+        frameId = '';
+      } else {
+        targetId = 'Deployed:' + targetId;
+      }
     }
-    const frameId = this.groupByFrame && frame ? frame.id : '';
     return targetId + ':' + projectId + ':' + frameId + ':' + projectOrigin + ':' + path;
   }
 
@@ -1034,17 +1039,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;
+  }
+}