Skip to content

Commit e12b959

Browse files
HuanPo LinDevtools-frontend LUCI CQ
HuanPo Lin
authored and
Devtools-frontend LUCI CQ
committed
prerender: Show form_submission in Preloading panel
Demo view: https://drive.google.com/file/d/13ScUbWIj6kxNz9YZCb4u5gxQZ-eSEAhk/view?usp=sharing Bug: 346555939, 488078903 Change-Id: I115ad6efd048d0e900d7cb70128386db4f9d84f9 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7720261 Reviewed-by: Ken Okada <kenoss@chromium.org> Reviewed-by: Wolfgang Beyer <wolfi@chromium.org> Commit-Queue: Huanpo Lin <robertlin@chromium.org>
1 parent c395c91 commit e12b959

File tree

4 files changed

+77
-18
lines changed

4 files changed

+77
-18
lines changed

‎front_end/core/sdk/PreloadingModel.test.ts‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ describeWithMockConnection('PreloadingModel', () => {
8787
]);
8888
assert.deepEqual(model.getRepresentativePreloadingAttempts(null), [
8989
{
90-
id: `${loaderId}:Prefetch:https://example.com/subresource.js:undefined`,
90+
id: `${loaderId}:Prefetch:https://example.com/subresource.js:undefined:undefined`,
9191
value: {
9292
action: Protocol.Preload.SpeculationAction.Prefetch,
9393
key: {
@@ -193,7 +193,7 @@ describeWithMockConnection('PreloadingModel', () => {
193193
]);
194194
assert.deepEqual(model.getRepresentativePreloadingAttempts(null), [
195195
{
196-
id: `${loaderId}:Prefetch:https://example.com/subresource.js:undefined`,
196+
id: `${loaderId}:Prefetch:https://example.com/subresource.js:undefined:undefined`,
197197
value: {
198198
action: Protocol.Preload.SpeculationAction.Prefetch,
199199
key: {
@@ -210,7 +210,7 @@ describeWithMockConnection('PreloadingModel', () => {
210210
},
211211
},
212212
{
213-
id: `${loaderId}:Prerender:https://example.com/page.html:undefined`,
213+
id: `${loaderId}:Prerender:https://example.com/page.html:undefined:undefined`,
214214
value: {
215215
action: Protocol.Preload.SpeculationAction.Prerender,
216216
key: {
@@ -279,7 +279,7 @@ describeWithMockConnection('PreloadingModel', () => {
279279
]);
280280
assert.deepEqual(model.getRepresentativePreloadingAttempts(null), [
281281
{
282-
id: `${loaderId}:Prerender:https://example.com/page.html:undefined`,
282+
id: `${loaderId}:Prerender:https://example.com/page.html:undefined:undefined`,
283283
value: {
284284
action: Protocol.Preload.SpeculationAction.Prerender,
285285
key: {
@@ -340,7 +340,7 @@ describeWithMockConnection('PreloadingModel', () => {
340340

341341
assert.deepEqual(model.getRepresentativePreloadingAttempts(null), [
342342
{
343-
id: `${loaderId}:Prefetch:https://example.com/subresource.js:undefined`,
343+
id: `${loaderId}:Prefetch:https://example.com/subresource.js:undefined:undefined`,
344344
value: {
345345
action: Protocol.Preload.SpeculationAction.Prefetch,
346346
key: {
@@ -475,7 +475,7 @@ describeWithMockConnection('PreloadingModel', () => {
475475
]);
476476
assert.deepEqual(model.getRepresentativePreloadingAttempts(null), [
477477
{
478-
id: `${loaderId}:Prefetch:https://example.com/subresource2.js:undefined`,
478+
id: `${loaderId}:Prefetch:https://example.com/subresource2.js:undefined:undefined`,
479479
value: {
480480
action: Protocol.Preload.SpeculationAction.Prefetch,
481481
key: {
@@ -582,7 +582,7 @@ describeWithMockConnection('PreloadingModel', () => {
582582

583583
assert.deepEqual(model.getRepresentativePreloadingAttempts(null), [
584584
{
585-
id: `${loaderId}:Prefetch:https://example.com/subresource12.js:undefined`,
585+
id: `${loaderId}:Prefetch:https://example.com/subresource12.js:undefined:undefined`,
586586
value: {
587587
action: Protocol.Preload.SpeculationAction.Prefetch,
588588
key: {
@@ -599,7 +599,7 @@ describeWithMockConnection('PreloadingModel', () => {
599599
},
600600
},
601601
{
602-
id: `${loaderId}:Prefetch:https://example.com/subresource2.js:undefined`,
602+
id: `${loaderId}:Prefetch:https://example.com/subresource2.js:undefined:undefined`,
603603
value: {
604604
action: Protocol.Preload.SpeculationAction.Prefetch,
605605
key: {
@@ -619,7 +619,7 @@ describeWithMockConnection('PreloadingModel', () => {
619619

620620
assert.deepEqual(model.getRepresentativePreloadingAttempts('ruleSetId:1' as Protocol.Preload.RuleSetId), [
621621
{
622-
id: `${loaderId}:Prefetch:https://example.com/subresource12.js:undefined`,
622+
id: `${loaderId}:Prefetch:https://example.com/subresource12.js:undefined:undefined`,
623623
value: {
624624
action: Protocol.Preload.SpeculationAction.Prefetch,
625625
key: {
@@ -639,7 +639,7 @@ describeWithMockConnection('PreloadingModel', () => {
639639

640640
assert.deepEqual(model.getRepresentativePreloadingAttempts('ruleSetId:2' as Protocol.Preload.RuleSetId), [
641641
{
642-
id: `${loaderId}:Prefetch:https://example.com/subresource12.js:undefined`,
642+
id: `${loaderId}:Prefetch:https://example.com/subresource12.js:undefined:undefined`,
643643
value: {
644644
action: Protocol.Preload.SpeculationAction.Prefetch,
645645
key: {
@@ -656,7 +656,7 @@ describeWithMockConnection('PreloadingModel', () => {
656656
},
657657
},
658658
{
659-
id: `${loaderId}:Prefetch:https://example.com/subresource2.js:undefined`,
659+
id: `${loaderId}:Prefetch:https://example.com/subresource2.js:undefined:undefined`,
660660
value: {
661661
action: Protocol.Preload.SpeculationAction.Prefetch,
662662
key: {
@@ -718,7 +718,7 @@ describeWithMockConnection('PreloadingModel', () => {
718718

719719
assert.deepEqual(model.getRepresentativePreloadingAttempts(null), [
720720
{
721-
id: `${loaderId}:Prerender:https://example.com/prerendered.html:undefined`,
721+
id: `${loaderId}:Prerender:https://example.com/prerendered.html:undefined:undefined`,
722722
value: {
723723
action: Protocol.Preload.SpeculationAction.Prerender,
724724
key: {
@@ -759,7 +759,7 @@ describeWithMockConnection('PreloadingModel', () => {
759759
// expect the duration is very short that these entries are shown.
760760
assert.deepEqual(model.getRepresentativePreloadingAttempts(null), [
761761
{
762-
id: `${loaderId}:Prerender:https://example.com/prerendered.html:undefined`,
762+
id: `${loaderId}:Prerender:https://example.com/prerendered.html:undefined:undefined`,
763763
value: {
764764
action: Protocol.Preload.SpeculationAction.Prerender,
765765
key: {
@@ -777,7 +777,7 @@ describeWithMockConnection('PreloadingModel', () => {
777777
},
778778
},
779779
{
780-
id: `${loaderId}:Prefetch:https://example.com/prerendered.html:undefined`,
780+
id: `${loaderId}:Prefetch:https://example.com/prerendered.html:undefined:undefined`,
781781
value: {
782782
action: Protocol.Preload.SpeculationAction.Prefetch,
783783
key: {
@@ -808,7 +808,7 @@ describeWithMockConnection('PreloadingModel', () => {
808808
// Converges to an entry.
809809
assert.deepEqual(model.getRepresentativePreloadingAttempts(null), [
810810
{
811-
id: `${loaderId}:Prerender:https://example.com/prerendered.html:undefined`,
811+
id: `${loaderId}:Prerender:https://example.com/prerendered.html:undefined:undefined`,
812812
value: {
813813
action: Protocol.Preload.SpeculationAction.Prerender,
814814
key: {
@@ -852,7 +852,7 @@ describeWithMockConnection('PreloadingModel', () => {
852852
// The prerender is the representative of the pipeline even if it failed.
853853
assert.deepEqual(model.getRepresentativePreloadingAttempts(null), [
854854
{
855-
id: `${loaderId}:Prerender:https://example.com/prerendered.html:undefined`,
855+
id: `${loaderId}:Prerender:https://example.com/prerendered.html:undefined:undefined`,
856856
value: {
857857
action: Protocol.Preload.SpeculationAction.Prerender,
858858
key: {
@@ -923,7 +923,7 @@ describeWithMockConnection('PreloadingModel', () => {
923923

924924
assert.deepEqual(model.getRepresentativePreloadingAttempts(null), [
925925
{
926-
id: `${loaderId}:PrerenderUntilScript:https://example.com/page.html:undefined`,
926+
id: `${loaderId}:PrerenderUntilScript:https://example.com/page.html:undefined:undefined`,
927927
value: {
928928
action: Protocol.Preload.SpeculationAction.PrerenderUntilScript,
929929
key: {

‎front_end/core/sdk/PreloadingModel.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -580,7 +580,7 @@ function makePreloadingAttemptId(key: Protocol.Preload.PreloadingAttemptKey): Pr
580580
break;
581581
}
582582

583-
return `${key.loaderId}:${action}:${key.url}:${targetHint}`;
583+
return `${key.loaderId}:${action}:${key.url}:${targetHint}:${key.formSubmission ? 'formSubmission' : 'undefined'}`;
584584
}
585585

586586
export class PreloadPipeline {

‎front_end/panels/application/preloading/components/PreloadingDetailsReportView.test.ts‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -116,6 +116,36 @@ describeWithEnvironment('PreloadingDetailsReportView', () => {
116116
]);
117117
});
118118

119+
it('renders prerendering details with form submission', async () => {
120+
const url = urlString`https://example.com/prerendered.html`;
121+
const data: PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportViewData = {
122+
pipeline: SDK.PreloadingModel.PreloadPipeline.newFromAttemptsForTesting([
123+
{
124+
action: Protocol.Preload.SpeculationAction.Prerender,
125+
key: {
126+
loaderId: 'loaderId' as Protocol.Network.LoaderId,
127+
action: Protocol.Preload.SpeculationAction.Prerender,
128+
url,
129+
formSubmission: true,
130+
},
131+
pipelineId: 'pipelineId:1' as Protocol.Preload.PreloadPipelineId,
132+
status: SDK.PreloadingModel.PreloadingStatus.RUNNING,
133+
prerenderStatus: null,
134+
disallowedMojoInterface: null,
135+
mismatchedHeaders: null,
136+
ruleSetIds: ['ruleSetId'] as Protocol.Preload.RuleSetId[],
137+
nodeIds: [1] as Protocol.DOM.BackendNodeId[],
138+
},
139+
]),
140+
ruleSets: [],
141+
pageURL: urlString`https://example.com/`,
142+
};
143+
144+
const report = await renderPreloadingDetailsReportView(data);
145+
146+
assert.isTrue(report.shadowRoot?.textContent?.includes('Form submissionYes'));
147+
});
148+
119149
it('renders prerendering details with target hint blank', async () => {
120150
const url = urlString`https://example.com/prerendered.html`;
121151
const data: PreloadingComponents.PreloadingDetailsReportView.PreloadingDetailsReportViewData = {

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

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@ const UIStrings = {
5454
* @description Text in details
5555
*/
5656
detailsTargetHint: 'Target hint',
57+
/**
58+
* @description Text in details
59+
*/
60+
detailsFormSubmission: 'Form submission',
5761
/**
5862
* @description Text in details
5963
*/
@@ -62,6 +66,14 @@ const UIStrings = {
6266
* @description Header of rule set
6367
*/
6468
detailsRuleSet: 'Rule set',
69+
/**
70+
* @description Text indicating that the preloading field is true.
71+
*/
72+
yes: 'Yes',
73+
/**
74+
* @description Text indicating that the preloading field is false.
75+
*/
76+
no: 'No',
6577
/**
6678
* @description Description: status
6779
*/
@@ -202,6 +214,7 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
202214
${this.#action(isFallbackToPrefetch)}
203215
${this.#status(isFallbackToPrefetch)}
204216
${this.#targetHint()}
217+
${this.#formSubmission()}
205218
${this.#maybePrefetchFailureReason()}
206219
${this.#maybePrerenderFailureReason()}
207220
@@ -381,6 +394,22 @@ export class PreloadingDetailsReportView extends LegacyWrapper.LegacyWrapper.Wra
381394
`;
382395
}
383396

397+
#formSubmission(): Lit.LitTemplate {
398+
assertNotNullOrUndefined(this.#data);
399+
const attempt = this.#data.pipeline.getOriginallyTriggered();
400+
const hasFormSubmission = attempt.key.formSubmission !== undefined;
401+
if (!hasFormSubmission || !this.#isPrerenderLike(attempt.action)) {
402+
return Lit.nothing;
403+
}
404+
405+
return html`
406+
<devtools-report-key>${i18nString(UIStrings.detailsFormSubmission)}</devtools-report-key>
407+
<devtools-report-value>
408+
${attempt.key.formSubmission ? i18nString(UIStrings.yes) : i18nString(UIStrings.no)}
409+
</devtools-report-value>
410+
`;
411+
}
412+
384413
#maybePrerenderFailureReason(): Lit.LitTemplate {
385414
assertNotNullOrUndefined(this.#data);
386415
const attempt = this.#data.pipeline.getOriginallyTriggered();

0 commit comments

Comments
 (0)