chrome-devtools-frontend 1.0.976570 → 1.0.977952

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

@@ -0,0 +1,300 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as i18n from '../../../core/i18n/i18n.js';
+import * as Persistence from '../../../models/persistence/persistence.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';
+
+import HeadersViewStyles from './HeadersView.css.js';
+
+const UIStrings = {
+  /**
+  *@description Error message for files which cannot not be parsed.
+  *@example {.headers} PH1
+  */
+  errorWhenParsing: 'Error when parsing \'\'{PH1}\'\'.',
+  /**
+  *@description Explainer for files which cannot be parsed.
+  *@example {.headers} PH1
+  */
+  parsingErrorExplainer:
+      'This is most likely due to a syntax error in \'\'{PH1}\'\'. Try opening this file in an external editor to fix the error or delete the file and re-create the override.',
+};
+const str_ = i18n.i18n.registerUIStrings('panels/sources/components/HeadersView.ts', UIStrings);
+const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+
+export class HeadersView extends UI.View.SimpleView {
+  readonly #headersViewComponent = new HeadersViewComponent();
+  #uiSourceCode: Workspace.UISourceCode.UISourceCode;
+
+  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,
+    };
+  }
+
+  commitEditing(): void {
+    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.#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 {
+    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`
+      ${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);
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface HTMLElementTagNameMap {
+    'devtools-sources-headers-view': HeadersViewComponent;
+  }
+}

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

@@ -0,0 +1,9 @@
+// Copyright 2022 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import * as HeadersView from './HeadersView.js';
+
+export {
+  HeadersView,
+};

package/front_end/panels/timeline/TimelineController.ts

@@ -80,18 +80,31 @@ export class TimelineController implements SDK.TargetManager.SDKModelObserver<SD
     function disabledByDefault(category: string): string {
       return 'disabled-by-default-' + category;
     }
+
+    // The following categories are also used in other tools, but this panel
+    // offers the possibility of turning them off (see below).
+    // 'disabled-by-default-devtools.screenshot'
+    //   └ default: on, option: captureFilmStrip
+    // 'disabled-by-default-devtools.timeline.invalidationTracking'
+    //   └ default: off, experiment: timelineInvalidationTracking
+    // 'disabled-by-default-v8.cpu_profiler'
+    //   └ default: on, option: enableJSSampling
     const categoriesArray = [
       '-*',
+      TimelineModel.TimelineModel.TimelineModelImpl.Category.Console,
+      TimelineModel.TimelineModel.TimelineModelImpl.Category.UserTiming,
       'devtools.timeline',
       disabledByDefault('devtools.timeline'),
       disabledByDefault('devtools.timeline.frame'),
-      'v8.execute',
+      disabledByDefault('devtools.timeline.stack'),
       disabledByDefault('v8.compile'),
-      TimelineModel.TimelineModel.TimelineModelImpl.Category.Console,
-      TimelineModel.TimelineModel.TimelineModelImpl.Category.UserTiming,
+      disabledByDefault('v8.cpu_profiler.hires'),
+      TimelineModel.TimelineModel.TimelineModelImpl.Category.LatencyInfo,
       TimelineModel.TimelineModel.TimelineModelImpl.Category.Loading,
+      disabledByDefault('lighthouse'),
+      'v8.execute',
+      'v8',
     ];
-    categoriesArray.push(TimelineModel.TimelineModel.TimelineModelImpl.Category.LatencyInfo);
 
     if (Root.Runtime.experiments.isEnabled('timelineV8RuntimeCallStats') && options.enableJSSampling) {
       categoriesArray.push(disabledByDefault('v8.runtime_stats_sampling'));
@@ -99,7 +112,6 @@ export class TimelineController implements SDK.TargetManager.SDKModelObserver<SD
     if (!Root.Runtime.Runtime.queryParam('timelineTracingJSProfileDisabled') && options.enableJSSampling) {
       categoriesArray.push(disabledByDefault('v8.cpu_profiler'));
     }
-    categoriesArray.push(disabledByDefault('devtools.timeline.stack'));
     if (Root.Runtime.experiments.isEnabled('timelineInvalidationTracking')) {
       categoriesArray.push(disabledByDefault('devtools.timeline.invalidationTracking'));
     }

package/front_end/ui/components/expandable_list/expandableList.css

@@ -4,6 +4,10 @@
  * found in the LICENSE file.
  */
 
+:host {
+  overflow: hidden;
+}
+
 div {
   line-height: 1.7em;
 }
@@ -53,3 +57,9 @@ button.link {
   font-family: inherit;
   font-size: inherit;
 }
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}

package/front_end/ui/components/text_editor/javascript.ts

@@ -101,11 +101,11 @@ const dontCompleteIn = new Set([
   'TypeName',
 ]);
 
-// FIXME Implement Map property completion?
 export const enum QueryType {
   Expression = 0,
   PropertyName = 1,
   PropertyExpression = 2,
+  PotentiallyRetrievingFromMap = 3,
 }
 
 export function getQueryType(tree: CodeMirror.Tree, pos: number, doc: CodeMirror.Text): {
@@ -149,6 +149,22 @@ export function getQueryType(tree: CodeMirror.Tree, pos: number, doc: CodeMirror
       return {type: QueryType.PropertyName, relatedNode: node};
     }
   }
+  if (node.name === '(') {
+    // map.get(<auto-complete>
+    if (parent.name === 'ArgList' && parent.parent.name === 'CallExpression') {
+      // map.get
+      const callReceiver = parent.parent.firstChild;
+      if (callReceiver.name === 'MemberExpression') {
+        // get
+        const propertyExpression = callReceiver.lastChild;
+        if (doc.sliceString(propertyExpression.from, propertyExpression.to) === 'get') {
+          // map
+          const potentiallyMapObject = callReceiver.firstChild;
+          return {type: QueryType.PotentiallyRetrievingFromMap, relatedNode: potentiallyMapObject};
+        }
+      }
+    }
+  }
   return {type: QueryType.Expression};
 }
 
@@ -184,6 +200,12 @@ export async function javascriptCompletionSource(cx: CodeMirror.CompletionContex
     }
     result = await completeProperties(
         cx.state.sliceDoc(objectExpr.from, objectExpr.to), quote, cx.state.sliceDoc(cx.pos, cx.pos + 1) === ']');
+  } else if (query.type === QueryType.PotentiallyRetrievingFromMap) {
+    const potentialMapObject = query.relatedNode;
+    if (!potentialMapObject) {
+      return null;
+    }
+    result = await maybeCompleteKeysFromMap(cx.state.sliceDoc(potentialMapObject.from, potentialMapObject.to));
   } else {
     return null;
   }
@@ -272,6 +294,29 @@ class PropertyCache {
   }
 }
 
+async function maybeCompleteKeysFromMap(objectVariable: string): Promise<CompletionSet> {
+  const result = new CompletionSet();
+  const context = getExecutionContext();
+  if (!context) {
+    return result;
+  }
+  const maybeRetrieveKeys =
+      await evaluateExpression(context, `[...Map.prototype.keys.call(${objectVariable})]`, 'completion');
+  if (!maybeRetrieveKeys) {
+    return result;
+  }
+  const properties = SDK.RemoteObject.RemoteArray.objectAsArray(maybeRetrieveKeys);
+  const numProperties = properties.length();
+  for (let i = 0; i < numProperties; i++) {
+    result.add({
+      label: `"${(await properties.at(i)).value}")`,
+      type: 'constant',
+      boost: i * -1,
+    });
+  }
+  return result;
+}
+
 async function completeProperties(
     expression: string,
     quoted?: string,

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.976570"
+  "version": "1.0.977952"
 }