chrome-devtools-frontend 1.0.1596535 → 1.0.1597624

package/front_end/panels/application/AppManifestView.ts

@@ -22,7 +22,7 @@ import * as ApplicationComponents from './components/components.js';
 
 const {styleMap, classMap, ref} = Directives;
 const {linkifyURL} = Components.Linkifier.Linkifier;
-const {widgetConfig} = UI.Widget;
+const {widget, widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -1095,12 +1095,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
   render(html`
     <style>${appManifestViewStyles}</style>
     <style>${UI.inspectorCommonStyles}</style>
-    ${isEmpty ? html`
-    <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
+    ${isEmpty ? widget(UI.EmptyWidget.EmptyWidget, {
       header: i18nString(UIStrings.noManifestDetected),
       text: i18nString(UIStrings.manifestDescription),
       link: 'https://web.dev/add-manifest/' as Platform.DevToolsPath.UrlString
-    })}></devtools-widget>` : html`
+    }) : html`
     <devtools-report .data=${{reportTitle: i18nString(UIStrings.appManifest), reportUrl: url}}>
       ${renderErrors(warnings, errors, imageErrors, output)}
       ${installabilityErrors?.length ? renderInstallability(installabilityErrors) : nothing}

package/front_end/panels/application/DeviceBoundSessionsView.ts

@@ -19,7 +19,7 @@ import {
   type SessionAndEvents
 } from './DeviceBoundSessionsModel.js';
 import deviceBoundSessionsViewStyles from './deviceBoundSessionsView.css.js';
-const {widgetConfig} = UI.Widget;
+const {widget, widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -727,28 +727,24 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
         if (!failedRequest) {
           return nothing;
         }
+        // clang-format off
         return html`${failedRequest.requestUrl && html`
-        <devtools-report-key>${i18nString(UIStrings.failedRequestUrl)}</devtools-report-key>
-        <devtools-report-value>${failedRequest.requestUrl}</devtools-report-value>
-      `}
-      ${failedRequest.netError && html`
-        <devtools-report-key>${i18nString(UIStrings.failedRequestNetError)}</devtools-report-key>
-        <devtools-report-value>${failedRequest.netError}</devtools-report-value>
-      `}
-      ${
-            failedRequest.responseError !== undefined ? html`
-        <devtools-report-key>${i18nString(UIStrings.failedRequestResponseCode)}</devtools-report-key>
-        <devtools-report-value>${failedRequest.responseError}</devtools-report-value>
-      ` :
-                                                        nothing}
-      ${failedRequest.responseErrorBody && html`
-        <devtools-report-key>${i18nString(UIStrings.failedRequestResponseBody)}</devtools-report-key>
-        <devtools-report-value>
-          <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(SourceFrame.JSONView.SearchableJsonView, {
-          jsonObject: tryParseJson(failedRequest.responseErrorBody),
-        })}></devtools-widget>
-        </devtools-report-value>
-      `}`;
+          <devtools-report-key>${i18nString(UIStrings.failedRequestUrl)}</devtools-report-key>
+          <devtools-report-value>${failedRequest.requestUrl}</devtools-report-value>`}
+        ${failedRequest.netError && html`
+          <devtools-report-key>${i18nString(UIStrings.failedRequestNetError)}</devtools-report-key>
+          <devtools-report-value>${failedRequest.netError}</devtools-report-value>`}
+        ${failedRequest.responseError !== undefined ? html`
+          <devtools-report-key>${i18nString(UIStrings.failedRequestResponseCode)}</devtools-report-key>
+          <devtools-report-value>${failedRequest.responseError}</devtools-report-value>` : nothing}
+        ${failedRequest.responseErrorBody && html`
+          <devtools-report-key>${i18nString(UIStrings.failedRequestResponseBody)}</devtools-report-key>
+          <devtools-report-value>
+            ${widget(SourceFrame.JSONView.SearchableJsonView, {
+              jsonObject: tryParseJson(failedRequest.responseErrorBody),
+            })}
+          </devtools-report-value>`}`;
+        // clang-format on
       };
 
   const creationEventDetails =

package/front_end/panels/application/FrameDetailsView.ts

@@ -30,7 +30,7 @@ import * as ApplicationComponents from './components/components.js';
 import frameDetailsReportViewStyles from './frameDetailsReportView.css.js';
 import {OriginTrialTreeView} from './OriginTrialTreeView.js';
 
-const {widgetConfig} = UI.Widget;
+const {widget, widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -297,11 +297,10 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
       ${renderIsolationSection(input)}
       ${renderApiAvailabilitySection(input.frame)}
       ${renderOriginTrial(input.trials)}
-      ${input.permissionsPolicies ? html`
-          <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.PermissionsPolicySection.PermissionsPolicySection, {
+      ${input.permissionsPolicies ?
+          widget(ApplicationComponents.PermissionsPolicySection.PermissionsPolicySection, {
              policies: input.permissionsPolicies,
-             showDetails: false})}>
-          </devtools-widget>` : nothing}
+             showDetails: false}) : nothing}
       ${input.protocolMonitorExperimentEnabled ? renderAdditionalInfoSection(input.frame) : nothing}
     </devtools-report>
   `, target);
@@ -434,10 +433,7 @@ function renderOwnerElement(linkTargetDOMNode: SDK.DOMModel.DOMNode|null): LitTe
         <devtools-report-key>${i18nString(UIStrings.ownerElement)}</devtools-report-key>
         <devtools-report-value class="without-min-width">
           <div class="inline-items">
-            <devtools-widget .widgetConfig=${widgetConfig(PanelCommon.DOMLinkifier.DOMNodeLink, {
-              node: linkTargetDOMNode
-            })}>
-            </devtools-widget>
+            ${widget(PanelCommon.DOMLinkifier.DOMNodeLink, {node: linkTargetDOMNode})}
           </div>
         </devtools-report-value>
       `;
@@ -454,9 +450,8 @@ function maybeRenderCreationStacktrace(stackTrace: StackTrace.StackTrace.StackTr
         <devtools-report-key title=${i18nString(UIStrings.creationStackTraceExplanation)}>${
           i18nString(UIStrings.creationStackTrace)}</devtools-report-key>
         <devtools-report-value jslog=${VisualLogging.section('frame-creation-stack-trace')}>
-          <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(
-              Components.JSPresentationUtils.StackTracePreviewContent, {stackTrace, options: {expandable: true}})}>
-          </devtools-widget>
+          ${widget(Components.JSPresentationUtils.StackTracePreviewContent,
+                   {stackTrace, options: {expandable: true}})}
         </devtools-report-value>
       `;
     // clang-format on
@@ -524,9 +519,8 @@ function maybeRenderCreatorAdScriptAncestry(
     // Disabled until https://crbug.com/1079231 is fixed.
     // clang-format off
     return html`<div>
-      <devtools-widget .widgetConfig=${widgetConfig(Components.Linkifier.ScriptLocationLink, {
-        target, scriptId: adScriptId.scriptId, options: {jslogContext: 'ad-script'}})}>
-      </devtools-widget>
+      ${widget(Components.Linkifier.ScriptLocationLink,
+              {target, scriptId: adScriptId.scriptId, options: {jslogContext: 'ad-script'}})}
     </div>`;
     // clang-format on
   });

package/front_end/panels/application/OriginTrialTreeView.ts

@@ -16,7 +16,7 @@ import originTrialTokenRowsStyles from './originTrialTokenRows.css.js';
 import originTrialTreeViewStyles from './originTrialTreeView.css.js';
 
 const {classMap} = Directives;
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -131,8 +131,7 @@ interface TokenField {
 function renderTokenDetails(token: Protocol.Page.OriginTrialTokenWithStatus): TemplateResult {
   return html`
     <li role="treeitem">
-      <devtools-widget .widgetConfig=${widgetConfig(OriginTrialTokenRows, {data: token})}>
-      </devtools-widget>
+      ${widget(OriginTrialTokenRows, {data: token})}
     </li>`;
 }
 

package/front_end/panels/application/ReportingApiView.ts

@@ -13,7 +13,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 
 import * as ApplicationComponents from './components/components.js';
 
-const {widgetConfig} = UI.Widget;
+const {widget, widgetConfig} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -66,34 +66,30 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
         ${input.hasReports ? html`
           <devtools-split-view slot="main" sidebar-position="second" sidebar-initial-size="150">
             <div slot="main">
-              <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.ReportsGrid.ReportsGrid, {
+              ${widget(ApplicationComponents.ReportsGrid.ReportsGrid, {
                 reports: input.reports, onReportSelected: input.onReportSelected,
-              })}></devtools-widget>
+              })}
             </div>
             <div slot="sidebar" class="vbox" jslog=${VisualLogging.pane('preview').track({resize: true})}>
-              ${input.focusedReport ? html`
-                <devtools-widget .widgetConfig=${widgetConfig(SourceFrame.JSONView.SearchableJsonView, {
-                  jsonObject: input.focusedReport.body,
-                })}></devtools-widget>
-              ` : html`
-                <devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
-                  header: i18nString(UIStrings.noReportSelected),
-                  text: i18nString(UIStrings.clickToDisplayBody),
-                })}></devtools-widget>
-              `}
+              ${input.focusedReport
+                  ? widget(SourceFrame.JSONView.SearchableJsonView, {jsonObject: input.focusedReport.body})
+                  : widget(UI.EmptyWidget.EmptyWidget, {
+                      header: i18nString(UIStrings.noReportSelected),
+                      text: i18nString(UIStrings.clickToDisplayBody),
+                    })}
             </div>
           </devtools-split-view>
         ` : html`
           <div slot="main">
-            <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.ReportsGrid.ReportsGrid, {
+            ${widget(ApplicationComponents.ReportsGrid.ReportsGrid, {
                 reports: input.reports, onReportSelected: input.onReportSelected,
-              })}></devtools-widget>
+              })}
           </div>
         `}
         <div slot="sidebar">
-          <devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.EndpointsGrid.EndpointsGrid, {
+          ${widget(ApplicationComponents.EndpointsGrid.EndpointsGrid, {
             endpoints: input.endpoints,
-          })}></devtools-widget>
+          })}
         </div>
       </devtools-split-view>
     `, target);

package/front_end/panels/application/ServiceWorkerCacheViews.ts

@@ -178,7 +178,7 @@ export class ServiceWorkerCacheView extends UI.View.SimpleView {
     this.dataGrid = this.createDataGrid();
     const dataGridWidget = this.dataGrid.asWidget();
     this.splitWidget.setSidebarWidget(dataGridWidget);
-    dataGridWidget.setMinimumSize(0, 250);
+    dataGridWidget.setMinimumSize(0, 100);
   }
 
   override wasShown(): void {

package/front_end/panels/application/components/BackForwardCacheView.ts

@@ -147,7 +147,7 @@ const UIStrings = {
 
 const str_ = i18n.i18n.registerUIStrings('panels/application/components/BackForwardCacheView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 const enum ScreenStatusType {
   RUNNING = 'Running',
@@ -387,7 +387,7 @@ function maybeRenderJavaScriptDetails(details: Protocol.Page.BackForwardCacheBlo
   const maxLengthForDisplayedURLs = 50;
   const rows = [html`<div>${i18nString(UIStrings.filesPerIssue, {n: details.length})}</div>`];
   rows.push(...details.map(detail => html`
-          <devtools-widget .widgetConfig=${widgetConfig(Components.Linkifier.ScriptLocationLink, {
+          ${widget(Components.Linkifier.ScriptLocationLink, {
                              sourceURL: detail.url as Platform.DevToolsPath.UrlString,
                              lineNumber: detail.lineNumber,
                              options: {
@@ -396,7 +396,7 @@ function maybeRenderJavaScriptDetails(details: Protocol.Page.BackForwardCacheBlo
                                inlineFrameIndex: 0,
                                maxLength: maxLengthForDisplayedURLs,
                              }
-                           })}></devtools-widget>`));
+                           })}`));
   return html`
       <div class="details-list">
         <devtools-expandable-list .data=${

package/front_end/panels/application/preloading/components/UsedPreloadingView.ts

@@ -134,7 +134,7 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/UsedPreloadingView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 export interface UsedPreloadingViewData {
   pageURL: Platform.DevToolsPath.UrlString;
@@ -270,8 +270,7 @@ function renderMismatchedSections(data: MismatchedData): LitTemplate {
       ${i18nString(UIStrings.preloadedURLs)}
     </devtools-report-section-header>
     <devtools-report-section jslog=${VisualLogging.section('preloaded-urls')}>
-      <devtools-widget .widgetConfig=${widgetConfig(MismatchedPreloadingGrid, {data})}>
-      </devtools-widget>
+      ${widget(MismatchedPreloadingGrid, {data})}
     </devtools-report-section>`;
   // clang-format on
 }

package/front_end/panels/browser_debugger/DOMBreakpointsSidebarPane.ts

@@ -107,6 +107,7 @@ const DOM_BREAKPOINT_DOCUMENTATION_URL =
     'https://developer.chrome.com/docs/devtools/javascript/breakpoints#dom' as Platform.DevToolsPath.UrlString;
 
 const {html, render, Directives} = Lit;
+const {widget} = UI.Widget;
 
 export interface Breakpoint {
   breakpoint: SDK.DOMDebuggerModel.DOMBreakpoint;
@@ -169,11 +170,11 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
           </ul>` : html
           `<div class="placeholder">
             <div class="gray-info-message">${i18nString(UIStrings.noBreakpoints)}</div>
-            <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(UI.EmptyWidget.EmptyWidget, {
+            ${widget(UI.EmptyWidget.EmptyWidget, {
               header: i18nString(UIStrings.noBreakpoints),
               text: i18nString(UIStrings.domBreakpointsDescription),
               link: DOM_BREAKPOINT_DOCUMENTATION_URL,
-            })}></devtools-widget>
+            })}
           </div>`}
       </div>
     `,

package/front_end/panels/changes/ChangesView.ts

@@ -34,6 +34,8 @@ const UIStrings = {
 const str_ = i18n.i18n.registerUIStrings('panels/changes/ChangesView.ts', UIStrings);
 const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
 const {render, html} = Lit;
+const {widget} = UI.Widget;
+
 interface ViewInput {
   selectedSourceCode: Workspace.UISourceCode.UISourceCode|null;
   onSelect(sourceCode: Workspace.UISourceCode.UISourceCode|null): void;
@@ -63,10 +65,10 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
                             })}>
           </devtools-widget>
           <div class=diff-container role=tabpanel ?hidden=${input.workspaceDiff.modifiedUISourceCodes().length === 0}>
-            <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(CombinedDiffView.CombinedDiffView, {
-                                              selectedFileUrl: input.selectedSourceCode?.url(),
-                                              workspaceDiff: input.workspaceDiff
-                                            })}></devtools-widget>
+            ${widget(CombinedDiffView.CombinedDiffView, {
+                selectedFileUrl: input.selectedSourceCode?.url(),
+                workspaceDiff: input.workspaceDiff
+            })}
           </div>
           ${hasCopyToPrompt ? html`
             <devtools-widget class="copy-to-prompt"

package/front_end/panels/common/ExtensionServer.ts

@@ -1574,6 +1574,21 @@ export class ExtensionServer extends Common.ObjectWrapper.ObjectWrapper<EventTyp
       return this.status.E_FAILED('Permission denied');
     }
 
+    try {
+      const parsedUrl = new URL(frame.url);
+      let targetType = Host.UserMetrics.ExtensionEvalTarget.WEB_PAGE;
+      if (parsedUrl.protocol === 'chrome-extension:') {
+        if (parsedUrl.origin === securityOrigin) {
+          targetType = Host.UserMetrics.ExtensionEvalTarget.SAME_EXTENSION;
+        } else {
+          targetType = Host.UserMetrics.ExtensionEvalTarget.OTHER_EXTENSION;
+        }
+      }
+      Host.userMetrics.extensionEvalTarget(targetType);
+    } catch {
+      // Ignore invalid URLs.
+    }
+
     void context
         .evaluate(
             {

package/front_end/panels/console/ConsolePinPane.ts

@@ -20,6 +20,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import consolePinPaneStyles from './consolePinPane.css.js';
 
 const {createRef, ref} = Directives;
+const {widget} = UI.Widget;
 
 const UIStrings = {
   /**
@@ -71,12 +72,11 @@ export const DEFAULT_PANE_VIEW = (input: PaneViewInput, _output: object, target:
   render(html`
     <style>${consolePinPaneStyles}</style>
     <div class='console-pins monospace' jslog=${VisualLogging.pane('console-pins')} @contextmenu=${input.onContextMenu}>
-    ${input.pins.map(pin => html`
-        <devtools-widget .widgetConfig=${UI.Widget.widgetConfig(ConsolePinPresenter, {
+    ${input.pins.map(pin => widget(ConsolePinPresenter, {
           pin,
           focusOut: input.focusOut,
           onRemove: () => input.onRemove(pin),
-        })}></devtools-widget>`
+      })
     )}
     </div>`, target);
   // clang-format on

package/front_end/panels/coverage/CoverageListView.ts

@@ -340,7 +340,7 @@ function renderItem(info: CoverageListItem, input: ViewInput): TemplateResult {
       </td>
       ${info.sources.length > 0 ? html`
         <td><table>
-          ${ifExpanded(() => html`${repeat(info.sources, source => source.url, source => renderItem(source, input))}`)}
+          ${ifExpanded(html`${repeat(info.sources, source => source.url, source => renderItem(source, input))}`)}
         </table></td>` : nothing}
     </tr>`;
   // clang-format on

package/front_end/panels/css_overview/CSSOverviewPanel.ts

@@ -6,7 +6,7 @@ import * as Host from '../../core/host/host.js';
 import * as SDK from '../../core/sdk/sdk.js';
 import type * as Protocol from '../../generated/protocol.js';
 import * as UI from '../../ui/legacy/legacy.js';
-import {html, render} from '../../ui/lit/lit.js';
+import {render} from '../../ui/lit/lit.js';
 
 import {type ContrastIssue, CSSOverviewCompletedView, type OverviewData} from './CSSOverviewCompletedView.js';
 import {CSSOverviewModel, type GlobalStyleStats} from './CSSOverviewModel.js';
@@ -14,7 +14,7 @@ import {CSSOverviewProcessingView} from './CSSOverviewProcessingView.js';
 import {CSSOverviewStartView} from './CSSOverviewStartView.js';
 import type {UnusedDeclaration} from './CSSOverviewUnusedDeclarations.js';
 
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 
 interface ViewInput {
   state: 'start'|'processing'|'completed';
@@ -28,19 +28,15 @@ interface ViewInput {
 type View = (input: ViewInput, output: object, target: HTMLElement) => void;
 
 export const DEFAULT_VIEW: View = (input, _output, target) => {
-  // clang-format off
-  render(input.state === 'start' ?  html`
-      <devtools-widget .widgetConfig=${widgetConfig(CSSOverviewStartView, {onStartCapture: input.onStartCapture})}></devtools-widget>`
-    : input.state === 'processing' ?  html`
-      <devtools-widget .widgetConfig=${widgetConfig(CSSOverviewProcessingView, {onCancel: input.onCancel})}></devtools-widget>`
-    : html`
-      <devtools-widget .widgetConfig=${widgetConfig(CSSOverviewCompletedView, {
-      onReset: input.onReset,
-      overviewData: input.overviewData,
-      target: input.target,
-    })}></devtools-widget>`,
-    target);
-  // clang-format on
+  render(
+      input.state === 'start'          ? widget(CSSOverviewStartView, {onStartCapture: input.onStartCapture}) :
+          input.state === 'processing' ? widget(CSSOverviewProcessingView, {onCancel: input.onCancel}) :
+                                         widget(CSSOverviewCompletedView, {
+                                           onReset: input.onReset,
+                                           overviewData: input.overviewData,
+                                           target: input.target,
+                                         }),
+      target);
 };
 
 export class CSSOverviewPanel extends UI.Panel.Panel implements SDK.TargetManager.Observer {

package/front_end/panels/developer_resources/DeveloperResourcesView.ts

@@ -16,7 +16,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
 import {DeveloperResourcesListView} from './DeveloperResourcesListView.js';
 import developerResourcesViewStyles from './developerResourcesView.css.js';
 
-const {widgetConfig} = UI.Widget;
+const {widget} = UI.Widget;
 const {bindToSetting} = UI.UIUtils;
 
 const UIStrings = {
@@ -98,14 +98,12 @@ export const DEFAULT_VIEW: View = (input, _output, target) => {
         </devtools-toolbar>
       </div>
       <div class="developer-resource-view-results">
-        <devtools-widget
-          .widgetConfig=${widgetConfig(DeveloperResourcesListView, {
+        ${widget(DeveloperResourcesListView, {
             items: input.items,
             selectedItem: input.selectedItem,
             onSelect: input.onSelect,
             filters: input.filters
-          })}>
-        </devtools-widget>
+        })}
       </div>
       <div class="developer-resource-view-toolbar-summary">
         <div class="developer-resource-view-message">