Skip to content

Commit af25078

Browse files
ktranDevtools-frontend LUCI CQ
ktran
authored and
Devtools-frontend LUCI CQ
committed
[GM3Restyling] Update lit component ReportView
This CL updates the lit component ReportView to reflect the latest key-value pair changes and makes custom changes for each of the usages. Screenshot: https://imgur.com/a/J4MEbC2 Bug: 325443308 Change-Id: Id28904ddde2138a9b6c050ebd28f14c4c4f3430a Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6367436 Commit-Queue: Kim-Anh Tran <[email protected]> Reviewed-by: Kateryna Prokopenko <[email protected]>
1 parent 8896fc2 commit af25078

16 files changed

+67
-49
lines changed

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

Lines changed: 12 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ const UIStrings = {
4444
/**
4545
* @description Entry name text in the back/forward cache view of the Application panel
4646
*/
47-
url: 'URL:',
47+
url: 'URL',
4848
/**
4949
* @description Status text for the status of the back/forward cache status
5050
*/
@@ -278,14 +278,8 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
278278
// clang-format off
279279
return html`
280280
${this.#renderBackForwardCacheStatus(frame.backForwardCacheDetails.restoredFromCache)}
281-
<div class="report-line">
282-
<div class="report-key">
283-
${i18nString(UIStrings.url)}
284-
</div>
285-
<div class="report-value" title=${frame.url}>
286-
${frame.url}
287-
</div>
288-
</div>
281+
<devtools-report-key>${i18nString(UIStrings.url)}</devtools-report-key>
282+
<devtools-report-value>${frame.url}</devtools-report-value>
289283
${this.#maybeRenderFrameTree(frame.backForwardCacheDetails.explanationsTree)}
290284
<devtools-report-section>
291285
<devtools-button
@@ -361,20 +355,15 @@ export class BackForwardCacheView extends LegacyWrapper.LegacyWrapper.WrappableC
361355

362356
// clang-format off
363357
return html`
364-
<div class="report-line"
365-
jslog=${VisualLogging.section('frames')}>
366-
<div class="report-key">
367-
${i18nString(UIStrings.framesTitle)}
368-
</div>
369-
<div class="report-value">
370-
<devtools-tree-outline .data=${{
371-
tree: [root],
372-
defaultRenderer: treeNodeRenderer,
373-
compact: true,
374-
} as TreeOutline.TreeOutline.TreeOutlineData<FrameTreeNodeData>}>
375-
</devtools-tree-outline>
376-
</div>
377-
</div>
358+
<devtools-report-key jslog=${VisualLogging.section('frames')}>${i18nString(UIStrings.framesTitle)}</devtools-report-key>
359+
<devtools-report-value>
360+
<devtools-tree-outline .data=${{
361+
tree: [root],
362+
defaultRenderer: treeNodeRenderer,
363+
compact: true,
364+
} as TreeOutline.TreeOutline.TreeOutlineData<FrameTreeNodeData>}>
365+
</devtools-tree-outline>
366+
</devtools-report-value>
378367
`;
379368
// clang-format on
380369
}

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

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -347,11 +347,11 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
347347
// clang-format off
348348
return html`
349349
<devtools-report-section-header>${i18n.i18n.lockedString('Origin trials')}</devtools-report-section-header>
350-
<div class="span-cols">
350+
<devtools-report-section>
351351
${i18nString(UIStrings.originTrialsExplanation)}
352352
<x-link href="https://developer.chrome.com/docs/web-platform/origin-trials/" class="link"
353353
jslog=${VisualLogging.link('learn-more.origin-trials').track({click: true})}>${i18nString(UIStrings.learnMore)}</x-link>
354-
</div>
354+
</devtools-report-section>
355355
${this.#originTrialTreeView}
356356
<devtools-report-divider></devtools-report-divider>
357357
`;
@@ -388,7 +388,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
388388
}
389389
const sourceCode = this.#uiSourceCodeForFrame(this.#frame);
390390
return renderIconLink(
391-
'breakpoint-circle',
391+
'label',
392392
i18nString(UIStrings.clickToOpenInSourcesPanel),
393393
() => Common.Revealer.reveal(sourceCode),
394394
'reveal-in-sources',
@@ -678,7 +678,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
678678
return result;
679679
}
680680

681-
#renderSingleCSP(cspInfo: Protocol.Network.ContentSecurityPolicyStatus): Lit.LitTemplate {
681+
#renderSingleCSP(cspInfo: Protocol.Network.ContentSecurityPolicyStatus, divider: boolean): Lit.LitTemplate {
682682
// Disabled until https://crbug.com/1079231 is fixed.
683683
// clang-format off
684684
return html`
@@ -700,6 +700,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
700700
${cspInfo.source === Protocol.Network.ContentSecurityPolicySource.HTTP ? i18n.i18n.lockedString('HTTP header') : i18n.i18n.lockedString('Meta tag')}
701701
${this.#renderEffectiveDirectives(cspInfo.effectiveDirectives)}
702702
</devtools-report-value>
703+
${divider ? html`<devtools-report-divider class="subsection-divider"></devtools-report-divider>` : Lit.nothing}
703704
`;
704705
// clang-format on
705706
}
@@ -712,7 +713,7 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
712713
<devtools-report-section-header>
713714
${i18nString(UIStrings.contentSecurityPolicy)}
714715
</devtools-report-section-header>
715-
${(cspInfos?.length) ? cspInfos.map(cspInfo => this.#renderSingleCSP(cspInfo)) : html`
716+
${(cspInfos?.length) ? cspInfos.map((cspInfo, index) => this.#renderSingleCSP(cspInfo, index < cspInfos?.length - 1)) : html`
716717
<devtools-report-key>${
717718
i18n.i18n.lockedString('Content-Security-Policy')}</devtools-report-key>
718719
<devtools-report-value>
@@ -730,11 +731,11 @@ export class FrameDetailsReportView extends LegacyWrapper.LegacyWrapper.Wrappabl
730731

731732
return html`
732733
<devtools-report-section-header>${i18nString(UIStrings.apiAvailability)}</devtools-report-section-header>
733-
<div class="span-cols">
734+
<devtools-report-section>
734735
${i18nString(UIStrings.availabilityOfCertainApisDepends)}
735736
<x-link href="https://web.dev/why-coop-coep/" class="link" jslog=${
736737
VisualLogging.link('learn-more.coop-coep').track({click: true})}>${i18nString(UIStrings.learnMore)}</x-link>
737-
</div>
738+
</devtools-report-section>
738739
${this.#renderSharedArrayBufferAvailability()}
739740
${this.#renderMeasureMemoryAvailability()}
740741
<devtools-report-divider></devtools-report-divider>

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,7 @@ export class PermissionsPolicySection extends HTMLElement {
125125
<devtools-report-value>
126126
${disallowed.map(p => p.feature).join(', ')}
127127
<devtools-button
128+
class="disabled-features-button"
128129
.variant=${Buttons.Button.Variant.OUTLINED}
129130
@click=${() => this.#toggleShowPermissionsDisallowedDetails()}
130131
jslog=${VisualLogging.action('show-disabled-features-details').track({
@@ -230,6 +231,9 @@ export class PermissionsPolicySection extends HTMLElement {
230231
<style>${permissionsPolicySectionStyles.cssText}</style>
231232
<devtools-report-section-header>${i18n.i18n.lockedString('Permissions Policy')}</devtools-report-section-header>
232233
${this.#renderAllowed()}
234+
${(this.#permissionsPolicySectionData.policies.findIndex(p => p.allowed) > 0 ||
235+
this.#permissionsPolicySectionData.policies.findIndex(p => !p.allowed) > 0) ?
236+
html`<devtools-report-divider class="subsection-divider"></devtools-report-divider>` : Lit.nothing}
233237
${Lit.Directives.until(this.#renderDisallowed(), Lit.nothing)}
234238
<devtools-report-divider></devtools-report-divider>
235239
`,

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,8 +104,8 @@ export class SharedStorageMetadataView extends StorageMetadataView {
104104
${this.value(String(this.#length))}
105105
${this.key(i18nString(UIStrings.numBytesUsed))}
106106
${this.value(String(this.#bytesUsed))}
107-
${this.key(html`${i18nString(UIStrings.entropyBudget)}<devtools-icon name="info" title=${i18nString(UIStrings.budgetExplanation)}></devtools-icon>`)}
108-
${this.value(html`${this.#remainingBudget}${this.#renderResetBudgetButton()}`)}`;
107+
${this.key(html`<span class="entropy-budget">${i18nString(UIStrings.entropyBudget)}<devtools-icon name="info" title=${i18nString(UIStrings.budgetExplanation)}></devtools-icon></span>`)}
108+
${this.value(html`<span class="entropy-budget">${this.#remainingBudget}${this.#renderResetBudgetButton()}</span>`)}`;
109109
// clang-format on
110110
}
111111

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,7 @@ export class StorageMetadataView extends LegacyWrapper.LegacyWrapper.WrappableCo
240240
#renderBucketControls(): Lit.TemplateResult {
241241
// clang-format off
242242
return html`
243+
<devtools-report-divider></devtools-report-divider>
243244
<devtools-report-section>
244245
<devtools-button
245246
aria-label=${i18nString(UIStrings.deleteBucket)}

‎front_end/panels/application/components/backForwardCacheView.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
flex: auto;
1818
overflow-wrap: break-word;
1919
overflow: hidden;
20+
grid-column-start: span 2;
2021
}
2122

2223
.details-list {
@@ -68,6 +69,10 @@
6869
outline-offset: 2px;
6970
}
7071

72+
devtools-report-value:has(devtools-tree-outline) {
73+
margin-left: var(--sys-size-7);
74+
}
75+
7176
.tree-outline li .selection {
7277
margin-left: -5px;
7378
}

‎front_end/panels/application/components/frameDetailsReportView.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ button ~ .text-ellipsis {
2121
cursor: pointer;
2222
outline-offset: 2px;
2323
padding: 0;
24+
margin-left: var(--sys-size-3);
2425
}
2526

2627
button.link {
@@ -75,7 +76,7 @@ button.text-link {
7576

7677
.span-cols {
7778
grid-column-start: span 2;
78-
margin: 0 0 8px 30px;
79+
margin-left: var(--sys-size-9);
7980
line-height: 28px;
8081
}
8182

‎front_end/panels/application/components/permissionsPolicySection.css‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,3 +53,7 @@ button.link {
5353
.block-reason {
5454
width: 215px;
5555
}
56+
57+
.disabled-features-button {
58+
padding-left: var(--sys-size-3);
59+
}

‎front_end/panels/application/components/sharedStorageMetadataView.css‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,11 +12,18 @@
1212

1313
devtools-icon {
1414
vertical-align: text-bottom;
15-
margin-left: 2px;
15+
margin-left: var(--sys-size-3);
1616
width: 16px;
1717
height: 16px;
1818
}
1919

2020
devtools-button {
2121
vertical-align: sub;
22+
margin-left: var(--sys-size-3);
23+
}
24+
25+
.entropy-budget {
26+
display: flex;
27+
align-items: center;
28+
height: 18px;
2229
}

‎front_end/ui/components/report_view/ReportView.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,8 +75,8 @@ export class Report extends HTMLElement {
7575
// Disabled until https://crbug.com/1079231 is fixed.
7676
// clang-format off
7777
render(html`
78+
${this.#reportTitle ? html`<div class="report-title">${this.#reportTitle}</div>` : nothing}
7879
<div class="content">
79-
${this.#reportTitle ? html`<div class="report-title">${this.#reportTitle}</div>` : nothing}
8080
<slot></slot>
8181
</div>
8282
`, this.#shadow, {host: this});

0 commit comments

Comments
 (0)