chrome-devtools-frontend 1.0.1386602 → 1.0.1402249

package/front_end/ui/components/render_coordinator/RenderCoordinator.ts

@@ -1,331 +0,0 @@
-// Copyright 2021 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.
-
-/**
- * Components don't orchestrate their DOM updates in a wider context
- * (i.e. the host frame's document), which leads to interleaved reading
- * and writing of layout-centric values, e.g. clientHeight, scrollTop etc.
- *
- * This helper to ensure that we do reads, writes, and scrolls at the
- * correct point in the frame lifecycle. It groups reads to the start of a
- * frame, where we can assume layout-centric values are available on the
- * basis of the last completed frame, and then it runs all writes
- * afterwards. In the event that a read / write / scroll callback contains
- * calls for more read / write / scroll calls, such calls will be scheduled
- * for the next available frame.
- */
-
-interface CoordinatorCallback<T> {
-  (): T|PromiseLike<T>;
-}
-
-class WorkItem<T> {
-  readonly promise: Promise<T>;
-  readonly trigger: () => void;
-  readonly cancel: (e: Error) => void;
-  readonly label: string;
-  #handler: CoordinatorCallback<T>;
-
-  constructor(label: string, initialHandler: CoordinatorCallback<T>) {
-    const {promise, resolve, reject} = Promise.withResolvers<void>();
-    this.promise = promise.then(() => this.#handler());
-    this.trigger = resolve;
-    this.cancel = reject;
-    this.label = label;
-    this.#handler = initialHandler;
-  }
-
-  set handler(newHandler: CoordinatorCallback<T>) {
-    this.#handler = newHandler;
-  }
-}
-
-interface CoordinatorLogEntry {
-  time: number;
-  value: string;
-}
-
-const enum ACTION {
-  READ = 'read',
-  WRITE = 'write',
-}
-
-export class RenderCoordinatorQueueEmptyEvent extends Event {
-  static readonly eventName = 'renderqueueempty';
-  constructor() {
-    super(RenderCoordinatorQueueEmptyEvent.eventName);
-  }
-}
-
-export class RenderCoordinatorNewFrameEvent extends Event {
-  static readonly eventName = 'newframe';
-  constructor() {
-    super(RenderCoordinatorNewFrameEvent.eventName);
-  }
-}
-
-let renderCoordinatorInstance: RenderCoordinator;
-
-const UNNAMED_READ = 'Unnamed read';
-const UNNAMED_WRITE = 'Unnamed write';
-const UNNAMED_SCROLL = 'Unnamed scroll';
-const DEADLOCK_TIMEOUT = 1500;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-(globalThis as any).__getRenderCoordinatorPendingFrames = function(): number {
-  return RenderCoordinator.pendingFramesCount();
-};
-
-export class RenderCoordinator extends EventTarget {
-  static instance({forceNew = false} = {}): RenderCoordinator {
-    if (!renderCoordinatorInstance || forceNew) {
-      renderCoordinatorInstance = new RenderCoordinator();
-    }
-
-    return renderCoordinatorInstance;
-  }
-
-  static pendingFramesCount(): number {
-    if (!renderCoordinatorInstance) {
-      throw new Error('No render coordinator instance found.');
-    }
-
-    return renderCoordinatorInstance.hasPendingWork() ? 1 : 0;
-  }
-
-  // Toggle on to start tracking. You must call takeRecords() to
-  // obtain the records. Please note: records are limited by maxRecordSize below.
-  observe = false;
-  recordStorageLimit = 100;
-
-  // If true, only log activity with an explicit label.
-  // This does not affect logging frames or queue empty events.
-  observeOnlyNamed = true;
-
-  readonly #logInternal: CoordinatorLogEntry[] = [];
-
-  #pendingReaders: WorkItem<unknown>[] = [];
-  #pendingWriters: WorkItem<unknown>[] = [];
-  #scheduledWorkId = 0;
-
-  hasPendingWork(): boolean {
-    return this.#pendingReaders.length !== 0 || this.#pendingWriters.length !== 0;
-  }
-
-  done(options?: {waitForWork: boolean}): Promise<void> {
-    if (!this.hasPendingWork() && !options?.waitForWork) {
-      this.#logIfEnabled('[Queue empty]');
-      return Promise.resolve();
-    }
-    return new Promise(resolve => this.addEventListener('renderqueueempty', () => resolve(), {once: true}));
-  }
-
-  // Schedules a 'read' job which is being executed within an animation frame
-  // before all 'write' jobs. If multiple jobs are scheduled with the same
-  // non-empty label, only the latest callback would be executed. Such
-  // invocations would return the same promise that will resolve to the value of
-  // the latest callback.
-  async read<T>(callback: CoordinatorCallback<T>): Promise<T>;
-  async read<T>(label: string, callback: CoordinatorCallback<T>): Promise<T>;
-  async read<T>(labelOrCallback: CoordinatorCallback<T>|string, callback?: CoordinatorCallback<T>): Promise<T> {
-    if (typeof labelOrCallback === 'string') {
-      if (!callback) {
-        throw new Error('Read called with label but no callback');
-      }
-      return this.#enqueueHandler(ACTION.READ, labelOrCallback, callback) as Promise<T>;
-    }
-
-    return this.#enqueueHandler(ACTION.READ, UNNAMED_READ, labelOrCallback) as Promise<T>;
-  }
-
-  // Schedules a 'write' job which is being executed within an animation frame
-  // after all 'read' and 'scroll' jobs. If multiple jobs are scheduled with
-  // the same non-empty label, only the latest callback would be executed. Such
-  // invocations would return the same promise that will resolve when the latest callback is run.
-  async write<T>(callback: CoordinatorCallback<T>): Promise<T>;
-  async write<T>(label: string, callback: CoordinatorCallback<T>): Promise<T>;
-  async write<T>(labelOrCallback: CoordinatorCallback<T>|string, callback?: CoordinatorCallback<T>): Promise<T> {
-    if (typeof labelOrCallback === 'string') {
-      if (!callback) {
-        throw new Error('Write called with label but no callback');
-      }
-      return this.#enqueueHandler(ACTION.WRITE, labelOrCallback, callback) as Promise<T>;
-    }
-
-    return this.#enqueueHandler(ACTION.WRITE, UNNAMED_WRITE, labelOrCallback) as Promise<T>;
-  }
-
-  findPendingWrite(label: string): Promise<void>|undefined {
-    return this.#enqueueHandler(ACTION.WRITE, label);
-  }
-
-  takeRecords(): CoordinatorLogEntry[] {
-    const logs = [...this.#logInternal];
-    this.#logInternal.length = 0;
-    return logs;
-  }
-
-  /**
-   * We offer a convenience function for scroll-based activity, but often triggering a scroll
-   * requires a layout pass, thus it is better handled as a read activity, i.e. we wait until
-   * the layout-triggering work has been completed then it should be possible to scroll without
-   * first forcing layout.  If multiple jobs are scheduled with the same non-empty label, only
-   * the latest callback would be executed. Such invocations would return the same promise that
-   * will resolve when the latest callback is run.
-   */
-  async scroll<T>(callback: CoordinatorCallback<T>): Promise<T>;
-  async scroll<T>(label: string, callback: CoordinatorCallback<T>): Promise<T>;
-  async scroll<T>(labelOrCallback: CoordinatorCallback<T>|string, callback?: CoordinatorCallback<T>): Promise<T> {
-    if (typeof labelOrCallback === 'string') {
-      if (!callback) {
-        throw new Error('Scroll called with label but no callback');
-      }
-      return this.#enqueueHandler(ACTION.READ, labelOrCallback, callback) as Promise<T>;
-    }
-
-    return this.#enqueueHandler(ACTION.READ, UNNAMED_SCROLL, labelOrCallback) as Promise<T>;
-  }
-
-  #enqueueHandler<T>(action: ACTION, label: string, callback?: CoordinatorCallback<T>): Promise<T>|undefined {
-    const hasName = ![UNNAMED_READ, UNNAMED_WRITE, UNNAMED_SCROLL].includes(label);
-    label = `${action === ACTION.READ ? '[Read]' : '[Write]'}: ${label}`;
-
-    let workItems = null;
-    switch (action) {
-      case ACTION.READ:
-        workItems = this.#pendingReaders;
-        break;
-
-      case ACTION.WRITE:
-        workItems = this.#pendingWriters;
-        break;
-
-      default:
-        throw new Error(`Unknown action: ${action}`);
-    }
-
-    let workItem = hasName ? workItems.find(w => w.label === label) as WorkItem<T>| undefined : undefined;
-    if (callback) {
-      if (!workItem) {
-        workItem = new WorkItem<T>(label, callback);
-        workItems.push(workItem);
-      } else {
-        // We are always using the latest handler, so that we don't end up with a
-        // stale results. We are reusing the promise to avoid blocking the first invocation, when
-        // it is being "overridden" by another one.
-        workItem.handler = callback;
-      }
-
-      this.#scheduleWork();
-    }
-    return workItem?.promise;
-  }
-
-  #scheduleWork(): void {
-    const hasScheduledWork = this.#scheduledWorkId !== 0;
-    if (hasScheduledWork) {
-      return;
-    }
-
-    this.#scheduledWorkId = requestAnimationFrame(async () => {
-      if (!this.hasPendingWork()) {
-        // All pending work has completed.
-        // The events dispatched below are mostly for testing contexts.
-        // The first is for cases where we have a direct reference to
-        // the render coordinator. The second is for other test contexts
-        // where we don't, and instead we listen for an event on the window.
-        this.dispatchEvent(new RenderCoordinatorQueueEmptyEvent());
-        window.dispatchEvent(new RenderCoordinatorQueueEmptyEvent());
-
-        this.#logIfEnabled('[Queue empty]');
-        this.#scheduledWorkId = 0;
-        return;
-      }
-
-      this.dispatchEvent(new RenderCoordinatorNewFrameEvent());
-      this.#logIfEnabled('[New frame]');
-
-      const readers = this.#pendingReaders;
-      this.#pendingReaders = [];
-      const writers = this.#pendingWriters;
-      this.#pendingWriters = [];
-
-      // Start with all the readers and allow them
-      // to proceed together.
-      for (const reader of readers) {
-        this.#logIfEnabled(reader.label);
-        reader.trigger();
-      }
-
-      // Wait for them all to be done.
-      try {
-        await Promise.race([
-          Promise.all(readers.map(r => r.promise)),
-          new Promise((_, reject) => {
-            window.setTimeout(
-                () => reject(new Error(`Readers took over ${DEADLOCK_TIMEOUT}ms. Possible deadlock?`)),
-                DEADLOCK_TIMEOUT);
-          }),
-        ]);
-      } catch (err) {
-        this.#rejectAll(readers, err);
-      }
-
-      // Next do all the writers as a block.
-      for (const writer of writers) {
-        this.#logIfEnabled(writer.label);
-        writer.trigger();
-      }
-
-      // And wait for them to be done, too.
-      try {
-        await Promise.race([
-          Promise.all(writers.map(w => w.promise)),
-          new Promise((_, reject) => {
-            window.setTimeout(
-                () => reject(new Error(`Writers took over ${DEADLOCK_TIMEOUT}ms. Possible deadlock?`)),
-                DEADLOCK_TIMEOUT);
-          }),
-        ]);
-      } catch (err) {
-        this.#rejectAll(writers, err);
-      }
-
-      // Since there may have been more work requested in
-      // the callback of a reader / writer, we attempt to schedule
-      // it at this point.
-      this.#scheduledWorkId = 0;
-      this.#scheduleWork();
-    });
-  }
-
-  #rejectAll(handlers: WorkItem<unknown>[], error: Error): void {
-    for (const handler of handlers) {
-      handler.cancel(error);
-    }
-  }
-
-  cancelPending(): void {
-    const error = new Error();
-    this.#rejectAll(this.#pendingReaders, error);
-    this.#rejectAll(this.#pendingWriters, error);
-  }
-
-  #logIfEnabled(value: string|undefined): void {
-    if (!this.observe || !value) {
-      return;
-    }
-    const hasNoName = value.endsWith(UNNAMED_READ) || value.endsWith(UNNAMED_WRITE) || value.endsWith(UNNAMED_SCROLL);
-    if (hasNoName && this.observeOnlyNamed) {
-      return;
-    }
-
-    this.#logInternal.push({time: performance.now(), value});
-
-    // Keep the log at the log size.
-    while (this.#logInternal.length > this.recordStorageLimit) {
-      this.#logInternal.shift();
-    }
-  }
-}

package/front_end/ui/legacy/HistoryInput.ts

@@ -1,61 +0,0 @@
-// Copyright (c) 2015 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 {Keys} from './KeyboardShortcut.js';
-import {registerCustomElement} from './UIUtils.js';
-
-let cachedConstructor: (() => Element)|null = null;
-
-export class HistoryInput extends HTMLInputElement {
-  private history: string[];
-  private historyPosition: number;
-
-  constructor() {
-    super();
-    this.history = [''];
-    this.historyPosition = 0;
-    this.addEventListener('keydown', this.onKeyDown.bind(this), false);
-    this.addEventListener('input', this.onInput.bind(this), false);
-  }
-
-  static create(): HistoryInput {
-    if (!cachedConstructor) {
-      cachedConstructor = registerCustomElement('input', 'history-input', HistoryInput);
-    }
-
-    return cachedConstructor() as HistoryInput;
-  }
-
-  private onInput(_event: Event): void {
-    if (this.history.length === this.historyPosition + 1) {
-      this.history[this.history.length - 1] = this.value;
-    }
-  }
-
-  private onKeyDown(ev: Event): void {
-    const event = (ev as KeyboardEvent);
-    if (event.keyCode === Keys.Up.code) {
-      this.historyPosition = Math.max(this.historyPosition - 1, 0);
-      this.value = this.history[this.historyPosition];
-      this.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
-      event.consume(true);
-    } else if (event.keyCode === Keys.Down.code) {
-      this.historyPosition = Math.min(this.historyPosition + 1, this.history.length - 1);
-      this.value = this.history[this.historyPosition];
-      this.dispatchEvent(new Event('input', {bubbles: true, cancelable: true}));
-      event.consume(true);
-    } else if (event.keyCode === Keys.Enter.code) {
-      this.saveToHistory();
-    }
-  }
-
-  private saveToHistory(): void {
-    if (this.history.length > 1 && this.history[this.history.length - 2] === this.value) {
-      return;
-    }
-    this.history[this.history.length - 1] = this.value;
-    this.historyPosition = this.history.length - 1;
-    this.history.push('');
-  }
-}

package/front_end/ui/legacy/components/perf_ui/.eslintrc.js

@@ -1,18 +0,0 @@
-// Copyright 2023 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.
-
-const path = require('path');
-const rulesDirPlugin = require('eslint-plugin-rulesdir');
-rulesDirPlugin.RULES_DIR = path.join(__dirname, '..', '..', '..', '..', '..', 'scripts', 'eslint_rules', 'lib');
-
-module.exports = {
-  rules : {
-    // Enable tracking of canvas save() and
-    // restore() calls to try and catch bugs. Only
-    // enabled in this folder because it is an
-    // expensive rule to run and we do not need it
-    // for any code that doesn't use Canvas.
-    'rulesdir/canvas_context_tracking' : 'error',
-  }
-};

package/front_end/ui/legacy/radioButton.css

@@ -1,32 +0,0 @@
-/*
- * Copyright (c) 2014 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.
- */
-
-::slotted(input.dt-radio-button) {
-  height: 17px;
-  width: 17px;
-  min-width: 17px;
-  border-radius: 8px;
-  vertical-align: middle;
-  margin: 0 5px 5px 0;
-  accent-color: var(--sys-color-primary-bright);
-  color: var(--sys-color-on-primary);
-}
-
-::slotted(input.dt-radio-button:focus) {
-  box-shadow: var(--legacy-focus-ring-active-shadow);
-}
-
-@media (forced-colors: active) {
-  ::slotted(input.dt-radio-button) {
-    --gradient-start: ButtonFace;
-    --gradient-end: ButtonFace;
-  }
-
-  ::slotted(input.dt-radio-button:checked) {
-    --gradient-start: Highlight;
-    --gradient-end: Highlight;
-  }
-}

package/front_end/ui/legacy/slider.css

@@ -1,51 +0,0 @@
-/*
- * Copyright 2016 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.
- */
-
-.dt-range-input {
-  appearance: none;
-  margin: 0;
-  padding: 0;
-  height: 10px;
-  width: 88px;
-  outline: none;
-  background: none;
-}
-
-.dt-range-input::-webkit-slider-thumb,
-.-theme-preserve {
-  appearance: none;
-  margin: 0;
-  padding: 0;
-  border: 0;
-  width: 12px;
-  height: 12px;
-  margin-top: -5px;
-  border-radius: 50%;
-  background-color: var(--sys-color-primary);
-}
-
-.dt-range-input::-webkit-slider-runnable-track {
-  appearance: none;
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 2px;
-  background-color: var(--sys-color-surface-variant);
-}
-
-.dt-range-input:focus::-webkit-slider-thumb {
-  box-shadow: 0 0 0 2px var(--sys-color-inverse-primary);
-}
-
-.dt-range-input:disabled::-webkit-slider-thumb {
-  background-color: var(--sys-color-state-disabled);
-}
-
-@media (forced-colors: active) {
-  .dt-range-input {
-    forced-color-adjust: none;
-  }
-}

package/front_end/ui/lit-html/static.test.ts

@@ -1,153 +0,0 @@
-// Copyright 2019 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 i18nRaw from '../../third_party/i18n/i18n.js';
-
-import * as LitHtml from './lit-html.js';
-
-const {html} = LitHtml;
-
-const templateArray = (value: string[]) => {
-  // We assume here it's okay to lose the `raw` value from the TemplateStringsArray
-  // for the purposes of testing.
-  return value as unknown as TemplateStringsArray;
-};
-
-describe('Static', () => {
-  describe('flattenTemplate', () => {
-    it('does not flatten template strings with no statics or values', () => {
-      const content = LitHtml.flattenTemplate`No update needed`;
-      assert.deepStrictEqual(content.strings, templateArray(['No update needed']));
-      assert.deepStrictEqual(content.valueMap, []);
-    });
-
-    it('does not flatten template strings with just values', () => {
-      const content = LitHtml.flattenTemplate`Just ${1} value`;
-      assert.deepStrictEqual(content.strings, templateArray(['Just ', ' value']));
-      assert.deepStrictEqual(content.valueMap, [true]);
-    });
-
-    it('does flatten template strings with statics', () => {
-      const tag = LitHtml.literal`div`;
-      const content = LitHtml.flattenTemplate`<${tag}>Foo</${tag}>`;
-      assert.deepStrictEqual(content.strings, templateArray(['<div>Foo</div>']));
-      assert.deepStrictEqual(content.valueMap, [false, false]);
-    });
-
-    it('does flatten template strings with statics but leaves values alone', () => {
-      const tag = LitHtml.literal`div`;
-      const name = 'Everyone!';
-      const content = LitHtml.flattenTemplate`<${tag}>Hello, ${name}!</${tag}>`;
-      assert.deepStrictEqual(content.strings, templateArray(['<div>Hello, ', '!</div>']));
-      assert.deepStrictEqual(content.valueMap, [false, true, false]);
-    });
-
-    it('ignores data values', () => {
-      const tag = LitHtml.literal`div`;
-      const name = 'everyone!';
-      const content = LitHtml.flattenTemplate`<${tag} .data={{x: 1}}>Hello, ${name}!</${tag}>`;
-      assert.deepStrictEqual(content.strings, templateArray(['<div .data={{x: 1}}>Hello, ', '!</div>']));
-      assert.deepStrictEqual(content.valueMap, [false, true, false]);
-    });
-
-    it('flattens multiple values', () => {
-      const tag = LitHtml.literal`div`;
-      const message = 'Hello, everyone!';
-      const content = LitHtml.flattenTemplate`<${tag}>${1}${2}${3}, ${message}! ${'Static value'}!</${tag}>`;
-      assert.deepStrictEqual(content.strings, templateArray(['<div>', '', '', ', ', '! ', '!</div>']));
-      assert.deepStrictEqual(content.valueMap, [false, true, true, true, true, true, false]);
-    });
-  });
-
-  describe('rendering', () => {
-    it('renders non-statics', () => {
-      const tmpl = html`Hello, world ${123}!`;
-      const target = document.createElement('div');
-      LitHtml.render(tmpl, target, {host: this});
-
-      assert.strictEqual(target.innerText, 'Hello, world 123!');
-    });
-
-    it('renders static tags', () => {
-      const tag = LitHtml.literal`div`;
-      const tmpl = html`<${tag}>Hello, world!</${tag}>`;
-      const target = document.createElement('section');
-      LitHtml.render(tmpl, target, {host: this});
-
-      assert.strictEqual(target.innerText, 'Hello, world!');
-      assert.isNotNull(target.querySelector('div'));
-    });
-
-    it('renders multiple', () => {
-      const tag = LitHtml.literal`div`;
-      const message = 'Hello, everyone!';
-      const tmpl = html`<${tag} .data={{x: 1}}>${1}${2}${3}, ${message}! ${'Static value'}!</${tag}>`;
-
-      const target = document.createElement('div');
-      LitHtml.render(tmpl, target, {host: this});
-
-      assert.strictEqual(target.innerText, '123, Hello, everyone!! Static value!');
-      assert.isNotNull(target.querySelector('div'));
-    });
-
-    it('renders dynamic literals', () => {
-      const tag1 = LitHtml.literal`div`;
-      const tag2 = LitHtml.literal`p`;
-      const tmpls = [tag1, tag2].map(tag => {
-        return html`<${tag}>I am ${tag.value}</${tag}>`;
-      });
-
-      const target = document.createElement('div');
-      LitHtml.render(tmpls, target, {host: this});
-
-      assert.strictEqual(target.innerText, 'I am divI am p');
-      assert.isNotNull(target.querySelector('div'));
-      assert.isNotNull(target.querySelector('p'));
-    });
-  });
-
-  describe('i18nTemplate', () => {
-    const uiStrings = {placeholder: 'a message with a {string} and {template} placeholder'};
-    let i18nInstance: i18nRaw.I18n.I18n;
-
-    beforeEach(() => {
-      i18nInstance = new i18nRaw.I18n.I18n(['en-US'], 'en-US');
-      i18nInstance.registerLocaleData('en-US', {});
-    });
-
-    function setLocale(locale: string) {
-      i18n.DevToolsLocale.DevToolsLocale.instance({
-        create: true,
-        data: {
-          settingLanguage: locale,
-          navigatorLanguage: locale,
-          lookupClosestDevToolsLocale: l => l,
-        },
-      });
-    }
-
-    it('localizes lit templates', () => {
-      const strings = i18nInstance.registerFileStrings('test.ts', uiStrings);
-      setLocale('en-US');
-
-      const result = LitHtml.i18nTemplate(strings, uiStrings.placeholder, {string: 'STRING', template: html`TEMPLATE`});
-      const element = LitHtml.render(result, document.createElement('div'), {host: this});
-      assert.deepStrictEqual(
-          (element.parentNode as HTMLDivElement).innerText, 'a message with a STRING and TEMPLATE placeholder');
-    });
-
-    it('localizes lit templates with translations', () => {
-      i18nInstance.registerLocaleData(
-          'de', {'test.ts | placeholder': {message: 'a message with a {template} and {string} placeholder'}});
-      const strings = i18nInstance.registerFileStrings('test.ts', uiStrings);
-      setLocale('de');
-
-      const result = LitHtml.i18nTemplate(strings, uiStrings.placeholder, {string: 'STRING', template: html`TEMPLATE`});
-      const element = LitHtml.render(result, document.createElement('div'), {host: this});
-      assert.deepStrictEqual(
-          (element.parentNode as HTMLDivElement).innerText, 'a message with a TEMPLATE and STRING placeholder');
-    });
-  });
-});