Web Inspector: Breakpoint Log action should support template literals
authormattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 12 Dec 2016 11:11:59 +0000 (11:11 +0000)
committermattbaker@apple.com <mattbaker@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 12 Dec 2016 11:11:59 +0000 (11:11 +0000)
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.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@209706 268f45cc-cd09-0410-ab3c-d52691b4dbfc

13 files changed:
LayoutTests/ChangeLog
LayoutTests/inspector/debugger/breakpoint-action-log-expected.txt [new file with mode: 0644]
LayoutTests/inspector/debugger/breakpoint-action-log.html [new file with mode: 0644]
LayoutTests/inspector/unit-tests/breakpoint-log-message-lexer-expected.txt [new file with mode: 0644]
LayoutTests/inspector/unit-tests/breakpoint-log-message-lexer.html [new file with mode: 0644]
Source/WebInspectorUI/ChangeLog
Source/WebInspectorUI/Localizations/en.lproj/localizedStrings.js
Source/WebInspectorUI/UserInterface/Controllers/BreakpointLogMessageLexer.js [new file with mode: 0644]
Source/WebInspectorUI/UserInterface/Controllers/DebuggerManager.js
Source/WebInspectorUI/UserInterface/Main.html
Source/WebInspectorUI/UserInterface/Test.html
Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.css
Source/WebInspectorUI/UserInterface/Views/BreakpointActionView.js

index 261672d..a9e4175 100644 (file)
@@ -1,3 +1,19 @@
+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.
+
 2016-12-11  Simon Fraser  <simon.fraser@apple.com>
 
         REGRESSION (r200283): Transform, overflow hidden and filter combination completely hides the element
diff --git a/LayoutTests/inspector/debugger/breakpoint-action-log-expected.txt b/LayoutTests/inspector/debugger/breakpoint-action-log-expected.txt
new file mode 100644 (file)
index 0000000..61144dc
--- /dev/null
@@ -0,0 +1,17 @@
+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
+
diff --git a/LayoutTests/inspector/debugger/breakpoint-action-log.html b/LayoutTests/inspector/debugger/breakpoint-action-log.html
new file mode 100644 (file)
index 0000000..82e0f9a
--- /dev/null
@@ -0,0 +1,60 @@
+<!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>
diff --git a/LayoutTests/inspector/unit-tests/breakpoint-log-message-lexer-expected.txt b/LayoutTests/inspector/unit-tests/breakpoint-log-message-lexer-expected.txt
new file mode 100644 (file)
index 0000000..10b49b7
--- /dev/null
@@ -0,0 +1,44 @@
+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.
+
diff --git a/LayoutTests/inspector/unit-tests/breakpoint-log-message-lexer.html b/LayoutTests/inspector/unit-tests/breakpoint-log-message-lexer.html
new file mode 100644 (file)
index 0000000..9d28564
--- /dev/null
@@ -0,0 +1,161 @@
+<!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>
index 4b5e83d..9556cc3 100644 (file)
@@ -1,3 +1,53 @@
+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.
+
 2016-12-11  Matt Baker  <mattbaker@apple.com>
 
         Web Inspector: ThreadTreeElement should have a "Resume" status button when paused
index cccf725..50b663d 100644 (file)
@@ -2,6 +2,7 @@ var localizedStrings = new Object;
 
 localizedStrings[" (Prototype)"] = " (Prototype)";
 localizedStrings[" (line %s)"] = " (line %s)";
+localizedStrings["${expr} = expression"] = "${expr} = expression";
 localizedStrings["%.0f B"] = "%.0f B";
 localizedStrings["%.0fms"] = "%.0fms";
 localizedStrings["%.1f KB"] = "%.1f KB";
diff --git a/Source/WebInspectorUI/UserInterface/Controllers/BreakpointLogMessageLexer.js b/Source/WebInspectorUI/UserInterface/Controllers/BreakpointLogMessageLexer.js
new file mode 100644 (file)
index 0000000..9c24cb2
--- /dev/null
@@ -0,0 +1,197 @@
+/*
+ * 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",
+};
index dfee54c..827263a 100644 (file)
@@ -823,6 +823,46 @@ WebInspector.DebuggerManager = class DebuggerManager extends WebInspector.Object
         }
     }
 
+    _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;
+    }
+
     _setBreakpoint(breakpoint, specificTarget, callback)
     {
         console.assert(!breakpoint.disabled);
@@ -867,7 +907,7 @@ WebInspector.DebuggerManager = class DebuggerManager extends WebInspector.Object
         // COMPATIBILITY (iOS 7): Debugger.BreakpointActionType did not exist yet.
         let options;
         if (DebuggerAgent.BreakpointActionType) {
-            options = breakpoint.options;
+            options = this._debuggerBreakpointOptions(breakpoint);
             if (options.actions.length) {
                 for (let action of options.actions)
                     action.type = this._debuggerBreakpointActionType(action.type);
index 5e1ff0b..0615456 100644 (file)
     <script src="Controllers/ApplicationCacheManager.js"></script>
     <script src="Controllers/BasicBlockAnnotator.js"></script>
     <script src="Controllers/BranchManager.js"></script>
+    <script src="Controllers/BreakpointLogMessageLexer.js"></script>
     <script src="Controllers/BreakpointPopoverController.js"></script>
     <script src="Controllers/CSSStyleManager.js"></script>
     <script src="Controllers/CodeMirrorColorEditingController.js"></script>
index e7476e4..82da601 100644 (file)
     <script src="Proxies/HeapSnapshotProxy.js"></script>
     <script src="Proxies/HeapSnapshotWorkerProxy.js"></script>
 
+    <script src="Controllers/BreakpointLogMessageLexer.js"></script>
     <script src="Controllers/CSSStyleManager.js"></script>
     <script src="Controllers/DOMTreeManager.js"></script>
     <script src="Controllers/DebuggerManager.js"></script>
index 7b7e099..cf55d69 100644 (file)
     box-shadow: inset 0 0 2px hsl(0, 0%, 78%);
 }
 
+.breakpoint-action-block-body > .description {
+    color: var(--text-color-gray-medium);
+    text-align: right;
+    margin-top: 6px;
+    margin-right: 2px;
+}
+
 .breakpoint-action-block-body > input {
     width: 100%;
 }
index fb0a1e0..2159a40 100644 (file)
@@ -142,6 +142,9 @@ WebInspector.BreakpointActionView = class BreakpointActionView extends WebInspec
             if (!omitFocus)
                 setTimeout(function() { input.focus(); }, 0);
 
+            let descriptionElement = this._bodyElement.appendChild(document.createElement("div"));
+            descriptionElement.classList.add("description");
+            descriptionElement.textContent = WebInspector.UIString("${expr} = expression");
             break;
 
         case WebInspector.BreakpointAction.Type.Evaluate: