MD Settings: simplify layout of system page

chrome/browser/resources/settings/system_page/system_page.html

Index: chrome/browser/resources/settings/system_page/system_page.html
diff --git a/chrome/browser/resources/settings/system_page/system_page.html b/chrome/browser/resources/settings/system_page/system_page.html
index bbcbd7dab66239eb54ae163ab1994142790a7d9e..9a264d683da175dc11a55e75289c7f68f56b1361 100644
--- a/chrome/browser/resources/settings/system_page/system_page.html
+++ b/chrome/browser/resources/settings/system_page/system_page.html
@@ -1,4 +1,5 @@
 <link rel="import" href="chrome://resources/html/polymer.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/paper-button/paper-button.html">
 <link rel="import" href="/controls/controlled_button.html">
 <link rel="import" href="/controls/extension_controlled_indicator.html">
@@ -10,36 +11,15 @@
 
 <dom-module id="settings-system-page">
   <template>
-    <style include="settings-shared">
-      /* TODO(dbeam): is it worth generalizing this style? Does something like
-       * this already exist (buttons after a checkbox in the same row)? */
-      #hardware-acceleration {
-        align-items: center;
-        display: flex;
-      }
-
-      #hardware-acceleration settings-checkbox {
-        flex: 1;
-      }
-
-      .proxy-wrapper {
-        align-items: center;
-        display: flex;
-        min-height: inherit;
-      }
-
-      extension-controlled-indicator {
-        width: 100%;
-      }
-    </style>
+    <style include="settings-shared"></style>
     <div class="settings-box block first">
 <if expr="not is_macosx">
       <settings-checkbox label="$i18n{backgroundAppsLabel}"
           pref="{{prefs.background_mode.enabled}}">
       </settings-checkbox>
 </if>
-      <div id="hardware-acceleration">
-        <settings-checkbox label="$i18n{hardwareAccelerationLabel}"
+      <div id="hardware-acceleration" class="layout horizontal center">
+        <settings-checkbox class="flex" label="$i18n{hardwareAccelerationLabel}"
             pref="{{prefs.hardware_acceleration_mode.enabled}}">
         </settings-checkbox>
         <template is="dom-if" if="[[shouldShowRestart_(
@@ -48,24 +28,22 @@
         </template>
       </div>
     </div>
-    <div class="settings-box block">
-      <div class="proxy-wrapper">
-        <controlled-button class="primary-button" pref="[[prefs.proxy]]"
-            on-tap="onChangeProxySettingsTap_">
-          $i18n{changeProxySettings}
-        </controlled-button>
-      </div>
-      <template is="dom-if" if="[[prefs.proxy.extensionId]]">
-        <div class="proxy-wrapper">
-          <extension-controlled-indicator
-              extension-id="[[prefs.proxy.extensionId]]"
-              extension-name="[[prefs.proxy.controlledByName]]"
-              extension-can-be-disabled="[[prefs.proxy.extensionCanBeDisabled]]"
-              on-extension-disable="onExtensionDisable_">
-          </extension-controlled-indicator>
-        </div>
-      </template>
+    <div class="settings-box">
+      <controlled-button class="primary-button" pref="[[prefs.proxy]]"
+          on-tap="onChangeProxySettingsTap_">
+        $i18n{changeProxySettings}
+      </controlled-button>
     </div>
+    <template is="dom-if" if="[[prefs.proxy.extensionId]]">
+      <div class="settings-box continuation">
+        <extension-controlled-indicator class="start"
+            extension-id="[[prefs.proxy.extensionId]]"
+            extension-name="[[prefs.proxy.controlledByName]]"
+            extension-can-be-disabled="[[prefs.proxy.extensionCanBeDisabled]]"
+            on-extension-disable="onExtensionDisable_">
+        </extension-controlled-indicator>
+      </div>
+    </template>
   </template>
   <script src="/system_page/system_page.js"></script>
 </dom-module>