<!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>[180205] 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/180205">180205</a></dd>
<dt>Author</dt> <dd>commit-queue@webkit.org</dd>
<dt>Date</dt> <dd>2015-02-16 20:20:21 -0800 (Mon, 16 Feb 2015)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Tweak the styles on the Console
https://bugs.webkit.org/show_bug.cgi?id=140580
- Use non-monospace (default sans-serif) font for console messages, but keep using monospace font
for objects, functions, and anything else that presumably code.
- Display all expandable objects on a separate row.
Patch by Nikita Vasilyev <nvasilyev@apple.com> on 2015-02-16
Reviewed by Timothy Hatcher.
* UserInterface/Views/ConsoleCommand.js:
(WebInspector.ConsoleCommand.prototype.decorateMessageElement):
(WebInspector.ConsoleCommand.prototype.toMessageElement):
* UserInterface/Views/ConsoleGroup.js:
(WebInspector.ConsoleGroup.prototype.addMessage):
* UserInterface/Views/ConsoleMessageImpl.js:
(WebInspector.ConsoleMessageImpl.prototype._format):
(WebInspector.ConsoleMessageImpl.prototype._isExpandable):
(WebInspector.ConsoleMessageImpl.prototype._formatParameter):
(WebInspector.ConsoleMessageImpl.prototype.append):
(WebInspector.ConsoleMessageImpl.prototype._formatWithSubstitutionString):
(WebInspector.ConsoleMessageImpl.prototype.decorateMessageElement):
(WebInspector.ConsoleMessageImpl.prototype.toMessageElement):
(WebInspector.ConsoleMessageImpl.prototype._formatParameterAsString): Deleted.
* UserInterface/Views/LogContentView.css:
(.console-messages):
(.console-formatted-object):
(.expandable.source-code):
(.console-message):
(.console-item.selected::after):
(.console-messages:focus .console-item.selected::after):
(.console-user-command-result.console-log-level::before):
(.console-item::before):
(.console-message .bubble):
(.console-error-level):
(.console-error-level .section .header .title):
(.console-error-level::before):
(.console-warning-level):
(.console-warning-level .console-message-text):
(.console-warning-level::before):
(.console-user-command::before):
(.console-group-messages .section):
(.console-group-messages .section .header::before):
(.console-group-messages .section .header .title):
(.console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap):
(.outline-disclosure li):
(.outline-disclosure li.parent::before):
(.console-item): Deleted.
(.console-item.selected): Deleted.
(.console-messages:focus .console-item.selected): Deleted.
(.console-item.selected .console-message::after): Deleted.
(.console-messages:focus .console-item.selected .data-grid tr.selected): Deleted.
(.console-messages:focus .console-item.selected .console-message::after): Deleted.
(.console-message, .console-user-command): Deleted.
(.console-message::before, .console-user-command::before, .javascript-prompt::before, .console-group-title::before): Deleted.
(.console-group): Deleted.
(.console-debug-level .console-message-text): Deleted.
(.console-debug-level::before): Deleted.
(.console-group-messages .section .header): Deleted.
(.console-group-messages .outline-disclosure): Deleted.
(.console-group-messages .outline-disclosure > ol): Deleted.
(.outline-disclosure li.elements-drag-over .selection): Deleted.
(.outline-disclosure ol:focus li.selected .selection): Deleted.
(.outline-disclosure > ol): Deleted.
* UserInterface/Views/LogContentView.js:
(WebInspector.LogContentView.prototype._mousemove):
(WebInspector.LogContentView.prototype._updateMessagesSelection):
(WebInspector.LogContentView.prototype._isMessageVisible):
(WebInspector.LogContentView.prototype._isMessageSelected):
(WebInspector.LogContentView.prototype._selectAllMessages):
(WebInspector.LogContentView.prototype._unfilteredMessages):
(WebInspector.LogContentView.prototype._visibleMessages):
(WebInspector.LogContentView.prototype._filterMessages):
(WebInspector.LogContentView.prototype._leftArrowWasPressed):
(WebInspector.LogContentView.prototype._propertiesSectionDidUpdateContent):
(WebInspector.LogContentView.prototype._performSearch):
* UserInterface/Views/Section.css:
(.section .header .title::before):
(.section.expanded .header .title::before):
(.section .header .title, .event-bar .header .title):
(.properties-tree li.parent::before):
(.section .header::before): Deleted.
(.section.expanded .header::before): Deleted.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsConsoleCommandjs">trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleCommand.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsConsoleGroupjs">trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleGroup.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsConsoleMessageImpljs">trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageImpl.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLogContentViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsLogContentViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsSectioncss">trunk/Source/WebInspectorUI/UserInterface/Views/Section.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (180204 => 180205)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2015-02-17 02:30:11 UTC (rev 180204)
+++ trunk/Source/WebInspectorUI/ChangeLog 2015-02-17 04:20:21 UTC (rev 180205)
</span><span class="lines">@@ -1,3 +1,88 @@
</span><ins>+2015-02-16 Nikita Vasilyev <nvasilyev@apple.com>
+
+ Web Inspector: Tweak the styles on the Console
+ https://bugs.webkit.org/show_bug.cgi?id=140580
+
+ - Use non-monospace (default sans-serif) font for console messages, but keep using monospace font
+ for objects, functions, and anything else that presumably code.
+ - Display all expandable objects on a separate row.
+
+ Reviewed by Timothy Hatcher.
+
+ * UserInterface/Views/ConsoleCommand.js:
+ (WebInspector.ConsoleCommand.prototype.decorateMessageElement):
+ (WebInspector.ConsoleCommand.prototype.toMessageElement):
+ * UserInterface/Views/ConsoleGroup.js:
+ (WebInspector.ConsoleGroup.prototype.addMessage):
+ * UserInterface/Views/ConsoleMessageImpl.js:
+ (WebInspector.ConsoleMessageImpl.prototype._format):
+ (WebInspector.ConsoleMessageImpl.prototype._isExpandable):
+ (WebInspector.ConsoleMessageImpl.prototype._formatParameter):
+ (WebInspector.ConsoleMessageImpl.prototype.append):
+ (WebInspector.ConsoleMessageImpl.prototype._formatWithSubstitutionString):
+ (WebInspector.ConsoleMessageImpl.prototype.decorateMessageElement):
+ (WebInspector.ConsoleMessageImpl.prototype.toMessageElement):
+ (WebInspector.ConsoleMessageImpl.prototype._formatParameterAsString): Deleted.
+ * UserInterface/Views/LogContentView.css:
+ (.console-messages):
+ (.console-formatted-object):
+ (.expandable.source-code):
+ (.console-message):
+ (.console-item.selected::after):
+ (.console-messages:focus .console-item.selected::after):
+ (.console-user-command-result.console-log-level::before):
+ (.console-item::before):
+ (.console-message .bubble):
+ (.console-error-level):
+ (.console-error-level .section .header .title):
+ (.console-error-level::before):
+ (.console-warning-level):
+ (.console-warning-level .console-message-text):
+ (.console-warning-level::before):
+ (.console-user-command::before):
+ (.console-group-messages .section):
+ (.console-group-messages .section .header::before):
+ (.console-group-messages .section .header .title):
+ (.console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap):
+ (.outline-disclosure li):
+ (.outline-disclosure li.parent::before):
+ (.console-item): Deleted.
+ (.console-item.selected): Deleted.
+ (.console-messages:focus .console-item.selected): Deleted.
+ (.console-item.selected .console-message::after): Deleted.
+ (.console-messages:focus .console-item.selected .data-grid tr.selected): Deleted.
+ (.console-messages:focus .console-item.selected .console-message::after): Deleted.
+ (.console-message, .console-user-command): Deleted.
+ (.console-message::before, .console-user-command::before, .javascript-prompt::before, .console-group-title::before): Deleted.
+ (.console-group): Deleted.
+ (.console-debug-level .console-message-text): Deleted.
+ (.console-debug-level::before): Deleted.
+ (.console-group-messages .section .header): Deleted.
+ (.console-group-messages .outline-disclosure): Deleted.
+ (.console-group-messages .outline-disclosure > ol): Deleted.
+ (.outline-disclosure li.elements-drag-over .selection): Deleted.
+ (.outline-disclosure ol:focus li.selected .selection): Deleted.
+ (.outline-disclosure > ol): Deleted.
+ * UserInterface/Views/LogContentView.js:
+ (WebInspector.LogContentView.prototype._mousemove):
+ (WebInspector.LogContentView.prototype._updateMessagesSelection):
+ (WebInspector.LogContentView.prototype._isMessageVisible):
+ (WebInspector.LogContentView.prototype._isMessageSelected):
+ (WebInspector.LogContentView.prototype._selectAllMessages):
+ (WebInspector.LogContentView.prototype._unfilteredMessages):
+ (WebInspector.LogContentView.prototype._visibleMessages):
+ (WebInspector.LogContentView.prototype._filterMessages):
+ (WebInspector.LogContentView.prototype._leftArrowWasPressed):
+ (WebInspector.LogContentView.prototype._propertiesSectionDidUpdateContent):
+ (WebInspector.LogContentView.prototype._performSearch):
+ * UserInterface/Views/Section.css:
+ (.section .header .title::before):
+ (.section.expanded .header .title::before):
+ (.section .header .title, .event-bar .header .title):
+ (.properties-tree li.parent::before):
+ (.section .header::before): Deleted.
+ (.section.expanded .header::before): Deleted.
+
</ins><span class="cx"> 2015-02-15 Brian J. Burg <burg@cs.washington.edu>
</span><span class="cx">
</span><span class="cx"> Web Inspector: remove unused XHR replay code
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsConsoleCommandjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleCommand.js (180204 => 180205)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleCommand.js 2015-02-17 02:30:11 UTC (rev 180204)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleCommand.js 2015-02-17 04:20:21 UTC (rev 180205)
</span><span class="lines">@@ -39,18 +39,28 @@
</span><span class="cx">
</span><span class="cx"> // Public
</span><span class="cx">
</span><ins>+ decorateMessageElement: function(element) {
+ if (this._element)
+ return this._element;
+
+ this._element = element;
+ this._element.command = this;
+ this._element.classList.add("console-user-command");
+ this._element.setAttribute("data-labelprefix", WebInspector.UIString("Input: "));
+
+ this._formatCommand();
+ this._element.appendChild(this._formattedCommand);
+
+ return this._element;
+ },
+
</ins><span class="cx"> toMessageElement: function()
</span><span class="cx"> {
</span><del>- if (!this._element) {
- this._element = document.createElement("div");
- this._element.command = this;
- this._element.className = "console-user-command";
- this._element.setAttribute("data-labelprefix", WebInspector.UIString("Input: "));
</del><ins>+ if (this._element)
+ return this._element;
</ins><span class="cx">
</span><del>- this._formatCommand();
- this._element.appendChild(this._formattedCommand);
- }
- return this._element;
</del><ins>+ var element = document.createElement("div");
+ return this.decorateMessageElement(element);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> // Private
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsConsoleGroupjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleGroup.js (180204 => 180205)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleGroup.js 2015-02-17 02:30:11 UTC (rev 180204)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleGroup.js 2015-02-17 04:20:21 UTC (rev 180205)
</span><span class="lines">@@ -54,21 +54,20 @@
</span><span class="cx">
</span><span class="cx"> addMessage: function(msg)
</span><span class="cx"> {
</span><del>- var element = msg.toMessageElement();
</del><ins>+ var element = document.createElement("div");
+ element.className = WebInspector.LogContentView.ItemWrapperStyleClassName;
</ins><span class="cx">
</span><del>- var wrapper = document.createElement("div");
- wrapper.className = WebInspector.LogContentView.ItemWrapperStyleClassName;
- wrapper.messageElement = wrapper.appendChild(element);
</del><ins>+ msg.decorateMessageElement(element);
</ins><span class="cx">
</span><span class="cx"> if (msg.type === WebInspector.ConsoleMessage.MessageType.StartGroup || msg.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed) {
</span><del>- this.messagesElement.parentNode.insertBefore(wrapper, this.messagesElement);
</del><ins>+ this.messagesElement.parentNode.insertBefore(element, this.messagesElement);
</ins><span class="cx"> element.addEventListener("click", this._titleClicked.bind(this));
</span><span class="cx"> element.addEventListener("mousedown", this._titleMouseDown.bind(this));
</span><span class="cx"> var groupElement = element.enclosingNodeOrSelfWithClass("console-group");
</span><span class="cx"> if (groupElement && msg.type === WebInspector.ConsoleMessage.MessageType.StartGroupCollapsed)
</span><span class="cx"> groupElement.classList.add("collapsed");
</span><span class="cx"> } else
</span><del>- this.messagesElement.appendChild(wrapper);
</del><ins>+ this.messagesElement.appendChild(element);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> hasMessages: function()
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsConsoleMessageImpljs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageImpl.js (180204 => 180205)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageImpl.js 2015-02-17 02:30:11 UTC (rev 180204)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/ConsoleMessageImpl.js 2015-02-17 04:20:21 UTC (rev 180205)
</span><span class="lines">@@ -225,7 +225,6 @@
</span><span class="cx"> // There can be string log and string eval result. We distinguish between them based on message type.
</span><span class="cx"> var shouldFormatMessage = WebInspector.RemoteObject.type(parameters[0]) === "string" && this.type !== WebInspector.ConsoleMessage.MessageType.Result;
</span><span class="cx">
</span><del>- // Multiple parameters with the first being a format string. Save unused substitutions.
</del><span class="cx"> if (shouldFormatMessage) {
</span><span class="cx"> // Multiple parameters with the first being a format string. Save unused substitutions.
</span><span class="cx"> var result = this._formatWithSubstitutionString(parameters, formattedResult);
</span><span class="lines">@@ -242,16 +241,31 @@
</span><span class="cx"> // Single parameter, or unused substitutions from above.
</span><span class="cx"> for (var i = 0; i < parameters.length; ++i) {
</span><span class="cx"> // Inline strings when formatting.
</span><del>- if (shouldFormatMessage && parameters[i].type === "string")
- formattedResult.appendChild(document.createTextNode(parameters[i].description));
- else
</del><ins>+ if (shouldFormatMessage && parameters[i].type === "string") {
+ var span = document.createElement("span");
+ span.classList.add("type-string");
+ span.textContent = parameters[i].description;
+ formattedResult.appendChild(span);
+ } else
</ins><span class="cx"> formattedResult.appendChild(this._formatParameter(parameters[i], false, true));
</span><del>- if (i < parameters.length - 1)
</del><ins>+
+ if (i < parameters.length - 1 && !this._isExpandable(parameters[i]))
</ins><span class="cx"> formattedResult.appendChild(document.createTextNode(" "));
</span><ins>+
</ins><span class="cx"> }
</span><span class="cx"> return formattedResult;
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ _isExpandable: function(remoteObject) {
+ if (!remoteObject)
+ return false;
+
+ if (remoteObject.hasChildren && remoteObject.preview && remoteObject.preview.lossless)
+ return false;
+
+ return remoteObject.hasChildren;
+ },
+
</ins><span class="cx"> _formatParameter: function(output, forceObjectFormat, includePreview)
</span><span class="cx"> {
</span><span class="cx"> var type;
</span><span class="lines">@@ -270,6 +284,10 @@
</span><span class="cx">
</span><span class="cx"> var span = document.createElement("span");
</span><span class="cx"> span.className = "console-formatted-" + type + " source-code";
</span><ins>+
+ if (this._isExpandable(output))
+ span.classList.add("expandable");
+
</ins><span class="cx"> formatter.call(this, output, span, includePreview);
</span><span class="cx"> return span;
</span><span class="cx"> },
</span><span class="lines">@@ -708,7 +726,10 @@
</span><span class="cx"> wrapper.appendChild(toAppend);
</span><span class="cx"> toAppend = wrapper;
</span><span class="cx"> }
</span><del>- a.appendChild(toAppend);
</del><ins>+ var span = document.createElement("span");
+ span.className = "type-string";
+ span.appendChild(toAppend);
+ a.appendChild(span);
</ins><span class="cx"> }
</span><span class="cx"> return a;
</span><span class="cx"> }
</span><span class="lines">@@ -717,14 +738,13 @@
</span><span class="cx"> return String.format(parameters[0].description, parameters.slice(1), formatters, formattedResult, append);
</span><span class="cx"> },
</span><span class="cx">
</span><del>- toMessageElement: function()
</del><ins>+ decorateMessageElement: function(element)
</ins><span class="cx"> {
</span><span class="cx"> if (this._element)
</span><span class="cx"> return this._element;
</span><span class="cx">
</span><del>- var element = document.createElement("div");
</del><span class="cx"> element.message = this;
</span><del>- element.className = "console-message";
</del><ins>+ element.classList.add("console-message");
</ins><span class="cx">
</span><span class="cx"> this._element = element;
</span><span class="cx">
</span><span class="lines">@@ -762,6 +782,16 @@
</span><span class="cx"> return element;
</span><span class="cx"> },
</span><span class="cx">
</span><ins>+ toMessageElement: function()
+ {
+ if (this._element)
+ return this._element;
+
+ var element = document.createElement("div");
+
+ return this.decorateMessageElement(element);
+ },
+
</ins><span class="cx"> _populateStackTraceTreeElement: function(parentTreeElement)
</span><span class="cx"> {
</span><span class="cx"> for (var i = 0; i < this._stackTrace.length; i++) {
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLogContentViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css (180204 => 180205)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css 2015-02-17 02:30:11 UTC (rev 180204)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.css 2015-02-17 04:20:21 UTC (rev 180205)
</span><span class="lines">@@ -34,17 +34,28 @@
</span><span class="cx">
</span><span class="cx"> word-wrap: break-word;
</span><span class="cx">
</span><ins>+ font-family: -webkit-system-font, sans-serif;
+ font-size: 12px;
+
+ min-height: 100%;
+}
+
+.console-user-command,
+.console-user-command-result,
+.console-formatted-object {
</ins><span class="cx"> font-family: Menlo, monospace;
</span><span class="cx"> font-size: 11px;
</span><ins>+}
</ins><span class="cx">
</span><del>- min-height: 100%;
</del><ins>+.expandable.source-code {
+ display: block;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .console-messages > :first-child {
</span><span class="cx"> margin-top: auto;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.console-item {
</del><ins>+.console-message {
</ins><span class="cx"> border-top: 1px solid rgb(240, 240, 240);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -52,16 +63,7 @@
</span><span class="cx"> border-top: none;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.console-item.selected {
- background-color: hsl(210, 0%, 96%);
-}
-
-.console-messages:focus .console-item.selected {
- background-color: hsl(210, 98%, 96%);
-}
-
-.console-item.selected .console-user-command::after,
-.console-item.selected .console-message::after {
</del><ins>+.console-item.selected::after {
</ins><span class="cx"> position: absolute;
</span><span class="cx"> display: block;
</span><span class="cx"> content: "";
</span><span class="lines">@@ -80,8 +82,7 @@
</span><span class="cx"> background-color: hsl(210, 0%, 90%) !important;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.console-messages:focus .console-item.selected .console-user-command::after,
-.console-messages:focus .console-item.selected .console-message::after {
</del><ins>+.console-messages:focus .console-item.selected::after {
</ins><span class="cx"> background: hsl(210, 100%, 49%);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -90,7 +91,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .console-user-command-result.console-log-level::before {
</span><del>- background-image: url(../Images/UserInputResult.svg);
</del><ins>+ content: url(../Images/UserInputResult.svg);
+ margin-top: 1px; /* align with 11px Menlo */
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .console-message, .console-user-command {
</span><span class="lines">@@ -99,20 +101,17 @@
</span><span class="cx"> min-height: 16px;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.console-message::before, .console-user-command::before, .javascript-prompt::before, .console-group-title::before {
</del><ins>+.console-item::before {
+ content: " ";
+
</ins><span class="cx"> position: absolute;
</span><del>- display: block;
- content: "";
</del><span class="cx"> left: 4px;
</span><del>- top: 8px;
</del><span class="cx"> width: 10px;
</span><del>- height: 10px;
- margin-top: -5px;
</del><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .console-message .bubble {
</span><span class="cx"> display: inline-block;
</span><del>- height: 14px;
</del><ins>+ height: 15px;
</ins><span class="cx"> background-color: rgb(128, 151, 189);
</span><span class="cx"> vertical-align: middle;
</span><span class="cx"> white-space: nowrap;
</span><span class="lines">@@ -170,10 +169,16 @@
</span><span class="cx"> border-top: 3px dashed rgb(240, 240, 240);
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.console-error-level .console-message-text, .console-error-level .section .header .title {
- color: red !important;
</del><ins>+.console-error-level {
+ background-color: hsl(0, 100%, 96%);
+ border-color: hsl(0, 100%, 92%);
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.console-error-level .console-message-text,
+.console-error-level .section .header .title {
+ color: hsl(0, 75%, 50%);
+}
+
</ins><span class="cx"> .console-debug-level .console-message-text {
</span><span class="cx"> color: blue;
</span><span class="cx"> }
</span><span class="lines">@@ -183,13 +188,20 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .console-error-level::before {
</span><del>- background-image: url(../Images/Error.svg);
- background-size: 10px 10px;
</del><ins>+ content: url(../Images/Error.svg);
</ins><span class="cx"> }
</span><span class="cx">
</span><ins>+.console-warning-level {
+ background-color: hsl(50, 100%, 94%);
+ border-color: hsl(50, 100%, 86%);
+}
+
+.console-warning-level .console-message-text {
+ color: hsl(30, 90%, 35%);
+}
+
</ins><span class="cx"> .console-warning-level::before {
</span><del>- background-image: url(../Images/Warning.svg);
- background-size: 10px 10px;
</del><ins>+ content: url(../Images/Warning.svg);
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .console-user-command .console-message {
</span><span class="lines">@@ -198,7 +210,8 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .console-user-command::before {
</span><del>- background-image: url(../Images/UserInputPromptPrevious.svg);
</del><ins>+ content: url(../Images/UserInputPromptPrevious.svg);
+ margin-top: 1px; /* align with 11px Menlo */
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .console-user-command > .console-message-text {
</span><span class="lines">@@ -221,7 +234,7 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .console-group-messages .section {
</span><del>- margin: 0 0 0 12px !important;
</del><ins>+ margin: 0 0 0 12px;
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .console-group-messages .section .header {
</span><span class="lines">@@ -232,14 +245,14 @@
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .console-group-messages .section .header::before {
</span><del>- top: 2px;
</del><ins>+ top: 3px;
</ins><span class="cx"> left: 1px;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .console-group-messages .section .header .title {
</span><span class="cx"> color: black;
</span><span class="cx"> font-weight: normal;
</span><del>- line-height: normal;
</del><ins>+ line-height: normal; /* @FIXME: may cause inconsistencies in line-heights of monospace and non-monospace text */
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .console-group-messages .section .properties li .info {
</span><span class="lines">@@ -257,11 +270,6 @@
</span><span class="cx"> padding: 0 0 0 12px !important;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.console-group-messages .outline-disclosure, .console-group-messages .outline-disclosure ol {
- font-size: inherit;
- line-height: 12px;
-}
-
</del><span class="cx"> .console-group-messages .outline-disclosure.single-node li {
</span><span class="cx"> padding-left: 2px;
</span><span class="cx"> }
</span><span class="lines">@@ -309,7 +317,7 @@
</span><span class="cx"> .console-formatted-object, .console-formatted-node, .console-formatted-error, .console-formatted-map, .console-formatted-set, .console-formatted-weakmap {
</span><span class="cx"> position: relative;
</span><span class="cx"> display: inline-block;
</span><del>- vertical-align: top;
</del><ins>+ vertical-align: baseline;
</ins><span class="cx"> color: black;
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -404,10 +412,6 @@
</span><span class="cx"> background-color: white;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.outline-disclosure {
- font-size: 11px;
-}
-
</del><span class="cx"> .outline-disclosure > ol {
</span><span class="cx"> position: relative;
</span><span class="cx"> padding: 2px 6px !important;
</span><span class="lines">@@ -425,8 +429,8 @@
</span><span class="cx">
</span><span class="cx"> .outline-disclosure li {
</span><span class="cx"> padding: 0 0 0 14px;
</span><del>- margin-top: 1px;
- margin-bottom: 1px;
</del><ins>+ margin-top: 0;
+ margin-bottom: 2px;
</ins><span class="cx"> margin-left: -2px;
</span><span class="cx"> word-wrap: break-word;
</span><span class="cx"> }
</span><span class="lines">@@ -451,7 +455,7 @@
</span><span class="cx"> width: 8px;
</span><span class="cx"> height: 8px;
</span><span class="cx">
</span><del>- margin-top: 2px;
</del><ins>+ margin-top: 4px;
</ins><span class="cx"> padding-right: 2px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsLogContentViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js (180204 => 180205)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js 2015-02-17 02:30:11 UTC (rev 180204)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/LogContentView.js 2015-02-17 04:20:21 UTC (rev 180205)
</span><span class="lines">@@ -270,7 +270,7 @@
</span><span class="cx">
</span><span class="cx"> if (onlySelected) {
</span><span class="cx"> messages = this._allMessages().filter(function(message) {
</span><del>- return message.parentNode.classList.contains(WebInspector.LogContentView.SelectedStyleClassName);
</del><ins>+ return message.classList.contains(WebInspector.LogContentView.SelectedStyleClassName);
</ins><span class="cx"> });
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -392,9 +392,10 @@
</span><span class="cx"> selection.removeAllRanges();
</span><span class="cx">
</span><span class="cx"> if (!this._mouseMoveIsRowSelection)
</span><del>- this._updateMessagesSelection(this._mouseDownWrapper.messageElement, this._mouseDownCommandKey, this._mouseDownShiftKey);
- this._updateMessagesSelection(wrapper.messageElement, false, true);
</del><ins>+ this._updateMessagesSelection(this._mouseDownWrapper, this._mouseDownCommandKey, this._mouseDownShiftKey);
</ins><span class="cx">
</span><ins>+ this._updateMessagesSelection(wrapper, false, true);
+
</ins><span class="cx"> this._mouseMoveIsRowSelection = true;
</span><span class="cx">
</span><span class="cx"> event.preventDefault();
</span><span class="lines">@@ -412,10 +413,9 @@
</span><span class="cx"> if (wrapper && (selection.isCollapsed || event.shiftKey)) {
</span><span class="cx"> selection.removeAllRanges();
</span><span class="cx">
</span><del>- var message = wrapper.messageElement;
- if (this._targetInMessageCanBeSelected(event.target, message)) {
</del><ins>+ if (this._targetInMessageCanBeSelected(event.target, wrapper)) {
</ins><span class="cx"> var sameWrapper = wrapper === this._mouseDownWrapper;
</span><del>- this._updateMessagesSelection(message, sameWrapper ? this._mouseDownCommandKey : false, sameWrapper ? this._mouseDownShiftKey : true);
</del><ins>+ this._updateMessagesSelection(wrapper, sameWrapper ? this._mouseDownCommandKey : false, sameWrapper ? this._mouseDownShiftKey : true);
</ins><span class="cx"> }
</span><span class="cx"> } else if (!selection.isCollapsed) {
</span><span class="cx"> // There is a text selection, clear the row selection.
</span><span class="lines">@@ -458,7 +458,7 @@
</span><span class="cx"> {
</span><span class="cx"> var alreadySelectedMessage = this._selectedMessages.contains(message);
</span><span class="cx"> if (alreadySelectedMessage && this._selectedMessages.length && multipleSelection) {
</span><del>- message.parentNode.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
</del><ins>+ message.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
</ins><span class="cx"> this._selectedMessages.remove(message);
</span><span class="cx"> return;
</span><span class="cx"> }
</span><span class="lines">@@ -482,18 +482,18 @@
</span><span class="cx">
</span><span class="cx"> for (var i = startIndex; i <= endIndex; ++i) {
</span><span class="cx"> var messageInRange = messages[i];
</span><del>- if (i >= newRange[0] && i <= newRange[1] && !messageInRange.parentNode.classList.contains(WebInspector.LogContentView.SelectedStyleClassName)) {
- messageInRange.parentNode.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
</del><ins>+ if (i >= newRange[0] && i <= newRange[1] && !messageInRange.classList.contains(WebInspector.LogContentView.SelectedStyleClassName)) {
+ messageInRange.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
</ins><span class="cx"> this._selectedMessages.push(messageInRange);
</span><del>- } else if (i < newRange[0] || i > newRange[1] && messageInRange.parentNode.classList.contains(WebInspector.LogContentView.SelectedStyleClassName)) {
- messageInRange.parentNode.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
</del><ins>+ } else if (i < newRange[0] || i > newRange[1] && messageInRange.classList.contains(WebInspector.LogContentView.SelectedStyleClassName)) {
+ messageInRange.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
</ins><span class="cx"> this._selectedMessages.remove(messageInRange);
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> this._selectionRange = newRange;
</span><span class="cx"> } else {
</span><del>- message.parentNode.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
</del><ins>+ message.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
</ins><span class="cx"> this._selectedMessages.push(message);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -535,7 +535,7 @@
</span><span class="cx">
</span><span class="cx"> _isMessageVisible: function(message)
</span><span class="cx"> {
</span><del>- var node = message.parentNode;
</del><ins>+ var node = message;
</ins><span class="cx">
</span><span class="cx"> if (node.classList.contains(WebInspector.LogContentView.FilteredOutStyleClassName))
</span><span class="cx"> return false;
</span><span class="lines">@@ -557,13 +557,13 @@
</span><span class="cx">
</span><span class="cx"> _isMessageSelected: function(message)
</span><span class="cx"> {
</span><del>- return message.parentNode.classList.contains(WebInspector.LogContentView.SelectedStyleClassName);
</del><ins>+ return message.classList.contains(WebInspector.LogContentView.SelectedStyleClassName);
</ins><span class="cx"> },
</span><span class="cx">
</span><span class="cx"> _clearMessagesSelection: function()
</span><span class="cx"> {
</span><span class="cx"> this._selectedMessages.forEach(function(message) {
</span><del>- message.parentNode.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
</del><ins>+ message.classList.remove(WebInspector.LogContentView.SelectedStyleClassName);
</ins><span class="cx"> });
</span><span class="cx"> this._selectedMessages = [];
</span><span class="cx"> delete this._referenceMessageForRangeSelection;
</span><span class="lines">@@ -576,7 +576,7 @@
</span><span class="cx"> var messages = this._visibleMessages();
</span><span class="cx"> for (var i = 0; i < messages.length; ++i) {
</span><span class="cx"> var message = messages[i];
</span><del>- message.parentNode.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
</del><ins>+ message.classList.add(WebInspector.LogContentView.SelectedStyleClassName);
</ins><span class="cx"> this._selectedMessages.push(message);
</span><span class="cx"> }
</span><span class="cx"> },
</span><span class="lines">@@ -589,7 +589,7 @@
</span><span class="cx"> _unfilteredMessages: function()
</span><span class="cx"> {
</span><span class="cx"> return this._allMessages().filter(function(message) {
</span><del>- return !message.parentNode.classList.contains(WebInspector.LogContentView.FilteredOutStyleClassName);
</del><ins>+ return !message.classList.contains(WebInspector.LogContentView.FilteredOutStyleClassName);
</ins><span class="cx"> });
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -601,7 +601,7 @@
</span><span class="cx"> return unfilteredMessages;
</span><span class="cx">
</span><span class="cx"> return unfilteredMessages.filter(function(message) {
</span><del>- return !message.parentNode.classList.contains(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
</del><ins>+ return !message.classList.contains(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
</ins><span class="cx"> });
</span><span class="cx"> },
</span><span class="cx">
</span><span class="lines">@@ -653,7 +653,7 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><del>- var classList = message.parentNode.classList;
</del><ins>+ var classList = message.classList;
</ins><span class="cx"> if (visible)
</span><span class="cx"> classList.remove(WebInspector.LogContentView.FilteredOutStyleClassName);
</span><span class="cx"> else {
</span><span class="lines">@@ -759,7 +759,7 @@
</span><span class="cx">
</span><span class="cx"> var currentMessage = this._selectedMessages[0];
</span><span class="cx"> if (currentMessage.classList.contains("console-group-title"))
</span><del>- currentMessage.parentNode.parentNode.classList.add("collapsed");
</del><ins>+ currentMessage.parentNode.classList.add("collapsed");
</ins><span class="cx"> else {
</span><span class="cx"> var outlineTitle = currentMessage.querySelector("ol.outline-disclosure > li.parent");
</span><span class="cx"> if (outlineTitle) {
</span><span class="lines">@@ -782,7 +782,7 @@
</span><span class="cx">
</span><span class="cx"> var currentMessage = this._selectedMessages[0];
</span><span class="cx"> if (currentMessage.classList.contains("console-group-title"))
</span><del>- currentMessage.parentNode.parentNode.classList.remove("collapsed");
</del><ins>+ currentMessage.parentNode.classList.remove("collapsed");
</ins><span class="cx"> else {
</span><span class="cx"> var outlineTitle = currentMessage.querySelector("ol.outline-disclosure > li.parent");
</span><span class="cx"> if (outlineTitle) {
</span><span class="lines">@@ -813,7 +813,7 @@
</span><span class="cx"> var section = event.target;
</span><span class="cx"> section.removeEventListener(WebInspector.Section.Event.VisibleContentDidChange, this._propertiesSectionDidUpdateContent, this);
</span><span class="cx">
</span><del>- var message = section.element.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName).messageElement;
</del><ins>+ var message = section.element.enclosingNodeOrSelfWithClass(WebInspector.LogContentView.ItemWrapperStyleClassName);
</ins><span class="cx"> if (!this._isMessageSelected(message))
</span><span class="cx"> return;
</span><span class="cx">
</span><span class="lines">@@ -886,7 +886,7 @@
</span><span class="cx"> if (!isEmptyObject(matchRanges))
</span><span class="cx"> this._highlightRanges(message, matchRanges);
</span><span class="cx">
</span><del>- var classList = message.parentNode.classList;
</del><ins>+ var classList = message.classList;
</ins><span class="cx"> if (!isEmptyObject(matchRanges) || message.command instanceof WebInspector.ConsoleCommand || message.message instanceof WebInspector.ConsoleCommandResult)
</span><span class="cx"> classList.remove(WebInspector.LogContentView.FilteredOutBySearchStyleClassName);
</span><span class="cx"> else
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsSectioncss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/Section.css (180204 => 180205)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/Section.css 2015-02-17 02:30:11 UTC (rev 180204)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/Section.css 2015-02-17 04:20:21 UTC (rev 180205)
</span><span class="lines">@@ -36,22 +36,22 @@
</span><span class="cx"> background-clip: padding;
</span><span class="cx"> }
</span><span class="cx">
</span><del>-.section .header::before {
- position: absolute;
- top: 5px;
- left: 7px;
-
</del><ins>+.section .header .title::before {
</ins><span class="cx"> width: 8px;
</span><span class="cx"> height: 8px;
</span><span class="cx">
</span><ins>+ margin-right: 4px;
+ margin-left: -8px;
+
</ins><span class="cx"> background-image: -webkit-canvas(disclosure-triangle-tiny-closed-normal);
</span><span class="cx"> background-size: 8px 8px;
</span><span class="cx"> background-repeat: no-repeat;
</span><span class="cx">
</span><del>- content: "";
</del><ins>+ content: " ";
+ display: inline-block;
</ins><span class="cx"> }
</span><span class="cx">
</span><del>-.section.expanded .header::before {
</del><ins>+.section.expanded .header .title::before {
</ins><span class="cx"> background-image: -webkit-canvas(disclosure-triangle-tiny-open-normal);
</span><span class="cx"> }
</span><span class="cx">
</span><span class="lines">@@ -59,7 +59,7 @@
</span><span class="cx"> font-weight: normal;
</span><span class="cx"> word-wrap: break-word;
</span><span class="cx"> white-space: normal;
</span><del>- line-height: 18px;
</del><ins>+ line-height: 18px; /* @FIXME: Don't hardcode line-height. */
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> .section .header .title.blank-title {
</span><span class="lines">@@ -140,7 +140,7 @@
</span><span class="cx"> width: 8px;
</span><span class="cx"> height: 8px;
</span><span class="cx">
</span><del>- margin-top: 3px;
</del><ins>+ margin-top: 2px;
</ins><span class="cx"> padding-right: 2px;
</span><span class="cx"> }
</span><span class="cx">
</span></span></pre>
</div>
</div>
</body>
</html>