Tweaked error overlay styles (pt2) (#2208)

* 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

Author: bvaughn

packages/react-dev-utils/webpackHotDevClient.js

@@ -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;';
@@ -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;">' +

packages/react-error-overlay/src/components/code.js

@@ -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';
@@ -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') {

packages/react-error-overlay/src/components/frame.js

@@ -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,
@@ -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;
 }
 
@@ -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);

packages/react-error-overlay/src/components/overlay.js

@@ -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);
@@ -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)

packages/react-error-overlay/src/styles.js

@@ -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',
@@ -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',
@@ -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',
@@ -186,9 +205,11 @@ export {
   traceStyle,
   depStyle,
   primaryErrorStyle,
+  primaryPreStyle,
   secondaryErrorStyle,
-  omittedFramesStyle,
-  preStyle,
+  secondaryPreStyle,
+  omittedFramesCollapsedStyle,
+  omittedFramesExpandedStyle,
   toggleStyle,
   codeStyle,
   hiddenStyle,