diff --git a/frontend/Icons.js b/frontend/Icons.js
index 14d1174a4a..e4f332c5ec 100644
--- a/frontend/Icons.js
+++ b/frontend/Icons.js
@@ -19,7 +19,7 @@ const Icons = {
   CHECK: `
     M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z
   `,
-  CLEAR: `
+  CLOSE: `
     M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41
     17.59 19 19 17.59 13.41 12z
   `,
diff --git a/frontend/Node.js b/frontend/Node.js
index d34acb1ed7..aaaff88bb7 100644
--- a/frontend/Node.js
+++ b/frontend/Node.js
@@ -336,11 +336,14 @@ class Node extends React.Component<PropsType, StateType> {
     const jsxOpenTagStyle = jsxTagStyle(inverted && (!isBottomTagSelected || collapsed), nodeType, theme);
     const head = (
       <div ref={h => this._head = h} style={sharedHeadStyle} {...headEvents}>
-        <span style={{
-          width: '1rem',
-          textAlign: 'center',
-          marginLeft: '-1rem',
-        }}>
+        <span
+          onClick={onToggleCollapse}
+          style={{
+            width: '1rem',
+            textAlign: 'center',
+            marginLeft: '-1rem',
+          }}
+        >
           {collapsed ? '▶' : '▼'}
         </span>
         &lt;
diff --git a/frontend/SvgIcon.js b/frontend/SvgIcon.js
index a55d6a644e..47ad6ff3d8 100644
--- a/frontend/SvgIcon.js
+++ b/frontend/SvgIcon.js
@@ -17,22 +17,23 @@ type Props = {
   style?: Object,
 };
 
-const SvgIcon = ({ path, style = styles.svgIcon }: Props) => (
+const SvgIcon = ({ path, style }: Props) => (
   <svg
-    style={style}
+    style={{
+      ...DEFAULT_STYLE,
+      ...style,
+    }}
     viewBox="0 0 24 24"
   >
     <path d={path}></path>
   </svg>
 );
 
-const styles = {
-  svgIcon: {
-    flex: '0 0 1rem',
-    width: '1rem',
-    height: '1rem',
-    fill: 'currentColor',
-  },
+const DEFAULT_STYLE = {
+  flex: '0 0 1rem',
+  width: '1rem',
+  height: '1rem',
+  fill: 'currentColor',
 };
 
 module.exports = SvgIcon;
diff --git a/plugins/Profiler/ProfilerStore.js b/plugins/Profiler/ProfilerStore.js
index 80b3a9d8ef..8035c9aaf6 100644
--- a/plugins/Profiler/ProfilerStore.js
+++ b/plugins/Profiler/ProfilerStore.js
@@ -18,6 +18,8 @@ const {EventEmitter} = require('events');
 const {get, set} = require('../../utils/storage');
 
 const LOCAL_STORAGE_CHART_TYPE_KEY = 'profiler:selectedChartType';
+const LOCAL_STORAGE_COMMIT_THRESHOLD = 'profiler:commitThreshold';
+const LOCAL_STORAGE_HIDE_COMMITS_BELOW_THRESHOLD = 'profiler:hideCommitsBelowThreshold';
 const LOCAL_STORAGE_SHOW_NATIVE_NODES_KEY = 'profiler:showNativeNodes';
 
 class ProfilerStore extends EventEmitter {
@@ -25,7 +27,10 @@ class ProfilerStore extends EventEmitter {
   _mainStore: Object;
 
   cachedData = {};
+  commitThreshold: number = ((get(LOCAL_STORAGE_COMMIT_THRESHOLD, 0): any): number);
+  hideCommitsBelowThreshold: boolean = ((get(LOCAL_STORAGE_HIDE_COMMITS_BELOW_THRESHOLD, false): any): boolean);
   isRecording: boolean = false;
+  isSettingsPanelActive: boolean = false;
   processedInteractions: {[id: string]: Interaction} = {};
   rootsToProfilerData: Map<string, RootProfilerData> = new Map();
   roots: List = new List();
@@ -86,6 +91,29 @@ class ProfilerStore extends EventEmitter {
     this.emit('roots', this._mainStore.roots);
   };
 
+  setCommitThrehsold = (commitThreshold: number) => {
+    this.commitThreshold = commitThreshold;
+    this.emit('commitThreshold', commitThreshold);
+    set(LOCAL_STORAGE_COMMIT_THRESHOLD, commitThreshold);
+  };
+
+  setHideCommitsBelowThreshold(hideCommitsBelowThreshold: boolean): void {
+    this.hideCommitsBelowThreshold = hideCommitsBelowThreshold;
+    this.emit('hideCommitsBelowThreshold', hideCommitsBelowThreshold);
+    set(LOCAL_STORAGE_HIDE_COMMITS_BELOW_THRESHOLD, hideCommitsBelowThreshold);
+  }
+
+  setIsRecording(isRecording: boolean): void {
+    this.isRecording = isRecording;
+    this.emit('isRecording', isRecording);
+    this._mainStore.setIsRecording(isRecording);
+  }
+
+  setIsSettingsPanelActive(isSettingsPanelActive: boolean): void {
+    this.isSettingsPanelActive = isSettingsPanelActive;
+    this.emit('isSettingsPanelActive', isSettingsPanelActive);
+  }
+
   setSelectedChartType(selectedChartType: ChartType) {
     this.selectedChartType = selectedChartType;
     this.emit('selectedChartType', selectedChartType);
@@ -98,12 +126,6 @@ class ProfilerStore extends EventEmitter {
     set(LOCAL_STORAGE_SHOW_NATIVE_NODES_KEY, showNativeNodes);
   }
 
-  setIsRecording(isRecording: boolean): void {
-    this.isRecording = isRecording;
-    this.emit('isRecording', isRecording);
-    this._mainStore.setIsRecording(isRecording);
-  }
-
   storeSnapshot = () => {
     this._mainStore.snapshotQueue.forEach((snapshot: Snapshot) => {
       const { root } = snapshot;
diff --git a/plugins/Profiler/views/ChartNode.js b/plugins/Profiler/views/ChartNode.js
index 242e5101a1..7c73528a72 100644
--- a/plugins/Profiler/views/ChartNode.js
+++ b/plugins/Profiler/views/ChartNode.js
@@ -24,6 +24,7 @@ type Props = {|
   onDoubleClick?: Function,
   placeLabelAboveNode?: boolean,
   theme: Theme,
+  title: string,
   width: number,
   x: number,
   y: number,
@@ -31,12 +32,24 @@ type Props = {|
 
 const minWidthToDisplay = 35;
 
-const ChartNode = ({ color, height, isDimmed = false, label, onClick, onDoubleClick, theme, width, x, y }: Props) => (
+const ChartNode = ({
+  color,
+  height,
+  isDimmed = false,
+  label,
+  onClick,
+  onDoubleClick,
+  theme,
+  title,
+  width,
+  x,
+  y,
+}: Props) => (
   <g
     style={ChartAnimatedNode}
     transform={`translate(${x},${y})`}
   >
-    <title>{label}</title>
+    <title>{title}</title>
     <rect
       width={width}
       height={height}
diff --git a/plugins/Profiler/views/FiberRenderDurations.js b/plugins/Profiler/views/FiberRenderDurations.js
index 9bcc13d6d0..d2f9284cee 100644
--- a/plugins/Profiler/views/FiberRenderDurations.js
+++ b/plugins/Profiler/views/FiberRenderDurations.js
@@ -18,7 +18,7 @@ import React, { PureComponent } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList as List } from 'react-window';
 import ChartNode from './ChartNode';
-import { minBarHeight, minBarWidth, getGradientColor, scale } from './constants';
+import { getFilteredSnapshotData, getGradientColor, minBarHeight, minBarWidth, scale } from './constants';
 import NoRenderTimesMessage from './NoRenderTimesMessage';
 
 type Node = {|
@@ -46,40 +46,62 @@ type ItemData = {|
 type SelectSnapshot = (snapshot: Snapshot) => void;
 
 type Props = {|
+  commitThreshold: number,
+  hideCommitsBelowThreshold: boolean,
   selectedFiberID: string,
   selectedSnapshot: Snapshot,
   selectSnapshot: SelectSnapshot,
+  snapshotIndex: number,
   snapshots: Array<Snapshot>,
   stopInspecting: Function,
   theme: Theme,
 |};
 
 export default ({
+  commitThreshold,
+  hideCommitsBelowThreshold,
   selectedFiberID,
   selectedSnapshot,
   selectSnapshot,
+  snapshotIndex,
   snapshots,
   stopInspecting,
   theme,
-}: Props) => (
-  <AutoSizer>
-    {({ height, width }) => (
-      <RenderDurations
-        height={height}
-        selectedFiberID={selectedFiberID}
-        selectedSnapshot={selectedSnapshot}
-        selectSnapshot={selectSnapshot}
-        snapshots={snapshots}
-        stopInspecting={stopInspecting}
-        theme={theme}
-        width={width}
-      />
-    )}
-  </AutoSizer>
-);
+}: Props) => {
+  const filteredData = getFilteredSnapshotData(
+    commitThreshold,
+    hideCommitsBelowThreshold,
+    true, // If we're viewing this component
+    selectedFiberID,
+    selectedSnapshot,
+    snapshotIndex,
+    snapshots,
+  );
+
+  return (
+    <AutoSizer>
+      {({ height, width }) => (
+        <RenderDurations
+          commitThreshold={commitThreshold}
+          height={height}
+          hideCommitsBelowThreshold={hideCommitsBelowThreshold}
+          selectedFiberID={selectedFiberID}
+          selectedSnapshot={selectedSnapshot}
+          selectSnapshot={selectSnapshot}
+          snapshots={filteredData.snapshots}
+          stopInspecting={stopInspecting}
+          theme={theme}
+          width={width}
+        />
+      )}
+    </AutoSizer>
+  );
+};
 
 type RenderDurationsProps = {|
+  commitThreshold: number,
   height: number,
+  hideCommitsBelowThreshold: boolean,
   selectedFiberID: string,
   selectedSnapshot: Snapshot,
   selectSnapshot: SelectSnapshot,
@@ -90,7 +112,9 @@ type RenderDurationsProps = {|
 |};
 
 const RenderDurations = ({
+  commitThreshold,
   height,
+  hideCommitsBelowThreshold,
   selectedFiberID,
   selectedSnapshot,
   selectSnapshot,
@@ -111,7 +135,9 @@ const RenderDurations = ({
   if (maxValue === 0) {
     return (
       <NoRenderTimesMessage
+        commitThreshold={commitThreshold}
         height={height}
+        hideCommitsBelowThreshold={hideCommitsBelowThreshold}
         stopInspecting={stopInspecting}
         width={width}
       />
@@ -171,6 +197,7 @@ class ListItem extends PureComponent<any, void> {
         onClick={() => selectSnapshot(node.parentSnapshot)}
         onDoubleClick={stopInspecting}
         theme={theme}
+        title={`${node.value}ms`}
         width={width}
         x={left}
         y={height - safeHeight}
diff --git a/plugins/Profiler/views/IconButton.js b/plugins/Profiler/views/IconButton.js
index 5f46c55c14..102c510614 100644
--- a/plugins/Profiler/views/IconButton.js
+++ b/plugins/Profiler/views/IconButton.js
@@ -22,18 +22,29 @@ const IconButton = Hoverable(
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
       style={{
+        position: 'relative',
+        width: '1.5rem',
+        height: '1.5rem',
         background: isTransparent ? 'none' : theme.base00,
         border: 'none',
+        borderRadius: '0.125rem',
         outline: 'none',
         cursor: disabled ? 'default' : 'pointer',
         color: isActive ? theme.state00 : (isHovered ? theme.state06 : theme.base05),
         opacity: disabled ? 0.5 : 1,
-        padding: '4px',
         ...style,
       }}
       title={title}
     >
-      <SvgIcon path={icon} />
+      <SvgIcon
+        path={icon}
+        style={{
+          position: 'absolute',
+          top: '50%',
+          bottom: '50%',
+          transform: 'translate(-50%, -50%)',
+        }}
+      />
     </button>
   )
 );
diff --git a/plugins/Profiler/views/NoRenderTimesMessage.js b/plugins/Profiler/views/NoRenderTimesMessage.js
index 497022599b..77c391966e 100644
--- a/plugins/Profiler/views/NoRenderTimesMessage.js
+++ b/plugins/Profiler/views/NoRenderTimesMessage.js
@@ -14,12 +14,20 @@ import React from 'react';
 import {sansSerif} from '../../../frontend/Themes/Fonts';
 
 type Props = {|
+  commitThreshold: number,
   height: number,
+  hideCommitsBelowThreshold: boolean,
   stopInspecting: Function,
   width: number,
 |};
 
-export default ({ height, stopInspecting, width }: Props) => (
+export default ({
+  commitThreshold,
+  height,
+  hideCommitsBelowThreshold,
+  stopInspecting,
+  width,
+}: Props) => (
   <div style={{
     display: 'flex',
     flexDirection: 'column',
@@ -29,11 +37,16 @@ export default ({ height, stopInspecting, width }: Props) => (
     height,
     width,
   }}>
-    <p style={{
-      fontSize: sansSerif.sizes.large,
-    }}>
-      No render times were recorded for the selected element
-    </p>
+    {!hideCommitsBelowThreshold && (
+      <p style={{ fontSize: sansSerif.sizes.large}}>
+        No render times were recorded for the selected element.
+      </p>
+    )}
+    {hideCommitsBelowThreshold && (
+      <p style={{ fontSize: sansSerif.sizes.large}}>
+        No render times were recorded for the selected element based on the current commit threshold.
+      </p>
+    )}
     <p>
       <button onClick={stopInspecting}>Return to the previous view</button>
     </p>
diff --git a/plugins/Profiler/views/ProfilerFiberDetailPane.js b/plugins/Profiler/views/ProfilerFiberDetailPane.js
index 3a8bb8db72..eda088cb5b 100644
--- a/plugins/Profiler/views/ProfilerFiberDetailPane.js
+++ b/plugins/Profiler/views/ProfilerFiberDetailPane.js
@@ -11,7 +11,7 @@
 'use strict';
 
 import type {Theme} from '../../../frontend/types';
-import type {ChartType, Snapshot} from '../ProfilerTypes';
+import type {Snapshot} from '../ProfilerTypes';
 
 import React, {Fragment} from 'react';
 import {monospace} from '../../../frontend/Themes/Fonts';
@@ -24,9 +24,9 @@ import IconButton from './IconButton';
 const emptyFunction = () => {};
 
 type Props = {|
+  deselectFiber: Function,
   isInspectingSelectedFiber: boolean,
   name?: string,
-  selectedChartType: ChartType,
   snapshot: Snapshot,
   snapshotFiber: any,
   theme: Theme,
@@ -34,9 +34,9 @@ type Props = {|
 |};
 
 const ProfilerFiberDetailPane = ({
+  deselectFiber,
   isInspectingSelectedFiber,
   name = 'Unknown',
-  selectedChartType,
   snapshot,
   snapshotFiber,
   theme,
@@ -66,18 +66,30 @@ const ProfilerFiberDetailPane = ({
       >
         {name}
       </div>
-      <IconButton
-        icon={
-          isInspectingSelectedFiber
-            ? selectedChartType === 'flamegraph'
-              ? Icons.FLAME_CHART
-              : Icons.RANKED_CHART
-            : Icons.BARS
-        }
-        onClick={toggleInspectingSelectedFiber}
-        theme={theme}
-        title={`Inspect ${name}`}
-      />
+      <div>
+        <IconButton
+          disabled={isInspectingSelectedFiber}
+          icon={Icons.BARS}
+          onClick={toggleInspectingSelectedFiber}
+          style={{
+            backgroundColor: theme.state00,
+            color: theme.base00,
+          }}
+          theme={theme}
+          title={`Inspect ${name}`}
+        />
+        <IconButton
+          icon={Icons.CLOSE}
+          onClick={isInspectingSelectedFiber ? toggleInspectingSelectedFiber : deselectFiber}
+          style={{
+            marginLeft: '0.25rem',
+            backgroundColor: theme.base03,
+            color: theme.base05,
+          }}
+          theme={theme}
+          title="Close"
+        />
+      </div>
     </div>
     {snapshotFiber !== null && (
       <div style={{
diff --git a/plugins/Profiler/views/ProfilerSettings.js b/plugins/Profiler/views/ProfilerSettings.js
new file mode 100644
index 0000000000..74af7ff8f9
--- /dev/null
+++ b/plugins/Profiler/views/ProfilerSettings.js
@@ -0,0 +1,162 @@
+/**
+ * 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.
+ *
+ */
+'use strict';
+
+import PropTypes from 'prop-types';
+import React, { PureComponent } from 'react';
+import decorate from '../../../frontend/decorate';
+import {sansSerif} from '../../../frontend/Themes/Fonts';
+
+type Props = {|
+  commitThreshold: number,
+  isSettingsPanelActive: boolean,
+  hideCommitsBelowThreshold: boolean,
+  setCommitThrehsold: (value: number) => void,
+  showNativeNodes: boolean,
+  toggleHideCommitsBelowThreshold: Function,
+  toggleIsSettingsPanelActive: Function,
+  toggleShowNativeNodes: Function,
+|};
+
+class ProfilerSettings extends PureComponent<Props, void> {
+  static contextTypes = {
+    theme: PropTypes.object.isRequired,
+  };
+
+  handleCommitThresholdChange = event => {
+    const { hideCommitsBelowThreshold, setCommitThrehsold, toggleHideCommitsBelowThreshold } = this.props;
+
+    const commitThreshold = parseFloat(event.currentTarget.value);
+    if (!Number.isNaN(commitThreshold)) {
+      setCommitThrehsold(commitThreshold);
+
+      // For convenience, enable the hide-commits feature if the threshold is being changed.
+      // This seems likely to be what the user wants.
+      if (!hideCommitsBelowThreshold) {
+        toggleHideCommitsBelowThreshold();
+      }
+    }
+  };
+
+  stopClickEventFromBubbling = event => event.stopPropagation();
+
+  render() {
+    const { theme } = this.context;
+    const {
+      commitThreshold,
+      hideCommitsBelowThreshold,
+      isSettingsPanelActive,
+      toggleHideCommitsBelowThreshold,
+      toggleIsSettingsPanelActive,
+      toggleShowNativeNodes,
+      showNativeNodes,
+    } = this.props;
+
+    if (!isSettingsPanelActive) {
+      return null;
+    }
+
+    return (
+      <div
+        onClick={toggleIsSettingsPanelActive}
+        style={{
+          position: 'absolute',
+          top: 0,
+          left: 0,
+          width: '100%',
+          height: '100%',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        <div
+          onClick={this.stopClickEventFromBubbling}
+          style={{
+            fontFamily: sansSerif.family,
+            backgroundColor: theme.base01,
+            border: `1px solid ${theme.base03}`,
+            color: theme.base05,
+            borderRadius: '0.25rem',
+            maxWidth: '100%',
+            minWidth: '250px',
+            padding: '0.5rem',
+            margin: '0.5rem',
+          }}
+        >
+          <h4 style={{margin: '0 0 0.5rem'}}>
+            Profiler settings
+          </h4>
+
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              cursor: 'pointer',
+              marginBottom: '0.25rem',
+            }}
+            title="Show native elements"
+          >
+            <input
+              type="checkbox"
+              checked={showNativeNodes}
+              onChange={toggleShowNativeNodes}
+            /> Show native elements
+          </label>
+
+          <label
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              cursor: 'pointer',
+            }}
+            title="Hide commits below threshold"
+          >
+            <input
+              type="checkbox"
+              checked={hideCommitsBelowThreshold}
+              onChange={toggleHideCommitsBelowThreshold}
+            /> Hide commits below <input
+              type="number"
+              style={{
+                width: '3rem',
+              }}
+              defaultValue={commitThreshold}
+              min={1}
+              onChange={this.handleCommitThresholdChange}
+            /> ms
+          </label>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default decorate({
+  store: 'profilerStore',
+  listeners: () => [
+    'commitThreshold',
+    'hideCommitsBelowThreshold',
+    'isSettingsPanelActive',
+    'showNativeNodes',
+  ],
+  props(store) {
+    return {
+      commitThreshold: store.commitThreshold,
+      hideCommitsBelowThreshold: store.hideCommitsBelowThreshold,
+      isSettingsPanelActive: store.isSettingsPanelActive,
+      showNativeNodes: store.showNativeNodes,
+      setCommitThrehsold: store.setCommitThrehsold,
+      toggleHideCommitsBelowThreshold: () => store.setHideCommitsBelowThreshold(!store.hideCommitsBelowThreshold),
+      toggleIsSettingsPanelActive: () => store.setIsSettingsPanelActive(!store.isSettingsPanelActive),
+      toggleShowNativeNodes: () => store.setShowNativeNodes(!store.showNativeNodes),
+    };
+  },
+}, ProfilerSettings);
diff --git a/plugins/Profiler/views/ProfilerSnapshotDetailPane.js b/plugins/Profiler/views/ProfilerSnapshotDetailPane.js
index 5336378c9e..4e2c6c5a41 100644
--- a/plugins/Profiler/views/ProfilerSnapshotDetailPane.js
+++ b/plugins/Profiler/views/ProfilerSnapshotDetailPane.js
@@ -50,7 +50,7 @@ const ProfilerSnapshotDetailPane = ({
     <div style={{
       padding: '0.5rem',
     }}>
-      <div><strong>Commit time</strong>: {formatTime(snapshot.commitTime)}s</div>
+      <div><strong>Committed at</strong>: {formatTime(snapshot.commitTime)}s</div>
       <div style={{marginTop: '0.5rem'}}><strong>Render duration</strong>: {formatDuration(snapshot.duration)}ms</div>
       <div style={{margin: '0.5rem 0'}}><strong>Interactions</strong>:</div>
       <ul style={{
diff --git a/plugins/Profiler/views/ProfilerTab.js b/plugins/Profiler/views/ProfilerTab.js
index d5f1f13fe2..e8b7597c94 100644
--- a/plugins/Profiler/views/ProfilerTab.js
+++ b/plugins/Profiler/views/ProfilerTab.js
@@ -34,13 +34,16 @@ import ProfilerTabToolbar from './ProfilerTabToolbar';
 import ProfilerFiberDetailPane from './ProfilerFiberDetailPane';
 import ProfilerSnapshotDetailPane from './ProfilerSnapshotDetailPane';
 import ProfilerInteractionDetailPane from './ProfilerInteractionDetailPane';
+import ProfilerSettings from './ProfilerSettings';
 
 type Props = {|
   cacheDataForSnapshot: CacheDataForSnapshot,
   cacheInteractionData: CacheInteractionData,
+  commitThreshold: number,
   getCachedDataForSnapshot: GetCachedDataForSnapshot,
   getCachedInteractionData: GetCachedInteractionData,
   hasMultipleRoots: boolean,
+  hideCommitsBelowThreshold: boolean,
   interactionsToSnapshots: Map<Interaction, Set<Snapshot>>,
   isRecording: boolean,
   profilerData: RootProfilerData,
@@ -50,8 +53,8 @@ type Props = {|
   showNativeNodes: boolean,
   snapshots: Array<Snapshot>,
   timestampsToInteractions: Map<number, Set<Interaction>>,
-  toggleIsRecording: () => void,
-  toggleShowNativeNodes: () => void,
+  toggleIsRecording: Function,
+  toggleIsSettingsPanelActive: Function,
 |};
 
 type State = {|
@@ -128,12 +131,6 @@ class ProfilerTab extends React.Component<Props, State> {
       selectedFiberName: name,
     });
 
-  selectNextSnapshotIndex = (event: SyntheticEvent<HTMLButtonElement>) =>
-    this.setState(prevState => ({ snapshotIndex: prevState.snapshotIndex + 1 }));
-
-  selectPreviousSnapshotIndex = (event: SyntheticEvent<HTMLButtonElement>) =>
-    this.setState(prevState => ({ snapshotIndex: prevState.snapshotIndex - 1 }));
-
   // We store the ID and name separately,
   // Because a Fiber may not exist in all snapshots.
   // In that case, it's still important to show the selected fiber (name) in the details pane.
@@ -177,9 +174,11 @@ class ProfilerTab extends React.Component<Props, State> {
     const {
       cacheDataForSnapshot,
       cacheInteractionData,
+      commitThreshold,
       getCachedDataForSnapshot,
       getCachedInteractionData,
       hasMultipleRoots,
+      hideCommitsBelowThreshold,
       interactionsToSnapshots,
       isRecording,
       profilerData,
@@ -189,6 +188,7 @@ class ProfilerTab extends React.Component<Props, State> {
       snapshots,
       timestampsToInteractions,
       toggleIsRecording,
+      toggleIsSettingsPanelActive,
     } = this.props;
     const {
       isInspectingSelectedFiber,
@@ -220,9 +220,12 @@ class ProfilerTab extends React.Component<Props, State> {
       if (isInspectingSelectedFiber && selectedFiberID !== null) {
         content = (
           <FiberRenderDurations
+            commitThreshold={commitThreshold}
+            hideCommitsBelowThreshold={hideCommitsBelowThreshold}
             selectedFiberID={selectedFiberID}
             selectedSnapshot={snapshot}
             selectSnapshot={this.selectSnapshot}
+            snapshotIndex={snapshotIndex}
             snapshots={snapshots}
             stopInspecting={this.stopInspecting}
             theme={theme}
@@ -251,6 +254,7 @@ class ProfilerTab extends React.Component<Props, State> {
         content = (
           <ChartComponent
             cacheDataForSnapshot={cacheDataForSnapshot}
+            deselectFiber={this.deselectFiber}
             getCachedDataForSnapshot={getCachedDataForSnapshot}
             inspectFiber={this.inspectFiber}
             selectedFiberID={selectedFiberID}
@@ -301,9 +305,9 @@ class ProfilerTab extends React.Component<Props, State> {
     } else if (selectedChartType !== 'interactions' && selectedFiberName !== null) {
       details = (
         <ProfilerFiberDetailPane
+          deselectFiber={this.deselectFiber}
           isInspectingSelectedFiber={isInspectingSelectedFiber}
           name={selectedFiberName}
-          selectedChartType={selectedChartType}
           snapshot={snapshot}
           snapshotFiber={snapshotFiber}
           toggleInspectingSelectedFiber={this.toggleInspectingSelectedFiber}
@@ -339,29 +343,32 @@ class ProfilerTab extends React.Component<Props, State> {
             borderBottom: `1px solid ${theme.base03}`,
           }}>
             <ProfilerTabToolbar
+              commitThreshold={commitThreshold}
+              hideCommitsBelowThreshold={hideCommitsBelowThreshold}
               interactionsCount={interactionsToSnapshots.size}
               isInspectingSelectedFiber={isInspectingSelectedFiber}
               isRecording={isRecording}
               selectChart={this.props.setSelectedChartType}
-              selectNextSnapshotIndex={this.selectNextSnapshotIndex}
-              selectPreviousSnapshotIndex={this.selectPreviousSnapshotIndex}
               selectedChartType={selectedChartType}
+              selectedFiberID={selectedFiberID}
               selectedSnapshot={snapshot}
               selectSnapshot={this.selectSnapshot}
-              showNativeNodes={this.props.showNativeNodes}
               snapshotIndex={snapshotIndex}
               snapshots={snapshots}
               theme={theme}
               toggleIsRecording={toggleIsRecording}
-              toggleShowNativeNodes={this.props.toggleShowNativeNodes}
+              toggleIsSettingsPanelActive={toggleIsSettingsPanelActive}
             />
           </div>
           <div style={{
             flex: 1,
             padding: '0.5rem',
             boxSizing: 'border-box',
+            position: 'relative',
           }}>
             {content}
+
+            <ProfilerSettings />
           </div>
         </div>
         <div style={{
@@ -428,6 +435,8 @@ const RecordingInProgress = ({stopRecording, theme}) => (
 export default decorate({
   store: 'profilerStore',
   listeners: () => [
+    'commitThreshold',
+    'hideCommitsBelowThreshold',
     'isRecording',
     'profilerData',
     'selectedChartType',
@@ -445,7 +454,9 @@ export default decorate({
       cacheInteractionData: (...args) => store.cacheInteractionData(...args),
       getCachedDataForSnapshot: (...args) => store.getCachedDataForSnapshot(...args),
       getCachedInteractionData: (...args) => store.getCachedInteractionData(...args),
+      commitThreshold: store.commitThreshold,
       hasMultipleRoots: store.roots.size > 1,
+      hideCommitsBelowThreshold: store.hideCommitsBelowThreshold,
       interactionsToSnapshots: profilerData !== null
         ? profilerData.interactionsToSnapshots
         : new Map(),
@@ -461,7 +472,7 @@ export default decorate({
         ? profilerData.timestampsToInteractions
         : new Map(),
       toggleIsRecording: () => store.setIsRecording(!store.isRecording),
-      toggleShowNativeNodes: () => store.setShowNativeNodes(!store.showNativeNodes),
+      toggleIsSettingsPanelActive: () => store.setIsSettingsPanelActive(!store.isSettingsPanelActive),
     };
   },
 }, ProfilerTab);
diff --git a/plugins/Profiler/views/ProfilerTabToolbar.js b/plugins/Profiler/views/ProfilerTabToolbar.js
index b72fde3658..b6e9409d87 100644
--- a/plugins/Profiler/views/ProfilerTabToolbar.js
+++ b/plugins/Profiler/views/ProfilerTabToolbar.js
@@ -22,26 +22,25 @@ import IconButton from './IconButton';
 import SnapshotSelector from './SnapshotSelector';
 
 const CHART_RADIO_LABEL_WIDTH_THRESHOLD = 650;
-const CHART_NATIVE_NODES_TOGGLE_LABEL_WIDTH_THRESHOLD = 800;
 
 type SelectSnapshot = (snapshot: Snapshot) => void;
 
 type Props = {|
+  commitThreshold: number,
+  hideCommitsBelowThreshold: boolean,
   interactionsCount: number,
   isInspectingSelectedFiber: boolean,
   isRecording: boolean,
   selectChart: (chart: ChartType) => void,
-  selectNextSnapshotIndex: Function,
-  selectPreviousSnapshotIndex: Function,
   selectedChartType: ChartType,
+  selectedFiberID: string | null,
   selectedSnapshot: Snapshot,
   selectSnapshot: SelectSnapshot,
-  showNativeNodes: boolean,
   snapshotIndex: number,
   snapshots: Array<Snapshot>,
   theme: Theme,
   toggleIsRecording: Function,
-  toggleShowNativeNodes: Function,
+  toggleIsSettingsPanelActive: Function,
 |};
 
 export default (props: Props) => (
@@ -53,40 +52,40 @@ export default (props: Props) => (
 );
 
 type ProfilerTabToolbarProps = {
+  commitThreshold: number,
+  hideCommitsBelowThreshold: boolean,
   interactionsCount: number,
   isInspectingSelectedFiber: boolean,
   isRecording: boolean,
   selectChart: (chart: ChartType) => void,
-  selectNextSnapshotIndex: Function,
-  selectPreviousSnapshotIndex: Function,
   selectedChartType: ChartType,
+  selectedFiberID: string | null,
   selectedSnapshot: Snapshot,
   selectSnapshot: SelectSnapshot,
-  showNativeNodes: boolean,
   snapshotIndex: number,
   snapshots: Array<Snapshot>,
   theme: Theme,
   toggleIsRecording: Function,
-  toggleShowNativeNodes: Function,
+  toggleIsSettingsPanelActive: Function,
   width: number,
 };
 
 const ProfilerTabToolbar = ({
+  commitThreshold,
+  hideCommitsBelowThreshold,
   interactionsCount,
   isInspectingSelectedFiber,
   isRecording,
   selectChart,
-  selectNextSnapshotIndex,
-  selectPreviousSnapshotIndex,
   selectedChartType,
+  selectedFiberID,
   selectedSnapshot,
   selectSnapshot,
-  showNativeNodes,
   snapshotIndex,
   snapshots,
   theme,
   toggleIsRecording,
-  toggleShowNativeNodes,
+  toggleIsSettingsPanelActive,
   width,
 }: ProfilerTabToolbarProps) => (
   <div style={{
@@ -107,6 +106,20 @@ const ProfilerTabToolbar = ({
 
     <HRule theme={theme} />
 
+    {isRecording || snapshots.length === 0 && (
+      <Fragment>
+        <div style={{flex: 1}} />
+
+        <IconButton
+          icon={Icons.SETTINGS}
+          isTransparent={true}
+          label="Profiler settings"
+          onClick={toggleIsSettingsPanelActive}
+          theme={theme}
+        />
+      </Fragment>
+    )}
+
     {!isRecording && snapshots.length > 0 && (
       <Fragment>
         <RadioOption
@@ -141,46 +154,27 @@ const ProfilerTabToolbar = ({
 
         <div style={{flex: 1}} />
 
-        <ShowNativeNodesButton
-          isActive={showNativeNodes}
-          isDisabled={isInspectingSelectedFiber}
-          onClick={toggleShowNativeNodes}
+        <IconButton
+          icon={Icons.SETTINGS}
+          isTransparent={true}
+          label="Profiler settings"
+          onClick={toggleIsSettingsPanelActive}
           theme={theme}
-          width={width}
         />
 
         <HRule theme={theme} />
 
-        <span
-          style={{
-            opacity: isInspectingSelectedFiber ? 0.5 : 1,
-          }}
-        >
-          {snapshotIndex + 1} / {snapshots.length}
-        </span>
-        <IconButton
-          disabled={snapshotIndex === 0 || isInspectingSelectedFiber}
-          icon={Icons.BACK}
-          isTransparent={true}
-          onClick={selectPreviousSnapshotIndex}
-          theme={theme}
-          title="Previous render"
-        />
         <SnapshotSelector
-          disabled={isInspectingSelectedFiber}
+          commitThreshold={commitThreshold}
+          hideCommitsBelowThreshold={hideCommitsBelowThreshold}
+          isInspectingSelectedFiber={isInspectingSelectedFiber}
+          selectedFiberID={selectedFiberID}
           selectedSnapshot={selectedSnapshot}
           selectSnapshot={selectSnapshot}
+          snapshotIndex={snapshotIndex}
           snapshots={snapshots}
           theme={theme}
         />
-        <IconButton
-          disabled={snapshotIndex === snapshots.length - 1 || isInspectingSelectedFiber}
-          icon={Icons.FORWARD}
-          isTransparent={true}
-          onClick={selectNextSnapshotIndex}
-          theme={theme}
-          title="Next render"
-        />
       </Fragment>
     )}
   </div>
@@ -291,59 +285,3 @@ const RecordButton = Hoverable(
     </button>
   )
 );
-
-type ShowNativeNodesButtonProps = {|
-  isActive: boolean,
-  isDisabled: boolean,
-  isHovered: boolean,
-  onClick: Function,
-  onMouseEnter: Function,
-  onMouseLeave: Function,
-  theme: Theme,
-  width: number,
-|};
-
-const ShowNativeNodesButton = Hoverable(({
-  isActive,
-  isDisabled,
-  isHovered,
-  onClick,
-  onMouseEnter,
-  onMouseLeave,
-  theme,
-  width,
-}: ShowNativeNodesButtonProps) => (
-  <label
-    onMouseEnter={onMouseEnter}
-    onMouseLeave={onMouseLeave}
-    style={{
-      display: 'flex',
-      alignItems: 'center',
-      color: isHovered ? theme.state06 : 'inherit',
-      cursor: 'pointer',
-      opacity: isDisabled ? 0.5 : 1,
-      pointerEvents: isDisabled ? 'none' : 'auto',
-    }}
-    title="Show native elements?"
-  >
-    <input
-      disabled={isDisabled}
-      type="checkbox"
-      checked={isActive}
-      onChange={onClick}
-    />
-    <SvgIcon
-      path={Icons.DOM_ELEMENT}
-      style={{
-        flex: '0 0 1rem',
-        width: '1rem',
-        height: '1rem',
-        fill: 'currentColor',
-        display: 'inline',
-        verticalAlign: 'sub',
-        margin: '0 0.25rem',
-      }}
-     />
-     {width >= CHART_NATIVE_NODES_TOGGLE_LABEL_WIDTH_THRESHOLD ? 'Show native nodes?' : ''}
-  </label>
-));
diff --git a/plugins/Profiler/views/SnapshotFlamegraph.js b/plugins/Profiler/views/SnapshotFlamegraph.js
index 7b99b66005..85f65e9599 100644
--- a/plugins/Profiler/views/SnapshotFlamegraph.js
+++ b/plugins/Profiler/views/SnapshotFlamegraph.js
@@ -72,6 +72,7 @@ type ItemData = {|
 
 type Props = {|
   cacheDataForSnapshot: CacheDataForSnapshot,
+  deselectFiber: Function,
   getCachedDataForSnapshot: GetCachedDataForSnapshot,
   inspectFiber: SelectOrInspectFiber,
   selectedFiberID: string | null,
@@ -84,6 +85,7 @@ type Props = {|
 
 const SnapshotFlamegraph = ({
   cacheDataForSnapshot,
+  deselectFiber,
   getCachedDataForSnapshot,
   inspectFiber,
   selectedFiberID,
@@ -105,6 +107,7 @@ const SnapshotFlamegraph = ({
     <AutoSizer>
       {({ height, width }) => (
         <Flamegraph
+          deselectFiber={deselectFiber}
           flamegraphData={((flamegraphData: any): FlamegraphData)}
           height={height}
           inspectFiber={inspectFiber}
@@ -121,6 +124,7 @@ const SnapshotFlamegraph = ({
 };
 
 type FlamegraphProps = {|
+  deselectFiber: Function,
   flamegraphData: FlamegraphData,
   height: number,
   inspectFiber: SelectOrInspectFiber,
@@ -133,6 +137,7 @@ type FlamegraphProps = {|
 |};
 
 const Flamegraph = ({
+  deselectFiber,
   flamegraphData,
   height,
   inspectFiber,
@@ -174,20 +179,37 @@ const Flamegraph = ({
   }
 
   return (
-    <List
-      height={height}
-      innerTagName="svg"
-      itemCount={flameGraphDepth}
-      itemData={itemData}
-      itemSize={barHeight}
-      width={width}
+    <div
+      onClick={deselectFiber}
+      style={{height, width}}
     >
-      {ListItem}
-    </List>
+      <List
+        height={height}
+        innerTagName="svg"
+        itemCount={flameGraphDepth}
+        itemData={itemData}
+        itemSize={barHeight}
+        width={width}
+      >
+        {ListItem}
+      </List>
+    </div>
   );
 };
 
 class ListItem extends PureComponent<any, void> {
+  handleClick = (id, name, event) => {
+    event.stopPropagation();
+    const itemData: ItemData = ((this.props.data: any): ItemData);
+    itemData.selectFiber(id, name);
+  };
+
+  handleDoubleClick = (id, name, event) => {
+    event.stopPropagation();
+    const itemData: ItemData = ((this.props.data: any): ItemData);
+    itemData.inspectFiber(id, name);
+  };
+
   render() {
     const { index, style } = this.props;
     const itemData: ItemData = ((this.props.data: any): ItemData);
@@ -245,9 +267,10 @@ class ListItem extends PureComponent<any, void> {
               isDimmed={index < focusedNodeIndex}
               key={id}
               label={didRender ? `${name} (${actualDuration.toFixed(2)}ms)` : name}
-              onClick={() => itemData.selectFiber(id, name)}
-              onDoubleClick={() => itemData.inspectFiber(id, name)}
+              onClick={this.handleClick.bind(this, id, name)}
+              onDoubleClick={this.handleDoubleClick.bind(this, id, name)}
               theme={itemData.theme}
+              title={didRender ? `${name} (${actualDuration}ms)` : name}
               width={nodeWidth}
               x={nodeX - focusedNodeX}
               y={top}
diff --git a/plugins/Profiler/views/SnapshotRanked.js b/plugins/Profiler/views/SnapshotRanked.js
index 863fad5bc4..87755b4691 100644
--- a/plugins/Profiler/views/SnapshotRanked.js
+++ b/plugins/Profiler/views/SnapshotRanked.js
@@ -25,6 +25,7 @@ type Node = {|
   id: any,
   label: string,
   name: string,
+  title: string,
   value: number,
 |};
 
@@ -44,6 +45,7 @@ type ItemData = {|
 
 type Props = {|
   cacheDataForSnapshot: CacheDataForSnapshot,
+  deselectFiber: Function,
   getCachedDataForSnapshot: GetCachedDataForSnapshot,
   inspectFiber: SelectOrInspectFiber,
   selectedFiberID: string | null,
@@ -56,6 +58,7 @@ type Props = {|
 
 const SnapshotRanked = ({
   cacheDataForSnapshot,
+  deselectFiber,
   getCachedDataForSnapshot,
   inspectFiber,
   selectedFiberID,
@@ -77,6 +80,7 @@ const SnapshotRanked = ({
     <AutoSizer>
       {({ height, width }) => (
         <SnapshotRankedInner
+          deselectFiber={deselectFiber}
           height={height}
           inspectFiber={inspectFiber}
           rankedData={((rankedData: any): RankedData)}
@@ -97,6 +101,7 @@ type RankedData = {|
 |};
 
 type SnapshotRankedInnerProps = {|
+  deselectFiber: Function,
   height: number,
   inspectFiber: SelectOrInspectFiber,
   rankedData: RankedData,
@@ -108,6 +113,7 @@ type SnapshotRankedInnerProps = {|
 |};
 
 const SnapshotRankedInner = ({
+  deselectFiber,
   height,
   inspectFiber,
   rankedData,
@@ -138,20 +144,39 @@ const SnapshotRankedInner = ({
   );
 
   return (
-    <List
-      height={height}
-      innerTagName="svg"
-      itemCount={rankedData.nodes.length}
-      itemData={itemData}
-      itemSize={barHeight}
-      width={width}
+    <div
+      onClick={deselectFiber}
+      style={{height, width}}
     >
-      {ListItem}
-    </List>
+      <List
+        height={height}
+        innerTagName="svg"
+        itemCount={rankedData.nodes.length}
+        itemData={itemData}
+        itemSize={barHeight}
+        width={width}
+      >
+        {ListItem}
+      </List>
+    </div>
   );
 };
 
 class ListItem extends PureComponent<any, void> {
+  handleClick = event => {
+    event.stopPropagation();
+    const { data, index } = this.props;
+    const node = data.nodes[index];
+    data.selectFiber(node.id, node.name, data.snapshot.root);
+  };
+
+  handleDoubleClick = event => {
+    event.stopPropagation();
+    const { data, index } = this.props;
+    const node = data.nodes[index];
+    data.inspectFiber(node.id, node.name, data.snapshot.root);
+  };
+
   render() {
     const { data, index, style } = this.props;
 
@@ -172,9 +197,10 @@ class ListItem extends PureComponent<any, void> {
         isDimmed={index < data.focusedNodeIndex}
         key={node.id}
         label={node.label}
-        onClick={() => data.selectFiber(node.id, node.name, data.snapshot.root)}
-        onDoubleClick={() => data.inspectFiber(node.id, node.name, data.snapshot.root)}
+        onClick={this.handleClick}
+        onDoubleClick={this.handleDoubleClick}
         theme={data.theme}
+        title={node.title}
         width={Math.max(minBarWidth, scaleX(node.value))}
         x={0}
         y={top}
@@ -234,6 +260,7 @@ const convertSnapshotToChartData = (snapshot: Snapshot, showNativeNodes: boolean
         id: node.id,
         label: `${name} (${node.actualDuration.toFixed(2)}ms)`,
         name,
+        title: `${name} (${node.actualDuration}ms)`,
         value: node.actualDuration,
       };
     })
diff --git a/plugins/Profiler/views/SnapshotSelector.js b/plugins/Profiler/views/SnapshotSelector.js
index 31e8ec9da0..38e7c534fc 100644
--- a/plugins/Profiler/views/SnapshotSelector.js
+++ b/plugins/Profiler/views/SnapshotSelector.js
@@ -17,7 +17,17 @@ import memoize from 'memoize-one';
 import React, {PureComponent} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList as List } from 'react-window';
-import { didNotRender, formatDuration, formatTime, getGradientColor, minBarHeight, minBarWidth } from './constants';
+import {
+  didNotRender,
+  formatDuration,
+  formatTime,
+  getGradientColor,
+  getFilteredSnapshotData,
+  minBarHeight,
+  minBarWidth,
+} from './constants';
+import Icons from '../../../frontend/Icons';
+import IconButton from './IconButton';
 
 const HEIGHT = 20;
 
@@ -29,62 +39,221 @@ type ListData = {|
 |};
 
 type ItemData = {|
-  disabled: boolean,
   isMouseDown: boolean,
   maxDuration: number,
   selectSnapshot: SelectSnapshot,
   selectedSnapshot: Snapshot,
   snapshots: Array<Snapshot>,
+  theme: Theme,
 |};
 
 type Props = {|
-  disabled: boolean,
+  commitThreshold: number,
+  hideCommitsBelowThreshold: boolean,
+  isInspectingSelectedFiber: boolean,
+  selectedFiberID: string | null,
   selectedSnapshot: Snapshot,
   selectSnapshot: SelectSnapshot,
+  snapshotIndex: number,
   snapshots: Array<Snapshot>,
   theme: Theme,
 |};
 
 export default ({
-  disabled,
+  commitThreshold,
+  hideCommitsBelowThreshold,
+  isInspectingSelectedFiber,
+  selectedFiberID,
   selectedSnapshot,
   selectSnapshot,
+  snapshotIndex,
   snapshots,
   theme,
 }: Props) => {
+  const filteredData = getFilteredSnapshotData(
+    commitThreshold,
+    hideCommitsBelowThreshold,
+    isInspectingSelectedFiber,
+    selectedFiberID,
+    selectedSnapshot,
+    snapshotIndex,
+    snapshots,
+  );
+
   return (
-    <div style={{
-      flex: '1 1 100px',
-      maxWidth: 250,
-      height: HEIGHT,
-      display: 'grid',
-      alignitems: 'flex-end',
-      gridGap: '1px',
-      gridAutoFlow: 'column',
-      backgroundColor: theme.base00,
-    }}>
-      <AutoSizer disableHeight={true}>
-        {({ height, width }) => (
-          <SnapshotSelector
-            disabled={disabled}
-            height={HEIGHT}
-            selectedSnapshot={selectedSnapshot}
-            selectSnapshot={selectSnapshot}
-            snapshots={snapshots}
-            width={width}
-          />
-        )}
-      </AutoSizer>
-    </div>
+    <SnapshotSelectorWrapper
+      commitThreshold={commitThreshold}
+      hideCommitsBelowThreshold={hideCommitsBelowThreshold}
+      isInspectingSelectedFiber={isInspectingSelectedFiber}
+      selectedFiberID={selectedFiberID}
+      selectedSnapshot={selectedSnapshot}
+      selectSnapshot={selectSnapshot}
+      snapshotIndex={filteredData.snapshotIndex}
+      snapshots={filteredData.snapshots}
+      theme={theme}
+    />
   );
 };
 
+class SnapshotSelectorWrapper extends PureComponent<Props, void> {
+  handleKeyDown = event => {
+    if (event.keyCode === LEFT_ARROW || event.keyCode === RIGHT_ARROW) {
+      event.preventDefault();
+
+      if (event.keyCode === LEFT_ARROW) {
+        this.selectPreviousSnapshotIndex();
+      } else {
+        this.selectNextSnapshotIndex();
+      }
+    }
+  };
+
+  selectNextSnapshotIndex = () => {
+    const {
+      selectSnapshot,
+      snapshotIndex,
+      snapshots,
+    } = this.props;
+
+    if (snapshots.length > 0) {
+      const newIndex = snapshotIndex < snapshots.length - 1
+        ? snapshotIndex + 1
+        : 0;
+
+      selectSnapshot(snapshots[newIndex]);
+    }
+  };
+
+  selectPreviousSnapshotIndex = () => {
+    const {
+      selectSnapshot,
+      snapshotIndex,
+      snapshots,
+    } = this.props;
+
+    if (snapshots.length > 0) {
+      const newIndex = snapshotIndex > 0
+        ? snapshotIndex - 1
+        : snapshots.length - 1;
+
+      selectSnapshot(snapshots[newIndex]);
+    }
+  };
+
+  render() {
+    const {
+      commitThreshold,
+      hideCommitsBelowThreshold,
+      isInspectingSelectedFiber,
+      selectedFiberID,
+      selectedSnapshot,
+      selectSnapshot,
+      snapshotIndex,
+      snapshots,
+      theme,
+    } = this.props;
+
+    const numSnapshots = snapshots.length;
+
+    return (
+      <div
+        onKeyDown={this.handleKeyDown}
+        style={{
+          display: 'flex',
+          flex: '1 0 auto',
+          alignItems: 'center',
+          outline: 'none',
+        }}
+        tabIndex={0}
+      >
+        {numSnapshots === 0 && (
+          <span style={{whiteSpace: 'nowrap'}}>
+            0 / 0
+          </span>
+        )}
+        {numSnapshots > 0 && (
+          <span style={{whiteSpace: 'nowrap'}}>
+            {`${snapshotIndex + 1}`.padStart(`${numSnapshots}`.length, '0')} / {numSnapshots}
+          </span>
+        )}
+        <IconButton
+          disabled={numSnapshots === 0}
+          icon={Icons.BACK}
+          isTransparent={true}
+          onClick={this.selectPreviousSnapshotIndex}
+          theme={theme}
+          title="Previous render"
+        />
+        <AutoSizedSnapshotSelector
+          commitThreshold={commitThreshold}
+          hideCommitsBelowThreshold={hideCommitsBelowThreshold}
+          isInspectingSelectedFiber={isInspectingSelectedFiber}
+          selectedFiberID={selectedFiberID}
+          selectedSnapshot={selectedSnapshot}
+          selectSnapshot={selectSnapshot}
+          snapshotIndex={snapshotIndex}
+          snapshots={snapshots}
+          theme={theme}
+        />
+        <IconButton
+          disabled={numSnapshots === 0}
+          icon={Icons.FORWARD}
+          isTransparent={true}
+          onClick={this.selectNextSnapshotIndex}
+          theme={theme}
+          title="Next render"
+        />
+      </div>
+    );
+  }
+}
+
+const AutoSizedSnapshotSelector = ({
+  isInspectingSelectedFiber,
+  selectedFiberID,
+  selectedSnapshot,
+  selectSnapshot,
+  snapshotIndex,
+  snapshots,
+  theme,
+}: Props) => (
+  <div style={{
+    flex: '1 1 100px',
+    height: HEIGHT,
+    display: 'grid',
+    alignitems: 'flex-end',
+    gridGap: '1px',
+    gridAutoFlow: 'column',
+    backgroundColor: theme.base00,
+  }}>
+    <AutoSizer disableHeight={true}>
+      {({ height, width }) => (
+        <SnapshotSelector
+          height={HEIGHT}
+          selectedFiberID={selectedFiberID}
+          selectedSnapshot={selectedSnapshot}
+          selectSnapshot={selectSnapshot}
+          snapshotIndex={snapshotIndex}
+          snapshots={snapshots}
+          theme={theme}
+          width={width}
+        />
+      )}
+    </AutoSizer>
+  </div>
+);
+
+const LEFT_ARROW = 37;
+const RIGHT_ARROW = 39;
+
 type SnapshotSelectorProps = {|
-  disabled: boolean,
   height: number,
+  selectedFiberID: string | null,
   selectedSnapshot: Snapshot,
   selectSnapshot: SelectSnapshot,
+  snapshotIndex: number,
   snapshots: Array<Snapshot>,
+  theme: Theme,
   width: number,
 |};
 
@@ -93,21 +262,36 @@ type SnapshotSelectorState = {|
 |};
 
 class SnapshotSelector extends PureComponent<SnapshotSelectorProps, SnapshotSelectorState> {
+  // $FlowFixMe createRef()
+  listRef = React.createRef();
+
   state: SnapshotSelectorState = {
     isMouseDown: false,
   };
 
-  handleMouseDown = event => this.setState({ isMouseDown: true });
-  handleMouseLeave = event => this.setState({ isMouseDown: false });
+  componentDidUpdate(prevProps) {
+    // Make sure any newly selected snapshot is visible within the list.
+    if (this.props.snapshotIndex !== prevProps.snapshotIndex) {
+      this.listRef.current.scrollToItem(this.props.snapshotIndex);
+    }
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('mouseup', this.handleMouseUp);
+  }
+
+  handleMouseDown = event => this.setState({ isMouseDown: true }, () => {
+    window.addEventListener('mouseup', this.handleMouseUp);
+  });
   handleMouseUp = event => this.setState({ isMouseDown: false });
 
   render() {
     const {
-      disabled,
       height,
       selectedSnapshot,
       selectSnapshot,
       snapshots,
+      theme,
       width,
     } = this.props;
     const {isMouseDown} = this.state;
@@ -117,31 +301,35 @@ class SnapshotSelector extends PureComponent<SnapshotSelectorProps, SnapshotSele
     // Pass required contextual data down to the ListItem renderer.
     // (This method is memoized so it's safe to call on every render.)
     const itemData = getItemData(
-      disabled,
       isMouseDown,
       listData.maxDuration,
       selectSnapshot,
       selectedSnapshot,
       snapshots,
+      theme,
     );
 
+    const numSnapshots = snapshots.length;
+
     return (
       <div
         onMouseDown={this.handleMouseDown}
-        onMouseLeave={this.handleMouseLeave}
         onMouseUp={this.handleMouseUp}
-        style={{height, width}}
+        style={{ height, width }}
       >
-        <List
-          direction="horizontal"
-          height={height}
-          itemCount={snapshots.length}
-          itemData={itemData}
-          itemSize={listData.itemSize}
-          width={width}
-        >
-          {ListItem}
-        </List>
+        {numSnapshots > 0 && (
+          <List
+            direction="horizontal"
+            height={height}
+            itemCount={snapshots.length}
+            itemData={itemData}
+            itemSize={listData.itemSize}
+            ref={this.listRef}
+            width={width}
+          >
+            {ListItem}
+          </List>
+        )}
       </div>
     );
   }
@@ -159,32 +347,44 @@ class ListItem extends PureComponent<any, void> {
     const { index, style } = this.props;
     const itemData: ItemData = ((this.props.data: any): ItemData);
 
-    const { disabled, maxDuration, selectedSnapshot, selectSnapshot, snapshots } = itemData;
+    const {
+      maxDuration,
+      selectedSnapshot,
+      selectSnapshot,
+      snapshots,
+      theme,
+    } = itemData;
 
     const snapshot = snapshots[index];
     // Guard against commits with duration 0
     const percentage = Math.min(1, Math.max(0, snapshot.duration / maxDuration)) || 0;
     const isSelected = selectedSnapshot === snapshot;
 
+    const width = parseFloat(style.width) - 1;
+
     return (
       <div
-        onClick={disabled ? undefined : () => selectSnapshot(snapshot)}
-        onMouseEnter={disabled ? undefined : this.handleMouseEnter}
+        onClick={() => selectSnapshot(snapshot)}
+        onMouseEnter={this.handleMouseEnter}
         style={{
           ...style,
-          opacity: isSelected || disabled ? 0.5 : 1,
-          cursor: disabled ? 'default' : 'pointer',
+          width,
+          backgroundColor: isSelected ? theme.base01 : 'transparent',
           userSelect: 'none',
+          cursor: 'pointer',
         }}
         title={`Duration ${formatDuration(snapshot.duration)}ms at ${formatTime(snapshot.commitTime)}s`}
       >
         <div style={{
           position: 'absolute',
           bottom: 0,
-          left: 0,
-          right: 1,
+          width,
           height: Math.max(minBarHeight, percentage * HEIGHT),
-          backgroundColor: percentage === 0 ? didNotRender : getGradientColor(percentage),
+          backgroundColor: isSelected
+            ? theme.state06
+            : percentage === 0
+              ? didNotRender
+              : getGradientColor(percentage),
         }} />
       </div>
     );
@@ -200,17 +400,17 @@ const getListData = memoize((
 }));
 
 const getItemData = memoize((
-  disabled: boolean,
   isMouseDown: boolean,
   maxDuration: number,
   selectSnapshot: SelectSnapshot,
   selectedSnapshot: Snapshot,
   snapshots: Array<Snapshot>,
+  theme: Theme,
 ): ItemData => ({
-  disabled,
   isMouseDown,
   maxDuration,
   selectSnapshot,
   selectedSnapshot,
   snapshots,
+  theme,
 }));
diff --git a/plugins/Profiler/views/constants.js b/plugins/Profiler/views/constants.js
index cfc8e39c4f..fd02e8d83b 100644
--- a/plugins/Profiler/views/constants.js
+++ b/plugins/Profiler/views/constants.js
@@ -10,6 +10,10 @@
  */
 'use strict';
 
+import type {Snapshot} from '../ProfilerTypes';
+
+import memoize from 'memoize-one';
+
 // http://gka.github.io/palettes/#colors=#37AFA9,#FEBC38|steps=10|bez=0|coL=0
 export const gradient = [
   '#37afa9', '#63b19e', '#80b393', '#97b488', '#abb67d', '#beb771', '#cfb965', '#dfba57', '#efbb49', '#febc38',
@@ -45,3 +49,37 @@ export const getGradientColor = (value: number) => {
 export const formatDuration = (duration: number) => Math.round(duration * 10) / 10;
 export const formatPercentage = (percentage: number) => Math.round(percentage * 100);
 export const formatTime = (timestamp: number) => Math.round(Math.round(timestamp) / 100) / 10;
+
+type FilteredSnapshotData = {|
+  snapshotIndex: number,
+  snapshots: Array<Snapshot>,
+|};
+
+/**
+ * Helper method to filter snapshots based on the current store state.
+ * This is a helper util so that its calculations are memoized and shared between multiple components.
+ */
+export const getFilteredSnapshotData = memoize((
+  commitThreshold: number,
+  hideCommitsBelowThreshold: boolean,
+  isInspectingSelectedFiber: boolean,
+  selectedFiberID: string | null,
+  selectedSnapshot: Snapshot,
+  snapshotIndex: number,
+  snapshots: Array<Snapshot>,
+): FilteredSnapshotData => {
+  let filteredSnapshots = snapshots;
+  if (isInspectingSelectedFiber) {
+    filteredSnapshots = filteredSnapshots.filter(snapshot => snapshot.committedNodes.includes(selectedFiberID));
+  }
+  if (hideCommitsBelowThreshold) {
+    filteredSnapshots = filteredSnapshots.filter(snapshot => snapshot.duration >= commitThreshold);
+  }
+
+  const filteredSnapshotIndex = filteredSnapshots.indexOf(selectedSnapshot);
+
+  return {
+    snapshotIndex: filteredSnapshotIndex >= 0 ? filteredSnapshotIndex : 0,
+    snapshots: filteredSnapshots,
+  };
+});