Removed FilterList UI for now (collapsed into Settings component)

src/devtools/views/Settings/FilterList.css

@@ -1,4 +0,0 @@
-.Filter {
-  display: block;
-  padding: 0 0 0.5rem;
-}

src/devtools/views/Settings/FilterList.js

@@ -1,61 +0,0 @@
-// @flow
-
-import React, { Fragment, useCallback, useContext, useMemo } from 'react';
-import { ElementTypeHostComponent } from 'src/types';
-import Store from 'src/devtools/store';
-import { StoreContext } from '../context';
-import { useSubscription } from '../hooks';
-
-import styles from './FilterList.css';
-
-import type { FilterPreferences } from 'src/types';
-
-export default function FilterList(_: {||}) {
-  const store = useContext(StoreContext);
-
-  const filterPreferencesSubscription = useMemo(
-    () => ({
-      getCurrentValue: () => store.filterPreferences,
-      subscribe: (callback: Function) => {
-        store.addListener('filterPreferences', callback);
-        return () => store.removeListener('filterPreferences', callback);
-      },
-    }),
-    [store]
-  );
-  const filterPreferences = useSubscription<FilterPreferences, Store>(
-    filterPreferencesSubscription
-  );
-
-  const updateFilterPreferences = useCallback(
-    ({ currentTarget }) => {
-      const filterPreferences = store.filterPreferences;
-      if (currentTarget.checked) {
-        filterPreferences.hideElementsWithTypes.add(ElementTypeHostComponent);
-      } else {
-        filterPreferences.hideElementsWithTypes.delete(
-          ElementTypeHostComponent
-        );
-      }
-      store.filterPreferences = { ...filterPreferences };
-    },
-    [store]
-  );
-
-  // TODO (filter) Disable toggles if isProfiling
-
-  return (
-    <Fragment>
-      <label className={styles.Filter}>
-        <input
-          type="checkbox"
-          checked={filterPreferences.hideElementsWithTypes.has(
-            ElementTypeHostComponent
-          )}
-          onChange={updateFilterPreferences}
-        />{' '}
-        Hide host components (e.g. <code>&lt;div&gt;</code>)
-      </label>
-    </Fragment>
-  );
-}

src/devtools/views/Settings/Settings.js

@@ -1,15 +1,17 @@
 // @flow
 
 import React, { useCallback, useContext, useMemo } from 'react';
+import { ElementTypeHostComponent } from 'src/types';
 import { useSubscription } from '../hooks';
 import { StoreContext } from '../context';
 import { SettingsContext } from './SettingsContext';
 import Store from 'src/devtools/store';
-import FilterList from './FilterList';
 import portaledContent from '../portaledContent';
 
 import styles from './Settings.css';
 
+import type { FilterPreferences } from 'src/types';
+
 function Settings(_: {||}) {
   const store = useContext(StoreContext);
   const { displayDensity, setDisplayDensity, theme, setTheme } = useContext(
@@ -44,6 +46,35 @@ function Settings(_: {||}) {
     collapseNodesByDefaultSubscription
   );
 
+  const filterPreferencesSubscription = useMemo(
+    () => ({
+      getCurrentValue: () => store.filterPreferences,
+      subscribe: (callback: Function) => {
+        store.addListener('filterPreferences', callback);
+        return () => store.removeListener('filterPreferences', callback);
+      },
+    }),
+    [store]
+  );
+  const filterPreferences = useSubscription<FilterPreferences, Store>(
+    filterPreferencesSubscription
+  );
+
+  const updateFilterPreferences = useCallback(
+    ({ currentTarget }) => {
+      const filterPreferences = store.filterPreferences;
+      if (currentTarget.checked) {
+        filterPreferences.hideElementsWithTypes.add(ElementTypeHostComponent);
+      } else {
+        filterPreferences.hideElementsWithTypes.delete(
+          ElementTypeHostComponent
+        );
+      }
+      store.filterPreferences = { ...filterPreferences };
+    },
+    [store]
+  );
+
   const updateDisplayDensity = useCallback(
     ({ currentTarget }) => {
       setDisplayDensity(currentTarget.value);
@@ -145,7 +176,16 @@ function Settings(_: {||}) {
           Collapse newly added components by default
         </label>
 
-        <FilterList />
+        <label className={styles.CheckboxOption}>
+          <input
+            type="checkbox"
+            checked={filterPreferences.hideElementsWithTypes.has(
+              ElementTypeHostComponent
+            )}
+            onChange={updateFilterPreferences}
+          />{' '}
+          Hide host components (e.g. <code>&lt;div&gt;</code>)
+        </label>
       </div>
 
       {store.supportsCaptureScreenshots && (