Merge branch '26282-autosize-js-memory-leak' into 'master'

Resolve "ba-resize memory leak"

Closes #26282

See merge request !8412

app/assets/javascripts/behaviors/autosize.js

 /* eslint-disable func-names, space-before-function-paren, prefer-arrow-callback, no-var, consistent-return, max-len */
 /* global autosize */
 
-/*= require jquery.ba-resize */
 /*= require autosize */
 
 (function() {

app/assets/javascripts/dispatcher.js.es6

@@ -8,7 +8,6 @@
 /* global ShortcutsIssuable */
 /* global ZenMode */
 /* global Milestone */
-/* global GLForm */
 /* global IssuableForm */
 /* global LabelsSelect */
 /* global MilestoneSelect */
@@ -99,7 +98,7 @@
         case 'projects:milestones:edit':
           new ZenMode();
           new gl.DueDateSelectors();
-          new GLForm($('.milestone-form'));
+          new gl.GLForm($('.milestone-form'));
           break;
         case 'groups:milestones:new':
           new ZenMode();
@@ -110,7 +109,7 @@
         case 'projects:issues:new':
         case 'projects:issues:edit':
           shortcut_handler = new ShortcutsNavigation();
-          new GLForm($('.issue-form'));
+          new gl.GLForm($('.issue-form'));
           new IssuableForm($('.issue-form'));
           new LabelsSelect();
           new MilestoneSelect();
@@ -120,7 +119,7 @@
         case 'projects:merge_requests:edit':
           new gl.Diff();
           shortcut_handler = new ShortcutsNavigation();
-          new GLForm($('.merge-request-form'));
+          new gl.GLForm($('.merge-request-form'));
           new IssuableForm($('.merge-request-form'));
           new LabelsSelect();
           new MilestoneSelect();
@@ -128,11 +127,11 @@
           break;
         case 'projects:tags:new':
           new ZenMode();
-          new GLForm($('.tag-form'));
+          new gl.GLForm($('.tag-form'));
           break;
         case 'projects:releases:edit':
           new ZenMode();
-          new GLForm($('.release-form'));
+          new gl.GLForm($('.release-form'));
           break;
         case 'projects:merge_requests:show':
           new gl.Diff();
@@ -332,7 +331,7 @@
               new gl.Wikis();
               shortcut_handler = new ShortcutsNavigation();
               new ZenMode();
-              new GLForm($('.wiki-form'));
+              new gl.GLForm($('.wiki-form'));
               break;
             case 'snippets':
               shortcut_handler = new ShortcutsNavigation();

app/assets/javascripts/gl_form.js

-/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-new, max-len */
-/* global GitLab */
-/* global DropzoneInput */
-/* global autosize */
-
-(function() {
-  this.GLForm = (function() {
-    function GLForm(form) {
-      this.form = form;
-      this.textarea = this.form.find('textarea.js-gfm-input');
-      // Before we start, we should clean up any previous data for this form
-      this.destroy();
-      // Setup the form
-      this.setupForm();
-      this.form.data('gl-form', this);
-    }
-
-    GLForm.prototype.destroy = function() {
-      // Clean form listeners
-      this.clearEventListeners();
-      return this.form.data('gl-form', null);
-    };
-
-    GLForm.prototype.setupForm = function() {
-      var isNewForm;
-      isNewForm = this.form.is(':not(.gfm-form)');
-      this.form.removeClass('js-new-note-form');
-      if (isNewForm) {
-        this.form.find('.div-dropzone').remove();
-        this.form.addClass('gfm-form');
-        // remove notify commit author checkbox for non-commit notes
-        gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button'));
-        gl.GfmAutoComplete.setup(this.form.find('.js-gfm-input'));
-        new DropzoneInput(this.form);
-        autosize(this.textarea);
-        // form and textarea event listeners
-        this.addEventListeners();
-      }
-      gl.text.init(this.form);
-      // hide discard button
-      this.form.find('.js-note-discard').hide();
-      return this.form.show();
-    };
-
-    GLForm.prototype.clearEventListeners = function() {
-      this.textarea.off('focus');
-      this.textarea.off('blur');
-      return gl.text.removeListeners(this.form);
-    };
-
-    GLForm.prototype.addEventListeners = function() {
-      this.textarea.on('focus', function() {
-        return $(this).closest('.md-area').addClass('is-focused');
-      });
-      return this.textarea.on('blur', function() {
-        return $(this).closest('.md-area').removeClass('is-focused');
-      });
-    };
-
-    return GLForm;
-  })();
-}).call(this);

app/assets/javascripts/gl_form.js.es6

+/* eslint-disable func-names, space-before-function-paren, wrap-iife, no-var, no-new, max-len */
+/* global GitLab */
+/* global DropzoneInput */
+/* global autosize */
+
+(() => {
+  const global = window.gl || (window.gl = {});
+
+  function GLForm(form) {
+    this.form = form;
+    this.textarea = this.form.find('textarea.js-gfm-input');
+    // Before we start, we should clean up any previous data for this form
+    this.destroy();
+    // Setup the form
+    this.setupForm();
+    this.form.data('gl-form', this);
+  }
+
+  GLForm.prototype.destroy = function() {
+    // Clean form listeners
+    this.clearEventListeners();
+    return this.form.data('gl-form', null);
+  };
+
+  GLForm.prototype.setupForm = function() {
+    var isNewForm;
+    isNewForm = this.form.is(':not(.gfm-form)');
+    this.form.removeClass('js-new-note-form');
+    if (isNewForm) {
+      this.form.find('.div-dropzone').remove();
+      this.form.addClass('gfm-form');
+      // remove notify commit author checkbox for non-commit notes
+      gl.utils.disableButtonIfEmptyField(this.form.find('.js-note-text'), this.form.find('.js-comment-button'));
+      gl.GfmAutoComplete.setup(this.form.find('.js-gfm-input'));
+      new DropzoneInput(this.form);
+      autosize(this.textarea);
+      // form and textarea event listeners
+      this.addEventListeners();
+    }
+    gl.text.init(this.form);
+    // hide discard button
+    this.form.find('.js-note-discard').hide();
+    this.form.show();
+    if (this.isAutosizeable) this.setupAutosize();
+  };
+
+  GLForm.prototype.setupAutosize = function () {
+    this.textarea.off('autosize:resized')
+      .on('autosize:resized', this.setHeightData.bind(this));
+
+    this.textarea.off('mouseup.autosize')
+      .on('mouseup.autosize', this.destroyAutosize.bind(this));
+
+    setTimeout(() => {
+      autosize(this.textarea);
+      this.textarea.css('resize', 'vertical');
+    }, 0);
+  };
+
+  GLForm.prototype.setHeightData = function () {
+    this.textarea.data('height', this.textarea.outerHeight());
+  };
+
+  GLForm.prototype.destroyAutosize = function () {
+    const outerHeight = this.textarea.outerHeight();
+
+    if (this.textarea.data('height') === outerHeight) return;
+
+    autosize.destroy(this.textarea);
+
+    this.textarea.data('height', outerHeight);
+    this.textarea.outerHeight(outerHeight);
+    this.textarea.css('max-height', window.outerHeight);
+  };
+
+  GLForm.prototype.clearEventListeners = function() {
+    this.textarea.off('focus');
+    this.textarea.off('blur');
+    return gl.text.removeListeners(this.form);
+  };
+
+  GLForm.prototype.addEventListeners = function() {
+    this.textarea.on('focus', function() {
+      return $(this).closest('.md-area').addClass('is-focused');
+    });
+    return this.textarea.on('blur', function() {
+      return $(this).closest('.md-area').removeClass('is-focused');
+    });
+  };
+
+  global.GLForm = GLForm;
+})();

app/assets/javascripts/notes.js

 /* eslint-disable no-restricted-properties, func-names, space-before-function-paren, no-var, prefer-rest-params, wrap-iife, no-use-before-define, camelcase, no-unused-expressions, quotes, max-len, one-var, one-var-declaration-per-line, default-case, prefer-template, consistent-return, no-alert, no-return-assign, no-param-reassign, prefer-arrow-callback, no-else-return, comma-dangle, no-new, brace-style, no-lonely-if, vars-on-top, no-unused-vars, no-sequences, no-shadow, newline-per-chained-call, no-useless-escape */
 /* global Flash */
-/* global GLForm */
 /* global Autosave */
 /* global ResolveService */
 /* global mrRefreshWidgetUrl */
@@ -420,7 +419,7 @@
 
     Notes.prototype.setupNoteForm = function(form) {
       var textarea;
-      new GLForm(form);
+      new gl.GLForm(form);
       textarea = form.find(".js-note-text");
       return new Autosave(textarea, ["Note", form.find("#note_noteable_type").val(), form.find("#note_noteable_id").val(), form.find("#note_commit_id").val(), form.find("#note_type").val(), form.find("#note_line_code").val(), form.find("#note_position").val()]);
     };
@@ -884,7 +883,7 @@
       var targetId = $originalContentEl.data('target-id');
       var targetType = $originalContentEl.data('target-type');
 
-      new GLForm($editForm.find('form'));
+      new gl.GLForm($editForm.find('form'));
 
       $editForm.find('form')
         .attr('action', postUrl)

spec/javascripts/gl_form_spec.js.es6

+/* global autosize */
+/*= require gl_form */
+/*= require autosize */
+/*= require lib/utils/text_utility */
+/*= require lib/utils/common_utils */
+
+describe('GLForm', () => {
+  const global = window.gl || (window.gl = {});
+  const GLForm = global.GLForm;
+
+  it('should be defined in the global scope', () => {
+    expect(GLForm).toBeDefined();
+  });
+
+  describe('when instantiated', function () {
+    beforeEach((done) => {
+      this.form = $('<form class="gfm-form"><textarea class="js-gfm-input"></form>');
+      this.textarea = this.form.find('textarea');
+      spyOn($.prototype, 'off').and.returnValue(this.textarea);
+      spyOn($.prototype, 'on').and.returnValue(this.textarea);
+      spyOn($.prototype, 'css');
+      spyOn(window, 'autosize');
+
+      this.glForm = new GLForm(this.form);
+      setTimeout(() => {
+        $.prototype.off.calls.reset();
+        $.prototype.on.calls.reset();
+        $.prototype.css.calls.reset();
+        autosize.calls.reset();
+        done();
+      });
+    });
+
+    describe('.setupAutosize', () => {
+      beforeEach((done) => {
+        this.glForm.setupAutosize();
+        setTimeout(() => {
+          done();
+        });
+      });
+
+      it('should register an autosize event handler on the textarea', () => {
+        expect($.prototype.off).toHaveBeenCalledWith('autosize:resized');
+        expect($.prototype.on).toHaveBeenCalledWith('autosize:resized', jasmine.any(Function));
+      });
+
+      it('should register a mouseup event handler on the textarea', () => {
+        expect($.prototype.off).toHaveBeenCalledWith('mouseup.autosize');
+        expect($.prototype.on).toHaveBeenCalledWith('mouseup.autosize', jasmine.any(Function));
+      });
+
+      it('should autosize the textarea', () => {
+        expect(autosize).toHaveBeenCalledWith(jasmine.any(Object));
+      });
+
+      it('should set the resize css property to vertical', () => {
+        expect($.prototype.css).toHaveBeenCalledWith('resize', 'vertical');
+      });
+    });
+
+    describe('.setHeightData', () => {
+      beforeEach(() => {
+        spyOn($.prototype, 'data');
+        spyOn($.prototype, 'outerHeight').and.returnValue(200);
+        this.glForm.setHeightData();
+      });
+
+      it('should set the height data attribute', () => {
+        expect($.prototype.data).toHaveBeenCalledWith('height', 200);
+      });
+
+      it('should call outerHeight', () => {
+        expect($.prototype.outerHeight).toHaveBeenCalled();
+      });
+    });
+
+    describe('.destroyAutosize', () => {
+      describe('when called', () => {
+        beforeEach(() => {
+          spyOn($.prototype, 'data');
+          spyOn($.prototype, 'outerHeight').and.returnValue(200);
+          spyOn(window, 'outerHeight').and.returnValue(400);
+          spyOn(autosize, 'destroy');
+
+          this.glForm.destroyAutosize();
+        });
+
+        it('should call outerHeight', () => {
+          expect($.prototype.outerHeight).toHaveBeenCalled();
+        });
+
+        it('should get data-height attribute', () => {
+          expect($.prototype.data).toHaveBeenCalledWith('height');
+        });
+
+        it('should call autosize destroy', () => {
+          expect(autosize.destroy).toHaveBeenCalledWith(this.textarea);
+        });
+
+        it('should set the data-height attribute', () => {
+          expect($.prototype.data).toHaveBeenCalledWith('height', 200);
+        });
+
+        it('should set the outerHeight', () => {
+          expect($.prototype.outerHeight).toHaveBeenCalledWith(200);
+        });
+
+        it('should set the css', () => {
+          expect($.prototype.css).toHaveBeenCalledWith('max-height', window.outerHeight);
+        });
+      });
+
+      it('should return undefined if the data-height equals the outerHeight', () => {
+        spyOn($.prototype, 'outerHeight').and.returnValue(200);
+        spyOn($.prototype, 'data').and.returnValue(200);
+        spyOn(autosize, 'destroy');
+        expect(this.glForm.destroyAutosize()).toBeUndefined();
+        expect(autosize.destroy).not.toHaveBeenCalled();
+      });
+    });
+  });
+});

vendor/assets/javascripts/jquery.ba-resize.js

-/*!
- * jQuery resize event - v1.1 - 3/14/2010
- * http://benalman.com/projects/jquery-resize-plugin/
- * 
- * Copyright (c) 2010 "Cowboy" Ben Alman
- * Dual licensed under the MIT and GPL licenses.
- * http://benalman.com/about/license/
- */
-
-// Script: jQuery resize event
-//
-// *Version: 1.1, Last updated: 3/14/2010*
-// 
-// Project Home - http://benalman.com/projects/jquery-resize-plugin/
-// GitHub       - http://github.com/cowboy/jquery-resize/
-// Source       - http://github.com/cowboy/jquery-resize/raw/master/jquery.ba-resize.js
-// (Minified)   - http://github.com/cowboy/jquery-resize/raw/master/jquery.ba-resize.min.js (1.0kb)
-// 
-// About: License
-// 
-// Copyright (c) 2010 "Cowboy" Ben Alman,
-// Dual licensed under the MIT and GPL licenses.
-// http://benalman.com/about/license/
-// 
-// About: Examples
-// 
-// This working example, complete with fully commented code, illustrates a few
-// ways in which this plugin can be used.
-// 
-// resize event - http://benalman.com/code/projects/jquery-resize/examples/resize/
-// 
-// About: Support and Testing
-// 
-// Information about what version or versions of jQuery this plugin has been
-// tested with, what browsers it has been tested in, and where the unit tests
-// reside (so you can test it yourself).
-// 
-// jQuery Versions - 1.3.2, 1.4.1, 1.4.2
-// Browsers Tested - Internet Explorer 6-8, Firefox 2-3.6, Safari 3-4, Chrome, Opera 9.6-10.1.
-// Unit Tests      - http://benalman.com/code/projects/jquery-resize/unit/
-// 
-// About: Release History
-// 
-// 1.1 - (3/14/2010) Fixed a minor bug that was causing the event to trigger
-//       immediately after bind in some circumstances. Also changed $.fn.data
-//       to $.data to improve performance.
-// 1.0 - (2/10/2010) Initial release
-
-(function($,window,undefined){
-  '$:nomunge'; // Used by YUI compressor.
-  
-  // A jQuery object containing all non-window elements to which the resize
-  // event is bound.
-  var elems = $([]),
-    
-    // Extend $.resize if it already exists, otherwise create it.
-    jq_resize = $.resize = $.extend( $.resize, {} ),
-    
-    timeout_id,
-    
-    // Reused strings.
-    str_setTimeout = 'setTimeout',
-    str_resize = 'resize',
-    str_data = str_resize + '-special-event',
-    str_delay = 'delay',
-    str_throttle = 'throttleWindow';
-  
-  // Property: jQuery.resize.delay
-  // 
-  // The numeric interval (in milliseconds) at which the resize event polling
-  // loop executes. Defaults to 250.
-  
-  jq_resize[ str_delay ] = 250;
-  
-  // Property: jQuery.resize.throttleWindow
-  // 
-  // Throttle the native window object resize event to fire no more than once
-  // every <jQuery.resize.delay> milliseconds. Defaults to true.
-  // 
-  // Because the window object has its own resize event, it doesn't need to be
-  // provided by this plugin, and its execution can be left entirely up to the
-  // browser. However, since certain browsers fire the resize event continuously
-  // while others do not, enabling this will throttle the window resize event,
-  // making event behavior consistent across all elements in all browsers.
-  // 
-  // While setting this property to false will disable window object resize
-  // event throttling, please note that this property must be changed before any
-  // window object resize event callbacks are bound.
-  
-  jq_resize[ str_throttle ] = true;
-  
-  // Event: resize event
-  // 
-  // Fired when an element's width or height changes. Because browsers only
-  // provide this event for the window element, for other elements a polling
-  // loop is initialized, running every <jQuery.resize.delay> milliseconds
-  // to see if elements' dimensions have changed. You may bind with either
-  // .resize( fn ) or .bind( "resize", fn ), and unbind with .unbind( "resize" ).
-  // 
-  // Usage:
-  // 
-  // > jQuery('selector').bind( 'resize', function(e) {
-  // >   // element's width or height has changed!
-  // >   ...
-  // > });
-  // 
-  // Additional Notes:
-  // 
-  // * The polling loop is not created until at least one callback is actually
-  //   bound to the 'resize' event, and this single polling loop is shared
-  //   across all elements.
-  // 
-  // Double firing issue in jQuery 1.3.2:
-  // 
-  // While this plugin works in jQuery 1.3.2, if an element's event callbacks
-  // are manually triggered via .trigger( 'resize' ) or .resize() those
-  // callbacks may double-fire, due to limitations in the jQuery 1.3.2 special
-  // events system. This is not an issue when using jQuery 1.4+.
-  // 
-  // > // While this works in jQuery 1.4+
-  // > $(elem).css({ width: new_w, height: new_h }).resize();
-  // > 
-  // > // In jQuery 1.3.2, you need to do this:
-  // > var elem = $(elem);
-  // > elem.css({ width: new_w, height: new_h });
-  // > elem.data( 'resize-special-event', { width: elem.width(), height: elem.height() } );
-  // > elem.resize();
-      
-  $.event.special[ str_resize ] = {
-    
-    // Called only when the first 'resize' event callback is bound per element.
-    setup: function() {
-      // Since window has its own native 'resize' event, return false so that
-      // jQuery will bind the event using DOM methods. Since only 'window'
-      // objects have a .setTimeout method, this should be a sufficient test.
-      // Unless, of course, we're throttling the 'resize' event for window.
-      if ( !jq_resize[ str_throttle ] && this[ str_setTimeout ] ) { return false; }
-      
-      var elem = $(this);
-      
-      // Add this element to the list of internal elements to monitor.
-      elems = elems.add( elem );
-      
-      // Initialize data store on the element.
-      $.data( this, str_data, { w: elem.width(), h: elem.height() } );
-      
-      // If this is the first element added, start the polling loop.
-      if ( elems.length === 1 ) {
-        loopy();
-      }
-    },
-    
-    // Called only when the last 'resize' event callback is unbound per element.
-    teardown: function() {
-      // Since window has its own native 'resize' event, return false so that
-      // jQuery will unbind the event using DOM methods. Since only 'window'
-      // objects have a .setTimeout method, this should be a sufficient test.
-      // Unless, of course, we're throttling the 'resize' event for window.
-      if ( !jq_resize[ str_throttle ] && this[ str_setTimeout ] ) { return false; }
-      
-      var elem = $(this);
-      
-      // Remove this element from the list of internal elements to monitor.
-      elems = elems.not( elem );
-      
-      // Remove any data stored on the element.
-      elem.removeData( str_data );
-      
-      // If this is the last element removed, stop the polling loop.
-      if ( !elems.length ) {
-        clearTimeout( timeout_id );
-      }
-    },
-    
-    // Called every time a 'resize' event callback is bound per element (new in
-    // jQuery 1.4).
-    add: function( handleObj ) {
-      // Since window has its own native 'resize' event, return false so that
-      // jQuery doesn't modify the event object. Unless, of course, we're
-      // throttling the 'resize' event for window.
-      if ( !jq_resize[ str_throttle ] && this[ str_setTimeout ] ) { return false; }
-      
-      var old_handler;
-      
-      // The new_handler function is executed every time the event is triggered.
-      // This is used to update the internal element data store with the width
-      // and height when the event is triggered manually, to avoid double-firing
-      // of the event callback. See the "Double firing issue in jQuery 1.3.2"
-      // comments above for more information.
-      
-      function new_handler( e, w, h ) {
-        var elem = $(this),
-          data = $.data( this, str_data );
-        
-        // If called from the polling loop, w and h will be passed in as
-        // arguments. If called manually, via .trigger( 'resize' ) or .resize(),
-        // those values will need to be computed.
-        data.w = w !== undefined ? w : elem.width();
-        data.h = h !== undefined ? h : elem.height();
-        
-        old_handler.apply( this, arguments );
-      };
-      
-      // This may seem a little complicated, but it normalizes the special event
-      // .add method between jQuery 1.4/1.4.1 and 1.4.2+
-      if ( $.isFunction( handleObj ) ) {
-        // 1.4, 1.4.1
-        old_handler = handleObj;
-        return new_handler;
-      } else {
-        // 1.4.2+
-        old_handler = handleObj.handler;
-        handleObj.handler = new_handler;
-      }
-    }
-    
-  };
-  
-  function loopy() {
-    
-    // Start the polling loop, asynchronously.
-    timeout_id = window[ str_setTimeout ](function(){
-      
-      // Iterate over all elements to which the 'resize' event is bound.
-      elems.each(function(){
-        var elem = $(this),
-          width = elem.width(),
-          height = elem.height(),
-          data = $.data( this, str_data );
-        
-        // If element size has changed since the last time, update the element
-        // data store and trigger the 'resize' event.
-        if ( width !== data.w || height !== data.h ) {
-          elem.trigger( str_resize, [ data.w = width, data.h = height ] );
-        }
-        
-      });
-      
-      // Loop.
-      loopy();
-      
-    }, jq_resize[ str_delay ] );
-    
-  };
-  
-})(jQuery,this);