chrome-devtools-frontend 1.0.1549484 → 1.0.1553956

package/front_end/third_party/puppeteer/package/src/cdp/WebWorker.ts

@@ -95,9 +95,8 @@ export class CdpWebWorker extends WebWorker {
 
   override async close(): Promise<void> {
     switch (this.#targetType) {
-      case TargetType.SERVICE_WORKER:
-      case TargetType.SHARED_WORKER: {
-        // For service and shared workers we need to close the target and detach to allow
+      case TargetType.SERVICE_WORKER: {
+        // For service workers we need to close the target and detach to allow
         // the worker to stop.
         await this.client.connection()?.send('Target.closeTarget', {
           targetId: this.#id,
@@ -107,6 +106,12 @@ export class CdpWebWorker extends WebWorker {
         });
         break;
       }
+      case TargetType.SHARED_WORKER: {
+        await this.client.connection()?.send('Target.closeTarget', {
+          targetId: this.#id,
+        });
+        break;
+      }
       default:
         await this.evaluate(() => {
           self.close();

package/front_end/third_party/puppeteer/package/src/cdp/cdp.ts

@@ -6,6 +6,7 @@
 
 export * from './Accessibility.js';
 export * from './Binding.js';
+export * from './BluetoothEmulation.js';
 export * from './Browser.js';
 export * from './BrowserContext.js';
 export * from './BrowserConnector.js';

package/front_end/third_party/puppeteer/package/src/common/BrowserConnector.ts

@@ -7,7 +7,7 @@
 import type {Browser} from '../api/Browser.js';
 import {_connectToBiDiBrowser} from '../bidi/BrowserConnector.js';
 import {_connectToCdpBrowser} from '../cdp/BrowserConnector.js';
-import {isNode} from '../environment.js';
+import {environment, isNode} from '../environment.js';
 import {assert} from '../util/assert.js';
 import {isErrorLike} from '../util/ErrorLike.js';
 
@@ -84,6 +84,50 @@ async function getConnectionTransport(
       connectionTransport: connectionTransport,
       endpointUrl: connectionURL,
     };
+  } else if (options.channel && isNode) {
+    const {detectBrowserPlatform, resolveDefaultUserDataDir, Browser} =
+      await import('@puppeteer/browsers');
+    const platform = detectBrowserPlatform();
+    if (!platform) {
+      throw new Error('Could not detect required browser platform');
+    }
+    const {convertPuppeteerChannelToBrowsersChannel} = await import(
+      '../node/LaunchOptions.js'
+    );
+    const {join} = await import('node:path');
+    const userDataDir = resolveDefaultUserDataDir(
+      Browser.CHROME,
+      platform,
+      convertPuppeteerChannelToBrowsersChannel(options.channel),
+    );
+    const portPath = join(userDataDir, 'DevToolsActivePort');
+    try {
+      const portRawValue = await environment.value.fs.promises.readFile(
+        portPath,
+        'ascii',
+      );
+      const port = parseInt(portRawValue, 10);
+      if (isNaN(port) || port <= 0 || port > 65535) {
+        throw new Error(`Invalid port '${portRawValue}' found`);
+      }
+      const browserWSEndpoint = `ws://localhost:${port}`;
+      const WebSocketClass = await getWebSocketTransportClass();
+      const connectionTransport = await WebSocketClass.create(
+        browserWSEndpoint,
+        headers,
+      );
+      return {
+        connectionTransport: connectionTransport,
+        endpointUrl: browserWSEndpoint,
+      };
+    } catch (error) {
+      throw new Error(
+        `Could not find DevToolsActivePort for ${options.channel} at ${portPath}`,
+        {
+          cause: error,
+        },
+      );
+    }
   }
   throw new Error('Invalid connection options');
 }

package/front_end/third_party/puppeteer/package/src/common/ConnectOptions.ts

@@ -38,6 +38,15 @@ export interface SupportedWebDriverCapabilities {
   alwaysMatch?: SupportedWebDriverCapability;
 }
 
+/**
+ * @public
+ */
+export type ChromeReleaseChannel =
+  | 'chrome'
+  | 'chrome-beta'
+  | 'chrome-canary'
+  | 'chrome-dev';
+
 /**
  * Generic browser options that can be passed when launching any browser or when
  * connecting to an existing browser instance.
@@ -49,6 +58,17 @@ export interface ConnectOptions {
    * @defaultValue `false`
    */
   acceptInsecureCerts?: boolean;
+  /**
+   * If specified, puppeteer looks for an open WebSocket at the well-known
+   * default user data directory for the specified channel and attempts to
+   * connect to it using ws://localhost:$ActivePort/devtools/browser. Only works
+   * for Chrome and when run in Node.js.
+   *
+   * This option is experimental when used with puppeteer.connect().
+   *
+   * @experimental
+   */
+  channel?: ChromeReleaseChannel;
   /**
    * Experimental setting to disable monitoring network events by default. When
    * set to `false`, parts of Puppeteer that depend on network events would not

package/front_end/third_party/puppeteer/package/src/node/ChromeLauncher.ts

@@ -11,7 +11,6 @@ import path from 'node:path';
 import {
   computeSystemExecutablePath,
   Browser as SupportedBrowsers,
-  ChromeReleaseChannel as BrowsersChromeReleaseChannel,
 } from '@puppeteer/browsers';
 
 import type {Browser} from '../api/Browser.js';
@@ -19,7 +18,11 @@ import {debugError} from '../common/util.js';
 import {assert} from '../util/assert.js';
 
 import {BrowserLauncher, type ResolvedLaunchArgs} from './BrowserLauncher.js';
-import type {ChromeReleaseChannel, LaunchOptions} from './LaunchOptions.js';
+import {
+  convertPuppeteerChannelToBrowsersChannel,
+  type ChromeReleaseChannel,
+  type LaunchOptions,
+} from './LaunchOptions.js';
 import type {PuppeteerNode} from './PuppeteerNode.js';
 import {rm} from './util/fs.js';
 
@@ -285,21 +288,6 @@ export class ChromeLauncher extends BrowserLauncher {
   }
 }
 
-function convertPuppeteerChannelToBrowsersChannel(
-  channel: ChromeReleaseChannel,
-): BrowsersChromeReleaseChannel {
-  switch (channel) {
-    case 'chrome':
-      return BrowsersChromeReleaseChannel.STABLE;
-    case 'chrome-dev':
-      return BrowsersChromeReleaseChannel.DEV;
-    case 'chrome-beta':
-      return BrowsersChromeReleaseChannel.BETA;
-    case 'chrome-canary':
-      return BrowsersChromeReleaseChannel.CANARY;
-  }
-}
-
 /**
  * Extracts all features from the given command-line flag
  * (e.g. `--enable-features`, `--enable-features=`).

package/front_end/third_party/puppeteer/package/src/node/LaunchOptions.ts

@@ -4,17 +4,33 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import type {ConnectOptions} from '../common/ConnectOptions.js';
+import {ChromeReleaseChannel as BrowsersChromeReleaseChannel} from '@puppeteer/browsers';
+
+import type {
+  ChromeReleaseChannel,
+  ConnectOptions,
+} from '../common/ConnectOptions.js';
 import type {SupportedBrowser} from '../common/SupportedBrowser.js';
 
+export type {ChromeReleaseChannel};
+
 /**
- * @public
+ * @internal
  */
-export type ChromeReleaseChannel =
-  | 'chrome'
-  | 'chrome-beta'
-  | 'chrome-canary'
-  | 'chrome-dev';
+export function convertPuppeteerChannelToBrowsersChannel(
+  channel: ChromeReleaseChannel,
+): BrowsersChromeReleaseChannel {
+  switch (channel) {
+    case 'chrome':
+      return BrowsersChromeReleaseChannel.STABLE;
+    case 'chrome-dev':
+      return BrowsersChromeReleaseChannel.DEV;
+    case 'chrome-beta':
+      return BrowsersChromeReleaseChannel.BETA;
+    case 'chrome-canary':
+      return BrowsersChromeReleaseChannel.CANARY;
+  }
+}
 
 /**
  * Generic launch options that can be passed when launching any browser.

package/front_end/third_party/puppeteer/package/src/revisions.ts

@@ -8,7 +8,7 @@
  * @internal
  */
 export const PUPPETEER_REVISIONS = Object.freeze({
-  chrome: '142.0.7444.175',
-  'chrome-headless-shell': '142.0.7444.175',
-  firefox: 'stable_145.0.1',
+  chrome: '143.0.7499.40',
+  'chrome-headless-shell': '143.0.7499.40',
+  firefox: 'stable_145.0.2',
 });

package/front_end/third_party/puppeteer/package/src/util/version.ts

@@ -6,5 +6,5 @@
 
 // If moved update release-please config
 // x-release-please-start-version
-export const packageVersion = '24.31.0';
+export const packageVersion = '24.32.0';
 // x-release-please-end

package/front_end/third_party/puppeteer/puppeteer-tsconfig.json

@@ -3,6 +3,7 @@
     "composite": true
   },
   "files": [
+    "package/lib/esm/puppeteer/api/BluetoothEmulation.js",
     "package/lib/esm/puppeteer/api/Browser.js",
     "package/lib/esm/puppeteer/api/BrowserContext.js",
     "package/lib/esm/puppeteer/api/CDPSession.js",
@@ -23,12 +24,14 @@
     "package/lib/esm/puppeteer/api/api.js",
     "package/lib/esm/puppeteer/api/locators/locators.js",
     "package/lib/esm/puppeteer/bidi/BidiOverCdp.js",
+    "package/lib/esm/puppeteer/bidi/BluetoothEmulation.js",
     "package/lib/esm/puppeteer/bidi/Browser.js",
     "package/lib/esm/puppeteer/bidi/BrowserConnector.js",
     "package/lib/esm/puppeteer/bidi/BrowserContext.js",
     "package/lib/esm/puppeteer/bidi/CDPSession.js",
     "package/lib/esm/puppeteer/bidi/Connection.js",
     "package/lib/esm/puppeteer/bidi/Deserializer.js",
+    "package/lib/esm/puppeteer/bidi/DeviceRequestPrompt.js",
     "package/lib/esm/puppeteer/bidi/Dialog.js",
     "package/lib/esm/puppeteer/bidi/ElementHandle.js",
     "package/lib/esm/puppeteer/bidi/ExposedFunction.js",
@@ -56,6 +59,7 @@
     "package/lib/esm/puppeteer/bidi/util.js",
     "package/lib/esm/puppeteer/cdp/Accessibility.js",
     "package/lib/esm/puppeteer/cdp/Binding.js",
+    "package/lib/esm/puppeteer/cdp/BluetoothEmulation.js",
     "package/lib/esm/puppeteer/cdp/Browser.js",
     "package/lib/esm/puppeteer/cdp/BrowserConnector.js",
     "package/lib/esm/puppeteer/cdp/BrowserContext.js",

package/front_end/ui/components/adorners/Adorner.ts

@@ -16,7 +16,12 @@ export interface AdornerData {
   jslogContext?: string;
 }
 
+/**
+ * @deprecated Do not add new usages. The custom component will be removed an
+ * embedded into the corresponding views.
+ */
 export class Adorner extends HTMLElement {
+  static readonly observedAttributes = ['active', 'toggleable'];
   name = '';
 
   readonly #shadow = this.attachShadow({mode: 'open'});
@@ -53,6 +58,21 @@ export class Adorner extends HTMLElement {
     this.#render();
   }
 
+  attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
+    if (oldValue === newValue) {
+      return;
+    }
+
+    switch (name) {
+      case 'active':
+        this.toggle(newValue === 'true');
+        break;
+      case 'toggleable':
+        this.#isToggle = newValue === 'true';
+        break;
+    }
+  }
+
   isActive(): boolean {
     return this.getAttribute('aria-pressed') === 'true';
   }

package/front_end/ui/components/annotations/AnnotationRepository.ts

@@ -8,34 +8,51 @@ import type * as SDK from '../../../core/sdk/sdk.js';
 
 import {AnnotationType} from './AnnotationType.js';
 
-interface BaseAnnotationData {
+export interface BaseAnnotationData {
   id: number;
   type: AnnotationType;
   message: string;
   // Sometimes the anchor for an annotation is not known, but is provided using a
-  // string id instead (which can be converted to an `anchor` later).
+  // string id instead (which can be converted to a proper `anchor`).
   lookupId: string;
   // Sometimes we want annotations to anchor to a particular string on the page.
   anchorToString?: string;
 }
 
-interface ElementsAnnotationData extends BaseAnnotationData {
+export interface ElementsAnnotationData extends BaseAnnotationData {
   type: AnnotationType.ELEMENT_NODE;
   anchor?: SDK.DOMModel.DOMNode;
 }
 
+export interface NetworkRequestAnnotationData extends BaseAnnotationData {
+  type: AnnotationType.NETWORK_REQUEST;
+  anchor?: SDK.NetworkRequest.NetworkRequest;
+}
+
+export interface NetworkRequestDetailsAnnotationData extends BaseAnnotationData {
+  type: AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS;
+  anchor?: SDK.NetworkRequest.NetworkRequest;
+}
+
 export const enum Events {
   ANNOTATION_ADDED = 'AnnotationAdded',
+  ANNOTATION_DELETED = 'AnnotationDeleted',
+  ALL_ANNOTATIONS_DELETED = 'AllAnnotationsDeleted',
 }
 
 export interface EventTypes {
   [Events.ANNOTATION_ADDED]: BaseAnnotationData;
+  [Events.ANNOTATION_DELETED]: {id: number};
+  [Events.ALL_ANNOTATIONS_DELETED]: void;
 }
 
 export class AnnotationRepository {
   static #instance: AnnotationRepository|null = null;
+  static #hasRepliedGreenDevDisabled = false;
+  static #hasShownFlagWarning = false;
+
   #events = new Common.ObjectWrapper.ObjectWrapper<EventTypes>();
-  #annotations: BaseAnnotationData[] = [];
+  #annotationData: BaseAnnotationData[] = [];
   #nextId = 0;
 
   static instance(): AnnotationRepository {
@@ -46,7 +63,17 @@ export class AnnotationRepository {
   }
 
   static annotationsEnabled(): boolean {
-    return Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled);
+    const enabled = Boolean(Root.Runtime.hostConfig.devToolsGreenDevUi?.enabled);
+    // TODO(finnur): Fix race when Repository is created before feature flags have been set properly.
+    if (!enabled) {
+      this.#hasRepliedGreenDevDisabled = true;
+    } else if (this.#hasRepliedGreenDevDisabled && !this.#hasShownFlagWarning) {
+      console.warn(
+          'Flag controlling GreenDev has flipped from false to true. ' +
+          'Only some callers will expect GreenDev to be enabled, which can lead to unexpected results.');
+      this.#hasShownFlagWarning = true;
+    }
+    return Boolean(enabled);
   }
 
   addEventListener<T extends keyof EventTypes>(
@@ -58,20 +85,65 @@ export class AnnotationRepository {
     return this.#events.addEventListener(eventType, listener, thisObject);
   }
 
-  getAnnotationsByType(type: AnnotationType): BaseAnnotationData[] {
+  getAnnotationDataByType(type: AnnotationType): BaseAnnotationData[] {
     if (!AnnotationRepository.annotationsEnabled()) {
       console.warn('Received query for annotation types with annotations disabled');
       return [];
     }
 
-    const annotations = this.#annotations.filter(annotation => annotation.type === type);
+    const annotations = this.#annotationData.filter(annotation => annotation.type === type);
     return annotations;
   }
 
+  getAnnotationDataById(id: number): BaseAnnotationData|undefined {
+    if (!AnnotationRepository.annotationsEnabled()) {
+      console.warn('Received query for annotation type with annotations disabled');
+      return undefined;
+    }
+
+    return this.#annotationData.find(annotation => annotation.id === id);
+  }
+
+  #getExistingAnnotation(type: AnnotationType, anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest|string):
+      BaseAnnotationData|undefined {
+    const annotations = this.getAnnotationDataByType(type);
+    const annotation = annotations.find(annotation => {
+      if (typeof anchor === 'string') {
+        return annotation.lookupId === anchor;
+      }
+      switch (type) {
+        case AnnotationType.ELEMENT_NODE: {
+          const elementAnnotation = annotation as ElementsAnnotationData;
+          return elementAnnotation.anchor === anchor;
+        }
+        case AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS: {
+          const networkRequestDetailsAnnotation = annotation as NetworkRequestDetailsAnnotationData;
+          return networkRequestDetailsAnnotation.anchor === anchor;
+        }
+        default:
+          console.warn('[AnnotationRepository] Unknown AnnotationType', type);
+          return false;
+      }
+    });
+    return annotation;
+  }
+
+  #updateExistingAnnotationLabel(
+      label: string, type: AnnotationType,
+      anchor?: SDK.DOMModel.DOMNode|SDK.NetworkRequest.NetworkRequest|string): boolean {
+    const annotation = this.#getExistingAnnotation(type, anchor);
+    if (annotation) {
+      // TODO(finnur): This should work for annotations that have not been displayed yet,
+      // but we need to also notify the AnnotationManager for those that have been shown.
+      annotation.message = label;
+      return true;
+    }
+    return false;
+  }
+
   addElementsAnnotation(
       label: string,
-      lookupId?: string,
-      anchor?: SDK.DOMModel.DOMNode,
+      anchor?: SDK.DOMModel.DOMNode|string,
       anchorToString?: string,
       ): void {
     if (!AnnotationRepository.annotationsEnabled()) {
@@ -79,20 +151,88 @@ export class AnnotationRepository {
       return;
     }
 
+    if (this.#updateExistingAnnotationLabel(label, AnnotationType.ELEMENT_NODE, anchor)) {
+      return;
+    }
+
     const annotationData: ElementsAnnotationData = {
       id: this.#nextId++,
       type: AnnotationType.ELEMENT_NODE,
       message: label,
-      lookupId: lookupId || '',
-      anchor,
-      anchorToString
+      lookupId: typeof anchor === 'string' ? anchor : '',
+      anchor: typeof anchor !== 'string' ? anchor : undefined,
+      anchorToString,
+    };
+    this.#annotationData.push(annotationData);
+    // eslint-disable-next-line no-console
+    console.log('[AnnotationRepository] Added element annotation:', label, {
+      annotationData,
+      annotations: this.#annotationData.length,
+    });
+    this.#events.dispatchEventToListeners(Events.ANNOTATION_ADDED, annotationData);
+  }
+
+  addNetworkRequestAnnotation(
+      label: string,
+      anchor?: SDK.NetworkRequest.NetworkRequest|string,
+      anchorToString?: string,
+      ): void {
+    if (!AnnotationRepository.annotationsEnabled()) {
+      console.warn('Received annotation registration with annotations disabled');
+      return;
+    }
+
+    // We only need to update the NETWORK_REQUEST_SUBPANEL_HEADERS because the
+    // NETWORK_REQUEST Annotation has no meaningful label.
+    if (this.#updateExistingAnnotationLabel(label, AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS, anchor)) {
+      return;
+    }
+
+    const annotationData: NetworkRequestAnnotationData = {
+      id: this.#nextId++,
+      type: AnnotationType.NETWORK_REQUEST,
+      message: '',
+      lookupId: typeof anchor === 'string' ? anchor : '',
+      anchor: typeof anchor !== 'string' ? anchor : undefined,
+      anchorToString,
     };
-    this.#annotations.push(annotationData);
+    this.#annotationData.push(annotationData);
     // eslint-disable-next-line no-console
     console.log('[AnnotationRepository] Added annotation:', label, {
       annotationData,
-      annotations: this.#annotations.length,
+      annotations: this.#annotationData.length,
     });
     this.#events.dispatchEventToListeners(Events.ANNOTATION_ADDED, annotationData);
+
+    const annotationDetailsData: NetworkRequestDetailsAnnotationData = {
+      id: this.#nextId++,
+      type: AnnotationType.NETWORK_REQUEST_SUBPANEL_HEADERS,
+      message: label,
+      lookupId: typeof anchor === 'string' ? anchor : '',
+      anchor: typeof anchor !== 'string' ? anchor : undefined,
+      anchorToString,
+    };
+
+    this.#annotationData.push(annotationDetailsData);
+    this.#events.dispatchEventToListeners(Events.ANNOTATION_ADDED, annotationDetailsData);
+  }
+
+  deleteAllAnnotations(): void {
+    this.#annotationData = [];
+    this.#events.dispatchEventToListeners(Events.ALL_ANNOTATIONS_DELETED);
+    // eslint-disable-next-line no-console
+    console.log('[AnnotationRepository] Deleting all annotations');
+  }
+
+  deleteAnnotation(id: number): void {
+    const index = this.#annotationData.findIndex(annotation => annotation.id === id);
+    if (index === -1) {
+      console.warn(`[AnnotationRepository] Could not find annotation with id ${id}`);
+      return;
+    }
+    this.#annotationData.splice(index, 1);
+    this.#events.dispatchEventToListeners(Events.ANNOTATION_DELETED, {id});
+    // eslint-disable-next-line no-console
+    console.log(`[AnnotationRepository] Deleted annotation with id ${id}`);
   }
 }

package/front_end/ui/components/buttons/Button.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../icon_button/icon_button.js';
+import '../../kit/kit.js';
 
 import * as Lit from '../../lit/lit.js';
 import * as VisualLogging from '../../visual_logging/visual_logging.js';

package/front_end/ui/components/buttons/FloatingButton.ts

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
-import '../icon_button/icon_button.js';
+import '../../kit/kit.js';
 
 import * as VisualLogging from '../../../ui/visual_logging/visual_logging.js';
 import * as Lit from '../../lit/lit.js';

package/front_end/ui/components/highlighting/HighlightElement.ts

@@ -6,11 +6,14 @@
 import * as TextUtils from '../../../models/text_utils/text_utils.js';
 
 import {HighlightManager} from './HighlightManager.js';
+import {type HighlightChange, highlightRangesWithStyleClass, revertDomChanges} from './MarkupHighlight.js';
 
 export class HighlightElement extends HTMLElement {
-  static readonly observedAttributes = ['ranges', 'current-range'];
+  static readonly observedAttributes = ['ranges', 'current-range', 'type'];
   #ranges: TextUtils.TextRange.SourceRange[] = [];
   #currentRange: TextUtils.TextRange.SourceRange|undefined;
+  #type = 'css';
+  #markupChanges: HighlightChange[] = [];
 
   attributeChangedCallback(name: string, oldValue: string|null, newValue: string|null): void {
     if (oldValue === newValue) {
@@ -23,8 +26,18 @@ export class HighlightElement extends HTMLElement {
       case 'current-range':
         this.#currentRange = parseRanges(newValue)[0];
         break;
+      case 'type':
+        this.#type = newValue || 'css';
+        break;
     }
-    HighlightManager.instance().set(this, this.#ranges, this.#currentRange);
+    queueMicrotask(() => {
+      if (this.#type === 'css') {
+        HighlightManager.instance().set(this, this.#ranges, this.#currentRange);
+      } else {
+        revertDomChanges(this.#markupChanges);
+        highlightRangesWithStyleClass(this, this.#ranges, 'highlight', this.#markupChanges);
+      }
+    });
   }
 }
 

package/front_end/ui/components/icon_button/FileSourceIcon.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import './IconButton.js';
+import '../../kit/kit.js';
 
 import {Directives, html, render} from '../../lit/lit.js';
 

package/front_end/ui/components/icon_button/IconButton.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import './Icon.js';
+import '../../kit/kit.js';
 
 import * as Lit from '../../lit/lit.js';
 

package/front_end/ui/components/icon_button/icon_button.ts

@@ -3,11 +3,9 @@
 // found in the LICENSE file.
 
 import * as FileSourceIcon from './FileSourceIcon.js';
-import * as Icon from './Icon.js';
 import * as IconButton from './IconButton.js';
 
 export {
   FileSourceIcon,
-  Icon,
   IconButton,
 };

package/front_end/ui/components/issue_counter/IssueCounter.ts

@@ -8,8 +8,8 @@ import '../icon_button/icon_button.js';
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';
 import * as IssuesManager from '../../../models/issues_manager/issues_manager.js';
+import type * as IconButton from '../../../ui/components/icon_button/icon_button.js';
 import {html, render} from '../../lit/lit.js';
-import type * as IconButton from '../icon_button/icon_button.js';
 
 import issueCounterStyles from './issueCounter.css.js';
 

package/front_end/ui/components/issue_counter/IssueLinkIcon.ts

@@ -3,7 +3,7 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../../../ui/components/icon_button/icon_button.js';
+import '../../../ui/kit/kit.js';
 
 import * as Common from '../../../core/common/common.js';
 import * as i18n from '../../../core/i18n/i18n.js';

package/front_end/ui/components/markdown_view/MarkdownImage.ts

@@ -3,9 +3,9 @@
 // found in the LICENSE file.
 /* eslint-disable @devtools/no-lit-render-outside-of-view, @devtools/enforce-custom-element-definitions-location */
 
-import '../../components/icon_button/icon_button.js';
+import '../../kit/kit.js';
 
-import type * as IconButton from '../../components/icon_button/icon_button.js';
+import type {IconData} from '../../kit/kit.js';
 import * as Lit from '../../lit/lit.js';
 
 import markdownImageStyles from './markdownImage.css.js';
@@ -42,7 +42,7 @@ export class MarkdownImage extends HTMLElement {
     }
     const {src, color, width = '100%', height = '100%'} = this.#imageData;
     return html`
-      <devtools-icon .data=${{iconPath: src, color, width, height} as IconButton.Icon.IconData}></devtools-icon>
+      <devtools-icon .data=${{iconPath: src, color, width, height} as IconData}></devtools-icon>
     `;
   }