chrome-devtools-frontend 1.0.1040857 → 1.0.1070764

package/front_end/panels/lighthouse/lighthouseStartView.css

@@ -5,11 +5,13 @@
  */
 /* <3 */
 
-.lighthouse-start-view,
-.lighthouse-start-view-fr {
+.lighthouse-start-view {
   font-family: Roboto, sans-serif;
   font-size: var(--font-size);
   line-height: 18px;
+  padding: 24px;
+  overflow: auto;
+  height: 100%;
   /* for buttons */
   --legacy-accent-color: #0535c1;
   --legacy-accent-color-hover: #17b;
@@ -17,20 +19,7 @@
   --report-font-family: roboto, helvetica, arial, sans-serif;
 }
 
-.lighthouse-start-view-fr {
-  padding: 24px;
-  overflow: auto;
-  height: 100%;
-}
-
 .lighthouse-start-view header {
-  flex: 2 1;
-  padding: 16px;
-  display: grid;
-  justify-items: center;
-}
-
-.lighthouse-start-view-fr header {
   display: flex;
   font-size: 18px;
   flex-direction: row;
@@ -48,30 +37,16 @@
   background-image: var(--image-file-lighthouse_logo);
 }
 
-.lighthouse-start-view-fr .lighthouse-logo {
+.lighthouse-start-view .lighthouse-logo {
   width: 45px;
   height: 45px;
 }
 
-.lighthouse-start-view-text {
-  margin: 0 40px;
-  text-align: center;
-}
-
-.lighthouse-start-view form {
-  display: contents;
-}
-
 .lighthouse-form-section {
   padding: 8px;
   flex: 1 1;
 }
 
-.lighthouse-start-view.vbox .lighthouse-form-categories {
-  border-top: 1px solid var(--color-background-elevation-2);
-  border-bottom: 1px solid var(--color-background-elevation-2);
-}
-
 .lighthouse-form-section-label {
   margin: 7px 0;
   font-weight: 500;
@@ -111,11 +86,11 @@ input[type="radio"]:focus {
   align-items: center;
 }
 
-.lighthouse-start-view-fr header.hbox .lighthouse-start-button-container {
+.lighthouse-start-view header.hbox .lighthouse-start-button-container {
   margin-left: auto;
 }
 
-.lighthouse-start-view-fr header.vbox .lighthouse-title {
+.lighthouse-start-view header.vbox .lighthouse-title {
   text-align: center;
 }
 
@@ -130,10 +105,6 @@ input[type="radio"]:focus {
   cursor: not-allowed;
 }
 
-.lighthouse-start-view .toolbar-dropdown-arrow {
-  display: none;
-}
-
 .lighthouse-launcher-row,
 .lighthouse-radio {
   margin-bottom: 6px;

package/front_end/panels/media/TickingFlameChart.ts

@@ -12,14 +12,16 @@ import * as ThemeSupport from '../../ui/legacy/theme_support/theme_support.js';
 import {Bounds, formatMillisecondsToSeconds} from './TickingFlameChartHelpers.js';
 
 const defaultFont = '11px ' + Host.Platform.fontFamily();
-const defaultColor = ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
+function getGroupDefaultTextColor(): string {
+  return ThemeSupport.ThemeSupport.instance().getComputedValue('--color-text-primary');
+}
 
 const DefaultStyle = {
   height: 20,
   padding: 2,
   collapsible: false,
   font: defaultFont,
-  color: defaultColor,
+  color: getGroupDefaultTextColor(),
   backgroundColor: 'rgba(100 0 0 / 10%)',
   nestingLevel: 0,
   itemsHeight: 20,
@@ -390,13 +392,17 @@ class TickingFlameChartDataProvider implements PerfUI.FlameChart.FlameChartDataP
    */
   addGroup(name: Common.UIString.LocalizedString, depth: number): void {
     if (this.timelineDataInternal.groups) {
-      this.timelineDataInternal.groups.push({
+      const newGroup = {
         name: name,
         startLevel: this.maxLevel,
         expanded: true,
         selectable: false,
         style: DefaultStyle,
         track: null,
+      };
+      this.timelineDataInternal.groups.push(newGroup);
+      ThemeSupport.ThemeSupport.instance().addEventListener(ThemeSupport.ThemeChangeEvent.eventName, () => {
+        newGroup.style.color = getGroupDefaultTextColor();
       });
     }
     this.maxLevel += depth;

package/front_end/panels/network/NetworkDataGridNode.ts

@@ -40,6 +40,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 Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Protocol from '../../generated/protocol.js';
 import * as Bindings from '../../models/bindings/bindings.js';
@@ -239,6 +240,34 @@ const UIStrings = {
   * between the time a response to a network request is received and the time the request is started.
   */
   timeSubtitleTooltipText: 'Latency (response received time - start time)',
+  /**
+  *@description Tooltip text giving the reason why a specific HTTP transport protocol has been used
+  */
+  alternativeJobWonWithoutRace: 'Chrome used an alternative job without racing with a main job.',
+  /**
+  *@description Tooltip text giving the reason why a specific HTTP transport protocol has been used
+  */
+  alternativeJobWonRace: 'Chrome used an alternative job because it won a race with a main job.',
+  /**
+  *@description Tooltip text giving the reason why a specific HTTP transport protocol has been used
+  */
+  mainJobWonRace: 'Chrome used a main job because it won a race with an alternative job and/or a DNS alpn job.',
+  /**
+  *@description Tooltip text giving the reason why a specific HTTP transport protocol has been used
+  */
+  mappingMissing: 'Chrome didn\'t use an alternative job because of missing Alternate-Protocol information.',
+  /**
+  *@description Tooltip text giving the reason why a specific HTTP transport protocol has been used
+  */
+  broken: 'Chrome didn\'t use an alternative job because it was marked broken.',
+  /**
+  *@description Tooltip text giving the reason why a specific HTTP transport protocol has been used
+  */
+  dnsAlpnH3JobWonWithoutRace: 'Chrome used a DNS alpn job without racing with a main job and an alternative job.',
+  /**
+  *@description Tooltip text giving the reason why a specific HTTP transport protocol has been used
+  */
+  dnsAlpnH3JobWonRace: 'Chrome used a DNS alpn job because it won a race with a main job and an alternative job.',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkDataGridNode.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -881,7 +910,7 @@ export class NetworkRequestNode extends NetworkNode {
         break;
       }
       case 'protocol': {
-        this.setTextAndTitle(cell, this.requestInternal.protocol);
+        this.renderProtocolCell(cell);
         break;
       }
       case 'scheme': {
@@ -1170,6 +1199,52 @@ export class NetworkRequestNode extends NetworkNode {
     }
   }
 
+  private renderProtocolCell(cell: HTMLElement): void {
+    UI.UIUtils.createTextChild(cell, this.requestInternal.protocol);
+
+    switch (this.requestInternal.alternateProtocolUsage) {
+      case Protocol.Network.AlternateProtocolUsage.AlternativeJobWonWithoutRace: {
+        UI.Tooltip.Tooltip.install(cell, UIStrings.alternativeJobWonWithoutRace);
+        break;
+      }
+
+      case Protocol.Network.AlternateProtocolUsage.AlternativeJobWonRace: {
+        UI.Tooltip.Tooltip.install(cell, UIStrings.alternativeJobWonRace);
+        break;
+      }
+
+      case Protocol.Network.AlternateProtocolUsage.MainJobWonRace: {
+        UI.Tooltip.Tooltip.install(cell, UIStrings.mainJobWonRace);
+        break;
+      }
+
+      case Protocol.Network.AlternateProtocolUsage.MappingMissing: {
+        UI.Tooltip.Tooltip.install(cell, UIStrings.mappingMissing);
+        break;
+      }
+
+      case Protocol.Network.AlternateProtocolUsage.Broken: {
+        UI.Tooltip.Tooltip.install(cell, UIStrings.broken);
+        break;
+      }
+
+      case Protocol.Network.AlternateProtocolUsage.DnsAlpnH3JobWonWithoutRace: {
+        UI.Tooltip.Tooltip.install(cell, UIStrings.dnsAlpnH3JobWonWithoutRace);
+        break;
+      }
+
+      case Protocol.Network.AlternateProtocolUsage.DnsAlpnH3JobWonRace: {
+        UI.Tooltip.Tooltip.install(cell, UIStrings.dnsAlpnH3JobWonRace);
+        break;
+      }
+
+      default: {
+        UI.Tooltip.Tooltip.install(cell, this.requestInternal.protocol);
+        break;
+      }
+    }
+  }
+
   private renderInitiatorCell(cell: HTMLElement): void {
     this.initiatorCell = cell;
     const request = this.requestInternal;
@@ -1181,7 +1256,6 @@ export class NetworkRequestNode extends NetworkNode {
     }
     switch (initiator.type) {
       case SDK.NetworkRequest.InitiatorType.Parser: {
-        UI.Tooltip.Tooltip.install(cell, initiator.url + ':' + (initiator.lineNumber + 1));
         const uiSourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(initiator.url);
         cell.appendChild(
             Components.Linkifier.Linkifier.linkifyURL(initiator.url, ({
@@ -1208,17 +1282,13 @@ export class NetworkRequestNode extends NetworkNode {
       }
 
       case SDK.NetworkRequest.InitiatorType.Script: {
-        const networkManager = SDK.NetworkManager.NetworkManager.forRequest(request);
-        if (!networkManager) {
-          return;
-        }
-
+        const target = SDK.NetworkManager.NetworkManager.forRequest(request)?.target() || null;
         const linkifier = this.parentView().linkifier();
         if (initiator.stack) {
-          this.linkifiedInitiatorAnchor = linkifier.linkifyStackTraceTopFrame(networkManager.target(), initiator.stack);
+          this.linkifiedInitiatorAnchor = linkifier.linkifyStackTraceTopFrame(target, initiator.stack);
         } else {
           this.linkifiedInitiatorAnchor = linkifier.linkifyScriptLocation(
-              networkManager.target(), initiator.scriptId, initiator.url, initiator.lineNumber,
+              target, initiator.scriptId, initiator.url, initiator.lineNumber,
               {columnNumber: initiator.columnNumber, inlineFrameIndex: 0});
         }
         UI.Tooltip.Tooltip.install((this.linkifiedInitiatorAnchor), '');

package/front_end/panels/network/NetworkItemView.ts

@@ -149,14 +149,15 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
         'resourceViewTab', NetworkForward.UIRequestLocation.UIRequestTabs.Headers);
 
     this.headersView = new RequestHeadersView(request);
-    this.appendTab(
-        NetworkForward.UIRequestLocation.UIRequestTabs.Headers, i18nString(UIStrings.headers), this.headersView,
-        i18nString(UIStrings.headers));
     this.headersViewComponent = new NetworkComponents.RequestHeadersView.RequestHeadersView(request);
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
       this.appendTab(
           NetworkForward.UIRequestLocation.UIRequestTabs.HeadersComponent, i18nString(UIStrings.headers),
           this.headersViewComponent, i18nString(UIStrings.headers));
+    } else {
+      this.appendTab(
+          NetworkForward.UIRequestLocation.UIRequestTabs.Headers, i18nString(UIStrings.headers), this.headersView,
+          i18nString(UIStrings.headers));
     }
 
     this.payloadView = null;

package/front_end/panels/network/NetworkLogView.ts

@@ -360,7 +360,7 @@ const UIStrings = {
   *@description A context menu item in the Network Log View of the Network panel
   * for creating a header override
   */
-  createResponseHeaderOverride: 'Create response header override',
+  overrideHeaders: 'Override headers',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/NetworkLogView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -385,7 +385,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   private readonly timeCalculatorInternal: NetworkTransferTimeCalculator;
   private readonly durationCalculator: NetworkTransferDurationCalculator;
   private calculatorInternal: NetworkTransferTimeCalculator;
-  private readonly columns: NetworkLogViewColumns;
+  private readonly columnsInternal: NetworkLogViewColumns;
   private staleRequests: Set<SDK.NetworkRequest.NetworkRequest>;
   private mainRequestLoadTime: number;
   private mainRequestDOMContentLoadedTime: number;
@@ -452,9 +452,9 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.durationCalculator = new NetworkTransferDurationCalculator();
     this.calculatorInternal = this.timeCalculatorInternal;
 
-    this.columns = new NetworkLogViewColumns(
+    this.columnsInternal = new NetworkLogViewColumns(
         this, this.timeCalculatorInternal, this.durationCalculator, networkLogLargeRowsSetting);
-    this.columns.show(this.element);
+    this.columnsInternal.show(this.element);
 
     this.staleRequests = new Set();
     this.mainRequestLoadTime = -1;
@@ -537,9 +537,9 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         new UI.FilterSuggestionBuilder.FilterSuggestionBuilder(searchKeys, NetworkLogView.sortSearchValues);
     this.resetSuggestionBuilder();
 
-    this.dataGrid = this.columns.dataGrid();
+    this.dataGrid = this.columnsInternal.dataGrid();
     this.setupDataGrid();
-    this.columns.sortByCurrentColumn();
+    this.columnsInternal.sortByCurrentColumn();
     filterBar.filterButton().addEventListener(
         UI.Toolbar.ToolbarButton.Events.Click, this.dataGrid.scheduleUpdate.bind(this.dataGrid, true /* isFromUser */));
 
@@ -825,9 +825,13 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.updateSummaryBar();
   }
 
+  columns(): NetworkLogViewColumns {
+    return this.columnsInternal;
+  }
+
   modelAdded(networkManager: SDK.NetworkManager.NetworkManager): void {
     // TODO(allada) Remove dependency on networkManager and instead use NetworkLog and PageLoad for needed data.
-    if (networkManager.target().parentTarget()) {
+    if (networkManager.target().parentTarget()?.type() === SDK.Target.Type.Frame) {
       return;
     }
     const resourceTreeModel = networkManager.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
@@ -839,7 +843,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   modelRemoved(networkManager: SDK.NetworkManager.NetworkManager): void {
-    if (!networkManager.target().parentTarget()) {
+    if (networkManager.target().parentTarget()?.type() !== SDK.Target.Type.Frame) {
       const resourceTreeModel = networkManager.target().model(SDK.ResourceTreeModel.ResourceTreeModel);
       if (resourceTreeModel) {
         resourceTreeModel.removeEventListener(SDK.ResourceTreeModel.Events.Load, this.loadEventFired, this);
@@ -940,7 +944,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   private setHidden(value: boolean): void {
-    this.columns.setHidden(value);
+    this.columnsInternal.setHidden(value);
     UI.ARIAUtils.setHidden(this.summaryToolbar.element, value);
   }
 
@@ -978,7 +982,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
         }
       }
 
-      if (isEnterOrSpaceKey(event)) {
+      if (Platform.KeyboardUtilities.isEnterOrSpaceKey(event)) {
         this.dispatchEventToListeners(Events.RequestActivated, {showPanel: true, takeFocus: true});
         event.consume(true);
       }
@@ -1141,15 +1145,15 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   addFilmStripFrames(times: number[]): void {
-    this.columns.addEventDividers(times, 'network-frame-divider');
+    this.columnsInternal.addEventDividers(times, 'network-frame-divider');
   }
 
   selectFilmStripFrame(time: number): void {
-    this.columns.selectFilmStripFrame(time);
+    this.columnsInternal.selectFilmStripFrame(time);
   }
 
   clearFilmStripFrame(): void {
-    this.columns.clearFilmStripFrame();
+    this.columnsInternal.clearFilmStripFrame();
   }
 
   private refreshIfNeeded(): void {
@@ -1182,14 +1186,14 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
 
     if (this.calculatorInternal !== x) {
       this.calculatorInternal = x;
-      this.columns.setCalculator(this.calculatorInternal);
+      this.columnsInternal.setCalculator(this.calculatorInternal);
     }
     this.calculatorInternal.reset();
 
     if (this.calculatorInternal.startAtZero) {
-      this.columns.hideEventDividers();
+      this.columnsInternal.hideEventDividers();
     } else {
-      this.columns.showEventDividers();
+      this.columnsInternal.showEventDividers();
     }
 
     this.invalidateAllItems();
@@ -1205,7 +1209,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     const time = event.data.loadTime;
     if (time) {
       this.mainRequestLoadTime = time;
-      this.columns.addEventDividers([time], 'network-load-divider');
+      this.columnsInternal.addEventDividers([time], 'network-load-divider');
     }
   }
 
@@ -1216,18 +1220,18 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     const {data} = event;
     if (data) {
       this.mainRequestDOMContentLoadedTime = data;
-      this.columns.addEventDividers([data], 'network-dcl-divider');
+      this.columnsInternal.addEventDividers([data], 'network-dcl-divider');
     }
   }
 
   wasShown(): void {
     this.refreshIfNeeded();
     this.registerCSSFiles([networkLogViewStyles]);
-    this.columns.wasShown();
+    this.columnsInternal.wasShown();
   }
 
   willHide(): void {
-    this.columns.willHide();
+    this.columnsInternal.willHide();
   }
 
   onResize(): void {
@@ -1268,7 +1272,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   stylesChanged(): void {
-    this.columns.scheduleRefresh();
+    this.columnsInternal.scheduleRefresh();
   }
 
   private refresh(): void {
@@ -1364,7 +1368,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.updateSummaryBar();
 
     if (nodesToInsert.size) {
-      this.columns.sortByCurrentColumn();
+      this.columnsInternal.sortByCurrentColumn();
     }
 
     this.dataGrid.updateInstantly();
@@ -1390,7 +1394,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     this.dispatchEventToListeners(Events.RequestActivated, {showPanel: false});
 
     this.setHoveredNode(null);
-    this.columns.reset();
+    this.columnsInternal.reset();
 
     this.timeFilter = null;
     this.calculatorInternal.reset();
@@ -1500,7 +1504,7 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   switchViewMode(gridMode: boolean): void {
-    this.columns.switchViewMode(gridMode);
+    this.columnsInternal.switchViewMode(gridMode);
   }
 
   handleContextMenuForRequest(contextMenu: UI.ContextMenu.ContextMenu, request: SDK.NetworkRequest.NetworkRequest):
@@ -1590,13 +1594,11 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
     footerSection.appendItem(i18nString(UIStrings.copyAllAsHar), this.copyAll.bind(this));
 
     contextMenu.saveSection().appendItem(i18nString(UIStrings.saveAllAsHarWithContent), this.exportAll.bind(this));
-
     if (Root.Runtime.experiments.isEnabled(Root.Runtime.ExperimentName.HEADER_OVERRIDES)) {
-      contextMenu.editSection().appendItem(
-          i18nString(UIStrings.createResponseHeaderOverride),
-          this.#handleCreateResponseHeaderOverrideClick.bind(this, request));
-      contextMenu.editSection().appendSeparator();
+      contextMenu.saveSection().appendItem(
+          i18nString(UIStrings.overrideHeaders), this.#handleCreateResponseHeaderOverrideClick.bind(this, request));
     }
+
     contextMenu.editSection().appendItem(i18nString(UIStrings.clearBrowserCache), this.clearBrowserCache.bind(this));
     contextMenu.editSection().appendItem(
         i18nString(UIStrings.clearBrowserCookies), this.clearBrowserCookies.bind(this));
@@ -1713,26 +1715,22 @@ export class NetworkLogView extends Common.ObjectWrapper.eventMixin<EventTypes,
   }
 
   async #handleCreateResponseHeaderOverrideClick(request: SDK.NetworkRequest.NetworkRequest): Promise<void> {
-    if (Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().project()) {
-      await this.#revealHeaderOverrideEditor(request);
+    const requestLocation =
+        NetworkForward.UIRequestLocation.UIRequestLocation.responseHeaderMatch(request, {name: '', value: ''});
+    const networkPersistanceManager = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance();
+    if (networkPersistanceManager.project()) {
+      Common.Settings.Settings.instance().moduleSetting('persistenceNetworkOverridesEnabled').set(true);
+      await networkPersistanceManager.getOrCreateHeadersUISourceCodeFromUrl(request.url());
+      await Common.Revealer.reveal(requestLocation);
     } else {  // If folder for local overrides has not been provided yet
       UI.InspectorView.InspectorView.instance().displaySelectOverrideFolderInfobar(async(): Promise<void> => {
         await Sources.SourcesNavigator.OverridesNavigatorView.instance().setupNewWorkspace();
-        await this.#revealHeaderOverrideEditor(request);
+        await networkPersistanceManager.getOrCreateHeadersUISourceCodeFromUrl(request.url());
+        await Common.Revealer.reveal(requestLocation);
       });
     }
   }
 
-  async #revealHeaderOverrideEditor(request: SDK.NetworkRequest.NetworkRequest): Promise<void> {
-    const networkPersistanceManager = Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance();
-    const uiSourceCode = await networkPersistanceManager.getOrCreateHeadersUISourceCodeFromUrl(request.url());
-    if (uiSourceCode) {
-      const sourcesPanel = Sources.SourcesPanel.SourcesPanel.instance();
-      sourcesPanel.showUISourceCode(uiSourceCode);
-      sourcesPanel.revealInNavigator(uiSourceCode);
-    }
-  }
-
   private clearBrowserCache(): void {
     if (confirm(i18nString(UIStrings.areYouSureYouWantToClearBrowser))) {
       SDK.NetworkManager.MultitargetNetworkManager.instance().clearBrowserCache();

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -382,7 +382,8 @@ export class NetworkLogViewColumns {
     if (!this.waterfallColumn.isShowing()) {
       return;
     }
-    this.waterfallScrollerContent.style.height = this.dataGridScroller.scrollHeight + 'px';
+    this.waterfallScrollerContent.style.height =
+        this.dataGridScroller.scrollHeight - this.dataGridInternal.headerHeight() + 'px';
     this.updateScrollerWidthIfNeeded();
     this.dataGridScroller.scrollTop = this.waterfallScroller.scrollTop;
   }

package/front_end/panels/network/RequestCookiesView.ts

@@ -78,6 +78,19 @@ const UIStrings = {
   */
   cookiesThatWereReceivedFromTheServer:
       'Cookies that were received from the server in the \'`set-cookie`\' header of the response but were malformed',
+
+  /**
+  * @description Informational text to explain that there were other cookies
+  * that were not used and not shown in the list.
+  * @example {Learn more} PH1
+  *
+  */
+  siteHasCookieInOtherPartition:
+      'This site has cookies in another partition, that were not sent with this request. {PH1}',
+  /**
+  * @description Title of a link to the developer documentation.
+  */
+  learnMore: 'Learn more',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestCookiesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -91,6 +104,7 @@ export class RequestCookiesView extends UI.Widget.Widget {
   private readonly requestCookiesTable: CookieTable.CookiesTable.CookiesTable;
   private readonly responseCookiesTitle: HTMLElement;
   private readonly responseCookiesTable: CookieTable.CookiesTable.CookiesTable;
+  private readonly siteHasCookieInOtherPartition: HTMLElement;
   private readonly malformedResponseCookiesTitle: HTMLElement;
   private readonly malformedResponseCookiesList: HTMLElement;
 
@@ -127,6 +141,14 @@ export class RequestCookiesView extends UI.Widget.Widget {
     this.requestCookiesTable.contentElement.classList.add('cookie-table', 'cookies-panel-item');
     this.requestCookiesTable.show(this.element);
 
+    this.siteHasCookieInOtherPartition =
+        this.element.createChild('div', 'cookies-panel-item site-has-cookies-in-other-partition');
+    this.siteHasCookieInOtherPartition.appendChild(
+        i18n.i18n.getFormatLocalizedString(str_, UIStrings.siteHasCookieInOtherPartition, {
+          PH1: UI.XLink.XLink.create(
+              'https://developer.chrome.com/en/docs/privacy-sandbox/chips/', i18nString(UIStrings.learnMore)),
+        }));
+
     this.responseCookiesTitle = this.element.createChild('div', 'request-cookies-title');
     this.responseCookiesTitle.textContent = i18nString(UIStrings.responseCookies);
     this.responseCookiesTitle.title = i18nString(UIStrings.cookiesThatWereReceivedFromThe);
@@ -281,6 +303,12 @@ export class RequestCookiesView extends UI.Widget.Widget {
       this.malformedResponseCookiesTitle.classList.add('hidden');
       this.malformedResponseCookiesList.classList.add('hidden');
     }
+
+    if (this.request.siteHasCookieInOtherPartition()) {
+      this.siteHasCookieInOtherPartition.classList.remove('hidden');
+    } else {
+      this.siteHasCookieInOtherPartition.classList.add('hidden');
+    }
   }
 
   wasShown(): void {