Skip to content

Commit

Permalink
Tweaking error overlay styles (facebook#2201)
Browse files Browse the repository at this point in the history
* Tweaked overlay styles

* Tweaked pre-style

* Clicked to background overlay dismiss

* Tidied up styles tobe more mobile Safari friendly

* Re-enabled pre-wrap

* Margin fixes

* Base font-size 10 -> 11px

* Error overlay is full-screen now based on feedback

* Make "N errors on the page" visible again

* Fix bottom margin of frame location and lack of tab nav

* Add tooltip to close button

* Bring compile error styles closer to runtime overlay

* s/when/if/
  • Loading branch information
bvaughn authored and romaindso committed Jul 10, 2017
1 parent 78ac0c1 commit 8b30277
Show file tree
Hide file tree
Showing 9 changed files with 153 additions and 120 deletions.
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

0 comments on commit 8b30277

Please sign in to comment.