perf: Debounce offset height measure (#495) (#496)

src/vaadin-text-field-mixin.html

@@ -849,7 +849,11 @@
 
     /** @private */
     __observeOffsetHeight() {
-      this._dispatchIronResizeEventIfNeeded('Height', this.offsetHeight);
+      this.__observeOffsetHeightDebouncer = Polymer.Debouncer.debounce(
+        this.__observeOffsetHeightDebouncer,
+        Polymer.Async.animationFrame, () => {
+          this._dispatchIronResizeEventIfNeeded('Height', this.offsetHeight);
+        });
     }
 
     /**

test/text-field.html

@@ -579,6 +579,10 @@
         describe(`resize notification ${condition}`, () => {
           let textField, spy;
 
+          function flushTextField(textField) {
+            textField.__observeOffsetHeightDebouncer.flush();
+          }
+
           beforeEach(() => {
             textField = fixture(`default${fixtureName}`);
             spy = sinon.spy();
@@ -603,7 +607,9 @@
             }, 1000);
 
             textField.errorMessage = 'Error';
+            flushTextField(textField);
             textField.invalid = true;
+            flushTextField(textField);
           });
 
           it('should dispatch `iron-resize` event on error message height change', done => {
@@ -614,17 +620,22 @@
 
               // Long message that spans on multiple lines
               textField.errorMessage = [...new Array(42)].map(() => 'bla').join(' ');
+              flushTextField(textField);
 
               expect(spy).to.be.calledOnce;
               done();
             }, 1000);
 
             textField.errorMessage = 'Error';
+            flushTextField(textField);
             textField.invalid = true;
+            flushTextField(textField);
           });
 
           it('should dispatch `iron-resize` event on label height change', () => {
+            flushTextField(textField);
             textField.label = 'Label';
+            flushTextField(textField);
             expect(spy).to.be.calledOnce;
           });
         });