chrome-devtools-frontend 1.0.1402249 → 1.0.1418433

package/front_end/panels/timeline/components/IgnoreListSetting.test.ts

@@ -67,20 +67,24 @@ describeWithEnvironment('Ignore List Setting', () => {
       forceNew: true,
       debuggerWorkspaceBinding,
     });
+  });
 
-    ignoreRegex('rule 1');
+  beforeEach(() => {
+    const regexPatterns = getIgnoredRegexes();
+    // There is a default rule `/node_modules/|^node:`, So let's remove it for less confusion.
+    // Also this will clear the ignore list so each test can be individual.
+    regexPatterns.length = 0;
   });
 
   it('Able to render the ignore listed rules', async () => {
+    ignoreRegex('rule 1');
+
     const component = await renderIgnoreListSetting();
     const ignoredRules = getAllRules(component);
 
-    // There is a default rule `/node_modules/|/bower_components/`
-    assert.lengthOf(ignoredRules, 2);
-    assert.deepEqual(ignoredRules[0].regex, '/node_modules/|/bower_components/');
+    assert.lengthOf(ignoredRules, 1);
+    assert.deepEqual(ignoredRules[0].regex, 'rule 1');
     assert.isFalse(ignoredRules[0].disabled);
-    assert.deepEqual(ignoredRules[1].regex, 'rule 1');
-    assert.isFalse(ignoredRules[1].disabled);
 
     // Check the remove buttons are rendered
     assert.isNotNull(component.shadowRoot);
@@ -92,48 +96,42 @@ describeWithEnvironment('Ignore List Setting', () => {
   });
 
   it('Able to render the disabled ignore listed rules', async () => {
+    ignoreRegex('rule 1');
     disableIgnoreRegex('rule 1');
 
     const component = await renderIgnoreListSetting();
     const ignoredRules = getAllRules(component);
 
     // There is a default rule `/node_modules/|/bower_components/`
-    assert.lengthOf(ignoredRules, 2);
-    assert.deepEqual(ignoredRules[0].regex, '/node_modules/|/bower_components/');
-    assert.isFalse(ignoredRules[0].disabled);
-    assert.deepEqual(ignoredRules[1].regex, 'rule 1');
-    assert.isTrue(ignoredRules[1].disabled);
+    assert.lengthOf(ignoredRules, 1);
+    assert.deepEqual(ignoredRules[0].regex, 'rule 1');
+    assert.isTrue(ignoredRules[0].disabled);
   });
 
   it('Able to toggle the disable status of an ignore listed rules', async () => {
+    ignoreRegex('rule 1');
     const component = await renderIgnoreListSetting();
 
     assert.isNotNull(component.shadowRoot);
     const regexRows = component.shadowRoot.querySelectorAll<HTMLElement>('.regex-row');
-    // "rule 1" is the second in the view.
-    // Now the "rule 1" is disabled (by last test), so click the checkbox, it will be enabled.
-    // Add sanity checks to make sure.
-    const checkboxShadow = regexRows[1].querySelector('dt-checkbox')?.shadowRoot;
-    assert.strictEqual(checkboxShadow?.querySelector('label')?.textContent, 'rule 1');
-    assert.isTrue(isIgnoreRegexDisabled('rule 1'));
+    // Add sanity checks to make sure the rule is enabled before toggling.
+    assert.isFalse(isIgnoreRegexDisabled('rule 1'));
 
-    const rule1CheckBox = checkboxShadow?.querySelector('input');
+    const rule1CheckBox = regexRows[0].querySelector('dt-checkbox')?.shadowRoot?.querySelector('input');
     rule1CheckBox?.click();
-    assert.isFalse(isIgnoreRegexDisabled('rule 1'));
+    assert.isTrue(isIgnoreRegexDisabled('rule 1'));
   });
 
   it('Able to remove an ignore list rule', async () => {
+    ignoreRegex('rule 1');
     const component = await renderIgnoreListSetting();
 
     assert.isNotNull(component.shadowRoot);
     const regexRows = component.shadowRoot.querySelectorAll<HTMLElement>('.regex-row');
-    // "rule 1" is the second in the view.
-    // Add sanity checks to make sure.
-    const checkboxShadow = regexRows[1].querySelector('dt-checkbox')?.shadowRoot;
-    assert.strictEqual(checkboxShadow?.querySelector('label')?.textContent, 'rule 1');
+    // Add sanity checks to make sure 'rule 1' exists.
     assert.isTrue(isRegexInIgnoredList('rule 1'));
 
-    const rule1RemoveButton = regexRows[1].querySelector('devtools-button');
+    const rule1RemoveButton = regexRows[0].querySelector('devtools-button');
     rule1RemoveButton?.click();
     assert.isFalse(isRegexInIgnoredList('rule 1'));
   });
@@ -166,6 +164,7 @@ describeWithEnvironment('Ignore List Setting', () => {
   });
 
   it('Do not add a duplicate ignore list rule', async () => {
+    ignoreRegex('rule 1');
     disableIgnoreRegex('rule 1');
     assert.isTrue(isIgnoreRegexDisabled('rule 1'));
 
@@ -183,7 +182,7 @@ describeWithEnvironment('Ignore List Setting', () => {
     const newRegexInput = getNewRegexInput(component);
 
     dispatchFocusEvent(newRegexInput);
-    newRegexInput.value = 'rule 2';
+    newRegexInput.value = 'rule 1';
     dispatchInputEvent(newRegexInput);
     await RenderCoordinator.done();
 
@@ -199,6 +198,7 @@ describeWithEnvironment('Ignore List Setting', () => {
 
   it('Show error message for invalid rule', async () => {
     // One example of invalid rule is duplicate input.
+    ignoreRegex('rule 1');
     assert.isTrue(isRegexInIgnoredList('rule 1'));
 
     const component = await renderIgnoreListSetting();
@@ -223,6 +223,7 @@ describeWithEnvironment('Ignore List Setting', () => {
 
   it('Show warning message for valid rule with warning message', async () => {
     // One example of valid rule with warning message is when a rule is disabled and it is added again.
+    ignoreRegex('rule 1');
     disableIgnoreRegex('rule 1');
     assert.isTrue(isIgnoreRegexDisabled('rule 1'));
 
@@ -249,14 +250,13 @@ describeWithEnvironment('Ignore List Setting', () => {
   describe('preview the result', () => {
     it('Add an empty regex when focusing on the input', async () => {
       const regexPatterns = getIgnoredRegexes();
-      // There is a default rule `/node_modules/|/bower_components/`, and the 'rule 1' we added.
-      assert.lengthOf(regexPatterns, 2);
+      assert.lengthOf(regexPatterns, 0);
 
       const component = await renderIgnoreListSetting();
       const newRegexInput = getNewRegexInput(component);
 
       dispatchFocusEvent(newRegexInput);
-      assert.lengthOf(regexPatterns, 3);
+      assert.lengthOf(regexPatterns, 1);
 
       // We need this to simulate the 'finish editing', so it can remove the temp regex. Otherwise the future tests will
       // be messed up.
@@ -266,21 +266,20 @@ describeWithEnvironment('Ignore List Setting', () => {
 
     it('Update the regex when user typing', async () => {
       const regexPatterns = getIgnoredRegexes();
-      // There is a default rule `/node_modules/|/bower_components/`, and the 'rule 1' we added.
-      assert.lengthOf(regexPatterns, 2);
+      assert.lengthOf(regexPatterns, 0);
 
       const component = await renderIgnoreListSetting();
       const newRegexInput = getNewRegexInput(component);
 
       dispatchFocusEvent(newRegexInput);
-      assert.lengthOf(regexPatterns, 3);
+      assert.lengthOf(regexPatterns, 1);
       // After the focus event, the temp regex (last one) is still empty.
-      assert.strictEqual(regexPatterns[2].pattern, '');
+      assert.strictEqual(regexPatterns[0].pattern, '');
       // Simulate user's typing
       newRegexInput.value = 'r';
       dispatchInputEvent(newRegexInput);
       // After the input event, the temp regex (last one) is updated.
-      assert.strictEqual(regexPatterns[2].pattern, 'r');
+      assert.strictEqual(regexPatterns[0].pattern, 'r');
 
       // We need this to simulate the 'finish editing' with empty input, so it can remove the temp regex. Otherwise the
       // future tests will be messed up.
@@ -291,38 +290,37 @@ describeWithEnvironment('Ignore List Setting', () => {
 
     it('Add the regex when user finish typing', async () => {
       const regexPatterns = getIgnoredRegexes();
-      // There is a default rule `/node_modules/|/bower_components/`, and the 'rule 1' we added.
-      assert.lengthOf(regexPatterns, 2);
+      assert.lengthOf(regexPatterns, 0);
 
       const component = await renderIgnoreListSetting();
       const newRegexInput = getNewRegexInput(component);
 
       dispatchFocusEvent(newRegexInput);
-      newRegexInput.value = 'rule 2';
-      assert.lengthOf(regexPatterns, 3);
+      newRegexInput.value = 'rule 1';
+      assert.lengthOf(regexPatterns, 1);
 
       dispatchBlurEvent(newRegexInput);
       // When add a valid rule, the temp regex won't be removed.
-      assert.lengthOf(regexPatterns, 3);
-      assert.strictEqual(regexPatterns[2].pattern, 'rule 2');
+      assert.lengthOf(regexPatterns, 1);
+      assert.strictEqual(regexPatterns[0].pattern, 'rule 1');
     });
 
     it('Remove the invalid regex when user finish typing', async () => {
+      ignoreRegex('rule 1');
       const regexPatterns = getIgnoredRegexes();
-      // There is a default rule `/node_modules/|/bower_components/`, and the 'rule 1', 'rule 2' we added.
-      assert.lengthOf(regexPatterns, 3);
+      assert.lengthOf(regexPatterns, 1);
 
       const component = await renderIgnoreListSetting();
       const newRegexInput = getNewRegexInput(component);
 
       dispatchFocusEvent(newRegexInput);
       // This is a duplicate rule, so it is invalid.
-      newRegexInput.value = 'rule 2';
-      assert.lengthOf(regexPatterns, 4);
+      newRegexInput.value = 'rule 1';
+      assert.lengthOf(regexPatterns, 2);
 
       dispatchBlurEvent(newRegexInput);
       // When add an invalid rule, the temp regex will be removed.
-      assert.lengthOf(regexPatterns, 3);
+      assert.lengthOf(regexPatterns, 1);
     });
 
     it('Clear the input when `Escape` is pressed', async () => {
@@ -330,7 +328,7 @@ describeWithEnvironment('Ignore List Setting', () => {
       const newRegexInput = getNewRegexInput(component);
 
       // This is a duplicate rule, so it is invalid.
-      newRegexInput.value = 'rule 2';
+      newRegexInput.value = 'rule 1';
 
       dispatchKeyDownEvent(newRegexInput, {key: Platform.KeyboardUtilities.ESCAPE_KEY});
       // When add an invalid rule, the temp regex will be removed.

package/front_end/panels/timeline/components/IgnoreListSetting.ts

@@ -12,11 +12,15 @@ import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as Dialogs from '../../../ui/components/dialogs/dialogs.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 * as Lit from '../../../ui/lit/lit.js';
 
-import ignoreListSettingStyles from './ignoreListSetting.css.js';
+import ignoreListSettingStylesRaw from './ignoreListSetting.css.js';
 
-const {html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const ignoreListSettingStyles = new CSSStyleSheet();
+ignoreListSettingStyles.replaceSync(ignoreListSettingStylesRaw.cssContent);
+
+const {html} = Lit;
 
 const UIStrings = {
   /**
@@ -106,6 +110,12 @@ export class IgnoreListSetting extends HTMLElement {
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [ignoreListSettingStyles];
     this.#scheduleRender();
+
+    // Prevent the event making its way to the TimelinePanel element which will
+    // cause the "Load Profile" context menu to appear.
+    this.addEventListener('contextmenu', e => {
+      e.stopPropagation();
+    });
   }
 
   #scheduleRender(): void {
@@ -118,6 +128,7 @@ export class IgnoreListSetting extends HTMLElement {
   }
 
   #startEditing(): void {
+    // Do not need to trim here because this is a temporary one, we will trim the input when finish editing,
     this.#editingRegexSetting = {pattern: this.#newRegexInput.value, disabled: false, disabledForUrl: undefined};
     // We need to push the temp regex here to update the flame chart.
     // We are using the "skip-stack-frames-pattern" setting to determine which is rendered on flame chart. And the push
@@ -145,6 +156,9 @@ export class IgnoreListSetting extends HTMLElement {
   #resetInput(): void {
     this.#newRegexCheckbox.checkboxElement.checked = false;
     this.#newRegexInput.value = '';
+
+    this.#newRegexIsValid = true;
+    this.#newRegexValidationMessage = undefined;
   }
 
   #addNewRegexToIgnoreList(): void {
@@ -197,7 +211,7 @@ export class IgnoreListSetting extends HTMLElement {
     return this.#regexPatterns;
   }
 
-  #handleInputChange(): void {
+  #validateInput(): void {
     const newRegex = this.#newRegexInput.value.trim();
     const newRegexIsNotEmpty = Boolean(newRegex);
     // Enable the rule if the text input field is not empty.
@@ -208,10 +222,15 @@ export class IgnoreListSetting extends HTMLElement {
     UI.ARIAUtils.setInvalid(this.#newRegexInput, !valid);
     this.#newRegexIsValid = valid;
     this.#newRegexValidationMessage = message;
+  }
+
+  #handleInputChange(): void {
+    this.#validateInput();
 
     if (this.#editingRegexSetting) {
-      this.#editingRegexSetting.pattern = this.#newRegexInput.value.trim();
-      this.#editingRegexSetting.disabled = !newRegexIsNotEmpty;
+      const newRegex = this.#newRegexInput.value.trim();
+      this.#editingRegexSetting.pattern = newRegex;
+      this.#editingRegexSetting.disabled = !Boolean(newRegex);
       this.#getSkipStackFramesPatternSetting().setAsArray(this.#regexPatterns);
     }
   }
@@ -230,8 +249,8 @@ export class IgnoreListSetting extends HTMLElement {
     this.#newRegexInput.addEventListener('focus', this.#startEditing.bind(this), false);
   }
 
-  #renderNewRegexRow(): LitHtml.TemplateResult {
-    const classes = LitHtml.Directives.classMap({
+  #renderNewRegexRow(): Lit.TemplateResult {
+    const classes = Lit.Directives.classMap({
       'input-validation': true,
       'input-validation-error': !this.#newRegexIsValid,
     });
@@ -239,13 +258,13 @@ export class IgnoreListSetting extends HTMLElement {
       <div class='new-regex-row'>${this.#newRegexCheckbox}${this.#newRegexInput}</div>
       ${
         this.#newRegexValidationMessage ? html`<div class=${classes}>${this.#newRegexValidationMessage}</div>` :
-                                          LitHtml.nothing}
+                                          Lit.nothing}
     `;
   }
 
   #onRegexEnableToggled(regex: Common.Settings.RegExpSettingItem, checkbox: UI.UIUtils.CheckboxLabel): void {
     regex.disabled = !checkbox.checkboxElement.checked;
-
+    this.#validateInput();
     // Technically we don't need to call the set function, because the regex is a reference, so it changed the setting
     // value directly.
     // But we need to call the set function to trigger the setting change event. which is needed by view update of flame
@@ -257,10 +276,13 @@ export class IgnoreListSetting extends HTMLElement {
 
   #removeRegexByIndex(index: number): void {
     this.#regexPatterns.splice(index, 1);
+    this.#validateInput();
+    // Call the set function to trigger the setting change event. we listen to this event and will update this component
+    // and the flame chart.
     this.#getSkipStackFramesPatternSetting().setAsArray(this.#regexPatterns);
   }
 
-  #renderItem(regex: Common.Settings.RegExpSettingItem, index: number): LitHtml.TemplateResult {
+  #renderItem(regex: Common.Settings.RegExpSettingItem, index: number): Lit.TemplateResult {
     const checkboxWithLabel = UI.UIUtils.CheckboxLabel.createWithStringLiteral(
         regex.pattern, !regex.disabled, /* subtitle*/ undefined, /* jslogContext*/ 'timeline.ignore-list-pattern');
     const helpText = i18nString(UIStrings.ignoreScriptsWhoseNamesMatchS, {regex: regex.pattern});
@@ -310,7 +332,7 @@ export class IgnoreListSetting extends HTMLElement {
       </devtools-button-dialog>
     `;
     // clang-format on
-    LitHtml.render(output, this.#shadow, {host: this});
+    Lit.render(output, this.#shadow, {host: this});
   }
 }
 
@@ -353,7 +375,7 @@ export function patternValidator(existingRegexes: Common.Settings.RegExpSettingI
   let regex;
   try {
     regex = new RegExp(pattern);
-  } catch (e) {
+  } catch {
   }
   if (!regex) {
     return {valid: false, message: i18nString(UIStrings.patternMustBeAValidRegular)};

package/front_end/panels/timeline/components/InteractionBreakdown.ts

@@ -4,11 +4,15 @@
 import * as i18n from '../../../core/i18n/i18n.js';
 import type * as Trace from '../../../models/trace/trace.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 
-import styles from './interactionBreakdown.css.js';
+import stylesRaw from './interactionBreakdown.css.js';
 
-const {html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const styles = new CSSStyleSheet();
+styles.replaceSync(stylesRaw.cssContent);
+
+const {html} = Lit;
 
 const UIStrings = {
   /**
@@ -51,7 +55,7 @@ export class InteractionBreakdown extends HTMLElement {
     const inputDelay = i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(this.#entry.inputDelay);
     const mainThreadTime = i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(this.#entry.mainThreadHandling);
     const presentationDelay = i18n.TimeUtilities.formatMicroSecondsAsMillisFixed(this.#entry.presentationDelay);
-    LitHtml.render(
+    Lit.render(
         html`<ul class="breakdown">
                      <li data-entry="input-delay">${i18nString(UIStrings.inputDelay)}<span class="value">${
             inputDelay}</span></li>

package/front_end/panels/timeline/components/LayoutShiftDetails.ts

@@ -8,15 +8,21 @@ import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Helpers from '../../../models/trace/helpers/helpers.js';
 import * as Trace from '../../../models/trace/trace.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as LegacyComponents from '../../../ui/legacy/components/utils/utils.js';
-import * as UI from '../../../ui/legacy/legacy.js';
-import * as LitHtml from '../../../ui/lit-html/lit-html.js';
+import * as Lit from '../../../ui/lit/lit.js';
 import * as Utils from '../utils/utils.js';
 
 import * as Insights from './insights/insights.js';
-import layoutShiftDetailsStyles from './layoutShiftDetails.css.js';
+import layoutShiftDetailsStylesRaw from './layoutShiftDetails.css.js';
 
-const {html} = LitHtml;
+// TODO(crbug.com/391381439): Fully migrate off of constructed style sheets.
+const layoutShiftDetailsStyles = new CSSStyleSheet();
+layoutShiftDetailsStyles.replaceSync(layoutShiftDetailsStylesRaw.cssContent);
+const textButtonStyles = new CSSStyleSheet();
+textButtonStyles.replaceSync(Buttons.textButtonStyles.cssContent);
+
+const {html} = Lit;
 
 const MAX_URL_LENGTH = 20;
 
@@ -89,9 +95,11 @@ export class LayoutShiftDetails extends HTMLElement {
   #isFreshRecording: Boolean = false;
 
   connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [layoutShiftDetailsStyles];
-    // Styles for linkifier button.
-    UI.UIUtils.injectTextButtonStyles(this.#shadow);
+    this.#shadow.adoptedStyleSheets = [
+      layoutShiftDetailsStyles,
+      // Styles for linkifier button.
+      textButtonStyles,
+    ];
     this.#render();
   }
 
@@ -110,7 +118,7 @@ export class LayoutShiftDetails extends HTMLElement {
   }
 
   #renderTitle(event: Trace.Types.Events.SyntheticLayoutShift|
-               Trace.Types.Events.SyntheticLayoutShiftCluster): LitHtml.TemplateResult {
+               Trace.Types.Events.SyntheticLayoutShiftCluster): Lit.TemplateResult {
     const title = Utils.EntryName.nameForEntry(event);
     return html`
       <div class="layout-shift-details-title">
@@ -120,21 +128,28 @@ export class LayoutShiftDetails extends HTMLElement {
     `;
   }
 
-  #renderShiftedElements(elementsShifted: Trace.Types.Events.TraceImpactedNode[]|undefined): LitHtml.LitTemplate {
+  #renderShiftedElements(
+      shift: Trace.Types.Events.SyntheticLayoutShift,
+      elementsShifted: Trace.Types.Events.TraceImpactedNode[]|undefined): Lit.LitTemplate {
     // clang-format off
     return html`
       ${elementsShifted?.map(el => {
         if (el.node_id !== undefined) {
           return html`
-            <devtools-performance-node-link .data=${{backendNodeId: el.node_id}}>
+            <devtools-performance-node-link
+              .data=${{
+                backendNodeId: el.node_id,
+                frame: shift.args.frame,
+                // TODO(crbug.com/371620361): if ever rendered for non-fresh traces, this needs to set a fallback text value.
+              } as Insights.NodeLink.NodeLinkData}>
             </devtools-performance-node-link>`;
         }
-          return LitHtml.nothing;
+          return Lit.nothing;
       })}`;
     // clang-format on
   }
 
-  #renderIframe(iframeId: string): LitHtml.TemplateResult|null {
+  #renderIframe(iframeId: string): Lit.TemplateResult|null {
     const domLoadingId = iframeId as Protocol.Page.FrameId;
     if (!domLoadingId) {
       return null;
@@ -151,7 +166,7 @@ export class LayoutShiftDetails extends HTMLElement {
     // clang-format on
   }
 
-  #renderFontRequest(request: Trace.Types.Events.SyntheticNetworkRequest): LitHtml.TemplateResult|null {
+  #renderFontRequest(request: Trace.Types.Events.SyntheticNetworkRequest): Lit.TemplateResult|null {
     const options = {
       tabStop: true,
       showColumnNumber: false,
@@ -173,8 +188,7 @@ export class LayoutShiftDetails extends HTMLElement {
     this.dispatchEvent(new Insights.EventRef.EventReferenceClick(event));
   }
 
-  #renderAnimation(failure: Trace.Insights.Models.CLSCulprits.NoncompositedAnimationFailure): LitHtml.TemplateResult
-      |null {
+  #renderAnimation(failure: Trace.Insights.Models.CLSCulprits.NoncompositedAnimationFailure): Lit.TemplateResult|null {
     const event = failure.animation;
     if (!event) {
       return null;
@@ -188,12 +202,15 @@ export class LayoutShiftDetails extends HTMLElement {
     // clang-format on
   }
 
-  #renderUnsizedImage(node: Protocol.DOM.BackendNodeId): LitHtml.TemplateResult|null {
+  #renderUnsizedImage(frame: string, backendNodeId: Protocol.DOM.BackendNodeId): Lit.TemplateResult|null {
     // clang-format off
     const el = html`
       <devtools-performance-node-link
         .data=${{
-          backendNodeId: node,
+          backendNodeId,
+          frame,
+          // TODO(crbug.com/371620361): if ever rendered for non-fresh traces, this needs to set a fallback text value. This requires
+          // `rootCauses.unsizedImages` to have more than just the backend node id.
         } as Insights.NodeLink.NodeLinkData}>
       </devtools-performance-node-link>`;
     return html`
@@ -201,21 +218,22 @@ export class LayoutShiftDetails extends HTMLElement {
     // clang-format on
   }
 
-  #renderRootCauseValues(rootCauses: Trace.Insights.Models.CLSCulprits.LayoutShiftRootCausesData|
-                         undefined): LitHtml.TemplateResult|null {
+  #renderRootCauseValues(
+      frame: string,
+      rootCauses: Trace.Insights.Models.CLSCulprits.LayoutShiftRootCausesData|undefined): Lit.TemplateResult|null {
     return html`
       ${rootCauses?.fontRequests.map(fontReq => this.#renderFontRequest(fontReq))}
       ${rootCauses?.iframeIds.map(iframe => this.#renderIframe(iframe))}
       ${rootCauses?.nonCompositedAnimations.map(failure => this.#renderAnimation(failure))}
-      ${rootCauses?.unsizedImages.map(image => this.#renderUnsizedImage(image))}
+      ${rootCauses?.unsizedImages.map(backendNodeId => this.#renderUnsizedImage(frame, backendNodeId))}
     `;
   }
 
   #renderStartTime(shift: Trace.Types.Events.SyntheticLayoutShift, parsedTrace: Trace.Handlers.Types.ParsedTrace):
-      LitHtml.TemplateResult|null {
-    const ts = Trace.Types.Timing.MicroSeconds(shift.ts - parsedTrace.Meta.traceBounds.min);
+      Lit.TemplateResult|null {
+    const ts = Trace.Types.Timing.Micro(shift.ts - parsedTrace.Meta.traceBounds.min);
     if (shift === this.#event) {
-      return html`${i18n.TimeUtilities.preciseMillisToString(Helpers.Timing.microSecondsToMilliseconds(ts))}`;
+      return html`${i18n.TimeUtilities.preciseMillisToString(Helpers.Timing.microToMilli(ts))}`;
     }
     const shiftTs = i18n.TimeUtilities.formatMicroSecondsTime(ts);
     // clang-format off
@@ -227,7 +245,7 @@ export class LayoutShiftDetails extends HTMLElement {
   #renderShiftRow(
       shift: Trace.Types.Events.SyntheticLayoutShift, parsedTrace: Trace.Handlers.Types.ParsedTrace,
       elementsShifted: Trace.Types.Events.TraceImpactedNode[],
-      rootCauses: Trace.Insights.Models.CLSCulprits.LayoutShiftRootCausesData|undefined): LitHtml.TemplateResult|null {
+      rootCauses: Trace.Insights.Models.CLSCulprits.LayoutShiftRootCausesData|undefined): Lit.TemplateResult|null {
     const score = shift.args.data?.weighted_score_delta;
     if (!score) {
       return null;
@@ -237,6 +255,8 @@ export class LayoutShiftDetails extends HTMLElement {
         (rootCauses.fontRequests.length || rootCauses.iframeIds.length || rootCauses.nonCompositedAnimations.length ||
          rootCauses.unsizedImages.length));
 
+    // TODO(crbug.com/371620361): Needs to show something for non-fresh recordings.
+
     // clang-format off
     return html`
       <tr class="shift-row" data-ts=${shift.ts}>
@@ -245,24 +265,24 @@ export class LayoutShiftDetails extends HTMLElement {
         ${this.#isFreshRecording ? html`
           <td>
             <div class="elements-shifted">
-              ${this.#renderShiftedElements(elementsShifted)}
+              ${this.#renderShiftedElements(shift, elementsShifted)}
             </div>
-          </td>` : LitHtml.nothing}
+          </td>` : Lit.nothing}
         ${hasCulprits && this.#isFreshRecording ? html`
           <td class="culprits">
-            ${this.#renderRootCauseValues(rootCauses)}
-          </td>` : LitHtml.nothing}
+            ${this.#renderRootCauseValues(shift.args.frame, rootCauses)}
+          </td>` : Lit.nothing}
       </tr>`;
     // clang-format on
   }
 
   #renderParentCluster(
       cluster: Trace.Types.Events.SyntheticLayoutShiftCluster|undefined,
-      parsedTrace: Trace.Handlers.Types.ParsedTrace): LitHtml.TemplateResult|null {
+      parsedTrace: Trace.Handlers.Types.ParsedTrace): Lit.TemplateResult|null {
     if (!cluster) {
       return null;
     }
-    const ts = Trace.Types.Timing.MicroSeconds(cluster.ts - (parsedTrace?.Meta.traceBounds.min ?? 0));
+    const ts = Trace.Types.Timing.Micro(cluster.ts - (parsedTrace?.Meta.traceBounds.min ?? 0));
     const clusterTs = i18n.TimeUtilities.formatMicroSecondsTime(ts);
 
     // clang-format off
@@ -273,7 +293,7 @@ export class LayoutShiftDetails extends HTMLElement {
     // clang-format on
   }
 
-  #renderClusterTotalRow(cluster: Trace.Types.Events.SyntheticLayoutShiftCluster): LitHtml.TemplateResult|null {
+  #renderClusterTotalRow(cluster: Trace.Types.Events.SyntheticLayoutShiftCluster): Lit.TemplateResult|null {
     // clang-format off
     return html`
       <td class="total-row">${i18nString(UIStrings.total)}</td>
@@ -285,7 +305,7 @@ export class LayoutShiftDetails extends HTMLElement {
       layoutShift: Trace.Types.Events.SyntheticLayoutShift,
       traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null,
       parsedTrace: Trace.Handlers.Types.ParsedTrace,
-      ): LitHtml.TemplateResult|null {
+      ): Lit.TemplateResult|null {
     if (!traceInsightsSets) {
       return null;
     }
@@ -314,9 +334,9 @@ export class LayoutShiftDetails extends HTMLElement {
             <th>${i18nString(UIStrings.startTime)}</th>
             <th>${i18nString(UIStrings.shiftScore)}</th>
             ${hasShiftedElements && this.#isFreshRecording ? html`
-              <th>${i18nString(UIStrings.elementsShifted)}</th>` : LitHtml.nothing}
+              <th>${i18nString(UIStrings.elementsShifted)}</th>` : Lit.nothing}
             ${hasCulprits && this.#isFreshRecording ? html`
-              <th>${i18nString(UIStrings.culprit)}</th> ` : LitHtml.nothing}
+              <th>${i18nString(UIStrings.culprit)}</th> ` : Lit.nothing}
           </tr>
         </thead>
         <tbody>
@@ -331,7 +351,7 @@ export class LayoutShiftDetails extends HTMLElement {
   #renderClusterDetails(
       cluster: Trace.Types.Events.SyntheticLayoutShiftCluster,
       traceInsightsSets: Trace.Insights.Types.TraceInsightSets|null,
-      parsedTrace: Trace.Handlers.Types.ParsedTrace): LitHtml.TemplateResult|null {
+      parsedTrace: Trace.Handlers.Types.ParsedTrace): Lit.TemplateResult|null {
     if (!traceInsightsSets) {
       return null;
     }
@@ -358,9 +378,9 @@ export class LayoutShiftDetails extends HTMLElement {
                 <th>${i18nString(UIStrings.startTime)}</th>
                 <th>${i18nString(UIStrings.shiftScore)}</th>
                 ${this.#isFreshRecording ? html`
-                  <th>${i18nString(UIStrings.elementsShifted)}</th>` : LitHtml.nothing}
+                  <th>${i18nString(UIStrings.elementsShifted)}</th>` : Lit.nothing}
                 ${hasCulprits && this.#isFreshRecording ? html`
-                  <th>${i18nString(UIStrings.culprit)}</th> ` : LitHtml.nothing}
+                  <th>${i18nString(UIStrings.culprit)}</th> ` : Lit.nothing}
               </tr>
             </thead>
             <tbody>
@@ -398,7 +418,7 @@ export class LayoutShiftDetails extends HTMLElement {
       </div>
     `;
     // clang-format on
-    LitHtml.render(output, this.#shadow, {host: this});
+    Lit.render(output, this.#shadow, {host: this});
   }
 
   #togglePopover(e: MouseEvent): void {

package/front_end/panels/timeline/components/LiveMetricsView.test.ts

@@ -58,7 +58,7 @@ function selectVisibleLog(view: Element, logId: string): void {
 
 function getClearLogButton(view: Element): HTMLElementTagNameMap['devtools-button'] {
   return view.shadowRoot!.querySelector('devtools-live-metrics-logs')!.shadowRoot!.querySelector('.tabbed-pane')!
-      .shadowRoot!.querySelector('.toolbar')!.shadowRoot!.querySelector('devtools-button')!;
+      .shadowRoot!.querySelector('devtools-toolbar devtools-button')!;
 }
 
 function selectDeviceOption(view: Element, deviceOption: string): void {
@@ -717,7 +717,7 @@ describeWithMockConnection('LiveMetricsView', () => {
         warnings: [],
       };
 
-      sinon.stub(CrUXManager.CrUXManager.instance(), 'getFieldDataForCurrentPage').callsFake(async () => mockFieldData);
+      sinon.stub(CrUXManager.CrUXManager.instance(), 'getFieldDataForPage').callsFake(async () => mockFieldData);
       CrUXManager.CrUXManager.instance().getConfigSetting().set({enabled: true, override: ''});
     });