Print Preview: Adding UI for margin settings.

chrome/browser/resources/print_preview/print_preview.css

 html {
   height: 100%;
 }
 
 body {
   background: white;
   display: -webkit-box;
   height: 100%;
   margin: 0;
   overflow: hidden;
@@ skipping 704 matching lines @@
   width: 100%;
 }
 
 #overlay-layer.invisible {
   /* overlayFadeOutTransitionDuration = 0.1s */
   -webkit-transition: opacity 0.1s linear;
   opacity: 0;
   pointer-events: none;
 }
 
+input[type='text'].margin-box {
+  background-color: #2a2a2a;
+  color: #fff;
+  cursor: auto;
+  font-family: arial;
+  font-size: 10px;
+  height: 15px;
+  padding: 5px 10px;
+  position: absolute;
+  text-align: center;
+  width: 40px;
+  z-index: 3;
+}
+
+input[type='text'].margin-box.invalid {
+  background-color: #c11b17;
+}
+
+.draggable-area {
+  background-color: transparent;
+  border-color: transparent;
+  pointer-events: none;
+  position: absolute;
+  z-index: 2;
+}
+
+.margin-line {
+  border-color: #4080FA;
+  border-style: dashed;
+  border-width: 1px;
+  position: absolute;
+  z-index: 2;
+}
+
+#customized-margins {
+  position: absolute;
+  top: 0;
+}
+
 #messages {
   color: #404040;
   font-size: 13px;
   position: relative;
   text-align: center;
   text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
   top: 50%;
 }
 
 html[dir='rtl'] .messages {
@@ skipping 34 matching lines @@
   margin-top: 10px;
 }
 
 input[disabled] + label {
   color: gray;
 }
 
 #error-action-area {
   margin-top: 10px;
 }