chrome-devtools-frontend 1.0.1367881 → 1.0.1376716

package/front_end/panels/animation/AnimationDOMNode.ts

@@ -1,268 +0,0 @@
-// Copyright 2024 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 type * as Common from '../../core/common/common.js';
-import * as SDK from '../../core/sdk/sdk.js';
-import type * as Protocol from '../../generated/protocol.js';
-
-const DEVTOOLS_ANIMATIONS_WORLD_NAME = 'devtools_animations';
-const REPORT_SCROLL_POSITION_BINDING_NAME = '__devtools_report_scroll_position__';
-
-const getScrollListenerNameInPage = (id: number): string => `__devtools_scroll_listener_${id}__`;
-
-type ScrollListener = (param: {scrollLeft: number, scrollTop: number}) => void;
-type BindingListener =
-    (ev: Common.EventTarget.EventTargetEvent<Protocol.Runtime.BindingCalledEvent, SDK.RuntimeModel.EventTypes>) => void;
-
-async function resolveToObjectInWorld(
-    domNode: SDK.DOMModel.DOMNode, worldName: string): Promise<SDK.RemoteObject.RemoteObject|null> {
-  const resourceTreeModel = domNode.domModel().target().model(SDK.ResourceTreeModel.ResourceTreeModel) as
-      SDK.ResourceTreeModel.ResourceTreeModel;
-  const pageAgent = domNode.domModel().target().pageAgent();
-  for (const frame of resourceTreeModel.frames()) {
-    // This returns previously created world if it exists for the frame.
-    const {executionContextId} = await pageAgent.invoke_createIsolatedWorld({frameId: frame.id, worldName});
-    const object = await domNode.resolveToObject(undefined, executionContextId);
-    if (object) {
-      return object;
-    }
-  }
-  return null;
-}
-
-/**
- * Provides an extension over `SDK.DOMModel.DOMNode` that gives it additional
- * capabilities for animation debugging, mainly:
- * - getting a node's scroll information (scroll offsets and scroll range).
- * - updating a node's scroll offset.
- * - tracking the node's scroll offsets with event listeners.
- *
- * It works by running functions on the target page, see `SDK.DOMModel.DOMNode`s `callFunction` method
- * for more details on how a function is called on the target page.
- *
- * For listening to events on the target page and getting notified on the devtools frontend
- * side, we're adding a binding to the page `__devtools_report_scroll_position__` in a world `devtools_animation`
- * we've created. Then, we're setting scroll listeners of the `node` in the same world which calls the binding
- * itself with the scroll offsets.
- */
-export class AnimationDOMNode {
-  #domNode: SDK.DOMModel.DOMNode;
-  #scrollListenersById: Map<number, ScrollListener>;
-  #scrollBindingListener?: BindingListener;
-
-  static lastAddedListenerId: number = 0;
-
-  constructor(domNode: SDK.DOMModel.DOMNode) {
-    this.#domNode = domNode;
-    this.#scrollListenersById = new Map();
-  }
-
-  async #addReportScrollPositionBinding(): Promise<void> {
-    // The binding is already added so we don't need to add it again.
-    if (this.#scrollBindingListener) {
-      return;
-    }
-
-    this.#scrollBindingListener = ev => {
-      const {name, payload} = ev.data;
-      if (name !== REPORT_SCROLL_POSITION_BINDING_NAME) {
-        return;
-      }
-
-      const {scrollTop, scrollLeft, id} = JSON.parse(payload) as {scrollTop: number, scrollLeft: number, id: number};
-      const scrollListener = this.#scrollListenersById.get(id);
-      if (!scrollListener) {
-        return;
-      }
-
-      scrollListener({scrollTop, scrollLeft});
-    };
-
-    const runtimeModel =
-        this.#domNode.domModel().target().model(SDK.RuntimeModel.RuntimeModel) as SDK.RuntimeModel.RuntimeModel;
-    await runtimeModel.addBinding({
-      name: REPORT_SCROLL_POSITION_BINDING_NAME,
-      executionContextName: DEVTOOLS_ANIMATIONS_WORLD_NAME,
-    });
-    runtimeModel.addEventListener(SDK.RuntimeModel.Events.BindingCalled, this.#scrollBindingListener);
-  }
-
-  async #removeReportScrollPositionBinding(): Promise<void> {
-    // There isn't any binding added yet.
-    if (!this.#scrollBindingListener) {
-      return;
-    }
-
-    const runtimeModel =
-        this.#domNode.domModel().target().model(SDK.RuntimeModel.RuntimeModel) as SDK.RuntimeModel.RuntimeModel;
-    await runtimeModel.removeBinding({
-      name: REPORT_SCROLL_POSITION_BINDING_NAME,
-    });
-    runtimeModel.removeEventListener(SDK.RuntimeModel.Events.BindingCalled, this.#scrollBindingListener);
-    this.#scrollBindingListener = undefined;
-  }
-
-  async addScrollEventListener(onScroll: ({scrollLeft, scrollTop}: {scrollLeft: number, scrollTop: number}) => void):
-      Promise<number|null> {
-    AnimationDOMNode.lastAddedListenerId++;
-    const id = AnimationDOMNode.lastAddedListenerId;
-    this.#scrollListenersById.set(id, onScroll);
-    // Add the binding for reporting scroll events from the page if it doesn't exist.
-    if (!this.#scrollBindingListener) {
-      await this.#addReportScrollPositionBinding();
-    }
-
-    const object = await resolveToObjectInWorld(this.#domNode, DEVTOOLS_ANIMATIONS_WORLD_NAME);
-    if (!object) {
-      return null;
-    }
-
-    await object.callFunction(scrollListenerInPage, [
-      id,
-      REPORT_SCROLL_POSITION_BINDING_NAME,
-      getScrollListenerNameInPage(id),
-    ].map(arg => SDK.RemoteObject.RemoteObject.toCallArgument(arg)));
-    object.release();
-    return id;
-
-    function scrollListenerInPage(
-        this: HTMLElement|Document, id: number, reportScrollPositionBindingName: string,
-        scrollListenerNameInPage: string): void {
-      if ('scrollingElement' in this && !this.scrollingElement) {
-        return;
-      }
-
-      const scrollingElement = ('scrollingElement' in this ? this.scrollingElement : this) as HTMLElement;
-      // @ts-ignore We're setting a custom field on `Element` or `Document` for retaining the function on the page.
-      this[scrollListenerNameInPage] = () => {
-        // @ts-ignore `reportScrollPosition` binding is injected to the page before calling the function.
-        globalThis[reportScrollPositionBindingName](
-            JSON.stringify({scrollTop: scrollingElement.scrollTop, scrollLeft: scrollingElement.scrollLeft, id}));
-      };
-
-      // @ts-ignore We've already defined the function used below.
-      this.addEventListener('scroll', this[scrollListenerNameInPage], true);
-    }
-  }
-
-  async removeScrollEventListener(id: number): Promise<void> {
-    const object = await resolveToObjectInWorld(this.#domNode, DEVTOOLS_ANIMATIONS_WORLD_NAME);
-    if (!object) {
-      return;
-    }
-
-    await object.callFunction(
-        removeScrollListenerInPage,
-        [getScrollListenerNameInPage(id)].map(arg => SDK.RemoteObject.RemoteObject.toCallArgument(arg)));
-    object.release();
-
-    this.#scrollListenersById.delete(id);
-    // There aren't any scroll listeners remained on the page
-    // so we remove the binding.
-    if (this.#scrollListenersById.size === 0) {
-      await this.#removeReportScrollPositionBinding();
-    }
-
-    function removeScrollListenerInPage(this: HTMLElement|Document, scrollListenerNameInPage: string): void {
-      // @ts-ignore We've already set this custom field while adding scroll listener.
-      this.removeEventListener('scroll', this[scrollListenerNameInPage]);
-      // @ts-ignore We've already set this custom field while adding scroll listener.
-      delete this[scrollListenerNameInPage];
-    }
-  }
-
-  async scrollTop(): Promise<number|null> {
-    return this.#domNode.callFunction(scrollTopInPage).then(res => res?.value ?? null);
-
-    function scrollTopInPage(this: Element|Document): number {
-      if ('scrollingElement' in this) {
-        if (!this.scrollingElement) {
-          return 0;
-        }
-
-        return this.scrollingElement.scrollTop;
-      }
-      return this.scrollTop;
-    }
-  }
-
-  async scrollLeft(): Promise<number|null> {
-    return this.#domNode.callFunction(scrollLeftInPage).then(res => res?.value ?? null);
-
-    function scrollLeftInPage(this: Element|Document): number {
-      if ('scrollingElement' in this) {
-        if (!this.scrollingElement) {
-          return 0;
-        }
-
-        return this.scrollingElement.scrollLeft;
-      }
-      return this.scrollLeft;
-    }
-  }
-
-  async setScrollTop(offset: number): Promise<void> {
-    await this.#domNode.callFunction(setScrollTopInPage, [offset]);
-
-    function setScrollTopInPage(this: Element|Document, offsetInPage: number): void {
-      if ('scrollingElement' in this) {
-        if (!this.scrollingElement) {
-          return;
-        }
-
-        this.scrollingElement.scrollTop = offsetInPage;
-      } else {
-        this.scrollTop = offsetInPage;
-      }
-    }
-  }
-
-  async setScrollLeft(offset: number): Promise<void> {
-    await this.#domNode.callFunction(setScrollLeftInPage, [offset]);
-
-    function setScrollLeftInPage(this: Element|Document, offsetInPage: number): void {
-      if ('scrollingElement' in this) {
-        if (!this.scrollingElement) {
-          return;
-        }
-
-        this.scrollingElement.scrollLeft = offsetInPage;
-      } else {
-        this.scrollLeft = offsetInPage;
-      }
-    }
-  }
-
-  async verticalScrollRange(): Promise<number|null> {
-    return this.#domNode.callFunction(verticalScrollRangeInPage).then(res => res?.value ?? null);
-
-    function verticalScrollRangeInPage(this: Element|Document): number {
-      if ('scrollingElement' in this) {
-        if (!this.scrollingElement) {
-          return 0;
-        }
-
-        return this.scrollingElement.scrollHeight - this.scrollingElement.clientHeight;
-      }
-
-      return this.scrollHeight - this.clientHeight;
-    }
-  }
-
-  async horizontalScrollRange(): Promise<number|null> {
-    return this.#domNode.callFunction(horizontalScrollRangeInPage).then(res => res?.value ?? null);
-
-    function horizontalScrollRangeInPage(this: Element|Document): number {
-      if ('scrollingElement' in this) {
-        if (!this.scrollingElement) {
-          return 0;
-        }
-
-        return this.scrollingElement.scrollWidth - this.scrollingElement.clientWidth;
-      }
-
-      return this.scrollWidth - this.clientWidth;
-    }
-  }
-}

package/front_end/panels/freestyler/components/ProvideFeedback.test.ts

@@ -1,29 +0,0 @@
-// Copyright 2024 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 {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
-import {
-  describeWithEnvironment,
-} from '../../../testing/EnvironmentHelpers.js';
-import * as Freestyler from '../freestyler.js';
-
-describeWithEnvironment('ProvideFeedback', () => {
-  it('should show the feedback form when canShowFeedbackForm is true', async () => {
-    const component = new Freestyler.ProvideFeedback({onFeedbackSubmit: sinon.stub(), canShowFeedbackForm: true});
-    renderElementIntoDOM(component);
-    const button = component.shadowRoot!.querySelector('.rate-buttons devtools-button')! as HTMLElement;
-    button.click();
-
-    assert(component.shadowRoot!.querySelector('.feedback-form'));
-  });
-  it('should not show the feedback form when canShowFeedbackForm is false', async () => {
-    const component = new Freestyler.ProvideFeedback({onFeedbackSubmit: sinon.stub(), canShowFeedbackForm: false});
-    renderElementIntoDOM(component);
-
-    const button = component.shadowRoot!.querySelector('.rate-buttons devtools-button')! as HTMLElement;
-    button.click();
-
-    assert.notExists(component.shadowRoot!.querySelector('.feedback-form'));
-  });
-});

package/front_end/panels/freestyler/components/provideFeedback.css

@@ -1,60 +0,0 @@
-/*
- * Copyright 2024 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.
- */
-
-* {
-  box-sizing: border-box;
-}
-
-.rate-buttons {
-  display: flex;
-  align-items: center;
-  gap: var(--sys-size-2);
-}
-
-.feedback-form {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sys-size-5);
-  margin-top: var(--sys-size-4);
-  background-color: var(--sys-color-surface3);
-  padding: var(--sys-size-6);
-  border-radius: var(--sys-shape-corner-medium-small);
-
-  .feedback-input {
-    height: var(--sys-size-11);
-    padding: 0 var(--sys-size-5);
-    background-color: var(--sys-color-surface3);
-  }
-
-  .feedback-input::placeholder {
-    color: var(--sys-color-on-surface-subtle);
-    font: var(--sys-typescale-body4-regular);
-  }
-}
-
-.feedback-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.feedback-title {
-  margin: 0;
-  font: var(--sys-typescale-body3-medium);
-}
-
-.feedback-disclaimer {
-  padding: 0 var(--sys-size-4);
-}
-
-.vertical-separator {
-  height: 16px;
-  width: 1px;
-  vertical-align: top;
-  margin: 0 var(--sys-size-2);
-  background: var(--sys-color-divider);
-  display: inline-block;
-}

package/front_end/panels/network/RequestBinaryResponseView.ts

@@ -1,67 +0,0 @@
-// Copyright (c) 2024 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 TextUtils from '../../models/text_utils/text_utils.js';
-import * as LinearMemoryInspector from '../linear_memory_inspector/linear_memory_inspector.js';
-
-/**
- * Adapter for the linear memory inspector that can show a {@link StreamingContentData}.
- */
-export class RequestBinaryResponseView extends
-    LinearMemoryInspector.LinearMemoryInspectorPane.LinearMemoryInspectorView {
-  readonly #streamingContentData: TextUtils.StreamingContentData.StreamingContentData;
-  #memory: ContentDataLazyArrayAdapter;
-
-  constructor(streamingContentData: TextUtils.StreamingContentData.StreamingContentData) {
-    const adapter = new ContentDataLazyArrayAdapter();
-    super(adapter, /* address */ 0, 'tabId is unused here', /* hideValueInspector */ true);
-    this.#memory = adapter;
-    this.#streamingContentData = streamingContentData;
-    this.refreshData();
-  }
-
-  override wasShown(): void {
-    this.refreshData();
-    this.#streamingContentData.addEventListener(
-        TextUtils.StreamingContentData.Events.CHUNK_ADDED, this.refreshData, this);
-
-    // No need to call super.wasShown() as we call super.refreshData() ourselves.
-  }
-
-  override willHide(): void {
-    super.willHide();
-    this.#streamingContentData.removeEventListener(
-        TextUtils.StreamingContentData.Events.CHUNK_ADDED, this.refreshData, this);
-  }
-
-  override refreshData(): void {
-    this.#memory.updateWithContentData(this.#streamingContentData.content());
-    super.refreshData();
-  }
-}
-
-/**
- * A small helper class that serves as the holder for the current content of a
- * {@link StreamingContentData} in the form of a Uint8Array.
- *
- * We can't implement the {@link LazyUint8Array} interface directly on
- * {@link RequestBinaryResponseView} as we can't pass "this" to the "super" constructor.
- * So this class acts as a small container cell instead.
- */
-class ContentDataLazyArrayAdapter implements LinearMemoryInspector.LinearMemoryInspectorController.LazyUint8Array {
-  #memory = new Uint8Array([0]);
-
-  updateWithContentData(contentData: TextUtils.ContentData.ContentData): void {
-    const binaryString = window.atob(contentData.base64);
-    this.#memory = Uint8Array.from(binaryString, m => m.codePointAt(0) as number);
-  }
-
-  getRange(start: number, end: number): Promise<Uint8Array> {
-    return Promise.resolve(this.#memory.slice(start, end));
-  }
-
-  length(): number {
-    return this.#memory.length;
-  }
-}

package/scripts/eslint_rules/lib/lit_html_data_as_type.js

@@ -1,83 +0,0 @@
-// Copyright 2020 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.
-'use strict';
-
-const {isLitHtmlTemplateCall} = require('./utils.js');
-
-function findIndexOfDataSetterUsageForNode(taggedTemplateExpression) {
-  const dataSetterText = '.data=';
-  const templateParts = taggedTemplateExpression.quasi.quasis;
-
-  /**
-   * This is a bit confusing, and I recommend diving into an example on AST
-   * Explorer:
-   * https://astexplorer.net/#/gist/62cbc8d019845173b0dfc14214f5a5c4/ce8da61683b587cbccb305fea605b6fad9bc7f89
-   * But the summary is that the templateParts are an array of all the static
-   * parts of a template. So if we have an input of:
-   * <foo .data=${something}></foo>
-   * then there are two template parts:
-   * 1) represents the string "<foo .data="
-   * 2) represets the string "></foo>"
-   *
-   * All we need to do is find the part that ends with .data= and return its
-   * index, because alongside the template parts is another array of expressions
-   * representing all the dynamic parts of the template.
-   */
-  const indices = [];
-  for (const [index, part] of templateParts.entries()) {
-    if (part.value.cooked.endsWith(dataSetterText)) {
-      indices.push(index);
-    }
-  }
-  return indices;
-}
-
-function dataSetterUsesTypeCast(taggedTemplateExpression, indexOfDataSetter) {
-  const expression = taggedTemplateExpression.quasi.expressions[indexOfDataSetter];
-  return (expression.type === 'TSAsExpression');
-}
-
-function dataSetterAsUsesInterface(taggedTemplateExpression, indexOfDataSetter) {
-  const expression = taggedTemplateExpression.quasi.expressions[indexOfDataSetter];
-  return (expression.typeAnnotation.type === 'TSTypeReference');
-}
-
-module.exports = {
-  meta: {
-    type: 'problem',
-
-    docs: {
-      description: 'check for .data typecasts',
-      category: 'Possible Errors',
-    },
-    fixable: 'code',
-    schema: []  // no options
-  },
-  create: function(context) {
-    return {
-      TaggedTemplateExpression(node) {
-        const isLitHtmlCall = isLitHtmlTemplateCall(node);
-        if (!isLitHtmlCall) {
-          return;
-        }
-
-        for (const indexOfDataSetterCall of findIndexOfDataSetterUsageForNode(node)) {
-          const dataUsageHasTypeCast = dataSetterUsesTypeCast(node, indexOfDataSetterCall);
-          if (!dataUsageHasTypeCast) {
-            context.report({node, message: 'LitHtml .data=${} calls must be typecast (.data=${{...} as X}).'});
-            continue;
-          }
-
-          if (!dataSetterAsUsesInterface(node, indexOfDataSetterCall)) {
-            context.report({
-              node,
-              message:
-                  'LitHtml .data=${} calls must be typecast to a type reference (e.g. `as FooInterface`), not a literal.'
-            });
-          }
-        }
-      },
-    };
-  }
-};

package/scripts/eslint_rules/tests/lit_html_data_as_type_test.js

@@ -1,81 +0,0 @@
-// Copyright 2020 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.
-'use strict';
-
-const rule = require('../lib/lit_html_data_as_type.js');
-const ruleTester = new (require('eslint').RuleTester)({
-  parserOptions: {ecmaVersion: 9, sourceType: 'module'},
-  parser: require.resolve('@typescript-eslint/parser'),
-});
-
-ruleTester.run('lit_html_data_as_type', rule, {
-  valid: [
-    {
-      code: 'LitHtml.html`<devtools-foo .data=${{name: "jack"} as FooData}>`',
-      filename: 'front_end/components/test.ts',
-    },
-    {
-      code: 'html`<devtools-foo .data=${{name: "jack"} as FooData}>`',
-      filename: 'front_end/components/test.ts',
-    },
-    {
-      code: 'html`<p><span></span><devtools-foo .data=${{name: "jack"} as FooData}></devtools-foo></p>`',
-      filename: 'front_end/components/test.ts',
-    },
-    {
-      code: 'notLitHtmlCall`<devtools-blah .data=${"FOO"}></devtools-blah>`',
-      filename: 'front_end/components/test.ts',
-    },
-    {
-      code: 'Foo.blah`<devtools-blah .data=${"FOO"}></devtools-blah>`',
-      filename: 'front_end/components/test.ts',
-    },
-  ],
-  invalid: [
-    {
-      code: 'LitHtml.html`<devtools-foo .data=${{name: "jack"}}>`',
-      filename: 'front_end/components/test.ts',
-      errors: [{message: 'LitHtml .data=${} calls must be typecast (.data=${{...} as X}).'}]
-    },
-    {
-      code: 'LitHtml.html`<devtools-foo .data=${{name: "jack"} as FooData} .data=${{name: "jack"}}>`',
-      filename: 'front_end/components/test.ts',
-      errors: [{message: 'LitHtml .data=${} calls must be typecast (.data=${{...} as X}).'}]
-    },
-    {
-      code: 'LitHtml.html`<devtools-foo .data=${{name: "jack"}} .data=${{name: "jack"}}>`',
-      filename: 'front_end/components/test.ts',
-      errors: [
-        {message: 'LitHtml .data=${} calls must be typecast (.data=${{...} as X}).'},
-        {message: 'LitHtml .data=${} calls must be typecast (.data=${{...} as X}).'}
-      ]
-    },
-    {
-      code: 'html`<p><span></span><devtools-foo .data=${{name: "jack"}}></devtools-foo></p>`',
-      filename: 'front_end/components/test.ts',
-      errors: [{message: 'LitHtml .data=${} calls must be typecast (.data=${{...} as X}).'}]
-    },
-    {
-      code: 'LitHtml.html`<devtools-foo .data=${{name: "jack"} as {name: string}}>`',
-      filename: 'front_end/components/test.ts',
-      errors: [{
-        message: 'LitHtml .data=${} calls must be typecast to a type reference (e.g. `as FooInterface`), not a literal.'
-      }]
-    },
-    {
-      code: 'html`<devtools-foo .data=${{name: "jack"} as {name: string}}>`',
-      filename: 'front_end/components/test.ts',
-      errors: [{
-        message: 'LitHtml .data=${} calls must be typecast to a type reference (e.g. `as FooInterface`), not a literal.'
-      }]
-    },
-    {
-      code: 'html`<devtools-foo some-other-attribute-first .data=${{name: "jack"} as {name: string}}>`',
-      filename: 'front_end/components/test.ts',
-      errors: [{
-        message: 'LitHtml .data=${} calls must be typecast to a type reference (e.g. `as FooInterface`), not a literal.'
-      }]
-    },
-  ]
-});