chrome-devtools-frontend 1.0.1583146 → 1.0.1585664

package/front_end/ui/legacy/UIUtils.ts

@@ -697,19 +697,42 @@ export class ElementFocusRestorer {
 export function runCSSAnimationOnce(element: Element, className: string): void {
   function animationEndCallback(): void {
     element.classList.remove(className);
-    element.removeEventListener('webkitAnimationEnd', animationEndCallback, false);
+    element.removeEventListener('animationend', animationEndCallback, false);
     element.removeEventListener('animationcancel', animationEndCallback, false);
   }
 
-  if (element.classList.contains(className)) {
-    element.classList.remove(className);
-  }
-
-  element.addEventListener('webkitAnimationEnd', animationEndCallback, false);
+  // Remove class if it exists.
+  element.classList.toggle(className, /* force=*/ false);
+  element.addEventListener('animationend', animationEndCallback, false);
   element.addEventListener('animationcancel', animationEndCallback, false);
   element.classList.add(className);
 }
 
+class AnimateOnDirective extends Lit.Directive.Directive {
+  #previousValue = false;
+
+  render(_condition: boolean, _className: string): void {
+    return undefined;  // Directives don't have to render HTML
+  }
+
+  override update(part: Lit.Directive.ElementPart, [condition, className]: [boolean, string]): void {
+    const el = part.element as HTMLElement;
+
+    // Only trigger if the condition transitioned from false -> true
+    if (condition && !this.#previousValue) {
+      this.#animate(el, className);
+    }
+
+    this.#previousValue = condition;
+  }
+
+  #animate(el: HTMLElement, className: string): void {
+    runCSSAnimationOnce(el, className);
+  }
+}
+
+export const animateOn = Lit.Directive.directive(AnimateOnDirective);
+
 export function measurePreferredSize(element: Element, containerElement?: Element|null): Geometry.Size {
   const oldParent = element.parentElement;
   const oldNextSibling = element.nextSibling;
@@ -1530,6 +1553,7 @@ export function createFileSelectorElement(callback: (arg0: File) => void, accept
 }
 
 export const MaxLengthForDisplayedURLs = 150;
+export const MaxLengthForDisplayedURLsInConsole = 40;
 
 export class MessageDialog {
   static async show(header: string, message: string, where?: Element|Document, jslogContext?: string): Promise<void> {

package/front_end/ui/legacy/components/quick_open/CommandMenu.ts

@@ -275,8 +275,8 @@ export const enum PanelOrDrawer {
 export class CommandMenuProvider extends Provider {
   private commands: Command[];
 
-  constructor(commandsForTest: Command[] = []) {
-    super('command');
+  constructor(jslogContext: string, commandsForTest: Command[] = []) {
+    super(jslogContext);
     this.commands = commandsForTest;
   }
 
@@ -455,8 +455,9 @@ export class ShowActionDelegate implements UI.ActionRegistration.ActionDelegate
 registerProvider({
   prefix: '>',
   iconName: 'chevron-right',
-  provider: () => Promise.resolve(new CommandMenuProvider()),
+  provider: (jslogContext: string) => Promise.resolve(new CommandMenuProvider(jslogContext)),
   helpTitle: () => i18nString(UIStrings.runCommand),
   titlePrefix: () => i18nString(UIStrings.run),
   titleSuggestion: () => i18nString(UIStrings.command),
+  jslogContext: 'command',
 });

package/front_end/ui/legacy/components/quick_open/FilteredListWidget.ts

@@ -657,8 +657,9 @@ export function getRegisteredProviders(): ProviderRegistration[] {
 export interface ProviderRegistration {
   prefix: string;
   iconName: string;
-  provider: () => Promise<Provider>;
+  provider: (jslogContext: string) => Promise<Provider>;
   helpTitle: (() => string);
   titlePrefix: (() => string);
   titleSuggestion?: (() => string);
+  jslogContext: string;
 }

package/front_end/ui/legacy/components/quick_open/HelpQuickOpen.ts

@@ -24,11 +24,16 @@ export class HelpQuickOpen extends Provider {
   }
 
   private async addProvider(extension: ProviderRegistration): Promise<void> {
+    // We want to exclude Help menu as we are already in it.
+    if (extension.prefix === '?') {
+      return;
+    }
+
     this.providers.push({
       prefix: extension.prefix || '',
       iconName: extension.iconName,
       title: extension.helpTitle(),
-      jslogContext: (await extension.provider()).jslogContext,
+      jslogContext: extension.jslogContext,
     });
   }
 
@@ -69,8 +74,9 @@ export class HelpQuickOpen extends Provider {
 registerProvider({
   prefix: '?',
   iconName: 'help',
-  provider: () => Promise.resolve(new HelpQuickOpen('help')),
+  provider: jslogContext => Promise.resolve(new HelpQuickOpen(jslogContext)),
   helpTitle: () => 'Help',
   titlePrefix: () => 'Help',
   titleSuggestion: undefined,
+  jslogContext: 'help'
 });

package/front_end/ui/legacy/components/quick_open/QuickOpen.ts

@@ -5,7 +5,12 @@
 import * as i18n from '../../../../core/i18n/i18n.js';
 import type * as UI from '../../legacy.js';
 
-import {FilteredListWidget, getRegisteredProviders, type Provider} from './FilteredListWidget.js';
+import {
+  FilteredListWidget,
+  getRegisteredProviders,
+  type Provider,
+  type ProviderRegistration
+} from './FilteredListWidget.js';
 
 const UIStrings = {
   /**
@@ -42,19 +47,14 @@ export class QuickOpenImpl {
     filteredListWidget.setQuery(query);
   }
 
-  private addProvider(extension: {
-    prefix: string,
-    provider: () => Promise<Provider>,
-    titlePrefix: () => string,
-    titleSuggestion?: (() => string),
-  }): void {
+  private addProvider(extension: ProviderRegistration): void {
     const prefix = extension.prefix;
     if (prefix === null) {
       return;
     }
     this.prefixes.push(prefix);
     this.providers.set(prefix, {
-      provider: extension.provider,
+      provider: () => extension.provider(extension.jslogContext),
       titlePrefix: extension.titlePrefix,
       titleSuggestion: extension.titleSuggestion,
     });

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

@@ -34,17 +34,15 @@
  * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  */
 
-import * as Common from '../../../../core/common/common.js';
 import * as i18n from '../../../../core/i18n/i18n.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';
 
 import jsUtilsStyles from './jsUtils.css.js';
-import {Events as LinkifierEvents, Linkifier} from './Linkifier.js';
+import {Linkifier} from './Linkifier.js';
 
 const UIStrings = {
   /**
@@ -63,10 +61,6 @@ const UIStrings = {
    * @description A link to rehide frames that are by default hidden.
    */
   showLess: 'Show less',
-  /**
-   * @description Text indicating that source url of a link is currently unknown
-   */
-  unknownSource: 'unknown',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('ui/legacy/components/utils/JSPresentationUtils.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
@@ -95,74 +89,8 @@ function populateContextMenu(link: Element, event: Event): void {
   void contextMenu.show();
 }
 
-// TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
-function buildStackTraceRowsForLegacyRuntimeStackTrace(
-    stackTrace: Protocol.Runtime.StackTrace,
-    target: SDK.Target.Target|null,
-    linkifier: Linkifier,
-    tabStops: boolean|undefined,
-    updateCallback?: (arg0: Array<StackTraceRegularRow|StackTraceAsyncRow>) => void,
-    showColumnNumber?: boolean,
-    ): Array<StackTraceRegularRow|StackTraceAsyncRow> {
-  const stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow> = [];
-
-  if (updateCallback) {
-    const throttler = new Common.Throttler.Throttler(100);
-    linkifier.addEventListener(LinkifierEvents.LIVE_LOCATION_UPDATED, () => {
-      void throttler.schedule(async () => updateCallback(stackTraceRows));
-    });
-  }
-
-  function buildStackTraceRowsHelper(
-      stackTrace: Protocol.Runtime.StackTrace,
-      previousCallFrames: Protocol.Runtime.CallFrame[]|undefined = undefined): void {
-    let asyncRow: StackTraceAsyncRow|null = null;
-    if (previousCallFrames) {
-      asyncRow = {
-        asyncDescription: UI.UIUtils.asyncStackTraceLabel(stackTrace.description, previousCallFrames),
-      };
-      stackTraceRows.push(asyncRow);
-    }
-    let previousStackFrameWasBreakpointCondition = false;
-    for (const stackFrame of stackTrace.callFrames) {
-      const functionName = UI.UIUtils.beautifyFunctionName(stackFrame.functionName);
-      const link = linkifier.maybeLinkifyConsoleCallFrame(target, stackFrame, {
-        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(stackFrame.url);
-    }
-  }
-
-  buildStackTraceRowsHelper(stackTrace);
-  let previousCallFrames = stackTrace.callFrames;
-  for (let asyncStackTrace = stackTrace.parent; asyncStackTrace; asyncStackTrace = asyncStackTrace.parent) {
-    if (asyncStackTrace.callFrames.length) {
-      buildStackTraceRowsHelper(asyncStackTrace, previousCallFrames);
-    }
-    previousCallFrames = asyncStackTrace.callFrames;
-  }
-  return stackTraceRows;
-}
-
 function buildStackTraceRows(
     stackTrace: StackTrace.StackTrace.StackTrace,
-    target: SDK.Target.Target|null,
-    linkifier: Linkifier,
     tabStops: boolean|undefined,
     showColumnNumber?: boolean,
     ): Array<StackTraceRegularRow|StackTraceAsyncRow> {
@@ -183,11 +111,12 @@ function buildStackTraceRows(
     let previousStackFrameWasBreakpointCondition = false;
     for (const frame of fragment.frames) {
       const functionName = UI.UIUtils.beautifyFunctionName(frame.name ?? '');
-      const link = linkifier.maybeLinkifyStackTraceFrame(target, frame, {
+      const link = Linkifier.linkifyStackTraceFrame(frame, {
         showColumnNumber,
         tabStop: Boolean(tabStops),
         inlineFrameIndex: 0,
         revealBreakpoint: previousStackFrameWasBreakpointCondition,
+        maxLength: UI.UIUtils.MaxLengthForDisplayedURLsInConsole,
       });
       link.setAttribute('jslog', `${VisualLogging.link('stack-trace').track({click: true})}`);
       link.addEventListener('contextmenu', populateContextMenu.bind(null, link));
@@ -213,9 +142,8 @@ function buildStackTraceRows(
 
 function renderStackTraceTable(
     container: Element, parent: Element, expandable: boolean,
-    stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow>): HTMLElement[] {
+    stackTraceRows: Array<StackTraceRegularRow|StackTraceAsyncRow>): void {
   container.removeChildren();
-  const links: HTMLElement[] = [];
 
   // The tableSection groups one or more synchronous call frames together.
   // Wherever there is an asynchronous call, a new section is created.
@@ -249,10 +177,7 @@ function renderStackTraceTable(
     } else {
       row.createChild('td', 'function-name').textContent = item.functionName;
       row.createChild('td').textContent = ' @ ';
-      if (item.link) {
-        row.createChild('td', 'link').appendChild(item.link);
-        links.push(item.link);
-      }
+      row.createChild('td', 'link').appendChild(item.link);
     }
   }
 
@@ -285,13 +210,9 @@ function renderStackTraceTable(
     // If we are in a popup, this will trigger a re-layout
     UI.GlassPane.GlassPane.containerMoved(container);
   }, false);
-
-  return links;
 }
 
 export interface Options {
-  // TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
-  runtimeStackTrace?: Protocol.Runtime.StackTrace;
   tabStops?: boolean;
   // Whether the width of stack trace preview
   // is constrained to its container or whether
@@ -303,7 +224,7 @@ export interface Options {
 
 interface StackTraceRegularRow {
   functionName: string;
-  link: HTMLElement|null;
+  link: HTMLElement;
 }
 
 interface StackTraceAsyncRow {
@@ -312,90 +233,43 @@ interface StackTraceAsyncRow {
 
 export class StackTracePreviewContent extends UI.Widget.Widget {
   #stackTrace?: StackTrace.StackTrace.StackTrace;
-  #target?: SDK.Target.Target;
-  #linkifier?: Linkifier;
-  #ownedLinkifier?: Linkifier;
-  #options: Options;
-  #links: HTMLElement[] = [];
+  #options: Options = {};
 
   readonly #table: HTMLElement;
-  /**
-   * Updated when we update to define if we have any rows for the StackTrace;
-   * allowing the caller to know if this element is empty or not.
-   */
-  #hasRows = false;
-
-  constructor(element?: HTMLElement, target?: SDK.Target.Target, linkifier?: Linkifier, options?: Options) {
-    super(element, {useShadowDom: true});
-
-    this.#target = target;
-    this.#linkifier = linkifier;
-    if (!this.#linkifier) {
-      this.#ownedLinkifier = new Linkifier();
-      this.#linkifier = this.#ownedLinkifier;
-    }
-    this.#options = options || {
-      widthConstrained: false,
-    };
 
-    this.element.classList.add('monospace');
-    this.element.classList.add('stack-preview-container');
-    this.element.classList.toggle('width-constrained', this.#options.widthConstrained ?? false);
-    this.element.style.display = 'inline-block';
+  constructor(element?: HTMLElement) {
+    super(element, {useShadowDom: true, classes: ['monospace', 'stack-preview-container']});
 
     UI.DOMUtilities.appendStyle(this.element.shadowRoot as ShadowRoot, jsUtilsStyles);
 
     this.#table = this.contentElement.createChild('table', 'stack-preview-container');
-    this.#table.classList.toggle('width-constrained', this.#options.widthConstrained ?? false);
-
-    this.performUpdate();
   }
 
   hasContent(): boolean {
-    return this.#hasRows;
+    if (!this.#stackTrace) {
+      return false;
+    }
+    const {syncFragment, asyncFragments} = this.#stackTrace;
+    return syncFragment.frames.length > 0 || asyncFragments.some(f => f.frames.length > 0);
   }
 
   override performUpdate(): void {
-    if (!this.#linkifier) {
+    if (!this.#stackTrace) {
       return;
     }
 
-    const {runtimeStackTrace, tabStops} = this.#options;
-
-    if (this.#stackTrace) {
-      const stackTraceRows = buildStackTraceRows(
-          this.#stackTrace, this.#target ?? null, this.#linkifier, tabStops, this.#options.showColumnNumber);
-      this.#hasRows = stackTraceRows.length > 0;
-      this.#links = renderStackTraceTable(this.#table, this.element, this.#options.expandable ?? false, stackTraceRows);
-      return;
-    }
-
-    // TODO(crbug.com/456517732): remove when all usages of runtimeStackTrace are migrated.
-    const updateCallback =
-        renderStackTraceTable.bind(null, this.#table, this.element, this.#options.expandable ?? false);
-    const stackTraceRows = buildStackTraceRowsForLegacyRuntimeStackTrace(
-        runtimeStackTrace ?? {callFrames: []}, this.#target ?? null, this.#linkifier, tabStops, updateCallback,
-        this.#options.showColumnNumber);
-    this.#hasRows = stackTraceRows.length > 0;
-    this.#links = renderStackTraceTable(this.#table, this.element, this.#options.expandable ?? false, stackTraceRows);
+    const stackTraceRows =
+        buildStackTraceRows(this.#stackTrace, this.#options.tabStops, this.#options.showColumnNumber);
+    renderStackTraceTable(this.#table, this.element, this.#options.expandable ?? false, stackTraceRows);
   }
 
   get linkElements(): readonly HTMLElement[] {
-    return this.#links;
-  }
-
-  set target(target: SDK.Target.Target|undefined) {
-    this.#target = target;
-    this.requestUpdate();
-  }
-
-  set linkifier(linkifier: Linkifier) {
-    this.#linkifier = linkifier;
-    this.requestUpdate();
+    return [...this.contentElement.querySelectorAll<HTMLElement>('td.link > .devtools-link')];
   }
 
   set options(options: Options) {
     this.#options = options;
+    this.#table.classList.toggle('width-constrained', this.#options.widthConstrained ?? false);
     this.requestUpdate();
   }
 
@@ -407,8 +281,4 @@ export class StackTracePreviewContent extends UI.Widget.Widget {
     this.#stackTrace.addEventListener(StackTrace.StackTrace.Events.UPDATED, this.requestUpdate, this);
     this.requestUpdate();
   }
-
-  override onDetach(): void {
-    this.#ownedLinkifier?.dispose();
-  }
 }