Commit 65f577c9 authored by Erik Luo's avatar Erik Luo Committed by Commit Bot

DevTools: unhide console prompt experiment and fix focus

Turns the console below-prompt UI experiment from hidden to
visible.

Clicking on the preview element will now focus the prompt
editor, unless it has a selection.

Bug: 810176
Change-Id: I28cb5fa9c375ab4ae5cbfdf5043d03c7d8c71057
Reviewed-on: https://chromium-review.googlesource.com/1043464
Commit-Queue: Erik Luo <luoe@chromium.org>
Reviewed-by: default avatarDmitry Gozman <dgozman@chromium.org>
Cr-Commit-Position: refs/heads/master@{#556316}
parent 8ebf51f4
......@@ -44,3 +44,17 @@ Running: testNoOpForLongText
Setting max length for evaluation to 0
Expression: "1 + 2" yielded preview: ""
Running: testClickingPreviewFocusesEditor
Prompt text set to `1 + 2`
Selection before: {"startLine":0,"startColumn":0,"endLine":0,"endColumn":0}
Clicking preview element
Selection after: {"startLine":0,"startColumn":5,"endLine":0,"endColumn":5}
Editor has focus: true
Running: testClickWithSelectionDoesNotFocusEditor
Prompt text set to `1 + 2`
Selection before: 3
Clicking preview element
Selection after: 3
Editor has focus: false
......@@ -6,11 +6,11 @@
TestRunner.addResult(`Tests that console fills the empty element below the prompt editor.\n`);
await TestRunner.loadModule('console_test_runner');
await TestRunner.showPanel('console');
await ConsoleTestRunner.waitUntilConsoleEditorLoaded();
await ConsoleTestRunner.waitForPendingViewportUpdates();
const consoleView = Console.ConsoleView.instance();
const prompt = consoleView._prompt;
const editor = await ConsoleTestRunner.waitUntilConsoleEditorLoaded();
TestRunner.runTestSuite([
async function testUnsafeExpressions(next) {
......@@ -39,6 +39,44 @@
next();
},
async function testClickingPreviewFocusesEditor(next) {
const expression = `1 + 2`;
TestRunner.addResult(`Prompt text set to \`${expression}\``);
prompt.setText(expression);
await prompt._previewRequestForTest;
editor.setSelection(TextUtils.TextRange.createFromLocation(0, 0));
TestRunner.addResult('Selection before: ' + editor.selection().toString());
TestRunner.addResult(`Clicking preview element`);
prompt._eagerPreviewElement.click();
TestRunner.addResult('Selection after: ' + editor.selection().toString());
TestRunner.addResult(`Editor has focus: ${editor.element.hasFocus()}`);
next();
},
async function testClickWithSelectionDoesNotFocusEditor(next) {
const expression = `1 + 2`;
TestRunner.addResult(`Prompt text set to \`${expression}\``);
prompt.setText(expression);
await prompt._previewRequestForTest;
document.activeElement.blur();
var firstTextNode = prompt.belowEditorElement().traverseNextTextNode();
window.getSelection().setBaseAndExtent(firstTextNode, 0, firstTextNode, 1);
TestRunner.addResult('Selection before: ' + window.getSelection().toString());
TestRunner.addResult(`Clicking preview element`);
prompt._eagerPreviewElement.click();
TestRunner.addResult('Selection after: ' + window.getSelection().toString());
TestRunner.addResult(`Editor has focus: ${editor.element.hasFocus()}`);
next();
},
]);
async function checkExpression(expression) {
......
......@@ -21,7 +21,7 @@
const consoleView = Console.ConsoleView.instance();
const viewport = consoleView._viewport;
const heightBelowPromptEditor = consoleView._prompt.heightBelowEditor();
const heightBelowPromptEditor = consoleView._prompt.belowEditorElement().offsetHeight;
const messagesCount = 150;
TestRunner.runTestSuite([
......
......@@ -46,17 +46,18 @@ Console.ConsolePrompt = class extends UI.Widget {
delete this._initialText;
if (this.hasFocus())
this.focus();
this.element.tabIndex = -1;
this.element.removeAttribute('tabindex');
this._editor.widget().element.tabIndex = -1;
this._editorSetForTest();
}
}
/**
* @return {number}
* @return {!Element}
*/
heightBelowEditor() {
return this._eagerPreviewElement.offsetHeight;
belowEditorElement() {
return this._eagerPreviewElement;
}
_onTextChanged() {
......
......@@ -833,9 +833,11 @@ Console.ConsoleView = class extends UI.VBox {
* @param {!Event} event
*/
_messagesClicked(event) {
const target = /** @type {?Node} */ (event.target);
// Do not focus prompt if messages have selection.
if (!this._messagesElement.hasSelection()) {
const clickedOutsideMessageList = event.target === this._messagesElement;
const clickedOutsideMessageList =
target === this._messagesElement || this._prompt.belowEditorElement().isSelfOrAncestor(target);
if (clickedOutsideMessageList)
this._prompt.moveCaretToEndOfPrompt();
this.focus();
......@@ -1168,7 +1170,7 @@ Console.ConsoleView = class extends UI.VBox {
if (!this._isBelowPromptEnabled)
return this._messagesElement.isScrolledToBottom();
const distanceToPromptEditorBottom = this._messagesElement.scrollHeight - this._messagesElement.scrollTop -
this._messagesElement.clientHeight - this._prompt.heightBelowEditor();
this._messagesElement.clientHeight - this._prompt.belowEditorElement().offsetHeight;
return distanceToPromptEditorBottom <= 2;
}
};
......
......@@ -108,7 +108,7 @@ Main.Main = class {
Runtime.experiments.register('applyCustomStylesheet', 'Allow custom UI themes');
Runtime.experiments.register('blackboxJSFramesOnTimeline', 'Blackbox JavaScript frames on Timeline', true);
Runtime.experiments.register('colorContrastRatio', 'Color contrast ratio line in color picker', true);
Runtime.experiments.register('consoleBelowPrompt', 'Console below-prompt UI', true);
Runtime.experiments.register('consoleBelowPrompt', 'Eager evaluation');
Runtime.experiments.register('emptySourceMapAutoStepping', 'Empty sourcemap auto-stepping');
Runtime.experiments.register('inputEventsOnTimelineOverview', 'Input events on Timeline overview', true);
Runtime.experiments.register('nativeHeapProfiler', 'Native memory sampling heap profiler', true);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment