Make "N errors on the page" visible again

Author: gaearon

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

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)

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 = {