chrome-devtools-frontend 1.0.1597448 → 1.0.1597624

package/front_end/panels/timeline/components/insights/SlowCSSSelector.ts

@@ -20,7 +20,7 @@ import {Table} from './Table.js';
 const {UIStrings, i18nString} = Trace.Insights.Models.SlowCSSSelector;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsightModel> {
   override internalName = 'slow-css-selector';
@@ -107,7 +107,7 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
     // clang-format off
     const sections = [html`
       <div class="insight-section">
-        <devtools-widget .widgetConfig=${widgetConfig(Table, {
+        ${widget(Table, {
            data: {
             insight: this,
             headers: [i18nString(UIStrings.total), ''],
@@ -116,8 +116,7 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
               {values: [i18nString(UIStrings.matchCount), this.model.totalMatchCount]},
               {values: [i18nString(UIStrings.elapsed), i18n.TimeUtilities.millisToString(this.model.totalElapsedMs)]},
             ],
-          }})}>
-        </devtools-widget>
+          }})}
       </div>
     `];
     // clang-format on
@@ -127,14 +126,13 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
       // clang-format off
       sections.push(html`
         <div class="insight-section">
-          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+          ${widget(Table, {
            data: {
               insight: this,
               headers: [`${i18nString(UIStrings.topSelectorElapsedTime)}: ${time(Trace.Types.Timing.Micro(selector['elapsed (us)']))}`],
               rows: [{
                 values: [html`${selector.selector} ${Lit.Directives.until(this.getSelectorLinks(cssModel, selector))}`]}]
-            }})}>
-          </devtools-widget>
+            }})}
         </div>
       `);
       // clang-format on
@@ -145,15 +143,14 @@ export class SlowCSSSelector extends BaseInsightComponent<SlowCSSSelectorInsight
       // clang-format off
       sections.push(html`
         <div class="insight-section">
-          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+          ${widget(Table, {
            data: {
               insight: this,
               headers: [`${i18nString(UIStrings.topSelectorMatchAttempt)}: ${selector['match_attempts']}`],
               rows: [{
                   values: [html`${selector.selector} ${Lit.Directives.until(this.getSelectorLinks(cssModel, selector))}` as unknown as string],
               }]
-            }})}>
-          </devtools-widget>
+            }})}
         </div>
       `);
       // clang-format on

package/front_end/panels/timeline/components/insights/ThirdParties.ts

@@ -14,7 +14,7 @@ import {createLimitedRows, renderOthersLabel, type RowLimitAggregator, Table} fr
 const {UIStrings, i18nString, createOverlaysForSummary} = Trace.Insights.Models.ThirdParties;
 
 const {html} = Lit;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const MAX_TO_SHOW = 5;
 
@@ -79,13 +79,12 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
       // clang-format off
       sections.push(html`
         <div class="insight-section">
-          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+          ${widget(Table, {
            data: {
               insight: this,
               headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnTransferSize)],
               rows,
-            }})}>
-          </devtools-widget>
+            }})}
         </div>
       `);
       // clang-format on
@@ -96,13 +95,12 @@ export class ThirdParties extends BaseInsightComponent<ThirdPartiesInsightModel>
       // clang-format off
       sections.push(html`
         <div class="insight-section">
-          <devtools-widget .widgetConfig=${widgetConfig(Table, {
+          ${widget(Table, {
            data: {
               insight: this,
               headers: [i18nString(UIStrings.columnThirdParty), i18nString(UIStrings.columnMainThreadTime)],
               rows,
-            }})}>
-          </devtools-widget>
+            }})}
         </div>
       `);
       // clang-format on

package/front_end/panels/timeline/components/insights/insights.ts

@@ -4,6 +4,7 @@
 
 import * as BaseInsightComponent from './BaseInsightComponent.js';
 import * as Cache from './Cache.js';
+import * as CharacterSet from './CharacterSet.js';
 import * as Checklist from './Checklist.js';
 import * as CLSCulprits from './CLSCulprits.js';
 import * as DocumentLatency from './DocumentLatency.js';
@@ -33,6 +34,7 @@ import * as Viewport from './Viewport.js';
 export {
   BaseInsightComponent,
   Cache,
+  CharacterSet,
   Checklist,
   CLSCulprits,
   DocumentLatency,

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/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

@@ -4050,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',
@@ -4124,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.1597448"
+  "version": "1.0.1597624"
 }