chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -14,8 +14,8 @@ import * as Badges from '../../models/badges/badges.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import type * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as Tooltips from '../../ui/components/tooltips/tooltips.js';
+import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as ColorPicker from '../../ui/legacy/components/color_picker/color_picker.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -56,7 +56,7 @@ const {html, nothing, render, Directives: {classMap}} = Lit;
 const ASTUtils = SDK.CSSPropertyParser.ASTUtils;
 const FlexboxEditor = ElementsComponents.StylePropertyEditor.FlexboxEditor;
 const GridEditor = ElementsComponents.StylePropertyEditor.GridEditor;
-const MasonryEditor = ElementsComponents.StylePropertyEditor.MasonryEditor;
+const GridLanesEditor = ElementsComponents.StylePropertyEditor.GridLanesEditor;
 
 const UIStrings = {
   /**
@@ -109,9 +109,9 @@ const UIStrings = {
    */
   gridEditorButton: 'Open `grid` editor',
   /**
-   * @description Title of the button that opens the CSS Masonry editor in the Styles panel.
+   * @description Title of the button that opens the CSS Grid Lanes editor in the Styles panel.
    */
-  masonryEditorButton: 'Open `masonry` editor',
+  gridLanesEditorButton: 'Open `grid-lanes` editor',
   /**
    * @description A context menu item in Styles panel to copy CSS declaration as JavaScript property.
    */
@@ -201,7 +201,7 @@ export class EnvFunctionRenderer extends rendererBase(SDK.CSSPropertyParserMatch
   }
 }
 // clang-format off
-export class FlexGridRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.FlexGridMasonryMatch) {
+export class FlexGridRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.FlexGridGridLanesMatch) {
   // clang-format on
   readonly #treeElement: StylePropertyTreeElement|null;
   readonly #stylesPane: StylesSidebarPane;
@@ -211,7 +211,7 @@ export class FlexGridRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
     this.#stylesPane = stylesPane;
   }
 
-  override render(match: SDK.CSSPropertyParserMatchers.FlexGridMasonryMatch, context: RenderingContext): Node[] {
+  override render(match: SDK.CSSPropertyParserMatchers.FlexGridGridLanesMatch, context: RenderingContext): Node[] {
     const children = Renderer.render(ASTUtils.siblings(ASTUtils.declValue(match.node)), context).nodes;
     if (!this.#treeElement?.editable()) {
       return children;
@@ -220,14 +220,14 @@ export class FlexGridRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
         `${this.#treeElement.section().getSectionIdx()}_${this.#treeElement.section().nextEditorTriggerButtonIdx}`;
 
     function getEditorClass(layoutType: SDK.CSSPropertyParserMatchers.LayoutType): typeof FlexboxEditor|
-        typeof GridEditor|typeof MasonryEditor {
+        typeof GridEditor|typeof GridLanesEditor {
       switch (layoutType) {
         case SDK.CSSPropertyParserMatchers.LayoutType.FLEX:
           return FlexboxEditor;
         case SDK.CSSPropertyParserMatchers.LayoutType.GRID:
           return GridEditor;
-        case SDK.CSSPropertyParserMatchers.LayoutType.MASONRY:
-          return MasonryEditor;
+        case SDK.CSSPropertyParserMatchers.LayoutType.GRID_LANES:
+          return GridLanesEditor;
       }
     }
 
@@ -237,8 +237,8 @@ export class FlexGridRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
           return i18nString(UIStrings.flexboxEditorButton);
         case SDK.CSSPropertyParserMatchers.LayoutType.GRID:
           return i18nString(UIStrings.gridEditorButton);
-        case SDK.CSSPropertyParserMatchers.LayoutType.MASONRY:
-          return i18nString(UIStrings.masonryEditorButton);
+        case SDK.CSSPropertyParserMatchers.LayoutType.GRID_LANES:
+          return i18nString(UIStrings.gridLanesEditorButton);
       }
     }
 
@@ -248,8 +248,8 @@ export class FlexGridRenderer extends rendererBase(SDK.CSSPropertyParserMatchers
           return Host.UserMetrics.SwatchType.FLEX;
         case SDK.CSSPropertyParserMatchers.LayoutType.GRID:
           return Host.UserMetrics.SwatchType.GRID;
-        case SDK.CSSPropertyParserMatchers.LayoutType.MASONRY:
-          return Host.UserMetrics.SwatchType.MASONRY;
+        case SDK.CSSPropertyParserMatchers.LayoutType.GRID_LANES:
+          return Host.UserMetrics.SwatchType.GRID_LANES;
       }
     }
 
@@ -1134,7 +1134,7 @@ export class LinkableNameRenderer extends rendererBase(SDK.CSSPropertyParserMatc
             return;
           }
 
-          const icon = IconButton.Icon.create('animation', 'open-in-animations-panel');
+          const icon = createIcon('animation', 'open-in-animations-panel');
           icon.setAttribute('jslog', `${VisualLogging.link('open-in-animations-panel').track({click: true})}`);
           icon.setAttribute('role', 'button');
           icon.setAttribute('title', i18nString(UIStrings.jumpToAnimationsPanel));
@@ -1170,7 +1170,7 @@ export class BezierRenderer extends rendererBase(SDK.CSSPropertyParserMatchers.B
       return nodes;
     }
     const swatchPopoverHelper = this.#treeElement.parentPane().swatchPopoverHelper();
-    const icon = IconButton.Icon.create('bezier-curve-filled', 'bezier-swatch-icon');
+    const icon = createIcon('bezier-curve-filled', 'bezier-swatch-icon');
     icon.setAttribute('jslog', `${VisualLogging.showStyleEditor('bezier')}`);
     icon.tabIndex = -1;
     icon.addEventListener('click', () => {
@@ -1954,7 +1954,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
   private expandedDueToFilter = false;
   valueElement: HTMLElement|null = null;
   nameElement: HTMLElement|null = null;
-  private expandElement: IconButton.Icon.Icon|null = null;
+  private expandElement: Icon|null = null;
   private originalPropertyText = '';
   private hasBeenEditedIncrementally = false;
   private prompt: CSSPropertyPrompt|null = null;
@@ -2338,7 +2338,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
     this.#tooltipKeyCounts.clear();
     this.updateState();
     if (this.isExpandable()) {
-      this.expandElement = IconButton.Icon.create('triangle-right', 'expand-icon');
+      this.expandElement = createIcon('triangle-right', 'expand-icon');
       this.expandElement.setAttribute('jslog', `${VisualLogging.expand().track({click: true})}`);
     }
 
@@ -2641,7 +2641,7 @@ export class StylePropertyTreeElement extends UI.TreeOutline.TreeElement {
       if (hint) {
         const wrapper = document.createElement('span');
         wrapper.classList.add('hint-wrapper');
-        const hintIcon = new IconButton.Icon.Icon();
+        const hintIcon = new Icon();
         hintIcon.name = 'info';
         hintIcon.classList.add('hint', 'small');
         hintIcon.tabIndex = -1;

package/front_end/panels/elements/StylesSidebarPane.ts

@@ -44,7 +44,7 @@ import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon, Icon} from '../../ui/kit/kit.js';
 import * as InlineEditor from '../../ui/legacy/components/inline_editor/inline_editor.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -1504,15 +1504,14 @@ export class SectionBlock {
   readonly #titleElement: Element|null;
   sections: StylePropertiesSection[];
   #expanded = false;
-  #icon: IconButton.Icon.Icon|undefined;
+  #icon: Icon|undefined;
   constructor(titleElement: Element|null, expandable?: boolean, expandedByDefault?: boolean) {
     this.#titleElement = titleElement;
     this.sections = [];
     this.#expanded = expandedByDefault ?? false;
 
     if (expandable && titleElement instanceof HTMLElement) {
-      this.#icon =
-          IconButton.Icon.create(this.#expanded ? 'triangle-down' : 'triangle-right', 'section-block-expand-icon');
+      this.#icon = createIcon(this.#expanded ? 'triangle-down' : 'triangle-right', 'section-block-expand-icon');
       titleElement.classList.toggle('empty-section', !this.#expanded);
       UI.ARIAUtils.setExpanded(titleElement, this.#expanded);
       titleElement.appendChild(this.#icon);
@@ -1964,7 +1963,7 @@ export class CSSPropertyPrompt extends UI.TextPrompt.TextPrompt {
       if (!iconInfo) {
         continue;
       }
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = iconInfo.iconName;
       icon.classList.add('extra-small');
       icon.style.transform = `rotate(${iconInfo.rotate}deg) scale(${iconInfo.scaleX * 1.1}, ${iconInfo.scaleY * 1.1})`;

package/front_end/panels/elements/TopLayerContainer.ts

@@ -6,7 +6,7 @@
 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 IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as ElementsComponents from './components/components.js';
@@ -97,7 +97,7 @@ export class TopLayerContainer extends UI.TreeOutline.TreeElement {
         ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
     const adornerContent = document.createElement('span');
     adornerContent.classList.add('adorner-with-icon');
-    const linkIcon = IconButton.Icon.create('select-element');
+    const linkIcon = createIcon('select-element');
     const adornerText = document.createElement('span');
     adornerText.textContent = `top-layer (${topLayerElementIndex})`;
     adornerContent.append(linkIcon);

package/front_end/panels/elements/components/AdornerManager.ts

@@ -26,7 +26,7 @@ export enum RegisteredAdorners {
   CONTAINER = 'container',
   FLEX = 'flex',
   GRID = 'grid',
-  MASONRY = 'masonry',
+  GRID_LANES = 'grid-lanes',
   MEDIA = 'media',
   POPOVER = 'popover',
   REVEAL = 'reveal',
@@ -56,9 +56,9 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         category: AdornerCategories.LAYOUT,
         enabledByDefault: true,
       };
-    case RegisteredAdorners.MASONRY:
+    case RegisteredAdorners.GRID_LANES:
       return {
-        name: 'masonry',
+        name: 'grid-lanes',
         category: AdornerCategories.LAYOUT,
         enabledByDefault: true,
       };

package/front_end/panels/elements/components/ElementsBreadcrumbs.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import '../../../ui/components/node_text/node_text.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';

package/front_end/panels/elements/components/ElementsTreeExpandButton.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import {html, render} from '../../../ui/lit/lit.js';

package/front_end/panels/elements/components/QueryContainer.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 import '../../../ui/components/node_text/node_text.js';
 
 import * as SDK from '../../../core/sdk/sdk.js';

package/front_end/panels/elements/components/StylePropertyEditor.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Lit from '../../../ui/lit/lit.js';
@@ -187,20 +187,20 @@ declare global {
   }
 }
 
-export class MasonryEditor extends StylePropertyEditor {
-  readonly jslogContext = 'cssMasonryEditor';
-  protected override readonly editableProperties: EditableProperty[] = MasonryEditableProperties;
+export class GridLanesEditor extends StylePropertyEditor {
+  readonly jslogContext = 'cssGridLanesEditor';
+  protected override readonly editableProperties: EditableProperty[] = GridLanesEditableProperties;
 
   protected override findIcon(query: string, computedProperties: Map<string, string>): IconInfo|null {
     return findGridContainerIcon(query, computedProperties);
   }
 }
 
-customElements.define('devtools-masonry-editor', MasonryEditor);
+customElements.define('devtools-grid-lanes-editor', GridLanesEditor);
 
 declare global {
   interface HTMLElementTagNameMap {
-    'devtools-masonry-editor': MasonryEditor;
+    'devtools-grid-lanes-editor': GridLanesEditor;
   }
 }
 
@@ -301,7 +301,7 @@ export const GridEditableProperties = [
   },
 ];
 
-export const MasonryEditableProperties = [
+export const GridLanesEditableProperties = [
   {
     propertyName: 'align-content',
     propertyValues: [

package/front_end/panels/emulation/DeviceModeWrapper.ts

@@ -128,11 +128,56 @@ export class ActionDelegate implements UI.ActionRegistration.ActionDelegate {
             return;
           }
           const result = await object.callFunction(function(this: Element) {
+            function getFrameOffset(frame: Element|null): {x: number, y: number} {
+              if (!frame) {
+                return {x: 0, y: 0};
+              }
+
+              // The offset of the frame's content relative to the frame element
+              // contains the border width and the padding.
+              // The border width.
+              const borderTop = frame.clientTop;
+              const borderLeft = frame.clientLeft;
+
+              // The padding can be retrieved via computed styles.
+              const styles = window.getComputedStyle(frame);
+              const paddingTop = parseFloat(styles.paddingTop);
+              const paddingLeft = parseFloat(styles.paddingLeft);
+
+              // The position of the frame in it's parent.
+              const rect = frame.getBoundingClientRect();
+
+              // The offset of the parent frame's content relative to the
+              // document. If there is no parent frame, the offset is 0.
+              // In case of OOPiF, there is no access to the parent frame's
+              // offset.
+              const parentFrameOffset = getFrameOffset(frame.ownerDocument.defaultView?.frameElement ?? null);
+
+              // The scroll position of the frame.
+              const scrollX = frame.ownerDocument.defaultView?.scrollX ?? 0;
+              const scrollY = frame.ownerDocument.defaultView?.scrollY ?? 0;
+
+              return {
+                x: parentFrameOffset.x + rect.left + borderLeft + paddingLeft + scrollX,
+                y: parentFrameOffset.y + rect.top + borderTop + paddingTop + scrollY,
+              };
+            }
+
+            // The bounding client rect of the node relative to the viewport.
             const rect = this.getBoundingClientRect();
-            const docRect = this.ownerDocument.documentElement.getBoundingClientRect();
+            const frameOffset = getFrameOffset(this.ownerDocument.defaultView?.frameElement ?? null);
+
+            // The scroll position of the frame.
+            const scrollX = this.ownerDocument.defaultView?.scrollX ?? 0;
+            const scrollY = this.ownerDocument.defaultView?.scrollY ?? 0;
+
+            // The offset of the node's content relative to the top-level
+            // document is the sum of the element offset relative to the
+            // document's viewport, the document's scroll position, and the
+            // parent's offset relative to the top-level document.
             return JSON.stringify({
-              x: rect.left - docRect.left,
-              y: rect.top - docRect.top,
+              x: rect.left + frameOffset.x + scrollX,
+              y: rect.top + frameOffset.y + scrollY,
               width: rect.width,
               height: rect.height,
               scale: 1,

package/front_end/panels/explain/components/ConsoleInsight.ts

@@ -529,9 +529,10 @@ function renderSignInFooter(onGoToSignIn: () => void): Lit.LitTemplate {
         .variant=${Buttons.Button.Variant.PRIMARY}
         .jslogContext=${'update-settings'}
       >
-        ${UIStrings.signIn}
+        ${i18nString(UIStrings.signIn)}
       </devtools-button>
     </div>`;
+  // clang-format on
 }
 
 function renderConsentReminderFooter(onReminderSettingsLink: () => void, onConsentReminderConfirmed: () => void): Lit.LitTemplate {
@@ -541,9 +542,9 @@ function renderConsentReminderFooter(onReminderSettingsLink: () => void, onConse
     <div class="buttons">
       <devtools-button
         @click=${onReminderSettingsLink}
-          .variant=${Buttons.Button.Variant.TONAL}
-          jslogContext=${'settings'}
-          title=${'Settings'}
+        .variant=${Buttons.Button.Variant.TONAL}
+        .jslogContext=${'settings'}
+        .title=${'Settings'}
       >
         Settings
       </devtools-button>
@@ -557,6 +558,7 @@ function renderConsentReminderFooter(onReminderSettingsLink: () => void, onConse
         Continue
       </devtools-button>
     </div>`;
+  // clang-format on
 }
 
 function renderInsightFooter(noLogging: ViewInput['noLogging'], selectedRating: ViewInput['selectedRating'], callbacks: ViewInput['callbacks']): Lit.LitTemplate {

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -12,8 +12,8 @@ import type * as Protocol from '../../generated/protocol.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
 import type * as NetworkForward from '../../panels/network/forward/forward.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as RequestLinkIcon from '../../ui/components/request_link_icon/request_link_icon.js';
+import {Icon} from '../../ui/kit/kit.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';
@@ -180,7 +180,7 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
     const frameCell = document.createElement('td');
     frameCell.classList.add('affected-resource-cell');
     if (frame) {
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'code-circle';
       icon.classList.add('link', 'elements-panel', 'medium');
       icon.onclick = async () => {

package/front_end/panels/issues/AttributionReportingIssueDetailsView.ts

@@ -109,7 +109,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
     const element = document.createElement('tr');
     element.classList.add('affected-resource-directive');
 
-    const details = issue.issueDetails;
+    const details = issue.details();
 
     switch (issueCode) {
       case IssuesManager.AttributionReportingIssue.IssueCode.INVALID_REGISTER_SOURCE_HEADER:
@@ -154,7 +154,7 @@ export class AttributionReportingIssueDetailsView extends AffectedResourcesView
 
   async #appendElementOrEmptyCell(
       parent: HTMLElement, issue: IssuesManager.AttributionReportingIssue.AttributionReportingIssue): Promise<void> {
-    const details = issue.issueDetails;
+    const details = issue.details();
     if (details.violatingNodeId !== undefined) {
       const target = issue.model()?.target() || null;
       parent.appendChild(await this.createElementCell(

package/front_end/panels/issues/IssueKindView.ts

@@ -7,8 +7,8 @@ import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
 import * as Components from './components/components.js';
@@ -93,7 +93,7 @@ export class IssueKindView extends UI.TreeOutline.TreeElement {
     const header = document.createElement('div');
     header.classList.add('header');
 
-    const issueKindIcon = new IconButton.Icon.Icon();
+    const issueKindIcon = new Icon();
     issueKindIcon.name = IssueCounter.IssueCounter.getIssueKindIconName(this.#kind);
     issueKindIcon.classList.add('leading-issue-icon', 'extra-large');
 

package/front_end/panels/issues/IssueView.ts

@@ -12,9 +12,9 @@ import type {AggregatedIssue} from '../../models/issues_manager/IssueAggregator.
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as MarkdownView from '../../ui/components/markdown_view/markdown_view.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -159,7 +159,7 @@ class AffectedMixedContentView extends AffectedResourcesView {
 
     let count = 0;
     for (const issue of mixedContentIssues) {
-      const details = issue.getDetails();
+      const details = issue.details();
       this.appendAffectedMixedContent(details);
       count++;
     }
@@ -221,7 +221,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   affectedResources: UI.TreeOutline.TreeElement;
   readonly #affectedResourceViews: AffectedResourcesView[];
   #aggregatedIssuesCount: HTMLElement|null;
-  #issueKindIcon: IconButton.Icon.Icon|null = null;
+  #issueKindIcon: Icon|null = null;
   #hasBeenExpandedBefore: boolean;
   #throttle: Common.Throttler.Throttler;
   #needsUpdateOnExpand = true;
@@ -336,7 +336,7 @@ export class IssueView extends UI.TreeOutline.TreeElement {
   #appendHeader(): void {
     const header = document.createElement('div');
     header.classList.add('header');
-    this.#issueKindIcon = new IconButton.Icon.Icon();
+    this.#issueKindIcon = new Icon();
     this.#issueKindIcon.classList.add('leading-issue-icon', 'extra-large');
     this.#aggregatedIssuesCount = document.createElement('span');
     const countAdorner = new Adorners.Adorner.Adorner();

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

@@ -4,6 +4,7 @@
 
 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 UI from '../../ui/legacy/legacy.js';
 import type * as Timeline from '../timeline/timeline.js';
 
@@ -61,9 +62,10 @@ UI.ViewManager.registerViewExtension({
   order: 66,
   hasToolbar: false,
   isPreviewFeature: true,
-  async loadView() {
+  async loadView(universe) {
     const Timeline = await loadTimelineModule();
-    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: null});
+    const resourceLoader = universe.context.get(SDK.PageResourceLoader.PageResourceLoader);
+    return Timeline.TimelinePanel.TimelinePanel.instance({forceNew: true, resourceLoader});
   },
 });
 

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

@@ -3,10 +3,10 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as i18n from '../../../core/i18n/i18n.js';
-import * as Lit from '../../../ui/lit/lit.js';
+import {Directives, html, render, type TemplateResult} from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 
 import linearMemoryHighlightChipListStyles from './linearMemoryHighlightChipList.css.js';
@@ -28,76 +28,54 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings(
     'panels/linear_memory_inspector/components/LinearMemoryHighlightChipList.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {render, html} = Lit;
+const {classMap} = Directives;
 
 export interface LinearMemoryHighlightChipListData {
   highlightInfos: HighlightInfo[];
   focusedMemoryHighlight?: HighlightInfo;
-}
-
-export class DeleteMemoryHighlightEvent extends Event {
-  static readonly eventName = 'deletememoryhighlight';
-  data: HighlightInfo;
-
-  constructor(highlightInfo: HighlightInfo) {
-    super(DeleteMemoryHighlightEvent.eventName, {bubbles: true, composed: true});
-    this.data = highlightInfo;
-  }
-}
-
-export class JumpToHighlightedMemoryEvent extends Event {
-  static readonly eventName = 'jumptohighlightedmemory';
-  data: number;
-
-  constructor(address: number) {
-    super(JumpToHighlightedMemoryEvent.eventName);
-    this.data = address;
-  }
+  jumpToAddress?: (address: number) => void;
+  deleteHighlight?: (highlightInfo: HighlightInfo) => void;
 }
 
 export class LinearMemoryHighlightChipList extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #highlightedAreas: HighlightInfo[] = [];
   #focusedMemoryHighlight?: HighlightInfo;
+  #jumpToAddress?: (address: number) => void;
+  #deleteHighlight?: (highlightInfo: HighlightInfo) => void;
 
   set data(data: LinearMemoryHighlightChipListData) {
     this.#highlightedAreas = data.highlightInfos;
     this.#focusedMemoryHighlight = data.focusedMemoryHighlight;
+    this.#jumpToAddress = data.jumpToAddress;
+    this.#deleteHighlight = data.deleteHighlight;
     this.#render();
   }
 
   #render(): void {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
-    const chips = [];
-    for (const highlightInfo of this.#highlightedAreas) {
-      chips.push(this.#createChip(highlightInfo));
-    }
-    const result = html`
-            <style>${linearMemoryHighlightChipListStyles}</style>
-            <div class="highlight-chip-list">
-              ${chips}
-            </div>
-        `;
-    render(result, this.#shadow, { host: this });
+    render(html`
+      <style>${linearMemoryHighlightChipListStyles}</style>
+      <div class="highlight-chip-list">
+        ${this.#highlightedAreas.map(highlightInfo => this.#createChip(highlightInfo))}
+      </div>`, this.#shadow);
     // clang-format on
   }
 
-  #createChip(highlightInfo: HighlightInfo): Lit.TemplateResult {
+  #createChip(highlightInfo: HighlightInfo): TemplateResult {
     const expressionName = highlightInfo.name || '<anonymous>';
     const expressionType = highlightInfo.type;
     const isFocused = highlightInfo === this.#focusedMemoryHighlight;
-    const classMap = {
-      focused: isFocused,
-      'highlight-chip': true,
-    };
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <div class=${Lit.Directives.classMap(classMap)}>
-        <button class="jump-to-highlight-button" title=${i18nString(UIStrings.jumpToAddress)}
-            jslog=${VisualLogging.action('linear-memory-inspector.jump-to-highlight').track({click:true})}
-            @click=${():void => this.#onJumpToHighlightClick(highlightInfo.startAddress)}>
+      <div class=${classMap({focused: isFocused, 'highlight-chip': true})}>
+        <button class="jump-to-highlight-button"
+                title=${i18nString(UIStrings.jumpToAddress)}
+                jslog=${VisualLogging.action('linear-memory-inspector.jump-to-highlight')
+                          .track({click:true})}
+                @click=${() => this.#onJumpToHighlightClick(highlightInfo.startAddress)}>
           <span class="source-code">
             <span class="value">${expressionName}</span>
             <span class="separator">: </span>
@@ -106,23 +84,23 @@ export class LinearMemoryHighlightChipList extends HTMLElement {
         </button>
         <div class="delete-highlight-container">
           <button class="delete-highlight-button" title=${i18nString(UIStrings.deleteHighlight)}
-              jslog=${VisualLogging.action('linear-memory-inspector.delete-highlight').track({click:true})}
-              @click=${():void => this.#onDeleteHighlightClick(highlightInfo)}>
+              jslog=${VisualLogging.action('linear-memory-inspector.delete-highlight')
+                          .track({click:true})}
+              @click=${() => this.#onDeleteHighlightClick(highlightInfo)}>
             <devtools-icon name="cross" class="medium">
             </devtools-icon>
           </button>
         </div>
-      </div>
-    `;
+      </div>`;
     // clang-format off
   }
 
   #onJumpToHighlightClick(startAddress: number): void {
-    this.dispatchEvent(new JumpToHighlightedMemoryEvent(startAddress));
+    this.#jumpToAddress?.(startAddress);
   }
 
-  #onDeleteHighlightClick(highlight:HighlightInfo): void {
-    this.dispatchEvent(new DeleteMemoryHighlightEvent(highlight));
+  #onDeleteHighlightClick(highlight: HighlightInfo): void {
+    this.#deleteHighlight?.(highlight);
   }
 }