Added placeholder Profiler sidebar views

src/devtools/views/Profiler/Profiler.css

@@ -62,10 +62,6 @@
   border-top: 1px solid var(--color-border);
 }
 
-.InspectedProperties {
-  padding: 0.5rem;
-}
-
 .VRule {
   height: 20px;
   width: 1px;

src/devtools/views/Profiler/Profiler.js

@@ -11,6 +11,8 @@ import CommitRanked from './CommitRanked';
 import FilterModal from './FilterModal';
 import RecordToggle from './RecordToggle';
 import SnapshotSelector from './SnapshotSelector';
+import SidebarCommitInfo from './SidebarCommitInfo';
+import SidebarInteractions from './SidebarInteractions';
 
 import styles from './Profiler.css';
 
@@ -124,6 +126,19 @@ function SuspendingProfiler() {
       break;
   }
 
+  let sidebar = null;
+  switch (tab) {
+    case 'interactions':
+      sidebar = <SidebarInteractions />;
+      break;
+    case 'flame-chart':
+    case 'ranked-chart':
+      sidebar = <SidebarCommitInfo />;
+      break;
+    default:
+      break;
+  }
+
   return (
     <div className={styles.Profiler}>
       <div className={styles.LeftColumn}>
@@ -157,11 +172,7 @@ function SuspendingProfiler() {
         </div>
       </div>
       <div className={styles.RightColumn}>
-        <Suspense fallback={<ProfilerFallback />}>
-          {/* TODO (profiler) Dynamic information */}
-          <div className={styles.Toolbar}>Commit information</div>
-          <div className={styles.InspectedProperties} />
-        </Suspense>
+        <Suspense fallback={<ProfilerFallback />}>{sidebar}</Suspense>
       </div>
     </div>
   );

src/devtools/views/Profiler/SidebarCommitInfo.css

@@ -0,0 +1,34 @@
+.Toolbar {
+  height: 2.25rem;
+  padding: 0 0.5rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
+}
+
+.Content {
+  padding: 0.5rem;
+}
+
+.List {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.ListItem {
+  margin: 0 0 0.25rem;
+}
+
+.Label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-weight: bold;
+}
+
+.Value {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+}

src/devtools/views/Profiler/SidebarCommitInfo.js

@@ -0,0 +1,58 @@
+// @flow
+
+import React, { Fragment, useContext } from 'react';
+import { ProfilerContext } from './ProfilerContext';
+import { formatDuration, formatTime } from './utils';
+import { StoreContext } from '../context';
+
+import styles from './SidebarCommitInfo.css';
+
+export type Props = {||};
+
+export default function SidebarCommitInfo(_: Props) {
+  const { selectedCommitIndex, rendererID, rootID } = useContext(
+    ProfilerContext
+  );
+
+  const { profilingCache } = useContext(StoreContext);
+  const { commitDurations, commitTimes } = profilingCache.ProfilingSummary.read(
+    {
+      rendererID: ((rendererID: any): number),
+      rootID: ((rootID: any): number),
+    }
+  );
+
+  if (selectedCommitIndex === null) {
+    return 'TODO';
+  }
+
+  return (
+    <Fragment>
+      <div className={styles.Toolbar}>Commit information</div>
+      <div className={styles.Content}>
+        <ul className={styles.List}>
+          <li className={styles.ListItem}>
+            <label className={styles.Label}>Committed at</label>:{' '}
+            <span className={styles.Value}>
+              {formatTime(commitTimes[selectedCommitIndex])}s
+            </span>
+          </li>
+          <li className={styles.ListItem}>
+            <label className={styles.Label}>Render duration</label>:{' '}
+            <span className={styles.Value}>
+              {formatDuration(commitDurations[selectedCommitIndex])}ms
+            </span>
+          </li>
+          <li className={styles.ListItem}>
+            <label className={styles.Label}>Interactions</label>:
+            <ul className={styles.List}>
+              <li className={styles.ListItem}>
+                <div>Coming soon</div>
+              </li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </Fragment>
+  );
+}

src/devtools/views/Profiler/SidebarInteractions.css

@@ -0,0 +1,13 @@
+.Toolbar {
+  height: 2.25rem;
+  padding: 0 0.5rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
+}
+
+.Content {
+  padding: 0.5rem;
+}

src/devtools/views/Profiler/SidebarInteractions.js

@@ -0,0 +1,24 @@
+// @flow
+
+import React, { Fragment, useContext } from 'react';
+import { ProfilerContext } from './ProfilerContext';
+import { StoreContext } from '../context';
+
+import styles from './SidebarInteractions.css';
+
+export type Props = {||};
+
+export default function SidebarInteractions(_: Props) {
+  const { selectedCommitIndex, rendererID, rootID } = useContext(
+    ProfilerContext
+  );
+
+  const { profilingCache } = useContext(StoreContext);
+
+  return (
+    <Fragment>
+      <div className={styles.Toolbar}>Interaction</div>
+      <div className={styles.Content}>Coming soon</div>
+    </Fragment>
+  );
+}