chrome-devtools-frontend 1.0.947377 → 1.0.948916

package/front_end/panels/application/ResourcesPanel.ts

@@ -9,7 +9,6 @@ import * as UI from '../../ui/legacy/legacy.js';
 
 import resourcesPanelStyles from './resourcesPanel.css.js';
 
-import type {CookieTreeElement} from './ApplicationPanelSidebar.js';
 import {ApplicationPanelSidebar, StorageCategoryView} from './ApplicationPanelSidebar.js';
 import {CookieItemsView} from './CookieItemsView.js';
 import {DatabaseQueryView} from './DatabaseQueryView.js';
@@ -215,47 +214,6 @@ export class ResourceRevealer implements Common.Revealer.Revealer {
   }
 }
 
-let cookieReferenceRevealerInstance: CookieReferenceRevealer;
-
-export class CookieReferenceRevealer implements Common.Revealer.Revealer {
-  static instance(opts: {
-    forceNew: boolean|null,
-  } = {forceNew: null}): CookieReferenceRevealer {
-    const {forceNew} = opts;
-    if (!cookieReferenceRevealerInstance || forceNew) {
-      cookieReferenceRevealerInstance = new CookieReferenceRevealer();
-    }
-
-    return cookieReferenceRevealerInstance;
-  }
-  async reveal(cookie: Object): Promise<void> {
-    if (!(cookie instanceof SDK.Cookie.CookieReference)) {
-      throw new Error('Internal error: not a cookie reference');
-    }
-
-    const sidebar = await ResourcesPanel.showAndGetSidebar();
-    await sidebar.cookieListTreeElement.select();
-
-    const contextUrl = cookie.contextUrl();
-    if (contextUrl && await this.revealByDomain(sidebar, contextUrl)) {
-      return;
-    }
-    // Fallback: try to reveal the cookie using its domain as context, which may not work, because the
-    // Application Panel shows cookies grouped by context, see crbug.com/1060563.
-    this.revealByDomain(sidebar, cookie.domain());
-  }
-
-  private async revealByDomain(sidebar: ApplicationPanelSidebar, domain: string): Promise<boolean> {
-    const item = sidebar.cookieListTreeElement.children().find(
-        c => /** @type {!CookieTreeElement} */ (c as CookieTreeElement).cookieDomain().endsWith(domain));
-    if (item) {
-      await item.revealAndSelect();
-      return true;
-    }
-    return false;
-  }
-}
-
 let frameDetailsRevealerInstance: FrameDetailsRevealer;
 
 export class FrameDetailsRevealer implements Common.Revealer.Revealer {

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

@@ -95,9 +95,6 @@ Resources.ResourcesPanel = ResourcesModule.ResourcesPanel.ResourcesPanel;
 /** @constructor */
 Resources.ResourcesPanel.ResourceRevealer = ResourcesModule.ResourcesPanel.ResourceRevealer;
 
-/** @constructor */
-Resources.ResourcesPanel.CookieReferenceRevealer = ResourcesModule.ResourcesPanel.CookieReferenceRevealer;
-
 /** @constructor */
 Resources.ResourcesPanel.FrameDetailsRevealer = ResourcesModule.ResourcesPanel.FrameDetailsRevealer;
 

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

@@ -139,19 +139,6 @@ Common.Revealer.registerRevealer({
   },
 });
 
-Common.Revealer.registerRevealer({
-  contextTypes() {
-    return [
-      SDK.Cookie.CookieReference,
-    ];
-  },
-  destination: Common.Revealer.RevealerDestination.APPLICATION_PANEL,
-  async loadRevealer() {
-    const Resources = await loadResourcesModule();
-    return Resources.ResourcesPanel.CookieReferenceRevealer.instance();
-  },
-});
-
 Common.Revealer.registerRevealer({
   contextTypes() {
     return [

package/front_end/panels/application/backForwardCacheView.css

@@ -3,12 +3,50 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
-.not-restored-reason-list {
-  margin: 0;
-  list-style-type: none;
-  padding-inline-start: 0;
-}
-
 .inline-icon {
   vertical-align: sub;
 }
+
+.gray-text {
+  color: var(--color-text-secondary);
+  margin: 0 0 15px 56px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  flex: auto;
+  overflow-wrap: break-word;
+  overflow: hidden;
+}
+
+.help-outline-icon {
+  margin: 0 2px;
+}
+
+.circled-exclamation-icon {
+  margin-right: 10px;
+  flex-shrink: 0;
+}
+
+.status {
+  margin-right: 15px;
+  flex-shrink: 0;
+}
+
+.url {
+  grid-column-start: span 2;
+  display: flex;
+  align-items: center;
+  margin: 0 30px;
+  line-height: 28px;
+}
+
+.url-key {
+  color: var(--color-text-secondary);
+  min-width: auto;
+  overflow-wrap: break-word;
+}
+
+.url-value {
+  padding: 0 6px;
+  overflow-wrap: break-word;
+}

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

@@ -318,7 +318,7 @@ export class FrameDetailsReportView extends HTMLElement {
     return LitHtml.html`
     <${ReportView.ReportView.ReportSectionHeader.litTagName}>
       ${i18n.i18n.lockedString('Origin Trials')}
-      <${IconButton.IconButton.IconButton.litTagName} class="inline-button" .data="${{
+      <${IconButton.IconButton.IconButton.litTagName} class="inline-button" .data=${{
       clickHandler: refreshOriginTrials,
       groups: [
         {
@@ -326,7 +326,7 @@ export class FrameDetailsReportView extends HTMLElement {
           text: 'Refresh',
         } as IconButton.IconButton.IconWithTextData,
       ],
-    } as IconButton.IconButton.IconButtonData}">
+    } as IconButton.IconButton.IconButtonData}>
       </${IconButton.IconButton.IconButton.litTagName}>
     </${ReportView.ReportView.ReportSectionHeader.litTagName}>
     ${this.originTrialTreeView}
@@ -541,7 +541,7 @@ export class FrameDetailsReportView extends HTMLElement {
       return LitHtml.nothing;
     }
     const typeStrings = this.getAdFrameTypeStrings(adFrameType);
-    const rows = [LitHtml.html`<div title="${typeStrings.description}">${typeStrings.value}</div>`];
+    const rows = [LitHtml.html`<div title=${typeStrings.description}>${typeStrings.value}</div>`];
     for (const explanation of this.frame.adFrameStatus()?.explanations || []) {
       rows.push(LitHtml.html`<div>${this.getAdFrameExplanationString(explanation)}</div>`);
     }

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

@@ -229,7 +229,7 @@ export class OriginTrialTokenRows extends HTMLElement {
   }
 
   private renderTokenField = (fieldValue: string, hasError?: boolean): LitHtml.TemplateResult => LitHtml.html`
-        <div class="${LitHtml.Directives.ifDefined(hasError ? 'error-text' : undefined)}">
+        <div class=${LitHtml.Directives.ifDefined(hasError ? 'error-text' : undefined)}>
           ${fieldValue}
         </div>`;
 
@@ -334,10 +334,10 @@ export class OriginTrialTreeView extends HTMLElement {
 
     LitHtml.render(
         LitHtml.html`
-      <${TreeOutline.TreeOutline.TreeOutline.litTagName} .data="${{
+      <${TreeOutline.TreeOutline.TreeOutline.litTagName} .data=${{
           tree: trials.map(constructOriginTrialTree),
           defaultRenderer,
-        } as TreeOutline.TreeOutline.TreeOutlineData<OriginTrialTreeNodeData>}">
+        } as TreeOutline.TreeOutline.TreeOutlineData<OriginTrialTreeNodeData>}>
       </${TreeOutline.TreeOutline.TreeOutline.litTagName}>
     `,
         this.shadow, {host: this});

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

@@ -64,7 +64,7 @@ export class StackTraceRow extends HTMLElement {
     LitHtml.render(
         LitHtml.html`
       <div class="stack-trace-row">
-              <div class="stack-trace-function-name text-ellipsis" title="${this.stackTraceRowItem.functionName}">
+              <div class="stack-trace-function-name text-ellipsis" title=${this.stackTraceRowItem.functionName}>
                 ${this.stackTraceRowItem.functionName}
               </div>
               <div class="stack-trace-source-location">

package/front_end/panels/console/ConsolePrompt.ts

@@ -259,7 +259,6 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     } else {
       this.editor.dispatch({scrollIntoView: true});
     }
-    this.enterProcessedForTest();
     return true;
   }
 
@@ -283,9 +282,6 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
     }
   }
 
-  private enterProcessedForTest(): void {
-  }
-
   private editorUpdate(update: CodeMirror.ViewUpdate): void {
     if (update.docChanged ||
         CodeMirror.selectedCompletion(update.state) !== CodeMirror.selectedCompletion(update.startState)) {

package/front_end/panels/coverage/CoverageView.ts

@@ -470,7 +470,7 @@ export class CoverageView extends UI.Widget.VBox {
       return;
     }
     const text = this.filterInput.value();
-    this.textFilterRegExp = text ? createPlainTextSearchRegex(text, 'i') : null;
+    this.textFilterRegExp = text ? Platform.StringUtilities.createPlainTextSearchRegex(text, 'i') : null;
     this.listView.updateFilterAndHighlight(this.textFilterRegExp);
     this.updateStats();
   }

package/front_end/panels/css_overview/components/cssOverviewStartView.css

@@ -14,6 +14,7 @@ h1 {
   display: flex;
   flex-direction: column;
   background-color: var(--color-background);
+  overflow: auto;
 }
 
 .summary-header {

package/front_end/panels/css_overview/cssOverviewCompletedView.css

@@ -249,7 +249,7 @@
 
 .overview-completed-view .font-info .font-metric {
   display: grid;
-  grid-template-columns: 1fr 1fr 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   grid-gap: 12px;
 }
 

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -4,6 +4,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as i18n from '../../core/i18n/i18n.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -125,7 +126,7 @@ export class DeveloperResourcesView extends UI.Widget.VBox {
     }
 
     const text = this.filterInput.value();
-    this.textFilterRegExp = text ? createPlainTextSearchRegex(text, 'i') : null;
+    this.textFilterRegExp = text ? Platform.StringUtilities.createPlainTextSearchRegex(text, 'i') : null;
     this.listView.updateFilterAndHighlight(this.textFilterRegExp);
     this.updateStats();
   }

package/front_end/panels/elements/AccessibilityTreeUtils.ts

@@ -86,13 +86,7 @@ async function getChildren(node: SDK.AccessibilityModel.AccessibilityNode):
     const localRoot = await getRootNode(frameId);
     return [localRoot];
   }
-  if (node.hasUnloadedChildren()) {
-    await node.accessibilityModel().requestAXChildren(node.id(), node.getFrameId() || undefined);
-    if (node.numChildren() !== node.children().length) {
-      throw new Error('Once loaded, number of children and length of children must match.');
-    }
-  }
-  return node.children();
+  return node.accessibilityModel().requestAXChildren(node.id(), node.getFrameId() || undefined);
 }
 
 export async function sdkNodeToAXTreeNodes(sdkNode: SDK.AccessibilityModel.AccessibilityNode): Promise<AXTreeNode[]> {

package/front_end/panels/elements/ElementsPanel.ts

@@ -291,8 +291,16 @@ export class ElementsPanel extends UI.Panel.Panel implements UI.SearchableView.S
   }
 
   private showDOMTree(): void {
-    // TODO(meredithl): Scroll to inspected DOM node.
     this.splitWidget.setMainWidget(this.searchableViewInternal);
+    const selectedNode = this.selectedDOMNode();
+    if (!selectedNode) {
+      return;
+    }
+    const treeElement = this.treeElementForNode(selectedNode);
+    if (!treeElement) {
+      return;
+    }
+    treeElement.select();
   }
 
   static instance(opts: {

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -1899,7 +1899,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.hideSearchHighlight();
 
     const text = this.listItemElement.textContent || '';
-    const regexObject = createPlainTextSearchRegex(this.searchQuery, 'gi');
+    const regexObject = Platform.StringUtilities.createPlainTextSearchRegex(this.searchQuery, 'gi');
 
     let match = regexObject.exec(text);
     const matchRanges = [];

package/front_end/panels/elements/PropertiesWidget.ts

@@ -31,25 +31,67 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import propertiesWidgetStyles from './propertiesWidget.css.js';
-import type * as Common from '../../core/common/common.js';
+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 Protocol from '../../generated/protocol.js';
 import * as ObjectUI from '../../ui/legacy/components/object_ui/object_ui.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
+import propertiesWidgetStyles from './propertiesWidget.css.js';
+import {StylesSidebarPane} from './StylesSidebarPane.js';
+
 const OBJECT_GROUP_NAME = 'properties-sidebar-pane';
 
+const UIStrings = {
+  /**
+  * @description Placeholder text for a text input used to filter which DOM element properties show up in
+  * the Properties tab of the Elements panel.
+  */
+  filter: 'Filter',
+  /**
+  * @description ARIA accessible name for the text input used to filter which DOM element properties show up
+  * in the Properties tab of the Elements panel.
+  */
+  filterProperties: 'Filter Properties',
+  /**
+  * @description Text on the checkbox in the Properties tab of the Elements panel, which controls whether
+  * all properties of the currently selected DOM element are shown, or only meaningful properties (i.e.
+  * excluding properties whose values aren't set for example).
+  */
+  showAll: 'Show all',
+  /**
+   * @description Tooltip on the checkbox in the Properties tab of the Elements panel, which controls whether
+  * all properties of the currently selected DOM element are shown, or only meaningful properties (i.e.
+  * excluding properties whose values aren't set for example).
+   */
+  showAllTooltip: 'When unchecked, only properties whose values are neither null nor undefined will be shown',
+  /**
+  * @description Text shown to the user when a filter is applied in the Properties tab of the Elements panel, but
+  * no properties matched the filter and thus no results were returned.
+  */
+  noMatchingProperty: 'No matching property',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/elements/PropertiesWidget.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
 let propertiesWidgetInstance: PropertiesWidget;
 
 export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
   private node: SDK.DOMModel.DOMNode|null;
+  private readonly showAllPropertiesSetting: Common.Settings.Setting<boolean>;
+  private filterRegex: RegExp|null = null;
+  private readonly noMatchesElement: HTMLElement;
   private readonly treeOutline: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline;
   private readonly expandController: ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeExpandController;
   private lastRequestedNode?: SDK.DOMModel.DOMNode;
   constructor() {
     super(true /* isWebComponent */);
 
+    this.showAllPropertiesSetting = Common.Settings.Settings.instance().createSetting('showAllProperties', false);
+    this.showAllPropertiesSetting.addChangeListener(this.filterList.bind(this));
+
     SDK.TargetManager.TargetManager.instance().addModelListener(
         SDK.DOMModel.DOMModel, SDK.DOMModel.Events.AttrModified, this.onNodeChange, this);
     SDK.TargetManager.TargetManager.instance().addModelListener(
@@ -61,6 +103,20 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     UI.Context.Context.instance().addFlavorChangeListener(SDK.DOMModel.DOMNode, this.setNode, this);
     this.node = UI.Context.Context.instance().flavor(SDK.DOMModel.DOMNode);
 
+    const hbox = this.contentElement.createChild('div', 'hbox properties-widget-toolbar');
+    const filterContainerElement = hbox.createChild('div', 'properties-widget-filter-box');
+    const filterInput = StylesSidebarPane.createPropertyFilterElement(
+        i18nString(UIStrings.filter), hbox, this.filterProperties.bind(this));
+    UI.ARIAUtils.setAccessibleName(filterInput, i18nString(UIStrings.filterProperties));
+    filterContainerElement.appendChild(filterInput);
+
+    const toolbar = new UI.Toolbar.Toolbar('styles-pane-toolbar', hbox);
+    toolbar.appendToolbarItem(new UI.Toolbar.ToolbarSettingCheckbox(
+        this.showAllPropertiesSetting, i18nString(UIStrings.showAllTooltip), i18nString(UIStrings.showAll)));
+
+    this.noMatchesElement = this.contentElement.createChild('div', 'gray-info-message hidden');
+    this.noMatchesElement.textContent = i18nString(UIStrings.noMatchingProperty);
+
     this.treeOutline = new ObjectUI.ObjectPropertiesSection.ObjectPropertiesSectionsTreeOutline({readOnly: true});
     this.treeOutline.setShowSelectionOnKeyboardFocus(/* show */ true, /* preventTabOrder */ false);
     this.expandController =
@@ -73,6 +129,7 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
 
     this.update();
   }
+
   static instance(opts: {
     forceNew: boolean|null,
   }|undefined = {forceNew: null}): PropertiesWidget {
@@ -84,6 +141,46 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     return propertiesWidgetInstance;
   }
 
+  private filterProperties(this: PropertiesWidget, regex: RegExp|null): void {
+    this.filterRegex = regex;
+    this.filterList();
+  }
+
+  private filterList(): void {
+    const isHidden = (property: SDK.RemoteObject.RemoteObjectProperty): boolean => {
+      if (!this.showAllPropertiesSetting.get()) {
+        if (SDK.RemoteObject.RemoteObject.isNullOrUndefined(property.value)) {
+          return true;
+        }
+        if (property.value?.type === Protocol.Runtime.RemoteObjectType.Undefined ||
+            (property.value?.type === Protocol.Runtime.RemoteObjectType.Object &&
+             property.value.subtype === Protocol.Runtime.RemoteObjectSubtype.Null)) {
+          return true;
+        }
+      }
+      if (this.filterRegex !== null) {
+        if (this.filterRegex.test(property.name)) {
+          return false;
+        }
+        if (this.filterRegex.test(property.value?.description ?? '')) {
+          return false;
+        }
+        return true;
+      }
+      return false;
+    };
+    let noMatches = true;
+    for (const element of this.treeOutline.rootElement().children()) {
+      const {property} = element as ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement;
+      const hidden = isHidden(property);
+      if (!hidden) {
+        noMatches = false;
+      }
+      element.hidden = hidden;
+    }
+    this.noMatchesElement.classList.toggle('hidden', !noMatches);
+  }
+
   private setNode(event: Common.EventTarget.EventTargetEvent<SDK.DOMModel.DOMNode|null>): void {
     this.node = event.data;
     this.update();
@@ -106,8 +203,15 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
       return;
     }
 
-    await ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populate(
-        this.treeOutline.rootElement(), object, true, true, undefined, undefined);
+    const treeElement = this.treeOutline.rootElement();
+    let {properties} = await SDK.RemoteObject.RemoteObject.loadFromObjectPerProto(object, true /* generatePreview */);
+    treeElement.removeChildren();
+    if (properties === null) {
+      properties = [];
+    }
+    ObjectUI.ObjectPropertiesSection.ObjectPropertyTreeElement.populateWithProperties(
+        treeElement, properties, null, true /* skipProto */, true /* skipGettersAndSetters */, object);
+    this.filterList();
   }
 
   private onNodeChange(event: Common.EventTarget
@@ -122,6 +226,7 @@ export class PropertiesWidget extends UI.ThrottledWidget.ThrottledWidget {
     }
     this.update();
   }
+
   wasShown(): void {
     super.wasShown();
     this.registerCSSFiles([propertiesWidgetStyles]);

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

@@ -276,7 +276,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
       // Disabled until https://crbug.com/1079231 is fixed.
       // clang-format off
       LitHtml.render(LitHtml.html`
-        <nav class="crumbs" aria-label="${i18nString(UIStrings.breadcrumbs)}">
+        <nav class="crumbs" aria-label=${i18nString(UIStrings.breadcrumbs)}>
           ${this.renderOverflowButton('left', this.userScrollPosition === 'start')}
 
           <div class="crumbs-window" @scroll=${this.onCrumbsWindowScroll}>

package/front_end/panels/elements/propertiesWidget.css

@@ -8,3 +8,37 @@
   padding: 2px 0 2px 5px;
   flex: none;
 }
+
+.properties-widget-toolbar {
+  border-bottom: 1px solid var(--color-details-hairline-light);
+  flex-shrink: 0;
+}
+
+.properties-widget-filter-box {
+  flex: auto;
+  display: flex;
+}
+
+.properties-widget-filter-box > input {
+  outline: none !important; /* stylelint-disable-line declaration-no-important */
+  border: none;
+  width: 100%;
+  background: var(--color-background);
+  padding-left: 4px;
+  margin: 3px;
+}
+
+.properties-widget-filter-box > input:focus,
+.properties-widget-filter-box > input:not(:placeholder-shown) {
+  box-shadow: var(--legacy-focus-ring-active-shadow);
+}
+
+.properties-widget-filter-box > input::placeholder {
+  color: var(--color-text-disabled);
+}
+
+@media (forced-colors: active) {
+  .properties-widget-filter-box > input {
+    border: 1px solid ButtonText;
+  }
+}

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -402,7 +402,7 @@ export class DeviceModeToolbar {
   private appendScaleMenuItems(contextMenu: UI.ContextMenu.ContextMenu): void {
     if (this.model.type() === EmulationModel.DeviceModeModel.Type.Device) {
       contextMenu.footerSection().appendItem(
-          i18nString(UIStrings.fitToWindowF, {PH1: this.getPrettyZoomPercentage()}),
+          i18nString(UIStrings.fitToWindowF, {PH1: this.getPrettyFitZoomPercentage()}),
           this.onScaleMenuChanged.bind(this, this.model.fitScale()), false);
     }
     contextMenu.footerSection().appendCheckboxItem(
@@ -693,6 +693,10 @@ export class DeviceModeToolbar {
     }
   }
 
+  private getPrettyFitZoomPercentage(): string {
+    return `${(this.model.fitScale() * 100).toFixed(0)}`;
+  }
+
   private getPrettyZoomPercentage(): string {
     return `${(this.model.scale() * 100).toFixed(0)}`;
   }

package/front_end/panels/issues/CorsIssueDetailsView.ts

@@ -174,11 +174,16 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.appendColumnTitle(header, i18nString(UIStrings.allowCredentialsValueFromHeader));
         break;
       case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetwork:
-      case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetworkPreflight:
         this.appendColumnTitle(header, i18nString(UIStrings.resourceAddressSpace));
         this.appendColumnTitle(header, i18nString(UIStrings.initiatorAddressSpace));
         this.appendColumnTitle(header, i18nString(UIStrings.initiatorContext));
         break;
+      case IssuesManager.CorsIssue.IssueCode.PreflightAllowPrivateNetworkError:
+        this.appendColumnTitle(header, i18nString(UIStrings.preflightRequest));
+        this.appendColumnTitle(header, i18nString(UIStrings.invalidValue));
+        this.appendColumnTitle(header, i18nString(UIStrings.initiatorAddressSpace));
+        this.appendColumnTitle(header, i18nString(UIStrings.initiatorContext));
+        break;
       case IssuesManager.CorsIssue.IssueCode.MethodDisallowedByPreflightResponse:
         this.appendColumnTitle(header, i18nString(UIStrings.preflightRequest));
         this.appendColumnTitle(header, i18nString(UIStrings.disallowedRequestMethod));
@@ -207,9 +212,7 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
                                  IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowExternal|
                                  IssuesManager.CorsIssue.IssueCode.InvalidResponse|
                                  IssuesManager.CorsIssue.IssueCode.InvalidPrivateNetworkAccess|
-                                 IssuesManager.CorsIssue.IssueCode.UnexpectedPrivateNetworkAccess|
-                                 IssuesManager.CorsIssue.IssueCode.PreflightMissingAllowPrivateNetwork|
-                                 IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowPrivateNetwork>(issueCode);
+                                 IssuesManager.CorsIssue.IssueCode.UnexpectedPrivateNetworkAccess>(issueCode);
     }
 
     this.affectedResources.appendChild(header);
@@ -251,6 +254,9 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
       case Protocol.Network.CorsError.InvalidAllowCredentials:
       case Protocol.Network.CorsError.PreflightInvalidAllowCredentials:
         return 'Access-Control-Allow-Credentials';
+      case Protocol.Network.CorsError.PreflightMissingAllowPrivateNetwork:
+      case Protocol.Network.CorsError.PreflightInvalidAllowPrivateNetwork:
+        return 'Access-Control-Allow-Private-Network';
       case Protocol.Network.CorsError.RedirectContainsCredentials:
       case Protocol.Network.CorsError.PreflightDisallowedRedirect:
         return 'Location';
@@ -362,13 +368,21 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
         this.appendIssueDetailCell(element, details.corsErrorStatus.failedParameter, 'code-example');
         break;
       case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetwork:
-      case IssuesManager.CorsIssue.IssueCode.InsecurePrivateNetworkPreflight:
         element.appendChild(this.createRequestCell(details.request, opts));
         this.appendStatus(element, details.isWarning);
         this.appendIssueDetailCell(element, details.resourceIPAddressSpace ?? '');
         this.appendIssueDetailCell(element, details.clientSecurityState?.initiatorIPAddressSpace ?? '');
         this.appendSecureContextCell(element, details.clientSecurityState?.initiatorIsSecureContext);
         break;
+      case IssuesManager.CorsIssue.IssueCode.PreflightAllowPrivateNetworkError: {
+        element.appendChild(this.createRequestCell(details.request, opts));
+        this.appendStatus(element, details.isWarning);
+        element.appendChild(this.createRequestCell(details.request, {...opts, linkToPreflight: true, highlightHeader}));
+        this.appendIssueDetailCell(element, details.corsErrorStatus.failedParameter, 'code-example');
+        this.appendIssueDetailCell(element, details.clientSecurityState?.initiatorIPAddressSpace ?? '');
+        this.appendSecureContextCell(element, details.clientSecurityState?.initiatorIsSecureContext);
+        break;
+      }
       case IssuesManager.CorsIssue.IssueCode.MethodDisallowedByPreflightResponse:
         element.appendChild(this.createRequestCell(details.request, opts));
         this.appendStatus(element, details.isWarning);
@@ -435,9 +449,7 @@ export class CorsIssueDetailsView extends AffectedResourcesView {
                                  IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowExternal|
                                  IssuesManager.CorsIssue.IssueCode.InvalidResponse|
                                  IssuesManager.CorsIssue.IssueCode.InvalidPrivateNetworkAccess|
-                                 IssuesManager.CorsIssue.IssueCode.UnexpectedPrivateNetworkAccess|
-                                 IssuesManager.CorsIssue.IssueCode.PreflightMissingAllowPrivateNetwork|
-                                 IssuesManager.CorsIssue.IssueCode.PreflightInvalidAllowPrivateNetwork>(issueCode);
+                                 IssuesManager.CorsIssue.IssueCode.UnexpectedPrivateNetworkAccess>(issueCode);
         break;
     }
 

package/front_end/panels/network/NetworkWaterfallColumn.ts

@@ -16,6 +16,7 @@ import {RequestTimeRangeNameToColor} from './NetworkOverview.js';
 import type {Label, NetworkTimeCalculator} from './NetworkTimeCalculator.js';
 import type {RequestTimeRange} from './RequestTimingView.js';
 import {RequestTimeRangeNames, RequestTimingView} from './RequestTimingView.js';
+import networkingTimingTableStyles from './networkTimingTable.css.js';
 
 const BAR_SPACING = 1;
 
@@ -271,6 +272,7 @@ export class NetworkWaterfallColumn extends UI.Widget.VBox {
       show: (popover: UI.GlassPane.GlassPane): Promise<true> => {
         const content =
             RequestTimingView.createTimingTable((request as SDK.NetworkRequest.NetworkRequest), this.calculator);
+        popover.registerCSSFiles([networkingTimingTableStyles]);
         popover.contentElement.appendChild(content);
         return Promise.resolve(true);
       },

package/front_end/panels/profiler/CPUProfileFlameChart.ts

@@ -30,6 +30,7 @@
 
 import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
+import * as Platform from '../../core/platform/platform.js';
 import * as PerfUI from '../../ui/legacy/components/perf_ui/perf_ui.js';
 import type * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -217,7 +218,8 @@ export class CPUProfileFlameChart extends
   }
 
   performSearch(searchConfig: UI.SearchableView.SearchConfig, _shouldJump: boolean, jumpBackwards?: boolean): void {
-    const matcher = createPlainTextSearchRegex(searchConfig.query, searchConfig.caseSensitive ? '' : 'i');
+    const matcher =
+        Platform.StringUtilities.createPlainTextSearchRegex(searchConfig.query, searchConfig.caseSensitive ? '' : 'i');
 
     const selectedEntryIndex: number = this.searchResultIndex !== -1 ? this.searchResults[this.searchResultIndex] : -1;
     this.searchResults = [];