Restyle Security & Cookies collapsible radio toggle

This CL further brings into alignment with design specifications the
style of newly introduced collapsible radio toggles on the Security &
Cookies pages.

A new "data" icon is also introduced representing a vertical bar chart.

Bug: 1061947
Change-Id: I9cf8c3662227ec33da5227118acab750da0110d4
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2129706Reviewed-by: dpapad <dpapad@chromium.org>
Commit-Queue: Theodore Olsauskas-Warren <sauski@google.com>
Cr-Commit-Position: refs/heads/master@{#755912}

chrome/browser/resources/settings/icons.html

@@ -10,6 +10,7 @@ NOTE: Chrome OS icons go in ./chromeos/os_icons.html.
   <svg>
     <defs>
       <g id="credit-card"><path d="M16.4,4 L3.6,4 C2.716,4 2.008,4.7271875 2.008,5.625 L2,15.375 C2,16.2728125 2.716,17 3.6,17 L16.4,17 C17.284,17 18,16.2728125 18,15.375 L18,5.625 C18,4.7271875 17.284,4 16.4,4 Z M16.5,15 L3.5,15 L3.5,10 L16.5,10 L16.5,15 Z M16.5,7 L3.5,7 L3.5,5.5 L16.5,5.5 L16.5,7 Z"></path></g>
+      <g id="data"><path d="M0 0h20v20H0z" fill="none" fill-rule="evenodd"></path><path d="M6.5 7v9H4V7h2.5zm5-3v12H9V4h2.5zm5 7v5H14v-5h2.5z"></path></g>
       <g id="googleg"><path d="M16.58 8H9v2.75h4.47c-.24 1.2-1.42 3.27-4.47 3.27-2.72 0-4.93-2.25-4.93-5.02S6.28 3.98 9 3.98c1.54 0 2.57.66 3.17 1.22l2.19-2.12C12.97 1.79 11.16 1 9 1 4.58 1 1 4.58 1 9s3.58 8 8 8c4.62 0 7.68-3.25 7.68-7.82 0-.46-.04-.83-.1-1.18z"></path></g>
       <g id="incognito" fill="#5F6368"><circle cx="6.8" cy="12.964" r="1.764"/><path d="M10 0C4.473 0 0 4.473 0 10s4.473 10 10 10 10-4.473 10-10S15.527 0 10 0zM7.619 4.1a.696.696 0 0 1 .881-.419l1.473.492 1.463-.492a.716.716 0 0 1 .883.419l1.608 4.291H6.02l1.6-4.291zm5.517 11.328a2.463 2.463 0 0 1-2.445-2.256c-.682-.436-1.237-.162-1.455-.017a2.45 2.45 0 0 1-2.445 2.263 2.471 2.471 0 0 1-2.464-2.463 2.47 2.47 0 0 1 2.463-2.464c1.165 0 2.138.809 2.391 1.9a1.934 1.934 0 0 1 1.546.009 2.462 2.462 0 0 1 2.392-1.909 2.47 2.47 0 0 1 2.462 2.463 2.435 2.435 0 0 1-2.445 2.474zM16.31 9.8H3.637v-.709H16.31V9.8h-.001z"/><circle cx="13.136" cy="12.964" r="1.764"/></g>
       <g id="location-on"><path d="M10,2 C6.95928571,2 4.5,4.504 4.5,7.6 C4.5,11.8 10,18 10,18 C10,18 15.5,11.8 15.5,7.6 C15.5,4.504 13.0407143,2 10,2 Z M10,9.5 C8.896,9.5 8,8.604 8,7.5 C8,6.396 8.896,5.5 10,5.5 C11.104,5.5 12,6.396 12,7.5 C12,8.604 11.104,9.5 10,9.5 Z"></path></g>

chrome/browser/resources/settings/privacy_page/collapse_radio_button.html

@@ -29,15 +29,30 @@
       }
 
       iron-collapse {
-        margin-inline-end: var(--cr-section-indent-width);
-        margin-inline-start: var(--cr-section-indent-width);
+        margin-inline-end: 0;
+        margin-inline-start: calc(var(--cr-radio-button-label-spacing, 20px)
+            + var(--cr-radio-button-size));
+      }
+
+      .disc-wrapper {
+        margin-inline-end: var(--cr-radio-button-label-spacing, 20px);
       }
 
       .separator {
         margin-inline-end: 0;
+        min-height: calc(var(--settings-collapse-toggle-min-height, 48px) / 2);
+      }
+
+      #borderWrapper {
+        align-items: center;
+        border-top: var(--settings-collapse-separator-line);
+        display: flex;
+        min-height: var(--settings-collapse-toggle-min-height);
+        width: 100%;
       }
 
       #labelWrapper {
+        --cr-radio-button-label-spacing: 0;
         padding-bottom: 6px;
         padding-top: 6px;
       }
@@ -59,24 +74,26 @@
         <div class="disc-border"></div>
         <div class="disc"></div>
       </div>
-      <div id="labelWrapper">
-        <div id="label" aria-hidden="true">
-          [[label]]
-          <slot name="label"></slot>
-        </div>
-        <div hidden$="[[!subLabel]]" class="secondary">
-          [[subLabel]]
-          <slot name="sub-label"></slot>
+      <div id="borderWrapper">
+        <div id="labelWrapper">
+          <div id="label" aria-hidden="true">
+            [[label]]
+            <slot name="label"></slot>
+          </div>
+          <div hidden$="[[!subLabel]]" class="secondary">
+            [[subLabel]]
+            <slot name="sub-label"></slot>
+          </div>
         </div>
+        <cr-policy-indicator id="policyIndicator"
+            on-click="onIndicatorClick_"
+            on-aria-label="[[label]]"
+            indicator-type="[[policyIndicatorType]]">
+        </cr-policy-indicator>
+        <div hidden$="[[noCollapse]]" class="separator"></div>
+        <cr-expand-button hidden$="[[noCollapse]]" expanded="{{expanded}}">
+        </cr-expand-button>
       </div>
-      <cr-policy-indicator id="policyIndicator"
-          on-click="onIndicatorClick_"
-          on-aria-label="[[label]]"
-          indicator-type="[[policyIndicatorType]]">
-      </cr-policy-indicator>
-      <div hidden$="[[noCollapse]]" class="separator"></div>
-      <cr-expand-button hidden$="[[noCollapse]]" expanded="{{expanded}}">
-      </cr-expand-button>
     </div>
 
     <iron-collapse opened="[[expanded]]">

chrome/browser/resources/settings/privacy_page/cookies_page.html

@@ -36,12 +36,27 @@
       .bullet-line {
         align-items: center;
         display: flex;
-        padding-bottom: 10px;
-        padding-top: 10px;
+        min-height: var(--settings-row-two-line-min-height);
+      }
+
+      .bullet-line.one-line {
+        min-height: var(--settings-row-min-height);
       }
 
       .bullet-line > div {
-        padding-inline-start: var(--cr-button-edge-spacing);
+        padding-inline-start: var(--cr-radio-button-size);
+      }
+
+      settings-collapse-radio-button {
+        --settings-collapse-toggle-min-height: var(--settings-row-min-height);
+      }
+
+      settings-collapse-radio-button:not(:first-of-type) {
+        --settings-collapse-separator-line: var(--cr-separator-line);
+      }
+
+      settings-collapse-radio-button .bullet-line:last-child {
+        padding-bottom: 12px;
       }
     </style>
     <picture>
@@ -131,7 +146,7 @@
               <iron-icon icon="settings:block"></iron-icon>
               <div class="secondary">$i18n{cookiePageBlockAllBulTwo}</div>
             </div>
-            <div class="bullet-line">
+            <div class="bullet-line one-line">
               <iron-icon icon="settings:block"></iron-icon>
               <div class="secondary">$i18n{cookiePageBlockAllBulThree}</div>
             </div>

chrome/browser/resources/settings/privacy_page/passwords_leak_detection_toggle.html

@@ -13,7 +13,9 @@
 <dom-module id="settings-passwords-leak-detection-toggle">
   <template>
     <style>
-      :host-context(.list-frame) settings-toggle-button {
+      :host(.collapsable) settings-toggle-button {
+          border-top: none;
+          padding-bottom: 12px;
           padding-inline-end: 0;
           padding-inline-start: 0;
       }

chrome/browser/resources/settings/privacy_page/security_page.html

@@ -36,12 +36,33 @@
       .bullet-line {
         align-items: center;
         display: flex;
-        padding-bottom: 10px;
-        padding-top: 10px;
+        min-height: var(--settings-row-min-height);
+      }
+
+      .bullet-line.three-line {
+        min-height: var(--settings-row-three-line-min-height);
       }
 
       .bullet-line > div {
-        padding-inline-start: var(--cr-button-edge-spacing);
+        padding-inline-start: var(--cr-radio-button-size);
+      }
+
+      settings-collapse-radio-button {
+        --settings-collapse-toggle-min-height:
+            var(--settings-row-three-line-min-height);
+      }
+
+      settings-collapse-radio-button:not(:first-of-type) {
+        --settings-collapse-separator-line: var(--cr-separator-line);
+      }
+
+      settings-collapse-radio-button .bullet-line:last-child {
+        padding-bottom: 12px;
+      }
+
+      #safeBrowsingReportingToggle {
+        padding-inline-end: 0;
+        padding-inline-start: 0;
       }
     </style>
     <picture>
@@ -89,8 +110,8 @@
                 $i18n{safeBrowsingEnhancedBulFour}
               </div>
             </div>
-            <div class="bullet-line">
-              <iron-icon icon="settings:web"></iron-icon>
+            <div class="bullet-line three-line last-collapse-item">
+              <iron-icon icon="settings20:data"></iron-icon>
               <div class="secondary">
                 $i18n{safeBrowsingEnhancedBulFive}
               </div>
@@ -107,26 +128,28 @@
                 "[[safeBrowsingRadioManagedState_.standard.indicator]]">
           <div slot="collapse">
             <div class="bullet-line">
-              <iron-icon icon="cr:computer"></iron-icon>
+              <iron-icon icon="cr:security"></iron-icon>
               <div class="secondary">
                   $i18n{safeBrowsingStandardBulOne}
               </div>
             </div>
-            <div class="bullet-line">
-              <iron-icon icon="settings:web"></iron-icon>
+            <div class="bullet-line three-line">
+              <iron-icon icon="settings20:data"></iron-icon>
               <div class="secondary">
                   $i18n{safeBrowsingStandardBulTwo}
               </div>
             </div>
             <settings-toggle-button id="safeBrowsingReportingToggle"
                 pref="{{prefs.safebrowsing.scout_reporting_enabled}}"
-                class="settings-box first"
+                class="first"
                 label="$i18n{safeBrowsingStandardReportingLabel}"
                 sub-label="$i18n{safeBrowsingEnableExtendedReportingDesc}"
                 disabled="[[
                     getDisabledExtendedSafeBrowsing_(prefs.safebrowsing.*)]]">
             </settings-toggle-button>
-            <settings-passwords-leak-detection-toggle prefs="{{prefs}}"
+            <settings-passwords-leak-detection-toggle id="passwordsLeakToggle"
+                class="collapsable"
+                prefs="{{prefs}}"
                 sync-status="[[syncStatus]]">
             </settings-passwords-leak-detection-toggle>
           </div>