Settings WebUI: Add padding to some rows, convert some to cr-link-row

https://imgur.com/a/qnVs4lG

Bug: 686905, 934202
Change-Id: If51daf61ec4ddaa780aff7a1f11af6746330d198
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1690564Reviewed-by: Esmael El-Moslimany <aee@chromium.org>
Commit-Queue: John Lee <johntlee@chromium.org>
Cr-Commit-Position: refs/heads/master@{#675715}

chrome/browser/resources/settings/about_page/about_page.html

@@ -179,22 +179,20 @@
             </span>
           </div>
 <if expr="chromeos">
-          <div id="aboutTPMFirmwareUpdate" class="settings-box two-line"
+          <cr-link-row
+              id="aboutTPMFirmwareUpdate"
+              class="hr"
               hidden$="[[!showTPMFirmwareUpdateLineItem_]]"
-              on-click="onTPMFirmwareUpdateTap_" actionable>
-            <div class="start">
-              <div>$i18n{aboutTPMFirmwareUpdateTitle}</div>
-              <div class="secondary">
-                $i18n{aboutTPMFirmwareUpdateDescription}
-                <a href="$i18n{aboutTPMFirmwareUpdateLearnMoreURL}"
-                    target="_blank" on-click="onLearnMoreTap_">
-                  $i18n{learnMore}
-                </a>
-              </div>
+              label="$i18n{aboutTPMFirmwareUpdateTitle}"
+              on-click="onTPMFirmwareUpdateTap_">
+            <div slot="sub-label">
+              $i18n{aboutTPMFirmwareUpdateDescription}
+              <a href="$i18n{aboutTPMFirmwareUpdateLearnMoreURL}"
+                  target="_blank" on-click="onLearnMoreTap_">
+                $i18n{learnMore}
+              </a>
             </div>
-            <cr-icon-button class="subpage-arrow"
-                aria-labelledby="aboutTPMFirmwareUpdate"></cr-icon-button>
-          </div>
+          </cr-link-row>
 </if>
 <if expr="_google_chrome and is_macosx">
           <template is="dom-if" if="[[!promoteUpdaterStatus_.hidden]]">

chrome/browser/resources/settings/appearance_page/appearance_page.html

@@ -74,7 +74,7 @@
 <if expr="is_linux and not chromeos">
           <div class="settings-row continuation"
               hidden="[[!showThemesSecondary_(
-              prefs.extensions.theme.id.value, useSystemTheme_)]]"
+                  prefs.extensions.theme.id.value, useSystemTheme_)]]"
               id="themesSecondaryActions">
             <div class="separator"></div>
             <template is="dom-if" if="[[showUseClassic_(
@@ -143,7 +143,7 @@
         </settings-toggle-button>
 </if>
         <div class="settings-box">
-          <div class="start">$i18n{fontSize}</div>
+          <div class="start settings-box-text">$i18n{fontSize}</div>
           <settings-dropdown-menu id="defaultFontSize" label="$i18n{fontSize}"
               pref="{{prefs.webkit.webprefs.default_font_size}}"
               menu-options="[[fontSizeOptions_]]">
@@ -153,7 +153,9 @@
             label="$i18n{customizeFonts}" on-click="onCustomizeFontsTap_">
         </cr-link-row>
         <div class="settings-box" hidden="[[!pageVisibility.pageZoom]]">
-          <div id="pageZoom" class="start">$i18n{pageZoom}</div>
+          <div id="pageZoom" class="start settings-box-text">
+            $i18n{pageZoom}
+          </div>
           <select id="zoomLevel" class="md-select" aria-labelledby="pageZoom"
               on-change="onZoomLevelChange_">
             <template is="dom-repeat" items="[[pageZoomLevels_]]">

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

@@ -138,22 +138,20 @@
               </cr-button>
             </span>
           </div>
-          <div id="aboutTPMFirmwareUpdate" class="settings-box two-line"
+          <cr-link-row
+              id="aboutTPMFirmwareUpdate"
+              class="hr"
               hidden$="[[!showTPMFirmwareUpdateLineItem_]]"
-              on-click="onTPMFirmwareUpdateClick_" actionable>
-            <div class="start">
-              <div>$i18n{aboutTPMFirmwareUpdateTitle}</div>
-              <div class="secondary">
-                $i18n{aboutTPMFirmwareUpdateDescription}
-                <a href="$i18n{aboutTPMFirmwareUpdateLearnMoreURL}"
-                    target="_blank" on-click="onLearnMoreClick_">
-                  $i18n{learnMore}
-                </a>
-              </div>
+              label="$i18n{aboutTPMFirmwareUpdateTitle}"
+              on-click="onTPMFirmwareUpdateClick_">
+            <div slot="sub-label">
+              $i18n{aboutTPMFirmwareUpdateDescription}
+              <a href="$i18n{aboutTPMFirmwareUpdateLearnMoreURL}"
+                  target="_blank" on-click="onLearnMoreClick_">
+                $i18n{learnMore}
+              </a>
             </div>
-            <cr-icon-button class="subpage-arrow"
-                aria-labelledby="aboutTPMFirmwareUpdate"></cr-icon-button>
-          </div>
+          </cr-link-row>
           <cr-link-row class="hr" id="help" on-click="onHelpClick_"
               label="$i18n{aboutGetHelpUsingChromeOs}" external></cr-link-row>
 <if expr="_google_chrome">

chrome/browser/resources/settings/downloads_page/downloads_page.html

@@ -25,7 +25,7 @@
       focus-config="[[focusConfig_]]">
     <div route-path="default">
       <div class="settings-box first two-line">
-        <div class="start">
+        <div class="start settings-box-text">
           <div>$i18n{downloadLocation}</div>
           <div class="secondary" id="defaultDownloadPath">
 <if expr="not chromeos">

chrome/browser/resources/settings/search_page/search_page.html

@@ -46,7 +46,7 @@
         <!-- Omnibox search engine -->
         <div class="settings-box first block">
           <div id="search-wrapper">
-            <div id="searchExplanation" class="start">
+            <div id="searchExplanation" class="start settings-box-text">
               $i18nRaw{searchExplanation}
             </div>
             <template is="dom-if" if="[[isDefaultSearchControlledByPolicy_(
@@ -86,18 +86,14 @@
 <if expr="chromeos">
         <!-- Google Assistant -->
         <template is="dom-if" if="[[isAssistantAllowed_]]">
-          <div id="assistantSubpageTrigger" class="settings-box two-line"
-            on-click="onGoogleAssistantTap_" actionable>
-            <div class="start">
-              $i18n{searchGoogleAssistant}
-              <div class="secondary">
-                [[getAssistantEnabledDisabledLabel_(
-                    prefs.settings.voice_interaction.enabled.value)]]
-              </div>
-            </div>
-            <cr-icon-button class="subpage-arrow"
-                aria-label="$i18n{searchGoogleAssistant}"></cr-icon-button>
-          </div>
+          <cr-link-row
+              class="hr"
+              id="assistantSubpageTrigger"
+              label="$i18n{searchGoogleAssistant}"
+              sub-label="[[getAssistantEnabledDisabledLabel_(
+                  prefs.settings.voice_interaction.enabled.value)]]"
+              on-click="onGoogleAssistantTap_">
+          </cr-link-row>
         </template>
 </if>
       </div>