perf(*): Replace _.omit, refresh scrollbar height less often

internal_packages/draft-list/lib/sending-progress-bar.cjsx

@@ -1,12 +1,12 @@
 React = require 'react'
-_ = require 'underscore'
+{Utils} = require 'nylas-exports'
 
 class SendingProgressBar extends React.Component
   @propTypes:
     progress: React.PropTypes.number.isRequired
 
   render: ->
-    otherProps = _.omit(@props, _.keys(@constructor.propTypes))
+    otherProps = Utils.fastOmit(@props, Object.keys(@constructor.propTypes))
     if 0 < @props.progress < 99
       <div className="sending-progress" {...otherProps}>
         <div className="filled"

src/components/drop-zone.cjsx

@@ -10,7 +10,7 @@ class DropZone extends React.Component
   constructor: ->
 
   render: ->
-    otherProps = _.omit(@props, _.keys(@constructor.propTypes))
+    otherProps = _.omit(@props, Object.keys(@constructor.propTypes))
     <div {...otherProps} onDragEnter={@_onDragEnter} onDragLeave={@_onDragLeave} onDrop={@_onDrop}>
       {@props.children}
     </div>

src/components/fixed-popover.jsx

@@ -168,7 +168,7 @@ class FixedPopover extends Component {
 
   computeAdjustedOffsetAndDirection = ({direction, currentRect, windowDimensions, fallback = this.fallback, offsetPadding = OFFSET_PADDING})=> {
     const {overflows, overflowValues} = this.computeOverflows({currentRect, windowDimensions})
-    const overflowCount = _.keys(_.pick(overflows, (val)=> val === true)).length
+    const overflowCount = Object.keys(_.pick(overflows, (val)=> val === true)).length
 
     if (overflowCount > 0) {
       if (fallback) {

src/components/flexbox.cjsx

@@ -1,6 +1,6 @@
 React = require 'react'
 _ = require 'underscore'
-{Actions,ComponentRegistry} = require "nylas-exports"
+{Actions, ComponentRegistry, Utils} = require "nylas-exports"
 
 ###
 Public: A simple wrapper that provides a Flexbox layout with the given direction and style.
@@ -36,8 +36,7 @@ class Flexbox extends React.Component
     if @props.inline is true
       style.display = 'inline-flex'
 
-    otherProps = _.omit(@props, _.keys(@constructor.propTypes))
+    otherProps = Utils.fastOmit(@props, Object.keys(@constructor.propTypes))
-
     <div style={style} {...otherProps}>
       {@props.children}
     </div>

src/components/flux-container.cjsx

@@ -29,7 +29,7 @@ class FluxContainer extends React.Component
     @_unlisteners = []
 
   render: ->
-    otherProps = _.omit(@props, _.keys(@constructor.propTypes))
+    otherProps = _.omit(@props, Object.keys(@constructor.propTypes))
     React.cloneElement(@props.children, _.extend({}, otherProps, @state))
 
 module.exports = FluxContainer

src/components/injected-component-set.cjsx

@@ -3,7 +3,8 @@ _ = require 'underscore'
 UnsafeComponent = require './unsafe-component'
 Flexbox = require './flexbox'
 InjectedComponentLabel = require './injected-component-label'
-{Actions,
+{Utils,
+ Actions,
  WorkspaceStore,
  ComponentRegistry} = require "nylas-exports"
 
@@ -89,7 +90,7 @@ class InjectedComponentSet extends React.Component
 
   render: =>
     @_renderedComponents = new Set()
-    flexboxProps = _.omit(@props, _.keys(@constructor.propTypes))
+    flexboxProps = Utils.fastOmit(@props, Object.keys(@constructor.propTypes))
     flexboxClassName = @props.className ? ""
     exposedProps = @props.exposedProps ? {}
 

src/components/key-commands-region.cjsx

@@ -182,7 +182,7 @@ class KeyCommandsRegion extends React.Component
     classname = classNames
       'key-commands-region': true
       'focused': @state.focused
-    otherProps = _.omit(@props, _.keys(@constructor.propTypes))
+    otherProps = _.omit(@props, Object.keys(@constructor.propTypes))
 
     <div className="#{classname} #{@props.className}" {...otherProps}>
       {@props.children}

src/components/list-tabular-item.cjsx

@@ -21,13 +21,13 @@ class ListTabularItem extends React.Component
     if not Utils.isEqualReact(@props.item, nextProps.item) or @props.columns isnt nextProps.columns
       @_columnCache = null
       return true
-    if not Utils.isEqualReact(_.omit(@props, 'item'), _.omit(nextProps, 'item'))
+    if not Utils.isEqualReact(Utils.fastOmit(@props, ['item']), Utils.fastOmit(nextProps, ['item']))
       return true
     false
 
   render: =>
     className = "list-item list-tabular-item #{@props.itemProps?.className}"
-    props = _.omit(@props.itemProps ? {}, 'className')
+    props = Utils.fastOmit(@props.itemProps ? {}, ['className'])
 
     # It's expensive to compute the contents of columns (format timestamps, etc.)
     # We only do it if the item prop has changed.
@@ -48,7 +48,7 @@ class ListTabularItem extends React.Component
 
       <div key={column.name}
            displayName={column.name}
-           style={_.pick(column, ['flex', 'width'])}
+           style={{flex: column.flex, width: column.width}}
            className="list-column list-column-#{column.name}">
         {column.resolver(@props.item, @)}
       </div>

src/components/list-tabular.cjsx

@@ -157,7 +157,7 @@ class ListTabular extends React.Component
     @setState(@buildStateForRange(start: rangeStart, end: rangeEnd))
 
   render: =>
-    otherProps = _.omit(@props, _.keys(@constructor.propTypes))
+    otherProps = Utils.fastOmit(@props, Object.keys(@constructor.propTypes))
 
     innerStyles =
       height: @state.count * @props.itemHeight

src/components/multiselect-list.cjsx

@@ -89,7 +89,7 @@ class MultiselectList extends React.Component
     # BAD:   onSelect={ (item) -> Actions.focusThread(item) }
     # GOOD:  onSelect={@_onSelectItem}
     #
-    otherProps = _.omit(@props, _.keys(@constructor.propTypes))
+    otherProps = Utils.fastOmit(@props, Object.keys(@constructor.propTypes))
 
     className = @props.className
     if @props.dataSource and @state.handler

src/components/resizable-region.cjsx

@@ -1,6 +1,7 @@
 React = require 'react'
 _ = require 'underscore'
-{Actions,
+{Utils,
+ Actions,
  ComponentRegistry,
  PriorityUICoordinator} = require "nylas-exports"
 
@@ -93,7 +94,7 @@ class ResizableRegion extends React.Component
       else
         containerStyle.flex = 1
 
-    otherProps = _.omit(@props, _.keys(@constructor.propTypes))
+    otherProps = Utils.fastOmit(@props, Object.keys(@constructor.propTypes))
 
     <div style={containerStyle} {...otherProps}>
       {@props.children}

src/components/retina-img.cjsx

@@ -121,7 +121,7 @@ class RetinaImg extends React.Component
       if key in StylesImpactedByZoom and val.indexOf('%') is -1
         style[key] = val.replace('px','') / style.zoom
 
-    otherProps = _.omit(@props, _.keys(@constructor.propTypes))
+    otherProps = Utils.fastOmit(@props, Object.keys(@constructor.propTypes))
     <img className={className} src={path} style={style} {...otherProps} />
 
   _pathFor: (name) =>

src/components/scroll-region.cjsx

@@ -199,7 +199,7 @@ class ScrollRegion extends React.Component
     })
 
   componentDidUpdate: (prevProps, prevState) =>
-    if (@props.children != prevProps.children)
+    if not @state.scrolling and @props.children isnt prevProps.children
       @recomputeDimensions()
 
   componentWillReceiveProps: (props) =>
@@ -234,7 +234,7 @@ class ScrollRegion extends React.Component
         scrollTooltipComponent={@props.scrollTooltipComponent}
         getScrollRegion={@_getSelf} />
 
-    otherProps = _.omit(@props, _.keys(@constructor.propTypes))
+    otherProps = Utils.fastOmit(@props, Object.keys(@constructor.propTypes))
 
     <div className={containerClasses} {...otherProps}>
       {@_scrollbarComponent}
@@ -379,6 +379,7 @@ class ScrollRegion extends React.Component
 
     @_onScrollEnd ?= _.debounce =>
       @_setSharedState(scrolling: false)
+      @recomputeDimensions()
       @props.onScrollEnd?(event)
     , 250
     @_onScrollEnd()

src/components/spinner.cjsx

@@ -103,7 +103,7 @@ class Spinner extends React.Component
       'zIndex': @props.zIndex+1 ? 1001
       'transform':'translate(-50%,-50%)'
 
-    otherProps = _.omit(@props, _.keys(@constructor.propTypes))
+    otherProps = _.omit(@props, Object.keys(@constructor.propTypes))
 
     <div className={spinnerClass} {...otherProps} style={style}>
       <div className="bounce1"></div>

src/components/swipe-container.jsx

@@ -1,6 +1,7 @@
 import React, {Component, PropTypes} from 'react';
 import _ from 'underscore';
 import {exec} from 'child_process';
+import {Utils} from 'nylas-exports';
 
 // This is a stripped down version of
 // https://github.com/michaelvillar/dynamics.js/blob/master/src/dynamics.coffee#L1179,
@@ -309,8 +310,7 @@ export default class SwipeContainer extends Component {
 
   render() {
     const {currentX, targetX} = this.state;
-    const otherProps = _.omit(this.props, _.keys(this.constructor.propTypes));
+    const otherProps = Utils.fastOmit(this.props, Object.keys(this.constructor.propTypes));
-
     const backingStyles = {top: 0, bottom: 0, position: 'absolute'};
     let backingClass = 'swipe-backing';
 

src/components/unsafe-component.cjsx

@@ -60,7 +60,7 @@ class UnsafeComponent extends React.Component
     node = React.findDOMNode(@)
     element = null
     try
-      props = _.omit(@props, _.keys(@constructor.propTypes))
+      props = Utils.fastOmit(@props, Object.keys(@constructor.propTypes))
       component = @props.component
       element = <component key={name} {...props} />
       @injected = React.render(element, node, @props.onComponentDidRender)

src/extensions/composer-extension-adapter.es6

@@ -40,7 +40,7 @@ export function adaptContenteditableMethod(extension, method, original = extensi
   extension[method] = (argsObj)=> {
     const {editor, event, mutations} = argsObj;
     const eventOrMutations = event || mutations || {};
-    const extraArgs = _.keys(_.omit(argsObj, ['editor', 'event', 'mutations'])).map(
+    const extraArgs = Object.keys(_.omit(argsObj, ['editor', 'event', 'mutations'])).map(
       key => argsObj[key]
     );
 

src/flux/models/query-subscription.es6

@@ -194,7 +194,7 @@ export default class QuerySubscription {
   _getMissingRange = (desiredRange, currentRange) => {
     if (currentRange && !currentRange.isInfinite() && !desiredRange.isInfinite()) {
       const ranges = QueryRange.rangesBySubtracting(desiredRange, currentRange);
-      return ranges.length > 1 ? desiredRange : ranges[0];
+      return (ranges.length === 1) ? ranges[0] : desiredRange;
     }
     return desiredRange;
   }

src/flux/models/utils.coffee

@@ -51,6 +51,11 @@ Utils =
   fullTimeString: (time) ->
     moment(time).tz(Utils.timeZone).format("dddd, MMMM Do YYYY, h:mm:ss a z")
 
+  fastOmit: (props, without) ->
+    otherProps = Object.assign({}, props)
+    delete otherProps[w] for w in without
+    otherProps
+
   isHash: (object) ->
     _.isObject(object) and not _.isFunction(object) and not _.isArray(object)
 
@@ -335,11 +340,11 @@ Utils =
     else
       # Deep compare objects.
       key = undefined
-      keys = _.keys(a)
+      keys = Object.keys(a)
       length = keys.length
       # Ensure that both objects contain the same number of properties
       # before comparing deep equality.
-      if (_.keys(b).length isnt length) then return false
+      if (Object.keys(b).length isnt length) then return false
       keysToIgnore = {}
       if options.ignoreKeys and _.isArray(options.ignoreKeys)
         keysToIgnore[key] = true for key in options.ignoreKeys

src/package-manager.coffee

@@ -474,7 +474,7 @@ class PackageManager
     null
 
   unloadPackages: ->
-    @unloadPackage(name) for name in _.keys(@loadedPackages)
+    @unloadPackage(name) for name in Object.keys(@loadedPackages)
     null
 
   unloadPackage: (name) ->

src/package.coffee

@@ -425,7 +425,7 @@ class Package
     if @bundledPackage and packagesCache[@name]?
       if packagesCache[@name].main
         @mainModulePath = "#{NylasEnv.packages.resourcePath}#{path.sep}#{packagesCache[@name].main}"
-        @mainModulePath = fs.resolveExtension(@mainModulePath, ["", _.keys(require.extensions)...])
+        @mainModulePath = fs.resolveExtension(@mainModulePath, ["", Object.keys(require.extensions)...])
       else
         @mainModulePath = null
     else
@@ -434,7 +434,7 @@ class Package
           path.join(@path, @metadata.main)
         else
           path.join(@path, 'index')
-      @mainModulePath = fs.resolveExtension(mainModulePath, ["", _.keys(require.extensions)...])
+      @mainModulePath = fs.resolveExtension(mainModulePath, ["", Object.keys(require.extensions)...])
 
   hasActivationCommands: ->
     for selector, commands of @getActivationCommands()