chrome-devtools-frontend 1.0.1583146 → 1.0.1585664

package/front_end/ui/legacy/components/utils/Linkifier.ts

@@ -17,10 +17,12 @@ import * as TextUtils from '../../../../models/text_utils/text_utils.js';
 import type * as Trace from '../../../../models/trace/trace.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
 import * as UIHelpers from '../../../helpers/helpers.js';
-import {html, type LitTemplate, render} from '../../../lit/lit.js';
+import {Directives, html, type LitTemplate, render, type TemplateResult} from '../../../lit/lit.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
 
+const {ref, ifDefined, classMap} = Directives;
+
 const UIStrings = {
   /**
    * @description Text in Linkifier
@@ -228,7 +230,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       sourceURL: Platform.DevToolsPath.UrlString, lineNumber: number|undefined, options?: LinkifyOptions): HTMLElement
       |null {
     let fallbackAnchor: HTMLElement|null = null;
-    const linkifyURLOptions: LinkifyURLOptions = {
+    const linkifyURLOptions = {
       lineNumber,
       maxLength: options?.maxLength ?? this.maxLength,
       columnNumber: options?.columnNumber,
@@ -239,7 +241,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       userMetric: options?.userMetric,
       jslogContext: options?.jslogContext || 'script-location',
       omitOrigin: options?.omitOrigin,
-    };
+    } satisfies LinkifyURLOptions;
     const {columnNumber, className = ''} = linkifyURLOptions;
     if (sourceURL) {
       fallbackAnchor = Linkifier.linkifyURL(sourceURL, linkifyURLOptions);
@@ -280,6 +282,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
 
     const linkDisplayOptions: LinkDisplayOptions = {
       showColumnNumber: linkifyURLOptions.showColumnNumber ?? false,
+      maxLength: linkifyURLOptions.maxLength,
       revealBreakpoint: options?.revealBreakpoint,
     };
 
@@ -344,12 +347,10 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
         callFrame.url as Platform.DevToolsPath.UrlString, callFrame.lineNumber, linkifyOptions);
   }
 
-  maybeLinkifyStackTraceFrame(
-      target: SDK.Target.Target|null, frame: StackTrace.StackTrace.Frame, options?: LinkifyOptions): HTMLElement {
-    const linkifyURLOptions: LinkifyURLOptions = {
+  static linkifyStackTraceFrame(frame: StackTrace.StackTrace.Frame, options?: LinkifyOptions): HTMLElement {
+    const linkifyURLOptions = {
       ...options,
       lineNumber: frame.line,
-      maxLength: this.maxLength,
       columnNumber: frame.column,
       showColumnNumber: Boolean(options?.showColumnNumber),
       className: options?.className,
@@ -358,10 +359,10 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       userMetric: options?.userMetric,
       jslogContext: options?.jslogContext || 'script-location',
       omitOrigin: options?.omitOrigin,
-    };
+    } satisfies LinkifyURLOptions;
     const {className = ''} = linkifyURLOptions;
     const fallbackAnchor = Linkifier.linkifyURL(frame.url as Platform.DevToolsPath.UrlString, linkifyURLOptions);
-    if (!target || target.isDisposed() || !frame.uiSourceCode) {
+    if (!frame.uiSourceCode) {
       return fallbackAnchor;
     }
 
@@ -371,20 +372,18 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     };
     const {link, linkInfo} = Linkifier.createLink(
         fallbackAnchor?.textContent ? fallbackAnchor.textContent : '', className, createLinkOptions);
-    linkInfo.enableDecorator = this.useLinkDecorator;
     linkInfo.fallback = fallbackAnchor;
     linkInfo.userMetric = options?.userMetric;
 
     const linkDisplayOptions: LinkDisplayOptions = {
       showColumnNumber: linkifyURLOptions.showColumnNumber ?? false,
+      maxLength: linkifyURLOptions.maxLength ?? UI.UIUtils.MaxLengthForDisplayedURLs,
       revealBreakpoint: options?.revealBreakpoint,
     };
 
     const uiLocation = frame.uiSourceCode.uiLocation(frame.line, frame.column) ?? null;
-    this.updateAnchorFromUILocation(link, linkDisplayOptions, uiLocation);
+    Linkifier.updateAnchorFromUILocation(link, linkDisplayOptions, uiLocation);
 
-    const anchors = (this.anchorsByTarget.get(target) as Element[]);
-    anchors.push(link);
     return link;
   }
 
@@ -422,7 +421,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     linkInfo.enableDecorator = this.useLinkDecorator;
     linkInfo.fallback = fallbackAnchor;
 
-    const linkDisplayOptions = {showColumnNumber: false};
+    const linkDisplayOptions = {showColumnNumber: false, maxLength: this.maxLength};
 
     const updateDelegate = async(liveLocation: Bindings.LiveLocation.LiveLocation): Promise<void> => {
       await this.updateAnchor(link, linkDisplayOptions, liveLocation);
@@ -453,7 +452,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       return link;
     }
 
-    const linkDisplayOptions = {showColumnNumber: false};
+    const linkDisplayOptions = {showColumnNumber: false, maxLength: this.maxLength};
 
     const updateDelegate = async(liveLocation: Bindings.LiveLocation.LiveLocation): Promise<void> => {
       await this.updateAnchor(link, linkDisplayOptions, liveLocation);
@@ -509,10 +508,10 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     this.#anchorUpdaters.set(anchor, function(this: Linkifier, anchor: HTMLElement) {
       void this.updateAnchor(anchor, options, liveLocation);
     });
-    this.updateAnchorFromUILocation(anchor, options, uiLocation);
+    Linkifier.updateAnchorFromUILocation(anchor, options, uiLocation);
   }
 
-  private updateAnchorFromUILocation(
+  private static updateAnchorFromUILocation(
       anchor: HTMLElement, options: LinkDisplayOptions, uiLocation: Workspace.UISourceCode.UILocation|null): void {
     if (!uiLocation) {
       anchor.classList.add('invalid-link');
@@ -526,7 +525,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     }
 
     const text = uiLocation.linkText(true /* skipTrim */, options.showColumnNumber);
-    Linkifier.setTrimmedText(anchor, text, this.maxLength);
+    Linkifier.setTrimmedText(anchor, text, options.maxLength);
 
     let titleText: string = uiLocation.uiSourceCode.url();
     if (uiLocation.uiSourceCode.mimeType() === 'application/wasm') {
@@ -563,7 +562,7 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     info.icon = icon;
   }
 
-  static linkifyURL(url: Platform.DevToolsPath.UrlString, options?: LinkifyURLOptions): HTMLElement {
+  static renderLinkifiedUrl(url: Platform.DevToolsPath.UrlString, options?: LinkifyURLOptions): TemplateResult {
     options = options || {
       showColumnNumber: false,
       inlineFrameIndex: 0,
@@ -578,16 +577,14 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     const maxLength = options.maxLength || UI.UIUtils.MaxLengthForDisplayedURLs;
     const bypassURLTrimming = options.bypassURLTrimming;
     const omitOrigin = options.omitOrigin;
-    if (!url || Common.ParsedURL.schemeIs(url, 'javascript:')) {
-      const element = document.createElement('span');
-      if (className) {
-        element.className = className;
-      }
 
-      element.textContent = text || url || i18nString(UIStrings.unknown);
-      return element;
+    if (!url || Common.ParsedURL.schemeIs(url, 'javascript:')) {
+      // clang-format off
+      return html`<span class=${className}>${text || url || i18nString(UIStrings.unknown)}</span>`;
+      // clang-format on
     }
 
+    // FIXME: Bindings.ResourceUtils.displayNameForURL should be called in presenters.
     let linkText = text || Bindings.ResourceUtils.displayNameForURL(url);
 
     if (omitOrigin) {
@@ -612,16 +609,20 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       tabStop: options.tabStop,
       bypassURLTrimming,
       jslogContext: options.jslogContext || 'url',
+      lineNumber,
+      columnNumber,
+      userMetric: options?.userMetric
     };
-    const {link, linkInfo} = Linkifier.createLink(linkText, className, linkOptions);
-    if (lineNumber) {
-      linkInfo.lineNumber = lineNumber;
-    }
-    if (columnNumber) {
-      linkInfo.columnNumber = columnNumber;
-    }
-    linkInfo.userMetric = options?.userMetric;
-    return link;
+    return Linkifier.renderLink(linkText, className, linkOptions);
+  }
+
+  /**
+   * @deprecated use renderLinkifiedUrl.
+   */
+  static linkifyURL(url: Platform.DevToolsPath.UrlString, options?: LinkifyURLOptions): HTMLElement {
+    const container = document.createDocumentFragment();
+    render(Linkifier.renderLinkifiedUrl(url, options), container);
+    return container.firstElementChild as HTMLElement;
   }
 
   static linkifyRevealable(
@@ -638,64 +639,90 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
     return link;
   }
 
-  private static createLink(text: string|HTMLElement, className: string, options: CreateLinkOptions = {}):
-      {link: HTMLElement, linkInfo: LinkInfo} {
+  private static renderLink(text: string|HTMLElement, className: string, options: CreateLinkOptions = {}):
+      TemplateResult {
     const {maxLength, title, href, preventClick, tabStop, bypassURLTrimming, jslogContext} = options;
-    const link = document.createElement(options.preventClick ? 'span' : 'button');
-    if (className) {
-      link.className = className;
-    }
-    link.classList.add('devtools-link');
-    if (!options.preventClick) {
-      link.classList.add('text-button', 'link-style');
-    }
-    if (title) {
-      UI.Tooltip.Tooltip.install(link, title);
-    }
-    if (href) {
-      // @ts-expect-error
-      link.href = href;
-    }
-    link.setAttribute('jslog', `${VisualLogging.link(jslogContext).track({click: true})}`);
-
-    if (text instanceof HTMLElement) {
-      link.appendChild(text);
-    } else if (bypassURLTrimming) {
-      link.classList.add('devtools-link-styled-trim');
-      Linkifier.appendTextWithoutHashes(link, text);
-    } else {
-      Linkifier.setTrimmedText(link, text, maxLength);
+    const classes: Record<string, boolean> = {
+      'devtools-link': true,
+      'text-button': !preventClick,
+      'link-style': !preventClick,
+      'devtools-link-prevent-click': !!preventClick,
+    };
+    // More than one class name may be passed.
+    for (const cls of className.split(' ')) {
+      if (cls) {
+        classes[cls] = true;
+      }
     }
-
-    const linkInfo = {
-      icon: null,
-      enableDecorator: false,
-      uiLocation: null,
-      liveLocation: null,
-      url: href || null,
-      lineNumber: null,
-      columnNumber: null,
-      inlineFrameIndex: 0,
-      revealable: null,
-      fallback: null,
+    const handler = (event: MouseEvent|KeyboardEvent): void => {
+      if (event instanceof KeyboardEvent && event.key !== Platform.KeyboardUtilities.ENTER_KEY && event.key !== ' ') {
+        return;
+      }
+      if (Linkifier.handleClick(event)) {
+        event.consume(true);
+      }
     };
-    infoByAnchor.set(link, linkInfo);
-    if (!preventClick) {
-      const handler = (event: MouseEvent|KeyboardEvent): void => {
-        if (event instanceof KeyboardEvent && event.key !== Platform.KeyboardUtilities.ENTER_KEY && event.key !== ' ') {
+    const createRef = (): ReturnType<typeof ref> => {
+      return ref(link => {
+        if (!link) {
           return;
         }
-        if (Linkifier.handleClick(event)) {
-          event.consume(true);
+        options.onRef?.(link as HTMLElement);
+        if (text instanceof HTMLElement) {
+          link.appendChild(text);
+        } else if (bypassURLTrimming) {
+          link.classList.add('devtools-link-styled-trim');
+          Linkifier.appendTextWithoutHashes(link, text);
+        } else {
+          Linkifier.setTrimmedText(link, text, maxLength);
         }
-      };
-      link.onclick = handler;
-      link.onkeydown = handler;
-    } else {
-      link.classList.add('devtools-link-prevent-click');
-    }
-    UI.ARIAUtils.markAsLink(link);
-    link.tabIndex = tabStop ? 0 : -1;
+        const linkInfo = {
+          icon: null,
+          enableDecorator: false,
+          uiLocation: null,
+          liveLocation: null,
+          url: options.href || null,
+          lineNumber: options.lineNumber ?? null,
+          columnNumber: options.columnNumber ?? null,
+          inlineFrameIndex: 0,
+          revealable: null,
+          fallback: null,
+          userMetric: options.userMetric,
+        };
+        infoByAnchor.set(link, linkInfo);
+      });
+    };
+    const jslog = VisualLogging.link(jslogContext).track({click: true});
+    // clang-format off
+    return preventClick ? html`<span
+      class=${classMap(classes)}
+      .href=${href}
+      title=${ifDefined(title ? title : undefined)}
+      jslog=${jslog}
+      .tabIndex=${tabStop ? 0 : -1}
+      role="link"
+      ${createRef()}></span>` : html`<button
+        @click=${handler}
+        @keydown=${handler}
+        class=${classMap(classes)}
+        .href=${href}
+        title=${ifDefined(title ? title : undefined)}
+        jslog=${jslog}
+        .tabIndex=${tabStop ? 0 : -1}
+        role="link"
+        ${createRef()}></button>`;
+    // clang-format on
+  }
+
+  /**
+   * @deprecated use renderLink.
+   */
+  private static createLink(text: string|HTMLElement, className: string, options: CreateLinkOptions = {}):
+      {link: HTMLElement, linkInfo: LinkInfo} {
+    const container = document.createDocumentFragment();
+    render(Linkifier.renderLink(text, className, options), container);
+    const link = container.firstElementChild as HTMLElement;
+    const linkInfo = infoByAnchor.get(link) as LinkInfo;
     return {link, linkInfo};
   }
 
@@ -1128,6 +1155,7 @@ export interface LinkifyURLOptions {
   userMetric?: Host.UserMetrics.Action;
   jslogContext?: string;
   omitOrigin?: boolean;
+  onRef?: (el: HTMLElement) => void;
 }
 
 export interface LinkifyOptions {
@@ -1155,10 +1183,15 @@ interface CreateLinkOptions {
   tabStop?: boolean;
   bypassURLTrimming?: boolean;
   jslogContext?: string;
+  lineNumber?: number;
+  columnNumber?: number;
+  userMetric?: Host.UserMetrics.Action;
+  onRef?: (el: HTMLElement) => void;
 }
 
 interface LinkDisplayOptions {
   showColumnNumber: boolean;
+  maxLength: number;
 
   /**
    * If true, we'll check if there is a breakpoint at the UILocation we get

package/front_end/ui/legacy/components/utils/jsUtils.css

@@ -4,15 +4,6 @@
  * found in the LICENSE file.
  */
 
-:host {
-  display: inline;
-}
-
-:host(.width-constrained) {
-  display: inline-block;
-  width: 100%;
-}
-
 .stack-preview-async-description {
   padding: 3px 0 1px;
   font-weight: bold;

package/front_end/ui/legacy/legacy.ts

@@ -15,7 +15,6 @@ import * as DropTarget from './DropTarget.js';
 import * as EmptyWidget from './EmptyWidget.js';
 import * as FilterBar from './FilterBar.js';
 import * as FilterSuggestionBuilder from './FilterSuggestionBuilder.js';
-import * as Floaty from './Floaty.js';
 import * as ForwardedInputEventHandler from './ForwardedInputEventHandler.js';
 import * as Fragment from './Fragment.js';
 import * as GlassPane from './GlassPane.js';
@@ -67,7 +66,6 @@ export {
   EmptyWidget,
   FilterBar,
   FilterSuggestionBuilder,
-  Floaty,
   ForwardedInputEventHandler,
   Fragment,
   GlassPane,

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -842,6 +842,7 @@ export const knownContextValues = new Set([
   'columns',
   'combined-diff-view.copy',
   'comic-sans-ms',
+  'command',
   'command-editor',
   'command-input',
   'commit',
@@ -2495,6 +2496,7 @@ export const knownContextValues = new Set([
   'main-menu',
   'main-selected-tab',
   'main-tab-order',
+  'main.chrome-restart-chrome',
   'main.debug-reload',
   'main.next-tab',
   'main.previous-tab',
@@ -3903,6 +3905,7 @@ export const knownContextValues = new Set([
   'timeline-show-postmessage-events',
   'timeline-show-screenshots',
   'timeline-show-settings-toolbar',
+  'timeline-sidebar-opened-at-least-once',
   'timeline-status',
   'timeline-tree-current-thread',
   'timeline-tree-group-by',

package/mcp/HostBindings.ts

@@ -313,4 +313,7 @@ export class McpHostBindings implements Host.InspectorFrontendHostAPI.InspectorF
 
   setChromeFlag(): void {
   }
+
+  requestRestart(): void {
+  }
 }

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1583146"
+  "version": "1.0.1585664"
 }

package/front_end/models/issues_manager/descriptions/corsInsecurePrivateNetwork.md

@@ -1,10 +0,0 @@
-# Ensure private network requests are made from secure contexts
-
-A site requested a resource from a network that it could only access because of its users' privileged network position.
-These requests expose devices and servers to the internet, increasing the risk of a cross-site request forgery (CSRF) attack, and/or information leakage.
-
-To mitigate these risks, Chrome deprecates requests to non-public subresources when initiated from non-secure contexts. See the [feature status](PNASecureContextRestrictionFeatureStatus).
-
-To fix this issue, migrate the website that needs to access local resources to HTTPS. If the target resource is not served on localhost, it must also be served on HTTPS to avoid mixed-content issues.
-
-Administrators can make use of the `InsecurePrivateNetworkRequestsAllowed` and `InsecurePrivateNetworkRequestsAllowedForUrls` enterprise policies to temporarily disable this restriction on all or certain websites.

package/front_end/models/issues_manager/descriptions/corsPreflightAllowPrivateNetworkError.md

@@ -1,10 +0,0 @@
-# Ensure private network requests are only made to resources that allow them
-
-A site requested a resource from a network that it could only access because of its users' privileged network position.
-These requests expose devices and servers to the internet, increasing the risk of a cross-site request forgery (CSRF) attack, and/or information leakage.
-
-To mitigate these risks, Chrome will require non-public subresources to opt-into being accessed with a preflight request and will start blocking them in Chrome 130 (October 2024).
-
-To fix this issue, ensure that response to the [preflight request](issueCorsPreflightRequest) for the private network resource has the `Access-Control-Allow-Private-Network` header set to `true`.
-
-Administrators can make use of the `InsecurePrivateNetworkRequestsAllowed` and `InsecurePrivateNetworkRequestsAllowedForUrls` enterprise policies to temporarily disable this restriction on all or certain websites.

package/front_end/models/issues_manager/descriptions/corsPrivateNetworkPermissionDenied.md

@@ -1,10 +0,0 @@
-# Ensure that private network requests made from secure context to plaintext resources can gain access based on user permission
-
-A site requested a resource from a network that it could only access because of its users' privileged network position.
-These requests expose devices and servers to the internet, increasing the risk of a cross-site request forgery (CSRF) attack and/or information leakage.
-
-To mitigate these risks, Chrome deprecates requests to non-public subresources when initiated from non-secure contexts. See the [feature status](PNASecureContextRestrictionFeatureStatus).
-
-Setting a `targetAddressSpace` fetch option to `private` or `local` allows secure contexts to fetch private network resources over HTTP, which is normally forbidden by mixed-content checks. The target server must respond affirmatively to a preflight request, and the user must grant explicit permission.
-
-Make sure that the response to the [preflight request](issueCorsPreflightRequest) for the private network resource has the `Private-Network-Access-Id` and `Private-Network-Access-Name` header properly set. `Private-Network-Access-Id` should be the device's MAC address and `Private-Network-Access-Name` should be a human-friendly device name.