Reset margin input controls error state when error is cleared.

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

 // Copyright (c) 2012 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() {
   'use strict';
 
   /**
    * Draggable control for setting a page margin.
    * @param {!print_preview.ticket_items.CustomMargins.Orientation} orientation
@@ skipping 55 matching lines @@
     this.mouseStartPositionInPixels_ = null;
 
     /**
      * Processing timeout for the textbox.
      * @type {?number}
      * @private
      */
     this.textTimeout_ = null;
 
     /**
-     * Value of the textbox when the timeout was started.
-     * @type {?string}
-     * @private
-     */
-    this.preTimeoutValue_ = null;
-
-    /**
      * Textbox used to display and receive the value of the margin.
      * @type {HTMLInputElement}
      * @private
      */
     this.textbox_ = null;
 
     /**
      * Element of the margin control line.
      * @type {HTMLElement}
      * @private
@@ skipping 26 matching lines @@
     // Dispatched when the text in the margin control's textbox changes.
     TEXT_CHANGE: 'print_preview.MarginControl.TEXT_CHANGE'
   };
 
   /**
    * CSS classes used by this component.
    * @enum {string}
    * @private
    */
   MarginControl.Classes_ = {
-    TOP: 'margin-control-top',
-    RIGHT: 'margin-control-right',
-    BOTTOM: 'margin-control-bottom',
-    LEFT: 'margin-control-left',
     TEXTBOX: 'margin-control-textbox',
-    INVALID: 'invalid',
-    INVISIBLE: 'invisible',
-    DISABLED: 'margin-control-disabled',
     DRAGGING: 'margin-control-dragging',
     LINE: 'margin-control-line'
   };
 
   /**
-   * Map from orientation to CSS class name.
-   * @type {!Object.<
-   *     !print_preview.ticket_items.CustomMargins.Orientation,
-   *     !MarginControl.Classes_>}
-   * @private
-   */
-  MarginControl.OrientationToClass_ = {};
-  MarginControl.OrientationToClass_[
-      print_preview.ticket_items.CustomMargins.Orientation.TOP] =
-      MarginControl.Classes_.TOP;
-  MarginControl.OrientationToClass_[
-      print_preview.ticket_items.CustomMargins.Orientation.RIGHT] =
-      MarginControl.Classes_.RIGHT;
-  MarginControl.OrientationToClass_[
-      print_preview.ticket_items.CustomMargins.Orientation.BOTTOM] =
-      MarginControl.Classes_.BOTTOM;
-  MarginControl.OrientationToClass_[
-      print_preview.ticket_items.CustomMargins.Orientation.LEFT] =
-      MarginControl.Classes_.LEFT;
-
-  /**
    * Radius of the margin control in pixels. Padding of control + 1 for border.
    * @type {number}
    * @const
    * @private
    */
   MarginControl.RADIUS_ = 9;
 
   /**
    * Timeout after a text change after which the text in the textbox is saved to
    * the print ticket. Value in milliseconds.
@@ skipping 41 matching lines @@
     /**
      * @param {!print_preview.Size} pageSize New size of the document's pages.
      */
     setPageSize: function(pageSize) {
       this.pageSize_ = pageSize;
       this.setPositionInPts(this.positionInPts_);
     },
 
     /** @param {boolean} isVisible Whether the margin control is visible. */
     setIsVisible: function(isVisible) {
-      if (isVisible) {
-        this.getElement().classList.remove(MarginControl.Classes_.INVISIBLE);
-      } else {
-        this.getElement().classList.add(MarginControl.Classes_.INVISIBLE);
-      }
+      this.getElement().classList.toggle('invisible', !isVisible);
     },
 
     /** @return {boolean} Whether the margin control is in an error state. */
     getIsInError: function() {
       return this.isInError_;
     },
 
     /**
      * @param {boolean} isInError Whether the margin control is in an error
      *     state.
      */
     setIsInError: function(isInError) {
       this.isInError_ = isInError;
-      if (isInError) {
-        this.textbox_.classList.add(MarginControl.Classes_.INVALID);
-      } else {
-        this.textbox_.classList.remove(MarginControl.Classes_.INVALID);
-      }
+      this.textbox_.classList.toggle('invalid', isInError);
     },
 
     /** @param {boolean} isEnabled Whether to enable the margin control. */
     setIsEnabled: function(isEnabled) {
       this.textbox_.disabled = !isEnabled;
-      if (isEnabled) {
-        this.getElement().classList.remove(MarginControl.Classes_.DISABLED);
-      } else {
-        this.getElement().classList.add(MarginControl.Classes_.DISABLED);
-      }
+      this.getElement().classList.toggle('margin-control-disabled', !isEnabled);
     },
 
     /** @return {number} Current position of the margin control in points. */
     getPositionInPts: function() {
       return this.positionInPts_;
     },
 
     /**
      * @param {number} posInPts New position of the margin control in points.
      */
@@ skipping 82 matching lines @@
           mousePosition.x - this.mouseStartPositionInPixels_.x +
               this.marginStartPositionInPixels_.x,
           mousePosition.y - this.mouseStartPositionInPixels_.y +
               this.marginStartPositionInPixels_.y);
     },
 
     /** @override */
     createDom: function() {
       this.setElementInternal(this.cloneTemplateInternal(
           'margin-control-template'));
-      this.getElement().classList.add(MarginControl.OrientationToClass_[
-          this.orientation_]);
+      this.getElement().classList.add('margin-control-' + this.orientation_);
       this.textbox_ = this.getElement().getElementsByClassName(
           MarginControl.Classes_.TEXTBOX)[0];
+      this.textbox_.setAttribute(
+          'aria-label', localStrings.getString(this.orientation_));
       this.marginLineEl_ = this.getElement().getElementsByClassName(
           MarginControl.Classes_.LINE)[0];
     },
 
     /** @override */
     enterDocument: function() {
       print_preview.Component.prototype.enterDocument.call(this);
       this.tracker.add(
           this.getElement(), 'mousedown', this.onMouseDown_.bind(this));
       this.tracker.add(
+          this.getElement(),
+          'webkitTransitionEnd',
+          this.onWebkitTransitionEnd_.bind(this));
+      this.tracker.add(
+          this.textbox_, 'input', this.onTextboxInput_.bind(this));
+      this.tracker.add(
           this.textbox_, 'keydown', this.onTextboxKeyDown_.bind(this));
       this.tracker.add(
           this.textbox_, 'focus', this.setIsFocused_.bind(this, true));
       this.tracker.add(this.textbox_, 'blur', this.onTexboxBlur_.bind(this));
     },
 
     /** @override */
     exitDocument: function() {
       print_preview.Component.prototype.exitDocument.call(this);
       this.textbox_ = null;
@@ skipping 21 matching lines @@
         this.mouseStartPositionInPixels_ =
             new print_preview.Coordinate2d(event.x, event.y);
         this.marginStartPositionInPixels_ = new print_preview.Coordinate2d(
             this.getElement().offsetLeft, this.getElement().offsetTop);
         this.setIsInError(false);
         cr.dispatchSimpleEvent(this, MarginControl.EventType.DRAG_START);
       }
     },
 
     /**
+     * Called when opacity CSS transition ends.
+     * @private
+     */
+    onWebkitTransitionEnd_: function(event) {
+      if (event.propertyName != 'opacity')
+        return;
+      var elStyle = window.getComputedStyle(this.getElement());
+      var opacity = parseInt(elStyle.getPropertyValue('opacity'));
+      this.textbox_.setAttribute('aria-hidden', opacity == 0);
+    },
+
+    /**
+     * Called when textbox content changes. Starts text change timeout.
+     * @private
+     */
+    onTextboxInput_: function(event) {
+      if (this.textTimeout_) {
+        clearTimeout(this.textTimeout_);
+        this.textTimeout_ = null;
+      }
+      this.textTimeout_ = setTimeout(
+          this.onTextboxTimeout_.bind(this), MarginControl.TEXTBOX_TIMEOUT_);
+    },
+
+    /**
      * Called when a key down event occurs on the textbox. Dispatches a
      * TEXT_CHANGE event if the "Enter" key was pressed.
      * @param {Event} event Contains the key that was pressed.
      * @private
      */
     onTextboxKeyDown_: function(event) {
       if (this.textTimeout_) {
         clearTimeout(this.textTimeout_);
         this.textTimeout_ = null;
       }
       if (event.keyCode == 13 /*enter*/) {
-        this.preTimeoutValue_ = null;
         cr.dispatchSimpleEvent(this, MarginControl.EventType.TEXT_CHANGE);
-      } else {
-        if (this.preTimeoutValue_ == null) {
-          this.preTimeoutValue_ = this.textbox_.value;
-        }
-        this.textTimeout_ = setTimeout(
-            this.onTextboxTimeout_.bind(this), MarginControl.TEXTBOX_TIMEOUT_);
       }
     },
 
     /**
      * Called after a timeout after the text in the textbox has changed. Saves
      * the textbox's value to the print ticket.
      * @private
      */
     onTextboxTimeout_: function() {
       this.textTimeout_ = null;
-      if (this.textbox_.value != this.preTimeoutValue_) {
-        cr.dispatchSimpleEvent(this, MarginControl.EventType.TEXT_CHANGE);
-      }
-      this.preTimeoutValue_ = null;
+      cr.dispatchSimpleEvent(this, MarginControl.EventType.TEXT_CHANGE);
     },
 
     /**
      * Called when the textbox loses focus. Dispatches a TEXT_CHANGE event.
      */
     onTexboxBlur_: function() {
       if (this.textTimeout_) {
         clearTimeout(this.textTimeout_);
         this.textTimeout_ = null;
-        this.preTimeoutValue_ = null;
       }
       this.setIsFocused_(false);
       cr.dispatchSimpleEvent(this, MarginControl.EventType.TEXT_CHANGE);
     }
   };
 
   // Export
   return {
     MarginControl: MarginControl
   };
 });