MD Settings: Bluetooth polish

chrome/browser/resources/settings/bluetooth_page/bluetooth_device_dialog.html

 <link rel="import" href="chrome://resources/cr_elements/cr_dialog/cr_dialog.html">
 <link rel="import" href="chrome://resources/html/cr.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-flex-layout/classes/iron-flex-layout.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-selector/iron-selector.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-spinner/paper-spinner.html">
 <link rel="import" href="/bluetooth_page/bluetooth_device_list_item.html">
@@ skipping 22 matching lines @@
       paper-spinner {
         height: 20px;
         margin: 0 10px;
         width: 20px;
       }
 
       .dialog-message {
         margin-bottom: 10px;
       }
 
+      div.contents {

[Dan Beam, 2016/08/12 00:43:28]

nit: unless it's necessary, I'd drop the "div" part of the selector

+        max-height: 250px;
+        min-height: 250px;
+      }
+
       /* .display indicates a displayed pin code or passkey. */
       span.display {
         border: 1px solid #ccc;
         border-radius: 4px;
         box-shadow: 0 0 0 1px #222;
         color: #222;
         font-size: 16px;
         height: 38px;
         line-height: 38px;
         margin: 0 5px;
@@ skipping 15 matching lines @@
         color: #666;
       }
 
       /* .confirm indicates a confirmation passkey. */
       span.confirm {
         color: #999;
         font-size: 20px;
         font-weight: 600;  /* semibold */
         margin: 0 20px;
       }
-    </style>
+      </style>
     <dialog is="cr-dialog" id="dialog" on-cancel="onDialogCanceled_">
       <div class="title">[[getTitle_(dialogId)]]</div>
       <div class="body">
-        <template is="dom-if" if="[[isDialogType_(dialogId, 'addDevice')]]">
-          <div id="dialogDeviceList" class="layout vertical"
-              on-device-event="onDeviceEvent_">
-            <span class="no-devices" hidden$="[[haveDevices_(deviceList)]]">
-              $i18n{bluetoothNoDevices}
-            </span>
-            <iron-selector class="flex">
-              <template is="dom-repeat" items="[[deviceList]]"
-                  filter="deviceNotPaired_" observe="paired">
-                <bluetooth-device-list-item device="[[item]]">
-                </bluetooth-device-list-item>
-              </template>
-            </iron-selector>
-          </div>
-        </template>
-        <template is="dom-if" if="[[isDialogType_(dialogId, 'pairDevice')]]">
-          <div id="pairing" class="settings-box first layout vertical center
-              center-justified">
-            <div class="dialog-message">
-              [[getMessage_(pairingDevice, pairingEvent)]]
+        <div class="contents layout vertical center center-justified">
+          <template is="dom-if" if="[[isDialogType_(dialogId, 'addDevice')]]">
+            <div id="dialogDeviceList"
+                class="layout vertical flex start self-stretch"
+                on-device-event="onDeviceEvent_">
+              <span class="no-devices" hidden$="[[haveDevices_(deviceList)]]">
+                $i18n{bluetoothNoDevices}
+              </span>
+              <iron-selector class="flex">
+                <template is="dom-repeat" items="[[deviceList]]"
+                    filter="deviceNotPaired_" observe="paired">
+                  <bluetooth-device-list-item device="[[item]]">
+                  </bluetooth-device-list-item>
+                </template>
+              </iron-selector>
             </div>
-            <div hidden$="[[!showEnterPincode_(pairingEvent)]]">
-              <paper-input id="pincode" minlength="1" maxlength="16"
-                  type="text" auto-validate value="{{pinOrPass}}">
-              </paper-input>
+          </template>
+          <template is="dom-if" if="[[isDialogType_(dialogId, 'pairDevice')]]">
+            <div id="pairing" class="settings-box first layout vertical center
+                center-justified">
+              <div class="dialog-message">
+                [[getMessage_(pairingDevice, pairingEvent)]]
+              </div>
+              <div hidden$="[[!showEnterPincode_(pairingEvent)]]">
+                <paper-input id="pincode" minlength="1" maxlength="16"
+                    type="text" auto-validate value="{{pinOrPass}}">
+                </paper-input>
+              </div>
+              <div hidden$="[[!showEnterPasskey_(pairingEvent)]]">
+                <paper-input id="passkey" minlength="6" maxlength="6"
+                    type="text" auto-validate value="{{pinOrPass}}">
+                </paper-input>
+              </div>
+              <div id="pinDiv" class="layout horizontal center center-justified"
+                  hidden="[[!showDisplayPassOrPin_(pairingEvent)]]">
+                <template is="dom-repeat" items="[[digits]]">
+                  <span class$="[[getPinClass_(pairingEvent, index)]]">
+                    [[getPinDigit_(pairingEvent, index)]]
+                  </span>
+                </template>
+                <span class$="[[getPinClass_(pairingEvent, -1)]]"
+                    hidden="[[showAcceptReject_(pairingEvent)]]">
+                  $i18n{bluetoothEnterKey}
+                </span>
+              </div>
             </div>
-            <div hidden$="[[!showEnterPasskey_(pairingEvent)]]">
-              <paper-input id="passkey" minlength="6" maxlength="6" type="text"
-                  auto-validate value="{{pinOrPass}}"></paper-input>
+          </template>
+          <template is="dom-if" if="[[isDialogType_(dialogId, 'connectError')]]">
+            <div class="settings-box first layout vertical center
+                center-justified">
+              <div class="dialog-message">[[errorMessage]]</div>
             </div>
-            <div id="pinDiv" class="layout horizontal center center-justified"
-                hidden="[[!showDisplayPassOrPin_(pairingEvent)]]">
-              <template is="dom-repeat" items="[[digits]]">
-                <span class$="[[getPinClass_(pairingEvent, index)]]">
-                  [[getPinDigit_(pairingEvent, index)]]
-                </span>
-              </template>
-              <span class$="[[getPinClass_(pairingEvent, -1)]]"
-                  hidden="[[showAcceptReject_(pairingEvent)]]">
-                $i18n{bluetoothEnterKey}
-              </span>
-            </div>
-          </div>
-        </template>
-        <template is="dom-if" if="[[isDialogType_(dialogId, 'connectError')]]">
-          <div class="settings-box first layout vertical center
-              center-justified">
-            <div class="dialog-message">[[errorMessage]]</div>
-          </div>
-        </template>
+          </template>
+        </div>
       </div>
       <div class="button-container">
         <template is="dom-if" if="[[isDialogType_(dialogId, 'addDevice')]]">
           <div id="scanning" class="layout horizontal center flex"
               hidden$="[[!adapterState.discovering]]">
             <paper-spinner active="[[adapterState.discovering]]">
             </paper-spinner>
             <span>$i18n{bluetoothScanning}</span>
           </div>
           <paper-button class="end-justified" on-tap="onCancelTap_">
@@ skipping 17 matching lines @@
         </template>
         <template is="dom-if" if="[[isDialogType_(dialogId, 'connectError')]]">
           <paper-button  on-tap="close">$i18n{bluetoothDismiss}
           </paper-button>
         </template>
       </div>
     </dialog>
   </template>
   <script src="/bluetooth_page/bluetooth_device_dialog.js"></script>
 </dom-module>