Add deprecation message for 'Privacy' section of the 'Privacy & Security' panel

The first step toward deprecating the 'Privacy' section to align with
Chrome's decision to maintain its current approach to user choice for
third-party cookies.

Mocks can be found under 'User Notification' in this deprecation plan
doc:
http://docs/document/d/1-NuVEYMME-Xla0BY4BgbCRHPnqko_Ecf8O--zwXi6ug?resourcekey=0-y4svRJeCuNQcrfxw0OkmdA&tab=t.0#heading=h.ke47sslzyi8w

Bug:462017663
Change-Id: I952d18417f6982f4306a467a4575d47300172f7f
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7275937
Reviewed-by: Paul Irish <paulirish@chromium.org>
Reviewed-by: Peter Müller <petermueller@chromium.org>
Commit-Queue: Jalon Thomas <jalonthomas@google.com>

Author: jalonthomas

front_end/panels/security/CookieControlsView.ts

@@ -101,6 +101,20 @@ const UIStrings = {
    * @example {#tpcd-heuristics-grants} PH1
    */
   enableFlag: 'To use this, set {PH1} to Default',
+  /**
+   * @description First part of the deprecation warning message.
+   * @example {maintaining its current approach to user choice for third-party cookies} PH1
+   */
+  upperDeprecationWarning: 'Chrome is {PH1} and third-party cookie exceptions are being phased out.',
+  /**
+   * @description Text for the blog post link inside the deprecation warning.
+   */
+  blogPostLink: 'maintaining its current approach to user choice for third-party cookies',
+  /**
+   * @description Second part of the deprecation warning message.
+   */
+  lowerDeprecationWarning:
+      'The Controls and Third-Party cookie sections will be removed and the Privacy and Security panel will revert to its former name, the Security panel. As always, third-party cookies can be inspected from the Cookies pane in the Application panel.',
 } as const;
 
 const str_ = i18n.i18n.registerUIStrings('panels/security/CookieControlsView.ts', UIStrings);
@@ -279,6 +293,25 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: object, target: HTMLEleme
           </devtools-button>
         </div>
       </div>
+      <div class="deprecation-divider"></div>
+    `;
+
+    const deprecationMessage = html`
+      <div class="deprecation-warning">
+        <div class="body">
+          <devtools-icon
+            name="warning"
+            class="medium"
+            style="color: var(--icon-warning); margin-right: var(--sys-size-2);">
+          </devtools-icon>
+          ${i18nFormatString(UIStrings.upperDeprecationWarning, {
+            PH1: UI.Fragment.html`<x-link class="devtools-link" href="https://privacysandbox.com/news/privacy-sandbox-update/" jslog=${VisualLogging.link('privacy-sandbox-update').track({click: true})}>${i18nString(UIStrings.blogPostLink)}</x-link>`,
+          })}
+        </div>
+        <div class="body">
+          ${i18nString(UIStrings.lowerDeprecationWarning)}
+        </div>
+      </div>
     `;
 
     render(html `
@@ -302,10 +335,11 @@ const DEFAULT_VIEW: View = (input: ViewInput, _output: object, target: HTMLEleme
             </div>
           </devtools-card>
           ${Boolean(enterpriseEnabledSetting.get()) ? enterpriseDisclaimer : nothing}
+          ${deprecationMessage}
         </div>
       </div>
     `, target);
-  // clang-format on
+    // clang-format on
 };
 
 export function showInfobar(): void {

front_end/panels/security/CookieReportView.ts

@@ -169,9 +169,24 @@ const UIStrings = {
    * @description String that shows up in the context menu when right clicking one of the entries in the cookie report.
    */
   showRequestsWithThisCookie: 'Show requests with this cookie',
+  /**
+   * @description First part of the deprecation warning message.
+   * @example {maintaining its current approach to user choice for third-party cookies} PH1
+   */
+  upperDeprecationWarning: 'Chrome is {PH1} and third-party cookie exceptions are being phased out.',
+  /**
+   * @description Text for the blog post link inside the deprecation warning.
+   */
+  blogPostLink: 'maintaining its current approach to user choice for third-party cookies',
+  /**
+   * @description Second part of the deprecation warning message.
+   */
+  lowerDeprecationWarning:
+      'The Controls and Third-Party cookie sections will be removed and the Privacy and Security panel will revert to its former name, the Security panel. As always, third-party cookies can be inspected from the Cookies pane in the Application panel.',
 } as const;
 const str_ = i18n.i18n.registerUIStrings('panels/security/CookieReportView.ts', UIStrings);
 export const i18nString = i18n.i18n.getLocalizedString.bind(undefined, str_);
+export const i18nFormatString = uiI18n.getFormatLocalizedString.bind(undefined, str_);
 
 export interface ViewInput {
   cookieRows: IssuesManager.CookieIssue.CookieReportInfo[];
@@ -198,6 +213,27 @@ export interface CookieReportNodeData {
 
 export type View = (input: ViewInput, output: ViewOutput, target: HTMLElement) => void;
 const DEFAULT_VIEW: View = (input, output, target) => {
+  const deprecationMessage = html`
+    <div class="deprecation-warning">
+      <div class="body">
+        <devtools-icon
+          name="warning"
+          class="medium"
+          style="color: var(--icon-warning); margin-right: var(--sys-size-2);">
+        </devtools-icon>
+        ${i18nFormatString(UIStrings.upperDeprecationWarning, {
+    PH1: UI.Fragment
+             .html`<x-link class="devtools-link" href="https://privacysandbox.com/news/privacy-sandbox-update/" jslog=${
+                 VisualLogging.link('privacy-sandbox-update').track({click: true})}>${
+                 i18nString(UIStrings.blogPostLink)}</x-link>`,
+  })}
+      </div>
+      <div class="body">
+        ${i18nString(UIStrings.lowerDeprecationWarning)}
+      </div>
+    </div>
+  `;
+
   // clang-format off
     render(html `
         <div class="report overflow-auto">
@@ -271,9 +307,12 @@ const DEFAULT_VIEW: View = (input, output, target) => {
                     ${i18nString(UIStrings.emptyReportExplanation)}
                   </div>
                 </div>
+                <div class="deprecation-divider"></div>
               `
             }
 
+            ${deprecationMessage}
+
         </div>
     `, target);
   // clang-format on

front_end/panels/security/cookieControlsView.css

@@ -124,3 +124,16 @@ input[type="checkbox"] {
 .subtext {
   color: var(--sys-color-on-surface-subtle);
 }
+
+.deprecation-divider {
+  border-bottom: 1px solid var(--sys-color-divider);
+  margin: var(--sys-size-2) calc(var(--sys-size-3) * -1) var(--sys-size-6) calc(var(--sys-size-5) * -1);
+}
+
+.deprecation-warning {
+  padding: 0 var(--sys-size-5);
+}
+
+.deprecation-warning > .body:first-child {
+  margin-bottom: var(--sys-size-4);
+}

front_end/panels/security/cookieReportView.css

@@ -72,3 +72,19 @@ devtools-data-grid {
   width: var(--sys-size-11);
   height: var(--sys-size-11);
 }
+
+.deprecation-divider {
+  border-bottom: 1px solid var(--sys-color-divider);
+  margin-left: calc(var(--sys-size-5) * -1);
+  margin-right: calc(var(--sys-size-3) * -1);
+  margin-top: var(--sys-size-2);
+}
+
+.deprecation-warning {
+  padding: 0 var(--sys-size-5);
+  margin-bottom: var(--sys-size-6);
+}
+
+.deprecation-warning > .body:first-child {
+  margin-bottom: var(--sys-size-4);
+}

front_end/ui/visual_logging/KnownContextValues.ts

@@ -2969,6 +2969,7 @@ export const knownContextValues = new Set([
   'privacy-notice',
   'privacy-policy',
   'privacy-policy.console-insights',
+  'privacy-sandbox-update',
   'private-state-tokens',
   'production-origin',
   'profile-loading-failed',