From 0681e2453124ac5fe1ba116fe600cb4a3d10ea5e Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Thu, 18 May 2017 13:25:43 +0200
Subject: [PATCH] Tweaked error overlay styles (pt2) (#2208)
* Fixed several of the issues and nits from PR:
* Moved margin between header and file name to header, so when content was scrolled, the header would remain more separate
* Made build-time and runtime overlays better match
* Secondary error <pre> style now uses yellow bg instead of red
* 'Scrollable Header' (see above comment to why this is necessary) but I did increase the max-height from 35% to 50%.
* Fixed header and 'X' button vertical alignment
* Temporary stack margin fix
* Move "N errors" to the top
---
.../react-dev-utils/webpackHotDevClient.js | 6 +--
.../src/components/code.js | 5 ++-
.../src/components/frame.js | 9 ++--
.../src/components/overlay.js | 24 +++++------
packages/react-error-overlay/src/styles.js | 41 ++++++++++++++-----
5 files changed, 55 insertions(+), 30 deletions(-)
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index dd280dab5..645073f24 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 = '<div style="' +
overlayHeaderStyle() +
- '">Failed to compile</div><br><br>' +
+ '">Failed to compile</div>' +
'<pre style="' +
- 'display: block; padding: 0.5em; margin-top: 0.5em; ' +
+ 'display: block; padding: 0.5em; margin-top: 0; ' +
'margin-bottom: 0.5em; overflow-x: auto; white-space: pre-wrap; ' +
'border-radius: 0.25rem; background-color: rgba(206, 17, 38, 0.05)">' +
'<code style="font-family: Consolas, Menlo, monospace;">' +
diff --git a/packages/react-error-overlay/src/components/code.js b/packages/react-error-overlay/src/components/code.js
index e7e86c8f3..91dd377f0 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 a9ea0ea37..d9475c7a5 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 1626fcdee..50766f011 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 8e6f0d07b..0a2ed7cee 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,
--
GitLab