chrome-devtools-frontend 1.0.1040337 → 1.0.1070764

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 {

package/front_end/panels/network/components/HeaderSectionRow.css

@@ -0,0 +1,176 @@
+/*
+ * Copyright 2022 The Chromium Authors. All rights reserved.
+ * Use of this source code is governed by a BSD-style license that can be
+ * found in the LICENSE file.
+ */
+
+:host {
+  display: block;
+
+  --override-error-background-color: #d93025;
+}
+
+.row {
+  display: flex;
+  line-height: 20px;
+  padding-left: 8px;
+  gap: 12px;
+  user-select: text;
+}
+
+.row.header-editable {
+  font-family: var(--monospace-font-family);
+  font-size: var(--monospace-font-size);
+}
+
+.header-name {
+  color: var(--color-primary);
+  font-weight: 500;
+  width: 160px;
+  flex-shrink: 0;
+  text-transform: capitalize;
+}
+
+.header-editable .header-name {
+  color: var(--color-syntax-1);
+}
+
+.header-value {
+  word-break: break-all;
+}
+
+.header-badge-text {
+  font-variant: small-caps;
+  font-weight: 500;
+  white-space: pre-wrap;
+  word-break: break-all;
+  text-transform: none;
+}
+
+.header-badge {
+  display: inline;
+  background-color: var(--color-accent-red);
+  color: var(--color-background);
+  border-radius: 100vh;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+.call-to-action {
+  background-color: var(--color-background-elevation-1);
+  padding: 8px;
+  border-radius: 2px;
+}
+
+.call-to-action-body {
+  padding: 6px 0;
+  margin-left: 9.5px;
+  border-left: 2px solid var(--issue-color-yellow);
+  padding-left: 18px;
+  line-height: 20px;
+}
+
+.call-to-action .explanation {
+  font-weight: bold;
+}
+
+.call-to-action code {
+  font-size: 90%;
+}
+
+.call-to-action .example .comment::before {
+  content: " — ";
+}
+
+.link,
+.devtools-link {
+  color: var(--color-link);
+  text-decoration: underline;
+  cursor: pointer;
+  outline-offset: 2px;
+}
+
+.explanation .link {
+  font-weight: normal;
+}
+
+.inline-icon {
+  vertical-align: middle;
+}
+
+.header-value code {
+  display: block;
+  white-space: pre-wrap;
+  font-size: 90%;
+  color: var(--color-text-secondary);
+}
+
+x-link .inline-icon { /* stylelint-disable-line selector-type-no-unknown */
+  padding-right: 3px;
+}
+
+.header-highlight {
+  background-color: var(--override-header-highlight-background-color);
+}
+
+.header-warning {
+  color: var(--override-error-background-color);
+}
+
+.header-overridden {
+  background-color: var(--color-accent-green-background);
+  border-left: 3px solid var(--color-accent-green);
+  padding-left: 5px;
+}
+
+.header-highlight.header-overridden {
+  background-color: var(--override-header-highlight-background-color);
+  border-left: 3px solid var(--color-accent-green);
+  padding-left: 5px;
+}
+
+.editable {
+  cursor: text;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+  min-height: 18px;
+  line-height: 18px;
+  min-width: 0.5em;
+  background: transparent;
+  border: none;
+  outline: none;
+  display: inline-block;
+  font-family: var(--monospace-font-family);
+  font-size: var(--monospace-font-size);
+}
+
+.editable:hover,
+.editable:focus {
+  box-shadow: 0 0 0 1px var(--color-details-hairline);
+  border-radius: 2px;
+}
+
+.header-editable .header-name .editable {
+  color: var(--color-syntax-1);
+}
+
+.inline-button {
+  vertical-align: middle;
+}
+
+.row .inline-button {
+  opacity: 0%;
+  visibility: hidden;
+  transition: opacity 200ms;
+}
+
+.row.header-overridden:focus-within .inline-button,
+.row.header-overridden:hover .inline-button {
+  opacity: 100%;
+  visibility: visible;
+}
+
+.row:hover .inline-button.enable-editing {
+  opacity: 100%;
+  visibility: visible;
+}