npm - chrome-devtools-frontend - Versions diffs - 1.0.1380117 → 1.0.1386602 - Mend

chrome-devtools-frontend 1.0.1380117 → 1.0.1386602

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (595) hide show

package/front_end/panels/timeline/components/insights/SidebarInsight.test.ts DELETED Viewed

@@ -1,72 +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 Coordinator from '../../../../ui/components/render_coordinator/render_coordinator.js';
-import * as InsightsUI from '../../components/insights/insights.js';
-describeWithEnvironment('SidebarInsight', () => {
-  const {SidebarInsight} = InsightsUI.SidebarInsight;
-  const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-  describe('sidebar insight component rendering', () => {
-    it('renders insight title', async () => {
-      const component = new SidebarInsight();
-      component.data = {title: 'LCP by Phase', description: '', expanded: true, internalName: 'lcp-by-phase'};
-      renderElementIntoDOM(component);
-      await coordinator.done();
-      assert.isNotNull(component.shadowRoot);
-      const titleElement = component.shadowRoot.querySelector<HTMLElement>('.insight-title');
-      assert.isNotNull(titleElement);
-      assert.deepEqual(titleElement.textContent, 'LCP by Phase');
-    });
-    describe('insight toggling', () => {
-      it('renders only insight title when not toggled', async () => {
-        const component = new SidebarInsight();
-        component.data = {title: 'LCP by Phase', description: '', expanded: false, internalName: 'lcp-by-phase'};
-        renderElementIntoDOM(component);
-        await coordinator.done();
-        assert.isNotNull(component.shadowRoot);
-        const titleElement = component.shadowRoot.querySelector<HTMLElement>('.insight-title');
-        assert.isNotNull(titleElement);
-        assert.deepEqual(titleElement.textContent, 'LCP by Phase');
-        // Should not contain the content slot.
-        const slotElements = component.shadowRoot.querySelectorAll<HTMLSlotElement>('slot');
-        assert.isEmpty(slotElements);
-      });
-      it('renders title, description and content when toggled', async () => {
-        const component = new SidebarInsight();
-        component.data = {title: 'LCP by Phase', description: 'desc', expanded: true, internalName: 'lcp-by-phase'};
-        renderElementIntoDOM(component);
-        await coordinator.done();
-        assert.isNotNull(component.shadowRoot);
-        const titleElement = component.shadowRoot.querySelector<HTMLElement>('.insight-title');
-        assert.isNotNull(titleElement);
-        assert.deepEqual(titleElement.textContent, 'LCP by Phase');
-        const descriptionElement = component.shadowRoot.querySelector<HTMLElement>('.insight-description');
-        assert.isNotNull(descriptionElement);
-        // It's in the markdown component.
-        assert.strictEqual(descriptionElement.children[0].shadowRoot?.textContent?.trim(), 'desc');
-        const slotElements = component.shadowRoot.querySelectorAll<HTMLSlotElement>('slot');
-        assert.isNotEmpty(slotElements);
-        const contentSlot = slotElements[0];
-        assert.isNotNull(contentSlot);
-        assert.strictEqual(contentSlot.name, 'insight-content');
-      });
-    });
-  });
-});

package/front_end/ui/components/docs/two_states_counter/basic.html DELETED Viewed

@@ -1,27 +0,0 @@
-<!--
-  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.
--->
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <title>Two States Counter Example</title>
-    <style>
-      #container {
-        width: 300px;
-        height: 200px;
-        border: 1px solid black;
-        display: flex;
-        gap: 10px;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="container">
-    </div>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>

package/front_end/ui/components/docs/two_states_counter/basic.ts DELETED Viewed

@@ -1,45 +0,0 @@
-// 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 FrontendHelpers from '../../../../testing/EnvironmentHelpers.js';
-import * as ComponentHelpers from '../../helpers/helpers.js';
-import * as TwoStatesCounter from '../../two_states_counter/two_states_counter.js';
-await ComponentHelpers.ComponentServerSetup.setup();
-await FrontendHelpers.initializeGlobalVars();
-function getGeneralCounterData() {
-  return {
-    active: 3,
-    inactive: 10,
-    width: '18px',
-    height: '18px',
-    activeTitle: 'Num active',
-    inactiveTitle: 'Num inactive',
-  } as TwoStatesCounter.TwoStatesCounter.TwoStatesCounterData;
-}
-function appendCounter(counter: TwoStatesCounter.TwoStatesCounter.TwoStatesCounter): void {
-  document.querySelector('#container')?.appendChild(counter);
-}
-// Active and inactive counts.
-const counterData = getGeneralCounterData();
-const counter = new TwoStatesCounter.TwoStatesCounter.TwoStatesCounter();
-counter.data = counterData;
-appendCounter(counter);
-// Only active count.
-const activeCountData = getGeneralCounterData();
-activeCountData.inactive = 0;
-const activeOnlyCounter = new TwoStatesCounter.TwoStatesCounter.TwoStatesCounter();
-activeOnlyCounter.data = activeCountData;
-appendCounter(activeOnlyCounter);
-// Only inactive count.
-const inactiveCountData = getGeneralCounterData();
-inactiveCountData.active = 0;
-const inactiveOnlyCounter = new TwoStatesCounter.TwoStatesCounter.TwoStatesCounter();
-inactiveOnlyCounter.data = inactiveCountData;
-appendCounter(inactiveOnlyCounter);

package/front_end/ui/components/two_states_counter/TwoStatesCounter.test.ts DELETED Viewed

@@ -1,73 +0,0 @@
-// 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 {renderElementIntoDOM} from '../../../testing/DOMHelpers.js';
-import * as Coordinator from '../render_coordinator/render_coordinator.js';
-import * as TwoStatesCounter from './two_states_counter.js';
-const coordinator = Coordinator.RenderCoordinator.RenderCoordinator.instance();
-const ACTIVE_SELECTOR = '.active';
-const INACTIVE_SELECTOR = '.inactive';
-async function renderCounter(data: TwoStatesCounter.TwoStatesCounter.TwoStatesCounterData) {
-  const counter = new TwoStatesCounter.TwoStatesCounter.TwoStatesCounter();
-  renderElementIntoDOM(counter);
-  counter.data = data;
-  await coordinator.done();
-  return counter;
-}
-function assertContentAndTitleForPart(
-    counter: TwoStatesCounter.TwoStatesCounter.TwoStatesCounter, selector: string, content: string, title?: string) {
-  assert.isNotNull(counter.shadowRoot);
-  const activeCount = counter.shadowRoot.querySelector(selector);
-  assert.instanceOf(activeCount, HTMLSpanElement);
-  assert.strictEqual(activeCount.textContent?.trim(), `${content}`);
-  assert.strictEqual(activeCount.title, title ? `${title}` : '');
-}
-describe('TwoStatesCounter', () => {
-  it('renders a counter with active count only', async () => {
-    const data = {active: 3, inactive: 0, activeTitle: 'Num active'} as
-        TwoStatesCounter.TwoStatesCounter.TwoStatesCounterData;
-    const counter = await renderCounter(data);
-    assert.isNotNull(counter.shadowRoot);
-    assertContentAndTitleForPart(counter, ACTIVE_SELECTOR, `${data.active}`, data.activeTitle);
-    assert.isNull(counter.shadowRoot.querySelector(INACTIVE_SELECTOR));
-  });
-  it('renders a counter with inactive count only', async () => {
-    const data = {active: 0, inactive: 10, inactiveTitle: 'Num inactive'} as
-        TwoStatesCounter.TwoStatesCounter.TwoStatesCounterData;
-    const counter = await renderCounter(data);
-    assert.isNotNull(counter.shadowRoot);
-    assertContentAndTitleForPart(counter, INACTIVE_SELECTOR, `${data.inactive}`, data.inactiveTitle);
-    assert.isNull(counter.shadowRoot.querySelector(ACTIVE_SELECTOR));
-  });
-  it('renders a counter with active and inactive counts', async () => {
-    const data = {active: 2, inactive: 3, activeTitle: 'Num active', inactiveTitle: 'Num inactive'} as
-        TwoStatesCounter.TwoStatesCounter.TwoStatesCounterData;
-    const counter = await renderCounter(data);
-    assert.isNotNull(counter.shadowRoot);
-    assertContentAndTitleForPart(counter, ACTIVE_SELECTOR, `${data.active}`, data.activeTitle);
-    assertContentAndTitleForPart(counter, INACTIVE_SELECTOR, `${data.inactive}`, data.inactiveTitle);
-  });
-  it('renders nothing if both counts are zero', async () => {
-    const data = {active: 0, inactive: 0, inactiveTitle: 'Num inactive'} as
-        TwoStatesCounter.TwoStatesCounter.TwoStatesCounterData;
-    const counter = await renderCounter(data);
-    assert.isNotNull(counter.shadowRoot);
-    assert.isNull(counter.shadowRoot.querySelector(INACTIVE_SELECTOR));
-    assert.isNull(counter.shadowRoot.querySelector(ACTIVE_SELECTOR));
-  });
-});

package/front_end/ui/components/two_states_counter/TwoStatesCounter.ts DELETED Viewed

@@ -1,104 +0,0 @@
-// Copyright (c) 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 LitHtml from '../../lit-html/lit-html.js';
-import * as ComponentHelpers from '../helpers/helpers.js';
-import twoStatesCounterStyles from './twoStatesCounter.css.js';
-const {html, Directives: {ifDefined, classMap, styleMap}} = LitHtml;
-const isString = (value: string|undefined): value is string => value !== undefined;
-export interface TwoStatesCounterData {
-  active: number;
-  inactive: number;
-  width?: string;
-  height?: string;
-  activeTitle?: string;
-  inactiveTitle?: string;
-}
-export class TwoStatesCounter extends HTMLElement {
-  readonly #boundRender = this.#render.bind(this);
-  readonly #shadow = this.attachShadow({mode: 'open'});
-  #numActive: number = 0;
-  #numInactive: number = 0;
-  #width = '14px';
-  #height = '14px';
-  #activeTitle?: string;
-  #inactiveTitle?: string;
-  connectedCallback(): void {
-    this.#shadow.adoptedStyleSheets = [twoStatesCounterStyles];
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-  }
-  set data(data: TwoStatesCounterData) {
-    if (data.active < 0 || data.inactive < 0) {
-      throw new Error('Values need to be greater or equal to zero.');
-    }
-    this.#numActive = data.active;
-    this.#numInactive = data.inactive;
-    this.#width = isString(data.width) ? data.width : this.#width;
-    this.#height = isString(data.height) ? data.height : this.#height;
-    this.#activeTitle = data.activeTitle;
-    this.#inactiveTitle = data.inactiveTitle;
-    void ComponentHelpers.ScheduledRender.scheduleRender(this, this.#boundRender);
-  }
-  #render(): void {
-    if (this.#numActive === 0 && this.#numInactive === 0) {
-      return;
-    }
-    const showBothNumbers = this.#numActive > 0 && this.#numInactive > 0;
-    const commonClasses = {
-      part: true,
-      split: showBothNumbers,
-    };
-    const activeClassMap = {
-      ...commonClasses,
-      active: true,
-    };
-    const inactiveClassMap = {
-      ...commonClasses,
-      inactive: true,
-    };
-    // clang-format off
-    LitHtml.render(html`
-    <div class='counter'>
-      ${this.#renderPart(this.#numActive, activeClassMap, this.#activeTitle)}
-      ${this.#renderPart(this.#numInactive, inactiveClassMap, this.#inactiveTitle)}
-    </div>
-    `
-    , this.#shadow, {host: this});
-    // clang-format on
-  }
-  #renderPart(count: number, classInfo: {[name: string]: string|boolean|number}, title?: string): unknown {
-    const styles = {
-      width: this.#width,
-      height: this.#height,
-    };
-    // clang-format off
-    return count > 0 ? html`
-       <span class=${classMap(classInfo)} style=${styleMap(styles)} title=${ifDefined(title)}>
-          ${count}
-       </span>
-      ` : LitHtml.nothing;
-    // clang-format on
-  }
-}
-customElements.define('devtools-two-states-counter', TwoStatesCounter);
-declare global {
-  interface HTMLElementTagNameMap {
-    'devtools-two-states-counter': TwoStatesCounter;
-  }
-}

package/front_end/ui/components/two_states_counter/twoStatesCounter.css DELETED Viewed

@@ -1,37 +0,0 @@
-/*
- * 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.
- */
-.active.split {
-  border-radius: 50% 0% 0% 50%;
-}
-.inactive.split {
-  border-radius: 0% 50% 50% 0%;
-}
-.counter {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-.part {
-  display: flex;
-  border-radius: 50%;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-}
-.active {
-  color: var(--sys-color-on-primary);
-  background-color: var(--sys-color-primary);
-}
-.inactive {
-  color: var(--sys-color-state-disabled);
-  background-color: var(--sys-color-state-disabled-container);
-}

package/front_end/ui/components/two_states_counter/two_states_counter.ts DELETED Viewed

@@ -1,9 +0,0 @@
-// 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 TwoStatesCounter from './TwoStatesCounter.js';
-export {
-  TwoStatesCounter,
-};