Privacy Guide: New card header layout for fullscreen UI

Adapt the card header layout for the PG fullscreen UI behind a feature flag. If the feature flag is off, the existing card header is shown. If the feature flag is on a new header is shown instead. Focus on navigation works with both the old and new header. Screenshot: crbug.com/1215630#c183 Bug: 1215630 Change-Id: I7f270153d8a0c02d3906bbde12504e9f8cd184c0 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3584094 Reviewed-by: John Lee <johntlee@chromium.org> Commit-Queue: Rainhard Findling <rainhard@chromium.org> Cr-Commit-Position: refs/heads/main@{#992473}
chromium · Apr 14, 2022 · dc4b297 · dc4b297
1 parent 1ada708
commit dc4b297
Show file tree

Hide file tree

Showing 11 changed files with 135 additions and 50 deletions.
diff --git a/...r/resources/settings/privacy_page/privacy_guide/privacy_guide_clear_on_exit_fragment.html b/...r/resources/settings/privacy_page/privacy_guide/privacy_guide_clear_on_exit_fragment.html
@@ -1,13 +1,22 @@
 <style include="privacy-guide-fragment-shared"></style>
-<div class="header" tabindex="-1">
-  <picture>
-    <source
-        srcset="./images/privacy_guide/clear_on_exit_graphic_dark.svg"
-        media="(prefers-color-scheme: dark)">
-    <img alt="" src="./images/privacy_guide/clear_on_exit_graphic.svg">
-  </picture>
-  <h2 class="header-label">$i18n{privacyGuideClearOnExitCardHeader}</h2>
-</div>
+<template is="dom-if" if="[[enablePrivacyGuide2_]]">
+  <div class="header-phase2" focus-element tabindex="-1">
+    <h2 class="header-label-phase2">
+      $i18n{privacyGuideClearOnExitCardHeader}
+    </h2>
+  </div>
+</template>
+<template is="dom-if" if="[[!enablePrivacyGuide2_]]">
+  <div class="header" focus-element tabindex="-1">
+    <picture>
+      <source
+          srcset="./images/privacy_guide/clear_on_exit_graphic_dark.svg"
+          media="(prefers-color-scheme: dark)">
+      <img alt="" src="./images/privacy_guide/clear_on_exit_graphic.svg">
+    </picture>
+    <h2 class="header-label">$i18n{privacyGuideClearOnExitCardHeader}</h2>
+  </div>
+</template>
 <div class="embedded-setting-wrapper">
   <settings-toggle-button id="clearOnExit"
       pref="{{prefs.generated.cookie_session_only}}"

diff --git a/...ser/resources/settings/privacy_page/privacy_guide/privacy_guide_clear_on_exit_fragment.ts b/...ser/resources/settings/privacy_page/privacy_guide/privacy_guide_clear_on_exit_fragment.ts
@@ -13,6 +13,9 @@ import './privacy_guide_description_item.js';
 import './privacy_guide_fragment_shared_css.js';
 
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+
+import {loadTimeData} from '../../i18n_setup.js';
+
 import {getTemplate} from './privacy_guide_clear_on_exit_fragment.html.js';
 
 export class PrivacyGuideClearOnExitFragmentElement extends PolymerElement {
@@ -33,11 +36,16 @@ export class PrivacyGuideClearOnExitFragmentElement extends PolymerElement {
         type: Object,
         notify: true,
       },
+
+      enablePrivacyGuide2_: {
+        type: Boolean,
+        value: () => loadTimeData.getBoolean('privacyGuide2Enabled'),
+      },
     };
   }
 
   override focus() {
-    this.shadowRoot!.querySelector<HTMLElement>('.header')!.focus();
+    this.shadowRoot!.querySelector<HTMLElement>('[focus-element]')!.focus();
   }
 }
 

diff --git a/...browser/resources/settings/privacy_page/privacy_guide/privacy_guide_cookies_fragment.html b/...browser/resources/settings/privacy_page/privacy_guide/privacy_guide_cookies_fragment.html
@@ -1,13 +1,20 @@
 <style include="privacy-guide-fragment-shared"></style>
-<div class="header" tabindex="-1">
-  <picture>
-    <source
-        srcset="./images/privacy_guide/cookies_graphic_dark.svg"
-        media="(prefers-color-scheme: dark)">
-    <img alt="" src="./images/privacy_guide/cookies_graphic.svg">
-  </picture>
-  <h2 class="header-label">$i18n{privacyGuideCookiesCardHeader}</h2>
-</div>
+<template is="dom-if" if="[[enablePrivacyGuide2_]]">
+  <div class="header-phase2" focus-element tabindex="-1">
+    <h2 class="header-label-phase2">$i18n{privacyGuideCookiesCardHeader}</h2>
+  </div>
+</template>
+<template is="dom-if" if="[[!enablePrivacyGuide2_]]">
+  <div class="header" focus-element tabindex="-1">
+    <picture>
+      <source
+          srcset="./images/privacy_guide/cookies_graphic_dark.svg"
+          media="(prefers-color-scheme: dark)">
+      <img alt="" src="./images/privacy_guide/cookies_graphic.svg">
+    </picture>
+    <h2 class="header-label">$i18n{privacyGuideCookiesCardHeader}</h2>
+  </div>
+</template>
 <settings-radio-group id="cookiesRadioGroup"
     pref="{{prefs.generated.cookie_primary_setting}}"
     selectable-elements="settings-collapse-radio-button"

diff --git a/...e/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_cookies_fragment.ts b/...e/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_cookies_fragment.ts
@@ -15,6 +15,7 @@ import '../../privacy_page/collapse_radio_button.js';
 
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {loadTimeData} from '../../i18n_setup.js';
 import {MetricsBrowserProxy, MetricsBrowserProxyImpl, PrivacyGuideSettingsStates} from '../../metrics_browser_proxy.js';
 import {PrefsMixin} from '../../prefs/prefs_mixin.js';
 import {CookiePrimarySetting} from '../../site_settings/site_settings_prefs_browser_proxy.js';
@@ -50,6 +51,11 @@ export class PrivacyGuideCookiesFragmentElement extends
         type: Object,
         value: CookiePrimarySetting,
       },
+
+      enablePrivacyGuide2_: {
+        type: Boolean,
+        value: () => loadTimeData.getBoolean('privacyGuide2Enabled'),
+      },
     };
   }
 
@@ -64,7 +70,7 @@ export class PrivacyGuideCookiesFragmentElement extends
   }
 
   override focus() {
-    this.shadowRoot!.querySelector<HTMLElement>('.header')!.focus();
+    this.shadowRoot!.querySelector<HTMLElement>('[focus-element]')!.focus();
   }
 
   private onViewEnterStart_() {

diff --git a/...wser/resources/settings/privacy_page/privacy_guide/privacy_guide_fragment_shared_css.html b/...wser/resources/settings/privacy_page/privacy_guide/privacy_guide_fragment_shared_css.html
@@ -63,6 +63,11 @@
       padding: 24px 0 16px 0;
     }
 
+    .header-phase2 {
+      outline: none;
+      padding: 24px 0 16px 0;
+    }
+
     .header-label {
       align-self: normal;
       color: var(--cr-primary-text-color);
@@ -73,6 +78,13 @@
       padding-top: 0;
     }
 
+    .header-label-phase2 {
+      color: var(--cr-primary-text-color);
+      font-size: 138%;  /* Should be 18px when 100% is 13px. */
+      font-weight: 400;
+      justify-content: center;
+    }
+
     @media (prefers-color-scheme: dark) {
       .headline {
         color: var(--google-grey-200);

diff --git a/...er/resources/settings/privacy_page/privacy_guide/privacy_guide_history_sync_fragment.html b/...er/resources/settings/privacy_page/privacy_guide/privacy_guide_history_sync_fragment.html
@@ -1,13 +1,22 @@
 <style include="privacy-guide-fragment-shared"></style>
-<div class="header" tabindex="-1">
-  <picture>
-    <source
-        srcset="./images/privacy_guide/history_sync_graphic_dark.svg"
-        media="(prefers-color-scheme: dark)">
-    <img alt="" src="./images/privacy_guide/history_sync_graphic.svg">
-  </picture>
-  <h2 class="header-label">$i18n{privacyGuideHistorySyncCardHeader}</h2>
-</div>
+<template is="dom-if" if="[[enablePrivacyGuide2_]]">
+  <div class="header-phase2" focus-element tabindex="-1">
+    <h2 class="header-label-phase2">
+      $i18n{privacyGuideHistorySyncCardHeader}
+    </h2>
+  </div>
+</template>
+<template is="dom-if" if="[[!enablePrivacyGuide2_]]">
+  <div class="header" focus-element tabindex="-1">
+    <picture>
+      <source
+          srcset="./images/privacy_guide/history_sync_graphic_dark.svg"
+          media="(prefers-color-scheme: dark)">
+      <img alt="" src="./images/privacy_guide/history_sync_graphic.svg">
+    </picture>
+    <h2 class="header-label">$i18n{privacyGuideHistorySyncCardHeader}</h2>
+  </div>
+</template>
 <div class="embedded-setting-wrapper">
   <settings-toggle-button id="historyToggle"
       pref="{{historySyncVirtualPref_}}"

diff --git a/...wser/resources/settings/privacy_page/privacy_guide/privacy_guide_history_sync_fragment.ts b/...wser/resources/settings/privacy_page/privacy_guide/privacy_guide_history_sync_fragment.ts
@@ -18,6 +18,7 @@ import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bu
 
 import {BaseMixin} from '../../base_mixin.js';
 import {SettingsToggleButtonElement} from '../../controls/settings_toggle_button.js';
+import {loadTimeData} from '../../i18n_setup.js';
 import {MetricsBrowserProxy, MetricsBrowserProxyImpl, PrivacyGuideSettingsStates} from '../../metrics_browser_proxy.js';
 import {SyncBrowserProxy, SyncBrowserProxyImpl, SyncPrefs, syncPrefsIndividualDataTypes} from '../../people_page/sync_browser_proxy.js';
 import {routes} from '../../route.js';
@@ -69,6 +70,11 @@ export class PrivacyGuideHistorySyncFragmentElement extends
           };
         },
       },
+
+      enablePrivacyGuide2_: {
+        type: Boolean,
+        value: () => loadTimeData.getBoolean('privacyGuide2Enabled'),
+      },
     };
   }
 
@@ -102,7 +108,7 @@ export class PrivacyGuideHistorySyncFragmentElement extends
   }
 
   override focus() {
-    this.shadowRoot!.querySelector<HTMLElement>('.header')!.focus();
+    this.shadowRoot!.querySelector<HTMLElement>('[focus-element]')!.focus();
   }
 
   private onViewExitFinish_() {

diff --git a/...me/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_msbb_fragment.html b/...me/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_msbb_fragment.html
@@ -1,13 +1,20 @@
 <style include="privacy-guide-fragment-shared"></style>
-<div class="header" tabindex="-1">
-  <picture>
-    <source
-        srcset="./images/privacy_guide/msbb_graphic_dark.svg"
-        media="(prefers-color-scheme: dark)">
-    <img alt="" src="./images/privacy_guide/msbb_graphic.svg">
-  </picture>
-  <h2 class="header-label">$i18n{privacyGuideMsbbCardHeader}</h2>
-</div>
+<template is="dom-if" if="[[enablePrivacyGuide2_]]">
+  <div class="header-phase2" focus-element tabindex="-1">
+    <h2 class="header-label-phase2">$i18n{privacyGuideMsbbCardHeader}</h2>
+  </div>
+</template>
+<template is="dom-if" if="[[!enablePrivacyGuide2_]]">
+  <div class="header" focus-element tabindex="-1">
+    <picture>
+      <source
+          srcset="./images/privacy_guide/msbb_graphic_dark.svg"
+          media="(prefers-color-scheme: dark)">
+      <img alt="" src="./images/privacy_guide/msbb_graphic.svg">
+    </picture>
+    <h2 class="header-label">$i18n{privacyGuideMsbbCardHeader}</h2>
+  </div>
+</template>
 <div class="embedded-setting-wrapper">
   <settings-toggle-button id="urlCollectionToggle"
       pref="{{prefs.url_keyed_anonymized_data_collection.enabled}}"

diff --git a/chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_msbb_fragment.ts b/chrome/browser/resources/settings/privacy_page/privacy_guide/privacy_guide_msbb_fragment.ts
@@ -14,6 +14,7 @@ import './privacy_guide_fragment_shared_css.js';
 
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {loadTimeData} from '../../i18n_setup.js';
 import {MetricsBrowserProxy, MetricsBrowserProxyImpl, PrivacyGuideSettingsStates} from '../../metrics_browser_proxy.js';
 import {PrefsMixin} from '../../prefs/prefs_mixin.js';
 
@@ -40,6 +41,11 @@ export class PrivacyGuideMsbbFragmentElement extends
         type: Object,
         notify: true,
       },
+
+      enablePrivacyGuide2_: {
+        type: Boolean,
+        value: () => loadTimeData.getBoolean('privacyGuide2Enabled'),
+      },
     };
   }
 
@@ -54,7 +60,7 @@ export class PrivacyGuideMsbbFragmentElement extends
   }
 
   override focus() {
-    this.shadowRoot!.querySelector<HTMLElement>('.header')!.focus();
+    this.shadowRoot!.querySelector<HTMLElement>('[focus-element]')!.focus();
   }
 
   private onViewEnterStart_() {

diff --git a/...r/resources/settings/privacy_page/privacy_guide/privacy_guide_safe_browsing_fragment.html b/...r/resources/settings/privacy_page/privacy_guide/privacy_guide_safe_browsing_fragment.html
@@ -1,13 +1,22 @@
 <style include="privacy-guide-fragment-shared"></style>
-<div class="header" tabindex="-1">
-  <picture>
-    <source
-        srcset="./images/privacy_guide/safe_browsing_graphic_dark.svg"
-        media="(prefers-color-scheme: dark)">
-    <img alt="" src="./images/privacy_guide/safe_browsing_graphic.svg">
-  </picture>
-  <h2 class="header-label">$i18n{privacyGuideSafeBrowsingCardHeader}</h2>
-</div>
+<template is="dom-if" if="[[enablePrivacyGuide2_]]">
+  <div class="header-phase2" focus-element tabindex="-1">
+    <h2 class="header-label-phase2">
+      $i18n{privacyGuideSafeBrowsingCardHeader}
+    </h2>
+  </div>
+</template>
+<template is="dom-if" if="[[!enablePrivacyGuide2_]]">
+  <div class="header" focus-element tabindex="-1">
+    <picture>
+      <source
+          srcset="./images/privacy_guide/safe_browsing_graphic_dark.svg"
+          media="(prefers-color-scheme: dark)">
+      <img alt="" src="./images/privacy_guide/safe_browsing_graphic.svg">
+    </picture>
+    <h2 class="header-label">$i18n{privacyGuideSafeBrowsingCardHeader}</h2>
+  </div>
+</template>
 <settings-radio-group id="safeBrowsingRadioGroup"
     pref="{{prefs.generated.safe_browsing}}"
     selectable-elements="settings-collapse-radio-button"

diff --git a/...ser/resources/settings/privacy_page/privacy_guide/privacy_guide_safe_browsing_fragment.ts b/...ser/resources/settings/privacy_page/privacy_guide/privacy_guide_safe_browsing_fragment.ts
@@ -15,6 +15,7 @@ import '../../privacy_page/collapse_radio_button.js';
 
 import {PolymerElement} from 'chrome://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
+import {loadTimeData} from '../../i18n_setup.js';
 import {MetricsBrowserProxy, MetricsBrowserProxyImpl, PrivacyGuideSettingsStates} from '../../metrics_browser_proxy.js';
 import {PrefsMixin} from '../../prefs/prefs_mixin.js';
 import {SafeBrowsingSetting} from '../../privacy_page/security_page.js';
@@ -50,6 +51,11 @@ export class PrivacyGuideSafeBrowsingFragmentElement extends
         type: Object,
         value: SafeBrowsingSetting,
       },
+
+      enablePrivacyGuide2_: {
+        type: Boolean,
+        value: () => loadTimeData.getBoolean('privacyGuide2Enabled'),
+      },
     };
   }
 
@@ -64,7 +70,7 @@ export class PrivacyGuideSafeBrowsingFragmentElement extends
   }
 
   override focus() {
-    this.shadowRoot!.querySelector<HTMLElement>('.header')!.focus();
+    this.shadowRoot!.querySelector<HTMLElement>('[focus-element]')!.focus();
   }
 
   private onViewEnterStart_() {