chrome-devtools-frontend 1.0.1596535 → 1.0.1597624

package/front_end/panels/web_audio/WebAudioView.ts

@@ -15,7 +15,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import webAudioStyles from './webAudio.css.js';
 import {Events as ModelEvents, WebAudioModel} from './WebAudioModel.js';
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 const {bindToAction} = UI.UIUtils;
 
 const UIStrings = {
@@ -123,12 +123,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
     <div class="web-audio-content-container vbox flex-auto">
       ${!selectedContext ? html`
         <div class="web-audio-details-container vbox flex-auto">
-          <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget,
+          ${widget(UI.EmptyWidget.EmptyWidget,
             {header: i18nString(UIStrings.noWebAudio),
               text: i18nString(UIStrings.openAPageThatUsesWebAudioApiTo),
             link: WEBAUDIO_EXPLANATION_URL,
-          })}>
-          </devtools-widget>
+          })}
         </div>` : html`<div class="web-audio-details-container vbox flex-auto">
           <div class="context-detail-container">
             <div class="context-detail-header">

package/front_end/ui/components/settings/SettingCheckbox.ts

@@ -85,6 +85,8 @@ export class SettingCheckbox extends HTMLElement {
           <devtools-button
             class="info-icon"
             aria-details=${id}
+            aria-disabled=true
+            accessibleLabel=${learnMore.tooltip()}
             .data=${data}
           ></devtools-button>
           <devtools-tooltip id=${id} variant="rich">

package/front_end/ui/legacy/UIUtils.ts

@@ -2094,10 +2094,7 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
     const patchingWrapper = <Args extends any[], R>(fn: (...args: Args) => R): ((...args: Args) => R) => {
       return function(this: unknown, ...args: Args): R {
         const result = fn.apply(this, args);
-        if (isLitTemplate(result)) {
-          HTMLElementWithLightDOMTemplate.patchLitTemplate(result);
-        }
-        return result;
+        return patchValue(result) as R;
       };
     };
     if (template === Lit.nothing) {
@@ -2117,7 +2114,10 @@ export class HTMLElementWithLightDOMTemplate extends HTMLElement {
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     function isCallable(value: unknown): value is(...args: any[]) => any {
-      return typeof value === 'function';
+      // Native class constructors cannot be invoked without 'new', and we shouldn't attempt to wrap them.
+      // Differentiate them from regular functions by checking their 'prototype' descriptor:
+      // class constructors have a non-writable prototype, whereas regular functions have a writable prototype.
+      return typeof value === 'function' && Object.getOwnPropertyDescriptor(value, 'prototype')?.writable !== false;
     }
 
     function patchValue(value: unknown): unknown {

package/front_end/ui/legacy/Widget.ts

@@ -38,6 +38,8 @@ import * as Lit from '../../ui/lit/lit.js';
 import {appendStyle, deepActiveElement} from './DOMUtilities.js';
 import {cloneCustomElement, createShadowRootWithCoreStyles} from './UIUtils.js';
 
+const {html} = Lit;
+
 // Remember the original DOM mutation methods here, since we
 // will override them below to sanity check the Widget system.
 const originalAppendChild = Element.prototype.appendChild;
@@ -223,7 +225,7 @@ export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
   }
 
   override removeChild<T extends Node>(child: T): T {
-    const childWidget = Widget.get(child as unknown as HTMLElement);
+    const childWidget = Widget.get(child);
     if (childWidget) {
       childWidget.detach();
       return child;
@@ -233,7 +235,7 @@ export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
 
   override removeChildren(): void {
     for (const child of this.children) {
-      const childWidget = Widget.get(child as unknown as HTMLElement);
+      const childWidget = Widget.get(child);
       if (childWidget) {
         childWidget.detach();
       }
@@ -263,6 +265,35 @@ export class WidgetElement<WidgetT extends Widget> extends HTMLElement {
 
 customElements.define('devtools-widget', WidgetElement);
 
+export class WidgetDirective extends Lit.Directive.Directive {
+  constructor(partInfo: Lit.Directive.PartInfo) {
+    super(partInfo);
+    if (partInfo.type !== Lit.Directive.PartType.CHILD) {
+      throw new Error('Widget directive must be used as a child directive.');
+    }
+  }
+
+  render<F extends WidgetFactory<Widget>, ParamKeys extends keyof InferWidgetTFromFactory<F>>(
+      widgetClass: F,
+      widgetParams?: Pick<InferWidgetTFromFactory<F>, ParamKeys>&Partial<InferWidgetTFromFactory<F>>): unknown {
+    // We use `repeat` to force Lit to recreate the `<devtools-widget>` DOM node when the `widgetClass` changes.
+    // If we didn't use `repeat` and used `html` directly, Lit would reuse the same `<devtools-widget>` instance
+    // even if `widgetClass` changed (for example, in a ternary operator `condition ? widget(A) : widget(B)`).
+    // This is because the template string is the same, so Lit reuses the DOM node and only updates `.widgetConfig`,
+    // which does not properly recreate the widget instance.
+    return Lit.Directives.repeat(
+        [widgetClass], () => widgetClass,
+        () => html`<devtools-widget .widgetConfig=${
+            widgetConfig(widgetClass, widgetParams as never)}></devtools-widget>`);
+  }
+}
+
+export const widget = Lit.Directive.directive(WidgetDirective) as
+    <F extends WidgetFactory<Widget>, ParamKeys extends keyof InferWidgetTFromFactory<F>>(
+                          widgetClass: F,
+                          widgetParams?: Pick<InferWidgetTFromFactory<F>, ParamKeys>&
+                          Partial<InferWidgetTFromFactory<F>>) => Lit.Directive.DirectiveResult<typeof WidgetDirective>;
+
 export function widgetRef<T extends Widget, Args extends unknown[]>(
     type: Platform.Constructor.Constructor<T, Args>, callback: (_: T) => void): ReturnType<typeof Lit.Directives.ref> {
   return Lit.Directives.ref((e?: Element) => {

package/front_end/ui/legacy/components/data_grid/DataGridElement.ts

@@ -613,14 +613,14 @@ export const ifExpanded = Lit.Directive.directive(class extends Lit.Directive.Di
   #partInfo: {type: Lit.Directive.PartType, startNode: Node};
   constructor(partInfo: Lit.Directive.PartInfo) {
     if (partInfo.type !== Lit.Directive.PartType.CHILD) {
-      throw new Error('expand directive must be used in a child node');
+      throw new Error('ifExpanded directive must be used in a child node');
     }
     super(partInfo);
     this.#partInfo = partInfo as {type: Lit.Directive.PartType, startNode: Node};
   }
 
-  render(content: () => Lit.TemplateResult): Lit.LitTemplate {
-    return this.#isInExpandedRow(this.#partInfo.startNode) ? content() : Lit.nothing;
+  render(content: Lit.LitTemplate|Iterable<Lit.LitTemplate>): Lit.LitTemplate|Iterable<Lit.LitTemplate> {
+    return this.#isInExpandedRow(this.#partInfo.startNode) ? content : Lit.nothing;
   }
 
   #isInExpandedRow(element: Node|null|undefined): boolean {

package/front_end/ui/legacy/components/object_ui/ObjectPropertiesSection.ts

@@ -50,7 +50,7 @@ import objectPropertiesSectionStyles from './objectPropertiesSection.css.js';
 import objectValueStyles from './objectValue.css.js';
 import {RemoteObjectPreviewFormatter, renderNodeTitle} from './RemoteObjectPreviewFormatter.js';
 
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 const {ref, repeat, ifDefined, classMap} = Directives;
 const UIStrings = {
   /**
@@ -795,16 +795,13 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
         const text = JSON.stringify(description);
         const tooLong = description.length > maxRenderableStringLength;
         return html`<span class="value object-value-string" title=${ifDefined(tooLong ? undefined : description)}>${
-            tooLong ? html`<devtools-widget .widgetConfig=${
-                          widgetConfig(ExpandableTextPropertyValue, {text})}></devtools-widget>` :
-                      text}</span>`;
+            tooLong ? widget(ExpandableTextPropertyValue, {text}) : text}</span>`;
       }
       if (type === 'object' && subtype === 'trustedtype') {
         const text = `${className} '${description}'`;
         const tooLong = text.length > maxRenderableStringLength;
         return html`<span class="value object-value-trustedtype" title=${ifDefined(tooLong ? undefined : text)}>${
-            tooLong ? html`<devtools-widget .widgetConfig=${
-                          widgetConfig(ExpandableTextPropertyValue, {text})}></devtools-widget>` :
+            tooLong ? widget(ExpandableTextPropertyValue, {text}) :
                       html`${className} <span class=object-value-string title=${description}>${
                           JSON.stringify(description)}</span>`}</span>`;
       }
@@ -822,8 +819,11 @@ export class ObjectPropertiesSection extends UI.TreeOutline.TreeOutlineInShadow
           >${renderNodeTitle(description)}</span>`;
       }
       if (description.length > maxRenderableStringLength) {
-        return html`<span class="value object-value-${subtype || type}" title=${description}><devtools-widget
-          .widgetConfig=${widgetConfig(ExpandableTextPropertyValue, {text: description})}></devtools-widget></span>`;
+        // clang-format off
+        return html`<span class="value object-value-${subtype || type}" title=${description}>
+          ${widget(ExpandableTextPropertyValue, {text: description})}
+        </span>`;
+        // clang-format on
       }
       const hasPreview = value.preview && showPreview;
       return html`<span class="value object-value-${subtype || type}" title=${description}>${

package/front_end/ui/visual_logging/Debugging.ts

@@ -13,7 +13,6 @@ let veDebuggingEnabled = false;
 let debugOverlay: HTMLElement|null = null;
 let debugPopover: HTMLElement|null = null;
 const highlightedElements: HTMLElement[] = [];
-const nonDomDebugElements = new WeakMap<Loggable, HTMLElement>();
 let onInspect: ((query: string) => void)|undefined = undefined;
 
 function ensureDebugOverlay(): void {
@@ -96,8 +95,6 @@ export function processForDebugging(loggable: Loggable): void {
   }
   if (loggable instanceof HTMLElement) {
     processElementForDebugging(loggable, loggingState);
-  } else {
-    processNonDomLoggableForDebugging(loggable, loggingState);
   }
 }
 
@@ -409,35 +406,6 @@ function processImpressionsForAdHocAnalysisDebugLog(states: LoggingState[]): voi
   }
 }
 
-function processNonDomLoggableForDebugging(loggable: Loggable, loggingState: LoggingState): void {
-  let debugElement = nonDomDebugElements.get(loggable);
-  if (!debugElement) {
-    debugElement = document.createElement('div');
-    debugElement.classList.add('ve-debug');
-    debugElement.style.background = 'black';
-    debugElement.style.color = 'white';
-    debugElement.style.zIndex = '100000';
-    debugElement.textContent = debugString(loggingState.config);
-    nonDomDebugElements.set(loggable, debugElement);
-    setTimeout(() => {
-      if (!loggingState.size?.width || !loggingState.size?.height) {
-        debugElement?.parentElement?.removeChild(debugElement);
-        nonDomDebugElements.delete(loggable);
-      }
-    }, 10000);
-  }
-  const parentDebugElement =
-      parent instanceof HTMLElement ? parent : nonDomDebugElements.get(parent as Loggable) || debugPopover;
-  assertNotNullOrUndefined(parentDebugElement);
-  if (!parentDebugElement.classList.contains('ve-debug')) {
-    debugElement.style.position = 'absolute';
-    parentDebugElement.insertBefore(debugElement, parentDebugElement.firstChild);
-  } else {
-    debugElement.style.marginLeft = '10px';
-    parentDebugElement.appendChild(debugElement);
-  }
-}
-
 function elementKey(config: LoggingConfig): string {
   return `${VisualElements[config.ve]}${config.context ? `: ${config.context}` : ''}`;
 }

package/front_end/ui/visual_logging/KnownContextValues.ts

@@ -1808,6 +1808,7 @@ export const knownContextValues = new Set([
   'greendev-artifact-viewer-enabled',
   'greendev-breakpoint-debugger-agent-enabled',
   'greendev-copy-to-gemini-enabled',
+  'greendev-emulation-capabilities-enabled',
   'greendev-in-devtools-floaty-enabled',
   'greendev-inline-widgets-enabled',
   'greendev-prototypes',
@@ -4049,6 +4050,7 @@ export const knownContextValues = new Set([
   'timeline.insight-ask-ai.viewport',
   'timeline.insights-tab',
   'timeline.insights.cache',
+  'timeline.insights.character-set',
   'timeline.insights.cls-culprits',
   'timeline.insights.dismiss-field-mismatch',
   'timeline.insights.document-latency',
@@ -4123,6 +4125,7 @@ export const knownContextValues = new Set([
   'timeline.thread.worker',
   'timeline.timings',
   'timeline.toggle-insight.cache',
+  'timeline.toggle-insight.character-set',
   'timeline.toggle-insight.cls-culprits',
   'timeline.toggle-insight.document-latency',
   'timeline.toggle-insight.dom-size',

package/package.json

@@ -105,5 +105,5 @@
       "flat-cache": "6.1.12"
     }
   },
-  "version": "1.0.1596535"
+  "version": "1.0.1597624"
 }