chrome-devtools-frontend 1.0.1548980 → 1.0.1550444

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

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

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

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

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

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

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/kit/kit.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/ThrottlingManager.ts

@@ -7,7 +7,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
@@ -392,7 +392,7 @@ export class ThrottlingManager extends Common.ObjectWrapper.ObjectWrapper<Thrott
 
     const reset = new UI.Toolbar.ToolbarButton('Reset concurrency', 'undo', undefined, 'hardware-concurrency-reset');
     reset.setTitle(i18nString(UIStrings.resetConcurrency));
-    const icon = new IconButton.Icon.Icon();
+    const icon = new Icon();
     icon.name = 'warning-filled';
     icon.classList.add('small');
     const warning = new UI.Toolbar.ToolbarItem(icon);

package/front_end/panels/mobile_throttling/ThrottlingSettingsTab.ts

@@ -3,14 +3,13 @@
 // 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, createIcon} 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 +197,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>;
@@ -352,7 +351,7 @@ export class CPUThrottlingCard {
   private createTextWithIcon(text: string, icon: string): HTMLElement {
     const el = document.createElement('div');
     el.classList.add('text-with-icon');
-    el.append(IconButton.Icon.create(icon));
+    el.append(createIcon(icon));
     el.append(text);
     return el;
   }

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -48,7 +48,7 @@ import * as Logs from '../../models/logs/logs.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -1428,7 +1428,7 @@ export class NetworkRequestNode extends NetworkNode {
       case SDK.NetworkRequest.InitiatorType.PREFLIGHT: {
         cell.appendChild(document.createTextNode(i18nString(UIStrings.preflight)));
         if (initiator.initiatorRequest) {
-          const icon = IconButton.Icon.create('arrow-up-down-circle');
+          const icon = createIcon('arrow-up-down-circle');
           const link = Components.Linkifier.Linkifier.linkifyRevealable(
               initiator.initiatorRequest, icon, undefined, i18nString(UIStrings.selectTheRequestThatTriggered),
               'trailing-link-icon', 'initator-request');
@@ -1513,7 +1513,7 @@ export class NetworkRequestNode extends NetworkNode {
       const throttlingConditionsTitle = typeof throttlingConditions.conditions.title === 'string' ?
           throttlingConditions.conditions.title :
           throttlingConditions.conditions.title();
-      const icon = IconButton.Icon.create('watch');
+      const icon = createIcon('watch');
       icon.title = i18nString(UIStrings.wasThrottled, {PH1: throttlingConditionsTitle});
       icon.addEventListener('click', () => void Common.Revealer.reveal(throttlingConditions));
       cell.append(icon);

package/front_end/panels/network/NetworkFrameGrouper.ts

@@ -4,7 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as SDK from '../../core/sdk/sdk.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {createIcon} from '../../ui/kit/kit.js';
 import type * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -56,7 +56,7 @@ export class FrameGroupNode extends NetworkGroupNode {
     const columnIndex = (this.dataGrid as DataGrid.DataGrid.DataGridImpl<unknown>).indexOfVisibleColumn(columnId);
     if (columnIndex === 0) {
       const name = this.displayName();
-      cell.appendChild(IconButton.Icon.create('frame', 'network-frame-group-icon'));
+      cell.appendChild(createIcon('frame', 'network-frame-group-icon'));
       UI.UIUtils.createTextChild(cell, name);
       UI.Tooltip.Tooltip.install(cell, name);
       this.setCellAccessibleName(cell.textContent || '', cell, columnId);

package/front_end/panels/network/NetworkItemView.ts

@@ -10,8 +10,8 @@ import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
 import * as NetworkForward from '../../panels/network/forward/forward.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as LegacyWrapper from '../../ui/components/legacy_wrapper/legacy_wrapper.js';
+import {Icon} from '../../ui/kit/kit.js';
 import type * as SourceFrame from '../../ui/legacy/components/source_frame/source_frame.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
@@ -208,7 +208,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
           i18nString(UIStrings.responsePreview));
       const signedExchangeInfo = request.signedExchangeInfo();
       if (signedExchangeInfo?.errors?.length) {
-        const icon = new IconButton.Icon.Icon();
+        const icon = new Icon();
         icon.name = 'cross-circle-filled';
         icon.classList.add('small');
         UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.signedexchangeError));
@@ -292,7 +292,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
           i18nString(UIStrings.requestAndResponseCookies));
     }
     if (this.#request.hasThirdPartyCookiePhaseoutIssue()) {
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'warning-filled';
       icon.classList.add('small');
       icon.title = i18nString(UIStrings.thirdPartyPhaseout);
@@ -317,7 +317,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     const trustTokenResult = this.#request.trustTokenOperationDoneEvent();
     if (trustTokenResult &&
         !NetworkComponents.RequestTrustTokensView.statusConsideredSuccess(trustTokenResult.status)) {
-      const icon = new IconButton.Icon.Icon();
+      const icon = new Icon();
       icon.name = 'cross-circle-filled';
       icon.classList.add('small');
       this.setTabIcon(NetworkForward.UIRequestLocation.UIRequestTabs.TRUST_TOKENS, icon);

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -6,7 +6,7 @@
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as NetworkTimeCalculator from '../../models/network_time_calculator/network_time_calculator.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -181,7 +181,7 @@ export class NetworkLogViewColumns {
   private waterfallScroller!: HTMLElement;
   private waterfallScrollerContent!: HTMLDivElement;
   private waterfallHeaderElement!: HTMLElement;
-  private waterfallColumnSortIcon!: IconButton.Icon.Icon;
+  private waterfallColumnSortIcon!: Icon;
   private activeWaterfallSortId!: string;
   private popoverHelper?: UI.PopoverHelper.PopoverHelper;
   private hasScrollerTouchStarted?: boolean;
@@ -415,7 +415,7 @@ export class NetworkLogViewColumns {
     this.waterfallHeaderElement.createChild('div', 'hover-layer');
     const innerElement = this.waterfallHeaderElement.createChild('div');
     innerElement.textContent = i18nString(UIStrings.waterfall);
-    this.waterfallColumnSortIcon = new IconButton.Icon.Icon();
+    this.waterfallColumnSortIcon = new Icon();
     this.waterfallColumnSortIcon.className = 'sort-order-icon';
     this.waterfallHeaderElement.createChild('div', 'sort-order-icon-container')
         .appendChild(this.waterfallColumnSortIcon);

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

@@ -7,8 +7,8 @@ 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 Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
 import * as uiI18n from '../../ui/i18n/i18n.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as CookieTable from '../../ui/legacy/components/cookie_table/cookie_table.js';
 import * as SettingsUI from '../../ui/legacy/components/settings_ui/settings_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -281,7 +281,7 @@ export class RequestCookiesView extends UI.Widget.Widget {
       this.malformedResponseCookiesList.removeChildren();
       for (const malformedCookie of malformedResponseCookies) {
         const listItem = this.malformedResponseCookiesList.createChild('span', 'cookie-line source-code');
-        const icon = new IconButton.Icon.Icon();
+        const icon = new Icon();
         icon.name = 'cross-circle-filled';
         icon.classList.add('cookie-warning-icon', 'small');
         listItem.appendChild(icon);

package/front_end/panels/network/SignedExchangeInfoView.ts

@@ -7,7 +7,7 @@ import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
-import * as IconButton from '../../ui/components/icon_button/icon_button.js';
+import {Icon} from '../../ui/kit/kit.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -127,7 +127,7 @@ export class SignedExchangeInfoView extends UI.Widget.VBox {
       const errorMessagesCategory = new Category(root, i18nString(UIStrings.errors));
       for (const error of signedExchangeInfo.errors) {
         const fragment = document.createDocumentFragment();
-        const icon = new IconButton.Icon.Icon();
+        const icon = new Icon();
         icon.name = 'cross-circle-filled';
         icon.classList.add('prompt-icon', 'small');
         fragment.appendChild(icon);