chrome-devtools-frontend 1.0.1376716 → 1.0.1386602

package/scripts/tools/update_goldens.py

@@ -55,7 +55,6 @@ class ProjectConfig:
 TOOLS_DIR = os.path.dirname(os.path.abspath(__file__))
 BASE_DIR = os.path.normpath(os.path.join(TOOLS_DIR, '..', '..'))
 DEPOT_TOOLS_DIR = os.path.join(BASE_DIR, 'third_party', 'depot_tools')
-GSUTIL = os.path.join(DEPOT_TOOLS_DIR, 'gsutil.py')
 VPYTHON = os.path.join(DEPOT_TOOLS_DIR, 'vpython3')
 GOLDENS_DIR = os.path.join(BASE_DIR, 'test', 'interactions', 'goldens')
 
@@ -64,13 +63,12 @@ WARNING_BUILDERS_STILL_RUNNING = 'Patchset %s has builders that are still ' \
 WARNING_BUILDERS_FAILED = 'Patchset %s has builders that failed:\n  %s\n'
 WARNING_BUILDERS_MISSING = 'Patchset %s does not have screenshot tests for ' \
     'all platform.\nOnly these builders found:\n  %s'
-WARNING_GSUTIL_CONNECTIVITY = (
-    'Ups! gsutil seems to not work for you right '
+WARNING_GCS_CONNECTIVITY = (
+    'Ups! "gcloud storage" seems to not work for you right '
     'now.\nThis is either a connectivity problem or a configuration issue.\n'
     'Make sure you are logged in with your Google account and you are included '
     'in the devtools-dev@google.com group.\n'
-    'Try running "./third_party/depot_tools/gsutil.py config" command.\n'
-    'When prompted for a project id, please use "v8-infra".\n')
+    'Try running "gcloud config set core/project v8-infra" command.\n')
 WARNING_GIT_DIRTY = 'Before attempting to apply screenshot patches, please' \
     'make sure your local repo is clean.\nFolder %s seems to contain ' \
     'un-committed changes.' % GOLDENS_DIR
@@ -154,7 +152,7 @@ def trigger(project_config, options):
 
 def update(project_config, options):
     test_clean_git()
-    test_gsutil_connectivity(project_config)
+    test_gcs_connectivity(project_config)
     wait_sec = options.wait_sec
     if wait_sec:
         wait_sec = max(wait_sec, 30)
@@ -205,15 +203,15 @@ def test_clean_git():
         sys.exit(0)
 
 
-def test_gsutil_connectivity(project_config):
-    """Test if gsutil needs to be configured for current user."""
-    process = subprocess.Popen(gsutil_cmd('ls', project_config.gs_root),
+def test_gcs_connectivity(project_config):
+    """Test if gcloud needs to be configured for current user."""
+    process = subprocess.Popen(gcstorage_cmd('ls', project_config.gs_root),
                                stdout=subprocess.PIPE,
                                stderr=subprocess.PIPE)
     _, stderr = process.communicate()
     if process.returncode != 0:
         print(stderr.decode('utf-8'), '\n')
-        print(WARNING_GSUTIL_CONNECTIVITY)
+        print(WARNING_GCS_CONNECTIVITY)
         sys.exit(0)
 
 
@@ -403,7 +401,7 @@ def download_patches(project_config, results, destination_dir, verbose):
         local_path = os.path.join(destination_dir, patch_platform + '.patch')
         if verbose:
             print('Downloading patch file from: ' + gs_location)
-        run_command(gsutil_cmd('cp', gs_location, local_path), verbose)
+        run_command(gcstorage_cmd('cp', gs_location, local_path), verbose)
         patches.append(local_path)
     return patches
 
@@ -446,8 +444,8 @@ def run_command(command, verbose, message=None):
         sys.exit(1)
 
 
-def gsutil_cmd(*args):
-    return [VPYTHON, GSUTIL] + list(args)
+def gcstorage_cmd(*args):
+    return ["gcloud", "storage"] + list(args)
 
 
 if __name__ == '__main__':

package/scripts/tools/update_goldens_v2.py

@@ -64,5 +64,5 @@ def build_parser():
 if __name__ == '__main__':
     main(
         ProjectConfig(platforms=['linux', 'mac', 'win64'],
-                      builder_prefix='devtools_frontend',
+                      builder_prefix='dtf',
                       ignore_failed_builders=True), sys.argv[1:])

package/front_end/models/timeline_model/TimelineModelFilter.ts

@@ -1,61 +0,0 @@
-// Copyright 2017 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 Trace from '../../models/trace/trace.js';
-
-export abstract class TimelineModelFilter {
-  abstract accept(_event: Trace.Types.Events.Event, parsedTrace?: Trace.Handlers.Types.ParsedTrace): boolean;
-}
-
-export class TimelineVisibleEventsFilter extends TimelineModelFilter {
-  private readonly visibleTypes: Set<string>;
-  constructor(visibleTypes: string[]) {
-    super();
-    this.visibleTypes = new Set(visibleTypes);
-  }
-
-  accept(event: Trace.Types.Events.Event): boolean {
-    if (Trace.Types.Extensions.isSyntheticExtensionEntry(event)) {
-      return true;
-    }
-    return this.visibleTypes.has(TimelineVisibleEventsFilter.eventType(event));
-  }
-
-  static eventType(event: Trace.Types.Events.Event): Trace.Types.Events.Name {
-    // Any blink.console category events are treated as ConsoleTime events
-    if (event.cat.includes('blink.console')) {
-      return Trace.Types.Events.Name.CONSOLE_TIME;
-    }
-    // Any blink.user_timing egory events are treated as UserTiming events
-    if (event.cat.includes('blink.user_timing')) {
-      return Trace.Types.Events.Name.USER_TIMING;
-    }
-    return event.name as Trace.Types.Events.Name;
-  }
-}
-
-export class TimelineInvisibleEventsFilter extends TimelineModelFilter {
-  #invisibleTypes: Set<Trace.Types.Events.Name>;
-
-  constructor(invisibleTypes: Trace.Types.Events.Name[]) {
-    super();
-    this.#invisibleTypes = new Set(invisibleTypes);
-  }
-
-  accept(event: Trace.Types.Events.Event): boolean {
-    return !this.#invisibleTypes.has(TimelineVisibleEventsFilter.eventType(event));
-  }
-}
-
-export class ExclusiveNameFilter extends TimelineModelFilter {
-  #excludeNames: Set<Trace.Types.Events.Name>;
-  constructor(excludeNames: Trace.Types.Events.Name[]) {
-    super();
-    this.#excludeNames = new Set(excludeNames);
-  }
-
-  accept(event: Trace.Types.Events.Event): boolean {
-    return !this.#excludeNames.has(event.name as Trace.Types.Events.Name);
-  }
-}

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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