chrome-devtools-frontend 1.0.1548870 → 1.0.1549484

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/StylePropertyEditor.ts

@@ -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/linear_memory_inspector/components/LinearMemoryHighlightChipList.ts

@@ -6,7 +6,7 @@
 import '../../../ui/components/icon_button/icon_button.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);
   }
 }
 

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

@@ -11,7 +11,6 @@ import * as i18n from '../../../core/i18n/i18n.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../../ui/lit/lit.js';
 
-import type {DeleteMemoryHighlightEvent, JumpToHighlightedMemoryEvent} from './LinearMemoryHighlightChipList.js';
 import linearMemoryInspectorStyles from './linearMemoryInspector.css.js';
 import {formatAddress, parseAddress} from './LinearMemoryInspectorUtils.js';
 import {
@@ -121,8 +120,8 @@ export interface ViewInput {
   onAddressChange: (e: AddressInputChangedEvent) => void;
   onNavigatePage: (e: PageNavigationEvent) => void;
   onNavigateHistory: (e: HistoryNavigationEvent) => boolean;
-  onJumpToAddress: (e: JumpToPointerAddressEvent|JumpToHighlightedMemoryEvent) => void;
-  onDeleteMemoryHighlight: (e: DeleteMemoryHighlightEvent) => void;
+  onJumpToAddress: (e: JumpToPointerAddressEvent|{data: number}) => void;
+  onDeleteMemoryHighlight: (info: HighlightInfo) => void;
   onByteSelected: (e: ByteSelectedEvent) => void;
   onResize: (e: ResizeEvent) => void;
   onValueTypeToggled: (e: ValueTypeToggledEvent) => void;
@@ -164,9 +163,13 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: Record<string, unknown>,
         @pagenavigation=${input.onNavigatePage}
         @historynavigation=${input.onNavigateHistory}></devtools-linear-memory-inspector-navigator>
         <devtools-linear-memory-highlight-chip-list
-        .data=${{highlightInfos: highlightedMemoryAreas, focusedMemoryHighlight}}
-        @jumptohighlightedmemory=${input.onJumpToAddress}
-        @deletememoryhighlight=${input.onDeleteMemoryHighlight}>
+        .data=${{
+          highlightInfos: highlightedMemoryAreas,
+          focusedMemoryHighlight,
+          jumpToAddress: (address: number) => input.onJumpToAddress({data: address}),
+          deleteHighlight: input.onDeleteMemoryHighlight,
+        }}
+        >
         </devtools-linear-memory-highlight-chip-list>
       <devtools-linear-memory-inspector-viewer
         .data=${
@@ -376,17 +379,18 @@ export class LinearMemoryInspector extends Common.ObjectWrapper.eventMixin<Event
     this.#view(viewInput, {}, this.contentElement);
   }
 
-  #onJumpToAddress(e: JumpToPointerAddressEvent|JumpToHighlightedMemoryEvent): void {
+  #onJumpToAddress(e: JumpToPointerAddressEvent|{data: number}): void {
     // Stop event from bubbling up, since no element further up needs the event.
-    e.stopPropagation();
+    if (e instanceof Event) {
+      e.stopPropagation();
+    }
     this.#currentNavigatorMode = Mode.SUBMITTED;
     const addressInRange = Math.max(0, Math.min(e.data, this.#outerMemoryLength - 1));
     this.#jumpToAddress(addressInRange);
   }
 
-  #onDeleteMemoryHighlight(e: DeleteMemoryHighlightEvent): void {
-    e.stopPropagation();
-    this.dispatchEventToListeners(Events.DELETE_MEMORY_HIGHLIGHT, e.data);
+  #onDeleteMemoryHighlight(highlight: HighlightInfo): void {
+    this.dispatchEventToListeners(Events.DELETE_MEMORY_HIGHLIGHT, highlight);
   }
 
   #onRefreshRequest(): void {

package/front_end/panels/media/PlayerListView.ts

@@ -1,12 +1,13 @@
 // Copyright 2019 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-imperative-dom-api */
+
+import '../../ui/components/icon_button/icon_button.js';
 
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as UI from '../../ui/legacy/legacy.js';
+import {Directives, html, render} from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import type {MainView, TriggerDispatcher} from './MainView.js';
@@ -14,6 +15,8 @@ import type {PlayerEvent} from './MediaModel.js';
 import playerListViewStyles from './playerListView.css.js';
 import {PlayerPropertyKeys} from './PlayerPropertiesView.js';
 
+const {classMap} = Directives;
+
 const UIStrings = {
   /**
    * @description A right-click context menu entry which when clicked causes the menu entry for that player to be removed.
@@ -34,76 +37,103 @@ const UIStrings = {
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/media/PlayerListView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-export interface PlayerStatus {
+
+interface PlayerStatus {
   playerTitle: string;
+  frameTitle: string;
   playerID: string;
   exists: boolean;
   playing: boolean;
   titleEdited: boolean;
+  iconName: string;
 }
-export interface PlayerStatusMapElement {
-  playerStatus: PlayerStatus;
-  playerTitleElement: HTMLElement|null;
+
+export interface ViewInput {
+  players: PlayerStatus[];
+  selectedPlayerID: string|null;
+  onPlayerClick: (playerID: string) => void;
+  onPlayerContextMenu: (playerID: string, event: Event) => void;
 }
+export type View = (input: ViewInput, output: object, target: HTMLElement) => void;
+
+const DEFAULT_VIEW: View = (input, _output, target) => {
+  // clang-format off
+  render(
+    html`
+      <style>${playerListViewStyles}</style>
+      <div class="player-entry-header">${i18nString(UIStrings.players)}</div>
+      ${input.players.map(player => {
+        const isSelected = player.playerID === input.selectedPlayerID;
+        return html`
+          <div class=${classMap({
+            'player-entry-row': true,
+            hbox: true,
+            selected: isSelected,
+            'force-white-icons': isSelected,
+          })}
+               @click=${() => input.onPlayerClick(player.playerID)}
+               @contextmenu=${(e: Event) => input.onPlayerContextMenu(player.playerID, e)}
+               jslog=${VisualLogging.item('player').track({click: true})}>
+            <div class="player-entry-status-icon vbox">
+              <div class="player-entry-status-icon-centering">
+                <devtools-icon name=${player.iconName}></devtools-icon>
+              </div>
+            </div>
+            <div class="player-entry-frame-title">${player.frameTitle}</div>
+            <div class="player-entry-player-title">${player.playerTitle}</div>
+          </div>
+        `;
+      })}
+    `,
+    target
+  );
+  // clang-format on
+};
 
 export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher {
-  private readonly playerEntryFragments: Map<string, UI.Fragment.Fragment>;
+  #view: View;
+  private readonly playerStatuses: Map<string, PlayerStatus>;
   private readonly playerEntriesWithHostnameFrameTitle: Set<string>;
   private readonly mainContainer: MainView;
-  private currentlySelectedEntry: Element|null;
+  private currentlySelectedPlayerID: string|null;
 
-  constructor(mainContainer: MainView) {
+  constructor(mainContainer: MainView, view: View = DEFAULT_VIEW) {
     super({useShadowDom: true});
-    this.registerRequiredCSS(playerListViewStyles);
+    this.#view = view;
 
-    this.playerEntryFragments = new Map();
+    this.playerStatuses = new Map();
     this.playerEntriesWithHostnameFrameTitle = new Set();
 
     // Container where new panels can be added based on clicks.
     this.mainContainer = mainContainer;
 
-    this.currentlySelectedEntry = null;
-    this.contentElement.createChild('div', 'player-entry-header').textContent = i18nString(UIStrings.players);
+    this.currentlySelectedPlayerID = null;
+    this.requestUpdate();
   }
 
-  private createPlayerListEntry(playerID: string): UI.Fragment.Fragment {
-    const entry = UI.Fragment.Fragment.build`
-    <div class="player-entry-row hbox">
-    <div class="player-entry-status-icon vbox">
-    <div $="icon" class="player-entry-status-icon-centering"></div>
-    </div>
-    <div $="frame-title" class="player-entry-frame-title">FrameTitle</div>
-    <div $="player-title" class="player-entry-player-title">PlayerTitle</div>
-    </div>
-    `;
-    const element = entry.element();
-    element.setAttribute('jslog', `${VisualLogging.item('player').track({click: true})}`);
-    element.addEventListener('click', this.selectPlayer.bind(this, playerID, element));
-    element.addEventListener('contextmenu', this.rightClickPlayer.bind(this, playerID));
-
-    entry.$('icon').appendChild(IconButton.Icon.create('pause', 'media-player'));
-    return entry;
+  override performUpdate(): void {
+    const input: ViewInput = {
+      players: Array.from(this.playerStatuses.values()),
+      selectedPlayerID: this.currentlySelectedPlayerID,
+      onPlayerClick: this.selectPlayer.bind(this),
+      onPlayerContextMenu: this.rightClickPlayer.bind(this),
+    };
+    this.#view(input, {}, this.contentElement);
   }
 
   selectPlayerById(playerID: string): void {
-    const fragment = this.playerEntryFragments.get(playerID);
-    if (fragment) {
-      this.selectPlayer(playerID, fragment.element());
+    if (this.playerStatuses.has(playerID)) {
+      this.selectPlayer(playerID);
     }
   }
 
-  private selectPlayer(playerID: string, element: Element): void {
+  private selectPlayer(playerID: string): void {
     this.mainContainer.renderMainPanel(playerID);
-    if (this.currentlySelectedEntry !== null) {
-      this.currentlySelectedEntry.classList.remove('selected');
-      this.currentlySelectedEntry.classList.remove('force-white-icons');
-    }
-    element.classList.add('selected');
-    element.classList.add('force-white-icons');
-    this.currentlySelectedEntry = element;
+    this.currentlySelectedPlayerID = playerID;
+    this.requestUpdate();
   }
 
-  private rightClickPlayer(playerID: string, event: Event): boolean {
+  private rightClickPlayer(playerID: string, event: Event): void {
     const contextMenu = new UI.ContextMenu.ContextMenu(event);
     contextMenu.headerSection().appendItem(
         i18nString(UIStrings.hidePlayer), this.mainContainer.markPlayerForDeletion.bind(this.mainContainer, playerID),
@@ -116,7 +146,6 @@ export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher
         i18nString(UIStrings.savePlayerInfo), this.mainContainer.exportPlayerData.bind(this.mainContainer, playerID),
         {jslogContext: 'save-player-info'});
     void contextMenu.show();
-    return true;
   }
 
   private setMediaElementFrameTitle(playerID: string, frameTitle: string, isHostname: boolean): void {
@@ -131,41 +160,36 @@ export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher
       return;
     }
 
-    if (!this.playerEntryFragments.has(playerID)) {
+    if (!this.playerStatuses.has(playerID)) {
       return;
     }
-    const fragment = this.playerEntryFragments.get(playerID);
-    if (fragment?.element() === undefined) {
-      return;
+    const playerStatus = this.playerStatuses.get(playerID);
+    if (playerStatus) {
+      playerStatus.frameTitle = frameTitle;
+      this.requestUpdate();
     }
-    fragment.$('frame-title').textContent = frameTitle;
   }
 
   private setMediaElementPlayerTitle(playerID: string, playerTitle: string): void {
-    if (!this.playerEntryFragments.has(playerID)) {
+    if (!this.playerStatuses.has(playerID)) {
       return;
     }
-    const fragment = this.playerEntryFragments.get(playerID);
-    if (fragment === undefined) {
-      return;
+    const playerStatus = this.playerStatuses.get(playerID);
+    if (playerStatus) {
+      playerStatus.playerTitle = playerTitle;
+      this.requestUpdate();
     }
-    fragment.$('player-title').textContent = playerTitle;
   }
 
   private setMediaElementPlayerIcon(playerID: string, iconName: string): void {
-    if (!this.playerEntryFragments.has(playerID)) {
-      return;
-    }
-    const fragment = this.playerEntryFragments.get(playerID);
-    if (fragment === undefined) {
+    if (!this.playerStatuses.has(playerID)) {
       return;
     }
-    const icon = fragment.$('icon');
-    if (icon === undefined) {
-      return;
+    const playerStatus = this.playerStatuses.get(playerID);
+    if (playerStatus) {
+      playerStatus.iconName = iconName;
+      this.requestUpdate();
     }
-    icon.textContent = '';
-    icon.appendChild(IconButton.Icon.create(iconName, 'media-player'));
   }
 
   private formatAndEvaluate(
@@ -180,22 +204,25 @@ export class PlayerListView extends UI.Widget.VBox implements TriggerDispatcher
   }
 
   addMediaElementItem(playerID: string): void {
-    const sidebarEntry = this.createPlayerListEntry(playerID);
-    this.contentElement.appendChild(sidebarEntry.element());
-    this.playerEntryFragments.set(playerID, sidebarEntry);
+    this.playerStatuses.set(playerID, {
+      playerTitle: 'PlayerTitle',
+      frameTitle: 'FrameTitle',
+      playerID,
+      exists: true,
+      playing: false,
+      titleEdited: false,
+      iconName: 'pause',
+    });
     this.playerEntriesWithHostnameFrameTitle.add(playerID);
+    this.requestUpdate();
   }
 
   deletePlayer(playerID: string): void {
-    if (!this.playerEntryFragments.has(playerID)) {
-      return;
-    }
-    const fragment = this.playerEntryFragments.get(playerID);
-    if (fragment?.element() === undefined) {
+    if (!this.playerStatuses.has(playerID)) {
       return;
     }
-    this.contentElement.removeChild(fragment.element());
-    this.playerEntryFragments.delete(playerID);
+    this.playerStatuses.delete(playerID);
+    this.requestUpdate();
   }
 
   onEvent(playerID: string, event: PlayerEvent): void {

package/front_end/panels/media/playerListView.css

@@ -43,6 +43,11 @@ li.storage-group-list-item::before {
 .player-entry-status-icon-centering {
   margin: auto;
   display: inherit;
+
+  & > devtools-icon {
+    height: 16px;
+    width: 16px;
+  }
 }
 
 .player-entry-status-icon {

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -3,14 +3,14 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-imperative-dom-api */
 
-import '../../ui/components/cards/cards.js';
+import '../../ui/kit/kit.js';
 
 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 Buttons from '../../ui/components/buttons/buttons.js';
-import type * as Cards from '../../ui/components/cards/cards.js';
 import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import type {Card} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -198,7 +198,7 @@ function createComputePressurePromise(): Promise<{state: string}> {
 }
 
 export class CPUThrottlingCard {
-  element: Cards.Card.Card;
+  element: Card;
 
   private readonly setting: Common.Settings.Setting<SDK.CPUThrottlingManager.CalibratedCPUThrottling>;
   private computePressurePromise?: ReturnType<typeof createComputePressurePromise>;

package/front_end/panels/network/RequestConditionsDrawer.ts

@@ -86,9 +86,8 @@ const UIStrings = {
   textPatternToBlockMatching: 'Text pattern to block matching requests; use * for wildcard',
   /**
    * @description Text in Blocked URLs Pane of the Network panel
-   * @example {Learn more} PH1
    */
-  textEditPattern: 'Text pattern to block or throttle matching requests; use URL Pattern syntax. {PH1}',
+  textEditPattern: 'Text pattern to block or throttle matching requests; use URL Pattern syntax.',
   /**
    * @description Error text for empty list widget input in Request Blocking tool
    */
@@ -449,7 +448,7 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     <devtools-button
       .iconName=${'arrow-up'}
       .variant=${Buttons.Button.Variant.ICON}
-      .title=${i18nString(UIStrings.decreasePriority, {PH1: constructorStringOrWildcardURL})}
+      .title=${i18nString(UIStrings.increasePriority, {PH1: constructorStringOrWildcardURL})}
       .jslogContext=${'decrease-priority'}
       ?disabled=${!editable || !originalOrUpgradedURLPattern}
       @click=${moveUp}>
@@ -457,7 +456,7 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
     <devtools-button
       .iconName=${'arrow-down'}
       .variant=${Buttons.Button.Variant.ICON}
-      .title=${i18nString(UIStrings.increasePriority, {PH1: constructorStringOrWildcardURL})}
+      .title=${i18nString(UIStrings.decreasePriority, {PH1: constructorStringOrWildcardURL})}
       .jslogContext=${'increase-priority'}
       ?disabled=${!editable || !originalOrUpgradedURLPattern}
       @click=${moveDown}></devtools-button>
@@ -579,7 +578,8 @@ export class RequestConditionsDrawer extends UI.Widget.VBox implements
       const learnMore = UI.XLink.XLink.create(
           PATTERN_API_DOCS_URL, i18nString(UIStrings.learnMore), undefined, undefined, 'learn-more');
       learnMore.title = i18nString(UIStrings.learnMoreLabel);
-      label.append(uiI18n.getFormatLocalizedString(str_, UIStrings.textEditPattern, {PH1: learnMore}));
+      titles.append('\xA0', learnMore);
+      label.textContent = i18nString(UIStrings.textEditPattern);
     } else {
       label.textContent = i18nString(UIStrings.textPatternToBlockMatching);
     }

package/front_end/panels/network/components/DirectSocketConnectionView.ts

@@ -68,6 +68,10 @@ const UIStrings = {
    * @description Text in Connection info View of the Network panel
    */
   directSocketStatusAborted: 'Aborted',
+  /**
+   * @description Text in Connection info View of the Network panel
+   */
+  joinedMulticastGroups: 'joinedMulticastGroups',
 
 } as const;
 
@@ -167,6 +171,10 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         ${renderRow(i18nString(UIStrings.type), getDirectSocketTypeString(socketInfo.type))}
         ${renderRow(i18nString(UIStrings.status), getDirectSocketStatusString(socketInfo.status))}
         ${renderRow(i18nString(UIStrings.errorMessage), socketInfo.errorMessage)}
+        ${
+      renderRow(
+          i18nString(UIStrings.joinedMulticastGroups),
+          socketInfo.joinedMulticastGroups ? Array.from(socketInfo.joinedMulticastGroups).join(', ') : '')}
       </div>`;
 
   const optionsContent = html`
@@ -181,6 +189,15 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         ${
       renderRow(i18n.i18n.lockedString('receiveBufferSize'), socketInfo.createOptions.receiveBufferSize?.toString(10))}
         ${renderRow(i18n.i18n.lockedString('dnsQueryType'), socketInfo.createOptions.dnsQueryType)}
+        ${
+      renderRow(
+          i18n.i18n.lockedString('multicastTimeToLive'), socketInfo.createOptions.multicastTimeToLive?.toString(10))}
+        ${
+      renderRow(i18n.i18n.lockedString('multicastLoopback'), socketInfo.createOptions.multicastLoopback?.toString())}
+        ${
+      renderRow(
+          i18n.i18n.lockedString('multicastAllowAddressSharing'),
+          socketInfo.createOptions.multicastAllowAddressSharing?.toString())}
       </div>`;
 
   let openInfoContent: Lit.LitTemplate = Lit.nothing;

package/front_end/panels/network/resourceChunkView.css

@@ -12,6 +12,10 @@
   flex: auto;
   border: none;
 
+  .resource-chunk-view-td {
+    border-bottom: 1px solid var(--sys-color-divider);
+  }
+
   & tr {
     &.resource-chunk-view-row-send td:first-child::before {
       content: "\2B06";

package/front_end/panels/security/CookieControlsView.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 
 import '../../ui/components/switch/switch.js';
-import '../../ui/components/cards/cards.js';
+import '../../ui/kit/kit.js';
 import '../../ui/components/chrome_link/chrome_link.js';
 
 import * as Common from '../../core/common/common.js';