Privacy sandbox page: add banner

Adds a banner to the top of the privacy sandbox page.

Bug: 1152336
Change-Id: Ia44f468945fc1a36529185ae82a80aac465246b5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2593372Reviewed-by: Rainhard Findling <rainhard@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Commit-Queue: Rainhard Findling <rainhard@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837509}

chrome/browser/resources/settings/BUILD.gn

@@ -62,6 +62,8 @@ generate_grd("build_grd") {
     "images/password_check_positive.svg",
     "images/permissions_banner_dark.svg",
     "images/permissions_banner.svg",
+    "images/privacy_sandbox_banner_dark.svg",
+    "images/privacy_sandbox_banner.svg",
     "images/safe_browsing_banner_dark.svg",
     "images/safe_browsing_banner.svg",
     "images/sync_banner_dark.svg",

chrome/browser/resources/settings/images/privacy_sandbox_banner.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1172 432"><path d="M660.23 204.731v45.039a53.38 53.38 0 0 1 34.117 12.259v-23.182a34.116 34.116 0 0 0-34.116-34.116" fill="#90b8f8"/><path fill="#cf8d66" d="M590.628 239.884h-35.527l4.234-52.49h27.057l4.236 52.49"/><path fill="#3b78e7" d="M585.345 230.388h-27.806v25.909h27.806v-25.909"/><path d="M530.487 243.172a37.281 37.281 0 0 0-36.111 28.018l-22 85.772h200.976l-22-85.772a37.281 37.281 0 0 0-36.112-28.018h-84.753" fill="#3b78e7"/><path d="M623.386 143.27a50.522 50.522 0 1 1-50.522-50.522 50.522 50.522 0 0 1 50.522 50.522" fill="#3c4043"/><path d="M529.36 150.3h-1a44.554 44.554 0 0 1 44.504-44.504v1A43.553 43.553 0 0 0 529.36 150.3z" fill="#5f6368"/><path d="M526.19 148.723h-1c0-27.744 21.387-50.315 47.674-50.315v1c-25.736 0-46.674 22.123-46.674 49.315z" fill="#5f6368"/><path d="M536.776 152.348a36.089 36.089 0 0 1 72.177 0v16.294a36.089 36.089 0 0 1-72.177 0v-16.294" fill="#cf8d66"/><path d="M608.952 168.643v-16.295a36.088 36.088 0 0 0-36.088-36.089v88.472a36.088 36.088 0 0 0 36.088-36.088" fill="#3c4043"/><path d="M572.864 92.748a50.522 50.522 0 0 1 0 101.043V92.748" fill="#3c4043"/><path d="M572.864 116.26a36.089 36.089 0 0 0-36.089 36.088v6.67a21.897 21.897 0 0 0 15.269-20.869l-.001-.026a21.89 21.89 0 0 0 20.821-21.864z" fill="#3c4043"/><path fill="#fff" d="M572.864 230.388h-27.118l-3.533 18.992h20.759l9.892-18.992z"/><circle cx="559.57" cy="156.818" r="2.199" fill="#3c4043"/><path d="M627.62 48.935h-54.756v26.102H573V75h39.31v.037h15.31V48.935m86.291 0h-54.755v26.102h54.755V48.935M627.62 356.963h-54.756v26.102h54.756v-26.102m86.207 0H659.07v26.102h54.757v-26.102m26.102-71.301h-26.102v71.301-.001.001h26.102v-71.301m0-105.312h-26.102v71.3h26.102v-71.3m.085-105.313h-26.103v71.301h26.103V75.037" fill="#ecedf0"/><circle cx="559.57" cy="156.818" r="2.199" fill="#3c4043"/><path d="M573 75.037h-.136v17.71H573v-17.71m85.948 0H612.31a39.081 39.081 0 0 1-10.582 26.762 50.461 50.461 0 0 1 21.658 41.47q0 2.078-.165 4.115h10.07a26.94 26.94 0 1 1 26.94 26.94v17.813h53.596v-62.221l-54.879-54.88" fill="#90b8f8"/><path d="M572.864 92.748v54.636h50.357q.163-2.035.165-4.114a50.461 50.461 0 0 0-21.658-41.47 39.118 39.118 0 0 1-28.641 12.424l-.087-.003V92.748h-.136" fill="#8babdc"/><path d="M660.23 192.137h-43.013a49.345 49.345 0 0 1-4.864 51.035h2.887a37.244 37.244 0 0 1 25.625 10.203 53.455 53.455 0 0 1 19.366-3.605v-57.633" fill="#68eaf0"/><path d="M615.24 243.172h-2.887a49.22 49.22 0 0 1-39.489 19.786v8.44h44.344a53.754 53.754 0 0 1 23.657-18.023 37.244 37.244 0 0 0-25.625-10.203" fill="#33c5e9"/><path d="M633.291 147.384h-10.07a50.365 50.365 0 0 1-14.983 31.956 49.39 49.39 0 0 1 8.979 12.796h43.014v-17.813a26.94 26.94 0 0 1-26.94-26.94" fill="#4ad7ee"/><path d="M623.22 147.384h-50.356v16.992a49.149 49.149 0 0 1 35.374 14.964 50.365 50.365 0 0 0 14.983-31.957" fill="#49d3e6"/><path d="M659.89 356.962h-87.026 87.129-.103" fill="#59e8ee"/><path d="M606.634 303.366h-33.77v53.596h87.026a53.597 53.597 0 0 1-53.256-53.595" fill="#59d8f9"/><path d="M698.13 341.265a53.521 53.521 0 0 1-25.168 14.177l.39 1.52h-12.883 53.358l-15.698-15.698" fill="#59e8ee"/><path d="M672.962 355.442a53.717 53.717 0 0 1-12.391 1.52h12.78l-.39-1.52" fill="#59d8f9"/><path fill="#fff" d="M713.911 75.037h-.084v54.879l.084.084V75.037m-.084 0h-54.879l54.879 54.879V75.037"/><path d="M694.347 262.028v41.92a34.008 34.008 0 0 1-9.704 23.83l13.486 13.487a53.428 53.428 0 0 0 15.698-37.899 53.486 53.486 0 0 0-19.48-41.338" fill="#ecedf0"/><path d="M660.23 249.77v21.628h-8.825l8.2 31.969h.626l24.413 24.412a34.008 34.008 0 0 0 9.703-23.831v-41.92a53.38 53.38 0 0 0-34.116-12.258" fill="#e2edfa"/><path d="M651.405 271.398h-34.197a53.365 53.365 0 0 0-10.574 31.968h52.97l-8.2-31.968" fill="#d0e0f9"/><path d="M660.469 356.962h-.476l.238.001h.238" fill="#ecedf0"/><path d="M660.23 249.77a53.455 53.455 0 0 0-19.365 3.605 37.206 37.206 0 0 1 10.487 17.815l.053.207h8.826V249.77" fill="#d6f5f7"/><path fill="#d4f5fb" d="M660.231 249.77v21.627h-8.826v.001h8.826V249.77"/><path d="M640.865 253.375a53.754 53.754 0 0 0-23.657 18.023h34.197l-.053-.207a37.206 37.206 0 0 0-10.486-17.816" fill="#cff1fa"/><path d="M660.57 356.962h-.68.682m24.073-29.183a34.068 34.068 0 0 1-16.383 9.334l4.701 18.329a53.521 53.521 0 0 0 25.168-14.177l-13.486-13.486" fill="#d3f6f9"/><path d="M660.23 303.366h-.626l8.656 33.747a34.068 34.068 0 0 0 16.383-9.334l-24.412-24.413" fill="#e2f9fd"/><path d="M659.605 303.366h-52.971a53.597 53.597 0 0 0 53.256 53.596h.68a53.717 53.717 0 0 0 12.39-1.52l-4.7-18.329-8.656-33.747" fill="#d8f6fe"/><path d="M617.217 192.137h-16.958a36.203 36.203 0 0 1-12.719 9.485l3.088 38.262h-5.283v3.288h27.008a49.345 49.345 0 0 0 4.864-51.035" fill="#d6f5f7"/><path d="M587.54 201.622a35.96 35.96 0 0 1-14.676 3.11v25.656h12.481v9.496h5.283l-3.088-38.262" fill="#d8f3f2"/><path fill="#cff1fa" d="M585.345 230.388h-12.481v12.784h12.481v-12.784"/><path d="M612.353 243.172h-39.489v19.786a49.22 49.22 0 0 0 39.489-19.786" fill="#cff1fa"/><path d="M600.259 192.137a36.007 36.007 0 0 1-27.395 12.594 36.004 36.004 0 0 0 27.395-12.594" fill="#d8f3f2"/><path d="M600.258 192.137h-14.521a50.604 50.604 0 0 1-12.873 1.654v10.94a36.007 36.007 0 0 0 27.394-12.594" fill="#cfeef0"/><path d="M585.737 192.137h-12.873v1.654a50.604 50.604 0 0 0 12.873-1.654" fill="#cfeef0"/><path d="M608.238 179.34q-.64.628-1.304 1.235a36.056 36.056 0 0 1-6.675 11.561h16.958a49.39 49.39 0 0 0-8.979-12.796" fill="#d4f5fb"/><path d="M606.934 180.576h-.002a36.049 36.049 0 0 1-6.674 11.56h.001a36.056 36.056 0 0 0 6.675-11.56" fill="#daf7fa"/><path d="M606.932 180.577a50.422 50.422 0 0 1-21.195 11.56h14.521a36.049 36.049 0 0 0 6.674-11.56" fill="#d4f5f9"/><path d="M572.864 164.376v27.76h12.873a50.422 50.422 0 0 0 21.195-11.56h.002q.662-.606 1.304-1.236a49.149 49.149 0 0 0-35.374-14.965" fill="#d4f5f9"/><path d="M660.23 120.445a26.94 26.94 0 0 0-26.94 26.939h26.94v26.94a26.94 26.94 0 0 0 0-53.879" fill="#e2edfa"/><path d="M660.23 147.384h-26.94a26.94 26.94 0 0 0 26.94 26.94v-26.94" fill="#d4f5fb"/><path d="M612.31 75H573v.037h39.31V75m0 .037H573v17.71a50.299 50.299 0 0 1 28.728 9.052 39.081 39.081 0 0 0 10.583-26.762" fill="#fff"/><path d="M573 92.748v21.473l.087.002a39.118 39.118 0 0 0 28.64-12.424A50.299 50.299 0 0 0 573 92.748m87.23 210.618l53.597 53.597H660.23v-53.597z" fill="#fff"/></svg>
\ No newline at end of file

chrome/browser/resources/settings/images/privacy_sandbox_banner_dark.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1172 432"><path fill="#202124" d="M727.047 356.963H586V75.037h141.047v281.926"/><path d="M673.366 204.73v66.667H639.25v32.55a34.116 34.116 0 1 0 68.233 0v-65.1a34.117 34.117 0 0 0-34.117-34.117" fill="#90b8f8"/><path fill="#cf8d66" d="M604.228 245.646h-36.457l.465-5.762 3.77-46.728h27.987l4.235 52.49"/><path fill="#3b78e7" d="M611.439 230.388h-40.764v25.91h40.764v-25.91"/><path d="M543.624 243.172a37.28 37.28 0 0 0-36.111 28.018l-22.001 85.772h200.976l-22-85.772a37.282 37.282 0 0 0-36.11-28.019h-84.754" fill="#3b78e7"/><path d="M636.522 143.27A50.522 50.522 0 1 1 586 92.748a50.522 50.522 0 0 1 50.522 50.522" fill="#3c4043"/><path d="M542.496 150.3h-1A44.555 44.555 0 0 1 586 105.798v1a43.553 43.553 0 0 0-43.504 43.504z" fill="#5f6368"/><path d="M539.326 148.723h-1c0-27.744 21.387-50.315 47.674-50.315v1c-25.736 0-46.674 22.122-46.674 49.315z" fill="#5f6368"/><path d="M549.911 152.347a36.09 36.09 0 0 1 72.178 0v16.296a36.09 36.09 0 0 1-72.178 0v-16.296" fill="#cf8d66"/><path d="M622.088 168.643v-16.296A36.089 36.089 0 0 0 586 116.26v88.472a36.089 36.089 0 0 0 36.088-36.088" fill="#3c4043"/><path d="M586 92.748a50.522 50.522 0 1 1 0 101.043V92.748m0 23.511a36.09 36.09 0 0 0-36.089 36.089v6.669a21.895 21.895 0 0 0 15.269-20.868l-.001-.027A21.89 21.89 0 0 0 586 116.26z" fill="#3c4043"/><path fill="#fff" d="M586 230.389h-27.117l-3.533 18.991h20.757L586 230.389z"/><circle cx="572.706" cy="156.818" r="2.199" fill="#3c4043"/><path fill="#3c4043" d="M640.756 48.936H586v26.101h54.756V48.936m86.291 0h-54.756v26.101h54.756V48.936m-86.291 308.027H586v26.101h54.756v-26.101m86.207 0h-54.756v26.101h54.756v-26.101m26.101-71.301h-26.017v71.301h26.017v-71.301"/><path fill="#4c5055" d="M727.047 285.662h-.084v71.301h.084v-71.301"/><path fill="#3c4043" d="M753.066 180.349h-26.019v71.302h26.019v-71.302"/><path fill="#4c5055" d="M727.047 180.349h-.084v71.302h.084v-71.302"/><path fill="#3c4043" d="M753.15 75.037h-26.103v71.301h26.103V75.037"/><circle cx="572.706" cy="156.818" r="2.199" fill="#3c4043"/><path d="M726.963 75.037H586v17.711a50.522 50.522 0 0 1 50.522 50.522q0 2.077-.165 4.114h10.07a26.94 26.94 0 1 1 26.94 26.94v17.813h53.597v-117.1" fill="#7b9dd6"/><path d="M586 92.748v54.636h50.357q.164-2.035.165-4.114A50.522 50.522 0 0 0 586 92.748" fill="#8babdc"/><path d="M673.366 192.137h-43.013a49.346 49.346 0 0 1-4.864 51.035h2.888a37.241 37.241 0 0 1 25.625 10.203 53.478 53.478 0 0 1 19.364-3.605v-57.633" fill="#1aa2a9"/><path d="M628.377 243.172h-2.888A49.222 49.222 0 0 1 586 262.958v8.44h44.344a53.738 53.738 0 0 1 23.658-18.023 37.241 37.241 0 0 0-25.625-10.203" fill="#21bade"/><path d="M646.427 147.384h-10.07a50.364 50.364 0 0 1-14.983 31.956 49.4 49.4 0 0 1 8.979 12.796h43.013v-17.813a26.94 26.94 0 0 1-26.94-26.94" fill="#33c4da"/><path d="M636.357 147.384H586v16.991a49.15 49.15 0 0 1 35.374 14.965 50.364 50.364 0 0 0 14.983-31.956" fill="#37c7db"/><path d="M711.265 341.265a53.516 53.516 0 0 1-25.167 14.176l.39 1.52h-12.78l-.342.002c-.114 0-.228 0-.341-.002H586v.002h140.963l-15.698-15.699" fill="#20858d"/><path d="M686.098 355.442a53.713 53.713 0 0 1-12.39 1.52h12.78l-.39-1.52m-66.328-52.076H586v53.597l87.025-.001a53.597 53.597 0 0 1-53.255-53.596" fill="#3bb5f2"/><path fill="#202124" d="M727.047 130l-54.962-54.963h54.962V130z"/><path d="M707.483 262.028v41.92a34.003 34.003 0 0 1-9.704 23.83l13.486 13.487a53.43 53.43 0 0 0 15.698-37.899 53.485 53.485 0 0 0-19.48-41.338" fill="#4c5055"/><path d="M673.366 249.77v21.628h-8.824l8.2 31.968h.625l24.412 24.413a34.003 34.003 0 0 0 9.704-23.832v-41.919a53.38 53.38 0 0 0-34.117-12.258" fill="#a6c7fa"/><path d="M664.542 271.397h-34.198a53.364 53.364 0 0 0-10.574 31.97h52.971l-8.2-31.97" fill="#6295ec"/><path d="M673.366 249.77a53.478 53.478 0 0 0-19.364 3.605 37.207 37.207 0 0 1 10.486 17.815l.053.207h8.825V249.77" fill="#47b5bc"/><path d="M654.002 253.375a53.738 53.738 0 0 0-23.658 18.022h34.197l-.053-.207a37.207 37.207 0 0 0-10.486-17.815" fill="#4dc8e6"/><path d="M673.707 356.962h-.682l.341.001.342-.001m24.071-29.183a34.076 34.076 0 0 1-16.382 9.334l4.701 18.328a53.516 53.516 0 0 0 25.167-14.176l-13.486-13.486" fill="#4c9fa6"/><path d="M673.366 303.366h-.625l8.656 33.747a34.076 34.076 0 0 0 16.382-9.334l-24.413-24.413" fill="#a6e0fc"/><path d="M672.741 303.366H619.77a53.597 53.597 0 0 0 53.255 53.596h.683a53.713 53.713 0 0 0 12.39-1.52l-4.7-18.329-8.657-33.746" fill="#62c5f5"/><path d="M630.353 192.137h-16.958a36.203 36.203 0 0 1-12.719 9.485l2.32 28.766h8.443v12.784h14.05a49.346 49.346 0 0 0 4.864-51.035" fill="#2cbede"/><path d="M600.676 201.622a35.96 35.96 0 0 1-14.676 3.11v25.656h16.997l-2.32-28.766" fill="#58d2e5"/><path fill="#33cef2" d="M611.439 230.388H586v12.784h25.439v-12.784"/><path d="M625.489 243.172H586v19.786a49.222 49.222 0 0 0 39.49-19.786" fill="#33cef2"/><path d="M613.395 192.137h-.001A36.007 36.007 0 0 1 586 204.73a36.004 36.004 0 0 0 27.395-12.594" fill="#58d2e5"/><path d="M613.394 192.137H598.87A50.595 50.595 0 0 1 586 193.79v10.94a36.007 36.007 0 0 0 27.394-12.594" fill="#34c3e2"/><path d="M598.87 192.137H586v1.654a50.595 50.595 0 0 0 12.87-1.654" fill="#34c3e2"/><path d="M621.374 179.34q-.64.628-1.304 1.235a36.057 36.057 0 0 1-6.675 11.561h16.958a49.4 49.4 0 0 0-8.979-12.796" fill="#43d6f1"/><path d="M620.07 180.575l-.002.002a36.047 36.047 0 0 1-6.674 11.56h.001a36.057 36.057 0 0 0 6.675-11.562" fill="#5ddef2"/><path d="M620.068 180.577a50.429 50.429 0 0 1-21.197 11.56h14.523a36.047 36.047 0 0 0 6.674-11.56" fill="#47d8f2"/><path d="M586 164.375v27.762h12.87a50.429 50.429 0 0 0 21.198-11.56l.002-.002q.662-.605 1.304-1.235A49.15 49.15 0 0 0 586 164.375" fill="#47d8f2"/><path d="M673.366 120.444a26.94 26.94 0 0 0-26.94 26.94h26.94v26.94a26.94 26.94 0 0 0 0-53.88" fill="#85baef"/><path d="M673.366 147.384h-26.94a26.94 26.94 0 0 0 26.94 26.94v-26.94" fill="#43d6f1"/><path d="M586 75.037v39.18l.223.006a39.222 39.222 0 0 0 39.222-39.186zm87.366 228.329l53.597 53.597h-53.597v-53.597z" fill="#202124"/></svg>
\ No newline at end of file

chrome/browser/resources/settings/privacy_sandbox/app.html

@@ -45,6 +45,13 @@
 
 <div id="page-container">
   <h1 id="page-heading">$i18n{privacySandboxPageHeading}</h1>
+  <picture>
+    <source
+        srcset="chrome://settings/images/privacy_sandbox_banner_dark.svg"
+        media="(prefers-color-scheme: dark">
+    <img id="banner" alt=""
+        src="chrome://settings/images/privacy_sandbox_banner.svg">
+  </picture>
   <div>
     <h2 class="section-header" tabindex="-1">
       $i18n{privacySandboxPageHeading}