WebUI: Replace settings-box with cr-row, part 2

This CL continues the work to use cr-row on all pages. This CL attempts
to also make pages look a bit more consistent by replacing one-off
styles with existing classes, and removes extraneous use of
settings-box.

Bug: 973674
Change-Id: I1a4fa82b5a8dbfaf06a4fad79fb279ab5b9b2b7f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2148280Reviewed-by: Kyle Horimoto <khorimoto@chromium.org>
Reviewed-by: dpapad <dpapad@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#758968}

chrome/browser/resources/settings/autofill_page/passwords_section.html

@@ -6,6 +6,7 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast_manager.html">
 <link rel="import" href="chrome://resources/cr_elements/icons.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
@@ -14,6 +15,7 @@
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-announcer/iron-a11y-announcer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="../controls/extension_controlled_indicator.html">
 <link rel="import" href="../controls/settings_toggle_button.html">
@@ -40,7 +42,7 @@
 
 <dom-module id="passwords-section">
   <template>
-    <style include="settings-shared passwords-shared">
+    <style include="cr-shared-style settings-shared iron-flex passwords-shared">
       #savedPasswordsHeaders {
         /* This adds enough padding so that the labels are aligned with the
          * columns. It is necessary due to the absence of the "more actions"
@@ -102,8 +104,8 @@
     </settings-toggle-button>
     <template is="dom-if"
         if="[[prefs.credentials_enable_service.extensionId]]">
-      <div class="settings-box continuation">
-        <extension-controlled-indicator class="start"
+      <div class="cr-row continuation">
+        <extension-controlled-indicator class="flex"
             id="passwordsExtensionIndicator"
             extension-id="[[prefs.credentials_enable_service.extensionId]]"
             extension-name="[[
@@ -119,7 +121,7 @@
         sub-label="$i18n{passwordsAutosigninDescription}">
     </settings-toggle-button>
     <template is="dom-if" if="[[enablePasswordCheck_]]">
-      <div id="checkPasswordsBannerContainer" class="settings-box"
+      <div id="checkPasswordsBannerContainer" class="cr-row"
           hidden$="[[!shouldShowBanner_]]">
         <picture>
           <source
@@ -129,9 +131,9 @@
               src="chrome://settings/images/password_check_neutral.svg">
         </picture>
       </div>
-      <div id="checkPasswordsButtonRow" class="settings-box continuation"
+      <div id="checkPasswordsButtonRow" class="cr-row continuation"
           hidden$="[[!shouldShowBanner_]]">
-        <div class="start settings-box-text">
+        <div class="flex cr-padded-text">
           <div>$i18n{checkPasswords}</div>
           <div class="secondary">$i18n{checkPasswordsDescription}</div>
         </div>
@@ -140,12 +142,12 @@
           $i18n{checkPasswords}
         </cr-button>
       </div>
-      <div class="settings-box two-line" id="checkPasswordsLinkRow"
+      <div class="cr-row" id="checkPasswordsLinkRow"
           on-click="onCheckPasswordsClick_" actionable
           hidden$="[[shouldShowBanner_]]">
         <iron-icon icon="cr:warning" id="checkPasswordWarningIcon"
             hidden$="[[!hasLeakedCredentials_]]"></iron-icon>
-        <div class="start settings-box-text">
+        <div class="flex cr-padded-text">
           <div>
             $i18n{checkPasswords}
           </div>
@@ -162,10 +164,10 @@
         </cr-icon-button>
       </div>
     </template>
-    <div id="manageLink" class="settings-box two-line"
+    <div id="manageLink" class="cr-row two-line"
         hidden$="[[hidePasswordsLink_]]">
-      <!-- This span lays out the url correctly, relative to the label. -->
-      <span>$i18nRaw{managePasswordsLabel}</span>
+      <!-- This div lays out the link correctly, relative to the text. -->
+      <div class="cr-padded-text">$i18nRaw{managePasswordsLabel}</div>
     </div>
     <template is="dom-if" if="[[enableAccountStorage_]]">
       <cr-button on-click="onOptIn_"
@@ -177,14 +179,15 @@
           $i18n{optOutAccountStorageLabel}
       </cr-button>
     </template>
-    <div class="settings-box first">
-      <h2 id="savedPasswordsHeading" class="start">
+    <div class="cr-row first">
+      <h2 id="savedPasswordsHeading" class="flex">
         $i18n{savedPasswordsHeading}
       </h2>
       <template is="dom-if"
           if="[[showImportOrExportPasswords_(
                     showExportPasswords_, showImportPasswords_)]]">
-        <cr-icon-button class="icon-more-vert" id="exportImportMenuButton"
+        <cr-icon-button class="icon-more-vert header-aligned-button"
+            id="exportImportMenuButton"
             on-click="onImportExportMenuTap_" title="$i18n{moreActions}"
             focus-type="exportImportMenuButton"
             aria-describedby="savedPasswordsHeading"></cr-icon-button>
@@ -275,8 +278,8 @@
           on-click="onUndoButtonClick_">$i18n{undoRemovePassword}</cr-button>
     </cr-toast-manager>
 
-    <div class="settings-box block first">
-      <h2>$i18n{passwordExceptionsHeading}</h2>
+    <div class="cr-row first">
+      <h2 class="flex">$i18n{passwordExceptionsHeading}</h2>
     </div>
     <div class="list-frame vertical-list" id="passwordExceptionsList">
       <template is="dom-repeat" items="[[passwordExceptions]]"

chrome/browser/resources/settings/autofill_page/payments_section.html

@@ -3,12 +3,14 @@
 <link rel="import" href="chrome://resources/cr_elements/cr_action_menu/cr_action_menu.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_link_row/cr_link_row.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/cr/ui/focus_without_ink.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="../i18n_setup.html">
 <link rel="import" href="../metrics_browser_proxy.html">
 <link rel="import" href="../settings_shared_css.html">
@@ -23,7 +25,7 @@
 
 <dom-module id="settings-payments-section">
   <template>
-    <style include="settings-shared passwords-shared">
+    <style include="cr-shared-style settings-shared iron-flex passwords-shared">
       .expiration-column {
         align-items: center;
         display: flex;
@@ -68,8 +70,8 @@
     </template>
     <template is="dom-if"
         if="[[prefs.autofill.credit_card_enabled.extensionId]]">
-      <div class="settings-box continuation">
-        <extension-controlled-indicator class="start"
+      <div class="cr-row continuation">
+        <extension-controlled-indicator class="flex"
             id="autofillExtensionIndicator"
             extension-id="[[prefs.autofill.credit_card_enabled.extensionId]]"
             extension-name="[[
@@ -80,13 +82,13 @@
       </div>
     </template>
 
-    <div id="manageLink" class="settings-box first">
-      <!-- This span lays out the URL correctly, relative to the label. -->
-      <span>$i18nRaw{manageCreditCardsLabel}</span>
+    <div id="manageLink" class="cr-row first">
+      <!-- This span lays out the link correctly, relative to the text. -->
+      <div class="cr-padded-text">$i18nRaw{manageCreditCardsLabel}</div>
     </div>
 
-    <div class="settings-box continuation">
-      <h2 class="start">$i18n{creditCards}</h2>
+    <div class="cr-row continuation">
+      <h2 class="flex">$i18n{creditCards}</h2>
       <cr-button id="addCreditCard" class="header-aligned-button"
           on-click="onAddCreditCardTap_"
           hidden$="[[!prefs.autofill.credit_card_enabled.value]]">

chrome/browser/resources/settings/basic_page/basic_page.html

@@ -2,8 +2,10 @@
 
 <link rel="import" href="chrome://resources/cr_elements/cr_button/cr_button.html">
 <link rel="import" href="chrome://resources/cr_elements/hidden_style_css.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/cr_elements/shared_vars_css.html">
 <link rel="import" href="chrome://resources/html/assert.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="../appearance_page/appearance_page.html">
 <link rel="import" href="../privacy_page/privacy_page.html">
 <link rel="import" href="../safety_check_page/safety_check_page.html">
@@ -35,7 +37,7 @@
      includes both the basic and advanced settings. -->
 <dom-module id="settings-basic-page">
   <template>
-    <style include="settings-page-styles cr-hidden-style settings-shared">
+    <style include="cr-shared-style settings-page-styles cr-hidden-style iron-flex settings-shared">
       :host([is-subpage-animating]) {
         /* Prevent an unwanted horizontal scrollbar when transitioning back from
          * a sub-page. */
@@ -62,11 +64,9 @@
       }
 
       #osSettingsBanner {
-        align-items: center;
-        background-color: white;
-        border-radius: 2px;
+        background-color: var(--cr-card-background-color);
+        border-radius: var(--cr-card-border-radius);
         box-shadow: var(--cr-card-shadow);
-        display: flex;
         margin-top: 21px;
       }
 
@@ -99,8 +99,9 @@
         </template>
 <if expr="chromeos">
         <template is="dom-if" if="[[showOSSettingsBanner_]]">
-          <div id="osSettingsBanner" class="settings-box">
-            <div class="start" on-click="onOSSettingsBannerClick_">
+          <div id="osSettingsBanner" class="cr-row">
+            <div class="flex cr-padded-text"
+                on-click="onOSSettingsBannerClick_">
               $i18nRaw{osSettingsBannerText}
             </div>
             <cr-icon-button class="icon-clear"

chrome/browser/resources/settings/chromeos/ambient_mode_page/ambient_mode_page.html

@@ -2,6 +2,7 @@
 
 <link rel="import" href="ambient_mode_browser_proxy.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_radio_button/cr_radio_button.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="../../controls/settings_radio_group.html">
@@ -10,7 +11,7 @@
 
 <dom-module id="settings-ambient-mode-page">
   <template>
-    <style include="settings-shared">
+    <style include="cr-shared-style settings-shared">
       #ambientModeEnable {
         border-bottom: var(--cr-separator-line);
       }
@@ -29,7 +30,7 @@
     </settings-toggle-button>
 
     <template is="dom-if" if="[[prefs.settings.ambient_mode.enabled.value]]">
-      <label id="topicSourceDescription" class="settings-box-text">
+      <label id="topicSourceDescription" class="cr-padded-text">
           $i18n{ambientModeTopicSourceTitle}
       </label>
       <div class="list-frame">

chrome/browser/resources/settings/chromeos/bluetooth_page/bluetooth_subpage.html

@@ -3,8 +3,10 @@
 <link rel="import" href="chrome://resources/cr_components/chromeos/bluetooth_dialog.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_scrollable_behavior.html">
 <link rel="import" href="chrome://resources/cr_elements/cr_toggle/cr_toggle.html">
+<link rel="import" href="chrome://resources/cr_elements/shared_style_css.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/list_property_update_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/iron-flex-layout-classes.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-list/iron-list.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner-lite.html">
 <link rel="import" href="../../i18n_setup.html">
@@ -16,7 +18,7 @@
 
 <dom-module id="settings-bluetooth-subpage">
   <template>
-    <style include="settings-shared iron-flex">
+    <style include="cr-shared settings-shared iron-flex">
       .container {
         @apply --settings-list-frame-padding;
         display: flex;
@@ -25,12 +27,9 @@
         overflow-y: auto;
       }
 
-      .header {
-        margin-top: 10px;
-      }
-
       paper-spinner-lite {
         height: var(--cr-icon-size);
+        margin-block-start: 18px; /* Align with h2. */
         width: var(--cr-icon-size);
       }
 
@@ -43,8 +42,8 @@
       }
     </style>
 
-    <div class="settings-box first" actionable on-click="onEnableTap_">
-      <div id="onOff" class="start settings-box-text"
+    <div class="cr-row first" actionable on-click="onEnableTap_">
+      <div id="onOff" class="flex cr-padded-text"
           on$="[[bluetoothToggleState]]" aria-hidden="true">
         [[getOnOffString_(bluetoothToggleState,
           '$i18nPolymer{deviceOn}', '$i18nPolymer{deviceOff}')]]
@@ -58,12 +57,10 @@
     </div>
 
     <!-- Paired device list -->
-    <div class="settings-box first header" hidden="[[!bluetoothToggleState]]">
-      <div class="start settings-box-text">
-        $i18n{bluetoothDeviceListPaired}
-      </div>
+    <div class="cr-row first" hidden="[[!bluetoothToggleState]]">
+      <h2 class="flex">$i18n{bluetoothDeviceListPaired}</h2>
     </div>
-    <div id="noPairedDevices" class="list-frame settings-box-text"
+    <div id="noPairedDevices" class="list-frame cr-padded-text"
         hidden="[[!showNoDevices_(bluetoothToggleState, pairedDeviceList_,
             pairedDeviceList_.splices)]]">
       $i18n{bluetoothNoDevices}
@@ -85,14 +82,12 @@
     </div>
 
     <!-- Unpaired device list -->
-    <div class="settings-box first header" hidden="[[!bluetoothToggleState]]">
-      <div class="start settings-box-text">
-        $i18n{bluetoothDeviceListUnpaired}
-      </div>
+    <div class="cr-row first" hidden="[[!bluetoothToggleState]]">
+      <h2 class="flex">$i18n{bluetoothDeviceListUnpaired}</h2>
       <paper-spinner-lite active="[[showSpinner_]]">
       </paper-spinner-lite>
     </div>
-    <div id="noUnpairedDevices" class="list-frame settings-box-text"
+    <div id="noUnpairedDevices" class="list-frame cr-padded-text"
         hidden="[[!showNoDevices_(bluetoothToggleState, unpairedDeviceList_,
             unpairedDeviceList_.splices)]]">
       $i18n{bluetoothNoDevicesFound}

chrome/browser/resources/settings/chromeos/date_time_page/date_time_page.html

@@ -18,15 +18,9 @@
 <dom-module id="settings-date-time-page">
   <template>
     <style include="settings-shared">
-      #timeZoneAutoDetect {
-        padding: 0;
-        width: 100%;
-      }
-      #timeZoneButton {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        width: 100%;
+      #timezoneSelectorContainer {
+        padding-block-end: var(--cr-section-vertical-padding);
+        padding-inline-start: var(--cr-section-indent-padding);
       }
     </style>
     <settings-animated-pages id="pages" section="dateTime"
@@ -35,13 +29,10 @@
         <template is="dom-if"
             if="[[!prefs.cros.flags.fine_grained_time_zone_detection_enabled.value]]"
             restamp>
-          <div class="settings-box first">
-            <settings-toggle-button id="timeZoneAutoDetect"
-                class="hr"
-                label="$i18n{timeZoneGeolocation}"
-                pref="{{prefs.generated.resolve_timezone_by_geolocation_on_off}}">
-            </settings-toggle-button>
-          </div>
+          <settings-toggle-button id="timeZoneAutoDetect"
+              label="$i18n{timeZoneGeolocation}"
+              pref="{{prefs.generated.resolve_timezone_by_geolocation_on_off}}">
+          </settings-toggle-button>
         </template>
         <template is="dom-if"
             if="[[prefs.cros.flags.fine_grained_time_zone_detection_enabled.value]]"
@@ -56,7 +47,7 @@
             </cr-policy-pref-indicator>
           </cr-link-row>
         </template>
-        <div class="settings-box continuation embedded"
+        <div id="timezoneSelectorContainer"
             hidden="[[prefs.cros.flags.fine_grained_time_zone_detection_enabled.value]]">
           <timezone-selector prefs="{{prefs}}"
               active-time-zone-display-name="{{activeTimeZoneDisplayName}}">