|
| 1 | +// Copyright 2024 The Chromium Authors. All rights reserved. |
| 2 | +// Use of this source code is governed by a BSD-style license that can be |
| 3 | +// found in the LICENSE file. |
| 4 | + |
| 5 | +import * as i18n from '../../core/i18n/i18n.js'; |
| 6 | +import * as UI from '../../ui/legacy/legacy.js'; |
| 7 | +import * as LitHtml from '../../ui/lit-html/lit-html.js'; |
| 8 | +import * as VisualLogging from '../../ui/visual_logging/visual_logging.js'; |
| 9 | + |
| 10 | +import cookieReportViewStyles from './cookieReportView.css.js'; |
| 11 | + |
| 12 | +const {render, html, Directives: {ref}} = LitHtml; |
| 13 | + |
| 14 | +const UIStrings = { |
| 15 | + /** |
| 16 | + *@description Title in the header for the third-party cookie report in the Security & Privacy Panel |
| 17 | + */ |
| 18 | + title: 'Third-party cookies', |
| 19 | + /** |
| 20 | + *@description Explaination in the header about the cookies listed in the report |
| 21 | + */ |
| 22 | + body: |
| 23 | + 'Third-party cookies that might be restricted by users, depending on their settings. If a user chooses to restrict cookies, then this site might not work for them.', |
| 24 | + /** |
| 25 | + *@description A link the user can follow to learn more about third party cookie usage |
| 26 | + */ |
| 27 | + learnMoreLink: 'Learn more about how third-party cookies are used', |
| 28 | + /** |
| 29 | + *@description Status string in the cookie report for a third-party cookie that is allowed without any sort of exception. This is also used as filter chip text to allow the user to filter the table based on cookie status |
| 30 | + */ |
| 31 | + allowed: 'Allowed', |
| 32 | + /** |
| 33 | + *@description Status string in the cookie report for a third-party cookie that is allowed due to a grace period or heuristic exception. Otherwise, this would have been blocked. This is also used as filter chip text to allow the user to filter the table based on cookie status |
| 34 | + */ |
| 35 | + allowedByException: 'Allowed By Exception', |
| 36 | + /** |
| 37 | + *@description Status string in the cookie report for a third-party cookie that was blocked. This is also used as filter chip text to allow the user to filter the table based on cookie status |
| 38 | + */ |
| 39 | + blocked: 'Blocked', |
| 40 | +}; |
| 41 | +const str_ = i18n.i18n.registerUIStrings('panels/security/CookieReportView.ts', UIStrings); |
| 42 | +export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_); |
| 43 | + |
| 44 | +export interface ViewInput {} |
| 45 | +export interface ViewOutput { |
| 46 | + namedBitSetFilterUI?: UI.FilterBar.NamedBitSetFilterUI; |
| 47 | +} |
| 48 | + |
| 49 | +export interface CookieReportNodeData { |
| 50 | + name: string; |
| 51 | + domain: string; |
| 52 | + type: string; |
| 53 | + platform: string; |
| 54 | + status: string; |
| 55 | + recommendation: string; |
| 56 | +} |
| 57 | + |
| 58 | +export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void; |
| 59 | + |
| 60 | +const filterItems: UI.FilterBar.Item[] = [ |
| 61 | + { |
| 62 | + name: UIStrings.blocked, |
| 63 | + label: () => i18nString(UIStrings.blocked), |
| 64 | + title: UIStrings.blocked, |
| 65 | + jslogContext: UIStrings.blocked, |
| 66 | + }, |
| 67 | + { |
| 68 | + name: UIStrings.allowed, |
| 69 | + label: () => i18nString(UIStrings.allowed), |
| 70 | + title: UIStrings.allowed, |
| 71 | + jslogContext: UIStrings.allowed, |
| 72 | + }, |
| 73 | + { |
| 74 | + name: UIStrings.allowedByException, |
| 75 | + label: () => i18nString(UIStrings.allowedByException), |
| 76 | + title: UIStrings.allowedByException, |
| 77 | + jslogContext: UIStrings.allowedByException, |
| 78 | + }, |
| 79 | +]; |
| 80 | + |
| 81 | +export class CookieReportView extends UI.Widget.VBox { |
| 82 | + namedBitSetFilterUI?: UI.FilterBar.NamedBitSetFilterUI; |
| 83 | + #view: View; |
| 84 | + |
| 85 | + constructor(element?: HTMLElement, view: View = (input, output, target) => { |
| 86 | + // clang-format off |
| 87 | + render(html ` |
| 88 | + <div class="report overflow-auto"> |
| 89 | + <div class="header"> |
| 90 | + <div class="title">${i18nString(UIStrings.title)}</div> |
| 91 | + <div class="body">${i18nString(UIStrings.body)} <x-link class="x-link" href="https://developers.google.com/privacy-sandbox/cookies/prepare/audit-cookies" jslog=${VisualLogging.link('learn-more').track({click: true})}>${i18nString(UIStrings.learnMoreLink)}</x-link></div> |
| 92 | + </div> |
| 93 | + <devtools-named-bit-set-filter |
| 94 | + class="filter" |
| 95 | + .options=${{items: filterItems}} |
| 96 | + ${ref((el?: Element) => { |
| 97 | + if(el instanceof UI.FilterBar.NamedBitSetFilterUIElement){ |
| 98 | + output.namedBitSetFilterUI = el.getOrCreateNamedBitSetFilterUI(); |
| 99 | + } |
| 100 | + })} |
| 101 | + ></devtools-named-bit-set-filter> |
| 102 | + </div> |
| 103 | + `, target, {host: this}); |
| 104 | + // clang-format on |
| 105 | + }) { |
| 106 | + super(true, undefined, element); |
| 107 | + this.#view = view; |
| 108 | + |
| 109 | + this.doUpdate(); |
| 110 | + } |
| 111 | + |
| 112 | + doUpdate(): void { |
| 113 | + this.#view(this, this, this.contentElement); |
| 114 | + } |
| 115 | + |
| 116 | + override wasShown(): void { |
| 117 | + super.wasShown(); |
| 118 | + this.registerCSSFiles([cookieReportViewStyles]); |
| 119 | + } |
| 120 | +} |
0 commit comments