Timeline: show white overlay till page being reloaded paints

third_party/WebKit/Source/core/inspector/InspectorOverlayPage.html

Index: third_party/WebKit/Source/core/inspector/InspectorOverlayPage.html
diff --git a/third_party/WebKit/Source/core/inspector/InspectorOverlayPage.html b/third_party/WebKit/Source/core/inspector/InspectorOverlayPage.html
index f7812443a3674e6df6b393ac781419f9b3e58fea..175c6bdf88ef5a14650cfe9182dd5f0d7928e05a 100644
--- a/third_party/WebKit/Source/core/inspector/InspectorOverlayPage.html
+++ b/third_party/WebKit/Source/core/inspector/InspectorOverlayPage.html
@@ -85,6 +85,16 @@ body.platform-linux {
     overflow: hidden;
 }
 
+#reloading-message {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: rgb(255, 255, 255);
+    color: rgb(100, 100, 100);
+    font-size: 5vw;
+}
+
 .controls-line > * {
     background-color: rgb(255, 255, 194);
     border: 1px solid rgb(202, 202, 202);
@@ -474,6 +484,13 @@ function drawPausedInDebuggerMessage(message)
     document.body.classList.add("dimmed");
 }
 
+function drawReloadingMessage(message)
+{
+    var element = document.getElementById("reloading-message");
+    element.textContent = message;
+    element.style.visibility = "visible";
+}
+
 function _drawGrid(context, rulerAtRight, rulerAtBottom)
 {
     if (window._gridPainted)
@@ -659,6 +676,7 @@ function reset(resetData)
     window._controlsVisible = false;
     document.querySelector(".controls-line").style.visibility = "hidden";
     document.getElementById("element-title").style.visibility = "hidden";
+    document.getElementById("reloading-message").style.visibility = "hidden";
     document.getElementById("tooltip-container").removeChildren();
 
     document.body.classList.remove("dimmed");
@@ -1647,6 +1665,7 @@ document.addEventListener("keydown", onDocumentKeyDown);
 </div>
 <div id="tooltip-container"></div>
 <div id="editor" class="fill"></div>
+<div id="reloading-message" class="fill" style="visibility: hidden"></div>
 <div class="controls-line">
     <div class="message-box"><div id="paused-in-debugger"></div></div>
     <div class="button" id="resume-button" title="Resume script execution (F8)."><div class="glyph"></div></div>