Introduce highlight manager, add scroll on highlight

Summary:
Introduced a highlight manager, which prevents drilling the highlight through the entire component tree and causing too many re-renders.

Also smartly optimizes that non-matched highlighted text doesn't render unnecessarily, and debounces the updates.

Finally, automatically scroll to the first highlight.

Reviewed By: jknoxville

Differential Revision: D21348575

fbshipit-source-id: 71f7ba2e981ad3fc1ea7f5e7043645e6b6811fb7

desktop/app/src/ui/components/data-inspector/ManagedDataInspector.tsx

@@ -12,6 +12,7 @@ import {PureComponent} from 'react';
 import DataInspector from './DataInspector';
 import React from 'react';
 import {DataValueExtractor} from './DataPreview';
+import {HighlightProvider} from '../Highlight';
 
 type ManagedDataInspectorProps = {
   /**
@@ -147,19 +148,20 @@ export default class ManagedDataInspector extends PureComponent<
 
   render() {
     return (
-      <DataInspector
-        data={this.props.data}
-        diff={this.props.diff}
-        extractValue={this.props.extractValue}
-        setValue={this.props.setValue}
-        expanded={this.state.expanded}
-        onExpanded={this.onExpanded}
-        onDelete={this.props.onDelete}
-        expandRoot={this.props.expandRoot}
-        collapsed={this.props.filter ? true : this.props.collapsed}
-        tooltips={this.props.tooltips}
-        highlight={this.props.filter}
-      />
+      <HighlightProvider text={this.props.filter}>
+        <DataInspector
+          data={this.props.data}
+          diff={this.props.diff}
+          extractValue={this.props.extractValue}
+          setValue={this.props.setValue}
+          expanded={this.state.expanded}
+          onExpanded={this.onExpanded}
+          onDelete={this.props.onDelete}
+          expandRoot={this.props.expandRoot}
+          collapsed={this.props.filter ? true : this.props.collapsed}
+          tooltips={this.props.tooltips}
+        />
+      </HighlightProvider>
     );
   }
 }