From 782c514aac301e0b1708dfd1912f8c21dc35733e Mon Sep 17 00:00:00 2001
From: evilebottnawi <sheo13666q@gmail.com>
Date: Thu, 9 Sep 2021 20:17:42 +0300
Subject: [PATCH 1/3] fix: close overlay on disconnection

---
 client-src/index.js                           |  12 +-
 .../overlay.test.js.snap.webpack4             | 194 ++++++++++++------
 .../overlay.test.js.snap.webpack5             | 170 ++++++++++-----
 test/e2e/overlay.test.js                      |  75 +++++--
 4 files changed, 320 insertions(+), 131 deletions(-)
diff --git a/client-src/index.js b/client-src/index.js
index 5dd697e983..63251d7992 100644
--- a/client-src/index.js
+++ b/client-src/index.js
@@ -161,12 +161,12 @@ const onSocketMessage = {
       log.warn(strippedWarnings[i]);
     }
 
-    const needShowOverlay =
+    const needShowOverlayForWarnings =
       typeof options.overlay === "boolean"
         ? options.overlay
         : options.overlay && options.overlay.warnings;
 
-    if (needShowOverlay) {
+    if (needShowOverlayForWarnings) {
       show(warnings, "warnings");
     }
 
@@ -185,12 +185,12 @@ const onSocketMessage = {
       log.error(strippedErrors[i]);
     }
 
-    const needShowOverlay =
+    const needShowOverlayForErrors =
       typeof options.overlay === "boolean"
         ? options.overlay
         : options.overlay && options.overlay.errors;
 
-    if (needShowOverlay) {
+    if (needShowOverlayForErrors) {
       show(errors, "errors");
     }
   },
@@ -200,6 +200,10 @@ const onSocketMessage = {
   close() {
     log.info("Disconnected!");
 
+    if (options.overlay) {
+      hide();
+    }
+
     sendMessage("Close");
   },
 };
diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
index 804589bc46..b92f1d39db 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`overlay should not show a warning when "client.overlay" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should not show a warning when "client.overlay.warnings" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should not show an error when "client.overlay" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should not show an error when "client.overlay.errors" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
 exports[`overlay should not show initially, then show on an error and allow to close: overlay html 1`] = `
 "<body>
   <div
@@ -37,9 +65,9 @@ exports[`overlay should not show initially, then show on an error and allow to c
     <div>
       <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
       <div>
-        ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
-        need an appropriate loader to handle this file type, currently no
-        loaders are configured to process this file. See
+        Module parse failed: Unterminated template (1:1) You may need an
+        appropriate loader to handle this file type, currently no loaders are
+        configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;
       </div>
       <br /><br />
@@ -119,9 +147,9 @@ exports[`overlay should not show initially, then show on an error, then hide on
     <div>
       <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
       <div>
-        ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
-        need an appropriate loader to handle this file type, currently no
-        loaders are configured to process this file. See
+        Module parse failed: Unterminated template (1:1) You may need an
+        appropriate loader to handle this file type, currently no loaders are
+        configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;
       </div>
       <br /><br />
@@ -201,9 +229,9 @@ exports[`overlay should not show initially, then show on an error, then show oth
     <div>
       <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
       <div>
-        ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
-        need an appropriate loader to handle this file type, currently no
-        loaders are configured to process this file. See
+        Module parse failed: Unterminated template (1:1) You may need an
+        appropriate loader to handle this file type, currently no loaders are
+        configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;
       </div>
       <br /><br />
@@ -250,9 +278,9 @@ exports[`overlay should not show initially, then show on an error, then show oth
     <div>
       <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
       <div>
-        ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
-        need an appropriate loader to handle this file type, currently no
-        loaders are configured to process this file. See
+        Module parse failed: Unterminated template (1:1) You may need an
+        appropriate loader to handle this file type, currently no loaders are
+        configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;a
       </div>
       <br /><br />
@@ -314,35 +342,7 @@ exports[`overlay should not show initially, then show on an error, then show oth
 "
 `;
 
-exports[`overlay should not show on a warning when "client.overlay" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should not show on a warning when "client.overlay.warnings" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should not show on an error when "client.overlay" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should not show on an error when "client.overlay.errors" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should show on a warning and error for initial compilation and protects against xss: overlay html 1`] = `
+exports[`overlay should show a warning and error for initial compilation and protects against xss: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -391,7 +391,7 @@ exports[`overlay should show on a warning and error for initial compilation and
 "
 `;
 
-exports[`overlay should show on a warning and error for initial compilation and protects against xss: page html 1`] = `
+exports[`overlay should show a warning and error for initial compilation and protects against xss: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -410,7 +410,7 @@ exports[`overlay should show on a warning and error for initial compilation and
 "
 `;
 
-exports[`overlay should show on a warning and error for initial compilation: overlay html 1`] = `
+exports[`overlay should show a warning and error for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -474,7 +474,7 @@ exports[`overlay should show on a warning and error for initial compilation: ove
 "
 `;
 
-exports[`overlay should show on a warning and error for initial compilation: page html 1`] = `
+exports[`overlay should show a warning and error for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -493,7 +493,77 @@ exports[`overlay should show on a warning and error for initial compilation: pag
 "
 `;
 
-exports[`overlay should show on a warning for initial compilation: overlay html 1`] = `
+exports[`overlay should show a warning and hide them after closing connection: overlay html 1`] = `
+"<body>
+  <div
+    id=\\"webpack-dev-server-client-overlay-div\\"
+    style=\\"
+      position: fixed;
+      box-sizing: border-box;
+      inset: 0px;
+      width: 100vw;
+      height: 100vh;
+      background-color: rgba(0, 0, 0, 0.85);
+      color: rgb(232, 232, 232);
+      font-family: Menlo, Consolas, monospace;
+      font-size: large;
+      padding: 2rem;
+      line-height: 1.2;
+      white-space: pre-wrap;
+      overflow: auto;
+    \\"
+  >
+    <span>Compiled with problems:</span
+    ><button
+      style=\\"
+        background: transparent;
+        border: none;
+        font-size: 20px;
+        font-weight: bold;
+        color: white;
+        cursor: pointer;
+        float: right;
+      \\"
+    >
+      X</button
+    ><br /><br />
+    <div>
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
+    </div>
+  </div>
+</body>
+"
+`;
+
+exports[`overlay should show a warning and hide them after closing connection: page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+  <iframe
+    id=\\"webpack-dev-server-client-overlay\\"
+    src=\\"about:blank\\"
+    style=\\"
+      position: fixed;
+      inset: 0px;
+      width: 100vw;
+      height: 100vh;
+      border: none;
+      z-index: 2147483647;
+    \\"
+  ></iframe>
+</body>
+"
+`;
+
+exports[`overlay should show a warning and hide them after closing connection: page html 2`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should show a warning for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -537,7 +607,7 @@ exports[`overlay should show on a warning for initial compilation: overlay html
 "
 `;
 
-exports[`overlay should show on a warning for initial compilation: page html 1`] = `
+exports[`overlay should show a warning for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -556,7 +626,7 @@ exports[`overlay should show on a warning for initial compilation: page html 1`]
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay" is "true": overlay html 1`] = `
+exports[`overlay should show a warning when "client.overlay" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -600,7 +670,7 @@ exports[`overlay should show on a warning when "client.overlay" is "true": overl
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay" is "true": page html 1`] = `
+exports[`overlay should show a warning when "client.overlay" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -619,7 +689,7 @@ exports[`overlay should show on a warning when "client.overlay" is "true": page
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.errors" is "true": overlay html 1`] = `
+exports[`overlay should show a warning when "client.overlay.errors" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -663,7 +733,7 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.errors" is "true": page html 1`] = `
+exports[`overlay should show a warning when "client.overlay.errors" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -682,7 +752,7 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.warnings" is "true": overlay html 1`] = `
+exports[`overlay should show a warning when "client.overlay.warnings" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -726,7 +796,7 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.warnings" is "true": page html 1`] = `
+exports[`overlay should show a warning when "client.overlay.warnings" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -745,7 +815,7 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
 "
 `;
 
-exports[`overlay should show on an ansi formatted error for initial compilation: overlay html 1`] = `
+exports[`overlay should show an ansi formatted error for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -802,7 +872,7 @@ exports[`overlay should show on an ansi formatted error for initial compilation:
 "
 `;
 
-exports[`overlay should show on an ansi formatted error for initial compilation: page html 1`] = `
+exports[`overlay should show an ansi formatted error for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -821,7 +891,7 @@ exports[`overlay should show on an ansi formatted error for initial compilation:
 "
 `;
 
-exports[`overlay should show on an error for initial compilation: overlay html 1`] = `
+exports[`overlay should show an error for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -865,7 +935,7 @@ exports[`overlay should show on an error for initial compilation: overlay html 1
 "
 `;
 
-exports[`overlay should show on an error for initial compilation: page html 1`] = `
+exports[`overlay should show an error for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -884,7 +954,7 @@ exports[`overlay should show on an error for initial compilation: page html 1`]
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay" is "true": overlay html 1`] = `
+exports[`overlay should show an error when "client.overlay" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -928,7 +998,7 @@ exports[`overlay should show on an error when "client.overlay" is "true": overla
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay" is "true": page html 1`] = `
+exports[`overlay should show an error when "client.overlay" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -947,7 +1017,7 @@ exports[`overlay should show on an error when "client.overlay" is "true": page h
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.errors" is "true": overlay html 1`] = `
+exports[`overlay should show an error when "client.overlay.errors" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -991,7 +1061,7 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.errors" is "true": page html 1`] = `
+exports[`overlay should show an error when "client.overlay.errors" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -1010,7 +1080,7 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.warnings" is "true": overlay html 1`] = `
+exports[`overlay should show an error when "client.overlay.warnings" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -1054,7 +1124,7 @@ exports[`overlay should show on an error when "client.overlay.warnings" is "true
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.warnings" is "true": page html 1`] = `
+exports[`overlay should show an error when "client.overlay.warnings" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
index 6aac366d4c..b92f1d39db 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack5
@@ -1,5 +1,33 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`overlay should not show a warning when "client.overlay" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should not show a warning when "client.overlay.warnings" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should not show an error when "client.overlay" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should not show an error when "client.overlay.errors" is "false": page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
 exports[`overlay should not show initially, then show on an error and allow to close: overlay html 1`] = `
 "<body>
   <div
@@ -314,35 +342,7 @@ exports[`overlay should not show initially, then show on an error, then show oth
 "
 `;
 
-exports[`overlay should not show on a warning when "client.overlay" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should not show on a warning when "client.overlay.warnings" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should not show on an error when "client.overlay" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should not show on an error when "client.overlay.errors" is "false": page html 1`] = `
-"<body>
-  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
-</body>
-"
-`;
-
-exports[`overlay should show on a warning and error for initial compilation and protects against xss: overlay html 1`] = `
+exports[`overlay should show a warning and error for initial compilation and protects against xss: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -391,7 +391,7 @@ exports[`overlay should show on a warning and error for initial compilation and
 "
 `;
 
-exports[`overlay should show on a warning and error for initial compilation and protects against xss: page html 1`] = `
+exports[`overlay should show a warning and error for initial compilation and protects against xss: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -410,7 +410,7 @@ exports[`overlay should show on a warning and error for initial compilation and
 "
 `;
 
-exports[`overlay should show on a warning and error for initial compilation: overlay html 1`] = `
+exports[`overlay should show a warning and error for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -474,7 +474,7 @@ exports[`overlay should show on a warning and error for initial compilation: ove
 "
 `;
 
-exports[`overlay should show on a warning and error for initial compilation: page html 1`] = `
+exports[`overlay should show a warning and error for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -493,7 +493,77 @@ exports[`overlay should show on a warning and error for initial compilation: pag
 "
 `;
 
-exports[`overlay should show on a warning for initial compilation: overlay html 1`] = `
+exports[`overlay should show a warning and hide them after closing connection: overlay html 1`] = `
+"<body>
+  <div
+    id=\\"webpack-dev-server-client-overlay-div\\"
+    style=\\"
+      position: fixed;
+      box-sizing: border-box;
+      inset: 0px;
+      width: 100vw;
+      height: 100vh;
+      background-color: rgba(0, 0, 0, 0.85);
+      color: rgb(232, 232, 232);
+      font-family: Menlo, Consolas, monospace;
+      font-size: large;
+      padding: 2rem;
+      line-height: 1.2;
+      white-space: pre-wrap;
+      overflow: auto;
+    \\"
+  >
+    <span>Compiled with problems:</span
+    ><button
+      style=\\"
+        background: transparent;
+        border: none;
+        font-size: 20px;
+        font-weight: bold;
+        color: white;
+        cursor: pointer;
+        float: right;
+      \\"
+    >
+      X</button
+    ><br /><br />
+    <div>
+      <span style=\\"color: rgb(227, 96, 73)\\">Warning:</span><br /><br />
+      <div>Warning from compilation</div>
+      <br /><br />
+    </div>
+  </div>
+</body>
+"
+`;
+
+exports[`overlay should show a warning and hide them after closing connection: page html 1`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+  <iframe
+    id=\\"webpack-dev-server-client-overlay\\"
+    src=\\"about:blank\\"
+    style=\\"
+      position: fixed;
+      inset: 0px;
+      width: 100vw;
+      height: 100vh;
+      border: none;
+      z-index: 2147483647;
+    \\"
+  ></iframe>
+</body>
+"
+`;
+
+exports[`overlay should show a warning and hide them after closing connection: page html 2`] = `
+"<body>
+  <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
+</body>
+"
+`;
+
+exports[`overlay should show a warning for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -537,7 +607,7 @@ exports[`overlay should show on a warning for initial compilation: overlay html
 "
 `;
 
-exports[`overlay should show on a warning for initial compilation: page html 1`] = `
+exports[`overlay should show a warning for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -556,7 +626,7 @@ exports[`overlay should show on a warning for initial compilation: page html 1`]
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay" is "true": overlay html 1`] = `
+exports[`overlay should show a warning when "client.overlay" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -600,7 +670,7 @@ exports[`overlay should show on a warning when "client.overlay" is "true": overl
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay" is "true": page html 1`] = `
+exports[`overlay should show a warning when "client.overlay" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -619,7 +689,7 @@ exports[`overlay should show on a warning when "client.overlay" is "true": page
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.errors" is "true": overlay html 1`] = `
+exports[`overlay should show a warning when "client.overlay.errors" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -663,7 +733,7 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.errors" is "true": page html 1`] = `
+exports[`overlay should show a warning when "client.overlay.errors" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -682,7 +752,7 @@ exports[`overlay should show on a warning when "client.overlay.errors" is "true"
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.warnings" is "true": overlay html 1`] = `
+exports[`overlay should show a warning when "client.overlay.warnings" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -726,7 +796,7 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
 "
 `;
 
-exports[`overlay should show on a warning when "client.overlay.warnings" is "true": page html 1`] = `
+exports[`overlay should show a warning when "client.overlay.warnings" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -745,7 +815,7 @@ exports[`overlay should show on a warning when "client.overlay.warnings" is "tru
 "
 `;
 
-exports[`overlay should show on an ansi formatted error for initial compilation: overlay html 1`] = `
+exports[`overlay should show an ansi formatted error for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -802,7 +872,7 @@ exports[`overlay should show on an ansi formatted error for initial compilation:
 "
 `;
 
-exports[`overlay should show on an ansi formatted error for initial compilation: page html 1`] = `
+exports[`overlay should show an ansi formatted error for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -821,7 +891,7 @@ exports[`overlay should show on an ansi formatted error for initial compilation:
 "
 `;
 
-exports[`overlay should show on an error for initial compilation: overlay html 1`] = `
+exports[`overlay should show an error for initial compilation: overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -865,7 +935,7 @@ exports[`overlay should show on an error for initial compilation: overlay html 1
 "
 `;
 
-exports[`overlay should show on an error for initial compilation: page html 1`] = `
+exports[`overlay should show an error for initial compilation: page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -884,7 +954,7 @@ exports[`overlay should show on an error for initial compilation: page html 1`]
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay" is "true": overlay html 1`] = `
+exports[`overlay should show an error when "client.overlay" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -928,7 +998,7 @@ exports[`overlay should show on an error when "client.overlay" is "true": overla
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay" is "true": page html 1`] = `
+exports[`overlay should show an error when "client.overlay" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -947,7 +1017,7 @@ exports[`overlay should show on an error when "client.overlay" is "true": page h
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.errors" is "true": overlay html 1`] = `
+exports[`overlay should show an error when "client.overlay.errors" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -991,7 +1061,7 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.errors" is "true": page html 1`] = `
+exports[`overlay should show an error when "client.overlay.errors" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
@@ -1010,7 +1080,7 @@ exports[`overlay should show on an error when "client.overlay.errors" is "true":
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.warnings" is "true": overlay html 1`] = `
+exports[`overlay should show an error when "client.overlay.warnings" is "true": overlay html 1`] = `
 "<body>
   <div
     id=\\"webpack-dev-server-client-overlay-div\\"
@@ -1054,7 +1124,7 @@ exports[`overlay should show on an error when "client.overlay.warnings" is "true
 "
 `;
 
-exports[`overlay should show on an error when "client.overlay.warnings" is "true": page html 1`] = `
+exports[`overlay should show an error when "client.overlay.warnings" is "true": page html 1`] = `
 "<body>
   <script type=\\"text/javascript\\" charset=\\"utf-8\\" src=\\"/main.js\\"></script>
   <iframe
diff --git a/test/e2e/overlay.test.js b/test/e2e/overlay.test.js
index e55da085fe..f87e4f18ca 100644
--- a/test/e2e/overlay.test.js
+++ b/test/e2e/overlay.test.js
@@ -43,7 +43,7 @@ class WarningPlugin {
 }
 
 describe("overlay", () => {
-  it("should show on a warning for initial compilation", async () => {
+  it("should show a warning for initial compilation", async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -79,7 +79,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it("should show on an error for initial compilation", async () => {
+  it("should show an error for initial compilation", async () => {
     const compiler = webpack(config);
 
     new ErrorPlugin().apply(compiler);
@@ -115,7 +115,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it("should show on a warning and error for initial compilation", async () => {
+  it("should show a warning and error for initial compilation", async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -155,7 +155,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it("should show on an ansi formatted error for initial compilation", async () => {
+  it("should show an ansi formatted error for initial compilation", async () => {
     const compiler = webpack(config);
 
     new ErrorPlugin("[0m [90m 18 |[39m           [33mRender[39m [33mansi formatted text[39m[0m").apply(
@@ -193,7 +193,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it("should show on a warning and error for initial compilation and protects against xss", async () => {
+  it("should show a warning and error for initial compilation and protects against xss", async () => {
     const compiler = webpack(config);
 
     new WarningPlugin("<strong>strong</strong>").apply(compiler);
@@ -456,7 +456,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should not show on a warning when "client.overlay" is "false"', async () => {
+  it('should not show a warning when "client.overlay" is "false"', async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -489,7 +489,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should not show on a warning when "client.overlay.warnings" is "false"', async () => {
+  it('should not show a warning when "client.overlay.warnings" is "false"', async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -524,7 +524,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should show on a warning when "client.overlay" is "true"', async () => {
+  it('should show a warning when "client.overlay" is "true"', async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -563,7 +563,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should show on a warning when "client.overlay.warnings" is "true"', async () => {
+  it('should show a warning when "client.overlay.warnings" is "true"', async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -604,7 +604,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should show on a warning when "client.overlay.errors" is "true"', async () => {
+  it('should show a warning when "client.overlay.errors" is "true"', async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -645,7 +645,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should not show on an error when "client.overlay" is "false"', async () => {
+  it('should not show an error when "client.overlay" is "false"', async () => {
     const compiler = webpack(config);
 
     new ErrorPlugin().apply(compiler);
@@ -678,7 +678,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should not show on an error when "client.overlay.errors" is "false"', async () => {
+  it('should not show an error when "client.overlay.errors" is "false"', async () => {
     const compiler = webpack(config);
 
     new ErrorPlugin().apply(compiler);
@@ -713,7 +713,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should show on an error when "client.overlay" is "true"', async () => {
+  it('should show an error when "client.overlay" is "true"', async () => {
     const compiler = webpack(config);
 
     new ErrorPlugin().apply(compiler);
@@ -752,7 +752,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should show on an error when "client.overlay.errors" is "true"', async () => {
+  it('should show an error when "client.overlay.errors" is "true"', async () => {
     const compiler = webpack(config);
 
     new ErrorPlugin().apply(compiler);
@@ -793,7 +793,7 @@ describe("overlay", () => {
     await server.stop();
   });
 
-  it('should show on an error when "client.overlay.warnings" is "true"', async () => {
+  it('should show an error when "client.overlay.warnings" is "true"', async () => {
     const compiler = webpack(config);
 
     new WarningPlugin().apply(compiler);
@@ -833,4 +833,49 @@ describe("overlay", () => {
     await browser.close();
     await server.stop();
   });
+
+  it("should show a warning and hide them after closing connection", async () => {
+    const compiler = webpack(config);
+
+    new WarningPlugin().apply(compiler);
+
+    const devServerOptions = {
+      port,
+    };
+    const server = new Server(devServerOptions, compiler);
+
+    await server.start();
+
+    const { page, browser } = await runBrowser();
+
+    await page.goto(`http://localhost:${port}/main`, {
+      waitUntil: "networkidle0",
+    });
+
+    const pageHtml = await page.evaluate(() => document.body.outerHTML);
+    const overlayHandle = await page.$("#webpack-dev-server-client-overlay");
+    const overlayFrame = await overlayHandle.contentFrame();
+    const overlayHtml = await overlayFrame.evaluate(
+      () => document.body.outerHTML
+    );
+
+    expect(prettier.format(pageHtml, { parser: "html" })).toMatchSnapshot(
+      "page html"
+    );
+    expect(prettier.format(overlayHtml, { parser: "html" })).toMatchSnapshot(
+      "overlay html"
+    );
+
+    await server.stop();
+
+    const pageHtmlAfterClose = await page.evaluate(
+      () => document.body.outerHTML
+    );
+
+    expect(
+      prettier.format(pageHtmlAfterClose, { parser: "html" })
+    ).toMatchSnapshot("page html");
+
+    await browser.close();
+  });
 });

From dd9f92f77af2a1d725b29d966a5883d62a8d3645 Mon Sep 17 00:00:00 2001
From: evilebottnawi <sheo13666q@gmail.com>
Date: Thu, 9 Sep 2021 20:43:25 +0300
Subject: [PATCH 2/3] test: fix

---
 test/e2e/overlay.test.js | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/test/e2e/overlay.test.js b/test/e2e/overlay.test.js
index f87e4f18ca..90f8c41697 100644
--- a/test/e2e/overlay.test.js
+++ b/test/e2e/overlay.test.js
@@ -839,15 +839,19 @@ describe("overlay", () => {
 
     new WarningPlugin().apply(compiler);
 
-    const devServerOptions = {
-      port,
-    };
+    const devServerOptions = { port };
     const server = new Server(devServerOptions, compiler);
 
     await server.start();
 
     const { page, browser } = await runBrowser();
 
+    const consoleMessages = [];
+
+    page.on("console", (message) => {
+      consoleMessages.push(message.text());
+    });
+
     await page.goto(`http://localhost:${port}/main`, {
       waitUntil: "networkidle0",
     });
@@ -868,6 +872,16 @@ describe("overlay", () => {
 
     await server.stop();
 
+    await new Promise((resolve) => {
+      const interval = setInterval(() => {
+        if (consoleMessages.includes("[webpack-dev-server] Disconnected!")) {
+          clearInterval(interval);
+
+          resolve();
+        }
+      }, 100);
+    });
+
     const pageHtmlAfterClose = await page.evaluate(
       () => document.body.outerHTML
     );

From 170e33b57371a6a0afe685a9561adc646f0a5d19 Mon Sep 17 00:00:00 2001
From: evilebottnawi <sheo13666q@gmail.com>
Date: Thu, 9 Sep 2021 20:57:55 +0300
Subject: [PATCH 3/3] test: update

---
 .../overlay.test.js.snap.webpack4             | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4 b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
index b92f1d39db..d8a4d50c72 100644
--- a/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
+++ b/test/e2e/__snapshots__/overlay.test.js.snap.webpack4
@@ -65,9 +65,9 @@ exports[`overlay should not show initially, then show on an error and allow to c
     <div>
       <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
       <div>
-        Module parse failed: Unterminated template (1:1) You may need an
-        appropriate loader to handle this file type, currently no loaders are
-        configured to process this file. See
+        ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
+        need an appropriate loader to handle this file type, currently no
+        loaders are configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;
       </div>
       <br /><br />
@@ -147,9 +147,9 @@ exports[`overlay should not show initially, then show on an error, then hide on
     <div>
       <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
       <div>
-        Module parse failed: Unterminated template (1:1) You may need an
-        appropriate loader to handle this file type, currently no loaders are
-        configured to process this file. See
+        ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
+        need an appropriate loader to handle this file type, currently no
+        loaders are configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;
       </div>
       <br /><br />
@@ -229,9 +229,9 @@ exports[`overlay should not show initially, then show on an error, then show oth
     <div>
       <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
       <div>
-        Module parse failed: Unterminated template (1:1) You may need an
-        appropriate loader to handle this file type, currently no loaders are
-        configured to process this file. See
+        ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
+        need an appropriate loader to handle this file type, currently no
+        loaders are configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;
       </div>
       <br /><br />
@@ -278,9 +278,9 @@ exports[`overlay should not show initially, then show on an error, then show oth
     <div>
       <span style=\\"color: rgb(227, 96, 73)\\">Error:</span><br /><br />
       <div>
-        Module parse failed: Unterminated template (1:1) You may need an
-        appropriate loader to handle this file type, currently no loaders are
-        configured to process this file. See
+        ./foo.js 1:1 Module parse failed: Unterminated template (1:1) You may
+        need an appropriate loader to handle this file type, currently no
+        loaders are configured to process this file. See
         https://webpack.js.org/concepts#loaders &gt; \`;a
       </div>
       <br /><br />
