Privacy sandbox page: page skeleton

Bug: 1152336
Change-Id: Id5c0474e3ce8affdd42c33139ffa28f7d99aa9cc
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2584851Reviewed-by: Rainhard Findling <rainhard@chromium.org>
Reviewed-by: Christian Dullweber <dullweber@chromium.org>
Commit-Queue: Rainhard Findling <rainhard@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837042}

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

 <style include="cr-shared-style">
+  .card {
+    background-color: var(--cr-card-background-color);
+    border-radius: var(--cr-card-border-radius);
+    box-shadow: var(--cr-card-shadow);
+    flex: 1;
+  }
+
+  .secondary {
+    color: var(--cr-secondary-text-color);
+    font-weight: 400;
+  }
+
+  .section-header {
+    color: var(--cr-primary-text-color);
+    font-size: 108%;
+    font-weight: 400;
+    letter-spacing: .25px;
+    margin-bottom: 12px;
+    margin-top: var(--cr-section-vertical-margin);
+    outline: none;
+    padding-bottom: 4px;
+    padding-top: 8px;
+  }
+
+  #page-container {
+    box-sizing: border-box;
+    display: block;
+    height: inherit;
+    margin: 0 auto;
+    max-width: 550px;
+    min-width: 400px;
+    position: relative;
+    width: calc(100% * var(--cr-centered-card-width-percentage));
+  }
+
   #page-heading {
     font-size: 2rem;
     font-weight: 200;
@@ -8,6 +43,47 @@
   }
 </style>
 
-<div class="cr-centered-card-container">
+<div id="page-container">
   <h1 id="page-heading">$i18n{privacySandboxPageHeading}</h1>
+  <div>
+    <h2 class="section-header" tabindex="-1">
+      $i18n{privacySandboxPageHeading}
+    </h2>
+  </div>
+  <div>$i18n{privacySandboxPageHeading}</div>
+  <div>
+    <h2 class="section-header" tabindex="-1">
+      $i18n{privacySandboxPageHeading}
+    </h2>
+  </div>
+  <div>$i18n{privacySandboxPageHeading}</div>
+  <div>
+    <ul>
+      <li><span>$i18n{privacySandboxPageHeading}</span></li>
+      <li><span>$i18n{privacySandboxPageHeading}</span></li>
+      <li><span>$i18n{privacySandboxPageHeading}</span></li>
+    </ul>
+  </div>
+  <div>
+    <h2 class="section-header" tabindex="-1">
+      $i18n{privacySandboxPageHeading}
+    </h2>
+  </div>
+  <div class="card">
+    <settings-toggle-button id="toggleButton"
+        class="hr" label="$i18n{privacySandboxPageHeading}">
+    </settings-toggle-button>
+    <div class="cr-row continuation">
+        <div class="secondary">$i18n{privacySandboxPageHeading}</div>
+    </div>
+    <div class="cr-row continuation">
+        <div class="secondary">$i18n{privacySandboxPageHeading}</div>
+    </div>
+    <div class="cr-row continuation">
+      <cr-button class="cr-button" id="button" aria-disabled="false"
+          role="button" tabindex="0" on-click="onButtonClick_">
+        $i18n{passwordViewDetails}
+      </cr-button>
+    </div>
+  </div>
 </div>

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

@@ -2,6 +2,9 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 import 'chrome://resources/cr_elements/shared_style_css.m.js';
+import 'chrome://resources/cr_elements/shared_vars_css.m.js';
+import '../settings.js';
+
 import {html, Polymer} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
 Polymer({
@@ -9,4 +12,8 @@ Polymer({
 
   _template: html`{__html_template__}`,
 
+  /** @private */
+  onButtonClick_: function() {
+    // TODO(crbug/1152336): Implement button click.
+  },
 });