Tidied up Profiler toolbar UI

src/devtools/views/Profiler/Profiler.css

@@ -2,13 +2,28 @@
   width: 100%;
   height: 100%;
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: stretch;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-sans-normal);
   background-color: var(--color-background);
   color: var(--color-text-color);
 }
 
+.LeftColumn {
+  display: flex;
+  flex-direction: column;
+  flex: 2 1 200px;
+}
+
+.RightColumn {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 100px;
+  max-width: 300px;
+  border-left: 1px solid var(--color-border);
+}
+
 .Content {
   position: relative;
   flex: 1 1 auto;
@@ -38,13 +53,17 @@
 }
 
 .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);
-  color: var(--color-button);
+}
+
+.InspectedProperties {
+  padding: 0.5rem;
 }
 
 .VRule {

src/devtools/views/Profiler/Profiler.js

@@ -29,6 +29,9 @@ function ProfilerInner(_: Props) {
   const showFilterModal = useCallback(() => setIsFilterModalShowing(true));
   const dismissFilterModal = useCallback(() => setIsFilterModalShowing(false));
 
+  // TODO (profiling) Maybe a smarter check here
+  const showProfilingData = !isProfiling && hasProfilingData;
+
   let view = null;
   if (isProfiling) {
     view = <RecortdingInProgress />;
@@ -42,38 +45,51 @@ function ProfilerInner(_: Props) {
 
   return (
     <div className={styles.Profiler}>
-      <div className={styles.Toolbar}>
-        <RecordToggle />
-        <Button disabled title="Reload and start profiling">
-          {/* TODO (profiling) Wire up reload button */}
-          <ButtonIcon type="reload" />
-        </Button>
-        <div className={styles.VRule} />
-        <TabBar
-          currentTab={tab}
-          disabled={isProfiling || !hasProfilingData}
-          id="Profiler"
-          selectTab={setTab}
-          size="small"
-          tabs={tabs}
-        />
-        <div className={styles.Spacer} />
-        <Button onClick={showFilterModal} title="Filter commits by duration">
-          <ButtonIcon type="filter" />
-        </Button>
-        {hasProfilingData && (
-          <Fragment>
-            <div className={styles.VRule} />
-            <SnapshotSelector />
-          </Fragment>
-        )}
-      </div>
-      <div className={styles.Content}>
-        {view}
-        {isFilterModalShowing && (
-          <FilterModal dismissModal={dismissFilterModal} />
-        )}
+      <div className={styles.LeftColumn}>
+        <div className={styles.Toolbar}>
+          <RecordToggle />
+          <Button disabled title="Reload and start profiling">
+            {/* TODO (profiling) Wire up reload button */}
+            <ButtonIcon type="reload" />
+          </Button>
+          <div className={styles.VRule} />
+          <TabBar
+            currentTab={tab}
+            disabled={!showProfilingData}
+            id="Profiler"
+            selectTab={setTab}
+            size="small"
+            tabs={tabs}
+          />
+          <div className={styles.Spacer} />
+          <Button onClick={showFilterModal} title="Filter commits by duration">
+            <ButtonIcon type="filter" />
+          </Button>
+          {showProfilingData && (
+            <Fragment>
+              <div className={styles.VRule} />
+              <SnapshotSelector />
+            </Fragment>
+          )}
+        </div>
+        <div className={styles.Content}>
+          {view}
+          {isFilterModalShowing && ( // TODO (profiler) Position when snapshot graph is open
+            <FilterModal dismissModal={dismissFilterModal} />
+          )}
+        </div>
       </div>
+      {showProfilingData && (
+        <div className={styles.RightColumn}>
+          {/* TODO (profiler) Dynamic information */}
+          <div className={styles.Toolbar}>Commit information</div>
+          <div className={styles.InspectedProperties}>
+            Committed at: 0.8s <br />
+            <br />
+            Render duration: 2.1ms
+          </div>
+        </div>
+      )}
     </div>
   );
 }

src/devtools/views/TabBar.css

@@ -1,6 +1,7 @@
 .Tab,
 .TabCurrent,
 .TabDisabled {
+  height: 100%;
   display: flex;
   align-items: center;
   cursor: pointer;