<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[192837] trunk/Source/WebInspectorUI</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/192837">192837</a></dd>
<dt>Author</dt> <dd>bburg@apple.com</dd>
<dt>Date</dt> <dd>2015-11-30 15:27:23 -0800 (Mon, 30 Nov 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: show something useful when the inspector frontend fails to load
https://bugs.webkit.org/show_bug.cgi?id=151643
Reviewed by Timothy Hatcher.
When a parse error or other early error happens before the inspector
is fully loaded, we can't use the second-level inspector to tell what's
going on. It would be better to catch any early errors and list them.
This patch adds an error page that shows the early errors that happened
during loading. It provides a list of errors, a link to reload the
inspector, and a link to submit a pre-filled bug report about the error.
For now, this page only shows up in engineering builds because it's
located in the Debug/ directory. We can move it later when it works
better in all cases. Follow-up patches can address smaller issues,
such as the transparent title bar and broken text selection.
* UserInterface/Debug/CatchEarlyErrors.css: Added.
* UserInterface/Debug/CatchEarlyErrors.js: Added.
* UserInterface/Main.html:
* UserInterface/Main.js: Abort setting up the UI if something happened.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceBaseMainjs">trunk/Source/WebInspectorUI/UserInterface/Base/Main.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceDebugCatchEarlyErrorscss">trunk/Source/WebInspectorUI/UserInterface/Debug/CatchEarlyErrors.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceDebugCatchEarlyErrorsjs">trunk/Source/WebInspectorUI/UserInterface/Debug/CatchEarlyErrors.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (192836 => 192837)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-11-30 23:13:41 UTC (rev 192836)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-11-30 23:27:23 UTC (rev 192837)
</span><span class="lines">@@ -1,5 +1,30 @@
</span><span class="cx"> 2015-11-30 Brian Burg <bburg@apple.com>
</span><span class="cx">
</span><ins>+ Web Inspector: show something useful when the inspector frontend fails to load
+ https://bugs.webkit.org/show_bug.cgi?id=151643
+
+ Reviewed by Timothy Hatcher.
+
+ When a parse error or other early error happens before the inspector
+ is fully loaded, we can't use the second-level inspector to tell what's
+ going on. It would be better to catch any early errors and list them.
+
+ This patch adds an error page that shows the early errors that happened
+ during loading. It provides a list of errors, a link to reload the
+ inspector, and a link to submit a pre-filled bug report about the error.
+
+ For now, this page only shows up in engineering builds because it's
+ located in the Debug/ directory. We can move it later when it works
+ better in all cases. Follow-up patches can address smaller issues,
+ such as the transparent title bar and broken text selection.
+
+ * UserInterface/Debug/CatchEarlyErrors.css: Added.
+ * UserInterface/Debug/CatchEarlyErrors.js: Added.
+ * UserInterface/Main.html:
+ * UserInterface/Main.js: Abort setting up the UI if something happened.
+
+2015-11-30 Brian Burg <bburg@apple.com>
+
</ins><span class="cx"> Web Inspector: delete-by-word and similar shortcuts should add text to the WebCore kill ring
</span><span class="cx"> https://bugs.webkit.org/show_bug.cgi?id=151312
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceBaseMainjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Base/Main.js (192836 => 192837)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-11-30 23:13:41 UTC (rev 192836)
+++ trunk/Source/WebInspectorUI/UserInterface/Base/Main.js 2015-11-30 23:27:23 UTC (rev 192837)
</span><span class="lines">@@ -175,6 +175,10 @@
</span><span class="cx">
</span><span class="cx"> WebInspector.contentLoaded = function()
</span><span class="cx"> {
</span><ins>+ // If a loading error page was already shown, then don't set up the Inspector UI.
+ if (window.__earlyErrors)
+ return;
+
</ins><span class="cx"> // Register for global events.
</span><span class="cx"> document.addEventListener("beforecopy", this._beforecopy.bind(this));
</span><span class="cx"> document.addEventListener("copy", this._copy.bind(this));
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceDebugCatchEarlyErrorscss"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Debug/CatchEarlyErrors.css (0 => 192837)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Debug/CatchEarlyErrors.css (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Debug/CatchEarlyErrors.css 2015-11-30 23:27:23 UTC (rev 192837)
</span><span class="lines">@@ -0,0 +1,78 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+body.caught-early-error {
+ margin: 50px 65px;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 11pt;
+ max-width: 700px;
+ min-width: 400px;
+ background-color: #fefefe;
+ overflow: scroll;
+}
+
+body.caught-early-error h1,
+body.caught-early-error h2 {
+ font-size: 16pt;
+ font-weight: bold;
+ margin-bottom: 0px;
+ margin-top: 10px;
+}
+
+body.caught-early-error h1 > img {
+ height: 35px;
+ position: relative;
+ margin-left: -50px;
+ margin-top: -7px;
+ float: left;
+}
+
+body.caught-early-error h2 > img {
+ height: 25px;
+ position: relative;
+ margin-left: -45px;
+ margin-top: 0px;
+ float: left;
+}
+
+body.caught-early-error dt {
+ font-weight: 600;
+ font-style: italic;
+}
+
+body.caught-early-error dd {
+ margin: 10px 0 20px 10px;
+}
+
+body.caught-early-error ul {
+ font-family: Menlo, monospace;
+ font-size: 75%;
+ margin: 0;
+ padding: 0;
+}
+
+body.caught-early-error li {
+ margin-bottom: 20px;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceDebugCatchEarlyErrorsjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Debug/CatchEarlyErrors.js (0 => 192837)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Debug/CatchEarlyErrors.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Debug/CatchEarlyErrors.js 2015-11-30 23:27:23 UTC (rev 192837)
</span><span class="lines">@@ -0,0 +1,90 @@
</span><ins>+/*
+ * Copyright (C) 2015 Apple Inc. All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions
+ * are met:
+ * 1. Redistributions of source code must retain the above copyright
+ * notice, this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+ * THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+ * BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+ * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+ * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+ * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+ * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+ * THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+window.onerror = function(message, url, lineNumber, columnNumber) {
+ if (!window.__earlyErrors) {
+ window.__earlyErrors = [];
+ // Early errors like parse errors may happen in the <head>, so attach
+ // a body if none exists yet. Code below expects document.body to exist.
+ if (!document.body)
+ document.write("<body></body></html>");
+
+ // Prevent any event handlers from running in an inconsistent state.
+ function stopEventPropagation(event) {
+ event.stopPropagation();
+ }
+
+ let windowEvents = ["beforecopy", "copy", "click", "dragover", "focus"];
+ let documentEvents = ["focus", "blur", "resize", "keydown", "keyup", "mousemove", "pagehide", "contextmenu"];
+ for (let name of windowEvents)
+ window.addEventListener(name, stopEventPropagation, true);
+ for (let name of documentEvents)
+ document.addEventListener(name, stopEventPropagation, true);
+
+ // Don't tell InspectorFrontendAPI that loading is done, since it can
+ // clear some of the error boilerplate page by accident.
+
+ // Signal that loading is done even though we can't guarantee that
+ // evaluating code on the inspector page will do anything useful.
+ // Without this, the frontend host may never show the window.
+ if (InspectorFrontendHost) {
+ InspectorFrontendHost.loaded();
+ InspectorFrontendHost.inspectedURLChanged("Internal Error");
+ }
+ }
+
+ window.__earlyErrors.push({message, url, lineNumber, columnNumber});
+ let firstError = window.__earlyErrors[0];
+
+ let formattedErrorDetails = window.__earlyErrors.map((entry) => `${entry.message} (at ${entry.url}:${entry.lineNumber}:${entry.columnNumber})`);
+ let detailsForBugReport = formattedErrorDetails.map((line) => ` - ${line}`).join("\n");
+ let encodedBugDescription = encodeURIComponent(`Caught errors:\n${detailsForBugReport}`);
+ let encodedBugTitle = encodeURIComponent(`Uncaught Exception loading Web Inspector: ${firstError.message}`);
+ let prefilledBugReportLink = `https://bugs.webkit.org/enter_bug.cgi?alias=&assigned_to=webkit-unassigned%40lists.webkit.org&attach_text=&blocked=&bug_file_loc=http%3A%2F%2F&bug_severity=Normal&bug_status=NEW&comment=${encodedBugDescription}&component=Web%20Inspector&contenttypeentry=&contenttypemethod=autodetect&contenttypeselection=text%2Fplain&data=&dependson=&description=&flag_type-1=X&flag_type-3=X&form_name=enter_bug&keywords=&op_sys=All&priority=P2&product=WebKit&rep_platform=All&short_desc=${encodedBugTitle}&version=WebKit%20Nightly%20Build`;
+ let detailsForHTML = formattedErrorDetails.map((line) => `<li>${line}</li>`).join("\n");
+ let errorPageHTML = `<h1>
+ <img src="Images/Errors.svg" />
+ Web Inspector encountered an error while loading.
+ </h1>
+ <dl>
+ <dt>Why?</dt>
+ <dd>Usually, this is caused by a syntax error while modifying the Web Inspector
+ UI, or running an updated frontend with out-of-date WebKit build.</dt>
+ <dt>I didn't do anything...?</dt>
+ <dd>If you don't think you caused this error to happen,
+ <a href="${prefilledBugReportLink}">click to file a pre-populated
+ bug with this information</a>. It's possible that someone else broke it by accident.</dd>
+ <dt>Oops, can I try again?</dt>
+ <dd><a href="javascript:window.location.reload()">Click to reload the Inspector</a>
+ again after making local changes.</dd>
+ </dl>
+ <h2>
+ <img src="Images/Console.svg" />
+ These errors were caught while loading Inspector:
+ </h2>
+ <p><ul>${detailsForHTML}</ul></p>`;
+ document.body.classList.add("caught-early-error");
+ document.body.innerHTML = errorPageHTML;
+}
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (192836 => 192837)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-11-30 23:13:41 UTC (rev 192836)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2015-11-30 23:27:23 UTC (rev 192837)
</span><span class="lines">@@ -185,6 +185,10 @@
</span><span class="cx"> <link rel="stylesheet" href="Controllers/CodeMirrorDragToAdjustNumberController.css">
</span><span class="cx"> <link rel="stylesheet" href="Controllers/CodeMirrorTokenTrackingController.css">
</span><span class="cx">
</span><ins>+ <link rel="stylesheet" href="Debug/CatchEarlyErrors.css">
+
+ <script src="Debug/CatchEarlyErrors.js"></script>
+
</ins><span class="cx"> <script src="External/CodeMirror/codemirror.js"></script>
</span><span class="cx">
</span><span class="cx"> <script src="External/CodeMirror/clojure.js"></script>
</span></span></pre>
</div>
</div>
</body>
</html>