From ab81d24145298ee74282b5b41af737b8a28dfa26 Mon Sep 17 00:00:00 2001 From: Brian Vaughn Date: Wed, 11 Mar 2020 18:37:47 -0700 Subject: [PATCH] Wrap Components and Profiler tabs with box-size style too For the browser extension, these views get rendered into portals and so they don't inherit the box-sizing style from the .DevTools wrapper element. This causes views like the Profiler commit selector to subtly break. --- .../src/devtools/views/Components/Components.css | 5 +++++ .../react-devtools-shared/src/devtools/views/DevTools.css | 1 - .../src/devtools/views/Profiler/Profiler.css | 5 +++++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Components.css b/packages/react-devtools-shared/src/devtools/views/Components/Components.css index 7eaa396ccd40b..1261e550e003e 100644 --- a/packages/react-devtools-shared/src/devtools/views/Components/Components.css +++ b/packages/react-devtools-shared/src/devtools/views/Components/Components.css @@ -9,6 +9,11 @@ font-family: var(--font-family-sans); } +.Components, .Components * { + box-sizing: border-box; + -webkit-font-smoothing: var(--font-smoothing); +} + .TreeWrapper { flex: 0 0 var(--horizontal-resize-percentage); overflow: auto; diff --git a/packages/react-devtools-shared/src/devtools/views/DevTools.css b/packages/react-devtools-shared/src/devtools/views/DevTools.css index 3332c35f1f677..8091c15b8484f 100644 --- a/packages/react-devtools-shared/src/devtools/views/DevTools.css +++ b/packages/react-devtools-shared/src/devtools/views/DevTools.css @@ -56,6 +56,5 @@ .DevTools, .DevTools * { box-sizing: border-box; - -webkit-font-smoothing: var(--font-smoothing); } diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css index e9157aa35c666..6763564e52a29 100644 --- a/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css +++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Profiler.css @@ -11,6 +11,11 @@ color: var(--color-text); } +.Profiler, .Profiler * { + box-sizing: border-box; + -webkit-font-smoothing: var(--font-smoothing); +} + .LeftColumn { display: flex; flex-direction: column;