From 2b39275f7f0b49d6843ac9767ff228072c684e39 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Fri, 4 Nov 2016 23:51:59 -0400
Subject: [PATCH 001/120] Add red box prototype

---
 packages/react-dev-utils/failFast.js          | 77 +++++++++++++++++++
 packages/react-dev-utils/package.json         |  4 +-
 .../config/webpack.config.dev.js              |  2 +
 3 files changed, 82 insertions(+), 1 deletion(-)
 create mode 100644 packages/react-dev-utils/failFast.js

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
new file mode 100644
index 00000000000..9d3d9f1fbb2
--- /dev/null
+++ b/packages/react-dev-utils/failFast.js
@@ -0,0 +1,77 @@
+(function() {
+  const ErrorStackParser = require('error-stack-parser')
+
+  const overlayStyle = {
+    position: 'fixed',
+    'box-sizing': 'border-box',
+    top: '0px', left: '0px',
+    bottom: '0px', right: '0px',
+    width: '100vw', height: '100vh',
+    'background-color': 'rgb(200, 0, 0)',
+    padding: '2rem',
+    'z-index': 1337,
+    'font-family': 'Menlo, Consolas, monospace',
+    color: 'rgb(232, 232, 232)',
+    'white-space': 'pre-wrap'
+  }
+
+  const headerStyle = {
+    'font-size': 'larger',
+    'font-weight': 'bold'
+  }
+
+  const traceStyle = {
+    'font-size': '1rem'
+  }
+
+  function applyStyles(element, styles) {
+    element.setAttribute('style', '')
+    for (const key in styles) {
+      if (!styles.hasOwnProperty(key)) continue
+      element.style[key] = styles[key].toString()
+    }
+  }
+
+  function render(name, message, frames) {
+    // Create container
+    const overlay = document.createElement('div')
+    applyStyles(overlay, overlayStyle)
+
+    // Create header
+    const header = document.createElement('div')
+    applyStyles(header, headerStyle)
+    header.appendChild(document.createTextNode(`${name}: ${message}`))
+    overlay.appendChild(header)
+
+    // Show trace
+    const trace = document.createElement('div')
+    applyStyles(trace, traceStyle)
+    for (const frame of frames) {
+      const { source } = frame
+      const elem = document.createElement('div')
+      elem.appendChild(document.createTextNode(source))
+      trace.appendChild(elem)
+    }
+    overlay.appendChild(trace)
+
+    // Mount
+    document.body.appendChild(overlay)
+  }
+
+  function crash(error) {
+    let frames = []
+    try {
+      frames = ErrorStackParser.parse(error)
+    } catch (e) {
+    }
+    render(error.name, error.message, frames)
+  }
+
+  window.onerror = function(messageOrEvent, source, lineno, colno, error) {
+    if (error == null || !(error instanceof Error) || messageOrEvent.indexOf('Script error') !== -1) {
+      crash(new Error('Unknown script error.'))// TODO: more helpful message
+    } else {
+      crash(error)
+    }
+  }
+})()
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index c9f2fac2dcf..fdf1b3dad5f 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -11,8 +11,9 @@
     "node": ">=4"
   },
   "files": [
-    "clearConsole.js",
     "checkRequiredFiles.js",
+    "clearConsole.js",
+    "failFast.js",
     "formatWebpackMessages.js",
     "getProcessForPort.js",
     "InterpolateHtmlPlugin.js",
@@ -25,6 +26,7 @@
   "dependencies": {
     "ansi-html": "0.0.5",
     "chalk": "1.1.3",
+    "error-stack-parser": "1.3.6",
     "escape-string-regexp": "1.0.5",
     "html-entities": "1.2.0",
     "opn": "4.0.2",
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 8e264d40286..b18f662f3a3 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -53,6 +53,8 @@ module.exports = {
     require.resolve('react-dev-utils/webpackHotDevClient'),
     // We ship a few polyfills by default:
     require.resolve('./polyfills'),
+    // In development, we want to fail fast
+    require.resolve('react-dev-utils/failFast'),
     // Finally, this is your app's code:
     paths.appIndexJs
     // We include the app code last so that if there is a runtime error during

From 6c829330d0c1d4b08fe981903d689d3531561326 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 26 Nov 2016 20:07:02 -0500
Subject: [PATCH 002/120] Unmount fail node when hot-reloaded (future proofing)

---
 packages/react-dev-utils/failFast.js | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 9d3d9f1fbb2..4d1394b8040 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -32,7 +32,10 @@
     }
   }
 
+  let overlayReference = null
+
   function render(name, message, frames) {
+    if (overlayReference !== null) unmount()
     // Create container
     const overlay = document.createElement('div')
     applyStyles(overlay, overlayStyle)
@@ -55,7 +58,13 @@
     overlay.appendChild(trace)
 
     // Mount
-    document.body.appendChild(overlay)
+    document.body.appendChild(overlayReference = overlay)
+  }
+
+  function unmount() {
+    if (overlayReference === null) return
+    document.body.removeChild(overlayReference)
+    overlayReference = null
   }
 
   function crash(error) {
@@ -74,4 +83,10 @@
       crash(error)
     }
   }
+
+  if (module.hot) {
+    module.hot.dispose(function() {
+      unmount()
+    })
+  }
 })()

From 29453855646aa6361d7dc6f6f08ffee0755b8b73 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 26 Nov 2016 20:07:14 -0500
Subject: [PATCH 003/120] Slightly improve error reason

---
 packages/react-dev-utils/failFast.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 4d1394b8040..992375045ee 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -78,7 +78,7 @@
 
   window.onerror = function(messageOrEvent, source, lineno, colno, error) {
     if (error == null || !(error instanceof Error) || messageOrEvent.indexOf('Script error') !== -1) {
-      crash(new Error('Unknown script error.'))// TODO: more helpful message
+      crash(new Error(error || messageOrEvent))// TODO: more helpful message
     } else {
       crash(error)
     }

From c742848d3830dbca1d14d9b87e23f8e051e6b635 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 26 Nov 2016 20:07:41 -0500
Subject: [PATCH 004/120] Add Chrome unhandledrejection listener

---
 packages/react-dev-utils/failFast.js | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 992375045ee..fa46b2e0150 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -67,13 +67,17 @@
     overlayReference = null
   }
 
-  function crash(error) {
+  function crash(error, unhandledRejection = false) {
     let frames = []
     try {
       frames = ErrorStackParser.parse(error)
     } catch (e) {
     }
-    render(error.name, error.message, frames)
+    if (unhandledRejection) {
+      render(`Unhandled Rejection (${error.name})`, error.message, frames)
+    } else {
+      render(error.name, error.message, frames)
+    }
   }
 
   window.onerror = function(messageOrEvent, source, lineno, colno, error) {
@@ -84,9 +88,25 @@
     }
   }
 
+  let promiseHandler = function(event) {
+    if (event != null && event.reason != null) {
+      const { reason } = event
+      if (reason == null || !(reason instanceof Error)) {
+        crash(new Error(reason), true)
+      } else {
+        crash(reason, true)
+      }
+    } else {
+      crash(new Error('Unknown event'), true)
+    }
+  }
+
+  window.addEventListener('unhandledrejection', promiseHandler)
+
   if (module.hot) {
     module.hot.dispose(function() {
       unmount()
+      window.removeEventListener('unhandledrejection', promiseHandler)
     })
   }
 })()

From a3ae31e1e2aebeeed08fba52d8cc89f344ea693a Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 26 Nov 2016 20:14:24 -0500
Subject: [PATCH 005/120] Close red box when Escape is pressed

---
 packages/react-dev-utils/failFast.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index fa46b2e0150..f607356e65f 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -103,10 +103,18 @@
 
   window.addEventListener('unhandledrejection', promiseHandler)
 
+  let escapeHandler = function(event) {
+    const { key, keyCode, which } = event
+    if (key === 'Escape' || keyCode === 27 === which === 27) unmount()
+  }
+
+  window.addEventListener('keydown', escapeHandler)
+
   if (module.hot) {
     module.hot.dispose(function() {
       unmount()
       window.removeEventListener('unhandledrejection', promiseHandler)
+      window.removeEventListener('keydown', escapeHandler)
     })
   }
 })()

From 60d9aa011f7111aed197dfd3865dbfae18253256 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 27 Nov 2016 11:39:22 -0500
Subject: [PATCH 006/120] Construct our own source if not available

---
 packages/react-dev-utils/failFast.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index f607356e65f..87e46bc7767 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -50,9 +50,23 @@
     const trace = document.createElement('div')
     applyStyles(trace, traceStyle)
     for (const frame of frames) {
+      const { functionName, fileName, lineNumber } = frame
       const { source } = frame
       const elem = document.createElement('div')
-      elem.appendChild(document.createTextNode(source))
+
+      // If source is available, use that (directly from browser) ...
+      if (source != null) {
+        elem.appendChild(document.createTextNode(`\t${source.trim()}`))
+      } else {
+        // We need to construct our own source since it wasn't given to us
+        // This StackFrame is most likely from sourcemaps which means
+        //  column numbers aren't available ... so let's only show line numbers.
+        if (functionName != null) {
+          elem.appendChild(document.createTextNode(`\tat ${functionName} (${fileName}:${lineNumber})`))
+        } else {
+          elem.appendChild(document.createTextNode(`\tat ${fileName}:${lineNumber}`))
+        }
+      }
       trace.appendChild(elem)
     }
     overlay.appendChild(trace)

From 57fa69d08d277b5ab605d6eac9957a47ac10ae0c Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 27 Nov 2016 11:47:29 -0500
Subject: [PATCH 007/120] Resolve sourcemaps for friendlier traces

---
 packages/react-dev-utils/failFast.js  | 53 ++++++++++++++++++++++-----
 packages/react-dev-utils/package.json |  1 +
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 87e46bc7767..c9198856274 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -1,5 +1,7 @@
 (function() {
   const ErrorStackParser = require('error-stack-parser')
+  const StackTraceGPS = require('stacktrace-gps')
+  const gps = new StackTraceGPS()
 
   const overlayStyle = {
     position: 'fixed',
@@ -82,16 +84,47 @@
   }
 
   function crash(error, unhandledRejection = false) {
-    let frames = []
-    try {
-      frames = ErrorStackParser.parse(error)
-    } catch (e) {
-    }
-    if (unhandledRejection) {
-      render(`Unhandled Rejection (${error.name})`, error.message, frames)
-    } else {
-      render(error.name, error.message, frames)
-    }
+    new Promise(function(resolve, reject) {
+      let frames = []
+
+      // Wrap all this up to make sure we have a fail case (external apis) ...
+      try {
+        // Error -> StackFrame[]
+        frames = ErrorStackParser.parse(error)
+        if (frames.length === 0) {
+          resolve(frames)
+          return
+        }
+
+        // Resolve StackFrames via sourcemaps and magic
+        const frames2 = []
+        let pending = frames.length
+        frames.forEach(function(frame, index) {
+          gps.pinpoint(frame).then(function(nFrame) {
+            frames2[index] = nFrame
+            if (--pending === 0) resolve(frames2)
+          }).catch(function() {
+            // Failed to pinpoint frame ... reuse old frame.
+            frames2[index] = frame
+            if (--pending === 0) resolve(frames2)
+          })
+        })
+      } catch (e) {
+        // Failed to resolve frames at one point or another (synchronous)
+        // Default to using `frames` which should contain the browser's stack
+        resolve(frames)
+      }
+    }).then(function(frames) {
+      if (unhandledRejection) {
+        render(`Unhandled Rejection (${error.name})`, error.message, frames)
+      } else {
+        render(error.name, error.message, frames)
+      }
+    }).catch(function() {
+      // This is another fail case (unlikely to happen)
+      // e.g. render(...) throws an error with provided arguments
+      render('Error', 'Unknown Error (failure to materialize)', [])
+    })
   }
 
   window.onerror = function(messageOrEvent, source, lineno, colno, error) {
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index fdf1b3dad5f..702d9e3db9a 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -31,6 +31,7 @@
     "html-entities": "1.2.0",
     "opn": "4.0.2",
     "sockjs-client": "1.0.3",
+    "stacktrace-gps": "2.4.4",
     "strip-ansi": "3.0.1"
   }
 }

From 1a7f838e34e4de6003217fd4f9f2b61e8521a570 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 27 Nov 2016 12:33:19 -0500
Subject: [PATCH 008/120] Allow error to be scrolled

---
 packages/react-dev-utils/failFast.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index c9198856274..ac3b2601e80 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -14,7 +14,8 @@
     'z-index': 1337,
     'font-family': 'Menlo, Consolas, monospace',
     color: 'rgb(232, 232, 232)',
-    'white-space': 'pre-wrap'
+    'white-space': 'pre-wrap',
+    overflow: 'auto'
   }
 
   const headerStyle = {

From 7442984f47f86dc4175bcaecc1c6d6f0dae8c75d Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 27 Nov 2016 13:50:23 -0500
Subject: [PATCH 009/120] Only utilize sourcemaps, not the magic. :(

---
 packages/react-dev-utils/failFast.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index ac3b2601e80..7093f8799be 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -101,11 +101,13 @@
         const frames2 = []
         let pending = frames.length
         frames.forEach(function(frame, index) {
-          gps.pinpoint(frame).then(function(nFrame) {
+          // Switched from pinpoint due to erratic bugs
+          // follow: https://github.com/stacktracejs/stacktrace-gps/issues/46
+          gps.getMappedLocation(frame).then(function(nFrame) {
             frames2[index] = nFrame
             if (--pending === 0) resolve(frames2)
           }).catch(function() {
-            // Failed to pinpoint frame ... reuse old frame.
+            // Failed to map frame ... reuse old frame.
             frames2[index] = frame
             if (--pending === 0) resolve(frames2)
           })

From c12c55bfa56b6673869cf5883fd583546e32d408 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 27 Nov 2016 14:32:03 -0500
Subject: [PATCH 010/120] Make view similar to React Native

---
 packages/react-dev-utils/failFast.js | 46 +++++++++++++++++++---------
 1 file changed, 31 insertions(+), 15 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 7093f8799be..e4415b4e7a3 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -19,10 +19,24 @@
   }
 
   const headerStyle = {
-    'font-size': 'larger',
+    'font-size': '1.5em',
     'font-weight': 'bold'
   }
 
+  const functionNameStyle = {
+    'margin-top': '1em',
+    'font-size': '1.2em'
+  }
+
+  const linkStyle = {
+    'font-size': '0.8em'
+  }
+
+  const anchorStyle = {
+    'text-decoration': 'none',
+    color: 'rgb(222, 222, 222)'
+  }
+
   const traceStyle = {
     'font-size': '1rem'
   }
@@ -54,22 +68,24 @@
     applyStyles(trace, traceStyle)
     for (const frame of frames) {
       const { functionName, fileName, lineNumber } = frame
-      const { source } = frame
+      const url = `${fileName}:${lineNumber}`
+
       const elem = document.createElement('div')
 
-      // If source is available, use that (directly from browser) ...
-      if (source != null) {
-        elem.appendChild(document.createTextNode(`\t${source.trim()}`))
-      } else {
-        // We need to construct our own source since it wasn't given to us
-        // This StackFrame is most likely from sourcemaps which means
-        //  column numbers aren't available ... so let's only show line numbers.
-        if (functionName != null) {
-          elem.appendChild(document.createTextNode(`\tat ${functionName} (${fileName}:${lineNumber})`))
-        } else {
-          elem.appendChild(document.createTextNode(`\tat ${fileName}:${lineNumber}`))
-        }
-      }
+      const elemFunctionName = document.createElement('div')
+      applyStyles(elemFunctionName, functionNameStyle)
+      elemFunctionName.appendChild(document.createTextNode(functionName || '(anonymous function)'))
+      elem.appendChild(elemFunctionName)
+
+      const elemLink = document.createElement('div')
+      applyStyles(elemLink, linkStyle)
+      const elemAnchor = document.createElement('a')
+      applyStyles(elemAnchor, anchorStyle)
+      elemAnchor.href = url
+      elemAnchor.appendChild(document.createTextNode(url))
+      elemLink.appendChild(elemAnchor)
+      elem.appendChild(elemLink)
+
       trace.appendChild(elem)
     }
     overlay.appendChild(trace)

From eece95721a6b94faaa92b35e1e4547d8c3bea4de Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 27 Nov 2016 14:37:51 -0500
Subject: [PATCH 011/120] Fix an uncaught syntax error

---
 packages/react-dev-utils/failFast.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index e4415b4e7a3..2c6c2a2adab 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -171,7 +171,7 @@
 
   let escapeHandler = function(event) {
     const { key, keyCode, which } = event
-    if (key === 'Escape' || keyCode === 27 === which === 27) unmount()
+    if (key === 'Escape' || keyCode === 27 || which === 27) unmount()
   }
 
   window.addEventListener('keydown', escapeHandler)

From 9ffbefb31c0143119bfc4ad1c098179051325758 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 27 Nov 2016 14:50:16 -0500
Subject: [PATCH 012/120] Add workaround for Firefox 50

---
 packages/react-dev-utils/failFast.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 2c6c2a2adab..4a92a7a45bd 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -43,7 +43,9 @@
 
   function applyStyles(element, styles) {
     element.setAttribute('style', '')
-    for (const key in styles) {
+    // Firefox can't handle const due to non-compliant implementation
+    // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
+    for (let key in styles) {
       if (!styles.hasOwnProperty(key)) continue
       element.style[key] = styles[key].toString()
     }
@@ -66,7 +68,9 @@
     // Show trace
     const trace = document.createElement('div')
     applyStyles(trace, traceStyle)
-    for (const frame of frames) {
+    // Firefox can't handle const due to non-compliant implementation
+    // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
+    for (let frame of frames) {
       const { functionName, fileName, lineNumber } = frame
       const url = `${fileName}:${lineNumber}`
 

From d0b534d845720a089eadcc321fddac13bb8d7631 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 27 Nov 2016 15:42:34 -0500
Subject: [PATCH 013/120] Add a hint for closing the prompt

---
 packages/react-dev-utils/failFast.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 4a92a7a45bd..cf2989f35aa 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -18,6 +18,13 @@
     overflow: 'auto'
   }
 
+  const exitStyle = {
+    position: 'fixed',
+    top: '1em',
+    right: '1em',
+    'font-size': '0.8em'
+  }
+
   const headerStyle = {
     'font-size': '1.5em',
     'font-weight': 'bold'
@@ -44,7 +51,9 @@
   function applyStyles(element, styles) {
     element.setAttribute('style', '')
     // Firefox can't handle const due to non-compliant implementation
+    // Revisit Jan 2016
     // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1101653
     for (let key in styles) {
       if (!styles.hasOwnProperty(key)) continue
       element.style[key] = styles[key].toString()
@@ -59,6 +68,11 @@
     const overlay = document.createElement('div')
     applyStyles(overlay, overlayStyle)
 
+    const exit = document.createElement('div')
+    exit.appendChild(document.createTextNode('press [escape] to close this prompt'))
+    applyStyles(exit, exitStyle)
+    overlay.appendChild(exit)
+
     // Create header
     const header = document.createElement('div')
     applyStyles(header, headerStyle)
@@ -69,7 +83,9 @@
     const trace = document.createElement('div')
     applyStyles(trace, traceStyle)
     // Firefox can't handle const due to non-compliant implementation
+    // Revisit Jan 2016
     // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
+    // https://bugzilla.mozilla.org/show_bug.cgi?id=1101653
     for (let frame of frames) {
       const { functionName, fileName, lineNumber } = frame
       const url = `${fileName}:${lineNumber}`

From 91de3e784bb3f19d3c1a936bf83377eec11e68c3 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 27 Nov 2016 16:37:21 -0500
Subject: [PATCH 014/120] Multiple error support When there's multiple errors,
 simply state that there are more instead of re-rendering

---
 packages/react-dev-utils/failFast.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index cf2989f35aa..d3acc133802 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -61,9 +61,26 @@
   }
 
   let overlayReference = null
+  let additionalCount = 0
+
+  function renderAdditional() {
+    ++additionalCount
+    const title = overlayReference.childNodes[1]
+    const children = title.childNodes
+    const text = document.createTextNode(` (+${additionalCount} more)`)
+    if (children.length < 2) {
+      title.appendChild(text)
+    } else {
+      title.removeChild(children[children.length - 1])
+      title.appendChild(text)
+    }
+  }
 
   function render(name, message, frames) {
-    if (overlayReference !== null) unmount()
+    if (overlayReference !== null) {
+      renderAdditional()
+      return
+    }
     // Create container
     const overlay = document.createElement('div')
     applyStyles(overlay, overlayStyle)
@@ -112,6 +129,7 @@
 
     // Mount
     document.body.appendChild(overlayReference = overlay)
+    additionalCount = 0
   }
 
   function unmount() {

From 69b937139f2254692e9b9fec648f2ba3ca01eba1 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Mon, 28 Nov 2016 18:32:27 -0500
Subject: [PATCH 015/120] Log any renderer error

---
 packages/react-dev-utils/failFast.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index d3acc133802..9971e290b0a 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -177,9 +177,10 @@
       } else {
         render(error.name, error.message, frames)
       }
-    }).catch(function() {
+    }).catch(function(e) {
       // This is another fail case (unlikely to happen)
       // e.g. render(...) throws an error with provided arguments
+      console.log('Red box renderer error:', e)
       render('Error', 'Unknown Error (failure to materialize)', [])
     })
   }

From 370284a441ef9a218166fe0af61f21438a8847d3 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Mon, 28 Nov 2016 18:32:45 -0500
Subject: [PATCH 016/120] Dim node_modules in display

---
 packages/react-dev-utils/failFast.js | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 9971e290b0a..34a44ce7d3b 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -41,13 +41,18 @@
 
   const anchorStyle = {
     'text-decoration': 'none',
-    color: 'rgb(222, 222, 222)'
+    color: 'rgba(255, 255, 255, 0.6)'
   }
 
   const traceStyle = {
     'font-size': '1rem'
   }
 
+  const depStyle = {
+    'font-size': '1em',
+    color: 'rgba(255, 255, 255, 0.6)'
+  }
+
   function applyStyles(element, styles) {
     element.setAttribute('style', '')
     // Firefox can't handle const due to non-compliant implementation
@@ -110,7 +115,11 @@
       const elem = document.createElement('div')
 
       const elemFunctionName = document.createElement('div')
-      applyStyles(elemFunctionName, functionNameStyle)
+      if (url.indexOf('/~/') !== -1) {
+        applyStyles(elemFunctionName, Object.assign({}, functionNameStyle, depStyle))
+      } else {
+        applyStyles(elemFunctionName, functionNameStyle)
+      }
       elemFunctionName.appendChild(document.createTextNode(functionName || '(anonymous function)'))
       elem.appendChild(elemFunctionName)
 

From c0300bef6748db4664cabb69cd27ae55571360d6 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Mon, 28 Nov 2016 18:35:19 -0500
Subject: [PATCH 017/120] Override chrome stack trace limit

---
 packages/react-dev-utils/failFast.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 34a44ce7d3b..2992ba0a675 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -224,6 +224,10 @@
 
   window.addEventListener('keydown', escapeHandler)
 
+  try {
+    Error.stackTraceLimit = 50
+  } catch (e) { }
+
   if (module.hot) {
     module.hot.dispose(function() {
       unmount()

From 74838e37b0b2567a8f2a2bd39c788d701c0b25b6 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Mon, 28 Nov 2016 20:17:09 -0500
Subject: [PATCH 018/120] Magic: show me some source!

---
 packages/react-dev-utils/failFast.js  | 89 ++++++++++++++-------------
 packages/react-dev-utils/package.json |  3 +-
 2 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 2992ba0a675..f29d92b2f6e 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -1,7 +1,7 @@
 (function() {
-  const ErrorStackParser = require('error-stack-parser')
-  const StackTraceGPS = require('stacktrace-gps')
-  const gps = new StackTraceGPS()
+  const StackTraceResolve = require('stacktrace-resolve').default
+
+  const CONTEXT_SIZE = 4
 
   const overlayStyle = {
     position: 'fixed',
@@ -9,7 +9,7 @@
     top: '0px', left: '0px',
     bottom: '0px', right: '0px',
     width: '100vw', height: '100vh',
-    'background-color': 'rgb(200, 0, 0)',
+    'background-color': 'rgb(150, 0, 0)',
     padding: '2rem',
     'z-index': 1337,
     'font-family': 'Menlo, Consolas, monospace',
@@ -81,7 +81,7 @@
     }
   }
 
-  function render(name, message, frames) {
+  function render(name, message, resolvedFrames) {
     if (overlayReference !== null) {
       renderAdditional()
       return
@@ -108,14 +108,28 @@
     // Revisit Jan 2016
     // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1101653
-    for (let frame of frames) {
-      const { functionName, fileName, lineNumber } = frame
-      const url = `${fileName}:${lineNumber}`
+    let index = 0
+    for (let frame of resolvedFrames) {
+      const {
+        functionName,
+        fileName, lineNumber, columnNumber,
+        scriptLines,
+        sourceFileName, sourceLineNumber, sourceColumnNumber,
+        sourceLines
+      } = frame
+
+      let url
+      if (sourceFileName) {
+        url = sourceFileName + ':' + sourceLineNumber + ':' + sourceColumnNumber
+      } else {
+        url = fileName + ':' + lineNumber + ':' + columnNumber
+      }
+      const internalUrl = isInternalFile(url)
 
       const elem = document.createElement('div')
 
       const elemFunctionName = document.createElement('div')
-      if (url.indexOf('/~/') !== -1) {
+      if (internalUrl) {
         applyStyles(elemFunctionName, Object.assign({}, functionNameStyle, depStyle))
       } else {
         applyStyles(elemFunctionName, functionNameStyle)
@@ -132,7 +146,22 @@
       elemLink.appendChild(elemAnchor)
       elem.appendChild(elemLink)
 
+      if (!internalUrl && sourceLines.length !== 0) {
+        const pre = document.createElement('pre')
+        for (let line of sourceLines) {
+          const { context, text, line: fileLine } = line
+          let modSource = (Array(11).join(' ') + fileLine).slice(-6) + (context ? '   | ' : ' > | ')
+          modSource += text
+          const lineElem = document.createElement('div')
+          lineElem.appendChild(document.createTextNode(modSource))
+          pre.appendChild(lineElem)
+        }
+        elem.appendChild(pre)
+      }
+
       trace.appendChild(elem)
+
+      ++index
     }
     overlay.appendChild(trace)
 
@@ -147,44 +176,16 @@
     overlayReference = null
   }
 
-  function crash(error, unhandledRejection = false) {
-    new Promise(function(resolve, reject) {
-      let frames = []
-
-      // Wrap all this up to make sure we have a fail case (external apis) ...
-      try {
-        // Error -> StackFrame[]
-        frames = ErrorStackParser.parse(error)
-        if (frames.length === 0) {
-          resolve(frames)
-          return
-        }
+  function isInternalFile(url) {
+    return url.indexOf('/~/') !== -1 || url.trim().indexOf(' ') !== -1
+  }
 
-        // Resolve StackFrames via sourcemaps and magic
-        const frames2 = []
-        let pending = frames.length
-        frames.forEach(function(frame, index) {
-          // Switched from pinpoint due to erratic bugs
-          // follow: https://github.com/stacktracejs/stacktrace-gps/issues/46
-          gps.getMappedLocation(frame).then(function(nFrame) {
-            frames2[index] = nFrame
-            if (--pending === 0) resolve(frames2)
-          }).catch(function() {
-            // Failed to map frame ... reuse old frame.
-            frames2[index] = frame
-            if (--pending === 0) resolve(frames2)
-          })
-        })
-      } catch (e) {
-        // Failed to resolve frames at one point or another (synchronous)
-        // Default to using `frames` which should contain the browser's stack
-        resolve(frames)
-      }
-    }).then(function(frames) {
+  function crash(error, unhandledRejection = false) {
+    StackTraceResolve(error, CONTEXT_SIZE).then(function(resolvedFrames) {
       if (unhandledRejection) {
-        render(`Unhandled Rejection (${error.name})`, error.message, frames)
+        render(`Unhandled Rejection (${error.name})`, error.message, resolvedFrames)
       } else {
-        render(error.name, error.message, frames)
+        render(error.name, error.message, resolvedFrames)
       }
     }).catch(function(e) {
       // This is another fail case (unlikely to happen)
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 702d9e3db9a..0ec17dbc093 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -26,12 +26,11 @@
   "dependencies": {
     "ansi-html": "0.0.5",
     "chalk": "1.1.3",
-    "error-stack-parser": "1.3.6",
     "escape-string-regexp": "1.0.5",
     "html-entities": "1.2.0",
     "opn": "4.0.2",
     "sockjs-client": "1.0.3",
-    "stacktrace-gps": "2.4.4",
+    "stacktrace-resolve": "0.1.1",
     "strip-ansi": "3.0.1"
   }
 }

From 1fc583ebdbe075cf5d703d7712a7fc2454583904 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 00:26:21 -0500
Subject: [PATCH 019/120] Add ability to toggle internal calls

---
 packages/react-dev-utils/failFast.js | 29 +++++++++++++++++++++++-----
 1 file changed, 24 insertions(+), 5 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index f29d92b2f6e..b9ef7f3400f 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -22,7 +22,8 @@
     position: 'fixed',
     top: '1em',
     right: '1em',
-    'font-size': '0.8em'
+    'font-size': '0.8em',
+    'text-align': 'right'
   }
 
   const headerStyle = {
@@ -66,7 +67,17 @@
   }
 
   let overlayReference = null
+  let errorCache = null
   let additionalCount = 0
+  let internalDisabled = true
+
+  function toggleInternal() {
+    internalDisabled = !internalDisabled
+    if (errorCache != null) {
+      unmount()
+      crash(errorCache)
+    }
+  }
 
   function renderAdditional() {
     ++additionalCount
@@ -81,7 +92,7 @@
     }
   }
 
-  function render(name, message, resolvedFrames) {
+  function render(error, name, message, resolvedFrames) {
     if (overlayReference !== null) {
       renderAdditional()
       return
@@ -92,6 +103,8 @@
 
     const exit = document.createElement('div')
     exit.appendChild(document.createTextNode('press [escape] to close this prompt'))
+    exit.appendChild(document.createElement('br'))
+    exit.appendChild(document.createTextNode('press [ = ] to show internal calls'))
     applyStyles(exit, exitStyle)
     overlay.appendChild(exit)
 
@@ -125,6 +138,10 @@
         url = fileName + ':' + lineNumber + ':' + columnNumber
       }
       const internalUrl = isInternalFile(url)
+      if (internalUrl && internalDisabled) {
+        trace.appendChild(document.createTextNode('... '))
+        continue
+      }
 
       const elem = document.createElement('div')
 
@@ -167,6 +184,7 @@
 
     // Mount
     document.body.appendChild(overlayReference = overlay)
+    errorCache = error
     additionalCount = 0
   }
 
@@ -183,15 +201,15 @@
   function crash(error, unhandledRejection = false) {
     StackTraceResolve(error, CONTEXT_SIZE).then(function(resolvedFrames) {
       if (unhandledRejection) {
-        render(`Unhandled Rejection (${error.name})`, error.message, resolvedFrames)
+        render(error, `Unhandled Rejection (${error.name})`, error.message, resolvedFrames)
       } else {
-        render(error.name, error.message, resolvedFrames)
+        render(error, error.name, error.message, resolvedFrames)
       }
     }).catch(function(e) {
       // This is another fail case (unlikely to happen)
       // e.g. render(...) throws an error with provided arguments
       console.log('Red box renderer error:', e)
-      render('Error', 'Unknown Error (failure to materialize)', [])
+      render(null, 'Error', 'Unknown Error (failure to materialize)', [])
     })
   }
 
@@ -221,6 +239,7 @@
   let escapeHandler = function(event) {
     const { key, keyCode, which } = event
     if (key === 'Escape' || keyCode === 27 || which === 27) unmount()
+    else if (key === '+' || key === '=' || keyCode === 187 || which === 187) toggleInternal()
   }
 
   window.addEventListener('keydown', escapeHandler)

From 2fad81b62708c7adc6b42a074ecd942c0d14c119 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 00:28:29 -0500
Subject: [PATCH 020/120] Switch text from show -> hide

---
 packages/react-dev-utils/failFast.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index b9ef7f3400f..a3b45a8b819 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -104,7 +104,7 @@
     const exit = document.createElement('div')
     exit.appendChild(document.createTextNode('press [escape] to close this prompt'))
     exit.appendChild(document.createElement('br'))
-    exit.appendChild(document.createTextNode('press [ = ] to show internal calls'))
+    exit.appendChild(document.createTextNode(`press [ = ] to ${internalDisabled ? 'show' : 'hide'} internal calls`))
     applyStyles(exit, exitStyle)
     overlay.appendChild(exit)
 

From c4e1cc477a75a8b2812b03b109c0924f84504580 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 12:30:03 -0500
Subject: [PATCH 021/120] Change color scheme to something easier on the eyes

---
 packages/react-dev-utils/failFast.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index a3b45a8b819..56af0d839cd 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -9,11 +9,11 @@
     top: '0px', left: '0px',
     bottom: '0px', right: '0px',
     width: '100vw', height: '100vh',
-    'background-color': 'rgb(150, 0, 0)',
+    'background-color': '#fafafa',
     padding: '2rem',
     'z-index': 1337,
     'font-family': 'Menlo, Consolas, monospace',
-    color: 'rgb(232, 232, 232)',
+    color: '#293238',
     'white-space': 'pre-wrap',
     overflow: 'auto'
   }
@@ -28,7 +28,8 @@
 
   const headerStyle = {
     'font-size': '1.5em',
-    'font-weight': 'bold'
+    'font-weight': 'bold',
+    color: '#ce1126'
   }
 
   const functionNameStyle = {
@@ -42,7 +43,7 @@
 
   const anchorStyle = {
     'text-decoration': 'none',
-    color: 'rgba(255, 255, 255, 0.6)'
+    color: '#878e91'
   }
 
   const traceStyle = {
@@ -51,7 +52,7 @@
 
   const depStyle = {
     'font-size': '1em',
-    color: 'rgba(255, 255, 255, 0.6)'
+    color: '#878e91'
   }
 
   function applyStyles(element, styles) {

From 124ccc89a03604f02a623a159466cb5bef9b30e9 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 12:33:32 -0500
Subject: [PATCH 022/120] Change UI to be friendlier (thanks @nicinabox)
 https://github.com/facebookincubator/create-react-app/pull/1101#issuecomment-263621057
 https://github.com/facebookincubator/create-react-app/pull/1101#issuecomment-263636171

---
 packages/react-dev-utils/failFast.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 56af0d839cd..14d91550563 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -6,9 +6,10 @@
   const overlayStyle = {
     position: 'fixed',
     'box-sizing': 'border-box',
-    top: '0px', left: '0px',
-    bottom: '0px', right: '0px',
-    width: '100vw', height: '100vh',
+    top: '1em', left: '1em',
+    bottom: '1em', right: '1em',
+    width: 'calc(100% - 2em)', height: 'calc(100% - 2em)',
+    'border-radius': '1em',
     'background-color': '#fafafa',
     padding: '2rem',
     'z-index': 1337,
@@ -19,7 +20,7 @@
   }
 
   const exitStyle = {
-    position: 'fixed',
+    position: 'absolute',
     top: '1em',
     right: '1em',
     'font-size': '0.8em',

From c639d816d4166976ee9ad66c500c3ea64f8d3489 Mon Sep 17 00:00:00 2001
From: Nic Aitch <nic@nicinabox.com>
Date: Tue, 29 Nov 2016 13:08:20 -0600
Subject: [PATCH 023/120] Update styles

---
 packages/react-dev-utils/failFast.js | 58 +++++++++++++++++++---------
 1 file changed, 40 insertions(+), 18 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 14d91550563..95b93758911 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -3,34 +3,47 @@
 
   const CONTEXT_SIZE = 4
 
+  const black = '#293238'
+  const darkGray = '#878e91'
+  const lightGray = '#fafafa'
+  const red = '#ce1126'
+
   const overlayStyle = {
     position: 'fixed',
     'box-sizing': 'border-box',
     top: '1em', left: '1em',
     bottom: '1em', right: '1em',
     width: 'calc(100% - 2em)', height: 'calc(100% - 2em)',
-    'border-radius': '1em',
-    'background-color': '#fafafa',
-    padding: '2rem',
+    'border-radius': '3px',
+    'background-color': lightGray,
+    padding: '4rem',
     'z-index': 1337,
-    'font-family': 'Menlo, Consolas, monospace',
-    color: '#293238',
+    'font-family': 'Consolas, Menlo, monospace',
+    color: black,
     'white-space': 'pre-wrap',
-    overflow: 'auto'
+    overflow: 'auto',
+    'box-shadow': '0 0 6px 0 rgba(0, 0, 0, 0.5)',
+    'line-height': 1.5,
+  }
+
+  const containerStyle = {
+    'max-width': '50%',
+    'min-width': '600px',
+    margin: '0 auto',
   }
 
-  const exitStyle = {
-    position: 'absolute',
-    top: '1em',
-    right: '1em',
+  const hintsStyle = {
     'font-size': '0.8em',
-    'text-align': 'right'
+    'margin-top': '-3em',
+    'margin-bottom': '3em',
+    'text-align': 'right',
+    color: darkGray
   }
 
   const headerStyle = {
-    'font-size': '1.5em',
+    'font-size': '1.7em',
     'font-weight': 'bold',
-    color: '#ce1126'
+    color: red
   }
 
   const functionNameStyle = {
@@ -39,21 +52,30 @@
   }
 
   const linkStyle = {
-    'font-size': '0.8em'
+    'font-size': '0.9em',
   }
 
   const anchorStyle = {
     'text-decoration': 'none',
-    color: '#878e91'
+    color: darkGray
   }
 
   const traceStyle = {
-    'font-size': '1rem'
+    'font-size': '1em'
   }
 
   const depStyle = {
-    'font-size': '1em',
-    color: '#878e91'
+    'font-size': '1.2em',
+    color: darkGray
+  }
+
+  const preStyle = {
+    'font-size': '1.1em',
+    margin: '1.5em 0',
+  }
+
+  const contextStyle = {
+    'background-color': '#FBF5B4'
   }
 
   function applyStyles(element, styles) {

From 729ba96c0e3d2e1c30622c1da49f8a9ae77273f3 Mon Sep 17 00:00:00 2001
From: Nic Aitch <nic@nicinabox.com>
Date: Tue, 29 Nov 2016 13:08:43 -0600
Subject: [PATCH 024/120] Add container inside overlay

---
 packages/react-dev-utils/failFast.js | 22 +++++++++++++---------
 1 file changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 95b93758911..8c36578c624 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -121,22 +121,26 @@
       renderAdditional()
       return
     }
-    // Create container
+    // Create overlay
     const overlay = document.createElement('div')
     applyStyles(overlay, overlayStyle)
 
-    const exit = document.createElement('div')
-    exit.appendChild(document.createTextNode('press [escape] to close this prompt'))
-    exit.appendChild(document.createElement('br'))
-    exit.appendChild(document.createTextNode(`press [ = ] to ${internalDisabled ? 'show' : 'hide'} internal calls`))
-    applyStyles(exit, exitStyle)
-    overlay.appendChild(exit)
+    const hints = document.createElement('div')
+    hints.appendChild(document.createTextNode(`[=] ${internalDisabled ? 'Show' : 'Hide'} internal calls`))
+    hints.appendChild(document.createTextNode('\t\t'))
+    hints.appendChild(document.createTextNode('[escape] Close'))
+    applyStyles(hints, hintsStyle)
+    overlay.appendChild(hints)
+
+    const container = document.createElement('div')
+    applyStyles(container, containerStyle)
+    overlay.appendChild(container)
 
     // Create header
     const header = document.createElement('div')
     applyStyles(header, headerStyle)
     header.appendChild(document.createTextNode(`${name}: ${message}`))
-    overlay.appendChild(header)
+    container.appendChild(header)
 
     // Show trace
     const trace = document.createElement('div')
@@ -204,7 +208,7 @@
 
       ++index
     }
-    overlay.appendChild(trace)
+    container.appendChild(trace)
 
     // Mount
     document.body.appendChild(overlayReference = overlay)

From 67590d735e6f79f188302c1b43f48f89c9daee26 Mon Sep 17 00:00:00 2001
From: Nic Aitch <nic@nicinabox.com>
Date: Tue, 29 Nov 2016 13:09:11 -0600
Subject: [PATCH 025/120] Apply pre style

---
 packages/react-dev-utils/failFast.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 8c36578c624..fd0afdc9ae4 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -193,6 +193,8 @@
 
       if (!internalUrl && sourceLines.length !== 0) {
         const pre = document.createElement('pre')
+        applyStyles(pre, preStyle)
+
         for (let line of sourceLines) {
           const { context, text, line: fileLine } = line
           let modSource = (Array(11).join(' ') + fileLine).slice(-6) + (context ? '   | ' : ' > | ')

From d5220f6784adf7d02c39281869721c9ae8d26299 Mon Sep 17 00:00:00 2001
From: Nic Aitch <nic@nicinabox.com>
Date: Tue, 29 Nov 2016 13:09:23 -0600
Subject: [PATCH 026/120] Add line highlight

---
 packages/react-dev-utils/failFast.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index fd0afdc9ae4..7c22e105d1b 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -200,6 +200,8 @@
           let modSource = (Array(11).join(' ') + fileLine).slice(-6) + (context ? '   | ' : ' > | ')
           modSource += text
           const lineElem = document.createElement('div')
+          if (!context) applyStyles(lineElem, contextStyle)
+
           lineElem.appendChild(document.createTextNode(modSource))
           pre.appendChild(lineElem)
         }

From e1d37f9243ea2c4421ea0563837343c7d781d22d Mon Sep 17 00:00:00 2001
From: Nic Aitch <nic@nicinabox.com>
Date: Tue, 29 Nov 2016 14:13:56 -0600
Subject: [PATCH 027/120] Add omitted frames ui

---
 packages/react-dev-utils/failFast.js | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 7c22e105d1b..b9c92636c6c 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -78,6 +78,12 @@
     'background-color': '#FBF5B4'
   }
 
+  const omittedFramesStyle = {
+    color: black,
+    'margin': '1.5em 0',
+    'text-align': 'center'
+  }
+
   function applyStyles(element, styles) {
     element.setAttribute('style', '')
     // Firefox can't handle const due to non-compliant implementation
@@ -150,6 +156,7 @@
     // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1101653
     let index = 0
+    let omittedFramesCount = 0
     for (let frame of resolvedFrames) {
       const {
         functionName,
@@ -165,12 +172,21 @@
       } else {
         url = fileName + ':' + lineNumber + ':' + columnNumber
       }
+
       const internalUrl = isInternalFile(url)
       if (internalUrl && internalDisabled) {
-        trace.appendChild(document.createTextNode('... '))
+        omittedFramesCount++
         continue
       }
 
+      if (omittedFramesCount) {
+        const omittedFrames = document.createElement('div')
+        omittedFrames.appendChild(document.createTextNode(`---[ ${omittedFramesCount} internal calls hidden ]---`))
+        applyStyles(omittedFrames, omittedFramesStyle)
+        trace.appendChild(omittedFrames)
+        omittedFramesCount = 0
+      }
+
       const elem = document.createElement('div')
 
       const elemFunctionName = document.createElement('div')

From e634d6e1d7a521898dbeb7acf67b52d3f843dc0d Mon Sep 17 00:00:00 2001
From: Nic Aitch <nic@nicinabox.com>
Date: Tue, 29 Nov 2016 14:41:14 -0600
Subject: [PATCH 028/120] Move yellow to var

---
 packages/react-dev-utils/failFast.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index b9c92636c6c..8342a36c8d1 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -7,6 +7,7 @@
   const darkGray = '#878e91'
   const lightGray = '#fafafa'
   const red = '#ce1126'
+  const yellow = '#FBF5B4'
 
   const overlayStyle = {
     position: 'fixed',
@@ -75,7 +76,7 @@
   }
 
   const contextStyle = {
-    'background-color': '#FBF5B4'
+    'background-color': yellow
   }
 
   const omittedFramesStyle = {

From f1ec77b6dc589ecf98463b86dad20c48603ae322 Mon Sep 17 00:00:00 2001
From: Nic Aitch <nic@nicinabox.com>
Date: Tue, 29 Nov 2016 14:41:26 -0600
Subject: [PATCH 029/120] Do all function names in black

---
 packages/react-dev-utils/failFast.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 8342a36c8d1..b08c58abe3e 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -67,7 +67,6 @@
 
   const depStyle = {
     'font-size': '1.2em',
-    color: darkGray
   }
 
   const preStyle = {

From 965cf91c00c2e6f4c5d6c575f1f4233f1e3d82e7 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 16:29:50 -0500
Subject: [PATCH 030/120] Adapt container based on screen size

---
 packages/react-dev-utils/failFast.css | 24 ++++++++++++++++++++++++
 packages/react-dev-utils/failFast.js  | 12 ++++--------
 2 files changed, 28 insertions(+), 8 deletions(-)
 create mode 100644 packages/react-dev-utils/failFast.css

diff --git a/packages/react-dev-utils/failFast.css b/packages/react-dev-utils/failFast.css
new file mode 100644
index 00000000000..b7b79de6772
--- /dev/null
+++ b/packages/react-dev-utils/failFast.css
@@ -0,0 +1,24 @@
+.cra-container {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 768px) {
+  .cra-container {
+    width: 750px;
+  }
+}
+
+@media (min-width: 992px) {
+  .cra-container {
+    width: 970px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .cra-container {
+    width: 1170px;
+  }
+}
diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index b08c58abe3e..9e6a56ad3b9 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -1,4 +1,6 @@
 (function() {
+  require('./failFast.css')
+
   const StackTraceResolve = require('stacktrace-resolve').default
 
   const CONTEXT_SIZE = 4
@@ -7,7 +9,7 @@
   const darkGray = '#878e91'
   const lightGray = '#fafafa'
   const red = '#ce1126'
-  const yellow = '#FBF5B4'
+  const yellow = '#fbf5b4'
 
   const overlayStyle = {
     position: 'fixed',
@@ -27,12 +29,6 @@
     'line-height': 1.5,
   }
 
-  const containerStyle = {
-    'max-width': '50%',
-    'min-width': '600px',
-    margin: '0 auto',
-  }
-
   const hintsStyle = {
     'font-size': '0.8em',
     'margin-top': '-3em',
@@ -139,7 +135,7 @@
     overlay.appendChild(hints)
 
     const container = document.createElement('div')
-    applyStyles(container, containerStyle)
+    container.className = 'cra-container'
     overlay.appendChild(container)
 
     // Create header

From a3fdf1334b4036becb8eddfae65fcc2e75a4e123 Mon Sep 17 00:00:00 2001
From: Eric Koslow <ekoslow@gmail.com>
Date: Tue, 29 Nov 2016 13:45:02 -0800
Subject: [PATCH 031/120] Extract ansiHTML

Use base16-github theme
---
 packages/react-dev-utils/ansiHTML.js          | 37 +++++++++++++++++++
 .../react-dev-utils/webpackHotDevClient.js    | 25 ++-----------
 2 files changed, 41 insertions(+), 21 deletions(-)
 create mode 100644 packages/react-dev-utils/ansiHTML.js

diff --git a/packages/react-dev-utils/ansiHTML.js b/packages/react-dev-utils/ansiHTML.js
new file mode 100644
index 00000000000..e85f5d91296
--- /dev/null
+++ b/packages/react-dev-utils/ansiHTML.js
@@ -0,0 +1,37 @@
+var ansiHTML = require('ansi-html');
+// Color scheme inspired by https://chriskempson.github.io/base16/css/base16-github.css
+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 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 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 base0D = '795da3'; // Functions, Methods, Attribute IDs, Headings
+var base0E = 'a71d5d'; // 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
+// See: https://github.com/babel/babel/blob/e86f62b304d280d0bab52c38d61842b853848ba6/packages/babel-code-frame/src/index.js#L9-L22
+var colors = {
+  reset: [base05, 'transparent'],
+  black: base05,
+  red: base08, /* marker, bg-invalid */
+  green: base0B, /* string */
+  yellow: base08, /* capitalized, jsx_tag, punctuator */
+  blue: base0C,
+  magenta: base0C, /* regex */
+  cyan: base0E, /* keyword */
+  gray: base03, /* comment, gutter */
+  lightgrey: base01,
+  darkgrey: base03
+};
+ansiHTML.setColors(colors);
+
+module.exports = ansiHTML;
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index f15fd06f291..9503a91bf1e 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -16,29 +16,14 @@
 // that looks similar to our console output. The error overlay is inspired by:
 // https://github.com/glenjamin/webpack-hot-middleware
 
-var ansiHTML = require('ansi-html');
 var SockJS = require('sockjs-client');
 var stripAnsi = require('strip-ansi');
 var url = require('url');
 var formatWebpackMessages = require('./formatWebpackMessages');
 var Entities = require('html-entities').AllHtmlEntities;
+var ansiHTML = require('./ansiHTML');
 var entities = new Entities();
 
-// Color scheme inspired by https://github.com/glenjamin/webpack-hot-middleware
-var colors = {
-  reset: ['transparent', 'transparent'],
-  black: '181818',
-  red: 'E36049',
-  green: 'B3CB74',
-  yellow: 'FFD080',
-  blue: '7CAFC2',
-  magenta: '7FACCA',
-  cyan: 'C3C2EF',
-  lightgrey: 'EBE7E3',
-  darkgrey: '6D7891'
-};
-ansiHTML.setColors(colors);
-
 function createOverlayIframe(onIframeLoad) {
   var iframe = document.createElement('iframe');
   iframe.id = 'react-dev-utils-webpack-hot-dev-client-overlay';
@@ -67,8 +52,8 @@ function addOverlayDivTo(iframe) {
   div.style.bottom = 0;
   div.style.width = '100vw';
   div.style.height = '100vh';
-  div.style.backgroundColor = 'black';
-  div.style.color = '#E8E8E8';
+  div.style.backgroundColor = '#fff';
+  div.style.color = '#333';
   div.style.fontFamily = 'Menlo, Consolas, monospace';
   div.style.fontSize = 'large';
   div.style.padding = '2rem';
@@ -116,9 +101,7 @@ function showErrorOverlay(message) {
   ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
     // Make it look similar to our terminal.
     overlayDiv.innerHTML =
-      '<span style="color: #' +
-      colors.red +
-      '">Failed to compile.</span><br><br>' +
+      '<span style="color: #E36049">Failed to compile.</span><br><br>' +
       ansiHTML(entities.encode(message));
   });
 }

From 4a2b460fe02db794064203d88572985cf0e91707 Mon Sep 17 00:00:00 2001
From: Eric Koslow <ekoslow@gmail.com>
Date: Tue, 29 Nov 2016 13:45:37 -0800
Subject: [PATCH 032/120] Linting

---
 packages/react-dev-utils/failFast.js            | 5 +----
 packages/react-dev-utils/webpackHotDevClient.js | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 9e6a56ad3b9..25cb920a1f3 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -151,13 +151,12 @@
     // Revisit Jan 2016
     // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1101653
-    let index = 0
     let omittedFramesCount = 0
     for (let frame of resolvedFrames) {
       const {
         functionName,
         fileName, lineNumber, columnNumber,
-        scriptLines,
+        _scriptLines,
         sourceFileName, sourceLineNumber, sourceColumnNumber,
         sourceLines
       } = frame
@@ -221,8 +220,6 @@
       }
 
       trace.appendChild(elem)
-
-      ++index
     }
     container.appendChild(trace)
 
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 9503a91bf1e..5c23dcd7e5d 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -106,7 +106,7 @@ function showErrorOverlay(message) {
   });
 }
 
-function destroyErrorOverlay() {  
+function destroyErrorOverlay() {
   if (!overlayDiv) {
     // It is not there in the first place.
     return;

From 6c265953c1a83489c5d528208cf689fc48caa787 Mon Sep 17 00:00:00 2001
From: Eric Koslow <ekoslow@gmail.com>
Date: Tue, 29 Nov 2016 13:45:48 -0800
Subject: [PATCH 033/120] Add syntax highlighting of errors

---
 packages/react-dev-utils/failFast.js  | 52 ++++++++++++++-------------
 packages/react-dev-utils/package.json |  1 +
 packages/react-scripts/config/env.js  |  2 ++
 3 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 25cb920a1f3..08e126916e1 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -1,15 +1,18 @@
+// Use the same highlighter as syntax errors in console
+const codeFrame = require('babel-code-frame');
+const ansiHTML = require('./ansiHTML');
+
 (function() {
   require('./failFast.css')
 
   const StackTraceResolve = require('stacktrace-resolve').default
 
-  const CONTEXT_SIZE = 4
+  const CONTEXT_SIZE = Infinity
 
   const black = '#293238'
   const darkGray = '#878e91'
   const lightGray = '#fafafa'
   const red = '#ce1126'
-  const yellow = '#fbf5b4'
 
   const overlayStyle = {
     position: 'fixed',
@@ -65,21 +68,21 @@
     'font-size': '1.2em',
   }
 
-  const preStyle = {
-    'font-size': '1.1em',
-    margin: '1.5em 0',
-  }
-
-  const contextStyle = {
-    'background-color': yellow
-  }
-
   const omittedFramesStyle = {
     color: black,
     'margin': '1.5em 0',
     'text-align': 'center'
   }
 
+  const preStyle = {
+    display: 'block',
+    padding: '0.5em',
+    margin: '1.5em 0',
+    'overflow-x': 'auto',
+    background: '#fff',
+    'font-size': '1.1em'
+  };
+
   function applyStyles(element, styles) {
     element.setAttribute('style', '')
     // Firefox can't handle const due to non-compliant implementation
@@ -118,6 +121,18 @@
     }
   }
 
+  function sourceCodePre(sourceLines, lineNum, columnNum) {
+    const sourceCode = sourceLines.map(({ text }) => text).join('\n')
+    const ansiHighlight = codeFrame(sourceCode, lineNum, columnNum, { highlightCode: true });
+    const htmlHighlight = ansiHTML(ansiHighlight);
+    const code = document.createElement('code')
+    code.innerHTML = htmlHighlight;
+    const pre = document.createElement('pre')
+    applyStyles(pre, preStyle);
+    pre.appendChild(code)
+    return pre;
+  }
+
   function render(error, name, message, resolvedFrames) {
     if (overlayReference !== null) {
       renderAdditional()
@@ -203,20 +218,7 @@
       elem.appendChild(elemLink)
 
       if (!internalUrl && sourceLines.length !== 0) {
-        const pre = document.createElement('pre')
-        applyStyles(pre, preStyle)
-
-        for (let line of sourceLines) {
-          const { context, text, line: fileLine } = line
-          let modSource = (Array(11).join(' ') + fileLine).slice(-6) + (context ? '   | ' : ' > | ')
-          modSource += text
-          const lineElem = document.createElement('div')
-          if (!context) applyStyles(lineElem, contextStyle)
-
-          lineElem.appendChild(document.createTextNode(modSource))
-          pre.appendChild(lineElem)
-        }
-        elem.appendChild(pre)
+        elem.appendChild(sourceCodePre(sourceLines, sourceLineNumber, sourceColumnNumber));
       }
 
       trace.appendChild(elem)
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 0ec17dbc093..5b4c043a6ae 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -25,6 +25,7 @@
   ],
   "dependencies": {
     "ansi-html": "0.0.5",
+    "babel-code-frame": "^6.16.0",
     "chalk": "1.1.3",
     "escape-string-regexp": "1.0.5",
     "html-entities": "1.2.0",
diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index 66ba341b358..2fdb0ac5d76 100644
--- a/packages/react-scripts/config/env.js
+++ b/packages/react-scripts/config/env.js
@@ -27,6 +27,8 @@ function getClientEnvironment(publicUrl) {
       'NODE_ENV': JSON.stringify(
         process.env.NODE_ENV || 'development'
       ),
+      // Allows the chalk library to work on the browser
+      'FORCE_COLOR': JSON.stringify(true),
       // Useful for resolving the correct path to static assets in `public`.
       // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
       // This should only be used as an escape hatch. Normally you would put

From dda1aac06c2b9d65aa99050bbc1ddf2b2f679551 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 17:11:45 -0500
Subject: [PATCH 034/120] Linting

---
 packages/react-dev-utils/failFast.js | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 08e126916e1..7723a92743e 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -1,10 +1,8 @@
-// Use the same highlighter as syntax errors in console
-const codeFrame = require('babel-code-frame');
-const ansiHTML = require('./ansiHTML');
-
 (function() {
   require('./failFast.css')
 
+  const codeFrame = require('babel-code-frame')
+  const ansiHTML = require('./ansiHTML')
   const StackTraceResolve = require('stacktrace-resolve').default
 
   const CONTEXT_SIZE = Infinity
@@ -81,7 +79,7 @@ const ansiHTML = require('./ansiHTML');
     'overflow-x': 'auto',
     background: '#fff',
     'font-size': '1.1em'
-  };
+  }
 
   function applyStyles(element, styles) {
     element.setAttribute('style', '')
@@ -123,14 +121,14 @@ const ansiHTML = require('./ansiHTML');
 
   function sourceCodePre(sourceLines, lineNum, columnNum) {
     const sourceCode = sourceLines.map(({ text }) => text).join('\n')
-    const ansiHighlight = codeFrame(sourceCode, lineNum, columnNum, { highlightCode: true });
-    const htmlHighlight = ansiHTML(ansiHighlight);
+    const ansiHighlight = codeFrame(sourceCode, lineNum, columnNum, { highlightCode: true })
+    const htmlHighlight = ansiHTML(ansiHighlight)
     const code = document.createElement('code')
-    code.innerHTML = htmlHighlight;
+    code.innerHTML = htmlHighlight
     const pre = document.createElement('pre')
-    applyStyles(pre, preStyle);
+    applyStyles(pre, preStyle)
     pre.appendChild(code)
-    return pre;
+    return pre
   }
 
   function render(error, name, message, resolvedFrames) {
@@ -178,9 +176,11 @@ const ansiHTML = require('./ansiHTML');
 
       let url
       if (sourceFileName) {
-        url = sourceFileName + ':' + sourceLineNumber + ':' + sourceColumnNumber
+        url = sourceFileName + ':' + sourceLineNumber
+        if (sourceColumnNumber) url += ':' + sourceColumnNumber
       } else {
-        url = fileName + ':' + lineNumber + ':' + columnNumber
+        url = fileName + ':' + lineNumber
+        if (columnNumber) url += ':' + columnNumber
       }
 
       const internalUrl = isInternalFile(url)
@@ -218,7 +218,7 @@ const ansiHTML = require('./ansiHTML');
       elem.appendChild(elemLink)
 
       if (!internalUrl && sourceLines.length !== 0) {
-        elem.appendChild(sourceCodePre(sourceLines, sourceLineNumber, sourceColumnNumber));
+        elem.appendChild(sourceCodePre(sourceLines, sourceLineNumber, sourceColumnNumber))
       }
 
       trace.appendChild(elem)

From 9a92f0f04488d6ee769130f257173a30ba55e224 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 17:12:05 -0500
Subject: [PATCH 035/120] Remove white background

---
 packages/react-dev-utils/failFast.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 7723a92743e..a7c264a837b 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -77,7 +77,6 @@
     padding: '0.5em',
     margin: '1.5em 0',
     'overflow-x': 'auto',
-    background: '#fff',
     'font-size': '1.1em'
   }
 

From 519bdb823f41f754ccf821aa35a2f29e11ddb68f Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 17:12:33 -0500
Subject: [PATCH 036/120] Append new files to package.json

---
 packages/react-dev-utils/package.json | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 5b4c043a6ae..598a99db22e 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -11,8 +11,10 @@
     "node": ">=4"
   },
   "files": [
+    "ansiHTML.js",
     "checkRequiredFiles.js",
     "clearConsole.js",
+    "failFast.css",
     "failFast.js",
     "formatWebpackMessages.js",
     "getProcessForPort.js",

From 5292b24c15faa67d4a852d97d29095fafe2c9634 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 17:16:21 -0500
Subject: [PATCH 037/120] Target exact version

---
 packages/react-dev-utils/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 598a99db22e..9609e575e63 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -27,7 +27,7 @@
   ],
   "dependencies": {
     "ansi-html": "0.0.5",
-    "babel-code-frame": "^6.16.0",
+    "babel-code-frame": "6.16.0",
     "chalk": "1.1.3",
     "escape-string-regexp": "1.0.5",
     "html-entities": "1.2.0",

From 8c11a723eed71a6c4133c43ccb25b5d6e9ed1c4d Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 17:19:23 -0500
Subject: [PATCH 038/120] White is a little harsh, use same color as red box.

---
 packages/react-dev-utils/webpackHotDevClient.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 5c23dcd7e5d..25d8722c412 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -52,7 +52,7 @@ function addOverlayDivTo(iframe) {
   div.style.bottom = 0;
   div.style.width = '100vw';
   div.style.height = '100vh';
-  div.style.backgroundColor = '#fff';
+  div.style.backgroundColor = '#fafafa';
   div.style.color = '#333';
   div.style.fontFamily = 'Menlo, Consolas, monospace';
   div.style.fontSize = 'large';

From 57b1673eb8e04b57e557ebd9ef928676924e1ce7 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 17:29:27 -0500
Subject: [PATCH 039/120] Fix a bug where omitted frames would never be
 rendered (under certain circumstances)

---
 packages/react-dev-utils/failFast.js | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index a7c264a837b..181d2e7c23c 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -164,6 +164,14 @@
     // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1101653
     let omittedFramesCount = 0
+    const appendOmittedFrames = () => {
+      if (!omittedFramesCount) return
+      const omittedFrames = document.createElement('div')
+      omittedFrames.appendChild(document.createTextNode(`---[ ${omittedFramesCount} internal calls hidden ]---`))
+      applyStyles(omittedFrames, omittedFramesStyle)
+      trace.appendChild(omittedFrames)
+      omittedFramesCount = 0
+    }
     for (let frame of resolvedFrames) {
       const {
         functionName,
@@ -188,13 +196,7 @@
         continue
       }
 
-      if (omittedFramesCount) {
-        const omittedFrames = document.createElement('div')
-        omittedFrames.appendChild(document.createTextNode(`---[ ${omittedFramesCount} internal calls hidden ]---`))
-        applyStyles(omittedFrames, omittedFramesStyle)
-        trace.appendChild(omittedFrames)
-        omittedFramesCount = 0
-      }
+      appendOmittedFrames()
 
       const elem = document.createElement('div')
 
@@ -222,6 +224,7 @@
 
       trace.appendChild(elem)
     }
+    appendOmittedFrames()
     container.appendChild(trace)
 
     // Mount

From 1e27dad6429edc77cdef2366a0dfc3d9a8af998f Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 17:35:24 -0500
Subject: [PATCH 040/120] Show local file path instead of confusing webpack://

---
 packages/react-dev-utils/failFast.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 181d2e7c23c..e2f7f650391 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -214,7 +214,7 @@
       const elemAnchor = document.createElement('a')
       applyStyles(elemAnchor, anchorStyle)
       elemAnchor.href = url
-      elemAnchor.appendChild(document.createTextNode(url))
+      elemAnchor.appendChild(document.createTextNode(url.replace('webpack://', '.')))
       elemLink.appendChild(elemAnchor)
       elem.appendChild(elemLink)
 

From b14365b99c9d171846af9331d7c57ff79a81c18a Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 17:48:02 -0500
Subject: [PATCH 041/120] Do not require the entire file

---
 packages/react-dev-utils/failFast.js | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index e2f7f650391..53c50de113b 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -5,7 +5,7 @@
   const ansiHTML = require('./ansiHTML')
   const StackTraceResolve = require('stacktrace-resolve').default
 
-  const CONTEXT_SIZE = Infinity
+  const CONTEXT_SIZE = 3
 
   const black = '#293238'
   const darkGray = '#878e91'
@@ -119,8 +119,16 @@
   }
 
   function sourceCodePre(sourceLines, lineNum, columnNum) {
-    const sourceCode = sourceLines.map(({ text }) => text).join('\n')
-    const ansiHighlight = codeFrame(sourceCode, lineNum, columnNum, { highlightCode: true })
+    let sourceCode = []
+    sourceLines.forEach(({ text, line }) => {
+      sourceCode[line - 1] = text
+    })
+    sourceCode = sourceCode.join('\n')
+    const ansiHighlight = codeFrame(sourceCode, lineNum, columnNum, {
+      highlightCode: true,
+      linesAbove: 3,
+      linesBelow: 3
+    })
     const htmlHighlight = ansiHTML(ansiHighlight)
     const code = document.createElement('code')
     code.innerHTML = htmlHighlight

From 46db1ae54c0449b737f82fb1cf8a47b7457d5b9b Mon Sep 17 00:00:00 2001
From: Eric Koslow <ekoslow@gmail.com>
Date: Tue, 29 Nov 2016 18:00:35 -0500
Subject: [PATCH 042/120] Remove css file

---
 packages/react-dev-utils/failFast.css | 24 ------------------------
 packages/react-dev-utils/failFast.js  | 23 +++++++++++++++++++----
 packages/react-dev-utils/package.json |  1 -
 3 files changed, 19 insertions(+), 29 deletions(-)
 delete mode 100644 packages/react-dev-utils/failFast.css

diff --git a/packages/react-dev-utils/failFast.css b/packages/react-dev-utils/failFast.css
deleted file mode 100644
index b7b79de6772..00000000000
--- a/packages/react-dev-utils/failFast.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.cra-container {
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
-}
-
-@media (min-width: 768px) {
-  .cra-container {
-    width: 750px;
-  }
-}
-
-@media (min-width: 992px) {
-  .cra-container {
-    width: 970px;
-  }
-}
-
-@media (min-width: 1200px) {
-  .cra-container {
-    width: 1170px;
-  }
-}
diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 53c50de113b..3ef390c5b80 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -1,6 +1,4 @@
 (function() {
-  require('./failFast.css')
-
   const codeFrame = require('babel-code-frame')
   const ansiHTML = require('./ansiHTML')
   const StackTraceResolve = require('stacktrace-resolve').default
@@ -30,6 +28,14 @@
     'line-height': 1.5,
   }
 
+  const containerStyle = {
+    'padding-right': '15px',
+    'padding-left': '15px',
+    'margin-right': 'auto',
+    'margin-left': 'auto',
+    width: () => calcWidth(window.innerWidth)
+  }
+
   const hintsStyle = {
     'font-size': '0.8em',
     'margin-top': '-3em',
@@ -80,6 +86,13 @@
     'font-size': '1.1em'
   }
 
+  function calcWidth(width) {
+    if (width >= 1200) return '1170px'
+    if (width >= 992) return '970px'
+    if (width >= 768) return '750px'
+    return 'auto'
+  }
+
   function applyStyles(element, styles) {
     element.setAttribute('style', '')
     // Firefox can't handle const due to non-compliant implementation
@@ -88,7 +101,9 @@
     // https://bugzilla.mozilla.org/show_bug.cgi?id=1101653
     for (let key in styles) {
       if (!styles.hasOwnProperty(key)) continue
-      element.style[key] = styles[key].toString()
+      let val = styles[key]
+      if (typeof val === 'function') val = val()
+      element.style[key] = val.toString()
     }
   }
 
@@ -155,7 +170,7 @@
     overlay.appendChild(hints)
 
     const container = document.createElement('div')
-    container.className = 'cra-container'
+    applyStyles(container, containerStyle)
     overlay.appendChild(container)
 
     // Create header
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 9609e575e63..f66349a7426 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -14,7 +14,6 @@
     "ansiHTML.js",
     "checkRequiredFiles.js",
     "clearConsole.js",
-    "failFast.css",
     "failFast.js",
     "formatWebpackMessages.js",
     "getProcessForPort.js",

From 65d2db5cfbde2e4e74446e93d0ef1a119cfe1bbc Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 18:10:39 -0500
Subject: [PATCH 043/120] Use context size, not a magic variable.

---
 packages/react-dev-utils/failFast.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 3ef390c5b80..f51dce0958d 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -28,6 +28,9 @@
     'line-height': 1.5,
   }
 
+  // TODO: reapply containerStyle on resize or externalize to css and ensure
+  //  e2e checks & tests pass
+  //  ref commit: 46db1ae54c0449b737f82fb1cf8a47b7457d5b9b
   const containerStyle = {
     'padding-right': '15px',
     'padding-left': '15px',
@@ -141,8 +144,8 @@
     sourceCode = sourceCode.join('\n')
     const ansiHighlight = codeFrame(sourceCode, lineNum, columnNum, {
       highlightCode: true,
-      linesAbove: 3,
-      linesBelow: 3
+      linesAbove: CONTEXT_SIZE,
+      linesBelow: CONTEXT_SIZE
     })
     const htmlHighlight = ansiHTML(ansiHighlight)
     const code = document.createElement('code')

From 7ea225447d3ea942619716e2d29d0bf7a08afd32 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 19:19:33 -0500
Subject: [PATCH 044/120] Fix title regression

---
 packages/react-dev-utils/failFast.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index f51dce0958d..65993dd70b8 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -125,7 +125,7 @@
 
   function renderAdditional() {
     ++additionalCount
-    const title = overlayReference.childNodes[1]
+    const title = overlayReference.childNodes[1].childNodes[0]
     const children = title.childNodes
     const text = document.createTextNode(` (+${additionalCount} more)`)
     if (children.length < 2) {

From ff6e0e1362b34db3a4bb90d0f9de43ee25b6d7a1 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 19:28:16 -0500
Subject: [PATCH 045/120] Update dependency

---
 packages/react-dev-utils/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index f66349a7426..53a1cfc0b52 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -32,7 +32,7 @@
     "html-entities": "1.2.0",
     "opn": "4.0.2",
     "sockjs-client": "1.0.3",
-    "stacktrace-resolve": "0.1.1",
+    "stacktrace-resolve": "0.1.2",
     "strip-ansi": "3.0.1"
   }
 }

From a07778ec2ec279e929a4acc46779d263d51d58cd Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 19:34:54 -0500
Subject: [PATCH 046/120] Do not center text for internal calls

---
 packages/react-dev-utils/failFast.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 65993dd70b8..5a69bec8cce 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -77,8 +77,7 @@
 
   const omittedFramesStyle = {
     color: black,
-    'margin': '1.5em 0',
-    'text-align': 'center'
+    'margin': '1.5em 0'
   }
 
   const preStyle = {

From 91f456b3e1f32ca2ce3367ef09af78df27b685ce Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 19:37:54 -0500
Subject: [PATCH 047/120] Temporarily disable links

---
 packages/react-dev-utils/failFast.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 5a69bec8cce..c4a708a5a6c 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -238,7 +238,7 @@
       applyStyles(elemLink, linkStyle)
       const elemAnchor = document.createElement('a')
       applyStyles(elemAnchor, anchorStyle)
-      elemAnchor.href = url
+      //elemAnchor.href = url
       elemAnchor.appendChild(document.createTextNode(url.replace('webpack://', '.')))
       elemLink.appendChild(elemAnchor)
       elem.appendChild(elemLink)

From 3ce9bb6f93011c167ab27225c070ca86c19a28e0 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 20:31:55 -0500
Subject: [PATCH 048/120] Switch internal toggle to 'i'

---
 packages/react-dev-utils/failFast.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index c4a708a5a6c..5a124005e9b 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -165,7 +165,7 @@
     applyStyles(overlay, overlayStyle)
 
     const hints = document.createElement('div')
-    hints.appendChild(document.createTextNode(`[=] ${internalDisabled ? 'Show' : 'Hide'} internal calls`))
+    hints.appendChild(document.createTextNode(`[i] ${internalDisabled ? 'Show' : 'Hide'} internal calls`))
     hints.appendChild(document.createTextNode('\t\t'))
     hints.appendChild(document.createTextNode('[escape] Close'))
     applyStyles(hints, hintsStyle)
@@ -309,7 +309,7 @@
   let escapeHandler = function(event) {
     const { key, keyCode, which } = event
     if (key === 'Escape' || keyCode === 27 || which === 27) unmount()
-    else if (key === '+' || key === '=' || keyCode === 187 || which === 187) toggleInternal()
+    else if (key === 'i' || keyCode === 73 || which === 73) toggleInternal()
   }
 
   window.addEventListener('keydown', escapeHandler)

From b4567ffd829744606fe71361c8086e7bec9b9ed5 Mon Sep 17 00:00:00 2001
From: Nic Aitch <nic@nicinabox.com>
Date: Tue, 29 Nov 2016 21:22:40 -0600
Subject: [PATCH 049/120] Remove unnecessary rules from container style

---
 packages/react-dev-utils/failFast.js | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 5a124005e9b..32bb9df50bf 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -32,10 +32,7 @@
   //  e2e checks & tests pass
   //  ref commit: 46db1ae54c0449b737f82fb1cf8a47b7457d5b9b
   const containerStyle = {
-    'padding-right': '15px',
-    'padding-left': '15px',
-    'margin-right': 'auto',
-    'margin-left': 'auto',
+    'margin': '0 auto',
     width: () => calcWidth(window.innerWidth)
   }
 

From 18422aba92cb0f4cefee43e573e73c34a6921d85 Mon Sep 17 00:00:00 2001
From: Nic Aitch <nic@nicinabox.com>
Date: Tue, 29 Nov 2016 21:23:10 -0600
Subject: [PATCH 050/120] Reduce omitted frames font size

---
 packages/react-dev-utils/failFast.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 32bb9df50bf..84a80612745 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -74,7 +74,8 @@
 
   const omittedFramesStyle = {
     color: black,
-    'margin': '1.5em 0'
+    'font-size': '0.9em',
+    'margin': '1.5em 0',
   }
 
   const preStyle = {

From 89f8e71ea7db0fa781c3cc6739adccdb5773ccd8 Mon Sep 17 00:00:00 2001
From: Nic Aitch <nic@nicinabox.com>
Date: Tue, 29 Nov 2016 21:23:31 -0600
Subject: [PATCH 051/120] Fix font family in pre > code

---
 packages/react-dev-utils/failFast.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 84a80612745..5708c4dccf4 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -86,6 +86,10 @@
     'font-size': '1.1em'
   }
 
+  const codeStyle = {
+    'font-family': 'Consolas, Menlo, monospace',
+  }
+
   function calcWidth(width) {
     if (width >= 1200) return '1170px'
     if (width >= 992) return '970px'
@@ -147,6 +151,8 @@
     const htmlHighlight = ansiHTML(ansiHighlight)
     const code = document.createElement('code')
     code.innerHTML = htmlHighlight
+    applyStyles(code, codeStyle)
+
     const pre = document.createElement('pre')
     applyStyles(pre, preStyle)
     pre.appendChild(code)

From ef940d8c2d4c93c77c714ec00b7d089aec63163d Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 22:07:07 -0500
Subject: [PATCH 052/120] Re-introduce line highlighting

---
 packages/react-dev-utils/ansiHTML.js  | 52 +++++++++++++++++++++++++--
 packages/react-dev-utils/failFast.js  | 24 +++++++++++--
 packages/react-dev-utils/package.json |  2 +-
 3 files changed, 73 insertions(+), 5 deletions(-)

diff --git a/packages/react-dev-utils/ansiHTML.js b/packages/react-dev-utils/ansiHTML.js
index e85f5d91296..3414c620e18 100644
--- a/packages/react-dev-utils/ansiHTML.js
+++ b/packages/react-dev-utils/ansiHTML.js
@@ -1,4 +1,5 @@
-var ansiHTML = require('ansi-html');
+var Anser = require('anser');
+
 // Color scheme inspired by https://chriskempson.github.io/base16/css/base16-github.css
 var base00 = 'ffffff'; // Default Background
 var base01 = 'f5f5f5'; // Lighter Background (Used for status bars)
@@ -32,6 +33,53 @@ var colors = {
   lightgrey: base01,
   darkgrey: base03
 };
-ansiHTML.setColors(colors);
+
+var anserMap = {
+  'ansi-bright-black': 'black',
+  'ansi-bright-yellow': 'yellow',
+  'ansi-yellow': 'yellow',
+  'ansi-bright-green': 'green',
+  'ansi-green': 'green',
+  'ansi-bright-cyan': 'cyan',
+  'ansi-cyan': 'cyan',
+  'ansi-red': 'red'
+}
+
+function ansiHTML(txt) {
+  const arr = new Anser().ansiToJson(txt, {
+    use_classes: true
+  })
+
+  let result = ''
+  let open = false
+  for (let c of arr) {
+    const { content, fg } = c
+    const contentParts = content.split('\n')
+    for (let index = 0; index < contentParts.length; ++index) {
+      if (!open) {
+        result += '<span data-ansi-line="true">'
+        open = true
+      }
+      let part = contentParts[index].replace('\r', '')
+      const color = colors[anserMap[fg]]
+      if (color != null) {
+        result += `<span style="color: #${color};">${part}</span>`
+      } else {
+        if (fg != null) console.log('Missing color mapping: ', fg)
+        result += `<span>${part}</span>`
+      }
+      if (index < contentParts.length - 1) {
+        result += '</span>'
+        open = false
+        result += '<br/>'
+      }
+    }
+  }
+  if (open) {
+    result += '</span>'
+    open = false
+  }
+  return result
+}
 
 module.exports = ansiHTML;
diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 5708c4dccf4..61cfe7578f8 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -9,6 +9,8 @@
   const darkGray = '#878e91'
   const lightGray = '#fafafa'
   const red = '#ce1126'
+  const lightRed = '#fccfcf'
+  const yellow = '#fbf5b4'
 
   const overlayStyle = {
     position: 'fixed',
@@ -72,6 +74,13 @@
     'font-size': '1.2em',
   }
 
+  const primaryErrorStyle = {
+    'background-color': lightRed
+  }
+
+  const secondaryErrorStyle = {
+    'background-color': yellow
+  }
   const omittedFramesStyle = {
     color: black,
     'font-size': '0.9em',
@@ -137,7 +146,7 @@
     }
   }
 
-  function sourceCodePre(sourceLines, lineNum, columnNum) {
+  function sourceCodePre(sourceLines, lineNum, columnNum, main = false) {
     let sourceCode = []
     sourceLines.forEach(({ text, line }) => {
       sourceCode[line - 1] = text
@@ -153,6 +162,15 @@
     code.innerHTML = htmlHighlight
     applyStyles(code, codeStyle)
 
+    for (let node of code.childNodes) {
+      let breakOut = false
+      for (let lineNode of node.childNodes) {
+        if (lineNode.innerText.indexOf(` ${lineNum} |`) === -1) continue
+        applyStyles(node, main ? primaryErrorStyle : secondaryErrorStyle)
+        breakOut = true
+      }
+      if (breakOut) break
+    }
     const pre = document.createElement('pre')
     applyStyles(pre, preStyle)
     pre.appendChild(code)
@@ -201,6 +219,7 @@
       trace.appendChild(omittedFrames)
       omittedFramesCount = 0
     }
+    let main = true
     for (let frame of resolvedFrames) {
       const {
         functionName,
@@ -248,7 +267,8 @@
       elem.appendChild(elemLink)
 
       if (!internalUrl && sourceLines.length !== 0) {
-        elem.appendChild(sourceCodePre(sourceLines, sourceLineNumber, sourceColumnNumber))
+        elem.appendChild(sourceCodePre(sourceLines, sourceLineNumber, sourceColumnNumber, main))
+        main = false
       }
 
       trace.appendChild(elem)
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 53a1cfc0b52..3a9646aa06b 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -25,7 +25,7 @@
     "webpackHotDevClient.js"
   ],
   "dependencies": {
-    "ansi-html": "0.0.5",
+    "anser": "1.1.0",
     "babel-code-frame": "6.16.0",
     "chalk": "1.1.3",
     "escape-string-regexp": "1.0.5",

From f95e07c9acde25f904ed5dd2eba9ead1ba9a029c Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 22:10:35 -0500
Subject: [PATCH 053/120] Object.<anonymous> -> (anonymous function)

---
 packages/react-dev-utils/failFast.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 61cfe7578f8..857f4458f38 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -254,7 +254,7 @@
       } else {
         applyStyles(elemFunctionName, functionNameStyle)
       }
-      elemFunctionName.appendChild(document.createTextNode(functionName || '(anonymous function)'))
+      elemFunctionName.appendChild(document.createTextNode(functionName && functionName !== 'Object.<anonymous>' ? functionName : '(anonymous function)'))
       elem.appendChild(elemFunctionName)
 
       const elemLink = document.createElement('div')

From 50ae867c75994dad347433a164e8a82dc37b92ce Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 22:21:02 -0500
Subject: [PATCH 054/120] Add ability to see script source

---
 packages/react-dev-utils/failFast.js | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 857f4458f38..95852fbf31c 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -124,6 +124,7 @@
   let errorCache = null
   let additionalCount = 0
   let internalDisabled = true
+  let sourceDisabled = false
 
   function toggleInternal() {
     internalDisabled = !internalDisabled
@@ -133,6 +134,14 @@
     }
   }
 
+  function toggleSource() {
+    sourceDisabled = !sourceDisabled
+    if (errorCache != null) {
+      unmount()
+      crash(errorCache)
+    }
+  }
+
   function renderAdditional() {
     ++additionalCount
     const title = overlayReference.childNodes[1].childNodes[0]
@@ -189,6 +198,8 @@
     const hints = document.createElement('div')
     hints.appendChild(document.createTextNode(`[i] ${internalDisabled ? 'Show' : 'Hide'} internal calls`))
     hints.appendChild(document.createTextNode('\t\t'))
+    hints.appendChild(document.createTextNode(`[s] ${sourceDisabled ? 'Hide' : 'Show'} script source`))
+    hints.appendChild(document.createTextNode('\t\t'))
     hints.appendChild(document.createTextNode('[escape] Close'))
     applyStyles(hints, hintsStyle)
     overlay.appendChild(hints)
@@ -224,7 +235,7 @@
       const {
         functionName,
         fileName, lineNumber, columnNumber,
-        _scriptLines,
+        scriptLines,
         sourceFileName, sourceLineNumber, sourceColumnNumber,
         sourceLines
       } = frame
@@ -266,8 +277,12 @@
       elemLink.appendChild(elemAnchor)
       elem.appendChild(elemLink)
 
-      if (!internalUrl && sourceLines.length !== 0) {
-        elem.appendChild(sourceCodePre(sourceLines, sourceLineNumber, sourceColumnNumber, main))
+      if (!internalUrl) {
+        if (sourceDisabled && scriptLines.length !== 0) {
+          elem.appendChild(sourceCodePre(scriptLines, lineNumber, columnNumber, main))
+        } else if (!sourceDisabled && sourceLines.length !== 0) {
+          elem.appendChild(sourceCodePre(sourceLines, sourceLineNumber, sourceColumnNumber, main))
+        }
         main = false
       }
 
@@ -334,6 +349,7 @@
     const { key, keyCode, which } = event
     if (key === 'Escape' || keyCode === 27 || which === 27) unmount()
     else if (key === 'i' || keyCode === 73 || which === 73) toggleInternal()
+    else if (key === 's' || keyCode === 83 || which === 83) toggleSource()
   }
 
   window.addEventListener('keydown', escapeHandler)

From 7ba485336121c45c5411cbb109122c1325364c20 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 29 Nov 2016 22:21:07 -0500
Subject: [PATCH 055/120] Add missing ansi mappings

---
 packages/react-dev-utils/ansiHTML.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/ansiHTML.js b/packages/react-dev-utils/ansiHTML.js
index 3414c620e18..421a5cee532 100644
--- a/packages/react-dev-utils/ansiHTML.js
+++ b/packages/react-dev-utils/ansiHTML.js
@@ -42,7 +42,10 @@ var anserMap = {
   'ansi-green': 'green',
   'ansi-bright-cyan': 'cyan',
   'ansi-cyan': 'cyan',
-  'ansi-red': 'red'
+  'ansi-bright-red': 'red',
+  'ansi-red': 'red',
+  'ansi-bright-magenta': 'magenta',
+  'ansi-magenta': 'magenta'
 }
 
 function ansiHTML(txt) {

From c616c66def1280b43246b81276b915bd79a3f5fc Mon Sep 17 00:00:00 2001
From: Eric Koslow <ekoslow@gmail.com>
Date: Tue, 29 Nov 2016 20:40:18 -0800
Subject: [PATCH 056/120] Remove SIAF

---
 packages/react-dev-utils/failFast.js | 680 +++++++++++++--------------
 1 file changed, 339 insertions(+), 341 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 95852fbf31c..ffafd361c50 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -1,368 +1,366 @@
-(function() {
-  const codeFrame = require('babel-code-frame')
-  const ansiHTML = require('./ansiHTML')
-  const StackTraceResolve = require('stacktrace-resolve').default
-
-  const CONTEXT_SIZE = 3
-
-  const black = '#293238'
-  const darkGray = '#878e91'
-  const lightGray = '#fafafa'
-  const red = '#ce1126'
-  const lightRed = '#fccfcf'
-  const yellow = '#fbf5b4'
-
-  const overlayStyle = {
-    position: 'fixed',
-    'box-sizing': 'border-box',
-    top: '1em', left: '1em',
-    bottom: '1em', right: '1em',
-    width: 'calc(100% - 2em)', height: 'calc(100% - 2em)',
-    'border-radius': '3px',
-    'background-color': lightGray,
-    padding: '4rem',
-    'z-index': 1337,
-    'font-family': 'Consolas, Menlo, monospace',
-    color: black,
-    'white-space': 'pre-wrap',
-    overflow: 'auto',
-    'box-shadow': '0 0 6px 0 rgba(0, 0, 0, 0.5)',
-    'line-height': 1.5,
+const codeFrame = require('babel-code-frame')
+const ansiHTML = require('./ansiHTML')
+const StackTraceResolve = require('stacktrace-resolve').default
+
+const CONTEXT_SIZE = 3
+
+const black = '#293238'
+const darkGray = '#878e91'
+const lightGray = '#fafafa'
+const red = '#ce1126'
+const lightRed = '#fccfcf'
+const yellow = '#fbf5b4'
+
+const overlayStyle = {
+  position: 'fixed',
+  'box-sizing': 'border-box',
+  top: '1em', left: '1em',
+  bottom: '1em', right: '1em',
+  width: 'calc(100% - 2em)', height: 'calc(100% - 2em)',
+  'border-radius': '3px',
+  'background-color': lightGray,
+  padding: '4rem',
+  'z-index': 1337,
+  'font-family': 'Consolas, Menlo, monospace',
+  color: black,
+  'white-space': 'pre-wrap',
+  overflow: 'auto',
+  'box-shadow': '0 0 6px 0 rgba(0, 0, 0, 0.5)',
+  'line-height': 1.5,
+}
+
+// TODO: reapply containerStyle on resize or externalize to css and ensure
+//  e2e checks & tests pass
+//  ref commit: 46db1ae54c0449b737f82fb1cf8a47b7457d5b9b
+const containerStyle = {
+  'margin': '0 auto',
+  width: () => calcWidth(window.innerWidth)
+}
+
+const hintsStyle = {
+  'font-size': '0.8em',
+  'margin-top': '-3em',
+  'margin-bottom': '3em',
+  'text-align': 'right',
+  color: darkGray
+}
+
+const headerStyle = {
+  'font-size': '1.7em',
+  'font-weight': 'bold',
+  color: red
+}
+
+const functionNameStyle = {
+  'margin-top': '1em',
+  'font-size': '1.2em'
+}
+
+const linkStyle = {
+  'font-size': '0.9em',
+}
+
+const anchorStyle = {
+  'text-decoration': 'none',
+  color: darkGray
+}
+
+const traceStyle = {
+  'font-size': '1em'
+}
+
+const depStyle = {
+  'font-size': '1.2em',
+}
+
+const primaryErrorStyle = {
+  'background-color': lightRed
+}
+
+const secondaryErrorStyle = {
+  'background-color': yellow
+}
+const omittedFramesStyle = {
+  color: black,
+  'font-size': '0.9em',
+  'margin': '1.5em 0',
+}
+
+const preStyle = {
+  display: 'block',
+  padding: '0.5em',
+  margin: '1.5em 0',
+  'overflow-x': 'auto',
+  'font-size': '1.1em'
+}
+
+const codeStyle = {
+  'font-family': 'Consolas, Menlo, monospace',
+}
+
+function calcWidth(width) {
+  if (width >= 1200) return '1170px'
+  if (width >= 992) return '970px'
+  if (width >= 768) return '750px'
+  return 'auto'
+}
+
+function applyStyles(element, styles) {
+  element.setAttribute('style', '')
+  // Firefox can't handle const due to non-compliant implementation
+  // Revisit Jan 2016
+  // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1101653
+  for (let key in styles) {
+    if (!styles.hasOwnProperty(key)) continue
+    let val = styles[key]
+    if (typeof val === 'function') val = val()
+    element.style[key] = val.toString()
   }
-
-  // TODO: reapply containerStyle on resize or externalize to css and ensure
-  //  e2e checks & tests pass
-  //  ref commit: 46db1ae54c0449b737f82fb1cf8a47b7457d5b9b
-  const containerStyle = {
-    'margin': '0 auto',
-    width: () => calcWidth(window.innerWidth)
-  }
-
-  const hintsStyle = {
-    'font-size': '0.8em',
-    'margin-top': '-3em',
-    'margin-bottom': '3em',
-    'text-align': 'right',
-    color: darkGray
-  }
-
-  const headerStyle = {
-    'font-size': '1.7em',
-    'font-weight': 'bold',
-    color: red
-  }
-
-  const functionNameStyle = {
-    'margin-top': '1em',
-    'font-size': '1.2em'
-  }
-
-  const linkStyle = {
-    'font-size': '0.9em',
-  }
-
-  const anchorStyle = {
-    'text-decoration': 'none',
-    color: darkGray
-  }
-
-  const traceStyle = {
-    'font-size': '1em'
-  }
-
-  const depStyle = {
-    'font-size': '1.2em',
+}
+
+let overlayReference = null
+let errorCache = null
+let additionalCount = 0
+let internalDisabled = true
+let sourceDisabled = false
+
+function toggleInternal() {
+  internalDisabled = !internalDisabled
+  if (errorCache != null) {
+    unmount()
+    crash(errorCache)
   }
+}
 
-  const primaryErrorStyle = {
-    'background-color': lightRed
+function toggleSource() {
+  sourceDisabled = !sourceDisabled
+  if (errorCache != null) {
+    unmount()
+    crash(errorCache)
   }
-
-  const secondaryErrorStyle = {
-    'background-color': yellow
-  }
-  const omittedFramesStyle = {
-    color: black,
-    'font-size': '0.9em',
-    'margin': '1.5em 0',
-  }
-
-  const preStyle = {
-    display: 'block',
-    padding: '0.5em',
-    margin: '1.5em 0',
-    'overflow-x': 'auto',
-    'font-size': '1.1em'
-  }
-
-  const codeStyle = {
-    'font-family': 'Consolas, Menlo, monospace',
-  }
-
-  function calcWidth(width) {
-    if (width >= 1200) return '1170px'
-    if (width >= 992) return '970px'
-    if (width >= 768) return '750px'
-    return 'auto'
+}
+
+function renderAdditional() {
+  ++additionalCount
+  const title = overlayReference.childNodes[1].childNodes[0]
+  const children = title.childNodes
+  const text = document.createTextNode(` (+${additionalCount} more)`)
+  if (children.length < 2) {
+    title.appendChild(text)
+  } else {
+    title.removeChild(children[children.length - 1])
+    title.appendChild(text)
   }
-
-  function applyStyles(element, styles) {
-    element.setAttribute('style', '')
-    // Firefox can't handle const due to non-compliant implementation
-    // Revisit Jan 2016
-    // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1101653
-    for (let key in styles) {
-      if (!styles.hasOwnProperty(key)) continue
-      let val = styles[key]
-      if (typeof val === 'function') val = val()
-      element.style[key] = val.toString()
+}
+
+function sourceCodePre(sourceLines, lineNum, columnNum, main = false) {
+  let sourceCode = []
+  sourceLines.forEach(({ text, line }) => {
+    sourceCode[line - 1] = text
+  })
+  sourceCode = sourceCode.join('\n')
+  const ansiHighlight = codeFrame(sourceCode, lineNum, columnNum, {
+    highlightCode: true,
+    linesAbove: CONTEXT_SIZE,
+    linesBelow: CONTEXT_SIZE
+  })
+  const htmlHighlight = ansiHTML(ansiHighlight)
+  const code = document.createElement('code')
+  code.innerHTML = htmlHighlight
+  applyStyles(code, codeStyle)
+
+  for (let node of code.childNodes) {
+    let breakOut = false
+    for (let lineNode of node.childNodes) {
+      if (lineNode.innerText.indexOf(` ${lineNum} |`) === -1) continue
+      applyStyles(node, main ? primaryErrorStyle : secondaryErrorStyle)
+      breakOut = true
     }
+    if (breakOut) break
   }
-
-  let overlayReference = null
-  let errorCache = null
-  let additionalCount = 0
-  let internalDisabled = true
-  let sourceDisabled = false
-
-  function toggleInternal() {
-    internalDisabled = !internalDisabled
-    if (errorCache != null) {
-      unmount()
-      crash(errorCache)
-    }
+  const pre = document.createElement('pre')
+  applyStyles(pre, preStyle)
+  pre.appendChild(code)
+  return pre
+}
+
+function render(error, name, message, resolvedFrames) {
+  if (overlayReference !== null) {
+    renderAdditional()
+    return
   }
-
-  function toggleSource() {
-    sourceDisabled = !sourceDisabled
-    if (errorCache != null) {
-      unmount()
-      crash(errorCache)
-    }
+  // Create overlay
+  const overlay = document.createElement('div')
+  applyStyles(overlay, overlayStyle)
+
+  const hints = document.createElement('div')
+  hints.appendChild(document.createTextNode(`[i] ${internalDisabled ? 'Show' : 'Hide'} internal calls`))
+  hints.appendChild(document.createTextNode('\t\t'))
+  hints.appendChild(document.createTextNode(`[s] ${sourceDisabled ? 'Hide' : 'Show'} script source`))
+  hints.appendChild(document.createTextNode('\t\t'))
+  hints.appendChild(document.createTextNode('[escape] Close'))
+  applyStyles(hints, hintsStyle)
+  overlay.appendChild(hints)
+
+  const container = document.createElement('div')
+  applyStyles(container, containerStyle)
+  overlay.appendChild(container)
+
+  // Create header
+  const header = document.createElement('div')
+  applyStyles(header, headerStyle)
+  header.appendChild(document.createTextNode(`${name}: ${message}`))
+  container.appendChild(header)
+
+  // Show trace
+  const trace = document.createElement('div')
+  applyStyles(trace, traceStyle)
+  // Firefox can't handle const due to non-compliant implementation
+  // Revisit Jan 2016
+  // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1101653
+  let omittedFramesCount = 0
+  const appendOmittedFrames = () => {
+    if (!omittedFramesCount) return
+    const omittedFrames = document.createElement('div')
+    omittedFrames.appendChild(document.createTextNode(`---[ ${omittedFramesCount} internal calls hidden ]---`))
+    applyStyles(omittedFrames, omittedFramesStyle)
+    trace.appendChild(omittedFrames)
+    omittedFramesCount = 0
   }
-
-  function renderAdditional() {
-    ++additionalCount
-    const title = overlayReference.childNodes[1].childNodes[0]
-    const children = title.childNodes
-    const text = document.createTextNode(` (+${additionalCount} more)`)
-    if (children.length < 2) {
-      title.appendChild(text)
+  let main = true
+  for (let frame of resolvedFrames) {
+    const {
+      functionName,
+      fileName, lineNumber, columnNumber,
+      scriptLines,
+      sourceFileName, sourceLineNumber, sourceColumnNumber,
+      sourceLines
+    } = frame
+
+    let url
+    if (sourceFileName) {
+      url = sourceFileName + ':' + sourceLineNumber
+      if (sourceColumnNumber) url += ':' + sourceColumnNumber
     } else {
-      title.removeChild(children[children.length - 1])
-      title.appendChild(text)
-    }
-  }
-
-  function sourceCodePre(sourceLines, lineNum, columnNum, main = false) {
-    let sourceCode = []
-    sourceLines.forEach(({ text, line }) => {
-      sourceCode[line - 1] = text
-    })
-    sourceCode = sourceCode.join('\n')
-    const ansiHighlight = codeFrame(sourceCode, lineNum, columnNum, {
-      highlightCode: true,
-      linesAbove: CONTEXT_SIZE,
-      linesBelow: CONTEXT_SIZE
-    })
-    const htmlHighlight = ansiHTML(ansiHighlight)
-    const code = document.createElement('code')
-    code.innerHTML = htmlHighlight
-    applyStyles(code, codeStyle)
-
-    for (let node of code.childNodes) {
-      let breakOut = false
-      for (let lineNode of node.childNodes) {
-        if (lineNode.innerText.indexOf(` ${lineNum} |`) === -1) continue
-        applyStyles(node, main ? primaryErrorStyle : secondaryErrorStyle)
-        breakOut = true
-      }
-      if (breakOut) break
+      url = fileName + ':' + lineNumber
+      if (columnNumber) url += ':' + columnNumber
     }
-    const pre = document.createElement('pre')
-    applyStyles(pre, preStyle)
-    pre.appendChild(code)
-    return pre
-  }
 
-  function render(error, name, message, resolvedFrames) {
-    if (overlayReference !== null) {
-      renderAdditional()
-      return
+    const internalUrl = isInternalFile(url)
+    if (internalUrl && internalDisabled) {
+      omittedFramesCount++
+      continue
     }
-    // Create overlay
-    const overlay = document.createElement('div')
-    applyStyles(overlay, overlayStyle)
-
-    const hints = document.createElement('div')
-    hints.appendChild(document.createTextNode(`[i] ${internalDisabled ? 'Show' : 'Hide'} internal calls`))
-    hints.appendChild(document.createTextNode('\t\t'))
-    hints.appendChild(document.createTextNode(`[s] ${sourceDisabled ? 'Hide' : 'Show'} script source`))
-    hints.appendChild(document.createTextNode('\t\t'))
-    hints.appendChild(document.createTextNode('[escape] Close'))
-    applyStyles(hints, hintsStyle)
-    overlay.appendChild(hints)
-
-    const container = document.createElement('div')
-    applyStyles(container, containerStyle)
-    overlay.appendChild(container)
-
-    // Create header
-    const header = document.createElement('div')
-    applyStyles(header, headerStyle)
-    header.appendChild(document.createTextNode(`${name}: ${message}`))
-    container.appendChild(header)
-
-    // Show trace
-    const trace = document.createElement('div')
-    applyStyles(trace, traceStyle)
-    // Firefox can't handle const due to non-compliant implementation
-    // Revisit Jan 2016
-    // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
-    // https://bugzilla.mozilla.org/show_bug.cgi?id=1101653
-    let omittedFramesCount = 0
-    const appendOmittedFrames = () => {
-      if (!omittedFramesCount) return
-      const omittedFrames = document.createElement('div')
-      omittedFrames.appendChild(document.createTextNode(`---[ ${omittedFramesCount} internal calls hidden ]---`))
-      applyStyles(omittedFrames, omittedFramesStyle)
-      trace.appendChild(omittedFrames)
-      omittedFramesCount = 0
-    }
-    let main = true
-    for (let frame of resolvedFrames) {
-      const {
-        functionName,
-        fileName, lineNumber, columnNumber,
-        scriptLines,
-        sourceFileName, sourceLineNumber, sourceColumnNumber,
-        sourceLines
-      } = frame
-
-      let url
-      if (sourceFileName) {
-        url = sourceFileName + ':' + sourceLineNumber
-        if (sourceColumnNumber) url += ':' + sourceColumnNumber
-      } else {
-        url = fileName + ':' + lineNumber
-        if (columnNumber) url += ':' + columnNumber
-      }
-
-      const internalUrl = isInternalFile(url)
-      if (internalUrl && internalDisabled) {
-        omittedFramesCount++
-        continue
-      }
 
-      appendOmittedFrames()
+    appendOmittedFrames()
 
-      const elem = document.createElement('div')
+    const elem = document.createElement('div')
 
-      const elemFunctionName = document.createElement('div')
-      if (internalUrl) {
-        applyStyles(elemFunctionName, Object.assign({}, functionNameStyle, depStyle))
-      } else {
-        applyStyles(elemFunctionName, functionNameStyle)
-      }
-      elemFunctionName.appendChild(document.createTextNode(functionName && functionName !== 'Object.<anonymous>' ? functionName : '(anonymous function)'))
-      elem.appendChild(elemFunctionName)
-
-      const elemLink = document.createElement('div')
-      applyStyles(elemLink, linkStyle)
-      const elemAnchor = document.createElement('a')
-      applyStyles(elemAnchor, anchorStyle)
-      //elemAnchor.href = url
-      elemAnchor.appendChild(document.createTextNode(url.replace('webpack://', '.')))
-      elemLink.appendChild(elemAnchor)
-      elem.appendChild(elemLink)
-
-      if (!internalUrl) {
-        if (sourceDisabled && scriptLines.length !== 0) {
-          elem.appendChild(sourceCodePre(scriptLines, lineNumber, columnNumber, main))
-        } else if (!sourceDisabled && sourceLines.length !== 0) {
-          elem.appendChild(sourceCodePre(sourceLines, sourceLineNumber, sourceColumnNumber, main))
-        }
-        main = false
+    const elemFunctionName = document.createElement('div')
+    if (internalUrl) {
+      applyStyles(elemFunctionName, Object.assign({}, functionNameStyle, depStyle))
+    } else {
+      applyStyles(elemFunctionName, functionNameStyle)
+    }
+    elemFunctionName.appendChild(document.createTextNode(functionName && functionName !== 'Object.<anonymous>' ? functionName : '(anonymous function)'))
+    elem.appendChild(elemFunctionName)
+
+    const elemLink = document.createElement('div')
+    applyStyles(elemLink, linkStyle)
+    const elemAnchor = document.createElement('a')
+    applyStyles(elemAnchor, anchorStyle)
+    //elemAnchor.href = url
+    elemAnchor.appendChild(document.createTextNode(url.replace('webpack://', '.')))
+    elemLink.appendChild(elemAnchor)
+    elem.appendChild(elemLink)
+
+    if (!internalUrl) {
+      if (sourceDisabled && scriptLines.length !== 0) {
+        elem.appendChild(sourceCodePre(scriptLines, lineNumber, columnNumber, main))
+      } else if (!sourceDisabled && sourceLines.length !== 0) {
+        elem.appendChild(sourceCodePre(sourceLines, sourceLineNumber, sourceColumnNumber, main))
       }
-
-      trace.appendChild(elem)
+      main = false
     }
-    appendOmittedFrames()
-    container.appendChild(trace)
-
-    // Mount
-    document.body.appendChild(overlayReference = overlay)
-    errorCache = error
-    additionalCount = 0
-  }
-
-  function unmount() {
-    if (overlayReference === null) return
-    document.body.removeChild(overlayReference)
-    overlayReference = null
-  }
-
-  function isInternalFile(url) {
-    return url.indexOf('/~/') !== -1 || url.trim().indexOf(' ') !== -1
-  }
 
-  function crash(error, unhandledRejection = false) {
-    StackTraceResolve(error, CONTEXT_SIZE).then(function(resolvedFrames) {
-      if (unhandledRejection) {
-        render(error, `Unhandled Rejection (${error.name})`, error.message, resolvedFrames)
-      } else {
-        render(error, error.name, error.message, resolvedFrames)
-      }
-    }).catch(function(e) {
-      // This is another fail case (unlikely to happen)
-      // e.g. render(...) throws an error with provided arguments
-      console.log('Red box renderer error:', e)
-      render(null, 'Error', 'Unknown Error (failure to materialize)', [])
-    })
+    trace.appendChild(elem)
   }
-
-  window.onerror = function(messageOrEvent, source, lineno, colno, error) {
-    if (error == null || !(error instanceof Error) || messageOrEvent.indexOf('Script error') !== -1) {
-      crash(new Error(error || messageOrEvent))// TODO: more helpful message
+  appendOmittedFrames()
+  container.appendChild(trace)
+
+  // Mount
+  document.body.appendChild(overlayReference = overlay)
+  errorCache = error
+  additionalCount = 0
+}
+
+function unmount() {
+  if (overlayReference === null) return
+  document.body.removeChild(overlayReference)
+  overlayReference = null
+}
+
+function isInternalFile(url) {
+  return url.indexOf('/~/') !== -1 || url.trim().indexOf(' ') !== -1
+}
+
+function crash(error, unhandledRejection = false) {
+  StackTraceResolve(error, CONTEXT_SIZE).then(function(resolvedFrames) {
+    if (unhandledRejection) {
+      render(error, `Unhandled Rejection (${error.name})`, error.message, resolvedFrames)
     } else {
-      crash(error)
+      render(error, error.name, error.message, resolvedFrames)
     }
+  }).catch(function(e) {
+    // This is another fail case (unlikely to happen)
+    // e.g. render(...) throws an error with provided arguments
+    console.log('Red box renderer error:', e)
+    render(null, 'Error', 'Unknown Error (failure to materialize)', [])
+  })
+}
+
+window.onerror = function(messageOrEvent, source, lineno, colno, error) {
+  if (error == null || !(error instanceof Error) || messageOrEvent.indexOf('Script error') !== -1) {
+    crash(new Error(error || messageOrEvent))// TODO: more helpful message
+  } else {
+    crash(error)
   }
+}
 
-  let promiseHandler = function(event) {
-    if (event != null && event.reason != null) {
-      const { reason } = event
-      if (reason == null || !(reason instanceof Error)) {
-        crash(new Error(reason), true)
-      } else {
-        crash(reason, true)
-      }
+let promiseHandler = function(event) {
+  if (event != null && event.reason != null) {
+    const { reason } = event
+    if (reason == null || !(reason instanceof Error)) {
+      crash(new Error(reason), true)
     } else {
-      crash(new Error('Unknown event'), true)
+      crash(reason, true)
     }
+  } else {
+    crash(new Error('Unknown event'), true)
   }
-
-  window.addEventListener('unhandledrejection', promiseHandler)
-
-  let escapeHandler = function(event) {
-    const { key, keyCode, which } = event
-    if (key === 'Escape' || keyCode === 27 || which === 27) unmount()
-    else if (key === 'i' || keyCode === 73 || which === 73) toggleInternal()
-    else if (key === 's' || keyCode === 83 || which === 83) toggleSource()
-  }
-
-  window.addEventListener('keydown', escapeHandler)
-
-  try {
-    Error.stackTraceLimit = 50
-  } catch (e) { }
-
-  if (module.hot) {
-    module.hot.dispose(function() {
-      unmount()
-      window.removeEventListener('unhandledrejection', promiseHandler)
-      window.removeEventListener('keydown', escapeHandler)
-    })
-  }
-})()
+}
+
+window.addEventListener('unhandledrejection', promiseHandler)
+
+let escapeHandler = function(event) {
+  const { key, keyCode, which } = event
+  if (key === 'Escape' || keyCode === 27 || which === 27) unmount()
+  else if (key === 'i' || keyCode === 73 || which === 73) toggleInternal()
+  else if (key === 's' || keyCode === 83 || which === 83) toggleSource()
+}
+
+window.addEventListener('keydown', escapeHandler)
+
+try {
+  Error.stackTraceLimit = 50
+} catch (e) { }
+
+if (module.hot) {
+  module.hot.dispose(function() {
+    unmount()
+    window.removeEventListener('unhandledrejection', promiseHandler)
+    window.removeEventListener('keydown', escapeHandler)
+  })
+}

From c9982e2bb3b4f047bb5418e05523a5c21d6a38a9 Mon Sep 17 00:00:00 2001
From: Eric Koslow <ekoslow@gmail.com>
Date: Tue, 29 Nov 2016 20:17:32 -0800
Subject: [PATCH 057/120] Skip native functions

---
 packages/react-dev-utils/failFast.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index ffafd361c50..1af7c07b962 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -239,6 +239,9 @@ function render(error, name, message, resolvedFrames) {
       sourceLines
     } = frame
 
+    // Skip native functions like Array.forEach
+    if (fileName === '(native)') continue;
+
     let url
     if (sourceFileName) {
       url = sourceFileName + ':' + sourceLineNumber

From 620d0e63027c6483bdb61a6e7afb9ec84d34563c Mon Sep 17 00:00:00 2001
From: Eric Koslow <ekoslow@gmail.com>
Date: Tue, 29 Nov 2016 20:21:11 -0800
Subject: [PATCH 058/120] Extract hints div function

---
 packages/react-dev-utils/failFast.js | 21 ++++++++++++---------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 1af7c07b962..41caa4afb6b 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -185,6 +185,17 @@ function sourceCodePre(sourceLines, lineNum, columnNum, main = false) {
   return pre
 }
 
+function hintsDiv() {
+  const hints = document.createElement('div')
+  hints.appendChild(document.createTextNode(`[i] ${internalDisabled ? 'Show' : 'Hide'} internal calls`))
+  hints.appendChild(document.createTextNode('\t\t'))
+  hints.appendChild(document.createTextNode(`[s] ${sourceDisabled ? 'Hide' : 'Show'} script source`))
+  hints.appendChild(document.createTextNode('\t\t'))
+  hints.appendChild(document.createTextNode('[escape] Close'))
+  applyStyles(hints, hintsStyle)
+  return hints;
+}
+
 function render(error, name, message, resolvedFrames) {
   if (overlayReference !== null) {
     renderAdditional()
@@ -193,15 +204,7 @@ function render(error, name, message, resolvedFrames) {
   // Create overlay
   const overlay = document.createElement('div')
   applyStyles(overlay, overlayStyle)
-
-  const hints = document.createElement('div')
-  hints.appendChild(document.createTextNode(`[i] ${internalDisabled ? 'Show' : 'Hide'} internal calls`))
-  hints.appendChild(document.createTextNode('\t\t'))
-  hints.appendChild(document.createTextNode(`[s] ${sourceDisabled ? 'Hide' : 'Show'} script source`))
-  hints.appendChild(document.createTextNode('\t\t'))
-  hints.appendChild(document.createTextNode('[escape] Close'))
-  applyStyles(hints, hintsStyle)
-  overlay.appendChild(hints)
+  overlay.appendChild(hintsDiv())
 
   const container = document.createElement('div')
   applyStyles(container, containerStyle)

From 76ba68f3996c1c6a6bcdffc1ac23961439e49f70 Mon Sep 17 00:00:00 2001
From: Eric Koslow <ekoslow@gmail.com>
Date: Tue, 29 Nov 2016 20:31:53 -0800
Subject: [PATCH 059/120] Extract renderers

---
 packages/react-dev-utils/failFast.js | 88 ++++++++++++++++------------
 1 file changed, 49 insertions(+), 39 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 41caa4afb6b..6e2f330c52b 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -196,27 +196,29 @@ function hintsDiv() {
   return hints;
 }
 
-function render(error, name, message, resolvedFrames) {
-  if (overlayReference !== null) {
-    renderAdditional()
-    return
-  }
-  // Create overlay
-  const overlay = document.createElement('div')
-  applyStyles(overlay, overlayStyle)
-  overlay.appendChild(hintsDiv())
-
-  const container = document.createElement('div')
-  applyStyles(container, containerStyle)
-  overlay.appendChild(container)
+function frameDiv(functionName, url, internalUrl) {
+  const elem = document.createElement('div')
 
-  // Create header
-  const header = document.createElement('div')
-  applyStyles(header, headerStyle)
-  header.appendChild(document.createTextNode(`${name}: ${message}`))
-  container.appendChild(header)
+  const elemFunctionName = document.createElement('div')
+  if (internalUrl) {
+    applyStyles(elemFunctionName, Object.assign({}, functionNameStyle, depStyle))
+  } else {
+    applyStyles(elemFunctionName, functionNameStyle)
+  }
+  elemFunctionName.appendChild(document.createTextNode(functionName && functionName !== 'Object.<anonymous>' ? functionName : '(anonymous function)'))
+  elem.appendChild(elemFunctionName)
+
+  const elemLink = document.createElement('div')
+  applyStyles(elemLink, linkStyle)
+  const elemAnchor = document.createElement('a')
+  applyStyles(elemAnchor, anchorStyle)
+  //elemAnchor.href = url
+  elemAnchor.appendChild(document.createTextNode(url.replace('webpack://', '.')))
+  elemLink.appendChild(elemAnchor)
+  elem.appendChild(elemLink)
+}
 
-  // Show trace
+function traceDiv(resolvedFrames) {
   const trace = document.createElement('div')
   applyStyles(trace, traceStyle)
   // Firefox can't handle const due to non-compliant implementation
@@ -262,25 +264,7 @@ function render(error, name, message, resolvedFrames) {
 
     appendOmittedFrames()
 
-    const elem = document.createElement('div')
-
-    const elemFunctionName = document.createElement('div')
-    if (internalUrl) {
-      applyStyles(elemFunctionName, Object.assign({}, functionNameStyle, depStyle))
-    } else {
-      applyStyles(elemFunctionName, functionNameStyle)
-    }
-    elemFunctionName.appendChild(document.createTextNode(functionName && functionName !== 'Object.<anonymous>' ? functionName : '(anonymous function)'))
-    elem.appendChild(elemFunctionName)
-
-    const elemLink = document.createElement('div')
-    applyStyles(elemLink, linkStyle)
-    const elemAnchor = document.createElement('a')
-    applyStyles(elemAnchor, anchorStyle)
-    //elemAnchor.href = url
-    elemAnchor.appendChild(document.createTextNode(url.replace('webpack://', '.')))
-    elemLink.appendChild(elemAnchor)
-    elem.appendChild(elemLink)
+    const elem = frameDiv(functionName, url, internalUrl);
 
     if (!internalUrl) {
       if (sourceDisabled && scriptLines.length !== 0) {
@@ -294,7 +278,33 @@ function render(error, name, message, resolvedFrames) {
     trace.appendChild(elem)
   }
   appendOmittedFrames()
-  container.appendChild(trace)
+  return trace;
+}
+
+function render(error, name, message, resolvedFrames) {
+  if (overlayReference !== null) {
+    renderAdditional()
+    return
+  }
+
+  // Create overlay
+  const overlay = document.createElement('div')
+  applyStyles(overlay, overlayStyle)
+  overlay.appendChild(hintsDiv())
+
+  // Create container
+  const container = document.createElement('div')
+  applyStyles(container, containerStyle)
+  overlay.appendChild(container)
+
+  // Create header
+  const header = document.createElement('div')
+  applyStyles(header, headerStyle)
+  header.appendChild(document.createTextNode(`${name}: ${message}`))
+  container.appendChild(header)
+
+  // Create trace
+  container.appendChild(traceDiv(resolvedFrames))
 
   // Mount
   document.body.appendChild(overlayReference = overlay)

From 5c6777ad097a510fd07925ea958254db9ba4b533 Mon Sep 17 00:00:00 2001
From: Eric Koslow <ekoslow@gmail.com>
Date: Tue, 29 Nov 2016 20:37:10 -0800
Subject: [PATCH 060/120] Refacor var names

---
 packages/react-dev-utils/failFast.js | 42 ++++++++++++++++++----------
 1 file changed, 27 insertions(+), 15 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 6e2f330c52b..377884a6fcf 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -197,25 +197,37 @@ function hintsDiv() {
 }
 
 function frameDiv(functionName, url, internalUrl) {
-  const elem = document.createElement('div')
+  const frame = document.createElement('div')
+  const frameFunctionName = document.createElement('div')
+
+  let cleanedFunctionName;
+  if (!functionName || functionName === 'Object.<anonymous>') {
+    cleanedFunctionName = '(anonymous function)'
+  } else {
+    cleanedFunctionName = functionName
+  }
+
+  let cleanedUrl = url.replace('webpack://', '.');
 
-  const elemFunctionName = document.createElement('div')
   if (internalUrl) {
-    applyStyles(elemFunctionName, Object.assign({}, functionNameStyle, depStyle))
+    applyStyles(frameFunctionName, Object.assign({}, functionNameStyle, depStyle))
   } else {
-    applyStyles(elemFunctionName, functionNameStyle)
+    applyStyles(frameFunctionName, functionNameStyle)
   }
-  elemFunctionName.appendChild(document.createTextNode(functionName && functionName !== 'Object.<anonymous>' ? functionName : '(anonymous function)'))
-  elem.appendChild(elemFunctionName)
-
-  const elemLink = document.createElement('div')
-  applyStyles(elemLink, linkStyle)
-  const elemAnchor = document.createElement('a')
-  applyStyles(elemAnchor, anchorStyle)
-  //elemAnchor.href = url
-  elemAnchor.appendChild(document.createTextNode(url.replace('webpack://', '.')))
-  elemLink.appendChild(elemAnchor)
-  elem.appendChild(elemLink)
+
+  frameFunctionName.appendChild(document.createTextNode(cleanedFunctionName))
+  frame.appendChild(frameFunctionName)
+
+  const frameLink = document.createElement('div')
+  applyStyles(frameLink, linkStyle)
+  const frameAnchor = document.createElement('a')
+  applyStyles(frameAnchor, anchorStyle)
+  //frameAnchor.href = url
+  frameAnchor.appendChild(document.createTextNode(cleanedUrl))
+  frameLink.appendChild(frameAnchor)
+  frame.appendChild(frameLink)
+
+  return frame;
 }
 
 function traceDiv(resolvedFrames) {

From a6cda06faf71f42440247dfcd4ad3493caa5b73e Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Wed, 30 Nov 2016 20:39:38 -0500
Subject: [PATCH 061/120] If source is disabled, don't use the line.

---
 packages/react-dev-utils/failFast.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 377884a6fcf..0decd344b1c 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -193,21 +193,21 @@ function hintsDiv() {
   hints.appendChild(document.createTextNode('\t\t'))
   hints.appendChild(document.createTextNode('[escape] Close'))
   applyStyles(hints, hintsStyle)
-  return hints;
+  return hints
 }
 
 function frameDiv(functionName, url, internalUrl) {
   const frame = document.createElement('div')
   const frameFunctionName = document.createElement('div')
 
-  let cleanedFunctionName;
+  let cleanedFunctionName
   if (!functionName || functionName === 'Object.<anonymous>') {
     cleanedFunctionName = '(anonymous function)'
   } else {
     cleanedFunctionName = functionName
   }
 
-  let cleanedUrl = url.replace('webpack://', '.');
+  let cleanedUrl = url.replace('webpack://', '.')
 
   if (internalUrl) {
     applyStyles(frameFunctionName, Object.assign({}, functionNameStyle, depStyle))
@@ -227,7 +227,7 @@ function frameDiv(functionName, url, internalUrl) {
   frameLink.appendChild(frameAnchor)
   frame.appendChild(frameLink)
 
-  return frame;
+  return frame
 }
 
 function traceDiv(resolvedFrames) {
@@ -257,10 +257,10 @@ function traceDiv(resolvedFrames) {
     } = frame
 
     // Skip native functions like Array.forEach
-    if (fileName === '(native)') continue;
+    if (fileName === '(native)') continue
 
     let url
-    if (sourceFileName) {
+    if (!sourceDisabled && sourceFileName) {
       url = sourceFileName + ':' + sourceLineNumber
       if (sourceColumnNumber) url += ':' + sourceColumnNumber
     } else {
@@ -276,7 +276,7 @@ function traceDiv(resolvedFrames) {
 
     appendOmittedFrames()
 
-    const elem = frameDiv(functionName, url, internalUrl);
+    const elem = frameDiv(functionName, url, internalUrl)
 
     if (!internalUrl) {
       if (sourceDisabled && scriptLines.length !== 0) {
@@ -290,7 +290,7 @@ function traceDiv(resolvedFrames) {
     trace.appendChild(elem)
   }
   appendOmittedFrames()
-  return trace;
+  return trace
 }
 
 function render(error, name, message, resolvedFrames) {

From c0315988d8b02156660f8da296c96579158cf3b8 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Fri, 2 Dec 2016 20:25:05 -0500
Subject: [PATCH 062/120] Allow toggle between source

---
 packages/react-dev-utils/failFast.js  | 209 ++++++++++++++++----------
 packages/react-dev-utils/package.json |   2 +-
 2 files changed, 134 insertions(+), 77 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 0decd344b1c..78dc5a15f4a 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -89,15 +89,24 @@ const omittedFramesStyle = {
 const preStyle = {
   display: 'block',
   padding: '0.5em',
-  margin: '1.5em 0',
+  'margin-top': '1.5em',
+  'margin-bottom': '0px',
   'overflow-x': 'auto',
   'font-size': '1.1em'
 }
 
+const toggleStyle = {
+  'margin-bottom': '1.5em'
+}
+
 const codeStyle = {
   'font-family': 'Consolas, Menlo, monospace',
 }
 
+const hiddenStyle = {
+  display: 'none'
+}
+
 function calcWidth(width) {
   if (width >= 1200) return '1170px'
   if (width >= 992) return '970px'
@@ -120,26 +129,8 @@ function applyStyles(element, styles) {
 }
 
 let overlayReference = null
-let errorCache = null
+let frameSettings = []
 let additionalCount = 0
-let internalDisabled = true
-let sourceDisabled = false
-
-function toggleInternal() {
-  internalDisabled = !internalDisabled
-  if (errorCache != null) {
-    unmount()
-    crash(errorCache)
-  }
-}
-
-function toggleSource() {
-  sourceDisabled = !sourceDisabled
-  if (errorCache != null) {
-    unmount()
-    crash(errorCache)
-  }
-}
 
 function renderAdditional() {
   ++additionalCount
@@ -187,10 +178,6 @@ function sourceCodePre(sourceLines, lineNum, columnNum, main = false) {
 
 function hintsDiv() {
   const hints = document.createElement('div')
-  hints.appendChild(document.createTextNode(`[i] ${internalDisabled ? 'Show' : 'Hide'} internal calls`))
-  hints.appendChild(document.createTextNode('\t\t'))
-  hints.appendChild(document.createTextNode(`[s] ${sourceDisabled ? 'Hide' : 'Show'} script source`))
-  hints.appendChild(document.createTextNode('\t\t'))
   hints.appendChild(document.createTextNode('[escape] Close'))
   applyStyles(hints, hintsStyle)
   return hints
@@ -230,66 +217,138 @@ function frameDiv(functionName, url, internalUrl) {
   return frame
 }
 
-function traceDiv(resolvedFrames) {
-  const trace = document.createElement('div')
-  applyStyles(trace, traceStyle)
-  // Firefox can't handle const due to non-compliant implementation
-  // Revisit Jan 2016
-  // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
-  // https://bugzilla.mozilla.org/show_bug.cgi?id=1101653
-  let omittedFramesCount = 0
-  const appendOmittedFrames = () => {
-    if (!omittedFramesCount) return
-    const omittedFrames = document.createElement('div')
-    omittedFrames.appendChild(document.createTextNode(`---[ ${omittedFramesCount} internal calls hidden ]---`))
-    applyStyles(omittedFrames, omittedFramesStyle)
-    trace.appendChild(omittedFrames)
-    omittedFramesCount = 0
+function traceFrame(frameSetting, frame, critical, omits, parentContainer) {
+  const { compiled } = frameSetting
+  const {
+    functionName,
+    fileName, lineNumber, columnNumber,
+    scriptLines,
+    sourceFileName, sourceLineNumber, sourceColumnNumber,
+    sourceLines
+  } = frame
+
+  // Skip native functions like Array.forEach
+  if (fileName === '(native)') return
+
+  let url
+  if (!compiled && sourceFileName) {
+    url = sourceFileName + ':' + sourceLineNumber
+    if (sourceColumnNumber) url += ':' + sourceColumnNumber
+  } else {
+    url = fileName + ':' + lineNumber
+    if (columnNumber) url += ':' + columnNumber
   }
-  let main = true
-  for (let frame of resolvedFrames) {
-    const {
-      functionName,
-      fileName, lineNumber, columnNumber,
-      scriptLines,
-      sourceFileName, sourceLineNumber, sourceColumnNumber,
-      sourceLines
-    } = frame
-
-    // Skip native functions like Array.forEach
-    if (fileName === '(native)') continue
-
-    let url
-    if (!sourceDisabled && sourceFileName) {
-      url = sourceFileName + ':' + sourceLineNumber
-      if (sourceColumnNumber) url += ':' + sourceColumnNumber
-    } else {
-      url = fileName + ':' + lineNumber
-      if (columnNumber) url += ':' + columnNumber
+
+  let needsHidden = false
+  const internalUrl = isInternalFile(url)
+  if (internalUrl) {
+    ++omits.value
+    needsHidden = true
+  } else {
+    if (omits.value > 0) {
+      const omittedFrames = document.createElement('div')
+      omittedFrames.appendChild(document.createTextNode(`${omits.value } stack frames where omitted.`))
+      //TODO: ability to expand omitted frames!
+      /*omittedFrames.appendChild(document.createElement('br'))
+      omittedFrames.appendChild(document.createTextNode(`[Click to expand]`))*/
+      applyStyles(omittedFrames, omittedFramesStyle)
+      parentContainer.appendChild(omittedFrames)
     }
+    omits.value = 0
+  }
 
-    const internalUrl = isInternalFile(url)
-    if (internalUrl && internalDisabled) {
-      omittedFramesCount++
-      continue
+  const elem = frameDiv(functionName, url, internalUrl)
+  if (needsHidden) applyStyles(elem, hiddenStyle)
+
+  let hasSource = false
+  if (!internalUrl) {
+    if (compiled && scriptLines.length !== 0) {
+      elem.appendChild(sourceCodePre(scriptLines, lineNumber, columnNumber, critical))
+      hasSource = true
+    } else if (!compiled && sourceLines.length !== 0) {
+      elem.appendChild(sourceCodePre(sourceLines, sourceLineNumber, sourceColumnNumber, critical))
+      hasSource = true
     }
+  }
 
-    appendOmittedFrames()
+  return { elem, hasSource }
+}
 
-    const elem = frameDiv(functionName, url, internalUrl)
+function getAnchor(text, call) {
+  const anchor = document.createElement('a')
+  anchor.href = '#'
+  applyStyles(anchor, anchorStyle)
+  anchor.appendChild(document.createTextNode(text))
+  anchor.addEventListener('click', e => {
+    e.preventDefault()
+    e.target.blur()
 
-    if (!internalUrl) {
-      if (sourceDisabled && scriptLines.length !== 0) {
-        elem.appendChild(sourceCodePre(scriptLines, lineNumber, columnNumber, main))
-      } else if (!sourceDisabled && sourceLines.length !== 0) {
-        elem.appendChild(sourceCodePre(sourceLines, sourceLineNumber, sourceColumnNumber, main))
+    call()
+  })
+  return anchor
+}
+
+function lazyFrame(parent, factory, lIndex) {
+  const fac = factory()
+  if (fac == null) return
+  const { hasSource, elem } = fac
+
+  const elemWrapper = document.createElement('div')
+  elemWrapper.appendChild(elem)
+
+  const compiledDiv = document.createElement('div')
+  applyStyles(compiledDiv, toggleStyle)
+  if (hasSource) {
+    const sourceAnchor = getAnchor('Source', () => {
+      const o = frameSettings[lIndex]
+      if (o) o.compiled = false
+
+      const next = lazyFrame(parent, factory, lIndex)
+      if (next != null) {
+        parent.insertBefore(next, elemWrapper)
+        parent.removeChild(elemWrapper)
       }
-      main = false
-    }
+    })
+    const compiledAnchor = getAnchor('Compiled', () => {
+      const o = frameSettings[lIndex]
+      if (o) o.compiled = true
+
+      const next = lazyFrame(parent, factory, lIndex)
+      if (next != null) {
+        parent.insertBefore(next, elemWrapper)
+        parent.removeChild(elemWrapper)
+      }
+    })
+    compiledDiv.appendChild(sourceAnchor)
+    compiledDiv.appendChild(document.createTextNode(' <-> '))
+    compiledDiv.appendChild(compiledAnchor)
+  }
+  elemWrapper.appendChild(compiledDiv)
+
+  return elemWrapper
+}
+
+function traceDiv(resolvedFrames) {
+  const trace = document.createElement('div')
+  applyStyles(trace, traceStyle)
 
+  let index = 0
+  let critical = true
+  const omits = { value: 0 }
+  for (let frame of resolvedFrames) {
+    const lIndex = index++
+    const elem = lazyFrame(
+      trace,
+      traceFrame.bind(undefined, frameSettings[lIndex], frame, critical, omits, trace),
+      lIndex
+    )
+    if (elem == null) continue
+    critical = false
     trace.appendChild(elem)
   }
-  appendOmittedFrames()
+  //TODO: fix this
+  omits.value = 0
+
   return trace
 }
 
@@ -320,7 +379,6 @@ function render(error, name, message, resolvedFrames) {
 
   // Mount
   document.body.appendChild(overlayReference = overlay)
-  errorCache = error
   additionalCount = 0
 }
 
@@ -336,6 +394,7 @@ function isInternalFile(url) {
 
 function crash(error, unhandledRejection = false) {
   StackTraceResolve(error, CONTEXT_SIZE).then(function(resolvedFrames) {
+    frameSettings = resolvedFrames.map(() => { return { compiled: false } })
     if (unhandledRejection) {
       render(error, `Unhandled Rejection (${error.name})`, error.message, resolvedFrames)
     } else {
@@ -375,8 +434,6 @@ window.addEventListener('unhandledrejection', promiseHandler)
 let escapeHandler = function(event) {
   const { key, keyCode, which } = event
   if (key === 'Escape' || keyCode === 27 || which === 27) unmount()
-  else if (key === 'i' || keyCode === 73 || which === 73) toggleInternal()
-  else if (key === 's' || keyCode === 83 || which === 83) toggleSource()
 }
 
 window.addEventListener('keydown', escapeHandler)
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 3a9646aa06b..6c9af03260c 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -32,7 +32,7 @@
     "html-entities": "1.2.0",
     "opn": "4.0.2",
     "sockjs-client": "1.0.3",
-    "stacktrace-resolve": "0.1.2",
+    "stacktrace-resolve": "0.1.3",
     "strip-ansi": "3.0.1"
   }
 }

From 3cc4b4231f40052364bebae5bdccd42a403042e9 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Fri, 2 Dec 2016 22:10:40 -0500
Subject: [PATCH 063/120] Allow bundles to be expanded

---
 packages/react-dev-utils/failFast.js | 26 +++++++++++++++++++-------
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 78dc5a15f4a..56485cf038a 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -217,7 +217,7 @@ function frameDiv(functionName, url, internalUrl) {
   return frame
 }
 
-function traceFrame(frameSetting, frame, critical, omits, parentContainer) {
+function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentContainer) {
   const { compiled } = frameSetting
   const {
     functionName,
@@ -248,17 +248,29 @@ function traceFrame(frameSetting, frame, critical, omits, parentContainer) {
     if (omits.value > 0) {
       const omittedFrames = document.createElement('div')
       omittedFrames.appendChild(document.createTextNode(`${omits.value } stack frames where omitted.`))
-      //TODO: ability to expand omitted frames!
-      /*omittedFrames.appendChild(document.createElement('br'))
-      omittedFrames.appendChild(document.createTextNode(`[Click to expand]`))*/
+      omittedFrames.appendChild(document.createElement('br'))
+      omittedFrames.appendChild(document.createTextNode(`[Click to expand]`))
+      omittedFrames.addEventListener('click', e => {
+        document.getElementsByName(`bundle-${omitBundle}`).forEach(n => {
+          if (n.style.display) {
+            n.style.display = ''
+          } else {
+            n.style.display = 'none'
+          }
+        })
+      })
       applyStyles(omittedFrames, omittedFramesStyle)
       parentContainer.appendChild(omittedFrames)
+      ++omits.bundle
     }
     omits.value = 0
   }
 
   const elem = frameDiv(functionName, url, internalUrl)
-  if (needsHidden) applyStyles(elem, hiddenStyle)
+  if (needsHidden) {
+    applyStyles(elem, hiddenStyle)
+    elem.setAttribute('name', `bundle-${omitBundle}`)
+  }
 
   let hasSource = false
   if (!internalUrl) {
@@ -334,12 +346,12 @@ function traceDiv(resolvedFrames) {
 
   let index = 0
   let critical = true
-  const omits = { value: 0 }
+  const omits = { value: 0, bundle: 1 }
   for (let frame of resolvedFrames) {
     const lIndex = index++
     const elem = lazyFrame(
       trace,
-      traceFrame.bind(undefined, frameSettings[lIndex], frame, critical, omits, trace),
+      traceFrame.bind(undefined, frameSettings[lIndex], frame, critical, omits, omits.bundle, trace),
       lIndex
     )
     if (elem == null) continue

From b787c3108ec539af09b0ddcb9faba30ed21a5d45 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Fri, 2 Dec 2016 22:11:07 -0500
Subject: [PATCH 064/120] Wow, how did I let this one slip?

---
 packages/react-dev-utils/failFast.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 56485cf038a..177e4fbd1a3 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -247,7 +247,7 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
   } else {
     if (omits.value > 0) {
       const omittedFrames = document.createElement('div')
-      omittedFrames.appendChild(document.createTextNode(`${omits.value } stack frames where omitted.`))
+      omittedFrames.appendChild(document.createTextNode(`${omits.value } stack frames were omitted.`))
       omittedFrames.appendChild(document.createElement('br'))
       omittedFrames.appendChild(document.createTextNode(`[Click to expand]`))
       omittedFrames.addEventListener('click', e => {

From b05762f7fb509cf84f1d9c3861466c46dab92677 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Fri, 2 Dec 2016 22:18:16 -0500
Subject: [PATCH 065/120] Toggle text for UX/DX

---
 packages/react-dev-utils/failFast.js | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 177e4fbd1a3..8aa40970149 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -247,17 +247,27 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
   } else {
     if (omits.value > 0) {
       const omittedFrames = document.createElement('div')
-      omittedFrames.appendChild(document.createTextNode(`${omits.value } stack frames were omitted.`))
+      const text1 = document.createTextNode(`${omits.value} stack frames were omitted.`)
+      const text2 = document.createTextNode(`[Click to expand]`)
+      omittedFrames.appendChild(text1)
       omittedFrames.appendChild(document.createElement('br'))
-      omittedFrames.appendChild(document.createTextNode(`[Click to expand]`))
+      omittedFrames.appendChild(text2)
       omittedFrames.addEventListener('click', e => {
+        const hide = text2.textContent.match(/collapse/)
         document.getElementsByName(`bundle-${omitBundle}`).forEach(n => {
-          if (n.style.display) {
-            n.style.display = ''
-          } else {
+          if (hide) {
             n.style.display = 'none'
+          } else {
+            n.style.display = ''
           }
         })
+        if (hide) {
+          text1.textContent = text1.textContent.replace(/will be/, 'were')
+          text2.textContent = text2.textContent.replace(/collapse/, 'expand')
+        } else {
+          text1.textContent = text1.textContent.replace(/were/, 'will be')
+          text2.textContent = text2.textContent.replace(/expand/, 'collapse')
+        }
       })
       applyStyles(omittedFrames, omittedFramesStyle)
       parentContainer.appendChild(omittedFrames)

From 2ec79cab67f947a52b96b8bc27e93265a3df9ee6 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Fri, 2 Dec 2016 22:20:51 -0500
Subject: [PATCH 066/120] Make it so clicking Close unmounts the error
 component

---
 packages/react-dev-utils/failFast.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 8aa40970149..5db50863523 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -179,6 +179,9 @@ function sourceCodePre(sourceLines, lineNum, columnNum, main = false) {
 function hintsDiv() {
   const hints = document.createElement('div')
   hints.appendChild(document.createTextNode('[escape] Close'))
+  hints.addEventListener('click', e => {
+    unmount()
+  })
   applyStyles(hints, hintsStyle)
   return hints
 }

From 5aea0a955d65c2707bd740b601818cd6410a3c47 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Fri, 2 Dec 2016 22:43:28 -0500
Subject: [PATCH 067/120] Do not allow hot reloading once an error is thrown

---
 packages/react-dev-utils/failFast.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 5db50863523..2b10548235d 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -418,6 +418,8 @@ function isInternalFile(url) {
 }
 
 function crash(error, unhandledRejection = false) {
+  if (module.hot) module.hot.decline()
+
   StackTraceResolve(error, CONTEXT_SIZE).then(function(resolvedFrames) {
     frameSettings = resolvedFrames.map(() => { return { compiled: false } })
     if (unhandledRejection) {

From 81fce15d1a8919be19cfae270bd72276231d3ef7 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 3 Dec 2016 00:03:11 -0500
Subject: [PATCH 068/120] Do not wrap lines for small displays

---
 packages/react-dev-utils/failFast.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 2b10548235d..414cbf28a6c 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -23,7 +23,7 @@ const overlayStyle = {
   'z-index': 1337,
   'font-family': 'Consolas, Menlo, monospace',
   color: black,
-  'white-space': 'pre-wrap',
+  'white-space': 'pre',
   overflow: 'auto',
   'box-shadow': '0 0 6px 0 rgba(0, 0, 0, 0.5)',
   'line-height': 1.5,

From 00a9048a0fdd0fe74cc472a6e405d37df63b47f7 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 3 Dec 2016 13:20:22 -0500
Subject: [PATCH 069/120] Fix toggle when additional errors happen

---
 packages/react-dev-utils/failFast.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 414cbf28a6c..84c1255045f 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -382,6 +382,7 @@ function render(error, name, message, resolvedFrames) {
     renderAdditional()
     return
   }
+  frameSettings = resolvedFrames.map(() => { return { compiled: false } })
 
   // Create overlay
   const overlay = document.createElement('div')
@@ -421,7 +422,6 @@ function crash(error, unhandledRejection = false) {
   if (module.hot) module.hot.decline()
 
   StackTraceResolve(error, CONTEXT_SIZE).then(function(resolvedFrames) {
-    frameSettings = resolvedFrames.map(() => { return { compiled: false } })
     if (unhandledRejection) {
       render(error, `Unhandled Rejection (${error.name})`, error.message, resolvedFrames)
     } else {

From ede65a6e42822b0bcfb9462475baf835a402879b Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 3 Dec 2016 13:38:57 -0500
Subject: [PATCH 070/120] Make the close a button

---
 packages/react-dev-utils/failFast.js | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 84c1255045f..9f82facfae2 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -45,6 +45,14 @@ const hintsStyle = {
   color: darkGray
 }
 
+const hintStyle = {
+  'border-radius': '0.3em',
+  padding: '0.5em 1em',
+  border: '1px solid',
+  'border-color': darkGray,
+  cursor: 'pointer'
+}
+
 const headerStyle = {
   'font-size': '1.7em',
   'font-weight': 'bold',
@@ -176,13 +184,21 @@ function sourceCodePre(sourceLines, lineNum, columnNum, main = false) {
   return pre
 }
 
+function createHint(hint) {
+  const span = document.createElement('span')
+  span.appendChild(document.createTextNode(hint))
+  applyStyles(span, hintStyle)
+  return span
+}
+
 function hintsDiv() {
   const hints = document.createElement('div')
-  hints.appendChild(document.createTextNode('[escape] Close'))
-  hints.addEventListener('click', e => {
+  applyStyles(hints, hintsStyle)
+  const close = createHint('Close')
+  close.addEventListener('click', e => {
     unmount()
   })
-  applyStyles(hints, hintsStyle)
+  hints.appendChild(close)
   return hints
 }
 

From 80130ed63b57399f7cd641d38703bdb1f8696b23 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 4 Dec 2016 00:45:25 -0500
Subject: [PATCH 071/120] Capture and store errors

---
 packages/react-dev-utils/failFast.js | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 9f82facfae2..03e46dcbbb8 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -137,14 +137,13 @@ function applyStyles(element, styles) {
 }
 
 let overlayReference = null
+let capturedErrors = []
 let frameSettings = []
-let additionalCount = 0
 
 function renderAdditional() {
-  ++additionalCount
   const title = overlayReference.childNodes[1].childNodes[0]
   const children = title.childNodes
-  const text = document.createTextNode(` (+${additionalCount} more)`)
+  const text = document.createTextNode(` (viewing 1/${capturedErrors.length})`)
   if (children.length < 2) {
     title.appendChild(text)
   } else {
@@ -421,13 +420,13 @@ function render(error, name, message, resolvedFrames) {
 
   // Mount
   document.body.appendChild(overlayReference = overlay)
-  additionalCount = 0
 }
 
 function unmount() {
   if (overlayReference === null) return
   document.body.removeChild(overlayReference)
   overlayReference = null
+  capturedErrors = []
 }
 
 function isInternalFile(url) {
@@ -438,6 +437,7 @@ function crash(error, unhandledRejection = false) {
   if (module.hot) module.hot.decline()
 
   StackTraceResolve(error, CONTEXT_SIZE).then(function(resolvedFrames) {
+    capturedErrors.push({ error, unhandledRejection })
     if (unhandledRejection) {
       render(error, `Unhandled Rejection (${error.name})`, error.message, resolvedFrames)
     } else {
@@ -447,7 +447,8 @@ function crash(error, unhandledRejection = false) {
     // This is another fail case (unlikely to happen)
     // e.g. render(...) throws an error with provided arguments
     console.log('Red box renderer error:', e)
-    render(null, 'Error', 'Unknown Error (failure to materialize)', [])
+    unmount()
+    render(null, 'Error', 'There is an error with red box. *Please* report this (see console).', [])
   })
 }
 

From 4621cafff32d1e82ff1b6253637d27a44e5a337d Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 4 Dec 2016 00:50:03 -0500
Subject: [PATCH 072/120] Dispose on render; move additional logic

---
 packages/react-dev-utils/failFast.js | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 03e46dcbbb8..c093f0af2c5 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -393,10 +393,8 @@ function traceDiv(resolvedFrames) {
 }
 
 function render(error, name, message, resolvedFrames) {
-  if (overlayReference !== null) {
-    renderAdditional()
-    return
-  }
+  dispose()
+
   frameSettings = resolvedFrames.map(() => { return { compiled: false } })
 
   // Create overlay
@@ -422,10 +420,14 @@ function render(error, name, message, resolvedFrames) {
   document.body.appendChild(overlayReference = overlay)
 }
 
-function unmount() {
+function dispose() {
   if (overlayReference === null) return
   document.body.removeChild(overlayReference)
   overlayReference = null
+}
+
+function unmount() {
+  dispose()
   capturedErrors = []
 }
 
@@ -438,10 +440,13 @@ function crash(error, unhandledRejection = false) {
 
   StackTraceResolve(error, CONTEXT_SIZE).then(function(resolvedFrames) {
     capturedErrors.push({ error, unhandledRejection })
-    if (unhandledRejection) {
-      render(error, `Unhandled Rejection (${error.name})`, error.message, resolvedFrames)
-    } else {
-      render(error, error.name, error.message, resolvedFrames)
+    if (overlayReference !== null) renderAdditional()
+    else {
+      if (unhandledRejection) {
+        render(error, `Unhandled Rejection (${error.name})`, error.message, resolvedFrames)
+      } else {
+        render(error, error.name, error.message, resolvedFrames)
+      }
     }
   }).catch(function(e) {
     // This is another fail case (unlikely to happen)

From 8c24f3d1fb7c5693f4c547820937a3c7e40d2257 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 4 Dec 2016 00:55:55 -0500
Subject: [PATCH 073/120] Only make code not wrap

---
 packages/react-dev-utils/failFast.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index c093f0af2c5..21640d9da7b 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -23,7 +23,7 @@ const overlayStyle = {
   'z-index': 1337,
   'font-family': 'Consolas, Menlo, monospace',
   color: black,
-  'white-space': 'pre',
+  'white-space': 'pre-wrap',
   overflow: 'auto',
   'box-shadow': '0 0 6px 0 rgba(0, 0, 0, 0.5)',
   'line-height': 1.5,
@@ -88,6 +88,7 @@ const primaryErrorStyle = {
 const secondaryErrorStyle = {
   'background-color': yellow
 }
+
 const omittedFramesStyle = {
   color: black,
   'font-size': '0.9em',
@@ -100,7 +101,8 @@ const preStyle = {
   'margin-top': '1.5em',
   'margin-bottom': '0px',
   'overflow-x': 'auto',
-  'font-size': '1.1em'
+  'font-size': '1.1em',
+  'white-space': 'pre',
 }
 
 const toggleStyle = {

From c18f09a8df57c3a5372b72b169b951fe540c2b90 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 4 Dec 2016 00:56:09 -0500
Subject: [PATCH 074/120] Switch to a view-by-index method

---
 packages/react-dev-utils/failFast.js | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 21640d9da7b..cb1ebd42aaf 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -140,6 +140,7 @@ function applyStyles(element, styles) {
 
 let overlayReference = null
 let capturedErrors = []
+let viewIndex = -1
 let frameSettings = []
 
 function renderAdditional() {
@@ -431,24 +432,30 @@ function dispose() {
 function unmount() {
   dispose()
   capturedErrors = []
+  viewIndex = -1
 }
 
 function isInternalFile(url) {
   return url.indexOf('/~/') !== -1 || url.trim().indexOf(' ') !== -1
 }
 
+function renderError(index) {
+  const { error, unhandledRejection, resolvedFrames } = capturedErrors[index]
+  if (unhandledRejection) {
+    render(error, `Unhandled Rejection (${error.name})`, error.message, resolvedFrames)
+  } else {
+    render(error, error.name, error.message, resolvedFrames)
+  }
+}
+
 function crash(error, unhandledRejection = false) {
   if (module.hot) module.hot.decline()
 
   StackTraceResolve(error, CONTEXT_SIZE).then(function(resolvedFrames) {
-    capturedErrors.push({ error, unhandledRejection })
+    capturedErrors.push({ error, unhandledRejection, resolvedFrames })
     if (overlayReference !== null) renderAdditional()
     else {
-      if (unhandledRejection) {
-        render(error, `Unhandled Rejection (${error.name})`, error.message, resolvedFrames)
-      } else {
-        render(error, error.name, error.message, resolvedFrames)
-      }
+      renderError(viewIndex = 0)
     }
   }).catch(function(e) {
     // This is another fail case (unlikely to happen)

From f95fe25304ac572018c7b4cfe2b6d3af1050256a Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 4 Dec 2016 01:00:54 -0500
Subject: [PATCH 075/120] Allow user to switch between errors with arrow keys

---
 packages/react-dev-utils/failFast.js | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index cb1ebd42aaf..192beb17f13 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -446,6 +446,7 @@ function renderError(index) {
   } else {
     render(error, error.name, error.message, resolvedFrames)
   }
+  viewIndex = index
 }
 
 function crash(error, unhandledRejection = false) {
@@ -466,6 +467,18 @@ function crash(error, unhandledRejection = false) {
   })
 }
 
+function switchError(offset) {
+  try {
+    const nextView = viewIndex + offset
+    if (nextView < 0 || nextView >= capturedErrors.length) return
+    renderError(nextView)
+  } catch (e) {
+    console.log('Red box renderer error:', e)
+    unmount()
+    render(null, 'Error', 'There is an error with red box. *Please* report this (see console).', [])
+  }
+}
+
 window.onerror = function(messageOrEvent, source, lineno, colno, error) {
   if (error == null || !(error instanceof Error) || messageOrEvent.indexOf('Script error') !== -1) {
     crash(new Error(error || messageOrEvent))// TODO: more helpful message
@@ -492,6 +505,8 @@ window.addEventListener('unhandledrejection', promiseHandler)
 let escapeHandler = function(event) {
   const { key, keyCode, which } = event
   if (key === 'Escape' || keyCode === 27 || which === 27) unmount()
+  else if (key === 'ArrowLeft' || keyCode === 37 || which === 37) switchError(-1)
+  else if (key === 'ArrowRight' || keyCode === 39 || which === 39) switchError(1)
 }
 
 window.addEventListener('keydown', escapeHandler)

From 4d3f404dc4fc3f66852e1d28cda10603ab85860c Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 4 Dec 2016 01:04:59 -0500
Subject: [PATCH 076/120] Fix text while switching between errors

---
 packages/react-dev-utils/failFast.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 192beb17f13..537ede92fa6 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -146,7 +146,7 @@ let frameSettings = []
 function renderAdditional() {
   const title = overlayReference.childNodes[1].childNodes[0]
   const children = title.childNodes
-  const text = document.createTextNode(` (viewing 1/${capturedErrors.length})`)
+  const text = document.createTextNode(` (viewing ${viewIndex + 1}/${capturedErrors.length})`)
   if (children.length < 2) {
     title.appendChild(text)
   } else {
@@ -421,6 +421,8 @@ function render(error, name, message, resolvedFrames) {
 
   // Mount
   document.body.appendChild(overlayReference = overlay)
+
+  if (capturedErrors.length > 1) renderAdditional()
 }
 
 function dispose() {
@@ -440,13 +442,13 @@ function isInternalFile(url) {
 }
 
 function renderError(index) {
+  viewIndex = index
   const { error, unhandledRejection, resolvedFrames } = capturedErrors[index]
   if (unhandledRejection) {
     render(error, `Unhandled Rejection (${error.name})`, error.message, resolvedFrames)
   } else {
     render(error, error.name, error.message, resolvedFrames)
   }
-  viewIndex = index
 }
 
 function crash(error, unhandledRejection = false) {

From 048824f7adfa6b811e5b484d4551db941956fd19 Mon Sep 17 00:00:00 2001
From: Nic Aitch <nic@nicinabox.com>
Date: Sun, 4 Dec 2016 14:55:47 -0600
Subject: [PATCH 077/120] Update close button style

---
 packages/react-dev-utils/failFast.js | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 537ede92fa6..3874e5f4d62 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -46,13 +46,20 @@ const hintsStyle = {
 }
 
 const hintStyle = {
-  'border-radius': '0.3em',
   padding: '0.5em 1em',
-  border: '1px solid',
-  'border-color': darkGray,
   cursor: 'pointer'
 }
 
+const closeButtonStyle = {
+  'font-size': '26px',
+  color: black,
+  padding: '0.5em 1em',
+  cursor: 'pointer',
+  position: 'absolute',
+  right: 0,
+  top: 0,
+}
+
 const headerStyle = {
   'font-size': '1.7em',
   'font-weight': 'bold',
@@ -196,10 +203,12 @@ function createHint(hint) {
 function hintsDiv() {
   const hints = document.createElement('div')
   applyStyles(hints, hintsStyle)
-  const close = createHint('Close')
+
+  const close = createHint('×')
   close.addEventListener('click', e => {
     unmount()
   })
+  applyStyles(close, closeButtonStyle)
   hints.appendChild(close)
   return hints
 }

From 3a1bfc871ab7f61e6e2289a8cf12d0e4a9fbda40 Mon Sep 17 00:00:00 2001
From: Nic Aitch <nic@nicinabox.com>
Date: Sun, 4 Dec 2016 15:33:51 -0600
Subject: [PATCH 078/120] Render additional errors at top

---
 packages/react-dev-utils/failFast.js | 29 ++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 3874e5f4d62..34e4d4b37af 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -60,6 +60,11 @@ const closeButtonStyle = {
   top: 0,
 }
 
+const additionalStyle = {
+  'margin-bottom': '1.5em',
+  'margin-top': '-4em',
+}
+
 const headerStyle = {
   'font-size': '1.7em',
   'font-weight': 'bold',
@@ -146,20 +151,20 @@ function applyStyles(element, styles) {
 }
 
 let overlayReference = null
+let additionalReference = null
 let capturedErrors = []
 let viewIndex = -1
 let frameSettings = []
 
 function renderAdditional() {
-  const title = overlayReference.childNodes[1].childNodes[0]
-  const children = title.childNodes
-  const text = document.createTextNode(` (viewing ${viewIndex + 1}/${capturedErrors.length})`)
-  if (children.length < 2) {
-    title.appendChild(text)
-  } else {
-    title.removeChild(children[children.length - 1])
-    title.appendChild(text)
+  let text = ' '
+  if (capturedErrors.length > 1) {
+    text = `Errors ${viewIndex + 1} of ${capturedErrors.length}`
   }
+  if (additionalReference.lastChild) {
+    additionalReference.removeChild(additionalReference.lastChild)
+  }
+  additionalReference.appendChild(document.createTextNode(text))
 }
 
 function sourceCodePre(sourceLines, lineNum, columnNum, main = false) {
@@ -419,6 +424,12 @@ function render(error, name, message, resolvedFrames) {
   applyStyles(container, containerStyle)
   overlay.appendChild(container)
 
+  // Create additional
+  additionalReference = document.createElement('div')
+  applyStyles(additionalReference, additionalStyle)
+  container.appendChild(additionalReference)
+  renderAdditional()
+
   // Create header
   const header = document.createElement('div')
   applyStyles(header, headerStyle)
@@ -430,8 +441,6 @@ function render(error, name, message, resolvedFrames) {
 
   // Mount
   document.body.appendChild(overlayReference = overlay)
-
-  if (capturedErrors.length > 1) renderAdditional()
 }
 
 function dispose() {

From 8e64498a9b48f47cf5d9b6c20fa9112f0c944042 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 4 Dec 2016 21:57:42 -0500
Subject: [PATCH 079/120] Add left and right arrows

---
 packages/react-dev-utils/failFast.js | 42 +++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 34e4d4b37af..8d52ec70abf 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -129,6 +129,31 @@ const hiddenStyle = {
   display: 'none'
 }
 
+const groupStyle = {
+  'margin-left': '1em'
+}
+
+const _groupElemStyle = {
+  'border-color': '#ddd',
+  'border-width': '1px',
+  'border-radius': '4px',
+  'border-style': 'solid',
+  padding: '3px 6px',
+  cursor: 'pointer'
+}
+
+const groupElemLeft = Object.assign({}, _groupElemStyle, {
+  'border-top-right-radius': '0px',
+  'border-bottom-right-radius': '0px',
+  'margin-right': '0px'
+})
+
+const groupElemRight = Object.assign({}, _groupElemStyle, {
+  'border-top-left-radius': '0px',
+  'border-bottom-left-radius': '0px',
+  'margin-left': '-1px'
+})
+
 function calcWidth(width) {
   if (width >= 1200) return '1170px'
   if (width >= 992) return '970px'
@@ -164,7 +189,22 @@ function renderAdditional() {
   if (additionalReference.lastChild) {
     additionalReference.removeChild(additionalReference.lastChild)
   }
-  additionalReference.appendChild(document.createTextNode(text))
+  const span = document.createElement('span')
+  span.appendChild(document.createTextNode(text))
+  const group = document.createElement('span')
+  applyStyles(group, groupStyle)
+  const left = document.createElement('span')
+  applyStyles(left, groupElemLeft)
+  left.addEventListener('click', () => switchError(-1))
+  left.appendChild(document.createTextNode('←'))
+  const right = document.createElement('span')
+  applyStyles(right, groupElemRight)
+  right.addEventListener('click', () => switchError(1))
+  right.appendChild(document.createTextNode('→'))
+  group.appendChild(left)
+  group.appendChild(right)
+  span.appendChild(group)
+  additionalReference.appendChild(span)
 }
 
 function sourceCodePre(sourceLines, lineNum, columnNum, main = false) {

From 77cd6536f4df295981672a6e970fb9c3bd35533a Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 4 Dec 2016 21:59:18 -0500
Subject: [PATCH 080/120] Make frames pointy

---
 packages/react-dev-utils/failFast.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 8d52ec70abf..d08d69516f4 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -105,6 +105,7 @@ const omittedFramesStyle = {
   color: black,
   'font-size': '0.9em',
   'margin': '1.5em 0',
+  cursor: 'pointer'
 }
 
 const preStyle = {

From 872f27727dcff5c082629a0d2c31a899dd5aa7e0 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 4 Dec 2016 22:07:17 -0500
Subject: [PATCH 081/120] UTF-8 arrows

---
 packages/react-dev-utils/failFast.js | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index d08d69516f4..f1a0dc7a0ac 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -323,13 +323,10 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
   } else {
     if (omits.value > 0) {
       const omittedFrames = document.createElement('div')
-      const text1 = document.createTextNode(`${omits.value} stack frames were omitted.`)
-      const text2 = document.createTextNode(`[Click to expand]`)
+      const text1 = document.createTextNode(`▶ ${omits.value} stack frames were omitted.`)
       omittedFrames.appendChild(text1)
-      omittedFrames.appendChild(document.createElement('br'))
-      omittedFrames.appendChild(text2)
       omittedFrames.addEventListener('click', e => {
-        const hide = text2.textContent.match(/collapse/)
+        const hide = text1.textContent.match(/▲/)
         document.getElementsByName(`bundle-${omitBundle}`).forEach(n => {
           if (hide) {
             n.style.display = 'none'
@@ -338,11 +335,9 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
           }
         })
         if (hide) {
-          text1.textContent = text1.textContent.replace(/will be/, 'were')
-          text2.textContent = text2.textContent.replace(/collapse/, 'expand')
+          text1.textContent = text1.textContent.replace(/▲/, '▶')
         } else {
-          text1.textContent = text1.textContent.replace(/were/, 'will be')
-          text2.textContent = text2.textContent.replace(/expand/, 'collapse')
+          text1.textContent = text1.textContent.replace(/▶/, '▲')
         }
       })
       applyStyles(omittedFrames, omittedFramesStyle)

From db31e1ce93ab0c12825598ae2f6c778b59a98cd5 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 4 Dec 2016 22:10:10 -0500
Subject: [PATCH 082/120] Don't mount unneeded DOM node

---
 packages/react-dev-utils/failFast.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index f1a0dc7a0ac..6669343e22d 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -389,9 +389,10 @@ function lazyFrame(parent, factory, lIndex) {
   const elemWrapper = document.createElement('div')
   elemWrapper.appendChild(elem)
 
-  const compiledDiv = document.createElement('div')
-  applyStyles(compiledDiv, toggleStyle)
   if (hasSource) {
+    const compiledDiv = document.createElement('div')
+    applyStyles(compiledDiv, toggleStyle)
+
     const sourceAnchor = getAnchor('Source', () => {
       const o = frameSettings[lIndex]
       if (o) o.compiled = false
@@ -415,8 +416,9 @@ function lazyFrame(parent, factory, lIndex) {
     compiledDiv.appendChild(sourceAnchor)
     compiledDiv.appendChild(document.createTextNode(' <-> '))
     compiledDiv.appendChild(compiledAnchor)
+
+    elemWrapper.appendChild(compiledDiv)
   }
-  elemWrapper.appendChild(compiledDiv)
 
   return elemWrapper
 }

From 10aa81672badda7f2640c49096d75a730ec529a5 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sun, 4 Dec 2016 22:23:36 -0500
Subject: [PATCH 083/120] Switch to single changing text for compiled <->
 source

---
 packages/react-dev-utils/failFast.js | 40 ++++++----------------------
 1 file changed, 8 insertions(+), 32 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 6669343e22d..a8828d72f69 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -119,7 +119,9 @@ const preStyle = {
 }
 
 const toggleStyle = {
-  'margin-bottom': '1.5em'
+  'margin-bottom': '1.5em',
+  color: darkGray,
+  cursor: 'pointer'
 }
 
 const codeStyle = {
@@ -367,20 +369,6 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
   return { elem, hasSource }
 }
 
-function getAnchor(text, call) {
-  const anchor = document.createElement('a')
-  anchor.href = '#'
-  applyStyles(anchor, anchorStyle)
-  anchor.appendChild(document.createTextNode(text))
-  anchor.addEventListener('click', e => {
-    e.preventDefault()
-    e.target.blur()
-
-    call()
-  })
-  return anchor
-}
-
 function lazyFrame(parent, factory, lIndex) {
   const fac = factory()
   if (fac == null) return
@@ -393,19 +381,10 @@ function lazyFrame(parent, factory, lIndex) {
     const compiledDiv = document.createElement('div')
     applyStyles(compiledDiv, toggleStyle)
 
-    const sourceAnchor = getAnchor('Source', () => {
-      const o = frameSettings[lIndex]
-      if (o) o.compiled = false
-
-      const next = lazyFrame(parent, factory, lIndex)
-      if (next != null) {
-        parent.insertBefore(next, elemWrapper)
-        parent.removeChild(elemWrapper)
-      }
-    })
-    const compiledAnchor = getAnchor('Compiled', () => {
-      const o = frameSettings[lIndex]
-      if (o) o.compiled = true
+    const o = frameSettings[lIndex]
+    const compiledText = document.createTextNode(`View ${o && o.compiled ? 'source' : 'compiled'}`)
+    compiledDiv.addEventListener('click', () => {
+      if (o) o.compiled = !o.compiled
 
       const next = lazyFrame(parent, factory, lIndex)
       if (next != null) {
@@ -413,10 +392,7 @@ function lazyFrame(parent, factory, lIndex) {
         parent.removeChild(elemWrapper)
       }
     })
-    compiledDiv.appendChild(sourceAnchor)
-    compiledDiv.appendChild(document.createTextNode(' <-> '))
-    compiledDiv.appendChild(compiledAnchor)
-
+    compiledDiv.appendChild(compiledText)
     elemWrapper.appendChild(compiledDiv)
   }
 

From ee8ec067b95a0defd23dcf05de75d28d2baea4c0 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Mon, 5 Dec 2016 19:20:53 -0500
Subject: [PATCH 084/120] Don't display arrows with only one error.

---
 packages/react-dev-utils/failFast.js | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index a8828d72f69..401df00beac 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -185,13 +185,16 @@ let viewIndex = -1
 let frameSettings = []
 
 function renderAdditional() {
-  let text = ' '
-  if (capturedErrors.length > 1) {
-    text = `Errors ${viewIndex + 1} of ${capturedErrors.length}`
-  }
   if (additionalReference.lastChild) {
     additionalReference.removeChild(additionalReference.lastChild)
   }
+
+  let text = ' '
+  if (capturedErrors.length <= 1) {
+    additionalReference.appendChild(document.createTextNode(text))
+    return
+  }
+  text = `Errors ${viewIndex + 1} of ${capturedErrors.length}`
   const span = document.createElement('span')
   span.appendChild(document.createTextNode(text))
   const group = document.createElement('span')

From 4d7efad5a2543fca5708e472196927520df85983 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Mon, 5 Dec 2016 19:28:40 -0500
Subject: [PATCH 085/120] Collapsed and expanded

---
 packages/react-dev-utils/failFast.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 401df00beac..a103aa1cc01 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -328,7 +328,7 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
   } else {
     if (omits.value > 0) {
       const omittedFrames = document.createElement('div')
-      const text1 = document.createTextNode(`▶ ${omits.value} stack frames were omitted.`)
+      const text1 = document.createTextNode(`▶ ${omits.value} stack frames were collapsed.`)
       omittedFrames.appendChild(text1)
       omittedFrames.addEventListener('click', e => {
         const hide = text1.textContent.match(/▲/)
@@ -341,8 +341,10 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
         })
         if (hide) {
           text1.textContent = text1.textContent.replace(/▲/, '▶')
+          text1.textContent = text1.textContent.replace(/expanded/, 'collapsed')
         } else {
           text1.textContent = text1.textContent.replace(/▶/, '▲')
+          text1.textContent = text1.textContent.replace(/collapsed/, 'expanded')
         }
       })
       applyStyles(omittedFrames, omittedFramesStyle)

From c2a7c5480dea68fc6df6ecc09e2abc2a838da9aa Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Mon, 5 Dec 2016 19:42:22 -0500
Subject: [PATCH 086/120] Make sure the last collapse toggle is appended

---
 packages/react-dev-utils/failFast.js | 22 ++++++++++++++++------
 1 file changed, 16 insertions(+), 6 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index a103aa1cc01..d4d477f4ed8 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -298,7 +298,7 @@ function frameDiv(functionName, url, internalUrl) {
   return frame
 }
 
-function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentContainer) {
+function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentContainer, lastElement) {
   const { compiled } = frameSetting
   const {
     functionName,
@@ -325,7 +325,9 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
   if (internalUrl) {
     ++omits.value
     needsHidden = true
-  } else {
+  }
+  let collapseElement = null
+  if (!internalUrl || lastElement) {
     if (omits.value > 0) {
       const omittedFrames = document.createElement('div')
       const text1 = document.createTextNode(`▶ ${omits.value} stack frames were collapsed.`)
@@ -348,7 +350,11 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
         }
       })
       applyStyles(omittedFrames, omittedFramesStyle)
-      parentContainer.appendChild(omittedFrames)
+      if (lastElement && internalUrl) {
+        collapseElement = omittedFrames
+      } else {
+        parentContainer.appendChild(omittedFrames)
+      }
       ++omits.bundle
     }
     omits.value = 0
@@ -371,13 +377,13 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
     }
   }
 
-  return { elem, hasSource }
+  return { elem, hasSource, collapseElement }
 }
 
 function lazyFrame(parent, factory, lIndex) {
   const fac = factory()
   if (fac == null) return
-  const { hasSource, elem } = fac
+  const { hasSource, elem, collapseElement } = fac
 
   const elemWrapper = document.createElement('div')
   elemWrapper.appendChild(elem)
@@ -401,6 +407,10 @@ function lazyFrame(parent, factory, lIndex) {
     elemWrapper.appendChild(compiledDiv)
   }
 
+  if (collapseElement != null) {
+    elemWrapper.appendChild(collapseElement)
+  }
+
   return elemWrapper
 }
 
@@ -415,7 +425,7 @@ function traceDiv(resolvedFrames) {
     const lIndex = index++
     const elem = lazyFrame(
       trace,
-      traceFrame.bind(undefined, frameSettings[lIndex], frame, critical, omits, omits.bundle, trace),
+      traceFrame.bind(undefined, frameSettings[lIndex], frame, critical, omits, omits.bundle, trace, index === resolvedFrames.length),
       lIndex
     )
     if (elem == null) continue

From 2cc21389439a649a512e8903bb967348dddac354 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Mon, 5 Dec 2016 19:49:14 -0500
Subject: [PATCH 087/120] Do not show the stack trace if it doesn't resolve to
 a file we wrote

---
 packages/react-dev-utils/failFast.js | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index d4d477f4ed8..daa97e260d6 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -308,9 +308,6 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
     sourceLines
   } = frame
 
-  // Skip native functions like Array.forEach
-  if (fileName === '(native)') return
-
   let url
   if (!compiled && sourceFileName) {
     url = sourceFileName + ':' + sourceLineNumber
@@ -321,7 +318,7 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
   }
 
   let needsHidden = false
-  const internalUrl = isInternalFile(url)
+  const internalUrl = isInternalFile(url, sourceFileName)
   if (internalUrl) {
     ++omits.value
     needsHidden = true
@@ -484,8 +481,8 @@ function unmount() {
   viewIndex = -1
 }
 
-function isInternalFile(url) {
-  return url.indexOf('/~/') !== -1 || url.trim().indexOf(' ') !== -1
+function isInternalFile(url, sourceFileName) {
+  return url.indexOf('/~/') !== -1 || url.trim().indexOf(' ') !== -1 || !sourceFileName
 }
 
 function renderError(index) {

From 430c24080b4056c5bddb9617232a9b95b1c59d7e Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Mon, 5 Dec 2016 20:12:01 -0500
Subject: [PATCH 088/120] Style container with media queries

---
 packages/react-dev-utils/failFast.css | 24 ++++++++++++++++++++++++
 packages/react-dev-utils/failFast.js  | 19 +++----------------
 packages/react-dev-utils/package.json |  1 +
 3 files changed, 28 insertions(+), 16 deletions(-)
 create mode 100644 packages/react-dev-utils/failFast.css

diff --git a/packages/react-dev-utils/failFast.css b/packages/react-dev-utils/failFast.css
new file mode 100644
index 00000000000..b7b79de6772
--- /dev/null
+++ b/packages/react-dev-utils/failFast.css
@@ -0,0 +1,24 @@
+.cra-container {
+  padding-right: 15px;
+  padding-left: 15px;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+@media (min-width: 768px) {
+  .cra-container {
+    width: 750px;
+  }
+}
+
+@media (min-width: 992px) {
+  .cra-container {
+    width: 970px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .cra-container {
+    width: 1170px;
+  }
+}
diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index daa97e260d6..eeca659fd86 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -2,6 +2,8 @@ const codeFrame = require('babel-code-frame')
 const ansiHTML = require('./ansiHTML')
 const StackTraceResolve = require('stacktrace-resolve').default
 
+require('./failFast.css')
+
 const CONTEXT_SIZE = 3
 
 const black = '#293238'
@@ -29,14 +31,6 @@ const overlayStyle = {
   'line-height': 1.5,
 }
 
-// TODO: reapply containerStyle on resize or externalize to css and ensure
-//  e2e checks & tests pass
-//  ref commit: 46db1ae54c0449b737f82fb1cf8a47b7457d5b9b
-const containerStyle = {
-  'margin': '0 auto',
-  width: () => calcWidth(window.innerWidth)
-}
-
 const hintsStyle = {
   'font-size': '0.8em',
   'margin-top': '-3em',
@@ -157,13 +151,6 @@ const groupElemRight = Object.assign({}, _groupElemStyle, {
   'margin-left': '-1px'
 })
 
-function calcWidth(width) {
-  if (width >= 1200) return '1170px'
-  if (width >= 992) return '970px'
-  if (width >= 768) return '750px'
-  return 'auto'
-}
-
 function applyStyles(element, styles) {
   element.setAttribute('style', '')
   // Firefox can't handle const due to non-compliant implementation
@@ -447,7 +434,7 @@ function render(error, name, message, resolvedFrames) {
 
   // Create container
   const container = document.createElement('div')
-  applyStyles(container, containerStyle)
+  container.className = 'cra-container'
   overlay.appendChild(container)
 
   // Create additional
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 6c9af03260c..a5263363c33 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -14,6 +14,7 @@
     "ansiHTML.js",
     "checkRequiredFiles.js",
     "clearConsole.js",
+    "failFast.css",
     "failFast.js",
     "formatWebpackMessages.js",
     "getProcessForPort.js",

From 667a7bd8593fee951ee15b74a48f8d3a77073306 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 6 Dec 2016 12:31:34 -0500
Subject: [PATCH 089/120] Do not allow x overflow; break words by default.

---
 packages/react-dev-utils/failFast.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index eeca659fd86..e9c4b1ad0a5 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -27,6 +27,8 @@ const overlayStyle = {
   color: black,
   'white-space': 'pre-wrap',
   overflow: 'auto',
+  'overflow-x': 'hidden',
+  'word-break': 'break-all',
   'box-shadow': '0 0 6px 0 rgba(0, 0, 0, 0.5)',
   'line-height': 1.5,
 }

From 4158ca88a856bbd2faef48d73dc9606a77e7e76a Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 6 Dec 2016 12:46:09 -0500
Subject: [PATCH 090/120] Trim off whitespace of lines

---
 packages/react-dev-utils/failFast.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index e9c4b1ad0a5..beecd9fb47c 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -204,11 +204,22 @@ function renderAdditional() {
 
 function sourceCodePre(sourceLines, lineNum, columnNum, main = false) {
   let sourceCode = []
+  let whiteSpace = Infinity
+  sourceLines.forEach(({ text }) => {
+    const m = text.match(/^\s*/)
+    if (text === '') return
+    if (m && m[0]) {
+      whiteSpace = Math.min(whiteSpace, m[0].length)
+    } else {
+      whiteSpace = 0
+    }
+  })
   sourceLines.forEach(({ text, line }) => {
+    if (isFinite(whiteSpace)) text = text.substring(whiteSpace)
     sourceCode[line - 1] = text
   })
   sourceCode = sourceCode.join('\n')
-  const ansiHighlight = codeFrame(sourceCode, lineNum, columnNum, {
+  const ansiHighlight = codeFrame(sourceCode, lineNum, columnNum - (isFinite(whiteSpace) ? whiteSpace : 0), {
     highlightCode: true,
     linesAbove: CONTEXT_SIZE,
     linesBelow: CONTEXT_SIZE

From 0e36c667f4d5a1df6c05f81809855104f8249ef3 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 6 Dec 2016 13:40:47 -0500
Subject: [PATCH 091/120] Remove padding since it's not outer-most

---
 packages/react-dev-utils/failFast.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/react-dev-utils/failFast.css b/packages/react-dev-utils/failFast.css
index b7b79de6772..1b7e4caf8c5 100644
--- a/packages/react-dev-utils/failFast.css
+++ b/packages/react-dev-utils/failFast.css
@@ -7,18 +7,18 @@
 
 @media (min-width: 768px) {
   .cra-container {
-    width: 750px;
+    width: calc(750px - 6em);
   }
 }
 
 @media (min-width: 992px) {
   .cra-container {
-    width: 970px;
+    width: calc(970px - 6em);
   }
 }
 
 @media (min-width: 1200px) {
   .cra-container {
-    width: 1170px;
+    width: calc(1170px - 6em);
   }
 }

From 3a96646152f4241b6ab8526c9a936edecc0116a4 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 6 Dec 2016 13:40:55 -0500
Subject: [PATCH 092/120] Add footer message

---
 packages/react-dev-utils/failFast.js | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index beecd9fb47c..68b089af02c 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -153,6 +153,11 @@ const groupElemRight = Object.assign({}, _groupElemStyle, {
   'margin-left': '-1px'
 })
 
+const footerStyle = {
+  'text-align': 'center',
+  color: darkGray
+}
+
 function applyStyles(element, styles) {
   element.setAttribute('style', '')
   // Firefox can't handle const due to non-compliant implementation
@@ -435,6 +440,15 @@ function traceDiv(resolvedFrames) {
   return trace
 }
 
+function footer() {
+  const div = document.createElement('div')
+  applyStyles(div, footerStyle)
+  div.appendChild(document.createTextNode('This screen is visible only in development. It will not appear when the app crashes in production.'))
+  div.appendChild(document.createElement('br'))
+  div.appendChild(document.createTextNode('Open your browser’s developer console to further inspect this error.'))
+  return div
+}
+
 function render(error, name, message, resolvedFrames) {
   dispose()
 
@@ -465,6 +479,9 @@ function render(error, name, message, resolvedFrames) {
   // Create trace
   container.appendChild(traceDiv(resolvedFrames))
 
+  // Show message
+  container.appendChild(footer())
+
   // Mount
   document.body.appendChild(overlayReference = overlay)
 }

From 115cbd3894cee31c31e22b07e22547643f0de3b3 Mon Sep 17 00:00:00 2001
From: Eric Koslow <ekoslow@gmail.com>
Date: Thu, 8 Dec 2016 09:46:03 -0600
Subject: [PATCH 093/120] Extract css file to JS

---
 packages/react-dev-utils/failFast.css | 24 ---------------
 packages/react-dev-utils/failFast.js  | 44 +++++++++++++++++++++++++--
 2 files changed, 42 insertions(+), 26 deletions(-)
 delete mode 100644 packages/react-dev-utils/failFast.css

diff --git a/packages/react-dev-utils/failFast.css b/packages/react-dev-utils/failFast.css
deleted file mode 100644
index 1b7e4caf8c5..00000000000
--- a/packages/react-dev-utils/failFast.css
+++ /dev/null
@@ -1,24 +0,0 @@
-.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);
-  }
-}
diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 68b089af02c..47fdb3bd058 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -2,8 +2,6 @@ const codeFrame = require('babel-code-frame')
 const ansiHTML = require('./ansiHTML')
 const StackTraceResolve = require('stacktrace-resolve').default
 
-require('./failFast.css')
-
 const CONTEXT_SIZE = 3
 
 const black = '#293238'
@@ -13,6 +11,48 @@ const red = '#ce1126'
 const lightRed = '#fccfcf'
 const yellow = '#fbf5b4'
 
+// From: http://stackoverflow.com/a/524721/127629
+function injectCSS(css) {
+  const head = document.head || document.getElementsByTagName('head')[0];
+  const style = document.createElement('style');
+
+  style.type = 'text/css';
+  if (style.styleSheet){
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+
+  head.appendChild(style);
+}
+
+injectCSS(`
+.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);
+  }
+}
+`);
+
 const overlayStyle = {
   position: 'fixed',
   'box-sizing': 'border-box',

From e030bb96a3daac3054c6dcbb0ced33bcc0425ac3 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Thu, 8 Dec 2016 12:26:08 -0500
Subject: [PATCH 094/120] Only inject the css when the overlay is up

---
 packages/react-dev-utils/failFast.js | 34 ++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 47fdb3bd058..c1985eb4017 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -11,22 +11,29 @@ const red = '#ce1126'
 const lightRed = '#fccfcf'
 const yellow = '#fbf5b4'
 
+function getHead() {
+  return document.head || document.getElementsByTagName('head')[0]
+}
+
+let injectedCss = []
+
 // From: http://stackoverflow.com/a/524721/127629
-function injectCSS(css) {
-  const head = document.head || document.getElementsByTagName('head')[0];
-  const style = document.createElement('style');
+function injectCss(css) {
+  const head = getHead()
+  const style = document.createElement('style')
 
-  style.type = 'text/css';
-  if (style.styleSheet){
-    style.styleSheet.cssText = css;
+  style.type = 'text/css'
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css
   } else {
-    style.appendChild(document.createTextNode(css));
+    style.appendChild(document.createTextNode(css))
   }
 
-  head.appendChild(style);
+  head.appendChild(style)
+  injectedCss.push(style)
 }
 
-injectCSS(`
+const css = `
 .cra-container {
   padding-right: 15px;
   padding-left: 15px;
@@ -51,7 +58,7 @@ injectCSS(`
     width: calc(1170px - 6em);
   }
 }
-`);
+`
 
 const overlayStyle = {
   position: 'fixed',
@@ -494,6 +501,8 @@ function render(error, name, message, resolvedFrames) {
 
   frameSettings = resolvedFrames.map(() => { return { compiled: false } })
 
+  injectCss(css)
+
   // Create overlay
   const overlay = document.createElement('div')
   applyStyles(overlay, overlayStyle)
@@ -530,6 +539,11 @@ function dispose() {
   if (overlayReference === null) return
   document.body.removeChild(overlayReference)
   overlayReference = null
+  const head = getHead()
+  for (const node of injectedCss) {
+    head.removeChild(node)
+  }
+  injectedCss = []
 }
 
 function unmount() {

From 857e0d35d180bff8581db6a3abe6b832e6341e4d Mon Sep 17 00:00:00 2001
From: Eric Koslow <ekoslow@gmail.com>
Date: Thu, 1 Dec 2016 15:26:18 -0800
Subject: [PATCH 095/120] Extract red variable

---
 packages/react-dev-utils/webpackHotDevClient.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index 25d8722c412..6fdab210c48 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -24,6 +24,8 @@ 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';
@@ -101,7 +103,7 @@ function showErrorOverlay(message) {
   ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
     // Make it look similar to our terminal.
     overlayDiv.innerHTML =
-      '<span style="color: #E36049">Failed to compile.</span><br><br>' +
+      '<span style="color: ' + red + '">Failed to compile.</span><br><br>' +
       ansiHTML(entities.encode(message));
   });
 }

From e5208703f9b0f8f10ef091ee68db58c7a9c69e56 Mon Sep 17 00:00:00 2001
From: Eric Koslow <ekoslow@gmail.com>
Date: Thu, 1 Dec 2016 15:24:02 -0800
Subject: [PATCH 096/120] Remove env

---
 packages/react-scripts/config/env.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js
index 2fdb0ac5d76..66ba341b358 100644
--- a/packages/react-scripts/config/env.js
+++ b/packages/react-scripts/config/env.js
@@ -27,8 +27,6 @@ function getClientEnvironment(publicUrl) {
       'NODE_ENV': JSON.stringify(
         process.env.NODE_ENV || 'development'
       ),
-      // Allows the chalk library to work on the browser
-      'FORCE_COLOR': JSON.stringify(true),
       // Useful for resolving the correct path to static assets in `public`.
       // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
       // This should only be used as an escape hatch. Normally you would put

From 8de51ed38d7cd016c762b002335ad8105ea95ce8 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Thu, 8 Dec 2016 22:51:09 -0500
Subject: [PATCH 097/120] Update babel-code-frame

---
 packages/react-dev-utils/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index a5263363c33..01e5208bf70 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -27,7 +27,7 @@
   ],
   "dependencies": {
     "anser": "1.1.0",
-    "babel-code-frame": "6.16.0",
+    "babel-code-frame": "6.20.0",
     "chalk": "1.1.3",
     "escape-string-regexp": "1.0.5",
     "html-entities": "1.2.0",

From e05c88daddc2b5c3f141ea4df86ade4847956bb4 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Thu, 8 Dec 2016 22:52:08 -0500
Subject: [PATCH 098/120] Set force color to true

---
 packages/react-dev-utils/failFast.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index c1985eb4017..9256b57a21a 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -272,7 +272,7 @@ function sourceCodePre(sourceLines, lineNum, columnNum, main = false) {
   })
   sourceCode = sourceCode.join('\n')
   const ansiHighlight = codeFrame(sourceCode, lineNum, columnNum - (isFinite(whiteSpace) ? whiteSpace : 0), {
-    highlightCode: true,
+    forceColor: true,
     linesAbove: CONTEXT_SIZE,
     linesBelow: CONTEXT_SIZE
   })

From 7e2f9b22c78c3f9651d3cef0162c4784ad59ac7c Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Thu, 8 Dec 2016 23:17:11 -0500
Subject: [PATCH 099/120] Extract out collapse div logic

---
 packages/react-dev-utils/failFast.js | 48 ++++++++++++++++------------
 1 file changed, 27 insertions(+), 21 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 9256b57a21a..34c33b3337f 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -350,6 +350,32 @@ function frameDiv(functionName, url, internalUrl) {
   return frame
 }
 
+function getGroupToggle(omits, omitBundle, arrow = '▲') {
+  const omittedFrames = document.createElement('div')
+  const text1 = document.createTextNode(`▶ ${omits.value} stack frames were collapsed.`)
+  omittedFrames.appendChild(text1)
+  omittedFrames.addEventListener('click', e => {
+    const hide = text1.textContent.match(/▲/)
+    document.getElementsByName(`bundle-${omitBundle}`).forEach(n => {
+      if (hide) {
+        n.style.display = 'none'
+      } else {
+        n.style.display = ''
+      }
+    })
+    if (hide) {
+      text1.textContent = text1.textContent.replace(arrow, '▶')
+      text1.textContent = text1.textContent.replace(/expanded/, 'collapsed')
+    } else {
+      text1.textContent = text1.textContent.replace(/▶/, arrow)
+      text1.textContent = text1.textContent.replace(/collapsed/, 'expanded')
+    }
+  })
+  applyStyles(omittedFrames, omittedFramesStyle)
+
+  return omittedFrames
+}
+
 function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentContainer, lastElement) {
   const { compiled } = frameSetting
   const {
@@ -378,27 +404,7 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
   let collapseElement = null
   if (!internalUrl || lastElement) {
     if (omits.value > 0) {
-      const omittedFrames = document.createElement('div')
-      const text1 = document.createTextNode(`▶ ${omits.value} stack frames were collapsed.`)
-      omittedFrames.appendChild(text1)
-      omittedFrames.addEventListener('click', e => {
-        const hide = text1.textContent.match(/▲/)
-        document.getElementsByName(`bundle-${omitBundle}`).forEach(n => {
-          if (hide) {
-            n.style.display = 'none'
-          } else {
-            n.style.display = ''
-          }
-        })
-        if (hide) {
-          text1.textContent = text1.textContent.replace(/▲/, '▶')
-          text1.textContent = text1.textContent.replace(/expanded/, 'collapsed')
-        } else {
-          text1.textContent = text1.textContent.replace(/▶/, '▲')
-          text1.textContent = text1.textContent.replace(/collapsed/, 'expanded')
-        }
-      })
-      applyStyles(omittedFrames, omittedFramesStyle)
+      const omittedFrames = getGroupToggle(omits, omitBundle)
       if (lastElement && internalUrl) {
         collapseElement = omittedFrames
       } else {

From 5f05432c33952cdcfd1bbb0c8fa6fba7b9ae65df Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Thu, 8 Dec 2016 23:41:18 -0500
Subject: [PATCH 100/120] Remove arrow field

---
 packages/react-dev-utils/failFast.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 34c33b3337f..83937ac03ff 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -350,9 +350,9 @@ function frameDiv(functionName, url, internalUrl) {
   return frame
 }
 
-function getGroupToggle(omits, omitBundle, arrow = '▲') {
+function getGroupToggle(omitsCount, omitBundle) {
   const omittedFrames = document.createElement('div')
-  const text1 = document.createTextNode(`▶ ${omits.value} stack frames were collapsed.`)
+  const text1 = document.createTextNode(`▶ ${omitsCount} stack frames were collapsed.`)
   omittedFrames.appendChild(text1)
   omittedFrames.addEventListener('click', e => {
     const hide = text1.textContent.match(/▲/)
@@ -364,10 +364,10 @@ function getGroupToggle(omits, omitBundle, arrow = '▲') {
       }
     })
     if (hide) {
-      text1.textContent = text1.textContent.replace(arrow, '▶')
+      text1.textContent = text1.textContent.replace(/▲/, '▶')
       text1.textContent = text1.textContent.replace(/expanded/, 'collapsed')
     } else {
-      text1.textContent = text1.textContent.replace(/▶/, arrow)
+      text1.textContent = text1.textContent.replace(/▶/, '▲')
       text1.textContent = text1.textContent.replace(/collapsed/, 'expanded')
     }
   })

From bcdb069c151f3b4b54840da3a1d7843e70f4027a Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Thu, 8 Dec 2016 23:41:28 -0500
Subject: [PATCH 101/120] Insert a top collapse

---
 packages/react-dev-utils/failFast.js | 21 +++++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 83937ac03ff..020d7496b1b 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -372,10 +372,26 @@ function getGroupToggle(omitsCount, omitBundle) {
     }
   })
   applyStyles(omittedFrames, omittedFramesStyle)
-
   return omittedFrames
 }
 
+function insertBeforeBundle(parent, omitsCount, omitBundle, actionElement) {
+  const children = document.getElementsByName(`bundle-${omitBundle}`)
+  if (children.length < 1) return
+  let first = children[0]
+  while (first.parentNode != parent) first = first.parentNode
+
+  const div = document.createElement('div')
+  div.setAttribute('name', `bundle-${omitBundle}`)
+  const text = document.createTextNode(`▼ ${omitsCount} stack frames were expanded.`)
+  div.appendChild(text)
+  div.addEventListener('click', e => actionElement.click())
+  applyStyles(div, omittedFramesStyle)
+  div.style.display = 'none'
+
+  parent.insertBefore(div, first)
+}
+
 function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentContainer, lastElement) {
   const { compiled } = frameSetting
   const {
@@ -404,7 +420,8 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
   let collapseElement = null
   if (!internalUrl || lastElement) {
     if (omits.value > 0) {
-      const omittedFrames = getGroupToggle(omits, omitBundle)
+      const omittedFrames = getGroupToggle(omits.value, omitBundle)
+      setTimeout(((...args) => insertBeforeBundle(...args)).bind(undefined, parentContainer, omits.value, omitBundle, omittedFrames))
       if (lastElement && internalUrl) {
         collapseElement = omittedFrames
       } else {

From ae727b7a9029fae4beaa6c92441436b163f1734b Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Thu, 8 Dec 2016 23:44:41 -0500
Subject: [PATCH 102/120] Make browser friendlier

---
 packages/react-dev-utils/failFast.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 020d7496b1b..b801d7d2234 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -421,7 +421,9 @@ function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentCont
   if (!internalUrl || lastElement) {
     if (omits.value > 0) {
       const omittedFrames = getGroupToggle(omits.value, omitBundle)
-      setTimeout(((...args) => insertBeforeBundle(...args)).bind(undefined, parentContainer, omits.value, omitBundle, omittedFrames))
+      setTimeout(function () {
+        insertBeforeBundle.apply(undefined, arguments)
+      }.bind(undefined, parentContainer, omits.value, omitBundle, omittedFrames), 1)
       if (lastElement && internalUrl) {
         collapseElement = omittedFrames
       } else {

From ea4ed6f86f0a712024637536ec096fc93b73eef8 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Fri, 9 Dec 2016 21:01:32 -0500
Subject: [PATCH 103/120] Absolutify ^

---
 packages/react-dev-utils/failFast.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index b801d7d2234..e7989ebfabf 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -254,6 +254,25 @@ function renderAdditional() {
   additionalReference.appendChild(span)
 }
 
+function removeNextBr(parent, component) {
+  while (component != null && component.tagName.toLowerCase() !== 'br') {
+    component = component.nextSibling
+  }
+  if (component != null) {
+    parent.removeChild(component)
+  }
+}
+
+function absolutifyCode(component) {
+  for (let c of component.childNodes) {
+    if (c.tagName.toLowerCase() !== 'span') continue
+    let text = c.innerText.replace(/\s/g, '')
+    if (text !== '|^') continue
+    c.style.position = 'absolute'
+    removeNextBr(component, c)
+  }
+}
+
 function sourceCodePre(sourceLines, lineNum, columnNum, main = false) {
   let sourceCode = []
   let whiteSpace = Infinity
@@ -279,6 +298,7 @@ function sourceCodePre(sourceLines, lineNum, columnNum, main = false) {
   const htmlHighlight = ansiHTML(ansiHighlight)
   const code = document.createElement('code')
   code.innerHTML = htmlHighlight
+  absolutifyCode(code)
   applyStyles(code, codeStyle)
 
   for (let node of code.childNodes) {

From 9f6576514b2c8c9310d7b479e56029683912bf00 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Fri, 9 Dec 2016 21:06:06 -0500
Subject: [PATCH 104/120] Make arrows buttons

---
 packages/react-dev-utils/failFast.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index e7989ebfabf..d7dd486d5eb 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -180,6 +180,7 @@ const groupStyle = {
 }
 
 const _groupElemStyle = {
+  'background-color': 'inherit',
   'border-color': '#ddd',
   'border-width': '1px',
   'border-radius': '4px',
@@ -225,6 +226,11 @@ let capturedErrors = []
 let viewIndex = -1
 let frameSettings = []
 
+function consumeEvent(e) {
+  e.preventDefault()
+  e.target.blur()
+}
+
 function renderAdditional() {
   if (additionalReference.lastChild) {
     additionalReference.removeChild(additionalReference.lastChild)
@@ -240,13 +246,19 @@ function renderAdditional() {
   span.appendChild(document.createTextNode(text))
   const group = document.createElement('span')
   applyStyles(group, groupStyle)
-  const left = document.createElement('span')
+  const left = document.createElement('button')
   applyStyles(left, groupElemLeft)
-  left.addEventListener('click', () => switchError(-1))
+  left.addEventListener('click', e => {
+    consumeEvent(e)
+    switchError(-1)
+  })
   left.appendChild(document.createTextNode('←'))
-  const right = document.createElement('span')
+  const right = document.createElement('button')
   applyStyles(right, groupElemRight)
-  right.addEventListener('click', () => switchError(1))
+  right.addEventListener('click', e => {
+    consumeEvent(e)
+    switchError(1)
+  })
   right.appendChild(document.createTextNode('→'))
   group.appendChild(left)
   group.appendChild(right)

From 7e1660eaaad38b64205b1cf8a74f1c8431bbafae Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Fri, 9 Dec 2016 21:15:52 -0500
Subject: [PATCH 105/120] Accessify

---
 packages/react-dev-utils/failFast.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index d7dd486d5eb..db18f983d51 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -231,6 +231,17 @@ function consumeEvent(e) {
   e.target.blur()
 }
 
+function accessify(node) {
+  node.setAttribute('tabindex', 0)
+  node.addEventListener('keydown', e => {
+    const { key, which, keyCode } = e
+    if (key === 'Enter' || which === 13 || keyCode === 13) {
+      e.preventDefault()
+      e.target.click()
+    }
+  })
+}
+
 function renderAdditional() {
   if (additionalReference.lastChild) {
     additionalReference.removeChild(additionalReference.lastChild)
@@ -253,6 +264,7 @@ function renderAdditional() {
     switchError(-1)
   })
   left.appendChild(document.createTextNode('←'))
+  accessify(left)
   const right = document.createElement('button')
   applyStyles(right, groupElemRight)
   right.addEventListener('click', e => {
@@ -260,6 +272,7 @@ function renderAdditional() {
     switchError(1)
   })
   right.appendChild(document.createTextNode('→'))
+  accessify(right)
   group.appendChild(left)
   group.appendChild(right)
   span.appendChild(group)
@@ -384,6 +397,7 @@ function frameDiv(functionName, url, internalUrl) {
 
 function getGroupToggle(omitsCount, omitBundle) {
   const omittedFrames = document.createElement('div')
+  accessify(omittedFrames)
   const text1 = document.createTextNode(`▶ ${omitsCount} stack frames were collapsed.`)
   omittedFrames.appendChild(text1)
   omittedFrames.addEventListener('click', e => {
@@ -414,6 +428,7 @@ function insertBeforeBundle(parent, omitsCount, omitBundle, actionElement) {
   while (first.parentNode != parent) first = first.parentNode
 
   const div = document.createElement('div')
+  accessify(div)
   div.setAttribute('name', `bundle-${omitBundle}`)
   const text = document.createTextNode(`▼ ${omitsCount} stack frames were expanded.`)
   div.appendChild(text)
@@ -496,6 +511,7 @@ function lazyFrame(parent, factory, lIndex) {
 
   if (hasSource) {
     const compiledDiv = document.createElement('div')
+    accessify(compiledDiv)
     applyStyles(compiledDiv, toggleStyle)
 
     const o = frameSettings[lIndex]

From 8afb16751b2330d6e6185ea58ff9e9225efd2143 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 10 Dec 2016 10:21:27 -0500
Subject: [PATCH 106/120] Let there be ES5

---
 packages/react-dev-utils/failFast.js | 888 ++++++++++++++-------------
 1 file changed, 476 insertions(+), 412 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index db18f983d51..7365ccb423c 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -1,66 +1,43 @@
-const codeFrame = require('babel-code-frame')
-const ansiHTML = require('./ansiHTML')
-const StackTraceResolve = require('stacktrace-resolve').default
+'use strict';
 
-const CONTEXT_SIZE = 3
+var codeFrame = require('babel-code-frame');
+var ansiHTML = require('./ansiHTML');
+var StackTraceResolve = require('stacktrace-resolve').default;
 
-const black = '#293238'
-const darkGray = '#878e91'
-const lightGray = '#fafafa'
-const red = '#ce1126'
-const lightRed = '#fccfcf'
-const yellow = '#fbf5b4'
+var CONTEXT_SIZE = 3;
+
+var black = '#293238';
+var darkGray = '#878e91';
+var lightGray = '#fafafa';
+var red = '#ce1126';
+var lightRed = '#fccfcf';
+var yellow = '#fbf5b4';
 
 function getHead() {
-  return document.head || document.getElementsByTagName('head')[0]
+  return document.head || document.getElementsByTagName('head')[0];
 }
 
-let injectedCss = []
+var injectedCss = [];
 
 // From: http://stackoverflow.com/a/524721/127629
 function injectCss(css) {
-  const head = getHead()
-  const style = document.createElement('style')
+  var head = getHead();
+  var style = document.createElement('style');
 
-  style.type = 'text/css'
+  style.type = 'text/css';
   if (style.styleSheet) {
-    style.styleSheet.cssText = css
+    style.styleSheet.cssText = css;
   } else {
-    style.appendChild(document.createTextNode(css))
+    style.appendChild(document.createTextNode(css));
   }
 
-  head.appendChild(style)
-  injectedCss.push(style)
-}
-
-const css = `
-.cra-container {
-  padding-right: 15px;
-  padding-left: 15px;
-  margin-right: auto;
-  margin-left: auto;
+  head.appendChild(style);
+  injectedCss.push(style);
 }
 
-@media (min-width: 768px) {
-  .cra-container {
-    width: calc(750px - 6em);
-  }
-}
+var css = '\n.cra-container {\n  padding-right: 15px;\n  padding-left: 15px;\n  margin-right: auto;\n  margin-left: auto;\n}\n\n@media (min-width: 768px) {\n  .cra-container {\n    width: calc(750px - 6em);\n  }\n}\n\n@media (min-width: 992px) {\n  .cra-container {\n    width: calc(970px - 6em);\n  }\n}\n\n@media (min-width: 1200px) {\n  .cra-container {\n    width: calc(1170px - 6em);\n  }\n}\n';
 
-@media (min-width: 992px) {
-  .cra-container {
-    width: calc(970px - 6em);
-  }
-}
-
-@media (min-width: 1200px) {
-  .cra-container {
-    width: calc(1170px - 6em);
-  }
-}
-`
-
-const overlayStyle = {
+var overlayStyle = {
   position: 'fixed',
   'box-sizing': 'border-box',
   top: '1em', left: '1em',
@@ -77,109 +54,109 @@ const overlayStyle = {
   'overflow-x': 'hidden',
   'word-break': 'break-all',
   'box-shadow': '0 0 6px 0 rgba(0, 0, 0, 0.5)',
-  'line-height': 1.5,
-}
+  'line-height': 1.5
+};
 
-const hintsStyle = {
+var hintsStyle = {
   'font-size': '0.8em',
   'margin-top': '-3em',
   'margin-bottom': '3em',
   'text-align': 'right',
   color: darkGray
-}
+};
 
-const hintStyle = {
+var hintStyle = {
   padding: '0.5em 1em',
   cursor: 'pointer'
-}
+};
 
-const closeButtonStyle = {
+var closeButtonStyle = {
   'font-size': '26px',
   color: black,
   padding: '0.5em 1em',
   cursor: 'pointer',
   position: 'absolute',
   right: 0,
-  top: 0,
-}
+  top: 0
+};
 
-const additionalStyle = {
+var additionalStyle = {
   'margin-bottom': '1.5em',
-  'margin-top': '-4em',
-}
+  'margin-top': '-4em'
+};
 
-const headerStyle = {
+var headerStyle = {
   'font-size': '1.7em',
   'font-weight': 'bold',
   color: red
-}
+};
 
-const functionNameStyle = {
+var functionNameStyle = {
   'margin-top': '1em',
   'font-size': '1.2em'
-}
+};
 
-const linkStyle = {
-  'font-size': '0.9em',
-}
+var linkStyle = {
+  'font-size': '0.9em'
+};
 
-const anchorStyle = {
+var anchorStyle = {
   'text-decoration': 'none',
   color: darkGray
-}
+};
 
-const traceStyle = {
+var traceStyle = {
   'font-size': '1em'
-}
+};
 
-const depStyle = {
-  'font-size': '1.2em',
-}
+var depStyle = {
+  'font-size': '1.2em'
+};
 
-const primaryErrorStyle = {
+var primaryErrorStyle = {
   'background-color': lightRed
-}
+};
 
-const secondaryErrorStyle = {
+var secondaryErrorStyle = {
   'background-color': yellow
-}
+};
 
-const omittedFramesStyle = {
+var omittedFramesStyle = {
   color: black,
   'font-size': '0.9em',
   'margin': '1.5em 0',
   cursor: 'pointer'
-}
+};
 
-const preStyle = {
+var preStyle = {
   display: 'block',
   padding: '0.5em',
   'margin-top': '1.5em',
   'margin-bottom': '0px',
   'overflow-x': 'auto',
   'font-size': '1.1em',
-  'white-space': 'pre',
-}
+  'white-space': 'pre'
+};
 
-const toggleStyle = {
+var toggleStyle = {
   'margin-bottom': '1.5em',
   color: darkGray,
   cursor: 'pointer'
-}
+};
 
-const codeStyle = {
-  'font-family': 'Consolas, Menlo, monospace',
-}
+var codeStyle = {
+  'font-family': 'Consolas, Menlo, monospace'
+};
 
-const hiddenStyle = {
+var hiddenStyle = {
   display: 'none'
-}
+};
 
-const groupStyle = {
+var groupStyle = {
   'margin-left': '1em'
-}
+};
 
-const _groupElemStyle = {
+var _groupElemStyle = {
   'background-color': 'inherit',
   'border-color': '#ddd',
   'border-width': '1px',
@@ -187,528 +164,615 @@ const _groupElemStyle = {
   'border-style': 'solid',
   padding: '3px 6px',
   cursor: 'pointer'
-}
+};
 
-const groupElemLeft = Object.assign({}, _groupElemStyle, {
+var groupElemLeft = Object.assign({}, _groupElemStyle, {
   'border-top-right-radius': '0px',
   'border-bottom-right-radius': '0px',
   'margin-right': '0px'
-})
+});
 
-const groupElemRight = Object.assign({}, _groupElemStyle, {
+var groupElemRight = Object.assign({}, _groupElemStyle, {
   'border-top-left-radius': '0px',
   'border-bottom-left-radius': '0px',
   'margin-left': '-1px'
-})
+});
 
-const footerStyle = {
+var footerStyle = {
   'text-align': 'center',
   color: darkGray
-}
+};
 
 function applyStyles(element, styles) {
-  element.setAttribute('style', '')
+  element.setAttribute('style', '');
   // Firefox can't handle const due to non-compliant implementation
   // Revisit Jan 2016
   // https://developer.mozilla.org/en-US/Firefox/Releases/51#JavaScript
   // https://bugzilla.mozilla.org/show_bug.cgi?id=1101653
-  for (let key in styles) {
-    if (!styles.hasOwnProperty(key)) continue
-    let val = styles[key]
-    if (typeof val === 'function') val = val()
-    element.style[key] = val.toString()
+  for (var key in styles) {
+    if (!styles.hasOwnProperty(key)) continue;
+    var val = styles[key];
+    if (typeof val === 'function') val = val();
+    element.style[key] = val.toString();
   }
 }
 
-let overlayReference = null
-let additionalReference = null
-let capturedErrors = []
-let viewIndex = -1
-let frameSettings = []
+var overlayReference = null;
+var additionalReference = null;
+var capturedErrors = [];
+var viewIndex = -1;
+var frameSettings = [];
 
 function consumeEvent(e) {
-  e.preventDefault()
-  e.target.blur()
+  e.preventDefault();
+  e.target.blur();
 }
 
 function accessify(node) {
-  node.setAttribute('tabindex', 0)
-  node.addEventListener('keydown', e => {
-    const { key, which, keyCode } = e
+  node.setAttribute('tabindex', 0);
+  node.addEventListener('keydown', function (e) {
+    var key = e.key,
+        which = e.which,
+        keyCode = e.keyCode;
     if (key === 'Enter' || which === 13 || keyCode === 13) {
-      e.preventDefault()
-      e.target.click()
+      e.preventDefault();
+      e.target.click();
     }
-  })
+  });
 }
 
 function renderAdditional() {
   if (additionalReference.lastChild) {
-    additionalReference.removeChild(additionalReference.lastChild)
+    additionalReference.removeChild(additionalReference.lastChild);
   }
 
-  let text = ' '
+  var text = ' ';
   if (capturedErrors.length <= 1) {
-    additionalReference.appendChild(document.createTextNode(text))
-    return
+    additionalReference.appendChild(document.createTextNode(text));
+    return;
   }
-  text = `Errors ${viewIndex + 1} of ${capturedErrors.length}`
-  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', e => {
-    consumeEvent(e)
-    switchError(-1)
-  })
-  left.appendChild(document.createTextNode('←'))
-  accessify(left)
-  const right = document.createElement('button')
-  applyStyles(right, groupElemRight)
-  right.addEventListener('click', e => {
-    consumeEvent(e)
-    switchError(1)
-  })
-  right.appendChild(document.createTextNode('→'))
-  accessify(right)
-  group.appendChild(left)
-  group.appendChild(right)
-  span.appendChild(group)
-  additionalReference.appendChild(span)
+  text = 'Errors ' + (viewIndex + 1) + ' of ' + capturedErrors.length;
+  var span = document.createElement('span');
+  span.appendChild(document.createTextNode(text));
+  var group = document.createElement('span');
+  applyStyles(group, groupStyle);
+  var left = document.createElement('button');
+  applyStyles(left, groupElemLeft);
+  left.addEventListener('click', function (e) {
+    consumeEvent(e);
+    switchError(-1);
+  });
+  left.appendChild(document.createTextNode('←'));
+  accessify(left);
+  var right = document.createElement('button');
+  applyStyles(right, groupElemRight);
+  right.addEventListener('click', function (e) {
+    consumeEvent(e);
+    switchError(1);
+  });
+  right.appendChild(document.createTextNode('→'));
+  accessify(right);
+  group.appendChild(left);
+  group.appendChild(right);
+  span.appendChild(group);
+  additionalReference.appendChild(span);
 }
 
 function removeNextBr(parent, component) {
   while (component != null && component.tagName.toLowerCase() !== 'br') {
-    component = component.nextSibling
+    component = component.nextSibling;
   }
   if (component != null) {
-    parent.removeChild(component)
+    parent.removeChild(component);
   }
 }
 
 function absolutifyCode(component) {
-  for (let c of component.childNodes) {
-    if (c.tagName.toLowerCase() !== 'span') continue
-    let text = c.innerText.replace(/\s/g, '')
-    if (text !== '|^') continue
-    c.style.position = 'absolute'
-    removeNextBr(component, c)
+  for (var _iterator = component.childNodes, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
+    var _ref;
+
+    if (_isArray) {
+      if (_i >= _iterator.length) break;
+      _ref = _iterator[_i++];
+    } else {
+      _i = _iterator.next();
+      if (_i.done) break;
+      _ref = _i.value;
+    }
+
+    var c = _ref;
+
+    if (c.tagName.toLowerCase() !== 'span') continue;
+    var text = c.innerText.replace(/\s/g, '');
+    if (text !== '|^') continue;
+    c.style.position = 'absolute';
+    removeNextBr(component, c);
   }
 }
 
-function sourceCodePre(sourceLines, lineNum, columnNum, main = false) {
-  let sourceCode = []
-  let whiteSpace = Infinity
-  sourceLines.forEach(({ text }) => {
-    const m = text.match(/^\s*/)
-    if (text === '') return
+function sourceCodePre(sourceLines, lineNum, columnNum) {
+  var main = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+
+  var sourceCode = [];
+  var whiteSpace = Infinity;
+  sourceLines.forEach(function (_ref2) {
+    var text = _ref2.text;
+
+    var m = text.match(/^\s*/);
+    if (text === '') return;
     if (m && m[0]) {
-      whiteSpace = Math.min(whiteSpace, m[0].length)
+      whiteSpace = Math.min(whiteSpace, m[0].length);
     } else {
-      whiteSpace = 0
+      whiteSpace = 0;
     }
-  })
-  sourceLines.forEach(({ text, line }) => {
-    if (isFinite(whiteSpace)) text = text.substring(whiteSpace)
-    sourceCode[line - 1] = text
-  })
-  sourceCode = sourceCode.join('\n')
-  const ansiHighlight = codeFrame(sourceCode, lineNum, columnNum - (isFinite(whiteSpace) ? whiteSpace : 0), {
+  });
+  sourceLines.forEach(function (_ref3) {
+    var text = _ref3.text,
+        line = _ref3.line;
+
+    if (isFinite(whiteSpace)) text = text.substring(whiteSpace);
+    sourceCode[line - 1] = text;
+  });
+  sourceCode = sourceCode.join('\n');
+  var ansiHighlight = codeFrame(sourceCode, lineNum, columnNum - (isFinite(whiteSpace) ? whiteSpace : 0), {
     forceColor: true,
     linesAbove: CONTEXT_SIZE,
     linesBelow: CONTEXT_SIZE
-  })
-  const htmlHighlight = ansiHTML(ansiHighlight)
-  const code = document.createElement('code')
-  code.innerHTML = htmlHighlight
-  absolutifyCode(code)
-  applyStyles(code, codeStyle)
-
-  for (let node of code.childNodes) {
-    let breakOut = false
-    for (let lineNode of node.childNodes) {
-      if (lineNode.innerText.indexOf(` ${lineNum} |`) === -1) continue
-      applyStyles(node, main ? primaryErrorStyle : secondaryErrorStyle)
-      breakOut = true
+  });
+  var htmlHighlight = ansiHTML(ansiHighlight);
+  var code = document.createElement('code');
+  code.innerHTML = htmlHighlight;
+  absolutifyCode(code);
+  applyStyles(code, codeStyle);
+
+  for (var _iterator2 = code.childNodes, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
+    var _ref4;
+
+    if (_isArray2) {
+      if (_i2 >= _iterator2.length) break;
+      _ref4 = _iterator2[_i2++];
+    } else {
+      _i2 = _iterator2.next();
+      if (_i2.done) break;
+      _ref4 = _i2.value;
+    }
+
+    var node = _ref4;
+
+    var breakOut = false;
+    for (var _iterator3 = node.childNodes, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
+      var _ref5;
+
+      if (_isArray3) {
+        if (_i3 >= _iterator3.length) break;
+        _ref5 = _iterator3[_i3++];
+      } else {
+        _i3 = _iterator3.next();
+        if (_i3.done) break;
+        _ref5 = _i3.value;
+      }
+
+      var lineNode = _ref5;
+
+      if (lineNode.innerText.indexOf(' ' + lineNum + ' |') === -1) continue;
+      applyStyles(node, main ? primaryErrorStyle : secondaryErrorStyle);
+      breakOut = true;
     }
-    if (breakOut) break
+    if (breakOut) break;
   }
-  const pre = document.createElement('pre')
-  applyStyles(pre, preStyle)
-  pre.appendChild(code)
-  return pre
+  var pre = document.createElement('pre');
+  applyStyles(pre, preStyle);
+  pre.appendChild(code);
+  return pre;
 }
 
 function createHint(hint) {
-  const span = document.createElement('span')
-  span.appendChild(document.createTextNode(hint))
-  applyStyles(span, hintStyle)
-  return span
+  var span = document.createElement('span');
+  span.appendChild(document.createTextNode(hint));
+  applyStyles(span, hintStyle);
+  return span;
 }
 
 function hintsDiv() {
-  const hints = document.createElement('div')
-  applyStyles(hints, hintsStyle)
-
-  const close = createHint('×')
-  close.addEventListener('click', e => {
-    unmount()
-  })
-  applyStyles(close, closeButtonStyle)
-  hints.appendChild(close)
-  return hints
+  var hints = document.createElement('div');
+  applyStyles(hints, hintsStyle);
+
+  var close = createHint('×');
+  close.addEventListener('click', function (e) {
+    unmount();
+  });
+  applyStyles(close, closeButtonStyle);
+  hints.appendChild(close);
+  return hints;
 }
 
 function frameDiv(functionName, url, internalUrl) {
-  const frame = document.createElement('div')
-  const frameFunctionName = document.createElement('div')
+  var frame = document.createElement('div');
+  var frameFunctionName = document.createElement('div');
 
-  let cleanedFunctionName
+  var cleanedFunctionName = void 0;
   if (!functionName || functionName === 'Object.<anonymous>') {
-    cleanedFunctionName = '(anonymous function)'
+    cleanedFunctionName = '(anonymous function)';
   } else {
-    cleanedFunctionName = functionName
+    cleanedFunctionName = functionName;
   }
 
-  let cleanedUrl = url.replace('webpack://', '.')
+  var cleanedUrl = url.replace('webpack://', '.');
 
   if (internalUrl) {
-    applyStyles(frameFunctionName, Object.assign({}, functionNameStyle, depStyle))
+    applyStyles(frameFunctionName, Object.assign({}, functionNameStyle, depStyle));
   } else {
-    applyStyles(frameFunctionName, functionNameStyle)
+    applyStyles(frameFunctionName, functionNameStyle);
   }
 
-  frameFunctionName.appendChild(document.createTextNode(cleanedFunctionName))
-  frame.appendChild(frameFunctionName)
+  frameFunctionName.appendChild(document.createTextNode(cleanedFunctionName));
+  frame.appendChild(frameFunctionName);
 
-  const frameLink = document.createElement('div')
-  applyStyles(frameLink, linkStyle)
-  const frameAnchor = document.createElement('a')
-  applyStyles(frameAnchor, anchorStyle)
+  var frameLink = document.createElement('div');
+  applyStyles(frameLink, linkStyle);
+  var frameAnchor = document.createElement('a');
+  applyStyles(frameAnchor, anchorStyle);
   //frameAnchor.href = url
-  frameAnchor.appendChild(document.createTextNode(cleanedUrl))
-  frameLink.appendChild(frameAnchor)
-  frame.appendChild(frameLink)
+  frameAnchor.appendChild(document.createTextNode(cleanedUrl));
+  frameLink.appendChild(frameAnchor);
+  frame.appendChild(frameLink);
 
-  return frame
+  return frame;
 }
 
 function getGroupToggle(omitsCount, omitBundle) {
-  const omittedFrames = document.createElement('div')
-  accessify(omittedFrames)
-  const text1 = document.createTextNode(`▶ ${omitsCount} stack frames were collapsed.`)
-  omittedFrames.appendChild(text1)
-  omittedFrames.addEventListener('click', e => {
-    const hide = text1.textContent.match(/▲/)
-    document.getElementsByName(`bundle-${omitBundle}`).forEach(n => {
+  var omittedFrames = document.createElement('div');
+  accessify(omittedFrames);
+  var text1 = document.createTextNode('\u25B6 ' + omitsCount + ' stack frames were collapsed.');
+  omittedFrames.appendChild(text1);
+  omittedFrames.addEventListener('click', function (e) {
+    var hide = text1.textContent.match(/▲/);
+    document.getElementsByName('bundle-' + omitBundle).forEach(function (n) {
       if (hide) {
-        n.style.display = 'none'
+        n.style.display = 'none';
       } else {
-        n.style.display = ''
+        n.style.display = '';
       }
-    })
+    });
     if (hide) {
-      text1.textContent = text1.textContent.replace(/▲/, '▶')
-      text1.textContent = text1.textContent.replace(/expanded/, 'collapsed')
+      text1.textContent = text1.textContent.replace(/▲/, '▶');
+      text1.textContent = text1.textContent.replace(/expanded/, 'collapsed');
     } else {
-      text1.textContent = text1.textContent.replace(/▶/, '▲')
-      text1.textContent = text1.textContent.replace(/collapsed/, 'expanded')
+      text1.textContent = text1.textContent.replace(/▶/, '▲');
+      text1.textContent = text1.textContent.replace(/collapsed/, 'expanded');
     }
-  })
-  applyStyles(omittedFrames, omittedFramesStyle)
-  return omittedFrames
+  });
+  applyStyles(omittedFrames, omittedFramesStyle);
+  return omittedFrames;
 }
 
 function insertBeforeBundle(parent, omitsCount, omitBundle, actionElement) {
-  const children = document.getElementsByName(`bundle-${omitBundle}`)
-  if (children.length < 1) return
-  let first = children[0]
-  while (first.parentNode != parent) first = first.parentNode
-
-  const div = document.createElement('div')
-  accessify(div)
-  div.setAttribute('name', `bundle-${omitBundle}`)
-  const text = document.createTextNode(`▼ ${omitsCount} stack frames were expanded.`)
-  div.appendChild(text)
-  div.addEventListener('click', e => actionElement.click())
-  applyStyles(div, omittedFramesStyle)
-  div.style.display = 'none'
-
-  parent.insertBefore(div, first)
+  var children = document.getElementsByName('bundle-' + omitBundle);
+  if (children.length < 1) return;
+  var first = children[0];
+  while (first.parentNode != parent) {
+    first = first.parentNode;
+  }var div = document.createElement('div');
+  accessify(div);
+  div.setAttribute('name', 'bundle-' + omitBundle);
+  var text = document.createTextNode('\u25BC ' + omitsCount + ' stack frames were expanded.');
+  div.appendChild(text);
+  div.addEventListener('click', function (e) {
+    return actionElement.click();
+  });
+  applyStyles(div, omittedFramesStyle);
+  div.style.display = 'none';
+
+  parent.insertBefore(div, first);
 }
 
 function traceFrame(frameSetting, frame, critical, omits, omitBundle, parentContainer, lastElement) {
-  const { compiled } = frameSetting
-  const {
-    functionName,
-    fileName, lineNumber, columnNumber,
-    scriptLines,
-    sourceFileName, sourceLineNumber, sourceColumnNumber,
-    sourceLines
-  } = frame
-
-  let url
+  var compiled = frameSetting.compiled;
+  var functionName = frame.functionName,
+      fileName = frame.fileName,
+      lineNumber = frame.lineNumber,
+      columnNumber = frame.columnNumber,
+      scriptLines = frame.scriptLines,
+      sourceFileName = frame.sourceFileName,
+      sourceLineNumber = frame.sourceLineNumber,
+      sourceColumnNumber = frame.sourceColumnNumber,
+      sourceLines = frame.sourceLines;
+
+  var url = void 0;
   if (!compiled && sourceFileName) {
-    url = sourceFileName + ':' + sourceLineNumber
-    if (sourceColumnNumber) url += ':' + sourceColumnNumber
+    url = sourceFileName + ':' + sourceLineNumber;
+    if (sourceColumnNumber) url += ':' + sourceColumnNumber;
   } else {
-    url = fileName + ':' + lineNumber
-    if (columnNumber) url += ':' + columnNumber
+    url = fileName + ':' + lineNumber;
+    if (columnNumber) url += ':' + columnNumber;
   }
 
-  let needsHidden = false
-  const internalUrl = isInternalFile(url, sourceFileName)
+  var needsHidden = false;
+  var internalUrl = isInternalFile(url, sourceFileName);
   if (internalUrl) {
-    ++omits.value
-    needsHidden = true
+    ++omits.value;
+    needsHidden = true;
   }
-  let collapseElement = null
+  var collapseElement = null;
   if (!internalUrl || lastElement) {
     if (omits.value > 0) {
-      const omittedFrames = getGroupToggle(omits.value, omitBundle)
+      var omittedFrames = getGroupToggle(omits.value, omitBundle);
       setTimeout(function () {
-        insertBeforeBundle.apply(undefined, arguments)
-      }.bind(undefined, parentContainer, omits.value, omitBundle, omittedFrames), 1)
+        insertBeforeBundle.apply(undefined, arguments);
+      }.bind(undefined, parentContainer, omits.value, omitBundle, omittedFrames), 1);
       if (lastElement && internalUrl) {
-        collapseElement = omittedFrames
+        collapseElement = omittedFrames;
       } else {
-        parentContainer.appendChild(omittedFrames)
+        parentContainer.appendChild(omittedFrames);
       }
-      ++omits.bundle
+      ++omits.bundle;
     }
-    omits.value = 0
+    omits.value = 0;
   }
 
-  const elem = frameDiv(functionName, url, internalUrl)
+  var elem = frameDiv(functionName, url, internalUrl);
   if (needsHidden) {
-    applyStyles(elem, hiddenStyle)
-    elem.setAttribute('name', `bundle-${omitBundle}`)
+    applyStyles(elem, hiddenStyle);
+    elem.setAttribute('name', 'bundle-' + omitBundle);
   }
 
-  let hasSource = false
+  var hasSource = false;
   if (!internalUrl) {
     if (compiled && scriptLines.length !== 0) {
-      elem.appendChild(sourceCodePre(scriptLines, lineNumber, columnNumber, critical))
-      hasSource = true
+      elem.appendChild(sourceCodePre(scriptLines, lineNumber, columnNumber, critical));
+      hasSource = true;
     } else if (!compiled && sourceLines.length !== 0) {
-      elem.appendChild(sourceCodePre(sourceLines, sourceLineNumber, sourceColumnNumber, critical))
-      hasSource = true
+      elem.appendChild(sourceCodePre(sourceLines, sourceLineNumber, sourceColumnNumber, critical));
+      hasSource = true;
     }
   }
 
-  return { elem, hasSource, collapseElement }
+  return { elem: elem, hasSource: hasSource, collapseElement: collapseElement };
 }
 
 function lazyFrame(parent, factory, lIndex) {
-  const fac = factory()
-  if (fac == null) return
-  const { hasSource, elem, collapseElement } = fac
+  var fac = factory();
+  if (fac == null) return;
+  var hasSource = fac.hasSource,
+      elem = fac.elem,
+      collapseElement = fac.collapseElement;
 
-  const elemWrapper = document.createElement('div')
-  elemWrapper.appendChild(elem)
+  var elemWrapper = document.createElement('div');
+  elemWrapper.appendChild(elem);
 
   if (hasSource) {
-    const compiledDiv = document.createElement('div')
-    accessify(compiledDiv)
-    applyStyles(compiledDiv, toggleStyle)
-
-    const o = frameSettings[lIndex]
-    const compiledText = document.createTextNode(`View ${o && o.compiled ? 'source' : 'compiled'}`)
-    compiledDiv.addEventListener('click', () => {
-      if (o) o.compiled = !o.compiled
-
-      const next = lazyFrame(parent, factory, lIndex)
-      if (next != null) {
-        parent.insertBefore(next, elemWrapper)
-        parent.removeChild(elemWrapper)
-      }
-    })
-    compiledDiv.appendChild(compiledText)
-    elemWrapper.appendChild(compiledDiv)
+    (function () {
+      var compiledDiv = document.createElement('div');
+      accessify(compiledDiv);
+      applyStyles(compiledDiv, toggleStyle);
+
+      var o = frameSettings[lIndex];
+      var compiledText = document.createTextNode('View ' + (o && o.compiled ? 'source' : 'compiled'));
+      compiledDiv.addEventListener('click', function () {
+        if (o) o.compiled = !o.compiled;
+
+        var next = lazyFrame(parent, factory, lIndex);
+        if (next != null) {
+          parent.insertBefore(next, elemWrapper);
+          parent.removeChild(elemWrapper);
+        }
+      });
+      compiledDiv.appendChild(compiledText);
+      elemWrapper.appendChild(compiledDiv);
+    })();
   }
 
   if (collapseElement != null) {
-    elemWrapper.appendChild(collapseElement)
+    elemWrapper.appendChild(collapseElement);
   }
 
-  return elemWrapper
+  return elemWrapper;
 }
 
 function traceDiv(resolvedFrames) {
-  const trace = document.createElement('div')
-  applyStyles(trace, traceStyle)
-
-  let index = 0
-  let critical = true
-  const omits = { value: 0, bundle: 1 }
-  for (let frame of resolvedFrames) {
-    const lIndex = index++
-    const elem = lazyFrame(
-      trace,
-      traceFrame.bind(undefined, frameSettings[lIndex], frame, critical, omits, omits.bundle, trace, index === resolvedFrames.length),
-      lIndex
-    )
-    if (elem == null) continue
-    critical = false
-    trace.appendChild(elem)
+  var trace = document.createElement('div');
+  applyStyles(trace, traceStyle);
+
+  var index = 0;
+  var critical = true;
+  var omits = { value: 0, bundle: 1 };
+  for (var _iterator4 = resolvedFrames, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
+    var _ref6;
+
+    if (_isArray4) {
+      if (_i4 >= _iterator4.length) break;
+      _ref6 = _iterator4[_i4++];
+    } else {
+      _i4 = _iterator4.next();
+      if (_i4.done) break;
+      _ref6 = _i4.value;
+    }
+
+    var frame = _ref6;
+
+    var lIndex = index++;
+    var elem = lazyFrame(trace, traceFrame.bind(undefined, frameSettings[lIndex], frame, critical, omits, omits.bundle, trace, index === resolvedFrames.length), lIndex);
+    if (elem == null) continue;
+    critical = false;
+    trace.appendChild(elem);
   }
   //TODO: fix this
-  omits.value = 0
+  omits.value = 0;
 
-  return trace
+  return trace;
 }
 
 function footer() {
-  const div = document.createElement('div')
-  applyStyles(div, footerStyle)
-  div.appendChild(document.createTextNode('This screen is visible only in development. It will not appear when the app crashes in production.'))
-  div.appendChild(document.createElement('br'))
-  div.appendChild(document.createTextNode('Open your browser’s developer console to further inspect this error.'))
-  return div
+  var div = document.createElement('div');
+  applyStyles(div, footerStyle);
+  div.appendChild(document.createTextNode('This screen is visible only in development. It will not appear when the app crashes in production.'));
+  div.appendChild(document.createElement('br'));
+  div.appendChild(document.createTextNode('Open your browser’s developer console to further inspect this error.'));
+  return div;
 }
 
 function render(error, name, message, resolvedFrames) {
-  dispose()
+  dispose();
 
-  frameSettings = resolvedFrames.map(() => { return { compiled: false } })
+  frameSettings = resolvedFrames.map(function () {
+    return { compiled: false };
+  });
 
-  injectCss(css)
+  injectCss(css);
 
   // Create overlay
-  const overlay = document.createElement('div')
-  applyStyles(overlay, overlayStyle)
-  overlay.appendChild(hintsDiv())
+  var overlay = document.createElement('div');
+  applyStyles(overlay, overlayStyle);
+  overlay.appendChild(hintsDiv());
 
   // Create container
-  const container = document.createElement('div')
-  container.className = 'cra-container'
-  overlay.appendChild(container)
+  var container = document.createElement('div');
+  container.className = 'cra-container';
+  overlay.appendChild(container);
 
   // Create additional
-  additionalReference = document.createElement('div')
-  applyStyles(additionalReference, additionalStyle)
-  container.appendChild(additionalReference)
-  renderAdditional()
+  additionalReference = document.createElement('div');
+  applyStyles(additionalReference, additionalStyle);
+  container.appendChild(additionalReference);
+  renderAdditional();
 
   // Create header
-  const header = document.createElement('div')
-  applyStyles(header, headerStyle)
-  header.appendChild(document.createTextNode(`${name}: ${message}`))
-  container.appendChild(header)
+  var header = document.createElement('div');
+  applyStyles(header, headerStyle);
+  header.appendChild(document.createTextNode(name + ': ' + message));
+  container.appendChild(header);
 
   // Create trace
-  container.appendChild(traceDiv(resolvedFrames))
+  container.appendChild(traceDiv(resolvedFrames));
 
   // Show message
-  container.appendChild(footer())
+  container.appendChild(footer());
 
   // Mount
-  document.body.appendChild(overlayReference = overlay)
+  document.body.appendChild(overlayReference = overlay);
 }
 
 function dispose() {
-  if (overlayReference === null) return
-  document.body.removeChild(overlayReference)
-  overlayReference = null
-  const head = getHead()
-  for (const node of injectedCss) {
-    head.removeChild(node)
+  if (overlayReference === null) return;
+  document.body.removeChild(overlayReference);
+  overlayReference = null;
+  var head = getHead();
+  for (var _iterator5 = injectedCss, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
+    var _ref7;
+
+    if (_isArray5) {
+      if (_i5 >= _iterator5.length) break;
+      _ref7 = _iterator5[_i5++];
+    } else {
+      _i5 = _iterator5.next();
+      if (_i5.done) break;
+      _ref7 = _i5.value;
+    }
+
+    var node = _ref7;
+
+    head.removeChild(node);
   }
-  injectedCss = []
+  injectedCss = [];
 }
 
 function unmount() {
-  dispose()
-  capturedErrors = []
-  viewIndex = -1
+  dispose();
+  capturedErrors = [];
+  viewIndex = -1;
 }
 
 function isInternalFile(url, sourceFileName) {
-  return url.indexOf('/~/') !== -1 || url.trim().indexOf(' ') !== -1 || !sourceFileName
+  return url.indexOf('/~/') !== -1 || url.trim().indexOf(' ') !== -1 || !sourceFileName;
 }
 
 function renderError(index) {
-  viewIndex = index
-  const { error, unhandledRejection, resolvedFrames } = capturedErrors[index]
+  viewIndex = index;
+  var _capturedErrors$index = capturedErrors[index],
+      error = _capturedErrors$index.error,
+      unhandledRejection = _capturedErrors$index.unhandledRejection,
+      resolvedFrames = _capturedErrors$index.resolvedFrames;
+
   if (unhandledRejection) {
-    render(error, `Unhandled Rejection (${error.name})`, error.message, resolvedFrames)
+    render(error, 'Unhandled Rejection (' + error.name + ')', error.message, resolvedFrames);
   } else {
-    render(error, error.name, error.message, resolvedFrames)
+    render(error, error.name, error.message, resolvedFrames);
   }
 }
 
-function crash(error, unhandledRejection = false) {
-  if (module.hot) module.hot.decline()
+function crash(error) {
+  var unhandledRejection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
-  StackTraceResolve(error, CONTEXT_SIZE).then(function(resolvedFrames) {
-    capturedErrors.push({ error, unhandledRejection, resolvedFrames })
-    if (overlayReference !== null) renderAdditional()
-    else {
-      renderError(viewIndex = 0)
+  if (module.hot) module.hot.decline();
+
+  StackTraceResolve(error, CONTEXT_SIZE).then(function (resolvedFrames) {
+    capturedErrors.push({ error: error, unhandledRejection: unhandledRejection, resolvedFrames: resolvedFrames });
+    if (overlayReference !== null) renderAdditional();else {
+      renderError(viewIndex = 0);
     }
-  }).catch(function(e) {
+  }).catch(function (e) {
     // This is another fail case (unlikely to happen)
     // e.g. render(...) throws an error with provided arguments
-    console.log('Red box renderer error:', e)
-    unmount()
-    render(null, 'Error', 'There is an error with red box. *Please* report this (see console).', [])
-  })
+    console.log('Red box renderer error:', e);
+    unmount();
+    render(null, 'Error', 'There is an error with red box. *Please* report this (see console).', []);
+  });
 }
 
 function switchError(offset) {
   try {
-    const nextView = viewIndex + offset
-    if (nextView < 0 || nextView >= capturedErrors.length) return
-    renderError(nextView)
+    var nextView = viewIndex + offset;
+    if (nextView < 0 || nextView >= capturedErrors.length) return;
+    renderError(nextView);
   } catch (e) {
-    console.log('Red box renderer error:', e)
-    unmount()
-    render(null, 'Error', 'There is an error with red box. *Please* report this (see console).', [])
+    console.log('Red box renderer error:', e);
+    unmount();
+    render(null, 'Error', 'There is an error with red box. *Please* report this (see console).', []);
   }
 }
 
-window.onerror = function(messageOrEvent, source, lineno, colno, error) {
+window.onerror = function (messageOrEvent, source, lineno, colno, error) {
   if (error == null || !(error instanceof Error) || messageOrEvent.indexOf('Script error') !== -1) {
-    crash(new Error(error || messageOrEvent))// TODO: more helpful message
+    crash(new Error(error || messageOrEvent)); // TODO: more helpful message
   } else {
-    crash(error)
+    crash(error);
   }
-}
+};
 
-let promiseHandler = function(event) {
+var promiseHandler = function promiseHandler(event) {
   if (event != null && event.reason != null) {
-    const { reason } = event
+    var reason = event.reason;
+
     if (reason == null || !(reason instanceof Error)) {
-      crash(new Error(reason), true)
+      crash(new Error(reason), true);
     } else {
-      crash(reason, true)
+      crash(reason, true);
     }
   } else {
-    crash(new Error('Unknown event'), true)
+    crash(new Error('Unknown event'), true);
   }
-}
+};
 
-window.addEventListener('unhandledrejection', promiseHandler)
+window.addEventListener('unhandledrejection', promiseHandler);
 
-let escapeHandler = function(event) {
-  const { key, keyCode, which } = event
-  if (key === 'Escape' || keyCode === 27 || which === 27) unmount()
-  else if (key === 'ArrowLeft' || keyCode === 37 || which === 37) switchError(-1)
-  else if (key === 'ArrowRight' || keyCode === 39 || which === 39) switchError(1)
-}
+var escapeHandler = function escapeHandler(event) {
+  var key = event.key,
+      keyCode = event.keyCode,
+      which = event.which;
+
+  if (key === 'Escape' || keyCode === 27 || which === 27) unmount();else if (key === 'ArrowLeft' || keyCode === 37 || which === 37) switchError(-1);else if (key === 'ArrowRight' || keyCode === 39 || which === 39) switchError(1);
+};
 
-window.addEventListener('keydown', escapeHandler)
+window.addEventListener('keydown', escapeHandler);
 
 try {
-  Error.stackTraceLimit = 50
-} catch (e) { }
+  Error.stackTraceLimit = 50;
+} catch (e) {}
 
 if (module.hot) {
-  module.hot.dispose(function() {
-    unmount()
-    window.removeEventListener('unhandledrejection', promiseHandler)
-    window.removeEventListener('keydown', escapeHandler)
-  })
+  module.hot.dispose(function () {
+    unmount();
+    window.removeEventListener('unhandledrejection', promiseHandler);
+    window.removeEventListener('keydown', escapeHandler);
+  });
 }

From fe5042cf5ba88e00a338a7075f333b018a5903d3 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 10 Dec 2016 11:26:30 -0500
Subject: [PATCH 107/120] Pretty css

---
 packages/react-dev-utils/failFast.js | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 7365ccb423c..0970a2dd15d 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -35,7 +35,32 @@ function injectCss(css) {
   injectedCss.push(style);
 }
 
-var css = '\n.cra-container {\n  padding-right: 15px;\n  padding-left: 15px;\n  margin-right: auto;\n  margin-left: auto;\n}\n\n@media (min-width: 768px) {\n  .cra-container {\n    width: calc(750px - 6em);\n  }\n}\n\n@media (min-width: 992px) {\n  .cra-container {\n    width: calc(970px - 6em);\n  }\n}\n\n@media (min-width: 1200px) {\n  .cra-container {\n    width: calc(1170px - 6em);\n  }\n}\n';
+var 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');
 
 var overlayStyle = {
   position: 'fixed',

From ae9c98bb8c2b3a57fec6e1f4936f29473e3df618 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 10 Dec 2016 11:26:45 -0500
Subject: [PATCH 108/120] Use forEach where we can ...

---
 packages/react-dev-utils/failFast.js | 102 ++++++---------------------
 1 file changed, 23 insertions(+), 79 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 0970a2dd15d..88f19a09fab 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -293,26 +293,13 @@ function removeNextBr(parent, component) {
 }
 
 function absolutifyCode(component) {
-  for (var _iterator = component.childNodes, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-    var _ref;
-
-    if (_isArray) {
-      if (_i >= _iterator.length) break;
-      _ref = _iterator[_i++];
-    } else {
-      _i = _iterator.next();
-      if (_i.done) break;
-      _ref = _i.value;
-    }
-
-    var c = _ref;
-
-    if (c.tagName.toLowerCase() !== 'span') continue;
+  component.childNodes.forEach(function (c) {
+    if (c.tagName.toLowerCase() !== 'span') return;
     var text = c.innerText.replace(/\s/g, '');
-    if (text !== '|^') continue;
+    if (text !== '|^') return;
     c.style.position = 'absolute';
     removeNextBr(component, c);
-  }
+  });
 }
 
 function sourceCodePre(sourceLines, lineNum, columnNum) {
@@ -350,40 +337,23 @@ function sourceCodePre(sourceLines, lineNum, columnNum) {
   absolutifyCode(code);
   applyStyles(code, codeStyle);
 
-  for (var _iterator2 = code.childNodes, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-    var _ref4;
+  var ccn = code.childNodes;
 
-    if (_isArray2) {
-      if (_i2 >= _iterator2.length) break;
-      _ref4 = _iterator2[_i2++];
-    } else {
-      _i2 = _iterator2.next();
-      if (_i2.done) break;
-      _ref4 = _i2.value;
-    }
-
-    var node = _ref4;
-
-    var breakOut = false;
-    for (var _iterator3 = node.childNodes, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-      var _ref5;
-
-      if (_isArray3) {
-        if (_i3 >= _iterator3.length) break;
-        _ref5 = _iterator3[_i3++];
-      } else {
-        _i3 = _iterator3.next();
-        if (_i3.done) break;
-        _ref5 = _i3.value;
-      }
-
-      var lineNode = _ref5;
-
-      if (lineNode.innerText.indexOf(' ' + lineNum + ' |') === -1) continue;
+  var _loop = function _loop(index) {
+    var node = ccn[index];
+    breakOut = false;
+    node.childNodes.forEach(function (lineNode) {
+      if (lineNode.innerText.indexOf(' ' + lineNum + ' |') === -1) return;
       applyStyles(node, main ? primaryErrorStyle : secondaryErrorStyle);
       breakOut = true;
-    }
-    if (breakOut) break;
+    });
+    if (breakOut) return 'break';
+  };
+
+  for (var index = 0; index < ccn.length; ++index) {
+    var breakOut;
+    var _ret = _loop(index);
+    if (_ret === 'break') break;
   }
   var pre = document.createElement('pre');
   applyStyles(pre, preStyle);
@@ -601,26 +571,13 @@ function traceDiv(resolvedFrames) {
   var index = 0;
   var critical = true;
   var omits = { value: 0, bundle: 1 };
-  for (var _iterator4 = resolvedFrames, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-    var _ref6;
-
-    if (_isArray4) {
-      if (_i4 >= _iterator4.length) break;
-      _ref6 = _iterator4[_i4++];
-    } else {
-      _i4 = _iterator4.next();
-      if (_i4.done) break;
-      _ref6 = _i4.value;
-    }
-
-    var frame = _ref6;
-
+  resolvedFrames.forEach(function (frame) {
     var lIndex = index++;
     var elem = lazyFrame(trace, traceFrame.bind(undefined, frameSettings[lIndex], frame, critical, omits, omits.bundle, trace, index === resolvedFrames.length), lIndex);
-    if (elem == null) continue;
+    if (elem == null) return;
     critical = false;
     trace.appendChild(elem);
-  }
+  });
   //TODO: fix this
   omits.value = 0;
 
@@ -682,22 +639,9 @@ function dispose() {
   document.body.removeChild(overlayReference);
   overlayReference = null;
   var head = getHead();
-  for (var _iterator5 = injectedCss, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-    var _ref7;
-
-    if (_isArray5) {
-      if (_i5 >= _iterator5.length) break;
-      _ref7 = _iterator5[_i5++];
-    } else {
-      _i5 = _iterator5.next();
-      if (_i5.done) break;
-      _ref7 = _i5.value;
-    }
-
-    var node = _ref7;
-
+  injectedCss.forEach(function (node) {
     head.removeChild(node);
-  }
+  });
   injectedCss = [];
 }
 

From 5b4aedd57b34ee0306bec2310288f480ecbea47e Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 10 Dec 2016 11:31:57 -0500
Subject: [PATCH 109/120] Remove extracted loop

---
 packages/react-dev-utils/failFast.js | 13 +++----------
 1 file changed, 3 insertions(+), 10 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 88f19a09fab..e7e80aebf0a 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -338,22 +338,15 @@ function sourceCodePre(sourceLines, lineNum, columnNum) {
   applyStyles(code, codeStyle);
 
   var ccn = code.childNodes;
-
-  var _loop = function _loop(index) {
+  for (var index = 0; index < ccn.length; ++index) {
     var node = ccn[index];
-    breakOut = false;
+    var breakOut = false;
     node.childNodes.forEach(function (lineNode) {
       if (lineNode.innerText.indexOf(' ' + lineNum + ' |') === -1) return;
       applyStyles(node, main ? primaryErrorStyle : secondaryErrorStyle);
       breakOut = true;
     });
-    if (breakOut) return 'break';
-  };
-
-  for (var index = 0; index < ccn.length; ++index) {
-    var breakOut;
-    var _ret = _loop(index);
-    if (_ret === 'break') break;
+    if (breakOut) break;
   }
   var pre = document.createElement('pre');
   applyStyles(pre, preStyle);

From 5424fd4157b939601e652e050a89a9bf944471f0 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 10 Dec 2016 11:40:22 -0500
Subject: [PATCH 110/120] Fix IE compatibility

---
 packages/react-dev-utils/failFast.js | 34 ++++++++++++++++++----------
 1 file changed, 22 insertions(+), 12 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index e7e80aebf0a..a49e20140a9 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -293,13 +293,15 @@ function removeNextBr(parent, component) {
 }
 
 function absolutifyCode(component) {
-  component.childNodes.forEach(function (c) {
-    if (c.tagName.toLowerCase() !== 'span') return;
+  var ccn = component.childNodes;
+  for (var index = 0; index < ccn.length; ++index) {
+    var c = ccn[index];
+    if (c.tagName.toLowerCase() !== 'span') continue;
     var text = c.innerText.replace(/\s/g, '');
-    if (text !== '|^') return;
+    if (text !== '|^') continue;
     c.style.position = 'absolute';
     removeNextBr(component, c);
-  });
+  }
 }
 
 function sourceCodePre(sourceLines, lineNum, columnNum) {
@@ -341,11 +343,13 @@ function sourceCodePre(sourceLines, lineNum, columnNum) {
   for (var index = 0; index < ccn.length; ++index) {
     var node = ccn[index];
     var breakOut = false;
-    node.childNodes.forEach(function (lineNode) {
-      if (lineNode.innerText.indexOf(' ' + lineNum + ' |') === -1) return;
+    var ccn2 = node.childNodes;
+    for (var index2 = 0; index2 < ccn2.length; ++index2) {
+      var lineNode = ccn2[index2];
+      if (lineNode.innerText.indexOf(' ' + lineNum + ' |') === -1) continue;
       applyStyles(node, main ? primaryErrorStyle : secondaryErrorStyle);
       breakOut = true;
-    });
+    }
     if (breakOut) break;
   }
   var pre = document.createElement('pre');
@@ -415,13 +419,15 @@ function getGroupToggle(omitsCount, omitBundle) {
   omittedFrames.appendChild(text1);
   omittedFrames.addEventListener('click', function (e) {
     var hide = text1.textContent.match(/▲/);
-    document.getElementsByName('bundle-' + omitBundle).forEach(function (n) {
+    var list = document.getElementsByName('bundle-' + omitBundle);
+    for (var index = 0; index < list.length; ++index) {
+      var n = list[index];
       if (hide) {
         n.style.display = 'none';
       } else {
         n.style.display = '';
       }
-    });
+    }
     if (hide) {
       text1.textContent = text1.textContent.replace(/▲/, '▶');
       text1.textContent = text1.textContent.replace(/expanded/, 'collapsed');
@@ -440,7 +446,8 @@ function insertBeforeBundle(parent, omitsCount, omitBundle, actionElement) {
   var first = children[0];
   while (first.parentNode != parent) {
     first = first.parentNode;
-  }var div = document.createElement('div');
+  }
+  var div = document.createElement('div');
   accessify(div);
   div.setAttribute('name', 'bundle-' + omitBundle);
   var text = document.createTextNode('\u25BC ' + omitsCount + ' stack frames were expanded.');
@@ -669,7 +676,8 @@ function crash(error) {
 
   StackTraceResolve(error, CONTEXT_SIZE).then(function (resolvedFrames) {
     capturedErrors.push({ error: error, unhandledRejection: unhandledRejection, resolvedFrames: resolvedFrames });
-    if (overlayReference !== null) renderAdditional();else {
+    if (overlayReference !== null) renderAdditional();
+    else {
       renderError(viewIndex = 0);
     }
   }).catch(function (e) {
@@ -722,7 +730,9 @@ var escapeHandler = function escapeHandler(event) {
       keyCode = event.keyCode,
       which = event.which;
 
-  if (key === 'Escape' || keyCode === 27 || which === 27) unmount();else if (key === 'ArrowLeft' || keyCode === 37 || which === 37) switchError(-1);else if (key === 'ArrowRight' || keyCode === 39 || which === 39) switchError(1);
+  if (key === 'Escape' || keyCode === 27 || which === 27) unmount();
+  else if (key === 'ArrowLeft' || keyCode === 37 || which === 37) switchError(-1);
+  else if (key === 'ArrowRight' || keyCode === 39 || which === 39) switchError(1);
 };
 
 window.addEventListener('keydown', escapeHandler);

From 089eef82b97efa7838196d45cd6913c61af14623 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Thu, 15 Dec 2016 22:22:20 -0500
Subject: [PATCH 111/120] Capture React warnings

---
 packages/react-dev-utils/failFast.js | 30 +++++++++++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index a49e20140a9..07d8ff64913 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -621,7 +621,11 @@ function render(error, name, message, resolvedFrames) {
   // Create header
   var header = document.createElement('div');
   applyStyles(header, headerStyle);
-  header.appendChild(document.createTextNode(name + ': ' + message));
+  if (message.match(/^\w*:/)) {
+    header.appendChild(document.createTextNode(message));
+  } else {
+    header.appendChild(document.createTextNode(name + ': ' + message));
+  }
   container.appendChild(header);
 
   // Create trace
@@ -675,6 +679,10 @@ function crash(error) {
   if (module.hot) module.hot.decline();
 
   StackTraceResolve(error, CONTEXT_SIZE).then(function (resolvedFrames) {
+    resolvedFrames = resolvedFrames.filter(function (_ref) {
+      var functionName = _ref.functionName;
+      return functionName.indexOf('__cra_proxy_console__') === -1;
+    });
     capturedErrors.push({ error: error, unhandledRejection: unhandledRejection, resolvedFrames: resolvedFrames });
     if (overlayReference !== null) renderAdditional();
     else {
@@ -741,6 +749,26 @@ try {
   Error.stackTraceLimit = 50;
 } catch (e) {}
 
+var proxyConsole = function proxyConsole(type) {
+  var orig = console[type];
+  console[type] = function __cra_proxy_console__() {
+    var message = [].slice.call(arguments).join(' ');
+    if (message.indexOf('\n') !== -1) message = message.substring(0, message.indexOf('\n'));
+    var error = void 0;
+    try {
+      throw new Error(message);
+    } catch (e) {
+      error = e;
+    }
+    setTimeout(function () {
+      return crash(error);
+    });
+    return orig.apply(this, arguments);
+  };
+};
+
+proxyConsole('error');
+
 if (module.hot) {
   module.hot.dispose(function () {
     unmount();

From f5a4ec43af86b3342c6dfd3b1456b6c1847cacda Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 17 Dec 2016 00:23:45 -0500
Subject: [PATCH 112/120] Add source override via React output parsing

---
 packages/react-dev-utils/failFast.js | 45 ++++++++++++++++++++++++++--
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index 07d8ff64913..f148acae953 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -674,6 +674,8 @@ function renderError(index) {
 }
 
 function crash(error) {
+  var sourceOverrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+
   var unhandledRejection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
   if (module.hot) module.hot.decline();
@@ -683,6 +685,25 @@ function crash(error) {
       var functionName = _ref.functionName;
       return functionName.indexOf('__cra_proxy_console__') === -1;
     });
+    var overrideCount = sourceOverrides.length,
+        frameCount = resolvedFrames.length;
+    var frameIndex = 0;
+    for (var overrideIndex = 0; overrideIndex < overrideCount; ++overrideIndex) {
+      var tag = sourceOverrides[overrideIndex];
+      var shouldContinue = false;
+      for (; frameIndex < frameCount; ++frameIndex) {
+        var sourceFileName = resolvedFrames[frameIndex].sourceFileName;
+
+        if (sourceFileName == null) continue;
+        if (sourceFileName.indexOf('/' + tag.file) !== -1) {
+          resolvedFrames[frameIndex].sourceLineNumber = tag.lineNum;
+          shouldContinue = true;
+          break;
+        }
+      }
+      if (shouldContinue) continue;
+      break;
+    }
     capturedErrors.push({ error: error, unhandledRejection: unhandledRejection, resolvedFrames: resolvedFrames });
     if (overlayReference !== null) renderAdditional();
     else {
@@ -752,8 +773,26 @@ try {
 var proxyConsole = function proxyConsole(type) {
   var orig = console[type];
   console[type] = function __cra_proxy_console__() {
-    var message = [].slice.call(arguments).join(' ');
-    if (message.indexOf('\n') !== -1) message = message.substring(0, message.indexOf('\n'));
+    var warning = [].slice.call(arguments).join(' ');
+    var nIndex = warning.indexOf('\n');
+    var message = warning;
+    if (nIndex !== -1) message = message.substring(0, nIndex);
+    var stack = warning.substring(nIndex + 1).split('\n').filter(function (line) {
+      return line.indexOf('(at ') !== -1;
+    }).map(function (line) {
+      var prefix = '(at ';
+      var suffix = ')';
+      line = line.substring(line.indexOf(prefix) + prefix.length);
+      line = line.substring(0, line.indexOf(suffix));
+      var parts = line.split(/[:]/g);
+      if (parts.length !== 2) return null;
+      var file = parts[0];
+      var lineNum = Number(parts[1]);
+      if (isNaN(lineNum)) return null;
+      return { file: file, lineNum: lineNum };
+    }).filter(function (obj) {
+      return obj !== null;
+    });
     var error = void 0;
     try {
       throw new Error(message);
@@ -761,7 +800,7 @@ var proxyConsole = function proxyConsole(type) {
       error = e;
     }
     setTimeout(function () {
-      return crash(error);
+      return crash(error, stack);
     });
     return orig.apply(this, arguments);
   };

From fe34c7d6d7450fbdecef1c18c697a570170abef5 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 17 Dec 2016 23:12:34 -0500
Subject: [PATCH 113/120] Whoops, fix arguments to crash.

---
 packages/react-dev-utils/failFast.js  | 9 ++++-----
 packages/react-dev-utils/package.json | 2 +-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index f148acae953..a11d7d39e57 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -2,7 +2,7 @@
 
 var codeFrame = require('babel-code-frame');
 var ansiHTML = require('./ansiHTML');
-var StackTraceResolve = require('stacktrace-resolve').default;
+var StackTraceResolve = require('stack-frame-resolver').default;
 
 var CONTEXT_SIZE = 3;
 
@@ -444,7 +444,7 @@ function insertBeforeBundle(parent, omitsCount, omitBundle, actionElement) {
   var children = document.getElementsByName('bundle-' + omitBundle);
   if (children.length < 1) return;
   var first = children[0];
-  while (first.parentNode != parent) {
+  while (first.parentNode !== parent) {
     first = first.parentNode;
   }
   var div = document.createElement('div');
@@ -674,9 +674,8 @@ function renderError(index) {
 }
 
 function crash(error) {
-  var sourceOverrides = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-
   var unhandledRejection = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+  var sourceOverrides = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
 
   if (module.hot) module.hot.decline();
 
@@ -800,7 +799,7 @@ var proxyConsole = function proxyConsole(type) {
       error = e;
     }
     setTimeout(function () {
-      return crash(error, stack);
+      return crash(error, false, stack);
     });
     return orig.apply(this, arguments);
   };
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 01e5208bf70..7ac536ba676 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -33,7 +33,7 @@
     "html-entities": "1.2.0",
     "opn": "4.0.2",
     "sockjs-client": "1.0.3",
-    "stacktrace-resolve": "0.1.3",
+    "stack-frame-resolver": "0.1.3",
     "strip-ansi": "3.0.1"
   }
 }

From 640974bb3c658b04117bfb175e36a8e9f7471918 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Sat, 11 Feb 2017 02:54:35 -0500
Subject: [PATCH 114/120] es5-ify

---
 packages/react-dev-utils/ansiHTML.js | 49 +++++++++++++++-------------
 1 file changed, 26 insertions(+), 23 deletions(-)

diff --git a/packages/react-dev-utils/ansiHTML.js b/packages/react-dev-utils/ansiHTML.js
index 421a5cee532..34bb1bb4f4d 100644
--- a/packages/react-dev-utils/ansiHTML.js
+++ b/packages/react-dev-utils/ansiHTML.js
@@ -46,43 +46,46 @@ var anserMap = {
   'ansi-red': 'red',
   'ansi-bright-magenta': 'magenta',
   'ansi-magenta': 'magenta'
-}
+};
 
 function ansiHTML(txt) {
-  const arr = new Anser().ansiToJson(txt, {
+  var arr = new Anser().ansiToJson(txt, {
     use_classes: true
-  })
+  });
+
+  var result = '';
+  var open = false;
+  for (var index = 0; index < arr.length; ++index) {
+    var c = arr[index];
+    var content = c.content,
+        fg = c.fg;
 
-  let result = ''
-  let open = false
-  for (let c of arr) {
-    const { content, fg } = c
-    const contentParts = content.split('\n')
-    for (let index = 0; index < contentParts.length; ++index) {
+    var contentParts = content.split('\n');
+    for (var _index = 0; _index < contentParts.length; ++_index) {
       if (!open) {
-        result += '<span data-ansi-line="true">'
-        open = true
+        result += '<span data-ansi-line="true">';
+        open = true;
       }
-      let part = contentParts[index].replace('\r', '')
-      const color = colors[anserMap[fg]]
+      var part = contentParts[_index].replace('\r', '');
+      var color = colors[anserMap[fg]];
       if (color != null) {
-        result += `<span style="color: #${color};">${part}</span>`
+        result += '<span style="color: #' + color + ';">' + part + '</span>';
       } else {
-        if (fg != null) console.log('Missing color mapping: ', fg)
-        result += `<span>${part}</span>`
+        if (fg != null) console.log('Missing color mapping: ', fg);
+        result += '<span>' + part + '</span>';
       }
-      if (index < contentParts.length - 1) {
-        result += '</span>'
-        open = false
-        result += '<br/>'
+      if (_index < contentParts.length - 1) {
+        result += '</span>';
+        open = false;
+        result += '<br/>';
       }
     }
   }
   if (open) {
-    result += '</span>'
-    open = false
+    result += '</span>';
+    open = false;
   }
-  return result
+  return result;
 }
 
 module.exports = ansiHTML;

From 5c8a8aefa542f2a2adc25172a97240c4db652348 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Tue, 28 Feb 2017 20:59:32 -0500
Subject: [PATCH 115/120] Re-enable e2e-install directory test

---
 tasks/e2e-installs.sh | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh
index f9ae3200f74..ac25da7e609 100755
--- a/tasks/e2e-installs.sh
+++ b/tasks/e2e-installs.sh
@@ -127,7 +127,7 @@ cd $temp_app_path
 # we will install a non-existing package to simulate a failed installataion.
 create_react_app --scripts-version=`date +%s` test-app-should-not-exist || true
 # confirm that the project folder was deleted
-# test ! -d test-app-should-not-exist
+test ! -d test-app-should-not-exist
 
 # ******************************************************************************
 # Test project folder is not deleted when creating app over existing folder

From de3534605b35909066ad8ac7241dc55d2081e50c Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Mon, 6 Mar 2017 20:52:49 -0500
Subject: [PATCH 116/120] Only rewrite line number if it was resolved and
 leaves a line at bottom

---
 packages/react-dev-utils/failFast.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/failFast.js
index a11d7d39e57..bc4a12e9fba 100644
--- a/packages/react-dev-utils/failFast.js
+++ b/packages/react-dev-utils/failFast.js
@@ -695,7 +695,10 @@ function crash(error) {
 
         if (sourceFileName == null) continue;
         if (sourceFileName.indexOf('/' + tag.file) !== -1) {
-          resolvedFrames[frameIndex].sourceLineNumber = tag.lineNum;
+          var prevLineNumber = resolvedFrames[frameIndex].sourceLineNumber;
+          if (Math.abs(prevLineNumber - tag.lineNum) < CONTEXT_SIZE) {
+            resolvedFrames[frameIndex].sourceLineNumber = tag.lineNum;
+          }
           shouldContinue = true;
           break;
         }

From f31e5ab6eece884949bd223182a5994aa8e95c24 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Mon, 6 Mar 2017 21:07:32 -0500
Subject: [PATCH 117/120] Rename failFast to crashOverlay

---
 packages/react-dev-utils/{failFast.js => crashOverlay.js} | 0
 packages/react-dev-utils/package.json                     | 3 +--
 packages/react-scripts/config/webpack.config.dev.js       | 4 ++--
 3 files changed, 3 insertions(+), 4 deletions(-)
 rename packages/react-dev-utils/{failFast.js => crashOverlay.js} (100%)

diff --git a/packages/react-dev-utils/failFast.js b/packages/react-dev-utils/crashOverlay.js
similarity index 100%
rename from packages/react-dev-utils/failFast.js
rename to packages/react-dev-utils/crashOverlay.js
diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json
index 46e693d817e..64037886a0e 100644
--- a/packages/react-dev-utils/package.json
+++ b/packages/react-dev-utils/package.json
@@ -14,8 +14,7 @@
     "ansiHTML.js",
     "checkRequiredFiles.js",
     "clearConsole.js",
-    "failFast.css",
-    "failFast.js",
+    "crashOverlay.js",
     "FileSizeReporter.js",
     "formatWebpackMessages.js",
     "getProcessForPort.js",
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 65da6f72819..a952969e00f 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -58,8 +58,8 @@ module.exports = {
     require.resolve('react-dev-utils/webpackHotDevClient'),
     // We ship a few polyfills by default:
     require.resolve('./polyfills'),
-    // In development, we want to fail fast
-    require.resolve('react-dev-utils/failFast'),
+    // Errors should be considered fatal in development
+    require.resolve('react-dev-utils/crashOverlay'),
     // Finally, this is your app's code:
     paths.appIndexJs
     // We include the app code last so that if there is a runtime error during

From 37ff1ccaaf7050bbd681c4db467fd134bea65274 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Mon, 6 Mar 2017 21:26:07 -0500
Subject: [PATCH 118/120] Disable console proxy

---
 packages/react-dev-utils/crashOverlay.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-dev-utils/crashOverlay.js b/packages/react-dev-utils/crashOverlay.js
index bc4a12e9fba..3ce8a6ac68a 100644
--- a/packages/react-dev-utils/crashOverlay.js
+++ b/packages/react-dev-utils/crashOverlay.js
@@ -808,7 +808,7 @@ var proxyConsole = function proxyConsole(type) {
   };
 };
 
-proxyConsole('error');
+// proxyConsole('error');
 
 if (module.hot) {
   module.hot.dispose(function () {

From 2d76dff789639538c245b2a57888722b66413a7e Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Mon, 6 Mar 2017 21:36:38 -0500
Subject: [PATCH 119/120] Appease linter

---
 packages/react-dev-utils/ansiHTML.js     | 29 ++++++++++++++++--------
 packages/react-dev-utils/crashOverlay.js | 19 ++++++++++++----
 2 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/packages/react-dev-utils/ansiHTML.js b/packages/react-dev-utils/ansiHTML.js
index 34bb1bb4f4d..27a514e01d0 100644
--- a/packages/react-dev-utils/ansiHTML.js
+++ b/packages/react-dev-utils/ansiHTML.js
@@ -1,22 +1,33 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
+'use strict';
+
 var Anser = require('anser');
 
 // Color scheme inspired by https://chriskempson.github.io/base16/css/base16-github.css
-var base00 = 'ffffff'; // Default Background
+// var base00 = 'ffffff'; // Default Background
 var base01 = 'f5f5f5'; // Lighter Background (Used for status bars)
-var base02 = 'c8c8fa'; // Selection Background
+// var base02 = 'c8c8fa'; // Selection Background
 var base03 = '969896'; // Comments, Invisibles, Line Highlighting
-var base04 = 'e8e8e8'; // Dark Foreground (Used for status bars)
+// 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 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 base09 = '0086b3'; // Integers, Boolean, Constants, XML Attributes, Markup Link Url
-var base0A = '795da3'; // Classes, Markup Bold, Search Text Background
+// 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 base0D = '795da3'; // Functions, Methods, Attribute IDs, Headings
+// var base0D = '795da3'; // Functions, Methods, Attribute IDs, Headings
 var base0E = 'a71d5d'; // Keywords, Storage, Selector, Markup Italic, Diff Changed
-var base0F = '333333'; // Deprecated, Opening/Closing Embedded Language Tags e.g. <?php ?>
+// var base0F = '333333'; // Deprecated, Opening/Closing Embedded Language Tags e.g. <?php ?>
 
 // Map ANSI colors from what babel-code-frame uses to base16-github
 // See: https://github.com/babel/babel/blob/e86f62b304d280d0bab52c38d61842b853848ba6/packages/babel-code-frame/src/index.js#L9-L22
diff --git a/packages/react-dev-utils/crashOverlay.js b/packages/react-dev-utils/crashOverlay.js
index 3ce8a6ac68a..11f9f4e2472 100644
--- a/packages/react-dev-utils/crashOverlay.js
+++ b/packages/react-dev-utils/crashOverlay.js
@@ -1,3 +1,12 @@
+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+
 'use strict';
 
 var codeFrame = require('babel-code-frame');
@@ -370,7 +379,7 @@ function hintsDiv() {
   applyStyles(hints, hintsStyle);
 
   var close = createHint('×');
-  close.addEventListener('click', function (e) {
+  close.addEventListener('click', function () {
     unmount();
   });
   applyStyles(close, closeButtonStyle);
@@ -417,7 +426,7 @@ function getGroupToggle(omitsCount, omitBundle) {
   accessify(omittedFrames);
   var text1 = document.createTextNode('\u25B6 ' + omitsCount + ' stack frames were collapsed.');
   omittedFrames.appendChild(text1);
-  omittedFrames.addEventListener('click', function (e) {
+  omittedFrames.addEventListener('click', function () {
     var hide = text1.textContent.match(/▲/);
     var list = document.getElementsByName('bundle-' + omitBundle);
     for (var index = 0; index < list.length; ++index) {
@@ -452,7 +461,7 @@ function insertBeforeBundle(parent, omitsCount, omitBundle, actionElement) {
   div.setAttribute('name', 'bundle-' + omitBundle);
   var text = document.createTextNode('\u25BC ' + omitsCount + ' stack frames were expanded.');
   div.appendChild(text);
-  div.addEventListener('click', function (e) {
+  div.addEventListener('click', function () {
     return actionElement.click();
   });
   applyStyles(div, omittedFramesStyle);
@@ -770,7 +779,9 @@ window.addEventListener('keydown', escapeHandler);
 
 try {
   Error.stackTraceLimit = 50;
-} catch (e) {}
+} catch (e) {
+  // Browser may not support this, we don't care.
+}
 
 var proxyConsole = function proxyConsole(type) {
   var orig = console[type];

From 77929a93ec2cc7e1fe7611b7a18b25f48cf65781 Mon Sep 17 00:00:00 2001
From: Joe Haddad <timer150@gmail.com>
Date: Mon, 6 Mar 2017 21:39:32 -0500
Subject: [PATCH 120/120] Appease more

---
 packages/react-dev-utils/crashOverlay.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/react-dev-utils/crashOverlay.js b/packages/react-dev-utils/crashOverlay.js
index 11f9f4e2472..d92e793ac18 100644
--- a/packages/react-dev-utils/crashOverlay.js
+++ b/packages/react-dev-utils/crashOverlay.js
@@ -783,6 +783,7 @@ try {
   // Browser may not support this, we don't care.
 }
 
+// eslint-disable-next-line
 var proxyConsole = function proxyConsole(type) {
   var orig = console[type];
   console[type] = function __cra_proxy_console__() {