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 = ; @@ -42,38 +45,51 @@ function ProfilerInner(_: Props) { return (
-
- - -
- -
- - {hasProfilingData && ( - -
- - - )} -
-
- {view} - {isFilterModalShowing && ( - - )} +
+
+ + +
+ +
+ + {showProfilingData && ( + +
+ + + )} +
+
+ {view} + {isFilterModalShowing && ( // TODO (profiler) Position when snapshot graph is open + + )} +
+ {showProfilingData && ( +
+ {/* TODO (profiler) Dynamic information */} +
Commit information
+
+ Committed at: 0.8s
+
+ Render duration: 2.1ms +
+
+ )}
); } diff --git a/src/devtools/views/TabBar.css b/src/devtools/views/TabBar.css index 2bee6ff81f..8b1fd706ac 100644 --- a/src/devtools/views/TabBar.css +++ b/src/devtools/views/TabBar.css @@ -1,6 +1,7 @@ .Tab, .TabCurrent, .TabDisabled { + height: 100%; display: flex; align-items: center; cursor: pointer;