Added highlighting of search results

Summary:
Text of the component is now can be searched if flipper layout plugin
Flipper now highlight all the row if name of id or text of this component matched to the query

Reviewed By: priteshrnandgaonkar

Differential Revision: D16108315

fbshipit-source-id: ff5eb0bc4890f02c9b07e47c26b9ea1408d9c606

src/ui/components/colors.js

@@ -38,6 +38,7 @@ export const colors = {
   yellowTint: '#FEFBF2',
   purple: '#8C73C8', // Purple - Verbose
   purpleTint: '#E8E3F4',
+  purpleLight: '#ccc9d6', // purpleLight 90 - Highlighting row's background when it matches the query
   grey: '#88A2AB', // Grey - Debug
   greyTint: '#E7ECEE',
   greyTint2: '#e5e5e5', // Grey - Can be used in demarcation with greyStackTraceTint

src/ui/components/elements-inspector/elements.js

@@ -26,6 +26,8 @@ const ROW_HEIGHT = 23;
 const backgroundColor = props => {
   if (props.selected) {
     return colors.macOSTitleBarIconSelected;
+  } else if (props.isQueryMatch) {
+    return colors.purpleLight;
   } else if (props.focused) {
     return '#00CF52';
   } else if (props.even) {
@@ -197,6 +199,7 @@ type ElementsRowProps = {
   selected: boolean,
   focused: boolean,
   matchingSearchQuery: ?string,
+  isQueryMatch: boolean,
   element: Element,
   even: boolean,
   onElementSelected: (key: ElementID) => void,
@@ -353,6 +356,7 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
         onDoubleClick={this.onDoubleClick}
         onMouseEnter={this.onMouseEnter}
         onMouseLeave={this.onMouseLeave}
+        isQueryMatch={this.props.isQueryMatch}
         style={style}>
         <ElementsRowDecoration>
           {line}
@@ -372,6 +376,13 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
   }
 }
 
+function containsKeyInSearchResults(
+  searchResults: ?ElementSearchResultSet,
+  key: ElementID,
+) {
+  return searchResults != undefined && searchResults.matches.has(key);
+}
+
 const ElementsContainer = styled(FlexColumn)({
   backgroundColor: colors.white,
   minHeight: '100%',
@@ -600,10 +611,12 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
         selected={selected === row.key}
         focused={focused === row.key}
         matchingSearchQuery={
-          searchResults && searchResults.matches.has(row.key)
-            ? searchResults.query
+          containsKeyInSearchResults(searchResults, row.key)
+            ? //$FlowFixMe: Checked that searchResults is not undefined in containsKeyInSearchResults
+              searchResults.query
             : null
         }
+        isQueryMatch={containsKeyInSearchResults(searchResults, row.key)}
         element={row.element}
         elements={elements}
         childrenCount={childrenCount}