Settings: shared css: add .settings-box.single-column

This should make it a little bit simpler for the somewhat common case
of a single column settings-box (20 / 60 existing two-line instances,
with more to come in internet settings).

BUG=589630
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2169193003
Cr-Commit-Position: refs/heads/master@{#407322}

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

@@ -15,18 +15,14 @@
         -webkit-user-select: text;
       }
     </style>
-    <div class="settings-box two-line">
-      <div class="start">
-        <div>$i18n{aboutPlatformLabel}</div>
-        <div class="secondary" id="osVersion">[[versionInfo_.osVersion]]</div>
-      </div>
+    <div class="settings-box two-line single-column">
+      <div>$i18n{aboutPlatformLabel}</div>
+      <div class="secondary" id="osVersion">[[versionInfo_.osVersion]]</div>
     </div>
-    <div class="settings-box two-line"
+    <div class="settings-box two-line single-column"
         hidden$="[[!shouldShowVersion_(versionInfo_.osFirmware)]]">
-      <div class="start">
-        <div>$i18n{aboutFirmwareLabel}</div>
-        <div class="secondary" id="osFirmware">[[versionInfo_.osFirmware]]</div>
-      </div>
+      <div>$i18n{aboutFirmwareLabel}</div>
+      <div class="secondary" id="osFirmware">[[versionInfo_.osFirmware]]</div>
     </div>
     <div class="settings-box two-line">
       <div class="start">
@@ -44,42 +40,30 @@
         <settings-channel-switcher-dialog></settings-channel-switcher-dialog>
       </template>
     </div>
-    <div class="settings-box two-line"
+    <div class="settings-box two-line single-column"
         hidden$="[[!shouldShowVersion_(versionInfo_.arcVersion)]]">
-      <div class="start">
-        <div>$i18n{aboutArcVersionLabel}</div>
-        <div class="secondary" id="arcVersion">[[versionInfo_.arcVersion]]</div>
-      </div>
+      <div>$i18n{aboutArcVersionLabel}</div>
+      <div class="secondary" id="arcVersion">[[versionInfo_.arcVersion]]</div>
     </div>
-    <div class="settings-box two-line">
-      <div class="start">
-        <div>Blink</div><!-- No need to localize. -->
-        <div class="secondary">$i18n{aboutBlinkVersion}</div>
-      </div>
+    <div class="settings-box two-line single-column">
+      <div>Blink</div><!-- No need to localize. -->
+      <div class="secondary">$i18n{aboutBlinkVersion}</div>
     </div>
-    <div class="settings-box two-line">
-      <div class="start">
-        <div>V8</div>
-        <div class="secondary">$i18n{aboutJsEngineVersion}</div>
-      </div>
+    <div class="settings-box two-line single-column">
+      <div>V8</div>
+      <div class="secondary">$i18n{aboutJsEngineVersion}</div>
     </div>
-    <div class="settings-box two-line">
-      <div class="start">
-        <div>$i18n{aboutUserAgentLabel}</div>
-        <div class="secondary">$i18n{aboutUserAgent}</div>
-      </div>
+    <div class="settings-box two-line single-column">
+      <div>$i18n{aboutUserAgentLabel}</div>
+      <div class="secondary">$i18n{aboutUserAgent}</div>
     </div>
-    <div class="settings-box two-line">
-      <div class="start">
-        <div>$i18n{aboutCommandLineLabel}</div>
-        <div class="secondary">$i18n{aboutCommandLine}</div>
-      </div>
+    <div class="settings-box two-line single-column">
+      <div>$i18n{aboutCommandLineLabel}</div>
+      <div class="secondary">$i18n{aboutCommandLine}</div>
     </div>
-    <div class="settings-box two-line">
-      <div class="start">
-        <div>$i18n{aboutBuildDateLabel}</div>
-        <div class="secondary">$i18n{aboutBuildDate}</div>
-      </div>
+    <div class="settings-box two-line single-column">
+      <div>$i18n{aboutBuildDateLabel}</div>
+      <div class="secondary">$i18n{aboutBuildDate}</div>
     </div>
   </template>
   <script src="detailed_build_info.js"></script>

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

@@ -97,12 +97,10 @@
               menu-options="[[fontSizeOptions_]]" no-label-float>
           </settings-dropdown-menu>
         </div>
-        <div class="settings-box two-line" on-tap="onCustomizeFontsTap_"
-            actionable>
-          <div class="start">
-            <div>$i18n{customizeFonts}</div>
+        <div class="settings-box two-line single-column"
+            on-tap="onCustomizeFontsTap_" actionable>
+          <div>$i18n{customizeFonts}</div>
           <div class="secondary">$i18n{chooseFontsAndEncoding}</div>
-          </div>
         </div>
         <div class="settings-box">
           <div class="start">$i18n{pageZoom}</div>

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

@@ -155,7 +155,7 @@
         </div>
 
 <if expr="chromeos">
-        <div class="settings-box">
+        <div class="settings-box single-column">
           <settings-checkbox pref="{{prefs.settings.enable_screen_lock}}"
               label="$i18n{enableScreenlock}">
           </settings-checkbox>

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

@@ -123,23 +123,15 @@
           </paper-checkbox>
         </div>
 
-        <div class="settings-box two-line" on-tap="onManageSyncedDataTap_"
-            actionable>
-          <div class="start">
-            $i18n{manageSyncedDataTitle}
-            <div class="secondary">
-              $i18n{manageSyncedDataDescription}
-            </div>
-          </div>
+        <div class="settings-box two-line single-column" actionable
+            on-tap="onManageSyncedDataTap_">
+          <div>$i18n{manageSyncedDataTitle}</div>
+          <div class="secondary">$i18n{manageSyncedDataDescription}</div>
         </div>
 
-        <div class="settings-box two-line">
-          <div class="start">
-            $i18n{encryptionOptionsTitle}
-            <div class="secondary">
-              $i18n{syncDataEncryptedText}
-            </div>
-          </div>
+        <div class="settings-box two-line single-column">
+          <div>$i18n{encryptionOptionsTitle}</div>
+          <div class="secondary">$i18n{syncDataEncryptedText}</div>
         </div>
 
         <div id="encryptionRadioGroupContainer" class="list-frame"

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

@@ -84,20 +84,16 @@
 </if>
         </div>
 <if expr="use_nss_certs or is_win or is_macosx">
-        <div id="manageCertificates" class="settings-box two-line" actionable
-            on-tap="onManageCertificatesTap_">
-          <div class="start">
-            <div>$i18n{manageCertificates}</div>
-            <div class="secondary">$i18n{manageCertificatesDescription}</div>
-          </div>
+        <div id="manageCertificates" class="settings-box two-line single-column"
+            actionable on-tap="onManageCertificatesTap_">
+          <div>$i18n{manageCertificates}</div>
+          <div class="secondary">$i18n{manageCertificatesDescription}</div>
         </div>
 </if>
-        <div class="settings-box two-line" on-tap="onSiteSettingsTap_"
-            actionable>
-          <div class="start">
-            <div>$i18n{siteSettings}</div>
-            <div class="secondary">$i18n{siteSettingsDescription}</div>
-          </div>
+        <div class="settings-box two-line single-column" actionable
+            on-tap="onSiteSettingsTap_">
+          <div>$i18n{siteSettings}</div>
+          <div class="secondary">$i18n{siteSettingsDescription}</div>
         </div>
         <div class="settings-box">
           <paper-button on-tap="onClearBrowsingDataTap_" class="primary-button">

chrome/browser/resources/settings/reset_page/reset_page.html

@@ -10,20 +10,16 @@
 <dom-module id="settings-reset-page">
   <template>
     <style include="settings-shared"></style>
-    <div class="settings-box first two-line" id="resetProfile"
+    <div class="settings-box first two-line single-column" id="resetProfile"
         on-tap="onShowResetProfileDialog_" actionable>
-      <div>
-        <div>$i18n{resetPageTitle}</div>
-        <div class="secondary">$i18n{resetPageDescription}</div>
-      </div>
+      <div>$i18n{resetPageTitle}</div>
+      <div class="secondary">$i18n{resetPageDescription}</div>
     </div>
 <if expr="chromeos">
-    <div class="settings-box two-line" id="powerwash" actionable
+    <div class="settings-box two-line single-column" id="powerwash" actionable
         on-tap="onShowPowerwashDialog_" hidden="[[!allowPowerwash_]]">
-      <div>
-        <div>$i18n{powerwashTitle}</div>
-        <div class="secondary">$i18n{powerwashDescription}</div>
-      </div>
+      <div>$i18n{powerwashTitle}</div>
+      <div class="secondary">$i18n{powerwashDescription}</div>
     </div>
 </if>
   </template>

chrome/browser/resources/settings/settings_shared_css.html

@@ -280,6 +280,16 @@
         min-height: 56px;
       }
 
+      /*
+       * A settings box with a single start-aligned column, generally but not
+       * necessarily used in combination with two-line.
+       */
+      .settings-box.single-column {
+        align-items: flex-start;
+        flex-direction: column;
+        justify-content: center;
+      }
+
       /* The lower line of text in a .settings-box.two-line. */
       .settings-box .secondary {
         @apply(--settings-secondary);