MD Settings: Add display layout

chrome/browser/resources/settings/device_page/display_layout.html

Index: chrome/browser/resources/settings/device_page/display_layout.html
diff --git a/chrome/browser/resources/settings/device_page/display_layout.html b/chrome/browser/resources/settings/device_page/display_layout.html
new file mode 100644
index 0000000000000000000000000000000000000000..ac6b8228e649617dc00f3a73c3520fd6f513e273
--- /dev/null
+++ b/chrome/browser/resources/settings/device_page/display_layout.html
@@ -0,0 +1,42 @@
+<link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-resizable-behavior/iron-resizable-behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="/settings_shared_css.html">
+
+<dom-module id="display-layout">
+  <template>
+    <style include="settings-shared">
+     /* Use relative position with no offset so that the diplay divs (children),

[michaelpg, 2016/06/23 04:29:34]

all indent inside <style> is off by one

[michaelpg, 2016/06/23 04:29:34]

display

[stevenjb, 2016/06/23 19:11:01]

Done.

[stevenjb, 2016/06/23 19:11:01]

Done.

+        which have absolute positions, are offset from the displayArea div. */
+     #displayArea {
+       border: lightgrey solid 1px;
+       height: 100%;
+       position: relative;
+       width: 100%;
+     }
+     .display {
+       align-items: center;
+       background: var(--paper-grey-200);
+       border: var(--paper-grey-200) solid 1px;
+       box-shadow: 2px 2px var(--paper-grey-400);
+       display: flex;
+       justify-content: center;
+       position: absolute;
+     }
+     .display[selected] {
+       border: var(--google-blue-500) solid 2px;
+       box-shadow: none;
+     }
+    </style>
+    <div id="displayArea" on-iron-resize="calculateDisplayArea_">

[michaelpg, 2016/06/23 04:29:34]

calculateVisualScale_? (this should show a console warning btw)

[stevenjb, 2016/06/23 19:11:01]

Doh. Didn't test resize.

+      <template is="dom-repeat" items="[[displays]]">
+        <div class="display" style$="[[getDivStyle_(item, visualScale)]]"
+            selected$="[[isSelected_(item, selectedDisplay)]]"
+            on-tap="onSelectDisplayTap_">
+          [[item.name]]
+        </div>
+      </template>
+    </div>
+  </template>
+  <script src="display_layout.js"></script>
+</dom-module>