From f6f958cc7c53161bad1f97fd144a7a8f75664f30 Mon Sep 17 00:00:00 2001
From: Sebastian Brunner <brunner.sebi4@gmail.com>
Date: Fri, 7 Jul 2017 23:26:38 +0200
Subject: [PATCH 01/25] copied status.js from overlay.js

---
 client/status.js | 124 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 124 insertions(+)
 create mode 100644 client/status.js

diff --git a/client/status.js b/client/status.js
new file mode 100644
index 0000000000..d34e9b50fb
--- /dev/null
+++ b/client/status.js
@@ -0,0 +1,124 @@
+var ansiHTML = require("ansi-html");
+var Entities = require("html-entities").AllHtmlEntities;
+var entities = new Entities();
+
+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 = "webpack-dev-server-client-overlay";
+	iframe.src = "about:blank";
+	iframe.style.position = "fixed";
+	iframe.style.left = 0;
+	iframe.style.top = 0;
+	iframe.style.right = 0;
+	iframe.style.bottom = 0;
+	iframe.style.width = "100vw";
+	iframe.style.height = "100vh";
+	iframe.style.border = "none";
+	iframe.style.zIndex = 9999999999;
+	iframe.onload = onIframeLoad;
+	return iframe;
+}
+
+function addOverlayDivTo(iframe) {
+	var div = iframe.contentDocument.createElement("div");
+	div.id = "webpack-dev-server-client-overlay-div";
+	div.style.position = "fixed";
+	div.style.boxSizing = "border-box";
+	div.style.left = 0;
+	div.style.top = 0;
+	div.style.right = 0;
+	div.style.bottom = 0;
+	div.style.width = "100vw";
+	div.style.height = "100vh";
+	div.style.backgroundColor = "black";
+	div.style.color = "#E8E8E8";
+	div.style.fontFamily = "Menlo, Consolas, monospace";
+	div.style.fontSize = "large";
+	div.style.padding = "2rem";
+	div.style.lineHeight = "1.2";
+	div.style.whiteSpace = "pre-wrap";
+	div.style.overflow = "auto";
+	iframe.contentDocument.body.appendChild(div);
+	return div;
+}
+
+var overlayIframe = null;
+var overlayDiv = null;
+var lastOnOverlayDivReady = null;
+
+function ensureOverlayDivExists(onOverlayDivReady) {
+	if(overlayDiv) {
+	// Everything is ready, call the callback right away.
+		onOverlayDivReady(overlayDiv);
+		return;
+	}
+
+	// Creating an iframe may be asynchronous so we'll schedule the callback.
+	// In case of multiple calls, last callback wins.
+	lastOnOverlayDivReady = onOverlayDivReady;
+
+	if(overlayIframe) {
+		// We're already creating it.
+		return;
+	}
+
+	// Create iframe and, when it is ready, a div inside it.
+	overlayIframe = createOverlayIframe(function onIframeLoad() {
+		overlayDiv = addOverlayDivTo(overlayIframe);
+		// Now we can talk!
+		lastOnOverlayDivReady(overlayDiv);
+	});
+
+	// Zalgo alert: onIframeLoad() will be called either synchronously
+	// or asynchronously depending on the browser.
+	// We delay adding it so `overlayIframe` is set when `onIframeLoad` fires.
+	document.body.appendChild(overlayIframe);
+}
+
+function showMessageOverlay(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>" +
+			ansiHTML(entities.encode(message));
+	});
+}
+
+function destroyErrorOverlay() {
+	if(!overlayDiv) {
+		// It is not there in the first place.
+		return;
+	}
+
+	// Clean up and reset internal state.
+	document.body.removeChild(overlayIframe);
+	overlayDiv = null;
+	overlayIframe = null;
+	lastOnOverlayDivReady = null;
+}
+
+// Successful compilation.
+exports.clear = function handleSuccess() {
+	destroyErrorOverlay();
+}
+
+// Compilation with errors (e.g. syntax error or missing modules).
+exports.showMessage = function handleMessage(messages) {
+	showMessageOverlay(messages[0]);
+}

From 7c77b5c368decbb42ff85a80fe1736a7a188982d Mon Sep 17 00:00:00 2001
From: Sebastian Brunner <brunner.sebi4@gmail.com>
Date: Sat, 8 Jul 2017 01:10:45 +0200
Subject: [PATCH 02/25] first version

---
 client/index.js        | 29 ++++++++++---
 client/status.js       | 96 +++++++++++++++++-------------------------
 lib/Server.js          |  4 ++
 lib/optionsSchema.json |  8 ++++
 4 files changed, 74 insertions(+), 63 deletions(-)

diff --git a/client/index.js b/client/index.js
index 85e8f7c85b..63017c30b2 100644
--- a/client/index.js
+++ b/client/index.js
@@ -3,6 +3,7 @@ var url = require("url");
 var stripAnsi = require("strip-ansi");
 var socket = require("./socket");
 var overlay = require("./overlay");
+var status = require("./status");
 
 function getCurrentScriptSource() {
 	// `document.currentScript` is the most accurate way to find the current script,
@@ -35,6 +36,7 @@ var currentHash = "";
 var logLevel = "info";
 var useWarningOverlay = false;
 var useErrorOverlay = false;
+var useStatus = false;
 
 function log(level, msg) {
 	if(logLevel === "info" && level === "info")
@@ -50,7 +52,7 @@ function sendMsg(type, data) {
 	if(
 		typeof self !== "undefined" &&
 		(typeof WorkerGlobalScope === "undefined" ||
-		!(self instanceof WorkerGlobalScope))
+			!(self instanceof WorkerGlobalScope))
 	) {
 		self.postMessage({
 			type: "webpack" + type,
@@ -65,14 +67,21 @@ var onSocketMsg = {
 		log("info", "[WDS] Hot Module Replacement enabled.");
 	},
 	invalid: function() {
-		log("info", "[WDS] App updated. Recompiling...");
+		var text = "[WDS] App updated. Recompiling...";
+		log("info", text);
+		status.showStatus(text);
 		sendMsg("Invalid");
 	},
 	hash: function(hash) {
 		currentHash = hash;
 	},
 	"still-ok": function() {
-		log("info", "[WDS] Nothing changed.")
+		var text = "[WDS] Nothing changed.";
+		log("info", text);
+		status.showStatus(text);
+		setTimeout(function() {
+			status.clear()
+		}, 500);
 		if(useWarningOverlay || useErrorOverlay) overlay.clear();
 		sendMsg("StillOk");
 	},
@@ -81,7 +90,7 @@ var onSocketMsg = {
 	},
 	"overlay": function(overlay) {
 		if(typeof document !== "undefined") {
-			if(typeof(overlay) === "boolean") {
+			if(typeof (overlay) === "boolean") {
 				useWarningOverlay = overlay;
 				useErrorOverlay = overlay;
 			} else if(overlay) {
@@ -90,15 +99,23 @@ var onSocketMsg = {
 			}
 		}
 	},
+	status: function(status) {
+		if(typeof document !== "undefined") {
+			useStatus = status;
+		}
+	},
 	ok: function() {
 		sendMsg("Ok");
 		if(useWarningOverlay || useErrorOverlay) overlay.clear();
+		if(useStatus) status.clear();
 		if(initial) return initial = false;
 		reloadApp();
 	},
 	"content-changed": function() {
-		log("info", "[WDS] Content base changed. Reloading...")
-		self.location.reload();
+		var text = "[WDS] Content base changed. Reloading...";
+		log("info", text);
+		status.showStatus(text);
+		setTimeout(self.location.reload(), 500);
 	},
 	warnings: function(warnings) {
 		log("info", "[WDS] Warnings while compiling.");
diff --git a/client/status.js b/client/status.js
index d34e9b50fb..f5342ebb6c 100644
--- a/client/status.js
+++ b/client/status.js
@@ -1,24 +1,11 @@
+//the code was copied from overlay.js and modified for status display
 var ansiHTML = require("ansi-html");
 var Entities = require("html-entities").AllHtmlEntities;
 var entities = new Entities();
 
-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) {
+function createStatusIframe(onIframeLoad) {
 	var iframe = document.createElement("iframe");
-	iframe.id = "webpack-dev-server-client-overlay";
+	iframe.id = "webpack-dev-server-client-status";
 	iframe.src = "about:blank";
 	iframe.style.position = "fixed";
 	iframe.style.left = 0;
@@ -33,19 +20,19 @@ function createOverlayIframe(onIframeLoad) {
 	return iframe;
 }
 
-function addOverlayDivTo(iframe) {
+function addStatusDivTo(iframe) {
 	var div = iframe.contentDocument.createElement("div");
-	div.id = "webpack-dev-server-client-overlay-div";
+	div.id = "webpack-dev-server-client-status-div";
 	div.style.position = "fixed";
 	div.style.boxSizing = "border-box";
-	div.style.left = 0;
-	div.style.top = 0;
-	div.style.right = 0;
-	div.style.bottom = 0;
-	div.style.width = "100vw";
-	div.style.height = "100vh";
-	div.style.backgroundColor = "black";
-	div.style.color = "#E8E8E8";
+	div.style.left = "33%";
+	div.style.top = "33%";
+	div.style.right = "33%";
+	div.style.bottom = "33%";
+	div.style.backgroundColor = "white";
+	div.style.color = "black";
+	div.style.border = "1px solid black";
+	div.style.borderRadius = "10px";
 	div.style.fontFamily = "Menlo, Consolas, monospace";
 	div.style.fontSize = "large";
 	div.style.padding = "2rem";
@@ -56,69 +43,64 @@ function addOverlayDivTo(iframe) {
 	return div;
 }
 
-var overlayIframe = null;
-var overlayDiv = null;
-var lastOnOverlayDivReady = null;
+var statusIframe = null;
+var statusDiv = null;
+var lastOnStatusDivReady = null;
 
-function ensureOverlayDivExists(onOverlayDivReady) {
-	if(overlayDiv) {
-	// Everything is ready, call the callback right away.
-		onOverlayDivReady(overlayDiv);
+function ensureStatusDivExists(onStatusDivReady) {
+	if (statusDiv) {
+		// Everything is ready, call the callback right away.
+		onStatusDivReady(statusDiv);
 		return;
 	}
 
 	// Creating an iframe may be asynchronous so we'll schedule the callback.
 	// In case of multiple calls, last callback wins.
-	lastOnOverlayDivReady = onOverlayDivReady;
+	lastOnStatusDivReady = onStatusDivReady;
 
-	if(overlayIframe) {
+	if (statusIframe) {
 		// We're already creating it.
 		return;
 	}
 
 	// Create iframe and, when it is ready, a div inside it.
-	overlayIframe = createOverlayIframe(function onIframeLoad() {
-		overlayDiv = addOverlayDivTo(overlayIframe);
+	statusIframe = createStatusIframe(function onIframeLoad() {
+		statusDiv = addStatusDivTo(statusIframe);
 		// Now we can talk!
-		lastOnOverlayDivReady(overlayDiv);
+		lastOnStatusDivReady(statusDiv);
 	});
 
 	// Zalgo alert: onIframeLoad() will be called either synchronously
 	// or asynchronously depending on the browser.
-	// We delay adding it so `overlayIframe` is set when `onIframeLoad` fires.
-	document.body.appendChild(overlayIframe);
+	// We delay adding it so `statusIframe` is set when `onIframeLoad` fires.
+	document.body.appendChild(statusIframe);
 }
 
-function showMessageOverlay(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>" +
-			ansiHTML(entities.encode(message));
+function showStatus(status) {
+	ensureStatusDivExists(function onStatusDivReady(statusDiv) {
+		statusDiv.innerHTML = "Status: " + ansiHTML(entities.encode(status));
 	});
 }
 
-function destroyErrorOverlay() {
-	if(!overlayDiv) {
+function destroyStatus() {
+	if (!statusDiv) {
 		// It is not there in the first place.
 		return;
 	}
 
 	// Clean up and reset internal state.
-	document.body.removeChild(overlayIframe);
-	overlayDiv = null;
-	overlayIframe = null;
-	lastOnOverlayDivReady = null;
+	document.body.removeChild(statusIframe);
+	statusDiv = null;
+	statusIframe = null;
+	lastOnStatusDivReady = null;
 }
 
 // Successful compilation.
 exports.clear = function handleSuccess() {
-	destroyErrorOverlay();
+	destroyStatus();
 }
 
 // Compilation with errors (e.g. syntax error or missing modules).
-exports.showMessage = function handleMessage(messages) {
-	showMessageOverlay(messages[0]);
+exports.showStatus = function handleStatus(status) {
+	showStatus(status);
 }
diff --git a/lib/Server.js b/lib/Server.js
index ee1bf43997..d871446dee 100644
--- a/lib/Server.js
+++ b/lib/Server.js
@@ -38,6 +38,7 @@ function Server(compiler, options) {
 	this.headers = options.headers;
 	this.clientLogLevel = options.clientLogLevel;
 	this.clientOverlay = options.overlay;
+	this.status = options.status;
 	this.disableHostCheck = !!options.disableHostCheck;
 	this.publicHost = options.public;
 	this.allowedHosts = options.allowedHosts;
@@ -509,6 +510,9 @@ Server.prototype.listen = function(port, hostname) {
 		if(this.clientOverlay)
 			this.sockWrite([conn], "overlay", this.clientOverlay);
 
+		if(this.status)
+			this.sockWrite([conn], "status", this.status);
+
 		if(this.hot) this.sockWrite([conn], "hot");
 
 		if(!this._stats) return;
diff --git a/lib/optionsSchema.json b/lib/optionsSchema.json
index 885c64191c..f89048ef7a 100644
--- a/lib/optionsSchema.json
+++ b/lib/optionsSchema.json
@@ -308,5 +308,13 @@
       "instanceof": "Function"
     }
   },
+  "status": {
+      "description": "Shows a compilation status in browser.",
+      "anyOf": [
+        {
+          "type": "boolean"
+        }
+      ]
+    },
   "type": "object"
 }

From d74e667bca67c4396e08b09665f013ad7b77b67e Mon Sep 17 00:00:00 2001
From: Sebastian Brunner <brunner.sebi4@gmail.com>
Date: Sat, 8 Jul 2017 01:10:48 +0200
Subject: [PATCH 03/25] added example

---
 examples/status/README.md         | 11 +++++++++++
 examples/status/app.js            |  3 +++
 examples/status/index.html        |  9 +++++++++
 examples/status/webpack.config.js |  7 +++++++
 4 files changed, 30 insertions(+)
 create mode 100644 examples/status/README.md
 create mode 100644 examples/status/app.js
 create mode 100644 examples/status/index.html
 create mode 100644 examples/status/webpack.config.js

diff --git a/examples/status/README.md b/examples/status/README.md
new file mode 100644
index 0000000000..5073e87c4a
--- /dev/null
+++ b/examples/status/README.md
@@ -0,0 +1,11 @@
+# Status
+
+```shell
+node ../../bin/webpack-dev-server.js --open
+```
+
+## What should happen
+
+The script should open the browser and show a heading with "Example: status".
+
+In `app.js`, change the text and save. You should see the status window for a moment.
diff --git a/examples/status/app.js b/examples/status/app.js
new file mode 100644
index 0000000000..75b0f45fe7
--- /dev/null
+++ b/examples/status/app.js
@@ -0,0 +1,3 @@
+//Change the following line and save to see the compilation status
+
+document.write("Change me to see compilation status");
diff --git a/examples/status/index.html b/examples/status/index.html
new file mode 100644
index 0000000000..ca7eb47920
--- /dev/null
+++ b/examples/status/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
+	</head>
+	<body>
+		<h1>Example: status</h1>
+	</body>
+</html>
diff --git a/examples/status/webpack.config.js b/examples/status/webpack.config.js
new file mode 100644
index 0000000000..492b142ad1
--- /dev/null
+++ b/examples/status/webpack.config.js
@@ -0,0 +1,7 @@
+module.exports = {
+	context: __dirname,
+	entry: "./app.js",
+	devServer: {
+		status: true
+	}
+}

From 4223363211c8853a148c836f88bf63fa75e21d91 Mon Sep 17 00:00:00 2001
From: Sebastian Brunner <brunner.sebi4@gmail.com>
Date: Sat, 8 Jul 2017 18:25:29 +0200
Subject: [PATCH 04/25] added checkif status is set

---
 client/index.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/client/index.js b/client/index.js
index 63017c30b2..c9c739030d 100644
--- a/client/index.js
+++ b/client/index.js
@@ -69,7 +69,7 @@ var onSocketMsg = {
 	invalid: function() {
 		var text = "[WDS] App updated. Recompiling...";
 		log("info", text);
-		status.showStatus(text);
+		if(useStatus) status.showStatus(text);
 		sendMsg("Invalid");
 	},
 	hash: function(hash) {
@@ -78,9 +78,9 @@ var onSocketMsg = {
 	"still-ok": function() {
 		var text = "[WDS] Nothing changed.";
 		log("info", text);
-		status.showStatus(text);
+		if(useStatus) status.showStatus(text);
 		setTimeout(function() {
-			status.clear()
+			if(useStatus) status.clear()
 		}, 500);
 		if(useWarningOverlay || useErrorOverlay) overlay.clear();
 		sendMsg("StillOk");
@@ -114,7 +114,7 @@ var onSocketMsg = {
 	"content-changed": function() {
 		var text = "[WDS] Content base changed. Reloading...";
 		log("info", text);
-		status.showStatus(text);
+		if(useStatus) status.showStatus(text);
 		setTimeout(self.location.reload(), 500);
 	},
 	warnings: function(warnings) {

From 4721cfa8531e2eeb822a8483343337a6c09db6cc Mon Sep 17 00:00:00 2001
From: Sebastian Brunner <brunner.sebi4@gmail.com>
Date: Sun, 9 Jul 2017 22:12:49 +0200
Subject: [PATCH 05/25] changed description

---
 lib/optionsSchema.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/optionsSchema.json b/lib/optionsSchema.json
index f89048ef7a..7f9e01723b 100644
--- a/lib/optionsSchema.json
+++ b/lib/optionsSchema.json
@@ -309,7 +309,7 @@
     }
   },
   "status": {
-      "description": "Shows a compilation status in browser.",
+      "description": "Shows compilation status in browser.",
       "anyOf": [
         {
           "type": "boolean"

From eca533813e2ceeca7d7dfc2fa33196872eb5985b Mon Sep 17 00:00:00 2001
From: Sebastian Brunner <brunner.sebi4@gmail.com>
Date: Sun, 9 Jul 2017 22:15:17 +0200
Subject: [PATCH 06/25] fixed config schema

---
 lib/optionsSchema.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/lib/optionsSchema.json b/lib/optionsSchema.json
index 7f9e01723b..8162aac3cb 100644
--- a/lib/optionsSchema.json
+++ b/lib/optionsSchema.json
@@ -97,6 +97,14 @@
         }
       ]
     },
+    "status": {
+      "description": "Shows compilation status in browser.",
+      "anyOf": [
+        {
+          "type": "boolean"
+        }
+      ]
+    },
     "key": {
       "description": "The contents of a SSL key.",
       "anyOf": [
@@ -308,13 +316,5 @@
       "instanceof": "Function"
     }
   },
-  "status": {
-      "description": "Shows compilation status in browser.",
-      "anyOf": [
-        {
-          "type": "boolean"
-        }
-      ]
-    },
   "type": "object"
 }

From 4ca0a827ce209fa0e63e597c059586d6fbf38bd3 Mon Sep 17 00:00:00 2001
From: Sebastian Brunner <brunner.sebi4@gmail.com>
Date: Sun, 9 Jul 2017 22:15:27 +0200
Subject: [PATCH 07/25] fixed validation testcase

---
 test/Validation.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/Validation.test.js b/test/Validation.test.js
index e7f28bb1af..94765b9811 100644
--- a/test/Validation.test.js
+++ b/test/Validation.test.js
@@ -49,7 +49,7 @@ describe("Validation", function() {
 		message: [
 			" - configuration has an unknown property 'asdf'. These properties are valid:",
 			"   object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, " +
-			"watchOptions?, headers?, clientLogLevel?, overlay?, key?, cert?, ca?, pfx?, pfxPassphrase?, " +
+			"watchOptions?, headers?, clientLogLevel?, overlay?, status?, key?, cert?, ca?, pfx?, pfxPassphrase?, " +
 			"inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, " +
 			"compress?, proxy?, historyApiFallback?, staticOptions?, setup?, stats?, reporter?, " +
 			"noInfo?, quiet?, serverSideRender?, index?, log?, warn? }"

From 095332ee7c716a4824b56a9068632d0ecb81c6c1 Mon Sep 17 00:00:00 2001
From: Sebastian Brunner <brunner.sebi4@gmail.com>
Date: Sun, 9 Jul 2017 23:20:39 +0200
Subject: [PATCH 08/25] added status to title

---
 client/status.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/client/status.js b/client/status.js
index f5342ebb6c..f77636453a 100644
--- a/client/status.js
+++ b/client/status.js
@@ -3,6 +3,8 @@ var ansiHTML = require("ansi-html");
 var Entities = require("html-entities").AllHtmlEntities;
 var entities = new Entities();
 
+var title = "";
+
 function createStatusIframe(onIframeLoad) {
 	var iframe = document.createElement("iframe");
 	iframe.id = "webpack-dev-server-client-status";
@@ -77,6 +79,8 @@ function ensureStatusDivExists(onStatusDivReady) {
 }
 
 function showStatus(status) {
+	if(!statusDiv) title = document.title;
+	document.title = status;
 	ensureStatusDivExists(function onStatusDivReady(statusDiv) {
 		statusDiv.innerHTML = "Status: " + ansiHTML(entities.encode(status));
 	});
@@ -89,6 +93,7 @@ function destroyStatus() {
 	}
 
 	// Clean up and reset internal state.
+	document.title = title;
 	document.body.removeChild(statusIframe);
 	statusDiv = null;
 	statusIframe = null;

From 70db8dd11b1606014781faa34f3c79026c271e41 Mon Sep 17 00:00:00 2001
From: Sebastian B <brunner.sebi4@gmail.com>
Date: Wed, 9 Aug 2017 10:14:11 +0200
Subject: [PATCH 09/25] changed status div style

---
 client/status.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/status.js b/client/status.js
index f5342ebb6c..ef0744f79b 100644
--- a/client/status.js
+++ b/client/status.js
@@ -25,14 +25,14 @@ function addStatusDivTo(iframe) {
 	div.id = "webpack-dev-server-client-status-div";
 	div.style.position = "fixed";
 	div.style.boxSizing = "border-box";
-	div.style.left = "33%";
-	div.style.top = "33%";
-	div.style.right = "33%";
-	div.style.bottom = "33%";
+	div.style.left = "33.3%";
+	div.style.top = "37.5%";
+	div.style.right = "33.3%";
+	div.style.bottom = "37.5%";
 	div.style.backgroundColor = "white";
 	div.style.color = "black";
 	div.style.border = "1px solid black";
-	div.style.borderRadius = "10px";
+	div.style.borderRadius = "0.25em";
 	div.style.fontFamily = "Menlo, Consolas, monospace";
 	div.style.fontSize = "large";
 	div.style.padding = "2rem";

From 6bb4fd82d51eebde9ecc9357a842dbf789cf45e3 Mon Sep 17 00:00:00 2001
From: Sebastian B <brunner.sebi4@gmail.com>
Date: Wed, 9 Aug 2017 10:30:53 +0200
Subject: [PATCH 10/25] added status window delay

status window now stays for a moment after recompilation before reloading the app
---
 client/index.js | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/client/index.js b/client/index.js
index c9c739030d..747d96387a 100644
--- a/client/index.js
+++ b/client/index.js
@@ -105,17 +105,24 @@ var onSocketMsg = {
 		}
 	},
 	ok: function() {
-		sendMsg("Ok");
-		if(useWarningOverlay || useErrorOverlay) overlay.clear();
-		if(useStatus) status.clear();
-		if(initial) return initial = false;
-		reloadApp();
+		var text = "[WDS] App recompiled. Reloading...";
+        sendMsg("Ok");
+        if(useWarningOverlay || useErrorOverlay) overlay.clear();
+        if(initial) return initial = false;
+        if(useStatus) status.showStatus(text);
+        setTimeout(function() {
+            if(useStatus) status.clear()
+            reloadApp();
+        }, 750);
 	},
 	"content-changed": function() {
 		var text = "[WDS] Content base changed. Reloading...";
-		log("info", text);
-		if(useStatus) status.showStatus(text);
-		setTimeout(self.location.reload(), 500);
+        log("info", text);
+        if(useStatus) status.showStatus(text);
+        setTimeout(function() {
+            if(useStatus) status.clear()
+            self.location.reload()
+        }, 750);
 	},
 	warnings: function(warnings) {
 		log("info", "[WDS] Warnings while compiling.");

From 6d7291017073918a497d1df3f545cfe606519ffe Mon Sep 17 00:00:00 2001
From: Sebastian B <brunner.sebi4@gmail.com>
Date: Wed, 9 Aug 2017 11:03:05 +0200
Subject: [PATCH 11/25] made status work better with overlay

---
 client/index.js | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/client/index.js b/client/index.js
index 747d96387a..a90cf580d7 100644
--- a/client/index.js
+++ b/client/index.js
@@ -78,11 +78,11 @@ var onSocketMsg = {
 	"still-ok": function() {
 		var text = "[WDS] Nothing changed.";
 		log("info", text);
+		if(useWarningOverlay || useErrorOverlay) overlay.clear();
 		if(useStatus) status.showStatus(text);
 		setTimeout(function() {
 			if(useStatus) status.clear()
-		}, 500);
-		if(useWarningOverlay || useErrorOverlay) overlay.clear();
+		}, 750);
 		sendMsg("StillOk");
 	},
 	"log-level": function(level) {
@@ -107,11 +107,11 @@ var onSocketMsg = {
 	ok: function() {
 		var text = "[WDS] App recompiled. Reloading...";
         sendMsg("Ok");
-        if(useWarningOverlay || useErrorOverlay) overlay.clear();
         if(initial) return initial = false;
         if(useStatus) status.showStatus(text);
         setTimeout(function() {
-            if(useStatus) status.clear()
+            if(useStatus) status.clear();
+			if(useWarningOverlay || useErrorOverlay) overlay.clear();
             reloadApp();
         }, 750);
 	},
@@ -120,11 +120,12 @@ var onSocketMsg = {
         log("info", text);
         if(useStatus) status.showStatus(text);
         setTimeout(function() {
-            if(useStatus) status.clear()
-            self.location.reload()
+            if(useStatus) status.clear();
+            self.location.reload();
         }, 750);
 	},
 	warnings: function(warnings) {
+		if (useStatus) status.clear();
 		log("info", "[WDS] Warnings while compiling.");
 		var strippedWarnings = warnings.map(function(warning) {
 			return stripAnsi(warning);
@@ -138,6 +139,7 @@ var onSocketMsg = {
 		reloadApp();
 	},
 	errors: function(errors) {
+		if (useStatus) status.clear();
 		log("info", "[WDS] Errors while compiling. Reload prevented.");
 		var strippedErrors = errors.map(function(error) {
 			return stripAnsi(error);

From 68fb2604fd21e3672a36fb7d6af447ea3f001b10 Mon Sep 17 00:00:00 2001
From: Sebastian B <brunner.sebi4@gmail.com>
Date: Wed, 9 Aug 2017 14:50:13 +0200
Subject: [PATCH 12/25] added status bar

---
 client/status.js | 220 +++++++++++++++++++++++++++++++----------------
 1 file changed, 145 insertions(+), 75 deletions(-)

diff --git a/client/status.js b/client/status.js
index ef0744f79b..3dc1cc9985 100644
--- a/client/status.js
+++ b/client/status.js
@@ -4,103 +4,173 @@ var Entities = require("html-entities").AllHtmlEntities;
 var entities = new Entities();
 
 function createStatusIframe(onIframeLoad) {
-	var iframe = document.createElement("iframe");
-	iframe.id = "webpack-dev-server-client-status";
-	iframe.src = "about:blank";
-	iframe.style.position = "fixed";
-	iframe.style.left = 0;
-	iframe.style.top = 0;
-	iframe.style.right = 0;
-	iframe.style.bottom = 0;
-	iframe.style.width = "100vw";
-	iframe.style.height = "100vh";
-	iframe.style.border = "none";
-	iframe.style.zIndex = 9999999999;
-	iframe.onload = onIframeLoad;
-	return iframe;
+    var iframe = document.createElement("iframe");
+    iframe.id = "webpack-dev-server-client-status";
+    iframe.src = "about:blank";
+    iframe.style.position = "fixed";
+    iframe.style.left = 0;
+    iframe.style.top = 0;
+    iframe.style.right = 0;
+    iframe.style.bottom = 0;
+    iframe.style.width = "100vw";
+    iframe.style.height = "100vh";
+    iframe.style.border = "none";
+    iframe.style.zIndex = 9999999999;
+    iframe.onload = onIframeLoad;
+    return iframe;
 }
 
 function addStatusDivTo(iframe) {
-	var div = iframe.contentDocument.createElement("div");
-	div.id = "webpack-dev-server-client-status-div";
-	div.style.position = "fixed";
-	div.style.boxSizing = "border-box";
-	div.style.left = "33.3%";
-	div.style.top = "37.5%";
-	div.style.right = "33.3%";
-	div.style.bottom = "37.5%";
-	div.style.backgroundColor = "white";
-	div.style.color = "black";
-	div.style.border = "1px solid black";
-	div.style.borderRadius = "0.25em";
-	div.style.fontFamily = "Menlo, Consolas, monospace";
-	div.style.fontSize = "large";
-	div.style.padding = "2rem";
-	div.style.lineHeight = "1.2";
-	div.style.whiteSpace = "pre-wrap";
-	div.style.overflow = "auto";
-	iframe.contentDocument.body.appendChild(div);
-	return div;
+    var div = iframe.contentDocument.createElement("div");
+    var status = iframe.contentDocument.createElement("div");
+    div.id = "webpack-dev-server-client-status-div";
+    div.style.position = "fixed";
+    div.style.boxSizing = "border-box";
+    div.style.top = "37.5%";
+    div.style.right = "33.3%";
+    div.style.bottom = "37.5%";
+    div.style.left = "33.3%";
+    div.style.backgroundColor = "white";
+    div.style.color = "black";
+    div.style.border = "1px solid black";
+    div.style.borderRadius = "0.25em";
+    div.style.fontFamily = "Menlo, Consolas, monospace";
+    div.style.fontSize = "large";
+    div.style.padding = "2rem";
+    div.style.lineHeight = "1.2";
+    div.style.whiteSpace = "pre-wrap";
+    div.style.overflow = "auto";
+    
+    status.id = "webpack-dev-server-client-status-div-status";
+
+    div.status = status;
+    div.appendChild(status);
+    iframe.contentDocument.body.appendChild(div);
+    return div;
+}
+
+function addProgressDivTo(statusDiv, iframe) {
+    var div = iframe.contentDocument.createElement("div");
+    var progress = iframe.contentDocument.createElement("div");
+    var progressText = iframe.contentDocument.createElement("div");
+
+    div.id = "webpack-dev-server-client-progress-div";
+    div.style.position = "absolute";
+    div.style.left = "2em";
+    div.style.right = "2em";
+    div.style.top = "60%";
+    div.style.bottom = "30%";
+    div.style.backgroundColor = "transparent";
+    div.style.borderLeft = "1px solid black";
+    div.style.borderRight = "1px solid black";
+    div.style.display = "inline-block";
+
+    progress.id = "webpack-dev-server-client-progress-div-progress";
+    progress.style.position = "absolute";
+    progress.style.left = "0";
+    progress.style.bottom = "0";
+    progress.style.width = "0%";
+    progress.style.height = "100%";
+    progress.style.backgroundColor = "red";
+
+    progressText.id = "webpack-dev-server-client-progress-div-text";
+    progressText.style.position = "absolute";
+    progressText.style.left = "2em";
+    progressText.style.right = "2em";
+    progressText.style.top = "50%";
+    progressText.style.bottom = "40%";
+    progressText.style.backgroundColor = "transparent";
+    progressText.style.textAlign = "center";
+
+    div.progress = progress;
+    div.progressText = progressText;
+    div.appendChild(progress);
+    statusDiv.appendChild(progressText);
+    statusDiv.appendChild(div);
+    return div;
 }
 
 var statusIframe = null;
 var statusDiv = null;
 var lastOnStatusDivReady = null;
+var progressDiv = null;
 
 function ensureStatusDivExists(onStatusDivReady) {
-	if (statusDiv) {
-		// Everything is ready, call the callback right away.
-		onStatusDivReady(statusDiv);
-		return;
-	}
-
-	// Creating an iframe may be asynchronous so we'll schedule the callback.
-	// In case of multiple calls, last callback wins.
-	lastOnStatusDivReady = onStatusDivReady;
-
-	if (statusIframe) {
-		// We're already creating it.
-		return;
-	}
-
-	// Create iframe and, when it is ready, a div inside it.
-	statusIframe = createStatusIframe(function onIframeLoad() {
-		statusDiv = addStatusDivTo(statusIframe);
-		// Now we can talk!
-		lastOnStatusDivReady(statusDiv);
-	});
-
-	// Zalgo alert: onIframeLoad() will be called either synchronously
-	// or asynchronously depending on the browser.
-	// We delay adding it so `statusIframe` is set when `onIframeLoad` fires.
-	document.body.appendChild(statusIframe);
+    if (statusDiv) {
+        // Everything is ready, call the callback right away.
+        onStatusDivReady(statusDiv);
+        return;
+    }
+
+    // Creating an iframe may be asynchronous so we'll schedule the callback.
+    // In case of multiple calls, last callback wins.
+    lastOnStatusDivReady = onStatusDivReady;
+
+    if (statusIframe) {
+        // We're already creating it.
+        return;
+    }
+
+    // Create iframe and, when it is ready, a div inside it.
+    statusIframe = createStatusIframe(function onIframeLoad() {
+        statusDiv = addStatusDivTo(statusIframe);
+        progressDiv = addProgressDivTo(statusDiv, statusIframe);
+        // Now we can talk!
+        lastOnStatusDivReady(statusDiv);
+    });
+
+    // Zalgo alert: onIframeLoad() will be called either synchronously
+    // or asynchronously depending on the browser.
+    // We delay adding it so `statusIframe` is set when `onIframeLoad` fires.
+    document.body.appendChild(statusIframe);
 }
 
 function showStatus(status) {
-	ensureStatusDivExists(function onStatusDivReady(statusDiv) {
-		statusDiv.innerHTML = "Status: " + ansiHTML(entities.encode(status));
-	});
+    ensureStatusDivExists(function onStatusDivReady(statusDiv) {
+        statusDiv.status.innerHTML = "Status: " + ansiHTML(entities.encode(status));
+    });
+}
+
+function clearProgress(){
+    progressDiv.style.display =  "none";
+    progressDiv.progressText.innerHTML = "";
+}
+
+function updateProgress(percent) {
+    ensureStatusDivExists(function onStatusDivReady(statusDiv) {
+        progressDiv.style.display = "inline-block";
+        progressDiv.progress.style.width = percent + "%";
+        progressDiv.progressText.innerHTML = percent + "% completed";
+    });
 }
 
 function destroyStatus() {
-	if (!statusDiv) {
-		// It is not there in the first place.
-		return;
-	}
-
-	// Clean up and reset internal state.
-	document.body.removeChild(statusIframe);
-	statusDiv = null;
-	statusIframe = null;
-	lastOnStatusDivReady = null;
+    if (!statusDiv) {
+        // It is not there in the first place.
+        return;
+    }
+
+    // Clean up and reset internal state.
+    document.body.removeChild(statusIframe);
+    statusDiv = null;
+    statusIframe = null;
+    lastOnStatusDivReady = null;
 }
 
 // Successful compilation.
 exports.clear = function handleSuccess() {
-	destroyStatus();
+    destroyStatus();
 }
 
 // Compilation with errors (e.g. syntax error or missing modules).
 exports.showStatus = function handleStatus(status) {
-	showStatus(status);
+    showStatus(status);
+    clearProgress();
+}
+
+exports.updateStatus = function handleUpdate(data) {
+    if(data.msg) {
+        showStatus(data.msg);
+        updateProgress(data.percent);
+    }
 }

From a31f46cbdde269f0097969e7eea2116e5922f281 Mon Sep 17 00:00:00 2001
From: Sebastian B <brunner.sebi4@gmail.com>
Date: Wed, 9 Aug 2017 14:52:10 +0200
Subject: [PATCH 13/25] added status update

---
 client/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/client/index.js b/client/index.js
index a90cf580d7..4444b158a9 100644
--- a/client/index.js
+++ b/client/index.js
@@ -104,6 +104,9 @@ var onSocketMsg = {
 			useStatus = status;
 		}
 	},
+	"status-update": function(data) {
+        if(useStatus) status.updateStatus(data);
+    },
 	ok: function() {
 		var text = "[WDS] App recompiled. Reloading...";
         sendMsg("Ok");

From a29b0c14867fb918daf1a5e0058ba0c24a3574f4 Mon Sep 17 00:00:00 2001
From: Sebastian B <brunner.sebi4@gmail.com>
Date: Wed, 9 Aug 2017 14:53:11 +0200
Subject: [PATCH 14/25] added progress updates on backend

---
 lib/Server.js | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/lib/Server.js b/lib/Server.js
index d871446dee..f0ceadfd04 100644
--- a/lib/Server.js
+++ b/lib/Server.js
@@ -49,12 +49,21 @@ function Server(compiler, options) {
 	const invalidPlugin = () => {
 		this.sockWrite(this.sockets, "invalid");
 	};
+	const statusPlugin = (percent, message) => {
+		this.sockWrite(this.sockets, "status-update", {percent: percent, msg: message});
+	}
 	compiler.plugin("compile", invalidPlugin);
 	compiler.plugin("invalid", invalidPlugin);
 	compiler.plugin("done", (stats) => {
 		this._sendStats(this.sockets, stats.toJson(clientStats));
 		this._stats = stats;
 	});
+	compiler.apply(new webpack.ProgressPlugin(function (percent, msg, addInfo) {
+		percent = Math.floor(percent * 100);
+		if(addInfo)
+			msg = msg + " (" + addInfo + ")";
+		statusPlugin(percent, msg);
+	}));
 
 	// Init express server
 	const app = this.app = new express();

From a96a5d2b58aecb46afe69e85364d65952c8ee544 Mon Sep 17 00:00:00 2001
From: Sebastian B <brunner.sebi4@gmail.com>
Date: Wed, 9 Aug 2017 15:29:04 +0200
Subject: [PATCH 15/25] changed progress bar color to webpack logo color

---
 client/status.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/client/status.js b/client/status.js
index 3dc1cc9985..5527a60510 100644
--- a/client/status.js
+++ b/client/status.js
@@ -61,8 +61,7 @@ function addProgressDivTo(statusDiv, iframe) {
     div.style.top = "60%";
     div.style.bottom = "30%";
     div.style.backgroundColor = "transparent";
-    div.style.borderLeft = "1px solid black";
-    div.style.borderRight = "1px solid black";
+    div.style.border = "2px solid black";
     div.style.display = "inline-block";
 
     progress.id = "webpack-dev-server-client-progress-div-progress";
@@ -71,7 +70,7 @@ function addProgressDivTo(statusDiv, iframe) {
     progress.style.bottom = "0";
     progress.style.width = "0%";
     progress.style.height = "100%";
-    progress.style.backgroundColor = "red";
+    progress.style.backgroundColor = "#1D78C1";
 
     progressText.id = "webpack-dev-server-client-progress-div-text";
     progressText.style.position = "absolute";

From e7c29d462fa12ad59eca3567b222978f62988f7f Mon Sep 17 00:00:00 2001
From: Sebastian B <brunner.sebi4@gmail.com>
Date: Wed, 9 Aug 2017 15:33:05 +0200
Subject: [PATCH 16/25] added second webpack logo color as comment

The second webpack color (the light blue) doesn't look that great as background for the status window, I added it just for reference.
---
 client/status.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/status.js b/client/status.js
index 5527a60510..d23470757c 100644
--- a/client/status.js
+++ b/client/status.js
@@ -30,7 +30,8 @@ function addStatusDivTo(iframe) {
     div.style.right = "33.3%";
     div.style.bottom = "37.5%";
     div.style.left = "33.3%";
-    div.style.backgroundColor = "white";
+    //div.style.backgroundColor = "rgba(141, 214, 249, 0.5)"; //this would be the second webpack default color, doesn't look that great thou
+	div.style.backgroundColor = "white";
     div.style.color = "black";
     div.style.border = "1px solid black";
     div.style.borderRadius = "0.25em";

From 94502a06bfd4cad164065c33c0dde2519e2e3526 Mon Sep 17 00:00:00 2001
From: Sebastian Brunner <brunner.sebi4@gmail.com>
Date: Thu, 10 Aug 2017 00:22:21 +0200
Subject: [PATCH 17/25] added compilation status to title

---
 client/index.js            |   9 +-
 client/status.js           | 275 +++++++++++++++++++------------------
 examples/status/index.html |   1 +
 3 files changed, 148 insertions(+), 137 deletions(-)

diff --git a/client/index.js b/client/index.js
index 4444b158a9..9377ec2f3d 100644
--- a/client/index.js
+++ b/client/index.js
@@ -69,7 +69,7 @@ var onSocketMsg = {
 	invalid: function() {
 		var text = "[WDS] App updated. Recompiling...";
 		log("info", text);
-		if(useStatus) status.showStatus(text);
+		if(useStatus) status.showStatus("App updated. Recompiling...");
 		sendMsg("Invalid");
 	},
 	hash: function(hash) {
@@ -79,7 +79,7 @@ var onSocketMsg = {
 		var text = "[WDS] Nothing changed.";
 		log("info", text);
 		if(useWarningOverlay || useErrorOverlay) overlay.clear();
-		if(useStatus) status.showStatus(text);
+		if(useStatus) status.showStatus("Nothing changed.");
 		setTimeout(function() {
 			if(useStatus) status.clear()
 		}, 750);
@@ -109,9 +109,10 @@ var onSocketMsg = {
     },
 	ok: function() {
 		var text = "[WDS] App recompiled. Reloading...";
+		log("info", text);
         sendMsg("Ok");
         if(initial) return initial = false;
-        if(useStatus) status.showStatus(text);
+        if(useStatus) status.showStatus("Compilation complete. Reloading...");
         setTimeout(function() {
             if(useStatus) status.clear();
 			if(useWarningOverlay || useErrorOverlay) overlay.clear();
@@ -121,7 +122,7 @@ var onSocketMsg = {
 	"content-changed": function() {
 		var text = "[WDS] Content base changed. Reloading...";
         log("info", text);
-        if(useStatus) status.showStatus(text);
+        if(useStatus) status.showStatus("Content base changed. Reloading...");
         setTimeout(function() {
             if(useStatus) status.clear();
             self.location.reload();
diff --git a/client/status.js b/client/status.js
index 4d37731caa..55de74a5b3 100644
--- a/client/status.js
+++ b/client/status.js
@@ -3,176 +3,185 @@ var ansiHTML = require("ansi-html");
 var Entities = require("html-entities").AllHtmlEntities;
 var entities = new Entities();
 
-var title = "";
+var title = null;
 
 function createStatusIframe(onIframeLoad) {
-    var iframe = document.createElement("iframe");
-    iframe.id = "webpack-dev-server-client-status";
-    iframe.src = "about:blank";
-    iframe.style.position = "fixed";
-    iframe.style.left = 0;
-    iframe.style.top = 0;
-    iframe.style.right = 0;
-    iframe.style.bottom = 0;
-    iframe.style.width = "100vw";
-    iframe.style.height = "100vh";
-    iframe.style.border = "none";
-    iframe.style.zIndex = 9999999999;
-    iframe.onload = onIframeLoad;
-    return iframe;
+	var iframe = document.createElement("iframe");
+	iframe.id = "webpack-dev-server-client-status";
+	iframe.src = "about:blank";
+	iframe.style.position = "fixed";
+	iframe.style.left = 0;
+	iframe.style.top = 0;
+	iframe.style.right = 0;
+	iframe.style.bottom = 0;
+	iframe.style.width = "100vw";
+	iframe.style.height = "100vh";
+	iframe.style.border = "none";
+	iframe.style.zIndex = 9999999999;
+	iframe.onload = onIframeLoad;
+	return iframe;
 }
 
 function addStatusDivTo(iframe) {
-    var div = iframe.contentDocument.createElement("div");
-    var status = iframe.contentDocument.createElement("div");
-    div.id = "webpack-dev-server-client-status-div";
-    div.style.position = "fixed";
-    div.style.boxSizing = "border-box";
-    div.style.top = "37.5%";
-    div.style.right = "33.3%";
-    div.style.bottom = "37.5%";
-    div.style.left = "33.3%";
-    //div.style.backgroundColor = "rgba(141, 214, 249, 0.5)"; //this would be the second webpack default color, doesn't look that great thou
+	var div = iframe.contentDocument.createElement("div");
+	var status = iframe.contentDocument.createElement("div");
+	div.id = "webpack-dev-server-client-status-div";
+	div.style.position = "fixed";
+	div.style.boxSizing = "border-box";
+	div.style.top = "37.5%";
+	div.style.right = "33.3%";
+	div.style.bottom = "37.5%";
+	div.style.left = "33.3%";
+	//div.style.backgroundColor = "rgba(141, 214, 249, 0.5)"; //this would be the second webpack default color, doesn't look that great thou
 	div.style.backgroundColor = "white";
-    div.style.color = "black";
-    div.style.border = "1px solid black";
-    div.style.borderRadius = "0.25em";
-    div.style.fontFamily = "Menlo, Consolas, monospace";
-    div.style.fontSize = "large";
-    div.style.padding = "2rem";
-    div.style.lineHeight = "1.2";
-    div.style.whiteSpace = "pre-wrap";
-    div.style.overflow = "auto";
-
-    status.id = "webpack-dev-server-client-status-div-status";
-
-    div.status = status;
-    div.appendChild(status);
-    iframe.contentDocument.body.appendChild(div);
-    return div;
+	div.style.color = "black";
+	div.style.border = "1px solid black";
+	div.style.borderRadius = "0.25em";
+	div.style.fontFamily = "Menlo, Consolas, monospace";
+	div.style.fontSize = "large";
+	div.style.padding = "2rem";
+	div.style.lineHeight = "1.2";
+	div.style.whiteSpace = "pre-wrap";
+	div.style.overflow = "auto";
+
+	status.id = "webpack-dev-server-client-status-div-status";
+
+	div.status = status;
+	div.appendChild(status);
+	iframe.contentDocument.body.appendChild(div);
+	return div;
 }
 
 function addProgressDivTo(statusDiv, iframe) {
-    var div = iframe.contentDocument.createElement("div");
-    var progress = iframe.contentDocument.createElement("div");
-    var progressText = iframe.contentDocument.createElement("div");
-
-    div.id = "webpack-dev-server-client-progress-div";
-    div.style.position = "absolute";
-    div.style.left = "2em";
-    div.style.right = "2em";
-    div.style.top = "60%";
-    div.style.bottom = "30%";
-    div.style.backgroundColor = "transparent";
-    div.style.border = "2px solid black";
-    div.style.display = "inline-block";
-
-    progress.id = "webpack-dev-server-client-progress-div-progress";
-    progress.style.position = "absolute";
-    progress.style.left = "0";
-    progress.style.bottom = "0";
-    progress.style.width = "0%";
-    progress.style.height = "100%";
-    progress.style.backgroundColor = "#1D78C1";
-
-    progressText.id = "webpack-dev-server-client-progress-div-text";
-    progressText.style.position = "absolute";
-    progressText.style.left = "2em";
-    progressText.style.right = "2em";
-    progressText.style.top = "50%";
-    progressText.style.bottom = "40%";
-    progressText.style.backgroundColor = "transparent";
-    progressText.style.textAlign = "center";
-
-    div.progress = progress;
-    div.progressText = progressText;
-    div.appendChild(progress);
-    statusDiv.appendChild(progressText);
-    statusDiv.appendChild(div);
-    return div;
+	var div = iframe.contentDocument.createElement("div");
+	var progress = iframe.contentDocument.createElement("div");
+	var progressText = iframe.contentDocument.createElement("div");
+
+	div.id = "webpack-dev-server-client-progress-div";
+	div.style.position = "absolute";
+	div.style.left = "2em";
+	div.style.right = "2em";
+	div.style.top = "60%";
+	div.style.bottom = "30%";
+	div.style.backgroundColor = "transparent";
+	div.style.border = "2px solid black";
+	div.style.display = "inline-block";
+
+	progress.id = "webpack-dev-server-client-progress-div-progress";
+	progress.style.position = "absolute";
+	progress.style.left = "0";
+	progress.style.bottom = "0";
+	progress.style.width = "0%";
+	progress.style.height = "100%";
+	progress.style.backgroundColor = "#1D78C1";
+
+	progressText.id = "webpack-dev-server-client-progress-div-text";
+	progressText.style.position = "absolute";
+	progressText.style.left = "2em";
+	progressText.style.right = "2em";
+	progressText.style.top = "50%";
+	progressText.style.bottom = "40%";
+	progressText.style.backgroundColor = "transparent";
+	progressText.style.textAlign = "center";
+
+	div.progress = progress;
+	div.progressText = progressText;
+	div.appendChild(progress);
+	statusDiv.appendChild(progressText);
+	statusDiv.appendChild(div);
+	return div;
 }
 
 var statusIframe = null;
 var statusDiv = null;
 var lastOnStatusDivReady = null;
 var progressDiv = null;
+var title = null;
 
 function ensureStatusDivExists(onStatusDivReady) {
-    if (statusDiv) {
-        // Everything is ready, call the callback right away.
-        onStatusDivReady(statusDiv);
-        return;
-    }
-
-    // Creating an iframe may be asynchronous so we'll schedule the callback.
-    // In case of multiple calls, last callback wins.
-    lastOnStatusDivReady = onStatusDivReady;
-
-    if (statusIframe) {
-        // We're already creating it.
-        return;
-    }
-
-    // Create iframe and, when it is ready, a div inside it.
-    statusIframe = createStatusIframe(function onIframeLoad() {
-        statusDiv = addStatusDivTo(statusIframe);
-        progressDiv = addProgressDivTo(statusDiv, statusIframe);
-        // Now we can talk!
-        lastOnStatusDivReady(statusDiv);
-    });
-
-    // Zalgo alert: onIframeLoad() will be called either synchronously
-    // or asynchronously depending on the browser.
-    // We delay adding it so `statusIframe` is set when `onIframeLoad` fires.
-    document.body.appendChild(statusIframe);
+	if (statusDiv) {
+		// Everything is ready, call the callback right away.
+		onStatusDivReady(statusDiv);
+		return;
+	}
+
+	// Creating an iframe may be asynchronous so we'll schedule the callback.
+	// In case of multiple calls, last callback wins.
+	lastOnStatusDivReady = onStatusDivReady;
+
+	if (statusIframe) {
+		// We're already creating it.
+		return;
+	}
+
+	// Create iframe and, when it is ready, a div inside it.
+	statusIframe = createStatusIframe(function onIframeLoad() {
+		statusDiv = addStatusDivTo(statusIframe);
+		progressDiv = addProgressDivTo(statusDiv, statusIframe);
+		// Now we can talk!
+		lastOnStatusDivReady(statusDiv);
+	});
+
+	// Zalgo alert: onIframeLoad() will be called either synchronously
+	// or asynchronously depending on the browser.
+	// We delay adding it so `statusIframe` is set when `onIframeLoad` fires.
+	document.body.appendChild(statusIframe);
 }
 
 function showStatus(status) {
-    ensureStatusDivExists(function onStatusDivReady(statusDiv) {
-        statusDiv.status.innerHTML = "Status: " + ansiHTML(entities.encode(status));
-    });
+	ensureStatusDivExists(function onStatusDivReady(statusDiv) {
+		statusDiv.status.innerHTML = "Status: " + ansiHTML(entities.encode(status));
+	});
 }
 
-function clearProgress(){
-    progressDiv.style.display =  "none";
-    progressDiv.progressText.innerHTML = "";
+function clearProgress() {
+	progressDiv.style.display = "none";
+	progressDiv.progressText.innerHTML = "";
+	if(title !== null) document.title = title;
 }
 
 function updateProgress(percent) {
-    ensureStatusDivExists(function onStatusDivReady(statusDiv) {
-        progressDiv.style.display = "inline-block";
-        progressDiv.progress.style.width = percent + "%";
-        progressDiv.progressText.innerHTML = percent + "% completed";
-    });
+	ensureStatusDivExists(function onStatusDivReady(statusDiv) {
+		progressDiv.style.display = "inline-block";
+		progressDiv.progress.style.width = percent + "%";
+		progressDiv.progressText.innerHTML = percent + "% completed";
+		if(title === null || !document.title.startsWith("Compiling")){
+			title = document.title;
+		}
+		document.title = "Compiling: " + percent + "% completed";
+	});
 }
 
 function destroyStatus() {
-    if (!statusDiv) {
-        // It is not there in the first place.
-        return;
-    }
-
-    // Clean up and reset internal state.
-    document.body.removeChild(statusIframe);
-    statusDiv = null;
-    statusIframe = null;
-    lastOnStatusDivReady = null;
+	if (!statusDiv) {
+		// It is not there in the first place.
+		return;
+	}
+
+	// Clean up and reset internal state.
+	document.body.removeChild(statusIframe);
+	statusDiv = null;
+	statusIframe = null;
+	lastOnStatusDivReady = null;
+	progressDiv = null;
+	if(title !== null) document.title = title;
+	title = null;
 }
 
 // Successful compilation.
 exports.clear = function handleSuccess() {
-    destroyStatus();
+	destroyStatus();
 }
 
 // Compilation with errors (e.g. syntax error or missing modules).
 exports.showStatus = function handleStatus(status) {
-    showStatus(status);
-    clearProgress();
+	showStatus(status);
+	clearProgress();
 }
 
 exports.updateStatus = function handleUpdate(data) {
-    if(data.msg) {
-        showStatus(data.msg);
-        updateProgress(data.percent);
-    }
+	if (data.msg) {
+		showStatus(data.msg);
+		updateProgress(data.percent);
+	}
 }
diff --git a/examples/status/index.html b/examples/status/index.html
index ca7eb47920..57fecb010c 100644
--- a/examples/status/index.html
+++ b/examples/status/index.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 	<head>
+		<title>Status example</title>
 		<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
 	</head>
 	<body>

From d98bbc08a471a74fa5c8db2f0554e740026ae584 Mon Sep 17 00:00:00 2001
From: Sebastian Brunner <brunner.sebi4@gmail.com>
Date: Thu, 10 Aug 2017 00:29:55 +0200
Subject: [PATCH 18/25] ran prepublish, posttest and beautify

---
 client/index.js | 34 +++++++++++++++++-----------------
 lib/Server.js   |  4 ++--
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/client/index.js b/client/index.js
index 9377ec2f3d..3a1a015792 100644
--- a/client/index.js
+++ b/client/index.js
@@ -105,31 +105,31 @@ var onSocketMsg = {
 		}
 	},
 	"status-update": function(data) {
-        if(useStatus) status.updateStatus(data);
-    },
+		if(useStatus) status.updateStatus(data);
+	},
 	ok: function() {
 		var text = "[WDS] App recompiled. Reloading...";
 		log("info", text);
-        sendMsg("Ok");
-        if(initial) return initial = false;
-        if(useStatus) status.showStatus("Compilation complete. Reloading...");
-        setTimeout(function() {
-            if(useStatus) status.clear();
+		sendMsg("Ok");
+		if(initial) return initial = false;
+		if(useStatus) status.showStatus("Compilation complete. Reloading...");
+		setTimeout(function() {
+			if(useStatus) status.clear();
 			if(useWarningOverlay || useErrorOverlay) overlay.clear();
-            reloadApp();
-        }, 750);
+			reloadApp();
+		}, 750);
 	},
 	"content-changed": function() {
 		var text = "[WDS] Content base changed. Reloading...";
-        log("info", text);
-        if(useStatus) status.showStatus("Content base changed. Reloading...");
-        setTimeout(function() {
-            if(useStatus) status.clear();
-            self.location.reload();
-        }, 750);
+		log("info", text);
+		if(useStatus) status.showStatus("Content base changed. Reloading...");
+		setTimeout(function() {
+			if(useStatus) status.clear();
+			self.location.reload();
+		}, 750);
 	},
 	warnings: function(warnings) {
-		if (useStatus) status.clear();
+		if(useStatus) status.clear();
 		log("info", "[WDS] Warnings while compiling.");
 		var strippedWarnings = warnings.map(function(warning) {
 			return stripAnsi(warning);
@@ -143,7 +143,7 @@ var onSocketMsg = {
 		reloadApp();
 	},
 	errors: function(errors) {
-		if (useStatus) status.clear();
+		if(useStatus) status.clear();
 		log("info", "[WDS] Errors while compiling. Reload prevented.");
 		var strippedErrors = errors.map(function(error) {
 			return stripAnsi(error);
diff --git a/lib/Server.js b/lib/Server.js
index f0ceadfd04..71f1b1f27c 100644
--- a/lib/Server.js
+++ b/lib/Server.js
@@ -50,7 +50,7 @@ function Server(compiler, options) {
 		this.sockWrite(this.sockets, "invalid");
 	};
 	const statusPlugin = (percent, message) => {
-		this.sockWrite(this.sockets, "status-update", {percent: percent, msg: message});
+		this.sockWrite(this.sockets, "status-update", { percent: percent, msg: message });
 	}
 	compiler.plugin("compile", invalidPlugin);
 	compiler.plugin("invalid", invalidPlugin);
@@ -58,7 +58,7 @@ function Server(compiler, options) {
 		this._sendStats(this.sockets, stats.toJson(clientStats));
 		this._stats = stats;
 	});
-	compiler.apply(new webpack.ProgressPlugin(function (percent, msg, addInfo) {
+	compiler.apply(new webpack.ProgressPlugin(function(percent, msg, addInfo) {
 		percent = Math.floor(percent * 100);
 		if(addInfo)
 			msg = msg + " (" + addInfo + ")";

From bd64321cb8f3605758cdc112c12dec9027df74b0 Mon Sep 17 00:00:00 2001
From: Sebastian B <brunner.sebi4@gmail.com>
Date: Thu, 10 Aug 2017 09:25:22 +0200
Subject: [PATCH 19/25] fixed codacy issues

---
 client/status.js | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/client/status.js b/client/status.js
index 55de74a5b3..366ae42009 100644
--- a/client/status.js
+++ b/client/status.js
@@ -3,8 +3,6 @@ var ansiHTML = require("ansi-html");
 var Entities = require("html-entities").AllHtmlEntities;
 var entities = new Entities();
 
-var title = null;
-
 function createStatusIframe(onIframeLoad) {
 	var iframe = document.createElement("iframe");
 	iframe.id = "webpack-dev-server-client-status";
@@ -99,7 +97,7 @@ var progressDiv = null;
 var title = null;
 
 function ensureStatusDivExists(onStatusDivReady) {
-	if (statusDiv) {
+	if (statusDiv){
 		// Everything is ready, call the callback right away.
 		onStatusDivReady(statusDiv);
 		return;
@@ -109,7 +107,7 @@ function ensureStatusDivExists(onStatusDivReady) {
 	// In case of multiple calls, last callback wins.
 	lastOnStatusDivReady = onStatusDivReady;
 
-	if (statusIframe) {
+	if (statusIframe){
 		// We're already creating it.
 		return;
 	}
@@ -141,11 +139,11 @@ function clearProgress() {
 }
 
 function updateProgress(percent) {
-	ensureStatusDivExists(function onStatusDivReady(statusDiv) {
+	ensureStatusDivExists(function onStatusDivReady() {
 		progressDiv.style.display = "inline-block";
 		progressDiv.progress.style.width = percent + "%";
 		progressDiv.progressText.innerHTML = percent + "% completed";
-		if(title === null || !document.title.startsWith("Compiling")){
+		if (title === null || !document.title.startsWith("Compiling")){
 			title = document.title;
 		}
 		document.title = "Compiling: " + percent + "% completed";
@@ -153,7 +151,7 @@ function updateProgress(percent) {
 }
 
 function destroyStatus() {
-	if (!statusDiv) {
+	if (!statusDiv){
 		// It is not there in the first place.
 		return;
 	}
@@ -180,7 +178,7 @@ exports.showStatus = function handleStatus(status) {
 }
 
 exports.updateStatus = function handleUpdate(data) {
-	if (data.msg) {
+	if (data.msg){
 		showStatus(data.msg);
 		updateProgress(data.percent);
 	}

From dccf8457bd346885c3bc923b27d0d8971f36a3d8 Mon Sep 17 00:00:00 2001
From: Sebastian B <brunner.sebi4@gmail.com>
Date: Thu, 10 Aug 2017 10:06:27 +0200
Subject: [PATCH 20/25] fixed codacy issues

This time for good
---
 client/status.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/status.js b/client/status.js
index 366ae42009..f0de58d8af 100644
--- a/client/status.js
+++ b/client/status.js
@@ -97,7 +97,7 @@ var progressDiv = null;
 var title = null;
 
 function ensureStatusDivExists(onStatusDivReady) {
-	if (statusDiv){
+	if(statusDiv) {
 		// Everything is ready, call the callback right away.
 		onStatusDivReady(statusDiv);
 		return;
@@ -107,7 +107,7 @@ function ensureStatusDivExists(onStatusDivReady) {
 	// In case of multiple calls, last callback wins.
 	lastOnStatusDivReady = onStatusDivReady;
 
-	if (statusIframe){
+	if(statusIframe) {
 		// We're already creating it.
 		return;
 	}
@@ -143,7 +143,7 @@ function updateProgress(percent) {
 		progressDiv.style.display = "inline-block";
 		progressDiv.progress.style.width = percent + "%";
 		progressDiv.progressText.innerHTML = percent + "% completed";
-		if (title === null || !document.title.startsWith("Compiling")){
+		if(title === null || !document.title.startsWith("Compiling")) {
 			title = document.title;
 		}
 		document.title = "Compiling: " + percent + "% completed";
@@ -151,7 +151,7 @@ function updateProgress(percent) {
 }
 
 function destroyStatus() {
-	if (!statusDiv){
+	if(!statusDiv) {
 		// It is not there in the first place.
 		return;
 	}
@@ -178,7 +178,7 @@ exports.showStatus = function handleStatus(status) {
 }
 
 exports.updateStatus = function handleUpdate(data) {
-	if (data.msg){
+	if(data.msg) {
 		showStatus(data.msg);
 		updateProgress(data.percent);
 	}

From c64be22611095f3a2b66d90d76f542f6b28b9c99 Mon Sep 17 00:00:00 2001
From: Sebastian Brunner <brunner.sebi4@gmail.com>
Date: Thu, 10 Aug 2017 21:29:24 +0200
Subject: [PATCH 21/25] fixed merge error

---
 client/index.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/client/index.js b/client/index.js
index dc58827c5c..ff0136817f 100644
--- a/client/index.js
+++ b/client/index.js
@@ -123,8 +123,7 @@ var onSocketMsg = {
 		if(useStatus) status.updateStatus(data);
 	},
 	ok: function() {
-		var text = "[WDS] App recompiled. Reloading...";
-		log("info", text);
+		log.info("[WDS] App recompiled. Reloading...");
 		sendMsg("Ok");
 		if(initial) return initial = false;
 		if(useStatus) status.showStatus("Compilation complete. Reloading...");

From 5fc1b51f0c0ce21fffb2f889bec3cf9b0fddfcf8 Mon Sep 17 00:00:00 2001
From: Sebastian B <brunner.sebi4@gmail.com>
Date: Thu, 31 Aug 2017 21:48:16 +0200
Subject: [PATCH 22/25] console-progress v1

---
 client/index.js                               |  37 ++--
 client/status.js                              | 185 ------------------
 examples/{status => progress}/README.md       |   4 +-
 examples/progress/app.js                      |   3 +
 examples/{status => progress}/index.html      |   4 +-
 .../{status => progress}/webpack.config.js    |   2 +-
 examples/status/app.js                        |   3 -
 lib/Server.js                                 |  22 +--
 lib/optionsSchema.json                        |   4 +-
 package.json                                  |   2 +-
 test/Validation.test.js                       |   2 +-
 11 files changed, 34 insertions(+), 234 deletions(-)
 delete mode 100644 client/status.js
 rename examples/{status => progress}/README.md (56%)
 create mode 100644 examples/progress/app.js
 rename examples/{status => progress}/index.html (69%)
 rename examples/{status => progress}/webpack.config.js (82%)
 delete mode 100644 examples/status/app.js

diff --git a/client/index.js b/client/index.js
index ff0136817f..ccc569d0b7 100644
--- a/client/index.js
+++ b/client/index.js
@@ -4,7 +4,6 @@ var stripAnsi = require("strip-ansi");
 var log = require("loglevel")
 var socket = require("./socket");
 var overlay = require("./overlay");
-var status = require("./status");
 
 function getCurrentScriptSource() {
 	// `document.currentScript` is the most accurate way to find the current script,
@@ -17,7 +16,7 @@ function getCurrentScriptSource() {
 	if(currentScript)
 		return currentScript.getAttribute("src");
 	// Fail as there was no script to use.
-	throw new Error("[WDS] Failed to get current script source");
+	throw new Error("[WDS] Failed to get current script source.");
 }
 
 var urlParts;
@@ -36,7 +35,7 @@ var initial = true;
 var currentHash = "";
 var useWarningOverlay = false;
 var useErrorOverlay = false;
-var useStatus = false;
+var useProgress = false;
 
 var INFO = "info";
 var WARNING = "warning";
@@ -66,8 +65,6 @@ var onSocketMsg = {
 		log.info("[WDS] Hot Module Replacement enabled.");
 	},
 	invalid: function() {
-		log.info("[WDS] App updated. Recompiling...");
-		if(useStatus) status.showStatus("App updated. Recompiling...");
 		log.info("[WDS] App updated. Recompiling...");
 		sendMsg("Invalid");
 	},
@@ -75,12 +72,9 @@ var onSocketMsg = {
 		currentHash = hash;
 	},
 	"still-ok": function() {
+		console.clear();
 		log.info("[WDS] Nothing changed.")
 		if(useWarningOverlay || useErrorOverlay) overlay.clear();
-		if(useStatus) status.showStatus("Nothing changed.");
-		setTimeout(function() {
-			if(useStatus) status.clear()
-		}, 750);
 		sendMsg("StillOk");
 	},
 	"log-level": function(level) {
@@ -114,35 +108,27 @@ var onSocketMsg = {
 			}
 		}
 	},
-	status: function(status) {
+	progress: function(progress) {
 		if(typeof document !== "undefined") {
-			useStatus = status;
+			useProgress = progress;
 		}
 	},
-	"status-update": function(data) {
-		if(useStatus) status.updateStatus(data);
+	"progress-update": function(data) {
+		if(useProgress) log.info("[WDS] " + data.percent + "% - " + data.msg + ".");
 	},
 	ok: function() {
+		console.clear();
 		log.info("[WDS] App recompiled. Reloading...");
 		sendMsg("Ok");
 		if(initial) return initial = false;
-		if(useStatus) status.showStatus("Compilation complete. Reloading...");
-		setTimeout(function() {
-			if(useStatus) status.clear();
-			if(useWarningOverlay || useErrorOverlay) overlay.clear();
-			reloadApp();
-		}, 750);
+		if(useWarningOverlay || useErrorOverlay) overlay.clear();
+		reloadApp();
 	},
 	"content-changed": function() {
 		log.info("[WDS] Content base changed. Reloading...");
-		if(useStatus) status.showStatus("Content base changed. Reloading...");
-		setTimeout(function() {
-			if(useStatus) status.clear();
-			self.location.reload();
-		}, 750);
+		self.location.reload();
 	},
 	warnings: function(warnings) {
-		if(useStatus) status.clear();
 		log.warn("[WDS] Warnings while compiling.");
 		var strippedWarnings = warnings.map(function(warning) {
 			return stripAnsi(warning);
@@ -156,7 +142,6 @@ var onSocketMsg = {
 		reloadApp();
 	},
 	errors: function(errors) {
-		if(useStatus) status.clear();
 		log.error("[WDS] Errors while compiling. Reload prevented.");
 		var strippedErrors = errors.map(function(error) {
 			return stripAnsi(error);
diff --git a/client/status.js b/client/status.js
deleted file mode 100644
index f0de58d8af..0000000000
--- a/client/status.js
+++ /dev/null
@@ -1,185 +0,0 @@
-//the code was copied from overlay.js and modified for status display
-var ansiHTML = require("ansi-html");
-var Entities = require("html-entities").AllHtmlEntities;
-var entities = new Entities();
-
-function createStatusIframe(onIframeLoad) {
-	var iframe = document.createElement("iframe");
-	iframe.id = "webpack-dev-server-client-status";
-	iframe.src = "about:blank";
-	iframe.style.position = "fixed";
-	iframe.style.left = 0;
-	iframe.style.top = 0;
-	iframe.style.right = 0;
-	iframe.style.bottom = 0;
-	iframe.style.width = "100vw";
-	iframe.style.height = "100vh";
-	iframe.style.border = "none";
-	iframe.style.zIndex = 9999999999;
-	iframe.onload = onIframeLoad;
-	return iframe;
-}
-
-function addStatusDivTo(iframe) {
-	var div = iframe.contentDocument.createElement("div");
-	var status = iframe.contentDocument.createElement("div");
-	div.id = "webpack-dev-server-client-status-div";
-	div.style.position = "fixed";
-	div.style.boxSizing = "border-box";
-	div.style.top = "37.5%";
-	div.style.right = "33.3%";
-	div.style.bottom = "37.5%";
-	div.style.left = "33.3%";
-	//div.style.backgroundColor = "rgba(141, 214, 249, 0.5)"; //this would be the second webpack default color, doesn't look that great thou
-	div.style.backgroundColor = "white";
-	div.style.color = "black";
-	div.style.border = "1px solid black";
-	div.style.borderRadius = "0.25em";
-	div.style.fontFamily = "Menlo, Consolas, monospace";
-	div.style.fontSize = "large";
-	div.style.padding = "2rem";
-	div.style.lineHeight = "1.2";
-	div.style.whiteSpace = "pre-wrap";
-	div.style.overflow = "auto";
-
-	status.id = "webpack-dev-server-client-status-div-status";
-
-	div.status = status;
-	div.appendChild(status);
-	iframe.contentDocument.body.appendChild(div);
-	return div;
-}
-
-function addProgressDivTo(statusDiv, iframe) {
-	var div = iframe.contentDocument.createElement("div");
-	var progress = iframe.contentDocument.createElement("div");
-	var progressText = iframe.contentDocument.createElement("div");
-
-	div.id = "webpack-dev-server-client-progress-div";
-	div.style.position = "absolute";
-	div.style.left = "2em";
-	div.style.right = "2em";
-	div.style.top = "60%";
-	div.style.bottom = "30%";
-	div.style.backgroundColor = "transparent";
-	div.style.border = "2px solid black";
-	div.style.display = "inline-block";
-
-	progress.id = "webpack-dev-server-client-progress-div-progress";
-	progress.style.position = "absolute";
-	progress.style.left = "0";
-	progress.style.bottom = "0";
-	progress.style.width = "0%";
-	progress.style.height = "100%";
-	progress.style.backgroundColor = "#1D78C1";
-
-	progressText.id = "webpack-dev-server-client-progress-div-text";
-	progressText.style.position = "absolute";
-	progressText.style.left = "2em";
-	progressText.style.right = "2em";
-	progressText.style.top = "50%";
-	progressText.style.bottom = "40%";
-	progressText.style.backgroundColor = "transparent";
-	progressText.style.textAlign = "center";
-
-	div.progress = progress;
-	div.progressText = progressText;
-	div.appendChild(progress);
-	statusDiv.appendChild(progressText);
-	statusDiv.appendChild(div);
-	return div;
-}
-
-var statusIframe = null;
-var statusDiv = null;
-var lastOnStatusDivReady = null;
-var progressDiv = null;
-var title = null;
-
-function ensureStatusDivExists(onStatusDivReady) {
-	if(statusDiv) {
-		// Everything is ready, call the callback right away.
-		onStatusDivReady(statusDiv);
-		return;
-	}
-
-	// Creating an iframe may be asynchronous so we'll schedule the callback.
-	// In case of multiple calls, last callback wins.
-	lastOnStatusDivReady = onStatusDivReady;
-
-	if(statusIframe) {
-		// We're already creating it.
-		return;
-	}
-
-	// Create iframe and, when it is ready, a div inside it.
-	statusIframe = createStatusIframe(function onIframeLoad() {
-		statusDiv = addStatusDivTo(statusIframe);
-		progressDiv = addProgressDivTo(statusDiv, statusIframe);
-		// Now we can talk!
-		lastOnStatusDivReady(statusDiv);
-	});
-
-	// Zalgo alert: onIframeLoad() will be called either synchronously
-	// or asynchronously depending on the browser.
-	// We delay adding it so `statusIframe` is set when `onIframeLoad` fires.
-	document.body.appendChild(statusIframe);
-}
-
-function showStatus(status) {
-	ensureStatusDivExists(function onStatusDivReady(statusDiv) {
-		statusDiv.status.innerHTML = "Status: " + ansiHTML(entities.encode(status));
-	});
-}
-
-function clearProgress() {
-	progressDiv.style.display = "none";
-	progressDiv.progressText.innerHTML = "";
-	if(title !== null) document.title = title;
-}
-
-function updateProgress(percent) {
-	ensureStatusDivExists(function onStatusDivReady() {
-		progressDiv.style.display = "inline-block";
-		progressDiv.progress.style.width = percent + "%";
-		progressDiv.progressText.innerHTML = percent + "% completed";
-		if(title === null || !document.title.startsWith("Compiling")) {
-			title = document.title;
-		}
-		document.title = "Compiling: " + percent + "% completed";
-	});
-}
-
-function destroyStatus() {
-	if(!statusDiv) {
-		// It is not there in the first place.
-		return;
-	}
-
-	// Clean up and reset internal state.
-	document.body.removeChild(statusIframe);
-	statusDiv = null;
-	statusIframe = null;
-	lastOnStatusDivReady = null;
-	progressDiv = null;
-	if(title !== null) document.title = title;
-	title = null;
-}
-
-// Successful compilation.
-exports.clear = function handleSuccess() {
-	destroyStatus();
-}
-
-// Compilation with errors (e.g. syntax error or missing modules).
-exports.showStatus = function handleStatus(status) {
-	showStatus(status);
-	clearProgress();
-}
-
-exports.updateStatus = function handleUpdate(data) {
-	if(data.msg) {
-		showStatus(data.msg);
-		updateProgress(data.percent);
-	}
-}
diff --git a/examples/status/README.md b/examples/progress/README.md
similarity index 56%
rename from examples/status/README.md
rename to examples/progress/README.md
index 5073e87c4a..de22743c2d 100644
--- a/examples/status/README.md
+++ b/examples/progress/README.md
@@ -6,6 +6,6 @@ node ../../bin/webpack-dev-server.js --open
 
 ## What should happen
 
-The script should open the browser and show a heading with "Example: status".
+The script should open the browser and show a heading with "Example: progress".
 
-In `app.js`, change the text and save. You should see the status window for a moment.
+In `app.js`, change the text and save. You should see the compilation progress in the browser console.
diff --git a/examples/progress/app.js b/examples/progress/app.js
new file mode 100644
index 0000000000..56f2f22bad
--- /dev/null
+++ b/examples/progress/app.js
@@ -0,0 +1,3 @@
+//Change the following line and save to see the compilation status
+
+document.write("Change me to see compilation progress in console...");
diff --git a/examples/status/index.html b/examples/progress/index.html
similarity index 69%
rename from examples/status/index.html
rename to examples/progress/index.html
index 57fecb010c..3a1765cd01 100644
--- a/examples/status/index.html
+++ b/examples/progress/index.html
@@ -1,10 +1,10 @@
 <!DOCTYPE html>
 <html>
 	<head>
-		<title>Status example</title>
+		<title>Progress example</title>
 		<script src="/bundle.js" type="text/javascript" charset="utf-8"></script>
 	</head>
 	<body>
-		<h1>Example: status</h1>
+		<h1>Example: progress</h1>
 	</body>
 </html>
diff --git a/examples/status/webpack.config.js b/examples/progress/webpack.config.js
similarity index 82%
rename from examples/status/webpack.config.js
rename to examples/progress/webpack.config.js
index 492b142ad1..2d6529767d 100644
--- a/examples/status/webpack.config.js
+++ b/examples/progress/webpack.config.js
@@ -2,6 +2,6 @@ module.exports = {
 	context: __dirname,
 	entry: "./app.js",
 	devServer: {
-		status: true
+		progress: true
 	}
 }
diff --git a/examples/status/app.js b/examples/status/app.js
deleted file mode 100644
index 75b0f45fe7..0000000000
--- a/examples/status/app.js
+++ /dev/null
@@ -1,3 +0,0 @@
-//Change the following line and save to see the compilation status
-
-document.write("Change me to see compilation status");
diff --git a/lib/Server.js b/lib/Server.js
index 431a36410a..211b2e2215 100644
--- a/lib/Server.js
+++ b/lib/Server.js
@@ -40,7 +40,7 @@ function Server(compiler, options) {
 	this.headers = options.headers;
 	this.clientLogLevel = options.clientLogLevel;
 	this.clientOverlay = options.overlay;
-	this.status = options.status;
+	this.progress = options.progress;
 	this.disableHostCheck = !!options.disableHostCheck;
 	this.publicHost = options.public;
 	this.allowedHosts = options.allowedHosts;
@@ -51,21 +51,21 @@ function Server(compiler, options) {
 	const invalidPlugin = () => {
 		this.sockWrite(this.sockets, "invalid");
 	};
-	const statusPlugin = (percent, message) => {
-		this.sockWrite(this.sockets, "status-update", { percent: percent, msg: message });
+	const progressPlugin = (percent, message) => {
+		this.sockWrite(this.sockets, "progress-update", { percent: percent, msg: message });
 	}
 	compiler.plugin("compile", invalidPlugin);
 	compiler.plugin("invalid", invalidPlugin);
+	compiler.apply(new webpack.ProgressPlugin(function(percent, msg, addInfo) {
+		percent = Math.floor(percent * 100);
+		if(percent === 100) msg = "Compilation competed";
+		if(addInfo) msg = msg + " (" + addInfo + ")";
+		progressPlugin(percent, msg);
+	}));
 	compiler.plugin("done", (stats) => {
 		this._sendStats(this.sockets, stats.toJson(clientStats));
 		this._stats = stats;
 	});
-	compiler.apply(new webpack.ProgressPlugin(function(percent, msg, addInfo) {
-		percent = Math.floor(percent * 100);
-		if(addInfo)
-			msg = msg + " (" + addInfo + ")";
-		statusPlugin(percent, msg);
-	}));
 
 	// Init express server
 	const app = this.app = new express();
@@ -528,8 +528,8 @@ Server.prototype.listen = function(port, hostname) {
 		if(this.clientOverlay)
 			this.sockWrite([conn], "overlay", this.clientOverlay);
 
-		if(this.status)
-			this.sockWrite([conn], "status", this.status);
+		if(this.progress)
+			this.sockWrite([conn], "progress", this.progress);
 
 		if(this.hot) this.sockWrite([conn], "hot");
 
diff --git a/lib/optionsSchema.json b/lib/optionsSchema.json
index 8162aac3cb..8f506f8710 100644
--- a/lib/optionsSchema.json
+++ b/lib/optionsSchema.json
@@ -97,8 +97,8 @@
         }
       ]
     },
-    "status": {
-      "description": "Shows compilation status in browser.",
+    "progress": {
+      "description": "Shows compilation progress in browser console.",
       "anyOf": [
         {
           "type": "boolean"
diff --git a/package.json b/package.json
index 9255aeaf35..19b8583b60 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "client-live": "webpack ./client/live.js client/live.bundle.js --color --config client/webpack.config.js -p",
     "client-index": "webpack ./client/index.js client/index.bundle.js --color --config client/webpack.config.js -p",
     "client-sockjs": "webpack ./client/sockjs.js client/sockjs.bundle.js --color --config client/webpack.sockjs.config.js -p",
-    "lint": "eslint bin lib test examples client/{index,live,socket,sockjs,overlay,webpack.config}.js",
+    "lint": "eslint bin lib test examples client/{index,live,socket,sockjs,overlay,progress,webpack.config}.js",
     "beautify": "npm run lint -- --fix",
     "test": "mocha --full-trace --check-leaks",
     "posttest": "npm run -s lint",
diff --git a/test/Validation.test.js b/test/Validation.test.js
index 3eab4b7c32..a4346cce45 100644
--- a/test/Validation.test.js
+++ b/test/Validation.test.js
@@ -49,7 +49,7 @@ describe("Validation", function() {
 		message: [
 			" - configuration has an unknown property 'asdf'. These properties are valid:",
 			"   object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, " +
-			"watchOptions?, headers?, clientLogLevel?, overlay?, status?, key?, cert?, ca?, pfx?, pfxPassphrase?, " +
+			"watchOptions?, headers?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, " +
 			"inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, " +
 			"compress?, proxy?, historyApiFallback?, staticOptions?, setup?, stats?, reporter?, " +
 			"noInfo?, quiet?, serverSideRender?, index?, log?, warn? }"

From 27cb246b8893d8e04e8dca76f7cdb94fbea86160 Mon Sep 17 00:00:00 2001
From: Sebastian B <brunner.sebi4@gmail.com>
Date: Sat, 2 Sep 2017 18:57:43 +0200
Subject: [PATCH 23/25] fixed lint errrors (LF -> CRLF)

---
 client/index.js                     | 10 ++---
 examples/progress/app.js            |  6 ++-
 examples/progress/webpack.config.js | 14 ++++---
 lib/Server.js                       | 60 ++++++++++++++---------------
 test/Validation.test.js             |  2 +-
 5 files changed, 48 insertions(+), 44 deletions(-)

diff --git a/client/index.js b/client/index.js
index 277f239df0..e250111347 100644
--- a/client/index.js
+++ b/client/index.js
@@ -118,13 +118,13 @@ const onSocketMsg = {
       }
     }
   },
-  progress: function(progress){
-    if(typeof document !== "undefined"){
-        useProgress = progress;
+  progress(progress) {
+    if (typeof document !== 'undefined') {
+      useProgress = progress;
     }
   },
-  "progress-update": function(data){
-    if(useProgress) log.info("[WDS] " + data.percent + "% - " + data.msg + ".");
+  'progress-update': function progressUpdate(data) {
+    if (useProgress) log.info(`[WDS] ${data.percent}% - ${data.msg}.`);
   },
   ok() {
     sendMsg('Ok');
diff --git a/examples/progress/app.js b/examples/progress/app.js
index 56f2f22bad..05573ed58d 100644
--- a/examples/progress/app.js
+++ b/examples/progress/app.js
@@ -1,3 +1,5 @@
-//Change the following line and save to see the compilation status
+'use strict';
 
-document.write("Change me to see compilation progress in console...");
+// Change the following line and save to see the compilation status
+
+document.write('Change me to see compilation progress in console...');
diff --git a/examples/progress/webpack.config.js b/examples/progress/webpack.config.js
index 2d6529767d..a21a9875d4 100644
--- a/examples/progress/webpack.config.js
+++ b/examples/progress/webpack.config.js
@@ -1,7 +1,9 @@
+'use strict';
+
 module.exports = {
-	context: __dirname,
-	entry: "./app.js",
-	devServer: {
-		progress: true
-	}
-}
+  context: __dirname,
+  entry: './app.js',
+  devServer: {
+    progress: true
+  }
+};
diff --git a/lib/Server.js b/lib/Server.js
index da67805c06..db948b5430 100644
--- a/lib/Server.js
+++ b/lib/Server.js
@@ -38,34 +38,34 @@ function Server(compiler, options) {
     throw new Error("'filename' option must be set in lazy mode.");
   }
 
-	this.hot = options.hot || options.hotOnly;
-	this.headers = options.headers;
-	this.clientLogLevel = options.clientLogLevel;
-	this.clientOverlay = options.overlay;
-	this.progress = options.progress;
-	this.disableHostCheck = !!options.disableHostCheck;
-	this.publicHost = options.public;
-	this.allowedHosts = options.allowedHosts;
-	this.sockets = [];
-	this.contentBaseWatchers = [];
-
-	// Listening for events
-	const invalidPlugin = () => {
-		this.sockWrite(this.sockets, "invalid");
-	};
-	const progressPlugin = new webpack.ProgressPlugin(function(percent, msg, addInfo) {
-		percent = Math.floor(percent * 100);
-		if(percent === 100) msg = "Compilation competed";
-		if(addInfo) msg = msg + " (" + addInfo + ")";
-		this.sockWrite(this.sockets, "progress-update", { percent: percent, msg: message });
-	})
-	compiler.plugin("compile", invalidPlugin);
-	compiler.plugin("invalid", invalidPlugin);
-	compiler.apply(progressPlugin);
-	compiler.plugin("done", (stats) => {
-		this._sendStats(this.sockets, stats.toJson(clientStats));
-		this._stats = stats;
-	});
+  this.hot = options.hot || options.hotOnly;
+  this.headers = options.headers;
+  this.clientLogLevel = options.clientLogLevel;
+  this.clientOverlay = options.overlay;
+  this.progress = options.progress;
+  this.disableHostCheck = !!options.disableHostCheck;
+  this.publicHost = options.public;
+  this.allowedHosts = options.allowedHosts;
+  this.sockets = [];
+  this.contentBaseWatchers = [];
+
+  // Listening for events
+  const invalidPlugin = () => {
+    this.sockWrite(this.sockets, 'invalid');
+  };
+  const progressPlugin = new webpack.ProgressPlugin((percent, msg, addInfo) => {
+    percent = Math.floor(percent * 100);
+    if (percent === 100) msg = 'Compilation competed';
+    if (addInfo) msg = `${msg} (${addInfo})`;
+    this.sockWrite(this.sockets, 'progress-update', { percent, msg });
+  });
+  compiler.plugin('compile', invalidPlugin);
+  compiler.plugin('invalid', invalidPlugin);
+  compiler.apply(progressPlugin);
+  compiler.plugin('done', (stats) => {
+    this._sendStats(this.sockets, stats.toJson(clientStats));
+    this._stats = stats;
+  });
 
   // Init express server
   const app = this.app = new express(); // eslint-disable-line
@@ -525,8 +525,8 @@ Server.prototype.listen = function (port, hostname, fn) {
       });
 
       if (this.clientLogLevel) { this.sockWrite([conn], 'log-level', this.clientLogLevel); }
-      
-		if(this.progress){this.sockWrite([conn], "progress", this.progress); }
+
+      if (this.progress) { this.sockWrite([conn], 'progress', this.progress); }
 
       if (this.clientOverlay) { this.sockWrite([conn], 'overlay', this.clientOverlay); }
 
diff --git a/test/Validation.test.js b/test/Validation.test.js
index 3c49bda22c..a04e329111 100644
--- a/test/Validation.test.js
+++ b/test/Validation.test.js
@@ -49,7 +49,7 @@ describe('Validation', () => {
     message: [
       " - configuration has an unknown property 'asdf'. These properties are valid:",
       '   object { hot?, hotOnly?, lazy?, bonjour?, host?, allowedHosts?, filename?, publicPath?, port?, socket?, ' +
-      'watchOptions?, headers?, clientLogLevel?, overlay?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, ' +
+      'watchOptions?, headers?, clientLogLevel?, overlay?, progress?, key?, cert?, ca?, pfx?, pfxPassphrase?, requestCert?, ' +
       'inline?, disableHostCheck?, public?, https?, contentBase?, watchContentBase?, open?, useLocalIp?, openPage?, features?, ' +
       'compress?, proxy?, historyApiFallback?, staticOptions?, setup?, stats?, reporter?, ' +
       'noInfo?, quiet?, serverSideRender?, index?, log?, warn? }'

From 1978919eacdf6645ef8ffa4421a69554e176dca7 Mon Sep 17 00:00:00 2001
From: Sebastian B <brunner.sebi4@gmail.com>
Date: Tue, 12 Sep 2017 19:15:40 +0200
Subject: [PATCH 24/25] load plugin only if progress is enabled

---
 lib/Server.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/lib/Server.js b/lib/Server.js
index db948b5430..dc41d0c7ea 100644
--- a/lib/Server.js
+++ b/lib/Server.js
@@ -53,15 +53,17 @@ function Server(compiler, options) {
   const invalidPlugin = () => {
     this.sockWrite(this.sockets, 'invalid');
   };
-  const progressPlugin = new webpack.ProgressPlugin((percent, msg, addInfo) => {
-    percent = Math.floor(percent * 100);
-    if (percent === 100) msg = 'Compilation competed';
-    if (addInfo) msg = `${msg} (${addInfo})`;
-    this.sockWrite(this.sockets, 'progress-update', { percent, msg });
-  });
+  if(this.progress) {
+    const progressPlugin = new webpack.ProgressPlugin((percent, msg, addInfo) => {
+      percent = Math.floor(percent * 100);
+      if (percent === 100) msg = 'Compilation competed';
+      if (addInfo) msg = `${msg} (${addInfo})`;
+      this.sockWrite(this.sockets, 'progress-update', {percent, msg});
+    });
+    compiler.apply(progressPlugin);
+  }
   compiler.plugin('compile', invalidPlugin);
   compiler.plugin('invalid', invalidPlugin);
-  compiler.apply(progressPlugin);
   compiler.plugin('done', (stats) => {
     this._sendStats(this.sockets, stats.toJson(clientStats));
     this._stats = stats;

From aab052debd09485528f07f6ea75894434c88cb1e Mon Sep 17 00:00:00 2001
From: Sebastian B <brunner.sebi4@gmail.com>
Date: Tue, 12 Sep 2017 19:48:19 +0200
Subject: [PATCH 25/25] linted Server.js

---
 lib/Server.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/lib/Server.js b/lib/Server.js
index dc41d0c7ea..2b6a84e6e1 100644
--- a/lib/Server.js
+++ b/lib/Server.js
@@ -53,12 +53,12 @@ function Server(compiler, options) {
   const invalidPlugin = () => {
     this.sockWrite(this.sockets, 'invalid');
   };
-  if(this.progress) {
+  if (this.progress) {
     const progressPlugin = new webpack.ProgressPlugin((percent, msg, addInfo) => {
       percent = Math.floor(percent * 100);
       if (percent === 100) msg = 'Compilation competed';
       if (addInfo) msg = `${msg} (${addInfo})`;
-      this.sockWrite(this.sockets, 'progress-update', {percent, msg});
+      this.sockWrite(this.sockets, 'progress-update', { percent, msg });
     });
     compiler.apply(progressPlugin);
   }