From 2b88acaa975ea50079ee983c696d83960fabdf38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cjalonthomas=E2=80=9C?= Date: Tue, 26 Nov 2024 17:40:25 +0000 Subject: [PATCH] Add frontend changes to display cookie issue insight information This change populates the 'Recommendation' column of the Cookie Impact Report table with cookie issue insight information. Report before: https://screenshot.googleplex.com/4WEbiq2n3gTMfqk.png Report after: https://screenshot.googleplex.com/8J9wSe9okRTnqS6.png Bug: 381064391 Change-Id: I291385879515e3d1309651142df75823263f53d8 Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6048914 Reviewed-by: Shuran Huang Commit-Queue: Jalon Thomas Reviewed-by: Danil Somsikov --- .../models/issues_manager/CookieIssue.ts | 3 +- front_end/panels/security/CookieReportView.ts | 109 +++++++++++++++++- 2 files changed, 107 insertions(+), 5 deletions(-) diff --git a/front_end/models/issues_manager/CookieIssue.ts b/front_end/models/issues_manager/CookieIssue.ts index 64cfb3d565..9ed8a8cfc8 100644 --- a/front_end/models/issues_manager/CookieIssue.ts +++ b/front_end/models/issues_manager/CookieIssue.ts @@ -82,7 +82,7 @@ export interface CookieReportInfo { type?: string; platform?: string; status: CookieStatus; - recommendation?: string; + insight?: Protocol.Audits.CookieIssueInsight; } export class CookieIssue extends Issue { @@ -281,6 +281,7 @@ export class CookieIssue extends Issue { type: entity?.category, platform: entity?.name, status, + insight: this.#issueDetails.insight, }; } diff --git a/front_end/panels/security/CookieReportView.ts b/front_end/panels/security/CookieReportView.ts index 5a6432970b..a9e80338f1 100644 --- a/front_end/panels/security/CookieReportView.ts +++ b/front_end/panels/security/CookieReportView.ts @@ -5,6 +5,7 @@ import type * as Common from '../../core/common/common.js'; import * as i18n from '../../core/i18n/i18n.js'; import * as SDK from '../../core/sdk/sdk.js'; +import * as Protocol from '../../generated/protocol.js'; import * as IssuesManager from '../../models/issues_manager/issues_manager.js'; import * as DataGrid from '../../ui/legacy/components/data_grid/data_grid.js'; import * as UI from '../../ui/legacy/legacy.js'; @@ -81,6 +82,48 @@ const UIStrings = { *@description Explanation to the user that there were no third-party cookie related issues found which is why they are not seeing the table/report */ emptyReportExplanation: 'No issues with third-party cookies found', + /** + *@description String in Cookie Report table. This is used when a cookie's domain has an entry in the third-party cookie migration readiness list GitHub. + *@example {guidance} PH1 + */ + gitHubResource: 'Review {PH1} from third-party site.', + /** + *@description Label for a link to an entry in the third-party cookie migration readiness list GitHub. + */ + guidance: 'guidance', + /** + *@description String in Cookie Report table. This is used when a cookie has a grace period exception. + *@example {reported issues} PH1 + */ + gracePeriod: 'Review {PH1}. Grace period exception is active.', + /** + *@description Label for a link to third-party cookie site compatability look-up. + */ + reportedIssues: 'reported issues', + /** + *@description String in Cookie Report table. This is used when a cookie has a heuristics exception. + */ + heuristics: 'Action needed later. Heuristics based exception is active', + /** + *@description String in Cookie Report table. This is used when a cookie's domain does not have an entry in the third-party cookie migration readiness list Github nor a grace period nor heuristics exception. + */ + other: 'Contact third-party site for more info', + /** + *@description String representing the GitHubResource insight type. Used as filter chip text to allow the user to filter the table based on recommendation. + */ + gitHubResourceTypeString: 'Github', + /** + *@description String representing the GracePeriod insight type. Used as filter chip text to allow the user to filter the table based on recommendation. + */ + gracePeriodTypeString: 'Grace Period', + /** + *@description String representing the GitHubResource insight type. Used as filter chip text to allow the user to filter the table based on recommendation. + */ + heuristicsTypeString: 'Heuristics', + /** + *@description String representing a null insight type. Used as filter chip text to allow the user to filter the table based on recommendation. + */ + otherTypeString: 'Other', }; const str_ = i18n.i18n.registerUIStrings('panels/security/CookieReportView.ts', UIStrings); export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); @@ -101,7 +144,7 @@ export interface CookieReportNodeData { type: string; platform: string; status: string; - recommendation: string; + recommendation: HTMLElement; } export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void; @@ -279,8 +322,8 @@ export class CookieReportView extends UI.Widget.VBox { result = CookieReportView.getStatusString(a.status).localeCompare(CookieReportView.getStatusString(b.status)); } else if (columnId === 'recommendation') { - result = (a.recommendation ?? i18nString(UIStrings.unknown)) - .localeCompare((b.recommendation ?? i18nString(UIStrings.unknown))); + result = CookieReportView.getInsightTypeString(a.insight).localeCompare( + CookieReportView.getInsightTypeString(b.insight)); } return this.dataGrid.isSortOrderAscending() ? result : -result; }) @@ -292,7 +335,7 @@ export class CookieReportView extends UI.Widget.VBox { type: row.type ?? i18nString(UIStrings.unknown), platform: row.platform ?? i18nString(UIStrings.unknown), status: CookieReportView.getStatusString(row.status), - recommendation: row.recommendation ?? i18nString(UIStrings.unknown), + recommendation: CookieReportView.getRecommendation(row.domain, row.insight), } as CookieReportNodeData, )); } @@ -313,4 +356,62 @@ export class CookieReportView extends UI.Widget.VBox { return i18nString(UIStrings.allowed); } } + + static getInsightTypeString(insight?: Protocol.Audits.CookieIssueInsight): string { + if (!insight) { + return i18nString(UIStrings.otherTypeString); + } + + switch (insight.type) { + case Protocol.Audits.InsightType.GitHubResource: + return i18nString(UIStrings.gitHubResourceTypeString); + case Protocol.Audits.InsightType.GracePeriod: + return i18nString(UIStrings.gracePeriodTypeString); + case Protocol.Audits.InsightType.Heuristics: + return i18nString(UIStrings.heuristicsTypeString); + default: + return i18nString(UIStrings.otherTypeString); + } + } + + static getRecommendation(domain: string, insight?: Protocol.Audits.CookieIssueInsight): HTMLElement { + const recElem = document.createElement('div'); + + render(CookieReportView.getRecommendationText(domain, insight), recElem, {host: this}); + return recElem; + } + + static getRecommendationText(domain: string, insight?: Protocol.Audits.CookieIssueInsight): LitHtml.TemplateResult { + if (!insight) { + return html`${i18nString(UIStrings.other)}`; + } + + switch (insight.type) { + case Protocol.Audits.InsightType.GitHubResource: { + const githubLink = UI.XLink.XLink.create( + insight.tableEntryUrl ? + insight.tableEntryUrl : + 'https://github.com/privacysandbox/privacy-sandbox-dev-support/blob/main/3pc-migration-readiness.md', + i18nString(UIStrings.guidance), undefined, undefined, 'github-resource'); + + return html`${i18n.i18n.getFormatLocalizedString(str_, UIStrings.gitHubResource, { + PH1: githubLink, + })}`; + } + case Protocol.Audits.InsightType.GracePeriod: { + const gracePeriodLink = UI.XLink.XLink.create( + 'https://developers.google.com/privacy-sandbox/cookies/dashboard?url=' + + (domain.charAt(0) === '.' ? domain.substring(1) : domain), + i18nString(UIStrings.reportedIssues), undefined, undefined, 'grace-period'); + + return html`${i18n.i18n.getFormatLocalizedString(str_, UIStrings.gracePeriod, { + PH1: gracePeriodLink, + })}`; + } + case Protocol.Audits.InsightType.Heuristics: + return html`${i18nString(UIStrings.heuristics)}`; + default: + return html`${i18nString(UIStrings.other)}`; + } + } }