chrome-devtools-frontend 1.0.1556696 → 1.0.1558690

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -44,6 +44,7 @@ import * as Badges from '../../models/badges/badges.js';
 import type * as Elements from '../../models/elements/elements.js';
 import type * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as TextUtils from '../../models/text_utils/text_utils.js';
+import * as Workspace from '../../models/workspace/workspace.js';
 import * as CodeMirror from '../../third_party/codemirror.next/codemirror.next.js';
 import type {DirectiveResult} from '../../third_party/lit/lib/directive.js';
 import * as Adorners from '../../ui/components/adorners/adorners.js';
@@ -275,6 +276,10 @@ const UIStrings = {
    */
   startAChat: 'Start a chat',
   /**
+   * @description Label of an adorner next to the html node in the Elements panel.
+   */
+  viewSourceCode: 'View source code',
+  /**
    * @description Context menu item in Elements panel to assess visibility of an element via AI.
    */
   assessVisibility: 'Assess visibility',
@@ -386,6 +391,7 @@ export interface ViewInput {
   showTopLayerAdorner: boolean;
   isSubgrid: boolean;
 
+  showViewSourceAdorner: boolean;
   adorners?: Set<Adorners.Adorner.Adorner>;
   nodeInfo?: DocumentFragment;
   topLayerIndex: number;
@@ -399,6 +405,7 @@ export interface ViewInput {
   onMediaAdornerClick: (e: Event) => void;
   onPopoverAdornerClick: (e: Event) => void;
   onTopLayerAdornerClick: (e: Event) => void;
+  onViewSourceAdornerClick: () => void;
 }
 
 export interface ViewOutput {
@@ -429,6 +436,8 @@ function adornerRef(input: ViewInput): DirectiveResult<typeof Lit.Directives.Ref
 export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLElement): void => {
   const adAdornerConfig =
       ElementsComponents.AdornerManager.getRegisteredAdorner(ElementsComponents.AdornerManager.RegisteredAdorners.AD);
+  const viewSourceAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
+      ElementsComponents.AdornerManager.RegisteredAdorners.VIEW_SOURCE);
   const containerAdornerConfig = ElementsComponents.AdornerManager.getRegisteredAdorner(
       ElementsComponents.AdornerManager.RegisteredAdorners.CONTAINER);
   const flexAdornerConfig =
@@ -447,7 +456,7 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
       ElementsComponents.AdornerManager.RegisteredAdorners.TOP_LAYER);
   const hasAdorners = input.adorners?.size || input.showAdAdorner || input.showContainerAdorner ||
       input.showFlexAdorner || input.showGridAdorner || input.showGridLanesAdorner || input.showMediaAdorner ||
-      input.showPopoverAdorner || input.showTopLayerAdorner;
+      input.showPopoverAdorner || input.showTopLayerAdorner || input.showViewSourceAdorner;
   // clang-format off
   render(html`
     <div ${ref(el => { output.contentElement = el as HTMLElement; })}>
@@ -463,6 +472,13 @@ export const DEFAULT_VIEW = (input: ViewInput, output: ViewOutput, target: HTMLE
           ${adornerRef(input)}>
           <span>${adAdornerConfig.name}</span>
         </devtools-adorner>` : nothing}
+        ${input.showViewSourceAdorner ? html`<devtools-adorner
+          .data=${{name: viewSourceAdornerConfig.name, jslogContext: viewSourceAdornerConfig.name}}
+          aria-label=${i18nString(UIStrings.viewSourceCode)}
+          @click=${input.onViewSourceAdornerClick}
+          ${adornerRef(input)}>
+          <span>${viewSourceAdornerConfig.name}</span>
+        </devtools-adorner>` : nothing}
         ${input.showContainerAdorner ? html`<devtools-adorner
           class=clickable
           role=button
@@ -800,8 +816,10 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
           gridAdornerActive: this.#gridAdornerActive,
           popoverAdornerActive: this.#popoverAdornerActive,
           isSubgrid: Boolean(this.#layout?.isSubgrid),
+          showViewSourceAdorner: this.nodeInternal.isRootNode() && isOpeningTag(this.tagTypeContext),
           nodeInfo: this.#nodeInfo,
           topLayerIndex: this.node().topLayerIndex(),
+          onViewSourceAdornerClick: this.revealHTMLInSources.bind(this),
           onGutterClick: this.showContextMenu.bind(this),
           onAdornerAdded: adorner => {
             ElementsPanel.instance().registerAdorner(adorner);
@@ -1291,6 +1309,17 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.treeOutline && void this.treeOutline.showContextMenu(this, event);
   }
 
+  private revealHTMLInSources(): void {
+    const frameOwnerId = this.nodeInternal.frameOwnerFrameId();
+    if (frameOwnerId) {
+      const frame = SDK.FrameManager.FrameManager.instance().getFrame(frameOwnerId);
+      if (frame) {
+        const sourceCode = Workspace.Workspace.WorkspaceImpl.instance().uiSourceCodeForURL(frame.url);
+        void Common.Revealer.reveal(sourceCode);
+      }
+    }
+  }
+
   async populateTagContextMenu(contextMenu: UI.ContextMenu.ContextMenu, event: Event): Promise<void> {
     // Add attribute-related actions.
     const treeElement =

package/front_end/panels/elements/ElementsTreeOutlineRenderer.ts

@@ -33,7 +33,7 @@
  */
 
 import * as SDK from '../../core/sdk/sdk.js';
-import type * as UI from '../../ui/legacy/legacy.js';
+import * as UI from '../../ui/legacy/legacy.js';
 
 import {ElementsTreeOutline} from './ElementsTreeOutline.js';
 
@@ -75,6 +75,12 @@ export class Renderer implements UI.UIUtils.Renderer {
     if (options?.expand) {
       treeOutline.firstChild()?.expand();
     }
+    const dispatchDimensionChange = (): void => {
+      treeOutline.element.dispatchEvent(new CustomEvent('dimensionschanged'));
+    };
+    treeOutline.addEventListener(UI.TreeOutline.Events.ElementAttached, dispatchDimensionChange);
+    treeOutline.addEventListener(UI.TreeOutline.Events.ElementExpanded, dispatchDimensionChange);
+    treeOutline.addEventListener(UI.TreeOutline.Events.ElementCollapsed, dispatchDimensionChange);
     return {
       element: treeOutline.element,
       forceSelect: treeOutline.forceSelect.bind(treeOutline),

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

@@ -33,6 +33,7 @@ export enum RegisteredAdorners {
   SCROLL = 'scroll',
   SCROLL_SNAP = 'scroll-snap',
   SLOT = 'slot',
+  VIEW_SOURCE = 'view-source',
   STARTING_STYLE = 'starting-style',
   SUBGRID = 'subgrid',
   TOP_LAYER = 'top-layer',
@@ -129,6 +130,13 @@ export function getRegisteredAdorner(which: RegisteredAdorners): RegisteredAdorn
         enabledByDefault: true,
       };
     }
+    case RegisteredAdorners.VIEW_SOURCE: {
+      return {
+        name: 'view-source',
+        category: AdornerCategories.DEFAULT,
+        enabledByDefault: true,
+      };
+    }
   }
 }
 

package/front_end/panels/emulation/DeviceModeToolbar.ts

@@ -351,7 +351,9 @@ export class DeviceModeToolbar {
         MobileThrottling.ThrottlingManager.throttlingManager().createMobileThrottlingButton();
     this.throttlingConditionsItem.turnShrinkable();
     toolbar.appendToolbarItem(this.throttlingConditionsItem);
-    toolbar.appendToolbarItem(MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector());
+    const saveDataItem = MobileThrottling.ThrottlingManager.throttlingManager().createSaveDataOverrideSelector();
+    saveDataItem.turnShrinkable();
+    toolbar.appendToolbarItem(saveDataItem);
   }
 
   private appendDevicePositionItems(toolbar: UI.Toolbar.Toolbar): void {

package/front_end/panels/issues/AffectedResourcesView.ts

@@ -254,7 +254,6 @@ export abstract class AffectedResourcesView extends UI.TreeOutline.TreeElement {
     sourceCodeLocation.classList.add('affected-source-location');
     if (sourceLocation) {
       const maxLengthForDisplayedURLs = 40;  // Same as console messages.
-      // TODO(crbug.com/1108503): Add some mechanism to be able to add telemetry to this element.
       const linkifier = new Components.Linkifier.Linkifier(maxLengthForDisplayedURLs);
       const sourceAnchor = linkifier.linkifyScriptLocation(
           target || null, sourceLocation.scriptId || null, sourceLocation.url as Platform.DevToolsPath.UrlString,

package/front_end/panels/lighthouse/LighthousePanel.ts

@@ -104,6 +104,7 @@ export class LighthousePanel extends UI.Panel.Panel {
 
     this.renderToolbar();
     this.auditResultsElement = this.contentElement.createChild('div', 'lighthouse-results-container');
+    this.auditResultsElement.addEventListener('keydown', this.onKeyDown.bind(this));
     this.renderStartView();
 
     this.controller.recomputePageAuditability();
@@ -365,4 +366,13 @@ export class LighthousePanel extends UI.Panel.Panel {
     }
     return els;
   }
+
+  private onKeyDown(event: KeyboardEvent): void {
+    // The LHR's tool button is a toggle. When the user hits escape, the default behavior
+    // is to close the tool drawer. We want to prevent this behavior and instead let the
+    // LHR's tool button handle the event and close the tool's dropdown.
+    if (event.key === 'Escape' && this.auditResultsElement.querySelector('.lh-tools__button.lh-active')) {
+      event.handled = true;
+    }
+  }
 }

package/front_end/panels/lighthouse/lighthousePanel.css

@@ -19,9 +19,6 @@ button.view-trace {
   margin: 10px;
 }
 
-.lighthouse-results-container {
-  position: relative;
-}
 /** `window.opener` is null for windows opened from DevTools. This breaks
     the LH viewer app, so disable this feature. */
 
@@ -63,3 +60,49 @@ select.lighthouse-report {
 .lh-devtools .lh-element-screenshot__overlay {
   position: absolute;
 }
+
+.lighthouse-results-container {
+  position: relative;
+
+  :focus-visible {
+    outline: -webkit-focus-ring-color auto 1px;
+  }
+
+  .lh-tools__button {
+    height: var(--sys-size-9);
+    width: var(--sys-size-9);
+    min-width: var(--sys-size-9);
+
+    &:focus-visible {
+      border-radius: var(--sys-shape-corner-full);
+      outline: var(--sys-size-2) solid var(--sys-color-state-focus-ring);
+    }
+
+    &.lh-active + .lh-tools__dropdown {
+      clip: rect(-8px, 204px, 270px, -10px);  /* stylelint-disable-line property-no-deprecated */
+    }
+  }
+
+  .lh-tools__dropdown {
+    padding: var(--sys-size-5) 0;
+    border-radius: var(--sys-shape-corner-small);
+    box-shadow: var(--sys-elevation-level3);
+    top: 24px;
+
+    &:hover a:focus {
+      background-color: transparent;
+    }
+
+    a {
+      height: var(--sys-size-11);
+      padding: 0 var(--sys-size-8);
+      white-space: nowrap;
+      align-items: center;
+
+      &::before {
+        content: none;
+      }
+    }
+  }
+
+}

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -31,11 +31,11 @@ const UIStrings = {
   /**
    * @description A context menu item in the Network Log View Columns of the Network panel
    */
-  responseHeaders: 'Response Headers',
+  responseHeaders: 'Response headers',
   /**
    * @description A context menu item in the Network Log View Columns of the Network panel
    */
-  requestHeaders: 'Request Headers',
+  requestHeaders: 'Request headers',
   /**
    * @description Text in Network Log View Columns of the Network panel
    */
@@ -43,19 +43,19 @@ const UIStrings = {
   /**
    * @description Text for the start time of an activity
    */
-  startTime: 'Start Time',
+  startTime: 'Start time',
   /**
    * @description Text in Network Log View Columns of the Network panel
    */
-  responseTime: 'Response Time',
+  responseTime: 'Response time',
   /**
    * @description Text in Network Log View Columns of the Network panel
    */
-  endTime: 'End Time',
+  endTime: 'End time',
   /**
    * @description Text in Network Log View Columns of the Network panel
    */
-  totalDuration: 'Total Duration',
+  totalDuration: 'Total duration',
   /**
    * @description Text for the latency of a task
    */
@@ -99,7 +99,7 @@ const UIStrings = {
   /**
    * @description Text in Network Log View Columns of the Network panel
    */
-  remoteAddress: 'Remote Address',
+  remoteAddress: 'Remote address',
   /**
    * @description Text that refers to some types
    */
@@ -115,7 +115,7 @@ const UIStrings = {
   /**
    * @description Column header in the Network log view of the Network panel
    */
-  initiatorAddressSpace: 'Initiator Address Space',
+  initiatorAddressSpace: 'Initiator address space',
   /**
    * @description Text for web cookies
    */
@@ -147,7 +147,7 @@ const UIStrings = {
   /**
    * @description Text in Network Log View Columns of the Network panel
    */
-  remoteAddressSpace: 'Remote Address Space',
+  remoteAddressSpace: 'Remote address space',
   /**
    * @description Text to show whether a request is ad-related
    */

package/front_end/panels/network/RequestCookiesView.ts

@@ -1,20 +1,19 @@
 // Copyright 2011 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 * 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 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';
+import * as Lit from '../../ui/lit/lit.js';
 import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import requestCookiesViewStyles from './requestCookiesView.css.js';
+const {render, html} = Lit;
 
 const UIStrings = {
   /**
@@ -74,74 +73,108 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/network/RequestCookiesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
+interface ViewInput {
+  requestCookies: CookieTable.CookiesTable.CookiesTableData;
+  responseCookies: CookieTable.CookiesTable.CookiesTableData;
+  malformedResponseCookies: SDK.NetworkRequest.BlockedSetCookieWithReason[];
+  showFilteredOutCookies: boolean;
+  hasBlockedCookies: boolean;
+  gotCookies: boolean;
+  onShowFilteredOutCookiesChange: (checked: boolean) => void;
+  siteHasCookieInOtherPartition: boolean;
+}
+
+type ViewFunction = (input: ViewInput, output: undefined, target: HTMLElement) => void;
+
+export const DEFAULT_VIEW: ViewFunction = (input, _output, target) => {
+  // clang-format off
+  render(
+    html`
+    <style>${requestCookiesViewStyles}</style>
+    <style>${UI.inspectorCommonStyles}</style>
+    <div class="request-cookies-view">
+      ${input.gotCookies ? Lit.nothing : html`
+        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget, {
+          header: i18nString(UIStrings.thisRequestHasNoCookies)})}></devtools-widget>
+      `}
+
+      <div class=${input.requestCookies.cookies.length || input.hasBlockedCookies ? '' : 'hidden'}>
+        <span class="request-cookies-title" title=${i18nString(UIStrings.cookiesThatWereSentToTheServerIn)}>
+          ${i18nString(UIStrings.requestCookies)}
+        </span>
+        <devtools-checkbox
+          @change=${(e: Event) => input.onShowFilteredOutCookiesChange((e.target as HTMLInputElement).checked)}
+          .checked=${input.showFilteredOutCookies}>
+          ${i18nString(UIStrings.showFilteredOutRequestCookies)}
+        </devtools-checkbox>
+      </div>
+
+      <div class="cookies-panel-item ${!input.requestCookies.cookies.length && input.hasBlockedCookies ? '' : 'hidden'}">
+        ${i18nString(UIStrings.noRequestCookiesWereSent)}
+      </div>
+
+      ${input.requestCookies.cookies.length > 0 ? html`
+        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CookieTable.CookiesTable.CookiesTable, {
+          cookiesData: input.requestCookies,
+          inline: true
+        })} class="cookie-table cookies-panel-item"></devtools-widget>
+      ` : Lit.nothing}
+
+      <div class="cookies-panel-item site-has-cookies-in-other-partition ${input.siteHasCookieInOtherPartition ? '' : 'hidden'}">
+        ${uiI18n.getFormatLocalizedString(str_, UIStrings.siteHasCookieInOtherPartition, {
+          PH1: UI.XLink.XLink.create(
+            'https://developer.chrome.com/en/docs/privacy-sandbox/chips/', i18nString(UIStrings.learnMore), undefined,
+            undefined, 'learn-more'),})}
+      </div>
+
+      <div class="request-cookies-title ${input.responseCookies.cookies.length ? '' : 'hidden'}"
+        title=${i18nString(UIStrings.cookiesThatWereReceivedFromThe)}>
+          ${i18nString(UIStrings.responseCookies)}
+      </div>
+
+      ${input.responseCookies.cookies.length ? html`
+        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CookieTable.CookiesTable.CookiesTable, {
+          cookiesData: input.responseCookies,
+          inline: true })} class="cookie-table cookies-panel-item"></devtools-widget>
+      ` : Lit.nothing}
+
+      <div class="request-cookies-title ${input.malformedResponseCookies.length ? '' : 'hidden'}" title=${i18nString(UIStrings.cookiesThatWereReceivedFromTheServer)}>
+        ${i18nString(UIStrings.malformedResponseCookies)}
+      </div>
+
+      <div class=${input.malformedResponseCookies.length ? '' : 'hidden'}>
+        ${input.malformedResponseCookies.map(malformedCookie => html`
+          <span class="cookie-line source-code" title=${getMalformedCookieTooltip(malformedCookie)}>
+            <devtools-icon class="cookie-warning-icon small" .name=${'cross-circle-filled'}></devtools-icon>
+            ${malformedCookie.cookieLine}
+          </span>
+        `)}
+      </div>
+    </div>
+  `,
+  target);
+  // clang-format on
+};
+
+function getMalformedCookieTooltip(malformedCookie: SDK.NetworkRequest.BlockedSetCookieWithReason): string {
+  if (malformedCookie.blockedReasons.includes(Protocol.Network.SetCookieBlockedReason.NameValuePairExceedsMaxSize)) {
+    return SDK.NetworkRequest.setCookieBlockedReasonToUiString(
+        Protocol.Network.SetCookieBlockedReason.NameValuePairExceedsMaxSize);
+  }
+  return SDK.NetworkRequest.setCookieBlockedReasonToUiString(Protocol.Network.SetCookieBlockedReason.SyntaxError);
+}
+
 export class RequestCookiesView extends UI.Widget.Widget {
   private request: SDK.NetworkRequest.NetworkRequest;
   private readonly showFilteredOutCookiesSetting: Common.Settings.Setting<boolean>;
-  private readonly emptyWidget: UI.EmptyWidget.EmptyWidget;
-  private readonly requestCookiesTitle: HTMLElement;
-  private readonly requestCookiesEmpty: HTMLElement;
-  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;
+  private readonly view: ViewFunction;
 
-  constructor(request: SDK.NetworkRequest.NetworkRequest) {
+  constructor(request: SDK.NetworkRequest.NetworkRequest, view: ViewFunction = DEFAULT_VIEW) {
     super({jslog: `${VisualLogging.pane('cookies').track({resize: true})}`});
-    this.registerRequiredCSS(requestCookiesViewStyles);
-
-    this.element.classList.add('request-cookies-view');
-
     this.request = request;
     this.showFilteredOutCookiesSetting = Common.Settings.Settings.instance().createSetting(
         'show-filtered-out-request-cookies', /* defaultValue */ false);
-
-    this.emptyWidget = new UI.EmptyWidget.EmptyWidget(i18nString(UIStrings.thisRequestHasNoCookies), '');
-    this.emptyWidget.show(this.element);
-
-    this.requestCookiesTitle = this.element.createChild('div');
-    const titleText = this.requestCookiesTitle.createChild('span', 'request-cookies-title');
-    titleText.textContent = i18nString(UIStrings.requestCookies);
-    UI.Tooltip.Tooltip.install(titleText, i18nString(UIStrings.cookiesThatWereSentToTheServerIn));
-
-    const requestCookiesCheckbox = SettingsUI.SettingsUI.createSettingCheckbox(
-        i18nString(UIStrings.showFilteredOutRequestCookies), this.showFilteredOutCookiesSetting);
-    requestCookiesCheckbox.addEventListener('change', () => {
-      this.refreshRequestCookiesView();
-    });
-    this.requestCookiesTitle.appendChild(requestCookiesCheckbox);
-
-    this.requestCookiesEmpty = this.element.createChild('div', 'cookies-panel-item');
-    this.requestCookiesEmpty.textContent = i18nString(UIStrings.noRequestCookiesWereSent);
-
-    this.requestCookiesTable = new CookieTable.CookiesTable.CookiesTable(/* renderInline */ true);
-    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(
-        uiI18n.getFormatLocalizedString(str_, UIStrings.siteHasCookieInOtherPartition, {
-          PH1: UI.XLink.XLink.create(
-              'https://developer.chrome.com/en/docs/privacy-sandbox/chips/', i18nString(UIStrings.learnMore), undefined,
-              undefined, 'learn-more'),
-        }));
-
-    this.responseCookiesTitle = this.element.createChild('div', 'request-cookies-title');
-    this.responseCookiesTitle.textContent = i18nString(UIStrings.responseCookies);
-    this.responseCookiesTitle.title = i18nString(UIStrings.cookiesThatWereReceivedFromThe);
-
-    this.responseCookiesTable = new CookieTable.CookiesTable.CookiesTable(/* renderInline */ true);
-    this.responseCookiesTable.contentElement.classList.add('cookie-table', 'cookies-panel-item');
-    this.responseCookiesTable.show(this.element);
-
-    this.malformedResponseCookiesTitle = this.element.createChild('div', 'request-cookies-title');
-    this.malformedResponseCookiesTitle.textContent = i18nString(UIStrings.malformedResponseCookies);
-    UI.Tooltip.Tooltip.install(
-        this.malformedResponseCookiesTitle, i18nString(UIStrings.cookiesThatWereReceivedFromTheServer));
-
-    this.malformedResponseCookiesList = this.element.createChild('div');
+    this.view = view;
   }
 
   private getRequestCookies(): {
@@ -230,99 +263,50 @@ export class RequestCookiesView extends UI.Widget.Widget {
     return {responseCookies, responseCookieToBlockedReasons, responseCookieToExemptionReason, malformedResponseCookies};
   }
 
-  private refreshRequestCookiesView(): void {
+  override performUpdate(): void {
     if (!this.isShowing()) {
       return;
     }
-
-    const gotCookies = this.request.hasRequestCookies() || this.request.responseCookies.length;
-    if (gotCookies) {
-      this.emptyWidget.hideWidget();
-    } else {
-      this.emptyWidget.showWidget();
-    }
-
     const {requestCookies, requestCookieToBlockedReasons, requestCookieToExemptionReason} = this.getRequestCookies();
     const {responseCookies, responseCookieToBlockedReasons, responseCookieToExemptionReason, malformedResponseCookies} =
         this.getResponseCookies();
 
-    if (requestCookies.length) {
-      this.requestCookiesTitle.classList.remove('hidden');
-      this.requestCookiesEmpty.classList.add('hidden');
-      this.requestCookiesTable.showWidget();
-      this.requestCookiesTable.setCookies(
-          requestCookies, requestCookieToBlockedReasons, requestCookieToExemptionReason);
-
-    } else if (this.request.blockedRequestCookies().length) {
-      this.requestCookiesTitle.classList.remove('hidden');
-      this.requestCookiesEmpty.classList.remove('hidden');
-      this.requestCookiesTable.hideWidget();
-
-    } else {
-      this.requestCookiesTitle.classList.add('hidden');
-      this.requestCookiesEmpty.classList.add('hidden');
-      this.requestCookiesTable.hideWidget();
-    }
-
-    if (responseCookies.length) {
-      this.responseCookiesTitle.classList.remove('hidden');
-      this.responseCookiesTable.showWidget();
-      this.responseCookiesTable.setCookies(
-          responseCookies, responseCookieToBlockedReasons, responseCookieToExemptionReason);
-    } else {
-      this.responseCookiesTitle.classList.add('hidden');
-      this.responseCookiesTable.hideWidget();
-    }
-
-    if (malformedResponseCookies.length) {
-      this.malformedResponseCookiesTitle.classList.remove('hidden');
-      this.malformedResponseCookiesList.classList.remove('hidden');
-
-      this.malformedResponseCookiesList.removeChildren();
-      for (const malformedCookie of malformedResponseCookies) {
-        const listItem = this.malformedResponseCookiesList.createChild('span', 'cookie-line source-code');
-        const icon = new Icon();
-        icon.name = 'cross-circle-filled';
-        icon.classList.add('cookie-warning-icon', 'small');
-        listItem.appendChild(icon);
-        UI.UIUtils.createTextChild(listItem, malformedCookie.cookieLine);
-
-        if (malformedCookie.blockedReasons.includes(
-                Protocol.Network.SetCookieBlockedReason.NameValuePairExceedsMaxSize)) {
-          listItem.title = SDK.NetworkRequest.setCookieBlockedReasonToUiString(
-              Protocol.Network.SetCookieBlockedReason.NameValuePairExceedsMaxSize);
-        } else {
-          listItem.title =
-              SDK.NetworkRequest.setCookieBlockedReasonToUiString(Protocol.Network.SetCookieBlockedReason.SyntaxError);
-        }
-      }
-    } else {
-      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');
-    }
+    const input: ViewInput = {
+      gotCookies: this.request.hasRequestCookies() || this.request.responseCookies.length > 0,
+      requestCookies: {
+        cookies: requestCookies,
+        cookieToBlockedReasons: requestCookieToBlockedReasons,
+        cookieToExemptionReason: requestCookieToExemptionReason,
+      },
+      responseCookies: {
+        cookies: responseCookies,
+        cookieToBlockedReasons: responseCookieToBlockedReasons,
+        cookieToExemptionReason: responseCookieToExemptionReason,
+      },
+      malformedResponseCookies,
+      showFilteredOutCookies: this.showFilteredOutCookiesSetting.get(),
+      onShowFilteredOutCookiesChange: (checked: boolean) => {
+        this.showFilteredOutCookiesSetting.set(checked);
+        this.requestUpdate();
+      },
+      siteHasCookieInOtherPartition: this.request.siteHasCookieInOtherPartition(),
+      hasBlockedCookies: this.request.blockedRequestCookies().length > 0,
+    };
+
+    this.view(input, undefined, this.contentElement);
   }
 
   override wasShown(): void {
     super.wasShown();
-    this.request.addEventListener(
-        SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.refreshRequestCookiesView, this);
-    this.request.addEventListener(
-        SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.refreshRequestCookiesView, this);
+    this.request.addEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.requestUpdate, this);
+    this.request.addEventListener(SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.requestUpdate, this);
 
-    this.refreshRequestCookiesView();
+    this.requestUpdate();
   }
 
   override willHide(): void {
     super.willHide();
-    this.request.removeEventListener(
-        SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.refreshRequestCookiesView, this);
-    this.request.removeEventListener(
-        SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.refreshRequestCookiesView, this);
+    this.request.removeEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.requestUpdate, this);
+    this.request.removeEventListener(SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.requestUpdate, this);
   }
 }

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

@@ -86,11 +86,11 @@ const UIStrings = {
   /**
    * @description A context menu item in the Network Log View Columns of the Network panel
    */
-  responseHeaders: 'Response Headers',
+  responseHeaders: 'Response headers',
   /**
    * @description A context menu item in the Network Log View Columns of the Network panel
    */
-  earlyHintsHeaders: 'Early Hints Headers',
+  earlyHintsHeaders: 'Early hints headers',
   /**
    * @description Title text for a link to the Sources panel to the file containing the header override definitions
    */