Added export and clear buttons for Profiler, cleaned up record toggle

src/devtools/views/ButtonIcon.js

@@ -5,9 +5,11 @@ import styles from './ButtonIcon.css';
 
 export type IconType =
   | 'back'
+  | 'cancel'
   | 'close'
   | 'copy'
   | 'down'
+  | 'download'
   | 'filter'
   | 'more'
   | 'next'
@@ -30,6 +32,9 @@ export default function ButtonIcon({ type }: Props) {
     case 'back':
       pathData = PATH_BACK;
       break;
+    case 'cancel':
+      pathData = PATH_CANCEL;
+      break;
     case 'close':
       pathData = PATH_CLOSE;
       break;
@@ -39,6 +44,9 @@ export default function ButtonIcon({ type }: Props) {
     case 'down':
       pathData = PATH_DOWN;
       break;
+    case 'download':
+      pathData = PATH_DOWNLOAD;
+      break;
     case 'filter':
       pathData = PATH_FILTER;
       break;
@@ -97,6 +105,11 @@ const PATH_BACK = `
   10.41 7 14 10.59 17.59 7 19 8.41 15.41 12 19 15.59z
 `;
 
+const PATH_CANCEL = `
+  M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69
+  16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z
+`;
+
 const PATH_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';
 
@@ -107,6 +120,11 @@ const PATH_COPY = `
 
 const PATH_DOWN = 'M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z';
 
+const PATH_DOWNLOAD = `
+  M 21.855469 8.460938 L 16.214844 8.460938 L 16.214844 0 L 7.753906 0 L 7.753906 8.460938 L 2.113281 8.460938 L 11.984375
+  18.332031 Z M 2.113281 21.152344 L 2.113281 23.972656 L 21.855469 23.972656 L 21.855469 21.152344 Z M 2.113281 21.152344
+`;
+
 const PATH_FILTER = 'M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z';
 
 const PATH_MORE = `

src/devtools/views/Profiler/ClearProfilingDataButton.js

@@ -0,0 +1,21 @@
+// @flow
+
+import React, { useCallback, useContext } from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+import { StoreContext } from '../context';
+
+export default function ClearProfilingDataButton() {
+  const store = useContext(StoreContext);
+  const clear = useCallback(() => store.clearProfilingData(), [store]);
+
+  return (
+    <Button
+      disabled={!store.hasProfilingData}
+      onClick={clear}
+      title="Clear profiling data"
+    >
+      <ButtonIcon type="cancel" />
+    </Button>
+  );
+}

src/devtools/views/Profiler/Profiler.js

@@ -8,12 +8,14 @@ import {
 } from './CommitFilterModalContext';
 import { ProfilerContext } from './ProfilerContext';
 import TabBar from '../TabBar';
+import ClearProfilingDataButton from './ClearProfilingDataButton';
 import CommitFlamegraph from './CommitFlamegraph';
 import CommitRanked from './CommitRanked';
 import FilterModal from './FilterModal';
 import Interactions from './Interactions';
 import RecordToggle from './RecordToggle';
 import ReloadAndProfileButton from './ReloadAndProfileButton';
+import SaveProfilingDataButton from './SaveProfilingDataButton';
 import SnapshotSelector from './SnapshotSelector';
 import SidebarCommitInfo from './SidebarCommitInfo';
 import SidebarInteractions from './SidebarInteractions';
@@ -86,6 +88,8 @@ function NonSuspendingProfiler({
         <div className={styles.Toolbar}>
           <RecordToggle disabled={!supportsProfiling} />
           <ReloadAndProfileButton />
+          <ClearProfilingDataButton />
+          <SaveProfilingDataButton />
           <div className={styles.VRule} />
           <TabBar
             currentTab={null}
@@ -155,6 +159,8 @@ function SuspendingProfiler() {
         <div className={styles.Toolbar}>
           <RecordToggle />
           <ReloadAndProfileButton />
+          <ClearProfilingDataButton />
+          <SaveProfilingDataButton />
           <div className={styles.VRule} />
           <TabBar
             currentTab={selectedTabID}

src/devtools/views/Profiler/RecordToggle.css

@@ -1,7 +1,9 @@
 .ActiveRecordToggle {
   color: var(--color-record-active);
 }
-.ActiveRecordToggle:hover,
+.ActiveRecordToggle:hover {
+  color: var(--color-record-active);
+}
 .ActiveRecordToggle:focus {
   color: var(--color-record-active);
 }
@@ -12,7 +14,9 @@
 .InactiveRecordToggle {
   color: var(--color-record-inactive);
 }
-.InactiveRecordToggle:hover,
+.InactiveRecordToggle:hover {
+  color: var(--color-record-hover);
+}
 .InactiveRecordToggle:focus {
   color: var(--color-record-inactive);
 }

src/devtools/views/Profiler/SaveProfilingDataButton.js

@@ -0,0 +1,15 @@
+// @flow
+
+import React from 'react';
+import Button from '../Button';
+import ButtonIcon from '../ButtonIcon';
+
+export default function SaveProfilingDataButton() {
+  // TODO (profiling) Support export
+
+  return (
+    <Button disabled title="Save profile...">
+      <ButtonIcon type="download" />
+    </Button>
+  );
+}

src/devtools/views/root.css

@@ -38,8 +38,8 @@
   --light-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --light-color-modal-background: rgba(255, 255, 255, 0.25);
   --light-color-record-active: #fc3a4b;
-  --light-color-record-hover: #000000;
-  --light-color-record-inactive: #cfd1d5;
+  --light-color-record-hover: #3578e5;
+  --light-color-record-inactive: #0088fa;
   --light-color-search-match: yellow;
   --light-color-search-match-current: #f7923b;
   --light-color-selected-background: #0088fa;
@@ -82,8 +82,8 @@
   --dark-color-jsx-arrow-brackets-inverted: rgba(255, 255, 255, 0.7);
   --dark-color-modal-background: rgba(0, 0, 0, 0.25);
   --dark-color-record-active: #fc3a4b;
-  --dark-color-record-hover: #ffffff;
-  --dark-color-record-inactive: #777d88;
+  --dark-color-record-hover: #a2e9fc;
+  --dark-color-record-inactive: #61dafb;
   --dark-color-search-match: yellow;
   --dark-color-search-match-current: #f7923b;
   --dark-color-selected-background: #178fb9;