chrome-devtools-frontend 1.0.1006768 → 1.0.1007307

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

@@ -23,10 +23,33 @@
   background-color: var(--legacy-focus-bg-color);
 }
 
+details[open] .header-count {
+  display: none;
+}
+
+details summary label {
+  display: none;
+}
+
+details[open] summary label {
+  display: inline-flex;
+  gap: 2px;
+}
+
+.raw-checkbox-container {
+  float: right;
+}
+
+details summary input {
+  vertical-align: middle;
+}
+
 .row {
   display: flex;
   line-height: 20px;
-  padding-left: 25px;
+  padding-left: 8px;
+  gap: 12px;
+  user-select: text;
 }
 
 .row:first-of-type {
@@ -39,14 +62,13 @@
 
 .header-name {
   color: var(--color-primary);
-  font-weight: bold;
+  font-weight: 500;
   width: 160px;
   flex-shrink: 0;
 }
 
 .header-value {
   word-break: break-all;
-  user-select: text;
 }
 
 .green-circle::before,
@@ -76,3 +98,9 @@
 .status-with-comment {
   color: var(--color-text-secondary);
 }
+
+.raw-headers {
+  font-family: var(--source-code-font-family);
+  font-size: var(--source-code-font-size);
+  white-space: pre-wrap;
+}

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

@@ -44,6 +44,14 @@ const UIStrings = {
   */
   general: 'General',
   /**
+  *@description Label for a checkbox to switch between raw and parsed headers
+  */
+  raw: 'Raw',
+  /**
+  *@description Text in Request Headers View of the Network panel
+  */
+  requestHeaders: 'Request Headers',
+  /**
   *@description The URL of a request
   */
   requestUrl: 'Request URL',
@@ -52,6 +60,10 @@ const UIStrings = {
   */
   requestMethod: 'Request Method',
   /**
+  *@description A context menu item in the Network Log View Columns of the Network panel
+  */
+  responseHeaders: 'Response Headers',
+  /**
   *@description HTTP response code
   */
   statusCode: 'Status Code',
@@ -103,6 +115,8 @@ export class RequestHeadersComponent extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-request-headers`;
   readonly #shadow = this.attachShadow({mode: 'open'});
   #request?: Readonly<SDK.NetworkRequest.NetworkRequest>;
+  #showResponseHeadersText = false;
+  #showRequestHeadersText = false;
 
   set data(data: RequestHeadersComponentData) {
     this.#request = data.request;
@@ -120,10 +134,84 @@ export class RequestHeadersComponent extends HTMLElement {
     // clang-format off
     render(html`
       ${this.#renderGeneralSection()}
+      ${this.#renderResponseHeaders()}
+      ${this.#renderRequestHeaders()}
     `, this.#shadow, {host: this});
     // clang-format on
   }
 
+  #renderResponseHeaders(): LitHtml.TemplateResult {
+    assertNotNullOrUndefined(this.#request);
+
+    const toggleShowRaw = (): void => {
+      this.#showResponseHeadersText = !this.#showResponseHeadersText;
+      this.#render();
+    };
+
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    return html`
+      <${Category.litTagName}
+        @togglerawevent=${toggleShowRaw}
+        .data=${{
+          name: 'responseHeaders',
+          title: i18nString(UIStrings.responseHeaders),
+          headerCount: this.#request.sortedResponseHeaders.length,
+          checked: this.#request.responseHeadersText ? this.#showResponseHeadersText : undefined,
+        } as CategoryData}
+        aria-label=${i18nString(UIStrings.responseHeaders)}
+      >
+        ${this.#showResponseHeadersText ? html`
+          <div class="row raw-headers">${this.#request.responseHeadersText.trim()}</div>
+        ` : html`
+          ${this.#request.sortedResponseHeaders.map(header => html`
+            <div class="row">
+              <div class="header-name">${header.name}:</div>
+              <div class="header-value">${header.value}</div>
+            </div>
+          `)}
+        `}
+      </${Category.litTagName}>
+    `;
+  }
+
+  #renderRequestHeaders(): LitHtml.TemplateResult {
+    assertNotNullOrUndefined(this.#request);
+
+    const toggleShowRaw = (): void => {
+      this.#showRequestHeadersText = !this.#showRequestHeadersText;
+      this.#render();
+    };
+
+    const requestHeadersText = this.#request.requestHeadersText();
+
+    // Disabled until https://crbug.com/1079231 is fixed.
+    // clang-format off
+    return html`
+      <${Category.litTagName}
+        @togglerawevent=${toggleShowRaw}
+        .data=${{
+          name: 'requestHeaders',
+          title: i18nString(UIStrings.requestHeaders),
+          headerCount: this.#request.requestHeaders().length,
+          checked: requestHeadersText? this.#showRequestHeadersText : undefined,
+        } as CategoryData}
+        aria-label=${i18nString(UIStrings.requestHeaders)}
+      >
+        ${(this.#showRequestHeadersText && requestHeadersText) ? html`
+          <div class="row raw-headers">${requestHeadersText.trim()}</div>
+        ` : html`
+          ${this.#request.requestHeaders().map(header => html`
+            <div class="row">
+              <div class="header-name">${header.name}:</div>
+              <div class="header-value">${header.value}</div>
+            </div>
+          `)}
+        `}
+      </${Category.litTagName}>
+    `;
+  }
+
   #renderGeneralSection(): LitHtml.TemplateResult {
     assertNotNullOrUndefined(this.#request);
 
@@ -159,7 +247,10 @@ export class RequestHeadersComponent extends HTMLElement {
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`
-      <${Category.litTagName} .data=${{name: 'general', title: i18nString(UIStrings.general)} as CategoryData}>
+      <${Category.litTagName}
+        .data=${{name: 'general', title: i18nString(UIStrings.general)} as CategoryData}
+        aria-label=${i18nString(UIStrings.general)}
+      >
         <div class="row">
           <div class="header-name">${i18nString(UIStrings.requestUrl)}:</div>
           <div class="header-value">${this.#request.url()}</div>
@@ -192,9 +283,19 @@ export class RequestHeadersComponent extends HTMLElement {
   }
 }
 
+export class ToggleRawHeadersEvent extends Event {
+  static readonly eventName = 'togglerawevent';
+
+  constructor() {
+    super(ToggleRawHeadersEvent.eventName, {});
+  }
+}
+
 export interface CategoryData {
   name: string;
   title: Common.UIString.LocalizedString;
+  headerCount?: number;
+  checked?: boolean;
 }
 
 export class Category extends HTMLElement {
@@ -202,6 +303,8 @@ export class Category extends HTMLElement {
   readonly #shadow = this.attachShadow({mode: 'open'});
   #expandedSetting?: Common.Settings.Setting<boolean>;
   #title: Common.UIString.LocalizedString = Common.UIString.LocalizedEmptyString;
+  #headerCount?: number = undefined;
+  #checked: boolean|undefined = undefined;
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [requestHeadersViewStyles];
@@ -211,15 +314,35 @@ export class Category extends HTMLElement {
     this.#title = data.title;
     this.#expandedSetting =
         Common.Settings.Settings.instance().createSetting('request-info-' + data.name + '-category-expanded', true);
+    this.#headerCount = data.headerCount;
+    this.#checked = data.checked;
     this.#render();
   }
 
+  #onCheckboxToggle(): void {
+    this.dispatchEvent(new ToggleRawHeadersEvent());
+  }
+
   #render(): void {
+    const isOpen = this.#expandedSetting ? this.#expandedSetting.get() : true;
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     render(html`
-      <details ?open=${this.#expandedSetting ? this.#expandedSetting.get() : true} @toggle=${this.#onToggle}>
-        <summary class="header" @keydown=${this.#onSummaryKeyDown}>${this.#title}</summary>
+      <details ?open=${isOpen} @toggle=${this.#onToggle}>
+        <summary class="header" @keydown=${this.#onSummaryKeyDown}>
+          ${this.#title}${this.#headerCount ?
+            html`<span class="header-count"> (${this.#headerCount})</span>` :
+            LitHtml.nothing
+          }
+          ${this.#checked !== undefined ? html`
+            <span class="raw-checkbox-container">
+              <label>
+                <input type="checkbox" .checked=${this.#checked} @change=${this.#onCheckboxToggle} />
+                ${i18nString(UIStrings.raw)}
+              </label>
+            </span>
+          ` : LitHtml.nothing}
+        </summary>
         <slot></slot>
       </details>
     `, this.#shadow, {host: this});