diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js index dd280dab5a9..645073f2486 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -85,7 +85,7 @@ function overlayHeaderStyle() { 'font-family: sans-serif;' + 'color: rgb(206, 17, 38);' + 'white-space: pre-wrap;' + - 'margin: 0.75rem 2rem 0px 0px;' + + 'margin: 0 2rem 0.75rem 0px;' + 'flex: 0 0 auto;' + 'max-height: 35%;' + 'overflow: auto;'; @@ -129,9 +129,9 @@ function showErrorOverlay(message) { // TODO: unify this with our runtime overlay overlayDiv.innerHTML = '
' +
'' +
diff --git a/packages/react-error-overlay/src/components/code.js b/packages/react-error-overlay/src/components/code.js
index e7e86c8f3e0..91dd377f0c4 100644
--- a/packages/react-error-overlay/src/components/code.js
+++ b/packages/react-error-overlay/src/components/code.js
@@ -3,10 +3,11 @@ import type { ScriptLine } from '../utils/stack-frame';
import { applyStyles } from '../utils/dom/css';
import { absolutifyCaret } from '../utils/dom/absolutifyCaret';
import {
- preStyle,
codeStyle,
primaryErrorStyle,
+ primaryPreStyle,
secondaryErrorStyle,
+ secondaryPreStyle,
} from '../styles';
import generateAnsiHtml from 'react-dev-utils/ansiHTML';
@@ -82,7 +83,7 @@ function createCode(
}
}
const pre = document.createElement('pre');
- applyStyles(pre, preStyle);
+ applyStyles(pre, main ? primaryPreStyle : secondaryPreStyle);
pre.appendChild(code);
if (typeof onSourceClick === 'function') {
diff --git a/packages/react-error-overlay/src/components/frame.js b/packages/react-error-overlay/src/components/frame.js
index a9ea0ea37da..d9475c7a571 100644
--- a/packages/react-error-overlay/src/components/frame.js
+++ b/packages/react-error-overlay/src/components/frame.js
@@ -6,7 +6,8 @@ import type { StackFrame } from '../utils/stack-frame';
import type { FrameSetting, OmitsObject } from './frames';
import { applyStyles } from '../utils/dom/css';
import {
- omittedFramesStyle,
+ omittedFramesExpandedStyle,
+ omittedFramesCollapsedStyle,
functionNameStyle,
depStyle,
linkStyle,
@@ -39,12 +40,14 @@ function getGroupToggle(
if (hide) {
text1.textContent = text1.textContent.replace(/▲/, '▶');
text1.textContent = text1.textContent.replace(/expanded/, 'collapsed');
+ applyStyles(omittedFrames, omittedFramesCollapsedStyle);
} else {
text1.textContent = text1.textContent.replace(/▶/, '▲');
text1.textContent = text1.textContent.replace(/collapsed/, 'expanded');
+ applyStyles(omittedFrames, omittedFramesExpandedStyle);
}
});
- applyStyles(omittedFrames, omittedFramesStyle);
+ applyStyles(omittedFrames, omittedFramesCollapsedStyle);
return omittedFrames;
}
@@ -73,7 +76,7 @@ function insertBeforeBundle(
div.addEventListener('click', function() {
return actionElement.click();
});
- applyStyles(div, omittedFramesStyle);
+ applyStyles(div, omittedFramesExpandedStyle);
div.style.display = 'none';
parent.insertBefore(div, first);
diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js
index 1626fcdee57..50766f0112b 100644
--- a/packages/react-error-overlay/src/components/overlay.js
+++ b/packages/react-error-overlay/src/components/overlay.js
@@ -40,6 +40,18 @@ function createOverlay(
overlay.appendChild(container);
container.appendChild(createClose(document, closeCallback));
+ // Create "Errors X of Y" in case of multiple errors
+ const additional = document.createElement('div');
+ applyStyles(additional, additionalStyle);
+ updateAdditional(
+ document,
+ additional,
+ currentError,
+ totalErrors,
+ switchCallback
+ );
+ container.appendChild(additional);
+
// Create header
const header = document.createElement('div');
applyStyles(header, headerStyle);
@@ -64,18 +76,6 @@ function createOverlay(
header.appendChild(document.createTextNode(finalMessage));
container.appendChild(header);
- // Create "Errors X of Y" in case of multiple errors
- const additional = document.createElement('div');
- applyStyles(additional, additionalStyle);
- updateAdditional(
- document,
- additional,
- currentError,
- totalErrors,
- switchCallback
- );
- container.appendChild(additional);
-
// Create trace
container.appendChild(
createFrames(document, frames, frameSettings, contextSize, name)
diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js
index 8e6f0d07bc5..0a2ed7ceed7 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/packages/react-error-overlay/src/styles.js
@@ -64,22 +64,24 @@ const closeButtonStyle = {
top: 0,
};
-const additionalStyle = {};
+const additionalStyle = {
+ 'margin-bottom': '0.5rem',
+};
const headerStyle = {
'font-size': '2em',
'font-family': 'sans-serif',
color: red,
'white-space': 'pre-wrap',
- margin: '0.75rem 2rem 0 0', // Prevent overlap with close button
+ // Top bottom margin spaces header
+ // Right margin revents overlap with close button
+ margin: '0 2rem 0.75rem 0',
flex: '0 0 auto',
- 'max-height': '35%',
+ 'max-height': '50%',
overflow: 'auto',
};
-const functionNameStyle = {
- 'margin-top': '1em',
-};
+const functionNameStyle = {};
const linkStyle = {
'font-size': '0.9em',
@@ -108,12 +110,19 @@ const secondaryErrorStyle = {
'background-color': yellow,
};
-const omittedFramesStyle = {
+const omittedFramesCollapsedStyle = {
+ color: black,
+ cursor: 'pointer',
+ 'margin-bottom': '1.5em',
+};
+
+const omittedFramesExpandedStyle = {
color: black,
cursor: 'pointer',
+ 'margin-bottom': '0.6em',
};
-const preStyle = {
+const primaryPreStyle = {
display: 'block',
padding: '0.5em',
'margin-top': '0.5em',
@@ -123,6 +132,16 @@ const preStyle = {
'border-radius': '0.25rem',
'background-color': 'rgba(206, 17, 38, .05)',
};
+const secondaryPreStyle = {
+ display: 'block',
+ padding: '0.5em',
+ 'margin-top': '0.5em',
+ 'margin-bottom': '0.5em',
+ 'overflow-x': 'auto',
+ 'white-space': 'pre-wrap',
+ 'border-radius': '0.25rem',
+ 'background-color': 'rgba(251, 245, 180,.3)',
+};
const toggleStyle = {
'margin-bottom': '1.5em',
@@ -186,9 +205,11 @@ export {
traceStyle,
depStyle,
primaryErrorStyle,
+ primaryPreStyle,
secondaryErrorStyle,
- omittedFramesStyle,
- preStyle,
+ secondaryPreStyle,
+ omittedFramesCollapsedStyle,
+ omittedFramesExpandedStyle,
toggleStyle,
codeStyle,
hiddenStyle,