Print Preview: Adding support for localized margin units and format.

chrome/browser/resources/print_preview/margin_textbox.js

 // 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 MarginTextbox(groupName) {
     var box = document.createElement('input');
     box.__proto__ = MarginTextbox.prototype;
@@ skipping 25 matching lines @@
   MarginTextbox.prototype = {
     __proto__: HTMLInputElement.prototype,
 
     /**
      * @type {number} The margin value currently in the textbox.
      */
     get margin() {
       return print_preview.extractMarginValue(this.value);
     },
 
+    setValue_: function(newValueInPoints) {
+      this.value = print_preview.convertPointsToUserLocaleUnitsText(
+          newValueInPoints);
+    },
+
     /**
      * Updates the state of |this|.
      * @param {number} value The margin value in points.
      * @param {number} valueLimit The upper allowed value for the margin.
      * @param {boolean} keepDisplayedValue True if the currently displayed value
      *     should not be updated.
      */
     update: function(value, valueLimit, keepDisplayedValue) {
       this.lastValidValueInPoints = value;
-      if (!keepDisplayedValue) {
-        this.value = print_preview.convertPointsToInchesText(
-            this.lastValidValueInPoints);
-      }
+      if (!keepDisplayedValue)
+        this.setValue_(this.lastValidValueInPoints);
 
       this.valueLimit = valueLimit;
       this.validate();
     },
 
     /**
      * Updates |this| while dragging is in progress.
      * @param {number} dragDeltaInPoints The difference in points between the
      *     margin value before dragging started and now.
      */
     updateWhileDragging: function(dragDeltaInPoints) {
       var validity = this.validateDelta(dragDeltaInPoints);
 
-      if (validity == print_preview.marginValidationStates.WITHIN_RANGE) {
-        this.value = print_preview.convertPointsToInchesText(
-            this.lastValidValueInPoints + dragDeltaInPoints);
-      } else if (validity == print_preview.marginValidationStates.TOO_SMALL) {
-        this.value = print_preview.convertPointsToInchesText(0);
-      } else if (validity == print_preview.marginValidationStates.TOO_BIG) {
-        this.value = print_preview.convertPointsToInchesText(this.valueLimit);
-      }
+      if (validity == print_preview.marginValidationStates.WITHIN_RANGE)
+        this.setValue_(this.lastValidValueInPoints + dragDeltaInPoints);
+      else if (validity == print_preview.marginValidationStates.TOO_SMALL)
+        this.setValue_(0);
+      else if (validity == print_preview.marginValidationStates.TOO_BIG)
+        this.setValue_(this.valueLimit);
 
       this.validate();
       this.updateColor();
     },
 
     /**
      * @param {number} dragDeltaInPoints The difference in points between the
      *     margin value before dragging started and now.
      * @return {number} An appropriate value from enum |marginValidationStates|.
      */
     validateDelta: function(dragDeltaInPoints) {
       var newValue = this.lastValidValueInPoints + dragDeltaInPoints;
       return print_preview.validateMarginValue(newValue, this.valueLimit);
     },
 
     /**
      * Updates |this.isValid|.
      */
     validate: function() {
       this.isValid =
           print_preview.validateMarginText(this.value, this.valueLimit) ==
               print_preview.marginValidationStates.WITHIN_RANGE;
-      if (this.isValid)
-        this.value = print_preview.convertInchesToInchesText(this.margin);
     },
 
     /**
      * Updates the background color depending on |isValid| by adding/removing
      * the appropriate CSS class.
      * @param {boolean} isValid True if the margin is valid.
      */
     updateColor: function() {
       this.isValid ? this.classList.remove('invalid') :
                      this.classList.add('invalid');
@@ skipping 18 matching lines @@
     },
 
     /**
      * Executes whenever a blur event occurs.
      * @private
      */
     onBlur_: function() {
       clearTimeout(this.timerId_);
       this.validate();
       if (!this.isValid) {
-        this.value = print_preview.convertPointsToInchesText(
-            this.lastValidValueInPoints);
+        this.setValue_(this.lastValidValueInPoints);
         this.validate();
       }
 
       this.updateColor();
       cr.dispatchSimpleEvent(document, 'updateSummary');
       cr.dispatchSimpleEvent(document, 'updatePrintButton');
       cr.dispatchSimpleEvent(this, 'MarginsMayHaveChanged');
     },
 
     /**
      * Executes whenever a keypressed event occurs. Note: Only the "Enter" key
      * event is handled. The "Escape" key does not result in such event,
      * therefore it is handled by |this.onKeyUp_|.
      * @param {KeyboardEvent} e The event that triggered this listener.
      * @private
      */
     onKeyPressed_: function(e) {
       if (e.keyCode == MarginTextbox.ENTER_KEYCODE)
         this.blur();
     },
 
     /**
      * Executes whenever a keyup event occurs. Note: Only the "Escape"
      * key event is handled.
      * @param {KeyboardEvent} e The event that triggered this listener.
      * @private
      */
     onKeyUp_: function(e) {
       if (e.keyCode == MarginTextbox.ESCAPE_KEYCODE) {
-        this.value = print_preview.convertPointsToInchesText(
-            this.lastValidValueInPoints);
+        this.setValue_(this.lastValidValueInPoints);
         this.validate();
         this.updateColor();
         cr.dispatchSimpleEvent(document, 'updateSummary');
         cr.dispatchSimpleEvent(document, 'updatePrintButton');
       }
     },
 
     /**
      * Resetting the timer used to detect when the user stops typing in order
      * to update the print preview.
@@ skipping 19 matching lines @@
         return;
       cr.dispatchSimpleEvent(this, 'MarginsMayHaveChanged');
     }
 
   };
 
   return {
     MarginTextbox: MarginTextbox
   };
 });