MD Settings: Display: Add snapping and collisions

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
index 06762e992953c30b591ccaf3096707df5b08fbc8..260e31a74e9c62aaa3ce2e4987f30debc8072dad 100644
--- a/chrome/browser/resources/settings/device_page/display_layout.html
+++ b/chrome/browser/resources/settings/device_page/display_layout.html
@@ -2,6 +2,7 @@
 <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="/device_page/drag_behavior.html">
+<link rel="import" href="/device_page/layout_behavior.html">
 <link rel="import" href="/settings_shared_css.html">
 
 <dom-module id="display-layout">
@@ -29,6 +30,18 @@
         border: var(--google-blue-500) solid 2px;
         box-shadow: none;
       }
+      .highlight-left {
+        border-left: var(--google-blue-700) solid 1px;
+      }
+      .highlight-right {
+        border-right: var(--google-blue-700) solid 1px;
+      }
+      .highlight-top {
+        border-top: var(--google-blue-700) solid 1px;
+      }
+      .highlight-bottom {
+        border-bottom: var(--google-blue-700) solid 1px;
+      }
     </style>
     <div id="displayArea" on-iron-resize="calculateVisualScale_">
       <template is="dom-repeat" items="[[displays]]">