Skip to content

Commit

Permalink
Tweaked error overlay styles (pt2) (#2208)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
bvaughn authored and gaearon committed May 18, 2017
1 parent c82c4f0 commit 0681e24
Show file tree
Hide file tree
Showing 5 changed files with 55 additions and 30 deletions.
6 changes: 3 additions & 3 deletions packages/react-dev-utils/webpackHotDevClient.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;';
Expand Down Expand Up @@ -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;">' +
Expand Down
5 changes: 3 additions & 2 deletions packages/react-error-overlay/src/components/code.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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') {
Expand Down
9 changes: 6 additions & 3 deletions packages/react-error-overlay/src/components/frame.js
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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);
Expand Down
24 changes: 12 additions & 12 deletions packages/react-error-overlay/src/components/overlay.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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)
Expand Down
41 changes: 31 additions & 10 deletions packages/react-error-overlay/src/styles.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -186,9 +205,11 @@ export {
traceStyle,
depStyle,
primaryErrorStyle,
primaryPreStyle,
secondaryErrorStyle,
omittedFramesStyle,
preStyle,
secondaryPreStyle,
omittedFramesCollapsedStyle,
omittedFramesExpandedStyle,
toggleStyle,
codeStyle,
hiddenStyle,
Expand Down

0 comments on commit 0681e24

Please sign in to comment.