Print Preview Cleanup: Moving some margin drawing logic to css from js.

Also in this CL.
- changing the timeout on the textboxes to 1s.
- fixing a corner case that caused the print summary display "O sheets".

BUG=NONE
TEST=NONE

Review URL: http://codereview.chromium.org/8345008

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@106164 0039d316-1c4b-4281-b951-d872f2087c98

8 files changed, 29 insertions, 167 deletions

diff --git a/chrome/browser/resources/print_preview/margin_line.js b/chrome/browser/resources/print_preview/margin_line.js
deleted file mode 100644
index e31cbc8..0000000
--- a/chrome/browser/resources/print_preview/margin_line.js
+++ /dev/null
@@ -1,103 +0,0 @@
-// Copyright (c) 2011 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.
-
-cr.define('print_preview', function() {
-  'strict';
-
-  function MarginLine(groupName) {
-    var line = document.createElement('div');
-    line.__proto__ = MarginLine.prototype;
-    line.className = MarginLine.CSS_CLASS_MARGIN_LINE;
-
-    // @type {string} Specifies which margin this line refers to.
-    line.marginGroup = groupName;
-
-    return line;
-  }
-
-  MarginLine.CSS_CLASS_MARGIN_LINE = 'margin-line';
-
-  MarginLine.prototype = {
-    __proto__: HTMLDivElement.prototype,
-
-    /**
-     * Draws a dotted line representing the margin.
-     */
-    draw: function() {
-      var rectangle = this.getCoordinates_();
-      this.style.left = 100 * rectangle.x + '%';
-      this.style.top = 100 * rectangle.y + '%';
-      this.style.width = 100 * rectangle.width + '%';
-      this.style.height = 100 * rectangle.height + '%';
-    },
-
-    /**
-     * Calculates the coordinates and size of the margin line in percentages,
-     * with respect to parent element.
-     * @return {print_preview.Rect} A rectangle describing the position of the
-     *     visible line in percentages.
-     * @private
-     */
-    getCoordinates_: function() {
-      if (this.isHorizontal_())
-        var innerMarginsRect = new print_preview.Rect(0, 0.5, 1, 0);
-      else if (this.isVertical_())
-        var innerMarginsRect = new print_preview.Rect(0.5, 0, 0, 1);
-      return innerMarginsRect;
-    },
-
-    /**
-     * @return {boolean} True if |this| refers to the top margin.
-     * @private
-     */
-    isTop_: function() {
-      return this.marginGroup == print_preview.MarginSettings.TOP_GROUP;
-    },
-
-    /**
-     * @return {boolean} True if |this| refers to the bottom margin.
-     * @private
-     */
-    isBottom_: function() {
-      return this.marginGroup == print_preview.MarginSettings.BOTTOM_GROUP;
-    },
-
-    /**
-     * @return {boolean} True if |this| refers to the left margin.
-     * @private
-     */
-    isLeft_: function() {
-      return this.marginGroup == print_preview.MarginSettings.LEFT_GROUP;
-    },
-
-    /**
-     * @return {boolean} True if |this| refers to the bottom margin.
-     * @private
-     */
-    isRight_: function() {
-      return this.marginGroup == print_preview.MarginSettings.RIGHT_GROUP;
-    },
-
-    /**
-     * @return {boolean} True if |this| is a horizontal line.
-     * @private
-     */
-    isHorizontal_: function() {
-      return this.isTop_() || this.isBottom_() ;
-    },
-
-    /**
-     * @return {boolean} True if |this| is a vertical line.
-     * @private
-     */
-    isVertical_: function() {
-      return this.isLeft_() || this.isRight_();
-    },
-
-  };
-
-  return {
-    MarginLine: MarginLine
-  };
-});
diff --git a/chrome/browser/resources/print_preview/margin_settings.js b/chrome/browser/resources/print_preview/margin_settings.js
index 590605d..1485e9a 100644
--- a/chrome/browser/resources/print_preview/margin_settings.js
+++ b/chrome/browser/resources/print_preview/margin_settings.js
@@ -162,7 +162,7 @@ cr.define('print_preview', function() {
     this.forceDisplayingMarginLines_ = true;
 
     // @type {EventTracker} Used to keep track of certain event listeners.
-    this.eventTracker = new EventTracker();
+    this.eventTracker_ = new EventTracker();
 
     this.addEventListeners_();
   }
@@ -414,7 +414,7 @@ cr.define('print_preview', function() {
     addCustomMarginEventListeners_: function() {
       $('mainview').onmouseover = this.onMainviewMouseOver_.bind(this);
       $('sidebar').onmouseover = this.onSidebarMouseOver_.bind(this);
-      this.eventTracker.add(
+      this.eventTracker_.add(
           this.marginsUI, 'DragEvent', this.onDragEvent_.bind(this), false);
     },
 
@@ -425,7 +425,7 @@ cr.define('print_preview', function() {
     removeCustomMarginEventListeners_: function() {
       $('mainview').onmouseover = null;
       $('sidebar').onmouseover = null;
-      this.eventTracker.remove(this.marginsUI, 'DragEvent');
+      this.eventTracker_.remove(this.marginsUI, 'DragEvent');
       this.marginsUI.hide();
     },
 
diff --git a/chrome/browser/resources/print_preview/margin_textbox.js b/chrome/browser/resources/print_preview/margin_textbox.js
index f5a14ce..8772ed4 100644
--- a/chrome/browser/resources/print_preview/margin_textbox.js
+++ b/chrome/browser/resources/print_preview/margin_textbox.js
@@ -28,32 +28,11 @@ cr.define('print_preview', function() {
   }
 
   MarginTextbox.CSS_CLASS_MARGIN_TEXTBOX = 'margin-box';
-  MarginTextbox.MARGIN_BOX_HEIGHT = 15;
-  MarginTextbox.MARGIN_BOX_VERTICAL_PADDING = 5;
-  MarginTextbox.MARGIN_BOX_WIDTH = 40;
-  MarginTextbox.MARGIN_BOX_HORIZONTAL_PADDING = 10;
-
   // Keycode for the "Escape" key.
   MarginTextbox.ESCAPE_KEYCODE = 27;
   // Keycode for the "Enter" key.
   MarginTextbox.ENTER_KEYCODE = 13;
 
-  /**
-   * @return {number} The total height of a margin textbox (including padding).
-   */
-  MarginTextbox.totalHeight = function() {
-    return MarginTextbox.MARGIN_BOX_HEIGHT +
-        2 * MarginTextbox.MARGIN_BOX_VERTICAL_PADDING;
-  }
-
-  /**
-   * @return {number} The total width of a margin textbox (including padding).
-   */
-  MarginTextbox.totalWidth = function() {
-    return MarginTextbox.MARGIN_BOX_WIDTH +
-        2 * MarginTextbox.MARGIN_BOX_HORIZONTAL_PADDING;
-  }
-
   MarginTextbox.prototype = {
     __proto__: HTMLInputElement.prototype,
 
@@ -142,38 +121,6 @@ cr.define('print_preview', function() {
     },
 
     /**
-     * @return {boolean} True if |this| refers to the top margin.
-     * @private
-     */
-    isTop_: function() {
-      return this.marginGroup == print_preview.MarginSettings.TOP_GROUP;
-    },
-
-    /**
-     * @return {boolean} True if |this| refers to the bottom margin.
-     * @private
-     */
-    isBottom_: function() {
-      return this.marginGroup == print_preview.MarginSettings.BOTTOM_GROUP;
-    },
-
-    /**
-     * @return {boolean} True if |this| refers to the left margin.
-     * @private
-     */
-    isLeft_: function() {
-      return this.marginGroup == print_preview.MarginSettings.LEFT_GROUP;
-    },
-
-    /**
-     * @return {boolean} True if |this| refers to the bottom margin.
-     * @private
-     */
-    isRight_: function() {
-      return this.marginGroup == print_preview.MarginSettings.RIGHT_GROUP;
-    },
-
-    /**
      * Adds event listeners for various events.
      * @private
      */
@@ -240,7 +187,7 @@ cr.define('print_preview', function() {
     resetTimer_: function() {
       clearTimeout(this.timerId_);
       this.timerId_ = window.setTimeout(
-          this.onTextValueMayHaveChanged.bind(this), 500);
+          this.onTextValueMayHaveChanged.bind(this), 1000);
     },
 
     /**
diff --git a/chrome/browser/resources/print_preview/margins.css b/chrome/browser/resources/print_preview/margins.css
index 30d2842..32769e7 100644
--- a/chrome/browser/resources/print_preview/margins.css
+++ b/chrome/browser/resources/print_preview/margins.css
@@ -74,6 +74,22 @@
   position: absolute;
 }
 
+.margins-ui-pair.top .margin-line,
+.margins-ui-pair.bottom .margin-line {
+  height: 0;
+  left: 0;
+  top: 50%;
+  width: 100%;
+}
+
+.margins-ui-pair.left .margin-line,
+.margins-ui-pair.right .margin-line {
+  height: 100%;
+  left: 50%;
+  top: 0;
+  width: 0;
+}
+
 #customized-margins {
   position: absolute;
   top: 0;
diff --git a/chrome/browser/resources/print_preview/margins_ui.js b/chrome/browser/resources/print_preview/margins_ui.js
index 49e464d..8f142c5 100644
--- a/chrome/browser/resources/print_preview/margins_ui.js
+++ b/chrome/browser/resources/print_preview/margins_ui.js
@@ -36,7 +36,7 @@ cr.define('print_preview', function() {
     marginsUI.lastClickedMarginsUIPair = null;
 
     // @type {EventTracker} Used to keep track of certain event listeners.
-    marginsUI.eventTracker = new EventTracker();
+    marginsUI.eventTracker_ = new EventTracker();
 
     marginsUI.addEventListeners_();
     return marginsUI;
@@ -152,7 +152,7 @@ cr.define('print_preview', function() {
       this.bringToFront(this.lastClickedMarginsUIPair);
       // Note: Capturing mouse events at a higher level in the DOM than |this|,
       // so that the plugin can still receive mouse events.
-      this.eventTracker.add(
+      this.eventTracker_.add(
           window.document, 'mousemove', this.onMouseMove_.bind(this), false);
     },
 
@@ -165,7 +165,7 @@ cr.define('print_preview', function() {
         return;
       this.lastClickedMarginsUIPair.onMouseUp();
       this.lastClickedMarginsUIPair = null;
-      this.eventTracker.remove(window.document, 'mousemove');
+      this.eventTracker_.remove(window.document, 'mousemove');
     },
 
     /**
diff --git a/chrome/browser/resources/print_preview/margins_ui_pair.js b/chrome/browser/resources/print_preview/margins_ui_pair.js
index 8ea1eea..3a5b494 100644
--- a/chrome/browser/resources/print_preview/margins_ui_pair.js
+++ b/chrome/browser/resources/print_preview/margins_ui_pair.js
@@ -23,8 +23,9 @@ cr.define('print_preview', function() {
     marginsUIPair.rectangle = null;
     // @type {print_preview.Rect} A rectangle describing the four margins.
     marginsUIPair.marginsRectangle = null;
-    // @type {print_preview.MarginLine} The line representing the margin.
-    marginsUIPair.line_ = new print_preview.MarginLine(groupName);
+    // @type {HTMLDivElement} The line representing the margin.
+    marginsUIPair.line_ = document.createElement('div');
+    marginsUIPair.line_.className = 'margin-line';
     // @type {print_preview.MarginTextbox} The textbox corresponding to this
     //     margin.
     marginsUIPair.box_ = new print_preview.MarginTextbox(groupName);
@@ -65,7 +66,6 @@ cr.define('print_preview', function() {
      */
     draw: function() {
       this.drawDraggableArea_();
-      this.line_.draw();
       this.box_.draw();
     },
 
diff --git a/chrome/browser/resources/print_preview/print_header.js b/chrome/browser/resources/print_preview/print_header.js
index 5074705..593b098 100644
--- a/chrome/browser/resources/print_preview/print_header.js
+++ b/chrome/browser/resources/print_preview/print_header.js
@@ -109,6 +109,9 @@ cr.define('print_preview', function() {
 
       var pageSet = pageSettings.selectedPagesSet;
       var numOfSheets = pageSet.length;
+      if (numOfSheets == 0)
+        return;
+
       var summaryLabel =
           localStrings.getString('printPreviewSheetsLabelSingular');
       var numOfPagesText = '';
diff --git a/chrome/browser/resources/print_preview/print_preview.js b/chrome/browser/resources/print_preview/print_preview.js
index a604dde..d55b8a7 100644
--- a/chrome/browser/resources/print_preview/print_preview.js
+++ b/chrome/browser/resources/print_preview/print_preview.js
@@ -1103,7 +1103,6 @@ window.onkeydown = onKeyDown;
 <include src="color_settings.js"/>
 <include src="margin_settings.js"/>
 <include src="margin_textbox.js"/>
-<include src="margin_line.js"/>
 <include src="margin_utils.js"/>
 <include src="margins_ui.js"/>
 <include src="margins_ui_pair.js"/>