Print Preview Componentization: Add custom margins controls

Make controls appear on preview area when custom margins is selected.
Controls do not yet work.

Bug: 773928, 812095
Cq-Include-Trybots: master.tryserver.chromium.linux:closure_compilation
Change-Id: Ia0319b743736717f94af65c3ef364b65f2193571
Reviewed-on: https://chromium-review.googlesource.com/935681
Commit-Queue: Rebekah Potter <rbpotter@chromium.org>
Reviewed-by: Demetrios Papadopoulos <dpapad@chromium.org>
Cr-Commit-Position: refs/heads/master@{#542918}

chrome/browser/resources/print_preview/new/compiled_resources2.gyp

@@ -176,12 +176,33 @@
         '../data/compiled_resources2.gyp:size',
         '../data/compiled_resources2.gyp:margins',
         '../data/compiled_resources2.gyp:printable_area',
+        'margin_control_container',
         'model',
         'settings_behavior',
         'state',
       ],
       'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
     },
+    {
+      'target_name': 'margin_control_container',
+      'dependencies': [
+        '../data/compiled_resources2.gyp:coordinate2d',
+        '../data/compiled_resources2.gyp:margins',
+        '../data/compiled_resources2.gyp:size',
+        'margin_control',
+        'settings_behavior',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
+    {
+      'target_name': 'margin_control',
+      'dependencies': [
+        '../data/compiled_resources2.gyp:coordinate2d',
+        '../data/compiled_resources2.gyp:margins',
+        '../data/compiled_resources2.gyp:size',
+      ],
+      'includes': ['../../../../../third_party/closure_compiler/compile_js2.gypi'],
+    },
     {
       'target_name': 'destination_dialog',
       'dependencies': [

chrome/browser/resources/print_preview/new/margin_control.html

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="../data/coordinate2d.html">
+<link rel="import" href="../data/margins.html">
+<link rel="import" href="../data/size.html">
+
+<dom-module id="print-preview-margin-control">
+  <template>
+    <style>
+      :host {
+        display: block;
+        position: absolute;
+        transition: opacity 150ms linear;
+      }
+
+      :host([invisible]) {
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      :host([side=top]),
+      :host([side=bottom]) {
+        cursor: ns-resize;
+        padding: 8px 0;
+        width: 100%;
+      }
+
+      :host([side=left]),
+      :host([side=right]) {
+        cursor: ew-resize;
+        height: 100%;
+        padding: 0 8px;
+      }
+
+      :host(.disabled) {
+        cursor: default;
+      }
+
+      .line {
+        border: 1px dashed rgb(64, 128, 250);
+      }
+
+      .disabled .line  {
+        border-color: gray;
+      }
+
+      :host([side=top]) .line,
+      :host([side=bottom]) .line {
+        width: 100%;
+      }
+
+      :host([side=left]) .line,
+      :host([side=right]) .line {
+        height: 100%;
+      }
+
+      .textbox {
+        background-color: #2a2a2a;
+        border: 1px solid #888;
+        box-sizing: border-box;
+        color: white;
+        cursor: auto;
+        font-size: 0.8rem;
+        height: 25px;
+        padding: 5px 0;
+        position: absolute;
+        text-align: center;
+        width: 60px;
+      }
+
+      .textbox.invalid {
+        background-color: rgb(193, 27, 23);
+      }
+
+      :host([side=top]) .textbox {
+        left: 50%;
+        top: 8px;
+      }
+
+      :host([side=right]) .textbox {
+        right: 8px;
+        top: 50%;
+      }
+
+      :host([side=bottom]) .textbox {
+        bottom: 8px;
+        right: 50%;
+      }
+
+      :host([side=left]) .textbox {
+        bottom: 50%;
+        left: 8px;
+      }
+    </style>
+    <div class="line"></div>
+    <input class="textbox" aria-hidden$="[[invisible]]" type="text">
+  </template>
+  <script src="margin_control.js"></script>
+</dom-module>

chrome/browser/resources/print_preview/new/margin_control.js

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+(function() {
+'use strict';
+
+/**
+ * Radius of the margin control in pixels. Padding of control + 1 for border.
+ * @type {number}
+ */
+const RADIUS_PX = 9;
+
+Polymer({
+  is: 'print-preview-margin-control',
+
+  properties: {
+    side: {
+      type: String,
+      reflectToAttribute: true,
+    },
+
+    invisible: {
+      type: Boolean,
+      reflectToAttribute: true,
+    },
+
+    /** @private {number} */
+    positionInPts_: {
+      type: Number,
+      notify: true,
+      value: 0,
+    },
+
+    /** @type {number} */
+    scaleTransform: {
+      type: Number,
+      notify: true,
+    },
+
+    /** @type {!print_preview.Coordinate2d} */
+    translateTransform: {
+      type: Object,
+      notify: true,
+    },
+
+    /** @type {!print_preview.Size} */
+    pageSize: {
+      type: Object,
+      notify: true,
+    },
+
+    /** @type {?print_preview.Size} */
+    clipSize: {
+      type: Object,
+      notify: true,
+      observer: 'onClipSizeChange_',
+    },
+  },
+
+  observers:
+      ['updatePosition_(positionInPts_, scaleTransform, translateTransform, ' +
+       'pageSize, side)'],
+
+  /** @param {number} position The new position for the margin control. */
+  setPositionInPts(position) {
+    this.positionInPts_ = position;
+  },
+
+  /** @private */
+  updatePosition_: function() {
+    const orientationEnum = print_preview.ticket_items.CustomMarginsOrientation;
+    let x = this.translateTransform.x;
+    let y = this.translateTransform.y;
+    let width = null;
+    let height = null;
+    if (this.side == orientationEnum.TOP) {
+      y = this.scaleTransform * this.positionInPts_ +
+          this.translateTransform.y - RADIUS_PX;
+      width = this.scaleTransform * this.pageSize.width;
+    } else if (this.side == orientationEnum.RIGHT) {
+      x = this.scaleTransform * (this.pageSize.width - this.positionInPts_) +
+          this.translateTransform.x - RADIUS_PX;
+      height = this.scaleTransform * this.pageSize.height;
+    } else if (this.side == orientationEnum.BOTTOM) {
+      y = this.scaleTransform * (this.pageSize.height - this.positionInPts_) +
+          this.translateTransform.y - RADIUS_PX;
+      width = this.scaleTransform * this.pageSize.width;
+    } else {
+      x = this.scaleTransform * this.positionInPts_ +
+          this.translateTransform.x - RADIUS_PX;
+      height = this.scaleTransform * this.pageSize.height;
+    }
+    window.requestAnimationFrame(() => {
+      this.style.left = Math.round(x) + 'px';
+      this.style.top = Math.round(y) + 'px';
+      if (width != null) {
+        this.style.width = Math.round(width) + 'px';
+      }
+      if (height != null) {
+        this.style.height = Math.round(height) + 'px';
+      }
+    });
+    this.onClipSizeChange_();
+  },
+
+  /** @private */
+  onClipSizeChange_: function() {
+    if (!this.clipSize)
+      return;
+    window.requestAnimationFrame(() => {
+      const offsetLeft = this.offsetLeft;
+      const offsetTop = this.offsetTop;
+      this.style.clip = 'rect(' + (-offsetTop) + 'px, ' +
+          (this.clipSize.width - offsetLeft) + 'px, ' +
+          (this.clipSize.height - offsetTop) + 'px, ' + (-offsetLeft) + 'px)';
+    });
+  },
+});
+})();

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

+<link rel="import" href="chrome://resources/html/polymer.html">
+
+<link rel="import" href="margin_control.html">
+<link rel="import" href="settings_behavior.html">
+<link rel="import" href="../data/coordinate2d.html">
+<link rel="import" href="../data/margins.html">
+<link rel="import" href="../data/size.html">
+
+<dom-module id="print-preview-margin-control-container">
+  <template>
+    <template is="dom-repeat" items="[[marginSides_]]">
+      <print-preview-margin-control side="[[item]]" invisible="[[hidden_]]"
+          translate-transform="[[translateTransform_]]"
+          clip-size="[[clipSize_]]" scale-transform="[[scaleTransform_]]"
+          page-size="[[pageSize]]">
+      </print-preview-margin-control>
+    </template>
+  </template>
+  <script src="margin_control_container.js"></script>
+</dom-module>

chrome/browser/resources/print_preview/new/margin_control_container.js

+// Copyright 2018 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+Polymer({
+  is: 'print-preview-margin-control-container',
+
+  behaviors: [SettingsBehavior],
+
+  properties: {
+    /** @type {!print_preview.Size} */
+    pageSize: {
+      type: Object,
+      notify: true,
+    },
+
+    previewLoaded: Boolean,
+
+    /** @private {number} */
+    scaleTransform_: {
+      type: Number,
+      notify: true,
+      value: 0,
+    },
+
+    /** @private {!print_preview.Coordinate2d} */
+    translateTransform_: {
+      type: Object,
+      notify: true,
+      value: new print_preview.Coordinate2d(0, 0),
+    },
+
+    /** @private {?print_preview.Size} */
+    clipSize_: {
+      type: Object,
+      notify: true,
+      value: null,
+    },
+
+    /** @private {boolean} */
+    hidden_: {
+      type: Boolean,
+      notify: true,
+      computed: 'computeHidden_(' +
+          'previewLoaded, settings.margins.value, pageSize, clipSize_)',
+    },
+
+    /**
+     * @private {!Array<!print_preview.ticket_items.CustomMarginsOrientation>}
+     */
+    marginSides_: {
+      type: Array,
+      notify: true,
+      value: [
+        print_preview.ticket_items.CustomMarginsOrientation.TOP,
+        print_preview.ticket_items.CustomMarginsOrientation.RIGHT,
+        print_preview.ticket_items.CustomMarginsOrientation.BOTTOM,
+        print_preview.ticket_items.CustomMarginsOrientation.LEFT,
+      ],
+    },
+  },
+
+  /**
+   * @return {boolean}
+   * @private
+   */
+  computeHidden_: function() {
+    return !this.previewLoaded || !this.clipSize_ ||
+        this.getSetting('margins').value !=
+        print_preview.ticket_items.MarginsTypeValue.CUSTOM ||
+        !this.pageSize;
+  },
+
+  /**
+   * Updates the translation transformation that translates pixel values in
+   * the space of the HTML DOM.
+   * @param {print_preview.Coordinate2d} translateTransform Updated value of
+   *     the translation transformation.
+   */
+  updateTranslationTransform: function(translateTransform) {
+    if (!translateTransform.equals(this.translateTransform_)) {
+      this.translateTransform_ = translateTransform;
+    }
+  },
+
+  /**
+   * Updates the scaling transform that scales pixels values to point values.
+   * @param {number} scaleTransform Updated value of the scale transform.
+   */
+  updateScaleTransform: function(scaleTransform) {
+    if (scaleTransform != this.scaleTransform_)
+      this.scaleTransform_ = scaleTransform;
+  },
+
+  /**
+   * Clips margin controls to the given clip size in pixels.
+   * @param {print_preview.Size} clipSize Size to clip the margin controls to.
+   */
+  updateClippingMask: function(clipSize) {
+    if (!clipSize) {
+      return;
+    }
+    this.clipSize_ = clipSize;
+  },
+});

chrome/browser/resources/print_preview/new/preview_area.html

@@ -11,6 +11,7 @@
 <link rel="import" href="../data/margins.html">
 <link rel="import" href="../data/printable_area.html">
 <link rel="import" href="../data/size.html">
+<link rel="import" href="margin_control_container.html">
 <link rel="import" href="model.html">
 <link rel="import" href="state.html">
 <link rel="import" href="settings_behavior.html">
@@ -112,7 +113,7 @@
 
     </style>
     <div class$="preview-area-overlay-layer [[getInvisible_(previewState_)]]"
-        aria-hidden$="[[previewLoaded(previewState_)]]">
+        aria-hidden$="[[previewLoaded_]]">
       <div class="preview-area-messages">
         <div class="preview-area-message">
           <div>
@@ -140,6 +141,10 @@
           type="application/x-google-chrome-pdf"
           data="chrome://print/dummy.pdf"></object>
     </div>
+    <print-preview-margin-control-container id="marginControlContainer"
+        page-size="[[documentInfo.pageSize]]" settings="{{settings}}"
+        preview-loaded="[[previewLoaded_]]">
+    </print-preview-margin-control-container>
   </template>
   <script src="preview_area.js"></script>
   <script

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

@@ -70,6 +70,13 @@ Polymer({
       notify: true,
       value: PreviewAreaState_.LOADING,
     },
+
+    /** @private {boolean} */
+    previewLoaded_: {
+      type: Boolean,
+      notify: true,
+      computed: 'computePreviewLoaded_(previewState_)',
+    },
   },
 
   observers: [
@@ -119,9 +126,17 @@ Polymer({
     }
   },
 
+  /**
+   * @return {boolean} Whether the preview is loaded.
+   * @private
+   */
+  computePreviewLoaded_: function() {
+    return this.previewState_ == PreviewAreaState_.DISPLAY_PREVIEW;
+  },
+
   /** @return {boolean} Whether the preview is loaded. */
   previewLoaded: function() {
-    return this.previewState_ == PreviewAreaState_.DISPLAY_PREVIEW;
+    return this.previewLoaded_;
   },
 
   /** @private */
@@ -317,6 +332,27 @@ Polymer({
     }
   },
 
+  /**
+   * Called when the preview plugin's visual state has changed. This is a
+   * consequence of scrolling or zooming the plugin. Updates the custom
+   * margins component if shown.
+   * @param {number} pageX The horizontal offset for the page corner in pixels.
+   * @param {number} pageY The vertical offset for the page corner in pixels.
+   * @param {number} pageWidth The page width in pixels.
+   * @param {number} viewportWidth The viewport width in pixels.
+   * @param {number} viewportHeight The viewport height in pixels.
+   * @private
+   */
+  onPreviewVisualStateChange_: function(
+      pageX, pageY, pageWidth, viewportWidth, viewportHeight) {
+    this.$.marginControlContainer.updateTranslationTransform(
+        new print_preview.Coordinate2d(pageX, pageY));
+    this.$.marginControlContainer.updateScaleTransform(
+        pageWidth / this.documentInfo.pageSize.width);
+    this.$.marginControlContainer.updateClippingMask(
+        new print_preview.Size(viewportWidth, viewportHeight));
+  },
+
   /**
    * Get the URL for the plugin.
    * @param {number} previewUid Unique identifier of preview.
@@ -373,6 +409,8 @@ Polymer({
         .appendChild(/** @type {Node} */ (this.plugin_));
 
     this.plugin_.setLoadCallback(this.onPluginLoad_.bind(this));
+    this.plugin_.setViewportChangedCallback(
+        this.onPreviewVisualStateChange_.bind(this));
   },
 
   /**

chrome/browser/resources/print_preview/print_preview_resources.grd

@@ -131,6 +131,18 @@
       <structure name="IDR_PRINT_PREVIEW_DATA_PRINTABLE_AREA_JS"
                  file="data/printable_area.js"
                  type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_NEW_MARGIN_CONTROL_HTML"
+                 file="new/margin_control.html"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_NEW_MARGIN_CONTROL_JS"
+                 file="new/margin_control.js"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_NEW_MARGIN_CONTROL_CONTAINER_HTML"
+                 file="new/margin_control_container.html"
+                 type="chrome_html" />
+      <structure name="IDR_PRINT_PREVIEW_NEW_MARGIN_CONTROL_CONTAINER_JS"
+                 file="new/margin_control_container.js"
+                 type="chrome_html" />
       <structure name="IDR_PRINT_PREVIEW_NEW_PREVIEW_AREA_HTML"
                  file="new/preview_area.html"
                  type="chrome_html" />