chrome-devtools-frontend 1.0.1575635 → 1.0.1576915

package/front_end/panels/application/DeviceBoundSessionsView.ts

@@ -125,6 +125,10 @@ const UIStrings = {
    *@description Section header for details about an event.
    */
   eventDetails: 'Event details',
+  /**
+   *@description Accessible label for the main area containing session details.
+   */
+  sessionDetails: 'Session details',
   /**
    *@description Placeholder text when no row is selected in a table of events.
    */
@@ -576,7 +580,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
     const {key, inclusionRules, cookieCravings} = sessionAndEvents.session;
     sessionDetailsHtml = html`
         <devtools-report>
-          <devtools-report-section-header>${i18nString(UIStrings.sessionConfig)}</devtools-report-section-header>
+          <devtools-report-section-header role="heading" aria-level="2">${
+        i18nString(UIStrings.sessionConfig)}</devtools-report-section-header>
           <devtools-report-key>${i18nString(UIStrings.keySite)}</devtools-report-key>
           <devtools-report-value>${key.site}</devtools-report-value>
           <devtools-report-key>${i18nString(UIStrings.keyId)}</devtools-report-key>
@@ -590,7 +595,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
           <devtools-report-value>${sessionAndEvents.session.cachedChallenge || ''}</devtools-report-value>
           <devtools-report-key>${i18nString(UIStrings.allowedRefreshInitiators)}</devtools-report-key>
           <devtools-report-value>${sessionAndEvents.session.allowedRefreshInitiators.join(', ')}</devtools-report-value>
-          <devtools-report-section-header>${i18nString(UIStrings.scope)}</devtools-report-section-header>
+          <devtools-report-section-header role="heading" aria-level="2">${
+        i18nString(UIStrings.scope)}</devtools-report-section-header>
           <devtools-report-key>${i18nString(UIStrings.origin)}</devtools-report-key>
           <devtools-report-value>${inclusionRules.origin}</devtools-report-value>
           <devtools-report-key>${i18nString(UIStrings.includeSite)}</devtools-report-key>
@@ -599,13 +605,14 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
         ${
         inclusionRules.urlRules.length > 0 ? html`
           <div class="device-bound-session-grid-wrapper">
-            <devtools-data-grid class="device-bound-session-url-rules-grid" striped inline>
+            <devtools-data-grid class="device-bound-session-url-rules-grid" striped inline name=${
+                                                 i18nString(UIStrings.scope)}>
               <table>
                 <thead>
                   <tr>
-                    <th id="should-include" weight="1" sortable>${i18nString(UIStrings.ruleType)}</th>
-                    <th id="host-pattern" weight="2" sortable>${i18nString(UIStrings.ruleHostPattern)}</th>
-                    <th id="path-prefix" weight="2" sortable>${i18nString(UIStrings.rulePathPrefix)}</th>
+                    <th id="should-include" sortable>${i18nString(UIStrings.ruleType)}</th>
+                    <th id="host-pattern" sortable>${i18nString(UIStrings.ruleHostPattern)}</th>
+                    <th id="path-prefix" sortable>${i18nString(UIStrings.rulePathPrefix)}</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -622,22 +629,22 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
           </div>
         ` :
                                              nothing}
-        <devtools-report-section-header>${i18nString(UIStrings.cookieCravings)}</devtools-report-section-header>
+        <devtools-report-section-header role="heading" aria-level="2">${
+        i18nString(UIStrings.cookieCravings)}</devtools-report-section-header>
         ${
         cookieCravings.length > 0 ? html`
           <div class="device-bound-session-grid-wrapper">
-            <devtools-data-grid class="device-bound-session-cookie-cravings-grid" striped inline>
+            <devtools-data-grid class="device-bound-session-cookie-cravings-grid" striped inline name=${
+                                        i18nString(UIStrings.cookieCravings)}>
               <table>
                 <thead>
                   <tr>
-                    <th id="name" weight="2" sortable>${i18nString(UIStrings.name)}</th>
-                    <th id="domain" weight="2" sortable>${i18n.i18n.lockedString('Domain')}</th>
-                    <th id="path" weight="2" sortable>${i18n.i18n.lockedString('Path')}</th>
-                    <th id="secure" type="boolean" align="center" weight="1" sortable>${
-                                        i18n.i18n.lockedString('Secure')}</th>
-                    <th id="http-only" type="boolean" align="center" weight="1" sortable>${
-                                        i18n.i18n.lockedString('HttpOnly')}</th>
-                    <th id="same-site" weight="1" sortable>${i18n.i18n.lockedString('SameSite')}</th>
+                    <th id="name" sortable>${i18nString(UIStrings.name)}</th>
+                    <th id="domain" sortable>${i18n.i18n.lockedString('Domain')}</th>
+                    <th id="path" sortable>${i18n.i18n.lockedString('Path')}</th>
+                    <th id="secure" type="boolean" align="center" sortable>${i18n.i18n.lockedString('Secure')}</th>
+                    <th id="http-only" type="boolean" align="center" sortable>${i18n.i18n.lockedString('HttpOnly')}</th>
+                    <th id="same-site" sortable>${i18n.i18n.lockedString('SameSite')}</th>
                   </tr>
                 </thead>
                 <tbody>
@@ -660,27 +667,28 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
   }
   const events = [...sessionAndEvents.eventsById.values()];
   const eventsHtml = html`
-      <devtools-report-section-header>${i18nString(UIStrings.events)}</devtools-report-section-header>
+      <devtools-report-section-header role="heading" aria-level="2">${
+      i18nString(UIStrings.events)}</devtools-report-section-header>
           ${
       events.length > 0 && onEventRowSelected ?
           html`
             <div class="device-bound-session-grid-wrapper">
-                <devtools-data-grid class="device-bound-session-events-grid" striped inline ${
-              Directives.ref((el?: Element) => {
-                if (!el || !(el instanceof HTMLElement)) {
-                  return;
-                }
-                const grid = el as HTMLElement & {deselectRow(): void};
-                if (!selectedEvent) {
-                  grid.deselectRow();
-                }
-              })}>
+                <devtools-data-grid class="device-bound-session-events-grid" striped inline name=${
+              i18nString(UIStrings.events)} ${Directives.ref((el?: Element) => {
+            if (!el || !(el instanceof HTMLElement)) {
+              return;
+            }
+            const grid = el as HTMLElement & {deselectRow(): void};
+            if (!selectedEvent) {
+              grid.deselectRow();
+            }
+          })}>
                 <table>
                   <thead>
                     <tr>
-                      <th id="type" weight="1" sortable>${i18nString(UIStrings.type)}</th>
-                      <th id="timestamp" weight="2" sortable>${i18nString(UIStrings.timestamp)}</th>
-                      <th id="details" weight="2" sortable>${i18nString(UIStrings.result)}</th>
+                      <th id="type" sortable>${i18nString(UIStrings.type)}</th>
+                      <th id="timestamp" sortable>${i18nString(UIStrings.timestamp)}</th>
+                      <th id="details" sortable>${i18nString(UIStrings.result)}</th>
                     </tr>
                   </thead>
                   <tbody>${events.map(({event, timestamp}) => html`
@@ -764,7 +772,8 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
     ` :
       html`<div class="device-bound-session-no-event-details">${i18nString(UIStrings.selectEventToViewDetails)}</div>`;
   const eventDetailsHtml = html`
-      <devtools-report-section-header>${i18nString(UIStrings.eventDetails)}</devtools-report-section-header>
+      <devtools-report-section-header role="heading" aria-level="2">${
+      i18nString(UIStrings.eventDetails)}</devtools-report-section-header>
       ${eventDetailsContentHtml}
   `;
 
@@ -774,11 +783,13 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
         <style>${deviceBoundSessionsViewStyles}</style>
         ${toolbarHtml}
         <devtools-split-view sidebar-position="second">
-          <div slot="main" class="device-bound-session-view-wrapper">
+          <div slot="main" class="device-bound-session-view-wrapper" role="region" aria-label=${
+          i18nString(UIStrings.sessionDetails)}>
             ${sessionDetailsHtml || nothing}
             ${eventsHtml}
           </div>
-          <div slot="sidebar" class="device-bound-session-sidebar">
+          <div slot="sidebar" class="device-bound-session-sidebar" role="region" aria-label=${
+          i18nString(UIStrings.eventDetails)}>
             ${eventDetailsHtml}
           </div>
         </devtools-split-view>`,

package/front_end/panels/application/ServiceWorkerUpdateCycleView.ts

@@ -180,6 +180,7 @@ export class ServiceWorkerUpdateCycleView {
       const tr = this.tableElement.createChild('tr', 'service-worker-update-timeline');
       tr.setAttribute('jslog', `${VisualLogging.treeItem('update-timeline').track({
                         click: true,
+                        resize: true,
                         keydown: 'ArrowLeft|ArrowRight|ArrowUp|ArrowDown|Enter|Space',
                       })}`);
       this.rows.push(tr);

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

@@ -353,7 +353,7 @@ function renderFramesPerReason(frames: string[]|undefined): LitTemplate {
   }
   const rows = [html`<div>${i18nString(UIStrings.framesPerIssue, {n: frames.length})}</div>`];
   rows.push(...frames.map(url => html`<div class="text-ellipsis" title=${url}
-    jslog=${VisualLogging.treeItem()}>${url}</div>`));
+    jslog=${VisualLogging.treeItem().track({resize: true})}>${url}</div>`));
   return html`
       <div class="details-list"
       jslog=${VisualLogging.tree('frames-per-issue')}>
@@ -361,7 +361,9 @@ function renderFramesPerReason(frames: string[]|undefined): LitTemplate {
     rows,
     title: i18nString(UIStrings.framesPerIssue, {n: frames.length}),
   } as ExpandableList.ExpandableList.ExpandableListData}
-        jslog=${VisualLogging.treeItem()}></devtools-expandable-list>
+        jslog=${VisualLogging.treeItem().track({
+    resize: true
+  })}></devtools-expandable-list>
       </div>
     `;
 }

package/front_end/panels/application/deviceBoundSessionsView.css

@@ -4,7 +4,7 @@
  * found in the LICENSE file.
  */
 .device-bound-session-grid-wrapper {
-  padding: 0 20px 5px;
+  margin: 0 20px 5px;
 }
 
 .device-bound-session-grid-wrapper devtools-data-grid {

package/front_end/panels/autofill/AutofillView.ts

@@ -144,7 +144,7 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: ViewOutput, target: HTMLE
       // clang-format off
       return html`
         <span class=${spanClasses}
-              jslog=${VisualLogging.item('matched-address-item').track({hover: true})}
+              jslog=${VisualLogging.item('matched-address-item').track({hover: true, resize: true})}
               @mouseenter=${() => input.onHighlightMatchesInAddress(startIndex)}
               @mouseleave=${input.onClearHighlightedMatches}>
           ${templateLines}

package/front_end/panels/browser_debugger/XHRBreakpointsSidebarPane.ts

@@ -238,6 +238,7 @@ export class XHRBreakpointsSidebarPane extends UI.Widget.VBox implements UI.Cont
     listItemElement.setAttribute('jslog', `${VisualLogging.item().track({
                                    click: true,
                                    dblclick: true,
+                                   resize: true,
                                    keydown: 'ArrowUp|ArrowDown|PageUp|PageDown|Enter|Space',
                                  })}`);
     return listItemElement;

package/front_end/panels/common/AiCodeGenerationUpgradeDialog.ts

@@ -55,9 +55,10 @@ const UIStringsNotTranslate = {
 const lockedString = i18n.i18n.lockedString;
 
 export class AiCodeGenerationUpgradeDialog {
-  static show({noLogging}: {noLogging: boolean}): void {
+  static show({noLogging}: {noLogging: boolean}): Promise<boolean> {
     const dialog = new UI.Dialog.Dialog();
     dialog.setAriaLabel(lockedString(UIStringsNotTranslate.codeCompletionJustGotBetter));
+    const result = Promise.withResolvers<boolean>();
     // clang-format off
     Lit.render(html`
       <div class="ai-code-generation-upgrade-dialog">
@@ -96,7 +97,8 @@ export class AiCodeGenerationUpgradeDialog {
           <div class="right-buttons">
             <devtools-button
               @click=${() => {
-                void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
+                  result.resolve(true);
+                  void UI.ViewManager.ViewManager.instance().showView('chrome-ai');
                 }}
               jslogcontext="ai-code-generation-upgrade-dialog.manage-in-settings"
               .variant=${Buttons.Button.Variant.OUTLINED}
@@ -105,6 +107,7 @@ export class AiCodeGenerationUpgradeDialog {
             </devtools-button>
             <devtools-button
               @click=${() => {
+                  result.resolve(true);
                   dialog.hide();
                 }}
               jslogcontext="ai-code-generation-upgrade-dialog.continue"
@@ -117,13 +120,18 @@ export class AiCodeGenerationUpgradeDialog {
     // clang-format on
 
     dialog.setOutsideClickCallback(ev => {
-      ev.consume(true);  // true = preventDefault()
-      dialog.hide();
+      ev.consume(true);
+    });
+
+    dialog.setOnHideCallback(() => {
+      result.resolve(false);
     });
 
     dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.MEASURE_CONTENT);
     dialog.setDimmed(true);
     dialog.show();
+
+    return result.promise;
   }
 
   private constructor() {

package/front_end/panels/common/GeminiRebrandPromoDialog.ts

@@ -81,7 +81,7 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
             .variant=${Buttons.Button.Variant.ICON}
             .size=${Buttons.Button.Size.REGULAR}
             .title=${i18nString(UIStrings.dismiss)}
-            jslog=${VisualLogging.close().track({click: true})}
+            jslog=${VisualLogging.close().track({click: true}).context('gemini-promo-dismiss')}
             @click=${() => input.onCancelClick()}
           ></devtools-button>
         </div>
@@ -111,11 +111,11 @@ export const DEFAULT_VIEW: View = (input, _output, target): void => {
       <div class="buttons">
         <devtools-button
           .variant=${Buttons.Button.Variant.OUTLINED}
-          .jslogContext=${'cancel'}
+          jslog=${VisualLogging.close().track({click: true}).context('gemini-promo-dismiss')}
           @click=${input.onCancelClick}>${i18nString(UIStrings.dismiss)}</devtools-button>
         <devtools-button
           .variant=${Buttons.Button.Variant.PRIMARY}
-          .jslogContext=${'get-started'}
+          .jslogContext=${'gemini-promo-get-started'}
           @click=${input.onGetStartedClick}>${i18nString(UIStrings.getStarted)}</devtools-button>
       </div>
     `,
@@ -160,7 +160,7 @@ export class GeminiRebrandPromoDialog extends UI.Widget.VBox {
   }
 
   static show(): void {
-    const dialog = new UI.Dialog.Dialog('gemini-rebranding-dialog');
+    const dialog = new UI.Dialog.Dialog('gemini-promo-dialog');
     dialog.setAriaLabel(i18nString(UIStrings.dialogAriaLabel));
     dialog.setMaxContentSize(new Geometry.Size(384, 500));
     dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SET_EXACT_WIDTH_MAX_HEIGHT);
@@ -181,7 +181,7 @@ export class GeminiRebrandPromoDialog extends UI.Widget.VBox {
     }
 
     const setting = Common.Settings.Settings.instance().createSetting<boolean>(
-        'gemini-rebranding-dialog-shown', false, Common.Settings.SettingStorageType.SYNCED);
+        'gemini-promo-dialog-shown', false, Common.Settings.SettingStorageType.SYNCED);
     if (setting.get()) {
       return;
     }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -1457,6 +1457,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.elementInternal.className = 'console-message-wrapper';
     this.elementInternal.setAttribute('jslog', `${VisualLogging.item('console-message').track({
                                         click: true,
+                                        resize: true,
                                         keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Enter|Space|Home|End',
                                       })}`);
     this.elementInternal.removeChildren();

package/front_end/panels/elements/ElementsTreeElement.ts

@@ -680,6 +680,7 @@ export class ElementsTreeElement extends UI.TreeOutline.TreeElement {
     this.listItemElement.setAttribute(
         'jslog', `${VisualLogging.treeItem().parent('elementsTreeOutline').track({
           keydown: 'ArrowUp|ArrowDown|ArrowLeft|ArrowRight|Backspace|Delete|Enter|Space|Home|End',
+          resize: true,
           drag: true,
           click: true,
         })}`);

package/front_end/panels/elements/LayoutPane.ts

@@ -228,26 +228,27 @@ const DEFAULT_VIEW: View = (input, output, target) => {
       event.preventDefault();
     }
   };
+  // clang-format off
   const renderElement = (element: LayoutElement): Lit.LitTemplate => html`<div
           class="element"
-          jslog=${VisualLogging.item()}>
+          jslog=${VisualLogging.item().track({resize: true})}>
         <devtools-checkbox
           data-element="true"
           class="checkbox-label"
           .checked=${element.enabled}
           @change=${(e: Event) => input.onElementToggle(element, e)}
-          jslog=${VisualLogging.toggle().track({
-    click: true
-  })}>
+          jslog=${VisualLogging.toggle().track({click: true, resize: true })}>
           <span
               class="node-text-container"
               data-label="true"
               @mouseenter=${(e: MouseEvent) => input.onMouseEnter(element, e)}
               @mouseleave=${(e: MouseEvent) => input.onMouseLeave(element, e)}>
             <devtools-node-text .data=${{
-    nodeId: element.domId, nodeTitle: element.name, nodeClasses: element.domClasses,
-  }
-  }></devtools-node-text>
+                nodeId: element.domId,
+                nodeTitle: element.name,
+                nodeClasses: element.domClasses
+              }}>
+            </devtools-node-text>
           </span>
         </devtools-checkbox>
         <label

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

@@ -303,7 +303,7 @@ export class ElementsBreadcrumbs extends HTMLElement {
                   data-crumb="true"
                 >
                   <a href="#" draggable=false class="crumb-link"
-                    jslog=${VisualLogging.item().track({click:true})}
+                    jslog=${VisualLogging.item().track({click:true, resize:true})}
                     @click=${this.#onCrumbClick(crumb.node)}
                     @mousemove=${this.#onCrumbMouseMove(crumb.node)}
                     @mouseleave=${this.#onCrumbMouseLeave(crumb.node)}

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

@@ -194,7 +194,8 @@ export class StylePropertyEditor extends HTMLElement {
     return html`
       <button title=${title}
               class=${classes}
-              jslog=${VisualLogging.item().track({click: true}).context(`${propertyName}-${propertyValue}`)}
+              jslog=${
+        VisualLogging.item().track({click: true, resize: true}).context(`${propertyName}-${propertyValue}`)}
               @click=${() => this.#onButtonClick(propertyName, propertyValue, selected)}>
         <devtools-icon style=${transform} name=${iconInfo.iconName}>
         </devtools-icon>

package/front_end/panels/lighthouse/LighthouseReportRenderer.ts

@@ -197,7 +197,7 @@ export class LighthouseReportRenderer {
         continue;
       }
 
-      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`)}`);
+      auditEl.setAttribute('jslog', `${VisualLogging.item(`lighthouse.audit.${id}`).track({resize: true})}`);
 
       let state: string|undefined;
       for (const className of auditEl.classList) {

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

@@ -60,7 +60,7 @@ function renderEndiannessSetting(
         data-endianness="true" @change=${(e: Event) => onEndiannessChanged((e.target as HTMLSelectElement).value as Endianness)}>
         ${[Endianness.LITTLE, Endianness.BIG].map(endianness => {
             return html`<option value=${endianness} .selected=${currentEndiannes === endianness}
-            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true})}>${
+            jslog=${VisualLogging.item(Platform.StringUtilities.toKebabCase(endianness)).track({click: true, resize: true})}>${
                 i18n.i18n.lockedString(endianness)}</option>`;
         })}
       </select>

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

@@ -104,7 +104,7 @@ export const DEFAULT_VIEW: View = (input: ViewInput, _output: undefined, target:
                     ${VALUE_TYPE_MODE_LIST.filter(x => isValidMode(type, x)).map(mode => {
                       return html`
                         <option value=${mode} .selected=${input.valueTypeModes.get(type) === mode}
-                                jslog=${VisualLogging.item(mode).track({click: true})}>${
+                                jslog=${VisualLogging.item(mode).track({click: true, resize: true})}>${
                           i18n.i18n.lockedString(mode)}
                         </option>`;
                     })}

package/front_end/panels/media/PlayerListView.ts

@@ -73,7 +73,7 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
           })}
                @click=${() => input.onPlayerClick(player.playerID)}
                @contextmenu=${(e: Event) => input.onPlayerContextMenu(player.playerID, e)}
-               jslog=${VisualLogging.item('player').track({click: true})}>
+               jslog=${VisualLogging.item('player').track({click: true, resize: true})}>
             <div class="player-entry-status-icon vbox">
               <div class="player-entry-status-icon-centering">
                 <devtools-icon name=${player.iconName}></devtools-icon>

package/front_end/panels/network/NetworkItemView.ts

@@ -21,6 +21,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import * as NetworkComponents from './components/components.js';
 import {EventSourceMessagesView} from './EventSourceMessagesView.js';
 import {RequestCookiesView} from './RequestCookiesView.js';
+import {RequestDeviceBoundSessionsView} from './RequestDeviceBoundSessionsView.js';
 import {RequestInitiatorView} from './RequestInitiatorView.js';
 import {RequestPayloadView} from './RequestPayloadView.js';
 import {RequestPreviewView} from './RequestPreviewView.js';
@@ -114,6 +115,17 @@ const UIStrings = {
    * @description Text for web cookies
    */
   cookies: 'Cookies',
+  /**
+   * @description Title of the Device Bound Sessions tab in the Network panel. A
+   * website may decide to create a session for a user, for example when the user
+   * logs in. They can use a protocol to make it a "device bound session". That
+   * means that when the session expires, it is only possible for it to be
+   * extended on the device it was created on. Thus the session is considered
+   * to be bound to that device. For more details on the protocol, see
+   * https://github.com/w3c/webappsec-dbsc/blob/main/README.md and
+   * https://w3c.github.io/webappsec-dbsc/.
+   */
+  deviceBoundSessions: 'Device bound sessions',
   /**
    * @description Text in Network Item View of the Network panel
    */
@@ -140,6 +152,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
   #payloadView: RequestPayloadView|null = null;
   readonly #responseView: RequestResponseView|undefined;
   #cookiesView: RequestCookiesView|null = null;
+  #deviceBoundSessionsView: RequestDeviceBoundSessionsView|null = null;
   #initialTab?: NetworkForward.UIRequestLocation.UIRequestTabs;
   readonly #firstTab: NetworkForward.UIRequestLocation.UIRequestTabs;
 
@@ -253,10 +266,10 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     super.wasShown();
     this.#request.addEventListener(SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.requestHeadersChanged, this);
     this.#request.addEventListener(
-        SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.maybeAppendCookiesPanel, this);
+        SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.maybeAppendCookieResponsePanels, this);
     this.#request.addEventListener(
         SDK.NetworkRequest.Events.TRUST_TOKEN_RESULT_ADDED, this.maybeShowErrorIconInTrustTokenTabHeader, this);
-    this.maybeAppendCookiesPanel();
+    this.maybeAppendCookieResponsePanels();
     this.maybeShowErrorIconInTrustTokenTabHeader();
 
     // Only select the initial tab the first time the view is shown after construction.
@@ -283,7 +296,7 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     this.#request.removeEventListener(
         SDK.NetworkRequest.Events.REQUEST_HEADERS_CHANGED, this.requestHeadersChanged, this);
     this.#request.removeEventListener(
-        SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.maybeAppendCookiesPanel, this);
+        SDK.NetworkRequest.Events.RESPONSE_HEADERS_CHANGED, this.maybeAppendCookieResponsePanels, this);
     this.#request.removeEventListener(
         SDK.NetworkRequest.Events.TRUST_TOKEN_RESULT_ADDED, this.maybeShowErrorIconInTrustTokenTabHeader, this);
   }
@@ -293,6 +306,11 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     void this.maybeAppendPayloadPanel();
   }
 
+  private maybeAppendCookieResponsePanels(): void {
+    this.maybeAppendCookiesPanel();
+    this.maybeAppendDeviceBoundSessionsPanel();
+  }
+
   private maybeAppendCookiesPanel(): void {
     const cookiesPresent = this.#request.hasRequestCookies() || this.#request.responseCookies.length > 0;
     console.assert(cookiesPresent || !this.#cookiesView, 'Cookies were introduced in headers and then removed!');
@@ -311,6 +329,17 @@ export class NetworkItemView extends UI.TabbedPane.TabbedPane {
     }
   }
 
+  private maybeAppendDeviceBoundSessionsPanel(): void {
+    const deviceBoundSessionsPresent = this.#request.getDeviceBoundSessionUsages().length > 0;
+    if (deviceBoundSessionsPresent && !this.#deviceBoundSessionsView) {
+      this.#deviceBoundSessionsView = new RequestDeviceBoundSessionsView(this.#request);
+      this.appendTab(
+          NetworkForward.UIRequestLocation.UIRequestTabs.DEVICE_BOUND_SESSIONS,
+          i18nString(UIStrings.deviceBoundSessions), this.#deviceBoundSessionsView,
+          i18nString(UIStrings.deviceBoundSessions));
+    }
+  }
+
   private async maybeAppendPayloadPanel(): Promise<void> {
     if (this.hasTab('payload')) {
       return;

package/front_end/panels/network/NetworkLogViewColumns.ts

@@ -409,7 +409,8 @@ export class NetworkLogViewColumns {
 
   private createWaterfallHeader(): void {
     this.waterfallHeaderElement = this.waterfallColumn.contentElement.createChild('div', 'network-waterfall-header');
-    this.waterfallHeaderElement.setAttribute('jslog', `${VisualLogging.tableHeader('waterfall').track({click: true})}`);
+    this.waterfallHeaderElement.setAttribute(
+        'jslog', `${VisualLogging.tableHeader('waterfall').track({click: true, resize: true})}`);
     this.waterfallHeaderElement.addEventListener('click', waterfallHeaderClicked.bind(this));
     this.waterfallHeaderElement.addEventListener('contextmenu', event => {
       const contextMenu = new UI.ContextMenu.ContextMenu(event);