chrome-devtools-frontend 1.0.1006211 → 1.0.1007307

package/front_end/panels/mobile_throttling/ThrottlingManager.ts

@@ -61,6 +61,26 @@ const UIStrings = {
   *@example {2} PH1
   */
   dSlowdown: '{PH1}× slowdown',
+  /**
+  *@description Tooltip text in Throttling Manager of the Performance panel
+  */
+  excessConcurrency: 'Exceeding the default value may degrade system performance.',
+  /**
+  *@description Tooltip text in Throttling Manager of the Performance panel
+  */
+  resetConcurrency: 'Reset to the default value',
+  /**
+  *@description Screen reader label for an check box that neables overriding navigator.hardwareConcurrency
+  */
+  hardwareConcurrency: 'Hardware concurrency',
+  /**
+  *@description Screen reader label for an input box that overrides navigator.hardwareConcurrency
+  */
+  hardwareConcurrencyValue: 'Value of navigator.hardwareConcurrency',
+  /**
+  *@description Icon title in Throttling Manager of the Performance panel
+  */
+  hardwareConcurrencyIsEnabled: 'Hardware concurrency override is enabled',
 };
 const str_ = i18n.i18n.registerUIStrings('panels/mobile_throttling/ThrottlingManager.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -73,6 +93,11 @@ export class ThrottlingManager {
   private readonly currentNetworkThrottlingConditionsSetting: Common.Settings.Setting<SDK.NetworkManager.Conditions>;
   private lastNetworkThrottlingConditions!: SDK.NetworkManager.Conditions;
   private readonly cpuThrottlingManager: SDK.CPUThrottlingManager.CPUThrottlingManager;
+  #hardwareConcurrencyOverrideEnabled = false;
+
+  get hardwareConcurrencyOverrideEnabled(): boolean {
+    return this.#hardwareConcurrencyOverrideEnabled;
+  }
 
   private constructor() {
     this.cpuThrottlingManager = SDK.CPUThrottlingManager.CPUThrottlingManager.instance();
@@ -232,19 +257,36 @@ export class ThrottlingManager {
     }
   }
 
+  private updatePanelIcon(): void {
+    const cpuRate = this.cpuThrottlingManager.cpuThrottlingRate();
+
+    if (cpuRate === SDK.CPUThrottlingManager.CPUThrottlingRates.NoThrottling &&
+        !this.hardwareConcurrencyOverrideEnabled) {
+      UI.InspectorView.InspectorView.instance().setPanelIcon('timeline', null);
+      return;
+    }
+    const icon = UI.Icon.Icon.create('smallicon-warning');
+    const tooltips: string[] = [];
+    if (cpuRate !== SDK.CPUThrottlingManager.CPUThrottlingRates.NoThrottling) {
+      tooltips.push(i18nString(UIStrings.cpuThrottlingIsEnabled));
+    }
+    if (this.hardwareConcurrencyOverrideEnabled) {
+      tooltips.push(i18nString(UIStrings.hardwareConcurrencyIsEnabled));
+    }
+    icon.title = tooltips.join('\n');
+    UI.InspectorView.InspectorView.instance().setPanelIcon('timeline', icon);
+  }
+
   setCPUThrottlingRate(rate: number): void {
     this.cpuThrottlingManager.setCPUThrottlingRate(rate);
-    let icon: UI.Icon.Icon|null = null;
     if (rate !== SDK.CPUThrottlingManager.CPUThrottlingRates.NoThrottling) {
       Host.userMetrics.actionTaken(Host.UserMetrics.Action.CpuThrottlingEnabled);
-      icon = UI.Icon.Icon.create('smallicon-warning');
-      UI.Tooltip.Tooltip.install(icon, i18nString(UIStrings.cpuThrottlingIsEnabled));
     }
     const index = this.cpuThrottlingRates.indexOf(rate);
     for (const control of this.cpuThrottlingControls) {
       control.setSelectedIndex(index);
     }
-    UI.InspectorView.InspectorView.instance().setPanelIcon('timeline', icon);
+    this.updatePanelIcon();
   }
 
   createCPUThrottlingSelector(): UI.Toolbar.ToolbarComboBox {
@@ -266,6 +308,73 @@ export class ThrottlingManager {
     return control;
   }
 
+  createHardwareConcurrencySelector(): {
+    input: UI.Toolbar.ToolbarItem,
+    reset: UI.Toolbar.ToolbarButton,
+    warning: UI.Toolbar.ToolbarItem,
+    toggle: UI.Toolbar.ToolbarItem,
+  } {
+    const input = new UI.Toolbar.ToolbarItem(UI.UIUtils.createInput('devtools-text-input', 'number'));
+    input.setTitle(i18nString(UIStrings.hardwareConcurrencyValue));
+    const inputElement = input.element as HTMLInputElement;
+    inputElement.min = '1';
+    input.setEnabled(false);
+
+    const toggle = new UI.Toolbar.ToolbarCheckbox(i18nString(UIStrings.hardwareConcurrency));
+    const reset = new UI.Toolbar.ToolbarButton('Reset concurrency', 'largeicon-undo');
+    reset.setTitle(i18nString(UIStrings.resetConcurrency));
+    const warning = new UI.Toolbar.ToolbarItem(UI.Icon.Icon.create('smallicon-warning'));
+    warning.setTitle(i18nString(UIStrings.excessConcurrency));
+
+    toggle.inputElement.disabled = true;  // Prevent modification while still wiring things up asynchronously below
+    reset.element.classList.add('timeline-concurrency-hidden');
+    warning.element.classList.add('timeline-concurrency-hidden');
+
+    void this.cpuThrottlingManager.getHardwareConcurrency().then(defaultValue => {
+      if (defaultValue === undefined) {
+        return;
+      }
+
+      const setHardwareConcurrency = (value: number): void => {
+        if (value >= 1) {
+          this.cpuThrottlingManager.setHardwareConcurrency(value);
+        }
+        if (value > defaultValue) {
+          warning.element.classList.remove('timeline-concurrency-hidden');
+        } else {
+          warning.element.classList.add('timeline-concurrency-hidden');
+        }
+        if (value === defaultValue) {
+          reset.element.classList.add('timeline-concurrency-hidden');
+        } else {
+          reset.element.classList.remove('timeline-concurrency-hidden');
+        }
+      };
+
+      inputElement.value = `${defaultValue}`;
+      inputElement.oninput = (): void => setHardwareConcurrency(Number(inputElement.value));
+      toggle.inputElement.disabled = false;
+      toggle.inputElement.addEventListener('change', () => {
+        this.#hardwareConcurrencyOverrideEnabled = toggle.checked();
+        this.updatePanelIcon();
+
+        input.setEnabled(this.hardwareConcurrencyOverrideEnabled);
+        setHardwareConcurrency(this.hardwareConcurrencyOverrideEnabled ? Number(inputElement.value) : defaultValue);
+      });
+
+      reset.addEventListener(UI.Toolbar.ToolbarButton.Events.Click, () => {
+        inputElement.value = `${defaultValue}`;
+        setHardwareConcurrency(defaultValue);
+      });
+    });
+
+    return {input, reset, warning, toggle};
+  }
+
+  setHardwareConcurrency(concurrency: number): void {
+    this.cpuThrottlingManager.setHardwareConcurrency(concurrency);
+  }
+
   private isDirty(): boolean {
     const networkConditions = SDK.NetworkManager.MultitargetNetworkManager.instance().networkConditions();
     const knownCurrentConditions = this.currentNetworkThrottlingConditionsSetting.get();

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});