diff --git a/src/devtools/views/Profiler/Profiler.css b/src/devtools/views/Profiler/Profiler.css
index 107a092f99..7829df4dff 100644
--- a/src/devtools/views/Profiler/Profiler.css
+++ b/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 {
diff --git a/src/devtools/views/Profiler/Profiler.js b/src/devtools/views/Profiler/Profiler.js
index 1f31ebe245..8cc1e54aa5 100644
--- a/src/devtools/views/Profiler/Profiler.js
+++ b/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 =