<!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>[209706] trunk</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/209706">209706</a></dd>
<dt>Author</dt> <dd>mattbaker@apple.com</dd>
<dt>Date</dt> <dd>2016-12-12 03:11:59 -0800 (Mon, 12 Dec 2016)</dd>
</dl>
<h3>Log Message</h3>
<pre>Web Inspector: Breakpoint Log action should support template literals
https://bugs.webkit.org/show_bug.cgi?id=165116
<rdar://problem/29464765>
Reviewed by Joseph Pecoraro.
Source/WebInspectorUI:
* Localizations/en.lproj/localizedStrings.js:
New string "${expr} = expression" for breakpoint popover.
* UserInterface/Controllers/BreakpointLogMessageLexer.js: Added.
To support template literal placeholders in message text, it is necessary
to distinguish plain text parts of the message from placeholders, since
plain text must be escaped.
(WebInspector.BreakpointLogMessageLexer):
(WebInspector.BreakpointLogMessageLexer.prototype.tokenize):
(WebInspector.BreakpointLogMessageLexer.prototype.reset):
(WebInspector.BreakpointLogMessageLexer.prototype._finishPlainText):
(WebInspector.BreakpointLogMessageLexer.prototype._finishExpression):
(WebInspector.BreakpointLogMessageLexer.prototype._appendToken):
(WebInspector.BreakpointLogMessageLexer.prototype._consume):
(WebInspector.BreakpointLogMessageLexer.prototype._peek):
(WebInspector.BreakpointLogMessageLexer.prototype._expression):
(WebInspector.BreakpointLogMessageLexer.prototype._plainText):
(WebInspector.BreakpointLogMessageLexer.prototype._possiblePlaceholder):
(WebInspector.BreakpointLogMessageLexer.prototype._regExpOrStringLiteral):
* UserInterface/Controllers/DebuggerManager.js:
(WebInspector.DebuggerManager.prototype._debuggerBreakpointOptions):
Build breakpoint "options" object for DebuggerAgent. If a Log action
contains template literal placeholders it is changed to an Evaluate
action, which calls console.log with a template literal.
(WebInspector.DebuggerManager.prototype._setBreakpoint):
Use converted breakpoint options.
* UserInterface/Main.html:
* UserInterface/Test.html:
New file.
* UserInterface/Views/BreakpointActionView.css:
(.breakpoint-action-block-body > .description):
Styles for breakpoint Log action hint text.
* UserInterface/Views/BreakpointActionView.js:
(WebInspector.BreakpointActionView.prototype._updateBody):
Add Log action hint text element.
LayoutTests:
* inspector/debugger/breakpoint-action-log-expected.txt: Added.
* inspector/debugger/breakpoint-action-log.html: Added.
Check that breakpoint log actions support template literal placeholders.
* inspector/unit-tests/breakpoint-log-message-lexer-expected.txt: Added.
* inspector/unit-tests/breakpoint-log-message-lexer.html: Added.
Check that the lexer correctly scans breakpoint log action text.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs">trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceControllersDebuggerManagerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceMainhtml">trunk/Source/WebInspectorUI/UserInterface/Main.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceTesthtml">trunk/Source/WebInspectorUI/UserInterface/Test.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsBreakpointActionViewcss">trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceViewsBreakpointActionViewjs">trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsinspectordebuggerbreakpointactionlogexpectedtxt">trunk/LayoutTests/inspector/debugger/breakpoint-action-log-expected.txt</a></li>
<li><a href="#trunkLayoutTestsinspectordebuggerbreakpointactionloghtml">trunk/LayoutTests/inspector/debugger/breakpoint-action-log.html</a></li>
<li><a href="#trunkLayoutTestsinspectorunittestsbreakpointlogmessagelexerexpectedtxt">trunk/LayoutTests/inspector/unit-tests/breakpoint-log-message-lexer-expected.txt</a></li>
<li><a href="#trunkLayoutTestsinspectorunittestsbreakpointlogmessagelexerhtml">trunk/LayoutTests/inspector/unit-tests/breakpoint-log-message-lexer.html</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceControllersBreakpointLogMessageLexerjs">trunk/Source/WebInspectorUI/UserInterface/Controllers/BreakpointLogMessageLexer.js</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (209705 => 209706)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2016-12-12 09:10:07 UTC (rev 209705)
+++ trunk/LayoutTests/ChangeLog 2016-12-12 11:11:59 UTC (rev 209706)
</span><span class="lines">@@ -1,3 +1,19 @@
</span><ins>+2016-12-12 Matt Baker <mattbaker@apple.com>
+
+ Web Inspector: Breakpoint Log action should support template literals
+ https://bugs.webkit.org/show_bug.cgi?id=165116
+ <rdar://problem/29464765>
+
+ Reviewed by Joseph Pecoraro.
+
+ * inspector/debugger/breakpoint-action-log-expected.txt: Added.
+ * inspector/debugger/breakpoint-action-log.html: Added.
+ Check that breakpoint log actions support template literal placeholders.
+
+ * inspector/unit-tests/breakpoint-log-message-lexer-expected.txt: Added.
+ * inspector/unit-tests/breakpoint-log-message-lexer.html: Added.
+ Check that the lexer correctly scans breakpoint log action text.
+
</ins><span class="cx"> 2016-12-11 Simon Fraser <simon.fraser@apple.com>
</span><span class="cx">
</span><span class="cx"> REGRESSION (r200283): Transform, overflow hidden and filter combination completely hides the element
</span></span></pre></div>
<a id="trunkLayoutTestsinspectordebuggerbreakpointactionlogexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/inspector/debugger/breakpoint-action-log-expected.txt (0 => 209706)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/debugger/breakpoint-action-log-expected.txt (rev 0)
+++ trunk/LayoutTests/inspector/debugger/breakpoint-action-log-expected.txt 2016-12-12 11:11:59 UTC (rev 209706)
</span><span class="lines">@@ -0,0 +1,17 @@
</span><ins>+CONSOLE MESSAGE: line 1: `42`
+CONSOLE MESSAGE: line 1: '42'
+CONSOLE MESSAGE: line 1: abc
+CONSOLE MESSAGE: line 1: {abc}
+CONSOLE MESSAGE: line 1: {abc}
+CONSOLE MESSAGE: line 1: {abc}
+CONSOLE MESSAGE: line 1: abc
+CONSOLE MESSAGE: line 1: 137
+CONSOLE MESSAGE: line 1: close curly brace in RegExp: true
+CONSOLE MESSAGE: line 1: 42 and {"x":1,"y":2}
+Testing that "Log" breakpoint actions work correctly.
+
+inside breakpointActions a:(42) b:([object Object])
+
+== Running test suite: Debugger.BreakpointAction.Log
+-- Running test case: TemplateLiteralPlaceholders
+
</ins></span></pre></div>
<a id="trunkLayoutTestsinspectordebuggerbreakpointactionloghtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/inspector/debugger/breakpoint-action-log.html (0 => 209706)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/debugger/breakpoint-action-log.html (rev 0)
+++ trunk/LayoutTests/inspector/debugger/breakpoint-action-log.html 2016-12-12 11:11:59 UTC (rev 209706)
</span><span class="lines">@@ -0,0 +1,60 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
+<script src="resources/script-for-breakpoint-actions.js"></script>
+<script>
+function runBreakpointActions()
+{
+ breakpointActions(42, {x:1, y:2});
+}
+
+function test()
+{
+ let suite = InspectorTest.createAsyncSuite("Debugger.BreakpointAction.Log");
+
+ suite.addTestCase({
+ name: "TemplateLiteralPlaceholders",
+ description: ".",
+ test(resolve, reject) {
+ WebInspector.debuggerManager.addEventListener(WebInspector.DebuggerManager.Event.ScriptAdded, (event) => {
+ let scriptObject = event.data.script;
+ if (!/script\-for\-breakpoint\-actions\.js$/.test(scriptObject.url))
+ return;
+
+ let location = scriptObject.createSourceCodeLocation(4, 0);
+ let breakpoint = new WebInspector.Breakpoint(location);
+ breakpoint.autoContinue = true;
+
+ function addLogAction(data) {
+ breakpoint.createAction(WebInspector.BreakpointAction.Type.Log, breakpoint.actions.lastValue, data);
+ }
+
+ addLogAction("`${a}`");
+ addLogAction("'${a}'");
+ addLogAction("${'ab' + 'c'}");
+ addLogAction("${\"{abc}\"}");
+ addLogAction("${'{abc}'}");
+ addLogAction("${`{abc}`}");
+ addLogAction("${`ab${'c'}`}");
+ addLogAction("${({a: 137}).a}");
+ addLogAction("close curly brace in RegExp: ${/\\}/.test('}')}");
+ addLogAction("${a} and ${JSON.stringify(b)}");
+
+ WebInspector.debuggerManager.addBreakpoint(breakpoint);
+
+ InspectorTest.evaluateInPage("runBreakpointActions()", resolve);
+ });
+
+ InspectorTest.reloadPage();
+ }
+ });
+
+ suite.runTestCasesAndFinish();
+}
+</script>
+</head>
+<body onload="runTest()">
+ <p>Testing that "Log" breakpoint actions work correctly.</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestsinspectorunittestsbreakpointlogmessagelexerexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/inspector/unit-tests/breakpoint-log-message-lexer-expected.txt (0 => 209706)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/unit-tests/breakpoint-log-message-lexer-expected.txt (rev 0)
+++ trunk/LayoutTests/inspector/unit-tests/breakpoint-log-message-lexer-expected.txt 2016-12-12 11:11:59 UTC (rev 209706)
</span><span class="lines">@@ -0,0 +1,44 @@
</span><ins>+Check that BreakpointLogMessageLexer correctly tokenizes breakpoint action log messages. Message text can include template literal placeholders.
+
+
+== Running test suite: Debugger.BreakpointLogMessageLexer
+-- Running test case: EmptyMessage
+Input:
+PASS: Token stream should match expected tokens.
+
+-- Running test case: TextOnly
+Input: hello world
+PASS: Token stream should match expected tokens.
+
+-- Running test case: PlaceholderOnly
+Input: ${x}
+PASS: Token stream should match expected tokens.
+
+-- Running test case: NestedTemplateLiteral
+Input: ${'x' + `${'y'}`}
+PASS: Token stream should match expected tokens.
+
+-- Running test case: TextBeforePlaceholder
+Input: abc ${x}
+PASS: Token stream should match expected tokens.
+
+-- Running test case: TextAfterPlaceholder
+Input: ${x} abc
+PASS: Token stream should match expected tokens.
+
+-- Running test case: PlaceholderWithNestedBraces
+Input: ${({a: '${}'}).a}
+PASS: Token stream should match expected tokens.
+
+-- Running test case: PlaceholderWithRegExpLiteral
+Input: ${/\}/.test('${')}
+PASS: Token stream should match expected tokens.
+
+-- Running test case: MultiplePlaceholders
+Input: ${1} ${2}
+PASS: Token stream should match expected tokens.
+
+-- Running test case: ExpressionFollowedByBraces
+Input: ${1}{2}
+PASS: Token stream should match expected tokens.
+
</ins></span></pre></div>
<a id="trunkLayoutTestsinspectorunittestsbreakpointlogmessagelexerhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/inspector/unit-tests/breakpoint-log-message-lexer.html (0 => 209706)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/inspector/unit-tests/breakpoint-log-message-lexer.html (rev 0)
+++ trunk/LayoutTests/inspector/unit-tests/breakpoint-log-message-lexer.html 2016-12-12 11:11:59 UTC (rev 209706)
</span><span class="lines">@@ -0,0 +1,161 @@
</span><ins>+<!doctype html>
+<html>
+<head>
+<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
+<script src="resources/script-for-breakpoint-actions.js"></script>
+<script>
+function runBreakpointActions()
+{
+ breakpointActions(42, {x:1, y:2});
+}
+
+function test()
+{
+ let suite = InspectorTest.createSyncSuite("Debugger.BreakpointLogMessageLexer");
+
+ function addTestCase({name, input, expectedTokens}) {
+ suite.addTestCase({
+ name,
+ test() {
+ let lexer = new WebInspector.BreakpointLogMessageLexer;
+ let tokens = lexer.tokenize(input);
+ InspectorTest.log("Input: " + input);
+ InspectorTest.expectShallowEqual(tokens, expectedTokens, "Token stream should match expected tokens.");
+ return true;
+ }
+ });
+ }
+
+ addTestCase({
+ name: "EmptyMessage",
+ input: "",
+ expectedTokens: []
+ });
+
+ addTestCase({
+ name: "TextOnly",
+ input: "hello world",
+ expectedTokens: [
+ {
+ type: WebInspector.BreakpointLogMessageLexer.TokenType.PlainText,
+ data: "hello world",
+ }
+ ]
+ });
+
+ addTestCase({
+ name: "PlaceholderOnly",
+ input: "${x}",
+ expectedTokens: [
+ {
+ type: WebInspector.BreakpointLogMessageLexer.TokenType.Expression,
+ data: "x",
+ }
+ ]
+ });
+
+ addTestCase({
+ name: "NestedTemplateLiteral",
+ input: "${'x' + `${'y'}`}",
+ expectedTokens: [
+ {
+ type: WebInspector.BreakpointLogMessageLexer.TokenType.Expression,
+ data: "'x' + `${'y'}`",
+ }
+ ]
+ });
+
+ addTestCase({
+ name: "TextBeforePlaceholder",
+ input: "abc ${x}",
+ expectedTokens: [
+ {
+ type: WebInspector.BreakpointLogMessageLexer.TokenType.PlainText,
+ data: "abc ",
+ },
+ {
+ type: WebInspector.BreakpointLogMessageLexer.TokenType.Expression,
+ data: "x",
+ },
+ ]
+ });
+
+ addTestCase({
+ name: "TextAfterPlaceholder",
+ input: "${x} abc",
+ expectedTokens: [
+ {
+ type: WebInspector.BreakpointLogMessageLexer.TokenType.Expression,
+ data: "x",
+ },
+ {
+ type: WebInspector.BreakpointLogMessageLexer.TokenType.PlainText,
+ data: " abc",
+ },
+ ]
+ });
+
+ addTestCase({
+ name: "PlaceholderWithNestedBraces",
+ input: "${({a: '${}'}).a}",
+ expectedTokens: [
+ {
+ type: WebInspector.BreakpointLogMessageLexer.TokenType.Expression,
+ data: "({a: '${}'}).a",
+ }
+ ]
+ });
+
+ addTestCase({
+ name: "PlaceholderWithRegExpLiteral",
+ input: "${/\\}/.test('${')}",
+ expectedTokens: [
+ {
+ type: WebInspector.BreakpointLogMessageLexer.TokenType.Expression,
+ data: "/\\}/.test('${')",
+ }
+ ]
+ });
+
+ addTestCase({
+ name: "MultiplePlaceholders",
+ input: "${1} ${2}",
+ expectedTokens: [
+ {
+ type: WebInspector.BreakpointLogMessageLexer.TokenType.Expression,
+ data: "1",
+ },
+ {
+ type: WebInspector.BreakpointLogMessageLexer.TokenType.PlainText,
+ data: " ",
+ },
+ {
+ type: WebInspector.BreakpointLogMessageLexer.TokenType.Expression,
+ data: "2",
+ }
+ ]
+ });
+
+ addTestCase({
+ name: "ExpressionFollowedByBraces",
+ input: "${1}{2}",
+ expectedTokens: [
+ {
+ type: WebInspector.BreakpointLogMessageLexer.TokenType.Expression,
+ data: "1",
+ },
+ {
+ type: WebInspector.BreakpointLogMessageLexer.TokenType.PlainText,
+ data: "{2}",
+ },
+ ]
+ });
+
+ suite.runTestCasesAndFinish();
+}
+</script>
+</head>
+<body onload="runTest()">
+ <p>Check that BreakpointLogMessageLexer correctly tokenizes breakpoint action log messages. Message text can include template literal placeholders.</p>
+</body>
+</html>
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (209705 => 209706)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/ChangeLog 2016-12-12 09:10:07 UTC (rev 209705)
+++ trunk/Source/WebInspectorUI/ChangeLog 2016-12-12 11:11:59 UTC (rev 209706)
</span><span class="lines">@@ -1,3 +1,53 @@
</span><ins>+2016-12-12 Matt Baker <mattbaker@apple.com>
+
+ Web Inspector: Breakpoint Log action should support template literals
+ https://bugs.webkit.org/show_bug.cgi?id=165116
+ <rdar://problem/29464765>
+
+ Reviewed by Joseph Pecoraro.
+
+ * Localizations/en.lproj/localizedStrings.js:
+ New string "${expr} = expression" for breakpoint popover.
+
+ * UserInterface/Controllers/BreakpointLogMessageLexer.js: Added.
+ To support template literal placeholders in message text, it is necessary
+ to distinguish plain text parts of the message from placeholders, since
+ plain text must be escaped.
+
+ (WebInspector.BreakpointLogMessageLexer):
+ (WebInspector.BreakpointLogMessageLexer.prototype.tokenize):
+ (WebInspector.BreakpointLogMessageLexer.prototype.reset):
+ (WebInspector.BreakpointLogMessageLexer.prototype._finishPlainText):
+ (WebInspector.BreakpointLogMessageLexer.prototype._finishExpression):
+ (WebInspector.BreakpointLogMessageLexer.prototype._appendToken):
+ (WebInspector.BreakpointLogMessageLexer.prototype._consume):
+ (WebInspector.BreakpointLogMessageLexer.prototype._peek):
+ (WebInspector.BreakpointLogMessageLexer.prototype._expression):
+ (WebInspector.BreakpointLogMessageLexer.prototype._plainText):
+ (WebInspector.BreakpointLogMessageLexer.prototype._possiblePlaceholder):
+ (WebInspector.BreakpointLogMessageLexer.prototype._regExpOrStringLiteral):
+
+ * UserInterface/Controllers/DebuggerManager.js:
+ (WebInspector.DebuggerManager.prototype._debuggerBreakpointOptions):
+ Build breakpoint "options" object for DebuggerAgent. If a Log action
+ contains template literal placeholders it is changed to an Evaluate
+ action, which calls console.log with a template literal.
+
+ (WebInspector.DebuggerManager.prototype._setBreakpoint):
+ Use converted breakpoint options.
+
+ * UserInterface/Main.html:
+ * UserInterface/Test.html:
+ New file.
+
+ * UserInterface/Views/BreakpointActionView.css:
+ (.breakpoint-action-block-body > .description):
+ Styles for breakpoint Log action hint text.
+
+ * UserInterface/Views/BreakpointActionView.js:
+ (WebInspector.BreakpointActionView.prototype._updateBody):
+ Add Log action hint text element.
+
</ins><span class="cx"> 2016-12-11 Matt Baker <mattbaker@apple.com>
</span><span class="cx">
</span><span class="cx"> Web Inspector: ThreadTreeElement should have a "Resume" status button when paused
</span></span></pre></div>
<a id="trunkSourceWebInspectorUILocalizationsenlprojlocalizedStringsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js (209705 => 209706)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-12-12 09:10:07 UTC (rev 209705)
+++ trunk/Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js 2016-12-12 11:11:59 UTC (rev 209706)
</span><span class="lines">@@ -2,6 +2,7 @@
</span><span class="cx">
</span><span class="cx"> localizedStrings[" (Prototype)"] = " (Prototype)";
</span><span class="cx"> localizedStrings[" (line %s)"] = " (line %s)";
</span><ins>+localizedStrings["${expr} = expression"] = "${expr} = expression";
</ins><span class="cx"> localizedStrings["%.0f B"] = "%.0f B";
</span><span class="cx"> localizedStrings["%.0fms"] = "%.0fms";
</span><span class="cx"> localizedStrings["%.1f KB"] = "%.1f KB";
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceControllersBreakpointLogMessageLexerjs"></a>
<div class="addfile"><h4>Added: trunk/Source/WebInspectorUI/UserInterface/Controllers/BreakpointLogMessageLexer.js (0 => 209706)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/BreakpointLogMessageLexer.js (rev 0)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/BreakpointLogMessageLexer.js 2016-12-12 11:11:59 UTC (rev 209706)
</span><span class="lines">@@ -0,0 +1,197 @@
</span><ins>+/*
+ * Copyright (C) 2016 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.
+ */
+
+WebInspector.BreakpointLogMessageLexer = class BreakpointLogMessageLexer extends WebInspector.Object
+{
+ constructor()
+ {
+ super();
+
+ this._stateFunctions = {
+ [WebInspector.BreakpointLogMessageLexer.State.Expression]: this._expression,
+ [WebInspector.BreakpointLogMessageLexer.State.PlainText]: this._plainText,
+ [WebInspector.BreakpointLogMessageLexer.State.PossiblePlaceholder]: this._possiblePlaceholder,
+ [WebInspector.BreakpointLogMessageLexer.State.RegExpOrStringLiteral]: this._regExpOrStringLiteral,
+ };
+
+ this.reset();
+ }
+
+ // Public
+
+ tokenize(input)
+ {
+ this.reset();
+ this._input = input;
+
+ while (this._index < this._input.length) {
+ let stateFunction = this._stateFunctions[this._states.lastValue];
+ console.assert(stateFunction);
+ if (!stateFunction) {
+ this.reset();
+ return null;
+ }
+
+ stateFunction.call(this);
+ }
+
+ // Needed for trailing plain text.
+ this._finishPlainText();
+
+ return this._tokens;
+ }
+
+ reset()
+ {
+ this._input = "";
+ this._buffer = "";
+
+ this._index = 0;
+ this._states = [WebInspector.BreakpointLogMessageLexer.State.PlainText];
+ this._literalStartCharacter = "";
+ this._curlyBraceDepth = 0;
+ this._tokens = [];
+ }
+
+ // Private
+
+ _finishPlainText()
+ {
+ this._appendToken(WebInspector.BreakpointLogMessageLexer.TokenType.PlainText);
+ }
+
+ _finishExpression()
+ {
+ this._appendToken(WebInspector.BreakpointLogMessageLexer.TokenType.Expression);
+ }
+
+ _appendToken(type)
+ {
+ if (!this._buffer)
+ return;
+
+ this._tokens.push({type, data: this._buffer});
+ this._buffer = "";
+ }
+
+ _consume()
+ {
+ console.assert(this._index < this._input.length);
+
+ let character = this._peek();
+ this._index++;
+ return character;
+ }
+
+ _peek()
+ {
+ return this._input[this._index] || null;
+ }
+
+ // States
+
+ _expression()
+ {
+ let character = this._consume();
+
+ if (character === "}") {
+ if (this._curlyBraceDepth === 0) {
+ this._finishExpression();
+
+ console.assert(this._states.lastValue === WebInspector.BreakpointLogMessageLexer.State.Expression);
+ this._states.pop();
+ return;
+ }
+
+ this._curlyBraceDepth--;
+ }
+
+ this._buffer += character;
+
+ if (character === "/" || character === "\"" || character === "'") {
+ this._literalStartCharacter = character;
+ this._states.push(WebInspector.BreakpointLogMessageLexer.State.RegExpOrStringLiteral);
+ } else if (character === "{")
+ this._curlyBraceDepth++;
+ }
+
+ _plainText()
+ {
+ let character = this._peek();
+
+ if (character === "$")
+ this._states.push(WebInspector.BreakpointLogMessageLexer.State.PossiblePlaceholder);
+ else {
+ this._buffer += character;
+ this._consume();
+ }
+ }
+
+ _possiblePlaceholder()
+ {
+ let character = this._consume();
+ console.assert(character === "$")
+ let nextCharacter = this._peek();
+
+ console.assert(this._states.lastValue === WebInspector.BreakpointLogMessageLexer.State.PossiblePlaceholder);
+ this._states.pop();
+
+ if (nextCharacter === "{") {
+ this._finishPlainText();
+ this._consume();
+ this._states.push(WebInspector.BreakpointLogMessageLexer.State.Expression);
+ } else
+ this._buffer += character;
+ }
+
+ _regExpOrStringLiteral()
+ {
+ let character = this._consume();
+ this._buffer += character;
+
+ if (character === "\\") {
+ if (this._peek() !== null)
+ this._buffer += this._consume();
+ return;
+ }
+
+ if (character === this._literalStartCharacter) {
+ console.assert(this._states.lastValue === WebInspector.BreakpointLogMessageLexer.State.RegExpOrStringLiteral);
+ this._states.pop();
+ }
+ }
+};
+
+WebInspector.BreakpointLogMessageLexer.State = {
+ Expression: Symbol("expression"),
+ PlainText: Symbol("plain-text"),
+ PossiblePlaceholder: Symbol("possible-placeholder"),
+ RegExpOrStringLiteral: Symbol("regexp-or-string-literal"),
+};
+
+WebInspector.BreakpointLogMessageLexer.TokenType = {
+ PlainText: "token-type-plain-text",
+ Expression: "token-type-expression",
+};
</ins></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceControllersDebuggerManagerjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js (209705 => 209706)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js 2016-12-12 09:10:07 UTC (rev 209705)
+++ trunk/Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js 2016-12-12 11:11:59 UTC (rev 209706)
</span><span class="lines">@@ -823,6 +823,46 @@
</span><span class="cx"> }
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+ _debuggerBreakpointOptions(breakpoint)
+ {
+ const templatePlaceholderRegex = /\$\{.*?\}/;
+
+ let options = breakpoint.options;
+ let invalidActions = [];
+
+ for (let action of options.actions) {
+ if (action.type !== WebInspector.BreakpointAction.Type.Log)
+ continue;
+
+ if (!templatePlaceholderRegex.test(action.data))
+ continue;
+
+ let lexer = new WebInspector.BreakpointLogMessageLexer;
+ let tokens = lexer.tokenize(action.data);
+ if (!tokens) {
+ invalidActions.push(action);
+ continue;
+ }
+
+ let templateLiteral = tokens.reduce((text, token) => {
+ if (token.type === WebInspector.BreakpointLogMessageLexer.TokenType.PlainText)
+ return text + token.data.escapeCharacters("`\\");
+ if (token.type === WebInspector.BreakpointLogMessageLexer.TokenType.Expression)
+ return text + "${" + token.data + "}";
+ return text;
+ }, "");
+
+ action.data = "console.log(`" + templateLiteral + "`)";
+ action.type = WebInspector.BreakpointAction.Type.Evaluate;
+ }
+
+ const onlyFirst = true;
+ for (let invalidAction of invalidActions)
+ options.actions.remove(invalidAction, onlyFirst);
+
+ return options;
+ }
+
</ins><span class="cx"> _setBreakpoint(breakpoint, specificTarget, callback)
</span><span class="cx"> {
</span><span class="cx"> console.assert(!breakpoint.disabled);
</span><span class="lines">@@ -867,7 +907,7 @@
</span><span class="cx"> // COMPATIBILITY (iOS 7): Debugger.BreakpointActionType did not exist yet.
</span><span class="cx"> let options;
</span><span class="cx"> if (DebuggerAgent.BreakpointActionType) {
</span><del>- options = breakpoint.options;
</del><ins>+ options = this._debuggerBreakpointOptions(breakpoint);
</ins><span class="cx"> if (options.actions.length) {
</span><span class="cx"> for (let action of options.actions)
</span><span class="cx"> action.type = this._debuggerBreakpointActionType(action.type);
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceMainhtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Main.html (209705 => 209706)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-12-12 09:10:07 UTC (rev 209705)
+++ trunk/Source/WebInspectorUI/UserInterface/Main.html 2016-12-12 11:11:59 UTC (rev 209706)
</span><span class="lines">@@ -704,6 +704,7 @@
</span><span class="cx"> <script src="Controllers/ApplicationCacheManager.js"></script>
</span><span class="cx"> <script src="Controllers/BasicBlockAnnotator.js"></script>
</span><span class="cx"> <script src="Controllers/BranchManager.js"></script>
</span><ins>+ <script src="Controllers/BreakpointLogMessageLexer.js"></script>
</ins><span class="cx"> <script src="Controllers/BreakpointPopoverController.js"></script>
</span><span class="cx"> <script src="Controllers/CSSStyleManager.js"></script>
</span><span class="cx"> <script src="Controllers/CodeMirrorColorEditingController.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceTesthtml"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Test.html (209705 => 209706)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Test.html 2016-12-12 09:10:07 UTC (rev 209705)
+++ trunk/Source/WebInspectorUI/UserInterface/Test.html 2016-12-12 11:11:59 UTC (rev 209706)
</span><span class="lines">@@ -179,6 +179,7 @@
</span><span class="cx"> <script src="Proxies/HeapSnapshotProxy.js"></script>
</span><span class="cx"> <script src="Proxies/HeapSnapshotWorkerProxy.js"></script>
</span><span class="cx">
</span><ins>+ <script src="Controllers/BreakpointLogMessageLexer.js"></script>
</ins><span class="cx"> <script src="Controllers/CSSStyleManager.js"></script>
</span><span class="cx"> <script src="Controllers/DOMTreeManager.js"></script>
</span><span class="cx"> <script src="Controllers/DebuggerManager.js"></script>
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsBreakpointActionViewcss"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css (209705 => 209706)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css 2016-12-12 09:10:07 UTC (rev 209705)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css 2016-12-12 11:11:59 UTC (rev 209706)
</span><span class="lines">@@ -61,6 +61,13 @@
</span><span class="cx"> box-shadow: inset 0 0 2px hsl(0, 0%, 78%);
</span><span class="cx"> }
</span><span class="cx">
</span><ins>+.breakpoint-action-block-body > .description {
+ color: var(--text-color-gray-medium);
+ text-align: right;
+ margin-top: 6px;
+ margin-right: 2px;
+}
+
</ins><span class="cx"> .breakpoint-action-block-body > input {
</span><span class="cx"> width: 100%;
</span><span class="cx"> }
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceViewsBreakpointActionViewjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js (209705 => 209706)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js 2016-12-12 09:10:07 UTC (rev 209705)
+++ trunk/Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js 2016-12-12 11:11:59 UTC (rev 209706)
</span><span class="lines">@@ -142,6 +142,9 @@
</span><span class="cx"> if (!omitFocus)
</span><span class="cx"> setTimeout(function() { input.focus(); }, 0);
</span><span class="cx">
</span><ins>+ let descriptionElement = this._bodyElement.appendChild(document.createElement("div"));
+ descriptionElement.classList.add("description");
+ descriptionElement.textContent = WebInspector.UIString("${expr} = expression");
</ins><span class="cx"> break;
</span><span class="cx">
</span><span class="cx"> case WebInspector.BreakpointAction.Type.Evaluate:
</span></span></pre>
</div>
</div>
</body>
</html>