chrome-devtools-frontend 1.0.1548870 → 1.0.1549484

package/front_end/panels/application/components/TrustTokensView.ts

@@ -1,7 +1,6 @@
 // Copyright 2020 The Chromium Authors
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
-/* eslint-disable @devtools/no-lit-render-outside-of-view */
 
 import '../../../ui/components/icon_button/icon_button.js';
 import '../../../ui/legacy/components/data_grid/data_grid.js';
@@ -10,8 +9,6 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as SDK from '../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../generated/protocol.js';
 import * as Buttons from '../../../ui/components/buttons/buttons.js';
-import * as LegacyWrapper from '../../../ui/components/legacy_wrapper/legacy_wrapper.js';
-import * as RenderCoordinator from '../../../ui/components/render_coordinator/render_coordinator.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as Lit from '../../../ui/lit/lit.js';
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
@@ -64,7 +61,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/TrustTokensView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-export interface TrustTokensViewData {
+export interface TrustTokensViewInput {
   tokens: Protocol.Storage.TrustTokens[];
   deleteClickHandler: (issuerOrigin: string) => void;
 }
@@ -72,65 +69,32 @@ export interface TrustTokensViewData {
 /** Fetch the Trust Token data regularly from the backend while the panel is open */
 const REFRESH_INTERVAL_MS = 1000;
 
-export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableComponent {
-  readonly #shadow = this.attachShadow({mode: 'open'});
-
-  #deleteClickHandler(issuerOrigin: string): void {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    void mainTarget?.storageAgent().invoke_clearTrustTokens({issuerOrigin});
-  }
-
-  connectedCallback(): void {
-    this.wrapper?.contentElement.classList.add('vbox');
-    void this.render();
-  }
-
-  override async render(): Promise<void> {
-    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
-    if (!mainTarget) {
-      return;
-    }
-    const {tokens} = await mainTarget.storageAgent().invoke_getTrustTokens();
-    tokens.sort((a, b) => a.issuerOrigin.localeCompare(b.issuerOrigin));
-
-    await RenderCoordinator.write('Render TrustTokensView', () => {
-      // clang-format off
-      Lit.render(html`
-        <style>${trustTokensViewStyles}</style>
-        <style>${UI.inspectorCommonStyles}</style>
-        ${this.#renderGridOrNoDataMessage(tokens)}
-      `, this.#shadow, {host: this});
-      // clang-format on
-      if (this.isConnected) {
-        setTimeout(() => this.render(), REFRESH_INTERVAL_MS);
-      }
-    });
-  }
-
-  #renderGridOrNoDataMessage(tokens: Protocol.Storage.TrustTokens[]): Lit.TemplateResult {
-    if (tokens.length === 0) {
-      // clang-format off
+function renderGridOrNoDataMessage(input: TrustTokensViewInput): Lit.TemplateResult {
+  if (input.tokens.length === 0) {
+    // clang-format off
       return html`
-        <div class="empty-state" jslog=${VisualLogging.section().context('empty-view')}>
-          <div class="empty-state-header">${i18nString(UIStrings.noTrustTokens)}</div>
-          <div class="empty-state-description">
-            <span>${i18nString(UIStrings.trustTokensDescription)}</span>
-            <x-link
-              class="x-link devtools-link"
-              href=${PRIVATE_STATE_TOKENS_EXPLANATION_URL}
-              jslog=${VisualLogging.link()
-                      .track({ click: true, keydown: 'Enter|Space' })
-                      .context('learn-more')}
-            >${i18nString(UIStrings.learnMore)}</x-link>
+        <div jslog=${VisualLogging.pane('trust-tokens')}>
+          <div class="empty-state" jslog=${VisualLogging.section().context('empty-view')}>
+            <div class="empty-state-header">${i18nString(UIStrings.noTrustTokens)}</div>
+            <div class="empty-state-description">
+              <span>${i18nString(UIStrings.trustTokensDescription)}</span>
+              <x-link
+                class="x-link devtools-link"
+                href=${PRIVATE_STATE_TOKENS_EXPLANATION_URL}
+                jslog=${VisualLogging.link()
+                        .track({ click: true, keydown: 'Enter|Space' })
+                        .context('learn-more')}
+              >${i18nString(UIStrings.learnMore)}</x-link>
+            </div>
           </div>
         </div>
       `;
-      // clang-format on
-    }
+    // clang-format on
+  }
 
-    // clang-format off
+  // clang-format off
     return html`
-      <div>
+      <div jslog=${VisualLogging.pane('trust-tokens')}>
         <span class="heading">${i18nString(UIStrings.trustTokens)}</span>
         <devtools-icon name="info" title=${i18nString(UIStrings.allStoredTrustTokensAvailableIn)}></devtools-icon>
         <devtools-data-grid striped inline>
@@ -140,7 +104,7 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
               <th id="count" weight="5" sortable>${i18nString(UIStrings.storedTokenCount)}</th>
               <th id="delete-button" weight="1" sortable></th>
             </tr>
-            ${tokens.filter(token => token.count > 0)
+            ${input.tokens.filter(token => token.count > 0)
                   .map(token => html`
                 <tr>
                   <td>${removeTrailingSlash(token.issuerOrigin)}</td>
@@ -151,7 +115,7 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
                                     .size=${Buttons.Button.Size.SMALL}
                                     .title=${i18nString(UIStrings.deleteTrustTokens, {PH1: removeTrailingSlash(token.issuerOrigin)})}
                                     .variant=${Buttons.Button.Variant.ICON}
-                                    @click=${this.#deleteClickHandler.bind(this, removeTrailingSlash(token.issuerOrigin))}></devtools-button>
+                                    @click=${() =>input.deleteClickHandler(removeTrailingSlash(token.issuerOrigin))}></devtools-button>
                   </td>
                 </tr>
               `)}
@@ -159,18 +123,62 @@ export class TrustTokensView extends LegacyWrapper.LegacyWrapper.WrappableCompon
         </devtools-data-grid>
       </div>
     `;
-    // clang-format on
-  }
+  // clang-format on
 }
 
-function removeTrailingSlash(s: string): string {
-  return s.replace(/\/$/, '');
-}
+type View = (input: TrustTokensViewInput, output: undefined, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, output, target) => {
+  // clang-format off
+  Lit.render(html`
+    <style>${trustTokensViewStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    ${renderGridOrNoDataMessage(input)}
+  `, target);
+  // clang-format on
+};
+
+export class TrustTokensView extends UI.Widget.VBox {
+  #updateInterval = 0;
+  #tokens: Protocol.Storage.TrustTokens[] = [];
+  #view: View;
+
+  constructor(element?: HTMLElement, view = DEFAULT_VIEW) {
+    super(element, {useShadowDom: true});
+    this.#view = view;
+  }
 
-customElements.define('devtools-trust-tokens-storage-view', TrustTokensView);
+  override wasShown(): void {
+    super.wasShown();
+    this.requestUpdate();
+    this.#updateInterval = setInterval(this.requestUpdate.bind(this), REFRESH_INTERVAL_MS);
+  }
 
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-trust-tokens-storage-view': TrustTokensView;
+  override willHide(): void {
+    super.willHide();
+    clearInterval(this.#updateInterval);
+    this.#updateInterval = 0;
   }
+
+  override async performUpdate(): Promise<void> {
+    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    if (!mainTarget) {
+      return;
+    }
+    const {tokens} = await mainTarget.storageAgent().invoke_getTrustTokens();
+    tokens.sort((a, b) => a.issuerOrigin.localeCompare(b.issuerOrigin));
+    this.#tokens = tokens;
+    this.#view(
+        {tokens: this.#tokens, deleteClickHandler: this.#deleteClickHandler.bind(this)}, undefined,
+        this.contentElement);
+  }
+
+  #deleteClickHandler(issuerOrigin: string): void {
+    const mainTarget = SDK.TargetManager.TargetManager.instance().primaryPageTarget();
+    void mainTarget?.storageAgent().invoke_clearTrustTokens({issuerOrigin});
+  }
+}
+
+function removeTrailingSlash(s: string): string {
+  return s.replace(/\/$/, '');
 }

package/front_end/panels/console/ConsoleView.ts

@@ -47,6 +47,7 @@ import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as Logs from '../../models/logs/logs.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
+import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 // eslint-disable-next-line @devtools/es-modules-import
@@ -1618,7 +1619,7 @@ export class ConsoleView extends UI.Widget.VBox implements
       matchRange = this.regexMatchRanges[this.currentMatchRangeIndex];
       const message = this.visibleViewMessages[matchRange.messageIndex];
       message.searchHighlightNode(matchRange.matchIndex)
-          .classList.remove(UI.UIUtils.highlightedCurrentSearchResultClassName);
+          .classList.remove(Highlighting.highlightedCurrentSearchResultClassName);
     }
 
     index = Platform.NumberUtilities.mod(index, this.regexMatchRanges.length);
@@ -1627,7 +1628,7 @@ export class ConsoleView extends UI.Widget.VBox implements
     matchRange = this.regexMatchRanges[index];
     const message = this.visibleViewMessages[matchRange.messageIndex];
     const highlightNode = message.searchHighlightNode(matchRange.matchIndex);
-    highlightNode.classList.add(UI.UIUtils.highlightedCurrentSearchResultClassName);
+    highlightNode.classList.add(Highlighting.highlightedCurrentSearchResultClassName);
     if (scrollIntoView) {
       this.viewport.scrollItemIntoView(matchRange.messageIndex);
       highlightNode.scrollIntoViewIfNeeded();

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -49,6 +49,7 @@ import * as TextUtils from '../../models/text_utils/text_utils.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
+import * as Highlighting from '../../ui/components/highlighting/highlighting.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 RequestLinkIcon from '../../ui/components/request_link_icon/request_link_icon.js';
@@ -323,7 +324,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   protected contentElementInternal: HTMLElement|null;
   private nestingLevelMarkers: HTMLElement[]|null;
   private searchHighlightNodes: Element[];
-  private searchHighlightNodeChanges: UI.UIUtils.HighlightChange[];
+  private searchHighlightNodeChanges: Highlighting.HighlightChange[];
   private isVisibleInternal: boolean;
   private cachedHeight: number;
   private messagePrefix: string;
@@ -1739,7 +1740,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
 
   setSearchRegex(regex: RegExp|null): void {
     if (this.searchHighlightNodeChanges?.length) {
-      UI.UIUtils.revertDomChanges(this.searchHighlightNodeChanges);
+      Highlighting.revertDomChanges(this.searchHighlightNodeChanges);
     }
     this.searchRegexInternal = regex;
     this.searchHighlightNodes = [];
@@ -1757,8 +1758,9 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     }
 
     if (sourceRanges.length) {
-      this.searchHighlightNodes =
-          UI.UIUtils.highlightSearchResults(this.contentElement(), sourceRanges, this.searchHighlightNodeChanges);
+      this.searchHighlightNodes = Highlighting.highlightRangesWithStyleClass(
+          this.contentElement(), sourceRanges, Highlighting.highlightedSearchResultClassName,
+          this.searchHighlightNodeChanges);
     }
   }
 

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

@@ -53,10 +53,6 @@ const UIStrings = {
    * @description Title of a setting under the Console category that can be invoked through the Command Menu
    */
   showMessagesFromAllContexts: 'Show messages from all contexts',
-  /**
-   * @description Title of a setting under the Console category in Settings
-   */
-  logXmlhttprequests: 'Log XMLHttpRequests',
   /**
    * @description Title of a setting under the Console category
    */
@@ -283,15 +279,6 @@ Common.Settings.registerSettingExtension({
   ],
 });
 
-Common.Settings.registerSettingExtension({
-  category: Common.Settings.SettingCategory.CONSOLE,
-  storageType: Common.Settings.SettingStorageType.SYNCED,
-  title: i18nLazyString(UIStrings.logXmlhttprequests),
-  settingName: 'monitoring-xhr-enabled',
-  settingType: Common.Settings.SettingType.BOOLEAN,
-  defaultValue: false,
-});
-
 Common.Settings.registerSettingExtension({
   category: Common.Settings.SettingCategory.CONSOLE,
   storageType: Common.Settings.SettingStorageType.SYNCED,

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -72,6 +72,7 @@ interface ViewInput {
   filters: TextUtils.TextUtils.ParsedFilter[];
   numResources: number;
   numLoading: number;
+  loadThroughTargetSetting: Common.Settings.Setting<boolean>;
 }
 
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
@@ -91,7 +92,7 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           </devtools-toolbar-input>
           <devtools-checkbox
               title=${i18nString(UIStrings.loadHttpsDeveloperResources)}
-              ${bindToSetting(SDK.PageResourceLoader.getLoadThroughTargetSetting())}>
+              ${bindToSetting(input.loadThroughTargetSetting)}>
             ${i18nString(UIStrings.enableLoadingThroughTarget)}
           </devtools-checkbox>
         </devtools-toolbar>
@@ -146,6 +147,7 @@ export class DeveloperResourcesView extends UI.Widget.VBox {
       filters: this.#filters,
       numResources: resources,
       numLoading: loading,
+      loadThroughTargetSetting: this.#loader.getLoadThroughTargetSetting(),
     };
     const output = {};
     this.#view(input, output, this.contentElement);

package/front_end/panels/elements/CSSRuleValidator.ts

@@ -12,8 +12,8 @@ import {
   isBlockContainer,
   isFlexContainer,
   isGridContainer,
+  isGridLanesContainer,
   isInlineElement,
-  isMasonryContainer,
   isMulticolContainer,
   isPossiblyReplacedElement,
 } from './CSSRuleValidatorHelper.js';
@@ -145,7 +145,7 @@ export class AlignContentValidator extends CSSRuleValidator {
     }
     const isFlex = isFlexContainer(computedStyles);
     if (!isFlex && !isBlockContainer(computedStyles) && !isGridContainer(computedStyles) &&
-        !isMasonryContainer(computedStyles)) {
+        !isGridLanesContainer(computedStyles)) {
       const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
       const affectedPropertyDeclarationCode = buildPropertyName('align-content');
 
@@ -257,7 +257,7 @@ export class GridContainerValidator extends CSSRuleValidator {
   }
 
   getHint(propertyName: string, computedStyles?: Map<string, string>): Hint|undefined {
-    if (isGridContainer(computedStyles) || isMasonryContainer(computedStyles)) {
+    if (isGridContainer(computedStyles) || isGridLanesContainer(computedStyles)) {
       return;
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', computedStyles?.get('display'));
@@ -293,7 +293,7 @@ export class GridItemValidator extends CSSRuleValidator {
     if (!parentComputedStyles) {
       return;
     }
-    if (isGridContainer(parentComputedStyles) || isMasonryContainer(parentComputedStyles)) {
+    if (isGridContainer(parentComputedStyles) || isGridLanesContainer(parentComputedStyles)) {
       return;
     }
     const reasonPropertyDeclaration = buildPropertyDefinitionText('display', parentComputedStyles?.get('display'));
@@ -358,13 +358,13 @@ export class FlexGridValidator extends CSSRuleValidator {
       return;
     }
 
-    if (isFlexContainer(computedStyles) || isGridContainer(computedStyles) || isMasonryContainer(computedStyles)) {
+    if (isFlexContainer(computedStyles) || isGridContainer(computedStyles) || isGridLanesContainer(computedStyles)) {
       return;
     }
 
     if (parentComputedStyles &&
         (isFlexContainer(parentComputedStyles) || isGridContainer(parentComputedStyles) ||
-         isMasonryContainer(parentComputedStyles))) {
+         isGridLanesContainer(parentComputedStyles))) {
       const reasonContainerDisplayName = buildPropertyValue(parentComputedStyles.get('display') as string);
       const reasonPropertyName = buildPropertyName(propertyName);
       const reasonAlternativePropertyName = buildPropertyName('justify-self');
@@ -414,7 +414,7 @@ export class MulticolFlexGridValidator extends CSSRuleValidator {
     }
 
     if (isMulticolContainer(computedStyles) || isFlexContainer(computedStyles) || isGridContainer(computedStyles) ||
-        isMasonryContainer(computedStyles)) {
+        isGridLanesContainer(computedStyles)) {
       return;
     }
 

package/front_end/panels/elements/CSSRuleValidatorHelper.ts

@@ -91,12 +91,12 @@ export const isGridContainer = (computedStyles?: Map<string, string>): boolean =
   return display === 'grid' || display === 'inline-grid';
 };
 
-export const isMasonryContainer = (computedStyles?: Map<string, string>): boolean => {
+export const isGridLanesContainer = (computedStyles?: Map<string, string>): boolean => {
   if (!computedStyles) {
     return false;
   }
   const display = computedStyles.get('display');
-  return display === 'masonry' || display === 'inline-masonry';
+  return display === 'grid-lanes' || display === 'inline-grid-lanes';
 };
 
 export const isMulticolContainer = (computedStyles?: Map<string, string>): boolean => {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -195,11 +195,14 @@ const UIStrings = {
   /**
    * @description ARIA label for Elements Tree adorners
    */
-  enableMasonryMode: 'Enable masonry mode',
   /**
    * @description ARIA label for Elements Tree adorners
    */
-  disableMasonryMode: 'Disable masonry mode',
+  enableGridLanesMode: 'Enable grid-lanes mode',
+  /**
+   * @description ARIA label for Elements Tree adorners
+   */
+  disableGridLanesMode: 'Disable grid-lanes mode',
   /**
    * @description ARIA label for an elements tree adorner
    */
@@ -2003,7 +2006,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
         ++highlightIndex;
       }
       element.setTextContentTruncatedIfNeeded(value);
-      UI.UIUtils.highlightRangesWithStyleClass(element, result.entityRanges, 'webkit-html-entity-value');
+      Highlighting.highlightRangesWithStyleClass(element, result.entityRanges, 'webkit-html-entity-value');
     }
 
     const hasText = (forceValue || value.length > 0);
@@ -2271,7 +2274,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           }
           const result = convertUnicodeCharsToHTMLEntities(firstChild.nodeValue());
           textNodeElement.textContent = Platform.StringUtilities.collapseWhitespace(result.text);
-          UI.UIUtils.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
+          Highlighting.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
           UI.UIUtils.createTextChild(titleDOM, '\u200B');
           this.buildTagDOM(titleDOM, tagName, true, false, updateRecord);
           if (updateRecord?.hasChangedChildren()) {
@@ -2311,7 +2314,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
               'jslog', `${VisualLogging.value('text-node').track({change: true, dblclick: true})}`);
           const result = convertUnicodeCharsToHTMLEntities(node.nodeValue());
           textNodeElement.textContent = Platform.StringUtilities.collapseWhitespace(result.text);
-          UI.UIUtils.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
+          Highlighting.highlightRangesWithStyleClass(textNodeElement, result.entityRanges, 'webkit-html-entity-value');
           UI.UIUtils.createTextChild(titleDOM, '"');
           if (updateRecord?.isCharDataModified()) {
             UI.UIUtils.runCSSAnimationOnce(textNodeElement, 'dom-update-highlight');
@@ -2625,7 +2628,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     // TODO: move this to the template.
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.SUBGRID);
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.GRID);
-    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.MASONRY);
+    this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES);
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.FLEX);
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.SCROLL_SNAP);
     this.removeAdornersByType(ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER);
@@ -2636,8 +2639,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
       if (layout.isGrid) {
         this.pushGridAdorner(layout.isSubgrid);
       }
-      if (layout.isMasonry) {
-        this.pushMasonryAdorner();
+      if (layout.isGridLanes) {
+        this.pushGridLanesAdorner();
       }
       if (layout.isFlex) {
         this.pushFlexAdorner();
@@ -2746,7 +2749,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
   }
 
-  pushMasonryAdorner(): void {
+  pushGridLanesAdorner(): void {
     const node = this.node();
     const nodeId = node.id;
     if (!nodeId) {
@@ -2754,9 +2757,9 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     }
 
     const config = ElementsComponents.AdornerManager.getRegisteredAdorner(
-        ElementsComponents.AdornerManager.RegisteredAdorners.MASONRY);
+        ElementsComponents.AdornerManager.RegisteredAdorners.GRID_LANES);
     const adorner = this.adorn(config);
-    adorner.classList.add('masonry');
+    adorner.classList.add('grid-lanes');
 
     const onClick = ((() => {
                        if (adorner.isActive()) {
@@ -2769,8 +2772,8 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     adorner.addInteraction(onClick, {
       isToggle: true,
       shouldPropagateOnKeydown: false,
-      ariaLabelDefault: i18nString(UIStrings.enableMasonryMode),
-      ariaLabelActive: i18nString(UIStrings.disableMasonryMode),
+      ariaLabelDefault: i18nString(UIStrings.enableGridLanesMode),
+      ariaLabelActive: i18nString(UIStrings.disableGridLanesMode),
     });
 
     node.domModel().overlayModel().addEventListener(

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -41,6 +41,7 @@ import * as Badges from '../../models/badges/badges.js';
 import * as Elements from '../../models/elements/elements.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
+import * as Highlighting from '../../ui/components/highlighting/highlighting.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
@@ -369,7 +370,7 @@ export class DOMTreeWidget extends UI.Widget.Widget {
       treeElement.highlightSearchResults(query);
     }
     treeElement.reveal();
-    const matches = treeElement.listItemElement.getElementsByClassName(UI.UIUtils.highlightedSearchResultClassName);
+    const matches = treeElement.listItemElement.getElementsByClassName(Highlighting.highlightedSearchResultClassName);
     if (matches.length) {
       matches[0].scrollIntoViewIfNeeded(false);
     }

package/front_end/panels/elements/LayoutPane.ts

@@ -25,9 +25,9 @@ const UIStrings = {
    */
   showElementInTheElementsPanel: 'Show element in the Elements panel',
   /**
-   * @description Title of a section on CSS Grid/Masonry tooling
+   * @description Title of a section on CSS Grid/Grid Lanes tooling
    */
-  gridOrMasonry: 'Grid / Masonry',
+  gridOrGridLanes: 'Grid / Grid Lanes',
   /**
    * @description Title of a section in the Layout Sidebar pane of the Elements panel
    */
@@ -35,11 +35,11 @@ const UIStrings = {
   /**
    * @description Title of a section in Layout sidebar pane
    */
-  gridOrMasonryOverlays: 'Grid / Masonry overlays',
+  gridOrGridLanesOverlays: 'Grid / Grid Lanes overlays',
   /**
-   * @description Message in the Layout panel informing users that no CSS Grid/Masonry layouts were found on the page
+   * @description Message in the Layout panel informing users that no CSS Grid/Grid Lanes layouts were found on the page
    */
-  noGridOrMasonryLayoutsFoundOnThisPage: 'No grid or masonry layouts found on this page',
+  noGridOrGridLanesLayoutsFoundOnThisPage: 'No grid or grid lanes layouts found on this page',
   /**
    * @description Title of the Flexbox section in the Layout panel
    */
@@ -289,7 +289,7 @@ const DEFAULT_VIEW: View = (input, output, target) => {
           <summary class="header"
             @keydown=${input.onSummaryKeyDown}
             jslog=${VisualLogging.sectionHeader('grid-settings').track({click: true})}>
-            ${i18nString(UIStrings.gridOrMasonry)}
+            ${i18nString(UIStrings.gridOrGridLanes)}
           </summary>
           <div class="content-section" jslog=${VisualLogging.section('grid-settings')}>
             <h3 class="content-section-title">${i18nString(UIStrings.overlayDisplaySettings)}</h3>
@@ -327,8 +327,8 @@ const DEFAULT_VIEW: View = (input, output, target) => {
             html`<div class="content-section" jslog=${VisualLogging.section('grid-overlays')}>
               <h3 class="content-section-title">
                 ${input.gridElements.length ?
-                    i18nString(UIStrings.gridOrMasonryOverlays) :
-                    i18nString(UIStrings.noGridOrMasonryLayoutsFoundOnThisPage)}
+                    i18nString(UIStrings.gridOrGridLanesOverlays) :
+                    i18nString(UIStrings.noGridOrGridLanesLayoutsFoundOnThisPage)}
               </h3>
               ${input.gridElements.length ?
                   html`<div class="elements">${input.gridElements.map(renderElement)}</div>` :
@@ -431,8 +431,10 @@ export class LayoutPane extends UI.Widget.Widget {
 
   async #fetchGridNodes(): Promise<SDK.DOMModel.DOMNode[]> {
     return await this.#fetchNodesByStyle([
-      {name: 'display', value: 'grid'}, {name: 'display', value: 'inline-grid'}, {name: 'display', value: 'masonry'},
-      {name: 'display', value: 'inline-masonry'}
+      {name: 'display', value: 'grid'},
+      {name: 'display', value: 'inline-grid'},
+      {name: 'display', value: 'grid-lanes'},
+      {name: 'display', value: 'inline-grid-lanes'},
     ]);
   }
 

package/front_end/panels/elements/StylePropertyTreeElement.ts

@@ -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;
       }
     }