From cc1896286046c709092fb4a90b685d7334e5324e Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sat, 8 Dec 2018 00:35:11 +0100
Subject: [PATCH] [Tabs] Reduce the bundle size

---
 .size-limit.js                                |  4 +-
 .../material-ui/src/Tabs/ScrollbarSize.js     | 41 ++++++++-----------
 .../src/Tabs/ScrollbarSize.test.js            | 33 ++++++---------
 packages/material-ui/src/Tabs/Tabs.js         |  7 +---
 4 files changed, 32 insertions(+), 53 deletions(-)

diff --git a/.size-limit.js b/.size-limit.js
index 31ac96345df8f3..387aaf057f7f41 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -22,7 +22,7 @@ module.exports = [
     name: 'The size of the @material-ui/core modules',
     webpack: true,
     path: 'packages/material-ui/build/index.js',
-    limit: '95 KB',
+    limit: '94.9 KB',
   },
   {
     name: 'The size of the @material-ui/styles modules',
@@ -35,7 +35,7 @@ module.exports = [
     name: 'The size of the @material-ui/core/Popper component',
     webpack: true,
     path: 'packages/material-ui/build/Popper/index.js',
-    limit: '10.0 KB',
+    limit: '9.9 KB',
   },
   {
     name: 'The main docs bundle',
diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.js b/packages/material-ui/src/Tabs/ScrollbarSize.js
index 1d74aba5efef7a..a9c845d6b186e7 100644
--- a/packages/material-ui/src/Tabs/ScrollbarSize.js
+++ b/packages/material-ui/src/Tabs/ScrollbarSize.js
@@ -4,11 +4,12 @@ import EventListener from 'react-event-listener';
 import debounce from 'debounce'; // < 1kb payload overhead when lodash/debounce is > 3kb.
 
 const styles = {
-  width: 100,
-  height: 100,
+  width: 90,
+  height: 90,
   position: 'absolute',
-  top: -10000,
+  top: -9000,
   overflow: 'scroll',
+  // Support IE 11
   msOverflowStyle: 'scrollbar',
 };
 
@@ -23,13 +24,11 @@ class ScrollbarSize extends React.Component {
 
     if (typeof window !== 'undefined') {
       this.handleResize = debounce(() => {
-        const { onChange } = this.props;
-
         const prevHeight = this.scrollbarHeight;
-        const prevWidth = this.scrollbarWidth;
         this.setMeasurements();
-        if (prevHeight !== this.scrollbarHeight || prevWidth !== this.scrollbarWidth) {
-          onChange({ scrollbarHeight: this.scrollbarHeight, scrollbarWidth: this.scrollbarWidth });
+
+        if (prevHeight !== this.scrollbarHeight) {
+          this.props.onChange(this.scrollbarHeight);
         }
       }, 166); // Corresponds to 10 frames at 60 Hz.
     }
@@ -37,16 +36,17 @@ class ScrollbarSize extends React.Component {
 
   componentDidMount() {
     this.setMeasurements();
-    this.props.onLoad({
-      scrollbarHeight: this.scrollbarHeight,
-      scrollbarWidth: this.scrollbarWidth,
-    });
+    this.props.onChange(this.scrollbarHeight);
   }
 
   componentWillUnmount() {
     this.handleResize.clear();
   }
 
+  handleRef = ref => {
+    this.nodeRef = ref;
+  };
+
   setMeasurements = () => {
     const nodeRef = this.nodeRef;
 
@@ -55,29 +55,20 @@ class ScrollbarSize extends React.Component {
     }
 
     this.scrollbarHeight = nodeRef.offsetHeight - nodeRef.clientHeight;
-    this.scrollbarWidth = nodeRef.offsetWidth - nodeRef.clientWidth;
   };
 
   render() {
-    const { onChange } = this.props;
-
     return (
-      <div>
-        {onChange ? <EventListener target="window" onResize={this.handleResize} /> : null}
-        <div
-          style={styles}
-          ref={ref => {
-            this.nodeRef = ref;
-          }}
-        />
-      </div>
+      <React.Fragment>
+        <EventListener target="window" onResize={this.handleResize} />
+        <div style={styles} ref={this.handleRef} />
+      </React.Fragment>
     );
   }
 }
 
 ScrollbarSize.propTypes = {
   onChange: PropTypes.func.isRequired,
-  onLoad: PropTypes.func.isRequired,
 };
 
 export default ScrollbarSize;
diff --git a/packages/material-ui/src/Tabs/ScrollbarSize.test.js b/packages/material-ui/src/Tabs/ScrollbarSize.test.js
index b7f0df0c35e6eb..b306c43de79dce 100644
--- a/packages/material-ui/src/Tabs/ScrollbarSize.test.js
+++ b/packages/material-ui/src/Tabs/ScrollbarSize.test.js
@@ -7,7 +7,6 @@ import ScrollbarSize from './ScrollbarSize';
 
 describe('<ScrollbarSize />', () => {
   const defaultProps = {
-    onLoad: () => {},
     onChange: () => {},
   };
   let clock;
@@ -20,7 +19,7 @@ describe('<ScrollbarSize />', () => {
     clock.restore();
   });
 
-  describe('prop: onLoad', () => {
+  describe('mount', () => {
     let wrapper;
 
     afterEach(() => {
@@ -28,20 +27,16 @@ describe('<ScrollbarSize />', () => {
     });
 
     it('should not call on initial load', () => {
-      const onLoad = spy();
+      const onChange = spy();
       wrapper = mount(<ScrollbarSize {...defaultProps} />);
-      assert.strictEqual(onLoad.callCount, 0, 'should not have been called');
+      assert.strictEqual(onChange.callCount, 0);
     });
 
     it('should call on initial load', () => {
-      const onLoad = spy();
-      wrapper = mount(<ScrollbarSize {...defaultProps} onLoad={onLoad} />);
-      assert.strictEqual(onLoad.callCount, 1, 'should have been called once');
-      assert.strictEqual(
-        onLoad.calledWith({ scrollbarHeight: 0, scrollbarWidth: 0 }),
-        true,
-        'should have been called with expected sizes',
-      );
+      const onChange = spy();
+      wrapper = mount(<ScrollbarSize {...defaultProps} onChange={onChange} />);
+      assert.strictEqual(onChange.callCount, 1);
+      assert.strictEqual(onChange.calledWith(0), true);
     });
   });
 
@@ -56,26 +51,22 @@ describe('<ScrollbarSize />', () => {
       instance.nodeRef = {
         offsetHeight: 17,
         clientHeight: 0,
-        offsetWidth: 17,
-        clientWidth: 0,
       };
     });
 
     it('should call on first resize event', () => {
+      assert.strictEqual(onChange.callCount, 1);
       wrapper.find(EventListener).simulate('resize');
       clock.tick(166);
-      assert.strictEqual(onChange.callCount, 1, 'should have been called once');
-      assert.strictEqual(
-        onChange.calledWith({ scrollbarHeight: 17, scrollbarWidth: 17 }),
-        true,
-        'should have been called with expected sizes',
-      );
+      assert.strictEqual(onChange.callCount, 2);
+      assert.strictEqual(onChange.calledWith(17), true);
     });
 
     it('should not call on second resize event', () => {
+      assert.strictEqual(onChange.callCount, 1);
       wrapper.find(EventListener).simulate('resize');
       clock.tick(166);
-      assert.strictEqual(onChange.callCount, 1, 'should only have been called once');
+      assert.strictEqual(onChange.callCount, 2);
     });
   });
 });
diff --git a/packages/material-ui/src/Tabs/Tabs.js b/packages/material-ui/src/Tabs/Tabs.js
index ef9198a3c1ce01..5b6f18160a00bc 100644
--- a/packages/material-ui/src/Tabs/Tabs.js
+++ b/packages/material-ui/src/Tabs/Tabs.js
@@ -114,10 +114,7 @@ class Tabs extends React.Component {
     const { classes, scrollable, ScrollButtonComponent, scrollButtons, theme } = this.props;
     const conditionalElements = {};
     conditionalElements.scrollbarSizeListener = scrollable ? (
-      <ScrollbarSize
-        onLoad={this.handleScrollbarSizeChange}
-        onChange={this.handleScrollbarSizeChange}
-      />
+      <ScrollbarSize onChange={this.handleScrollbarSizeChange} />
     ) : null;
 
     const showScrollButtons = scrollable && (scrollButtons === 'auto' || scrollButtons === 'on');
@@ -194,7 +191,7 @@ class Tabs extends React.Component {
     this.moveTabsScroll(this.tabsRef.clientWidth);
   };
 
-  handleScrollbarSizeChange = ({ scrollbarHeight }) => {
+  handleScrollbarSizeChange = scrollbarHeight => {
     this.setState({
       scrollerStyle: {
         marginBottom: -scrollbarHeight,