From 3a111720f63716754812335490f4c79024b85c6a Mon Sep 17 00:00:00 2001
From: "Diogo Franco (Kovensky)" <diogomfranco@gmail.com>
Date: Fri, 9 Mar 2018 19:28:06 +0900
Subject: [PATCH 01/17] Support hiding components in devtools with
 Symbol.for('react.devtools.hide')

---
 backend/attachRendererFiber.js |  7 +++++++
 backend/getData.js             |  4 ++++
 frontend/Node.js               |  6 ++++--
 frontend/Panel.js              |  2 ++
 frontend/PreferencesPanel.js   | 26 +++++++++++++++++++++++---
 frontend/Store.js              |  9 ++++++++-
 test/example/target.js         |  3 +++
 7 files changed, 51 insertions(+), 6 deletions(-)

diff --git a/backend/attachRendererFiber.js b/backend/attachRendererFiber.js
index 84ac4b1b42..ba5058c0cd 100644
--- a/backend/attachRendererFiber.js
+++ b/backend/attachRendererFiber.js
@@ -153,6 +153,7 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
     var nodeType = null;
     var name = null;
     var text = null;
+    var hideSymbol = null;
 
     // Profiler data
     var actualDuration = null;
@@ -176,12 +177,16 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
         publicInstance = fiber.stateNode;
         props = fiber.memoizedProps;
         state = fiber.memoizedState;
+        hideSymbol = typeof Symbol === 'function' && fiber.type[Symbol.for('react.devtools.hide')];
         if (publicInstance != null) {
           context = publicInstance.context;
           if (context && Object.keys(context).length === 0) {
             context = null;
           }
         }
+        if (name === 'HigherOrderComponent') {
+          console.log('fiber backend', fiber);
+        }
         const inst = publicInstance;
         if (inst) {
           updater = {
@@ -360,6 +365,8 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
       actualDuration,
       actualStartTime,
       treeBaseDuration,
+
+      hideSymbol,
     };
   }
 
diff --git a/backend/getData.js b/backend/getData.js
index cccb4fa1e4..0ed1f484bf 100644
--- a/backend/getData.js
+++ b/backend/getData.js
@@ -165,6 +165,9 @@ function getData(internalInstance: Object): DataType {
     };
   }
 
+  const hideSymbol = nodeType === 'Composite' && typeof Symbol === 'function' && type[Symbol.for('react.devtools.hide')];
+
+
   // $FlowFixMe
   return {
     nodeType,
@@ -180,6 +183,7 @@ function getData(internalInstance: Object): DataType {
     text,
     updater,
     publicInstance,
+    hideSymbol,
   };
 }
 
diff --git a/frontend/Node.js b/frontend/Node.js
index f82fff87d2..b8971acd0f 100644
--- a/frontend/Node.js
+++ b/frontend/Node.js
@@ -32,6 +32,7 @@ type PropsType = {
   isBottomTagSelected: boolean,
   searchRegExp: ?RegExp,
   wrappedChildren: ?Array<any>,
+  hideSymbol: boolean,
   onHover: (isHovered: boolean) => void,
   onHoverBottom: (isHovered: boolean) => void,
   onContextMenu: () => void,
@@ -202,7 +203,7 @@ class Node extends React.Component<PropsType, StateType> {
 
     let children = node.get('children');
 
-    if (node.get('nodeType') === 'Wrapper') {
+    if (node.get('nodeType') === 'Wrapper' || (this.props.hideSymbol && node.get('hideSymbol'))) {
       return children.map(child =>
         <WrappedNode key={child} id={child} depth={depth}/>
       );
@@ -418,7 +419,7 @@ Node.contextTypes = {
 
 var WrappedNode = decorate({
   listeners(props) {
-    return [props.id];
+    return [props.id, 'hideSymbol'];
   },
   props(store, props) {
     var node = store.get(props.id);
@@ -435,6 +436,7 @@ var WrappedNode = decorate({
       isBottomTagHovered: store.isBottomTagHovered,
       hovered: store.hovered === props.id,
       searchRegExp: props.searchRegExp,
+      hideSymbol: store.hideSymbol,
       onToggleCollapse: e => {
         e.preventDefault();
         store.toggleCollapse(props.id);
diff --git a/frontend/Panel.js b/frontend/Panel.js
index e69ef452ec..2ecf9d21ba 100644
--- a/frontend/Panel.js
+++ b/frontend/Panel.js
@@ -71,6 +71,7 @@ type State = {
   themeKey: number,
   themeName: ?string,
   showTroubleshooting: boolean,
+  hideSymbol: boolean,
 };
 
 class Panel extends React.Component<Props, State> {
@@ -99,6 +100,7 @@ class Panel extends React.Component<Props, State> {
       isReact: props.alreadyFoundReact,
       themeKey: 0,
       themeName: props.themeName,
+      hideSymbol: true,
     };
     this._unMounted = false;
     window.panel = this;
diff --git a/frontend/PreferencesPanel.js b/frontend/PreferencesPanel.js
index 58d810bc2e..b9e91d9df9 100644
--- a/frontend/PreferencesPanel.js
+++ b/frontend/PreferencesPanel.js
@@ -27,9 +27,11 @@ import type {Theme} from './types';
 
 type Props = {
   changeTheme: (themeName: string) => void,
+  changeHideSymbol: (enabled: boolean) => void,
   hasCustomTheme: boolean,
   hide: () => void,
   open: bool,
+  hideSymbol: bool,
 };
 
 type State = {
@@ -44,7 +46,7 @@ class PreferencesPanel extends React.Component<Props, State> {
     showHiddenThemes: boolean,
     theme: Theme,
     themeName: string,
-    themes: { [key: string]: Theme },
+    themes: { [key: string]: Theme }
   };
 
   constructor(props, context) {
@@ -69,7 +71,7 @@ class PreferencesPanel extends React.Component<Props, State> {
 
   render() {
     const {browserName, showHiddenThemes, theme, themeName, themes} = this.context;
-    const {hasCustomTheme, hide, open} = this.props;
+    const {hasCustomTheme, hide, open, hideSymbol} = this.props;
     const {editMode} = this.state;
 
     if (!open) {
@@ -118,6 +120,16 @@ class PreferencesPanel extends React.Component<Props, State> {
               <EditIcon />
             </EditButton>
           </div>
+          <div>
+            <label>
+              <input
+                type="checkbox"
+                checked={hideSymbol}
+                onChange={this._changeHideSymbol}
+              />
+              Hide components with truthy <code>Symbol.for('react.devtools.hide')</code> property
+            </label>
+          </div>
           <div style={styles.buttonBar}>
             <button
               onClick={hide}
@@ -143,6 +155,12 @@ class PreferencesPanel extends React.Component<Props, State> {
     changeTheme(event.target.value);
   };
 
+  _changeHideSymbol = (event) => {
+    const {changeHideSymbol} = this.props;
+
+    changeHideSymbol(event.target.checked);
+  }
+
   _hide = () => {
     const {hide} = this.props;
     const {editMode} = this.state;
@@ -208,14 +226,16 @@ const blockClick = event => event.stopPropagation();
 
 const WrappedPreferencesPanel = decorate({
   listeners() {
-    return ['preferencesPanelShown'];
+    return ['preferencesPanelShown', 'hideSymbol'];
   },
   props(store, props) {
     return {
       changeTheme: themeName => store.changeTheme(themeName),
+      changeHideSymbol: enabled => store.changeHideSymbol(enabled),
       hasCustomTheme: !!store.themeStore.customTheme,
       hide: () => store.hidePreferencesPanel(),
       open: store.preferencesPanelShown,
+      hideSymbol: store.hideSymbol,
     };
   },
 }, PreferencesPanel);
diff --git a/frontend/Store.js b/frontend/Store.js
index efc5530f4a..8aba262a64 100644
--- a/frontend/Store.js
+++ b/frontend/Store.js
@@ -108,6 +108,7 @@ class Store extends EventEmitter {
   selectedTab: string;
   selected: ?ElementID;
   themeStore: ThemeStore;
+  hideSymbol: boolean;
   breadcrumbHead: ?ElementID;
   snapshotQueue: Array<Snapshot> = [];
   // an object describing the capabilities of the inspected runtime.
@@ -142,6 +143,7 @@ class Store extends EventEmitter {
     this.colorizerState = null;
     this.refreshSearch = false;
     this.themeStore = themeStore;
+    this.hideSymbol = true;
 
     // for debugging
     window.store = this;
@@ -378,6 +380,11 @@ class Store extends EventEmitter {
     this.emit('theme');
   }
 
+  changeHideSymbol(enabled: boolean) {
+    this.hideSymbol = enabled;
+    this.emit('hideSymbol');
+  }
+
   showPreferencesPanel() {
     this.preferencesPanelShown = true;
     this.emit('preferencesPanelShown');
@@ -520,7 +527,7 @@ class Store extends EventEmitter {
       var node = this.get(id);
       var nodeType = node.get('nodeType');
 
-      if (nodeType !== 'Wrapper' && nodeType !== 'Native') {
+      if (nodeType !== 'Wrapper' && nodeType !== 'Native' && !(nodeType === 'Composite' && this.hideSymbol && node.get('hideSymbol'))) {
         return id;
       }
       if (nodeType === 'Native' && (!up || this.get(this._parents.get(id)).get('nodeType') !== 'NativeWrapper')) {
diff --git a/test/example/target.js b/test/example/target.js
index a99b498298..ac5e1cd339 100644
--- a/test/example/target.js
+++ b/test/example/target.js
@@ -505,6 +505,9 @@ function wrapWithHoc(Component) {
       return <div><Component /></div>;
     }
   }
+  if (typeof Symbol === 'function') {
+    HigherOrderComponent[Symbol.for('react.devtools.hide')] = true;
+  }
 
   return HigherOrderComponent;
 }

From 223b073e6dccfb9e19b4d89c6d75cda2a5f50ac9 Mon Sep 17 00:00:00 2001
From: "Diogo Franco (Kovensky)" <diogomfranco@gmail.com>
Date: Fri, 9 Mar 2018 19:30:25 +0900
Subject: [PATCH 02/17] Correctly listen to hideSymbol updates in Breadcrumb

---
 frontend/Breadcrumb.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/Breadcrumb.js b/frontend/Breadcrumb.js
index 5d92698f0f..4d011a433a 100644
--- a/frontend/Breadcrumb.js
+++ b/frontend/Breadcrumb.js
@@ -163,7 +163,7 @@ function getBreadcrumbPath(store: Store): BreadcrumbPath {
 }
 
 module.exports = decorate({
-  listeners: () => ['breadcrumbHead', 'selected'],
+  listeners: () => ['breadcrumbHead', 'selected', 'hideSymbol'],
   props(store, props) {
     return {
       select: id => store.selectBreadcrumb(id),

From b5bbe0354787b53366818a8dcb787919735dfdaa Mon Sep 17 00:00:00 2001
From: "Diogo Franco (Kovensky)" <diogomfranco@gmail.com>
Date: Fri, 9 Mar 2018 19:43:17 +0900
Subject: [PATCH 03/17] Fix flow error, style

---
 backend/getData.js           | 6 ++++--
 frontend/PreferencesPanel.js | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/backend/getData.js b/backend/getData.js
index 0ed1f484bf..72e711deb1 100644
--- a/backend/getData.js
+++ b/backend/getData.js
@@ -165,8 +165,10 @@ function getData(internalInstance: Object): DataType {
     };
   }
 
-  const hideSymbol = nodeType === 'Composite' && typeof Symbol === 'function' && type[Symbol.for('react.devtools.hide')];
-
+  const hideSymbol = nodeType === 'Composite' &&
+    typeof Symbol === 'function' &&
+    typeof type === 'function' &&
+    type[Symbol.for('react.devtools.hide')];
 
   // $FlowFixMe
   return {
diff --git a/frontend/PreferencesPanel.js b/frontend/PreferencesPanel.js
index b9e91d9df9..642444cd65 100644
--- a/frontend/PreferencesPanel.js
+++ b/frontend/PreferencesPanel.js
@@ -46,7 +46,7 @@ class PreferencesPanel extends React.Component<Props, State> {
     showHiddenThemes: boolean,
     theme: Theme,
     themeName: string,
-    themes: { [key: string]: Theme }
+    themes: { [key: string]: Theme },
   };
 
   constructor(props, context) {

From 6eff3431c0b45f8c017cdd25f6f22af031f023b1 Mon Sep 17 00:00:00 2001
From: Gvozd <gvozdev.viktor@gmail.com>
Date: Sun, 14 Oct 2018 00:18:02 +0300
Subject: [PATCH 04/17] Clean after rebase

---
 backend/attachRendererFiber.js | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/backend/attachRendererFiber.js b/backend/attachRendererFiber.js
index ba5058c0cd..abe71da5e4 100644
--- a/backend/attachRendererFiber.js
+++ b/backend/attachRendererFiber.js
@@ -184,9 +184,6 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
             context = null;
           }
         }
-        if (name === 'HigherOrderComponent') {
-          console.log('fiber backend', fiber);
-        }
         const inst = publicInstance;
         if (inst) {
           updater = {
@@ -360,13 +357,12 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
       text,
       updater,
       publicInstance,
+      hideSymbol,
 
       // Profiler data
       actualDuration,
       actualStartTime,
       treeBaseDuration,
-
-      hideSymbol,
     };
   }
 

From 0bdd7c98e060a1c4bbd37125402dd4814d26aa9d Mon Sep 17 00:00:00 2001
From: Gvozd <gvozdev.viktor@gmail.com>
Date: Sun, 14 Oct 2018 01:00:39 +0300
Subject: [PATCH 05/17] Option for hide components with displayName(usually
 HOC)

---
 backend/attachRendererFiber.js |  3 +++
 backend/getData.js             |  4 ++++
 frontend/Breadcrumb.js         |  2 +-
 frontend/Node.js               | 10 ++++++++--
 frontend/Panel.js              |  2 ++
 frontend/PreferencesPanel.js   | 24 ++++++++++++++++++++++--
 frontend/Store.js              | 13 ++++++++++++-
 test/example/target.js         |  1 +
 8 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/backend/attachRendererFiber.js b/backend/attachRendererFiber.js
index abe71da5e4..942973f2f6 100644
--- a/backend/attachRendererFiber.js
+++ b/backend/attachRendererFiber.js
@@ -154,6 +154,7 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
     var name = null;
     var text = null;
     var hideSymbol = null;
+    var hideDisplayNamed = null;
 
     // Profiler data
     var actualDuration = null;
@@ -178,6 +179,7 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
         props = fiber.memoizedProps;
         state = fiber.memoizedState;
         hideSymbol = typeof Symbol === 'function' && fiber.type[Symbol.for('react.devtools.hide')];
+        hideDisplayNamed = fiber.type.hasOwnProperty('displayName');
         if (publicInstance != null) {
           context = publicInstance.context;
           if (context && Object.keys(context).length === 0) {
@@ -358,6 +360,7 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
       updater,
       publicInstance,
       hideSymbol,
+      hideDisplayNamed,
 
       // Profiler data
       actualDuration,
diff --git a/backend/getData.js b/backend/getData.js
index 72e711deb1..626e0783a5 100644
--- a/backend/getData.js
+++ b/backend/getData.js
@@ -169,6 +169,9 @@ function getData(internalInstance: Object): DataType {
     typeof Symbol === 'function' &&
     typeof type === 'function' &&
     type[Symbol.for('react.devtools.hide')];
+  const hideDisplayNamed = nodeType === 'Composite' &&
+    typeof type === 'function' &&
+    type.hasOwnProperty('displayName');
 
   // $FlowFixMe
   return {
@@ -186,6 +189,7 @@ function getData(internalInstance: Object): DataType {
     updater,
     publicInstance,
     hideSymbol,
+    hideDisplayNamed,
   };
 }
 
diff --git a/frontend/Breadcrumb.js b/frontend/Breadcrumb.js
index 4d011a433a..9869bd6e74 100644
--- a/frontend/Breadcrumb.js
+++ b/frontend/Breadcrumb.js
@@ -163,7 +163,7 @@ function getBreadcrumbPath(store: Store): BreadcrumbPath {
 }
 
 module.exports = decorate({
-  listeners: () => ['breadcrumbHead', 'selected', 'hideSymbol'],
+  listeners: () => ['breadcrumbHead', 'selected', 'hideSymbol', 'hideDisplayNamed'],
   props(store, props) {
     return {
       select: id => store.selectBreadcrumb(id),
diff --git a/frontend/Node.js b/frontend/Node.js
index b8971acd0f..0766c9f0b5 100644
--- a/frontend/Node.js
+++ b/frontend/Node.js
@@ -33,6 +33,7 @@ type PropsType = {
   searchRegExp: ?RegExp,
   wrappedChildren: ?Array<any>,
   hideSymbol: boolean,
+  hideDisplayNamed: boolean,
   onHover: (isHovered: boolean) => void,
   onHoverBottom: (isHovered: boolean) => void,
   onContextMenu: () => void,
@@ -203,7 +204,11 @@ class Node extends React.Component<PropsType, StateType> {
 
     let children = node.get('children');
 
-    if (node.get('nodeType') === 'Wrapper' || (this.props.hideSymbol && node.get('hideSymbol'))) {
+    if (
+        node.get('nodeType') === 'Wrapper' ||
+        (this.props.hideSymbol && node.get('hideSymbol')) ||
+        (this.props.hideDisplayNamed && node.get('hideDisplayNamed'))
+    ) {
       return children.map(child =>
         <WrappedNode key={child} id={child} depth={depth}/>
       );
@@ -419,7 +424,7 @@ Node.contextTypes = {
 
 var WrappedNode = decorate({
   listeners(props) {
-    return [props.id, 'hideSymbol'];
+    return [props.id, 'hideSymbol', 'hideDisplayNamed'];
   },
   props(store, props) {
     var node = store.get(props.id);
@@ -437,6 +442,7 @@ var WrappedNode = decorate({
       hovered: store.hovered === props.id,
       searchRegExp: props.searchRegExp,
       hideSymbol: store.hideSymbol,
+      hideDisplayNamed: store.hideDisplayNamed,
       onToggleCollapse: e => {
         e.preventDefault();
         store.toggleCollapse(props.id);
diff --git a/frontend/Panel.js b/frontend/Panel.js
index 2ecf9d21ba..7cad9b1c25 100644
--- a/frontend/Panel.js
+++ b/frontend/Panel.js
@@ -72,6 +72,7 @@ type State = {
   themeName: ?string,
   showTroubleshooting: boolean,
   hideSymbol: boolean,
+  hideDisplayNamed: boolean,
 };
 
 class Panel extends React.Component<Props, State> {
@@ -101,6 +102,7 @@ class Panel extends React.Component<Props, State> {
       themeKey: 0,
       themeName: props.themeName,
       hideSymbol: true,
+      hideDisplayNamed: true,
     };
     this._unMounted = false;
     window.panel = this;
diff --git a/frontend/PreferencesPanel.js b/frontend/PreferencesPanel.js
index 642444cd65..094ca9608c 100644
--- a/frontend/PreferencesPanel.js
+++ b/frontend/PreferencesPanel.js
@@ -28,10 +28,12 @@ import type {Theme} from './types';
 type Props = {
   changeTheme: (themeName: string) => void,
   changeHideSymbol: (enabled: boolean) => void,
+  changeHideDisplayNamed: (enabled: boolean) => void,
   hasCustomTheme: boolean,
   hide: () => void,
   open: bool,
   hideSymbol: bool,
+  hideDisplayNamed: bool,
 };
 
 type State = {
@@ -71,7 +73,7 @@ class PreferencesPanel extends React.Component<Props, State> {
 
   render() {
     const {browserName, showHiddenThemes, theme, themeName, themes} = this.context;
-    const {hasCustomTheme, hide, open, hideSymbol} = this.props;
+    const {hasCustomTheme, hide, open, hideSymbol, hideDisplayNamed} = this.props;
     const {editMode} = this.state;
 
     if (!open) {
@@ -130,6 +132,16 @@ class PreferencesPanel extends React.Component<Props, State> {
               Hide components with truthy <code>Symbol.for('react.devtools.hide')</code> property
             </label>
           </div>
+          <div>
+            <label>
+              <input
+                type="checkbox"
+                checked={hideDisplayNamed}
+                onChange={this._changeHideDisplayNamed}
+              />
+              Hide components with custom <code>displayName</code> property
+            </label>
+          </div>
           <div style={styles.buttonBar}>
             <button
               onClick={hide}
@@ -161,6 +173,12 @@ class PreferencesPanel extends React.Component<Props, State> {
     changeHideSymbol(event.target.checked);
   }
 
+  _changeHideDisplayNamed = (event) => {
+    const {changeHideDisplayNamed} = this.props;
+
+    changeHideDisplayNamed(event.target.checked);
+  }
+
   _hide = () => {
     const {hide} = this.props;
     const {editMode} = this.state;
@@ -226,16 +244,18 @@ const blockClick = event => event.stopPropagation();
 
 const WrappedPreferencesPanel = decorate({
   listeners() {
-    return ['preferencesPanelShown', 'hideSymbol'];
+    return ['preferencesPanelShown', 'hideSymbol', 'hideDisplayNamed'];
   },
   props(store, props) {
     return {
       changeTheme: themeName => store.changeTheme(themeName),
       changeHideSymbol: enabled => store.changeHideSymbol(enabled),
+      changeHideDisplayNamed: enabled => store.changeHideDisplayNamed(enabled),
       hasCustomTheme: !!store.themeStore.customTheme,
       hide: () => store.hidePreferencesPanel(),
       open: store.preferencesPanelShown,
       hideSymbol: store.hideSymbol,
+      hideDisplayNamed: store.hideDisplayNamed,
     };
   },
 }, PreferencesPanel);
diff --git a/frontend/Store.js b/frontend/Store.js
index 8aba262a64..2c3cb7604b 100644
--- a/frontend/Store.js
+++ b/frontend/Store.js
@@ -109,6 +109,7 @@ class Store extends EventEmitter {
   selected: ?ElementID;
   themeStore: ThemeStore;
   hideSymbol: boolean;
+  hideDisplayNamed: boolean;
   breadcrumbHead: ?ElementID;
   snapshotQueue: Array<Snapshot> = [];
   // an object describing the capabilities of the inspected runtime.
@@ -144,6 +145,7 @@ class Store extends EventEmitter {
     this.refreshSearch = false;
     this.themeStore = themeStore;
     this.hideSymbol = true;
+    this.hideDisplayNamed = true;
 
     // for debugging
     window.store = this;
@@ -385,6 +387,11 @@ class Store extends EventEmitter {
     this.emit('hideSymbol');
   }
 
+  changeHideDisplayNamed(enabled: boolean) {
+    this.hideDisplayNamed = enabled;
+    this.emit('hideDisplayNamed');
+  }
+
   showPreferencesPanel() {
     this.preferencesPanelShown = true;
     this.emit('preferencesPanelShown');
@@ -527,7 +534,11 @@ class Store extends EventEmitter {
       var node = this.get(id);
       var nodeType = node.get('nodeType');
 
-      if (nodeType !== 'Wrapper' && nodeType !== 'Native' && !(nodeType === 'Composite' && this.hideSymbol && node.get('hideSymbol'))) {
+      if (
+          nodeType !== 'Wrapper' && nodeType !== 'Native' &&
+          !(nodeType === 'Composite' && this.hideSymbol && node.get('hideSymbol')) &&
+          !(nodeType === 'Composite' && this.hideDisplayNamed && node.get('hideDisplayNamed'))
+      ) {
         return id;
       }
       if (nodeType === 'Native' && (!up || this.get(this._parents.get(id)).get('nodeType') !== 'NativeWrapper')) {
diff --git a/test/example/target.js b/test/example/target.js
index ac5e1cd339..b9f53a74fa 100644
--- a/test/example/target.js
+++ b/test/example/target.js
@@ -505,6 +505,7 @@ function wrapWithHoc(Component) {
       return <div><Component /></div>;
     }
   }
+  HigherOrderComponent.displayName = 'HigherOrderComponent(Nested)';
   if (typeof Symbol === 'function') {
     HigherOrderComponent[Symbol.for('react.devtools.hide')] = true;
   }

From a132e4dbae461d618c04241cde853a1abe102f88 Mon Sep 17 00:00:00 2001
From: Gvozd <gvozdev.viktor@gmail.com>
Date: Sun, 14 Oct 2018 16:28:45 +0300
Subject: [PATCH 06/17] Default disable hide options If they checked by default
 - that is breakable change

---
 frontend/Store.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/Store.js b/frontend/Store.js
index 2c3cb7604b..2c91e03527 100644
--- a/frontend/Store.js
+++ b/frontend/Store.js
@@ -144,8 +144,8 @@ class Store extends EventEmitter {
     this.colorizerState = null;
     this.refreshSearch = false;
     this.themeStore = themeStore;
-    this.hideSymbol = true;
-    this.hideDisplayNamed = true;
+    this.hideSymbol = false;
+    this.hideDisplayNamed = false;
 
     // for debugging
     window.store = this;

From b7a6e15ce06ffc2bf20ee3d0c1c9cf22d0f84bf7 Mon Sep 17 00:00:00 2001
From: Gvozd <gvozdev.viktor@gmail.com>
Date: Sun, 14 Oct 2018 16:39:09 +0300
Subject: [PATCH 07/17] Remove unnecessary code

---
 frontend/Panel.js | 4 ----
 frontend/Store.js | 4 ++--
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/Panel.js b/frontend/Panel.js
index 7cad9b1c25..e69ef452ec 100644
--- a/frontend/Panel.js
+++ b/frontend/Panel.js
@@ -71,8 +71,6 @@ type State = {
   themeKey: number,
   themeName: ?string,
   showTroubleshooting: boolean,
-  hideSymbol: boolean,
-  hideDisplayNamed: boolean,
 };
 
 class Panel extends React.Component<Props, State> {
@@ -101,8 +99,6 @@ class Panel extends React.Component<Props, State> {
       isReact: props.alreadyFoundReact,
       themeKey: 0,
       themeName: props.themeName,
-      hideSymbol: true,
-      hideDisplayNamed: true,
     };
     this._unMounted = false;
     window.panel = this;
diff --git a/frontend/Store.js b/frontend/Store.js
index 2c91e03527..056ff4d474 100644
--- a/frontend/Store.js
+++ b/frontend/Store.js
@@ -536,8 +536,8 @@ class Store extends EventEmitter {
 
       if (
           nodeType !== 'Wrapper' && nodeType !== 'Native' &&
-          !(nodeType === 'Composite' && this.hideSymbol && node.get('hideSymbol')) &&
-          !(nodeType === 'Composite' && this.hideDisplayNamed && node.get('hideDisplayNamed'))
+          !(this.hideSymbol && node.get('hideSymbol')) &&
+          !(this.hideDisplayNamed && node.get('hideDisplayNamed'))
       ) {
         return id;
       }

From bc2151bdb2e5c7bfcee893a0275258138ec7f4a2 Mon Sep 17 00:00:00 2001
From: Gvozd <gvozdev.viktor@gmail.com>
Date: Mon, 15 Oct 2018 23:41:02 +0300
Subject: [PATCH 08/17] Save hide-options to persistent storage

---
 frontend/Store.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/Store.js b/frontend/Store.js
index 056ff4d474..5094f02180 100644
--- a/frontend/Store.js
+++ b/frontend/Store.js
@@ -20,6 +20,10 @@ var serializePropsForCopy = require('../utils/serializePropsForCopy');
 var invariant = require('./invariant');
 var SearchUtils = require('./SearchUtils');
 var ThemeStore = require('./Themes/Store');
+var {get, set} = require('../utils/storage');
+
+const LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL = 'preferences:hideSymbol';
+const LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED = 'preferences:hideDisplayNamed';
 
 import type Bridge from '../agent/Bridge';
 import type {ControlState, DOMEvent, ElementID, Theme} from './types';
@@ -144,8 +148,8 @@ class Store extends EventEmitter {
     this.colorizerState = null;
     this.refreshSearch = false;
     this.themeStore = themeStore;
-    this.hideSymbol = false;
-    this.hideDisplayNamed = false;
+    this.hideSymbol = get(LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL, false);
+    this.hideDisplayNamed = get(LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED, false);
 
     // for debugging
     window.store = this;
@@ -384,11 +388,13 @@ class Store extends EventEmitter {
 
   changeHideSymbol(enabled: boolean) {
     this.hideSymbol = enabled;
+    set(LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL, enabled);
     this.emit('hideSymbol');
   }
 
   changeHideDisplayNamed(enabled: boolean) {
     this.hideDisplayNamed = enabled;
+    set(LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED, enabled);
     this.emit('hideDisplayNamed');
   }
 

From f52b3558a8951ca64aa2f2f35f9f1ec38ba7941b Mon Sep 17 00:00:00 2001
From: Gvozd <gvozdev.viktor@gmail.com>
Date: Sun, 21 Oct 2018 18:47:43 +0300
Subject: [PATCH 09/17] Refactoring: extract method for hidden nodes

---
 frontend/Node.js           | 12 +++---------
 frontend/Store.js          | 11 ++++++-----
 frontend/Themes/Preview.js |  1 +
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/frontend/Node.js b/frontend/Node.js
index 0766c9f0b5..ddc76351b1 100644
--- a/frontend/Node.js
+++ b/frontend/Node.js
@@ -32,8 +32,7 @@ type PropsType = {
   isBottomTagSelected: boolean,
   searchRegExp: ?RegExp,
   wrappedChildren: ?Array<any>,
-  hideSymbol: boolean,
-  hideDisplayNamed: boolean,
+  isHiddenNode: boolean,
   onHover: (isHovered: boolean) => void,
   onHoverBottom: (isHovered: boolean) => void,
   onContextMenu: () => void,
@@ -204,11 +203,7 @@ class Node extends React.Component<PropsType, StateType> {
 
     let children = node.get('children');
 
-    if (
-        node.get('nodeType') === 'Wrapper' ||
-        (this.props.hideSymbol && node.get('hideSymbol')) ||
-        (this.props.hideDisplayNamed && node.get('hideDisplayNamed'))
-    ) {
+    if (node.get('nodeType') === 'Wrapper' || this.props.isHiddenNode) {
       return children.map(child =>
         <WrappedNode key={child} id={child} depth={depth}/>
       );
@@ -441,8 +436,7 @@ var WrappedNode = decorate({
       isBottomTagHovered: store.isBottomTagHovered,
       hovered: store.hovered === props.id,
       searchRegExp: props.searchRegExp,
-      hideSymbol: store.hideSymbol,
-      hideDisplayNamed: store.hideDisplayNamed,
+      isHiddenNode: store.isHiddenNode(node),
       onToggleCollapse: e => {
         e.preventDefault();
         store.toggleCollapse(props.id);
diff --git a/frontend/Store.js b/frontend/Store.js
index 5094f02180..ec1ca9455b 100644
--- a/frontend/Store.js
+++ b/frontend/Store.js
@@ -540,11 +540,7 @@ class Store extends EventEmitter {
       var node = this.get(id);
       var nodeType = node.get('nodeType');
 
-      if (
-          nodeType !== 'Wrapper' && nodeType !== 'Native' &&
-          !(this.hideSymbol && node.get('hideSymbol')) &&
-          !(this.hideDisplayNamed && node.get('hideDisplayNamed'))
-      ) {
+      if (nodeType !== 'Wrapper' && nodeType !== 'Native' && !this.isHiddenNode(node)) {
         return id;
       }
       if (nodeType === 'Native' && (!up || this.get(this._parents.get(id)).get('nodeType') !== 'NativeWrapper')) {
@@ -569,6 +565,11 @@ class Store extends EventEmitter {
     }
   }
 
+  isHiddenNode(node: DataType) {
+    return this.hideSymbol && node.get('hideSymbol') ||
+      this.hideDisplayNamed && node.get('hideDisplayNamed');
+  }
+
   off(evt: string, fn: ListenerFunction): void {
     this.removeListener(evt, fn);
   }
diff --git a/frontend/Themes/Preview.js b/frontend/Themes/Preview.js
index 9e6875779c..0eaa7d8fb6 100644
--- a/frontend/Themes/Preview.js
+++ b/frontend/Themes/Preview.js
@@ -125,6 +125,7 @@ const fauxStore = {
   setHover: noop,
   selectBottom: noop,
   selectTop: noop,
+  isHiddenNode: noop,
 };
 
 const panelStyle = (theme: Theme) => ({

From 941e9003780dd52c90fd66fd6fb5ad9249476786 Mon Sep 17 00:00:00 2001
From: Gvozd <gvozdev.viktor@gmail.com>
Date: Sun, 21 Oct 2018 19:19:20 +0300
Subject: [PATCH 10/17] Bugfix: correct selection and collapsing at hide HOC's
 - nearest visible Node

---
 frontend/Store.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/frontend/Store.js b/frontend/Store.js
index ec1ca9455b..4641ef44e7 100644
--- a/frontend/Store.js
+++ b/frontend/Store.js
@@ -390,12 +390,23 @@ class Store extends EventEmitter {
     this.hideSymbol = enabled;
     set(LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL, enabled);
     this.emit('hideSymbol');
+    this._reselect();
   }
 
   changeHideDisplayNamed(enabled: boolean) {
     this.hideDisplayNamed = enabled;
     set(LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED, enabled);
     this.emit('hideDisplayNamed');
+    this._reselect();
+  }
+
+  _reselect() {
+    var selected = this.selected;
+    if (!selected) {
+      return;
+    }
+    this._revealDeep(selected);
+    this.select(this.skipWrapper(selected));
   }
 
   showPreferencesPanel() {

From 3dd3946e7892178c705882497b72cffaca26ad02 Mon Sep 17 00:00:00 2001
From: Gvozd <gvozdev.viktor@gmail.com>
Date: Tue, 23 Oct 2018 00:19:55 +0300
Subject: [PATCH 11/17] Refactoring/bugfix: work with setted default value of
 checkbox - correct merge with default value from Store - need call handler
 for changes emited at another handler

---
 frontend/SettingsCheckbox.js | 4 ++--
 frontend/Store.js            | 9 +++++----
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/SettingsCheckbox.js b/frontend/SettingsCheckbox.js
index 773199b43b..40d658790f 100644
--- a/frontend/SettingsCheckbox.js
+++ b/frontend/SettingsCheckbox.js
@@ -45,8 +45,8 @@ class SettingsCheckbox extends React.Component<Props, State> {
   }
 
   componentDidMount(): void {
-    if (!this.props.state !== this._defaultState) {
-      this.props.onChange(this._defaultState);
+    if (!this._defaultState.equals(this.props.state)) {
+      this.props.onChange(this._defaultState.merge(this.props.state));
     }
   }
 
diff --git a/frontend/Store.js b/frontend/Store.js
index 4641ef44e7..a4049e5b09 100644
--- a/frontend/Store.js
+++ b/frontend/Store.js
@@ -144,8 +144,8 @@ class Store extends EventEmitter {
     this.isBottomTagSelected = false;
     this.searchText = '';
     this.capabilities = {};
-    this.traceupdatesState = null;
-    this.colorizerState = null;
+    this.traceupdatesState = {enabled: false};
+    this.colorizerState = {enabled: false};
     this.refreshSearch = false;
     this.themeStore = themeStore;
     this.hideSymbol = get(LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL, false);
@@ -225,10 +225,11 @@ class Store extends EventEmitter {
       clearTimeout(this._eventTimer);
       this._eventTimer = null;
     }
-    this._eventQueue.forEach(evt => {
+    var eventQueue = this._eventQueue;
+    this._eventQueue = [];
+    eventQueue.forEach(evt => {
       EventEmitter.prototype.emit.call(this, evt);
     });
-    this._eventQueue = [];
   }
 
   // Public actions

From 62a876a1cef6e8be14d0417e99e25dd881c55097 Mon Sep 17 00:00:00 2001
From: Gvozd <gvozdev.viktor@gmail.com>
Date: Tue, 23 Oct 2018 01:27:33 +0300
Subject: [PATCH 12/17] Refactoring: re-use SettingsCheckbox for new options

---
 frontend/Breadcrumb.js                        |  2 +-
 frontend/Node.js                              |  2 +-
 frontend/PreferencesPanel.js                  | 49 ++++---------------
 frontend/Store.js                             | 28 +++++------
 .../DisplayNamedFrontendControl.js            | 30 ++++++++++++
 .../HidingComponents/SymbolFrontendControl.js | 30 ++++++++++++
 6 files changed, 85 insertions(+), 56 deletions(-)
 create mode 100644 plugins/HidingComponents/DisplayNamedFrontendControl.js
 create mode 100644 plugins/HidingComponents/SymbolFrontendControl.js

diff --git a/frontend/Breadcrumb.js b/frontend/Breadcrumb.js
index 9869bd6e74..5a77ded8fe 100644
--- a/frontend/Breadcrumb.js
+++ b/frontend/Breadcrumb.js
@@ -163,7 +163,7 @@ function getBreadcrumbPath(store: Store): BreadcrumbPath {
 }
 
 module.exports = decorate({
-  listeners: () => ['breadcrumbHead', 'selected', 'hideSymbol', 'hideDisplayNamed'],
+  listeners: () => ['breadcrumbHead', 'selected', 'hideSymbolChange', 'hideDisplayNamedChange'],
   props(store, props) {
     return {
       select: id => store.selectBreadcrumb(id),
diff --git a/frontend/Node.js b/frontend/Node.js
index ddc76351b1..b1ea75f39f 100644
--- a/frontend/Node.js
+++ b/frontend/Node.js
@@ -419,7 +419,7 @@ Node.contextTypes = {
 
 var WrappedNode = decorate({
   listeners(props) {
-    return [props.id, 'hideSymbol', 'hideDisplayNamed'];
+    return [props.id, 'hideSymbolChange', 'hideDisplayNamedChange'];
   },
   props(store, props) {
     var node = store.get(props.id);
diff --git a/frontend/PreferencesPanel.js b/frontend/PreferencesPanel.js
index 094ca9608c..3e4d93c9f6 100644
--- a/frontend/PreferencesPanel.js
+++ b/frontend/PreferencesPanel.js
@@ -22,18 +22,16 @@ const ThemeEditor = require('./Themes/Editor/Editor');
 const Hoverable = require('./Hoverable');
 const TraceUpdatesFrontendControl = require('../plugins/TraceUpdates/TraceUpdatesFrontendControl');
 const ColorizerFrontendControl = require('../plugins/Colorizer/ColorizerFrontendControl');
+const HidingSymbolFrontendControl = require('../plugins/HidingComponents/SymbolFrontendControl');
+const HidingDisplayNamedFrontendControl = require('../plugins/HidingComponents/DisplayNamedFrontendControl');
 
 import type {Theme} from './types';
 
 type Props = {
   changeTheme: (themeName: string) => void,
-  changeHideSymbol: (enabled: boolean) => void,
-  changeHideDisplayNamed: (enabled: boolean) => void,
   hasCustomTheme: boolean,
   hide: () => void,
   open: bool,
-  hideSymbol: bool,
-  hideDisplayNamed: bool,
 };
 
 type State = {
@@ -73,7 +71,7 @@ class PreferencesPanel extends React.Component<Props, State> {
 
   render() {
     const {browserName, showHiddenThemes, theme, themeName, themes} = this.context;
-    const {hasCustomTheme, hide, open, hideSymbol, hideDisplayNamed} = this.props;
+    const {hasCustomTheme, hide, open} = this.props;
     const {editMode} = this.state;
 
     if (!open) {
@@ -122,25 +120,12 @@ class PreferencesPanel extends React.Component<Props, State> {
               <EditIcon />
             </EditButton>
           </div>
-          <div>
-            <label>
-              <input
-                type="checkbox"
-                checked={hideSymbol}
-                onChange={this._changeHideSymbol}
-              />
-              Hide components with truthy <code>Symbol.for('react.devtools.hide')</code> property
-            </label>
+          <h4 style={styles.header}>Hiding components</h4>
+          <div style={styles.preference}>
+            <HidingSymbolFrontendControl />
           </div>
-          <div>
-            <label>
-              <input
-                type="checkbox"
-                checked={hideDisplayNamed}
-                onChange={this._changeHideDisplayNamed}
-              />
-              Hide components with custom <code>displayName</code> property
-            </label>
+          <div style={styles.preference}>
+            <HidingDisplayNamedFrontendControl />
           </div>
           <div style={styles.buttonBar}>
             <button
@@ -167,18 +152,6 @@ class PreferencesPanel extends React.Component<Props, State> {
     changeTheme(event.target.value);
   };
 
-  _changeHideSymbol = (event) => {
-    const {changeHideSymbol} = this.props;
-
-    changeHideSymbol(event.target.checked);
-  }
-
-  _changeHideDisplayNamed = (event) => {
-    const {changeHideDisplayNamed} = this.props;
-
-    changeHideDisplayNamed(event.target.checked);
-  }
-
   _hide = () => {
     const {hide} = this.props;
     const {editMode} = this.state;
@@ -244,18 +217,14 @@ const blockClick = event => event.stopPropagation();
 
 const WrappedPreferencesPanel = decorate({
   listeners() {
-    return ['preferencesPanelShown', 'hideSymbol', 'hideDisplayNamed'];
+    return ['preferencesPanelShown'];
   },
   props(store, props) {
     return {
       changeTheme: themeName => store.changeTheme(themeName),
-      changeHideSymbol: enabled => store.changeHideSymbol(enabled),
-      changeHideDisplayNamed: enabled => store.changeHideDisplayNamed(enabled),
       hasCustomTheme: !!store.themeStore.customTheme,
       hide: () => store.hidePreferencesPanel(),
       open: store.preferencesPanelShown,
-      hideSymbol: store.hideSymbol,
-      hideDisplayNamed: store.hideDisplayNamed,
     };
   },
 }, PreferencesPanel);
diff --git a/frontend/Store.js b/frontend/Store.js
index a4049e5b09..f7910cdfc9 100644
--- a/frontend/Store.js
+++ b/frontend/Store.js
@@ -112,8 +112,8 @@ class Store extends EventEmitter {
   selectedTab: string;
   selected: ?ElementID;
   themeStore: ThemeStore;
-  hideSymbol: boolean;
-  hideDisplayNamed: boolean;
+  hideSymbol: ControlState;
+  hideDisplayNamed: ControlState;
   breadcrumbHead: ?ElementID;
   snapshotQueue: Array<Snapshot> = [];
   // an object describing the capabilities of the inspected runtime.
@@ -148,8 +148,8 @@ class Store extends EventEmitter {
     this.colorizerState = {enabled: false};
     this.refreshSearch = false;
     this.themeStore = themeStore;
-    this.hideSymbol = get(LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL, false);
-    this.hideDisplayNamed = get(LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED, false);
+    this.hideSymbol = {enabled: get(LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL, false)};
+    this.hideDisplayNamed = {enabled: get(LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED, false)};
 
     // for debugging
     window.store = this;
@@ -387,17 +387,17 @@ class Store extends EventEmitter {
     this.emit('theme');
   }
 
-  changeHideSymbol(enabled: boolean) {
-    this.hideSymbol = enabled;
-    set(LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL, enabled);
-    this.emit('hideSymbol');
+  changeHideSymbol(state: ControlState) {
+    this.hideSymbol = state;
+    set(LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL, state.enabled);
+    this.emit('hideSymbolChange');
     this._reselect();
   }
 
-  changeHideDisplayNamed(enabled: boolean) {
-    this.hideDisplayNamed = enabled;
-    set(LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED, enabled);
-    this.emit('hideDisplayNamed');
+  changeHideDisplayNamed(state: ControlState) {
+    this.hideDisplayNamed = state;
+    set(LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED, state.enabled);
+    this.emit('hideDisplayNamedChange');
     this._reselect();
   }
 
@@ -578,8 +578,8 @@ class Store extends EventEmitter {
   }
 
   isHiddenNode(node: DataType) {
-    return this.hideSymbol && node.get('hideSymbol') ||
-      this.hideDisplayNamed && node.get('hideDisplayNamed');
+    return this.hideSymbol.enabled && node.get('hideSymbol') ||
+      this.hideDisplayNamed.enabled && node.get('hideDisplayNamed');
   }
 
   off(evt: string, fn: ListenerFunction): void {
diff --git a/plugins/HidingComponents/DisplayNamedFrontendControl.js b/plugins/HidingComponents/DisplayNamedFrontendControl.js
new file mode 100644
index 0000000000..c99399ecb5
--- /dev/null
+++ b/plugins/HidingComponents/DisplayNamedFrontendControl.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ */
+
+'use strict';
+
+var decorate = require('../../frontend/decorate');
+var SettingsCheckbox = require('../../frontend/SettingsCheckbox');
+
+var Wrapped = decorate({
+  listeners() {
+    return ['hideDisplayNamedChange'];
+  },
+  props(store) {
+    return {
+      state: store.hideDisplayNamed,
+      text: 'Hide components with custom \'displayName\' property',
+      onChange: state => store.changeHideDisplayNamed(state),
+    };
+  },
+}, SettingsCheckbox);
+
+module.exports = Wrapped;
diff --git a/plugins/HidingComponents/SymbolFrontendControl.js b/plugins/HidingComponents/SymbolFrontendControl.js
new file mode 100644
index 0000000000..92adbe990b
--- /dev/null
+++ b/plugins/HidingComponents/SymbolFrontendControl.js
@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ */
+
+'use strict';
+
+var decorate = require('../../frontend/decorate');
+var SettingsCheckbox = require('../../frontend/SettingsCheckbox');
+
+var Wrapped = decorate({
+  listeners() {
+    return ['hideSymbolChange'];
+  },
+  props(store) {
+    return {
+      state: store.hideSymbol,
+      text: 'Hide components with truthy `Symbol.for(\'react.devtools.hide\')` property',
+      onChange: state => store.changeHideSymbol(state),
+    };
+  },
+}, SettingsCheckbox);
+
+module.exports = Wrapped;

From 45d1939fadb32d5c3ddde1ca41690c3217004c92 Mon Sep 17 00:00:00 2001
From: Gvozd <gvozdev.viktor@gmail.com>
Date: Thu, 25 Oct 2018 22:40:32 +0300
Subject: [PATCH 13/17] Replace 'custom displayName' preference to 'with parens
 in name'

---
 backend/attachRendererFiber.js                   | 12 ++++++------
 backend/getData.js                               | 10 +++++-----
 backend/types.js                                 |  2 ++
 frontend/Breadcrumb.js                           |  2 +-
 frontend/Node.js                                 |  2 +-
 frontend/Store.js                                | 16 ++++++++--------
 .../DisplayNamedFrontendControl.js               |  8 ++++----
 7 files changed, 27 insertions(+), 25 deletions(-)

diff --git a/backend/attachRendererFiber.js b/backend/attachRendererFiber.js
index 9e2ea5ff31..0c00fb60e9 100644
--- a/backend/attachRendererFiber.js
+++ b/backend/attachRendererFiber.js
@@ -179,8 +179,8 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
     var nodeType = null;
     var name = null;
     var text = null;
-    var hideSymbol = null;
-    var hideDisplayNamed = null;
+    var needHideBySymbol = null;
+    var needHideByParensInName = null;
 
     // Profiler data
     var actualDuration = null;
@@ -205,8 +205,8 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
         publicInstance = fiber.stateNode;
         props = fiber.memoizedProps;
         state = fiber.memoizedState;
-        hideSymbol = typeof Symbol === 'function' && fiber.type[Symbol.for('react.devtools.hide')];
-        hideDisplayNamed = fiber.type.hasOwnProperty('displayName');
+        needHideBySymbol = typeof Symbol === 'function' && fiber.type[Symbol.for('react.devtools.hide')];
+        needHideByParensInName = /\(.*\)/.test(name);
         if (publicInstance != null) {
           context = publicInstance.context;
           if (context && Object.keys(context).length === 0) {
@@ -388,8 +388,8 @@ function attachRendererFiber(hook: Hook, rid: string, renderer: ReactRenderer):
       updater,
       publicInstance,
       memoizedInteractions,
-      hideSymbol,
-      hideDisplayNamed,
+      needHideBySymbol,
+      needHideByParensInName,
 
       // Profiler data
       actualDuration,
diff --git a/backend/getData.js b/backend/getData.js
index 626e0783a5..596a010e83 100644
--- a/backend/getData.js
+++ b/backend/getData.js
@@ -165,13 +165,13 @@ function getData(internalInstance: Object): DataType {
     };
   }
 
-  const hideSymbol = nodeType === 'Composite' &&
+  const needHideBySymbol = nodeType === 'Composite' &&
     typeof Symbol === 'function' &&
     typeof type === 'function' &&
     type[Symbol.for('react.devtools.hide')];
-  const hideDisplayNamed = nodeType === 'Composite' &&
+  const needHideByParensInName = nodeType === 'Composite' &&
     typeof type === 'function' &&
-    type.hasOwnProperty('displayName');
+    name && /\(.*\)/.test(name);
 
   // $FlowFixMe
   return {
@@ -188,8 +188,8 @@ function getData(internalInstance: Object): DataType {
     text,
     updater,
     publicInstance,
-    hideSymbol,
-    hideDisplayNamed,
+    needHideBySymbol,
+    needHideByParensInName,
   };
 }
 
diff --git a/backend/types.js b/backend/types.js
index 569bd4c1c8..d5a478d055 100644
--- a/backend/types.js
+++ b/backend/types.js
@@ -35,6 +35,8 @@ export type DataType = {
   text: ?string,
   updater: ?(CompositeUpdater | NativeUpdater),
   publicInstance: ?Object,
+  needHideBySymbol: boolean,
+  needHideByParensInName: boolean
 };
 
 // This type is entirely opaque to the backend.
diff --git a/frontend/Breadcrumb.js b/frontend/Breadcrumb.js
index 5a77ded8fe..722ea1c1cd 100644
--- a/frontend/Breadcrumb.js
+++ b/frontend/Breadcrumb.js
@@ -163,7 +163,7 @@ function getBreadcrumbPath(store: Store): BreadcrumbPath {
 }
 
 module.exports = decorate({
-  listeners: () => ['breadcrumbHead', 'selected', 'hideSymbolChange', 'hideDisplayNamedChange'],
+  listeners: () => ['breadcrumbHead', 'selected', 'hideSymbolChange', 'hideByParensInNameChange'],
   props(store, props) {
     return {
       select: id => store.selectBreadcrumb(id),
diff --git a/frontend/Node.js b/frontend/Node.js
index b1ea75f39f..aaa24965c3 100644
--- a/frontend/Node.js
+++ b/frontend/Node.js
@@ -419,7 +419,7 @@ Node.contextTypes = {
 
 var WrappedNode = decorate({
   listeners(props) {
-    return [props.id, 'hideSymbolChange', 'hideDisplayNamedChange'];
+    return [props.id, 'hideSymbolChange', 'hideByParensInNameChange'];
   },
   props(store, props) {
     var node = store.get(props.id);
diff --git a/frontend/Store.js b/frontend/Store.js
index f7910cdfc9..fbca721621 100644
--- a/frontend/Store.js
+++ b/frontend/Store.js
@@ -23,7 +23,7 @@ var ThemeStore = require('./Themes/Store');
 var {get, set} = require('../utils/storage');
 
 const LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL = 'preferences:hideSymbol';
-const LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED = 'preferences:hideDisplayNamed';
+const LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED = 'preferences:hideByParensInName';
 
 import type Bridge from '../agent/Bridge';
 import type {ControlState, DOMEvent, ElementID, Theme} from './types';
@@ -113,7 +113,7 @@ class Store extends EventEmitter {
   selected: ?ElementID;
   themeStore: ThemeStore;
   hideSymbol: ControlState;
-  hideDisplayNamed: ControlState;
+  hideByParensInName: ControlState;
   breadcrumbHead: ?ElementID;
   snapshotQueue: Array<Snapshot> = [];
   // an object describing the capabilities of the inspected runtime.
@@ -149,7 +149,7 @@ class Store extends EventEmitter {
     this.refreshSearch = false;
     this.themeStore = themeStore;
     this.hideSymbol = {enabled: get(LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL, false)};
-    this.hideDisplayNamed = {enabled: get(LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED, false)};
+    this.hideByParensInName = {enabled: get(LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED, false)};
 
     // for debugging
     window.store = this;
@@ -394,10 +394,10 @@ class Store extends EventEmitter {
     this._reselect();
   }
 
-  changeHideDisplayNamed(state: ControlState) {
-    this.hideDisplayNamed = state;
+  changeHideByParensInName(state: ControlState) {
+    this.hideByParensInName = state;
     set(LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED, state.enabled);
-    this.emit('hideDisplayNamedChange');
+    this.emit('hideByParensInNameChange');
     this._reselect();
   }
 
@@ -578,8 +578,8 @@ class Store extends EventEmitter {
   }
 
   isHiddenNode(node: DataType) {
-    return this.hideSymbol.enabled && node.get('hideSymbol') ||
-      this.hideDisplayNamed.enabled && node.get('hideDisplayNamed');
+    return this.hideSymbol.enabled && node.get('needHideBySymbol') ||
+      this.hideByParensInName.enabled && node.get('needHideByParensInName');
   }
 
   off(evt: string, fn: ListenerFunction): void {
diff --git a/plugins/HidingComponents/DisplayNamedFrontendControl.js b/plugins/HidingComponents/DisplayNamedFrontendControl.js
index c99399ecb5..f84230f2dd 100644
--- a/plugins/HidingComponents/DisplayNamedFrontendControl.js
+++ b/plugins/HidingComponents/DisplayNamedFrontendControl.js
@@ -16,13 +16,13 @@ var SettingsCheckbox = require('../../frontend/SettingsCheckbox');
 
 var Wrapped = decorate({
   listeners() {
-    return ['hideDisplayNamedChange'];
+    return ['hideByParensInNameChange'];
   },
   props(store) {
     return {
-      state: store.hideDisplayNamed,
-      text: 'Hide components with custom \'displayName\' property',
-      onChange: state => store.changeHideDisplayNamed(state),
+      state: store.hideByParensInName,
+      text: 'Hide HOC\'s with parens in name',
+      onChange: state => store.changeHideByParensInName(state),
     };
   },
 }, SettingsCheckbox);

From de463ecc9279284a28ac747c182a7280ab2ecef9 Mon Sep 17 00:00:00 2001
From: Gvozd <gvozdev.viktor@gmail.com>
Date: Sun, 28 Oct 2018 01:59:42 +0300
Subject: [PATCH 14/17] Performance fix: use batching use-case: - one of hiding
 checkbox is enabled - open full tree of HigherOrderComponent(Nested) - toggle
 another checkbox. TreeView is not changed(because HOC hided by another
 checkbox)

Changed timings for `wrapMultipleNested(Nested, 25/50/100)`
ms: 413/1170/4044 -> 54/94/184
O: O(n^2) -> O(n)
---
 frontend/Store.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/Store.js b/frontend/Store.js
index fbca721621..d76f46a80a 100644
--- a/frontend/Store.js
+++ b/frontend/Store.js
@@ -11,6 +11,8 @@
 'use strict';
 
 var {EventEmitter} = require('events');
+// TODO $FlowFixMe - it is not documented API? any alternatives?
+var {flushSync} = require('react-dom');
 var {Map, Set, List} = require('immutable');
 var assign = require('object-assign');
 var { copy } = require('clipboard-js');
@@ -215,7 +217,7 @@ class Store extends EventEmitter {
     }
     this._eventQueue.push(event);
     if (!this._eventTimer) {
-      this._eventTimer = setTimeout(() => this.flush(), 50);
+      this._eventTimer = setTimeout(flushSync, 50, () => this.flush());
     }
     return true;
   }

From e6024b501eb30c767ad986b682aa693d380875c1 Mon Sep 17 00:00:00 2001
From: Gvozd <gvozdev.viktor@gmail.com>
Date: Sun, 21 Oct 2018 22:24:49 +0300
Subject: [PATCH 15/17] Preparatory refactoring: possible additional args for
 jsxTagStyle, itemStyle

---
 frontend/Breadcrumb.js | 11 +++++------
 frontend/Node.js       | 11 +++++++----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/Breadcrumb.js b/frontend/Breadcrumb.js
index 722ea1c1cd..6454843904 100644
--- a/frontend/Breadcrumb.js
+++ b/frontend/Breadcrumb.js
@@ -72,11 +72,7 @@ class Breadcrumb extends React.Component<Props, State> {
       <ul style={containerStyle(theme)}>
         {path.map(({ id, node }) => {
           const isSelected = id === selected;
-          const style = itemStyle(
-            isSelected,
-            node.get('nodeType'),
-            theme,
-          );
+          const style = itemStyle({isSelected, nodeType: node.get('nodeType')}, theme);
 
           return (
             <li
@@ -127,7 +123,10 @@ const containerStyle = (theme: Theme) => ({
   overflow: 'auto',
 });
 
-const itemStyle = (isSelected: boolean, nodeType: string, theme: Theme) => {
+const itemStyle = (
+  {isSelected, nodeType}: {isSelected: boolean, nodeType: string},
+  theme: Theme
+) => {
   let color;
   if (isSelected) {
     color = theme.state02;
diff --git a/frontend/Node.js b/frontend/Node.js
index aaa24965c3..ba224ab021 100644
--- a/frontend/Node.js
+++ b/frontend/Node.js
@@ -298,7 +298,7 @@ class Node extends React.Component<PropsType, StateType> {
 
     // Single-line tag (collapsed / simple content / no content)
     if (!children || typeof children === 'string' || !children.length) {
-      const jsxSingleLineTagStyle = jsxTagStyle(inverted, nodeType, theme);
+      const jsxSingleLineTagStyle = jsxTagStyle({inverted, nodeType}, theme);
       const content = children;
       const isCollapsed = content === null || content === undefined;
       return (
@@ -329,7 +329,7 @@ class Node extends React.Component<PropsType, StateType> {
       );
     }
 
-    const jsxCloseTagStyle = jsxTagStyle(inverted && (isBottomTagSelected || collapsed), nodeType, theme);
+    const jsxCloseTagStyle = jsxTagStyle({inverted: inverted && (isBottomTagSelected || collapsed), nodeType}, theme);
     const closeTag = (
       <Fragment>
         &lt;/
@@ -343,7 +343,7 @@ class Node extends React.Component<PropsType, StateType> {
 
     const headInverted = inverted && (!isBottomTagSelected || collapsed);
 
-    const jsxOpenTagStyle = jsxTagStyle(inverted && (!isBottomTagSelected || collapsed), nodeType, theme);
+    const jsxOpenTagStyle = jsxTagStyle({inverted: inverted && (!isBottomTagSelected || collapsed), nodeType}, theme);
     const head = (
       <div style={sharedHeadStyle} {...headEvents}>
         <span
@@ -512,7 +512,10 @@ const headStyle = ({
   };
 };
 
-const jsxTagStyle = (inverted: boolean, nodeType: string, theme: Theme) => {
+const jsxTagStyle = (
+  {inverted, nodeType}: {inverted: boolean, nodeType: string},
+  theme: Theme
+) => {
   let color;
   if (inverted) {
     color = theme.state02;

From 6e704e938221e14e3bab1d5a6f4a733e28c1500f Mon Sep 17 00:00:00 2001
From: Gvozd <gvozdev.viktor@gmail.com>
Date: Thu, 1 Nov 2018 09:25:23 +0300
Subject: [PATCH 16/17] Support dimming nodes

---
 frontend/Breadcrumb.js                        | 16 ++--
 frontend/Node.js                              | 15 ++--
 frontend/PreferencesPanel.js                  |  6 ++
 frontend/SettingsRadio.js                     | 73 +++++++++++++++++++
 frontend/Store.js                             | 27 ++++++-
 frontend/types.js                             |  2 +
 .../HidingComponents/EffectFrontendControl.js | 29 ++++++++
 7 files changed, 154 insertions(+), 14 deletions(-)
 create mode 100644 frontend/SettingsRadio.js
 create mode 100644 plugins/HidingComponents/EffectFrontendControl.js

diff --git a/frontend/Breadcrumb.js b/frontend/Breadcrumb.js
index 6454843904..278349ed3d 100644
--- a/frontend/Breadcrumb.js
+++ b/frontend/Breadcrumb.js
@@ -19,7 +19,7 @@ const PropTypes = require('prop-types');
 const React = require('react');
 const decorate = require('./decorate');
 
-type BreadcrumbPath = Array<{id: ElementID, node: Object}>;
+type BreadcrumbPath = Array<{id: ElementID, node: Object, isDimmedNode: boolean}>;
 
 type Props = {
   hover: (string, boolean) => void;
@@ -70,9 +70,9 @@ class Breadcrumb extends React.Component<Props, State> {
 
     return (
       <ul style={containerStyle(theme)}>
-        {path.map(({ id, node }) => {
+        {path.map(({ id, node, isDimmedNode }) => {
           const isSelected = id === selected;
-          const style = itemStyle({isSelected, nodeType: node.get('nodeType')}, theme);
+          const style = itemStyle({isSelected, nodeType: node.get('nodeType'), isDimmedNode}, theme);
 
           return (
             <li
@@ -124,7 +124,7 @@ const containerStyle = (theme: Theme) => ({
 });
 
 const itemStyle = (
-  {isSelected, nodeType}: {isSelected: boolean, nodeType: string},
+  {isSelected, nodeType, isDimmedNode}: {isSelected: boolean, nodeType: string, isDimmedNode: boolean},
   theme: Theme
 ) => {
   let color;
@@ -145,6 +145,8 @@ const itemStyle = (
     MozUserSelect: 'none',
     userSelect: 'none',
     display: 'inline-block',
+    opacity: isDimmedNode ? 0.8 : 1,
+    fontStyle: isDimmedNode ? 'italic' : undefined,
   };
 };
 
@@ -152,9 +154,11 @@ function getBreadcrumbPath(store: Store): BreadcrumbPath {
   var path = [];
   var current = store.breadcrumbHead;
   while (current) {
+    const node = store.get(current);
     path.unshift({
       id: current,
-      node: store.get(current),
+      node: node,
+      isDimmedNode: store.isDimmedNode(node),
     });
     current = store.skipWrapper(store.getParent(current), true);
   }
@@ -162,7 +166,7 @@ function getBreadcrumbPath(store: Store): BreadcrumbPath {
 }
 
 module.exports = decorate({
-  listeners: () => ['breadcrumbHead', 'selected', 'hideSymbolChange', 'hideByParensInNameChange'],
+  listeners: () => ['breadcrumbHead', 'selected', 'hidingStyleChange', 'hideSymbolChange', 'hideByParensInNameChange'],
   props(store, props) {
     return {
       select: id => store.selectBreadcrumb(id),
diff --git a/frontend/Node.js b/frontend/Node.js
index ba224ab021..68d9906a36 100644
--- a/frontend/Node.js
+++ b/frontend/Node.js
@@ -33,6 +33,7 @@ type PropsType = {
   searchRegExp: ?RegExp,
   wrappedChildren: ?Array<any>,
   isHiddenNode: boolean,
+  isDimmedNode: boolean,
   onHover: (isHovered: boolean) => void,
   onHoverBottom: (isHovered: boolean) => void,
   onContextMenu: () => void,
@@ -196,6 +197,7 @@ class Node extends React.Component<PropsType, StateType> {
       wrappedChildren,
     } = this.props;
     const {isWindowFocused} = this.state;
+    const isDimmed = this.props.isDimmedNode;
 
     if (!node) {
       return 'Node was deleted';
@@ -298,7 +300,7 @@ class Node extends React.Component<PropsType, StateType> {
 
     // Single-line tag (collapsed / simple content / no content)
     if (!children || typeof children === 'string' || !children.length) {
-      const jsxSingleLineTagStyle = jsxTagStyle({inverted, nodeType}, theme);
+      const jsxSingleLineTagStyle = jsxTagStyle({inverted, nodeType, isDimmed}, theme);
       const content = children;
       const isCollapsed = content === null || content === undefined;
       return (
@@ -329,7 +331,7 @@ class Node extends React.Component<PropsType, StateType> {
       );
     }
 
-    const jsxCloseTagStyle = jsxTagStyle({inverted: inverted && (isBottomTagSelected || collapsed), nodeType}, theme);
+    const jsxCloseTagStyle = jsxTagStyle({inverted: inverted && (isBottomTagSelected || collapsed), nodeType, isDimmed}, theme);
     const closeTag = (
       <Fragment>
         &lt;/
@@ -343,7 +345,7 @@ class Node extends React.Component<PropsType, StateType> {
 
     const headInverted = inverted && (!isBottomTagSelected || collapsed);
 
-    const jsxOpenTagStyle = jsxTagStyle({inverted: inverted && (!isBottomTagSelected || collapsed), nodeType}, theme);
+    const jsxOpenTagStyle = jsxTagStyle({inverted: inverted && (!isBottomTagSelected || collapsed), nodeType, isDimmed}, theme);
     const head = (
       <div style={sharedHeadStyle} {...headEvents}>
         <span
@@ -419,7 +421,7 @@ Node.contextTypes = {
 
 var WrappedNode = decorate({
   listeners(props) {
-    return [props.id, 'hideSymbolChange', 'hideByParensInNameChange'];
+    return [props.id, 'hidingStyleChange', 'hideSymbolChange', 'hideByParensInNameChange'];
   },
   props(store, props) {
     var node = store.get(props.id);
@@ -437,6 +439,7 @@ var WrappedNode = decorate({
       hovered: store.hovered === props.id,
       searchRegExp: props.searchRegExp,
       isHiddenNode: store.isHiddenNode(node),
+      isDimmedNode: store.isDimmedNode(node),
       onToggleCollapse: e => {
         e.preventDefault();
         store.toggleCollapse(props.id);
@@ -513,7 +516,7 @@ const headStyle = ({
 };
 
 const jsxTagStyle = (
-  {inverted, nodeType}: {inverted: boolean, nodeType: string},
+  {inverted, nodeType, isDimmed}: {inverted: boolean, nodeType: string, isDimmed: boolean},
   theme: Theme
 ) => {
   let color;
@@ -529,6 +532,8 @@ const jsxTagStyle = (
 
   return {
     color,
+    opacity: isDimmed ? 0.8 : 1,
+    fontStyle: isDimmed ? 'italic' : undefined,
   };
 };
 
diff --git a/frontend/PreferencesPanel.js b/frontend/PreferencesPanel.js
index 3e4d93c9f6..b0ec1d1861 100644
--- a/frontend/PreferencesPanel.js
+++ b/frontend/PreferencesPanel.js
@@ -22,6 +22,7 @@ const ThemeEditor = require('./Themes/Editor/Editor');
 const Hoverable = require('./Hoverable');
 const TraceUpdatesFrontendControl = require('../plugins/TraceUpdates/TraceUpdatesFrontendControl');
 const ColorizerFrontendControl = require('../plugins/Colorizer/ColorizerFrontendControl');
+const HidingEffectFrontendControl = require('../plugins/HidingComponents/EffectFrontendControl');
 const HidingSymbolFrontendControl = require('../plugins/HidingComponents/SymbolFrontendControl');
 const HidingDisplayNamedFrontendControl = require('../plugins/HidingComponents/DisplayNamedFrontendControl');
 
@@ -121,6 +122,11 @@ class PreferencesPanel extends React.Component<Props, State> {
             </EditButton>
           </div>
           <h4 style={styles.header}>Hiding components</h4>
+          <div style={styles.preference}>
+            <HidingEffectFrontendControl value="none" text="No hiding" />
+            <HidingEffectFrontendControl value="hide" text="Hiding" />
+            <HidingEffectFrontendControl value="dim" text="Dimming"/>
+          </div>
           <div style={styles.preference}>
             <HidingSymbolFrontendControl />
           </div>
diff --git a/frontend/SettingsRadio.js b/frontend/SettingsRadio.js
new file mode 100644
index 0000000000..7dd4f78c59
--- /dev/null
+++ b/frontend/SettingsRadio.js
@@ -0,0 +1,73 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ */
+
+'use strict';
+
+const React = require('react');
+
+const {sansSerif} = require('./Themes/Fonts');
+
+
+type StateValue = any;
+
+type Props = {
+  state: StateValue,
+  value: StateValue,
+  text: string,
+  onChange: (v: StateValue) => void,
+};
+
+class SettingsRadio extends React.Component<Props> {
+  _toggle: (b: boolean) => void;
+
+  constructor(props: Props) {
+    super(props);
+    this._toggle = this._toggle.bind(this);
+  }
+
+  render() {
+    var {state, value} = this.props;
+    return (
+      <label style={styles.container} onClick={this._toggle} tabIndex={0}>
+        <input
+          style={styles.radio}
+          type="radio"
+          checked={state === value}
+          readOnly={true}
+        />
+        <span>{this.props.text}</span>
+      </label>
+    );
+  }
+
+  _toggle() {
+    var {onChange, value} = this.props;
+    onChange(value);
+  }
+}
+
+var styles = {
+  radio: {
+    pointerEvents: 'none',
+    marginRight: '0.5rem',
+  },
+  container: {
+    WebkitUserSelect: 'none',
+    cursor: 'default',
+    display: 'inline-block',
+    outline: 'none',
+    fontFamily: sansSerif.family,
+    userSelect: 'none',
+    marginRight: '0.5rem',
+  },
+};
+
+module.exports = SettingsRadio;
diff --git a/frontend/Store.js b/frontend/Store.js
index d76f46a80a..715ed1878e 100644
--- a/frontend/Store.js
+++ b/frontend/Store.js
@@ -24,11 +24,12 @@ var SearchUtils = require('./SearchUtils');
 var ThemeStore = require('./Themes/Store');
 var {get, set} = require('../utils/storage');
 
+const LOCAL_STORAGE_PREFERENCES_HIDING_STYLE = 'preferences:hidingStyle';
 const LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL = 'preferences:hideSymbol';
 const LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED = 'preferences:hideByParensInName';
 
 import type Bridge from '../agent/Bridge';
-import type {ControlState, DOMEvent, ElementID, Theme} from './types';
+import type {ControlState, DOMEvent, ElementID, HidingStyle, Theme} from './types';
 import type {Snapshot} from '../plugins/Profiler/ProfilerTypes';
 
 type ListenerFunction = () => void;
@@ -114,6 +115,7 @@ class Store extends EventEmitter {
   selectedTab: string;
   selected: ?ElementID;
   themeStore: ThemeStore;
+  hidingStyle: HidingStyle;
   hideSymbol: ControlState;
   hideByParensInName: ControlState;
   breadcrumbHead: ?ElementID;
@@ -150,6 +152,7 @@ class Store extends EventEmitter {
     this.colorizerState = {enabled: false};
     this.refreshSearch = false;
     this.themeStore = themeStore;
+    this.hidingStyle = get(LOCAL_STORAGE_PREFERENCES_HIDING_STYLE, 'none');
     this.hideSymbol = {enabled: get(LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL, false)};
     this.hideByParensInName = {enabled: get(LOCAL_STORAGE_PREFERENCES_HIDE_DISPLAY_NAMED, false)};
 
@@ -389,6 +392,13 @@ class Store extends EventEmitter {
     this.emit('theme');
   }
 
+  changeHidingStyle(state: HidingStyle) {
+    this.hidingStyle = state;
+    set(LOCAL_STORAGE_PREFERENCES_HIDING_STYLE, state);
+    this.emit('hidingStyleChange');
+    this._reselect();
+  }
+
   changeHideSymbol(state: ControlState) {
     this.hideSymbol = state;
     set(LOCAL_STORAGE_PREFERENCES_HIDE_SYMBOL, state.enabled);
@@ -580,8 +590,19 @@ class Store extends EventEmitter {
   }
 
   isHiddenNode(node: DataType) {
-    return this.hideSymbol.enabled && node.get('needHideBySymbol') ||
-      this.hideByParensInName.enabled && node.get('needHideByParensInName');
+    return this.hidingStyle === 'hide' &&
+      (
+        this.hideSymbol.enabled && node.get('needHideBySymbol') ||
+        this.hideByParensInName.enabled && node.get('needHideByParensInName')
+      );
+  }
+
+  isDimmedNode(node: DataType) {
+    return this.hidingStyle === 'dim' &&
+      (
+        this.hideSymbol.enabled && node.get('needHideBySymbol') ||
+        this.hideByParensInName.enabled && node.get('needHideByParensInName')
+      );
   }
 
   off(evt: string, fn: ListenerFunction): void {
diff --git a/frontend/types.js b/frontend/types.js
index d9aade5982..1e324552bf 100644
--- a/frontend/types.js
+++ b/frontend/types.js
@@ -76,6 +76,8 @@ export type ControlState = {
   enabled: boolean,
 } & Record;
 
+export type HidingStyle = 'none' | 'hide' | 'dim';
+
 /**
  * A theme is a color template used throughout devtools.
  * All devtools coloring is declared by themes, with one minor exception: status colors.
diff --git a/plugins/HidingComponents/EffectFrontendControl.js b/plugins/HidingComponents/EffectFrontendControl.js
new file mode 100644
index 0000000000..126efe46be
--- /dev/null
+++ b/plugins/HidingComponents/EffectFrontendControl.js
@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @flow
+ */
+
+'use strict';
+
+var decorate = require('../../frontend/decorate');
+var SettingsRadio = require('../../frontend/SettingsRadio');
+
+var Wrapped = decorate({
+  listeners() {
+    return ['hidingStyleChange'];
+  },
+  props(store) {
+    return {
+      state: store.hidingStyle,
+      onChange: state => store.changeHidingStyle(state),
+    };
+  },
+}, SettingsRadio);
+
+module.exports = Wrapped;

From cd428a7e82bbfbbd81c19f5ef06e317904550371 Mon Sep 17 00:00:00 2001
From: Gvozd <gvozdev.viktor@gmail.com>
Date: Thu, 1 Nov 2018 11:32:29 +0300
Subject: [PATCH 17/17] bug fix: no highlight on open preferences panel

---
 frontend/Store.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/Store.js b/frontend/Store.js
index 715ed1878e..e22616b6f7 100644
--- a/frontend/Store.js
+++ b/frontend/Store.js
@@ -419,7 +419,7 @@ class Store extends EventEmitter {
       return;
     }
     this._revealDeep(selected);
-    this.select(this.skipWrapper(selected));
+    this.select(this.skipWrapper(selected), true);
   }
 
   showPreferencesPanel() {