From 7b5663fcdb1d3429d151518a5e1b1039d662b8ac Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 May 2017 08:42:20 +0200
Subject: [PATCH 01/13] Tweaked overlay styles
---
packages/react-dev-utils/ansiHTML.js | 10 ++--
.../react-dev-utils/webpackHotDevClient.js | 19 +++++--
.../src/components/overlay.js | 8 ++-
packages/react-error-overlay/src/overlay.js | 29 +---------
packages/react-error-overlay/src/styles.js | 54 +++++++++++++------
5 files changed, 65 insertions(+), 55 deletions(-)
diff --git a/packages/react-dev-utils/ansiHTML.js b/packages/react-dev-utils/ansiHTML.js
index c4e850736..5d3e79203 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. <?php ?>
// 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 4e2d3cf13..5a19cf063 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,15 +59,24 @@ 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';
+ div.style.whiteSpace = 'pre';
div.style.overflow = 'auto';
iframe.contentDocument.body.appendChild(div);
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 = '<span style="color: ' +
- red +
+ overlayDiv.innerHTML = '<span style="' +
+ overlayHeaderStyle() +
'">Failed to compile.</span><br><br>' +
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 8633524be..d808e597f 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 {
+ craContainer,
+ overlayStyle,
+ headerStyle,
+ additionalStyle,
+} from '../styles';
import { createClose } from './close';
import { createFrames } from './frames';
import { createFooter } from './footer';
@@ -32,6 +37,7 @@ function createOverlay(
// Create container
const container = document.createElement('div');
+ applyStyles(container, craContainer);
container.className = 'cra-container';
overlay.appendChild(container);
diff --git a/packages/react-error-overlay/src/overlay.js b/packages/react-error-overlay/src/overlay.js
index fe29a6c7b..fb3fb4dca 100644
--- a/packages/react-error-overlay/src/overlay.js
+++ b/packages/react-error-overlay/src/overlay.js
@@ -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,8 +78,8 @@ function render(name: ?string, message: string, resolvedFrames: StackFrame[]) {
keyEventHandler(type => shortcutHandler(type), event);
};
}
- injectCss(iframeReference.contentDocument, css);
if (document.body != null) {
+ document.body.style.margin = 0;
document.body.appendChild(overlay);
}
additionalReference = additional;
diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js
index 855778cbd..43c044106 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/packages/react-error-overlay/src/styles.js
@@ -4,10 +4,11 @@ const black = '#293238',
lightGray = '#fafafa',
red = '#ce1126',
lightRed = '#fccfcf',
- yellow = '#fbf5b4';
+ yellow = '#fbf5b4',
+ white = '#ffffff';
const iframeStyle = {
- 'background-color': lightGray,
+ 'background-color': 'rgba(0,0,0,.5)',
position: 'fixed',
top: '1em',
left: '1em',
@@ -22,22 +23,38 @@ const iframeStyle = {
};
const overlayStyle = {
+ position: 'absolute',
+ top: '0.5rem',
+ left: '50%',
+ 'margin-left': '0',
+ 'margin-right': '-50%',
+ transform: 'translate(-50%, 0)',
+ display: 'inline-block',
+ margin: '0.5rem',
+ 'max-height': 'calc(100% - 1rem)',
+ 'max-width': 'calc(100% - 1rem)',
'box-sizing': 'border-box',
- padding: '4rem',
+ padding: '0 1rem',
'font-family': 'Consolas, Menlo, monospace',
+ 'font-size': '10px',
color: black,
'white-space': 'pre-wrap',
overflow: 'auto',
'overflow-x': 'hidden',
'word-break': 'break-word',
'line-height': 1.5,
+ 'background-color': white,
+ 'border-radius': '0.25rem',
+ 'box-shadow': '0 0 10px 0 rgba(0, 0, 0, 0.15)',
+};
+
+const craContainer = {
+ display: 'flex',
+ 'flex-direction': 'column',
+ 'max-height': '100%',
};
const hintsStyle = {
- 'font-size': '0.8em',
- 'margin-top': '-3em',
- 'margin-bottom': '3em',
- 'text-align': 'right',
color: darkGray,
};
@@ -49,7 +66,9 @@ 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,
@@ -63,14 +82,15 @@ const additionalStyle = {
const headerStyle = {
'font-size': '1.7em',
- 'font-weight': 'bold',
+ 'font-family': 'sans-serif',
color: red,
'white-space': 'pre-wrap',
+ flex: '0 0 auto',
+ margin: '0.75rem 0 0',
};
const functionNameStyle = {
'margin-top': '1em',
- 'font-size': '1.2em',
};
const linkStyle = {
@@ -84,11 +104,11 @@ const anchorStyle = {
const traceStyle = {
'font-size': '1em',
+ overflow: 'auto',
+ flex: '1 1 auto',
};
-const depStyle = {
- 'font-size': '1.2em',
-};
+const depStyle = {};
const primaryErrorStyle = {
'background-color': lightRed,
@@ -100,7 +120,6 @@ const secondaryErrorStyle = {
const omittedFramesStyle = {
color: black,
- 'font-size': '0.9em',
margin: '1.5em 0',
cursor: 'pointer',
};
@@ -111,7 +130,6 @@ const preStyle = {
'margin-top': '1.5em',
'margin-bottom': '0px',
'overflow-x': 'auto',
- 'font-size': '1.1em',
'white-space': 'pre',
};
@@ -156,11 +174,15 @@ const groupElemRight = Object.assign({}, _groupElemStyle, {
});
const footerStyle = {
- 'text-align': 'center',
+ 'font-family': 'sans-serif',
color: darkGray,
+ flex: '0 0 auto',
+ 'margin-top': '0.5rem',
+ 'margin-bottom': '1rem',
};
export {
+ craContainer,
iframeStyle,
overlayStyle,
hintsStyle,
--
GitLab
From 404c66cc3bfa078013bda1f3e0fa67f8734bc2d4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 May 2017 11:22:46 +0200
Subject: [PATCH 02/13] Tweaked pre-style
---
packages/react-error-overlay/src/overlay.js | 2 +-
packages/react-error-overlay/src/styles.js | 9 ++++-----
2 files changed, 5 insertions(+), 6 deletions(-)
diff --git a/packages/react-error-overlay/src/overlay.js b/packages/react-error-overlay/src/overlay.js
index fb3fb4dca..3c1207dcc 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';
diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js
index 43c044106..c4ae5d254 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/packages/react-error-overlay/src/styles.js
@@ -1,7 +1,6 @@
/* @flow */
const black = '#293238',
darkGray = '#878e91',
- lightGray = '#fafafa',
red = '#ce1126',
lightRed = '#fccfcf',
yellow = '#fbf5b4',
@@ -64,7 +63,6 @@ const hintStyle = {
};
const closeButtonStyle = {
- 'font-size': '26px',
color: black,
'line-height': '1rem',
'font-size': '1.5rem',
@@ -120,17 +118,18 @@ const secondaryErrorStyle = {
const omittedFramesStyle = {
color: black,
- 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',
'white-space': 'pre',
+ 'border-radius': '0.25rem',
+ 'background-color': 'rgba(206, 17, 38, .05)',
};
const toggleStyle = {
--
GitLab
From 9e453dabffd95e6092d376b352efdf1a364e0c19 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 May 2017 11:45:17 +0200
Subject: [PATCH 03/13] Clicked to background overlay dismiss
---
packages/react-error-overlay/src/components/overlay.js | 5 +++++
packages/react-error-overlay/src/overlay.js | 4 +++-
2 files changed, 8 insertions(+), 1 deletion(-)
diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js
index d808e597f..8959267fe 100644
--- a/packages/react-error-overlay/src/components/overlay.js
+++ b/packages/react-error-overlay/src/components/overlay.js
@@ -32,6 +32,11 @@ function createOverlay(
const frameSettings: FrameSetting[] = frames.map(() => ({ compiled: false }));
// Create overlay
const overlay = document.createElement('div');
+ overlay.addEventListener('click', function(event: Event) {
+ // Clicks to background layer dismiss the popup
+ // Prevent clicks within the panel from accidentally dismissing
+ event.stopPropagation();
+ });
applyStyles(overlay, overlayStyle);
overlay.appendChild(createClose(document, closeCallback));
diff --git a/packages/react-error-overlay/src/overlay.js b/packages/react-error-overlay/src/overlay.js
index 3c1207dcc..8e340e09a 100644
--- a/packages/react-error-overlay/src/overlay.js
+++ b/packages/react-error-overlay/src/overlay.js
@@ -79,8 +79,10 @@ function render(name: ?string, message: string, resolvedFrames: StackFrame[]) {
};
}
if (document.body != null) {
- document.body.style.margin = 0;
+ document.body.style.margin = '0';
document.body.appendChild(overlay);
+ // Clicks to background overlay should dismiss error popup
+ (document.body: any).addEventListener('click', unmount);
}
additionalReference = additional;
};
--
GitLab
From 540c8c857b62baa7197b7bfd63048a6f15fc2ec0 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 May 2017 14:35:12 +0200
Subject: [PATCH 04/13] Tidied up styles tobe more mobile Safari friendly
---
.../src/components/overlay.js | 20 +++---
packages/react-error-overlay/src/overlay.js | 8 ++-
packages/react-error-overlay/src/styles.js | 61 +++++++++----------
3 files changed, 44 insertions(+), 45 deletions(-)
diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js
index 8959267fe..c61053d9b 100644
--- a/packages/react-error-overlay/src/components/overlay.js
+++ b/packages/react-error-overlay/src/components/overlay.js
@@ -1,7 +1,7 @@
/* @flow */
import { applyStyles } from '../utils/dom/css';
import {
- craContainer,
+ containerStyle,
overlayStyle,
headerStyle,
additionalStyle,
@@ -32,19 +32,13 @@ function createOverlay(
const frameSettings: FrameSetting[] = frames.map(() => ({ compiled: false }));
// Create overlay
const overlay = document.createElement('div');
- overlay.addEventListener('click', function(event: Event) {
- // Clicks to background layer dismiss the popup
- // Prevent clicks within the panel from accidentally dismissing
- event.stopPropagation();
- });
applyStyles(overlay, overlayStyle);
- overlay.appendChild(createClose(document, closeCallback));
// Create container
const container = document.createElement('div');
- applyStyles(container, craContainer);
- container.className = 'cra-container';
+ applyStyles(container, containerStyle);
overlay.appendChild(container);
+ container.appendChild(createClose(document, closeCallback));
// Create additional
const additional = document.createElement('div');
@@ -90,6 +84,14 @@ function createOverlay(
// Show message
container.appendChild(createFooter(document));
+ // Clicks to background overlay should dismiss error popup.
+ overlay.addEventListener('click', closeCallback);
+
+ // Clicks within the popup should not dismiss it.
+ container.addEventListener('click', function(event: Event) {
+ event.stopPropagation();
+ });
+
return {
overlay,
additional,
diff --git a/packages/react-error-overlay/src/overlay.js b/packages/react-error-overlay/src/overlay.js
index 8e340e09a..cfcd11829 100644
--- a/packages/react-error-overlay/src/overlay.js
+++ b/packages/react-error-overlay/src/overlay.js
@@ -80,9 +80,11 @@ function render(name: ?string, message: string, resolvedFrames: StackFrame[]) {
}
if (document.body != null) {
document.body.style.margin = '0';
- document.body.appendChild(overlay);
- // Clicks to background overlay should dismiss error popup
- (document.body: any).addEventListener('click', unmount);
+ // 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 c4ae5d254..f43552363 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/packages/react-error-overlay/src/styles.js
@@ -7,52 +7,46 @@ const black = '#293238',
white = '#ffffff';
const iframeStyle = {
- 'background-color': 'rgba(0,0,0,.5)',
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 = {
- position: 'absolute',
- top: '0.5rem',
- left: '50%',
- 'margin-left': '0',
- 'margin-right': '-50%',
- transform: 'translate(-50%, 0)',
- display: 'inline-block',
- margin: '0.5rem',
- 'max-height': 'calc(100% - 1rem)',
- 'max-width': 'calc(100% - 1rem)',
+ width: '100%',
+ height: '100%',
+ 'box-sizing': 'border-box',
+ 'background-color': 'rgba(0,0,0,.5)',
+ padding: '0.5rem',
+ 'text-align': 'center',
+};
+
+const containerStyle = {
+ position: 'relative',
+ display: 'inline-flex',
+ 'flex-direction': 'column',
+ 'max-height': '100%',
+ 'max-width': '100%',
+ 'overflow-x': 'hidden',
+ 'overflow-y': 'auto',
+ padding: '0.5rem',
'box-sizing': 'border-box',
- padding: '0 1rem',
+ 'text-align': 'start',
'font-family': 'Consolas, Menlo, monospace',
'font-size': '10px',
- color: black,
'white-space': 'pre-wrap',
- overflow: 'auto',
- 'overflow-x': 'hidden',
'word-break': 'break-word',
'line-height': 1.5,
'background-color': white,
+ color: black,
'border-radius': '0.25rem',
'box-shadow': '0 0 10px 0 rgba(0, 0, 0, 0.15)',
};
-const craContainer = {
- display: 'flex',
- 'flex-direction': 'column',
- 'max-height': '100%',
-};
-
const hintsStyle = {
color: darkGray,
};
@@ -83,8 +77,8 @@ const headerStyle = {
'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',
- margin: '0.75rem 0 0',
};
const functionNameStyle = {
@@ -102,8 +96,9 @@ const anchorStyle = {
const traceStyle = {
'font-size': '1em',
+ flex: '0 1 auto',
+ 'min-height': '0px',
overflow: 'auto',
- flex: '1 1 auto',
};
const depStyle = {};
@@ -175,13 +170,13 @@ const groupElemRight = Object.assign({}, _groupElemStyle, {
const footerStyle = {
'font-family': 'sans-serif',
color: darkGray,
- flex: '0 0 auto',
'margin-top': '0.5rem',
'margin-bottom': '1rem',
+ flex: '0 0 auto',
};
export {
- craContainer,
+ containerStyle,
iframeStyle,
overlayStyle,
hintsStyle,
--
GitLab
From 531a595e8c0acf298a4498f5c98808d00711fa06 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 May 2017 14:53:50 +0200
Subject: [PATCH 05/13] Re-enabled pre-wrap
---
packages/react-dev-utils/webpackHotDevClient.js | 2 +-
packages/react-error-overlay/src/styles.js | 2 +-
2 files changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 5a19cf063..358be53ea 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -62,7 +62,7 @@ function addOverlayDivTo(iframe) {
div.style.fontSize = '10px';
div.style.padding = '2rem';
div.style.lineHeight = '1.2';
- div.style.whiteSpace = 'pre';
+ div.style.whiteSpace = 'pre-wrap';
div.style.overflow = 'auto';
iframe.contentDocument.body.appendChild(div);
return div;
diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js
index f43552363..9c7dc8c97 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/packages/react-error-overlay/src/styles.js
@@ -122,7 +122,7 @@ const preStyle = {
'margin-top': '0.5em',
'margin-bottom': '0.5em',
'overflow-x': 'auto',
- 'white-space': 'pre',
+ 'white-space': 'pre-wrap',
'border-radius': '0.25rem',
'background-color': 'rgba(206, 17, 38, .05)',
};
--
GitLab
From 7004be039d9f7caae8657d9d2321b7844df28e5d Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 May 2017 16:26:44 +0200
Subject: [PATCH 06/13] Margin fixes
---
packages/react-error-overlay/src/styles.js | 3 +--
1 file changed, 1 insertion(+), 2 deletions(-)
diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js
index 9c7dc8c97..c951a6ed3 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/packages/react-error-overlay/src/styles.js
@@ -77,7 +77,7 @@ const headerStyle = {
'font-family': 'sans-serif',
color: red,
'white-space': 'pre-wrap',
- margin: '0.75rem 2rem 0 0', // Prevent overlap with close button
+ margin: '0.25rem 2rem 0 0', // Prevent overlap with close button
flex: '0 0 auto',
};
@@ -171,7 +171,6 @@ const footerStyle = {
'font-family': 'sans-serif',
color: darkGray,
'margin-top': '0.5rem',
- 'margin-bottom': '1rem',
flex: '0 0 auto',
};
--
GitLab
From 7936dde37050761af4fbb8e08078c2c517361419 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 May 2017 18:39:13 +0200
Subject: [PATCH 07/13] Base font-size 10 -> 11px
---
packages/react-error-overlay/src/styles.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js
index c951a6ed3..ac1377799 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/packages/react-error-overlay/src/styles.js
@@ -37,7 +37,7 @@ const containerStyle = {
'box-sizing': 'border-box',
'text-align': 'start',
'font-family': 'Consolas, Menlo, monospace',
- 'font-size': '10px',
+ 'font-size': '11px',
'white-space': 'pre-wrap',
'word-break': 'break-word',
'line-height': 1.5,
@@ -77,7 +77,7 @@ const headerStyle = {
'font-family': 'sans-serif',
color: red,
'white-space': 'pre-wrap',
- margin: '0.25rem 2rem 0 0', // Prevent overlap with close button
+ margin: '0.75rem 2rem 0 0', // Prevent overlap with close button
flex: '0 0 auto',
};
--
GitLab
From f8a2a5e3184053ddf8dfa6da4ca540cad4fc0fff Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 17 May 2017 22:59:37 +0200
Subject: [PATCH 08/13] Error overlay is full-screen now based on feedback
---
.../react-error-overlay/src/components/overlay.js | 8 --------
packages/react-error-overlay/src/styles.js | 13 ++++++-------
2 files changed, 6 insertions(+), 15 deletions(-)
diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js
index c61053d9b..85e3d03cd 100644
--- a/packages/react-error-overlay/src/components/overlay.js
+++ b/packages/react-error-overlay/src/components/overlay.js
@@ -84,14 +84,6 @@ function createOverlay(
// Show message
container.appendChild(createFooter(document));
- // Clicks to background overlay should dismiss error popup.
- overlay.addEventListener('click', closeCallback);
-
- // Clicks within the popup should not dismiss it.
- container.addEventListener('click', function(event: Event) {
- event.stopPropagation();
- });
-
return {
overlay,
additional,
diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js
index ac1377799..6b31ee17e 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/packages/react-error-overlay/src/styles.js
@@ -20,16 +20,16 @@ const overlayStyle = {
width: '100%',
height: '100%',
'box-sizing': 'border-box',
- 'background-color': 'rgba(0,0,0,.5)',
- padding: '0.5rem',
'text-align': 'center',
+ 'background-color': white,
};
const containerStyle = {
position: 'relative',
display: 'inline-flex',
'flex-direction': 'column',
- 'max-height': '100%',
+ height: '100%',
+ width: '1024px',
'max-width': '100%',
'overflow-x': 'hidden',
'overflow-y': 'auto',
@@ -41,10 +41,7 @@ const containerStyle = {
'white-space': 'pre-wrap',
'word-break': 'break-word',
'line-height': 1.5,
- 'background-color': white,
color: black,
- 'border-radius': '0.25rem',
- 'box-shadow': '0 0 10px 0 rgba(0, 0, 0, 0.15)',
};
const hintsStyle = {
@@ -73,12 +70,14 @@ const additionalStyle = {
};
const headerStyle = {
- 'font-size': '1.7em',
+ '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 = {
--
GitLab
From 07587c97c1749bc564640694b9bfdfd674831c23 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 17 May 2017 23:51:42 +0100
Subject: [PATCH 09/13] Make "N errors on the page" visible again
---
.../src/components/additional.js | 12 ++++++----
.../src/components/overlay.js | 24 +++++++++----------
packages/react-error-overlay/src/styles.js | 9 +++----
3 files changed, 23 insertions(+), 22 deletions(-)
diff --git a/packages/react-error-overlay/src/components/additional.js b/packages/react-error-overlay/src/components/additional.js
index 4853c922c..080f68f1d 100644
--- a/packages/react-error-overlay/src/components/additional.js
+++ b/packages/react-error-overlay/src/components/additional.js
@@ -16,16 +16,14 @@ function updateAdditional(
additionalReference.removeChild(additionalReference.lastChild);
}
- let text = ' ';
if (totalErrors <= 1) {
- additionalReference.appendChild(document.createTextNode(text));
return;
}
- text = `Errors ${currentError} of ${totalErrors}`;
+
const span = document.createElement('span');
- span.appendChild(document.createTextNode(text));
const group = document.createElement('span');
applyStyles(group, groupStyle);
+
const left = document.createElement('button');
applyStyles(left, groupElemLeft);
left.addEventListener('click', function(e: MouseEvent) {
@@ -34,6 +32,7 @@ function updateAdditional(
});
left.appendChild(document.createTextNode('â†'));
enableTabClick(left);
+
const right = document.createElement('button');
applyStyles(right, groupElemRight);
right.addEventListener('click', function(e: MouseEvent) {
@@ -42,9 +41,14 @@ function updateAdditional(
});
right.appendChild(document.createTextNode('→'));
enableTabClick(right);
+
group.appendChild(left);
group.appendChild(right);
span.appendChild(group);
+
+ const text = `${currentError} of ${totalErrors} errors on the page`;
+ span.appendChild(document.createTextNode(text));
+
additionalReference.appendChild(span);
}
diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js
index 85e3d03cd..1626fcdee 100644
--- a/packages/react-error-overlay/src/components/overlay.js
+++ b/packages/react-error-overlay/src/components/overlay.js
@@ -40,18 +40,6 @@ function createOverlay(
overlay.appendChild(container);
container.appendChild(createClose(document, closeCallback));
- // Create additional
- const additional = document.createElement('div');
- applyStyles(additional, additionalStyle);
- container.appendChild(additional);
- updateAdditional(
- document,
- additional,
- currentError,
- totalErrors,
- switchCallback
- );
-
// Create header
const header = document.createElement('div');
applyStyles(header, headerStyle);
@@ -76,6 +64,18 @@ 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 6b31ee17e..b9cf242d2 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/packages/react-error-overlay/src/styles.js
@@ -64,10 +64,7 @@ const closeButtonStyle = {
top: 0,
};
-const additionalStyle = {
- 'margin-bottom': '1.5em',
- 'margin-top': '-4em',
-};
+const additionalStyle = {};
const headerStyle = {
'font-size': '2em',
@@ -141,7 +138,7 @@ const hiddenStyle = {
};
const groupStyle = {
- 'margin-left': '1em',
+ 'margin-right': '1em',
};
const _groupElemStyle = {
@@ -163,7 +160,7 @@ const groupElemLeft = Object.assign({}, _groupElemStyle, {
const groupElemRight = Object.assign({}, _groupElemStyle, {
'border-top-left-radius': '0px',
'border-bottom-left-radius': '0px',
- 'margin-left': '-1px',
+ 'margin-right': '-1px',
});
const footerStyle = {
--
GitLab
From ae5bb83d6fc06b7417c7fcfd2de0758b81df6a24 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 May 2017 00:05:47 +0100
Subject: [PATCH 10/13] Fix bottom margin of frame location and lack of tab nav
---
packages/react-error-overlay/src/components/frame.js | 1 +
packages/react-error-overlay/src/styles.js | 1 +
2 files changed, 2 insertions(+)
diff --git a/packages/react-error-overlay/src/components/frame.js b/packages/react-error-overlay/src/components/frame.js
index 70465a2ed..a9ea0ea37 100644
--- a/packages/react-error-overlay/src/components/frame.js
+++ b/packages/react-error-overlay/src/components/frame.js
@@ -120,6 +120,7 @@ function frameDiv(
if (typeof onSourceClick === 'function') {
let handler = onSourceClick;
+ enableTabClick(frameAnchor);
frameAnchor.style.cursor = 'pointer';
frameAnchor.addEventListener('click', function() {
handler();
diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js
index b9cf242d2..8e6f0d07b 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/packages/react-error-overlay/src/styles.js
@@ -83,6 +83,7 @@ const functionNameStyle = {
const linkStyle = {
'font-size': '0.9em',
+ 'margin-bottom': '0.9em',
};
const anchorStyle = {
--
GitLab
From b21f5f405e1fa48f65d98e0e8fffe7e4ee96e39c Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 May 2017 00:13:21 +0100
Subject: [PATCH 11/13] Add tooltip to close button
---
packages/react-error-overlay/src/components/close.js | 5 +++--
1 file changed, 3 insertions(+), 2 deletions(-)
diff --git a/packages/react-error-overlay/src/components/close.js b/packages/react-error-overlay/src/components/close.js
index e868cc0d4..bba65131b 100644
--- a/packages/react-error-overlay/src/components/close.js
+++ b/packages/react-error-overlay/src/components/close.js
@@ -2,9 +2,10 @@
import { applyStyles } from '../utils/dom/css';
import { hintsStyle, hintStyle, closeButtonStyle } from '../styles';
-function createHint(document: Document, hint: string) {
+function createHint(document: Document, hint: string, title: string) {
const span = document.createElement('span');
span.appendChild(document.createTextNode(hint));
+ span.setAttribute('title', title);
applyStyles(span, hintStyle);
return span;
}
@@ -14,7 +15,7 @@ function createClose(document: Document, callback: CloseCallback) {
const hints = document.createElement('div');
applyStyles(hints, hintsStyle);
- const close = createHint(document, '×');
+ const close = createHint(document, '×', 'Click or press Escape to dismiss.');
close.addEventListener('click', () => callback());
applyStyles(close, closeButtonStyle);
hints.appendChild(close);
--
GitLab
From 7df9e1e8aa8b12c51e8cee7c97ef225f814d5645 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 May 2017 00:41:20 +0100
Subject: [PATCH 12/13] Bring compile error styles closer to runtime overlay
---
.../react-dev-utils/webpackHotDevClient.js | 78 ++++++++++++-------
1 file changed, 51 insertions(+), 27 deletions(-)
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 358be53ea..dd280dab5 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -26,8 +26,6 @@ var Entities = require('html-entities').AllHtmlEntities;
var ansiHTML = require('./ansiHTML');
var entities = new Entities();
-var red = '#ce1126';
-
function createOverlayIframe(onIframeLoad) {
var iframe = document.createElement('iframe');
iframe.id = 'react-dev-utils-webpack-hot-dev-client-overlay';
@@ -46,35 +44,51 @@ function createOverlayIframe(onIframeLoad) {
}
function addOverlayDivTo(iframe) {
+ // TODO: unify these styles with react-error-overlay
+ iframe.contentDocument.body.style.margin = 0;
+ iframe.contentDocument.body.style.maxWidth = '100vw';
+
+ var outerDiv = iframe.contentDocument.createElement('div');
+ outerDiv.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div';
+ outerDiv.style.width = '100%';
+ outerDiv.style.height = '100%';
+ outerDiv.style.boxSizing = 'border-box';
+ outerDiv.style.textAlign = 'center';
+ outerDiv.style.backgroundColor = 'rgb(255, 255, 255)';
+
var div = iframe.contentDocument.createElement('div');
- div.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div';
- div.style.position = 'fixed';
+ div.style.position = 'relative';
+ div.style.display = 'inline-flex';
+ div.style.flexDirection = 'column';
+ div.style.height = '100%';
+ div.style.width = '1024px';
+ div.style.maxWidth = '100%';
+ div.style.overflowX = 'hidden';
+ div.style.overflowY = 'auto';
+ div.style.padding = '0.5rem';
div.style.boxSizing = 'border-box';
- div.style.left = 0;
- div.style.top = 0;
- div.style.right = 0;
- div.style.bottom = 0;
- div.style.width = '100vw';
- div.style.height = '100vh';
- div.style.backgroundColor = '#fafafa';
- div.style.color = '#333';
- div.style.fontFamily = 'Menlo, Consolas, monospace';
- div.style.fontSize = '10px';
- div.style.padding = '2rem';
- div.style.lineHeight = '1.2';
+ div.style.textAlign = 'start';
+ div.style.fontFamily = 'Consolas, Menlo, monospace';
+ div.style.fontSize = '11px';
div.style.whiteSpace = 'pre-wrap';
- div.style.overflow = 'auto';
- iframe.contentDocument.body.appendChild(div);
+ div.style.wordBreak = 'break-word';
+ div.style.lineHeight = '1.5';
+ div.style.color = 'rgb(41, 50, 56)';
+
+ outerDiv.appendChild(div);
+ iframe.contentDocument.body.appendChild(outerDiv);
return div;
}
function overlayHeaderStyle() {
- return 'font-size: 1.7em;' +
+ return 'font-size: 2em;' +
'font-family: sans-serif;' +
- 'color: ' +
- red +
- ';' +
- 'white-space: pre-wrap;';
+ 'color: rgb(206, 17, 38);' +
+ 'white-space: pre-wrap;' +
+ 'margin: 0.75rem 2rem 0px 0px;' +
+ 'flex: 0 0 auto;' +
+ 'max-height: 35%;' +
+ 'overflow: auto;';
}
var overlayIframe = null;
@@ -112,11 +126,21 @@ function ensureOverlayDivExists(onOverlayDivReady) {
function showErrorOverlay(message) {
ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
- // Make it look similar to our terminal.
- overlayDiv.innerHTML = '<span style="' +
+ // TODO: unify this with our runtime overlay
+ overlayDiv.innerHTML = '<div style="' +
overlayHeaderStyle() +
- '">Failed to compile.</span><br><br>' +
- ansiHTML(entities.encode(message));
+ '">Failed to compile</div><br><br>' +
+ '<pre style="' +
+ '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(206, 17, 38, 0.05)">' +
+ '<code style="font-family: Consolas, Menlo, monospace;">' +
+ ansiHTML(entities.encode(message)) +
+ '</code></pre>' +
+ '<div style="' +
+ 'font-family: sans-serif; color: rgb(135, 142, 145); margin-top: 0.5rem; ' +
+ 'flex: 0 0 auto">' +
+ 'This error occurred during the build time and cannot be dismissed.</div>';
});
}
--
GitLab
From 9e57b9351a721b89717b304b92fee8926406adad Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 May 2017 00:46:32 +0100
Subject: [PATCH 13/13] s/when/if/
---
packages/react-error-overlay/src/components/footer.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-error-overlay/src/components/footer.js b/packages/react-error-overlay/src/components/footer.js
index 9ddfaf57c..bfedeef0d 100644
--- a/packages/react-error-overlay/src/components/footer.js
+++ b/packages/react-error-overlay/src/components/footer.js
@@ -7,7 +7,7 @@ function createFooter(document: Document) {
applyStyles(div, footerStyle);
div.appendChild(
document.createTextNode(
- 'This screen is visible only in development. It will not appear when the app crashes in production.'
+ 'This screen is visible only in development. It will not appear if the app crashes in production.'
)
);
div.appendChild(document.createElement('br'));
--
GitLab