Devtools React Profiler: Shrink flamegraph window's width to make roo…

…m for scrollbar
facebook · Nov 26, 2019 · 4a26fe2 · 4a26fe2
1 parent 32e5c97
commit 4a26fe2
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.css b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.css
@@ -8,3 +8,12 @@
   stroke: var(--color-commit-did-not-render-pattern);
   stroke-width: 1;
 }
+
+.FixedSizeList {
+  overflow-y: scroll;
+}
+
+.InnerElement {
+  /* since width is controlled by react-window, need to set !important or it will be overridden */
+  width: calc(100% - var(--scrollbar-width)) !important;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -142,6 +142,7 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
 
   return (
     <FixedSizeList
+      className={styles.FixedSizeList}
       height={height}
       innerElementType={InnerElementType}
       itemCount={chartData.depth}
@@ -154,7 +155,7 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
 }
 
 const InnerElementType = forwardRef(({children, ...rest}, ref) => (
-  <svg ref={ref} {...rest}>
+  <svg ref={ref} className={styles.InnerElement} {...rest}>
     <defs>
       <pattern
         id="didNotRenderPattern"

diff --git a/packages/react-devtools-shared/src/devtools/views/root.css b/packages/react-devtools-shared/src/devtools/views/root.css
@@ -169,6 +169,9 @@
   /* Constant values shared between JS and CSS */
   --interaction-commit-size: 10px;
   --interaction-label-width: 200px;
+
+  /* Scrollbar */
+  --scrollbar-width: 11px;
 }
 
 * {