Dim component tags that are HOCs

Related Issue(s):
- facebook#676

As part of this:
- The test app that is used to work on the devtools now has a component which follows the common HOC naming convention of having 'HigherOrderComponent(Component)'

frontend/Node.js

@@ -182,6 +182,10 @@ class Node extends React.Component {
     var hovered = this.props.hovered;
     var isWindowFocused = this.state.isWindowFocused;
     var inverted = selected && isWindowFocused;
+    var name = node.get('name') + '';
+    var searchRegExp = this.props.searchRegExp;
+    var isHigherOrderComponent = name.match(/[A-Za-z]+\({1}[A-Za-z]+\){1}/g);
+    var dimmed = isHigherOrderComponent && !selected && !searchRegExp;
 
     var leftPad = {
       paddingLeft: 5 + (this.props.depth + 1) * 10,
@@ -253,22 +257,26 @@ class Node extends React.Component {
     }
 
     var isCustom = nodeType === 'Composite';
+    var isBottomTagSelected = this.props.isBottomTagSelected;
+
+    var topTagStyle = assign(
+        {},
+        inverted && !isBottomTagSelected ? styles.invertedTagName : (isCustom ? styles.customTagName : styles.tagName),
+        dimmed && styles.dimmedTag,
+    );
+
+    var bottomTagStyle = assign(
+        {},
+        inverted && isBottomTagSelected ? styles.invertedTagName : (isCustom ? styles.customTagName : styles.tagName),
+        dimmed && styles.dimmedTag,
+    );
 
-    var topTagStyle = inverted && !this.props.isBottomTagSelected ?
-      styles.invertedTagName :
-      (isCustom ? styles.customTagName : styles.tagName);
-    var bottomTagStyle = inverted && this.props.isBottomTagSelected ?
-      styles.invertedTagName :
-      (isCustom ? styles.customTagName : styles.tagName);
     var topTagTextStyle = assign(
       {},
       styles.tagText,
       inverted && !this.props.isBottomTagSelected && styles.tagTextInverted
     );
 
-    var name = node.get('name') + '';
-    var searchRegExp = this.props.searchRegExp;
-
     // If the user's filtering then highlight search terms in the tag name.
     // This will serve as a visual reminder that the visible tree is filtered.
     if (searchRegExp) {
@@ -519,6 +527,11 @@ var styles = {
     backgroundColor: 'rgb(218, 218, 218)',
   },
 
+  // When a component is a higher order component, this is used.
+  dimmedTag: {
+    opacity: 0.5,
+  },
+
   tail: {
     borderTop: '1px solid transparent',
     cursor: 'default',