Skip to content

Commit 839de3b

Browse files
danilsomsikovDevtools-frontend LUCI CQ
danilsomsikov
authored and
Devtools-frontend LUCI CQ
committed
Use widget directive in panels/application
Bug: 491079281 Change-Id: Ib374b74dd196592129704460eb435211fcbe3589 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7657248 Reviewed-by: Simon Zünd <szuend@chromium.org> Auto-Submit: Danil Somsikov <dsv@chromium.org> Commit-Queue: Simon Zünd <szuend@chromium.org>
1 parent 0e244a9 commit 839de3b

7 files changed

Lines changed: 50 additions & 67 deletions

File tree

‎front_end/panels/application/AppManifestView.ts‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import * as ApplicationComponents from './components/components.js';
2222

2323
const {styleMap, classMap, ref} = Directives;
2424
const {linkifyURL} = Components.Linkifier.Linkifier;
25-
const {widgetConfig} = UI.Widget;
25+
const {widget, widgetConfig} = UI.Widget;
2626

2727
const UIStrings = {
2828
/**
@@ -1095,12 +1095,11 @@ export const DEFAULT_VIEW: View = (input, output, target) => {
10951095
render(html`
10961096
<style>${appManifestViewStyles}</style>
10971097
<style>${UI.inspectorCommonStyles}</style>
1098-
${isEmpty ? html`
1099-
<devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
1098+
${isEmpty ? widget(UI.EmptyWidget.EmptyWidget, {
11001099
header: i18nString(UIStrings.noManifestDetected),
11011100
text: i18nString(UIStrings.manifestDescription),
11021101
link: 'https://web.dev/add-manifest/' as Platform.DevToolsPath.UrlString
1103-
})}></devtools-widget>` : html`
1102+
}) : html`
11041103
<devtools-report .data=${{reportTitle: i18nString(UIStrings.appManifest), reportUrl: url}}>
11051104
${renderErrors(warnings, errors, imageErrors, output)}
11061105
${installabilityErrors?.length ? renderInstallability(installabilityErrors) : nothing}

‎front_end/panels/application/DeviceBoundSessionsView.ts‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {
1919
type SessionAndEvents
2020
} from './DeviceBoundSessionsModel.js';
2121
import deviceBoundSessionsViewStyles from './deviceBoundSessionsView.css.js';
22-
const {widgetConfig} = UI.Widget;
22+
const {widget, widgetConfig} = UI.Widget;
2323

2424
const UIStrings = {
2525
/**
@@ -727,28 +727,24 @@ export const DEFAULT_VIEW = (input: ViewInput, _output: ViewOutput, target: HTML
727727
if (!failedRequest) {
728728
return nothing;
729729
}
730+
// clang-format off
730731
return html`${failedRequest.requestUrl && html`
731-
<devtools-report-key>${i18nString(UIStrings.failedRequestUrl)}</devtools-report-key>
732-
<devtools-report-value>${failedRequest.requestUrl}</devtools-report-value>
733-
`}
734-
${failedRequest.netError && html`
735-
<devtools-report-key>${i18nString(UIStrings.failedRequestNetError)}</devtools-report-key>
736-
<devtools-report-value>${failedRequest.netError}</devtools-report-value>
737-
`}
738-
${
739-
failedRequest.responseError !== undefined ? html`
740-
<devtools-report-key>${i18nString(UIStrings.failedRequestResponseCode)}</devtools-report-key>
741-
<devtools-report-value>${failedRequest.responseError}</devtools-report-value>
742-
` :
743-
nothing}
744-
${failedRequest.responseErrorBody && html`
745-
<devtools-report-key>${i18nString(UIStrings.failedRequestResponseBody)}</devtools-report-key>
746-
<devtools-report-value>
747-
<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(SourceFrame.JSONView.SearchableJsonView, {
748-
jsonObject: tryParseJson(failedRequest.responseErrorBody),
749-
})}></devtools-widget>
750-
</devtools-report-value>
751-
`}`;
732+
<devtools-report-key>${i18nString(UIStrings.failedRequestUrl)}</devtools-report-key>
733+
<devtools-report-value>${failedRequest.requestUrl}</devtools-report-value>`}
734+
${failedRequest.netError && html`
735+
<devtools-report-key>${i18nString(UIStrings.failedRequestNetError)}</devtools-report-key>
736+
<devtools-report-value>${failedRequest.netError}</devtools-report-value>`}
737+
${failedRequest.responseError !== undefined ? html`
738+
<devtools-report-key>${i18nString(UIStrings.failedRequestResponseCode)}</devtools-report-key>
739+
<devtools-report-value>${failedRequest.responseError}</devtools-report-value>` : nothing}
740+
${failedRequest.responseErrorBody && html`
741+
<devtools-report-key>${i18nString(UIStrings.failedRequestResponseBody)}</devtools-report-key>
742+
<devtools-report-value>
743+
${widget(SourceFrame.JSONView.SearchableJsonView, {
744+
jsonObject: tryParseJson(failedRequest.responseErrorBody),
745+
})}
746+
</devtools-report-value>`}`;
747+
// clang-format on
752748
};
753749

754750
const creationEventDetails =

‎front_end/panels/application/FrameDetailsView.ts‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import * as ApplicationComponents from './components/components.js';
3030
import frameDetailsReportViewStyles from './frameDetailsReportView.css.js';
3131
import {OriginTrialTreeView} from './OriginTrialTreeView.js';
3232

33-
const {widgetConfig} = UI.Widget;
33+
const {widget, widgetConfig} = UI.Widget;
3434

3535
const UIStrings = {
3636
/**
@@ -297,11 +297,10 @@ const DEFAULT_VIEW: View = (input, _output, target) => {
297297
${renderIsolationSection(input)}
298298
${renderApiAvailabilitySection(input.frame)}
299299
${renderOriginTrial(input.trials)}
300-
${input.permissionsPolicies ? html`
301-
<devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.PermissionsPolicySection.PermissionsPolicySection, {
300+
${input.permissionsPolicies ?
301+
widget(ApplicationComponents.PermissionsPolicySection.PermissionsPolicySection, {
302302
policies: input.permissionsPolicies,
303-
showDetails: false})}>
304-
</devtools-widget>` : nothing}
303+
showDetails: false}) : nothing}
305304
${input.protocolMonitorExperimentEnabled ? renderAdditionalInfoSection(input.frame) : nothing}
306305
</devtools-report>
307306
`, target);
@@ -434,10 +433,7 @@ function renderOwnerElement(linkTargetDOMNode: SDK.DOMModel.DOMNode|null): LitTe
434433
<devtools-report-key>${i18nString(UIStrings.ownerElement)}</devtools-report-key>
435434
<devtools-report-value class="without-min-width">
436435
<div class="inline-items">
437-
<devtools-widget .widgetConfig=${widgetConfig(PanelCommon.DOMLinkifier.DOMNodeLink, {
438-
node: linkTargetDOMNode
439-
})}>
440-
</devtools-widget>
436+
${widget(PanelCommon.DOMLinkifier.DOMNodeLink, {node: linkTargetDOMNode})}
441437
</div>
442438
</devtools-report-value>
443439
`;
@@ -454,9 +450,8 @@ function maybeRenderCreationStacktrace(stackTrace: StackTrace.StackTrace.StackTr
454450
<devtools-report-key title=${i18nString(UIStrings.creationStackTraceExplanation)}>${
455451
i18nString(UIStrings.creationStackTrace)}</devtools-report-key>
456452
<devtools-report-value jslog=${VisualLogging.section('frame-creation-stack-trace')}>
457-
<devtools-widget .widgetConfig=${UI.Widget.widgetConfig(
458-
Components.JSPresentationUtils.StackTracePreviewContent, {stackTrace, options: {expandable: true}})}>
459-
</devtools-widget>
453+
${widget(Components.JSPresentationUtils.StackTracePreviewContent,
454+
{stackTrace, options: {expandable: true}})}
460455
</devtools-report-value>
461456
`;
462457
// clang-format on
@@ -524,9 +519,8 @@ function maybeRenderCreatorAdScriptAncestry(
524519
// Disabled until https://crbug.com/1079231 is fixed.
525520
// clang-format off
526521
return html`<div>
527-
<devtools-widget .widgetConfig=${widgetConfig(Components.Linkifier.ScriptLocationLink, {
528-
target, scriptId: adScriptId.scriptId, options: {jslogContext: 'ad-script'}})}>
529-
</devtools-widget>
522+
${widget(Components.Linkifier.ScriptLocationLink,
523+
{target, scriptId: adScriptId.scriptId, options: {jslogContext: 'ad-script'}})}
530524
</div>`;
531525
// clang-format on
532526
});

‎front_end/panels/application/OriginTrialTreeView.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import originTrialTokenRowsStyles from './originTrialTokenRows.css.js';
1616
import originTrialTreeViewStyles from './originTrialTreeView.css.js';
1717

1818
const {classMap} = Directives;
19-
const {widgetConfig} = UI.Widget;
19+
const {widget} = UI.Widget;
2020

2121
const UIStrings = {
2222
/**
@@ -131,8 +131,7 @@ interface TokenField {
131131
function renderTokenDetails(token: Protocol.Page.OriginTrialTokenWithStatus): TemplateResult {
132132
return html`
133133
<li role="treeitem">
134-
<devtools-widget .widgetConfig=${widgetConfig(OriginTrialTokenRows, {data: token})}>
135-
</devtools-widget>
134+
${widget(OriginTrialTokenRows, {data: token})}
136135
</li>`;
137136
}
138137

‎front_end/panels/application/ReportingApiView.ts‎

Lines changed: 13 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import * as VisualLogging from '../../ui/visual_logging/visual_logging.js';
1313

1414
import * as ApplicationComponents from './components/components.js';
1515

16-
const {widgetConfig} = UI.Widget;
16+
const {widget, widgetConfig} = UI.Widget;
1717

1818
const UIStrings = {
1919
/**
@@ -66,34 +66,30 @@ export const DEFAULT_VIEW = (input: ViewInput, output: undefined, target: HTMLEl
6666
${input.hasReports ? html`
6767
<devtools-split-view slot="main" sidebar-position="second" sidebar-initial-size="150">
6868
<div slot="main">
69-
<devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.ReportsGrid.ReportsGrid, {
69+
${widget(ApplicationComponents.ReportsGrid.ReportsGrid, {
7070
reports: input.reports, onReportSelected: input.onReportSelected,
71-
})}></devtools-widget>
71+
})}
7272
</div>
7373
<div slot="sidebar" class="vbox" jslog=${VisualLogging.pane('preview').track({resize: true})}>
74-
${input.focusedReport ? html`
75-
<devtools-widget .widgetConfig=${widgetConfig(SourceFrame.JSONView.SearchableJsonView, {
76-
jsonObject: input.focusedReport.body,
77-
})}></devtools-widget>
78-
` : html`
79-
<devtools-widget .widgetConfig=${widgetConfig(UI.EmptyWidget.EmptyWidget, {
80-
header: i18nString(UIStrings.noReportSelected),
81-
text: i18nString(UIStrings.clickToDisplayBody),
82-
})}></devtools-widget>
83-
`}
74+
${input.focusedReport
75+
? widget(SourceFrame.JSONView.SearchableJsonView, {jsonObject: input.focusedReport.body})
76+
: widget(UI.EmptyWidget.EmptyWidget, {
77+
header: i18nString(UIStrings.noReportSelected),
78+
text: i18nString(UIStrings.clickToDisplayBody),
79+
})}
8480
</div>
8581
</devtools-split-view>
8682
` : html`
8783
<div slot="main">
88-
<devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.ReportsGrid.ReportsGrid, {
84+
${widget(ApplicationComponents.ReportsGrid.ReportsGrid, {
8985
reports: input.reports, onReportSelected: input.onReportSelected,
90-
})}></devtools-widget>
86+
})}
9187
</div>
9288
`}
9389
<div slot="sidebar">
94-
<devtools-widget .widgetConfig=${widgetConfig(ApplicationComponents.EndpointsGrid.EndpointsGrid, {
90+
${widget(ApplicationComponents.EndpointsGrid.EndpointsGrid, {
9591
endpoints: input.endpoints,
96-
})}></devtools-widget>
92+
})}
9793
</div>
9894
</devtools-split-view>
9995
`, target);

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ const UIStrings = {
147147

148148
const str_ = i18n.i18n.registerUIStrings('panels/application/components/BackForwardCacheView.ts', UIStrings);
149149
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
150-
const {widgetConfig} = UI.Widget;
150+
const {widget} = UI.Widget;
151151

152152
const enum ScreenStatusType {
153153
RUNNING = 'Running',
@@ -387,7 +387,7 @@ function maybeRenderJavaScriptDetails(details: Protocol.Page.BackForwardCacheBlo
387387
const maxLengthForDisplayedURLs = 50;
388388
const rows = [html`<div>${i18nString(UIStrings.filesPerIssue, {n: details.length})}</div>`];
389389
rows.push(...details.map(detail => html`
390-
<devtools-widget .widgetConfig=${widgetConfig(Components.Linkifier.ScriptLocationLink, {
390+
${widget(Components.Linkifier.ScriptLocationLink, {
391391
sourceURL: detail.url as Platform.DevToolsPath.UrlString,
392392
lineNumber: detail.lineNumber,
393393
options: {
@@ -396,7 +396,7 @@ function maybeRenderJavaScriptDetails(details: Protocol.Page.BackForwardCacheBlo
396396
inlineFrameIndex: 0,
397397
maxLength: maxLengthForDisplayedURLs,
398398
}
399-
})}></devtools-widget>`));
399+
})}`));
400400
return html`
401401
<div class="details-list">
402402
<devtools-expandable-list .data=${

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

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -134,7 +134,7 @@ const UIStrings = {
134134
const str_ = i18n.i18n.registerUIStrings('panels/application/preloading/components/UsedPreloadingView.ts', UIStrings);
135135
const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
136136

137-
const {widgetConfig} = UI.Widget;
137+
const {widget} = UI.Widget;
138138

139139
export interface UsedPreloadingViewData {
140140
pageURL: Platform.DevToolsPath.UrlString;
@@ -270,8 +270,7 @@ function renderMismatchedSections(data: MismatchedData): LitTemplate {
270270
${i18nString(UIStrings.preloadedURLs)}
271271
</devtools-report-section-header>
272272
<devtools-report-section jslog=${VisualLogging.section('preloaded-urls')}>
273-
<devtools-widget .widgetConfig=${widgetConfig(MismatchedPreloadingGrid, {data})}>
274-
</devtools-widget>
273+
${widget(MismatchedPreloadingGrid, {data})}
275274
</devtools-report-section>`;
276275
// clang-format on
277276
}

0 commit comments

Comments
 (0)