chrome-devtools-frontend 1.0.1538310 → 1.0.1539728

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

@@ -30,6 +30,10 @@ import {TimeoutError} from '../common/Errors.js';
 import type {SupportedBrowser} from '../common/SupportedBrowser.js';
 import {debugError, DEFAULT_VIEWPORT} from '../common/util.js';
 import type {Viewport} from '../common/Viewport.js';
+import {
+  createIncrementalIdGenerator,
+  type GetIdFn,
+} from '../util/incremental-id-generator.js';
 
 import type {ChromeReleaseChannel, LaunchOptions} from './LaunchOptions.js';
 import {NodeWebSocketTransport as WebSocketTransport} from './NodeWebSocketTransport.js';
@@ -88,6 +92,7 @@ export abstract class BrowserLauncher {
       waitForInitialPage = true,
       protocolTimeout,
       handleDevToolsAsPage,
+      idGenerator = createIncrementalIdGenerator(),
     } = options;
 
     let {protocol} = options;
@@ -166,6 +171,7 @@ export abstract class BrowserLauncher {
             defaultViewport,
             acceptInsecureCerts,
             networkEnabled,
+            idGenerator,
           },
         );
       } else {
@@ -174,12 +180,14 @@ export abstract class BrowserLauncher {
             timeout,
             protocolTimeout,
             slowMo,
+            idGenerator,
           });
         } else {
           cdpConnection = await this.createCdpSocketConnection(browserProcess, {
             timeout,
             protocolTimeout,
             slowMo,
+            idGenerator,
           });
         }
 
@@ -342,6 +350,7 @@ export abstract class BrowserLauncher {
       timeout: number;
       protocolTimeout: number | undefined;
       slowMo: number;
+      idGenerator: GetIdFn;
     },
   ): Promise<Connection> {
     const browserWSEndpoint = await browserProcess.waitForLineOutput(
@@ -354,6 +363,8 @@ export abstract class BrowserLauncher {
       transport,
       opts.slowMo,
       opts.protocolTimeout,
+      /* rawErrors */ false,
+      opts.idGenerator,
     );
   }
 
@@ -366,6 +377,7 @@ export abstract class BrowserLauncher {
       timeout: number;
       protocolTimeout: number | undefined;
       slowMo: number;
+      idGenerator: GetIdFn;
     },
   ): Promise<Connection> {
     // stdio was assigned during start(), and the 'pipe' option there adds the
@@ -375,7 +387,14 @@ export abstract class BrowserLauncher {
       pipeWrite as NodeJS.WritableStream,
       pipeRead as NodeJS.ReadableStream,
     );
-    return new Connection('', transport, opts.slowMo, opts.protocolTimeout);
+    return new Connection(
+      '',
+      transport,
+      opts.slowMo,
+      opts.protocolTimeout,
+      /* rawErrors */ false,
+      opts.idGenerator,
+    );
   }
 
   /**
@@ -417,6 +436,7 @@ export abstract class BrowserLauncher {
       timeout: number;
       protocolTimeout: number | undefined;
       slowMo: number;
+      idGenerator: GetIdFn;
       defaultViewport: Viewport | null;
       acceptInsecureCerts?: boolean;
       networkEnabled?: boolean;
@@ -432,6 +452,7 @@ export abstract class BrowserLauncher {
     const bidiConnection = new BiDi.BidiConnection(
       browserWSEndpoint,
       transport,
+      opts.idGenerator,
       opts.slowMo,
       opts.protocolTimeout,
     );

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.27.0';
+export const packageVersion = '24.28.0';
 // x-release-please-end

package/front_end/ui/components/panel_feedback/PreviewToggle.ts

@@ -69,7 +69,7 @@ export class PreviewToggle extends HTMLElement {
           <devtools-checkbox
             ?checked=${checked}
             @change=${this.#checkboxChanged}
-            aria-label=${this.#name} />
+            aria-label=${this.#name} >
             <devtools-icon name="experiment" class="medium">
           </devtools-icon>${this.#name}
           </devtools-checkbox>

package/front_end/ui/components/switch/Switch.docs.ts

@@ -0,0 +1,38 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {Switch} from './switch.js';
+
+export async function render(container: HTMLElement) {
+  function switchExample({checked, disabled}: {checked: boolean, disabled: boolean}): HTMLElement {
+    const example = document.createElement('div');
+    example.style.marginTop = '20px';
+    const explanation = document.createElement('div');
+    const disabledExplanation = document.createElement('div');
+    const component = new Switch.Switch();
+    component.checked = checked;
+    component.disabled = disabled;
+    explanation.textContent = `is checked? ${component.checked}`;
+    disabledExplanation.textContent = `is disabled? ${component.disabled}`;
+    component.addEventListener(Switch.SwitchChangeEvent.eventName, ev => {
+      explanation.textContent = `is checked? ${ev.checked}`;
+    });
+    example.appendChild(component);
+    example.appendChild(explanation);
+    example.appendChild(disabledExplanation);
+    return example;
+  }
+
+  // Basic
+  container.appendChild(switchExample({checked: false, disabled: false}));
+
+  // Already checked
+  container.appendChild(switchExample({checked: true, disabled: false}));
+
+  // Disabled
+  container.appendChild(switchExample({checked: false, disabled: true}));
+
+  // Disabled & checked
+  container.appendChild(switchExample({checked: true, disabled: true}));
+}

package/front_end/ui/components/tooltips/Tooltip.ts

@@ -21,7 +21,7 @@ interface PositioningParams {
   currentPopoverRect: DOMRect;
 }
 
-enum PositionOption {
+export enum PositionOption {
   BOTTOM_SPAN_RIGHT = 'bottom-span-right',
   BOTTOM_SPAN_LEFT = 'bottom-span-left',
   TOP_SPAN_RIGHT = 'top-span-right',
@@ -66,29 +66,32 @@ const positioningUtils = {
     };
   },
   // Adjusts proposed rect so that the resulting popover is always inside the inspector view bounds.
-  insetAdjustedRect:
-      ({inspectorViewRect, anchorRect, currentPopoverRect, proposedRect}:
-           {inspectorViewRect: DOMRect, anchorRect: DOMRect, currentPopoverRect: DOMRect, proposedRect: ProposedRect}):
-          ProposedRect => {
-            if (inspectorViewRect.left > proposedRect.left) {
-              proposedRect.left = inspectorViewRect.left;
-            }
-
-            if (inspectorViewRect.right < proposedRect.left + currentPopoverRect.width) {
-              proposedRect.left = inspectorViewRect.right - currentPopoverRect.width;
-            }
-
-            if (proposedRect.top + currentPopoverRect.height > inspectorViewRect.bottom) {
-              proposedRect.top = anchorRect.top - currentPopoverRect.height;
-            }
-            return proposedRect;
-          },
+  insetAdjustedRect: ({inspectorViewRect, currentPopoverRect, proposedRect}:
+                          {inspectorViewRect: DOMRect, currentPopoverRect: DOMRect, proposedRect: ProposedRect}):
+      ProposedRect => {
+        if (inspectorViewRect.left > proposedRect.left) {
+          proposedRect.left = inspectorViewRect.left;
+        }
+
+        if (inspectorViewRect.right < proposedRect.left + currentPopoverRect.width) {
+          proposedRect.left = inspectorViewRect.right - currentPopoverRect.width;
+        }
+
+        if (proposedRect.top < inspectorViewRect.top) {
+          proposedRect.top = inspectorViewRect.top;
+        }
+
+        if (proposedRect.top + currentPopoverRect.height > inspectorViewRect.bottom) {
+          proposedRect.top = inspectorViewRect.bottom - currentPopoverRect.height;
+        }
+        return proposedRect;
+      },
   isInBounds: ({inspectorViewRect, currentPopoverRect, proposedRect}:
                    {inspectorViewRect: DOMRect, currentPopoverRect: DOMRect, proposedRect: ProposedRect}): boolean => {
-    return inspectorViewRect.left < proposedRect.left &&
-        proposedRect.left + currentPopoverRect.width < inspectorViewRect.right &&
-        inspectorViewRect.top < proposedRect.top &&
-        proposedRect.top + currentPopoverRect.height < inspectorViewRect.bottom;
+    return inspectorViewRect.left <= proposedRect.left &&
+        proposedRect.left + currentPopoverRect.width <= inspectorViewRect.right &&
+        inspectorViewRect.top <= proposedRect.top &&
+        proposedRect.top + currentPopoverRect.height <= inspectorViewRect.bottom;
   },
   isSameRect: (rect1: DOMRect|null, rect2: DOMRect|null): boolean => {
     if (!rect1 || !rect2) {
@@ -100,7 +103,7 @@ const positioningUtils = {
   }
 };
 
-const proposedRectForRichTooltip = ({inspectorViewRect, anchorRect, currentPopoverRect, preferredPositions}: {
+export const proposedRectForRichTooltip = ({inspectorViewRect, anchorRect, currentPopoverRect, preferredPositions}: {
   inspectorViewRect: DOMRect,
   anchorRect: DOMRect,
   currentPopoverRect: DOMRect,
@@ -116,36 +119,49 @@ const proposedRectForRichTooltip = ({inspectorViewRect, anchorRect, currentPopov
     ]),
   ];
 
-  // Tries the positioning options in the order given by `uniqueOrder`.
-  // If none of them work out, we default to showing the tooltip in the bottom right and adjust
-  // its insets so that the tooltip is inside the inspector view bounds.
-  for (const positionOption of uniqueOrder) {
-    let proposedRect;
+  const getProposedRectForPositionOption = (positionOption: PositionOption): ProposedRect => {
     switch (positionOption) {
       case PositionOption.BOTTOM_SPAN_RIGHT:
-        proposedRect = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
-        break;
+        return positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
       case PositionOption.BOTTOM_SPAN_LEFT:
-        proposedRect = positioningUtils.bottomSpanLeft({anchorRect, currentPopoverRect});
-        break;
+        return positioningUtils.bottomSpanLeft({anchorRect, currentPopoverRect});
       case PositionOption.TOP_SPAN_RIGHT:
-        proposedRect = positioningUtils.topSpanRight({anchorRect, currentPopoverRect});
-        break;
+        return positioningUtils.topSpanRight({anchorRect, currentPopoverRect});
       case PositionOption.TOP_SPAN_LEFT:
-        proposedRect = positioningUtils.topSpanLeft({anchorRect, currentPopoverRect});
+        return positioningUtils.topSpanLeft({anchorRect, currentPopoverRect});
     }
+  };
+
+  // Tries the positioning options in the order given by `uniqueOrder`.
+  for (const positionOption of uniqueOrder) {
+    const proposedRect = getProposedRectForPositionOption(positionOption);
     if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
       return proposedRect;
     }
   }
 
-  // If none of the options work above, we position to bottom right
-  // and adjust the insets so that it does not go out of bounds.
-  const proposedRect = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
-  return positioningUtils.insetAdjustedRect({anchorRect, currentPopoverRect, inspectorViewRect, proposedRect});
+  // If none of the options above work, we decide between top or bottom by which
+  // option is fewer vertical pixels out of the viewport. We pick left/right
+  // according to `uniqueOrder`. And finally we adjust the insets so that the
+  // tooltip is not out of bounds.
+  const bottomProposed = positioningUtils.bottomSpanRight({anchorRect, currentPopoverRect});
+  const bottomVerticalOutOfBounds =
+      Math.max(0, bottomProposed.top + currentPopoverRect.height - inspectorViewRect.bottom);
+  const topProposed = positioningUtils.topSpanRight({anchorRect, currentPopoverRect});
+  const topVerticalOutOfBounds = Math.max(0, inspectorViewRect.top - topProposed.top);
+  const prefersBottom = bottomVerticalOutOfBounds <= topVerticalOutOfBounds;
+  const fallbackOption = uniqueOrder.find(option => {
+    if (prefersBottom) {
+      return option === PositionOption.BOTTOM_SPAN_LEFT || option === PositionOption.BOTTOM_SPAN_RIGHT;
+    }
+    return option === PositionOption.TOP_SPAN_LEFT || option === PositionOption.TOP_SPAN_RIGHT;
+  }) ??
+      PositionOption.TOP_SPAN_RIGHT;
+  const fallbackRect = getProposedRectForPositionOption(fallbackOption);
+  return positioningUtils.insetAdjustedRect({currentPopoverRect, inspectorViewRect, proposedRect: fallbackRect});
 };
 
-const proposedRectForSimpleTooltip =
+export const proposedRectForSimpleTooltip =
     ({inspectorViewRect, anchorRect, currentPopoverRect}:
          {inspectorViewRect: DOMRect, anchorRect: DOMRect, currentPopoverRect: DOMRect}): ProposedRect => {
       // Default options are bottom centered & top centered.
@@ -153,16 +169,24 @@ const proposedRectForSimpleTooltip =
       if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
         return proposedRect;
       }
+      const bottomVerticalOutOfBoundsAmount =
+          Math.max(0, proposedRect.top + currentPopoverRect.height - inspectorViewRect.bottom);
 
       proposedRect = positioningUtils.topCentered({anchorRect, currentPopoverRect});
       if (positioningUtils.isInBounds({inspectorViewRect, currentPopoverRect, proposedRect})) {
         return proposedRect;
       }
-
-      // The default options did not work out, so position it to bottom center
-      // and adjust the insets to make sure that it does not go out of bounds.
-      proposedRect = positioningUtils.bottomCentered({anchorRect, currentPopoverRect});
-      return positioningUtils.insetAdjustedRect({anchorRect, currentPopoverRect, inspectorViewRect, proposedRect});
+      const topVerticalOutOfBoundsAmount = Math.max(0, inspectorViewRect.top - proposedRect.top);
+
+      // The default options did not work out, so compare which option is fewer
+      // pixels out of the viewport vertically. Pick the better option and
+      // adjust the insets to make sure that the tooltip is not out of bounds.
+      if (bottomVerticalOutOfBoundsAmount <= topVerticalOutOfBoundsAmount) {
+        proposedRect = positioningUtils.bottomCentered({anchorRect, currentPopoverRect});
+      } else {
+        proposedRect = positioningUtils.topCentered({anchorRect, currentPopoverRect});
+      }
+      return positioningUtils.insetAdjustedRect({currentPopoverRect, inspectorViewRect, proposedRect});
     };
 
 export type TooltipVariant = 'simple'|'rich';

package/front_end/ui/legacy/Slider.docs.ts

@@ -0,0 +1,49 @@
+// Copyright 2024 The Chromium Authors
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import {UIUtils} from './legacy.js';
+
+export async function render(container: HTMLElement) {
+  function sliderExample({min, max, tabIndex, disabled}: {
+    min: number,
+    max: number,
+    tabIndex: number,
+    disabled: boolean,
+  }): HTMLElement {
+    const example = document.createElement('div');
+    example.style.marginTop = '20px';
+    const minExplanation = document.createElement('div');
+    const maxExplanation = document.createElement('div');
+    const valueExplanation = document.createElement('div');
+    const disabledExplanation = document.createElement('div');
+    const tabbableExplanation = document.createElement('div');
+    const component = UIUtils.createSlider(min, max, tabIndex);
+    component.disabled = disabled;
+    minExplanation.textContent = `min: ${min}`;
+    maxExplanation.textContent = `max: ${max}`;
+    valueExplanation.textContent = `value: ${component.value}`;
+    disabledExplanation.textContent = `is disabled? ${component.disabled}`;
+    tabbableExplanation.textContent = `is tabbable? ${component.tabIndex >= 0}`;
+
+    component.addEventListener('change', () => {
+      valueExplanation.textContent = `value: ${component.value}`;
+    });
+    example.appendChild(component);
+    example.appendChild(minExplanation);
+    example.appendChild(maxExplanation);
+    example.appendChild(valueExplanation);
+    example.appendChild(disabledExplanation);
+    example.appendChild(tabbableExplanation);
+    return example;
+  }
+
+  // Basic
+  container.appendChild(sliderExample({min: 0, max: 100, tabIndex: 0, disabled: false}));
+
+  // Not tab reachable
+  container.appendChild(sliderExample({min: 0, max: 100, tabIndex: -1, disabled: false}));
+
+  // Disabled
+  container.appendChild(sliderExample({min: 0, max: 100, tabIndex: 0, disabled: true}));
+}

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

@@ -39,6 +39,7 @@ import * as i18n from '../../../../core/i18n/i18n.js';
 import * as Platform from '../../../../core/platform/platform.js';
 import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
+import * as StackTrace from '../../../../models/stack_trace/stack_trace.js';
 import * as Workspace from '../../../../models/workspace/workspace.js';
 import * as VisualLogging from '../../../visual_logging/visual_logging.js';
 import * as UI from '../../legacy.js';
@@ -95,7 +96,8 @@ function populateContextMenu(link: Element, event: Event): void {
   void contextMenu.show();
 }
 
-export function buildStackTraceRows(
+// TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
+export function buildStackTraceRowsForLegacyRuntimeStackTrace(
     stackTrace: Protocol.Runtime.StackTrace,
     target: SDK.Target.Target|null,
     linkifier: Linkifier,
@@ -158,6 +160,63 @@ export function buildStackTraceRows(
   return stackTraceRows;
 }
 
+export function buildStackTraceRows(
+    stackTrace: StackTrace.StackTrace.StackTrace,
+    target: SDK.Target.Target|null,
+    linkifier: Linkifier,
+    tabStops: boolean|undefined,
+    showColumnNumber?: boolean,
+    ): Array<StackTraceRegularRow|StackTraceAsyncRow> {
+  const stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow> = [];
+
+  function buildStackTraceRowsHelper(
+      fragment: StackTrace.StackTrace.Fragment|StackTrace.StackTrace.AsyncFragment,
+      previousFragment: StackTrace.StackTrace.Fragment|undefined = undefined): void {
+    let asyncRow: StackTraceAsyncRow|null = null;
+    const isAsync = 'description' in fragment;
+    if (previousFragment && isAsync) {
+      asyncRow = {
+        asyncDescription: UI.UIUtils.asyncStackTraceLabel(
+            fragment.description, previousFragment.frames.map(f => ({functionName: f.name ?? ''}))),
+      };
+      stackTraceRows.push(asyncRow);
+    }
+    let previousStackFrameWasBreakpointCondition = false;
+    for (const frame of fragment.frames) {
+      const functionName = UI.UIUtils.beautifyFunctionName(frame.name ?? '');
+      const link = linkifier.maybeLinkifyStackTraceFrame(target, frame, {
+        showColumnNumber,
+        tabStop: Boolean(tabStops),
+        inlineFrameIndex: 0,
+        revealBreakpoint: previousStackFrameWasBreakpointCondition,
+      });
+      if (link) {
+        link.setAttribute('jslog', `${VisualLogging.link('stack-trace').track({click: true})}`);
+        link.addEventListener('contextmenu', populateContextMenu.bind(null, link));
+
+        if (!link.textContent) {
+          link.textContent = i18nString(UIStrings.unknownSource);
+        }
+      }
+      stackTraceRows.push({functionName, link});
+      previousStackFrameWasBreakpointCondition = [
+        SDK.DebuggerModel.COND_BREAKPOINT_SOURCE_URL,
+        SDK.DebuggerModel.LOGPOINT_SOURCE_URL,
+      ].includes(frame.url ?? '');
+    }
+  }
+
+  buildStackTraceRowsHelper(stackTrace.syncFragment);
+  let previousFragment = stackTrace.syncFragment;
+  for (const asyncFragment of stackTrace.asyncFragments) {
+    if (asyncFragment.frames.length) {
+      buildStackTraceRowsHelper(asyncFragment, previousFragment);
+    }
+    previousFragment = asyncFragment;
+  }
+  return stackTraceRows;
+}
+
 function renderStackTraceTable(
     container: Element, parent: Element,
     stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow>): HTMLElement[] {
@@ -224,7 +283,9 @@ function renderStackTraceTable(
 }
 
 export interface Options {
-  stackTrace?: Protocol.Runtime.StackTrace;
+  // TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
+  runtimeStackTrace?: Protocol.Runtime.StackTrace;
+  stackTrace?: StackTrace.StackTrace.StackTrace;
   tabStops?: boolean;
   // Whether the width of stack trace preview
   // is constrained to its container or whether
@@ -269,6 +330,8 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
     this.#table = this.contentElement.createChild('table', 'stack-preview-container');
     this.#table.classList.toggle('width-constrained', this.#options.widthConstrained ?? false);
 
+    this.#options.stackTrace?.addEventListener(StackTrace.StackTrace.Events.UPDATED, this.performUpdate.bind(this));
+
     this.performUpdate();
   }
 
@@ -277,10 +340,19 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
       return;
     }
 
-    const {stackTrace, tabStops} = this.#options;
+    const {runtimeStackTrace, stackTrace, tabStops} = this.#options;
+
+    if (stackTrace) {
+      const stackTraceRows = buildStackTraceRows(
+          stackTrace, this.#target ?? null, this.#linkifier, tabStops, this.#options.showColumnNumber);
+      this.#links = renderStackTraceTable(this.#table, this.element, stackTraceRows);
+      return;
+    }
+
+    // TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
     const updateCallback = renderStackTraceTable.bind(null, this.#table, this.element);
-    const stackTraceRows = buildStackTraceRows(
-        stackTrace ?? {callFrames: []}, this.#target ?? null, this.#linkifier, tabStops, updateCallback,
+    const stackTraceRows = buildStackTraceRowsForLegacyRuntimeStackTrace(
+        runtimeStackTrace ?? {callFrames: []}, this.#target ?? null, this.#linkifier, tabStops, updateCallback,
         this.#options.showColumnNumber);
     this.#links = renderStackTraceTable(this.#table, this.element, stackTraceRows);
   }

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

@@ -12,6 +12,7 @@ import * as SDK from '../../../../core/sdk/sdk.js';
 import type * as Protocol from '../../../../generated/protocol.js';
 import * as Bindings from '../../../../models/bindings/bindings.js';
 import * as Breakpoints from '../../../../models/breakpoints/breakpoints.js';
+import type * as StackTrace from '../../../../models/stack_trace/stack_trace.js';
 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';
@@ -341,6 +342,53 @@ 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|null {
+    let fallbackAnchor: HTMLElement|null = null;
+    const linkifyURLOptions: LinkifyURLOptions = {
+      ...options,
+      lineNumber: frame.line,
+      maxLength: this.maxLength,
+      columnNumber: frame.column,
+      showColumnNumber: Boolean(options?.showColumnNumber),
+      className: options?.className,
+      tabStop: options?.tabStop,
+      inlineFrameIndex: options?.inlineFrameIndex ?? 0,
+      userMetric: options?.userMetric,
+      jslogContext: options?.jslogContext || 'script-location',
+      omitOrigin: options?.omitOrigin,
+    };
+    const {className = ''} = linkifyURLOptions;
+    if (frame.url) {
+      fallbackAnchor = Linkifier.linkifyURL(frame.url as Platform.DevToolsPath.UrlString, linkifyURLOptions);
+    }
+    if (!target || target.isDisposed()) {
+      return fallbackAnchor;
+    }
+
+    const createLinkOptions: CreateLinkOptions = {
+      tabStop: options?.tabStop,
+      jslogContext: 'script-location',
+    };
+    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,
+      revealBreakpoint: options?.revealBreakpoint,
+    };
+
+    const uiLocation = frame.uiSourceCode?.uiLocation(frame.line, frame.column) ?? null;
+    this.updateAnchorFromUILocation(link, linkDisplayOptions, uiLocation);
+
+    const anchors = (this.anchorsByTarget.get(target) as Element[]);
+    anchors.push(link);
+    return link;
+  }
+
   linkifyStackTraceTopFrame(target: SDK.Target.Target|null, stackTrace: Protocol.Runtime.StackTrace): HTMLElement {
     console.assert(stackTrace.callFrames.length > 0);
 
@@ -459,6 +507,20 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
       return;
     }
 
+    this.#anchorUpdaters.set(anchor, function(this: Linkifier, anchor: HTMLElement) {
+      void this.updateAnchor(anchor, options, liveLocation);
+    });
+    this.updateAnchorFromUILocation(anchor, options, uiLocation);
+  }
+
+  private updateAnchorFromUILocation(
+      anchor: HTMLElement, options: LinkDisplayOptions, uiLocation: Workspace.UISourceCode.UILocation|null): void {
+    if (!uiLocation) {
+      anchor.classList.add('invalid-link');
+      anchor.removeAttribute('role');
+      return;
+    }
+
     Linkifier.bindUILocation(anchor, uiLocation);
     if (options.revealBreakpoint) {
       Linkifier.bindBreakpoint(anchor, uiLocation);
@@ -466,9 +528,6 @@ export class Linkifier extends Common.ObjectWrapper.ObjectWrapper<EventTypes> im
 
     const text = uiLocation.linkText(true /* skipTrim */, options.showColumnNumber);
     Linkifier.setTrimmedText(anchor, text, this.maxLength);
-    this.#anchorUpdaters.set(anchor, function(this: Linkifier, anchor: HTMLElement) {
-      void this.updateAnchor(anchor, options, liveLocation);
-    });
 
     let titleText: string = uiLocation.uiSourceCode.url();
     if (uiLocation.uiSourceCode.mimeType() === 'application/wasm') {

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -809,6 +809,10 @@ export const knownContextValues = new Set([
   'column-rule',
   'column-rule-break',
   'column-rule-color',
+  'column-rule-edge-end-outset',
+  'column-rule-edge-start-outset',
+  'column-rule-interior-end-outset',
+  'column-rule-interior-start-outset',
   'column-rule-outset',
   'column-rule-style',
   'column-rule-visibility-items',
@@ -3163,6 +3167,10 @@ export const knownContextValues = new Set([
   'row-rule',
   'row-rule-break',
   'row-rule-color',
+  'row-rule-edge-end-outset',
+  'row-rule-edge-start-outset',
+  'row-rule-interior-end-outset',
+  'row-rule-interior-start-outset',
   'row-rule-outset',
   'row-rule-style',
   'row-rule-visibility-items',

package/package.json

@@ -102,5 +102,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1538310"
+  "version": "1.0.1539728"
 }

package/front_end/third_party/puppeteer/package/src/templates/version.ts.tmpl

@@ -1,4 +0,0 @@
-/**
- * @internal
- */
-export const packageVersion = 'PACKAGE_VERSION';

package/front_end/ui/components/docs/color_swatch/basic.html

@@ -1,32 +0,0 @@
-<!--
-  Copyright 2020 The Chromium Authors
-  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>Color Swatch example</title>
-    <style>
-      #container {
-        display: flex;
-        flex-wrap: wrap;
-        margin: 0;
-        padding: 0;
-      }
-      #container > li {
-        padding: .5rem;
-        border: 1px solid;
-        margin: 0 .5rem;
-        list-style: none;
-      }
-    </style>
-  </head>
-  <body>
-    <ul id="container">
-    </ul>
-    <script type="module" src="./basic.js"></script>
-  </body>
-</html>