Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tweaking error overlay styles #2201

Merged
merged 14 commits into from
May 17, 2017
10 changes: 5 additions & 5 deletions packages/react-dev-utils/ansiHTML.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
79 changes: 56 additions & 23 deletions packages/react-dev-utils/webpackHotDevClient.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,6 @@ var Entities = require('html-entities').AllHtmlEntities;
var ansiHTML = require('./ansiHTML');
var entities = new Entities();

var red = '#E36049';

function createOverlayIframe(onIframeLoad) {
var iframe = document.createElement('iframe');
iframe.id = 'react-dev-utils-webpack-hot-dev-client-overlay';
Expand All @@ -46,28 +44,53 @@ 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 = 'large';
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: 2em;' +
'font-family: sans-serif;' +
'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;
var overlayDiv = null;
var lastOnOverlayDivReady = null;
Expand Down Expand Up @@ -103,11 +126,21 @@ function ensureOverlayDivExists(onOverlayDivReady) {

function showErrorOverlay(message) {
ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
// Make it look similar to our terminal.
overlayDiv.innerHTML = '<span style="color: ' +
red +
'">Failed to compile.</span><br><br>' +
ansiHTML(entities.encode(message));
// TODO: unify this with our runtime overlay
overlayDiv.innerHTML = '<div style="' +
overlayHeaderStyle() +
'">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>';
});
}

Expand Down
12 changes: 8 additions & 4 deletions packages/react-error-overlay/src/components/additional.js
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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) {
Expand All @@ -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);
}

Expand Down
5 changes: 3 additions & 2 deletions packages/react-error-overlay/src/components/close.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion packages/react-error-overlay/src/components/footer.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'));
Expand Down
1 change: 1 addition & 0 deletions packages/react-error-overlay/src/components/frame.js
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ function frameDiv(

if (typeof onSourceClick === 'function') {
let handler = onSourceClick;
enableTabClick(frameAnchor);
frameAnchor.style.cursor = 'pointer';
frameAnchor.addEventListener('click', function() {
handler();
Expand Down
35 changes: 20 additions & 15 deletions packages/react-error-overlay/src/components/overlay.js
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -28,24 +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);

// Create additional
const additional = document.createElement('div');
applyStyles(additional, additionalStyle);
container.appendChild(additional);
updateAdditional(
document,
additional,
currentError,
totalErrors,
switchCallback
);
container.appendChild(createClose(document, closeCallback));

// Create header
const header = document.createElement('div');
Expand All @@ -71,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)
Expand Down
37 changes: 7 additions & 30 deletions packages/react-error-overlay/src/overlay.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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();

Expand Down Expand Up @@ -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;
};
Expand Down
Loading