chrome-devtools-frontend 1.0.1153166 → 1.0.1155899

package/front_end/panels/application/preloading/PreloadingView.ts

@@ -188,10 +188,12 @@ class PreloadingUIUtils {
 // PreloadingMoedl.onPrimaryPageChanged.
 class PreloadingModelProxy implements SDK.TargetManager.SDKModelObserver<SDK.PreloadingModel.PreloadingModel> {
   model: SDK.PreloadingModel.PreloadingModel;
-  private readonly view: PreloadingView;
+  private readonly view: PreloadingView|PreloadingResultView;
   private readonly warningsView: PreloadingWarningsView;
 
-  constructor(model: SDK.PreloadingModel.PreloadingModel, view: PreloadingView, warningsView: PreloadingWarningsView) {
+  constructor(
+      model: SDK.PreloadingModel.PreloadingModel, view: PreloadingView|PreloadingResultView,
+      warningsView: PreloadingWarningsView) {
     this.view = view;
     this.warningsView = warningsView;
 
@@ -237,7 +239,6 @@ export class PreloadingView extends UI.Widget.VBox {
 
   private readonly warningsContainer: HTMLDivElement;
   private readonly warningsView = new PreloadingWarningsView();
-  private readonly hsplitUsedPreloading: UI.SplitWidget.SplitWidget;
   private readonly hsplit: UI.SplitWidget.SplitWidget;
   private readonly vsplitRuleSets: UI.SplitWidget.SplitWidget;
   private readonly ruleSetGrid = new PreloadingComponents.RuleSetGrid.RuleSetGrid();
@@ -255,22 +256,19 @@ export class PreloadingView extends UI.Widget.VBox {
     // this (VBox)
     //   +- warningsContainer
     //        +- PreloadingWarningsView
-    //   +- hsplitUsedPreloading
-    //        +- hsplit
-    //             +- vsplitRuleSets
+    //   +- hsplit
+    //        +- vsplitRuleSets
+    //             +- leftContainer
+    //                  +- RuleSetGrid
+    //             +- rightContainer
+    //                  +- RuleSetDetailsReportView
+    //        +- VBox
+    //             +- toolbar (filtering)
+    //             +- vsplitPreloadingAttempts
     //                  +- leftContainer
-    //                       +- RuleSetGrid
+    //                       +- PreloadingGrid
     //                  +- rightContainer
-    //                       +- RuleSetDetailsReportView
-    //             +- VBox
-    //                  +- toolbar (filtering)
-    //                  +- vsplitPreloadingAttempts
-    //                       +- leftContainer
-    //                            +- PreloadingGrid
-    //                       +- rightContainer
-    //                            +- PreloadingDetailsReportView
-    //        +- VBox
-    //             + UsedPreloadingReportView
+    //                       +- PreloadingDetailsReportView
     //
     // - If an row of RuleSetGrid selected, RuleSetDetailsReportView shows details of it.
     // - If not, RuleSetDetailsReportView hides.
@@ -308,19 +306,6 @@ export class PreloadingView extends UI.Widget.VBox {
     );
     this.hsplit.setSidebarWidget(this.vsplitRuleSets);
     this.hsplit.setMainWidget(preloadingAttempts);
-
-    const usedPreloadingContainer = new UI.Widget.VBox();
-    usedPreloadingContainer.contentElement.appendChild(this.usedPreloading);
-    this.hsplitUsedPreloading = new UI.SplitWidget.SplitWidget(
-        /* isVertical */ false,
-        /* secondIsSidebar */ true,
-        /* settingName */ undefined,
-        /* defaultSidebarWidth */ undefined,
-        /* defaultSidebarHeight */ 50,
-        /* constraintsInDip */ undefined,
-    );
-    this.hsplitUsedPreloading.setMainWidget(this.hsplit);
-    this.hsplitUsedPreloading.setSidebarWidget(usedPreloadingContainer);
   }
 
   private makeVsplit(left: HTMLElement, right: HTMLElement): UI.SplitWidget.SplitWidget {
@@ -353,7 +338,7 @@ export class PreloadingView extends UI.Widget.VBox {
 
     this.registerCSSFiles([emptyWidgetStyles, preloadingViewStyles]);
 
-    this.hsplitUsedPreloading.show(this.contentElement);
+    this.hsplit.show(this.contentElement);
 
     // Lazily initialize PreloadingModelProxy because this triggers a chain
     //
@@ -476,6 +461,54 @@ export class PreloadingView extends UI.Widget.VBox {
   }
 }
 
+export class PreloadingResultView extends UI.Widget.VBox {
+  private readonly modelProxy: PreloadingModelProxy;
+
+  private readonly warningsContainer: HTMLDivElement;
+  private readonly warningsView = new PreloadingWarningsView();
+  private readonly usedPreloading = new PreloadingComponents.UsedPreloadingView.UsedPreloadingView();
+
+  constructor(model: SDK.PreloadingModel.PreloadingModel) {
+    super(/* isWebComponent */ true, /* delegatesFocus */ false);
+
+    this.modelProxy = new PreloadingModelProxy(model, this, this.warningsView);
+
+    this.warningsContainer = document.createElement('div');
+    this.warningsContainer.classList.add('flex-none');
+    this.contentElement.insertBefore(this.warningsContainer, this.contentElement.firstChild);
+    this.warningsView.show(this.warningsContainer);
+
+    const usedPreloadingContainer = new UI.Widget.VBox();
+    usedPreloadingContainer.contentElement.appendChild(this.usedPreloading);
+    usedPreloadingContainer.show(this.contentElement);
+  }
+
+  override wasShown(): void {
+    super.wasShown();
+
+    this.registerCSSFiles([emptyWidgetStyles, preloadingViewStyles]);
+
+    // Lazily initialize PreloadingModelProxy because this triggers a chain
+    //
+    //    PreloadingModelProxy.initialize()
+    // -> TargetManager.observeModels()
+    // -> PreloadingModelProxy.modelAdded()
+    // -> PreloadingResultView.render()
+    //
+    // , and PreloadingView.onModelAdded() requires all members are
+    // initialized. So, here is the best timing.
+    this.modelProxy.initialize();
+  }
+
+  render(): void {
+    this.usedPreloading.data = this.modelProxy.model.getPreloadingAttemptsOfPreviousPage().map(({value}) => value);
+  }
+
+  getUsedPreloadingForTest(): PreloadingComponents.UsedPreloadingView.UsedPreloadingView {
+    return this.usedPreloading;
+  }
+}
+
 export class PreloadingWarningsView extends UI.Widget.VBox {
   constructor() {
     super(/* isWebComponent */ false, /* delegatesFocus */ false);

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -7,9 +7,14 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import * as Protocol from '../../../../generated/protocol.js';
 import * as ComponentHelpers from '../../../../ui/components/helpers/helpers.js';
 import * as Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
+import * as ReportView from '../../../../ui/components/report_view/report_view.js';
 import * as LitHtml from '../../../../ui/lit-html/lit-html.js';
 
 const UIStrings = {
+  /**
+   *@description Title for the panel
+   */
+  preloadingUsedForThisPage: 'Preloading used for this page',
   /**
    *@description Message that reports counts of prefetch that used for this page.
    *@example {1} PH1
@@ -49,13 +54,14 @@ export class UsedPreloadingView extends HTMLElement {
           used.filter(attempt => attempt.key.action === Protocol.Preload.SpeculationAction.Prefetch).length;
       const prerenderCount = used.length - prefetchCount;
 
-      if (used.length === 0) {
-        LitHtml.render(LitHtml.nothing, this.#shadow, {host: this});
-        return;
-      }
-
       let message = '';
-      if (prerenderCount > 0) {
+
+      if (used.length === 0) {
+        // TODO(https://crbug.com/1410709): Remake entire this view.
+        //
+        // For a while, we fill temporary string.
+        message = i18n.i18n.lockedString('No preloading was used for this page.');
+      } else if (prerenderCount > 0) {
         message = i18nString(UIStrings.prerenderUsed);
       } else if (prefetchCount > 0) {
         message = i18nString(UIStrings.prefetchUsed, {PH1: prefetchCount});
@@ -64,9 +70,13 @@ export class UsedPreloadingView extends HTMLElement {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(LitHtml.html`
-          <div>
-            <p>${message}</p>
-          </div>
+        <${ReportView.ReportView.Report.litTagName} .data=${
+            {reportTitle: i18nString(UIStrings.preloadingUsedForThisPage)} as ReportView.ReportView.ReportData
+        }>
+            <${ReportView.ReportView.ReportSection.litTagName}>
+                ${message}
+            </${ReportView.ReportView.ReportSection.litTagName}>
+        </${ReportView.ReportView.Report.litTagName}>
       `, this.#shadow, {host: this});
       // clang-format on
     });

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -40,6 +40,7 @@ import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
+import * as Host from '../../core/host/host.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
@@ -466,6 +467,14 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return elements;
   }
 
+  #getLinkifierMetric(): Host.UserMetrics.Action|undefined {
+    const request = Logs.NetworkLog.NetworkLog.requestForConsoleMessage(this.message);
+    if (request?.resourceType().isStyleSheet()) {
+      return Host.UserMetrics.Action.StyleSheetInitiatorLinkClicked;
+    }
+    return undefined;
+  }
+
   protected buildMessageAnchor(): HTMLElement|null {
     const runtimeModel = this.message.runtimeModel();
     if (!runtimeModel) {
@@ -474,23 +483,26 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
     const linkify = ({stackFrameWithBreakpoint, scriptId, stackTrace, url, line, column}:
                          SDK.ConsoleModel.ConsoleMessage): HTMLElement|null => {
+      const userMetric = this.#getLinkifierMetric();
       if (stackFrameWithBreakpoint) {
         return this.linkifier.maybeLinkifyConsoleCallFrame(runtimeModel.target(), stackFrameWithBreakpoint, {
           inlineFrameIndex: 0,
           revealBreakpoint: true,
+          userMetric,
         });
       }
       if (scriptId) {
         return this.linkifier.linkifyScriptLocation(
             runtimeModel.target(), scriptId, url || Platform.DevToolsPath.EmptyUrlString, line,
-            {columnNumber: column, inlineFrameIndex: 0});
+            {columnNumber: column, inlineFrameIndex: 0, userMetric});
       }
       if (stackTrace && stackTrace.callFrames.length) {
         return this.linkifier.linkifyStackTraceTopFrame(runtimeModel.target(), stackTrace);
       }
       if (url && url !== 'undefined') {
         return this.linkifier.linkifyScriptLocation(
-            runtimeModel.target(), /* scriptId */ null, url, line, {columnNumber: column, inlineFrameIndex: 0});
+            runtimeModel.target(), /* scriptId */ null, url, line,
+            {columnNumber: column, inlineFrameIndex: 0, userMetric});
       }
       return null;
     };

package/front_end/panels/elements/ElementsPanel.ts

@@ -57,7 +57,6 @@ import {ElementsTreeElementHighlighter} from './ElementsTreeElementHighlighter.j
 import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 import {type MarkerDecorator} from './MarkerDecorator.js';
 import {MetricsSidebarPane} from './MetricsSidebarPane.js';
-import {LayoutSidebarPane} from './LayoutSidebarPane.js';
 import {
   Events as StylesSidebarPaneEvents,
   StylesSidebarPane,
@@ -1030,7 +1029,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
       if (skippedInitialTabSelectedEvent) {
         // We don't log the initially selected sidebar pane to UMA because
         // it will skew the histogram heavily toward the Styles pane
-        Host.userMetrics.sidebarPaneShown(tabId);
+        Host.userMetrics.elementsSidebarTabShown(tabId);
       } else {
         skippedInitialTabSelectedEvent = true;
       }
@@ -1151,7 +1150,7 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
         void treeElement.updateStyleAdorners();
       }
 
-      LayoutSidebarPane.instance().update();
+      void ElementsComponents.LayoutPane.LayoutPane.instance().render();
     }
   }
 

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

@@ -3,13 +3,15 @@
 // found in the LICENSE file.
 
 import * as Common from '../../../core/common/common.js';
+import * as SDK from '../../../core/sdk/sdk.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as IconButton from '../../../ui/components/icon_button/icon_button.js';
+import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
+import * as Coordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import {type LayoutElement, type BooleanSetting, type EnumSetting, type Setting} from './LayoutPaneUtils.js';
-
 import layoutPaneStyles from '../layoutPane.css.js';
 import * as Input from '../../../ui/components/input/input.js';
 import * as NodeText from '../../../ui/components/node_text/node_text.js';
@@ -65,15 +67,80 @@ export {LayoutElement};
 
 const {render, html} = LitHtml;
 
-export class SettingChangedEvent extends Event {
-  static readonly eventName = 'settingchanged';
-  data: {setting: string, value: string|boolean};
+const nodeToLayoutElement = (node: SDK.DOMModel.DOMNode): LayoutElement => {
+  const className = node.getAttribute('class');
+  const nodeId = node.id;
+  return {
+    id: nodeId,
+    color: '#000',
+    name: node.localName(),
+    domId: node.getAttribute('id'),
+    domClasses: className ? className.split(/\s+/).filter(s => Boolean(s)) : undefined,
+    enabled: false,
+    reveal: (): void => {
+      void Common.Revealer.reveal(node);
+      void node.scrollIntoView();
+    },
+    highlight: (): void => {
+      node.highlight();
+    },
+    hideHighlight: (): void => {
+      SDK.OverlayModel.OverlayModel.hideDOMNodeHighlight();
+    },
+    toggle: (_value: boolean): never => {
+      throw new Error('Not implemented');
+    },
+    setColor(_value: string): never {
+      throw new Error('Not implemented');
+    },
+  };
+};
 
-  constructor(setting: string, value: string|boolean) {
-    super(SettingChangedEvent.eventName, {});
-    this.data = {setting, value};
-  }
-}
+const gridNodesToElements = (nodes: SDK.DOMModel.DOMNode[]): LayoutElement[] => {
+  return nodes.map(node => {
+    const layoutElement = nodeToLayoutElement(node);
+    const nodeId = node.id;
+    return {
+      ...layoutElement,
+      color: node.domModel().overlayModel().colorOfGridInPersistentOverlay(nodeId) || '#000',
+      enabled: node.domModel().overlayModel().isHighlightedGridInPersistentOverlay(nodeId),
+      toggle: (value: boolean): void => {
+        if (value) {
+          node.domModel().overlayModel().highlightGridInPersistentOverlay(nodeId);
+        } else {
+          node.domModel().overlayModel().hideGridInPersistentOverlay(nodeId);
+        }
+      },
+      setColor(value: string): void {
+        this.color = value;
+        node.domModel().overlayModel().setColorOfGridInPersistentOverlay(nodeId, value);
+      },
+    };
+  });
+};
+
+const flexContainerNodesToElements = (nodes: SDK.DOMModel.DOMNode[]): LayoutElement[] => {
+  return nodes.map(node => {
+    const layoutElement = nodeToLayoutElement(node);
+    const nodeId = node.id;
+    return {
+      ...layoutElement,
+      color: node.domModel().overlayModel().colorOfFlexInPersistentOverlay(nodeId) || '#000',
+      enabled: node.domModel().overlayModel().isHighlightedFlexContainerInPersistentOverlay(nodeId),
+      toggle: (value: boolean): void => {
+        if (value) {
+          node.domModel().overlayModel().highlightFlexContainerInPersistentOverlay(nodeId);
+        } else {
+          node.domModel().overlayModel().hideFlexContainerInPersistentOverlay(nodeId);
+        }
+      },
+      setColor(value: string): void {
+        this.color = value;
+        node.domModel().overlayModel().setColorOfFlexInPersistentOverlay(nodeId, value);
+      },
+    };
+  });
+};
 
 interface HTMLInputElementEvent extends Event {
   target: HTMLInputElement;
@@ -93,15 +160,21 @@ export interface LayoutPaneData {
   flexContainerElements?: LayoutElement[];
 }
 
-export class LayoutPane extends HTMLElement {
+const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
+let layoutPaneWrapperInstance: LegacyWrapper.LegacyWrapper.LegacyWrapper<UI.Widget.Widget, LayoutPane>;
+
+export class LayoutPane extends LegacyWrapper.LegacyWrapper.WrappableComponent {
   static readonly litTagName = LitHtml.literal`devtools-layout-pane`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #settings: Readonly<Setting[]> = [];
-  #gridElements: Readonly<LayoutElement[]> = [];
-  #flexContainerElements?: Readonly<LayoutElement[]> = [];
+  readonly #uaShadowDOMSetting: Common.Settings.Setting<boolean>;
+  #domModels: SDK.DOMModel.DOMModel[];
 
   constructor() {
     super();
+    this.#settings = this.#makeSettings();
+    this.#uaShadowDOMSetting = Common.Settings.Settings.instance().moduleSetting('showUAShadowDOM');
+    this.#domModels = [];
     this.#shadow.adoptedStyleSheets = [
       Input.checkboxStyles,
       layoutPaneStyles,
@@ -109,11 +182,130 @@ export class LayoutPane extends HTMLElement {
     ];
   }
 
-  set data(data: LayoutPaneData) {
-    this.#settings = data.settings;
-    this.#gridElements = data.gridElements;
-    this.#flexContainerElements = data.flexContainerElements;
-    this.#render();
+  static instance(): LayoutPane {
+    if (!layoutPaneWrapperInstance) {
+      layoutPaneWrapperInstance = LegacyWrapper.LegacyWrapper.legacyWrapper(UI.Widget.Widget, new LayoutPane());
+    }
+
+    return layoutPaneWrapperInstance.getComponent();
+  }
+
+  modelAdded(domModel: SDK.DOMModel.DOMModel): void {
+    const overlayModel = domModel.overlayModel();
+    overlayModel.addEventListener(SDK.OverlayModel.Events.PersistentGridOverlayStateChanged, this.render, this);
+    overlayModel.addEventListener(
+        SDK.OverlayModel.Events.PersistentFlexContainerOverlayStateChanged, this.render, this);
+    this.#domModels.push(domModel);
+  }
+
+  modelRemoved(domModel: SDK.DOMModel.DOMModel): void {
+    const overlayModel = domModel.overlayModel();
+    overlayModel.removeEventListener(SDK.OverlayModel.Events.PersistentGridOverlayStateChanged, this.render, this);
+    overlayModel.removeEventListener(
+        SDK.OverlayModel.Events.PersistentFlexContainerOverlayStateChanged, this.render, this);
+    this.#domModels = this.#domModels.filter(model => model !== domModel);
+  }
+
+  async #fetchNodesByStyle(style: {
+    name: string,
+    value: string,
+  }[]): Promise<SDK.DOMModel.DOMNode[]> {
+    const showUAShadowDOM = this.#uaShadowDOMSetting.get();
+
+    const nodes = [];
+    for (const domModel of this.#domModels) {
+      try {
+        const nodeIds = await domModel.getNodesByStyle(style, true /* pierce */);
+        for (const nodeId of nodeIds) {
+          const node = domModel.nodeForId(nodeId);
+          if (node !== null && (showUAShadowDOM || !node.ancestorUserAgentShadowRoot())) {
+            nodes.push(node);
+          }
+        }
+      } catch (error) {
+        // TODO(crbug.com/1167706): Sometimes in E2E tests the layout panel is updated after a DOM node
+        // has been removed. This causes an error that a node has not been found.
+        // We can skip nodes that resulted in an error.
+        console.warn(error);
+      }
+    }
+
+    return nodes;
+  }
+
+  async #fetchGridNodes(): Promise<SDK.DOMModel.DOMNode[]> {
+    return await this.#fetchNodesByStyle([{name: 'display', value: 'grid'}, {name: 'display', value: 'inline-grid'}]);
+  }
+
+  async #fetchFlexContainerNodes(): Promise<SDK.DOMModel.DOMNode[]> {
+    return await this.#fetchNodesByStyle([{name: 'display', value: 'flex'}, {name: 'display', value: 'inline-flex'}]);
+  }
+
+  #makeSettings(): Setting[] {
+    const settings = [];
+    for (const settingName of ['showGridLineLabels', 'showGridTrackSizes', 'showGridAreas', 'extendGridLines']) {
+      const setting = Common.Settings.Settings.instance().moduleSetting(settingName);
+      const settingValue = setting.get();
+      const settingType = setting.type();
+      if (!settingType) {
+        throw new Error('A setting provided to LayoutSidebarPane does not have a setting type');
+      }
+      if (settingType !== Common.Settings.SettingType.BOOLEAN && settingType !== Common.Settings.SettingType.ENUM) {
+        throw new Error('A setting provided to LayoutSidebarPane does not have a supported setting type');
+      }
+      const mappedSetting = {
+        type: settingType,
+        name: setting.name,
+        title: setting.title(),
+      };
+      if (typeof settingValue === 'boolean') {
+        settings.push({
+          ...mappedSetting,
+          value: settingValue,
+          options: setting.options().map(opt => ({
+                                           ...opt,
+                                           value: (opt.value as boolean),
+                                         })),
+        });
+      } else if (typeof settingValue === 'string') {
+        settings.push({
+          ...mappedSetting,
+          value: settingValue,
+          options: setting.options().map(opt => ({
+                                           ...opt,
+                                           value: (opt.value as string),
+                                         })),
+        });
+      }
+    }
+    return settings;
+  }
+
+  onSettingChanged(setting: string, value: string|boolean): void {
+    Common.Settings.Settings.instance().moduleSetting(setting).set(value);
+  }
+
+  override wasShown(): void {
+    for (const setting of this.#settings) {
+      Common.Settings.Settings.instance().moduleSetting(setting.name).addChangeListener(this.render, this);
+    }
+    for (const domModel of this.#domModels) {
+      this.modelRemoved(domModel);
+    }
+    this.#domModels = [];
+    SDK.TargetManager.TargetManager.instance().observeModels(SDK.DOMModel.DOMModel, this, {scoped: true});
+    UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.render, this);
+    this.#uaShadowDOMSetting.addChangeListener(this.render, this);
+    void this.render();
+  }
+
+  override willHide(): void {
+    for (const setting of this.#settings) {
+      Common.Settings.Settings.instance().moduleSetting(setting.name).removeChangeListener(this.render, this);
+    }
+    SDK.TargetManager.TargetManager.instance().unobserveModels(SDK.DOMModel.DOMModel, this);
+    UI.Context.Context.instance().removeFlavorChangeListener(SDK.DOMModel.DOMNode, this.render, this);
+    this.#uaShadowDOMSetting.removeChangeListener(this.render, this);
   }
 
   #onSummaryKeyDown(event: KeyboardEvent): void {
@@ -135,57 +327,61 @@ export class LayoutPane extends HTMLElement {
     }
   }
 
-  #render(): void {
-    // Disabled until https://crbug.com/1079231 is fixed.
-    // clang-format off
-    render(html`
-      <details open>
-        <summary class="header" @keydown=${this.#onSummaryKeyDown}>
-          ${i18nString(UIStrings.grid)}
-        </summary>
-        <div class="content-section">
-          <h3 class="content-section-title">${i18nString(UIStrings.overlayDisplaySettings)}</h3>
-          <div class="select-settings">
-            ${this.#getEnumSettings().map(setting => this.#renderEnumSetting(setting))}
-          </div>
-          <div class="checkbox-settings">
-            ${this.#getBooleanSettings().map(setting => this.#renderBooleanSetting(setting))}
-          </div>
-        </div>
-        ${this.#gridElements ?
-          html`<div class="content-section">
-            <h3 class="content-section-title">
-              ${this.#gridElements.length ? i18nString(UIStrings.gridOverlays) : i18nString(UIStrings.noGridLayoutsFoundOnThisPage)}
-            </h3>
-            ${this.#gridElements.length ?
-              html`<div class="elements">
-                ${this.#gridElements.map(element => this.#renderElement(element))}
-              </div>` : ''}
-          </div>` : ''}
-      </details>
-      ${this.#flexContainerElements !== undefined ?
-        html`
+  override async render(): Promise<void> {
+    const gridElements = gridNodesToElements(await this.#fetchGridNodes());
+    const flexContainerElements = flexContainerNodesToElements(await this.#fetchFlexContainerNodes());
+    await coordinator.write('LayoutPane render', () => {
+      // Disabled until https://crbug.com/1079231 is fixed.
+      // clang-format off
+      render(html`
         <details open>
           <summary class="header" @keydown=${this.#onSummaryKeyDown}>
-            ${i18nString(UIStrings.flexbox)}
+            ${i18nString(UIStrings.grid)}
           </summary>
-          ${this.#flexContainerElements ?
+          <div class="content-section">
+            <h3 class="content-section-title">${i18nString(UIStrings.overlayDisplaySettings)}</h3>
+            <div class="select-settings">
+              ${this.#getEnumSettings().map(setting => this.#renderEnumSetting(setting))}
+            </div>
+            <div class="checkbox-settings">
+              ${this.#getBooleanSettings().map(setting => this.#renderBooleanSetting(setting))}
+            </div>
+          </div>
+          ${gridElements ?
             html`<div class="content-section">
               <h3 class="content-section-title">
-                ${this.#flexContainerElements.length ? i18nString(UIStrings.flexboxOverlays) : i18nString(UIStrings.noFlexboxLayoutsFoundOnThisPage)}
+                ${gridElements.length ? i18nString(UIStrings.gridOverlays) : i18nString(UIStrings.noGridLayoutsFoundOnThisPage)}
               </h3>
-              ${this.#flexContainerElements.length ?
+              ${gridElements.length ?
                 html`<div class="elements">
-                  ${this.#flexContainerElements.map(element => this.#renderElement(element))}
+                  ${gridElements.map(element => this.#renderElement(element))}
                 </div>` : ''}
             </div>` : ''}
         </details>
-        `
-      : ''}
-    `, this.#shadow, {
-      host: this,
+        ${flexContainerElements !== undefined ?
+          html`
+          <details open>
+            <summary class="header" @keydown=${this.#onSummaryKeyDown}>
+              ${i18nString(UIStrings.flexbox)}
+            </summary>
+            ${flexContainerElements ?
+              html`<div class="content-section">
+                <h3 class="content-section-title">
+                  ${flexContainerElements.length ? i18nString(UIStrings.flexboxOverlays) : i18nString(UIStrings.noFlexboxLayoutsFoundOnThisPage)}
+                </h3>
+                ${flexContainerElements.length ?
+                  html`<div class="elements">
+                    ${flexContainerElements.map(element => this.#renderElement(element))}
+                  </div>` : ''}
+              </div>` : ''}
+          </details>
+          `
+        : ''}
+      `, this.#shadow, {
+        host: this,
+      });
+      // clang-format on
     });
-    // clang-format on
   }
 
   #getEnumSettings(): EnumSetting[] {
@@ -198,12 +394,12 @@ export class LayoutPane extends HTMLElement {
 
   #onBooleanSettingChange(setting: BooleanSetting, event: HTMLInputElementEvent): void {
     event.preventDefault();
-    this.dispatchEvent(new SettingChangedEvent(setting.name, event.target.checked));
+    this.onSettingChanged(setting.name, event.target.checked);
   }
 
   #onEnumSettingChange(setting: EnumSetting, event: HTMLInputElementEvent): void {
     event.preventDefault();
-    this.dispatchEvent(new SettingChangedEvent(setting.name, event.target.value));
+    this.onSettingChanged(setting.name, event.target.value);
   }
 
   #onElementToggle(element: LayoutElement, event: HTMLInputElementEvent): void {
@@ -219,7 +415,7 @@ export class LayoutPane extends HTMLElement {
   #onColorChange(element: LayoutElement, event: HTMLInputElementEvent): void {
     event.preventDefault();
     element.setColor(event.target.value);
-    this.#render();
+    void this.render();
   }
 
   #onElementMouseEnter(element: LayoutElement, event: HTMLInputElementEvent): void {

package/front_end/panels/elements/elements-legacy.ts

@@ -81,9 +81,6 @@ Elements.MarkerDecorator = ElementsModule.MarkerDecorator.MarkerDecorator;
 
 Elements.GenericDecorator = ElementsModule.MarkerDecorator.GenericDecorator;
 
-/** @constructor */
-Elements.LayoutSidebarPane = ElementsModule.LayoutSidebarPane.LayoutSidebarPane;
-
 /** @constructor */
 Elements.MetricsSidebarPane = ElementsModule.MetricsSidebarPane.MetricsSidebarPane;