- Revision
- 134166
- Author
- [email protected]
- Date
- 2012-11-10 16:20:30 -0800 (Sat, 10 Nov 2012)
Log Message
Web Inspector: Multiple '%c' formatting options should all have effect.
https://bugs.webkit.org/show_bug.cgi?id=101495
Reviewed by Pavel Feldman.
Source/WebCore:
This patch supports multiple '%c' formatting blocks in console messages.
'console.log("%cblue! %cgreen!", "color: blue;", "color: green;")' will
do exactly what you expect: "blue!" will be blue, and "green!" will be
green.
The implementation moves the styles off the message's parent 'span', and
onto new 'span' elements that wrap the various textual bits of the
message.
* inspector/front-end/ConsoleMessage.js:
(WebInspector.ConsoleMessageImpl.prototype.):
(WebInspector.ConsoleMessageImpl.prototype.append):
(WebInspector.ConsoleMessageImpl.prototype._formatWithSubstitutionString):
LayoutTests:
* http/tests/inspector/console-test.js:
(initialize_ConsoleTest.InspectorTest.dumpConsoleMessagesWithStyles):
We're no longer putting the style directly on the message's
parent, but instead on each section of the message in order to
support multiple styles.
* inspector/console/console-format-style-expected.txt:
* inspector/console/console-format-style-whitelist-expected.txt:
* inspector/console/console-format-style.html:
Modified Paths
Diff
Modified: trunk/LayoutTests/ChangeLog (134165 => 134166)
--- trunk/LayoutTests/ChangeLog 2012-11-10 23:36:04 UTC (rev 134165)
+++ trunk/LayoutTests/ChangeLog 2012-11-11 00:20:30 UTC (rev 134166)
@@ -1,3 +1,19 @@
+2012-11-10 Mike West <[email protected]>
+
+ Web Inspector: Multiple '%c' formatting options should all have effect.
+ https://bugs.webkit.org/show_bug.cgi?id=101495
+
+ Reviewed by Pavel Feldman.
+
+ * http/tests/inspector/console-test.js:
+ (initialize_ConsoleTest.InspectorTest.dumpConsoleMessagesWithStyles):
+ We're no longer putting the style directly on the message's
+ parent, but instead on each section of the message in order to
+ support multiple styles.
+ * inspector/console/console-format-style-expected.txt:
+ * inspector/console/console-format-style-whitelist-expected.txt:
+ * inspector/console/console-format-style.html:
+
2012-11-10 Bruno de Oliveira Abinader <[email protected]>
[css] text-decoration:none no longer valid
Modified: trunk/LayoutTests/http/tests/inspector/console-test.js (134165 => 134166)
--- trunk/LayoutTests/http/tests/inspector/console-test.js 2012-11-10 23:36:04 UTC (rev 134165)
+++ trunk/LayoutTests/http/tests/inspector/console-test.js 2012-11-11 00:20:30 UTC (rev 134166)
@@ -28,8 +28,9 @@
for (var i = 0; i < messages.length; ++i) {
var element = messages[i].toMessageElement();
InspectorTest.addResult(element.textContent.replace(/\u200b/g, ""));
- var cssText = element.querySelector(".console-message-text span").style.cssText || "NO STYLES DEFINED.";
- InspectorTest.addResult("Style: " + cssText);
+ var spans = element.querySelectorAll(".console-message-text > span > span");
+ for (var j = 0; j < spans.length; j++)
+ InspectorTest.addResult("Styled text #" + j + ": " + (spans[j].style.cssText || "NO STYLES DEFINED"));
}
}
Modified: trunk/LayoutTests/inspector/console/console-format-style-expected.txt (134165 => 134166)
--- trunk/LayoutTests/inspector/console/console-format-style-expected.txt 2012-11-10 23:36:04 UTC (rev 134165)
+++ trunk/LayoutTests/inspector/console/console-format-style-expected.txt 2012-11-11 00:20:30 UTC (rev 134166)
@@ -1,9 +1,10 @@
CONSOLE MESSAGE: line 8: %cBlue!.
-CONSOLE MESSAGE: line 9: %cRed!%c.
-Tests that console logging dumps properly styled messages, and that the whole message gets the same style, regardless of multiple %c settings.
+CONSOLE MESSAGE: line 9: %cBlue! %cRed!
+Tests that console logging dumps properly styled messages.
Blue!. console-format-style.html:8
-Style: color: blue;
-Red!. console-format-style.html:9
-Style: color: red;
+Styled text #0: color: blue;
+Blue! Red! console-format-style.html:9
+Styled text #0: color: blue;
+Styled text #1: color: red;
Modified: trunk/LayoutTests/inspector/console/console-format-style-whitelist-expected.txt (134165 => 134166)
--- trunk/LayoutTests/inspector/console/console-format-style-whitelist-expected.txt 2012-11-10 23:36:04 UTC (rev 134165)
+++ trunk/LayoutTests/inspector/console/console-format-style-whitelist-expected.txt 2012-11-11 00:20:30 UTC (rev 134166)
@@ -7,15 +7,15 @@
Tests that console logging dumps properly styled messages, and that the whole message gets the same style, regardless of multiple %c settings.
Colors are awesome. console-format-style-whitelist.html:8
-Style: color: blue;
+Styled text #0: color: blue;
So are fonts! console-format-style-whitelist.html:9
-Style: font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: normal; font-family: Helvetica;
+Styled text #0: font-style: normal; font-variant: normal; font-weight: normal; font-size: 1em; line-height: normal; font-family: Helvetica;
And borders and margins and paddings! console-format-style-whitelist.html:10
-Style: border: 1px solid red; margin: 20px; padding: 10px;
+Styled text #0: border: 1px solid red; margin: 20px; padding: 10px;
text-* is fine by us! console-format-style-whitelist.html:11
-Style: text-decoration: none;
+Styled text #0: text-decoration: none;
Display, on the other hand, is bad news. console-format-style-whitelist.html:13
-Style: NO STYLES DEFINED.
+Styled text #0: NO STYLES DEFINED
And position too. console-format-style-whitelist.html:14
-Style: NO STYLES DEFINED.
+Styled text #0: NO STYLES DEFINED
Modified: trunk/LayoutTests/inspector/console/console-format-style.html (134165 => 134166)
--- trunk/LayoutTests/inspector/console/console-format-style.html 2012-11-10 23:36:04 UTC (rev 134165)
+++ trunk/LayoutTests/inspector/console/console-format-style.html 2012-11-11 00:20:30 UTC (rev 134166)
@@ -6,7 +6,7 @@
function onload()
{
console.log('%cBlue!.', 'color: blue;');
- console.log('%cRed!%c.', 'color: blue;', 'color: red;');
+ console.log('%cBlue! %cRed!', 'color: blue;', 'color: red;');
runTest();
}
@@ -20,8 +20,6 @@
</head>
<body _onload_="onload()">
- <p>Tests that console logging dumps properly styled messages, and that
- the whole message gets the same style, regardless of multiple %c
- settings.</p>
+ <p>Tests that console logging dumps properly styled messages.</p>
</body>
</html>
Modified: trunk/Source/WebCore/ChangeLog (134165 => 134166)
--- trunk/Source/WebCore/ChangeLog 2012-11-10 23:36:04 UTC (rev 134165)
+++ trunk/Source/WebCore/ChangeLog 2012-11-11 00:20:30 UTC (rev 134166)
@@ -1,5 +1,26 @@
2012-11-10 Mike West <[email protected]>
+ Web Inspector: Multiple '%c' formatting options should all have effect.
+ https://bugs.webkit.org/show_bug.cgi?id=101495
+
+ Reviewed by Pavel Feldman.
+
+ This patch supports multiple '%c' formatting blocks in console messages.
+ 'console.log("%cblue! %cgreen!", "color: blue;", "color: green;")' will
+ do exactly what you expect: "blue!" will be blue, and "green!" will be
+ green.
+
+ The implementation moves the styles off the message's parent 'span', and
+ onto new 'span' elements that wrap the various textual bits of the
+ message.
+
+ * inspector/front-end/ConsoleMessage.js:
+ (WebInspector.ConsoleMessageImpl.prototype.):
+ (WebInspector.ConsoleMessageImpl.prototype.append):
+ (WebInspector.ConsoleMessageImpl.prototype._formatWithSubstitutionString):
+
+2012-11-10 Mike West <[email protected]>
+
Including <CoreText/CoreText.h> breaks the chromium/mac build.
https://bugs.webkit.org/show_bug.cgi?id=101851
Modified: trunk/Source/WebCore/inspector/front-end/ConsoleMessage.js (134165 => 134166)
--- trunk/Source/WebCore/inspector/front-end/ConsoleMessage.js 2012-11-10 23:36:04 UTC (rev 134165)
+++ trunk/Source/WebCore/inspector/front-end/ConsoleMessage.js 2012-11-11 00:20:30 UTC (rev 134166)
@@ -477,14 +477,16 @@
return Math.floor(obj.value);
}
+ var currentStyle = null;
function styleFormatter(obj)
{
+ currentStyle = {};
var buffer = document.createElement("span");
buffer.setAttribute("style", obj.description);
for (var i = 0; i < buffer.style.length; i++) {
var property = buffer.style[i];
if (isWhitelistedProperty(property))
- formattedResult.style[property] = buffer.style[property];
+ currentStyle[property] = buffer.style[property];
}
}
@@ -516,8 +518,17 @@
{
if (b instanceof Node)
a.appendChild(b);
- else if (b)
- a.appendChild(WebInspector.linkifyStringAsFragment(b.toString()));
+ else if (b) {
+ var toAppend = WebInspector.linkifyStringAsFragment(b.toString());
+ if (currentStyle) {
+ var wrapper = document.createElement('span');
+ for (key in currentStyle)
+ wrapper.style[key] = currentStyle[key];
+ wrapper.appendChild(toAppend);
+ toAppend = wrapper;
+ }
+ a.appendChild(toAppend);
+ }
return a;
}
