WebUI: Add common class to use on all the labels/text in settings row, update...

WebUI: Add common class to use on all the labels/text in settings row, update 'People' settings rows to use it

Bug: 686905
Change-Id: I97e750e55e73b54451f87e34f6b0570a6b89dd71
Reviewed-on: https://chromium-review.googlesource.com/c/1359331Reviewed-by: Scott Chen <scottchen@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#615799}

chrome/browser/resources/settings/people_page/people_page.html

@@ -151,7 +151,7 @@
               </div>
               <div class="middle two-line no-min-width" on-click="onProfileTap_"
                   actionable>
-                <div class="flex text-elide">
+                <div class="flex text-elide settings-box-text">
                   <span id="profile-name">[[profileName_]]</span>
                   <div class="secondary" hidden="[[!syncStatus.signedIn]]">
                     [[syncStatus.signedInUsername]]
@@ -199,7 +199,7 @@
 </if>
             <div class="settings-box two-line" id="sync-overview"
                 hidden="[[!syncStatus.signinAllowed]]">
-              <div class="start">
+              <div class="start settings-box-text">
                 $i18n{syncOverview}
                 <a target="_blank" href="$i18n{syncLearnMoreUrl}">
                   $i18n{learnMore}
@@ -217,7 +217,7 @@
             <div class="icon-container">
               <iron-icon icon="cr20:domain"></iron-icon>
             </div>
-            <div class="middle"
+            <div class="middle settings-box-text"
                 inner-h-t-m-l="[[getDomainHtml_(syncStatus.domain)]]">
             </div>
           </div>
@@ -235,7 +235,7 @@
               <iron-icon id="sync-icon" icon$="[[getSyncIcon_(syncStatus)]]">
               </iron-icon>
             </div>
-            <div class="middle">
+            <div class="middle settings-box-text">
               $i18n{sync}
               <div class="secondary" id="syncSecondary">
                 [[syncStatus.statusText]]
@@ -265,7 +265,9 @@
 
           <div class="settings-box" id="edit-profile" on-click="onProfileTap_"
               actionable>
-            <div class="start">$i18n{profileNameAndPicture}</div>
+            <div class="start settings-box-text">
+              $i18n{profileNameAndPicture}
+            </div>
             <paper-icon-button-light class="subpage-arrow">
               <button aria-label="$i18n{editPerson}"></button>
             </paper-icon-button-light>
@@ -276,7 +278,7 @@
 <if expr="chromeos">
         <div id="lock-screen-subpage-trigger" class="settings-box two-line"
             actionable on-click="onConfigureLockTap_">
-          <div class="start">
+          <div class="start settings-box-text">
             [[selectLockScreenTitleString(hasPinLogin)]]
             <div class="secondary" id="lockScreenSecondary">
               [[getPasswordState_(hasPin,
@@ -293,7 +295,9 @@
         <template is="dom-if" if="[[isAccountManagerEnabled_]]">
           <div id="account-manager-subpage-trigger" class="settings-box"
               actionable on-click="onAccountManagerTap_">
-            <div class="start">$i18n{accountManagerSubMenuLabel}</div>
+            <div class="start settings-box-text">
+              $i18n{accountManagerSubMenuLabel}
+            </div>
             <paper-icon-button-light class="subpage-arrow">
               <button aria-label="$i18n{accountManagerSubMenuLabel}"></button>
             </paper-icon-button-light>
@@ -307,7 +311,9 @@
 
 <if expr="not chromeos">
         <div class="settings-box" on-click="onImportDataTap_" actionable>
-          <div class="start">$i18n{importTitle}</div>
+          <div class="start settings-box-text">
+            $i18n{importTitle}
+          </div>
           <paper-icon-button-light class="subpage-arrow">
             <button id="importDataDialogTrigger"
                 aria-label="$i18n{importTitle}">

chrome/browser/resources/settings/people_page/sync_account_control.html

@@ -115,11 +115,6 @@
         display: block;
       }
 
-      :host([showing-promo]) #promo-header {
-        padding-bottom: 10px;
-        padding-top: 10px;
-      }
-
       :host([showing-promo]) #promo-title {
         @apply --promo-title;
       }
@@ -135,7 +130,7 @@
     <div id="banner" hidden="[[syncStatus.signedIn]]"></div>
     <div class="settings-box first two-line" id="promo-header"
         hidden="[[syncStatus.signedIn]]">
-      <div class="start">
+      <div class="start settings-box-text">
         <div id="promo-title">
           [[getLabel_(promoLabelWithAccount,
               promoLabelWithNoAccount, shownAccount_)]]
@@ -168,7 +163,7 @@
           </div>
         </div>
         <div class="middle two-line no-min-width">
-          <div class="flex text-elide" id="user-info">
+          <div class="flex text-elide settings-box-text" id="user-info">
             <span>
               [[getAvatarRowTitle_(shownAccount_.fullName,
                   '$i18nPolymer{syncNotWorking}', '$i18nPolymer{syncPaused}',

chrome/browser/resources/settings/people_page/sync_page.html

@@ -109,14 +109,16 @@
 
     <div class="settings-box first" hidden="[[!syncStatus.managed]]">
       <iron-icon id="disabled-by-admin-icon" icon="cr20:domain"></iron-icon>
-      <div class="middle">$i18n{syncDisabledByAdministrator}</div>
+      <div class="middle settings-box-text">
+        $i18n{syncDisabledByAdministrator}
+      </div>
     </div>
 
     <template is="dom-if" if="[[shouldShowExistingPassphraseBelowAccount_(
       unifiedConsentEnabled, syncPrefs.passphraseRequired)]]">
       <div id="existingPassphrase" class="list-frame">
         <div id="existingPassphraseTitle" class="list-item">
-            <div class="start">
+            <div class="start settings-box-text">
               <div>$i18n{existingPassphraseTitle}</div>
               <div class="secondary">
                 [[enterPassphrasePrompt_(syncPrefs.passphraseTypeIsCustom)]]
@@ -140,7 +142,7 @@
           </cr-input>
         </div>
         <div id="passphraseRecoverHint" class="list-item">
-          <span>$i18nRaw{passphraseRecover}</span>
+          <div class="settings-box-text">$i18nRaw{passphraseRecover}</div>
         </div>
       </div>
     </template>
@@ -150,11 +152,11 @@
     </div>
 
     <div id="sync-section" hidden="[[syncSectionDisabled_]]">
-      <div id="[[pages_.SPINNER]]" class="settings-box first"
+      <div id="[[pages_.SPINNER]]" class="settings-box first settings-box-text"
           hidden$="[[!isStatus_(pages_.SPINNER, pageStatus_)]]">
         $i18n{syncLoading}
       </div>
-      <div id="[[pages_.TIMEOUT]]" class="settings-box first"
+      <div id="[[pages_.TIMEOUT]]" class="settings-box first settings-box-text"
           hidden$="[[!isStatus_(pages_.TIMEOUT, pageStatus_)]]">
         $i18n{syncTimeout}
       </div>
@@ -166,12 +168,12 @@
             unifiedConsentEnabled, syncPrefs.passphraseRequired)]]">
           <div id="existingPassphrase" class="list-frame">
             <div class="list-item">
-              <span>
+              <div class="settings-box-text">
                 [[enterPassphrasePrompt_(syncPrefs.passphraseTypeIsCustom)]]
                 <a href="$i18nRaw{syncErrorHelpUrl}" target="_blank">
                   $i18n{learnMore}
                 </a>
-              </span>
+              </div>
             </div>
             <div id="existingPassphraseContainer" class="list-item">
               <cr-input id="existingPassphraseInput" type="password"
@@ -209,7 +211,7 @@
               [[getListItemClass_(unifiedConsentEnabled)]]" tabindex="-1"
               target="_blank" href="$i18n{activityControlsUrl}"
               on-click="onActivityControlsTap_">
-            <div class="start">
+            <div class="start settings-box-text">
               $i18n{personalizeGoogleServicesTitle}
             </div>
             <paper-icon-button-light actionable class="icon-external">
@@ -220,7 +222,7 @@
           <a class$="inherit-color no-outline
               [[getListItemClass_(unifiedConsentEnabled)]]" tabindex="-1"
               target="_blank" href="$i18n{syncDashboardUrl}">
-            <div class="start">
+            <div class="start settings-box-text">
               $i18n{manageSyncedDataTitle}
             </div>
             <paper-icon-button-light actionable class="icon-external">
@@ -230,7 +232,7 @@
 
           <div id="encryptionDescription"
               hidden="[[syncPrefs.passphraseRequired]]"
-              class$="single-column
+              class$="single-column settings-box-text
                   [[getPassphraseHintLines_(syncPrefs.encryptAllData)]]
                   [[getListItemClass_(unifiedConsentEnabled)]]">
             $i18n{encryptionOptionsTitle}

chrome/browser/resources/settings/settings_shared_css.html

@@ -214,6 +214,12 @@
         min-height: var(--settings-row-three-line-min-height);
       }
 
+      .settings-box-text {
+        box-sizing: border-box;
+        padding-bottom: var(--cr-section-vertical-padding);
+        padding-top: var(--cr-section-vertical-padding);
+      }
+
       /* We use an explicit tag to remove the top border, rather than a
        * :first-of-type modifier. This is a conscious choice, please consult
        * with dbeam@ or dschuyler@ prior to changing it. */