| <style include="cr-shared-style settings-shared cr-page-host-style iron-flex"> |
| .banner { |
| display: block; |
| margin: var(--cr-section-vertical-margin) auto; |
| width: 120px; |
| } |
| |
| .box-last { |
| padding-bottom: 12px; |
| } |
| |
| .card { |
| background-color: var(--cr-card-background-color); |
| border-radius: var(--cr-card-border-radius); |
| box-shadow: var(--cr-card-shadow); |
| flex: 1; |
| } |
| |
| .card-banner { |
| display: block; |
| margin-inline-end: auto; |
| margin-inline-start: auto; |
| max-width: 400px; |
| } |
| |
| .info-header { |
| color: var(--cr-secondary-text-color); |
| font-weight: 500; |
| } |
| |
| .label-wrapper { |
| display: block; |
| } |
| |
| .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; |
| } |
| |
| #overscroll { |
| padding-top: 64px; |
| } |
| |
| #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; |
| margin: 0; |
| padding: 28px 0 14px 0; |
| text-align: center; |
| } |
| |
| settings-toggle-button { |
| font-weight: 500; |
| } |
| |
| #learnMoreLink { |
| background: none; |
| border: none; |
| color: var(--cr-link-color); |
| cursor: pointer; |
| margin: 0; |
| padding: 0; |
| } |
| |
| .dialog-description { |
| color: var(--cr-primary-text-color); |
| } |
| |
| cr-dialog [slot=body] .dialog-description:not(:last-of-type) { |
| margin-bottom: 8px; |
| } |
| |
| ul { |
| padding-inline-start: 20px; |
| } |
| |
| .learn-more-section-title { |
| color: var(--cr-primary-text-color); |
| font-size: 0.875rem; /* 14px */ |
| } |
| |
| .learn-more-section-subtitle { |
| color: var(--cr-primary-text-color); |
| } |
| |
| .ad-personalization-title { |
| align-items: center; |
| column-gap: 20px; |
| display: flex; |
| justify-content: space-between; |
| min-height: 36px; |
| padding-bottom: 8px; |
| } |
| |
| .ad-personalization-body { |
| height: 530px; |
| } |
| |
| .ad-personalization-section-title { |
| font-weight: 500; |
| padding: 8px 0; |
| } |
| |
| .ad-personalization-section { |
| padding: 0 0 8px 16px; |
| } |
| |
| #trialsCardSettings3 > cr-link-row { |
| border-top: var(--cr-separator-line); |
| } |
| |
| #trialsDescription { |
| padding-bottom: var(--cr-section-vertical-padding); |
| } |
| |
| #adPersonalizationBackButton { |
| --cr-icon-button-icon-size: 24px; |
| margin-inline-start: 0; |
| } |
| |
| .ad-personalization-removed-row { |
| border-top: var(--cr-separator-line); |
| color: var(--cr-primary-text-color); |
| margin-top: 8px; |
| padding-inline-start: 0; |
| } |
| |
| paper-tooltip { |
| --paper-tooltip-background: var(--cr-card-background-color); |
| --paper-tooltip-delay-in: 300; |
| --paper-tooltip-duration-in: 300; |
| --paper-tooltip-opacity: 1; |
| } |
| |
| paper-tooltip::part(tooltip) { |
| border-radius: 4px; |
| box-shadow: var(--cr-elevation-2); |
| font-family: Roboto, Arial, sans-serif; |
| font-size: inherit; |
| font-weight: 400; |
| line-height: 154%; /* 20px. */ |
| margin: 0 4px; |
| } |
| </style> |
| |
| <settings-prefs id="prefs" prefs="{{prefs}}"></settings-prefs> |
| <div id="page-container"> |
| <h1 id="page-heading">$i18n{privacySandboxTitle}</h1> |
| <picture> |
| <source class="banner" |
| srcset="chrome://settings/images/privacy_sandbox_banner_v3_dark.svg" |
| media="(prefers-color-scheme: dark)"> |
| <img class="banner" alt="" |
| src="chrome://settings/images/privacy_sandbox_banner_v3.svg"> |
| </picture> |
| <div id="trialsCardSettings3" class="card"> |
| <settings-toggle-button id="trialsToggle" |
| pref="{{prefs.privacy_sandbox.apis_enabled_v2}}" |
| label="$i18n{privacySandboxTrialsTitle}" |
| on-change="onApiToggleButtonChange_"> |
| </settings-toggle-button> |
| <div id="trialsDescription" class="cr-row continuation"> |
| <div class="secondary"> |
| $i18n{privacySandboxTrialsSummary} |
| <button id="learnMoreLink" on-click="onLearnMoreClick_"> |
| $i18n{privacySandboxTrialsSummaryLearnMore} |
| </button> |
| </div> |
| </div> |
| <cr-link-row id="adPersonalizationRow" |
| start-icon="privacy-sandbox:ads-click" |
| label="$i18n{privacySandboxAdPersonalizationTitle}" |
| sub-label="$i18n{privacySandboxAdPersonalizationSummary}" |
| on-click="onAdPersonalizationRowClick_"> |
| </cr-link-row> |
| <cr-link-row id="adMeasurementRow" |
| start-icon="privacy-sandbox:insert-chart" |
| label="$i18n{privacySandboxAdMeasurementTitle}" |
| sub-label="$i18n{privacySandboxAdMeasurementSummary}" |
| on-click="onAdMeasurementRowClick_"></cr-link-row> |
| <cr-link-row id="spamAndFraudRow" |
| start-icon="privacy-sandbox:spam-reduction" |
| label="$i18n{privacySandboxSpamAndFraudTitle}" |
| sub-label="$i18n{privacySandboxSpamAndFraudSummary}" |
| on-click="onSpamAndFraudRowClick_"></cr-link-row> |
| </div> |
| <template is="dom-if" |
| if="[[!showFragment_(privacySandboxSettingsViewEnum_.MAIN, |
| privacySandboxSettingsView)]]" restamp> |
| <cr-dialog id="dialogWrapper" show-on-attach on-close="onDialogClose_"> |
| <template id="learnMoreDialog" is="dom-if" |
| if="[[showFragment_( |
| privacySandboxSettingsViewEnum_.LEARN_MORE_DIALOG, |
| privacySandboxSettingsView)]]"> |
| <div slot="title">$i18n{privacySandboxLearnMoreDialogTitle}</div> |
| <div slot="body"> |
| <div class="learn-more-section-title"> |
| $i18n{privacySandboxLearnMoreDialogTopicsTitle} |
| </div> |
| <div class="cr-secondary-text"> |
| <ul> |
| <li> |
| <span class="learn-more-section-subtitle"> |
| $i18n{privacySandboxLearnMoreDialogDataTypes} |
| </span> |
| $i18n{privacySandboxLearnMoreDialogTopicsDataTypes} |
| </li> |
| <li> |
| <span class="learn-more-section-subtitle"> |
| $i18n{privacySandboxLearnMoreDialogDataUsage} |
| </span> |
| $i18n{privacySandboxLearnMoreDialogTopicsDataUsage} |
| </li> |
| <li> |
| <span class="learn-more-section-subtitle"> |
| $i18n{privacySandboxLearnMoreDialogDataManagement} |
| </span> |
| $i18n{privacySandboxLearnMoreDialogTopicsDataManagement} |
| </li> |
| </ul> |
| </div> |
| <div class="learn-more-section-title"> |
| $i18n{privacySandboxLearnMoreDialogFledgeTitle} |
| </div> |
| <div class="cr-secondary-text"> |
| <ul> |
| <li> |
| <span class="learn-more-section-subtitle"> |
| $i18n{privacySandboxLearnMoreDialogDataTypes} |
| </span> |
| $i18n{privacySandboxLearnMoreDialogFledgeDataTypes} |
| </li> |
| <li> |
| <span class="learn-more-section-subtitle"> |
| $i18n{privacySandboxLearnMoreDialogDataUsage} |
| </span> |
| $i18n{privacySandboxLearnMoreDialogFledgeDataUsage} |
| </li> |
| <li> |
| <span class="learn-more-section-subtitle"> |
| $i18n{privacySandboxLearnMoreDialogDataManagement} |
| </span> |
| $i18n{privacySandboxLearnMoreDialogFledgeDataManagement} |
| </li> |
| </ul> |
| </div> |
| </div> |
| </template> |
| <template id="adPersonalizationDialog" is="dom-if" |
| if="[[showFragment_( |
| privacySandboxSettingsViewEnum_.AD_PERSONALIZATION_DIALOG, |
| privacySandboxSettingsView)]]"> |
| <div class="ad-personalization-title" slot="title"> |
| $i18n{privacySandboxAdPersonalizationDialogTitle} |
| </div> |
| <div slot="body" class="ad-personalization-body"> |
| <div class="dialog-description"> |
| [[getAdPersonalizationDialogDescription_( |
| prefs.privacy_sandbox.apis_enabled_v2.value, |
| topTopics_.length, |
| joiningSites_.length)]] |
| </div> |
| <div class="ad-personalization-section-title"> |
| $i18n{privacySandboxAdPersonalizationDialogTopicsTitle} |
| <iron-icon id="topicsTooltipIcon" tabindex="0" role="button" |
| aria-describedby="topicsTooltip" icon="cr:info-outline" |
| on-focus="onShowTooltip_" on-mouseenter="onShowTooltip_" |
| aria-label="$i18n{privacySandboxAdPersonalizationDialogTopicsTitle}"> |
| </iron-icon> |
| <paper-tooltip id="topicsTooltip" for="topicsTooltipIcon" |
| position="bottom" manual-mode fit-to-visible-bounds> |
| <div class="dialog-description"> |
| $i18n{privacySandboxAdPersonalizationDialogTopicsLearnMore1} |
| </div> |
| <div class="dialog-description"> |
| $i18n{privacySandboxAdPersonalizationDialogTopicsLearnMore2} |
| </div> |
| <div class="dialog-description"> |
| $i18n{privacySandboxAdPersonalizationDialogTopicsLearnMore3} |
| </div> |
| </paper-tooltip> |
| </div> |
| <div id="topTopicsSection" class="ad-personalization-section"> |
| <span id="topTopicsEmpty" |
| hidden$="[[showInterestsList_(topTopics_, |
| topTopics_.length)]]"> |
| $i18n{privacySandboxAdPersonalizationDialogTopicsEmpty} |
| </span> |
| <template is="dom-repeat" items="[[topTopics_]]"> |
| <privacy-sandbox-interest-item model="[[item]]" |
| on-interest-changed="onInterestChanged_"> |
| </privacy-sandbox-interest-item> |
| </template> |
| <cr-link-row class="ad-personalization-removed-row" |
| hidden="[[!showInterestsList_(blockedTopics_, |
| blockedTopics_.length)]]" |
| label="$i18n{privacySandboxAdPersonalizationDialogRemovedTopicsLabel}" |
| on-click="onAdPersonalizationRemovedRowClick_"> |
| </cr-link-row> |
| </div> |
| <div class="ad-personalization-section-title"> |
| $i18n{privacySandboxAdPersonalizationDialogFledgeTitle} |
| <iron-icon id="fledgeTooltipIcon" tabindex="0" role="button" |
| aria-describedby="fledgeTooltip" icon="cr:info-outline" |
| on-focus="onShowTooltip_" on-mouseenter="onShowTooltip_" |
| aria-label="$i18n{privacySandboxAdPersonalizationDialogFledgeTitle}"> |
| </iron-icon> |
| <paper-tooltip id="fledgeTooltip" for="fledgeTooltipIcon" |
| position="bottom" manual-mode fit-to-visible-bounds> |
| <div class="dialog-description"> |
| $i18n{privacySandboxAdPersonalizationDialogFledgeLearnMore1} |
| </div> |
| <div class="dialog-description"> |
| $i18n{privacySandboxAdPersonalizationDialogFledgeLearnMore2} |
| </div> |
| <div class="dialog-description"> |
| $i18n{privacySandboxAdPersonalizationDialogFledgeLearnMore3} |
| </div> |
| </paper-tooltip> |
| </div> |
| <div id="joiningSitesSection" class="ad-personalization-section"> |
| <span id="joiningSitesEmpty" |
| hidden$="[[showInterestsList_(joiningSites_, |
| joiningSites_.length)]]"> |
| $i18n{privacySandboxAdPersonalizationDialogFledgeEmpty} |
| </span> |
| <template is="dom-repeat" items="[[joiningSites_]]"> |
| <privacy-sandbox-interest-item model="[[item]]" |
| on-interest-changed="onInterestChanged_"> |
| </privacy-sandbox-interest-item> |
| </template> |
| <cr-link-row class="ad-personalization-removed-row" |
| hidden="[[!showInterestsList_(blockedSites_, |
| blockedSites_.length)]]" |
| label="$i18n{privacySandboxAdPersonalizationDialogRemovedFledgeLabel}" |
| on-click="onAdPersonalizationRemovedRowClick_"> |
| </cr-link-row> |
| </div> |
| </div> |
| </template> |
| <template id="adPersonalizationRemovedDialog" is="dom-if" |
| if="[[showFragment_( |
| privacySandboxSettingsViewEnum_.AD_PERSONALIZATION_REMOVED_DIALOG, |
| privacySandboxSettingsView)]]"> |
| <div class="ad-personalization-title" slot="title"> |
| <cr-icon-button id="adPersonalizationBackButton" |
| class="icon-arrow-back" aria-label="$i18n{back}" |
| on-click="onAdPersonalizationBackButtonClick_"> |
| </cr-icon-button> |
| <span class="flex"> |
| $i18n{privacySandboxAdPersonalizationRemovedDialogTitle} |
| </span> |
| </div> |
| <div slot="body" class="ad-personalization-body"> |
| <div class="dialog-description"> |
| $i18n{privacySandboxAdPersonalizationRemovedDialogDescription} |
| </div> |
| <div class="ad-personalization-section-title"> |
| $i18n{privacySandboxAdPersonalizationDialogTopicsTitle} |
| </div> |
| <div id="blockedTopicsSection" class="ad-personalization-section"> |
| <span id="blockedTopicsEmpty" |
| hidden$="[[showInterestsList_(blockedTopics_, |
| blockedTopics_.length)]]"> |
| $i18n{privacySandboxAdPersonalizationDialogRemovedTopicsEmpty} |
| </span> |
| <template is="dom-repeat" items="[[blockedTopics_]]"> |
| <privacy-sandbox-interest-item model="[[item]]" |
| on-interest-changed="onInterestChanged_"> |
| </privacy-sandbox-interest-item> |
| </template > |
| </div> |
| <div class="ad-personalization-section-title"> |
| $i18n{privacySandboxAdPersonalizationDialogFledgeTitle} |
| </div> |
| <div id="blockedSitesSection" class="ad-personalization-section"> |
| <span id="blockedSitesEmpty" |
| hidden$="[[showInterestsList_(blockedSites_, |
| blockedSites_.length)]]"> |
| $i18n{privacySandboxAdPersonalizationDialogRemovedFledgeEmpty} |
| </span> |
| <template is="dom-repeat" items="[[blockedSites_]]"> |
| <privacy-sandbox-interest-item model="[[item]]" |
| on-interest-changed="onInterestChanged_"> |
| </privacy-sandbox-interest-item> |
| </template> |
| </div> |
| </div> |
| </template> |
| <template id="adMeasurementDialog" is="dom-if" |
| if="[[showFragment_( |
| privacySandboxSettingsViewEnum_.AD_MEASUREMENT_DIALOG, |
| privacySandboxSettingsView)]]"> |
| <div slot="title">$i18n{privacySandboxAdMeasurementDialogTitle}</div> |
| <div slot="body"> |
| <div class="dialog-description"> |
| [[getAdMeasurementDialogDescription_( |
| prefs.privacy_sandbox.apis_enabled_v2.value)]] |
| </div> |
| <div id="adMeasurementDialogControlMeasurement" |
| class="dialog-description"> |
| $i18nRaw{privacySandboxAdMeasurementDialogControlMeasurement} |
| </div> |
| </div> |
| </template> |
| <template id="spamAndFraudDialog" is="dom-if" |
| if="[[showFragment_( |
| privacySandboxSettingsViewEnum_.SPAM_AND_FRAUD_DIALOG, |
| privacySandboxSettingsView)]]"> |
| <div slot="title">$i18n{privacySandboxSpamAndFraudDialogTitle}</div> |
| <div slot="body"> |
| <div class="dialog-description"> |
| [[getSpamAndFraudDialogDescription1_( |
| prefs.privacy_sandbox.apis_enabled_v2.value)]] |
| </div> |
| <div class="dialog-description"> |
| $i18n{privacySandboxSpamAndFraudDialogDescription2} |
| </div> |
| <div class="dialog-description"> |
| $i18n{privacySandboxSpamAndFraudDialogDescription3} |
| </div> |
| </div> |
| </template> |
| <div slot="button-container"> |
| <cr-button id="dialogCloseButton" class="action-button" |
| on-click="onDialogClose_"> |
| $i18n{ok} |
| </cr-button> |
| </div> |
| </cr-dialog> |
| </template> |
| </div> |
| <div id="overscroll"></div> |
