chrome-devtools-frontend 1.0.977567 → 1.0.978200

package/front_end/core/host/UserMetrics.ts

@@ -380,7 +380,29 @@ export enum PanelCodes {
   'settings-keybinds' = 38,
   'cssoverview' = 39,
   'chrome_recorder' = 40,
-  MaxValue = 41,
+  'trust_tokens' = 41,
+  'reporting_api' = 42,
+  'interest_groups' = 43,
+  'back_forward_cache' = 44,
+  'service_worker_cache' = 45,
+  'background_service_backgroundFetch' = 46,
+  'background_service_backgroundSync' = 47,
+  'background_service_pushMessaging' = 48,
+  'background_service_notifications' = 49,
+  'background_service_paymentHandler' = 50,
+  'background_service_periodicBackgroundSync' = 51,
+  'service_workers' = 52,
+  'app_manifest' = 53,
+  'storage' = 54,
+  'cookies' = 55,
+  'frame_details' = 56,
+  'frame_resource' = 57,
+  'frame_window' = 58,
+  'frame_worker' = 59,
+  'dom_storage' = 60,
+  'indexed_db' = 61,
+  'web_sql' = 62,
+  MaxValue = 63,
 }
 /* eslint-enable @typescript-eslint/naming-convention */
 

package/front_end/models/persistence/NetworkPersistenceManager.ts

@@ -372,7 +372,7 @@ export class NetworkPersistenceManager extends Common.ObjectWrapper.ObjectWrappe
   async generateHeaderPatterns(uiSourceCode: Workspace.UISourceCode.UISourceCode):
       Promise<{headerPatterns: Set<string>, path: string, overridesWithRegex: HeaderOverrideWithRegex[]}> {
     const headerPatterns = new Set<string>();
-    const content = (await uiSourceCode.requestContent()).content || '';
+    const content = (await uiSourceCode.requestContent()).content || '[]';
     let headerOverrides: HeaderOverride[] = [];
     try {
       headerOverrides = JSON.parse(content) as HeaderOverride[];
@@ -657,7 +657,7 @@ export type EventTypes = {
   [Events.ProjectChanged]: Workspace.Workspace.Project|null,
 };
 
-interface HeaderOverride {
+export interface HeaderOverride {
   applyTo: string;
   headers: Protocol.Network.Headers;
 }
@@ -668,7 +668,7 @@ interface HeaderOverrideWithRegex {
 }
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-function isHeaderOverride(arg: any): arg is HeaderOverride {
+export function isHeaderOverride(arg: any): arg is HeaderOverride {
   if (!(arg && arg.applyTo && typeof (arg.applyTo === 'string') && arg.headers && Object.keys(arg.headers).length)) {
     return false;
   }

package/front_end/panels/application/ApplicationPanelCacheSection.ts

@@ -7,6 +7,7 @@ import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as ApplicationComponents from './components/components.js';
+import * as Host from '../../core/host/host.js';
 
 import {ApplicationPanelTreeElement, ExpandableApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
@@ -164,6 +165,7 @@ export class SWCacheTreeElement extends ApplicationPanelTreeElement {
     }
 
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.service_worker_cache]);
     return false;
   }
 
@@ -192,6 +194,7 @@ export class BackForwardCacheTreeElement extends ApplicationPanelTreeElement {
       this.view = new ApplicationComponents.BackForwardCacheView.BackForwardCacheViewWrapper();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.back_forward_cache]);
     return false;
   }
 }

package/front_end/panels/application/ApplicationPanelSidebar.ts

@@ -831,6 +831,7 @@ export class BackgroundServiceTreeElement extends ApplicationPanelTreeElement {
     }
     this.showView(this.view);
     UI.Context.Context.instance().setFlavor(BackgroundServiceView, this.view);
+    Host.userMetrics.panelShown('background_service_' + this.serviceName);
     return false;
   }
 }
@@ -854,6 +855,7 @@ export class DatabaseTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.sidebar.showDatabase(this.database);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.web_sql]);
     return false;
   }
 
@@ -891,6 +893,7 @@ export class DatabaseTableTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.sidebar.showDatabase(this.database, this.tableName);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.web_sql]);
     return false;
   }
 }
@@ -914,6 +917,7 @@ export class ServiceWorkersTreeElement extends ApplicationPanelTreeElement {
       this.view = new ServiceWorkersView();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.service_workers]);
     return false;
   }
 }
@@ -936,6 +940,7 @@ export class AppManifestTreeElement extends ApplicationPanelTreeElement {
       this.view = new AppManifestView();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.app_manifest]);
     return false;
   }
 }
@@ -958,6 +963,7 @@ export class ClearStorageTreeElement extends ApplicationPanelTreeElement {
       this.view = new StorageView();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.storage]);
     return false;
   }
 }
@@ -1170,6 +1176,7 @@ export class IDBDatabaseTreeElement extends ApplicationPanelTreeElement {
     }
 
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.indexed_db]);
     return false;
   }
 
@@ -1302,6 +1309,7 @@ export class IDBObjectStoreTreeElement extends ApplicationPanelTreeElement {
     }
 
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.indexed_db]);
     return false;
   }
 
@@ -1391,6 +1399,7 @@ export class IDBIndexTreeElement extends ApplicationPanelTreeElement {
     }
 
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.indexed_db]);
     return false;
   }
 
@@ -1417,6 +1426,7 @@ export class DOMStorageTreeElement extends ApplicationPanelTreeElement {
 
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.dom_storage]);
     this.resourcesPanel.showDOMStorage(this.domStorage);
     return false;
   }
@@ -1469,6 +1479,7 @@ export class CookieTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.resourcesPanel.showCookies(this.target, this.cookieDomainInternal);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.cookies]);
     return false;
   }
 }
@@ -1810,6 +1821,7 @@ export class FrameTreeElement extends ApplicationPanelTreeElement {
     } else {
       this.view.update();
     }
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.frame_details]);
     this.showView(this.view);
 
     this.listItemElement.classList.remove('hovered');
@@ -1978,6 +1990,7 @@ export class FrameResourceTreeElement extends ApplicationPanelTreeElement {
     } else {
       void this.panel.scheduleShowView(this.preparePreview());
     }
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.frame_resource]);
     return false;
   }
 
@@ -2065,6 +2078,7 @@ class FrameWindowTreeElement extends ApplicationPanelTreeElement {
       this.view.update();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.frame_window]);
     return false;
   }
 
@@ -2093,6 +2107,7 @@ class WorkerTreeElement extends ApplicationPanelTreeElement {
       this.view.update();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.frame_worker]);
     return false;
   }
 

package/front_end/panels/application/InterestGroupTreeElement.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as UI from '../../ui/legacy/legacy.js';
@@ -51,6 +52,7 @@ export class InterestGroupTreeElement extends ApplicationPanelTreeElement {
   onselect(selectedByUser?: boolean): boolean {
     super.onselect(selectedByUser);
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.interest_groups]);
     return false;
   }
 

package/front_end/panels/application/ReportingApiTreeElement.ts

@@ -2,6 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
+import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import * as UI from '../../ui/legacy/legacy.js';
 
@@ -37,6 +38,7 @@ export class ReportingApiTreeElement extends ApplicationPanelTreeElement {
       this.view = new ReportingApiView();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.reporting_api]);
     return false;
   }
 }

package/front_end/panels/application/TrustTokensTreeElement.ts

@@ -9,6 +9,7 @@ import * as UI from '../../ui/legacy/legacy.js';
 import {ApplicationPanelTreeElement} from './ApplicationPanelTreeElement.js';
 import * as ApplicationComponents from './components/components.js';
 import type {ResourcesPanel} from './ResourcesPanel.js';
+import * as Host from '../../core/host/host.js';
 
 const UIStrings = {
   /**
@@ -41,6 +42,7 @@ export class TrustTokensTreeElement extends ApplicationPanelTreeElement {
       this.view = new TrustTokensViewWidgetWrapper();
     }
     this.showView(this.view);
+    Host.userMetrics.panelShown(Host.UserMetrics.PanelCodes[Host.UserMetrics.PanelCodes.trust_tokens]);
     return false;
   }
 }

package/front_end/panels/sources/components/HeadersView.css

@@ -8,6 +8,58 @@
   flex-grow: 1;
 }
 
+.row {
+  display: flex;
+  flex-direction: row;
+  color: var(--color-syntax-1);
+  font-family: var(--monospace-font-family);
+  font-size: var(--monospace-font-size);
+  align-items: center;
+  line-height: 18px;
+  margin: 2em 0 0 0.5em;
+}
+
+.row:first-child {
+  margin-top: 0.5em;
+}
+
+.row devtools-button {
+  line-height: 1;
+  margin-left: 0.5em;
+}
+
+.padded {
+  margin: 0.25em 0 0 2em;
+}
+
+.separator {
+  margin-right: 0.5em;
+  color: var(--color-text-primary);
+}
+
+.editable {
+  cursor: text;
+  color: var(--color-text-primary);
+  overflow-wrap: anywhere;
+  min-height: 18px;
+  line-height: 18px;
+  min-width: 0.5em;
+  background: transparent;
+  border: none;
+  outline: none;
+  display: inline-block;
+}
+
+.editable.red {
+  color: var(--color-syntax-1);
+}
+
+.editable:hover,
+.editable:focus {
+  box-shadow: 0 0 0 1px var(--color-details-hairline);
+  border-radius: 2px;
+}
+
 .center-wrapper {
   height: 100%;
   display: flex;

package/front_end/panels/sources/components/HeadersView.ts

@@ -4,7 +4,7 @@
 
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as Persistence from '../../../models/persistence/persistence.js';
-import type * as Workspace from '../../../models/workspace/workspace.js';
+import * as Workspace from '../../../models/workspace/workspace.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';
@@ -34,9 +34,52 @@ export class HeadersView extends UI.View.SimpleView {
   constructor(uiSourceCode: Workspace.UISourceCode.UISourceCode) {
     super('HeadersView');
     this.#uiSourceCode = uiSourceCode;
+    this.#uiSourceCode.addEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyChanged, this.#onWorkingCopyChanged, this);
+    this.#uiSourceCode.addEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyCommitted, this.#onWorkingCopyCommitted, this);
     this.element.appendChild(this.#headersViewComponent);
+    void this.#setInitialData();
+  }
+
+  async #setInitialData(): Promise<void> {
+    const content = await this.#uiSourceCode.requestContent();
+    this.#setComponentData(content.content || '');
+  }
+
+  #setComponentData(content: string): void {
+    let parsingError = false;
+    let headerOverrides: Persistence.NetworkPersistenceManager.HeaderOverride[] = [];
+    content = content || '[]';
+    try {
+      headerOverrides = JSON.parse(content) as Persistence.NetworkPersistenceManager.HeaderOverride[];
+      if (!headerOverrides.every(Persistence.NetworkPersistenceManager.isHeaderOverride)) {
+        throw 'Type mismatch after parsing';
+      }
+    } catch (e) {
+      console.error('Failed to parse', this.#uiSourceCode.url(), 'for locally overriding headers.');
+      parsingError = true;
+    }
+
+    // Header overrides are stored as the key-value pairs of a JSON object on
+    // disk. For the editor we want them as an array instead, so that we can
+    // access/add/remove entries by their index.
+    const arrayOfHeaderOverrideArrays: HeaderOverride[] = headerOverrides.map(headerOverride => {
+      return {
+        applyTo: headerOverride.applyTo,
+        headers: Object.entries(headerOverride.headers).map(([headerName, headerValue]) => {
+          return {
+            name: headerName,
+            value: headerValue,
+          };
+        }),
+      };
+    });
+
     this.#headersViewComponent.data = {
+      headerOverrides: arrayOfHeaderOverrideArrays,
       uiSourceCode: this.#uiSourceCode,
+      parsingError,
     };
   }
 
@@ -44,39 +87,207 @@ export class HeadersView extends UI.View.SimpleView {
     this.#uiSourceCode.commitWorkingCopy();
     Persistence.NetworkPersistenceManager.NetworkPersistenceManager.instance().updateInterceptionPatterns();
   }
+
+  #onWorkingCopyChanged(): void {
+    this.#setComponentData(this.#uiSourceCode.workingCopy());
+  }
+
+  #onWorkingCopyCommitted(): void {
+    this.#setComponentData(this.#uiSourceCode.workingCopy());
+  }
+
+  dispose(): void {
+    this.#uiSourceCode.removeEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyChanged, this.#onWorkingCopyChanged, this);
+    this.#uiSourceCode.removeEventListener(
+        Workspace.UISourceCode.Events.WorkingCopyCommitted, this.#onWorkingCopyCommitted, this);
+  }
 }
 
+type Header = {
+  name: string,
+  value: string,
+};
+
+type HeaderOverride = {
+  applyTo: string,
+  headers: Header[],
+};
+
 export interface HeadersViewComponentData {
+  headerOverrides: HeaderOverride[];
   uiSourceCode: Workspace.UISourceCode.UISourceCode;
+  parsingError: boolean;
 }
 
 export class HeadersViewComponent extends HTMLElement {
   static readonly litTagName = LitHtml.literal`devtools-sources-headers-view`;
   readonly #shadow = this.attachShadow({mode: 'open'});
+  readonly #boundRender = this.#render.bind(this);
+  #headerOverrides: HeaderOverride[] = [];
   #uiSourceCode: Workspace.UISourceCode.UISourceCode|null = null;
+  #parsingError = false;
+
+  constructor() {
+    super();
+    this.#shadow.addEventListener('focusin', this.#onFocusIn.bind(this));
+    this.#shadow.addEventListener('focusout', this.#onFocusOut.bind(this));
+    this.#shadow.addEventListener('input', this.#onInput.bind(this));
+    this.#shadow.addEventListener('keydown', this.#onKeyDown.bind(this));
+  }
 
   connectedCallback(): void {
     this.#shadow.adoptedStyleSheets = [HeadersViewStyles];
   }
 
   set data(data: HeadersViewComponentData) {
+    this.#headerOverrides = data.headerOverrides;
     this.#uiSourceCode = data.uiSourceCode;
-    this.#render();
+    this.#parsingError = data.parsingError;
+    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
+  }
+
+  // 'Enter' key should not create a new line in the contenteditable. Focus
+  // on the next contenteditable instead.
+  #onKeyDown(event: Event): void {
+    const keyboardEvent = event as KeyboardEvent;
+    const target = event.target as HTMLElement;
+    if (target.matches('.editable') && keyboardEvent.key === 'Enter') {
+      event.preventDefault();
+      this.#focusNext(target);
+    }
+  }
+
+  #focusNext(target: HTMLElement): void {
+    const elements = Array.from(this.#shadow.querySelectorAll('.editable')) as HTMLElement[];
+    const idx = elements.indexOf(target);
+    if (idx !== -1 && idx + 1 < elements.length) {
+      elements[idx + 1].focus();
+    }
+  }
+
+  #selectAllText(target: HTMLElement): void {
+    const selection = window.getSelection();
+    const range = document.createRange();
+    range.selectNodeContents(target);
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+  }
+
+  #onFocusIn(e: Event): void {
+    const target = e.target as HTMLElement;
+    if (target.matches('.editable')) {
+      this.#selectAllText(target);
+    }
+  }
+
+  #onFocusOut(): void {
+    // clear selection
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+  }
+
+  #onInput(e: Event): void {
+    const target = e.target as HTMLButtonElement;
+    const rowElement = target.closest('.row') as HTMLElement;
+    const blockIndex = Number(rowElement.dataset.blockIndex);
+    const headerIndex = Number(rowElement.dataset.headerIndex);
+    if (target.matches('.header-name')) {
+      this.#headerOverrides[blockIndex].headers[headerIndex].name = target.innerText;
+      this.#onHeadersChanged();
+    }
+    if (target.matches('.header-value')) {
+      this.#headerOverrides[blockIndex].headers[headerIndex].value = target.innerText;
+      this.#onHeadersChanged();
+    }
+    if (target.matches('.apply-to')) {
+      this.#headerOverrides[blockIndex].applyTo = target.innerText;
+      this.#onHeadersChanged();
+    }
+  }
+
+  #onHeadersChanged(): void {
+    // In the editor header overrides are represented by items in an array, so
+    // that we can access/add/remove entries by their index. On disk, they are
+    // stored as key-value pairs of a JSON object instead.
+    const arrayOfHeaderOverrideObjects: Persistence.NetworkPersistenceManager.HeaderOverride[] =
+        this.#headerOverrides.map(headerOverride => {
+          return {
+            applyTo: headerOverride.applyTo,
+            headers: headerOverride.headers.reduce((a, v) => ({...a, [v.name]: v.value}), {}),
+          };
+        });
+    this.#uiSourceCode?.setWorkingCopy(JSON.stringify(arrayOfHeaderOverrideObjects, null, 2));
   }
 
   #render(): void {
-    const fileName = this.#uiSourceCode?.name() || '.headers';
+    if (!ComponentHelpers.ScheduledRender.isScheduledRender(this)) {
+      throw new Error('HeadersView render was not scheduled');
+    }
+
+    if (this.#parsingError) {
+      const fileName = this.#uiSourceCode?.name() || '.headers';
+      // clang-format off
+      LitHtml.render(LitHtml.html`
+        <div class="center-wrapper">
+          <div class="centered">
+            <div class="error-header">${i18nString(UIStrings.errorWhenParsing, {PH1: fileName})}</div>
+            <div class="error-body">${i18nString(UIStrings.parsingErrorExplainer, {PH1: fileName})}</div>
+          </div>
+        </div>
+      `, this.#shadow, {host: this});
+      // clang-format on
+      return;
+    }
+
     // clang-format off
     LitHtml.render(LitHtml.html`
-      <div class="center-wrapper">
-        <div class="centered">
-          <div class="error-header">${i18nString(UIStrings.errorWhenParsing, {PH1: fileName})}</div>
-          <div class="error-body">${i18nString(UIStrings.parsingErrorExplainer, {PH1: fileName})}</div>
-        </div>
-      </div>
+      ${this.#headerOverrides.map((headerOverride, blockIndex) =>
+        LitHtml.html`
+          ${this.#renderApplyToRow(headerOverride.applyTo, blockIndex)}
+          ${headerOverride.headers.map((header, headerIndex) =>
+            LitHtml.html`
+              ${this.#renderHeaderRow(header, blockIndex, headerIndex)}
+            `,
+          )}
+        `,
+      )}
     `, this.#shadow, {host: this});
     // clang-format on
   }
+
+  #renderApplyToRow(pattern: string, blockIndex: number): LitHtml.TemplateResult {
+    // clang-format off
+    return LitHtml.html`
+      <div class="row" data-block-index=${blockIndex}>
+        <div>${i18n.i18n.lockedString('Apply to')}</div>
+        <div class="separator">:</div>
+        ${this.#renderEditable(pattern, 'apply-to')}
+      </div>
+    `;
+    // clang-format on
+  }
+
+  #renderHeaderRow(header: Header, blockIndex: number, headerIndex: number): LitHtml.TemplateResult {
+    // clang-format off
+    return LitHtml.html`
+      <div class="row padded" data-block-index=${blockIndex} data-header-index=${headerIndex}>
+        ${this.#renderEditable(header.name, 'header-name red')}
+        <div class="separator">:</div>
+        ${this.#renderEditable(header.value, 'header-value')}
+    `;
+    // clang-format on
+  }
+
+  #renderEditable(value: string, className?: string): LitHtml.TemplateResult {
+    // This uses LitHtml's `live`-directive, so that when checking whether to
+    // update during re-render, `value` is compared against the actual live DOM
+    // value of the contenteditable element and not the potentially outdated
+    // value from the previous render.
+    // clang-format off
+    return LitHtml.html`<span contenteditable="true" class="editable ${className}" tabindex="0" .innerText=${LitHtml.Directives.live(value)}></span>`;
+    // clang-format on
+  }
 }
 
 ComponentHelpers.CustomElements.defineComponent('devtools-sources-headers-view', HeadersViewComponent);

package/package.json

@@ -54,5 +54,5 @@
     "unittest": "scripts/test/run_unittests.py --no-text-coverage",
     "watch": "third_party/node/node.py --output scripts/watch_build.js"
   },
-  "version": "1.0.977567"
+  "version": "1.0.978200"
 }