From 6c8b18b0cdfdce5128e3e379be290f711940f477 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Thu, 18 May 2017 23:07:56 +0100
Subject: [PATCH] Improve interaction between compile and runtime overlays
(#2219)
---
packages/react-dev-utils/webpackHotDevClient.js | 13 +++++++++----
packages/react-error-overlay/src/styles.js | 2 +-
2 files changed, 10 insertions(+), 5 deletions(-)
diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js
index c76d5c6fe..647253673 100644
--- a/packages/react-dev-utils/webpackHotDevClient.js
+++ b/packages/react-dev-utils/webpackHotDevClient.js
@@ -38,7 +38,7 @@ function createOverlayIframe(onIframeLoad) {
iframe.style.width = '100vw';
iframe.style.height = '100vh';
iframe.style.border = 'none';
- iframe.style.zIndex = 9999999999;
+ iframe.style.zIndex = 2147483647;
iframe.onload = onIframeLoad;
return iframe;
}
@@ -192,7 +192,6 @@ function clearOutdatedErrors() {
// Successful compilation.
function handleSuccess() {
clearOutdatedErrors();
- destroyErrorOverlay();
var isHotUpdate = !isFirstCompilation;
isFirstCompilation = false;
@@ -200,14 +199,17 @@ function handleSuccess() {
// Attempt to apply hot updates or reload.
if (isHotUpdate) {
- tryApplyUpdates();
+ tryApplyUpdates(function onHotUpdateSuccess() {
+ // Only destroy it when we're sure it's a hot update.
+ // Otherwise it would flicker right before the reload.
+ destroyErrorOverlay();
+ });
}
}
// Compilation with warnings (e.g. ESLint).
function handleWarnings(warnings) {
clearOutdatedErrors();
- destroyErrorOverlay();
var isHotUpdate = !isFirstCompilation;
isFirstCompilation = false;
@@ -231,6 +233,9 @@ function handleWarnings(warnings) {
// Only print warnings if we aren't refreshing the page.
// Otherwise they'll disappear right away anyway.
printWarnings();
+ // Only destroy it when we're sure it's a hot update.
+ // Otherwise it would flicker right before the reload.
+ destroyErrorOverlay();
});
} else {
// Print initial warnings immediately.
diff --git a/packages/react-error-overlay/src/styles.js b/packages/react-error-overlay/src/styles.js
index 916513f3c..ce1277307 100644
--- a/packages/react-error-overlay/src/styles.js
+++ b/packages/react-error-overlay/src/styles.js
@@ -15,7 +15,7 @@ const iframeStyle = {
width: '100%',
height: '100%',
border: 'none',
- 'z-index': 1337,
+ 'z-index': 2147483647 - 1, // below the compile error overlay
};
const overlayStyle = {
--
GitLab