[UI-PrintPreview] Align the margin control with the contents

In right-to-left direction, the scrollbar of the print preview area may
be on the left, and we should align the margin controls with the preview
contents.

The bug was a "regression" caused by crrev.com/588201 which corrected
position of contents in a scroller with a scrollbar on the left, because
before the CL the preview content was not at the correct location and
the margin controls happened to be at the same location.

Bug: 1049038
Change-Id: Ida362fbfc1622998a1ad928217ce8abf7ff5c34c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2040438
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Reviewed-by: Rebekah Potter <rbpotter@chromium.org>
Cr-Commit-Position: refs/heads/master@{#738838}

chrome/browser/resources/print_preview/ui/margin_control_container.html

 <style>
   :host {
     display: block;
+    left: 0;
+    position: absolute;
+    top: 0;
   }
 
   :host([dragging_=dragging-vertical]) {

chrome/browser/resources/print_preview/ui/preview_area.js

@@ -399,6 +399,14 @@ Polymer({
         pageWidth / this.pageSize.width);
     this.$.marginControlContainer.updateClippingMask(
         new Size(viewportWidth, viewportHeight));
+    // Align the margin control container with the preview content area.
+    // The offset may be caused by the scrollbar on the left in the preview
+    // area in right-to-left direction.
+    const previewDocument = this.$$('.preview-area-plugin').contentDocument;
+    if (previewDocument && previewDocument.documentElement) {
+      this.$.marginControlContainer.style.left =
+          previewDocument.documentElement.offsetLeft + 'px';
+    }
   },
 
   /**