chrome-devtools-frontend 1.0.1006768 → 1.0.1007846

package/front_end/panels/lighthouse/LighthouseStartViewFR.ts

@@ -44,60 +44,22 @@ const str_ = i18n.i18n.registerUIStrings('panels/lighthouse/LighthouseStartViewF
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
 export class StartViewFR extends StartView {
-  protected render(): void {
-    super.render();
-    this.refresh();
-  }
-
-  private createStartButton(mode: string): HTMLButtonElement {
-    let buttonLabel: Platform.UIString.LocalizedString;
-    let callback: () => void;
+  changeFormMode?: (mode: string) => void;
 
-    if (mode === 'timespan') {
-      buttonLabel = i18nString(UIStrings.startTimespan);
-      callback = (): void => {
-        this.controller.dispatchEventToListeners(
-            Events.RequestLighthouseTimespanStart,
-            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
-        );
-      };
-    } else if (mode === 'snapshot') {
-      buttonLabel = i18nString(UIStrings.analyzeSnapshot);
-      callback = (): void => {
-        this.controller.dispatchEventToListeners(
-            Events.RequestLighthouseStart,
-            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
-        );
-      };
-    } else {
-      buttonLabel = i18nString(UIStrings.analyzeNavigation);
-      callback = (): void => {
-        this.controller.dispatchEventToListeners(
-            Events.RequestLighthouseStart,
-            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
-        );
-      };
-    }
-
-    return UI.UIUtils.createTextButton(
-        buttonLabel,
-        callback,
-        /* className */ '',
-        /* primary */ true,
-    );
-  }
+  protected render(): void {
+    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.legacy_navigation', this.settingsToolbarInternal);
+    this.populateRuntimeSettingAsToolbarCheckbox('lighthouse.clear_storage', this.settingsToolbarInternal);
+    this.populateRuntimeSettingAsToolbarDropdown('lighthouse.throttling', this.settingsToolbarInternal);
 
-  refresh(): void {
     const {mode} = this.controller.getFlags();
-
-    this.startButton = this.createStartButton(mode);
+    this.populateStartButton(mode);
 
     const fragment = UI.Fragment.Fragment.build`
 <form class="lighthouse-start-view-fr">
   <header class="hbox">
     <div class="lighthouse-logo"></div>
     <div class="lighthouse-title">${i18nString(UIStrings.generateLighthouseReport)}</div>
-    <div class="lighthouse-start-button-container">${this.startButton}</div>
+    <div class="lighthouse-start-button-container" $="start-button-container">${this.startButton}</div>
   </header>
   <div $="help-text" class="lighthouse-help-text hidden"></div>
   <div class="lighthouse-options hbox">
@@ -127,16 +89,75 @@ export class StartViewFR extends StartView {
     this.helpText = fragment.$('help-text');
     this.warningText = fragment.$('warning-text');
 
-    // The previous radios are removed later and don't exist on the new fragment yet.
-    this.populateFormControls(fragment, mode);
-
-    // Populate the Lighthouse mode
     const modeFormElements = fragment.$('mode-form-elements');
     this.populateRuntimeSettingAsRadio('lighthouse.mode', i18nString(UIStrings.mode), modeFormElements);
 
+    // The previous radios are removed later and don't exist on the new fragment yet.
+    this.populateFormControls(fragment, mode);
+
     this.contentElement.textContent = '';
     this.contentElement.append(fragment.element());
 
+    this.refresh();
+  }
+
+  private populateStartButton(mode: string): void {
+    let buttonLabel: Platform.UIString.LocalizedString;
+    let callback: () => void;
+
+    if (mode === 'timespan') {
+      buttonLabel = i18nString(UIStrings.startTimespan);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseTimespanStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else if (mode === 'snapshot') {
+      buttonLabel = i18nString(UIStrings.analyzeSnapshot);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    } else {
+      buttonLabel = i18nString(UIStrings.analyzeNavigation);
+      callback = (): void => {
+        this.controller.dispatchEventToListeners(
+            Events.RequestLighthouseStart,
+            /* keyboardInitiated */ this.startButton.matches(':focus-visible'),
+        );
+      };
+    }
+
+    const startButtonContainer = this.contentElement.querySelector('.lighthouse-start-button-container');
+    if (startButtonContainer) {
+      startButtonContainer.textContent = '';
+      this.startButton = UI.UIUtils.createTextButton(
+          buttonLabel,
+          callback,
+          /* className */ '',
+          /* primary */ true,
+      );
+      startButtonContainer.append(this.startButton);
+    }
+  }
+
+  refresh(): void {
+    const {mode} = this.controller.getFlags();
+    this.populateStartButton(mode);
+
+    for (const {checkbox, preset} of this.checkboxes) {
+      if (preset.supportedModes.includes(mode)) {
+        checkbox.setEnabled(true);
+        checkbox.setIndeterminate(false);
+      } else {
+        checkbox.setEnabled(false);
+        checkbox.setIndeterminate(true);
+      }
+    }
+
     // Ensure the correct layout is used after refresh.
     this.onResize();
   }

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

@@ -23,10 +23,37 @@
   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;
+}
+
+div.raw-headers-row {
+  display: block;
 }
 
 .row:first-of-type {
@@ -39,14 +66,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 +102,10 @@
 .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;
+  word-break: break-all;
+}

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

@@ -6,12 +6,14 @@ import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import {assertNotNullOrUndefined} from '../../../core/platform/platform.js';
 import * as SDK from '../../../core/sdk/sdk.js';
+import * as Buttons from '../../../ui/components/buttons/buttons.js';
 import * as ComponentHelpers from '../../../ui/components/helpers/helpers.js';
 import * as UI from '../../../ui/legacy/legacy.js';
 import * as LitHtml from '../../../ui/lit-html/lit-html.js';
 
 import requestHeadersViewStyles from './RequestHeadersView.css.js';
 
+const RAW_HEADER_CUTOFF = 3000;
 const {render, html} = LitHtml;
 
 const UIStrings = {
@@ -44,6 +46,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 +62,14 @@ const UIStrings = {
   */
   requestMethod: 'Request Method',
   /**
+  *@description A context menu item in the Network Log View Columns of the Network panel
+  */
+  responseHeaders: 'Response Headers',
+  /**
+  *@description Text to show more content
+  */
+  showMore: 'Show more',
+  /**
   *@description HTTP response code
   */
   statusCode: 'Status Code',
@@ -103,6 +121,10 @@ 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;
+  #showResponseHeadersTextFull = false;
+  #showRequestHeadersTextFull = false;
 
   set data(data: RequestHeadersComponentData) {
     this.#request = data.request;
@@ -120,10 +142,126 @@ 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 ?
+            this.#renderRawHeaders(this.#request.responseHeadersText, true) : 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) ?
+            this.#renderRawHeaders(requestHeadersText, false) : 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}>
+    `;
+  }
+
+  #renderRawHeaders(rawHeadersText: string, forResponseHeaders: boolean): LitHtml.TemplateResult {
+    const trimmed = rawHeadersText.trim();
+    const showFull = forResponseHeaders ? this.#showResponseHeadersTextFull : this.#showRequestHeadersTextFull;
+    const isShortened = !showFull && trimmed.length > RAW_HEADER_CUTOFF;
+
+    const showMore = ():void => {
+      if (forResponseHeaders) {
+        this.#showResponseHeadersTextFull = true;
+      } else {
+        this.#showRequestHeadersTextFull = true;
+      }
+      this.#render();
+    };
+
+    const onContextMenuOpen = (event: Event): void => {
+      const showFull = forResponseHeaders ? this.#showResponseHeadersTextFull : this.#showRequestHeadersTextFull;
+      if (!showFull) {
+        const contextMenu = new UI.ContextMenu.ContextMenu(event);
+        const section = contextMenu.newSection();
+        section.appendItem(i18nString(UIStrings.showMore), showMore);
+        void contextMenu.show();
+      }
+    };
+
+    const addContextMenuListener = (el: Element):void => {
+      if (isShortened) {
+        el.addEventListener('contextmenu', onContextMenuOpen);
+      }
+    };
+
+    return html`
+      <div class="row raw-headers-row" on-render=${ComponentHelpers.Directives.nodeRenderedCallback(addContextMenuListener)}>
+        <div class="raw-headers">${isShortened ? trimmed.substring(0, RAW_HEADER_CUTOFF) : trimmed}</div>
+        ${isShortened ? html`
+          <${Buttons.Button.Button.litTagName}
+            .size=${Buttons.Button.Size.SMALL}
+            .variant=${Buttons.Button.Variant.SECONDARY}
+            @click=${showMore}
+          >${i18nString(UIStrings.showMore)}</${Buttons.Button.Button.litTagName}>
+        ` : LitHtml.nothing}
+      </div>
+    `;
+  }
+
   #renderGeneralSection(): LitHtml.TemplateResult {
     assertNotNullOrUndefined(this.#request);
 
@@ -159,7 +297,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 +333,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 +353,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 +364,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});