MD Settings: Display: Add mirroring and other fixes

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 acbe3dc0115ea823423b694364c1ca39af02c2cc..fda6b748192c3c83b024bfb43ab10fd9456d3c96 100644
--- a/chrome/browser/resources/settings/device_page/display_layout.html
+++ b/chrome/browser/resources/settings/device_page/display_layout.html
@@ -16,6 +16,8 @@
         position: relative;
         width: 100%;
       }
+      /* Note: the size of the border / box shadow affects the style generated
+         in getDivStyle_ and getMirrorDivStyle_ */
       .display {
         align-items: center;
         background: var(--paper-grey-200);
@@ -30,6 +32,10 @@
         border: var(--google-blue-500) solid 2px;
         box-shadow: none;
       }
+      .display.mirror {
+        border: var(--google-blue-500) solid 1px;
+        box-shadow: none;
+      }
       .highlight-left {
         border-left: var(--google-blue-700) solid 1px;
       }
@@ -45,7 +51,13 @@
     </style>
     <div id="displayArea" on-iron-resize="calculateVisualScale_">
       <template is="dom-repeat" items="[[displays]]">
-        <div id="_[[item.id]]" class="display" draggable="true"
+        <div id="_mirror_[[item.id]]" class="display mirror"
+            hidden$="[[!mirroring]]"
+            style$="[[getMirrorDivStyle_(item.id, item.bounds, visualScale)]]"
+        </div>
+      </template>
+      <template is="dom-repeat" items="[[displays]]">
+        <div id="_[[item.id]]" class="display" draggable="[[dragEnabled]]"
             style$="[[getDivStyle_(item.id, item.bounds, visualScale)]]"
             selected$="[[isSelected_(item, selectedDisplay)]]"
             on-tap="onSelectDisplayTap_">