Use ToggleSwitches for binary options

Summary:
We've had a bunch of different options that were all binary
switches with very different ways of displaying them.

This consolidates them all to use ToggleSwitches. I think it
may still make sense to move them all to a sidebar as it's
the case for the Analytics plugin, but that's for another diff.

Reviewed By: danielbuechele

Differential Revision: D14933392

fbshipit-source-id: 7ef286b61142a564a7cde6de875266ac8641704b

src/plugins/fresco/ImagesCacheOverview.js

@@ -19,7 +19,8 @@ import {
   LoadingIndicator,
   styled,
   Select,
-  Checkbox,
+  ToggleButton,
+  Text,
 } from 'flipper';
 import type {ImagesMap} from './ImagePool.js';
 import {clipboard} from 'electron';
@@ -33,6 +34,36 @@ function formatKB(bytes: number) {
   return Math.floor(bytes / 1024) + 'KB';
 }
 
+type ToggleProps = {|
+  label: string,
+  onClick?: (newValue: boolean) => void,
+  toggled: boolean,
+|};
+
+const ToolbarToggleButton = styled(ToggleButton)(_props => ({
+  alignSelf: 'center',
+  marginRight: 4,
+  minWidth: 30,
+}));
+
+const ToggleLabel = styled(Text)(_props => ({
+  whiteSpace: 'nowrap',
+}));
+
+function Toggle(props: ToggleProps) {
+  return (
+    <>
+      <ToolbarToggleButton
+        onClick={() => {
+          props.onClick && props.onClick(!props.toggled);
+        }}
+        toggled={props.toggled}
+      />
+      <ToggleLabel>{props.label}</ToggleLabel>
+    </>
+  );
+}
+
 type ImagesCacheOverviewProps = {
   onColdStartChange: (checked: boolean) => void,
   coldStartFilter: boolean,
@@ -61,12 +92,7 @@ const StyledSelect = styled(Select)(props => ({
   marginLeft: 6,
   marginRight: 6,
   height: '100%',
-}));
-
-const StyledCheckbox = styled(Checkbox)(props => ({
-  marginLeft: 6,
-  marginRight: 6,
-  height: '100%',
+  maxWidth: 164,
 }));
 
 export default class ImagesCacheOverview extends PureComponent<
@@ -137,23 +163,27 @@ export default class ImagesCacheOverview extends PureComponent<
           <Button icon="cross-outline" onClick={this.props.onTrimMemory}>
             Trim Memory
           </Button>
-          <Button onClick={this.onEnableDebugOverlayToggled}>
-            DebugOverlay {this.props.isDebugOverlayEnabled ? 'ON' : 'OFF'}
-          </Button>
           <Button onClick={this.props.onRefresh}>Refresh</Button>
-          <Button onClick={this.onEnableAutoRefreshToggled}>
-            Auto Refresh {this.props.isAutoRefreshEnabled ? 'ON' : 'OFF'}
-          </Button>
           <StyledSelect
             options={this.props.surfaceOptions}
             selected={this.props.selectedSurface}
             onChange={this.props.onChangeSurface}
           />
-          <StyledCheckbox
-            checked={this.props.coldStartFilter}
-            onChange={this.props.onColdStartChange}
+          <Toggle
+            onClick={this.onEnableAutoRefreshToggled}
+            toggled={this.props.isAutoRefreshEnabled}
+            label="Auto Refresh"
+          />
+          <Toggle
+            onClick={this.onEnableDebugOverlayToggled}
+            toggled={this.props.isDebugOverlayEnabled}
+            label="Show Debug Overlay"
+          />
+          <Toggle
+            toggled={this.props.coldStartFilter}
+            onClick={this.props.onColdStartChange}
+            label="Show Cold Start Images"
           />
-          Show ColdStart Images
           <Spacer />
           <input
             type="range"

src/ui/components/ToggleSwitch.js

@@ -40,6 +40,7 @@ type Props = {
    * whether the button is toggled
    */
   toggled?: boolean,
+  className?: string,
 };
 
 /**
@@ -55,7 +56,11 @@ type Props = {
 export default class ToggleButton extends React.Component<Props> {
   render() {
     return (
-      <StyledButton toggled={this.props.toggled} onClick={this.props.onClick} />
+      <StyledButton
+        className={this.props.className}
+        toggled={this.props.toggled}
+        onClick={this.props.onClick}
+      />
     );
   }
 }