chrome-devtools-frontend 1.0.1362775 → 1.0.1376716

package/scripts/freestyler/eval/index.js

@@ -176,6 +176,7 @@ const API = {
 const viewState = {
   dataIds: [],
   dataId: null,
+  compareWithDataId: null,
   selectedExampleIndex: 0
 };
 
@@ -196,7 +197,7 @@ function createPointRadios({onChange, id, points, titleText, noBorder}) {
     padding-bottom: 4px;
   `);
   title.textContent = titleText;
-  container.appendChild(title);
+  container.append(title);
   for (const point of points) {
     const radioContainer = document.createElement('div');
     radioContainer.setAttribute('style', 'display: inline-flex; gap: 8px;');
@@ -213,9 +214,9 @@ function createPointRadios({onChange, id, points, titleText, noBorder}) {
     const label = document.createElement('label');
     label.setAttribute('for', `${point}-${id}`);
     label.textContent = point;
-    radioContainer.appendChild(radio);
-    radioContainer.appendChild(label);
-    container.appendChild(radioContainer);
+    radioContainer.append(radio);
+    radioContainer.append(label);
+    container.append(radioContainer);
   }
   return container;
 }
@@ -240,7 +241,7 @@ function createChatBubble({text, evaluationId, onEvaluationChange}) {
 
   const pointsContainer = document.createElement('div');
   pointsContainer.setAttribute('style', 'margin-top: 12px;');
-  pointsContainer.appendChild(createPointRadios({
+  pointsContainer.append(createPointRadios({
     points,
     titleText: 'Evaluation',
     id: evaluationId,
@@ -248,14 +249,14 @@ function createChatBubble({text, evaluationId, onEvaluationChange}) {
       onEvaluationChange(point);
     }
   }));
-  el.appendChild(pointsContainer);
+  el.append(pointsContainer);
   return el;
 }
 
-function renderExample(container, {onEvaluationChange}) {
+function renderExample(container, sourceMap, {onEvaluationChange}) {
   const exampleIds = Object.keys(viewState.examplesMap);
   const exampleId = exampleIds[viewState.selectedExampleIndex];
-  const requestResponses = viewState.examplesMap[exampleId];
+  const requestResponses = sourceMap[exampleId];
   container.innerHTML = '';
 
   let i = 0;
@@ -266,7 +267,7 @@ function renderExample(container, {onEvaluationChange}) {
       exampleId,
       requestResponseIndex: i,
     });
-    container.appendChild(createChatBubble({
+    container.append(createChatBubble({
       text,
       evaluationId,
       onEvaluationChange: point => {
@@ -285,7 +286,7 @@ function renderExample(container, {onEvaluationChange}) {
     border-radius: 12px;
   `);
   const finalEvaluationId = JSON.stringify({datasetTitle: viewState.dataId, exampleId});
-  finalResponseRatingContainer.appendChild(createPointRadios({
+  finalResponseRatingContainer.append(createPointRadios({
     points: ['Correct', 'Wrong'],
     titleText: 'The final answer is:',
     noBorder: true,
@@ -296,7 +297,7 @@ function renderExample(container, {onEvaluationChange}) {
       onEvaluationChange();
     }
   }));
-  container.appendChild(finalResponseRatingContainer);
+  container.append(finalResponseRatingContainer);
 }
 
 function renderExampleSelector(container, {onChange}) {
@@ -310,15 +311,38 @@ function renderExampleSelector(container, {onChange}) {
     option.selected = exampleId === exampleIds[viewState.selectedExampleIndex];
     option.textContent = exampleId;
     option.name = exampleId;
-    select.appendChild(option);
+    select.append(option);
   }
 
   select.selectedIndex = viewState.selectedExampleIndex;
   select.addEventListener('change', ev => {
     onChange(ev.target.selectedIndex);
   });
-  container.appendChild(label);
-  container.appendChild(select);
+  container.append(label);
+  container.append(select);
+}
+
+function createDataSetSelector(label, selectedId, onChange) {
+  const dataSelectorContainer = document.createElement('div');
+  const dataSelect = document.createElement('select');
+  viewState.dataIds.forEach(dataId => {
+    const option = document.createElement('option');
+    option.name = dataId;
+    option.textContent = dataId;
+    dataSelect.append(option);
+  });
+  dataSelect.selectedIndex = viewState.dataIds.findIndex(dataId => selectedId === dataId);
+  dataSelect.addEventListener('change', ev => {
+    onChange(ev);
+    document.startViewTransition(() => {
+      renderMainPage();
+    });
+  });
+  const dataSelectSpan = document.createElement('span');
+  dataSelectSpan.textContent = label;
+  dataSelectorContainer.append(dataSelectSpan);
+  dataSelectorContainer.append(dataSelect);
+  return dataSelectorContainer;
 }
 
 async function renderMainPage() {
@@ -327,6 +351,10 @@ async function renderMainPage() {
   container.setAttribute('style', 'padding-bottom: 24px;');
   const {examplesMap, metadata} = await API.getExamplesMap({title: viewState.dataId});
   viewState.examplesMap = examplesMap;
+  if (viewState.compareWithDataId) {
+    const {examplesMap} = await API.getExamplesMap({title: viewState.compareWithDataId});
+    viewState.compareWithExamplesMap = examplesMap;
+  }
   viewState.metadata = metadata;
   viewState.selectedExampleIndex = 0;
 
@@ -340,26 +368,13 @@ async function renderMainPage() {
   const heading = document.createElement('h1');
   heading.textContent = 'Freestyler Eval Tool';
 
-  const dataSelectorContainer = document.createElement('div');
-  const dataSelect = document.createElement('select');
-  viewState.dataIds.forEach(dataId => {
-    const option = document.createElement('option');
-    option.name = dataId;
-    option.textContent = dataId;
-    dataSelect.appendChild(option);
-  });
-  dataSelect.selectedIndex = viewState.dataIds.findIndex(dataId => viewState.dataId === dataId);
-  dataSelect.addEventListener('change', ev => {
+  const dataSelectorContainer = createDataSetSelector('Dataset: ', viewState.dataId, ev => {
     viewState.dataId = viewState.dataIds[ev.target.selectedIndex];
     viewState.selectedExampleIndex = 0;
-    document.startViewTransition(() => {
-      renderMainPage();
-    });
   });
-  const dataSelectSpan = document.createElement('span');
-  dataSelectSpan.textContent = 'Dataset: ';
-  dataSelectorContainer.appendChild(dataSelectSpan);
-  dataSelectorContainer.appendChild(dataSelect);
+  const compareWithDataSelectorContainer = createDataSetSelector('Compare with: ', viewState.compareWithDataId, ev => {
+    viewState.compareWithDataId = viewState.dataIds[ev.target.selectedIndex];
+  });
   const exampleSelectorContainer = document.createElement('div');
 
   const exportContainer = document.createElement('div');
@@ -371,7 +386,7 @@ async function renderMainPage() {
     const datasetId = viewState.dataId;
     exportContainer.innerHTML = '';
     const dialogContainer = document.createElement('div');
-    exportContainer.appendChild(dialogContainer);
+    exportContainer.append(dialogContainer);
 
     const evaluationIds = (Object.keys(evaluationState)).map(key => JSON.parse(key));
     const evaluationIdsForDataset = evaluationIds.filter(evaluationIdObj => evaluationIdObj.datasetTitle === datasetId);
@@ -416,10 +431,10 @@ async function renderMainPage() {
       await navigator.clipboard.writeText(csvText);
     });
 
-    resultsContainer.appendChild(resultsSummary);
-    resultsContainer.appendChild(resultsText);
-    exportContainer.appendChild(resultsContainer);
-    exportContainer.appendChild(exportButton);
+    resultsContainer.append(resultsSummary);
+    resultsContainer.append(resultsText);
+    exportContainer.append(resultsContainer);
+    exportContainer.append(exportButton);
   }
 
   const exampleDescriptionContainer = document.createElement('div');
@@ -430,26 +445,42 @@ async function renderMainPage() {
     exampleDescriptionContainer.innerHTML = '';
     const exampleHeading = document.createElement('h2');
     exampleHeading.textContent = exampleId;
-    exampleDescriptionContainer.appendChild(exampleHeading);
+    exampleDescriptionContainer.append(exampleHeading);
     const explanationContainer = document.createElement('div');
     const explanation = metadata.find(data => data.exampleId === exampleId)?.explanation;
     explanationContainer.innerHTML = explanation ? `Evaluation tip: <strong>${explanation}</strong>` : '';
-    exampleDescriptionContainer.appendChild(explanationContainer);
+    exampleDescriptionContainer.append(explanationContainer);
   }
 
-  header.appendChild(heading);
-  header.appendChild(dataSelectorContainer);
-  header.appendChild(exampleSelectorContainer);
-  header.appendChild(exportContainer);
-  header.appendChild(exampleDescriptionContainer);
-  container.appendChild(header);
+  header.append(heading);
+  header.append(dataSelectorContainer);
+  header.append(compareWithDataSelectorContainer);
+  header.append(exampleSelectorContainer);
+  header.append(exportContainer);
+  header.append(exampleDescriptionContainer);
+  container.append(header);
+
+  const gridContainer = document.createElement('div');
+  gridContainer.style = `
+    display: flex;
+    flex-direction: row;
+  `;
+  container.append(gridContainer);
 
   const exampleContainer = document.createElement('div');
-  container.appendChild(exampleContainer);
+  gridContainer.append(exampleContainer);
+
+  const compareWithExampleContainer = document.createElement('div');
+  gridContainer.append(compareWithExampleContainer);
 
   viewState.handleExampleChange = () => {
     document.startViewTransition(() => {
-      renderExample(exampleContainer, {onEvaluationChange: () => renderResultsTable()});
+      renderExample(exampleContainer, viewState.examplesMap, {onEvaluationChange: () => renderResultsTable()});
+      if (viewState.compareWithDataId) {
+        renderExample(
+            compareWithExampleContainer, viewState.compareWithExamplesMap,
+            {onEvaluationChange: () => renderResultsTable()});
+      }
       renderExampleDescription();
       renderExampleSelector(exampleSelectorContainer, {
         onChange: selectedExampleIndex => {
@@ -461,7 +492,12 @@ async function renderMainPage() {
   };
 
   renderResultsTable();
-  renderExample(exampleContainer, {onEvaluationChange: () => renderResultsTable()});
+  renderExample(exampleContainer, viewState.examplesMap, {onEvaluationChange: () => renderResultsTable()});
+  if (viewState.compareWithDataId) {
+    renderExample(
+        compareWithExampleContainer, viewState.compareWithExamplesMap,
+        {onEvaluationChange: () => renderResultsTable()});
+  }
   renderExampleDescription();
   renderExampleSelector(exampleSelectorContainer, {
     onChange: selectedExampleIndex => {

package/scripts/protocol_typescript/protocol_dts_generator.ts

@@ -9,7 +9,7 @@
 import * as fs from 'fs';
 import * as path from 'path';
 
-import {type Protocol} from './protocol_schema.js';
+import type {Protocol} from './protocol_schema.js';
 
 const PROTOCOL_JSON_PATH = path.resolve(
     __dirname, path.join('..', '..', 'third_party', 'blink', 'public', 'devtools_protocol', 'browser_protocol.json'));

package/scripts/stylelint_rules/lib/use_theme_colors.js

@@ -221,8 +221,9 @@ module.exports = stylelint.createPlugin(RULE_NAME, function(primary, secondary,
         /**
          * If we're checking a border-{top/bottom/left/right}, we need to regex
          * out just the color part of the declaration to check.
+         * We also apply the same check for outline.
          */
-        if (borderCombinedDeclarations.has(declaration.prop)) {
+        if (borderCombinedDeclarations.has(declaration.prop) || declaration.prop === 'outline') {
           // This is a pretty basic regex but it should split border-bottom:
           // var(--foo) solid var(--bar) into the three parts we need.
           // If this rule picks up false positives, we can improve this regex.

package/scripts/stylelint_rules/tests/use_theme_colors_test.js

@@ -307,6 +307,22 @@ describe('use_theme_colors', () => {
     assert.lengthOf(warnings, 0);
   });
 
+  it('does not error when there is a var for the outline width', async () => {
+    const warnings = await lint(
+        'p { outline: var(--button-border-size) solid var(--color-primary); }',
+    );
+
+    assert.lengthOf(warnings, 0);
+  });
+
+  it('does not error when the outline is set to none', async () => {
+    const warnings = await lint(
+        'p { outline: none; }',
+    );
+
+    assert.lengthOf(warnings, 0);
+  });
+
   it('does not error when using --sys-elevation for box-shadow', async () => {
     const warnings = await lint(
         'p { box-shadow: var(--sys-elevation-level1); }',

package/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "./config/typescript/tsconfig.base.json",
   "compilerOptions": {
+    "allowUmdGlobalAccess": true,
     "lib": [
       "esnext",
       "dom",
@@ -9,7 +10,16 @@
       "webworker.iterable"
     ],
     "outDir": "ignored-for-vscode",
-    "allowUmdGlobalAccess": true
+    "plugins": [
+      {
+        "name": "ts-lit-plugin",
+        "rules": {
+          "no-complex-attribute-binding": "off",
+          "no-missing-import": "error",
+          "no-unknown-tag-name": "error"
+        }
+      }
+    ]
   },
   "include": [
     "front_end/",

package/docs/add_uma_metrics.md

@@ -1,41 +0,0 @@
-# How to add UMA metrics in DevTools frontend
-
-Decide on the metric (an [enumerated histogram](https://chromium.googlesource.com/chromium/src/tools/+/HEAD/metrics/histograms/README.md#enum-histograms) or an [action](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/core/host/UserMetrics.ts;l=380) to be logged to generic `DevTools.ActionTaken` histogram)
-
-1. For enumerated histogram (We use this when there are multiple related states that should be analyzed jointly. For example, we might want to know the source of an action like where it is performed from)
-    1. Choose a name for the new histogram prefixed with `DevTools`, for example, `DevTools.ColorPickerOpenedFrom`.
-    2. Decide on the values for the different enums you want to log, for example, `StylesPane` and `SourcesPanel` for `DevTools.ColorPickerOpenedFrom` histogram.
-2. For actions
-    1. Decide on the name of the action, for example, `DeviceModeEnabled`.
-
-## Tracking an enumerated histogram
-
-1. Implement metric collection in devtools-frontend and create a CL. (Example [CL](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3998783))
-    1. Add the new histogram name to the <code>[EnumeratedHistogram](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/core/host/InspectorFrontendHostAPI.ts;l=351?q=InspectorFrontendHostAPI.ts)</code> enum.
-    2. Add the same histogram name to the EnumeratedHistogram object in <code>[devtools_compatibility.js](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/devtools_compatibility.js;l=396?q=devtools_compatibil)</code> file.
-    3. Create a new function in <code>[UserMetrics.ts](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/core/host/UserMetrics.ts;l=351)</code> with an enum parameter that corresponds to the possible values like <code>colorPickerOpenedFrom(type: ColorPickerOpenedFrom): void</code> that calls <code>InspectorFrontendHostInstance.recordEnumeratedHistogram</code>.
-    4. Call the new function from <code>Host.userMetrics</code> in the places that you want to log the event.
-    5. Create the CL.
-2. Update [histograms.xml](https://source.corp.google.com/h/chromium/chromium/src/+/main:tools/metrics/histograms/metadata/dev/histograms.xml) and [enums.xml](https://source.chromium.org/chromium/chromium/src/+/main:tools/metrics/histograms/enums.xml;l=26267?q=tools%2Fmetrics%2Fhistograms%2Fenums.xml) in the Chromium codebase.
-    1. Add a new enum in [enums.xml](https://source.chromium.org/chromium/chromium/src/+/main:tools/metrics/histograms/enums.xml;l=26267?q=tools%2Fmetrics%2Fhistograms%2Fenums.xml) with values corresponding to the values in the frontend with name <code>DevTools&lt;HISTOGRAM_NAME></code> and make sure that enum values 1-1 map to the values you’ve defined in the frontend.
-    2. Add the new histogram definition in [histograms.xml](https://source.corp.google.com/h/chromium/chromium/src/+/main:tools/metrics/histograms/metadata/dev/histograms.xml) and set enum name to be the enum you've defined in the 1st step. Make sure that histogram name is the same with the name you've used in the frontend change.
-    3. Create the CL.
-
-## Tracking an action
-
-1. Implement metric collection in devtools-frontend and create a CL. (Example [CL](https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/3998783))
-    1. Add the action you want to track to the <code>[Action](https://source.chromium.org/chromium/chromium/src/+/main:third_party/devtools-frontend/src/front_end/core/host/UserMetrics.ts;l=379)</code> enum in <code>UserMetrics.ts.</code>
-    2. Call <code>Host.userMetrics.actionTaken(Action.YOUR_ACTION)</code> in the places you want to the event.
-    3. Create the CL.
-2. Update enums in the Chromium side in <code>[tools/metrics/histograms/enums.xml](https://source.chromium.org/chromium/chromium/src/+/main:tools/metrics/histograms/enums.xml;l=26267?q=tools%2Fmetrics%2Fhistograms%2Fenums.xml)</code>.
-    1. Add the new action to the <code>DevToolsAction</code> enum.
-    2. Create the CL.
-
-
-## Metrics Dashboard
-
-After the both CLs are landed we expect your histogram or action data to be available in [UMA](http://uma/p/chrome/timeline_v2). For seeing them:
-
-*   Select the channel you want to dive into.
-*   Select the platforms you are interested in (for us, it is Linux, MacOS, Windows, ChromeOS and Lacros)
-*   Add the metric you want to see: either the histogram name you’ve newly added `DevTools.ColorPickerOpenedFrom` or the generic histogram for action tracking, `DevTools.ActionTaken`.

package/docs/uma_metrics.md

@@ -1,23 +0,0 @@
-# UMA metrics in DevTools frontend
-
-(Googlers only) Generally, the histogram or action data is available in the Timeline category of the [UMA](http://uma/) page.
-
-*   Select the channel you want to dive into.
-*   Select the platforms you are interested in (for us, it is Linux, MacOS, Windows, ChromeOS and Lacros)
-*   Add the metric you want to see, for example the generic histogram for action tracking, `DevTools.ActionTaken`.
-
-## General histograms
-
-* `DevTools.ActionTaken` is a generic histogram for tracking actions performed via the DevTools front-end.
-* `DevTools.PanelShown` counts how often a given panel or tab is shown in the DevTools front-end.
-
-## Histograms for the Workspaces feature
-
-* `DevTools.ActionTaken` records `AddFileSystemToWorkspace` (_Add Filesystem to Workspace_), `RemoveFileSystemFromWorkspace`
-  (_Remove Filesystem from Workspace_) and `FileSystemSourceSelected` (_Filesystem source selected_) according to developer
-  interactions with the _Filesystem_ tab in the _Sources_ panels sidebar.
-* `DevTools.Workspaces.PopulateWallClockTime` records the wall clock time in milliseconds elapsed while populating a project
-  folder in the workspace.
-* `DevTools.SidebarPaneShown` records the `navigator-files` (_Sources - Filesystem_) enum whenever the _Filesystem_ tab is
-  revealed in the _Sources_ panels sidebar.
-

package/front_end/Images/src/spark.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-  <path d="M10.0013 18.3307C10.0013 17.178 9.78255 16.0946 9.34505 15.0807C8.90755 14.0668 8.3138 13.1849 7.5638 12.4349C6.8138 11.6849 5.93186 11.0911 4.91797 10.6536C3.90408 10.2161 2.82075 9.9974 1.66797 9.9974C2.82075 9.9974 3.90408 9.77865 4.91797 9.34115C5.93186 8.90365 6.8138 8.3099 7.5638 7.5599C8.3138 6.8099 8.90755 5.92795 9.34505 4.91406C9.78255 3.90017 10.0013 2.81684 10.0013 1.66406C10.0013 2.81684 10.2201 3.90017 10.6576 4.91406C11.0951 5.92795 11.6888 6.8099 12.4388 7.5599C13.1888 8.3099 14.0707 8.90365 15.0846 9.34115C16.0985 9.77865 17.1819 9.9974 18.3346 9.9974C17.1819 9.9974 16.0985 10.2161 15.0846 10.6536C14.0707 11.0911 13.1888 11.6849 12.4388 12.4349C11.6888 13.1849 11.0951 14.0668 10.6576 15.0807C10.2201 16.0946 10.0013 17.178 10.0013 18.3307Z" fill="#1B6EF3"/>
-</svg>

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