fix(search): search perf and fix css issues

internal_packages/message-list/lib/message-list.cjsx

@@ -193,9 +193,13 @@ class MessageList extends React.Component
       "messages-wrap": true
       "ready": not @state.loading
 
+    messageListClass = classNames
+      "message-list": true
+      "height-fix": SearchableComponentStore.searchTerm isnt null
+
     <KeyCommandsRegion globalHandlers={@_globalKeymapHandlers()}>
       <FindInThread ref="findInThread" />
-      <div className="message-list" id="message-list">
+      <div className={messageListClass} id="message-list">
         <ScrollRegion tabIndex="-1"
              className={wrapClass}
              scrollbarTickProvider={SearchableComponentStore}

internal_packages/message-list/stylesheets/find-in-thread.less

@@ -7,16 +7,17 @@ body.platform-win32 {
 
 .find-in-thread {
   background: @background-secondary;
-  border-bottom: 1px solid @border-secondary-bg;
   text-align: right;
   overflow: hidden;
 
   height: 0;
   padding: 0 8px;
   transition: all 125ms ease-in-out;
+  border-bottom: 0;
   &.enabled {
     padding: 4px 8px;
     height: 35px;
+    border-bottom: 1px solid @border-secondary-bg;
   }
 
   .controls-wrap {

internal_packages/message-list/stylesheets/message-list.less

@@ -112,12 +112,18 @@ body.platform-win32 {
   img { background: @text-color-subtle; }
 }
 
+#message-list.height-fix {
+  height: calc(~"100% - 35px");
+  min-height: calc(~"100% - 35px");
+}
+
 #message-list {
   display: flex;
   flex-direction: column;
   position: relative;
   background: @background-secondary;
 
+  transition: all 125ms ease-in-out;
   width: 100%;
   height: 100%;
   min-height: 100%;

src/flux/stores/searchable-component-store.es6

@@ -2,6 +2,7 @@ import _ from 'underscore'
 import DOMUtils from '../../dom-utils'
 import NylasStore from 'nylas-store'
 import Actions from '../actions'
+import {MAX_MATCHES, CHAR_THRESHOLD} from '../../searchable-components/search-constants'
 
 class SearchableComponentStore extends NylasStore {
   constructor() {
@@ -74,8 +75,11 @@ class SearchableComponentStore extends NylasStore {
     // root document.
     const searchNodes = []
 
-    if (this.searchTerm && this.searchTerm.length > 0) {
+    if (this.searchTerm && this.searchTerm.length >= CHAR_THRESHOLD) {
       _.each(this.searchRegions, (node) => {
+        if (this.matches.length >= MAX_MATCHES) {
+          return;
+        }
         let refNode;
         let topOffset = 0;
         let leftOffset = 0;
@@ -104,6 +108,9 @@ class SearchableComponentStore extends NylasStore {
             left: rect.left + leftOffset,
             height: rect.height,
           });
+          if (this.matches.length >= MAX_MATCHES) {
+            break;
+          }
         }
       });
       this.matches.sort((nodeA, nodeB) => {

src/searchable-components/search-constants.es6

@@ -0,0 +1,2 @@
+export const MAX_MATCHES = 999;
+export const CHAR_THRESHOLD = 2;

src/searchable-components/unified-dom-parser.es6

@@ -1,4 +1,5 @@
 import {Utils} from 'nylas-exports'
+import {MAX_MATCHES, CHAR_THRESHOLD} from './search-constants'
 
 export default class UnifiedDOMParser {
   constructor(regionId) {
@@ -7,7 +8,7 @@ export default class UnifiedDOMParser {
   }
 
   matchesSearch(dom, searchTerm) {
-    if ((searchTerm || "").trim().length === 0) { return false; }
+    if ((searchTerm || "").trim().length < CHAR_THRESHOLD) { return false; }
     const fullStrings = this.buildNormalizedText(dom)
     // For each match, we return an array of new elements.
     for (const fullString of fullStrings) {
@@ -59,7 +60,7 @@ export default class UnifiedDOMParser {
     const matches = []
     let matchCount = 0;
     let match = re.exec(rawString);
-    while (match && matchCount < 1000) {
+    while (match && matchCount <= MAX_MATCHES) {
       const matchStart = match.index;
       const matchEnd = match.index + match[0].length;
       matches.push([matchStart, matchEnd])