[t3235] Ensure appropriate trackevent resize handles are always

displayed when trackevents are too small visually

public/src/core/views/trackevent-view.js

@@ -42,8 +42,18 @@ define( [ "core/logger", "core/eventmanager", "util/dragndrop",
       }
       _element.style.left = _start  / _trackEvent.track._media.duration * 100 + "%";
       _element.style.width = ( _end - _start ) / _trackEvent.track._media.duration * 100 + "%";
+
+      _this.setResizeArrows();
     }
 
+    this.setResizeArrows = function() {
+      if ( _element.offsetWidth < TRACKEVENT_MIN_WIDTH ) {
+        _element.classList.add( "trackevent-small" );
+      } else {
+        _element.classList.remove( "trackevent-small" );
+      }
+    };
+
     this.setToolTip = function( title ){
       _element.title = title;
     };
@@ -256,11 +266,7 @@ define( [ "core/logger", "core/eventmanager", "util/dragndrop",
                   _this.dispatch( "trackeventresizestopped", resizeEvent );
                 },
                 resize: function( x, w, resizeEvent ) {
-                  if ( w < TRACKEVENT_MIN_WIDTH ) {
-                    _element.classList.add( "trackevent-small" );
-                  } else {
-                    _element.classList.remove( "trackevent-small" );
-                  }
+                  _this.setResizeArrows();
                   if ( _onResize ) {
                     _onResize( _trackEvent, x, w, resizeEvent, resizeEvent.direction );
                   }

public/src/editor/trackevent-editor.js

@@ -334,17 +334,12 @@ define([ "util/lang", "util/keys", "util/time", "./base-editor", "ui/widget/tool
      * @param {Function} callback: Called when update is ready to occur
      */
     extendObject.attachSecondsChangeHandler = function( element, trackEvent, propertyName, callback ) {
-      element.addEventListener( "blur", function() {
-        var updateOptions = {};
-        updateOptions[ propertyName ] = TimeUtils.toSeconds( element.value );
-        callback( trackEvent, updateOptions );
-      }, false );
 
-      element.addEventListener( "change", function() {
-        var updateOptions = {};
-        updateOptions[ propertyName ] = TimeUtils.toSeconds( element.value );
-        callback( trackEvent, updateOptions );
-      }, false );
+      extendObject.attachInputChangeHandler( element, trackEvent, propertyName, function( te, options ) {
+        options[ propertyName ] = TimeUtils.toSeconds( options[ propertyName ] );
+        callback( trackEvent, options );
+      });
+
     };
 
     /**

public/src/timeline/track-container.js

@@ -112,6 +112,19 @@ define( [ "core/logger", "util/dragndrop", "./ghost-manager" ],
     function resetContainer() {
       _element.scrollLeft = _container.scrollWidth * _leftViewportBoundary;
       _container.style.width = _element.clientWidth / _viewportWidthRatio + "px";
+
+      var tracks = _media.tracks,
+          trackEvents;
+
+      // We want to update the resize arrows used as the size of trackevents increase
+      for ( var i = 0; i < tracks.length; i++ ) {
+        trackEvents = tracks[ i ].trackEvents;
+
+        for ( var k = 0; k < trackEvents.length; k++ ) {
+          trackEvents[ k ].view.setResizeArrows();
+        }
+      }
+
       _vScrollbar.update();
       _hScrollbar.update();
     }