zzos/react-native-devtools-frontend
1
0
Fork 0
mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-02 18:11:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add frontend changes to display cookie issue insight information

Browse Source 
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 <shuuran@chromium.org>
Commit-Queue: Jalon Thomas <jalonthomas@google.com>
Reviewed-by: Danil Somsikov <dsv@chromium.org>
This commit is contained in:
“jalonthomas“
2024-11-27 15:10:50 +00:00
committed by Devtools-frontend LUCI CQ
parent 742ad6bc93
commit 2b88acaa97
2 changed files with 107 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front_end/models/issues_manager/CookieIssue.ts
+2 -1
View File
@@ -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,
};
}
front_end/panels/security/CookieReportView.ts
+105 -4
View File
@@ -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)}`;
}
}
}