diff --git a/packages/react-dev-utils/ansiHTML.js b/packages/react-dev-utils/ansiHTML.js
index c4e850736ac..5d3e792036c 100644
--- a/packages/react-dev-utils/ansiHTML.js
+++ b/packages/react-dev-utils/ansiHTML.js
@@ -15,18 +15,18 @@ var Anser = require('anser');
// var base00 = 'ffffff'; // Default Background
var base01 = 'f5f5f5'; // Lighter Background (Used for status bars)
// var base02 = 'c8c8fa'; // Selection Background
-var base03 = '969896'; // Comments, Invisibles, Line Highlighting
+var base03 = '6e6e6e'; // Comments, Invisibles, Line Highlighting
// var base04 = 'e8e8e8'; // Dark Foreground (Used for status bars)
var base05 = '333333'; // Default Foreground, Caret, Delimiters, Operators
// var base06 = 'ffffff'; // Light Foreground (Not often used)
// var base07 = 'ffffff'; // Light Background (Not often used)
-var base08 = 'ed6a43'; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
+var base08 = '881280'; // Variables, XML Tags, Markup Link Text, Markup Lists, Diff Deleted
// var base09 = '0086b3'; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
// var base0A = '795da3'; // Classes, Markup Bold, Search Text Background
-var base0B = '183691'; // Strings, Inherited Class, Markup Code, Diff Inserted
-var base0C = '183691'; // Support, Regular Expressions, Escape Characters, Markup Quotes
+var base0B = '1155cc'; // Strings, Inherited Class, Markup Code, Diff Inserted
+var base0C = '994500'; // Support, Regular Expressions, Escape Characters, Markup Quotes
// var base0D = '795da3'; // Functions, Methods, Attribute IDs, Headings
-var base0E = 'a71d5d'; // Keywords, Storage, Selector, Markup Italic, Diff Changed
+var base0E = 'c80000'; // Keywords, Storage, Selector, Markup Italic, Diff Changed
// var base0F = '333333'; // Deprecated, Opening/Closing Embedded Language Tags e.g.
// Map ANSI colors from what babel-code-frame uses to base16-github
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 4e2d3cf1355..358be53eafd 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -26,7 +26,7 @@ var Entities = require('html-entities').AllHtmlEntities;
var ansiHTML = require('./ansiHTML');
var entities = new Entities();
-var red = '#E36049';
+var red = '#ce1126';
function createOverlayIframe(onIframeLoad) {
var iframe = document.createElement('iframe');
@@ -59,7 +59,7 @@ function addOverlayDivTo(iframe) {
div.style.backgroundColor = '#fafafa';
div.style.color = '#333';
div.style.fontFamily = 'Menlo, Consolas, monospace';
- div.style.fontSize = 'large';
+ div.style.fontSize = '10px';
div.style.padding = '2rem';
div.style.lineHeight = '1.2';
div.style.whiteSpace = 'pre-wrap';
@@ -68,6 +68,15 @@ function addOverlayDivTo(iframe) {
return div;
}
+function overlayHeaderStyle() {
+ return 'font-size: 1.7em;' +
+ 'font-family: sans-serif;' +
+ 'color: ' +
+ red +
+ ';' +
+ 'white-space: pre-wrap;';
+}
+
var overlayIframe = null;
var overlayDiv = null;
var lastOnOverlayDivReady = null;
@@ -104,8 +113,8 @@ function ensureOverlayDivExists(onOverlayDivReady) {
function showErrorOverlay(message) {
ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
// Make it look similar to our terminal.
- overlayDiv.innerHTML = 'Failed to compile.
' +
ansiHTML(entities.encode(message));
});
diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js
index 8633524be13..85e3d03cd5b 100644
--- a/packages/react-error-overlay/src/components/overlay.js
+++ b/packages/react-error-overlay/src/components/overlay.js
@@ -1,6 +1,11 @@
/* @flow */
import { applyStyles } from '../utils/dom/css';
-import { overlayStyle, headerStyle, additionalStyle } from '../styles';
+import {
+ containerStyle,
+ overlayStyle,
+ headerStyle,
+ additionalStyle,
+} from '../styles';
import { createClose } from './close';
import { createFrames } from './frames';
import { createFooter } from './footer';
@@ -28,12 +33,12 @@ function createOverlay(
// Create overlay
const overlay = document.createElement('div');
applyStyles(overlay, overlayStyle);
- overlay.appendChild(createClose(document, closeCallback));
// Create container
const container = document.createElement('div');
- container.className = 'cra-container';
+ applyStyles(container, containerStyle);
overlay.appendChild(container);
+ container.appendChild(createClose(document, closeCallback));
// Create additional
const additional = document.createElement('div');
diff --git a/packages/react-error-overlay/src/overlay.js b/packages/react-error-overlay/src/overlay.js
index fe29a6c7b36..cfcd1182911 100644
--- a/packages/react-error-overlay/src/overlay.js
+++ b/packages/react-error-overlay/src/overlay.js
@@ -35,7 +35,7 @@ import type { ErrorRecordReference } from './utils/errorRegister';
import type { StackFrame } from './utils/stack-frame';
import { iframeStyle } from './styles';
-import { injectCss, applyStyles } from './utils/dom/css';
+import { applyStyles } from './utils/dom/css';
import { createOverlay } from './components/overlay';
import { updateAdditional } from './components/additional';
@@ -45,33 +45,6 @@ let additionalReference = null;
let errorReferences: ErrorRecordReference[] = [];
let currReferenceIndex: number = -1;
-const css = [
- '.cra-container {',
- ' padding-right: 15px;',
- ' padding-left: 15px;',
- ' margin-right: auto;',
- ' margin-left: auto;',
- '}',
- '',
- '@media (min-width: 768px) {',
- ' .cra-container {',
- ' width: calc(750px - 6em);',
- ' }',
- '}',
- '',
- '@media (min-width: 992px) {',
- ' .cra-container {',
- ' width: calc(970px - 6em);',
- ' }',
- '}',
- '',
- '@media (min-width: 1200px) {',
- ' .cra-container {',
- ' width: calc(1170px - 6em);',
- ' }',
- '}',
-].join('\n');
-
function render(name: ?string, message: string, resolvedFrames: StackFrame[]) {
disposeCurrentView();
@@ -105,9 +78,13 @@ function render(name: ?string, message: string, resolvedFrames: StackFrame[]) {
keyEventHandler(type => shortcutHandler(type), event);
};
}
- injectCss(iframeReference.contentDocument, css);
if (document.body != null) {
- document.body.appendChild(overlay);
+ document.body.style.margin = '0';
+ // Keep popup within body boundaries for iOS Safari
+ // $FlowFixMe
+ document.body.style['max-width'] = '100vw';
+
+ (document.body: any).appendChild(overlay);
}
additionalReference = additional;
};
diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js
index 855778cbd13..6b31ee17e8e 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/packages/react-error-overlay/src/styles.js
@@ -1,43 +1,50 @@
/* @flow */
const black = '#293238',
darkGray = '#878e91',
- lightGray = '#fafafa',
red = '#ce1126',
lightRed = '#fccfcf',
- yellow = '#fbf5b4';
+ yellow = '#fbf5b4',
+ white = '#ffffff';
const iframeStyle = {
- 'background-color': lightGray,
position: 'fixed',
- top: '1em',
- left: '1em',
- bottom: '1em',
- right: '1em',
- width: 'calc(100% - 2em)',
- height: 'calc(100% - 2em)',
+ top: '0',
+ left: '0',
+ width: '100%',
+ height: '100%',
border: 'none',
- 'border-radius': '3px',
- 'box-shadow': '0 0 6px 0 rgba(0, 0, 0, 0.5)',
'z-index': 1337,
};
const overlayStyle = {
+ width: '100%',
+ height: '100%',
'box-sizing': 'border-box',
- padding: '4rem',
+ 'text-align': 'center',
+ 'background-color': white,
+};
+
+const containerStyle = {
+ position: 'relative',
+ display: 'inline-flex',
+ 'flex-direction': 'column',
+ height: '100%',
+ width: '1024px',
+ 'max-width': '100%',
+ 'overflow-x': 'hidden',
+ 'overflow-y': 'auto',
+ padding: '0.5rem',
+ 'box-sizing': 'border-box',
+ 'text-align': 'start',
'font-family': 'Consolas, Menlo, monospace',
- color: black,
+ 'font-size': '11px',
'white-space': 'pre-wrap',
- overflow: 'auto',
- 'overflow-x': 'hidden',
'word-break': 'break-word',
'line-height': 1.5,
+ color: black,
};
const hintsStyle = {
- 'font-size': '0.8em',
- 'margin-top': '-3em',
- 'margin-bottom': '3em',
- 'text-align': 'right',
color: darkGray,
};
@@ -47,9 +54,10 @@ const hintStyle = {
};
const closeButtonStyle = {
- 'font-size': '26px',
color: black,
- padding: '0.5em 1em',
+ 'line-height': '1rem',
+ 'font-size': '1.5rem',
+ padding: '1rem',
cursor: 'pointer',
position: 'absolute',
right: 0,
@@ -62,15 +70,18 @@ const additionalStyle = {
};
const headerStyle = {
- 'font-size': '1.7em',
- 'font-weight': 'bold',
+ 'font-size': '2em',
+ 'font-family': 'sans-serif',
color: red,
'white-space': 'pre-wrap',
+ margin: '0.75rem 2rem 0 0', // Prevent overlap with close button
+ flex: '0 0 auto',
+ 'max-height': '35%',
+ overflow: 'auto',
};
const functionNameStyle = {
'margin-top': '1em',
- 'font-size': '1.2em',
};
const linkStyle = {
@@ -84,11 +95,12 @@ const anchorStyle = {
const traceStyle = {
'font-size': '1em',
+ flex: '0 1 auto',
+ 'min-height': '0px',
+ overflow: 'auto',
};
-const depStyle = {
- 'font-size': '1.2em',
-};
+const depStyle = {};
const primaryErrorStyle = {
'background-color': lightRed,
@@ -100,19 +112,18 @@ const secondaryErrorStyle = {
const omittedFramesStyle = {
color: black,
- 'font-size': '0.9em',
- margin: '1.5em 0',
cursor: 'pointer',
};
const preStyle = {
display: 'block',
padding: '0.5em',
- 'margin-top': '1.5em',
- 'margin-bottom': '0px',
+ 'margin-top': '0.5em',
+ 'margin-bottom': '0.5em',
'overflow-x': 'auto',
- 'font-size': '1.1em',
- 'white-space': 'pre',
+ 'white-space': 'pre-wrap',
+ 'border-radius': '0.25rem',
+ 'background-color': 'rgba(206, 17, 38, .05)',
};
const toggleStyle = {
@@ -156,11 +167,14 @@ const groupElemRight = Object.assign({}, _groupElemStyle, {
});
const footerStyle = {
- 'text-align': 'center',
+ 'font-family': 'sans-serif',
color: darkGray,
+ 'margin-top': '0.5rem',
+ flex: '0 0 auto',
};
export {
+ containerStyle,
iframeStyle,
overlayStyle,
hintsStyle,