chrome-devtools-frontend 1.0.1529904 → 1.0.1530564

package/eslint.config.mjs

@@ -810,7 +810,7 @@ export default defineConfig([
   },
   {
     name: 'Front-end component docs',
-    files: ['front_end/ui/components/docs/**/*.ts'],
+    files: ['front_end/ui/components/docs/**/*.ts', '**/*.docs.ts'],
     rules: {
       // This makes the component doc examples very verbose and doesn't add
       // anything, so we leave return types to the developer within the

package/front_end/core/common/Worker.ts

@@ -5,10 +5,15 @@
 export class WorkerWrapper {
   readonly #workerPromise: Promise<Worker>;
   #disposed?: boolean;
+  #rejectWorkerPromise?: (error: Error) => void;
 
   private constructor(workerLocation: URL) {
-    this.#workerPromise = new Promise(fulfill => {
+    this.#workerPromise = new Promise((fulfill, reject) => {
+      this.#rejectWorkerPromise = reject;
       const worker = new Worker(workerLocation, {type: 'module'});
+      worker.onerror = event => {
+        console.error(`Failed to load worker for ${workerLocation.href}:`, event);
+      };
       worker.onmessage = (event: MessageEvent<unknown>) => {
         console.assert(event.data === 'workerReady');
         worker.onmessage = null;
@@ -34,7 +39,10 @@ export class WorkerWrapper {
     void this.#workerPromise.then(worker => worker.terminate());
   }
 
-  terminate(): void {
+  terminate(immediately = false): void {
+    if (immediately) {
+      this.#rejectWorkerPromise?.(new Error('Worker terminated'));
+    }
     this.dispose();
   }
 

package/front_end/core/host/AidaClient.ts

@@ -279,7 +279,7 @@ export interface DoConversationClientEvent {
 
 export interface UserImpression {
   sample: {
-    sample_id: number,
+    sample_id?: number,
   };
   latency: {
     duration: {
@@ -291,7 +291,7 @@ export interface UserImpression {
 
 export interface UserAcceptance {
   sample: {
-    sample_id: number,
+    sample_id?: number,
   };
 }
 
@@ -366,7 +366,7 @@ export interface CompletionResponse {
 export interface GenerationSample {
   generationString: string;
   score: number;
-  sampleId: number;
+  sampleId?: number;
   attributionMetadata?: AttributionMetadata;
 }
 

package/front_end/core/host/InspectorFrontendHostAPI.ts

@@ -346,8 +346,7 @@ export interface InspectorFrontendHostAPI {
   closeWindow(): void;
 
   /**
-   * Don't use directly - use {@link CopyToClipboard.copyTextToClipboard} instead.
-   * @deprecated Marked to restrict usage.
+   * If you need to alert to the user after copying use {@link UIUtils.copyTextToClipboard}.
    */
   copyText(text: string|null|undefined): void;
 

package/front_end/core/sdk/NetworkManager.ts

@@ -67,6 +67,10 @@ const UIStrings = {
    * @description Text in Network Manager representing the "Fast 4G" throttling preset
    */
   fast4G: 'Fast 4G',
+  /**
+   * @description Text in Network Manager representing the "Blocking" throttling preset
+   */
+  block: 'Block',
   /**
    * @description Text in Network Manager
    * @example {https://example.com} PH1
@@ -459,6 +463,12 @@ export interface EventTypes {
  * @see https://crbug.com/342406608#comment10 for context around the addition of 4G presets in June 2024.
  */
 
+export const BlockingConditions: ThrottlingConditions = {
+  key: PredefinedThrottlingConditionKey.BLOCKING,
+  block: true,
+  title: i18nLazyString(UIStrings.block),
+};
+
 export const NoThrottlingConditions: Conditions = {
   key: PredefinedThrottlingConditionKey.NO_THROTTLING,
   title: i18nLazyString(UIStrings.noThrottling),
@@ -2466,7 +2476,15 @@ class ExtraInfoBuilder {
 
 SDKModel.register(NetworkManager, {capabilities: Capability.NETWORK, autostart: true});
 
-export function networkConditionsEqual(first: Conditions, second: Conditions): boolean {
+export function networkConditionsEqual(first: ThrottlingConditions, second: ThrottlingConditions): boolean {
+  if ('block' in first || 'block' in second) {
+    if ('block' in first && 'block' in second) {
+      const firstTitle = (typeof first.title === 'function' ? first.title() : first.title);
+      const secondTitle = (typeof second.title === 'function' ? second.title() : second.title);
+      return firstTitle === secondTitle && first.block === second.block;
+    }
+    return false;
+  }
   // Caution: titles might be different function instances, which produce
   // the same value.
   // We prefer to use the i18nTitleKey to prevent against locale changes or
@@ -2493,6 +2511,7 @@ export function networkConditionsEqual(first: Conditions, second: Conditions): b
  * please talk to jacktfranklin@ first.
  */
 export const enum PredefinedThrottlingConditionKey {
+  BLOCKING = 'BLOCKING',
   NO_THROTTLING = 'NO_THROTTLING',
   OFFLINE = 'OFFLINE',
   SPEED_3G = 'SPEED_3G',
@@ -2525,6 +2544,11 @@ export function getPredefinedCondition(key: ThrottlingConditionKey): Conditions|
   return THROTTLING_CONDITIONS_LOOKUP.get(key) ?? null;
 }
 
+export type ThrottlingConditions = Conditions|{
+  readonly key: ThrottlingConditionKey,
+  block: true,
+  title: string | (() => string),
+};
 export interface Conditions {
   readonly key: ThrottlingConditionKey;
   download: number;

package/front_end/entrypoints/main/main-meta.ts

@@ -6,6 +6,7 @@ import * as Common from '../../core/common/common.js';
 import * as Host from '../../core/host/host.js';
 import * as i18n from '../../core/i18n/i18n.js';
 import type * as Platform from '../../core/platform/platform.js';
+import * as Root from '../../core/root/root.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import * as Workspace from '../../models/workspace/workspace.js';
 import * as Components from '../../ui/legacy/components/utils/utils.js';
@@ -935,6 +936,7 @@ UI.Toolbar.registerToolbarItem({
 });
 
 UI.Toolbar.registerToolbarItem({
+  condition: () => !Root.Runtime.Runtime.isTraceApp(),
   async loadItem() {
     const Main = await loadMainModule();
     return Main.MainImpl.MainMenuItem.instance();

package/front_end/entrypoints/trace_app/trace_app.ts

@@ -18,6 +18,7 @@ import '../../panels/sources/sources-meta.js';
 // sdk/emulation depends on panels/sensors: crbug.com/1376652
 import '../../panels/sensors/sensors-meta.js';
 import '../../panels/timeline/timeline-meta.js';
+import '../../panels/ai_assistance/ai_assistance-meta.js';
 import '../../ui/legacy/components/perf_ui/perf_ui-meta.js';
 import '../../ui/legacy/components/quick_open/quick_open-meta.js';
 import '../../ui/legacy/components/source_frame/source_frame-meta.js';

package/front_end/generated/SupportedCSSProperties.js

@@ -3773,6 +3773,13 @@ export const generatedProperties = [
   ],
   "name": "rule-color"
  },
+ {
+  "longhands": [
+   "row-rule-outset",
+   "column-rule-outset"
+  ],
+  "name": "rule-outset"
+ },
  {
   "longhands": [
    "column-rule-style",

package/front_end/models/ai_assistance/performance/AICallTree.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import * as Root from '../../../core/root/root.js';
 import * as Trace from '../../../models/trace/trace.js';
 import * as SourceMapsResolver from '../../../models/trace_source_maps_resolver/trace_source_maps_resolver.js';
 
@@ -144,7 +143,7 @@ export class AICallTree {
       return null;
     }
 
-    const allEventsEnabled = Root.Runtime.experiments.isEnabled('timeline-show-all-events');
+    const showAllEvents = parsedTrace.data.Meta.config.showAllEvents;
     const {startTime, endTime} = Trace.Helpers.Timing.eventTimingsMilliSeconds(selectedEvent);
     const selectedEventBounds = Trace.Helpers.Timing.traceWindowFromMicroSeconds(
         Trace.Helpers.Timing.milliToMicro(startTime), Trace.Helpers.Timing.milliToMicro(endTime));
@@ -166,7 +165,7 @@ export class AICallTree {
     // If the "Show all events" experiment is on, we don't filter out any
     // events here, otherwise the generated call tree will not match what the
     // user is seeing.
-    if (!allEventsEnabled) {
+    if (!showAllEvents) {
       filters.push(new Trace.Extras.TraceFilter.VisibleEventsFilter(Trace.Styles.visibleTypes()));
     }
 

package/front_end/models/ai_code_completion/AiCodeCompletion.ts

@@ -257,10 +257,10 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
 
   async #generateSampleForRequest(request: Host.AidaClient.CompletionRequest, cursor: number): Promise<{
     suggestionText: string,
-    sampleId: number,
     fromCache: boolean,
     citations: Host.AidaClient.Citation[],
     rpcGlobalId?: Host.AidaClient.RpcGlobalId,
+    sampleId?: number,
   }|null> {
     const {response, fromCache} = await this.#completeCodeCached(request);
     debugLog('At cursor position', cursor, {request, response, fromCache});
@@ -417,7 +417,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     this.#aidaRequestCache = {request, response};
   }
 
-  #registerUserImpression(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId: number, latency: number): void {
+  #registerUserImpression(rpcGlobalId: Host.AidaClient.RpcGlobalId, latency: number, sampleId?: number): void {
     const seconds = Math.floor(latency / 1_000);
     const remainingMs = latency % 1_000;
     const nanos = Math.floor(remainingMs * 1_000_000);
@@ -443,7 +443,7 @@ export class AiCodeCompletion extends Common.ObjectWrapper.ObjectWrapper<EventTy
     Host.userMetrics.actionTaken(Host.UserMetrics.Action.AiCodeCompletionSuggestionDisplayed);
   }
 
-  registerUserAcceptance(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId: number): void {
+  registerUserAcceptance(rpcGlobalId: Host.AidaClient.RpcGlobalId, sampleId?: number): void {
     void this.#aidaClient.registerClientEvent({
       corresponding_aida_rpc_global_id: rpcGlobalId,
       disable_user_content_logging: true,

package/front_end/models/formatter/FormatterWorkerPool.ts

@@ -7,7 +7,7 @@ import * as FormatterActions from '../../entrypoints/formatter_worker/FormatterA
 
 export {DefinitionKind, ScopeKind, type ScopeTreeNode} from '../../entrypoints/formatter_worker/FormatterActions.js';
 
-let formatterWorkerPoolInstance: FormatterWorkerPool;
+let formatterWorkerPoolInstance: FormatterWorkerPool|undefined;
 
 export class FormatterWorkerPool {
   private taskQueue: Task[];
@@ -26,6 +26,22 @@ export class FormatterWorkerPool {
     return formatterWorkerPoolInstance;
   }
 
+  dispose(): void {
+    for (const task of this.taskQueue) {
+      console.error('rejecting task');
+      task.errorCallback(new Event('Worker terminated'));
+    }
+    for (const [worker, task] of this.workerTasks.entries()) {
+      task?.errorCallback(new Event('Worker terminated'));
+      worker.terminate(/* immediately=*/ true);
+    }
+  }
+
+  static removeInstance(): void {
+    formatterWorkerPoolInstance?.dispose();
+    formatterWorkerPoolInstance = undefined;
+  }
+
   private createWorker(): Common.Worker.WorkerWrapper {
     const worker = Common.Worker.WorkerWrapper.fromURL(
         new URL('../../entrypoints/formatter_worker/formatter_worker-entrypoint.js', import.meta.url));

package/front_end/models/javascript_metadata/NativeFunctions.js

@@ -687,7 +687,7 @@ export const NativeFunctions = [
   {
     name: "toJSON",
     signatures: [["?key"]],
-    receivers: ["Date"]
+    receivers: ["Date","CSPViolationReportBody","ReportBody","CoopAccessViolationReportBody","DeprecationReportBody","DocumentPolicyViolationReportBody","IntegrityViolationReportBody","InterventionReportBody","PermissionsPolicyViolationReportBody","TestReportBody"]
   },
   {
     name: "parse",

package/front_end/models/trace/ModelImpl.ts

@@ -81,8 +81,13 @@ export class Model extends EventTarget {
    * });
    * void this.traceModel.parse(events);
    **/
-  async parse(traceEvents: readonly Types.Events.Event[], config?: Types.Configuration.ParseOptions): Promise<void> {
-    const metadata = config?.metadata || {};
+  async parse(traceEvents: readonly Types.Events.Event[], config: Types.Configuration.ParseOptions = {}):
+      Promise<void> {
+    if (config.showAllEvents === undefined) {
+      config.showAllEvents = this.#config.showAllEvents;
+    }
+
+    const metadata = config.metadata || {};
     // During parsing, periodically update any listeners on each processors'
     // progress (if they have any updates).
     const onTraceUpdate = (event: Event): void => {
@@ -98,7 +103,7 @@ export class Model extends EventTarget {
     try {
       // Wait for all outstanding promises before finishing the async execution,
       // but perform all tasks in parallel.
-      await this.#processor.parse(traceEvents, config ?? {});
+      await this.#processor.parse(traceEvents, config);
       if (!this.#processor.data) {
         throw new Error('processor did not parse trace');
       }

package/front_end/models/trace/handlers/MetaHandler.ts

@@ -6,6 +6,10 @@ import * as Platform from '../../../core/platform/platform.js';
 import * as Helpers from '../helpers/helpers.js';
 import * as Types from '../types/types.js';
 
+import type {FinalizeOptions} from './types.js';
+
+let config: {showAllEvents: boolean};
+
 // We track the renderer processes we see in each frame on the way through the trace.
 let rendererProcessesByFrameId: FrameProcessData = new Map();
 
@@ -349,7 +353,9 @@ export function handleEvent(event: Types.Events.Event): void {
   }
 }
 
-export async function finalize(): Promise<void> {
+export async function finalize(options?: FinalizeOptions): Promise<void> {
+  config = {showAllEvents: Boolean(options?.showAllEvents)};
+
   // We try to set the minimum time by finding the event with the smallest
   // timestamp. However, if we also got a timestamp from the
   // TracingStartedInBrowser event, we should always use that.
@@ -431,6 +437,7 @@ export async function finalize(): Promise<void> {
 }
 
 export interface MetaHandlerData {
+  config: {showAllEvents: boolean};
   traceIsGeneric: boolean;
   traceBounds: Types.Timing.TraceWindowMicro;
   browserProcessId: Types.Events.ProcessID;
@@ -494,6 +501,7 @@ export type FrameProcessData =
 
 export function data(): MetaHandlerData {
   return {
+    config,
     traceBounds,
     browserProcessId,
     browserThreadId,

package/front_end/models/trace/types/Configuration.ts

@@ -66,6 +66,7 @@ export function configToCacheKey(config: Configuration): string {
 }
 
 export interface ParseOptions {
+  showAllEvents?: boolean;
   /**
    * If the trace was just recorded on the current page, rather than an imported file.
    * TODO(paulirish): Maybe remove. This is currently unused by the Processor and Handlers

package/front_end/panels/browser_debugger/browser_debugger-meta.ts

@@ -215,6 +215,7 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showOverrides),
   order: 4,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
+  condition: () => !Root.Runtime.Runtime.isTraceApp(),
   async loadView() {
     const Sources = await loadSourcesModule();
     return Sources.SourcesNavigator.OverridesNavigatorView.instance();
@@ -228,7 +229,7 @@ UI.ViewManager.registerViewExtension({
   commandPrompt: i18nLazyString(UIStrings.showContentScripts),
   order: 5,
   persistence: UI.ViewManager.ViewPersistence.PERMANENT,
-  condition: () => Root.Runtime.getPathName() !== '/bundled/worker_app.html',
+  condition: () => Root.Runtime.getPathName() !== '/bundled/worker_app.html' && !Root.Runtime.Runtime.isTraceApp(),
   async loadView() {
     const Sources = await loadSourcesModule();
     return new Sources.SourcesNavigator.ContentScriptsNavigatorView();

package/front_end/panels/changes/CombinedDiffView.ts

@@ -10,7 +10,6 @@ import type * as Workspace from '../../models/workspace/workspace.js';
 import * as WorkspaceDiff from '../../models/workspace_diff/workspace_diff.js';
 import type * as Diff from '../../third_party/diff/diff.js';
 import * as Buttons from '../../ui/components/buttons/buttons.js';
-import * as CopyToClipboard from '../../ui/components/copy_to_clipboard/copy_to_clipboard.js';
 import type * as DiffView from '../../ui/components/diff_view/diff_view.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import * as Lit from '../../ui/lit/lit.js';
@@ -168,7 +167,7 @@ export class CombinedDiffView extends UI.Widget.Widget {
       return;
     }
 
-    CopyToClipboard.copyTextToClipboard(content.text, i18nString(UIStrings.copied));
+    UI.UIUtils.copyTextToClipboard(content.text, i18nString(UIStrings.copied));
     this.#copiedFiles[fileUrl] = true;
     this.requestUpdate();
     setTimeout(() => {

package/front_end/panels/console/ConsoleInsightTeaser.ts

@@ -25,7 +25,11 @@ const UIStringsNotTranslate = {
   /**
    * @description Link text in the disclaimer dialog, linking to a settings page containing more information
    */
-  learnMore: 'Learn more about AI summaries',
+  learnMore: 'Learn more',
+  /**
+   * @description Link text in the Console Insights Teaser info tooltip, linking to an explainer on how data is being used in this feature
+   */
+  learnMoreAboutAiSummaries: 'Learn more about AI summaries',
   /**
    * @description Description of the console insights feature
    */
@@ -69,6 +73,10 @@ const UIStringsNotTranslate = {
    * @description Label for a checkbox which turns off the teaser explanation feature
    */
   dontShow: 'Don’t show',
+  /**
+   * @description Aria-label for an infor-button triggering a tooltip with more info about data usage
+   */
+  learnDataUsage: 'Learn more about how your data is used',
 } as const;
 
 const lockedString = i18n.i18n.lockedString;
@@ -108,7 +116,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
     >
       <div class="teaser-tooltip-container">
         ${showPlaceholder ? html`
-          <h2 tabindex="-1">${lockedString(UIStringsNotTranslate.summarizing)}</h2>
+          <h2>${lockedString(UIStringsNotTranslate.summarizing)}</h2>
           <div
             role="presentation"
             aria-label=${lockedString(UIStringsNotTranslate.loading)}
@@ -126,7 +134,7 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
             </svg>
           </div>
         ` : html`
-          <h2 tabindex="-1">${input.headerText}</h2>
+          <h2>${input.headerText}</h2>
           <div>${input.mainText}</div>
           <div class="tooltip-footer">
             ${input.hasTellMeMoreButton ? html`
@@ -140,23 +148,25 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: undefined, target: HTMLE
                 ${lockedString(UIStringsNotTranslate.tellMeMore)}
               </devtools-button>
             ` : Lit.nothing}
-            <devtools-icon
-              name="info"
-              class="info-icon"
+            <devtools-button
+              .iconName=${'info'}
+              .variant=${Buttons.Button.Variant.ICON}
               aria-details=${'teaser-info-tooltip-' + input.uuid}
-            ></devtools-icon>
+              aria-label=${lockedString(UIStringsNotTranslate.learnDataUsage)}
+            ></devtools-button>
             <devtools-tooltip id=${'teaser-info-tooltip-' + input.uuid} variant="rich">
               <div class="info-tooltip-text">${lockedString(UIStringsNotTranslate.infoTooltipText)}</div>
               <div class="learn-more">
                 <x-link
                   class="devtools-link"
-                  title=${lockedString(UIStringsNotTranslate.learnMore)}
+                  title=${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}
                   href=${DATA_USAGE_URL}
                   jslog=${VisualLogging.link().track({click: true, keydown:'Enter|Space'}).context('explain.teaser.learn-more')}
-                >${lockedString(UIStringsNotTranslate.learnMore)}</x-link>
+                >${lockedString(UIStringsNotTranslate.learnMoreAboutAiSummaries)}</x-link>
               </div>
             </devtools-tooltip>
             <devtools-checkbox
+              aria-label=${lockedString(UIStringsNotTranslate.dontShow)}
               @change=${input.dontShowChanged}
               jslog=${VisualLogging.toggle('explain.teaser.dont-show').track({ change: true })}>
               ${lockedString(UIStringsNotTranslate.dontShow)}

package/front_end/panels/console/ConsolePrompt.ts

@@ -396,7 +396,7 @@ export class ConsolePrompt extends Common.ObjectWrapper.eventMixin<EventTypes, t
           if (accepted) {
             this.dispatchEventToListeners(
                 Events.AI_CODE_COMPLETION_SUGGESTION_ACCEPTED, {citations: this.aiCodeCompletionCitations});
-            if (suggestion?.rpcGlobalId && suggestion?.sampleId) {
+            if (suggestion?.rpcGlobalId) {
               this.aiCodeCompletion?.registerUserAcceptance(suggestion.rpcGlobalId, suggestion.sampleId);
             }
           }

package/front_end/panels/console/ConsoleViewMessage.ts

@@ -380,7 +380,7 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
   wasShown(): void {
     this.isVisibleInternal = true;
     if (this.elementInternal) {
-      this.#teaser?.show(this.elementInternal);
+      this.#teaser?.show(this.elementInternal, this.consoleRowWrapper);
     }
   }
 
@@ -1343,14 +1343,14 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     return this.contentElementInternal;
   }
 
-  #onMouseEnter(_event: MouseEvent): void {
+  #startTeaserGeneration(): void {
     if (this.#teaser &&
         Common.Settings.Settings.instance().moduleSetting('console-insight-teasers-enabled').getIfNotDisabled()) {
       this.#teaser.maybeGenerateTeaser();
     }
   }
 
-  #onMouseLeave(): void {
+  #abortTeaserGeneration(): void {
     this.#teaser?.abortTeaserGeneration();
   }
 
@@ -1361,8 +1361,10 @@ export class ConsoleViewMessage implements ConsoleViewportElement {
     this.elementInternal = document.createElement('div');
     this.elementInternal.tabIndex = -1;
     this.elementInternal.addEventListener('keydown', (this.onKeyDown.bind(this) as EventListener));
-    this.elementInternal.addEventListener('mouseenter', this.#onMouseEnter.bind(this));
-    this.elementInternal.addEventListener('mouseleave', this.#onMouseLeave.bind(this));
+    this.elementInternal.addEventListener('mouseenter', this.#startTeaserGeneration.bind(this));
+    this.elementInternal.addEventListener('focusin', this.#startTeaserGeneration.bind(this));
+    this.elementInternal.addEventListener('mouseleave', this.#abortTeaserGeneration.bind(this));
+    this.elementInternal.addEventListener('focusout', this.#abortTeaserGeneration.bind(this));
     this.updateMessageElement();
     this.elementInternal.classList.toggle('console-adjacent-user-command-result', this.#adjacentUserCommandResult);
     return this.elementInternal;

package/front_end/panels/console/consoleInsightTeaser.css

@@ -72,10 +72,6 @@
     display: flex;
     align-items: center;
 
-    .info-icon {
-      margin-left: var(--sys-size-4);
-    }
-
     devtools-checkbox {
       margin-left: auto;
     }

package/front_end/panels/elements/ElementsTreeOutline.ts

@@ -41,7 +41,6 @@ import * as Badges from '../../models/badges/badges.js';
 import * as Elements from '../../models/elements/elements.js';
 import * as IssuesManager from '../../models/issues_manager/issues_manager.js';
 import * as CodeHighlighter from '../../ui/components/code_highlighter/code_highlighter.js';
-import * as CopyToClipboard from '../../ui/components/copy_to_clipboard/copy_to_clipboard.js';
 import * as IssueCounter from '../../ui/components/issue_counter/issue_counter.js';
 import * as UI from '../../ui/legacy/legacy.js';
 import {html, nothing, render} from '../../ui/lit/lit.js';
@@ -736,7 +735,7 @@ export class ElementsTreeOutline extends
     }
     void node.getOuterHTML(includeShadowRoots).then(outerHTML => {
       if (outerHTML !== null) {
-        CopyToClipboard.copyTextToClipboard(outerHTML);
+        UI.UIUtils.copyTextToClipboard(outerHTML);
       }
     });
     this.setClipboardData({node, isCut});